:root {
    --bs-app-sidebar-width: 250px;
    --antik-primary: #9a6338;
    --antik-primary-dark: #714324;
    --antik-primary-soft: #f5ece4;
    --antik-ink: #211d19;
    --antik-muted: #7b746d;
    --antik-canvas: #f6f4f1;
    --antik-sidebar: #191714;
    --antik-sidebar-soft: #25211d;
    --antik-border: #e9e4de;
    --antik-success: #3b8c6e;
}

html, body { min-height: 100%; }
body { font-family: Inter, sans-serif; color: var(--antik-ink); background: var(--antik-canvas); }
body, .app-main, .app-content { background: var(--antik-canvas) !important; }
.app-container { max-width: 1680px; }

/* Global surfaces */
.card { border: 1px solid rgba(52, 45, 38, .07); border-radius: 18px; box-shadow: 0 7px 28px rgba(42, 34, 27, .045); }
.card .card-header { min-height: 72px; padding-inline: 1.75rem; border-bottom-color: #f0ece8; }
.card .card-title { color: var(--antik-ink); font-size: 1.05rem; font-weight: 700; }
.card .card-body { padding: 1.75rem; }
.btn { border-radius: 10px; font-weight: 650; }
.btn-primary { background: var(--antik-primary) !important; border-color: var(--antik-primary) !important; box-shadow: 0 6px 16px rgba(154, 99, 56, .18); }
.btn-primary:hover, .btn-primary:focus { background: var(--antik-primary-dark) !important; border-color: var(--antik-primary-dark) !important; transform: translateY(-1px); }
.btn-light { background: #f2efeb; color: #564f48; }
.text-primary { color: var(--antik-primary) !important; }
.form-control, .form-select { border-radius: 11px; }
.form-control.form-control-solid, .form-select.form-select-solid { background: #f7f5f2; border: 1px solid transparent; }
.form-control.form-control-solid:focus, .form-select.form-select-solid:focus { background: #fff; border-color: rgba(154, 99, 56, .45); box-shadow: 0 0 0 4px rgba(154, 99, 56, .08); }
.badge { border-radius: 7px; font-weight: 650; letter-spacing: .01em; }
.table > :not(caption) > * > * { padding: 1.05rem .75rem; }
.table thead th { color: #918a83 !important; font-size: .68rem !important; letter-spacing: .07em; }
.table tbody tr { transition: background-color .16s ease; }
.table tbody tr:hover { background: #fcfaf8; }
.alert { border: 0; border-radius: 13px; }

/* Sidebar */
.app-sidebar { width: 250px !important; background: var(--antik-sidebar) !important; border-right: 1px solid rgba(255,255,255,.04); }
.app-sidebar-logo { height: 82px !important; border-bottom: 1px solid rgba(255,255,255,.07); }
.app-sidebar .app-sidebar-menu { padding-top: .5rem; }
.antik-logo { max-height: 43px; max-width: 140px; object-fit: contain; filter: brightness(0) invert(1); }
.sidebar-brand-caption { color: rgba(255,255,255,.38); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.app-sidebar .menu-content { padding-left: 1rem; }
.app-sidebar .menu-section { color: rgba(255,255,255,.3) !important; font-size: .64rem !important; font-weight: 700; letter-spacing: .13em !important; }
.app-sidebar .menu-item { margin-bottom: .2rem; }
.app-sidebar .menu-link { min-height: 46px; padding: .7rem .9rem; border-radius: 11px; color: rgba(255,255,255,.63); transition: all .18s ease; }
.app-sidebar .menu-link .menu-title { color: inherit; font-size: .88rem; }
.app-sidebar .menu-link .menu-icon { color: rgba(255,255,255,.42); }
.app-sidebar .menu-link:hover { color: #fff; background: rgba(255,255,255,.055); }
.app-sidebar .menu-link.active { color: #fff !important; background: linear-gradient(90deg, rgba(154,99,56,.48), rgba(154,99,56,.22)) !important; box-shadow: inset 3px 0 0 #c58b5d; }
.app-sidebar .menu-link.active .menu-title, .app-sidebar .menu-link.active .menu-icon { color: #fff !important; }
.sidebar-support { margin: 1rem; padding: 1rem; color: rgba(255,255,255,.66); background: var(--antik-sidebar-soft); border: 1px solid rgba(255,255,255,.06); border-radius: 13px; }
.sidebar-support strong { color: #fff; font-size: .8rem; }

/* Header & toolbar */
.app-header { background: rgba(246,244,241,.9) !important; border-bottom: 1px solid rgba(52,45,38,.07); backdrop-filter: blur(12px); }
.header-context { color: var(--antik-muted); font-size: .78rem; }
.header-context strong { color: var(--antik-ink); font-size: .84rem; }
.header-health { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; color: #356f59; background: #eaf5ef; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.profile-trigger { display: flex; align-items: center; gap: .75rem; padding: .35rem .5rem .35rem .75rem; border: 1px solid var(--antik-border); background: rgba(255,255,255,.75); border-radius: 12px; }
.profile-trigger:hover { background: #fff; }
.symbol-label.initials { color: var(--antik-primary-dark); background: var(--antik-primary-soft); }
.app-toolbar { padding-top: 1.8rem !important; padding-bottom: 1.25rem !important; }
.toolbar-eyebrow { margin-bottom: .3rem; color: var(--antik-primary); font-size: .67rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.page-heading { font-size: 1.6rem !important; letter-spacing: -.025em; }
.toolbar-subheading { max-width: 680px; color: var(--antik-muted); font-size: .84rem; }
.app-footer { background: transparent !important; }

/* Dashboard */
.welcome-panel { position: relative; overflow: hidden; padding: 2rem 2.2rem; color: #fff; background: linear-gradient(118deg, #25201b 0%, #473224 58%, #7b4e2e 100%); border: 0; border-radius: 20px; box-shadow: 0 16px 36px rgba(54, 39, 28, .17); }
.welcome-panel::before, .welcome-panel::after { position: absolute; content: ''; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; }
.welcome-panel::before { width: 280px; height: 280px; top: -170px; right: -30px; }
.welcome-panel::after { width: 180px; height: 180px; right: 90px; bottom: -135px; }
.welcome-kicker { color: #dfb894; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.welcome-title { max-width: 660px; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -.025em; }
.welcome-copy { max-width: 610px; color: rgba(255,255,255,.68); line-height: 1.7; }
.welcome-date { position: relative; z-index: 1; min-width: 170px; padding: .9rem 1.1rem; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; backdrop-filter: blur(8px); }
.metric-card { position: relative; overflow: hidden; }
.metric-card::after { position: absolute; width: 78px; height: 78px; right: -30px; bottom: -35px; content: ''; background: var(--metric-soft, #f5ece4); border-radius: 50%; }
.metric-icon { display: grid; width: 43px; height: 43px; place-items: center; color: var(--metric-color, var(--antik-primary)); background: var(--metric-soft, var(--antik-primary-soft)); border-radius: 12px; }
.metric-value { color: var(--antik-ink); font-size: 1.85rem; font-weight: 750; line-height: 1.2; letter-spacing: -.04em; }
.metric-label { color: var(--antik-muted); font-size: .77rem; font-weight: 600; }
.metric-note { color: #aaa39d; font-size: .68rem; }
.status-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #f0ece8; }
.status-row:last-child { border-bottom: 0; }
.status-label { color: #615a54; font-size: .82rem; font-weight: 600; }
.status-value { color: var(--antik-ink); font-size: .8rem; font-weight: 750; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; }
.status-dot.up { background: #50b58d; box-shadow: 0 0 0 4px rgba(80,181,141,.12); }
.status-dot.down { background: #e46464; box-shadow: 0 0 0 4px rgba(228,100,100,.12); }
.section-caption { color: var(--antik-muted); font-size: .75rem; }
.request-path { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.method-badge { min-width: 52px; text-align: center; }
.empty-state { padding: 2.5rem 1rem; text-align: center; }
.empty-state-icon { display: grid; width: 52px; height: 52px; margin: 0 auto .8rem; place-items: center; color: var(--antik-primary); background: var(--antik-primary-soft); border-radius: 15px; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }

/* Shopify integration */
.shopify-state { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .78rem; border-radius: 999px; font-size: .72rem; font-weight: 750; }
.shopify-state.is-ready { color: #176c50; background: #e4f3ed; }
.shopify-state.needs-setup { color: #986327; background: #fbf0dc; }
.shopify-state.needs-setup .status-dot.down { background: #d89440; box-shadow: 0 0 0 4px rgba(216,148,64,.13); }
.shopify-hero { position: relative; overflow: hidden; padding: 2rem; color: #fff; background: linear-gradient(120deg, #004c3f 0%, #007a5e 58%, #51a87f 100%); border-radius: 20px; box-shadow: 0 16px 36px rgba(0,76,63,.18); }
.shopify-hero::before, .shopify-hero::after { position: absolute; content: ''; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.shopify-hero::before { width: 320px; height: 320px; top: -210px; right: 8%; }
.shopify-hero::after { width: 190px; height: 190px; right: -65px; bottom: -100px; }
.shopify-hero-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.3rem; }
.shopify-mark { display: grid; flex: 0 0 62px; width: 62px; height: 62px; place-items: center; color: #006e52; background: #fff; border-radius: 17px; box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.shopify-kicker { margin-bottom: .45rem; color: #b8e5d3; font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.shopify-title { color: #fff; font-size: 1.55rem; font-weight: 750; letter-spacing: -.025em; }
.shopify-copy { max-width: 680px; color: rgba(255,255,255,.72); font-size: .8rem; line-height: 1.65; }
.btn-shopify-light { color: #005b48; background: #fff; border-color: #fff; }
.btn-shopify-light:hover { color: #004c3f; background: #eff9f5; border-color: #eff9f5; }
.btn-shopify-solid { color: #fff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
.btn-shopify-solid:hover { color: #fff; background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }
.btn-shopify-light:disabled, .btn-shopify-solid:disabled { color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.config-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f0ece8; }
.config-row:last-child { border-bottom: 0; }
.config-check { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; }
.config-check.is-complete { color: #278060; background: #e8f5ef; }
.config-check.is-missing { color: #c05050; background: #faeaea; }
.config-check.is-optional { color: #8f8880; background: #f1efec; }
.env-key { max-width: 230px; padding: .4rem .55rem; overflow: hidden; color: #5c554f; background: #f5f2ef; border-radius: 7px; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.remaining-list { display: grid; gap: .8rem; }
.remaining-item { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem .9rem; color: #5c554f; background: #faf8f5; border: 1px solid #eee9e3; border-radius: 11px; font-size: .77rem; line-height: 1.55; }
.remaining-item > span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; color: #9a6338; background: #f1e4d8; border-radius: 7px; font-size: .67rem; font-weight: 800; }
.shopify-note { display: flex; align-items: flex-start; padding: .95rem; color: #266650; background: #eaf6f0; border-radius: 11px; font-size: .73rem; line-height: 1.55; }
.shopify-note span { color: #527a6c; }
.webhook-endpoint { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; background: #f7f5f2; border: 1px solid #ece7e1; border-radius: 12px; }
.webhook-endpoint code { display: block; overflow: hidden; color: #3b6255; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.topic-chip { display: inline-flex; align-items: center; padding: .45rem .65rem; color: #24664f; background: #e7f4ee; border-radius: 8px; font-family: monospace; font-size: .7rem; font-weight: 700; }
.setup-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.setup-step { position: relative; display: flex; align-items: flex-start; gap: .8rem; padding-right: 1.2rem; }
.setup-step:not(:last-child)::after { position: absolute; z-index: 0; top: 17px; right: 0; left: 34px; height: 1px; content: ''; background: #e5dfd9; }
.setup-step > span { position: relative; z-index: 1; display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; color: #fff; background: #008060; border: 4px solid #e9f5f0; border-radius: 50%; font-size: .68rem; font-weight: 800; }
.setup-step > div { position: relative; z-index: 1; background: #fff; }

/* Authentication */
.auth-shell { min-height: 100vh; background: #f7f5f2; }
.auth-brand { position: relative; overflow: hidden; width: 56%; min-height: 100vh; padding: clamp(3rem, 7vw, 7rem); color: #fff; background: linear-gradient(142deg, #171513 0%, #30241c 48%, #6f452a 100%); }
.auth-brand::before { position: absolute; width: 620px; height: 620px; right: -300px; top: -270px; content: ''; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.012); }
.auth-brand::after { position: absolute; width: 58%; height: 46%; right: -12%; bottom: -20%; content: ''; background: linear-gradient(135deg, rgba(197,139,93,.2), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.08); border-radius: 44% 44% 0 0; transform: rotate(-12deg); }
.auth-brand-content { position: relative; z-index: 2; max-width: 620px; }
.auth-logo { width: 146px; filter: brightness(0) invert(1); }
.auth-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .48rem .75rem; color: #e6c4a6; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.auth-display { max-width: 600px; margin-top: 2rem; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.35rem, 4.2vw, 4.3rem); line-height: 1.04; letter-spacing: -.035em; }
.auth-lead { max-width: 520px; color: rgba(255,255,255,.62); font-size: 1rem; line-height: 1.8; }
.auth-feature { display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.75); font-size: .8rem; }
.auth-feature-icon { display: grid; width: 32px; height: 32px; place-items: center; color: #e6c4a6; background: rgba(255,255,255,.08); border-radius: 9px; }
.auth-form-side { width: 44%; min-height: 100vh; padding: 2rem; }
.auth-form-wrap { width: 100%; max-width: 430px; }
.auth-mobile-logo { display: none; }
.auth-form-title { color: var(--antik-ink); font-size: 1.75rem; font-weight: 750; letter-spacing: -.035em; }
.auth-form-copy { color: var(--antik-muted); line-height: 1.6; }
.auth-input-wrap { position: relative; }
.auth-input { min-height: 54px; padding-left: 3rem !important; background: #fff !important; border: 1px solid var(--antik-border) !important; }
.auth-input-icon { position: absolute; z-index: 3; top: 50%; left: 1rem; color: #9e958d; transform: translateY(-50%); }
.auth-password-toggle { position: absolute; z-index: 3; top: 50%; right: .75rem; width: 36px; height: 36px; color: #928a83; background: transparent; border: 0; border-radius: 8px; transform: translateY(-50%); }
.auth-password-toggle:hover { color: var(--antik-primary); background: var(--antik-primary-soft); }
.auth-submit { min-height: 52px; font-size: .9rem; }
.auth-security { display: flex; align-items: flex-start; gap: .65rem; padding: .9rem 1rem; color: #766e67; background: #eeebe7; border-radius: 11px; font-size: .72rem; line-height: 1.5; }
.auth-footer { color: #a49c95; font-size: .68rem; }

@media (min-width: 992px) {
    .app-wrapper { margin-left: 250px !important; }
    .app-header { left: 250px !important; }
}

@media (max-width: 991.98px) {
    .app-sidebar { width: 250px !important; }
    .auth-brand { display: none !important; }
    .auth-form-side { width: 100%; padding: 1.5rem; }
    .auth-mobile-logo { display: block; width: 112px; margin-bottom: 3rem; }
    .request-path { max-width: 210px; }
    .welcome-panel { padding: 1.6rem; }
    .welcome-date { display: none; }
    .toolbar-subheading { max-width: 70vw; }
    .shopify-hero-content { align-items: flex-start; flex-wrap: wrap; }
    .setup-steps { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .setup-step:not(:last-child)::after { display: none; }
}

@media (max-width: 575.98px) {
    .app-toolbar .app-container { align-items: flex-start !important; gap: 1rem; }
    .app-toolbar .btn { white-space: nowrap; }
    .page-heading { font-size: 1.35rem !important; }
    .toolbar-subheading { max-width: 100%; }
    .card .card-header, .card .card-body { padding-inline: 1.2rem; }
    .metric-value { font-size: 1.55rem; }
    .welcome-title { font-size: 1.65rem; }
    .auth-form-side { align-items: flex-start !important; padding-top: 2.5rem; }
    .auth-mobile-logo { margin-bottom: 2.3rem; }
    .shopify-hero { padding: 1.35rem; }
    .shopify-mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; }
    .shopify-title { font-size: 1.25rem; }
    .config-row { align-items: flex-start; flex-wrap: wrap; }
    .env-key { width: calc(100% - 50px); max-width: none; margin-left: 50px; }
    .webhook-endpoint { align-items: flex-start; flex-direction: column; }
    .setup-steps { grid-template-columns: 1fr; }
}