:root {
  --ink: #172032;
  --muted: #697386;
  --line: #e6e9ef;
  --panel: #ffffff;
  --canvas: #f3f5f8;
  --navy: #121b2c;
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --green: #16855b;
  --green-soft: #e7f7f0;
  --amber: #a95d08;
  --amber-soft: #fff2df;
  --red: #c23540;
  --red-soft: #ffedef;
  --shadow: 0 10px 28px rgba(18, 27, 44, .055);
}

/* Cloud collaboration application */
.cloud-mode { background: #f3f7ff; }
.cloud-sidebar { background: linear-gradient(180deg, #071d4a 0%, #0b2d6c 58%, #0866ff 145%); }
.cloud-sidebar .brand-mark { background: linear-gradient(145deg, #4da3ff, #0866ff); box-shadow: 0 10px 30px rgba(8,102,255,.38); }
.cloud-topbar { backdrop-filter: blur(18px); background: rgba(255,255,255,.88); }
.cloud-view { animation: cloud-in .25s ease; }
@keyframes cloud-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cloud-sidebar .nav-item { position: relative; display: flex; align-items: center; }
.nav-badge { flex: 0 0 auto; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #0a3d96; background: #cfe2ff; font-size: 10px; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border: 1px solid #d9e4f7; border-radius: 12px; background: #fff; }
.user-chip > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #0866ff, #3b82f6); font-weight: 800; }
.user-chip strong,.user-chip small { display: block; line-height: 1.25; }
.user-chip strong { color: #17233a; font-size: 12px; }.user-chip small { margin-top: 2px; color: #70809a; font-size: 10px; }
.button.ghost { border-color: transparent; color: #60708b; background: transparent; }
.cloud-panel { padding: 0; overflow: hidden; }
.panel-title { min-height: 72px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.panel-title h3 { margin: 0; font-size: 16px; }.panel-title .eyebrow { margin-bottom: 4px; }
.cloud-panel td strong,.cloud-panel td small { display: block; }.cloud-panel td small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.status-pill { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.status-pill.active { color: #087455; background: #e4f7ef; }.status-pill.warning { color: #9b5c00; background: #fff1cf; }.status-pill.neutral { color: #64748b; background: #edf1f7; }
.cloud-toolbar { display: grid; grid-template-columns: 1.25fr .8fr .9fr 1.5fr auto; gap: 12px; align-items: end; padding: 18px 20px; border-bottom: 1px solid var(--line); background: #f9fbff; }
.cloud-toolbar label,.cloud-form label { display: grid; gap: 6px; color: #60708b; font-size: 11px; font-weight: 750; }
.task-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.task-card { padding: 18px; border: 1px solid #dce5f4; border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(35,70,130,.06); }
.task-card.open { border-top: 3px solid #f59e0b; }.task-card.submitted { border-top: 3px solid #19a974; }
.task-card-top,.task-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-stage { color: #1764d6; font-size: 11px; font-weight: 850; letter-spacing: .04em; }
.task-card h3 { margin: 14px 0 7px; font-size: 15px; }.task-card p { min-height: 38px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.task-meta { margin: 16px 0 12px; padding-top: 12px; border-top: 1px solid #edf1f7; color: #7c8aa1; font-size: 10px; }
.task-card .button { width: 100%; }
.team-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(480px,1.28fr); gap: 16px; align-items: start; }
.team-admin-stack { display: grid; gap: 16px; }
.cloud-form { padding: 20px; display: grid; gap: 14px; }.cloud-form .panel-title { min-height: 0; margin: -20px -20px 4px; }
.pairing-code { padding: 13px; border: 1px dashed #8db7ff; border-radius: 10px; color: #0b53ba; background: #eef5ff; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 13px; font-weight: 800; text-align: center; }
.review-dialog { width: min(860px,calc(100vw - 28px)); }.cloud-review-grid { max-height: 48vh; }
.review-history { margin-bottom: 12px; }.review-history details { border: 1px solid #dce5f4; border-radius: 10px; overflow: hidden; }.review-history summary { padding: 11px 13px; background: #f7faff; }
.review-history article { padding: 11px 13px; border-top: 1px solid #e8eef8; }.review-history article strong,.review-history article small { display: block; }.review-history article small { margin-top: 3px; color: var(--muted); font-size: 10px; }.review-history article p { margin: 7px 0 0; color: #4d5d77; font-size: 11px; }

/* Login keeps the test-site flow while giving Meta Ads its own identity. */
.login-page { min-height: 100vh; overflow: auto; color: #17233a; background: #edf4ff; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(480px,1.15fr) minmax(420px,.85fr); }
.login-brand-panel { position: relative; min-height: 100vh; overflow: hidden; padding: clamp(42px,7vw,100px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: radial-gradient(circle at 18% 20%,rgba(49,138,255,.72),transparent 35%),linear-gradient(145deg,#051637 0%,#082c69 52%,#0866ff 125%); }
.login-brand-panel::after { content:""; position:absolute; inset:0; opacity:.26; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
.login-brand-copy,.login-safety { position: relative; z-index: 2; }.login-logo,.login-mobile-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: #0866ff; background: #fff; font-size: 25px; font-weight: 900; box-shadow: 0 16px 50px rgba(0,0,0,.18); }
.login-kicker { margin: 34px 0 14px; color: #add2ff; font-size: 12px; font-weight: 850; letter-spacing: .14em; }.login-brand-copy h1 { max-width: 720px; margin: 0; font-size: clamp(36px,4.4vw,66px); line-height: 1.12; letter-spacing: -.045em; }.login-brand-copy > p:last-child { max-width: 620px; margin: 24px 0 0; color: #cfe2ff; font-size: 17px; line-height: 1.8; }
.login-safety { display: flex; align-items: center; gap: 10px; color: #dbeaff; font-size: 13px; }.login-safety span { width: 9px; height: 9px; border-radius: 50%; background: #55e6ae; box-shadow: 0 0 0 6px rgba(85,230,174,.13); }
.login-orbit { position:absolute; z-index:1; border:1px solid rgba(255,255,255,.18); border-radius:50%; }.login-orbit-one { width:520px; height:520px; right:-180px; top:-110px; }.login-orbit-two { width:300px; height:300px; right:30px; top:40px; }
.login-form-panel { min-height: 100vh; padding: 40px; display: grid; place-items: center; background: #fff; }.login-card { width: min(430px,100%); display: grid; gap: 18px; }.login-card-head { margin-bottom: 10px; }.login-card-head h2 { margin: 8px 0 9px; font-size: 32px; letter-spacing: -.025em; }.login-card-head > p:last-child { color: var(--muted); font-size: 14px; }.login-mobile-mark { display:none; }
.login-card label { display:grid; gap:8px; color:#34445f; font-size:13px; font-weight:750; }.login-card input { min-height:50px; padding:13px 15px; border-color:#d7e1f0; border-radius:11px; font-size:15px; }.login-submit { min-height:50px; margin-top:4px; font-size:14px; }.login-error { margin:0; padding:11px 13px; border-radius:9px; color:#a52b37; background:#fff0f2; font-size:12px; }.login-footnote { margin:0; color:#8290a6; font-size:11px; line-height:1.6; text-align:center; }

@media (max-width: 1050px) { .task-board { grid-template-columns: repeat(2,minmax(0,1fr)); }.team-grid { grid-template-columns:1fr; }.login-layout { grid-template-columns:1fr 1fr; }.login-brand-copy h1 { font-size:42px; } }
@media (max-width: 760px) { .login-layout { display:block; }.login-brand-panel { display:none; }.login-form-panel { min-height:100vh; padding:28px 22px; }.login-mobile-mark { display:grid; margin-bottom:28px; color:#fff; background:#0866ff; }.cloud-toolbar { grid-template-columns:1fr 1fr; }.cloud-toolbar .search-control { grid-column:1/-1; }.task-board { grid-template-columns:1fr; }.user-chip div { display:none; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.setup-shell { min-height: 100vh; max-width: 920px; margin: 0 auto; padding: 72px 28px; }
.setup-shell .hero { margin-bottom: 28px; }
.setup-panel { max-width: 680px; }
.setup-panel label { display: block; margin: 18px 0 8px; font-weight: 700; }
.setup-panel input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #cfd6e2; border-radius: 10px; background: #fff; color: #152033; font: inherit; }
.setup-panel button, .button-link { display: inline-block; margin-top: 22px; padding: 11px 16px; border: 0; border-radius: 10px; background: #1e63d8; color: #fff; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.setup-panel button:hover, .button-link:hover { background: #174fae; }
.hint { color: #667085; font-size: 13px; }
.setup-panel .status { display: block; margin-top: 18px; min-height: 20px; }
.setup-panel .status[data-kind="ok"] { color: #137a4b; }
.setup-panel .status[data-kind="warning"] { color: #9a6500; }
.setup-panel .status[data-kind="error"] { color: #b42318; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 18px 22px; color: #eaf0ff; background: var(--navy); display: flex; flex-direction: column; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 10px 30px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-weight: 800; background: linear-gradient(145deg, #4f82ff, #2148bd); box-shadow: 0 10px 22px rgba(37, 99, 235, .35); }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 3px; color: #8f9bb2; }
nav { display: grid; gap: 8px; }
.nav-item { width: 100%; border: 0; border-radius: 10px; color: #9ca8bd; background: transparent; text-align: left; padding: 13px 12px; transition: .2s ease; }
.nav-item span { margin-right: 12px; color: #536078; font-size: 11px; }
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.08); }
.sidebar-note { margin-top: auto; padding: 14px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.035); }
.sidebar-note strong, .sidebar-note small { display: block; }
.sidebar-note small { color: #8995a9; margin-top: 3px; font-size: 11px; }
.lock-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.12); }
main { min-width: 0; padding: 0 42px 60px; }
.topbar { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 28px; letter-spacing: -.6px; }
h2 { margin-bottom: 0; font-size: 23px; letter-spacing: -.4px; }
h3 { margin-bottom: 5px; font-size: 16px; }
.eyebrow { margin-bottom: 8px; color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 750; }
.muted { color: var(--muted); font-size: 13px; }
.top-actions, .asset-controls { display: flex; align-items: center; gap: 10px; }
.top-actions { justify-content: flex-end; flex-wrap: wrap; }
label { color: var(--muted); font-size: 12px; }
select, input, textarea { width: 100%; border: 1px solid #d9dee8; border-radius: 9px; padding: 10px 12px; color: var(--ink); background: white; outline: none; }
select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.period-control { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.period-control select { width: 132px; padding: 9px 28px 9px 10px; }
.button { border: 0; border-radius: 9px; padding: 10px 16px; font-weight: 700; font-size: 13px; transition: .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: white; background: var(--blue); box-shadow: 0 7px 16px rgba(37,99,235,.18); }
.button.secondary { color: var(--ink); border: 1px solid var(--line); background: white; }
.setup-link { display: inline-flex; align-items: center; text-decoration: none; }
.button.danger { color: white; background: var(--red); }
.button.danger-outline { color: var(--red); border: 1px solid #f1b8bd; background: var(--red-soft); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.connection { padding: 8px 11px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.connection.pending { color: var(--amber); background: var(--amber-soft); }
.connection.ok { color: var(--green); background: var(--green-soft); }
.connection.error { color: var(--red); background: var(--red-soft); }
.section { padding-top: 38px; scroll-margin-top: 10px; }
.control-heading { align-items: center; }
.control-actions { display: flex; gap: 10px; }
.mirror-strip { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: white; box-shadow: var(--shadow); }
.mirror-strip > div { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--line); }
.mirror-strip > div:last-child { border-right: 0; }
.mirror-strip span, .mirror-strip strong { display: block; }
.mirror-strip span { margin-bottom: 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.mirror-strip strong { overflow: hidden; text-overflow: ellipsis; font-size: 16px; white-space: nowrap; }
.control-panel { margin-top: 14px; overflow: hidden; }
.control-filters { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.control-filters label { display: grid; gap: 6px; }
.bulk-bar { min-height: 54px; padding: 10px 18px; display: flex; align-items: center; gap: 9px; color: var(--muted); background: #fafbfc; border-bottom: 1px solid var(--line); font-size: 12px; }
.bulk-bar span { margin-right: 5px; }
.bulk-bar small { margin-left: auto; }
.control-table { max-height: 580px; }
.control-table th { position: sticky; top: 0; z-index: 1; }
.control-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
.entity-type { padding: 5px 7px; border-radius: 6px; color: #556177; background: #eef1f5; font-size: 10px; font-weight: 750; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { min-height: 138px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.kpi.accent { color: white; border-color: transparent; background: linear-gradient(135deg, #1d4ed8, #3c75f2); }
.kpi span { font-size: 13px; color: var(--muted); }
.kpi.accent span, .kpi.accent small { color: rgba(255,255,255,.75); }
.kpi strong { margin: 14px 0 8px; font-size: 31px; letter-spacing: -.8px; }
.kpi small { margin-top: auto; color: #939cad; }
.panel { border: 1px solid var(--line); border-radius: 15px; background: var(--panel); box-shadow: var(--shadow); }
.accounts-panel { margin-top: 16px; }
.panel-head { padding: 20px 22px 15px; display: flex; align-items: center; justify-content: space-between; }
.panel-head p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.tag { padding: 6px 9px; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 750; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { color: #8992a2; background: #fafbfc; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
th, td { padding: 14px 18px; border-top: 1px solid var(--line); white-space: nowrap; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #fafcff; }
.account-name strong, .account-name small { display: block; }
.account-name small { margin-top: 4px; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-weight: 750; font-size: 11px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.active { color: var(--green); background: var(--green-soft); }
.status.paused { color: var(--amber); background: var(--amber-soft); }
.status.disabled, .status.archived { color: var(--red); background: var(--red-soft); }
.status.other { color: #596579; background: #edf0f5; }
.link-button, .row-action { border: 0; color: var(--blue); background: transparent; font-weight: 700; }
.row-action { padding: 7px 10px; border-radius: 7px; background: var(--blue-soft); }
.empty { padding: 42px !important; color: var(--muted); text-align: center; }
.assets-heading { align-items: center; }
.asset-controls label { display: flex; align-items: center; gap: 8px; }
.asset-controls select { width: 250px; }
.assets-panel { overflow: hidden; }
.tabs { display: flex; gap: 6px; padding: 12px 16px 0; border-bottom: 1px solid var(--line); }
.tab { border: 0; border-bottom: 2px solid transparent; padding: 11px 16px 13px; color: var(--muted); background: transparent; font-weight: 750; }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.asset-summary { padding: 20px 20px 14px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.asset-summary div { display: flex; gap: 9px; align-items: baseline; }
.asset-summary strong { font-size: 24px; }
.asset-summary span, .asset-summary p { color: var(--muted); font-size: 12px; }
.asset-summary p { margin-bottom: 0; }
.entity-table { min-height: 260px; }
.name-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.budget-cell { font-variant-numeric: tabular-nums; }
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.safety-card { min-height: 120px; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: white; display: flex; gap: 15px; }
.safety-card > span { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--blue); background: var(--blue-soft); font-weight: 800; }
.safety-card p { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 17px; padding: 0; color: var(--ink); box-shadow: 0 28px 80px rgba(14,22,38,.25); }
.dialog::backdrop { background: rgba(12,18,30,.56); backdrop-filter: blur(3px); }
.dialog form, .confirm-dialog { padding: 24px; }
.dialog-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--muted); background: #f0f2f6; font-size: 22px; }
.context-box { margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; color: #4d596e; background: #f5f7fa; font-size: 12px; line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; max-height: 52vh; overflow: auto; padding: 2px; }
.form-grid label { display: grid; gap: 7px; }
.form-grid label.full { grid-column: 1 / -1; }
textarea { min-height: 96px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.form-note { margin: 15px 0 0; color: var(--muted); font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.risk-eyebrow { color: var(--red); }
.risk-banner { margin-bottom: 15px; padding: 13px 15px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.risk-banner.medium { color: var(--amber); background: var(--amber-soft); }
.risk-banner.high, .risk-banner.critical { color: var(--red); background: var(--red-soft); }
.preview-summary { display: grid; grid-template-columns: 130px 1fr; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.preview-summary dt, .preview-summary dd { margin: 0; padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 12px; }
.preview-summary dt { color: var(--muted); background: #fafbfc; }
.preview-summary dd { font-weight: 650; overflow-wrap: anywhere; }
details { margin-top: 14px; }
summary { cursor: pointer; color: var(--blue); font-size: 12px; font-weight: 700; }
pre { max-height: 190px; overflow: auto; padding: 13px; border-radius: 9px; color: #dfe7f7; background: #182133; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-input { display: grid; gap: 8px; margin-top: 17px; }
.confirm-input code { width: fit-content; padding: 6px 8px; border-radius: 6px; color: var(--red); background: var(--red-soft); font-size: 12px; user-select: all; }
.toast { position: fixed; right: 24px; bottom: 24px; max-width: 420px; padding: 13px 16px; border-radius: 10px; color: white; background: var(--navy); box-shadow: 0 15px 40px rgba(0,0,0,.2); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--red); }
.detail-dialog { width: min(980px, calc(100vw - 32px)); padding: 24px; }
.analysis-dialog { width: min(1080px, calc(100vw - 32px)); padding: 24px; }
.change-dialog { width: min(980px, calc(100vw - 32px)); padding: 24px; }
.sku-report-dialog { width: min(1180px, calc(100vw - 28px)); padding: 24px; }
.analysis-import-panel { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: center; margin: 0 0 16px; padding: 15px 17px; border: 1px solid #cfdbf5; border-radius: 12px; background: linear-gradient(135deg, #f8faff, #eef4ff); }
.analysis-import-panel strong, .analysis-import-panel small { display: block; }
.analysis-import-panel > div > strong { margin-bottom: 5px; font-size: 13px; }
.analysis-import-panel small { color: var(--muted); font-size: 11px; }
.analysis-import-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.analysis-import-actions .button { min-width: 154px; }
.analysis-import-actions .button.primary { min-width: 190px; }
.analysis-packet-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.analysis-packet-hint { grid-column: 1 / -1; margin: -2px 0 0; color: #63708a; font-size: 11px; line-height: 1.55; }
.import-progress { grid-column: 1 / -1; }
.import-progress-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #52617b; font-size: 10px; }
.import-progress-meta strong { color: var(--blue); font-size: 11px; }
.import-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #dfe7f7; }
.import-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #4f82ff); transition: width .35s ease; }
.analysis-content { display: grid; gap: 14px; }
.analysis-section { margin-top: 16px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.analysis-section h3 { margin-bottom: 8px; }
.analysis-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 12px; }
.analysis-section-head h3 { margin: 0 0 5px; }
.analysis-section-head p { margin: 0; }
.custom-date-range { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 6px; border: 1px solid #dce4f0; border-radius: 10px; background: #fff; }
.custom-date-range label { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.custom-date-range input { width: 124px; padding: 7px 8px; font-size: 11px; }
.top-actions .custom-date-range .button { padding: 8px 11px; font-size: 11px; }
.analysis-period-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; }
.analysis-custom-date-range { margin: 0; }
.analysis-collapsible { padding: 0; overflow: hidden; }
.analysis-collapsible summary, .sku-timeline > summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 17px; cursor: pointer; list-style: none; }
.analysis-collapsible summary::-webkit-details-marker, .sku-timeline > summary::-webkit-details-marker { display: none; }
.analysis-collapsible summary h3, .sku-timeline > summary h3 { margin: 0 0 5px; }
.analysis-collapsible[open] summary, .sku-timeline[open] > summary { border-bottom: 1px solid var(--line); background: #fbfcff; }
.analysis-collapsible-body { padding: 0 17px 17px; }
.profile-section { padding: 12px 14px; }
.profile-section .analysis-section-head { align-items: center; margin-bottom: 9px; }
.profile-section .analysis-section-head h3 { display: inline; margin: 0 8px 0 0; font-size: 14px; }
.profile-section .analysis-section-head p { display: inline; font-size: 11px; }
.profile-grid { display: grid; grid-template-columns: minmax(145px, 1.25fr) 100px minmax(116px, 1fr) minmax(116px, 1fr) 96px auto; gap: 8px; align-items: end; }
.profile-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.profile-grid input, .profile-grid select { width: 100%; min-height: 34px; padding: 7px 9px; font-size: 12px; }
.profile-submit { display: flex; align-items: flex-end; }
.profile-submit .button { min-height: 34px; padding: 7px 12px; white-space: nowrap; font-size: 12px; }
.review-count, .pending-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; color: var(--muted); background: #eef2f7; font-size: 10px; font-weight: 800; white-space: nowrap; }
.review-count { padding: 7px 10px; }
.pending-badge { padding: 4px 7px; color: var(--amber); background: var(--amber-soft); }
.review-count.has-pending { color: var(--amber); background: var(--amber-soft); }
.pending-review-queue { margin: 0 0 14px; padding: 13px; border: 1px solid #f2d49b; border-radius: 11px; background: #fffaf0; }
.pending-review-head strong, .pending-review-head small { display: block; }
.pending-review-head strong { color: #925c00; font-size: 12px; }
.pending-review-head small { margin-top: 4px; color: #806d4d; font-size: 10px; line-height: 1.45; }
.pending-review-items { display: grid; gap: 7px; margin-top: 10px; }
.pending-review-open { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; width: 100%; padding: 10px 11px; border: 1px solid #f2dfb4; border-radius: 8px; color: #3d372b; background: #fff; text-align: left; cursor: pointer; }
.pending-review-open:hover { border-color: #d7a13b; background: #fffdf7; }
.pending-review-open span { grid-row: 1 / span 2; padding: 4px 6px; border-radius: 5px; color: #9a6100; background: #fff0ce; font-size: 9px; font-weight: 800; }
.pending-review-open strong { font-size: 12px; }
.pending-review-open small { grid-column: 2 / 4; color: var(--muted); font-size: 10px; line-height: 1.45; }
.pending-review-open b { color: #976300; font-size: 10px; white-space: nowrap; }
.ai-status { margin: -2px 0 12px; padding: 8px 10px; border-radius: 8px; color: #234f9d; background: #eef4ff; font-size: 11px; }
.ai-status.error { color: var(--amber); background: var(--amber-soft); }
.change-timeline { display: grid; gap: 12px; }
.analysis-hierarchy { display: grid; gap: 10px; }
.analysis-hierarchy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 11px; }
.analysis-hierarchy-head h4 { margin: 8px 0 4px; font-size: 15px; }
.analysis-hierarchy-head p { margin: 0; font-size: 11px; }
.analysis-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #a3abba; font-size: 11px; }
.analysis-crumb { max-width: 270px; overflow: hidden; padding: 4px 6px; border: 0; border-radius: 6px; color: #52617b; background: transparent; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.analysis-crumb:not(.active):hover { color: var(--blue); background: var(--blue-soft); }
.analysis-crumb.active { color: var(--ink); background: #eef2f7; cursor: default; }
.hierarchy-analysis-table { max-height: 420px; }
.analysis-table td > small { display: block; max-width: 180px; margin-top: 4px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.analysis-row-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.button.tiny { padding: 6px 8px; border-radius: 7px; font-size: 10px; }
.sku-report-button { color: #fff; border-color: #5b37c9; background: linear-gradient(135deg, #5b37c9, #8b5cf6); box-shadow: 0 5px 12px rgba(91,55,201,.2); }
.sku-report-button:hover { border-color: #4825b2; background: linear-gradient(135deg, #4825b2, #7445e6); }
.sku-report-hero { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin: 16px 0; padding: 18px 20px; border: 1px solid #d9ccff; border-radius: 14px; color: #f7f4ff; background: linear-gradient(120deg, #24204b, #4d2ba0 58%, #7654d5); box-shadow: 0 13px 30px rgba(63,37,140,.16); }
.sku-report-hero span, .sku-report-hero strong, .sku-report-hero small { display: block; }
.sku-report-hero span { margin-bottom: 5px; color: #d9ceff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.sku-report-hero strong { margin-bottom: 6px; font-size: 17px; }
.sku-report-hero small { color: #ddd4fc; font-size: 11px; }
.sku-report-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sku-cli-action { display: grid; justify-items: end; gap: 5px; }
.sku-cli-indicator { display: inline-flex; align-items: center; max-width: 190px; overflow: hidden; color: #ddd4fc; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; }
.sku-cli-indicator.healthy { color: #bdf5d9; }
.sku-cli-indicator.ready { color: #d9e7ff; }
.sku-cli-indicator.running { color: #fbe49e; }
.sku-cli-indicator.failed, .sku-cli-indicator.offline { color: #ffc7c7; }
.sku-primary-action { border-color: #fff; color: #3a2382; background: #fff; }
.sku-primary-action:hover { background: #f0ebff; }
.sku-report-hero .secondary { border-color: #cfc0ff; color: #fff; background: rgba(255,255,255,.13); }
.sku-report-hero .secondary:disabled { opacity: .5; }
.sku-report-content { display: grid; gap: 14px; }
.sku-facts { display: grid; grid-template-columns: minmax(260px, 1.05fr) minmax(380px, 1fr); gap: 18px; padding: 18px; border: 1px solid #d8dcef; border-radius: 13px; background: #fbfcff; }
.sku-facts h3 { margin: 4px 0 8px; color: #283957; font-size: 15px; line-height: 1.55; }
.sku-facts p:last-child { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.sku-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sku-metric { padding: 11px 12px; border: 1px solid #e1e6f1; border-radius: 9px; background: #fff; }
.sku-metric span, .sku-metric strong { display: block; }
.sku-metric span { margin-bottom: 5px; color: var(--muted); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.sku-metric strong { color: #263958; font-size: 15px; }
.sku-section { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sku-section h3 { margin: 0 0 12px; color: #263958; font-size: 14px; }
.sku-creatives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.sku-creative-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 12px; border: 1px solid #e1e6f1; border-radius: 10px; background: #fafbfe; }
.sku-creative-card img, .sku-creative-placeholder { width: 86px; height: 86px; border-radius: 8px; object-fit: cover; background: #eef1f7; }
.sku-creative-placeholder { display: grid; place-items: center; color: #8b96aa; font-size: 10px; }
.sku-creative-card small { color: #6d7c94; font-size: 10px; }
.sku-creative-card h4 { margin: 5px 0 7px; color: #2b3b58; font-size: 12px; }
.sku-creative-card p { display: -webkit-box; margin: 0; overflow: hidden; color: #52617b; font-size: 11px; line-height: 1.55; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.sku-creative-meta { margin-top: 8px; overflow: hidden; color: #7b879c; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.sku-change-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sku-change-list li { padding: 10px 11px; border-left: 3px solid #a78bfa; border-radius: 0 8px 8px 0; color: #41516d; background: #faf9ff; font-size: 11px; line-height: 1.55; }
.sku-change-list time { display: inline-block; min-width: 134px; margin-right: 6px; color: #7767a5; font-variant-numeric: tabular-nums; }
.sku-change-list em { display: block; margin-top: 4px; color: #65538f; font-style: normal; }
.sku-version-list { display: grid; gap: 9px; }
.sku-version-card { padding: 12px; border: 1px solid #e0e5ef; border-left: 4px solid #bbc4d5; border-radius: 10px; background: #fbfcfe; }
.sku-version-card.latest { border-left-color: #6d43d7; background: #fbfaff; }
.sku-version-card.selected { border-left-color: #2563eb; box-shadow: 0 0 0 1px #c8d9ff; }
.sku-version-card > div { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; }
.sku-version-card span { grid-row: 1 / 3; align-self: center; padding: 5px 7px; border-radius: 7px; color: #5830bd; background: #eee9ff; font-size: 10px; font-weight: 900; }
.sku-version-card strong { color: #364663; font-size: 12px; line-height: 1.55; }
.sku-version-card small { color: var(--muted); font-size: 10px; }
.sku-version-card p { margin: 9px 0 0; color: #53627b; font-size: 11px; line-height: 1.55; }
.sku-human-note { color: #5b408e !important; }
.sku-human-section { margin-top: 16px; }
.sku-formal-section { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sku-formal-section h3 { margin: 3px 0 5px; color: #28425d; font-size: 15px; }
.sku-formal-section textarea { min-height: 96px; }
.sku-formal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sku-cli-status { display: grid; gap: 4px; margin: 0; padding: 12px 13px; border: 1px solid #dce4ef; border-radius: 10px; color: #40526f; background: #f8fafc; font-size: 11px; line-height: 1.55; }
.sku-cli-status strong { color: #2e405e; font-size: 12px; }
.sku-cli-status small { color: #74829a; font-size: 10px; }
.sku-cli-status.complete { border-color: #bde5d4; color: #29644e; background: #f1fbf6; }
.sku-cli-status.complete strong { color: #127050; }
.sku-cli-status.running { border-color: #b9ccf6; color: #315a9a; background: #f0f5ff; }
.sku-cli-status.failed { border-color: #f1cb99; color: #915500; background: #fff9ef; }
.sku-cli-status.failed strong { color: #925900; }
.sku-cli-status.idle { color: #67758d; background: #fafbfe; }
.sku-cli-report { margin-top: 12px; padding: 15px; border: 1px solid #dcd4f6; border-radius: 11px; background: #fcfbff; }
.sku-cli-report-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sku-cli-report-head h4 { margin: 3px 0 0; color: #3d2a75; font-size: 14px; line-height: 1.55; }
.sku-confidence { padding: 5px 8px; border-radius: 6px; color: #6e55a6; background: #eee9ff; font-size: 10px; font-weight: 800; white-space: nowrap; }
.sku-confidence.high { color: #087c56; background: #e6f7f0; }
.sku-confidence.medium { color: #945d00; background: #fff2d5; }
.sku-cli-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.sku-cli-grid article { padding: 11px; border: 1px solid #e8e2f7; border-radius: 8px; background: #fff; }
.sku-cli-grid h5 { margin: 0 0 7px; color: #584487; font-size: 11px; }
.sku-cli-grid ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; color: #53627b; font-size: 11px; line-height: 1.5; }
.sku-cli-grid .empty { margin: 0; font-size: 10px; }
.section-intro { margin: -5px 0 12px; color: var(--muted); font-size: 11px; }
.sku-version-card { padding: 0; overflow: hidden; }
.sku-version-card summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; cursor: pointer; list-style: none; }
.sku-version-card summary::-webkit-details-marker { display: none; }
.sku-version-card summary > b { color: #6444bd; font-size: 10px; white-space: nowrap; }
.sku-version-card[open] summary { border-bottom: 1px solid #e3def0; background: #fdfcff; }
.sku-version-detail { display: grid; gap: 10px; padding: 12px; }
.sku-version-detail > p { margin: 0; }
.sku-version-detail .sku-cli-report { margin-top: 0; }
.sku-version-detail .sku-human-note small { display: block; margin-top: 4px; color: #8a799f; }
.sku-version-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-top: 2px; }
.sku-version-actions small { color: #7d899c; font-size: 10px; }
.sku-timeline { padding: 0; overflow: hidden; }
.sku-timeline > summary h3 { color: #263958; font-size: 14px; }
.sku-timeline > summary h3 small { color: var(--muted); font-size: 10px; font-weight: 600; }
.sku-timeline > summary > b { color: #6243bd; font-size: 11px; white-space: nowrap; }
.sku-timeline > div { padding: 0 17px 17px; }
.sku-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.change-card { padding: 15px; border: 1px solid var(--line); border-left: 4px solid #b7c0cf; border-radius: 10px; background: #fbfcfe; }
.change-card.pending { border-left-color: var(--amber); background: #fffdf8; }
.change-card-head { display: flex; justify-content: space-between; gap: 12px; }
.change-card-head > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.change-card-head strong { font-size: 13px; }
.change-card-head small { width: 100%; color: var(--muted); font-size: 10px; }
.change-kind { padding: 4px 7px; border-radius: 6px; color: var(--blue); background: var(--blue-soft); font-size: 9px; font-weight: 900; }
.change-kind.removed { color: var(--red); background: var(--red-soft); }
.change-kind.create { color: #087c56; background: #e6f7f0; }
.review-flag { color: var(--amber); font-size: 10px; font-weight: 800; white-space: nowrap; }
.change-summary { margin: 11px 0; color: #37445b; font-size: 12px; line-height: 1.6; }
.period-outcome { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; color: #365174; background: #edf4ff; font-size: 11px; line-height: 1.5; }
.activity-operation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; font-size: 11px; }
.activity-operation strong { color: #2f4d82; }
.activity-operation span { padding: 4px 7px; border-radius: 6px; color: var(--muted); background: #edf1f6; }
.operation-explanation { margin: -2px 0 10px; padding: 8px 10px; border-left: 3px solid #6f8fda; color: #34496c; background: #f5f8ff; font-size: 11px; line-height: 1.55; }
.operation-explanation strong { color: #234f9d; }
.outcome-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.outcome-chip { padding: 5px 8px; border-radius: 7px; font-size: 10px; }
.outcome-chip.mature { color: #176b4d; background: #eaf7f1; }
.outcome-chip.waiting { color: var(--muted); background: #edf1f6; }
.ai-review { margin-top: 12px; padding: 12px 13px; border: 1px solid #cfdaf2; border-radius: 9px; background: #f5f8ff; }
.ai-review > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ai-review strong { color: #234f9d; font-size: 12px; }
.ai-review p { margin: 9px 0; color: #34425b; font-size: 12px; line-height: 1.6; }
.ai-review ul { margin: 0 0 8px; padding-left: 18px; color: #516078; font-size: 11px; line-height: 1.6; }
.ai-review small { color: var(--muted); font-size: 9px; }
.confidence { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: #e5ebf5; font-size: 9px; font-weight: 800; }
.confidence.high { color: #176b4d; background: #dff4eb; }
.confidence.medium { color: var(--amber); background: var(--amber-soft); }
.change-diff { margin-top: 9px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.change-diff table { min-width: 840px; }
.change-diff th, .change-diff td { padding: 8px; font-size: 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.change-diff td:last-child { min-width: 220px; color: #40516c; line-height: 1.55; }
.change-field-label, .change-field-label + small { display: block; }
.change-field-label { color: #233859; font-size: 11px; }
.change-field-label + small { margin-top: 3px; color: #99a3b3; font-size: 9px; font-weight: 500; }
.change-note-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.change-note-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.change-note-form textarea { min-height: 68px; font-family: inherit; }
.adset-review-form { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; padding: 13px; border: 1px solid #b9ccfb; border-radius: 11px; background: rgba(246,249,255,.97); box-shadow: 0 8px 22px rgba(35,79,157,.09); backdrop-filter: blur(8px); }
.adset-review-form > div { grid-column: 1 / -1; }
.adset-review-form > div strong { color: #173d86; font-size: 13px; }
.adset-review-form > div p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.adset-review-form label { display: grid; gap: 5px; color: #52617a; font-size: 10px; font-weight: 700; }
.adset-review-form textarea { min-height: 62px; font-family: inherit; }
.event-review-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 7px; color: #4a5870; background: #f5f7fa; font-size: 10px; line-height: 1.55; }
.analysis-settings { display: flex; gap: 9px; align-items: center; }
.analysis-settings input { flex: 1 1 300px; }
.analysis-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.analysis-period-summary { margin: 0; padding: 10px 13px; border-left: 3px solid var(--blue); border-radius: 8px; color: #43516a; background: #f6f8fc; font-size: 12px; line-height: 1.6; }
.analysis-metric { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8faff; }
.analysis-metric span, .analysis-metric strong { display: block; }
.analysis-metric span { margin-bottom: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.analysis-metric strong { font-size: 17px; }
.analysis-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.analysis-list { margin: 0; padding-left: 18px; color: #44516a; font-size: 12px; line-height: 1.75; }
.analysis-table { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.analysis-table th, .analysis-table td { padding: 7px 9px; font-size: 11px; }
.asset-start-time { display: grid; gap: 2px; min-width: 112px; }
.asset-start-time strong { color: #263750; font-size: 11px; font-weight: 750; white-space: nowrap; }
.asset-start-time small { color: #929cad; font-size: 9px; white-space: nowrap; }
.analysis-history { display: grid; gap: 10px; }
.analysis-record { padding: 12px; border-radius: 9px; background: #f7f9fc; font-size: 12px; line-height: 1.65; }
.analysis-record time { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.detail-content { display: grid; gap: 16px; }
.detail-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 17px; border-radius: 12px; color: white; background: linear-gradient(135deg, #17223a, #253a68); }
.detail-hero p { margin: 5px 0 0; color: #aebbd3; font-size: 12px; }
.detail-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.detail-kpi { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.detail-kpi span, .detail-kpi strong { display: block; }
.detail-kpi span { margin-bottom: 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.detail-kpi strong { font-size: 17px; }
.detail-section { padding: 17px; border: 1px solid var(--line); border-radius: 12px; }
.detail-section h3 { margin-bottom: 13px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.detail-item { min-width: 0; padding: 10px 11px; border-radius: 8px; background: #f6f8fb; }
.detail-item span, .detail-item strong { display: block; overflow-wrap: anywhere; }
.detail-item span { margin-bottom: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.detail-item strong { font-size: 12px; line-height: 1.5; }
.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-json { margin: 0; max-height: 270px; color: #dfe7f7; background: #182133; }
.creative-card { display: grid; grid-template-columns: 150px 1fr; gap: 17px; }
.creative-card img { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; background: #edf0f5; }
.creative-copy h4 { margin: 0 0 8px; }
.creative-copy p { margin-bottom: 10px; color: var(--muted); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.daily-table th, .daily-table td { padding: 10px 12px; }
.row-actions { display: flex; align-items: center; gap: 3px; }
.section-copy { max-width: 620px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.workspace-section { padding-top: 32px; }
.workspace-section .kpi-grid { margin-bottom: 16px; }
.workspace-section .kpi { min-height: 116px; padding: 18px 20px; }
.workspace-section .kpi strong { margin: 11px 0 5px; font-size: 27px; }
.mirror-status-bar { min-height: 70px; margin-bottom: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 22px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.86); box-shadow: 0 4px 16px rgba(18,27,44,.035); }
.mirror-health { min-width: 260px; display: flex; align-items: center; gap: 12px; padding-right: 22px; border-right: 1px solid var(--line); }
.pulse-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 5px rgba(34,160,107,.11); }
.mirror-health small, .mirror-health strong { display: block; }
.mirror-health small { margin-bottom: 3px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.mirror-health strong { max-width: 235px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.mirror-stat { display: grid; gap: 3px; min-width: 58px; }
.mirror-stat span { color: var(--muted); font-size: 10px; }
.mirror-stat strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.mirror-updated { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.hierarchy-panel { overflow: hidden; box-shadow: 0 14px 38px rgba(18,27,44,.07); }
.hierarchy-head { min-height: 64px; padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.breadcrumb { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.breadcrumb-item { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 9px; border: 0; border-radius: 8px; color: #4d5a70; background: transparent; font-size: 12px; font-weight: 700; }
.breadcrumb-item:not(.active):hover { color: var(--blue); background: var(--blue-soft); }
.breadcrumb-item.active { color: var(--ink); background: #eef2f7; cursor: default; }
.breadcrumb-separator { color: #a3abba; }
.hierarchy-actions { flex: 0 0 auto; }
.hierarchy-toolbar { min-height: 66px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.hierarchy-toolbar > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 3px; }
.hierarchy-toolbar strong { color: #101f39; font-size: 19px; font-weight: 850; letter-spacing: -.015em; }
.hierarchy-toolbar small { grid-column: 2; color: var(--muted); font-size: 11px; }
.level-badge { grid-row: 1 / 3; min-width: 52px; padding: 7px 8px; border-radius: 9px; color: var(--blue); background: var(--blue-soft); text-align: center; font-size: 11px; font-weight: 850; }
.hierarchy-filters { display: flex; align-items: center; gap: 10px; }
.hierarchy-filters label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hierarchy-filters select { width: 138px; padding-block: 8px; }
.hierarchy-filters input { width: 240px; padding-block: 8px; }
.hierarchy-table { min-height: 330px; max-height: 650px; }
.hierarchy-table th { position: sticky; top: 0; z-index: 1; }
.hierarchy-table th, .hierarchy-table td { padding: 9px 13px; }
.hierarchy-table th:last-child, .hierarchy-table td:last-child { position: sticky; right: 0; min-width: 255px; background: #fff; box-shadow: -10px 0 18px -18px rgba(18,27,44,.55); }
.hierarchy-table th:last-child { z-index: 2; background: #fafbfc; }
.hierarchy-table tbody tr:hover td:last-child { background: #fafcff; }
.hierarchy-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
.hierarchy-row td { height: 54px; }
.hierarchy-row .name-cell strong, .hierarchy-row .account-name strong { color: #10213d; font-size: 14px; font-weight: 850; }
.hierarchy-row .name-cell small, .hierarchy-row .account-name small { display: block; margin-top: 3px; color: #929bad; font-size: 9px; }
.metric-cell { font-weight: 750; font-variant-numeric: tabular-nums; }
.creative-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.hierarchy-row .row-actions { justify-content: flex-end; gap: 7px; }
.hierarchy-row .row-action { white-space: nowrap; }
.hierarchy-row .account-analyze { padding: 8px 15px; white-space: nowrap; }
.hierarchy-row .row-action span { margin-left: 3px; }
.hierarchy-row .link-button { padding: 6px 4px; white-space: nowrap; }
.danger-link { color: var(--red); }
.bulk-bar.has-selection { color: var(--ink); background: #f5f8ff; }

@media (max-width: 1080px) {
  .shell { grid-template-columns: 86px minmax(0, 1fr); }
  .sidebar { padding-inline: 12px; }
  .brand div, .nav-item:not(.active), .nav-item span, .sidebar-note div { display: none; }
  .brand { justify-content: center; padding-inline: 0; }
  .nav-item { text-align: center; }
  .sidebar-note { justify-content: center; }
  main { padding-inline: 24px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .mirror-strip { grid-template-columns: repeat(3, 1fr); }
  .mirror-strip > div { border-bottom: 1px solid var(--line); }
  .control-filters { grid-template-columns: 1fr 1fr; }
  .mirror-status-bar { flex-wrap: wrap; }
  .mirror-updated { width: 100%; margin-left: 0; }
  .hierarchy-toolbar { align-items: flex-start; flex-direction: column; }
  .hierarchy-filters { width: 100%; }
  .hierarchy-filters .search-control { flex: 1; }
  .hierarchy-filters input { width: 100%; }
  .profile-grid { grid-template-columns: repeat(3, 1fr); }
  .change-note-form { grid-template-columns: 1fr 1fr; }
  .change-note-form > div { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 14px 16px; flex-direction: row; align-items: center; }
  .brand { padding: 0; }
  .brand div { display: block; }
  .sidebar nav, .sidebar-note { display: none; }
  main { padding: 0 14px 40px; }
  .topbar, .section-heading, .assets-heading { align-items: flex-start; flex-direction: column; }
  .top-actions, .asset-controls { width: 100%; flex-wrap: wrap; }
  .sku-report-hero { align-items: flex-start; flex-direction: column; }
  .sku-report-actions { justify-content: flex-start; }
  .sku-facts, .sku-creatives { grid-template-columns: 1fr; }
  .kpi-grid, .safety-grid { grid-template-columns: 1fr; }
  .control-actions { width: 100%; flex-direction: column; }
  .mirror-strip, .control-filters { grid-template-columns: 1fr; }
  .bulk-bar { align-items: flex-start; flex-wrap: wrap; }
  .bulk-bar small { width: 100%; margin-left: 0; }
  .asset-controls label { width: 100%; }
  .asset-controls select { width: 100%; }
  .asset-summary { align-items: flex-start; flex-direction: column; }
  .mirror-status-bar { gap: 14px; }
  .mirror-health { width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; }
  .hierarchy-head { align-items: flex-start; flex-direction: column; }
  .hierarchy-filters { align-items: stretch; flex-direction: column; }
  .hierarchy-filters label { display: grid; }
  .hierarchy-filters select, .hierarchy-filters input { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.full { grid-column: auto; }
  .detail-kpis { grid-template-columns: repeat(2, 1fr); }
  .analysis-metrics, .analysis-columns { grid-template-columns: 1fr; }
  .analysis-settings { align-items: stretch; flex-direction: column; }
  .analysis-import-panel { grid-template-columns: 1fr; }
  .analysis-import-actions { justify-content: stretch; }
  .analysis-import-actions .button { width: 100%; }
  .import-progress { grid-column: auto; }
  .profile-grid, .change-note-form { grid-template-columns: 1fr; }
  .change-note-form > div { grid-column: auto; }
  .detail-grid, .detail-columns { grid-template-columns: 1fr; }
  .creative-card { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body.cloud-mode { padding-bottom: 74px; }
  .cloud-mode .cloud-sidebar { position: static; height: 68px; padding: 14px 16px; }
  .cloud-mode .cloud-sidebar .brand { justify-content: flex-start; }
  .cloud-mode .cloud-sidebar nav { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(7,29,74,.96); box-shadow: 0 14px 40px rgba(7,29,74,.32); backdrop-filter: blur(16px); }
  .cloud-mode .cloud-sidebar .nav-item:not([hidden]) { min-height: 48px; padding: 7px 5px; display: flex !important; flex-direction: column; justify-content: center; gap: 3px; color: #b8c8e5; text-align: center; font-size: 10px; }
  .cloud-mode .cloud-sidebar .nav-item[hidden] { display: none !important; }
  .cloud-mode .cloud-sidebar .nav-item span { display: none; }
  .cloud-mode .cloud-sidebar .nav-item.active { color: #fff; background: rgba(77,163,255,.22); }
  .cloud-mode .nav-badge { position: absolute; margin: -30px -44px 0 0; min-width: 18px; height: 18px; font-size: 9px; }
  .cloud-mode main { padding-bottom: 22px; }
  .cloud-mode .topbar { min-height: 128px; padding-block: 20px; }
  .cloud-mode .top-actions { display: grid; grid-template-columns: 1fr auto auto; }
  .cloud-mode .top-actions .period-control { grid-column: 1 / 2; }
  .cloud-mode .top-actions .user-chip { grid-column: 2 / 3; }
  .cloud-mode .top-actions #logout { grid-column: 3 / 4; }
  .cloud-mode .cloud-panel .table-wrap { overflow-x: auto; }
  .cloud-mode .cloud-panel table { min-width: 760px; }
}