/* Smarketing shell — imported from Smarketing.dc.html.
 * The design is authored with inline styles per element; this sheet only
 * carries the document-level rules from the source doc's <helmet>. */

* { box-sizing: border-box; }

/* ---- design tokens ----------------------------------------------------
 * One source of truth for the surfaces, lines, type and spacing the shell
 * is built from. The markup in js/shell-template.js is authored with inline
 * styles (it was imported from a design doc), so these tokens are consumed
 * by the reusable primitives below (.ek-btn, .ek-input, .ek-card, …) and by
 * every panel that has since been rewritten to use them. New UI should use
 * the primitives rather than inventing another one-off inline style. */
:root {
  /* surfaces, darkest → most raised */
  --ek-base: #0D0D0F;
  --ek-chrome: #0B0B0C;
  --ek-surface: #151517;
  --ek-raised: #1C1C1F;
  /* lines — subtle is structural, strong is interactive/selected */
  --ek-line: rgba(255,255,255,.08);
  --ek-line-strong: rgba(255,255,255,.14);
  /* text */
  --ek-text: #EDEDEF;
  --ek-text-2: rgba(255,255,255,.62);
  --ek-text-3: rgba(255,255,255,.45);
  /* accents */
  --ek-accent: #3B82F6;
  --ek-accent-soft: rgba(59,130,246,.13);
  --ek-accent-line: rgba(59,130,246,.34);
  --ek-accent-text: #60A5FA;
  --ek-ok: #22C55E;
  --ek-warn: #F5A524;
  --ek-danger: #F87171;
  /* radii */
  --ek-r-sm: 8px;
  --ek-r-md: 10px;
  --ek-r-lg: 14px;
  --ek-r-xl: 18px;
  /* type */
  --ek-sans: "Inter", Helvetica, sans-serif;
  --ek-mono: "JetBrains Mono", ui-monospace, monospace;
}

body {
  margin: 0;
  background: var(--ek-chrome);
  font-family: var(--ek-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: #3B82F6; text-decoration: none; }
a:hover { color: #60A5FA; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255, .13); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes smk-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes smk-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

[hidden] { display: none !important; }

/* Every screen/sub-screen swap in the render loop toggles [hidden] on a
 * `.scif` wrapper (see js/smarketing.js). That wrapper carries no size of its
 * own, so the `height:100%` flex layouts authored *inside* each screen (see
 * js/shell-template.js) had nothing real to size against and fell back to
 * their raw content height — which is how you end up needing to zoom out to
 * ~40% to see an editor screen at all. Giving the wrapper itself a real
 * height closes that chain so each screen actually fills the window, with
 * internal panes (asides, canvas stage, etc.) scrolling on their own instead
 * of inflating the whole page. */
.scif { height: 100%; }

/* `showChat` and `creating` are overlays: real content lives in an inner
 * `position:absolute` div, so the outer `.scif` should take no space of its
 * own. But `.scif{height:100%}` above still applies to them, and since they
 * sit as direct siblings of the screen-content wrapper inside <main>'s
 * column flex layout, that 100% becomes their flex-basis — claiming nearly
 * all of <main>'s height and squeezing the actual content wrapper to 0.
 * (That's the "every screen but Apps/Auto/Export is blank" bug: those are
 * exactly the screens where the chat bar is shown.) Taking these two out of
 * the flow entirely fixes it — `main` is already `position:relative`, so
 * `inset:0` covers it exactly like the inner absolute div already assumed.
 *
 * `showChat`'s outer `.scif` now spans the full screen (`inset:0`) and paints
 * on top of the real content beneath it in DOM order. Its inner chat-bar div
 * opts itself out with `pointer-events:none` (re-enabling on the chips/input
 * it actually wants clickable), but that leaves the outer `.scif` itself —
 * covering every pixel of the screen outside that small bottom strip — at
 * the default `pointer-events:auto`, so it silently ate every click on the
 * screen behind it (icon/banner template cards, "Apply and edit", etc.).
 * `creating` is a real modal overlay and should keep blocking clicks while
 * it's up, so only `showChat` gets pointer-events:none here. */
.scif[data-if="showChat"], .scif[data-if="creating"] {
  position: absolute;
  inset: 0;
  height: auto;
}
.scif[data-if="showChat"] { pointer-events: none; }

/* The source design is authored as a fixed 1440x900 "window" centred on the
 * page (margin:36px auto, rounded border, drop shadow). Everything *inside*
 * that frame is fluid (flex + height:100%), so we drop the frame entirely and
 * let the shell fill the viewport edge-to-edge in any orientation. */
html, body { width: 100%; height: 100%; }
#app-root { width: 100%; height: 100vh; height: 100dvh; }
#app-root > div:first-child {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;   /* anchor for the full-window "creating" overlay */
}

/* ---- new-app-kit wizard fields ---------------------------------------- */
.smk-blank {
  display: inline-block;
  min-width: 90px;
  padding: 0 10px;
  color: #EDEDEF;
  border-bottom: 2px solid #3B82F6;
  outline: none;
  white-space: pre;
}
.smk-blank:empty::before {
  content: attr(data-ph);
  color: rgba(255,255,255, .3);
}
.smk-field {
  padding: 12px 13px;
  border-radius: 10px;
  background: #0F0F11;
  border: 1px solid rgba(255,255,255, .12);
  font-size: 13.5px;
  color: #EDEDEF;
  outline: none;
  font-family: "Inter", sans-serif;
}
.smk-field:focus { border-color: rgba(59,130,246, .5); }
.smk-field:empty::before {
  content: attr(data-ph);
  color: rgba(255,255,255, .3);
}

/* ---- text editor: per-app listing fields ---------------------------- */
.smk-input {
  min-height: 44px;
  padding: 12px 42px 12px 14px;
  border-radius: 10px;
  background: #0F0F11;
  border: 1px solid rgba(255,255,255, .12);
  font-size: 14px;
  line-height: 1.6;
  color: #EDEDEF;
  outline: none;
  font-family: "Inter", sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
}
.smk-input-lg { min-height: 150px; }
.smk-input:focus { border-color: rgba(59,130,246, .5); }
.smk-input:empty::before {
  content: attr(data-ph);
  color: rgba(255,255,255, .3);
}
.smk-ai-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
  background: rgba(59,130,246, .12);
  border: 1px solid rgba(59,130,246, .3);
  color: #3B82F6;
}
.smk-ai-btn:hover { background: rgba(59,130,246, .22); }

/* ---- transient toast ---------------------------------------------------- */
#smkToast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  max-width: min(90vw, 420px);
  background: #17171A;
  color: #EDEDEF;
  border: 1px solid rgba(255,255,255, .16);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  line-height: 1.5;
  font-family: "Inter", sans-serif;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}
#smkToast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- preview modal --------------------------------------------------- */
#smkPreviewModal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 6, .66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.smk-modal-card {
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow: auto;
  background: #17171A;
  border: 1px solid rgba(255,255,255, .12);
  border-radius: 16px;
  color: #EDEDEF;
  font-family: "Inter", sans-serif;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}
.smk-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255, .08);
  font-size: 13px;
  font-weight: 600;
}
.smk-modal-x {
  background: none;
  border: 0;
  color: rgba(255,255,255, .55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.smk-modal-x:hover { color: #EDEDEF; }
.smk-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.smk-modal-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255, .42);
  margin-top: 4px;
}
.smk-modal-btn {
  flex: 1;
  padding: 10px;
  border-radius: 9px;
  background: rgba(255,255,255, .06);
  border: 1px solid rgba(255,255,255, .14);
  color: #EDEDEF;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.smk-modal-btn-go {
  background: #3B82F6;
  border: 0;
  color:#FFFFFF;
  font-weight: 700;
}

/* ---- screenshot studio: live template canvas ------------------------- */
.smk-shot-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--ek-base);
}
.smk-shot-canvas {
  height: 100%;
  max-height: 520px;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1080 / 1920;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .5);
  background: #0B0B0C;
  touch-action: none;
}
#smkShotSlots {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.smk-shot-block {
  padding: 14px;
  border-radius: 12px;
  background: var(--ek-raised);
}
.smk-shot-block-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .005em;
  color: #EDEDEF;
  margin-bottom: 12px;
}
.smk-shot-block-label::before {
  content: "";
  flex: none;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: #3B82F6;
}
.smk-shot-btn {
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  background: rgba(255,255,255, .06);
  border: 1px solid rgba(255,255,255, .11);
  color: #EDEDEF;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.smk-shot-btn:hover { background: rgba(255,255,255, .1); }
.smk-select {
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  background: #0F0F11;
  border: 1px solid rgba(255,255,255, .14);
  color: #EDEDEF;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  outline: none;
  cursor: pointer;
}
.smk-select:focus { border-color: rgba(59,130,246, .5); }
.smk-shot-btn-go {
  background: #3B82F6;
  border: 0;
  color:#FFFFFF;
  font-weight: 700;
}
.smk-shot-thumb {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255, .12);
  margin-bottom: 8px;
  background: #0F0F11;
}

/* ---- screenshot template list: full-width six-frame showcase --------- */
.smk-tpl-row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--ek-surface);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 16px 18px 18px;
  cursor: pointer;
  color: var(--ek-text);
  font-family: var(--ek-sans);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.smk-tpl-row:hover {
  border-color: rgba(59,130,246, .45);
  background: var(--ek-raised);
}
.smk-tpl-row:active { transform: translateY(1px); }
.smk-tpl-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.smk-tpl-row-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.smk-tpl-row-meta {
  font-size: 11.5px;
  color: var(--ek-text-3);
  margin-top: 4px;
}
.smk-tpl-row-meta b { font-family: var(--ek-mono); font-size: 10.5px; font-weight: 400; }
.smk-tpl-row-cta {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ek-accent-text);
  padding: 8px 14px;
  border-radius: var(--ek-r-sm);
  background: var(--ek-accent-soft);
}
.smk-tpl-row:hover .smk-tpl-row-cta { background: var(--ek-accent); color: #FFFFFF; }
.smk-tpl-row-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.smk-tpl-frame {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255, .1);
  background: #0B0B0C;
}
.smk-tpl-noapp {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(59,130,246, .06);
  border: 1px solid rgba(59,130,246, .22);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255, .8);
}

/* ---- screenshot rail: automatic "ready" tick ------------------------- */
.smk-frame-tick {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #22C55E;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* ---- screenshot studio: "+ Add screenshot" rail affordance ------------ */
.smk-shot-add-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1.5px dashed rgba(255,255,255, .18);
  background: rgba(255,255,255, .02);
  color: rgba(255,255,255, .75);
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  cursor: pointer;
}
.smk-shot-add-frame:hover { border-color: rgba(59,130,246, .5); color: #EDEDEF; }
.smk-shot-add-frame span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(255,255,255, .4);
}
.smk-shot-add-frame-cap {
  text-align: center;
  padding: 9px 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: rgba(255,255,255, .35);
}

/* ---- name-your-standalone-set modal ------------------------------------ */
#smkNewSetModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---- screenshot store-listing preview modal -------------------------- */
#smkShotPreview {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.smk-shotprev-card {
  width: 100%;
  max-width: 1120px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #17171A;
  border: 1px solid rgba(255,255,255, .12);
  border-radius: 16px;
  overflow: hidden;
  color: #EDEDEF;
  font-family: "Inter", sans-serif;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
}
.smk-shotprev-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 22px;
  background: #0F0F11;
}
.smk-shotprev-frame {
  height: 460px;
  width: auto;
  flex: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255, .1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.smk-shotprev-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255, .08);
}

/* ---- "assembling your kit" animation --------------------------------- */
.smk-build { position: relative; width: 192px; height: 192px; }
.smk-build-glow {
  position: absolute; inset: 22px; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246, .3), transparent 70%);
  animation: smk-build-glow 1.7s ease-in-out infinite;
}
.smk-build-ring {
  position: absolute; inset: 0;
  animation: smk-build-spin 1.5s linear infinite;
}
.smk-build-p {
  position: absolute;
  animation: smk-build-in .7s cubic-bezier(.3, 1.3, .5, 1) both;
}
.smk-build-p1 { left: 40px; top: 42px; width: 58px; height: 58px; border-radius: 17px;
  background: linear-gradient(150deg, #60A5FA, #2563EB);
  --fx: -46px; --fy: -28px; --fr: -14deg; animation-delay: .1s; }
.smk-build-p2 { right: 34px; top: 34px; width: 60px; height: 86px; border-radius: 14px;
  background: linear-gradient(160deg, #1F1F23, #1F1F23); border: 1px solid rgba(255,255,255, .16);
  --fx: 46px; --fy: -22px; --fr: 10deg; animation-delay: .24s; }
.smk-build-p3 { left: 32px; bottom: 36px; width: 82px; height: 44px; border-radius: 12px;
  background: #1C1C1F; border: 1px solid rgba(255,255,255, .14);
  --fx: -40px; --fy: 40px; --fr: 8deg; animation-delay: .38s; }
.smk-build-p4 { right: 42px; bottom: 46px; width: 42px; height: 20px; border-radius: 10px;
  background: #3B82F6;
  --fx: 40px; --fy: 40px; --fr: -10deg; animation-delay: .52s; }
.smk-build-bar { width: 0; animation: smk-build-bar 2.35s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes smk-build-spin { to { transform: rotate(360deg); } }
@keyframes smk-build-glow { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: .95; transform: scale(1.08); } }
@keyframes smk-build-bar { to { width: 100%; } }
@keyframes smk-build-in {
  0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.6) rotate(var(--fr)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* ---- standalone library: icons / text drafts / screenshot sets ------- */
.smk-lib-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.smk-lib-title { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 5px; }
.smk-lib-sub {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255, .5);
  max-width: 520px;
}
.smk-lib-new-btn {
  flex: none;
  padding: 11px 18px;
  border-radius: 10px;
  background: #3B82F6;
  border: 0;
  color:#FFFFFF;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.smk-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.smk-lib-card {
  background: var(--ek-surface);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  color: var(--ek-text);
  font-family: var(--ek-sans);
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.smk-lib-card:hover { border-color: rgba(59,130,246, .45); background: var(--ek-raised); }
.smk-lib-card-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #0F0F11;
  object-fit: cover;
  border: 1px solid rgba(255,255,255, .1);
}
.smk-lib-card-thumb-wide { aspect-ratio: 16 / 9; }
.smk-lib-card-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smk-lib-card-meta {
  font-size: 11.5px;
  color: var(--ek-text-3);
}
.smk-lib-card-actions { display: flex; gap: 6px; }
.smk-lib-card-actions button {
  flex: 1;
  padding: 7px 0;
  border-radius: 7px;
  background: rgba(255,255,255, .06);
  border: 1px solid rgba(255,255,255, .12);
  color: #EDEDEF;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  cursor: pointer;
}
.smk-lib-card-actions button:hover { background: rgba(255,255,255, .11); }
.smk-lib-card-del { color: #F87171 !important; }
.smk-lib-empty {
  padding: 30px;
  text-align: center;
  color: rgba(255,255,255, .4);
  font-size: 12.5px;
  border: 1.5px dashed rgba(255,255,255, .14);
  border-radius: 14px;
  grid-column: 1 / -1;
}
.smk-lib-editor-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 10px 20px;
  background: rgba(59,130,246, .06);
  border-bottom: 1px solid rgba(59,130,246, .16);
}
.smk-lib-editor-name { font-size: 12.5px; font-weight: 600; }
.smk-lib-editor-tag {
  font-family: var(--ek-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ek-accent-text);
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--ek-accent-soft);
  flex: none;
}
.smk-lib-editor-bar button {
  flex: none;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255,255,255, .06);
  border: 1px solid rgba(255,255,255, .14);
  color: #EDEDEF;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  cursor: pointer;
}
.smk-lib-editor-bar button:hover { background: rgba(255,255,255, .11); }

/* ======================================================================
 * Shared primitives — buttons, inputs, cards, section headers, statuses.
 * ====================================================================== */

/* ---- focus: one visible ring everywhere ------------------------------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible,
[data-act]:focus-visible {
  outline: 2px solid var(--ek-accent);
  outline-offset: 2px;
}

/* ---- buttons ---------------------------------------------------------- */
.ek-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--ek-r-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ek-line);
  color: var(--ek-text);
  font-family: var(--ek-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ek-btn:hover { background: rgba(255,255,255,.1); border-color: var(--ek-line-strong); }
.ek-btn:active { transform: translateY(1px); }
.ek-btn-primary {
  background: var(--ek-accent);
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 600;
}
.ek-btn-primary:hover { background: #2E74E8; border-color: transparent; }
.ek-btn-ghost { background: none; border-color: transparent; color: var(--ek-text-2); }
.ek-btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--ek-text); }
.ek-btn-danger { background: none; border-color: rgba(248,113,113,.3); color: var(--ek-danger); }
.ek-btn-danger:hover { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.45); }
.ek-btn-icon { width: 34px; padding: 0; }
.ek-btn-lg { height: 40px; padding: 0 18px; font-size: 13px; }
.ek-btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; }
.ek-btn-block { width: 100%; }
.ek-btn[disabled], .ek-btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.ek-btn-on {
  background: var(--ek-accent-soft);
  border-color: var(--ek-accent-line);
  color: var(--ek-accent-text);
}

/* ---- inputs ----------------------------------------------------------- */
.ek-field {
  width: 100%;
  min-height: 34px;
  padding: 8px 11px;
  border-radius: var(--ek-r-sm);
  background: var(--ek-base);
  border: 1px solid var(--ek-line-strong);
  color: var(--ek-text);
  font-family: var(--ek-sans);
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}
.ek-field:focus { border-color: rgba(59,130,246,.55); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.ek-field::placeholder { color: rgba(255,255,255,.3); }
.ek-swatch {
  display: block;
  width: 100%;
  height: 32px;
  padding: 2px;
  border-radius: var(--ek-r-sm);
  background: var(--ek-base);
  border: 1px solid var(--ek-line-strong);
  cursor: pointer;
}
input[type="range"] { accent-color: var(--ek-accent); cursor: pointer; }

/* ---- section headers -------------------------------------------------- */
/* Eyebrow: a section label in the interface font — mono is reserved for
 * genuinely technical values (dimensions, counts, file names). */
.ek-eyebrow {
  font-family: var(--ek-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ek-text-3);
  margin: 0 0 10px;
}
.ek-meta {
  font-family: var(--ek-mono);
  font-size: 10.5px;
  color: var(--ek-text-3);
}
.ek-h1 {
  font-family: var(--ek-sans);
  letter-spacing: -0.02em;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 8px;
}
.ek-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ek-text-2); }

/* ---- cards / panels --------------------------------------------------- */
.ek-card {
  background: var(--ek-surface);
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-r-lg);
  padding: 18px 20px;
}
.ek-card-quiet {
  background: var(--ek-surface);
  border: 0;
  border-radius: var(--ek-r-lg);
  padding: 16px 18px;
}

/* ---- status --------------------------------------------------------- */
.ek-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ek-text-3);
  white-space: nowrap;
}
.ek-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  border: 1.5px solid rgba(255,255,255,.3);
}
.ek-status-progress { color: var(--ek-accent-text); }
.ek-status-progress::before {
  border-color: var(--ek-accent);
  background: linear-gradient(90deg, var(--ek-accent) 50%, transparent 50%);
}
.ek-status-ready { color: #5FD68A; }
.ek-status-ready::before { border-color: var(--ek-ok); background: var(--ek-ok); }

/* ---- the app-kit asset grid on the Apps screen ----------------------- */
.ek-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 12px;
}
.ek-asset-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  padding: 15px 16px;
  border-radius: var(--ek-r-lg);
  background: var(--ek-raised);
  border: 1px solid transparent;
  color: var(--ek-text);
  font-family: var(--ek-sans);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ek-asset-card:hover { border-color: var(--ek-accent-line); background: #222226; }
.ek-asset-card-top { display: flex; align-items: center; gap: 10px; }
.ek-asset-card-name { font-size: 13.5px; font-weight: 600; flex: 1; }
.ek-asset-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ek-asset-card-go { font-size: 12px; color: var(--ek-accent-text); opacity: 0; transition: opacity .15s ease; }
.ek-asset-card:hover .ek-asset-card-go { opacity: 1; }
.ek-asset-thumb {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ek-text-3);
}
.smk-app-card { transition: border-color .15s ease, background .15s ease; }
.smk-app-card:hover { border-color: rgba(59,130,246,.45) !important; background: var(--ek-raised) !important; }
.ek-progress { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.ek-progress > i { display: block; height: 100%; background: var(--ek-accent); border-radius: 2px; transition: width .4s ease; }
.ek-progress-full > i { background: var(--ek-ok); }

/* ---- "what a kit contains" flow (empty state) ------------------------ */
.ek-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ek-flow-step {
  flex: 1 1 120px;
  min-width: 112px;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--ek-raised);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ek-flow-step span { font-size: 12px; font-weight: 500; line-height: 1.3; }
.ek-flow-step em {
  font-family: var(--ek-mono);
  font-size: 9.5px;
  font-style: normal;
  color: var(--ek-text-3);
}
.ek-flow-arrow {
  align-self: center;
  color: rgba(255,255,255,.22);
  flex: none;
  font-size: 13px;
}

/* ---- primary navigation rail ----------------------------------------- */
.ek-nav-btn {
  position: relative;
  width: 78px;
  height: 64px;
  background: none;
  border: 0;
  padding: 0 4px;
  cursor: pointer;
  color: var(--ek-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color .14s ease;
}
.ek-nav-btn span {
  font-family: var(--ek-sans);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .005em;
  text-align: center;
  color: rgba(255,255,255,.7);
}
.ek-nav-btn svg { opacity: .82; }
.ek-nav-btn:hover svg, .ek-nav-btn:hover span { opacity: 1; color: var(--ek-text); }
/* secondary destinations (create / about) sit under the divider and stay
 * visually quieter than the core asset workflow above it */
.ek-nav-btn-2nd svg { opacity: .55; }
.ek-nav-btn-2nd span { color: rgba(255,255,255,.5); }
/* The rail is a fixed stack of 64px destinations; on a short window it would
 * otherwise push the account mark off the bottom. Scrolls instead, without a
 * visible bar (the absolutely-positioned indicator pill scrolls with it). */
.ek-nav-list {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.ek-nav-list::-webkit-scrollbar { width: 0; height: 0; }

/* ---- editor chrome: rails + inspectors ------------------------------- */
/* Widths live here (not inline) so they can shrink on smaller laptops
 * without ever squeezing the canvas below a usable size. */
.ek-rail {
  flex: none;
  width: 212px;
  border-right: 1px solid var(--ek-line);
  background: var(--ek-chrome);
  overflow: auto;
}
.ek-rail-narrow { width: 146px; }
.ek-inspector {
  flex: none;
  width: 300px;
  border-left: 1px solid var(--ek-line);
  background: var(--ek-chrome);
  overflow: auto;
}
.ek-inspector-wide { width: 332px; }
.ek-inspector-group { padding: 16px; border-bottom: 1px solid var(--ek-line); }
.ek-inspector-group:last-child { border-bottom: 0; }
@media (max-width: 1500px) {
  .ek-inspector { width: 280px; }
  .ek-inspector-wide { width: 300px; }
}
@media (max-width: 1366px) {
  .ek-rail { width: 184px; }
  .ek-rail-narrow { width: 128px; }
  .ek-inspector { width: 262px; }
  .ek-inspector-wide { width: 280px; }
}
@media (max-width: 1180px) {
  .ek-rail { width: 160px; }
  .ek-inspector, .ek-inspector-wide { width: 244px; }
}

/* ---- icon editor ------------------------------------------------------ */
.ek-icon-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px;
  overflow: auto;
  background: var(--ek-base);
}
.ek-icon-legibility {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 14px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.ek-icon-legibility > div { text-align: center; }
.ek-icon-legibility figcaption, .ek-icon-legibility .ek-meta { margin-top: 7px; font-size: 9.5px; }

/* ---- simulated store listing (kit preview + export screen) ----------- */
.ek-store-card {
  width: 100%;
  max-width: 420px;
  border-radius: 26px;
  background: #F4F2EE;
  color: #141310;
  padding: 20px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .55);
  font-family: var(--ek-sans);
}
.ek-store-strip { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 4px; }
.ek-store-strip canvas {
  width: 104px;
  height: auto;
  flex: none;
  border-radius: 11px;
  background: #0B0B0C;
}
.ek-store-empty {
  padding: 22px;
  border-radius: 12px;
  background: rgba(20, 19, 16, .05);
  text-align: center;
  font-size: 12px;
  color: rgba(20, 19, 16, .5);
}
.smk-kitprev-shot { width: 104px; height: auto; flex: none; border-radius: 11px; background: #0B0B0C; }

/* ---- export screen --------------------------------------------------- */
.ek-export-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--ek-r-md);
  background: rgba(255,255,255,.035);
}
.ek-export-row-off { background: none; box-shadow: inset 0 0 0 1px var(--ek-line); }
.ek-export-row span.n { font-size: 12.5px; flex: 1; }
.ek-tick {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-accent);
}
.ek-tick-off { background: none; border: 1.5px solid rgba(255,255,255,.22); }

/* ---- attach-to-app-kit picker ----------------------------------------- */
#smkAttachModal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 6, .66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---- first-run guidance ----------------------------------------------- */
/* One shared floating surface for the one-shot hints and the `?` helpers.
 * Positioned from JS (js/first-run.js) so it can flip and clamp inside the
 * viewport; everything visual below reuses the existing tokens. */
.ek-pop {
  position: fixed;
  /* parked off-screen until js/first-run.js measures and places it, so the
   * first paint can never widen the page */
  top: 0;
  left: -9999px;
  z-index: 9997;
  max-width: 300px;
  padding: 13px 14px 12px;
  border-radius: var(--ek-r-lg);
  background: var(--ek-raised);
  border: 1px solid var(--ek-line-strong);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
  font-family: var(--ek-sans);
  color: var(--ek-text);
}
.ek-pop-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--ek-raised);
  border: 1px solid var(--ek-line-strong);
  transform: rotate(45deg);
}
.ek-pop[data-side="top"] .ek-pop-arrow {
  bottom: -6px;
  border-top: 0;
  border-left: 0;
}
.ek-pop[data-side="bottom"] .ek-pop-arrow {
  top: -6px;
  border-bottom: 0;
  border-right: 0;
}
.ek-pop-title {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--ek-accent-text);
}
.ek-pop-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ek-text-2);
}
.ek-pop-ok {
  margin-top: 11px;
  height: 27px;
  padding: 0 12px;
  border-radius: var(--ek-r-sm);
  background: var(--ek-accent);
  border: 0;
  color: #FFFFFF;
  font-family: var(--ek-sans);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.ek-pop-ok:hover { background: #2E74E8; }
.ek-help-pop { max-width: 260px; }

/* the small `?` affordance itself */
.ek-help {
  width: 15px;
  height: 15px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--ek-line);
  color: var(--ek-text-3);
  font-family: var(--ek-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
}
.ek-help:hover, .ek-help[aria-expanded="true"] {
  background: var(--ek-accent-soft);
  border-color: var(--ek-accent-line);
  color: var(--ek-accent-text);
}

/* Quick guide */
#ekGuideModal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 6, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ek-guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ek-guide-steps li { display: flex; align-items: flex-start; gap: 11px; }
.ek-guide-n {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--ek-accent-soft);
  border: 1px solid var(--ek-accent-line);
  color: var(--ek-accent-text);
  font-family: var(--ek-mono);
  font-size: 10.5px;
  line-height: 18px;
  text-align: center;
}
.ek-guide-steps b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.ek-guide-steps em {
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ek-text-3);
}

/* contextual empty states (library grids with nothing in them yet) */
.smk-lib-empty-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ek-text);
  margin-bottom: 6px;
}
.smk-lib-empty-actions {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 15px;
}

/* export: what is still missing before the kit is worth downloading */
.ek-notready {
  padding: 12px 13px;
  border-radius: var(--ek-r-md);
  background: rgba(245,165,36,.07);
  border: 1px solid rgba(245,165,36,.26);
  margin-bottom: 12px;
}
.ek-notready-title { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.ek-notready ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ek-text-2);
}