/* ═══════════════════════════════════════════════════════════
   SUPER TYPO — design aligné sur SuperPrint (DA)
   Tokens repris de superprint/app (CSS/main.css) :
   fonds #f8f8f8 / #fff, toolbar blanche bordure #e0e0e0,
   canvas #e8e8e8, encre #1a1a1a, IBM Plex Mono.
   Sombre : --sp-dark-* (#121212 / #16161a / #1c1c20 / #232327).
   ═══════════════════════════════════════════════════════════ */

/* Polices SuperPrint self-hosted (Bebas Neue + IBM Plex Mono) */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BebasNeue-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/BebasNeue-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexMono-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/IBMPlexMono-700-normal.woff2') format('woff2');
}

:root {
  --bg: #f8f8f8;            /* body superprint */
  --bg-workspace: #e8e8e8;  /* zone canvas superprint */
  --panel: #ffffff;         /* toolbar / cartes */
  --panel2: #fafafa;        /* sidebar superprint */
  --panel3: #f5f5f5;
  --border: #e0e0e0;        /* ligne toolbar / sidebar */
  --border-strong: #d9d9d9; /* boutons outils */
  --btn-border: #d9d9d9;
  --text: #1a1a1a;          /* encre superprint */
  --muted: #666666;
  --muted2: #888888;
  --accent: #1a1a1a;
  --accent-hover: #333333;
  --accent-soft: rgba(0,0,0,.06);
  --accent-border: rgba(0,0,0,.25);
  --danger: #c0392b;
  --ok: #1d8a4a;
  --grid-line: rgba(0,0,0,.08);
  --guide-blue: #2f6fdd;
  --guide-red: #e5484d;
  --guide-magenta: #c832c8;
  --shadow: rgba(0,0,0,.12);
  --topbar-h: 50px;
}
body.theme-dark {
  --bg: #121212;            /* sp-dark-base */
  --bg-workspace: #0c0c0f;  /* sp-dark-deepest */
  --panel: #16161a;         /* sp-dark-surface (toolbar) */
  --panel2: #1c1c20;        /* sp-dark-raised */
  --panel3: #232327;        /* sp-dark-line */
  --border: #232327;
  --border-strong: #353535;
  --btn-border: #4a4a4a;
  --text: #e8e8e8;
  --muted: #9a9a9a;
  --muted2: #7a7a7a;
  --accent: #e8e8e8;
  --accent-hover: #ffffff;
  --accent-soft: rgba(255,255,255,.07);
  --accent-border: rgba(255,255,255,.2);
  --grid-line: rgba(255,255,255,.08);
  --shadow: rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'IBM Plex Mono', 'Fira Code', monospace;  /* typo signature SuperPrint */
  font-size: 11px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
input, textarea, select { font-family: inherit; }
svg.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }

/* ═══════════ TOPBAR (blanche comme l'éditeur SuperPrint) ═══════════ */
#topbar {
  height: var(--topbar-h);
  background: var(--panel);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--border);
}
.tb-group { display: flex; align-items: center; gap: 6px; }
.tb-brand { gap: 10px; padding-right: 12px; border-right: 1px solid var(--border); }
/* Le logotype remplace l'ancien texte « SuperTyPo ». Sa hauteur est calee sur
   la topbar ; la largeur suit le ratio du fichier (pas de deformation).
   Aucune plaque de fond : le logotype se lit sur les 2 themes. */
.brand-mark { height: 26px; width: auto; display: block; flex-shrink: 0; }
.brand-logo span { color: var(--muted2); }
.brand-sub { font-size: 9px; letter-spacing: 1.5px; color: var(--muted2); }
.tb-actions { margin-left: 4px; }
.tb-right { margin-left: auto; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  font-size: 11px; cursor: pointer; transition: background .12s, border-color .12s;
}
.tb-btn:hover { background: var(--panel3); border-color: var(--border-strong); }
.tb-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tb-btn.primary:hover { background: var(--accent-hover); }
body.theme-dark .tb-btn.primary { color: #121212; }
.tb-btn:disabled { opacity: .4; cursor: default; background: transparent; color: var(--muted2); border-color: var(--border); }
.icon-btn {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--text); font-size: 15px; cursor: pointer;
}
.icon-btn:hover { background: var(--accent-soft); }
.zoom-pct {
  min-width: 46px; height: 26px; padding: 0 6px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--btn-border); border-radius: 4px;
  font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.zoom-pct:hover { background: var(--panel3); }
.sep { width: 1px; height: 20px; background: var(--border); }

/* Chips d'info police */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--btn-border);
  border-radius: 4px; color: var(--text); cursor: default;
}
.chip-label { font-size: 9px; letter-spacing: 1px; color: var(--muted2); text-transform: uppercase; }
.chip-value { font-size: 11px; font-weight: 600; }
#modifiedChip .dot { width: 7px; height: 7px; border-radius: 50%; background: #d97706; }
#modifiedChip { border-color: rgba(217,119,6,.4); }

/* ═══════════ DROP ZONE ═══════════ */
#dropArea {
  position: absolute; inset: var(--topbar-h) 0 0 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: background .15s;
}
#dropArea.dragover { background: var(--accent-soft); }
.drop-card { text-align: center; max-width: 600px; padding: 40px 24px; }
.drop-glyph { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-size: 120px; font-weight: 400; color: var(--border-strong); margin-bottom: 6px; line-height: .9; letter-spacing: 2px; }
.drop-card h1 { font-size: 16px; font-weight: 600; margin: 14px 0 10px; letter-spacing: .3px; }
.drop-card p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 24px; }
.big-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px; font-size: 12px; font-weight: 600;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 4px; cursor: pointer;
  transition: background .12s;
}
.big-btn:hover { background: var(--accent-hover); }
body.theme-dark .big-btn { color: #121212; }
body.theme-dark .big-btn svg.ic { stroke: #121212; }
.drop-hint { margin-top: 16px; font-size: 10px; color: var(--muted2); }

/* ═══════════ FONT VIEW / GRILLE ═══════════ */
#fontView { position: absolute; inset: var(--topbar-h) 0 0 0; display: flex; flex-direction: column; }
#gridToolbar {
  height: 44px; display: flex; align-items: center; gap: 12px;
  padding: 0 14px; border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.gt-title { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.gt-sub { font-size: 11px; color: var(--muted); }
.gt-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.gt-search input {
  width: 210px; height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel2); color: var(--text); font-size: 12px; outline: none;
}
.gt-search input:focus { border-color: var(--border-strong); }
.ghost-btn {
  height: 28px; padding: 0 10px; font-size: 12px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); cursor: pointer;
}
.ghost-btn:hover { background: var(--panel3); }

#sampleBar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
#sampleInput {
  flex: 1; max-width: 560px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--text); font-size: 14px; outline: none;
}
#sampleBar .hint { font-size: 11px; color: var(--muted); }
#sampleBar .spacer { flex: 1; }
#sampleBar .opt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); cursor: pointer; }

/* Grille de glyphes — zone de travail grise (#e8e8e8) comme le canvas SuperPrint */
#glyphGrid {
  flex: 1; overflow: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  align-content: start;
  /* 🎯 Lignes stables : une hauteur de rangée explicite (min 110px) empêche
     les cellules de s'effondrer quand un canvas (dont la taille interne en
     pixels est recalculée par renderGlyphToCanvas) est plus grand que le
     contenu → plus de chevauchement entre la ligne du dessous et celle du
     dessus (bug « les blocs se chevauchent en hauteur »). */
  grid-auto-rows: minmax(110px, auto);
  background: var(--bg-workspace);
}
.glyph-cell {
  position: relative;
  /* aspect-ratio supprimé : couplé à display:flex + un <canvas> à taille
     interne recalculée, il faisait s'effondrer la rangée CSS grid et les
     cellules se chevauchaient verticalement. */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color .1s, box-shadow .1s;
}
.glyph-cell:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px var(--shadow); }
.glyph-cell .gcanvas { flex: 1 1 auto; width: 100%; min-height: 0; display: block; }
.glyph-cell .glabel {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 7px;
  font-size: 10px; color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--panel2);
  flex: 0 0 auto;
}
.glyph-cell .glabel .gc { font-size: 11px; font-weight: 600; color: var(--text); }
.glyph-cell .glabel .gn { font-family: Consolas, monospace; font-size: 9px; color: var(--muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60px; }
.glyph-cell.dirty::after {
  content: '●'; position: absolute; top: 4px; right: 6px;
  color: #ffb000; font-size: 9px;
}
.glyph-cell.empty { opacity: .45; }
.empty-cell { display:none; }

/* ═══════════ ÉDITEUR ═══════════ */
#editorOverlay {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
}
#editorShell { position: absolute; inset: 0; display: flex; flex-direction: column; }
#editorTopbar {
  height: 48px; display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px var(--shadow);
  z-index: 2;
}
.et-group { display: flex; align-items: center; gap: 4px; }
.et-title { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.et-glyph {
  font-family: Georgia, serif; font-size: 30px; font-weight: 700;
  min-width: 44px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
}
.et-names { display: flex; flex-direction: column; }
.et-name { font-size: 13px; font-weight: 700; }
.et-meta { font-size: 10px; color: var(--muted); }
.et-tools { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border); gap: 2px; }
.et-right { margin-left: auto; }
.tool-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  color: var(--muted); cursor: pointer;
}
.tool-btn:hover { background: var(--accent-soft); color: var(--text); }
.tool-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
body.theme-dark .tool-btn.active { color: #111; }
.tool-btn.active svg.ic { stroke: currentColor; }
.sep-v { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.metric { display: flex; flex-direction: column; align-items: center; padding: 2px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel2); margin-right: 4px; }
.metric .m-label { font-size: 8px; letter-spacing: 1px; color: var(--muted2); }
.metric .m-value { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric input { width: 52px; font-size: 12px; font-weight: 600; border: 0; background: transparent; color: var(--text); text-align: center; outline: none; font-variant-numeric: tabular-nums; }

#editorBody { flex: 1; display: flex; min-height: 0; }
#editorCanvasWrap { flex: 1; position: relative; min-width: 0; background: var(--bg-workspace); overflow: hidden; }
#editorCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#editorHud {
  position: absolute; left: 12px; bottom: 10px;
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 10px;
  pointer-events: none;
}
#editorHud .hud-sep { color: var(--border-strong); }

/* Panneau latéral */
#sidePanel {
  width: 230px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
}
.sp-section { padding: 12px; border-bottom: 1px solid var(--border); }
.sp-title {
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.sp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.sp-label { width: 58px; font-size: 11px; color: var(--muted); }
.sp-val { font-size: 11px; color: var(--muted2); font-variant-numeric: tabular-nums; }
.sp-row input[type=number], .sp-row select {
  flex: 1; min-width: 0; height: 26px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel2); color: var(--text); font-size: 11px; outline: none;
}
.sp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-btn {
  flex: 1; height: 26px; font-size: 11px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.mini-btn:hover { background: var(--panel3); }
.sp-guides .chk { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text); margin-bottom: 7px; cursor: pointer; }
.sp-guides .chk input { accent-color: var(--accent); }

/* Liste des contours */
.contour-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 4px;
  font-size: 11px; cursor: pointer;
}
.contour-item:hover { background: var(--accent-soft); }
.contour-item.active { background: var(--accent-soft); }
.contour-item .ci-badge {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}
.contour-item .ci-n { color: var(--muted); font-family: Consolas, monospace; font-size: 10px; }
.contour-item .ci-del { margin-left: auto; background: none; border: 0; color: var(--muted2); cursor: pointer; font-size: 13px; }
.contour-item .ci-del:hover { color: var(--danger); }

/* ═══════════ AIDE ═══════════
   🆕 v1.7.424 — pop-in à COINS CARRÉS, alignée sur celles de SuperPrint / studio :
   même voile, mêmes angles droits, même ombre que .pj-overlay / .pj-card. */
#helpOverlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12,12,12,.42);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw;
}
body.theme-dark #helpOverlay { background: rgba(0,0,0,.6); }
.help-card {
  width: min(680px, 92vw);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 0; box-shadow: 0 30px 90px var(--shadow);
}
.help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 14px;
}
.help-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 16px 20px; max-height: 70vh; overflow: auto; }
.help-col h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 6px 0 10px; }
.k { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 12px; }
.k kbd {
  min-width: 52px; text-align: center;
  padding: 3px 7px; border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 0; background: var(--panel2);
  font-family: Consolas, monospace; font-size: 11px;
}
.k span { color: var(--text); }

/* ═══════════ PRÉFÉRENCES (⚙) — aligné studio SuperPrint ═══════════ */
#btnPrefs.active { background: var(--accent-soft); border-color: var(--border-strong); }
#prefsOverlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12,12,12,.42);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw;
}
body.theme-dark #prefsOverlay { background: rgba(0,0,0,.6); }
.prefs-card {
  width: min(520px, 92vw);
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 0; box-shadow: 0 30px 90px var(--shadow);
}
.prefs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 14px;
}
.prefs-body { padding: 16px 20px; max-height: 70vh; overflow: auto; }
.pref-section { margin-bottom: 18px; }
.pref-section:last-child { margin-bottom: 4px; }
.pref-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin: 0 0 10px;
}
.pref-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pref-opt {
  flex: 1 1 0; min-width: 120px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 12px; text-align: left;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 0;
  font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s;
}
.pref-opt:hover { background: var(--panel3); border-color: var(--border-strong); }
.pref-opt .pref-name { font-weight: 600; font-size: 13px; }
.pref-opt .pref-sub { font-size: 10px; color: var(--muted2); }
.pref-opt.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
body.theme-dark .pref-opt.active { color: #121212; }
body.theme-dark .pref-opt.active .pref-sub { color: rgba(0,0,0,.6); }
.pref-opt.active .pref-sub { color: rgba(255,255,255,.75); }
/* 🆕 v1.7.424 — LISTE DÉROULANTE DES LANGUES (mêmes choix que le studio
   SuperPrint, mêmes angles droits). */
.pref-select {
  display: block; width: 100%; max-width: 260px; height: 34px; padding: 0 9px;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 0;
  font-family: inherit; font-size: 12.5px; line-height: 1.4; cursor: pointer; outline: none;
}
.pref-select:focus { border-color: var(--border-strong); }
.pref-hint { margin-top: 7px; font-size: 10px; color: var(--muted2); }
/* Croix de fermeture des pop-in : angle droit comme le studio. */
.prefs-head .icon-btn, .help-head .icon-btn { border-radius: 0; }


/* Toast */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--accent); color: #fff;
  padding: 10px 18px; border-radius: 0; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 100; box-shadow: 0 8px 24px var(--shadow);
  max-width: 80vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--danger); }

/* Bannière autosave */
#autosaveBar {
  position: fixed; top: var(--topbar-h); left: 0; right: 0;
  z-index: 40;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px;
  background: #fff8e1; color: #6b5400;
  border-bottom: 1px solid #f0e2a8;
  font-size: 12.5px;
}
body.theme-dark #autosaveBar { background: #2c2616; color: #e8d9a0; border-bottom-color: #4a3f1e; }
#autosaveBar .asb-text { flex: 1; min-width: 200px; }
#autosaveBar .asb-text b { font-weight: 700; }
#autosaveBar .asb-actions { display: flex; gap: 8px; }
.asb-btn {
  height: 28px; padding: 0 14px;
  border: 1px solid #d0b84c; border-radius: 4px;
  background: transparent; color: inherit; font-size: 12px; cursor: pointer;
}
.asb-btn:hover { background: rgba(0,0,0,.05); }
.asb-btn.primary { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
body.theme-dark .asb-btn.primary { background: #ffb000; border-color: #ffb000; color: #1a1a1a; }
.asb-btn.primary:hover { background: #333; }
body.theme-dark .asb-btn.primary:hover { background: #ffc233; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 860px) {
  .brand-sub { display: none; }
  .tb-btn span, .tb-actions { font-size: 0; }
  .tb-btn { padding: 0 8px; }
  .tb-btn svg.ic { margin: 0; }
  .gt-search input { width: 120px; }
  #sidePanel { width: 180px; }
  #sampleBar .hint { display: none; }
  #fontInfoGroup { display: none !important; }
}