/* ═══ Mocca — Styles studio (B64-Q5) ════════════════════════════════════
   Cards per design system → a workspace that is the live preview plus a side
   panel that only edits styles. Desktop: preview + 380px side panel. Tablet /
   phone portrait: preview first, the panel is a collapsed bottom bar that
   rises as a sheet when you pick; phone landscape: a collapsed side bar that
   opens as a side panel (B64-Q2). */

/* ── cards ─────────────────────────────────────────────────────────── */
.sty-grid-hd{ margin-bottom:14px; }
.sty-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px; }
.sty-card{ display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:start;cursor:pointer;
  border:1px solid var(--border);border-radius:16px;background:var(--bg-1);color:var(--fg-1);
  transition:border-color var(--mk-t-fast),transform var(--mk-t-fast),box-shadow var(--mk-t-fast); }
.sty-card:hover{ border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(13,37,48,.45); }
.sty-card:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; }
/* the card's picture is drawn FROM the system's own tokens (--c-*) */
.sty-card-pv{ position:relative;min-height:176px;display:flex;flex-direction:column;overflow:hidden;font-family:var(--c-font); }
.sty-cv-mocca{ background:linear-gradient(180deg,#eef3f5,#e3eaed); }
html[data-theme="dark"] .sty-cv-mocca{ background:linear-gradient(180deg,#10222b,#0b1a21); }
.sty-cv-purple{ background:radial-gradient(120% 90% at 10% 0%,#5b3fa8 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#2b7fd6 0%,transparent 60%),#150d2b; }
.sty-cv-jockey{ background:#f6f1e7; }
.sty-mk-nav{ display:flex;align-items:center;gap:8px;height:26px;padding:0 12px;flex:0 0 auto;
  background:var(--c-surf);border-bottom:var(--c-bw) solid var(--c-bd); }
.sty-cv-purple .sty-mk-nav{ background:rgba(255,255,255,.06);backdrop-filter:blur(8px); }
.sty-mk-dot{ width:12px;height:12px;border-radius:4px;background:var(--c-acc); }
.sty-mk-bar{ flex:1;height:8px;border-radius:999px;background:var(--c-surf2); }
.sty-mk-pill{ width:34px;height:12px;border-radius:var(--c-pill);background:var(--c-surf2);border:var(--c-bw) solid var(--c-bd); }
.sty-mk-body{ flex:1;display:flex;align-items:center;gap:14px;padding:14px 16px; }
.sty-mk-card{ flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 12px;min-width:0;
  background:var(--c-surf);border:var(--c-bw) solid var(--c-bd);border-radius:var(--c-radlg);box-shadow:var(--c-shadow);color:var(--c-fg); }
.sty-cv-purple .sty-mk-card{ backdrop-filter:blur(12px); }
.sty-mk-card b{ font-size:20px;line-height:1;font-weight:700; }
.sty-mk-card > span{ font-size:11px;color:var(--c-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sty-mk-row{ display:flex;gap:6px;align-items:center; }
.sty-mk-btn{ display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--c-rad);background:var(--c-acc);color:var(--c-accfg);font-size:10.5px;font-weight:700; }
.sty-cv-purple .sty-mk-btn, .sty-cv-jockey .sty-mk-chip{ border-radius:999px; }
.sty-mk-chip{ display:inline-flex;align-items:center;height:18px;padding:0 8px;border-radius:var(--c-pill);border:var(--c-bw) solid var(--c-bd);font-size:10px;color:var(--c-fg2); }
.sty-mk-field{ display:block;height:18px;border-radius:var(--c-rad);border:var(--c-bw) solid var(--c-bd);background:var(--c-surf2); }
/* B65 W14 (065-036) — one straight column, bigger chips */
.sty-mk-sws{ display:flex;flex-direction:column;gap:6px;flex:0 0 auto; }
.sty-mk-sws i{ width:20px;height:20px;border-radius:7px;box-shadow:0 0 0 1px rgba(0,0,0,.10); }
.sty-cv-custom{ background:linear-gradient(180deg,var(--c-surf2),color-mix(in srgb,var(--c-surf2) 80%,var(--c-acc))); }
.sty-cv-glass{ background:radial-gradient(120% 90% at 10% 0%,color-mix(in srgb,var(--c-acc) 70%,#000) 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--c-acc) 40%,#2b7fd6) 0%,transparent 60%),#121826; }
.sty-cv-glass .sty-mk-card, .sty-cv-glass .sty-mk-nav{ backdrop-filter:blur(var(--c-blur,12px)); }
.sty-card-b{ display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px; }
.sty-card-hd{ display:flex;align-items:center;gap:10px; }
.sty-card-hd > .mi{ width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);color:var(--accent-text);font-size:19px;flex:0 0 auto; }
.sty-card-hd > div{ display:flex;flex-direction:column;min-width:0;flex:1; }
.sty-card-hd b{ font:700 15px var(--mk-font-ui); }
.sty-card-hd div span{ font:500 12px var(--mk-font-ui);color:var(--fg-3); }
.sty-card-go{ color:var(--fg-3);font-size:18px; }
.sty-card:hover .sty-card-go{ color:var(--accent-text); }
[dir="rtl"] .sty-card-go{ transform:scaleX(-1); }   /* Audit A — forward points to the reading direction */
.sty-card-apps{ display:flex;flex-wrap:wrap;align-items:center;gap:6px; }
.sty-l{ font:600 11px var(--mk-font-ui);color:var(--fg-3);margin-inline-end:2px; }
.sty-app{ display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--bg-input);border:1px solid var(--border);font:600 11.5px var(--mk-font-ui); }
.sty-none{ font:500 11.5px var(--mk-font-ui);color:var(--fg-3); }
.sty-cov{ display:flex;flex-direction:column;gap:5px;font:500 11.5px var(--mk-font-ui);color:var(--fg-2); }
.sty-cov-bar{ height:6px;border-radius:999px;background:var(--bg-input);overflow:hidden; }
.sty-cov-bar i{ display:block;height:100%;border-radius:inherit;background:var(--accent); }
.sty-need, .sty-ok{ display:inline-flex;align-items:center;gap:5px;align-self:flex-start;height:24px;padding:0 10px;border-radius:999px;font:700 11.5px var(--mk-font-ui); }
.sty-need{ color:var(--mk-danger);background:color-mix(in srgb,var(--mk-danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--mk-danger) 35%,transparent); }
.sty-ok{ color:var(--mk-ok);background:color-mix(in srgb,var(--mk-ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--mk-ok) 35%,transparent); }
.sty-need .mi, .sty-ok .mi{ font-size:15px; }

/* ── workspace (B65 W14 · 065-037 · 040 · 041–044) ──────────────────
   The Frontend layout itself (.fe-split · .fe-tree-col · .fe-pv-col from
   sections.css): the routes tree left, the device preview right, the style
   editor docked under the preview once something is picked. */
.sty-hd{ display:flex;align-items:center;gap:10px;min-width:0; }
.sty-hd h2{ margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sty-flag-n{ min-width:22px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--mk-danger);color:#fff;font:700 11px var(--mk-font-ui);flex:0 0 auto; }
.sty-flag-n:empty{ display:none; }
.sty-details > .sty-ed{ flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;
  padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-1); }
.sty-ed-top{ display:flex;align-items:flex-start;justify-content:space-between;gap:8px; }
.sty-ed-top .panel-close{ flex:0 0 auto; }
.sty-crumb{ display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0; }
.sty-cr{ height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg-input);color:var(--fg-2);font:600 11px var(--mk-font-ui);cursor:pointer; }
.sty-cr:disabled{ cursor:default;opacity:.7; }
.sty-cr.on{ background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text); }
.sty-cr-sep{ color:var(--fg-3);font-size:12px; }
.sty-el-hd{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }
.sty-el-hd > div{ display:flex;flex-direction:column;min-width:0; }
.sty-el-hd b{ font:700 15px var(--mk-font-ui); }
.sty-el-hd div span{ font:500 11.5px var(--mk-font-ui);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sty-badge{ display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;height:22px;padding:0 8px;border-radius:999px;font:700 10.5px var(--mk-font-ui); }
.sty-badge .mi{ font-size:14px; }
.sty-badge.ok{ color:var(--mk-ok);background:color-mix(in srgb,var(--mk-ok) 12%,transparent); }
.sty-badge.bad{ color:var(--mk-danger);background:color-mix(in srgb,var(--mk-danger) 12%,transparent); }
.sty-state-seg{ display:flex;width:100%; }
.sty-state-seg button{ flex:1 1 auto;min-width:0;padding:0 6px;position:relative; }
.sty-dot{ position:absolute;top:4px;inset-inline-end:5px;width:6px;height:6px;border-radius:50%;background:var(--accent); }
.sty-fields{ display:flex;flex-direction:column;gap:8px; }
.sty-f{ display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:8px; }
.sty-f-l{ display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mk-font-ui);color:var(--fg-2); }
.sty-f-l .mi{ font-size:16px;color:var(--fg-3); }
.sty-f-in{ display:flex;align-items:center;gap:6px;min-width:0; }
.sty-f-in .ent-input{ height:32px;font:500 12px var(--mk-font-ui);min-width:0;flex:1; }
.sty-f-sw{ width:20px;height:20px;border-radius:6px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
.sty-ed-ft{ display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap; }
.sty-saved{ font:500 11.5px var(--mk-font-ui);color:var(--mk-ok); }
@media (max-width:520px){ .sty-f{ grid-template-columns:minmax(0,1fr); } }

/* ── New design system panel (065-049) ─────────────────────────────── */
.filter-panel.sty-new-panel{ width:min(560px,100vw); }
.sty-nd-pv{ position:sticky;top:-2px;z-index:2;margin:0 0 6px;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 10px 26px -18px rgba(13,37,48,.5); }
.sty-nd-pv .sty-card-pv{ min-height:170px; }
.sty-new-panel .wl-frow{ margin-bottom:12px; }
.sty-nd-sub{ font:500 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3); }
.sty-nd-l{ font:700 11.5px var(--mk-font-ui);color:var(--fg-2);margin:10px 0 6px; }
.sty-nd-cols{ display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 10px;margin-bottom:6px; }
.sty-nd-col{ display:flex;flex-direction:column;gap:4px;min-width:0;font:600 11.5px var(--mk-font-ui);color:var(--fg-2); }
.sty-nd-col .mci{ width:100%; }
.sty-nd-grid{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px; }
.sty-nd-seg{ display:flex;width:100%; }
.sty-nd-seg button{ flex:1 1 0;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sty-nd-chk{ display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:600 12.5px var(--mk-font-ui);color:var(--fg-1);cursor:pointer; }
.sty-nd-range{ display:flex;align-items:center;gap:10px;margin-top:8px;font:600 12px var(--mk-font-ui);color:var(--fg-2); }
.sty-nd-range[hidden]{ display:none; }
.sty-nd-range input{ flex:1;accent-color:var(--accent); }
.sty-nd-range b{ min-width:40px;text-align:end;font:700 12px var(--mk-font-ui);color:var(--fg-1); }
.sty-nd-icons{ display:flex;gap:14px;padding:10px 12px;border-radius:12px;background:var(--bg-input);border:1px solid var(--border);margin-bottom:6px; }
.sty-nd-icons .mi{ font-size:22px;color:var(--fg-1); }
.sty-nd-acts{ margin-top:0; }
.sty-new-panel .ent-input.is-bad{ border-color:var(--mk-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--mk-danger) 18%,transparent); }
@media (max-width:560px){ .sty-nd-grid{ grid-template-columns:minmax(0,1fr); } .sty-nd-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }