/* ============================================================
   STICKERBOOK ADMIN - STICKER ENGINE (admin-sticker-engine.js)
   Full screen over the portal, like Studio. Production only:
   the menu item is hidden on staging.
   Every class starts with se- so nothing here touches other pages.
   ============================================================ */

html.sb-staging #nav-engine { display: none; }
body.se-open { overflow: hidden; }

.se-root {
  --se-p-subject: rgba(109,40,217,0.12); --se-p-comp: rgba(37,99,235,0.12); --se-p-style: rgba(15,118,110,0.13);
  --se-p-palette: rgba(217,119,6,0.15); --se-p-text: rgba(219,39,119,0.12); --se-p-border: rgba(234,88,12,0.14); --se-p-finish: rgba(113,113,122,0.12);
  --se-d-subject: #6D28D9; --se-d-comp: #2563EB; --se-d-style: #0F766E; --se-d-palette: #D97706; --se-d-text: #DB2777; --se-d-border: #EA580C; --se-d-finish: #71717A;
  position: fixed; inset: 0; z-index: 950; background: var(--sb-bg); color: var(--sb-text);
  font-family: var(--font-primary);
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 400px; grid-template-rows: 60px minmax(0, 1fr);
}
.se-root *, .se-root *::before, .se-root *::after { box-sizing: border-box; }
.se-root button, .se-root input, .se-root select, .se-root textarea { font-family: inherit; }

/* Top bar */
.se-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--sb-surface); border-bottom: 1px solid var(--sb-border); min-width: 0; }
.se-ttl { font-size: 14px; font-weight: 700; white-space: nowrap; }
.se-sp { flex: 1; }
.se-ib { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text); border-radius: 10px; cursor: pointer; }
.se-ib:hover { background: var(--sb-surface-2); }
.se-ib:disabled { opacity: 0.35; cursor: default; }
.se-ib .sb-ico { width: 17px; height: 17px; }

/* Panels */
.se-panel { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--sb-surface); }
.se-subj { border-right: 1px solid var(--sb-border); }
.se-out { border-left: 1px solid var(--sb-border); }
.se-art { background: var(--sb-bg); padding: 0 14px; }
.se-art .se-sec { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; margin: 14px auto; max-width: 620px; }
.se-head { display: flex; align-items: center; gap: 8px; padding: 13px 14px 0; }
.se-head h2 { margin: 0; font-size: 13px; font-weight: 700; flex: 1; }
.se-sec { padding: 14px; border-bottom: 1px solid var(--sb-border); scroll-margin-top: 12px; }
.se-sec:last-child { border-bottom: 0; }
.se-sec h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-muted); display: flex; align-items: center; gap: 7px; }
.se-sec h3 .se-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.se-sec h3 em { margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; }
.se-sec.se-hl { box-shadow: inset 0 0 0 2px var(--sb-accent); }
.se-sec.se-flash { animation: seFlash 1.1s ease; }
.se-sec.se-need > h3:not(:has(em))::after { margin-left: auto; }
.se-sec.se-need > h3::after { content: 'Pick one'; order: 9; padding: 2px 8px; border-radius: 999px; background: var(--sb-amber-soft); color: var(--sb-amber); font-size: 10px; letter-spacing: 0.04em; }
.se-todo { padding: 14px; border-radius: 12px; border: 1px dashed var(--sb-amber); background: var(--sb-amber-soft); }
.se-todo > b { display: block; font-size: 13px; margin-bottom: 8px; color: var(--sb-amber); }
.se-todo > span { display: block; font-size: 12px; margin-top: 8px; color: var(--sb-muted); }
@keyframes seFlash { 0%, 60% { box-shadow: inset 0 0 0 2px var(--sb-accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.se-lbl { font-size: 11px; font-weight: 600; color: var(--sb-text-2); margin: 12px 0 6px; display: block; }
.se-lbl:first-child { margin-top: 0; }
.se-note { font-size: 11.5px; color: var(--sb-muted); line-height: 1.45; margin-top: 8px; }
.se-warn { font-size: 11.5px; color: var(--sb-amber); background: var(--sb-amber-soft); border-radius: 8px; padding: 7px 10px; line-height: 1.4; margin-top: 8px; }
.se-warn.se-bad { color: var(--sb-red); background: var(--sb-red-soft); }
.se-dim { opacity: 0.45; pointer-events: none; }
.se-stack { display: flex; flex-direction: column; gap: 8px; }
.se-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.se-sel { display: block; width: 100%; font-size: 13px; color: var(--sb-text); background-color: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 8px; padding: 9px 34px 9px 11px; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.se-sel:disabled { opacity: 0.5; cursor: default; }
.se-inp { display: block; width: 100%; font-size: 13px; color: var(--sb-text); background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 8px; padding: 9px 11px; outline: none; }
.se-sel:focus, .se-inp:focus { border-color: var(--sb-accent); box-shadow: 0 0 0 3px var(--sb-accent-soft); }

.se-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.se-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text); border-radius: 999px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.se-chip:hover { background: var(--sb-surface-2); }
.se-chip.on { background: var(--sb-text); border-color: var(--sb-text); color: #fff; }
.se-chip small { font-weight: 500; opacity: 0.7; font-size: 10.5px; }
.se-chip .se-sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); flex: none; display: inline-block; margin-left: -3px; }
.se-chip .se-sw:first-child { margin-left: 0; }

.se-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text-2); font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.se-btn:hover { background: var(--sb-surface-2); }
.se-btn .sb-ico { width: 14px; height: 14px; }
.se-btn.se-done { color: #0F766E; border-color: rgba(15,118,110,0.35); background: rgba(15,118,110,0.08); }
.se-go { background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; }
.se-go:hover { background: #5B21B6; }
.se-go:disabled { opacity: 0.45; cursor: default; background: var(--sb-accent); }
.se-big { width: 100%; padding: 12px; font-size: 14px; border-radius: 10px; }
.se-big .sb-ico { width: 17px; height: 17px; }
.se-top .se-go { height: 36px; border-radius: 10px; font-size: 13px; padding: 0 14px; }
.se-top .se-btn:not(.se-go) { height: 36px; border-radius: 10px; font-size: 13px; padding: 0 12px; }
@media (max-width: 768px) { .se-top .se-btn:not(.se-go) span { display: none; } .se-top .se-btn:not(.se-go) { width: 36px; padding: 0; } }
.se-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--sb-surface-2); color: var(--sb-text-2); white-space: nowrap; }
.se-pill-a { background: var(--sb-amber-soft); color: var(--sb-amber); }

/* Subject */
.se-srch { position: relative; }
.se-srch-box { display: flex; align-items: center; gap: 8px; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 10px; padding: 0 11px; }
.se-srch-box:focus-within { border-color: var(--sb-accent); box-shadow: 0 0 0 3px var(--sb-accent-soft); }
.se-srch-box .sb-ico { color: var(--sb-muted); width: 16px; height: 16px; }
.se-srch-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 13px; padding: 9px 0; color: var(--sb-text); }
.se-srch-x[hidden] { display: none; }
.se-srch-x { border: 0; background: none; color: var(--sb-muted); cursor: pointer; padding: 4px; display: grid; place-items: center; }
.se-srch-res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 12px; box-shadow: var(--shadow-xl); padding: 4px; max-height: 320px; overflow-y: auto; }
.se-srch-res button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--sb-text); }
.se-srch-res button:hover { background: var(--sb-surface-2); }
.se-srch-res b { display: block; font-size: 13px; font-weight: 600; }
.se-srch-res small { display: block; font-size: 11px; color: var(--sb-muted); margin-top: 1px; }
.se-srch-none { padding: 10px; font-size: 12px; color: var(--sb-muted); }
.se-picked { padding: 10px 12px; border-radius: 10px; background: var(--sb-accent-soft); margin-top: 12px; }
.se-picked b { display: block; font-size: 13px; }
.se-picked small { display: block; font-size: 11px; color: var(--sb-text-2); margin-top: 1px; line-height: 1.35; }
.se-picked.se-empty { background: var(--sb-surface-2); }
.se-picked.se-empty b { color: var(--sb-muted); font-weight: 500; }
.se-row { display: flex; gap: 8px; margin-top: 10px; }
.se-row .se-btn { flex: 1; }

/* Style */
.se-style-desc { font-size: 12px; color: var(--sb-text-2); line-height: 1.5; margin-top: 8px; }
.se-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Palettes (grid) */
.se-strip { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
.se-strip i { flex: 1; }
.se-pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.se-pal { border: 1px solid var(--sb-border); background: var(--sb-surface); border-radius: 10px; padding: 6px; cursor: pointer; text-align: left; color: var(--sb-text); }
.se-pal:hover { background: var(--sb-surface-2); }
.se-pal.on { border-color: var(--sb-accent); box-shadow: 0 0 0 2px var(--sb-accent); }
.se-pal .se-strip { height: 46px; }
.se-pal b { display: block; font-size: 11.5px; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-pal small { font-size: 10.5px; color: var(--sb-muted); }
.se-cust { margin-top: 10px; border: 1px dashed var(--sb-border); border-radius: 10px; padding: 10px; }
.se-cust-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.se-cust-row input[type=color] { width: 36px; height: 34px; border: 1px solid var(--sb-border); border-radius: 8px; padding: 2px; background: var(--sb-surface); cursor: pointer; flex: none; }
.se-cust-row .se-inp { padding: 7px 10px; }
.se-cust-row .se-ib { width: 32px; height: 32px; border-radius: 8px; }
.se-cust-row .se-ib .sb-ico { width: 14px; height: 14px; }
.se-chk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sb-text-2); margin-top: 10px; cursor: pointer; }
.se-chk input { width: 16px; height: 16px; accent-color: var(--sb-accent); }

/* Border */
.se-bsws { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.se-bsw { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--sb-text-2); }
.se-bsw i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); display: block; }
.se-bsw.on i { outline: 2px solid var(--sb-text); outline-offset: 2px; }
.se-bsw small { font-size: 10px; font-weight: 600; max-width: 64px; text-align: center; line-height: 1.2; }

/* Output */
.se-seg { display: inline-flex; background: var(--sb-surface-2); border-radius: 9px; padding: 3px; }
.se-seg button { border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--sb-muted); padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.se-seg button.on { background: var(--sb-surface); color: var(--sb-text); box-shadow: 0 0 0 1px var(--sb-border); }
.se-prompt { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 10px; padding: 12px 13px; font-size: 13px; line-height: 1.65; color: var(--sb-text); word-break: break-word; }
.se-prompt.se-empty { color: var(--sb-muted); text-align: center; padding: 30px 14px; background: var(--sb-surface-2); border: 0; }
.se-pt { border-radius: 4px; padding: 1px 2px; cursor: pointer; transition: box-shadow 0.15s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.se-pt:hover, .se-pt.se-hl { box-shadow: 0 0 0 1.5px currentColor inset; }
.se-pt-subject { background: var(--se-p-subject); } .se-pt-comp { background: var(--se-p-comp); } .se-pt-style { background: var(--se-p-style); }
.se-pt-palette { background: var(--se-p-palette); } .se-pt-text { background: var(--se-p-text); } .se-pt-border { background: var(--se-p-border); } .se-pt-finish { background: var(--se-p-finish); }
.se-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.se-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--sb-muted); font-weight: 600; }
.se-legend i { width: 8px; height: 8px; border-radius: 50%; }
.se-out-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--sb-muted); margin: 8px 0 12px; }

/* Batch */
.se-bi { border: 1px solid var(--sb-border); border-radius: 10px; padding: 10px; margin-top: 8px; }
.se-bi-top { display: flex; align-items: flex-start; gap: 8px; }
.se-bi-top > div { flex: 1; min-width: 0; }
.se-bi-top b { display: block; font-size: 12.5px; }
.se-bi-top small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sb-muted); margin-top: 2px; flex-wrap: wrap; }
.se-bi-top .se-strip { width: 44px; height: 10px; border-radius: 3px; }
.se-bi-n { width: 22px; height: 22px; border-radius: 50%; background: var(--sb-surface-2); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; flex: none; color: var(--sb-text-2); }
.se-bi-txt { font-size: 12px; line-height: 1.55; color: var(--sb-text-2); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.se-bi.open .se-bi-txt { -webkit-line-clamp: unset; display: block; }
.se-bbar { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.se-bbar .se-btn { flex: 1; }

/* Loading / error */
.se-state { grid-column: 1 / -1; display: grid; place-items: center; text-align: center; padding: 24px; }
.se-state b { display: block; font-size: 14px; margin-bottom: 4px; }
.se-state span { display: block; font-size: 12px; color: var(--sb-muted); margin-bottom: 12px; }
.se-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sb-surface-2), #E9E9EE, var(--sb-surface-2)); background-size: 200% 100%; animation: seSkel 1.2s linear infinite; margin: 10px 14px; }
@keyframes seSkel { to { background-position: -200% 0; } }

/* Own toast (stays above the full-screen page) */
.se-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: #18181B; color: #fff; font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 960; max-width: calc(100% - 24px); text-align: center; }
.se-toast.on { opacity: 1; transform: translate(-50%, 0); }

.se-tabs { display: none; }

/* Medium */
@media (max-width: 1100px) and (min-width: 769px) {
  .se-root { grid-template-columns: 270px minmax(0, 1fr) 340px; }
}

/* Phone */
@media (max-width: 768px) {
  .se-root { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding-top: env(safe-area-inset-top); }
  .se-top { height: 56px; }
  .se-top .se-go { display: none; }
  .se-panel { display: none; grid-row: 2; grid-column: 1; border: 0; }
  .se-panel.se-show { display: block; }
  .se-art { padding: 0 12px; }
  .se-art .se-sec { margin: 12px 0; }
  .se-sel, .se-inp, .se-srch-box input { font-size: 16px; }
  .se-tabs { display: flex; grid-row: 3; grid-column: 1; background: var(--sb-surface); border-top: 1px solid var(--sb-border); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); gap: 4px; align-items: center; }
  .se-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; color: var(--sb-muted); font-size: 10.5px; font-weight: 600; cursor: pointer; padding: 4px 0; }
  .se-tab .sb-ico { width: 20px; height: 20px; }
  .se-tab.on { color: var(--sb-accent); }
  .se-tabcopy { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--sb-accent); color: #fff; font-size: 13px; font-weight: 600; padding: 11px 14px; border-radius: 12px; cursor: pointer; }
  .se-tabcopy:disabled { opacity: 0.45; }
  .se-tabcopy .sb-ico { width: 16px; height: 16px; }
  .se-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- Favorites + usage ---------- */
.se-filts { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.se-filt { border: 0; background: var(--sb-surface-2); color: var(--sb-text-2); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.se-filt:hover { color: var(--sb-text); }
.se-filt.on { background: var(--sb-accent-soft); color: var(--sb-accent); }
.se-iconrow { display: flex; gap: 8px; align-items: center; }
.se-iconrow > .se-sel, .se-iconrow > .se-inp { flex: 1; min-width: 0; }
.se-star { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; background: none; color: #A1A1AA; border-radius: 8px; cursor: pointer; padding: 0; }
.se-star:hover { color: #D97706; background: var(--sb-amber-soft); }
.se-star .sb-ico { width: 16px; height: 16px; }
.se-star.on { color: #D97706; }
.se-star.on .sb-ico { fill: #F59E0B; stroke: #D97706; }
.se-star-box { width: 38px; height: 38px; border: 1px solid var(--sb-border); background: var(--sb-surface); border-radius: 8px; }
.se-pal { position: relative; }
.se-star-tile { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; background: rgba(255,255,255,0.92); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.se-star-tile .sb-ico { width: 14px; height: 14px; }
.se-pal:not(:hover) .se-star-tile:not(.on) { opacity: 0; }
@media (hover: none) { .se-pal .se-star-tile { opacity: 1 !important; } }

/* ---------- Wording ideas ---------- */
.se-ideas { margin-top: 10px; border: 1px solid var(--sb-border); border-radius: 10px; padding: 10px; background: var(--sb-bg); }
.se-ideas-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.se-ideas-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.se-ideas-head b .sb-ico { width: 14px; height: 14px; color: var(--sb-accent); }
.se-ideas-head span { font-size: 11px; color: var(--sb-muted); }
.se-tones .se-chip { padding: 4px 10px; font-size: 11.5px; }
.se-sugs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.se-sug { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.se-sug:hover { border-color: var(--sb-accent); }
.se-sug.on { border-color: var(--sb-accent); background: var(--sb-accent-soft); color: var(--sb-accent); }
.se-sug span { flex: 1; }
.se-sug .sb-ico { width: 15px; height: 15px; }
.se-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- Sticker shape, badges ---------- */
.se-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.se-shape { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-text-2); border-radius: 10px; padding: 9px 6px 7px; cursor: pointer; font-size: 11px; font-weight: 600; }
.se-shape .sb-ico { width: 26px; height: 26px; stroke-width: 1.6; }
.se-shape:hover { background: var(--sb-surface-2); }
.se-shape.on { border-color: var(--sb-accent); box-shadow: 0 0 0 1px var(--sb-accent); color: var(--sb-accent); background: var(--sb-accent-soft); }
.se-chip-s { padding: 4px 10px; font-size: 11.5px; }
.se-arc { flex: none; display: inline-flex; background: var(--sb-surface-2); border-radius: 8px; padding: 3px; }
.se-arc button { border: 0; background: none; font-size: 11px; font-weight: 600; color: var(--sb-muted); padding: 5px 9px; border-radius: 6px; cursor: pointer; }
.se-arc button.on { background: var(--sb-surface); color: var(--sb-text); box-shadow: 0 0 0 1px var(--sb-border); }
.se-sug i { font-style: normal; color: var(--sb-muted); font-weight: 500; padding: 0 3px; }

/* ---------- Extra subjects ---------- */
.se-extras { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--sb-border); }
.se-xrow { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--sb-border); border-radius: 10px; margin-bottom: 6px; }
.se-xrow > div { flex: 1; min-width: 0; }
.se-xrow b { display: block; font-size: 12.5px; }
.se-xrow small { display: block; font-size: 10.5px; color: var(--sb-muted); }
.se-xrow .se-inp { flex: 1; }
.se-xrow .se-ib { width: 30px; height: 30px; border-radius: 8px; }
.se-xrow .se-ib .sb-ico { width: 14px; height: 14px; }
.se-adding { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--sb-accent); color: #fff; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-size: 12px; font-weight: 600; }
.se-adding button { border: 0; background: rgba(255,255,255,0.2); color: #fff; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.se-sec[hidden] { display: none; }

/* ---------- AI idea panels: palettes, concepts, subjects ---------- */
.se-btn-s { padding: 5px 10px; font-size: 11.5px; border-radius: 7px; }
.se-btn-s .sb-ico { width: 13px; height: 13px; }
.se-ideas-head .se-btn { flex: none; }
.se-ideas-head { align-items: center; }
#se-palideas .se-ideas { margin: 0 0 12px; }
.se-pidea { display: flex; align-items: center; gap: 10px; border: 1px solid var(--sb-border); background: var(--sb-surface); border-radius: 10px; padding: 8px 10px; }
.se-pidea.on { border-color: var(--sb-accent); background: var(--sb-accent-soft); }
.se-pidea .se-strip { width: 92px; flex: none; }
.se-pidea > div { flex: 1; min-width: 0; }
.se-pidea b { display: block; font-size: 12.5px; }
.se-pidea small { display: block; font-size: 11px; color: var(--sb-muted); line-height: 1.35; }
.se-sidea { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--sb-border); background: var(--sb-surface); border-radius: 10px; padding: 8px 10px; align-items: center; }
.se-sidea > div { flex: 1; min-width: 0; }
.se-sidea b { display: block; font-size: 12.5px; }
.se-sidea small { display: block; font-size: 11px; color: var(--sb-muted); line-height: 1.35; }
.se-subj #se-subideas .se-ideas { background: var(--sb-bg); }

/* ---------- Style rating ---------- */
.se-rate { flex: none; display: inline-flex; gap: 0; border: 1px solid var(--sb-border); border-radius: 8px; padding: 3px 4px; background: var(--sb-surface); }
.se-rate button { width: 26px; height: 30px; border: 0; background: none; padding: 0; display: grid; place-items: center; color: #C4C4CC; cursor: pointer; }
.se-rate button .sb-ico { width: 17px; height: 17px; }
.se-rate button.on { color: #D97706; }
.se-rate button.on .sb-ico { fill: #F59E0B; }
.se-rate:hover button { color: #D97706; }
.se-rate:hover button .sb-ico { fill: #FCD34D; }
.se-rate button:hover ~ button { color: #C4C4CC; }
.se-rate button:hover ~ button .sb-ico { fill: none; }