/* ============ MASARI REDESIGN v2 — Conservative only ============ */
:root {
  --font-ui: 'Alexandria', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-en: 'Inter', 'Alexandria', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 6px 16px -4px rgba(15,23,42,.10), 0 2px 4px -1px rgba(15,23,42,.04);
  --shadow-lg: 0 24px 48px -18px rgba(15,23,42,.18);
  --header-h: 58px;

  /* Conservative palette with a slightly crisper purple */
  --bg: #fafbfc;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --surface-soft: #eef0f4;
  --border: #e4e7ec;
  --border-strong: #cfd3da;
  --text: #0f1115;
  --text-2: #4a4f58;
  --text-3: #868c96;
  --accent: #5a4fd6;            /* slightly sharper, slightly deeper */
  --accent-hover: #4a3dcf;
  --accent-soft: #ece9fb;
  --accent-ink: #2e2597;
  --danger: #d64545;
  --success: #3f8f5a;
  --preview-bg: #eef0f4;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ Temporary Saudi NT support theme ============ */
html[data-theme="saudi-nt"] {
  --bg: #f7fbf8;
  --panel: #ffffff;
  --panel-2: #f1f8f4;
  --surface-soft: #e8f3ed;
  --border: #d3e6da;
  --border-strong: #a9cbb8;
  --text: #062d1b;
  --text-2: #2b5740;
  --text-3: #6d8878;
  --accent: #007a3d;
  --accent-hover: #005f30;
  --accent-soft: #dff5e8;
  --accent-ink: #004926;
  --danger: #b42318;
  --success: #008f4d;
  --preview-bg: #e8f4ed;
}

html[data-theme="saudi-nt"] body {
  background:
    linear-gradient(135deg, rgba(0,122,61,.045), rgba(255,255,255,.82) 38%, rgba(214,177,83,.055)),
    var(--bg);
}

html[data-theme="saudi-nt"] .app {
  background:
    linear-gradient(120deg, rgba(0,122,61,.045), transparent 32%),
    var(--bg);
}

html[data-theme="saudi-nt"] .topbar {
  background:
    linear-gradient(90deg, rgba(0,122,61,.08), transparent 34%, rgba(214,177,83,.08)),
    #ffffff;
  border-bottom-color: rgba(0,73,38,.16);
  box-shadow: 0 10px 30px -26px rgba(0,73,38,.46);
}

html[data-theme="saudi-nt"] .brand {
  gap: 12px;
  flex: 1 1 auto;
}

html[data-theme="saudi-nt"] .brand-mark {
  width: 38px;
  height: 38px;
  padding: 4px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.36);
  overflow: hidden;
}

html[data-theme="saudi-nt"] .brand-mark img {
  width: 100%;
  height: 92%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: translateY(-2px);
  transform-origin: center;
}

html[data-theme="saudi-nt"] .brand-text {
  color: var(--accent-ink);
}

html[data-theme="saudi-nt"] .brand-name,
html[data-theme="saudi-nt"] .brand-sub {
  color: var(--accent-ink);
}

html[data-theme="saudi-nt"] .brand-sub {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
  opacity: .82;
}

html[data-theme="saudi-nt"] .seasonal-topline {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-inline-start: 18px;
  margin-inline-end: auto;
  padding: 7px 16px;
  min-width: 330px;
  border: 1px solid rgba(0,73,38,.20);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #004926, #007a3d);
  box-shadow: 0 12px 26px -20px rgba(0,73,38,.65), inset 0 1px 0 rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 700;
}

html[data-theme="saudi-nt"] .seasonal-topline b {
  color: #f4d56f;
  font-weight: 800;
}

html[data-theme="saudi-nt"] .topbar-creator {
  display: none;
}

html[data-theme="saudi-nt"] .btn-primary,
html[data-theme="saudi-nt"] .stepper-btn.primary,
html[data-theme="saudi-nt"] .c-btn-row button.active {
  background: linear-gradient(180deg, #008f4d, #005f30);
  box-shadow: 0 10px 22px -14px rgba(0,95,48,.8);
}

html[data-theme="saudi-nt"] .btn-primary:hover {
  box-shadow: 0 14px 28px -16px rgba(0,95,48,.85);
}

html[data-theme="saudi-nt"] .nav-item.active,
html[data-theme="saudi-nt"] .guide-btn,
html[data-theme="saudi-nt"] .date-trigger-edit {
  background: rgba(0,122,61,.09);
}

html[data-theme="saudi-nt"] .ats-badge {
  background: #f5fbf7;
  border-color: rgba(0,122,61,.16);
  color: #004926;
}

html[data-theme="saudi-nt"] .progress-fill {
  background: linear-gradient(90deg, #007a3d, #d6b153);
}

html[data-theme="saudi-nt"] .preview-scroll {
  background:
    linear-gradient(rgba(232,244,237,.90), rgba(232,244,237,.90)),
    radial-gradient(circle at 1px 1px, rgba(0,73,38,.12) 1px, transparent 1px);
  background-size: auto, 18px 18px;
}

html[data-theme="saudi-nt"] .template-info-banner {
  background: #f6fbf8;
}

html[data-theme="saudi-nt"] .bitaqa-card {
  background: linear-gradient(135deg, #043f25, #006f39 68%, #0b4b2e);
  border-color: rgba(0,73,38,.20);
  box-shadow: 0 12px 24px -18px rgba(0,73,38,.70);
}

html[data-theme="saudi-nt"] .bitaqa-shine {
  top: -48%;
  right: -28%;
  width: 145%;
  height: 210%;
  background: radial-gradient(circle at 28% 20%, rgba(244,213,111,.18), transparent 40%);
}

html[data-theme="saudi-nt"] .bitaqa-logo {
  background: rgba(244,213,111,.18);
  border: 1px solid rgba(244,213,111,.36);
}

html[data-theme="saudi-nt"] .bitaqa-new {
  color: #004926;
  background: #f4d56f;
  box-shadow: 0 6px 14px -10px rgba(0,0,0,.55);
}

html[data-theme="saudi-nt"] .bitaqa-cta {
  background: rgba(255,255,255,.12);
  border-color: rgba(244,213,111,.38);
}

html[data-theme="saudi-nt"] .bitaqa-card:hover .bitaqa-cta {
  background: rgba(244,213,111,.20);
}

.saudi-support-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 66px;
  gap: 14px;
  align-items: center;
  min-height: 116px;
  margin: 0 0 18px;
  padding: 14px 16px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  direction: ltr;
  background:
    linear-gradient(90deg, rgba(0,73,38,.92), rgba(0,122,61,.66) 58%, rgba(255,255,255,.88)),
    url("assets/saudi-nt-team.jpg") center / cover;
  box-shadow: 0 18px 36px -28px rgba(0,73,38,.50);
}

.saudi-support-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,73,38,.88), rgba(0,122,61,.48) 58%, rgba(255,255,255,.80) 100%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(0,73,38,.12));
}

.saudi-support-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.saudi-support-panel > * {
  position: relative;
  z-index: 1;
}

.saudi-support-media {
  grid-column: 2;
  grid-row: 1;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 14px 26px -20px rgba(0,0,0,.40);
  justify-self: center;
  align-self: center;
  overflow: hidden;
}

.saudi-support-media img {
  width: 100%;
  height: 92%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: translateY(-3px);
  transform-origin: center;
}

.saudi-support-copy {
  grid-column: 1;
  grid-row: 1;
  color: #fff;
  max-width: 460px;
  direction: rtl;
  text-align: center;
  justify-self: end;
}

.saudi-support-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffeaa6;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.20);
  font-size: 10.5px;
  font-weight: 800;
}

.saudi-support-copy h1 {
  margin: 6px 0 0;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: 0;
  white-space: nowrap;
}

.saudi-support-copy p {
  display: none;
}

.saudi-support-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
}

.saudi-support-tags span,
.saudi-support-tags b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.23);
  background: rgba(255,255,255,.13);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}

.saudi-support-tags b {
  color: #f7d568;
  background: rgba(0,0,0,.18);
}

.saudi-support-tags span {
  display: none;
}

html:not([data-theme="saudi-nt"]) .saudi-support-panel,
html:not([data-theme="saudi-nt"]) .seasonal-topline {
  display: none !important;
}

@media (max-width: 900px) {
  html[data-theme="saudi-nt"] .topbar {
    background:
      linear-gradient(90deg, rgba(0,122,61,.10), rgba(255,255,255,.96) 42%, rgba(244,213,111,.12)),
      #ffffff;
    border-bottom-color: rgba(0,73,38,.16);
    box-shadow: 0 8px 24px -22px rgba(0,73,38,.45);
  }

  html[data-theme="saudi-nt"] .brand-name {
    color: var(--accent-ink);
    font-weight: 800;
  }

  html[data-theme="saudi-nt"] .brand-sub {
    display: none;
  }

  html[data-theme="saudi-nt"] .brand-mark {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0,122,61,.12);
    box-shadow: 0 10px 22px -16px rgba(0,73,38,.55);
  }

  .saudi-support-panel {
    grid-template-columns: 1fr 56px;
    gap: 12px;
    min-height: 122px;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
    background-position: center;
  }

  .saudi-support-media {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    padding: 7px;
  }

  .saudi-support-copy h1 {
    font-size: 20px;
    white-space: normal;
  }

  .saudi-support-copy p {
    display: none;
  }

  .saudi-support-tags {
    gap: 5px;
    margin-top: 8px;
  }

  .saudi-support-tags span,
  .saudi-support-tags b {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 10.5px;
  }
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body,#root{height:100%}
body{
  font-family:var(--font-ui);
  background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
button{font-family:inherit;color:inherit}
input,textarea,select{font-family:inherit;color:inherit;font-size:inherit}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.22);background-clip:padding-box}

/* ============ App shell ============ */
.app{
  display:grid;
  grid-template-rows:var(--header-h) 1fr;
  height:100vh; width:100%;
  background:var(--bg);
}

/* Top bar */
.topbar{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px 0 20px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:relative; z-index:10;
  gap: 12px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:13px;
  box-shadow: 0 2px 6px -1px rgba(90,79,214,.35);
}
.brand-name{font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand-sub{
  font-size:12px;color:var(--text-3);font-weight:500;
  padding-right:10px;margin-right:10px;border-right:1px solid var(--border);
}
.topbar-creator{
  font-size:12px; color:var(--text-3); font-weight:500;
  display:flex; gap:4px; align-items:center;
}
.topbar-creator a{color:var(--accent);text-decoration:none;font-weight:600;transition:color .15s}
.topbar-creator a:hover{color:var(--accent-hover);text-decoration:underline}
.topbar-creator .heart{color:var(--danger);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

.topbar-actions{display:flex;align-items:center;gap:6px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 12px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--text-2);
  font-size:13px;font-weight:500;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .05s;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-soft);color:var(--text)}
.btn:active{transform:translateY(.5px)}
.btn svg{width:15px;height:15px}
.btn-ghost{color:var(--text-2)}
.btn-ghost.danger:hover{background:color-mix(in oklab,var(--danger) 10%,transparent);color:var(--danger)}
.btn-secondary{background:var(--panel);border-color:var(--border);color:var(--text)}
.btn-secondary:hover{background:var(--surface-soft);border-color:var(--border-strong)}
.btn-primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-hover));
  color:#fff;font-weight:600;
  box-shadow:0 2px 6px -1px rgba(90,79,214,.35);
}
.btn-primary:hover{box-shadow:0 4px 10px -2px rgba(90,79,214,.45)}
.btn-icon{width:34px;padding:0;flex-shrink:0}

/* ============ Body ============ */
.body{
  display:grid;
  grid-template-columns:265px 1fr 42%;
  min-height:0; height:100%;
}
.body.preview-collapsed{grid-template-columns:265px 1fr 0}

/* Medium screens — hide preview, widen editor */
@media (max-width:1180px) and (min-width:901px){
  .body{grid-template-columns:240px 1fr 0 !important}
  .preview{display:none !important}
  .body.preview-collapsed{grid-template-columns:240px 1fr 0}
}

/* Topbar mobile preview btn */
.topbar-preview-btn{gap:5px}
.topbar-preview-pct{
  font-size:11px; font-weight:700;
  background:rgba(90,79,214,.14); color:var(--accent-ink);
  padding:2px 7px; border-radius:99px;
}

/* ============ Sidebar ============ */
.sidebar{
  background:var(--panel-2);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  min-height:0;
}
.sidebar-scroll{flex:1;overflow-y:auto;padding:14px 10px 8px}
.sh-box { padding: 4px 12px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.sh-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sh-title { font-size: 13px; font-weight: 800; color: var(--text); }
.sh-reset-btn { background: var(--surface-soft); border: 1px solid var(--border); color: var(--text-2); font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: 0.2s; }
.sh-reset-btn:hover { background: var(--border-soft); color: var(--text); }
.sh-hint { font-size: 11px; color: var(--text-3); font-weight: 500; line-height: 1.5; }
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-size:13px;font-weight:500;
  cursor:pointer; position:relative;
  transition:background .14s, color .14s;
  user-select:none;
  white-space:nowrap;
}
.nav-right-actions {
  display: flex; align-items: center; justify-content: flex-end;
  width: 24px; flex-shrink: 0;
}
.nav-item .nav-count{
  font-size:11px;font-variant-numeric:tabular-nums;
  background:var(--surface-soft); color:var(--text-3);
  padding:1px 6px;border-radius:99px;min-width:18px;text-align:center;
}
.nav-item.active .nav-count{background:color-mix(in oklab,var(--accent) 18%,transparent);color:var(--accent-ink)}

.nav-reorder{
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  display:flex; flex-direction:column; gap:1px;
  opacity:0; transition:opacity .15s; pointer-events: none;
}
.nav-item:hover .nav-reorder{opacity:1; pointer-events: auto;}
.nav-item.active .nav-reorder{opacity:.7; pointer-events: auto;}
.nav-item.active .nav-reorder:hover{opacity:1; pointer-events: auto;}
.nav-reorder-btn{
  width:18px; height:12px;
  background:transparent; border:0;
  display:grid; place-items:center;
  color:var(--text-3); cursor:pointer;
  border-radius:3px;
  transition:background .12s, color .12s;
  padding:0;
}
.nav-reorder-btn:hover{background:rgba(0,0,0,.06); color:var(--text)}
.nav-reorder-btn:disabled{opacity:.25; cursor:not-allowed}
.nav-reorder-btn svg{width:11px;height:11px}
.nav-item:hover{background:var(--surface-soft);color:var(--text)}
.nav-item.active{
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-weight:600;
}
.nav-item.active::before{
  content:""; position:absolute; right:-10px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--accent);
}
.nav-item svg{width:16px;height:16px;flex-shrink:0}
.nav-item .nav-label{flex:1}

.reset-order-btn {
  background: transparent; border: 1px solid transparent; cursor: pointer;
  color: var(--text-3); padding: 4px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; line-height: 1; display: flex; align-items: center; gap: 4px; transition: all .15s;
}
.reset-order-btn svg { width: 12px; height: 12px; }
.reset-order-btn:hover { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }

.sidebar-footer{padding:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.ats-badge{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border:1px solid #bbf7d0;
  border-radius:var(--r-sm);
  color:#14532d;
}
.guide-btn {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 15%, transparent);
  border-radius: 12px; text-decoration: none; transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer; width: 100%; text-align: right;
}
.guide-btn:hover {
  transform: translateY(-2px); 
  box-shadow: 0 10px 25px -5px color-mix(in oklab, var(--accent) 20%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent) 25%, transparent);
}
.guide-btn-icon {
  width: 38px; height: 38px; border-radius: 10px; 
  background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 40%, transparent);
}
.guide-btn-icon svg { width: 18px; height: 18px; }
.guide-btn-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gb-title { font-size: 14px; font-weight: 800; color: var(--accent); letter-spacing: -0.3px; }
.gb-sub { font-size: 10.5px; color: color-mix(in oklab, var(--text-2) 90%, var(--accent)); font-weight: 500; }
.guide-btn > svg { width: 16px; height: 16px; color: var(--accent); opacity: 0.4; transition: .2s; margin-right: auto; }
.guide-btn:hover > svg { opacity: 1; transform: translateX(-4px); }

.nav-pin-icon { width: 14px !important; height: 14px !important; min-width: 14px; color: var(--accent); opacity: 0.7; margin-left: auto; order: -1; }
.ats-badge .ats-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2);flex-shrink:0}
.ats-badge .ats-title{font-size:12px;font-weight:700;line-height:1.3}
.ats-badge .ats-sub{font-size:11px;color:#166534;line-height:1.3}

.progress-bar{height:5px;width:100%;background:var(--surface-soft);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:99px;transition:width .45s var(--ease)}
.progress-label{font-size:11px;color:var(--text-3);display:flex;justify-content:space-between}
.sidebar-footer-row{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.sidebar-footer-label{color:var(--text-3);display:inline-flex;align-items:center;gap:5px}

/* ============ Editor ============ */
.editor{
  min-height:0; overflow-y:auto;
  background:var(--bg);
  padding:32px 40px 120px;
}
.editor-inner{max-width:680px;margin:0 auto}

.editor-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:4px}
.editor-heading h2{font-size:22px;font-weight:700;letter-spacing:-.015em;margin:0;color:var(--text)}
.editor-heading .step-meta{font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.03em}
.editor-sub{font-size:13px;color:var(--text-2);margin:0 0 24px;line-height:1.6}

/* --- entry animation for section --- */
.section-enter{animation:sectionIn .36s var(--ease) both}
@keyframes sectionIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Animated item card entry */
.item-card{
  animation:itemIn .35s var(--ease) both;
}
@keyframes itemIn{
  from{opacity:0;transform:translateY(6px) scale(.995)}
  to{opacity:1;transform:none}
}

/* Fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row.three{grid-template-columns:1fr 1fr 1fr}
.field-label{font-size:12px;font-weight:600;color:var(--text-2);display:flex;justify-content:space-between;align-items:center}
.field-label .field-hint{font-weight:500;color:var(--text-3);font-size:11px}
.field-label .req{color:var(--danger);margin-right:2px}

.input,.textarea,.select{
  width:100%; padding:9px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--text); font-size:13px;
  transition:border-color .15s,box-shadow .15s,background .15s;
  outline:none;
}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--border-strong)}
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent);
}
.input.ltr,.textarea.ltr{direction:ltr;text-align:left;font-family:var(--font-en)}
.textarea{min-height:84px;resize:vertical;line-height:1.55}

.input-with-icon{position:relative}
.input-with-icon .icon-left{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
[dir="rtl"] .input-with-icon.ltr-input .icon-left{right:auto;left:10px}
.input-with-icon .input{padding-right:34px}
[dir="rtl"] .input-with-icon.ltr-input .input{padding-right:12px;padding-left:34px}

/* Collapsible item card */
.item-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  margin-bottom:10px; overflow:hidden;
  transition:border-color .15s,box-shadow .18s var(--ease);
}
.item-card:hover{border-color:var(--border-strong)}
.item-card.open{box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.item-card.closing{overflow:hidden}
.item-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.item-header .drag-handle{color:var(--text-3);width:14px;height:14px;flex-shrink:0;cursor:grab}
.item-header .drag-handle:hover{color:var(--text-2)}
.item-header .chevron{color:var(--text-3);transition:transform .22s var(--ease);width:16px;height:16px}
.item-card.open .chevron{transform:rotate(90deg)}
[dir="rtl"] .item-card.open .chevron{transform:rotate(-90deg)}
.item-title{flex:1;min-width:0}
.item-title .t1{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-title .t2{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-title .t1.empty{color:var(--text-3);font-weight:500;font-style:italic}
.item-actions{display:flex;align-items:center;gap:2px}
.item-action-btn{
  background:transparent;border:0;padding:6px;border-radius:var(--r-xs);
  color:var(--text-3);cursor:pointer;transition:background .12s,color .12s;
  display:grid;place-items:center;
}
.item-action-btn:hover{background:var(--surface-soft);color:var(--text)}
.item-action-btn.danger:hover{background:color-mix(in oklab,var(--danger) 10%,transparent);color:var(--danger)}
.item-action-btn svg{width:14px;height:14px}
.item-action-btn:disabled{opacity:.3;cursor:not-allowed}
.item-body{padding:4px 14px 14px;border-top:1px solid var(--border);animation:bodyIn .28s var(--ease) both;transform-origin:top}
.item-body.closing{animation:bodyOut .22s var(--ease) both;pointer-events:none}
@keyframes bodyIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes bodyOut{from{opacity:1;max-height:680px;transform:translateY(0) scaleY(1)}to{opacity:0;max-height:0;transform:translateY(-6px) scaleY(.98);padding-top:0;padding-bottom:0}}

/* Bullets */
.bullets{display:flex;flex-direction:column;gap:6px}
.bullet-row{display:flex;align-items:flex-start;gap:8px}
.bullet-dot{width:5px;height:5px;border-radius:50%;background:var(--text-3);margin-top:15px;flex-shrink:0}
.bullet-row .input{padding:8px 10px;font-size:13px}
.bullet-row .remove-btn{background:transparent;border:0;color:var(--text-3);padding:6px;border-radius:var(--r-xs);cursor:pointer;transition:color .12s,background .12s;margin-top:4px}
.bullet-row .remove-btn:hover{color:var(--danger);background:color-mix(in oklab,var(--danger) 8%,transparent)}

.btn-add-bullet,.btn-add-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;
  background:transparent;
  border:1px dashed var(--border-strong);
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-size:12px;font-weight:500;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.btn-add-bullet:hover,.btn-add-item:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-add-item{width:100%;justify-content:center;padding:10px;margin-top:4px}
.btn-add-bullet svg,.btn-add-item svg{width:13px;height:13px}

/* Chips */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;background:var(--panel);
  border:1px solid var(--border); border-radius:99px;
  color:var(--text-2); font-size:12px;font-weight:500;
  cursor:pointer; transition:all .15s;
}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ============ Elegant date picker v2 ============ */
.datepicker{
  display:flex; flex-direction:column; gap:10px;
}
.dp-tabs-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.dp-tabs{display:flex;gap:2px;padding:3px;background:var(--surface-soft);border-radius:var(--r-sm)}
.dp-tab{padding:5px 14px;font-size:12px;background:transparent;border:0;border-radius:calc(var(--r-sm) - 2px);color:var(--text-2);cursor:pointer;font-weight:600;transition:all .15s}
.dp-tab.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow-xs)}
.dp-present-toggle{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-2); font-weight:500;
  cursor:pointer; user-select:none;
  padding: 5px 10px; border-radius: var(--r-sm);
  border:1px solid var(--border);
  background: var(--panel);
  transition: all .15s;
}
.dp-present-toggle:hover{background:var(--surface-soft)}
.dp-present-toggle input{accent-color:var(--accent); margin:0}
.dp-present-toggle.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

.dp-range{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:stretch;
}
.dp-slot{
  position:relative;
  display:flex; flex-direction:column; gap:4px;
}
.dp-slot-label{font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase;padding:0 2px}
.dp-pill{
  display:flex; align-items:center; gap:0;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.dp-pill:hover{border-color:var(--border-strong)}
.dp-pill.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
.dp-pill.disabled{opacity:.55;background:var(--surface-soft)}

.dp-pill-btn{
  flex:1; min-width:0;
  background:transparent; border:0;
  padding:10px 12px;
  color:var(--text); font-family:var(--font-en);
  font-size:13.5px; font-weight:600;
  cursor:pointer; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .14s;
}
.dp-pill-btn:hover{background:var(--surface-soft)}
.dp-pill-btn.open{background:var(--accent-soft);color:var(--accent-ink)}
.dp-pill-btn.muted{color:var(--text-3);font-weight:500}
.dp-pill-btn .caret{width:11px;height:11px;color:var(--text-3);transition:transform .15s}
.dp-pill-btn.open .caret{transform:rotate(180deg);color:var(--accent)}

.dp-pill-divider{width:1px;background:var(--border);align-self:stretch}

.dp-arrow-icon{
  align-self:flex-end; padding-bottom:10px;
  color:var(--text-3); display:flex;
}
.dp-arrow-icon svg{width:14px;height:14px}

.dp-pill.disabled .dp-pill-btn{cursor:not-allowed}

.dp-popover{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  padding:8px; z-index:30;
  animation:popIn .18s var(--ease) both;
}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.dp-pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.dp-pop-grid.years{grid-template-columns:repeat(4,1fr);max-height:200px;overflow-y:auto;padding-right:2px}
.dp-pop-item{
  padding:10px 4px; text-align:center;
  background:transparent; border:1px solid transparent;
  border-radius:var(--r-sm);
  font-size:12.5px; font-weight:600; color:var(--text);
  cursor:pointer; font-family:var(--font-en);
  transition:background .12s, color .12s, border-color .12s;
}
.dp-pop-item:hover{background:var(--surface-soft);border-color:var(--border)}
.dp-pop-item.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.dp-pop-item.current-year{color:var(--accent);font-weight:700}

.dp-foot-bar{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-size:12px;
}
.dp-summary-text{color:var(--text-3); font-family:var(--font-en); font-variant-numeric:tabular-nums}
.dp-summary-text b{color:var(--text-2); font-weight:600}
.dp-clear{background:transparent;border:0;font-size:12px;color:var(--text-3);cursor:pointer;padding:4px 8px;border-radius:var(--r-xs);transition:all .12s;font-weight:500}
.dp-clear:hover{color:var(--danger);background:color-mix(in oklab,var(--danger) 10%,transparent)}

/* Editor stepper */
.editor-stepper{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:18px}
.editor-stepper.hidden{display:none !important}
.stepper-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px; border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--border);
  color:var(--text-2); font-size:13px;font-weight:500;cursor:pointer;
  transition:all .15s;
}
.stepper-btn:hover{border-color:var(--border-strong);color:var(--text)}
.stepper-btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-hover));border-color:var(--accent);color:#fff;box-shadow:0 2px 6px -1px rgba(90,79,214,.35)}
.stepper-btn.primary:hover{box-shadow:0 4px 10px -2px rgba(90,79,214,.45)}
.stepper-btn:disabled{opacity:.4;cursor:not-allowed}
.stepper-btn svg{width:14px;height:14px}

/* Inline notice */
.notice{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;
  background:color-mix(in oklab,#f59e0b 10%,var(--panel));
  border:1px solid color-mix(in oklab,#f59e0b 30%,var(--border));
  border-radius:var(--r-sm);
  font-size:12.5px;color:#8a4d00; margin-bottom:20px;
}
.notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:#b8811c}
.notice b{font-weight:700}

/* ============ Preview ============ */
.preview{
  background:var(--preview-bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  min-height:0;
}
.preview-topbar{
  padding:10px 14px;background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;
}
.preview-topbar-label{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:8px}
.preview-topbar-label .dot{width:6px;height:6px;border-radius:99px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}

.template-switch{display:flex;gap:2px;padding:2px;background:var(--surface-soft);border-radius:var(--r-sm)}
.template-switch-btn{
  padding:5px 10px;font-size:12px;font-weight:500;
  background:transparent;border:0;border-radius:calc(var(--r-sm) - 2px);
  color:var(--text-2); cursor:pointer; transition:all .15s;
  display:inline-flex; align-items:center; gap:4px;
}
.template-switch-btn.active{background:var(--panel);color:var(--text);box-shadow:var(--shadow-xs);font-weight:600}
.template-switch-btn .ats{font-size:9px;background:#dcfce7;color:#14532d;padding:1px 5px;border-radius:99px;font-weight:700;letter-spacing:.02em}

.preview-scroll{
  flex:1; overflow:auto;
  padding:28px;
  display:flex; align-items:flex-start; justify-content:center;
  background:var(--preview-bg);
  background-image:radial-gradient(circle at 1px 1px, color-mix(in oklab,#000 8%,transparent) 1px, transparent 1px);
  background-size:18px 18px;
}

.page-zoom-controls{display:flex;align-items:center;gap:4px;background:var(--surface-soft);border-radius:var(--r-sm);padding:2px}
.page-zoom-controls button{width:26px;height:26px;border:0;background:transparent;color:var(--text-2);cursor:pointer;border-radius:calc(var(--r-sm) - 2px);display:grid;place-items:center}
.page-zoom-controls button:hover{background:var(--panel);color:var(--text)}
.page-zoom-controls .zoom-label{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:36px;text-align:center;font-weight:500}

.template-info-banner{
  background: color-mix(in oklab, var(--accent) 5%, var(--panel));
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex; align-items: flex-start; gap: 12px;
}
.ti-icon{
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--accent); color: #fff;
  border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--accent) 60%, transparent);
}
.ti-icon svg{ width: 16px; height: 16px; }
.ti-content{
  flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); line-height: 1.5;
}
.ti-content strong{ color: var(--text); font-weight: 700; font-size: 13.5px; }
.ti-ats-text{
  font-size: 11.5px; font-weight: 600; color: #16a34a; margin-top: 4px;
}

.customizer-bar{
  display: flex; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--panel); font-size: 12px; align-items:flex-start;
}
.c-group{ display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.c-label-col{ display: flex; flex-direction: column; gap: 1px; }
.c-label{ font-weight: 700; color: var(--text); font-size: 11.5px; }
.c-hint{ font-size: 9.5px; color: var(--text-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-btn-row{ display: flex; gap: 4px; }
.c-btn-row button{ 
  padding: 4px 6px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 6px; 
  cursor:pointer; color: var(--text-2); font-weight:600; font-size: 11px; transition: all .15s; flex: 1;
}
.c-btn-row button:hover{ background: var(--border-soft); color: var(--text); }
.c-btn-row button.active{ 
  background: var(--accent); color: #fff; 
  border-color: var(--accent-hover); box-shadow: var(--shadow-sm); 
}
.c-sep{ width: 1px; background: var(--border); margin: 0; align-self: stretch; }

/* A4 Size & Spacing Modifiers */
.size-sm .cv{ zoom: 0.92; }
.size-lg .cv{ zoom: 1.08; }

.spacing-compact .cv .cv-section{ margin-top: 6pt !important; margin-bottom: 6pt !important; }
.spacing-compact .cv .cv-section-title{ margin-bottom: 3pt !important; padding-bottom: 2pt !important; }
.spacing-compact .cv .cv-item{ margin-bottom: 4pt !important; }
.spacing-compact .cv .cv-h{ margin-bottom: 8pt !important; padding-bottom: 6pt !important; }
.spacing-compact .cv .cv-contact{ margin-top: 2pt !important; }

.spacing-spacious .cv .cv-section{ margin-top: 22pt !important; margin-bottom: 18pt !important; scroll-margin: 10px;}
.spacing-spacious .cv .cv-section-title{ margin-bottom: 10pt !important; padding-bottom: 6pt !important; }
.spacing-spacious .cv .cv-item{ margin-bottom: 14pt !important; }
.spacing-spacious .cv .cv-h{ margin-bottom: 18pt !important; padding-bottom: 14pt !important; }
.spacing-spacious .cv .cv-contact{ margin-top: 8pt !important; }

/* A4 paper */
.a4-wrap{transition:transform .3s var(--ease)}
.a4{
  width:210mm; min-height:297mm; background:white;
  box-shadow:0 30px 60px -20px rgba(15,23,42,.25), 0 0 0 1px rgba(0,0,0,.05);
  transform-origin:top center;
  margin-bottom:40px;
  animation:paperIn .4s var(--ease) both;
}
@keyframes paperIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* ============ CV templates (LTR English, ATS-safe) ============ */
.cv{direction:ltr;text-align:left;color:#1a1a1a;padding:16mm 14mm;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:10.5pt;line-height:1.4}
.cv ul{margin:0;padding-left:16pt}
.cv ul li{margin-bottom:2pt}

/* Classic: centered header, horizontal rules */
.cv.cv-classic .cv-h-name{font-size:24pt;font-weight:800;letter-spacing:-.4pt;text-align:center;margin-bottom:4pt}
.cv.cv-classic .cv-h-high{font-size:11pt;font-weight:600;color:#444;text-align:center;margin-bottom:6pt}
.cv.cv-classic .cv-contact{text-align:center;font-size:10pt;color:#333;display:flex;justify-content:center;flex-wrap:wrap;gap:4pt 10pt}
.cv.cv-classic .cv-contact .sep{color:#bbb}
.cv.cv-classic .cv-section{margin-top:14pt}
.cv.cv-classic .cv-section-title{font-size:11.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.5pt;border-bottom:1.5pt solid #ddd;padding-bottom:2pt;margin-bottom:6pt}
.cv.cv-classic .cv-item{margin-bottom:8pt}
.cv.cv-classic .cv-row-1{display:flex;justify-content:space-between;font-weight:700;font-size:11pt}
.cv.cv-classic .cv-row-2{display:flex;justify-content:space-between;font-size:10pt;color:#444;margin-bottom:3pt}
.cv.cv-classic .cv-role{font-style:italic}
.cv.cv-classic .cv-bullets{font-size:10pt}
.cv.cv-classic .cv-skill-cat{font-size:10pt;margin-bottom:2pt}
.cv.cv-classic .cv-skill-cat b{color:#111;font-weight:700}

/* Modern: clean, single accent rule (still ATS-safe: plain sections, no columns) */
.cv.cv-modern{padding:14mm}
.cv.cv-modern .cv-h{padding-bottom:8pt;border-bottom:2pt solid var(--accent,#111);margin-bottom:12pt}
.cv.cv-modern .cv-h-name{font-size:22pt;font-weight:700;letter-spacing:-.3pt;color:#111}
.cv.cv-modern .cv-h-high{font-size:10.5pt;color:#444;font-weight:600;margin-top:2pt}
.cv.cv-modern .cv-contact{font-size:9.5pt;color:#444;display:flex;gap:12pt;flex-wrap:wrap;margin-top:4pt}
.cv.cv-modern .cv-contact span{display:inline-flex;align-items:center;gap:4pt}
.cv.cv-modern .cv-section{margin-bottom:10pt}
.cv.cv-modern .cv-section-title{font-size:10pt;font-weight:700;text-transform:uppercase;letter-spacing:1.2pt;color:var(--accent,#111);margin-bottom:6pt;border-bottom:.5pt solid #ddd;padding-bottom:3pt}
.cv.cv-modern .cv-item{margin-bottom:8pt}
.cv.cv-modern .cv-item .cv-row-1{display:flex;justify-content:space-between;font-weight:700;font-size:11pt;color:#111}
.cv.cv-modern .cv-item .cv-row-2{display:flex;justify-content:space-between;font-size:10pt;color:#555;margin-bottom:3pt}
.cv.cv-modern .cv-item .cv-role{color:#444;font-weight:600;font-style:normal}
.cv.cv-modern .cv-date{color:#666;font-weight:500;font-variant-numeric:tabular-nums}
.cv.cv-modern .cv-bullets{font-size:10pt;color:#222}
.cv.cv-modern .cv-skill-cat{font-size:10pt;margin-bottom:2pt}
.cv.cv-modern .cv-skill-cat b{color:#111;font-weight:700}

/* Minimal: single-column, ultra-clean (ATS-perfect) */
.cv.cv-minimal{padding:18mm;font-size:10pt}
.cv.cv-minimal .cv-h{margin-bottom:14pt}
.cv.cv-minimal .cv-h-name{font-size:20pt;font-weight:600;letter-spacing:-.2pt;color:#111}
.cv.cv-minimal .cv-h-high{font-size:10pt;color:#666;margin-top:2pt;font-weight:500}
.cv.cv-minimal .cv-contact{font-size:9.5pt;color:#555;display:flex;gap:6pt;flex-wrap:wrap;margin-top:6pt}
.cv.cv-minimal .cv-contact .sep{color:#ccc}
.cv.cv-minimal .cv-section{margin-bottom:10pt;padding-top:8pt;border-top:.5pt solid #e8e8e8}
.cv.cv-minimal .cv-section-title{font-size:9pt;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:1.5pt;margin-bottom:6pt}
.cv.cv-minimal .cv-item{margin-bottom:8pt}
.cv.cv-minimal .cv-row-1{display:flex;justify-content:space-between;gap:8pt;font-weight:600;font-size:10.5pt;color:#111}
.cv.cv-minimal .cv-date{color:#888;font-weight:400;font-size:9.5pt;font-variant-numeric:tabular-nums;white-space:nowrap}
.cv.cv-minimal .cv-sub{font-size:9.5pt;color:#666;margin-bottom:2pt}
.cv.cv-minimal .cv-bullets{font-size:9.5pt;color:#333}
.cv.cv-minimal .cv-skill-cat{font-size:9.5pt;margin-bottom:3pt;display:flex;gap:8pt}
.cv.cv-minimal .cv-skill-cat b{color:#111;font-weight:600;min-width:90pt;display:inline-block}

/* ============ Mobile ============ */
.mobile-only{display:none}

@media (max-width: 900px) {
  html,body,#root,.app{width:100%;max-width:100%;overflow-x:hidden}
  .app,.topbar,.body,.editor{width:100vw;max-width:100vw}
  .body{grid-template-columns:1fr !important}
  .sidebar{display:none}
  .preview{display:none}
  /* bottom padding — accounts for bottom tab bar height (~70px) + safe-area */
  .editor{
    padding:14px 24px calc(134px + env(safe-area-inset-bottom)) 12px;
    background:#f6f7f9;
    overflow-x:hidden;
  }
  .body,.editor,.editor-inner,.item-card,.item-body,.field,.field-row{min-width:0;max-width:100%}
  .editor-inner{max-width:100%}
  .field-row{grid-template-columns:1fr}
  .field-row.three{grid-template-columns:1fr}
  .mobile-only{display:flex}
  .desktop-only{display:none !important}

  .app{grid-template-rows:56px 1fr}
  .topbar{padding:0 24px 0 12px;height:56px;gap:8px;position:sticky;top:0}
  .brand{gap:8px; flex:1; min-width:0}
  .brand-mark{width:32px; height:32px; border-radius:8px; flex-shrink:0}
  .brand-name{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .brand-sub{display:none}
  .topbar-creator{display:none}
  /* Compact download button on mobile */
  .topbar-actions{gap:6px; flex-shrink:0}
  .topbar-actions .btn{height:38px;min-width:38px;padding:0 10px;font-size:12px;border-radius:10px}
  .topbar-actions .btn-primary .action-label{display:none}
  .topbar-actions .btn-primary{padding:0 12px}

  .topbar-preview-btn{background:var(--surface-soft); border:1px solid var(--border)}
  .topbar-preview-pct{padding:2px 6px; font-size:10.5px}

  .editor-heading{align-items:center;padding:2px 2px 0;margin-bottom:6px}
  .editor-heading h2{font-size:20px;line-height:1.25}
  .editor-heading .step-meta{font-size:10px}
  .editor-sub{font-size:12.5px; margin-bottom:14px; line-height:1.55}
  .field{gap:7px; margin-bottom:13px}
  .field-label{align-items:flex-start; gap:6px; line-height:1.4; flex-wrap:wrap}
  .field-label .field-hint{display:block; width:100%; font-size:10.5px}
  .input,.textarea,.select{min-height:44px;padding:11px 12px;font-size:14px;border-radius:10px}
  .input,.textarea,.select,.bullet-row .input{min-width:0}
  .textarea{min-height:100px}
  .item-card{border-radius:12px;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,23,42,.03)}
  .item-header{min-height:58px;padding:12px;gap:8px}
  .item-title .t1{font-size:13.5px}
  .item-title .t2{font-size:11.5px}
  .item-actions{gap:0}
  .item-action-btn{width:32px;height:32px;padding:0}
  .item-body{padding:12px;border-top-color:#eceff3}
  .bullet-row{gap:7px}
  .bullet-row .input{min-height:42px}
  .btn-add-item{height:44px;border-radius:10px;font-size:13px}
  .chip-row{gap:8px}
  .chip{min-height:34px;border-radius:10px}
  .notice{font-size:12px;padding:10px;margin-bottom:14px}
  .date-trigger{min-height:62px;border-radius:12px}
  .date-trigger,.single-date-trigger{min-width:0;max-width:100%}
  .date-trigger-col{padding:11px 12px}
  .date-trigger-value{font-size:13.5px}
  .date-trigger-edit{width:36px;height:36px;margin:0 8px}
  .single-date-trigger{min-height:56px;border-radius:12px}
  .editor-stepper{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:72px !important;
    z-index:40 !important;
    background:rgba(246,247,249,.94);
    backdrop-filter:blur(10px);
    border:0;
    border-top:1px solid var(--border);
    border-radius:0;
    padding:8px 12px;
    margin:0;
    box-shadow:0 -1px 0 var(--border), 0 10px 24px -18px rgba(15,23,42,.30);
  }
  .stepper-btn{height:38px;padding:0 12px;border-radius:10px}
  .editor > .editor-stepper{
    position:fixed !important;
    inset:auto 0 72px 0 !important;
    width:100vw !important;
  }

  /* Mobile bottom tab bar — anchored to true bottom */
  .mobile-tabbar{
    position:fixed; left:0; right:0;
    bottom:0;
    z-index:45;
    margin:0;
    height:calc(72px + env(safe-area-inset-bottom));
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:var(--panel);
    border-top:1px solid var(--border);
    border-radius:0;
    display:flex; align-items:stretch; gap:8px;
    box-shadow:0 -4px 20px -4px rgba(15,23,42,.08);
  }
  .mtab-more{
    flex-shrink:0;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background:var(--surface-soft); border:1px solid var(--border);
    border-radius:12px;
    padding:6px 10px;
    color:var(--text-2); cursor:pointer;
    font-size:10.5px; font-weight:600;
    min-width:68px;
  }
  .mtab-more svg{width:18px;height:18px}
  .mtab-more:active{background:var(--border-soft)}
  .mtab-current{
    flex:1; min-width:0;
    background:var(--accent-soft);
    border-radius:12px;
    padding:7px 10px;
    display:flex; flex-direction:column; justify-content:center; gap:2px;
  }
  .mtab-current-label{font-size:9.5px;font-weight:600;color:var(--accent-ink);opacity:.7;letter-spacing:.03em}
  .mtab-current-name{
    display:flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700; color:var(--accent-ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mtab-current-name svg{width:15px;height:15px}

  /* Mobile sections sheet */
  .m-sheet-backdrop{
    position:fixed; inset:0; z-index:70;
    background:rgba(12, 14, 28, .5);
    display:flex; align-items:flex-end;
    animation:fadeIn .18s ease both;
  }
  .m-sheet-backdrop.closing{animation:fadeOut .22s ease both}
  .m-sheet{
    width:100%; max-height:92vh;
    background:var(--panel);
    border-radius:18px 18px 0 0;
    display:flex; flex-direction:column;
    animation:slideUp .26s var(--ease) both;
  }
  .m-sheet.closing{animation:slideDown .24s var(--ease) both}
  .m-sheet-handle{
    width:40px; height:4px; background:var(--border-strong);
    border-radius:99px; margin:10px auto 4px;
  }
  .m-sheet-header{
    padding:6px 16px 10px;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px;
  }
  .m-sheet-header .t{font-size:16px;font-weight:700}
  .m-sheet-header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .m-sheet-reset{
    height:30px;
    padding:0 10px;
    border-radius:99px;
    border:1px solid var(--border);
    background:var(--surface-soft);
    color:var(--text-2);
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }
  .m-sheet-reset svg{width:12px;height:12px}
  .m-sheet-reset:active{transform:scale(.98)}
  .m-sheet-close{
    background:var(--surface-soft); border:0; border-radius:99px;
    width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
    color:var(--text-2); cursor:pointer;
  }
  .m-sheet-hint{
    padding:0 16px 8px; color:var(--text-3); font-size:12px;
  }
  .m-sheet-list{
    flex:1; overflow-y:auto; padding:4px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .m-sheet-row{
    display:flex; align-items:center; gap:12px;
    padding:12px;
    border-radius:10px;
    cursor:pointer;
    margin-bottom:2px;
    transition:background .15s;
  }
  .m-sheet-row:active{background:var(--surface-soft)}
  .m-sheet-row.active{background:var(--accent-soft)}
  .m-sheet-row.active .m-sheet-row-label{color:var(--accent-ink); font-weight:700}
  .m-sheet-row.pinned{background:color-mix(in oklab, var(--accent-soft) 60%, transparent)}
  .m-sheet-row.dragging { opacity: 0.5; transform: scale(0.98); }
  .m-sheet-row.drag-over { border-top: 2px solid var(--accent); }
  
  .m-sheet-drag-handle { display: flex; align-items: center; justify-content: center; cursor: grab; padding: 4px; border-radius: 6px; }
  .m-sheet-drag-handle:active { cursor: grabbing; background: rgba(0,0,0,0.05); }
  .m-sheet-order-controls{
    display:flex;
    flex-direction:column;
    gap:3px;
    flex-shrink:0;
    order:10;
    margin-right:auto;
  }
  .m-sheet-order-controls button{
    width:28px;
    height:24px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-soft);
    color:var(--text-2);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s,color .15s,transform .12s;
  }
  .m-sheet-order-controls button:active{transform:scale(.94)}
  .m-sheet-order-controls button:disabled{opacity:.3;cursor:not-allowed}
  .m-sheet-order-controls svg{width:14px;height:14px}

  .m-sheet-icon{
    width:30px; height:30px; flex-shrink:0;
    background:transparent; border-radius:8px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--text-2);
  }
  .m-sheet-row.active .m-sheet-icon{background:transparent; color:var(--accent)}
  .m-sheet-icon svg{width:24px; height:24px}
  .m-sheet-row-main{flex:1; min-width:0}
  .m-sheet-row-label{font-size:14px; font-weight:600; color:var(--text)}
  .m-sheet-row-sub{font-size:11px; color:var(--text-3); margin-top:2px}
  .m-sheet-count{
    background:var(--surface-soft); color:var(--text-2);
    font-size:11px; font-weight:600;
    min-width:22px; height:22px; padding:0 8px;
    border-radius:99px; display:inline-flex; align-items:center; justify-content:center;
  }
  .m-sheet-row.active .m-sheet-count{background:color-mix(in oklab, var(--accent) 25%, transparent); color:var(--accent-ink)}
  .m-sheet-arrows{display:flex; flex-direction:column; gap:2px}
  .m-sheet-arrows button{
    width:28px; height:20px;
    background:var(--surface-soft); border:1px solid var(--border);
    border-radius:6px; color:var(--text-2); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .m-sheet-arrows button:disabled{opacity:.3; cursor:not-allowed}
  .m-sheet-arrows svg{width:12px; height:12px}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes fadeOut{from{opacity:1}to{opacity:0}}
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
  @keyframes slideDown{from{transform:none}to{transform:translateY(100%)}}

  /* Mobile bottom preview FAB — removed, now in topbar */
  .mobile-preview-fab{display:none !important}

  /* Mobile preview modal */
  .m-preview{
    position:fixed; inset:0; z-index:80;
    background:#f6f7f9; display:flex; flex-direction:column;
    animation:slideUp .3s var(--ease) both;
  }
  .m-preview.closing{animation:previewOut .24s var(--ease) both}
  @keyframes previewOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(28px)}}
  .m-preview-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--border);
    background:var(--panel);
  }
  .m-preview-header .t{font-size:17px;font-weight:800}
  .m-preview-options{
    background:var(--panel);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .m-opts-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding:10px 14px 0;
  }
  .m-opts-tabs button{
    height:38px;
    background:transparent;
    border:0;
    border-bottom:2px solid transparent;
    color:var(--text-2);
    font-size:13px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
  }
  .m-opts-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
  .m-opts-content{padding:8px 12px 10px}
  .m-preview-choice-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:7px;animation:choiceIn .22s var(--ease) both}
  @keyframes choiceIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  .m-preview-choice{
    width:100%;
    text-align:right;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:9px;
    padding:8px 7px;
    display:flex;
    flex-direction:column;
    gap:2px;
    cursor:pointer;
    transition:border-color .15s, background .15s, box-shadow .15s;
  }
  .m-preview-choice:active{transform:scale(.98)}
  .m-preview-choice.active{
    border-color:var(--accent);
    background:var(--accent-soft);
    box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 12%,transparent);
  }
  .m-choice-title{font-size:12.5px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-preview-choice.active .m-choice-title{color:var(--accent-ink)}
  .m-choice-desc{
    font-size:9.5px;
    line-height:1.35;
    color:var(--text-3);
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .m-preview-hint{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:7px 10px;
    background:#fff;
    border-bottom:1px solid var(--border);
    color:var(--text-2);
    font-size:10.5px;
    font-weight:700;
    flex-shrink:0;
    line-height:1.45;
    text-align:center;
  }
  .m-preview-hint > span{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;flex:1}
  .m-preview-hint svg{width:14px;height:14px;color:var(--accent)}
  .m-preview-zoom{
    display:flex;
    align-items:center;
    gap:3px;
    flex-shrink:0;
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:10px;
    padding:2px;
  }
  .m-preview-zoom button{
    min-width:30px;
    height:28px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text-2);
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .m-preview-zoom button:hover{background:var(--panel);color:var(--text)}
  .m-preview-zoom button:disabled{opacity:.35;cursor:not-allowed}
  .m-preview-zoom svg{width:13px;height:13px;color:currentColor}
  .m-preview-scroll{
    flex:1; overflow:auto; padding:24px 12px 18px;
    display:flex; justify-content:flex-start; align-items:flex-start;
    min-height:0;
    touch-action:pan-x pan-y;
    overscroll-behavior:contain;
  }
  .m-preview-a4-wrap{
    position:relative;
    box-shadow:0 18px 44px -26px rgba(15,23,42,.35);
    background:#fff;
    border-radius:2px;
    overflow:visible;
    flex-shrink:0;
    margin:0 auto;
  }
  .m-preview-foot{
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    background:var(--panel);
  }
  .m-preview-foot .btn-primary{width:100%;height:44px;font-size:14px;border-radius:10px}
}

@media (min-width: 901px){
  .mobile-only{display:none !important}
}

/* ============ Drag-drop grip + pinned on sidebar ============ */
.drag-grip{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:22px; flex-shrink:0;
  color:var(--text-3);
  cursor:grab;
  border-radius:4px;
  opacity:.55;
  transition:opacity .12s, background .12s, color .12s;
}
.drag-grip svg{width:14px;height:14px}
.nav-item:hover .drag-grip{opacity:1; background:var(--surface-soft)}
.drag-grip:active{cursor:grabbing}
.drag-grip.pinned-lock{cursor:default; color:var(--accent); opacity:.7}
.drag-grip.pinned-lock:hover{background:transparent}
.nav-item.pinned{
  background:color-mix(in oklab, var(--accent-soft) 55%, transparent);
  cursor:default;
}
.nav-item.pinned .nav-label::after{
  content:"مثبّت"; display:inline-block; margin-inline-start:6px;
  font-size:10px; font-weight:600; color:var(--accent-ink);
  background:color-mix(in oklab, var(--accent) 20%, transparent);
  padding:1px 7px; border-radius:99px; vertical-align:middle;
}
.nav-item.dragging{opacity:.45}
.nav-item.drag-over{
  background:color-mix(in oklab, var(--accent) 12%, var(--panel));
  box-shadow: inset 0 2px 0 var(--accent);
}
.nav-item .nav-icon{color:inherit}

/* ============ Bitaqa promo card ============ */
.bitaqa-card{
  position:relative;
  display:block;
  background: linear-gradient(135deg, #3d1e6d 0%, #5326a5 55%, #6b2fbd 100%);
  color:#fff;
  border-radius:12px;
  padding:11px 13px;
  text-decoration:none;
  overflow:hidden;
  box-shadow: 0 6px 14px -6px rgba(61,30,109,.5), 0 2px 4px -1px rgba(61,30,109,.3);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.bitaqa-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(61,30,109,.6), 0 3px 8px -2px rgba(61,30,109,.35);
}
.bitaqa-shine{
  position:absolute; pointer-events:none;
  top:-40%; right:-20%; width:130%; height:200%;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
  transform: rotate(15deg);
}
/* horizontal compact row: icon | text | badge */
.bitaqa-inner{
  display:flex; align-items:flex-start; gap:9px; position:relative;
}
.bitaqa-badge-row{
  display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; padding-top:1px;
}
.bitaqa-logo{
  width:24px; height:24px; border-radius:7px;
  background: rgba(255,255,255,.15);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.2);
}
.bitaqa-logo svg{width:12px; height:12px; color:#fff}
.bitaqa-new{
  font-size:8px; font-weight:700; letter-spacing:.04em;
  background:#fff; color:#3d1e6d;
  padding:2px 5px; border-radius:99px;
}
.bitaqa-right{flex:1; min-width:0}
.bitaqa-title{
  font-size:13px; font-weight:800;
  letter-spacing:-.01em; line-height:1.2;
  margin-bottom:2px;
}
.bitaqa-sub{
  font-size:9.5px; line-height:1.45;
  color:rgba(255,255,255,.82);
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.bitaqa-cta{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-weight:700;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:3px 8px; border-radius:99px;
  transition: background .15s;
}
.bitaqa-card:hover .bitaqa-cta{background: rgba(255,255,255,.22)}
.bitaqa-cta svg{width:9px; height:9px}

/* ============ Date trigger (replaces old inline picker) ============ */
.date-trigger{
  display:flex; align-items:stretch; gap:0;
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:0;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
  text-align:start;
  font-family:inherit;
  overflow:hidden;
}
.date-trigger:hover{border-color:var(--border-strong); background:var(--surface-soft)}
.date-trigger.filled{background:var(--panel)}
.date-trigger:focus-visible{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)}
.date-trigger-col{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:3px;
  padding:10px 14px;
}
.date-trigger-label{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-3);
}
.date-trigger-value{
  font-size:14px; font-weight:600; color:var(--text);
  font-family:var(--font-en); font-variant-numeric:tabular-nums;
}
.date-trigger-value.present{color:var(--accent-ink)}
.date-trigger-arrow{
  align-self:center; padding:0 4px; color:var(--text-3);
  display:inline-flex;
}
.date-trigger-arrow svg{width:14px;height:14px}
.date-trigger-edit{
  align-self:center;
  width:38px; height:38px; margin:0 8px;
  background:var(--accent-soft); color:var(--accent-ink);
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.date-trigger-edit svg{width:16px;height:16px}

.single-date-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  min-height:58px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:0 8px 0 14px;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
  text-align:start;
  font-family:inherit;
}
.single-date-trigger:hover{border-color:var(--border-strong); background:var(--surface-soft)}
.single-date-trigger.filled{background:var(--panel)}
.single-date-main{display:flex; flex-direction:column; gap:3px; min-width:0}
.single-date-summary,.ds-single-summary{
  color:var(--text-2);
  font-family:var(--font-en);
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.single-date-modal{width:min(500px, 100%)}
.single-date-sheet{max-height:82vh; min-height:58vh}

/* ============ Date MODAL (desktop) ============ */
.dm-backdrop{
  position:fixed; inset:0; z-index:9999;
  background: rgba(12, 14, 28, .52);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation: fadeIn .18s ease both;
}
.dm-backdrop.closing{animation:fadeOut .2s ease both}
.dm-modal{
  width:min(560px, 100%);
  max-height:calc(100vh - 40px);
  background:var(--panel);
  border-radius:18px;
  box-shadow: 0 32px 64px -16px rgba(15,23,42,.3), 0 0 0 1px var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation: dmIn .22s var(--ease) both;
  position:relative; z-index:10000;
}
.dm-modal.closing{animation:dmOut .2s var(--ease) both}
@keyframes dmIn{from{opacity:0; transform: translateY(16px) scale(.98)} to{opacity:1; transform:none}}
@keyframes dmOut{from{opacity:1; transform:none} to{opacity:0; transform:translateY(12px) scale(.985)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideDown{from{transform:none}to{transform:translateY(100%)}}
.dm-header{
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.dm-title{
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; font-weight:700;
}
.dm-title svg{width:18px;height:18px; color:var(--accent)}
.dm-close{
  width:32px; height:32px;
  background:var(--surface-soft); border:0; border-radius:99px;
  color:var(--text-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.dm-close:hover{background:var(--border-soft); color:var(--text)}

.dm-subhead{
  padding:14px 20px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.dm-cal-tabs{
  display:inline-flex; gap:2px; padding:3px;
  background:var(--surface-soft); border-radius:10px;
}
.dm-cal-tab{
  padding:6px 16px; font-size:12.5px;
  background:transparent; border:0; border-radius:8px;
  color:var(--text-2); cursor:pointer; font-weight:600;
}
.dm-cal-tab.active{background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs)}

.dm-present-toggle{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--text-2);
  padding:6px 12px 6px 8px;
  background:var(--surface-soft); border:1px solid var(--border);
  border-radius:99px;
  cursor:pointer;
  transition:all .15s;
}
.dm-present-toggle input{display:none}
.dm-toggle-dot{
  width:30px; height:18px; background:#d9dce6; border-radius:99px;
  position:relative; transition:background .2s;
  flex-shrink:0;
}
.dm-toggle-dot::after{
  content:""; position:absolute; top:2px; right:2px;
  width:14px; height:14px; background:#fff; border-radius:99px;
  transition:transform .2s var(--ease);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.dm-present-toggle.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.dm-present-toggle.on .dm-toggle-dot{background:var(--accent)}
.dm-present-toggle.on .dm-toggle-dot::after{transform: translateX(-12px)}

.dm-tab-cards{
  display:flex; align-items:center; gap:10px;
  padding:16px 20px 8px;
}
.dm-tab-card{
  flex:1; min-width:0;
  background:var(--surface-soft); border:1.5px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  display:flex; flex-direction:column; gap:3px;
  text-align:start; cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.dm-tab-card:hover{border-color:var(--border-strong)}
.dm-tab-card.active{
  border-color:var(--accent); background:var(--panel);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
}
.dm-tab-card.locked{opacity:.5; cursor:not-allowed}
.dm-tab-label{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3)}
.dm-tab-val{font-size:15px; font-weight:700; color:var(--text); font-family:var(--font-en); font-variant-numeric:tabular-nums}
.dm-tab-sep{color:var(--text-3); font-size:18px; padding-top:14px}

.dm-body{
  padding: 8px 20px 18px;
  position:relative;
}
.dm-year-row{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 0 14px;
}
.dm-year-nav{
  width:34px; height:34px;
  background:var(--surface-soft); border:1px solid var(--border);
  border-radius:99px; cursor:pointer; color:var(--text-2);
  display:inline-flex; align-items:center; justify-content:center;
}
.dm-year-nav:hover{background:var(--border-soft)}
.dm-year-display{
  font-size:22px; font-weight:800;
  font-family:var(--font-en); font-variant-numeric:tabular-nums;
  background:transparent; border:0;
  padding:4px 14px; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  color:var(--text);
}
.dm-year-display svg{width:14px; height:14px; color:var(--text-3)}
.dm-year-display:hover{background:var(--surface-soft)}

.dm-month-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.dm-month-btn{
  padding:14px 8px;
  background:var(--panel); border:1.5px solid var(--border);
  border-radius:12px;
  cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition: all .15s;
}
.dm-month-btn:hover{border-color:var(--border-strong); background:var(--surface-soft); transform: translateY(-1px)}
.dm-month-btn.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-color: var(--accent); color:#fff;
  box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--accent) 80%, transparent);
}
.dm-month-k{font-size:13px; font-weight:700; font-family:var(--font-en)}
.dm-month-n{font-size:11px; color:var(--text-3); font-weight:500}
.dm-month-btn.active .dm-month-n{color:rgba(255,255,255,.82)}

.dm-year-overlay{
  position:absolute; inset:0; background:rgba(255,255,255,.9);
  display:flex; align-items:flex-start; justify-content:center;
  padding:20px; z-index:5; backdrop-filter: blur(2px);
  animation: fadeIn .15s ease both;
}
.dm-year-grid{
  width:100%;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;
  max-height:100%; overflow-y:auto;
}
.dm-year-item{
  padding:10px 4px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; cursor:pointer; font-weight:600;
  font-family:var(--font-en); font-size:13px;
  transition: all .12s;
}
.dm-year-item:hover{background:var(--surface-soft); border-color:var(--border-strong)}
.dm-year-item.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.dm-year-item.current{border-color:var(--accent); color:var(--accent-ink)}

.dm-footer{
  padding:14px 20px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.dm-clear-btn{
  background:transparent; border:0;
  font-size:13px; font-weight:600; color:var(--text-3);
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
.dm-clear-btn:hover{color:var(--danger); background:color-mix(in oklab, var(--danger) 10%, transparent)}
.dm-footer-actions{display:flex; gap:8px}

/* ============ Date BOTTOM SHEET (mobile) — Apple-style ============ */
.ds-backdrop{
  position:fixed; inset:0; z-index:9999;
  background: rgba(12,14,28,.50);
  backdrop-filter: blur(4px);
  display:flex; align-items:flex-end;
  animation: fadeIn .18s ease both;
}
.ds-backdrop.closing{animation:fadeOut .2s ease both}
.ds-sheet{
  width:100%;
  /* ~50vh so it covers roughly half the screen, Apple-style */
  max-height:88vh;
  min-height:64vh;
  background:var(--panel);
  border-radius:22px 22px 0 0;
  display:flex; flex-direction:column;
  overflow:hidden;
  animation: slideUp .32s var(--ease) both;
  position:relative; z-index:10000;
  box-shadow:0 -12px 40px -8px rgba(15,23,42,.18);
}
.ds-sheet.closing{animation:slideDown .22s var(--ease) both}
.ds-handle{
  width:42px; height:4px; background:var(--border-strong);
  border-radius:99px; margin:10px auto 2px;
}
.ds-header{
  padding:8px 18px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.ds-title{font-size:17px; font-weight:700}
.ds-close{
  width:32px;height:32px; background:var(--surface-soft); border:0; border-radius:99px;
  color:var(--text-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.ds-cal-tabs{
  display:flex; gap:2px; padding:3px;
  background:var(--surface-soft); border-radius:10px;
  margin:14px 18px 0;
}
.ds-cal-tab{
  flex:1; padding:8px; font-size:13px;
  background:transparent; border:0; border-radius:8px;
  color:var(--text-2); font-weight:600; cursor:pointer;
}
.ds-cal-tab.active{background:var(--panel); color:var(--text); box-shadow:var(--shadow-xs)}

.ds-tab-cards{
  display:flex; gap:8px; padding: 14px 18px 10px;
}
.ds-tab-card{
  flex:1; min-width:0;
  background:var(--surface-soft); border:1.5px solid var(--border);
  border-radius:14px; padding:10px 14px;
  display:flex; flex-direction:column; gap:3px;
  text-align:start; cursor:pointer; font-family:inherit;
}
.ds-tab-card.active{border-color:var(--accent); background:var(--panel); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent)}
.ds-tab-card.locked{opacity:.5}
.ds-tab-label{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3)}
.ds-tab-val{font-size:14.5px; font-weight:700; font-family:var(--font-en); font-variant-numeric:tabular-nums}

.ds-present{
  margin:0 18px 6px;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--surface-soft); border:1px solid var(--border);
  border-radius:12px;
  font-size:13.5px; font-weight:600; color:var(--text-2);
  cursor:pointer;
}
.ds-present input{display:none}
.ds-present-dot{
  width:34px; height:20px; background:#d9dce6; border-radius:99px;
  position:relative; flex-shrink:0;
  transition:background .2s;
}
.ds-present-dot::after{
  content:""; position:absolute; top:2px; right:2px;
  width:16px; height:16px; background:#fff; border-radius:99px;
  transition:transform .2s var(--ease);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.ds-present.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}
.ds-present.on .ds-present-dot{background:var(--accent)}
.ds-present.on .ds-present-dot::after{transform: translateX(-14px)}

.ds-body{
  flex:1; overflow-y:auto;
  padding: 10px 18px;
}
.ds-year-row{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:6px 0 14px;
}
.ds-year-row button{
  width:38px; height:38px; background:var(--surface-soft); border:1px solid var(--border);
  border-radius:99px; color:var(--text-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.ds-year-val{
  font-size:22px; font-weight:800; font-family:var(--font-en); font-variant-numeric:tabular-nums;
  min-width:80px; text-align:center;
}
.ds-month-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  margin-bottom:14px;
}
.ds-month-btn{
  padding:14px 6px;
  background:var(--panel); border:1.5px solid var(--border);
  border-radius:12px; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.ds-month-btn.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-color:var(--accent); color:#fff;
}
.ds-month-k{font-size:13px; font-weight:700; font-family:var(--font-en)}
.ds-month-n{font-size:10.5px; color:var(--text-3)}
.ds-month-btn.active .ds-month-n{color:rgba(255,255,255,.85)}

.ds-year-list-label{font-size:12px; color:var(--text-3); font-weight:600; margin:10px 0 8px}
.ds-year-list{
  display:flex; gap:6px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none;
}
.ds-year-list::-webkit-scrollbar{display:none}
.ds-year-chip{
  flex-shrink:0;
  padding:8px 14px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:99px;
  font-family:var(--font-en); font-size:13px; font-weight:600;
  cursor:pointer;
}
.ds-year-chip.active{background:var(--accent); color:#fff; border-color:var(--accent)}

.ds-footer{
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.ds-clear{
  background:transparent; border:0; color:var(--text-3);
  font-size:13px; font-weight:600; padding:10px 12px;
  border-radius:8px; cursor:pointer;
}
.ds-save{flex:1; height:46px; font-size:14px}

/* Focus visible */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

@media print {
  body {
    visibility: hidden;
    background: white;
    margin: 0;
    padding: 0;
  }
  .app, .sidebar, .editor, .topbar, .preview-topbar, .editor-stepper, .mobile-tabbar, .desktop-only.stepper-btn, .m-preview-header, .m-preview-tpl, .m-preview-foot, .page-zoom-controls {
    display: none !important;
  }
  .preview-scroll, .a4-wrap, .a4, .m-preview-a4, .m-preview-scroll, .m-preview-a4-wrap {
    visibility: visible;
  }
  .a4, .m-preview-a4 {
    position: absolute;
    left: 0;
    top: 0;
    transform: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 210mm !important;
    min-height: 297mm !important;
    page-break-after: always;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  @page {
    size: A4;
    margin: 0;
  }
}

/* Guide Overlay Premium Modal */
.guide-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(12px) saturate(150%);
  display: flex; justify-content: center; align-items: center;
  padding: 30px; animation: guideFadeIn .6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.guide-overlay.guide-closing { animation: guideFadeOut .4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes guideFadeIn { from{opacity:0; backdrop-filter: blur(0px) saturate(100%);} to{opacity:1; backdrop-filter: blur(12px) saturate(150%);} }
@keyframes guideFadeOut { from{opacity:1; backdrop-filter: blur(12px) saturate(150%);} to{opacity:0; backdrop-filter: blur(0px) saturate(100%);} }

.guide-modal-premium {
  background: var(--panel); width: 100%; max-width: 1000px;
  height: 90vh; overflow-y: auto; overflow-x: hidden;
  border-radius: 32px; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;
  position: relative; scroll-behavior: smooth;
  animation: guideScaleUp .7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: flex; flex-direction: column;
}
.guide-modal-premium.guide-modal-closing { animation: guideScaleDown .4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes guideScaleUp { from{transform:translateY(60px) scale(0.9);opacity:0; filter:blur(10px);} to{transform:translateY(0) scale(1);opacity:1; filter:blur(0px);} }
@keyframes guideScaleDown { from{transform:translateY(0) scale(1);opacity:1; filter:blur(0px);} to{transform:translateY(30px) scale(0.95);opacity:0; filter:blur(5px);} }

.gp-hero {
  position: relative; padding: 80px 60px 60px; text-align: center; color: white;
  background: #0f172a; overflow: hidden; flex-shrink: 0;
}
.gp-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, color-mix(in oklab, var(--accent) 70%, transparent) 0%, transparent 60%);
  opacity: 0.8; z-index: 1; pointer-events: none;
}
.gp-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

.gp-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 99px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  font-size: 13px; font-weight: 600; margin-bottom: 24px; color: color-mix(in oklab, var(--accent) 40%, white);
}
.gp-badge svg { width: 14px; height: 14px; }
.gp-close {
  position: absolute; top: 24px; left: 24px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s; backdrop-filter: blur(4px);
}
.gp-close:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }

.gp-title { font-size: 40px; font-weight: 800; letter-spacing: -1px; margin: 0 0 16px; max-width: 700px; line-height: 1.2; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.gp-sub { font-size: 17px; max-width: 600px; opacity: 0.8; line-height: 1.6; margin: 0; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }

.gp-grid {
  padding: 40px 60px 60px; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  background: var(--surface-soft); flex: 1;
}

.gp-card {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 20px;
  padding: 32px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex; flex-direction: column; overflow: hidden;
}
.gp-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.05); border-color: var(--border); }

.gp-card-num {
  position: absolute; top: -10px; left: 20px; font-size: 120px; font-weight: 900;
  color: var(--border-soft); opacity: 0.4; z-index: 0; pointer-events: none;
  font-family: system-ui, -apple-system, sans-serif;
}
.gp-card-icon {
  width: 48px; height: 48px; border-radius: 14px; background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; z-index: 1; position: relative;
}
.gp-card-icon svg { width: 22px; height: 22px; }

.gp-card-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 0 0 12px; z-index: 1; position: relative; }
.gp-card-text { font-size: 14px; color: var(--text-2); line-height: 1.7; margin: 0 0 24px; flex: 1; z-index: 1; position: relative; }

.gp-examples {
  display: flex; flex-direction: column; gap: 8px; z-index: 1; position: relative;
  margin-top: auto;
}
.gpe { padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.5; border: 1px solid transparent; }
.gpe-head { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 6px; font-size: 11px; }
.gpe-head svg { width: 14px; height: 14px; }
.gpe-body { color: var(--text-1); font-weight: 500; }

.gpe-bad { background: #fef2f2; border-color: #fee2e2; }
.gpe-bad .gpe-head { color: #dc2626; }
.gpe-bad .gpe-body { color: #991b1b; }

.gpe-good { background: #f0fdf4; border-color: #dcfce3; }
.gpe-good .gpe-head { color: #16a34a; }
.gpe-good .gpe-body { color: #166534; }

/* Custom Premium Confirmation Modal */
.c-modal-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px);
  display: flex; justify-content: center; align-items: center; padding: 24px;
  animation: cModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.c-modal-overlay.closing { animation: cModalFadeOut 0.3s forwards; }

.c-modal {
  background: var(--panel); width: 100%; max-width: 400px;
  border-radius: 28px; padding: 32px 24px; text-align: center;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;
  animation: cModalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.c-modal.closing { animation: cModalScaleDown 0.3s forwards; }

.c-modal-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center; margin-bottom: 8px;
}
.c-modal-title { font-size: 20px; font-weight: 800; color: var(--text); }
.c-modal-message { font-size: 15px; color: var(--text-2); line-height: 1.5; margin-bottom: 8px; }

.c-modal-actions { display: flex; width: 100%; gap: 12px; }
.c-modal-actions button { flex: 1; padding: 14px; font-size: 15px; font-weight: 700; border-radius: 14px; justify-content: center; }

@keyframes cModalFadeIn { from {opacity: 0} to {opacity: 1} }
@keyframes cModalFadeOut { from {opacity: 1} to {opacity: 0} }
@keyframes cModalScaleUp { from {transform: scale(0.95) translateY(20px); opacity: 0} to {transform: scale(1) translateY(0); opacity: 1} }
@keyframes cModalScaleDown { from {transform: scale(1)} to {transform: scale(0.95) translateY(10px); opacity: 0} }

@media (max-width: 768px) {
  .guide-overlay { padding: 16px; }
  .guide-modal-premium { border-radius: 24px; }
  .gp-hero { padding: 60px 24px 40px; }
  .gp-title { font-size: 28px; }
  .gp-grid { padding: 24px; grid-template-columns: 1fr; }
  .gp-card { padding: 24px; }

  .m-sheet-guide { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 16px; }

  .m-sheet-actions { display: flex; gap: 8px; }
  .m-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; padding: 12px; background: var(--surface-soft); color: var(--text-2); border-radius: 12px; border: 1px solid var(--border-soft); box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
  .m-action-btn.danger { background: #fff1f2; color: #e11d48; border-color: #ffe4e6; }
  
  .m-sheet-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; }
  .m-sheet-footer-sec { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: #10b981; }
  .m-sheet-footer-dev { font-size: 10px; color: var(--text-3); font-weight: 600; }
  .m-sheet-footer-dev a { color: var(--accent); text-decoration: none; font-weight: 800; }
  
  .m-preview-a4 {
    width: 794px !important;
    min-height: 1123px !important;
  }
}