:root {
  color-scheme: light;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --sidebar-top: #082a56;
  --sidebar-bottom: #0b356e;
  --blue-soft: #eaf1ff;
  --green: #15966b;
  --green-dark: #0b7555;
  --green-soft: #e9f8f1;
  --amber: #c97808;
  --amber-soft: #fff5df;
  --red: #d94655;
  --red-soft: #fff0f2;
  --ink: #12213b;
  --muted: #66758e;
  --line: #dce5f1;
  --surface: #fff;
  --canvas: #f3f7fc;
  --shadow: 0 12px 34px rgba(31, 62, 104, .08);
  --radius: 18px;
  font-family: "Roboto", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: "Roboto", Arial, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.is-loading .app-shell { visibility: hidden; }
.loading-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); background: var(--canvas); font-size: 13px; }
body:not(.is-loading) .loading-screen { display: none; }
.loader-mark { width: 58px; height: 58px; display: grid; place-items: center; animation: pulse 1.2s ease-in-out infinite; }
.loader-mark img { width: 100%; height: 100%; object-fit: contain; }
@keyframes pulse { 50% { transform: translateY(-4px); } }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 252px; padding: 22px 16px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: radial-gradient(circle at 22% 8%, rgba(65,142,255,.28), transparent 28%), linear-gradient(180deg, var(--sidebar-top), var(--sidebar-bottom)); box-shadow: 12px 0 36px rgba(12,42,78,.08); transition: transform .22s ease; }
.brand { height: 80px; padding: 0 8px 21px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.13); }
.brand img { width: 100%; height: 58px; object-fit: contain; object-position: left center; }
.workspace-label { margin: 24px 12px 8px; color: #91afd6; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.side-nav { display: grid; gap: 5px; }
.nav-item { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; border-radius: 11px; color: #d7e8ff; font-size: 13px; font-weight: 650; transition: background .16s ease, color .16s ease; }
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.is-active { color: #fff; background: linear-gradient(90deg, var(--primary-dark), var(--primary)); box-shadow: 0 8px 18px rgba(5,26,55,.2); }
.nav-item.is-disabled { opacity: .52; cursor: default; }
.nav-item small { margin-left: auto; font-size: 8px; }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; }
.nav-icon svg { width: 14px; height: 14px; }
.sidebar-footer { display: grid; gap: 16px; padding: 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.06); }
.sidebar-footer a { font-size: 11px; font-weight: 700; }
.sidebar-footer p { margin: 0; color: #a9c6ec; font-size: 9px; line-height: 1.5; }
.sidebar-footer p span { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #54e2a4; box-shadow: 0 0 0 5px rgba(84,226,164,.14); }

.main-column { margin-left: 252px; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; height: 76px; padding: 0 30px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(220,229,241,.92); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.breadcrumb { display: flex; gap: 9px; color: #8b99ad; font-size: 11px; }
.breadcrumb span::after { content: '/'; margin-left: 9px; color: #bcc7d6; }
.breadcrumb strong { color: var(--ink); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--sidebar-top), #3475d4); font-size: 12px; font-weight: 800; }
.user-copy { min-width: 130px; }
.user-copy strong, .user-copy small { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: 12px; }
.user-copy small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.text-button { border: 0; color: var(--primary); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.icon-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; cursor: pointer; }
.icon-button svg { width: 19px; height: 19px; }

main { width: min(1460px, 100%); margin: 0 auto; padding: 30px 30px 64px; }
.hero { position: relative; min-height: 178px; padding: 30px 34px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(68,153,255,.44), transparent 25%), linear-gradient(112deg, var(--sidebar-top), var(--sidebar-bottom) 65%, var(--primary) 120%); box-shadow: var(--shadow); }
.hero::after { content: ''; position: absolute; width: 240px; height: 240px; right: -80px; bottom: -140px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.025); }
.hero > * { position: relative; z-index: 1; }
.hero-copy { min-width: 0; max-width: 100%; }
.eyebrow { margin: 0 0 8px; color: #9fc8ff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.eyebrow.dark { color: var(--primary); }
.hero h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.hero-copy > p:last-child { max-width: 710px; margin: 12px 0 0; color: #d8e8fb; font-size: 13px; line-height: 1.65; }
.hero-status { min-width: 226px; max-width: 100%; padding: 16px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.hero-status-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #7df0bd; background: rgba(255,255,255,.12); }
.hero-status-icon svg { width: 20px; height: 20px; }
.hero-status strong, .hero-status small { display: block; }
.hero-status strong { font-size: 11px; }
.hero-status small { margin-top: 5px; color: #c2daf7; font-size: 9px; }

.kpi-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.kpi-card { min-height: 118px; padding: 18px 19px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 18px rgba(38,65,105,.04); }
.kpi-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; }
.kpi-icon svg { width: 22px; height: 22px; }
.kpi-icon.is-blue { color: var(--primary); background: var(--blue-soft); }
.kpi-icon.is-green { color: var(--green); background: var(--green-soft); }
.kpi-icon.is-amber { color: var(--amber); background: var(--amber-soft); }
.kpi-card div > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.kpi-card strong { display: block; margin: 6px 0 4px; font-size: 25px; letter-spacing: -.04em; }
.kpi-card small { color: #8594a9; font-size: 9px; }

.section-block { scroll-margin-top: 94px; margin-top: 28px; }
.section-heading { margin-bottom: 14px; }
.section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.section-heading p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.mode-card { min-height: 196px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 5px 18px rgba(38,65,105,.04); }
.mode-card.is-current { border-color: #b8d0ff; box-shadow: inset 0 3px 0 var(--primary), 0 8px 24px rgba(37,99,235,.08); }
.mode-card.is-upcoming { background: linear-gradient(135deg, #fff, #fbfcff); }
.mode-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mode-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--primary); background: var(--blue-soft); }
.mode-icon svg { width: 21px; height: 21px; }
.is-upcoming .mode-icon { color: #7655dc; background: #f1edff; }
.mode-badge { padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.mode-badge.is-live { color: var(--green-dark); background: var(--green-soft); }
.mode-badge.is-building { color: #7454cc; background: #f1edff; }
.mode-card h3 { margin: 16px 0 7px; font-size: 15px; }
.mode-card p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.6; }
.mode-action { width: fit-content; margin-top: auto; padding-top: 16px; border: 0; color: var(--primary); background: transparent; font-size: 10px; font-weight: 800; }
.mode-action span { display: inline-block; margin-left: 4px; }
.mode-action.is-disabled { color: #98a5b7; cursor: not-allowed; }

.bulk-import-card { margin-top: 15px; padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; border: 1px solid #cddcf5; border-radius: var(--radius); background: linear-gradient(135deg, #fff, #f8fbff); box-shadow: 0 5px 18px rgba(38,65,105,.04); }
.bulk-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--blue-soft); }
.bulk-icon svg { width: 22px; height: 22px; }
.bulk-copy h3 { margin: 0 0 6px; font-size: 14px; }
.bulk-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.bulk-copy p strong { color: #3d506c; }
.bulk-actions { min-width: 190px; display: grid; justify-items: stretch; gap: 7px; }
.bulk-file-button, .compact-button { width: 100%; justify-content: center; }
.compact-button { min-height: 36px; }
.file-name { max-width: 210px; overflow: hidden; color: var(--muted); font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.setup-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .72fr); gap: 15px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 18px rgba(38,65,105,.04); }
.setup-panel { scroll-margin-top: 94px; overflow: hidden; }
.panel-heading { padding: 20px 22px; display: flex; align-items: flex-start; gap: 13px; border-bottom: 1px solid #edf1f6; }
.heading-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--primary); background: var(--blue-soft); }
.heading-icon.is-soft-green { color: var(--green); background: var(--green-soft); }
.heading-icon svg { width: 20px; height: 20px; }
.panel-kicker { display: block; margin-bottom: 5px; color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.panel-heading h2, .permissions-head h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.panel-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.mini-steps { padding: 16px 22px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #8695a9; background: #f8fafe; font-size: 9px; font-weight: 650; }
.mini-steps span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.mini-steps b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #77869b; background: #e8edf4; font-size: 9px; }
.mini-steps .is-active { color: var(--primary-dark); }
.mini-steps .is-active b { color: #fff; background: var(--primary); }
.mini-steps i { width: 30px; height: 1px; background: #dce5f1; }
.connect-form { padding: 22px; display: grid; gap: 20px; }
.form-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-group legend { width: 100%; margin-bottom: 13px; padding: 0; display: flex; align-items: center; gap: 10px; }
.form-group legend > span { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--primary); background: var(--blue-soft); font-size: 9px; font-weight: 850; }
.form-group legend strong, .form-group legend small { display: block; }
.form-group legend strong { font-size: 11px; }
.form-group legend small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field-grid label { display: grid; gap: 7px; color: #31435f; font-size: 10px; font-weight: 750; }
.field-grid input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: #fbfcfe; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.field-grid input::placeholder { color: #98a5b7; }
.field-grid input:hover { border-color: #bdcbe0; }
.field-grid input:focus { border-color: #7da5f6; background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.field-grid label small { min-height: 12px; color: var(--muted); font-size: 8.5px; font-weight: 450; }
.security-note { padding: 12px 13px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #d8ebe3; border-radius: 11px; color: #587067; background: #f8fcfa; font-size: 9px; line-height: 1.5; }
.security-note svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--green); }
.security-note strong { color: #27473c; }
.primary-button { min-height: 46px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 9px 22px rgba(37,99,235,.2); font-size: 10px; font-weight: 800; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,99,235,.26); }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.primary-button svg { width: 16px; height: 16px; }

.permissions-panel { position: sticky; top: 92px; padding: 20px; }
.permissions-head { display: flex; align-items: center; gap: 12px; }
.permissions-copy { margin: 16px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.scope-list { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.scope-list li { padding: 10px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid #edf1f6; border-radius: 10px; background: #fbfcfe; }
.scope-list li::before { content: '✓'; width: 21px; height: 21px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: var(--green); background: var(--green-soft); font: 800 10px Arial, sans-serif; }
.scope-list li strong, .scope-list li code { display: block; }
.scope-list li strong { color: #31435f; font-size: 9.5px; }
.scope-list li code { margin-top: 3px; overflow-wrap: anywhere; color: #8190a4; font-size: 8px; }
.permissions-foot { margin-top: 16px; padding-top: 14px; display: flex; justify-content: space-between; border-top: 1px solid #edf1f6; font-size: 9px; }
.permissions-foot strong { color: var(--green-dark); }
.permissions-foot span { color: var(--muted); }

.stores-panel { margin-top: 16px; overflow: hidden; }
.store-heading { align-items: center; }
.store-heading > div:nth-child(2) { flex: 1; }
.ghost-button { height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; color: #435772; background: #fff; font-size: 9px; font-weight: 750; cursor: pointer; }
.ghost-button svg { width: 14px; height: 14px; }
.table-wrap { position: relative; min-height: 260px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 22px; color: #7c8ba0; background: #f8fafd; text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
td { padding: 16px 22px; border-top: 1px solid #edf1f6; color: #4a5d77; font-size: 10px; }
.store-cell strong, .store-cell small { display: block; }
.store-cell strong { color: var(--ink); font-size: 11px; }
.store-cell small { margin-top: 4px; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge.is-ok { color: #087357; background: var(--green-soft); }
.badge.is-ok::before { background: #20bc85; }
.badge.is-error { color: #a83240; background: var(--red-soft); }
.badge.is-error::before { background: var(--red); }
.badge.is-pending { color: #9a6300; background: var(--amber-soft); }
.badge.is-pending::before { background: #e49a18; }
.badge.is-neutral { color: #5d6c80; background: #edf1f6; }
.badge.is-neutral::before { background: #8a99ac; }
.scope-state { color: var(--green-dark); font-weight: 750; }
.scope-state.is-missing { color: var(--red); }
.store-actions { min-width: 190px; }
.row-action { min-height: 31px; margin: 2px 6px 2px 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 8.5px; font-weight: 800; cursor: pointer; }
.row-action.is-primary { color: var(--primary); border-color: #c9d8f6; background: #f7faff; }
.row-action.is-danger { color: #b43240; border-color: #f0ccd1; background: #fff8f9; }
.row-action:disabled { opacity: .55; cursor: wait; }
.empty-state { min-height: 250px; padding: 32px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }
.empty-state[hidden] { display: none; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 16px; color: var(--primary); background: var(--blue-soft); }
.empty-icon svg { width: 25px; height: 25px; }
.empty-state strong { color: var(--ink); font-size: 12px; }
.empty-state p { margin: 7px 0 14px; font-size: 9.5px; }
.empty-state a { padding: 9px 12px; border-radius: 9px; color: var(--primary); background: var(--blue-soft); font-size: 9px; font-weight: 800; }

.access-error { position: fixed; inset: 0; z-index: 120; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; background: var(--canvas); }
.access-error[hidden] { display: none; }
.fallback-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: var(--sidebar-top); font-size: 13px; font-weight: 850; }
.access-error h1 { margin: 20px 0 7px; font-size: 25px; }
.access-error p { margin: 0; color: var(--muted); font-size: 11px; }
.access-error a { margin-top: 20px; padding: 11px 16px; border-radius: 10px; color: #fff; background: var(--primary); font-size: 10px; font-weight: 800; }
.has-modal { overflow: hidden; }
.confirm-modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; background: rgba(7, 22, 48, .58); backdrop-filter: blur(5px); animation: confirm-backdrop-in .18s ease-out; }
.confirm-modal[hidden] { display: none; }
.confirm-dialog { position: relative; width: min(460px, 100%); padding: 30px; border: 1px solid rgba(213, 223, 237, .9); border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(5, 21, 48, .3); animation: confirm-dialog-in .22s cubic-bezier(.2, .75, .25, 1); }
.confirm-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #65758b; background: #fff; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.confirm-close:hover { color: var(--ink); border-color: #bdcce0; background: #f6f8fc; }
.confirm-close svg { width: 17px; height: 17px; }
.confirm-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #bd3543; background: var(--red-soft); }
.confirm-icon svg { width: 25px; height: 25px; }
.confirm-copy { margin-top: 20px; padding-right: 24px; }
.confirm-kicker { display: block; margin-bottom: 7px; color: #bd3543; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.confirm-copy h2 { margin: 0; color: var(--ink); font-size: 21px; line-height: 1.25; letter-spacing: -.02em; }
.confirm-copy p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.confirm-actions { margin-top: 26px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.confirm-button { min-height: 44px; padding: 0 16px; border-radius: 11px; font-size: 10px; font-weight: 800; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.confirm-button:hover { transform: translateY(-1px); }
.confirm-button:focus-visible, .confirm-close:focus-visible { outline: 3px solid rgba(47, 99, 246, .22); outline-offset: 2px; }
.confirm-button.is-cancel { color: #42546e; border: 1px solid var(--line); background: #fff; }
.confirm-button.is-cancel:hover { border-color: #bdcce0; background: #f7f9fc; }
.confirm-button.is-danger { color: #fff; border: 1px solid #b82f3e; background: #bd3543; box-shadow: 0 10px 22px rgba(189, 53, 67, .2); }
.confirm-button.is-danger:hover { background: #a82937; box-shadow: 0 12px 26px rgba(189, 53, 67, .26); }
.notice-modal .confirm-icon { color: var(--green); background: var(--green-soft); }
.notice-modal .confirm-kicker { color: var(--green-dark); }
.notice-modal[data-type="warning"] .confirm-icon { color: var(--amber); background: var(--amber-soft); }
.notice-modal[data-type="warning"] .confirm-kicker { color: #99600b; }
.notice-modal[data-type="error"] .confirm-icon { color: #bd3543; background: var(--red-soft); }
.notice-modal[data-type="error"] .confirm-kicker { color: #bd3543; }
.notice-icon svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notice-actions { margin-top: 26px; display: flex; justify-content: flex-end; }
.confirm-button.is-primary { min-width: 140px; color: #fff; border: 1px solid var(--primary-dark); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 10px 22px rgba(37, 99, 235, .2); }
.confirm-button.is-primary:hover { box-shadow: 0 12px 26px rgba(37, 99, 235, .28); }
@keyframes confirm-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 90; max-width: min(420px, calc(100vw - 32px)); padding: 13px 16px; border: 1px solid #c9d9ee; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 18px 45px rgba(20,44,80,.2); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .18s ease; font-size: 10px; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { color: #fff; background: #8c2934; border-color: #8c2934; }
.toast.is-warning { color: #fff; background: #8a5a07; border-color: #8a5a07; }

@media (max-width: 1120px) {
  .setup-grid { grid-template-columns: 1fr; }
  .permissions-panel { position: static; }
  .scope-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.is-open { transform: translateX(0); }
  .main-column { margin-left: 0; }
  .menu-button { display: grid; place-items: center; }
  .breadcrumb { display: none; }
  .topbar { padding: 0 18px; }
  main { padding: 22px 18px 48px; }
  .hero { align-items: flex-start; flex-direction: column; }
  .hero-status { width: 100%; }
  .kpi-grid { grid-template-columns: 1fr; }
  .bulk-import-card { grid-template-columns: auto 1fr; }
  .bulk-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .file-name { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 650px) {
  .mode-grid, .field-grid, .scope-list { grid-template-columns: 1fr; }
  .user-copy, .topbar .text-button { display: none; }
  .hero { padding: 25px 22px; }
  .hero h1, .hero-copy > p:last-child { overflow-wrap: anywhere; }
  .mini-steps { align-items: flex-start; flex-direction: column; }
  .mini-steps i { width: 1px; height: 12px; margin-left: 12px; }
  .store-heading { align-items: flex-start; flex-wrap: wrap; }
  .store-heading .ghost-button { margin-left: 53px; }
  th, td { padding-right: 14px; padding-left: 14px; white-space: nowrap; }
  .confirm-modal { padding: 16px; }
  .confirm-dialog { padding: 24px 20px 20px; border-radius: 18px; }
  .confirm-copy { padding-right: 30px; }
  .confirm-actions { grid-template-columns: 1fr; }
  .confirm-button.is-danger { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* Shopify Hub v2 — capability registry */
#orchestration{scroll-margin-top:96px}
.capability-registry{display:grid;gap:10px;margin-top:16px}
.capability-card{padding:13px;border:1px solid #e4eaf3;border-radius:12px;background:#fbfcfe}
.capability-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.capability-card-head strong{color:#253a58;font-size:10px}
.capability-card-head span{padding:4px 7px;border-radius:999px;color:#476181;background:#eef3fa;font-size:7px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.capability-card p{margin:6px 0 9px;color:#73839a;font-size:8.5px;line-height:1.5}
.capability-scopes{display:flex;flex-wrap:wrap;gap:5px}
.capability-scopes code{padding:4px 6px;border:1px solid #e1e8f2;border-radius:7px;color:#667991;background:#fff;font-size:7px}
.known-scopes{margin-top:13px;border-top:1px solid #edf1f6;padding-top:12px}
.known-scopes summary{color:#53657d;font-size:9px;font-weight:800;cursor:pointer}
.known-scopes .scope-list{margin-top:10px}
.capability-state{min-width:220px;display:grid;gap:7px}
.capability-state-row{display:grid;grid-template-columns:minmax(90px,auto) 1fr;align-items:center;gap:8px}
.capability-state-row strong{color:#304662;font-size:8.5px}
.capability-pill{width:fit-content;padding:4px 7px;border-radius:999px;font-size:7.5px;font-weight:850}
.capability-pill.is-ready{color:#087357;background:#e8f7f1}
.capability-pill.is-missing{color:#9a6300;background:#fff3d9}
.capability-missing{grid-column:1/-1;color:#8795a8;font-size:7px;line-height:1.4;overflow-wrap:anywhere}
.row-action.is-scope{color:#7655dc;border-color:#ddd4fa;background:#faf8ff}
@media(max-width:650px){
  .capability-state{min-width:180px}
}