/*
 * Shared look for the tool pages: the header bar, the colour tokens, the
 * two-pane tool workspace, and a skin that brings the Tailwind markup inside
 * each page onto the same palette. Pages opt in with <body class="app-page">.
 *
 * Only colour, border, radius and shadow are restyled on existing elements —
 * never display or position — so no page's layout or script can break on it.
 *
 * Tokens are --ie-*: theme-toggle.css redefines --brand, --line and --bg with
 * !important in dark mode, which would turn an accent built on them white.
 */
:root {
  --ie-bg: #f2f4f6;
  --ie-panel: #ffffff;
  --ie-panel-2: #f7f9fa;
  --ie-line: #e2e7ec;
  --ie-line-strong: #cbd4dc;
  --ie-text: #0f1c26;
  --ie-text-2: #4a5a68;
  --ie-text-3: #7d8b97;
  --ie-brand: #286080;
  --ie-brand-hover: #1f4d68;
  --ie-brand-soft: #eaf3f6;
  --ie-brand-line: #b9d7e2;
  --ie-brand-text: #1c4f66;
  --ie-stage: #e8ecef;
  --ie-stage-dot: rgba(15, 28, 38, 0.07);
  --ie-shadow: 0 1px 2px rgba(15, 28, 38, 0.05), 0 1px 1px rgba(15, 28, 38, 0.03);
  --ie-shadow-lg: 0 24px 60px rgba(15, 28, 38, 0.18);
  --ie-header-h: 56px;
}
:root[data-theme="dark"] {
  --ie-bg: #1b1b1b;
  --ie-panel: #242424;
  --ie-panel-2: #2b2b2b;
  --ie-line: rgba(255, 255, 255, 0.09);
  --ie-line-strong: rgba(255, 255, 255, 0.18);
  --ie-text: #f1f3f5;
  --ie-text-2: #b9c2ca;
  --ie-text-3: #8a949c;
  --ie-brand: #4a90ac;
  --ie-brand-hover: #5ba3c0;
  --ie-brand-soft: rgba(74, 144, 172, 0.16);
  --ie-brand-line: rgba(143, 208, 234, 0.32);
  --ie-brand-text: #8fd0ea;
  --ie-stage: #141414;
  --ie-stage-dot: rgba(255, 255, 255, 0.06);
  --ie-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ie-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
}

body.app-page {
  background: var(--ie-bg);
  color: var(--ie-text);
  font-feature-settings: "ss01" 1, "ss02" 1;
  -webkit-font-smoothing: antialiased;
}
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 15px; height: 15px; }
.ic-lg { width: 22px; height: 22px; }

/* ================= header ================= */
.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  min-height: var(--ie-header-h); padding: 0 16px;
  background: var(--ie-panel);
  border-bottom: 1px solid var(--ie-line);
}
.app-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.app-brand img { height: 26px; width: auto; }
:root[data-theme="dark"] .app-brand img { filter: brightness(1.18) contrast(1.04); }
.app-title { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ie-text); white-space: nowrap; }
.app-title::before { content: ""; width: 1px; height: 20px; background: var(--ie-line-strong); }
.app-nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; }
.nav-link, .nav-menu > summary {
  display: inline-flex; align-items: center; gap: 4px;
  height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--ie-text-2);
  cursor: pointer; list-style: none; white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-link:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { background: var(--ie-panel-2); color: var(--ie-text); }
.nav-link.is-current,
.nav-menu > summary.has-current { color: var(--ie-brand-text); background: var(--ie-brand-soft); }
/* Pages toggle Log in / New design / Logout with Tailwind's hidden class;
   not every page loads Tailwind, so the header carries its own. */
.app-header .hidden { display: none !important; }
.nav-menu { position: relative; }
.nav-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 220px; max-height: calc(100vh - 80px); overflow-y: auto; padding: 6px; border-radius: 12px;
  background: var(--ie-panel); border: 1px solid var(--ie-line); box-shadow: var(--ie-shadow-lg);
}
.nav-pop a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ie-text-2); }
.nav-pop a:hover { background: var(--ie-panel-2); color: var(--ie-text); }
.nav-pop a.is-current { background: var(--ie-brand-soft); color: var(--ie-brand-text); font-weight: 600; }
.nav-pop .nav-pop-label { display: block; padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ie-text-3); }
.nav-compact { display: none; }
.nav-compact > summary { padding: 0 8px; }

.header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; }
.account-bar { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; color: var(--ie-text-2); white-space: nowrap; }
.account-bar strong { color: var(--ie-text); font-weight: 600; }
.account-bar a { color: var(--ie-brand-text); font-weight: 600; }
.account-bar a:hover { text-decoration: underline; }
.acct-name { overflow: hidden; text-overflow: ellipsis; }
.credit-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 999px; background: var(--ie-brand-soft); border: 1px solid var(--ie-brand-line); color: var(--ie-brand-text);
}
.credit-pill strong { color: var(--ie-brand-text); }
.account-bar a.credit-pill:hover { text-decoration: none; border-color: var(--ie-brand); }
.acct-upgrade {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--ie-brand); color: #fff !important; font-weight: 600; text-decoration: none !important;
}
.acct-upgrade:hover { background: var(--ie-brand-hover); }
.acct-note { color: var(--ie-text-3); overflow: hidden; text-overflow: ellipsis; }
.account-bar:empty { display: none; }
/* Tour button: shown by /js/app-tour.js only on pages that have a tour. */
.tour-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--ie-line-strong); background: var(--ie-panel); color: var(--ie-text-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tour-btn:hover { border-color: var(--ie-brand); color: var(--ie-brand-text); }
.tour-btn[hidden] { display: none; }

/* Guided tour card (driver.js, restyled onto the shared palette). */
.driver-popover.ie-tour {
  background: var(--ie-panel); color: var(--ie-text); border: 1px solid var(--ie-line);
  border-radius: 12px; box-shadow: var(--ie-shadow-lg); padding: 16px 16px 14px; max-width: 320px;
  font-family: inherit;
}
.driver-popover.ie-tour .driver-popover-title {
  display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--ie-text);
}
.driver-popover.ie-tour .driver-popover-description { font-size: 13px; line-height: 1.5; color: var(--ie-text-2); margin-top: 6px; }
.ie-tour-icon {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--ie-brand-soft); color: var(--ie-brand-text); border: 1px solid var(--ie-brand-line);
}
.ie-tour-text { display: block; }
.ie-tour-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.ie-tour-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  background: var(--ie-panel-2); border: 1px solid var(--ie-line); color: var(--ie-text);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ie-tour-chip .ic { color: var(--ie-brand-text); width: 14px; height: 14px; }
.ie-tour-chips.is-flow { gap: 3px; }
.ie-tour-arrow { display: inline-flex; color: var(--ie-text-3); }
.ie-tour-arrow .ic { width: 13px; height: 13px; }
/* Picture above the title: fixed height so the card never jumps as it loads. */
.driver-popover.ie-tour.has-media { max-width: 340px; }
.ie-tour-media {
  margin: -16px -16px 12px; height: 150px; overflow: hidden; border-radius: 12px 12px 0 0;
  background: var(--ie-stage);
}
.ie-tour-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ie-tour-media.is-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ie-tour-media figure { position: relative; margin: 0; height: 150px; overflow: hidden; }
.ie-tour-media figcaption {
  position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 11px; font-weight: 600;
}
/* Over a photo the close button needs its own backing to stay visible. */
.driver-popover.ie-tour.has-media .driver-popover-close-btn {
  top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 999px; z-index: 2;
  background: rgba(0, 0, 0, 0.6); color: #fff;
}
.driver-popover.ie-tour.has-media .driver-popover-close-btn:hover { background: rgba(0, 0, 0, 0.8); color: #fff; }
@media (max-width: 480px), (max-height: 700px) {
  .ie-tour-media, .ie-tour-media figure { height: 110px; }
}
.driver-popover.ie-tour .driver-popover-progress-text { font-size: 12px; color: var(--ie-text-3); }
.driver-popover.ie-tour .driver-popover-footer button {
  font: inherit; font-size: 12.5px; font-weight: 600; text-shadow: none; border-radius: 8px; padding: 5px 12px;
  background: var(--ie-panel); color: var(--ie-text-2); border: 1px solid var(--ie-line-strong);
}
.driver-popover.ie-tour .driver-popover-footer .driver-popover-next-btn {
  background: var(--ie-brand); border-color: var(--ie-brand); color: #fff;
}
.driver-popover.ie-tour .driver-popover-footer .driver-popover-next-btn:hover { background: var(--ie-brand-hover); }
.driver-popover.ie-tour .driver-popover-close-btn { color: var(--ie-text-3); }
.driver-popover.ie-tour .driver-popover-close-btn:hover { color: var(--ie-text); }
/* driver.js makes the other three arrow sides transparent; only the visible one takes the card colour. */
.driver-popover.ie-tour .driver-popover-arrow-side-left { border-left-color: var(--ie-panel); }
.driver-popover.ie-tour .driver-popover-arrow-side-right { border-right-color: var(--ie-panel); }
.driver-popover.ie-tour .driver-popover-arrow-side-top { border-top-color: var(--ie-panel); }
.driver-popover.ie-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--ie-panel); }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px;
  border: 1px solid var(--ie-line); font-size: 11.5px; font-weight: 600;
}
.lang-toggle button { line-height: 1.6; }
.lang-toggle button:not(.text-white) { color: var(--ie-text-2); }

/* ================= page frame ================= */
.app-frame { width: 100%; }
.app-frame--contained { max-width: 1320px; margin: 0 auto; padding: 20px 20px 48px; }
.app-frame--narrow { max-width: 820px; }

/* Page intro used by the contained pages (title + one line). */
.page-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.page-intro h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ie-text); }
.page-intro p { margin-top: 4px; font-size: 13px; color: var(--ie-text-3); }

/* ================= tool workspace: settings | result ================= */
.tool-workspace {
  display: grid;
  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
  height: calc(100vh - var(--ie-header-h));
  min-height: 560px;
}
body.app-page .tool-workspace > .tool-inspector {
  min-height: 0; overflow-y: auto; margin: 0;
  padding: 22px 22px 32px;
  background: var(--ie-panel);
  border: 0; border-right: 1px solid var(--ie-line); border-radius: 0; box-shadow: none;
}
body.app-page .tool-workspace > .tool-stage {
  min-height: 0; overflow-y: auto; margin: 0;
  /* The theme toggle and WhatsApp help button float over the bottom-right
     corner: leave room so results are never hidden under them. */
  padding: 24px 28px 120px;
  background-color: var(--ie-stage);
  background-image: radial-gradient(circle at 1px 1px, var(--ie-stage-dot) 1px, transparent 0);
  background-size: 20px 20px;
}
.tool-stage > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.tool-stage > * + * { margin-top: 20px; }
.tool-stage > section,
.tool-stage > aside { box-shadow: var(--ie-shadow); }
/* When the result column itself is the grid child (no wrapper). */
.tool-workspace > section.tool-stage,
.tool-workspace > aside.tool-stage { border: 0; border-radius: 0; }

/* The Generate button and its status stay in view at the foot of the settings
   panel however long the form gets. The negative margins span the panel's
   padding so the bar runs edge to edge. */
@media (min-width: 1025px) {
  body.app-page .tool-inspector .tool-cta {
    /* Sticky offsets count from inside the panel's 32px bottom padding. */
    position: sticky; bottom: -32px; z-index: 5;
    margin: 16px -22px -32px; padding: 14px 22px 18px;
    background: var(--ie-panel);
    border-top: 1px solid var(--ie-line);
    box-shadow: 0 -12px 24px -14px rgba(15, 28, 38, 0.22);
  }
}

@media (max-width: 1024px) {
  .tool-workspace { display: block; height: auto; min-height: 0; }
  body.app-page .tool-workspace > .tool-inspector { overflow: visible; border-right: 0; border-bottom: 1px solid var(--ie-line); padding: 18px 16px 24px; }
  body.app-page .tool-workspace > .tool-stage { overflow: visible; padding: 16px 14px 110px; }
}

/* ================= skin for the Tailwind markup inside pages ================= */
body.app-page .btn-primary {
  background: var(--ie-brand); color: #fff; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 28, 38, 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
body.app-page .btn-primary:hover:not(:disabled) {
  background: var(--ie-brand-hover); transform: none;
  box-shadow: 0 8px 22px rgba(40, 96, 128, 0.28);
}
body.app-page .btn-primary:disabled { box-shadow: none; }
body.app-page button.bg-slate-900,
body.app-page a.bg-slate-900,
body.app-page .rounded-full.bg-slate-900 { background-color: var(--ie-brand); border-color: var(--ie-brand); }
body.app-page button.bg-slate-900:hover:not(:disabled),
body.app-page a.bg-slate-900:hover { background-color: var(--ie-brand-hover); border-color: var(--ie-brand-hover); }
body.app-page .progress-fill {
  background: linear-gradient(90deg, var(--ie-brand), #4a90ac, var(--ie-brand));
  background-size: 180% 100%;
}
body.app-page .glass { border-color: var(--ie-line); }
body.app-page .rounded-3xl { border-radius: 16px; }
body.app-page .border-slate-200 { border-color: var(--ie-line); }
body.app-page .border-slate-300 { border-color: var(--ie-line-strong); }
body.app-page .type-display { letter-spacing: -0.015em; }

body.app-page select,
body.app-page textarea,
body.app-page input[type="text"],
body.app-page input[type="number"],
body.app-page input[type="email"],
body.app-page input[type="tel"],
body.app-page input[type="url"],
body.app-page input[type="search"] {
  border-color: var(--ie-line-strong);
  border-radius: 9px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
body.app-page select:focus,
body.app-page textarea:focus,
body.app-page input[type="text"]:focus,
body.app-page input[type="number"]:focus,
body.app-page input[type="email"]:focus,
body.app-page input[type="tel"]:focus,
body.app-page input[type="url"]:focus,
body.app-page input[type="search"]:focus {
  outline: none; border-color: var(--ie-brand); box-shadow: 0 0 0 3px var(--ie-brand-soft);
}
body.app-page input[type="range"],
body.app-page input[type="checkbox"],
body.app-page input[type="radio"] { accent-color: var(--ie-brand); }

/* ================= dark mode guards ================= */
/* theme-toggle.css greys every nav/input/textarea/disabled control and every
   .bg-white, all with !important. Hold the frame's own surfaces. */
:root[data-theme="dark"] .app-nav { background-color: transparent !important; }
:root[data-theme="dark"] .app-header nav { background-color: transparent !important; }
:root[data-theme="dark"] .tool-workspace > .tool-inspector { background-color: var(--ie-panel) !important; }
:root[data-theme="dark"] .credit-pill { border-color: var(--ie-brand-line); }
:root[data-theme="dark"] .nav-pop { background-color: var(--ie-panel) !important; }

/* ================= responsive header ================= */
@media (max-width: 1180px) {
  .app-nav { display: none; }
  .nav-compact { display: block; }
}
@media (max-width: 760px) {
  .acct-note { display: none; }
}
@media (max-width: 640px) {
  .app-header { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .app-title { font-size: 13px; }
  .nav-compact { order: 2; margin-left: auto; }
  .header-end { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .account-bar { flex: 1 1 auto; justify-content: space-between; flex-wrap: wrap; }
  .app-frame--contained { padding: 14px 12px 40px; }
}

/* ================= components for the tool pages =================
   Built for the settings panel (.tool-inspector) and the result stage
   (.tool-stage). Pages keep their ids and data-attributes; these classes
   only carry the look. Active states key off the classes the page scripts
   already toggle (border-slate-900 on presets and choice cards). */
.ix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ix-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ie-text); }
.ix-head p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ie-text-3); }
.ix-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none; height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--ie-brand-soft); border: 1px solid var(--ie-brand-line); color: var(--ie-brand-text);
}
.ix-steps { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12px; color: var(--ie-text-2); }
.ix-steps span { display: inline-flex; align-items: center; gap: 6px; }
.ix-steps > span + span::before { content: ""; width: 16px; height: 1px; margin-right: 2px; background: var(--ie-line-strong); }
.ix-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 999px; background: var(--ie-brand); color: #fff; font-size: 11px; font-weight: 700;
}

body.app-page .ix-sec { margin: 0 -22px; padding: 18px 22px; border-top: 1px solid var(--ie-line); }
.ix-sec-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ie-text); }
.ix-sec-title .ic { color: var(--ie-brand-text); }
.ix-sec-title small { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--ie-text-3); text-align: right; }

.ix-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 22px 16px; border-radius: 12px; cursor: pointer;
  border: 1.5px dashed var(--ie-line-strong); background: var(--ie-panel-2);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.ix-drop:hover, .ix-drop.border-brand-500 { border-color: var(--ie-brand); background: var(--ie-brand-soft); }
/* Some pages mark a drag-over with border-slate-900 bg-slate-50 instead. */
body.app-page .ix-drop.border-slate-900 { border-color: var(--ie-brand); background: var(--ie-brand-soft); }
.ix-drop-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; margin-bottom: 6px;
  border-radius: 11px; background: var(--ie-panel); border: 1px solid var(--ie-line); color: var(--ie-brand-text);
}
.ix-drop strong { font-size: 13.5px; font-weight: 600; color: var(--ie-text); }
.ix-drop > span:not(.ix-drop-icon) { font-size: 12px; color: var(--ie-text-3); }
.ix-preview { margin-top: 12px; }
.ix-preview p { margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--ie-text-2); }
.ix-preview img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ie-line); }

.ix-note {
  display: flex; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  font-size: 12px; line-height: 1.5; color: #8a5a00; background: #fff8eb; border: 1px solid #f6dfae;
}
.ix-note .ic { margin-top: 1px; color: #b7791f; }
.ix-note a { font-weight: 600; text-decoration: underline; }
.ix-note--info { color: var(--ie-brand-text); background: var(--ie-brand-soft); border-color: var(--ie-brand-line); }
.ix-note--info .ic { color: var(--ie-brand-text); }

.ix-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.app-page .ix-chip {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 10px; text-align: left;
  border: 1px solid var(--ie-line); background: var(--ie-panel); color: var(--ie-text-2); font-size: 12.5px; font-weight: 600;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
body.app-page .ix-chip .ic { color: var(--ie-text-3); }
body.app-page .ix-chip:hover:not(:disabled) { border-color: var(--ie-brand-line); background: var(--ie-brand-soft); color: var(--ie-brand-text); }
body.app-page .ix-chip.border-slate-900 { border-color: var(--ie-brand); background: var(--ie-brand-soft); color: var(--ie-brand-text); box-shadow: inset 0 0 0 1px var(--ie-brand); }
body.app-page .ix-chip.border-slate-900 .ic { color: var(--ie-brand-text); }

.ix-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ix-field { min-width: 0; }
.ix-label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ie-text-2); }
body.app-page .ix-field select,
body.app-page .ix-field input[type="text"],
body.app-page .ix-field textarea {
  width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ie-line-strong); border-radius: 9px;
  background-color: var(--ie-panel); color: var(--ie-text); font-size: 13px;
}
body.app-page .ix-field textarea { height: auto; padding: 9px 11px; line-height: 1.5; resize: vertical; }
/* Plain forms (no .ix-field wrappers): every text-like control inside gets the same skin. */
body.app-page .ix-inputs :where(input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], input[type="datetime-local"], input:not([type]), select, textarea) {
  display: block; width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--ie-line-strong); border-radius: 9px;
  background-color: var(--ie-panel); color: var(--ie-text); font-size: 13px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
body.app-page .ix-inputs textarea { height: auto; padding: 9px 11px; line-height: 1.5; resize: vertical; }
body.app-page .ix-inputs :is(input, select, textarea):focus { outline: none; border-color: var(--ie-brand); box-shadow: 0 0 0 3px var(--ie-brand-soft); }
body.app-page .ix-inputs ::placeholder { color: var(--ie-text-3); }
.ix-help { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--ie-text-3); }

.ix-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.app-page .ix-choice {
  display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 10px; text-align: left;
  border: 1px solid var(--ie-line); background: var(--ie-panel);
  transition: border-color 140ms ease, background-color 140ms ease;
}
body.app-page .ix-choice:hover { border-color: var(--ie-brand-line); }
body.app-page .ix-choice strong { font-size: 12.5px; font-weight: 600; color: var(--ie-text); }
body.app-page .ix-choice span { font-size: 11px; line-height: 1.4; color: var(--ie-text-3); }
body.app-page .ix-choice.border-slate-900 { border-color: var(--ie-brand); background: var(--ie-brand-soft); box-shadow: inset 0 0 0 1px var(--ie-brand); }
body.app-page .ix-choice.border-slate-900 strong { color: var(--ie-brand-text); }
.ix-choice-body { margin-top: 12px; }
.ix-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.app-page .ix-check {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--ie-line); background: var(--ie-panel); font-size: 12px; font-weight: 500; color: var(--ie-text-2);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
body.app-page .ix-check:hover { border-color: var(--ie-brand-line); }
body.app-page .ix-check:has(input:checked) { border-color: var(--ie-brand-line); background: var(--ie-brand-soft); color: var(--ie-brand-text); }
.ix-check input { flex: none; }
.ix-callout { padding: 12px; border-radius: 10px; background: var(--ie-panel-2); border: 1px solid var(--ie-line); font-size: 12px; line-height: 1.55; color: var(--ie-text-2); }
.ix-callout p + p { margin-top: 6px; }
.ix-callout strong { color: var(--ie-text); }

body.app-page .ix-collapse { border: 1px solid var(--ie-line); border-radius: 12px; background: var(--ie-panel); }
.ix-collapse + .ix-collapse { margin-top: 8px; }
.ix-collapse > button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--ie-text); text-align: left;
}
.ix-collapse > button .ic { color: var(--ie-text-3); }
.ix-collapse > button > span:last-child { margin-left: auto; font-size: 10px; color: var(--ie-text-3); }
.ix-collapse-body { padding: 2px 12px 12px; }
.ix-kv p { font-size: 12px; line-height: 1.6; color: var(--ie-text-2); }

.ix-file { display: block; width: 100%; font-size: 12px; color: var(--ie-text-2); }
.ix-file::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--ie-line-strong);
  background: var(--ie-panel); color: var(--ie-text); font-weight: 600; cursor: pointer;
}

/* ---- result stage ---- */
body.app-page .ix-card {
  padding: 18px 20px; border-radius: 16px;
  background: var(--ie-panel); border: 1px solid var(--ie-line); box-shadow: var(--ie-shadow);
}
.ix-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ix-card-head h2, .ix-card-head h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ie-text); }
.ix-card-head h3 { font-size: 13.5px; }
.ix-card-head .ic { color: var(--ie-brand-text); }
.ix-card-head small { font-size: 12px; color: var(--ie-text-3); }
body.app-page .ix-canvas {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
  height: clamp(340px, 56vh, 640px); overflow: hidden; border-radius: 12px;
  border: 1px dashed var(--ie-line-strong);
  background-color: var(--ie-panel-2);
  background-image: radial-gradient(circle at 1px 1px, var(--ie-stage-dot) 1px, transparent 0);
  background-size: 18px 18px;
}
/* Results the scripts insert (with their own sizing and a black letterbox) fill the canvas instead. */
body.app-page .ix-canvas > img { width: 100%; height: 100%; max-height: none; object-fit: contain; background: transparent; border: 0; border-radius: 0; }
.ix-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; padding: 0 16px; text-align: center; }
.ix-empty .ix-drop-icon { width: 48px; height: 48px; margin: 0; }
.ix-empty > span:not(.ix-drop-icon) { font-size: 13px; line-height: 1.5; color: var(--ie-text-3); }
.ix-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.app-page .ix-btn {
  align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--ie-line-strong); background: var(--ie-panel); color: var(--ie-text);
  font-size: 13px; font-weight: 600; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
body.app-page .ix-btn:hover:not(:disabled) { border-color: var(--ie-brand); color: var(--ie-brand-text); background: var(--ie-brand-soft); }
body.app-page .ix-btn.btn-primary { border-color: transparent; background: var(--ie-brand); color: #fff; }
body.app-page .ix-btn.btn-primary:hover:not(:disabled) { background: var(--ie-brand-hover); color: #fff; }
body.app-page .ix-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ix-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.app-page .ix-tile {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--ie-panel); border: 1px solid var(--ie-line);
}
.ix-tile .ix-drop-icon { width: 36px; height: 36px; margin: 0; }
.ix-tile small { display: block; font-size: 11.5px; color: var(--ie-text-3); }
.ix-tile strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ie-text); }
.ix-history { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
body.app-page .ix-history > button { border-color: var(--ie-line); background: var(--ie-panel-2); border-radius: 10px; }
body.app-page .ix-history > button:hover { border-color: var(--ie-brand); }
body.app-page .ix-history > button img { height: 76px; }
/* The script writes its empty message as a col-span-6 div; keep it on one row. */
.ix-history > div { grid-column: 1 / -1; }
.ix-fine { font-size: 11.5px; line-height: 1.5; color: var(--ie-text-3); }

/* Status pill with a dot: idle / work / ok / err (the Edit Tool's badge). */
.state-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--ie-panel-2); color: var(--ie-text-2); border: 1px solid var(--ie-line);
}
.state-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.8; }
.state-badge.is-work { background: #fff7e6; color: #9a6200; border-color: #f5dca8; }
.state-badge.is-ok { background: #e9f7ef; color: #1d7a45; border-color: #bfe5cd; }
.state-badge.is-err { background: #fdeeee; color: #b42318; border-color: #f5c6c2; }
:root[data-theme="dark"] .state-badge.is-work { background: rgba(245, 180, 60, 0.14); color: #f5c46b; border-color: rgba(245, 180, 60, 0.3); }
:root[data-theme="dark"] .state-badge.is-ok { background: rgba(60, 190, 120, 0.14); color: #7ad7a2; border-color: rgba(60, 190, 120, 0.3); }
:root[data-theme="dark"] .state-badge.is-err { background: rgba(240, 80, 70, 0.14); color: #ff8f86; border-color: rgba(240, 80, 70, 0.3); }
.state-badge.is-work::before { animation: ix-pulse 1s ease-in-out infinite; }
@keyframes ix-pulse { 50% { opacity: 0.25; } }

/* Page title on a result stage. */
.ix-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ix-page-head small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ie-brand-text); }
.ix-page-head h1 { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ie-text); }
.ix-page-head p { margin-top: 4px; max-width: 720px; font-size: 13px; line-height: 1.55; color: var(--ie-text-3); }
.ix-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1180px) { .ix-cols2 { grid-template-columns: minmax(0, 1fr); } }

/* Image frame that is itself a button (click to zoom). */
body.app-page .ix-frame {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
  overflow: hidden; border-radius: 12px; border: 1px dashed var(--ie-line-strong);
  background-color: var(--ie-panel-2);
  background-image: radial-gradient(circle at 1px 1px, var(--ie-stage-dot) 1px, transparent 0);
  background-size: 18px 18px;
}
body.app-page .ix-frame:not(:disabled) { cursor: zoom-in; }
.ix-frame > span:not([class*="absolute"]) { padding: 0 20px; font-size: 13px; line-height: 1.5; color: var(--ie-text-3); text-align: center; }

/* Pick-a-render list in a settings panel; the script marks the chosen one
   with border-slate-900. */
.ix-render-list { display: grid; gap: 10px; }
body.app-page .ix-render-list > button { border-color: var(--ie-line); border-radius: 12px; background: var(--ie-panel); }
body.app-page .ix-render-list > button:hover { border-color: var(--ie-brand-line); }
body.app-page .ix-render-list > button.border-slate-900 { border-color: var(--ie-brand); box-shadow: 0 0 0 2px var(--ie-brand); }
:root[data-theme="dark"] .ix-frame { border-color: var(--ie-line-strong); }

@media (max-width: 640px) {
  .ix-grid2, .ix-choices, .ix-tiles, .ix-checks { grid-template-columns: minmax(0, 1fr); }
  body.app-page .ix-card { padding: 14px; }
}

/* dark mode: theme-toggle.css paints every div/span/label border slate and
   every select/input/textarea grey with !important */
:root[data-theme="dark"] .ix-card,
:root[data-theme="dark"] .ix-tile,
:root[data-theme="dark"] .ix-collapse,
:root[data-theme="dark"] .ix-callout,
:root[data-theme="dark"] .ix-check,
:root[data-theme="dark"] .ix-drop-icon { border-color: var(--ie-line); }
:root[data-theme="dark"] .ix-drop,
:root[data-theme="dark"] .ix-canvas { border-color: var(--ie-line-strong); }
:root[data-theme="dark"] .ix-badge { border-color: var(--ie-brand-line); }
:root[data-theme="dark"] .ix-note { color: #f3c77a; background: rgba(245, 180, 60, 0.1); border-color: rgba(245, 180, 60, 0.28); }
:root[data-theme="dark"] .ix-note--info { color: var(--ie-brand-text); background: var(--ie-brand-soft); border-color: var(--ie-brand-line); }
:root[data-theme="dark"] .ix-sec { border-color: var(--ie-line); }

/* ---- multi-step pages (Plan Studio) ---- */
/* Connected stepper. Pages toggle .active / .done on .step-card and write
   the number or a tick into .step-num. */
.ix-stepper {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 20px; overflow-x: auto;
  border: 1px solid var(--ie-line); border-radius: 14px; background: var(--ie-panel); box-shadow: var(--ie-shadow);
}
body.app-page .ix-stepper .step-card {
  display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 150px; padding: 12px 16px;
  border: 0; border-radius: 0; background: transparent; position: relative;
}
body.app-page .ix-stepper .step-card + .step-card { border-left: 1px solid var(--ie-line); }
.ix-stepper .step-card small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ie-text-3); }
.ix-stepper .step-card strong { display: block; font-size: 13px; font-weight: 600; color: var(--ie-text-2); white-space: nowrap; }
.ix-stepper .step-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--ie-panel-2); color: var(--ie-text-3); border: 1px solid var(--ie-line-strong);
}
body.app-page .ix-stepper .step-card.active { background: var(--ie-brand-soft); box-shadow: inset 0 -2px 0 var(--ie-brand); }
body.app-page .ix-stepper .step-card.active strong { color: var(--ie-brand-text); }
body.app-page .ix-stepper .step-card.active .step-num { background: var(--ie-brand); border-color: var(--ie-brand); color: #fff; }
body.app-page .ix-stepper .step-card.done .step-num { background: var(--ie-brand-soft); border-color: var(--ie-brand-line); color: var(--ie-brand-text); }
body.app-page .ix-stepper .step-card.done strong { color: var(--ie-text); }

/* Card split into a working area and a settings column. */
body.app-page .ix-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr); padding: 0; overflow: hidden; }
.ix-split-main { padding: 22px 24px; min-width: 0; }
body.app-page .ix-split-side { padding: 22px 22px 24px; border-left: 1px solid var(--ie-line); background: var(--ie-panel); min-width: 0; }
body.app-page .ix-split-side .ix-sec { margin: 0 -22px; }
@media (max-width: 1024px) {
  body.app-page .ix-split { grid-template-columns: minmax(0, 1fr); }
  body.app-page .ix-split-side { border-left: 0; border-top: 1px solid var(--ie-line); }
}

/* Tool buttons in an editor toolbar. Zero specificity (:where) so the colour
   utilities a button carries, and the ones its script adds for the armed
   state (bg-orange-600, text-white and friends), always win. */
:where(body.app-page .ix-tool) {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--ie-line-strong); background-color: var(--ie-panel); color: var(--ie-text-2);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
:where(body.app-page .ix-tool:hover:not(:disabled)) { border-color: var(--ie-brand); }
body.app-page .ix-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.ix-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Two-option segmented switch; the active button carries bg-slate-900. */
.ix-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; background: var(--ie-panel-2); border: 1px solid var(--ie-line); }
body.app-page .ix-seg > button {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; border: 0;
  font-size: 12px; font-weight: 600; color: var(--ie-text-2); background: transparent;
}
body.app-page .ix-seg > button.bg-slate-900 { background: var(--ie-panel); color: var(--ie-brand-text); box-shadow: 0 1px 2px rgba(15, 28, 38, 0.12); }

:root[data-theme="dark"] .ix-stepper,
:root[data-theme="dark"] .ix-seg { border-color: var(--ie-line); }
:root[data-theme="dark"] .ix-stepper .step-card + .step-card { border-color: var(--ie-line); }
:root[data-theme="dark"] .ix-split-side { background-color: var(--ie-panel) !important; }

/* ---- design library cards (gallery) ---- */
.ix-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .ix-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
body.app-page .ix-lib-card {
  display: flex; flex-direction: column; overflow: visible; border-radius: 14px;
  border: 1px solid var(--ie-line); background: var(--ie-panel); box-shadow: var(--ie-shadow);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
body.app-page .ix-lib-card:hover { border-color: var(--ie-line-strong); box-shadow: 0 10px 28px rgba(15, 28, 38, 0.1); }
.ix-lib-thumb { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--ie-panel-2); cursor: zoom-in; }
.ix-lib-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 240ms ease; user-select: none; }
.ix-lib-card:hover .ix-lib-thumb img { transform: scale(1.03); }
.ix-lib-tool {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; background: rgba(15, 28, 38, 0.72); color: #fff; font-size: 10.5px; font-weight: 600;
  backdrop-filter: blur(6px);
}
.ix-lib-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1 1 auto; }
.ix-lib-meta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ie-text-3); }
.ix-lib-menu > summary {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 8px; cursor: pointer; list-style: none;
  border: 1px solid var(--ie-line-strong); font-size: 11.5px; font-weight: 600; color: var(--ie-text-2);
}
.ix-lib-menu > summary::-webkit-details-marker { display: none; }
.ix-lib-menu[open] > summary, .ix-lib-menu > summary:hover { border-color: var(--ie-brand); color: var(--ie-brand-text); }
.ix-lib-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 100%; padding: 5px; border-radius: 10px;
  background: var(--ie-panel); border: 1px solid var(--ie-line); box-shadow: var(--ie-shadow-lg);
}
@media (min-width: 640px) { .ix-lib-pop { width: 12rem; } }
body.app-page .ix-lib-pop .gallery-menu-item {
  display: block; width: 100%; padding: 8px 10px; border-radius: 7px; text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--ie-text-2);
}
body.app-page .ix-lib-pop .gallery-menu-item:hover:not(:disabled) { background: var(--ie-panel-2); color: var(--ie-text); }
body.app-page .ix-lib-pop .gallery-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
body.app-page .ix-lib-pop .gallery-menu-item.is-danger { color: #c0392b; }
body.app-page .ix-lib-pop .gallery-menu-item.is-danger:hover { background: #fdeeee; }
.ix-lib-note { padding: 5px 8px; border-radius: 8px; font-size: 11px; line-height: 1.4; color: var(--ie-text-2); background: var(--ie-panel-2); }
.ix-lib-note.is-ok { color: var(--ie-brand-text); background: var(--ie-brand-soft); }
.ix-lib-note.is-info { color: var(--ie-brand-text); background: var(--ie-brand-soft); }
.ix-lib-note.is-warn { color: #8a5a00; background: #fff8eb; }
.gallery-boq-total.ix-lib-note:not(.hidden) { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; }
.ix-lib-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; padding-top: 4px; }
body.app-page .ix-lib-actions .ix-btn { height: 32px; padding: 0 8px; font-size: 12px; }
:root[data-theme="dark"] .ix-lib-card,
:root[data-theme="dark"] .ix-lib-pop { border-color: var(--ie-line); }
:root[data-theme="dark"] .ix-lib-note.is-warn { color: #f3c77a; background: rgba(245, 180, 60, 0.1); }
:root[data-theme="dark"] .ix-lib-pop .gallery-menu-item.is-danger:hover { background: rgba(240, 80, 70, 0.14); }