/* Page-specific styles. Sections: auth · dashboard · product 360 · tools · review · catalogue · analytics · api */

/* =================== AUTH (login, onboarding) =================== */
body.auth { background: #fff; }
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 100vh; }
.auth-hero { background: linear-gradient(160deg, #1E48CC 0%, #14308F 100%); color: #fff; position: relative; overflow: hidden; padding: clamp(28px, 4vw, 56px) clamp(24px, 4.5vw, 64px); display: flex; flex-direction: column; }
.auth-hero::after { content: ''; position: absolute; right: -220px; top: -220px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(rgba(79,184,245,.35), transparent 65%); }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .brand b { font-size: 22px; }
.auth-hero .eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--sun); }
.auth-hero h1 { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.05; margin: 16px 0 0; letter-spacing: -.02em; }
.auth-hero p.lead { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #DCE5FF; font-weight: 600; max-width: 640px; margin-top: 18px; }
.caps4 { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.caps4 span { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 14.5px; font-weight: 800; }
.caps4 i { width: 10px; height: 10px; border-radius: 3px; }
.auth-met { margin-top: auto; padding-top: 40px; display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.auth-met b { display: block; font-family: var(--disp); font-size: clamp(26px, 2.6vw, 34px); line-height: 1; }
.auth-met span { font-size: 13px; color: #CBD8FF; font-weight: 700; }
.auth-masc { position: absolute !important; right: clamp(16px, 3vw, 48px); bottom: 32px; width: clamp(150px, 15vw, 250px); filter: drop-shadow(0 24px 40px rgba(9,25,90,.45)); }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: #F7F9FE; }
.auth-form { width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; }
.auth-form h2 { font-size: 32px; }
.auth-form .input { height: 48px; font-weight: 600; }
.sso { height: 48px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14.5px; font-weight: 800; }
.sso:hover { background: #FAFBFF; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-err { color: var(--bad); font-size: 13px; font-weight: 700; }
.auth-mobile-brand { display: none; }
/* Short desktop windows (Windows display scaling 125–150 % gives ~1280 × 620): size by height too, keep text clear of the mascot */
@media (min-width: 1024px) and (max-height: 860px) {
  .auth-hero { --masc: clamp(96px, 23vh, 190px); padding-top: clamp(20px, 3.5vh, 40px); padding-bottom: clamp(20px, 3.5vh, 40px); }
  .auth-hero > div { margin-top: clamp(16px, 5vh, 60px) !important; }
  .auth-hero .eyebrow { font-size: 12px; }
  .auth-hero h1 { font-size: clamp(28px, min(3.6vw, 6.6vh), 54px); margin-top: 10px; }
  .auth-hero p.lead { font-size: clamp(14px, 2.2vh, 17px); margin-top: 12px; max-width: min(640px, calc(100% - var(--masc) - 24px)); }
  .caps4 { margin-top: clamp(12px, 2.6vh, 26px); max-width: calc(100% - var(--masc) - 24px); }
  .caps4 span { height: 36px; padding: 0 12px; font-size: 13.5px; }
  .auth-met { padding-top: 20px; max-width: calc(100% - var(--masc) - 24px); }
  .auth-met b { font-size: clamp(22px, 4vh, 32px); }
  .auth-masc { width: var(--masc); bottom: clamp(12px, 3vh, 32px); }
  .auth-panel { padding: 16px 20px; }
  .auth-form { gap: clamp(8px, 1.6vh, 16px); }
  .auth-form h2 { font-size: clamp(24px, 4.4vh, 32px); }
  .auth-form .input, .sso { height: clamp(40px, 6.4vh, 48px); }
  .auth-form .btn-lg { height: clamp(42px, 6.8vh, 52px); }
}
@media (max-width: 1023px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); }
  .auth-hero { display: none; }
  .auth-mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .auth-panel { align-items: flex-start; padding-top: 48px; }
}

/* onboarding */
.ob-wrap { min-height: 100vh; display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.ob-side { background: linear-gradient(180deg, #1E48CC, #14308F); color: #fff; padding: 32px 28px; display: flex; flex-direction: column; gap: 28px; position: relative; overflow: hidden; }
.ob-steps { display: flex; flex-direction: column; gap: 14px; }
.ob-step { display: flex; gap: 12px; align-items: flex-start; }
.ob-step .n { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: rgba(255,255,255,.14); flex-shrink: 0; }
.ob-step.done .n { background: var(--sun); color: #3D2A00; }
.ob-step.on .n { background: #fff; color: var(--blue); }
.ob-step b { display: block; font-size: 14.5px; }
.ob-step small { color: #CBD8FF; font-weight: 600; }
.ob-main { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 22px; max-width: 1000px; }
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pick button { text-align: left; padding: 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 4px; min-height: 96px; }
.pick button b { font-size: 15px; }
.pick button small { color: var(--muted); font-weight: 600; }
.pick button.on { border-color: var(--blue); background: #F6F9FF; box-shadow: 0 8px 22px rgba(31,79,214,.12); }
.pick button.on b::before { content: '✓ '; color: var(--blue); }
@media (max-width: 1023px) { .ob-wrap { grid-template-columns: minmax(0, 1fr); } .ob-side { padding: 20px; gap: 16px; } .ob-steps { flex-direction: row; overflow-x: auto; } .ob-step small { display: none; } .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pick { grid-template-columns: minmax(0, 1fr); } }

/* =================== DASHBOARD =================== */
.prod-strip .prod { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 9px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.prod-strip .prod b { font-family: var(--disp); color: var(--ink); }
.nt { border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); background: #fff; min-width: 0; transition: box-shadow .15s; }
.nt:hover { box-shadow: var(--shadow); }
.nt .n { font-family: var(--disp); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.nt .t { font-size: 14px; font-weight: 800; }
.nt .go { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; }
.nt.warn { background: #FFFBEB; border-color: #FDE68A; }
.nt.bad { background: #FEF2F2; border-color: #FECACA; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.caps .cap { border-radius: 16px; background: var(--bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; min-width: 0; }
.caps .cap::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.caps .cap .chip { align-self: flex-start; }
.caps .cap .v { font-family: var(--disp); font-size: 28px; font-weight: 700; line-height: 1; }
.cap-seg::before { background: var(--seg); } .cap-gen::before { background: var(--gen); } .cap-enr::before { background: var(--enr); } .cap-gaze::before { background: var(--gaze); }
.mk-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--soft); }
.mk-row:last-child { border-bottom: none; }
.mk-row .bar { margin-top: 5px; }
.mk-lg { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.welcome { border-radius: 24px; padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 34px); color: #fff; position: relative; overflow: hidden; min-height: 150px;
  background: radial-gradient(420px 240px at 92% 120%, rgba(255,198,41,.55), transparent 70%), linear-gradient(115deg, #1F4FD6 0%, #2F6BEA 55%, #4FB8F5 100%); }
.welcome-masc { position: absolute; right: clamp(16px, 3vw, 48px); bottom: -4px; height: 160px; filter: drop-shadow(0 16px 24px rgba(9,25,90,.35)); }
.todo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.todo .ck { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); }
.todo.done .ck { background: var(--ok); color: #fff; box-shadow: none; }
.todo.next { border-color: #C7CFF7; background: #F6F9FF; }
.todo.next .ck { background: var(--blue); color: #fff; box-shadow: none; }
.todo b { display: block; font-size: 14.5px; }
.todo span:not(.ck):not(.btn) { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.how .hw { border-radius: 16px; background: var(--bg); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.how .hw b { font-size: 14.5px; }
.how .hw span:not(.chip) { font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.45; }
@media (max-width: 1439px) { .prod-strip .lbl { display: none; } }
@media (max-width: 767px) { .welcome-masc { display: none; } .prod-strip { display: none; } .nt .n { font-size: 26px; } }

/* =================== PRODUCT 360 =================== */
.steps { display: flex; align-items: center; gap: 10px; }
.sdot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.sdot.done { background: var(--blue); color: #fff; } .sdot.on { background: #fff; box-shadow: inset 0 0 0 2.5px var(--blue); color: var(--blue); } .sdot.next { background: var(--soft); color: var(--muted); }
.sline { width: 30px; height: 2px; background: var(--line); }
.stxt { font-size: 13.5px; font-weight: 700; color: var(--muted); white-space: nowrap; } .stxt.on { font-weight: 800; color: var(--ink); }
.p360-cols { display: grid; grid-template-columns: 480px minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; text-align: left; min-width: 0; }
.mode.on { border-color: var(--blue); background: #F6F9FF; box-shadow: 0 8px 22px rgba(31,79,214,.12); }
.mode .mi { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--soft); color: var(--ink2); }
.mode.on .mi { background: var(--blue); color: #fff; }
.mode b { display: block; font-size: 15px; white-space: nowrap; }
.mode span { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.single-prev { height: 300px; flex-shrink: 0; }
.summary { padding: 0; display: flex; flex-direction: column; position: sticky; top: calc(var(--top-h) + 16px); }
.sum-sec { padding: 14px 16px; border-bottom: 1px solid var(--soft); display: flex; flex-direction: column; gap: 6px; }
.sum-run { padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); }
@media (max-width: 1439px) {
  .p360-cols { grid-template-columns: minmax(0, 1fr) 300px; }
  .p360-cols > section { grid-column: 1; }
  .summary { grid-column: 2; grid-row: 1 / span 2; }
  .mode span { white-space: normal; }
}
@media (max-width: 1023px) {
  .hide-t { display: none !important; }
  .p360-cols { grid-template-columns: minmax(0, 1fr); }
  .summary { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 767px) {
  .hide-m { display: none !important; }
  .modes { grid-template-columns: minmax(0, 1fr); }
  .single-prev { height: 240px; }
  .sum-run.m-sticky { position: sticky; bottom: 64px; box-shadow: 0 -8px 20px rgba(20,48,143,.08); border-top: 1px solid var(--line); }
}

/* result pages (Product 360 single / bulk) */
.res-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.res-head > div:nth-child(2):not(.ring) { flex: 1 1 340px; }
.res-head > .ring { flex: none; }
.res-title { font-size: clamp(18px, 2vw, 24px); font-weight: 700; }
.res-actions { flex-wrap: wrap; }
.res-actions .btn { min-width: 200px; }
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px 360px; gap: 16px; align-items: start; }
.viewer-card { display: flex; flex-direction: column; gap: 12px; }
.viewer { height: clamp(320px, 52vh, 560px); border-radius: 16px; }
.thumbs { gap: 10px; }
.step-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pstep { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 1439px) {
  .res-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .res-grid > :first-child { grid-column: 1 / -1; }
  .step-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .res-grid { grid-template-columns: minmax(0, 1fr); }
  .res-actions .btn { min-width: 0; flex: 1; }
  .step-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .res-head .ring { display: none; }
  .res-actions { width: 100%; flex-direction: column; }
  .res-actions .btn { width: 100%; flex: none; height: 44px; }
  .thumb { width: 64px; height: 64px; }
}

/* =================== TOOLS =================== */
.fl { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 800; }
.tool-cols { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 16px; align-items: start; }
.tin { display: flex; flex-direction: column; position: sticky; top: calc(var(--top-h) + 16px); max-height: calc(100vh / var(--z, 1) - var(--top-h) - 32px); }
.tin-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; flex: 1; }
.tin-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: #FCFDFF; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.tout { display: flex; flex-direction: column; min-height: calc(100vh / var(--z, 1) - var(--top-h) - 32px); }
.tout-head { padding: 14px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--soft); }
.tout-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.up-prev { height: 250px; flex-shrink: 0; }
.set { display: flex; flex-direction: column; gap: 8px; }
.res4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.res4 .rt { min-height: 360px; }
.bprog { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--bg); flex-wrap: wrap; }
.bprog .n { font-family: var(--disp); font-size: 24px; font-weight: 700; line-height: 1; }
.cg { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cg .rt .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.93); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg .rt.rev { box-shadow: 0 0 0 2px var(--warn); }
.checks4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ef { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--soft); }
.ef:last-child { border-bottom: none; }
.ef .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding-top: 2px; }
.ef .v { font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.ef .was { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.gz { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.lk { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--soft); font-size: 13.5px; font-weight: 800; }
.lk:last-child { border-bottom: none; }
.lk .o { width: 24px; height: 24px; border-radius: 50%; background: var(--gaze); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.pin { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--gaze); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(255,255,255,.8); z-index: 4; }
@media (max-width: 1439px) { .res4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .res4 .rt { min-height: 300px; } .checks4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gz { grid-template-columns: minmax(0, 1fr); } .tool-cols { grid-template-columns: 380px minmax(0, 1fr); } }
@media (max-width: 1023px) {
  .tool-cols { grid-template-columns: minmax(0, 1fr); }
  .tin { position: static; max-height: none; }
  .tout { min-height: 0; }
  .tout .empty { min-height: 260px; }
  .ef { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 767px) {
  .res4 .rt { min-height: 220px; }
  .tin-foot.m-sticky { position: sticky; bottom: 64px; z-index: 30; box-shadow: 0 -8px 20px rgba(20,48,143,.08); }
  .checks4 { grid-template-columns: minmax(0, 1fr); }
}

/* =================== REVIEW QUEUE =================== */
.rq { display: grid; grid-template-columns: 400px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rq-list { padding: 4px 8px 8px; display: flex; flex-direction: column; position: sticky; top: calc(var(--top-h) + 16px); max-height: calc(100vh / var(--z, 1) - var(--top-h) - 32px); }
.rq-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.it { display: flex; gap: 12px; padding: 11px 12px; border-radius: 14px; border: 1.5px solid transparent; align-items: flex-start; width: 100%; }
.it:hover { background: #FAFBFF; }
.it.on { border-color: var(--blue); background: #F6F9FF; }
.dec { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1px var(--line); background: #fff; text-align: left; }
.dec:hover { background: #F8FAFF; }
.dec kbd { margin-left: auto; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; background: var(--bg); color: var(--muted); }
.dec.ok { background: var(--ok); color: #fff; box-shadow: none; }
.dec.ok kbd { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.dec.no { color: var(--bad); }
.rq-img { border-radius: 14px; min-height: clamp(260px, 42vh, 460px); }
.rq-claim { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; }
@media (max-width: 1439px) { .rq { grid-template-columns: 340px minmax(0, 1fr); } .rq-side { grid-column: 2; } }
@media (max-width: 1023px) {
  .rq { grid-template-columns: minmax(0, 1fr); }
  .rq-side { grid-column: auto; }
  .rq-list { position: static; max-height: 360px; }
  .rq-claim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) { .rq-img { min-height: 220px; } .rq .g2 { grid-template-columns: 1fr 1fr; } }

/* =================== CATALOGUE =================== */
.selbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: #fff; flex-wrap: wrap; }
.selbar .selbtn { background: rgba(255,255,255,.12); color: #fff; }
.hist { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--soft); font-size: 13px; font-weight: 700; line-height: 1.4; }
.hist:last-child { border-bottom: none; }
.hist .d { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.hist small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
button.card.stat { cursor: pointer; }

/* =================== ANALYTICS =================== */
.an2 { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 16px; }
.an3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr); gap: 16px; }
.leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart svg text { font-family: var(--font); }
.rb { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; padding: 5px 0; }
.rb .n { width: 150px; flex-shrink: 0; color: var(--ink2); }
.rb .t { flex: 1; height: 14px; position: relative; }
.rb .t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; background: var(--s1); }
.rb .v { width: 96px; text-align: right; }
@media (max-width: 1439px) { .an2 { grid-template-columns: minmax(0, 1fr); } .an3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .an3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .an3 { grid-template-columns: minmax(0, 1fr); } .an3 > :last-child { grid-column: auto; } }
@media (max-width: 767px) { .rb .n { width: 110px; } .rb .v { width: 80px; } }

/* =================== API =================== */
.api-split { grid-template-columns: minmax(0, 1fr) 420px; }
.key { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--soft); }
.key:last-of-type { border-bottom: none; }
.mt { display: inline-flex; min-width: 46px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 500; flex-shrink: 0; }
.mt.post { background: var(--blue-bg); color: var(--blue); } .mt.get { background: var(--ok-bg); color: var(--ok-ink); }
@media (max-width: 1279px) { .api-split { grid-template-columns: minmax(0, 1fr); } }
.pick-big { display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; border-radius: 18px; border: 2px dashed #A9C0F5; background: #F6F9FF; }
.pick-big:hover { border-color: var(--blue); background: #EDF3FF; }
.pick-big b { font-size: 17px; }
.pick-big span { color: var(--muted); font-weight: 600; }
body.auth .ob-main .auth-err { margin: 0; }
.tout-head .h2 { min-width: 0; max-width: 100%; }
.tout-head .seg, .viewer-card .seg { max-width: 100%; }
@media (max-width: 767px) { .tout-head .seg > *, .viewer-card .seg > * { padding: 0 10px; font-size: 13px; } }

/* ---------- team & sign-in ---------- */
.team-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .team-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- field picker (bulk sheet) ---------- */
.fields { border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 8px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.fields-list { display: flex; flex-direction: column; }
.fields-list .fld { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(120px, 44%); gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--soft); }
.fields-list .fld.off .fld-name { opacity: .5; }
.fld-name { min-width: 0; display: flex; flex-direction: column; }
.fld-name b { font-size: 13px; }
.fld-name small { font-size: 11.5px; }
.fld-pct { font-size: 12px; font-weight: 800; color: var(--muted); text-align: right; }
.fld-role { height: 32px; font-size: 12.5px; padding: 0 8px; }

/* Segment bulk: touch-up button on each cut-out tile */
.rt .edge-btn { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.95);
  box-shadow: 0 1px 4px rgba(14,26,58,.18); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; z-index: 3; }
.rt:hover .edge-btn, .rt:focus-within .edge-btn, .rt.rev .edge-btn { opacity: 1; }
@media (hover: none) { .rt .edge-btn { opacity: 1; } }

/* Focus: the service's own attention report, shown whole */
.gz-report { display: block; border-radius: 14px; overflow: hidden; background: #F4F6FA; box-shadow: inset 0 0 0 1px var(--line); cursor: zoom-in; }
.gz-report img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; }

/* Focus bulk: region bars + demo heat tint (cards below), per-image report modal */
.gzb-heat { position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, rgba(255,40,0,.7), rgba(255,200,0,.45) 18%, transparent 40%), rgba(0,0,0,.35); }
.gzb-regs { display: grid; gap: 4px; min-width: 170px; }
.gzb-regs > div { display: grid; grid-template-columns: minmax(70px, auto) 1fr 34px; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.gzb-regs i { height: 6px; border-radius: 4px; background: #EEF1F6; overflow: hidden; display: block; min-width: 36px; }
.gzb-regs i b { display: block; height: 100%; background: var(--gaze); border-radius: 4px; }
.gzb-regs em { font-style: normal; color: var(--muted); text-align: right; }
.modal.gzm { width: min(1180px, 100%); padding: 18px 20px; outline: none; }
.gzm-head { display: flex; align-items: center; gap: 8px; }
.gzm-title { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gzm-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.gzm-body .gz-report img { max-height: calc(100vh / var(--z, 1) - 240px); }
.gzm-side { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .gzm-body { grid-template-columns: 1fr; } }

/* Focus bulk as cards: the attention map is the picture; photo inset; View opens the full report */
.gzc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gzc { display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-width: 0; }
.gzc.look { box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--warn); }
.gzc-pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: #0E1A3A; cursor: zoom-in; overflow: hidden; }
.gzc-pic > img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s; }
.gzc-pic:hover > img { transform: scale(1.03); }
.gzc-pic:focus-visible { outline: 3px solid var(--gaze); outline-offset: -3px; }
.gzc-score { position: absolute; top: 8px; left: 8px; min-width: 40px; height: 30px; padding: 0 8px; border-radius: 9px; background: #fff; color: var(--gaze-ink);
  font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(14,26,58,.25); }
.gzc-score.low { color: #fff; background: var(--warn); }
.gzc-orig { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(14,26,58,.3); }
.gzc-orig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gzc-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 12px; flex: 1; }
.gzc-name { font-size: 13.5px; font-weight: 800; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gzc .gzb-regs { min-width: 0; }
.gzc-act { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.gzc-act .btn:first-child { flex: 1; justify-content: center; }

/* Segment bulk: cut-out cards (same look as Focus) + a per-image viewer like the single result */
.sgc { display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-width: 0; }
.sgc.rev { box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--warn); }
.sgc-pic { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; padding: 10px; border: 0; cursor: zoom-in; overflow: hidden; min-height: 0; }
.sgc-pic:disabled { cursor: default; }
/* the picture never sizes the card: every card keeps the same square, whatever shape the photo is or whether it has loaded */
.sgc-pic > img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; display: block; }
.sgc-pic .q { position: absolute; top: 8px; left: 8px; }
.sgc-pic .spin { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--seg); }
.sgc-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.sgc-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.modal.sgm { width: min(1000px, 100%); padding: 18px 20px; outline: none; }
.sgm-view { min-height: 0; height: calc(100vh / var(--z, 1) - 300px); max-height: 640px; display: flex; align-items: center; justify-content: center; }
.sgm-view .cmp { width: 100%; height: 100%; }
.sgm-img { max-width: calc(100% - 32px); max-height: calc(100% - 32px); object-fit: contain; display: block; }
.tile.viewer .sgm-img { position: relative; z-index: 1; }

/* Enrich: run summary (added / improved / held / kept) and the per-product "what changed" popup */
.en-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.en-sum-i { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.en-sum-i b { font-size: 20px; text-align: right; }
.en-sum-i .muted { grid-column: 1 / -1; line-height: 1.35; }
.modal.enm { width: min(1100px, 100%); padding: 18px 20px; outline: none; }
.enm-q { gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--bg); margin-right: 4px; }
.enm-q b { font-size: 16px; }
.enm-table { max-height: calc(100vh / var(--z, 1) - 320px); overflow: auto; }
.enm-table td { vertical-align: top; }
.enm-table .enm-before, .enm-table .enm-after { font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 180px; }
.enm-table .enm-before { color: var(--muted); }
.enm-table tr.enm-new .enm-after, .enm-table tr.enm-improved .enm-after { box-shadow: inset 3px 0 0 var(--ok); padding-left: 10px; color: var(--ink); font-weight: 600; }
.enm-table tr.enm-held .enm-after { box-shadow: inset 3px 0 0 var(--warn); padding-left: 10px; }

/* Product 360 result tabs: each tool's own result view (cut-out cards · enrich changes · attention reports) + the full table */
.p3-tabs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.p3-tool { padding: 0; overflow: hidden; }
.p3-tool [data-rerun] { display: none; }

/* Generate studio: three mode cards · description form · result (input it was made from + generated images) */
.seg.gen-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; background: none; overflow: visible; }
.seg.gen-modes > * { height: auto; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 12px; white-space: normal; text-align: left;
  border: 1px solid var(--line); background: #fff; color: var(--ink2); }
.seg.gen-modes > * svg { color: var(--gen); }
.seg.gen-modes > * b { font-size: 13.5px; color: var(--ink); line-height: 1.25; }
.seg.gen-modes > * small { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.35; }
.seg.gen-modes > .on { border-color: var(--gen); box-shadow: 0 0 0 3px var(--gen-bg); background: #fff; }
.gen-form { display: flex; flex-direction: column; gap: 12px; }
.gen-form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gen-res { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: start; }
.gen-in { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gen-in p { margin: 0; color: var(--ink2); overflow-wrap: anywhere; }
.gen-in-pic { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gen-one .rt.big { min-height: clamp(320px, 48vh, 520px); cursor: default; }
.gen-tile .dlb { border: 0; cursor: pointer; }
.gen-tile .dlb:focus-visible { outline: 2px solid var(--gen); outline-offset: 2px; }
@media (max-width: 1023px) { .seg.gen-modes { grid-template-columns: minmax(0, 1fr); } .gen-res { grid-template-columns: minmax(0, 1fr); } .gen-in-pic { max-width: 220px; } }
@media (max-width: 480px) { .gen-form-2 { grid-template-columns: minmax(0, 1fr); } }

/* Focus overlay: "Put product name here" drawn on the photo itself, in the suggested corner */
.gz-pic { position: relative; display: inline-block; max-width: 100%; line-height: 0; vertical-align: middle; }
.gz-pic > img { display: block; max-width: 100%; height: auto; }
.gz-ph { position: absolute; z-index: 3; width: 38%; min-width: 110px; max-width: 220px; height: 13%; min-height: 34px; line-height: 1.2; font-size: 12px; }
.tile.viewer .gz-fit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.tile.viewer .gz-fit .gz-pic > img { max-height: calc(clamp(320px, 52vh, 560px) - 24px); }
.gz-report .gz-pic { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.gz-report .gz-pic > img { width: auto; max-width: 100%; object-fit: initial; }

/* Review queue: items grouped under the run (upload) they came from */
.rq-group { display: flex; align-items: center; gap: 10px; padding: 12px 8px 6px; margin-top: 6px; border-top: 1px solid var(--line); position: sticky; top: 0; z-index: 1; background: #fff; }
.rq-scroll > .rq-group:first-child { margin-top: 0; border-top: 0; }
.rq-group .file-ic { width: 34px; height: 34px; font-size: 10px; border-radius: 9px; }
.rq-group b { font-size: 13.5px; }