/* Copy all CSS from original HTML here */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root{
  --paper:#FFF9F0; --paper-2:#FFF2E1; --ink:#2B2438; --ink-soft:#5A5270;
  --twilight:#3B3465; --twilight-deep:#241F3D; --coral:#FF8763; --coral-dark:#E8683F;
  --gold:#FFC857; --teal:#5FBFB3; --line: rgba(43,36,56,0.12);
}
*{box-sizing:border-box;}
body{ margin:0; font-family:'Noto Sans SC', sans-serif;
  background: radial-gradient(circle at 15% 8%, rgba(255,200,87,0.18), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(95,191,179,0.16), transparent 45%), var(--paper);
  color:var(--ink); min-height:100vh; }
.tr{ display:block; font-family:'Noto Sans SC', sans-serif; font-style:italic; font-weight:400; color:var(--teal); }
h1 .tr, h2 .tr{ font-size:0.42em; margin-top:6px; color:var(--teal); font-style:italic; }
p .tr, label .tr, .btn .tr, .to-line .tr{ font-size:0.85em; color:var(--ink-soft); font-style:italic; margin-top:2px; }

.app{ max-width:780px; margin:0 auto; padding:32px 20px 60px; }
.screen{ display:none; animation:fadein .4s ease; }
.screen.active{ display:block; }
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.brand{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; margin-bottom:28px; text-align:center; }
.brand .row1{ display:flex; align-items:center; gap:10px; }
.brand .star{ color:var(--gold); font-size:22px; }
.brand span.label{ font-size:14px; letter-spacing:1.5px; color:var(--ink-soft); font-weight:500; }
.brand span.label-id{ font-size:11px; letter-spacing:1px; color:var(--teal); font-style:italic; }

.hero{ text-align:center; padding: 10px 10px 30px; }
.hero h1{ font-family:'ZCOOL KuaiLe', sans-serif; font-size: 40px; color:var(--twilight); margin: 0 0 6px; line-height:1.25; }
.hero h1 .accent{ color:var(--coral); }
.hero p.sub{ color:var(--ink-soft); font-size:16px; max-width:500px; margin:0 auto 8px; line-height:1.7; }
.hero p.sub.id-text{ font-size:14px; font-style:italic; color:var(--teal); margin-bottom:26px; }
.postcard-hero{ position:relative; margin: 20px auto 30px; max-width:460px;
  background: linear-gradient(135deg, var(--twilight) 0%, var(--twilight-deep) 100%);
  border-radius:18px; padding: 30px 26px; color:#fff; text-align:left; box-shadow: 0 18px 40px rgba(36,31,61,0.25); }
.postcard-hero::after{ content:"2040"; position:absolute; top:16px; right:18px; font-family:'ZCOOL KuaiLe', sans-serif;
  border:2px dashed rgba(255,255,255,0.5); border-radius:10px; padding:6px 10px; font-size:13px;
  letter-spacing:2px; transform:rotate(6deg); color:var(--gold); }
.postcard-hero p{ margin:0; font-size:15px; line-height:1.9; opacity:0.92; }
.postcard-hero p.id-text{ font-size:13px; font-style:italic; opacity:0.7; margin-top:8px; }
.postcard-hero .stamp-line{ margin-top:16px; font-size:12px; letter-spacing:1px; color:var(--gold); opacity:0.85; }
.postcard-hero .stamp-line .tr{ color:var(--gold); opacity:0.7; font-size:0.9em; }
.target-badge{ display:inline-block; margin-top:14px; background:rgba(255,200,87,0.18); border:1px solid rgba(255,200,87,0.4);
  border-radius:999px; padding:6px 14px; font-size:12px; color:var(--gold); }

.field{ margin-bottom:16px; text-align:left; }
.field label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px; font-weight:500;}
.field label .tr{ display:block; font-size:12px; margin-top:2px; }
input[type="text"], input[type="password"], textarea{ width:100%; font-family:'Noto Sans SC', sans-serif; font-size:15px;
  padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:#fff; color:var(--ink);
  outline:none; transition:border-color .15s; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus{ border-color:var(--coral); }
textarea{ min-height:120px; resize:vertical; line-height:1.8; font-size:16px; }

.btn{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:'Noto Sans SC', sans-serif; font-weight:700; font-size:15px; padding: 11px 24px; border-radius: 999px;
  border:none; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; line-height:1.3; }
.btn .tr{ font-size:11px; font-weight:400; }
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--coral); color:#fff; box-shadow:0 8px 20px rgba(255,135,99,0.35); }
.btn-primary .tr{ color:rgba(255,255,255,0.85); }
.btn-primary:hover{ background:var(--coral-dark); }
.btn-ghost{ background:transparent; color:var(--twilight); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--twilight); }
.btn-soft{ background:var(--paper-2); color:var(--twilight); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }
.btn-row{ display:flex; gap:12px; justify-content:center; margin-top:10px; flex-wrap:wrap;}
.btn-small{ padding:7px 16px; font-size:13px; }

.admin-link{ display:block; text-align:center; margin-top:34px; font-size:12px; color: var(--ink-soft); opacity:0.6;
  text-decoration:underline; cursor:pointer; background:none; border:none; line-height:1.6; }
.admin-link:hover{ opacity:1; }

.find-box{ margin-top:18px; background:var(--paper-2); border-radius:16px; padding:18px 20px; }
.find-box h3{ font-family:'ZCOOL KuaiLe', sans-serif; font-size:17px; color:var(--twilight); margin:0 0 2px;}
.find-box .tr{ font-size:12px; margin-bottom:12px; }
.find-row{ display:flex; gap:8px; }
.find-row input{ flex:1; }
#find-results{ margin-top:12px; }
#find-results .hint{ font-size:13px; color:var(--ink-soft); }

.path{ display:flex; align-items:flex-start; justify-content:space-between; margin: 6px 0 24px; padding:0 2px; }
.node-wrap{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.path .node{ width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ink-soft);
  flex-shrink:0; z-index:1; transition: all .2s; cursor:pointer; }
.path .node:hover{ border-color:var(--coral); transform:scale(1.08); }
.path .node.done{ background:var(--teal); border-color:var(--teal); color:#fff; }
.path .node.current{ background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 0 0 4px rgba(255,135,99,0.18); }
.node-label{ font-size:10px; color:var(--ink-soft); margin-top:5px; max-width:58px; text-align:center; line-height:1.3; cursor:pointer; }
.node-label.current{ color:var(--coral); font-weight:700; }
.path .seg{ flex:1; height:2px; background:var(--line); margin:15px -2px 0; }
.path .seg.done{ background:var(--teal); }

.card{ background:#fff; border-radius:18px; padding:26px 24px; border:1px solid var(--line); box-shadow: 0 10px 30px rgba(43,36,56,0.06); }
.card .eyebrow{ font-size:12px; letter-spacing:1.5px; color:var(--teal); font-weight:700; margin-bottom:2px;}
.card .eyebrow .tr{ color:var(--teal); opacity:0.75; letter-spacing:0.5px; font-style:italic; font-weight:400; margin-top:2px;}
.card h2{ font-family:'ZCOOL KuaiLe', sans-serif; font-size:24px; color:var(--twilight); margin:10px 0 14px; line-height:1.4;}

.section-block{ margin-bottom:16px; }
.section-block summary{ cursor:pointer; font-size:13px; color:var(--twilight); font-weight:700; padding:10px 12px;
  background:var(--paper-2); border-radius:10px; list-style:none; display:flex; align-items:center; gap:6px;}
.section-block summary::-webkit-details-marker{ display:none; }
.section-block summary .tr2{ font-weight:400; font-style:italic; color:var(--ink-soft); font-size:11px; margin-left:4px;}
.section-block summary::before{ content:"💭"; }
.qa-list{ padding:10px 4px 2px; }
.qa-item{ font-size:13px; margin-bottom:8px; line-height:1.5; }
.qa-item .qzh{ color:var(--ink); }
.qa-item .qid{ display:block; color:var(--ink-soft); font-style:italic; font-size:12px; }

.chip-title{ font-size:12px; color:var(--ink-soft); margin:14px 0 6px; font-weight:500;}
.chip-title .tr2{ font-style:italic; color:var(--teal); }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 4px; }
.chip{ background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:8px 12px; font-size:14px;
  cursor:pointer; color:var(--twilight); transition: all .15s; text-align:left; line-height:1.4; }
.chip .pinyin{ display:block; font-size:11px; color:var(--coral); font-weight:500; }
.chip .chip-id{ display:block; font-size:11px; font-style:italic; color:var(--ink-soft); }
.chip:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink);}
.chip:hover .chip-id, .chip:hover .pinyin{ color:var(--ink); opacity:0.8; }
.chip-starter{ background:var(--paper-2); border-color:var(--teal); }
.chip-starter .chip-id{ color:var(--ink-soft); }

.charcount{ text-align:right; font-size:12px; color:var(--ink-soft); margin-top:4px; }
.charcount b{ color:var(--teal); }

.likert{ margin-bottom: 22px; }
.likert p{ font-size:15px; margin:0 0 2px; font-weight:500; }
.likert p.id-text{ font-size:13px; font-style:italic; color:var(--teal); margin:0 0 10px; font-weight:400;}
.likert .faces{ display:flex; gap:10px; justify-content:space-between; }
.likert .face{ flex:1; text-align:center; padding:10px 4px; border-radius:12px; border:1.5px solid var(--line);
  cursor:pointer; font-size:22px; background:#fff; transition: all .15s; }
.likert .face.sel{ border-color:var(--coral); background:var(--paper-2); transform: scale(1.05); }
.likert .face small{ display:block; font-size:9px; color:var(--ink-soft); margin-top:4px; line-height:1.4; }
.likert .face small .tr2{ display:block; font-style:italic; opacity:0.8; }

.postcard-final{ position:relative; background: linear-gradient(160deg, var(--twilight-deep), var(--twilight));
  border-radius:20px; padding:34px 28px; color:#fff; margin-bottom:20px; }
.postcard-final::before{ content:"★"; position:absolute; top:18px; right:22px; color:var(--gold); font-size:20px; }
.postcard-final .to-line{ font-size:12px; letter-spacing:2px; color:var(--gold); margin-bottom:14px; }
.postcard-final .to-line .tr{ font-size:0.85em; letter-spacing:0.5px; opacity:0.75; margin-top:2px; }
.postcard-final .story-text{ font-size:16px; line-height:2; white-space:pre-wrap; font-family:'Noto Sans SC', sans-serif; }

.word-target{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; }
.word-target .count-box{ background:var(--paper-2); border-radius:14px; padding:10px 18px; text-align:center; }
.word-target .count-box .num{ font-size:26px; font-weight:900; color:var(--twilight); font-family:'ZCOOL KuaiLe', sans-serif;}
.word-target .count-box .num.ok{ color:var(--teal); }
.word-target .count-box .lbl{ font-size:11px; color:var(--ink-soft); }

.footer-note{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:26px; line-height:1.8; }
.footer-note .tr{ font-style:italic; opacity:0.85; }

.admin-item{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; background:#fff; }
.admin-item .meta{ font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.admin-item .snippet{ font-size:14px; line-height:1.6; white-space:pre-wrap; }
.admin-login{ max-width:320px; margin:0 auto; text-align:center; }
.admin-error{ display:none; color:var(--coral-dark); font-size:13px; margin-top:8px; }
.helper-note{ font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.7; background:var(--paper-2); border-radius:10px; padding:10px 12px;}
.helper-note .tr{ font-style:italic; opacity:0.9; }

.loader{ display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--coral); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

.btn-save { background: var(--teal); color: #fff; }
.btn-save .tr { color: rgba(255,255,255,0.85); }
.btn-save:hover { background: #4a9e94; }

.btn-submit { background: var(--gold); color: var(--twilight); }
.btn-submit .tr { color: var(--twilight); opacity: 0.7; }
.btn-submit:hover { background: #e8b84a; }

.save-indicator { display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: 12px; margin-left: 8px; }
.save-indicator.saved { background: #d4edda; color: #155724; }
.save-indicator.unsaved { background: #f8d7da; color: #721c24; }