:root{
  --cream:#f3ebdd; --cream-2:#ebe0cc; --paper:#fffaf0; --ink:#2f2723; --ink-soft:#6c5f55; --line:rgba(47,39,35,.14);
  --wine:#9e3b33; --wine-dark:#7f2c26; --sage:#7d8c6a; --gold:#b98b3e;
  --ui:'Be Vietnam Pro',system-ui,sans-serif; --serif:'Lora',Georgia,serif; --hand:'Patrick Hand',cursive;
  --script:'Dancing Script',cursive; --sign:'Great Vibes',cursive; --mono:'Roboto Mono',monospace;
  --radius:10px; --topbar:64px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--cream);color:var(--ink);font:15px/1.5 var(--ui);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* ---------- Thanh trên ---------- */
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar);display:flex;align-items:center;gap:24px;padding:0 clamp(16px,3vw,40px);
  background:rgba(243,235,221,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{white-space:nowrap;font:500 26px var(--serif);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand em{color:var(--wine)}
.steps{display:flex;gap:4px;list-style:none;margin:0 auto;padding:0;counter-reset:s}
.steps button{border:0;background:none;padding:8px 12px;border-radius:99px;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.steps li{counter-increment:s}
.steps button:before{content:counter(s);width:20px;height:20px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:500 11px var(--mono)}
.steps button.active{background:var(--ink);color:var(--paper)}
.steps button.done:before{content:'✓';background:var(--sage);border-color:var(--sage);color:#fff}
.toggles{display:flex;gap:6px;margin-left:auto}
.icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:15px;color:var(--ink)}
.icon-btn[aria-pressed="false"]{opacity:.4;text-decoration:line-through}
body.reading .steps{visibility:hidden}

/* ---------- Bố cục ---------- */
.layout{display:grid;grid-template-columns:minmax(360px,440px) 1fr;min-height:calc(100vh - var(--topbar))}
body.reading .layout{grid-template-columns:1fr}
body.reading .composer{display:none}
.composer{padding:28px clamp(18px,2.6vw,36px) 48px;border-right:1px solid var(--line);background:var(--cream)}
.panel{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kicker{margin:0 0 6px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;margin:0 0 20px;line-height:1.12}
h1{font-size:clamp(30px,3vw,40px)} h2{font-size:clamp(26px,2.4vw,32px)}
h1 em,h2 em{color:var(--wine)}
.lead{color:var(--ink-soft);margin:-8px 0 18px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:block;margin-bottom:16px}
/* Nhãn mục: chữ thường, cỡ vừa đọc, để dấu tiếng Việt không bị chen chúc như chữ in hoa nhỏ */
.field>span,.label{display:flex;justify-content:space-between;font:600 14px/1.35 var(--ui);letter-spacing:0;color:var(--ink);margin-bottom:9px}
.field small,.label small{font-weight:400;color:var(--ink-soft)}
.group{margin-bottom:18px}
input:not([type=range]):not([type=file]),textarea{width:100%;border:1px solid #d8ccb8;background:rgba(255,252,245,.7);padding:11px 12px;border-radius:8px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(158,59,51,.12)}
/* Viền focus khi dùng bàn phím: màu rượu vang 2px, tương phản ~6:1 trên nền kem */
:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
input:not([type=range]):not([type=file]):focus-visible,textarea:focus-visible,select:focus-visible,.slug-row:focus-within{outline:2px solid var(--wine);outline-offset:1px}
.slug-row input:not([type=range]):not([type=file]):focus-visible{outline:none}
textarea{resize:vertical;line-height:1.6;font-family:var(--serif);font-size:15px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid #d8ccb8;background:rgba(255,252,245,.6);border-radius:99px;padding:7px 12px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:7px;transition:.18s}
.chip:hover{border-color:var(--ink)}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.chips.soft .chip{background:transparent;border-style:dashed;font-size:12.5px;text-align:left}
.chips.soft .chip.active{background:var(--ink);color:var(--paper);border-style:solid}
.chips.small .chip{padding:5px 10px;font-size:12px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--cream);outline:1px solid rgba(0,0,0,.15);transition:transform .15s}
.swatch.active{outline:2px solid var(--ink);transform:scale(1.12)}
.swatches.small{margin-top:10px}.swatches.small .swatch{width:22px;height:22px}
.swatch.picker{position:relative;overflow:hidden;background:conic-gradient(#e57373,#ffd54f,#81c784,#64b5f6,#ba68c8,#e57373)}
.swatch.picker input{position:absolute;inset:-6px;opacity:0;cursor:pointer}

.tabs{display:inline-flex;background:var(--cream-2);border-radius:99px;padding:3px;margin-bottom:16px}
.tabs button{border:0;background:none;padding:7px 14px;border-radius:99px;font-size:13px}
.tabs button.active{background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.1)}

.btn{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:10px 16px;border-radius:99px;font-size:14px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.18s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.primary:hover{background:#000}
.btn.ghost{border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn.seal-btn{background:var(--wine);border-color:var(--wine);color:#fff;padding:12px 20px}
.btn.seal-btn:hover{background:var(--wine-dark)}
.btn:disabled{opacity:.5;pointer-events:none}
.text-btn{border:0;background:none;color:var(--ink-soft);text-decoration:underline;font-size:13px;margin-top:14px}
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.status{font-size:13px;color:var(--ink-soft);margin:8px 0 0;min-height:20px}
.status.ok{color:#4f7a3a}.status.bad{color:var(--wine)}

.upload{display:inline-flex;margin-top:10px;font-size:12.5px;color:var(--ink-soft);border:1px dashed #b9ab95;border-radius:99px;padding:6px 12px;cursor:pointer}
.upload input{display:none}

/* Chữ ký */
.sig-pad{position:relative;height:170px;background:var(--paper);border:1px solid #d8ccb8;border-radius:var(--radius);overflow:hidden;touch-action:none}
.sig-pad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.sig-pad:after{content:'';position:absolute;left:24px;right:24px;bottom:42px;border-bottom:1px dashed #cbbda6;pointer-events:none}
.sig-x{position:absolute;left:18px;bottom:44px;color:#b9ab95;font-size:13px;pointer-events:none}
.sig-hint{position:absolute;inset:0;display:grid;place-items:center;color:#b9ab95;font-size:13px;pointer-events:none;transition:opacity .3s}
.sig-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 18px}
.sig-tools .btn{padding:6px 12px;font-size:12.5px}
.range{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.range input{width:80px;accent-color:var(--ink)}

/* Cử chỉ gấp */
.gestures{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:6px}
.gestures li{display:grid;grid-template-columns:54px 1fr;column-gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,252,245,.5)}
.gestures svg{grid-row:span 2;width:54px;height:28px;fill:none;stroke:var(--wine);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gestures b{font-weight:500;font-size:13.5px}
.gestures span{font-size:12.5px;color:var(--ink-soft)}
.gestures li.hit{border-color:var(--wine);background:rgba(158,59,51,.06)}

/* Tem */
.stamps{display:flex;flex-wrap:wrap;gap:8px}
.stamp-opt{width:48px;height:58px;padding:0;border:2px solid transparent;border-radius:4px;background:none;transition:.15s}
.stamp-opt.active{border-color:var(--ink);transform:translateY(-2px)}
.stamp-opt svg,.stamp-opt img{width:100%;height:100%;display:block}

/* Cách đặt thư */
.placements{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.place{text-align:left;border:1px solid #d8ccb8;background:rgba(255,252,245,.6);border-radius:var(--radius);padding:10px 12px;transition:.18s}
.place b{display:block;font-weight:500;font-size:13.5px;margin-bottom:2px}
.place span{font-size:12px;color:var(--ink-soft);line-height:1.4;display:block}
.place .glyph{float:right;font-size:18px;opacity:.6}
.place.active{border-color:var(--ink);background:var(--paper);box-shadow:0 0 0 1px var(--ink)}

.slug-row{display:flex;align-items:stretch;border:1px solid #d8ccb8;border-radius:8px;overflow:hidden;background:rgba(255,252,245,.7)}
.slug-prefix{padding:11px 0 11px 12px;font:13px var(--mono);color:var(--ink-soft);white-space:nowrap;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.slug-row input{border:0!important;box-shadow:none!important;background:transparent!important;padding-left:2px!important;font:13px var(--mono)!important}

/* Modal + toast */
.modal{position:fixed;inset:0;background:rgba(40,30,25,.4);display:grid;place-items:center;padding:16px;z-index:50;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.modal-card{position:relative;width:min(460px,100%);background:var(--paper);border-radius:14px;padding:28px;box-shadow:0 30px 60px rgba(40,25,15,.3);animation:rise .4s ease}
.close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:24px;color:var(--ink-soft)}
.link-row{display:flex;gap:8px;margin-bottom:12px}
.link-row input{font:13px var(--mono)!important;min-width:0}
.link-row .btn{white-space:nowrap;flex:none}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.share-grid .btn{font-size:12.5px;padding:9px 6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:99px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .composer{border-right:0;order:2}
  .stage{order:1;position:relative!important;top:0!important;height:62vh!important;min-height:430px!important}
  body.reading .stage{height:calc(100vh - var(--topbar))!important}
  .steps button{padding:4px;font-size:0;gap:0;min-width:32px;min-height:32px;justify-content:center}
  .steps button:before{width:24px;height:24px}
  .steps button:before{font-size:11px}
}
@media (max-width:480px){
  .row2{grid-template-columns:1fr}
  .placements{grid-template-columns:1fr}
  .share-grid{grid-template-columns:1fr}
  .topbar{gap:10px}
  .brand{font-size:22px}
  .steps{gap:0}
  .icon-btn{width:36px;height:36px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}