:root{
  --paper:#fbfaf6;
  --ink:#25231f;
  --muted:#7a756c;
  --line:#e8dfd2;
  --warm:#b86b43;
  --warm-dark:#7a3f26;
  --card:rgba(255,255,255,.72);
  --shadow:0 24px 80px rgba(64,42,22,.10);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(184,107,67,.14), transparent 32%),
    radial-gradient(circle at 82% 16%, rgba(122,63,38,.08), transparent 30%),
    linear-gradient(135deg,#fffdf8 0%,var(--paper) 58%,#f3eadf 100%);
}
.shell{
  width:min(960px,92vw);
  margin:0 auto;
  padding:56px 0 64px;
}
.hero{
  text-align:center;
  padding:42px 20px 34px;
}
.mark{
  width:56px;height:56px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  color:var(--warm);
  background:rgba(255,255,255,.54);
  box-shadow:var(--shadow);
  font-size:30px;
}
.eyebrow,.label{
  margin:0 0 8px;
  color:var(--warm-dark);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:700;
}
h1{
  margin:0;
  font-size:clamp(48px,8vw,86px);
  letter-spacing:.08em;
  font-weight:800;
}
.subtitle{
  margin:14px auto 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:28px;
  margin-top:22px;
  backdrop-filter:blur(14px);
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:20px;
}
h2{
  margin:0;
  font-size:24px;
}
.status{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  color:var(--muted);
  font-size:13px;
  background:rgba(255,255,255,.6);
  white-space:nowrap;
}
.input,.textarea{
  width:100%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  border-radius:18px;
  padding:15px 16px;
  outline:none;
  color:var(--ink);
  font-size:16px;
}
.input:focus,.textarea:focus{
  border-color:rgba(184,107,67,.55);
  box-shadow:0 0 0 4px rgba(184,107,67,.10);
}
.textarea{
  margin-top:12px;
  min-height:210px;
  resize:vertical;
  line-height:1.8;
}
.actions{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}
button{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:12px 20px;
  background:var(--ink);
  color:white;
  font-weight:700;
  cursor:pointer;
}
button:hover{transform:translateY(-1px)}
button.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.note{
  margin:16px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.entries-list{
  display:grid;
  gap:12px;
}
.empty{
  color:var(--muted);
  padding:18px;
  border:1px dashed var(--line);
  border-radius:18px;
}
.entry{
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.62);
}
.entry h3{
  margin:0 0 8px;
  font-size:18px;
}
.entry time{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
}
.entry p{
  margin:0;
  color:#423d35;
  line-height:1.75;
  white-space:pre-wrap;
}
@media(max-width:640px){
  .shell{padding-top:28px}
  .panel{padding:20px;border-radius:22px}
  .panel-head{display:block}
  .status{display:inline-block;margin-top:12px}
}