/* Vietnamese Font Editor Studio. Tokens and interface fonts: /theme.css (shared with the public site). */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 14px/1.55 var(--font-ui);font-synthesis:none;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:inherit;text-decoration:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
[hidden]{display:none!important}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(26px,2.2vw,34px);line-height:1.18;margin:.35rem 0 .5rem}
h2{font-size:20px;line-height:1.3;margin:0}
h3{font:600 15px/1.4 var(--font-ui);margin:0}
p{text-wrap:pretty}
.eyebrow{font:600 12px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.muted{color:var(--muted);font-size:13px}
.field-help{color:var(--muted);font-size:12.5px;line-height:1.6;margin:.5rem 0 1rem}

/* Icons: one-colour SVG masks, so they follow text colour and never fall back to system symbols. */
.ico{display:inline-block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ico-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.5'/%3E%3Crect x='11' y='3' width='6' height='6' rx='1.5'/%3E%3Crect x='3' y='11' width='6' height='6' rx='1.5'/%3E%3Crect x='11' y='11' width='6' height='6' rx='1.5'/%3E%3C/svg%3E")}
.ico-book{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 4.5C4 3.7 4.7 3 5.5 3H16v12H5.5C4.7 15 4 15.7 4 16.5v-12z'/%3E%3Cpath d='M4 16.5c0 .8.7 1.5 1.5 1.5H16'/%3E%3C/svg%3E")}
.ico-trash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M3.5 5.5h13M8 5.5V3.5h4v2M5 5.5l1 11h8l1-11'/%3E%3C/svg%3E")}
.ico-upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M10 13V3M6 7l4-4 4 4M4 13v3h12v-3'/%3E%3C/svg%3E")}
.ico-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M10 3v10M6 9l4 4 4-4M4 13v3h12v-3'/%3E%3C/svg%3E")}
.ico-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E")}
.ico-file{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h6.5L15 6v11.5H5z'/%3E%3Cpath d='M11.5 2.5V6H15'/%3E%3C/svg%3E")}
.ico-back{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4M9 5l-5 5 5 5'/%3E%3C/svg%3E")}
.ico-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 16.5s-6.5-3.9-6.5-8.4A3.4 3.4 0 0 1 10 6a3.4 3.4 0 0 1 6.5 2.1c0 4.5-6.5 8.4-6.5 8.4z'/%3E%3C/svg%3E")}
.ico-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='M3 5.5l7 5.5 7-5.5'/%3E%3C/svg%3E")}
.ico-external{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3.5h5.5V9M16.5 3.5L9 11M14 12v4.5H3.5V6H8'/%3E%3C/svg%3E")}
.text-btn .ico,.side-link .ico{width:15px;height:15px;vertical-align:-3px;margin-right:.35rem}
.btn .ico-external{width:14px;height:14px;vertical-align:-2px;margin-left:.2rem}
.download-option .ico{width:15px;height:15px;vertical-align:-3px}
.recent-button .ico{width:15px;height:15px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:38px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--r-md);padding:.5rem .95rem;font:600 13.5px/1.2 var(--font-ui);transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--ink-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover:not(:disabled){background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.subtle{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.subtle:hover:not(:disabled){background:var(--sunken);border-color:transparent}
.btn.large{min-height:46px;padding:.7rem 1.25rem;font-size:15px}
.btn.danger,.btn.primary.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.text-btn{background:none;border:0;padding:.2rem 0;color:var(--accent-ink);font:500 13px/1.4 var(--font-ui)}
.text-btn:hover{text-decoration:underline;text-underline-offset:3px}
.danger-text{color:var(--bad)}

/* Shell */
.sidebar{width:248px;background:var(--surface);border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;padding:20px 16px;display:flex;flex-direction:column;z-index:5}
.brand{display:flex;align-items:center;gap:.65rem;font:500 14px/1.25 var(--font-ui);margin:0 6px 28px}
.brand b{font-weight:700}
.brand-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:var(--ink);color:var(--paper);font:600 26px/1 var(--font-display);padding-bottom:3px}
.sidebar-label{font:600 11.5px/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 10px 8px}
.nav{display:flex;align-items:center;gap:.7rem;width:100%;border:0;background:transparent;border-radius:var(--r-sm);padding:.6rem .7rem;text-align:left;color:var(--ink-2);font-size:14px;margin-bottom:2px}
.nav:hover{background:var(--sunken)}
.nav.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.recent-label{margin-top:26px}
.recent-button{display:flex;gap:.5rem;align-items:center;width:100%;border:0;background:transparent;text-align:left;padding:.45rem .7rem;color:var(--ink-2);border-radius:var(--r-sm);font-size:13.5px;overflow:hidden}
.recent-button:hover{background:var(--sunken)}
.recent-button span:first-child{color:var(--faint)}
.recent-button span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-bottom{margin-top:auto;font-size:12.5px;color:var(--muted);line-height:1.6;padding:0 8px}
.sidebar-bottom small{display:block;color:var(--muted);font-size:12px;margin-top:.25rem}
.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.side-link{display:block;margin-top:.5rem;color:var(--accent-ink);font-size:13px}
.build-version{display:block;font-size:11.5px;color:var(--faint);margin-top:1rem;letter-spacing:.02em}
main{margin-left:248px;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:60px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 32px;background:rgba(248,246,241,.9);backdrop-filter:blur(6px);position:sticky;top:0;z-index:4}
.breadcrumb{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumb span{margin:0 .5rem;color:var(--line-2)}
.breadcrumb b{color:var(--ink);font-weight:600}
.page{padding:28px 32px 48px;max-width:1440px;width:100%;margin:0 auto;flex:1}
footer{padding:18px 32px;color:var(--faint);font-size:12px;display:flex;gap:1rem;border-top:1px solid var(--line)}

/* Home */
.home-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:1.5rem}
.home-head h1{font-size:clamp(28px,2.6vw,40px)}
.home-lead{color:var(--ink-2);font-size:15px;max-width:44em;margin:0}
.dropzone{display:flex;align-items:center;gap:1rem;background:var(--surface);border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:1.4rem 1.6rem;cursor:pointer;margin:0 0 2rem;transition:background .15s,border-color .15s}
.dropzone:hover,.dropzone.drag{background:var(--accent-soft);border-color:var(--accent)}
.drop-icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent-ink)}
.drop-icon .ico{width:22px;height:22px}
.dropzone strong{display:block;font-size:15px;font-weight:600}
.dropzone small{display:block;color:var(--muted);font-size:13px;margin-top:.15rem}
.drop-hint{margin-left:auto;font-size:13px;color:var(--accent-ink);font-weight:500;white-space:nowrap}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .9rem}
.section-head h2{font-size:21px}
.count{display:inline-block;font:600 12px/1.6 var(--font-ui);background:var(--sunken);color:var(--muted);padding:0 .5rem;border-radius:99px;margin-left:.4rem;vertical-align:3px}
#storage-note{margin:-.4rem 0 1rem}
.project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.project-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:1.1rem 1.2rem;text-align:left;min-height:150px;display:flex;flex-direction:column;gap:.15rem;transition:border-color .15s,box-shadow .15s}
.project-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.card-monogram{font:600 30px/1.1 var(--font-display);color:var(--ink-2)}
.format-tag{font:600 11.5px/1.5 var(--font-ui);color:var(--muted);background:var(--sunken);padding:.1rem .5rem;border-radius:99px}
.project-card h3{font-size:15.5px;margin:0 0 .2rem;overflow-wrap:anywhere}
.project-card p{color:var(--muted);font-size:12.5px;margin:0}
.empty{padding:2.2rem;text-align:center;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);grid-column:1/-1;color:var(--muted);background:var(--surface)}
.empty>span{font:600 44px/1 var(--font-display);color:var(--accent)}
.empty h3{font-size:16px;color:var(--ink);margin:.6rem 0 .3rem}
.empty p{font-size:13.5px;line-height:1.7;margin:0 auto;max-width:36em}
.workflow{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.4rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.workflow>div{display:flex;gap:.85rem}
.workflow b{font:600 20px/1 var(--font-display);color:var(--accent)}
.workflow strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.workflow small{display:block;font-size:13px;color:var(--muted);margin-top:.15rem}

/* Project (workspace) page */
.project-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.25rem;margin-bottom:1.25rem}
.project-head h1{margin:.3rem 0 .2rem;overflow-wrap:anywhere}
.project-head p{font-size:13px;color:var(--muted);margin:0}
.project-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.save-status{font-size:12.5px;color:var(--ok);margin-right:.35rem}
.font-list{display:grid;gap:10px;margin-bottom:1rem}
.font-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:.9rem 1.1rem}
.font-card:hover{border-color:var(--accent-line)}
.font-open{flex:1;display:flex;gap:1rem;align-items:center;border:0;background:transparent;text-align:left;padding:0;min-width:0}
.font-open b{display:block;font-size:15px}
.font-open small{display:block;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.font-open:hover b{color:var(--accent-ink)}
.font-actions{display:flex;gap:.9rem;flex-shrink:0}
.danger-zone{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem}
#ws-dropzone{margin-bottom:1.6rem}

/* Font workspace */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 1.25rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.stats>div{padding:.9rem 1.2rem;border-left:1px solid var(--line)}
.stats>div:first-child{border-left:0}
.stats small{display:block;font-size:12.5px;color:var(--muted)}
.stats strong{display:block;font:600 24px/1.25 var(--font-display);color:var(--ink);margin-top:.1rem}
.stats .status-value{font:600 15px/1.5 var(--font-ui);color:var(--ok);padding-top:.35rem}
.work-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.work-main{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tabs{display:flex;padding:0 1.2rem;border-bottom:1px solid var(--line);gap:1.5rem;overflow-x:auto;scrollbar-width:none}
.tab{padding:.95rem 0 .85rem;border:0;border-bottom:2px solid transparent;background:transparent;white-space:nowrap;font-size:14px;color:var(--muted);font-weight:500}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.tab-panel{padding:1.4rem}
.preview-toolbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.segmented{display:inline-flex;background:var(--sunken);padding:3px;border-radius:var(--r-md)}
.segmented button{background:transparent;border:0;font-size:13px;color:var(--ink-2);padding:.35rem .8rem;border-radius:8px;min-height:32px}
.segmented .selected{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.size-control{display:flex;align-items:center;gap:.6rem;font-size:13px;color:var(--muted)}
.size-control input{width:110px;accent-color:var(--accent)}
.size-control output{min-width:2ch;color:var(--ink);font-variant-numeric:tabular-nums}
.sample-options{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0;flex-wrap:wrap}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:.25rem .8rem;font-size:13px;color:var(--ink-2);min-height:32px}
.chip:hover{border-color:var(--ink-2)}
.chip.selected{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.sample-options .text-btn{margin-left:auto}
.field-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:.25rem}
.tab-panel textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-md);resize:vertical;color:var(--ink);padding:.6rem .75rem;font-size:14px;background:var(--paper);min-height:64px}
.specimen{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.specimen-label{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:.6rem}
.specimen-label span{font-size:12px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);border-radius:99px;padding:.05rem .55rem}
.specimen-text{font-size:52px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;font-weight:normal;font-synthesis:none}
.specimens.dark{background:#16181d;margin:0 -1.4rem;padding:0 1.4rem}
.specimens.dark .specimen{border-color:#2a2e37}
.specimens.dark .specimen-text{color:#f3f1ea}
.specimens.dark .specimen-label{color:#a3a9b5}
.preview-note{color:var(--muted);font-size:12.5px;margin-top:.9rem}
.glyph-head{margin-top:1.6rem}
.glyph-head h3{font-size:15px}
.glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
.glyph-cell{font-size:26px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.35rem 0;line-height:1.45;font-synthesis:none}
.glyph-cell:hover{border-color:var(--accent);background:var(--accent-soft)}
.glyph-cell.missing{border:1px dashed var(--mark);background:var(--mark-soft);color:var(--mark)}
.glyph-cell.selected,.glyph-cell[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line)}
.proof-block{margin-top:1.2rem;padding-top:.5rem;border-top:1px solid var(--line)}
.proof-row{padding:.7rem 0;border-bottom:1px solid var(--line)}
.proof-row span{display:block;font-size:12px;color:var(--muted);margin-bottom:.25rem}
.proof-text{line-height:1.45;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;font-synthesis:none}

/* Settings column */
.settings{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem 1.2rem;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto}
.settings-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.field{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin:.9rem 0 0}
.field input:not([type=range]),.field select,.field textarea{display:block;width:100%;margin-top:.35rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);padding:.5rem .65rem;color:var(--ink);font-size:14px;min-height:38px;min-width:0}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.glyph-controls input:focus,.editor-bar select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.slider-field output{float:right;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.slider-field input{width:100%;display:block;margin-top:.5rem;accent-color:var(--accent)}
.advanced{margin-top:1.1rem;border-top:1px solid var(--line);padding-top:.8rem;font-size:13px}
.advanced summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.advanced .text-btn{margin-top:.7rem}
.settings-divider{border-top:1px solid var(--line);margin-top:1.1rem}
.build-btn{width:100%;margin-top:1.1rem;min-height:46px;font-size:15px}
.settings-foot{font-size:12.5px;line-height:1.6;color:var(--muted);text-align:center;margin:.7rem 0 0}
.notice{background:var(--warn-soft);border:1px solid #ecd9a6;color:#5c3d00;font-size:13.5px;border-radius:var(--r-md);padding:.75rem 1rem;margin-top:1rem}
.notice.error{background:var(--bad-soft);color:#7a1d14;border-color:#f3c4bd;white-space:pre-wrap}
.progress-track{height:6px;background:var(--sunken);border-radius:99px;margin-top:1rem;overflow:hidden}
.progress-track>div{height:100%;background:var(--accent);transition:width .3s}
#progress-message{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}

/* Quality, diagnostics, AI */
.quality-header{padding:.2rem 0 1rem}
.quality-header h2{font-size:22px;margin:.3rem 0 .4rem}
.quality-header p{color:var(--muted);font-size:13.5px}
.quality-row{border-top:1px solid var(--line);padding:.8rem 0;display:flex;gap:.75rem}
.quality-icon{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:13px;font-weight:700}
.quality-icon.fail{background:var(--bad-soft);color:var(--bad)}
.quality-row b{font-size:14px;font-weight:600;display:block;color:var(--ink)}
.quality-row p{margin:.15rem 0 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 .8rem}
.diag-row{display:grid;grid-template-columns:100px 1fr;gap:.9rem;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);padding:.8rem .2rem;border-radius:0}
.diag-row:hover{background:var(--paper)}
.diag-row span{font-size:12.5px;font-weight:700}
.diag-row b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.diag-row small{display:block;color:var(--muted);font-size:13px;line-height:1.55;margin-top:.15rem}
.sev-error span{color:var(--bad)}.sev-warning span{color:var(--warn)}.sev-review span{color:var(--accent-ink)}.sev-pass span{color:var(--ok)}
.consent{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0;font-size:13.5px;color:var(--ink-2)}
.consent input{margin-top:3px;accent-color:var(--accent)}
.ai-suggestion{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line)}
.ai-suggestion b{display:block;color:var(--ink)}
.ai-suggestion small{display:block;color:var(--muted);line-height:1.5}
#ai-panel{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1rem}
#ai-panel .btn.primary{margin-top:.75rem}
#ai-panel .history-row{flex-wrap:wrap;align-items:flex-start}
#ai-panel .history-row .notice{flex-basis:100%}
#ai-panel select{width:100%}
.plan-note{margin-top:.5rem}
.history-row{padding:1rem 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.history-row h3{margin:0;font-size:15px}
.history-row p{color:var(--muted);font-size:13px;margin:.2rem 0}
.history-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.history-actions .btn{min-height:34px;font-size:13px;padding:.35rem .75rem}
.version-select{border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:13px;color:var(--ink);padding:.3rem .5rem;background:var(--surface);min-height:32px;max-width:200px}

/* Accent editor */
.editor-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.editor-bar label{font-size:13px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:.4rem}
.editor-bar select{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.35rem .5rem;background:var(--surface);min-height:36px;font-size:15px}
.editor-bar .muted{font-size:13px}
.editor-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:1.2rem;align-items:start}
.canvas-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
#glyph-canvas{display:block;width:100%;height:clamp(380px,62vh,640px);touch-action:none;user-select:none}
.editor-side{display:flex;flex-direction:column;gap:.9rem}
.studio-tools{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.studio-tools .btn{min-height:34px;font-size:13px;padding:.35rem .7rem}
.studio-tools span{flex-basis:100%;font-size:12.5px;color:var(--muted);line-height:1.5}
.glyph-controls{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;border:1px solid var(--line);border-radius:var(--r-md);padding:.8rem;background:var(--surface)}
.glyph-controls label{font-size:12.5px;font-weight:500;color:var(--ink-2);display:flex;flex-direction:column;gap:.25rem}
.glyph-controls input{width:100%;padding:.35rem .5rem;border:1px solid var(--line-2);border-radius:var(--r-sm);min-height:36px;font-variant-numeric:tabular-nums;font-size:14px}
.glyph-controls .text-btn{grid-column:1/-1;justify-self:start}
.editor-help{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}
.empty.compact{padding:2rem 1.5rem}

/* Guide */
.guide{max-width:880px}
.guide article{margin-top:1.4rem;background:var(--surface);padding:1.6rem 1.8rem;border:1px solid var(--line);border-radius:var(--r-lg)}
.guide article b{display:block;margin-top:1.4rem;color:var(--ink);font-size:15px;font-weight:600}
.guide article b:first-child{margin-top:0}
.guide article p{font-size:14.5px;color:var(--ink-2);line-height:1.75;margin:.35rem 0 0}

/* Dialogs and toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-md);box-shadow:var(--shadow-2);z-index:60;font-size:13.5px;max-width:min(560px,90vw)}
dialog{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem 1.7rem;max-width:480px;width:calc(100% - 32px);color:var(--ink-2);background:var(--surface);box-shadow:0 24px 80px rgba(21,23,28,.22)}
dialog::backdrop{background:rgba(21,23,28,.42);backdrop-filter:blur(2px)}
dialog h2{font-size:24px;margin:.45rem 0 .6rem}
dialog p{font-size:14px;line-height:1.7;color:var(--ink-2)}
.dialog-close{float:right;border:0;background:none;color:var(--muted);font-size:24px;line-height:1;margin:-.4rem -.4rem 0 0;padding:.3rem .5rem;border-radius:var(--r-sm)}
.dialog-close:hover{background:var(--sunken);color:var(--ink)}
.dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.download-option{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--line-2);border-radius:var(--r-md);padding:.85rem 1rem;margin:.6rem 0;background:var(--surface)}
.download-option:hover{border-color:var(--accent);background:var(--accent-soft)}
.download-option b{font-size:15px;color:var(--ink)}
.download-option span{font-size:13px;color:var(--muted)}
button.download-option{width:100%;font:inherit;cursor:pointer;text-align:left}
#license-dialog .btn{margin:.5rem .5rem 0 0}
#ask-input,#move-target{width:100%;min-height:40px;padding:.5rem .7rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
#trash-list{max-height:50vh;overflow:auto;margin:.75rem 0 1.1rem}

/* Responsive */
@media (max-width:1200px){
  .work-layout{grid-template-columns:minmax(0,1fr) 270px}
  .editor-body{grid-template-columns:1fr}
  .glyph-controls{grid-template-columns:repeat(5,minmax(0,1fr))}
  .glyph-controls .text-btn{grid-column:auto;align-self:end}
}
@media (max-width:1000px){
  .sidebar{width:72px;padding:18px 12px;align-items:center}
  .brand{margin:0 0 22px}
  .brand>span:last-child,.sidebar-label,.recent-label,#recent,.sidebar-bottom{display:none}
  .nav{justify-content:center;padding:.65rem}
  .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  main{margin-left:72px}
  .work-layout{grid-template-columns:1fr}
  .settings{position:static;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
  .settings-title,.settings-divider,.settings-foot,#build-progress,.settings .field-help,.advanced{grid-column:1/-1}
}
@media (max-width:760px){
  .topbar{padding:0 16px;height:56px}
  .page{padding:20px 16px 36px}
  .home-head,.project-head{flex-direction:column;align-items:stretch}
  .home-head .btn{align-self:flex-start}
  .drop-hint{display:none}
  .workflow{grid-template-columns:1fr;gap:1rem}
  .stats{grid-template-columns:1fr 1fr}
  .stats>div:nth-child(3){border-left:0}
  .stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .settings{display:block}
  .glyph-controls{grid-template-columns:1fr 1fr}
  .specimen-text{font-size:38px}
  .font-card{flex-direction:column;align-items:stretch}
  .font-actions{justify-content:flex-end}
  footer{padding:16px}
}
@media (max-width:600px){
  .sidebar{position:sticky;top:0;width:100%;height:auto;flex-direction:row;gap:.25rem;padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);inset:auto}
  .brand{margin:0 auto 0 0}
  .nav{width:auto;margin:0}
  main{margin-left:0}
  .topbar{position:static}
  .breadcrumb{font-size:12.5px}
  .tab-panel{padding:1rem}
  .specimens.dark{margin:0 -1rem;padding:0 1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* AI inside the accent editor */
.ai-glyph{margin-top:1rem;padding:.9rem;border:1px solid var(--accent-line);border-radius:var(--r-md);background:linear-gradient(180deg,var(--accent-soft),var(--surface) 80%);font-size:13.5px}
.ai-glyph[hidden]{display:none}
.ai-glyph-head{display:flex;align-items:center;gap:.45rem;margin-bottom:.5rem;color:var(--ink)}
.ai-spark{width:16px;height:16px;flex:none;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l1.9 5.1 5.1 1.9-5.1 1.9L10 15.5l-1.9-5.1L3 8.5l5.1-1.9zM16 13l.8 2.2 2.2.8-2.2.8L16 19l-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5l1.9 5.1 5.1 1.9-5.1 1.9L10 15.5l-1.9-5.1L3 8.5l5.1-1.9zM16 13l.8 2.2 2.2.8-2.2.8L16 19l-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.ai-glyph .compact-field{display:grid;gap:.3rem;margin:.4rem 0;font-size:12.5px;color:var(--muted)}
.ai-glyph .compact-field input{width:100%;min-height:36px;padding:.35rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font:inherit;color:var(--ink)}
.ai-glyph .consent{margin:.5rem 0;font-size:12.5px}
.ai-note{margin:.7rem 0 .3rem;color:var(--ink-2)}
.ai-sug{display:grid;gap:.45rem;padding:.6rem 0;border-top:1px solid var(--line)}
.ai-sug b{display:block;font-weight:600}
.ai-sug small{display:block;color:var(--muted);line-height:1.5}
.ai-sug-actions{display:flex;gap:.4rem;flex-wrap:wrap}

/* AI provider picker (web Studio) */
.ai-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.5rem;margin:1rem 0}
.ai-preset{position:relative;display:grid;gap:.1rem;padding:.6rem .7rem;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.ai-preset input{position:absolute;opacity:0;pointer-events:none}
.ai-preset b{font-size:14px}
.ai-preset small{font-size:11.5px;color:var(--muted);line-height:1.35}
.ai-preset:hover{border-color:var(--accent-line)}
.ai-preset:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.ai-preset:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.ai-preset.recommended::after{content:"Khuyến nghị";position:absolute;top:-.55rem;right:.5rem;font-size:10.5px;font-weight:700;color:#fff;background:var(--accent);border-radius:99px;padding:.05rem .45rem}
.ref-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ref-code{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.4rem .6rem;border:1px dashed var(--accent-line);border-radius:var(--r-md);background:var(--surface)}
.ref-code span{font-size:12px;color:var(--muted)}
.ref-code code{font:700 15px/1 ui-monospace,Consolas,'Cascadia Mono',monospace;letter-spacing:.06em;color:var(--accent-ink)}
.btn.small{min-height:32px;padding:.35rem .7rem;font-size:12.5px}

/* Step-by-step progress in the font view */
.flow{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin:0 0 1rem;overflow:hidden}
.flow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.flow-steps li{display:flex;gap:.6rem;align-items:center;padding:.75rem .9rem;min-width:0;position:relative;color:var(--muted)}
.flow-steps li+li{border-left:1px solid var(--line)}
.flow-steps b{display:block;font-size:13px;font-weight:600;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-steps small{display:block;font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);font:700 12px/1 var(--font-ui);color:var(--muted);background:var(--surface)}
.flow-steps li.done{color:var(--ink-2)}
.flow-steps li.done .flow-num{background:var(--ok,#1f7a4d);border-color:var(--ok,#1f7a4d)}
.flow-steps li.done .flow-num::after{content:"";width:11px;height:11px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.flow-steps li.current{color:var(--accent-ink);background:var(--accent-soft)}
.flow-steps li.current .flow-num{border-color:var(--accent);background:var(--accent);color:#fff}
.flow-steps li.current::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.flow-next{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;padding:.75rem .9rem}
.flow-next p{margin:0;flex:1 1 320px;font-size:13.5px;color:var(--ink-2)}
.flow-actions{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center}
@media (max-width:1000px){.flow-steps small{display:none}}
@media (max-width:760px){.flow-steps{display:flex}.flow-steps li{flex:none;padding:.6rem}.flow-steps li:not(.current) b{display:none}.flow-steps li.current{flex:1 1 auto}.flow-steps b{font-size:12.5px}}

/* Attention pulse used by the guide to point at a control */
@keyframes vfe-pulse{0%{box-shadow:0 0 0 0 rgba(51,69,207,.55)}70%{box-shadow:0 0 0 12px rgba(51,69,207,0)}100%{box-shadow:0 0 0 0 rgba(51,69,207,0)}}
.pulse{animation:vfe-pulse 1.2s ease-out 2}

/* Spotlight tour */
.tour{position:fixed;inset:0;z-index:60}
.tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(21,23,28,.55);transition:all .25s ease;pointer-events:none}
.tour-card{position:fixed;width:min(360px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem;box-shadow:var(--shadow-2)}
.tour-card h3{font:600 18px/1.3 var(--font-display);margin:.25rem 0 .4rem}
.tour-card p{margin:0 0 .9rem;color:var(--ink-2);font-size:14px;line-height:1.6}
.tour-count{font-size:12px;font-weight:600;color:var(--accent-ink)}
.tour-actions{display:flex;gap:.5rem;align-items:center}
.tour-actions span{flex:1}
@media (prefers-reduced-motion:reduce){.tour-spot{transition:none}.pulse{animation:none;outline:3px solid var(--accent)}}