:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --ink: #142033;
    --muted: #64748b;
    --line: #dce3ed;
    --primary: #4f46e5;
    --primary-dark: #3730a3;
    --primary-soft: #eef2ff;
    --success: #087f5b;
    --success-soft: #e7f8f1;
    --warning: #a15c00;
    --warning-soft: #fff5dd;
    --danger: #b42318;
    --danger-soft: #fff0ee;
    --sidebar: #111827;
    --sidebar-2: #1f2937;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 12px 35px rgba(15, 23, 42, .08);
    --shadow-sm: 0 4px 16px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.16; letter-spacing: -.025em; }
h1 { font-size: clamp(2.15rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.35rem, 2.5vw, 2rem); }
h3 { font-size: 1.05rem; }
small { color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { background: #eef2f7; border-radius: 6px; padding: .15rem .4rem; overflow-wrap: anywhere; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: .78rem; background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 10px; max-height: 320px; overflow: auto; }
.container { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.center-action { display: flex; justify-content: center; margin-top: 2rem; }
.align-right { text-align: right; display: grid; justify-items: end; gap: .35rem; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.break-link { word-break: break-all; }

.button { appearance: none; border: 1px solid transparent; border-radius: 10px; padding: .72rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; min-height: 44px; }
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid rgba(79, 70, 229, .25); outline-offset: 2px; }
.button-primary { background: var(--primary); color: #fff; }
.button-primary:hover { background: var(--primary-dark); color: #fff; }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button-secondary:hover { color: var(--ink); background: var(--surface-2); }
.button-danger { background: var(--danger-soft); color: var(--danger); border-color: #ffc8c3; }
.button-danger:hover { color: #7f1d1d; }
.button-ghost { background: rgba(255,255,255,.07); color: #e5e7eb; border-color: rgba(255,255,255,.12); }
.button-ghost:hover { color: #fff; background: rgba(255,255,255,.12); }
.button-light { background: #fff; color: var(--primary-dark); }
.button-light:hover { color: var(--primary-dark); }
.button-small { min-height: 36px; padding: .45rem .72rem; font-size: .84rem; }
.button-block { width: 100%; }
.text-link { font-weight: 750; }

.brand { color: var(--ink); display: inline-flex; align-items: center; gap: .68rem; font-weight: 850; font-size: 1.12rem; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand-light { color: #f8fafc; }
.brand-light:hover { color: #fff; }
.brand-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(140deg, #6366f1, #8b5cf6); border-radius: 9px; box-shadow: 0 5px 14px rgba(99,102,241,.3); }
.eyebrow { color: var(--primary); display: block; text-transform: uppercase; font-weight: 850; font-size: .71rem; letter-spacing: .13em; margin-bottom: .3rem; }
.pill { display: inline-flex; align-items: center; width: fit-content; color: var(--primary-dark); background: var(--primary-soft); border: 1px solid #d9ddff; border-radius: 999px; padding: .35rem .65rem; font-size: .77rem; font-weight: 800; }

.public-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(220,227,237,.85); background: rgba(255,255,255,.93); backdrop-filter: blur(14px); }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; }
.public-nav { display: flex; align-items: center; gap: 1.35rem; }
.public-nav > a:not(.button) { color: #39475c; font-weight: 650; font-size: .92rem; }
.nav-toggle, .sidebar-toggle { display: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; padding: .5rem .7rem; font-weight: 750; cursor: pointer; }
.public-footer { background: #0b1220; color: #cbd5e1; padding: 4rem 0 1.2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-grid h3 { color: #fff; font-size: .92rem; }
.footer-grid a:not(.brand) { display: block; color: #b8c3d4; margin: .48rem 0; }
.footer-grid p { max-width: 520px; margin-top: 1rem; }
.footer-bottom { margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.1rem; font-size: .82rem; }

.hero { overflow: hidden; background: radial-gradient(circle at 80% 15%, #ddd6fe 0, transparent 34%), linear-gradient(180deg, #fff 0%, #f7f8ff 100%); padding: 6.5rem 0; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 4rem; align-items: center; }
.hero-copy { display: grid; gap: 1.35rem; }
.hero-copy h1 { margin: 0; max-width: 780px; }
.hero-copy > p { color: #536177; font-size: 1.1rem; max-width: 700px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; color: #536177; font-size: .82rem; font-weight: 650; }
.trust-row span::before { content: "✓"; color: var(--success); margin-right: .35rem; font-weight: 900; }
.hero-panel { background: #111827; border-radius: 24px; padding: 1rem; box-shadow: 0 28px 80px rgba(15, 23, 42, .25); transform: rotate(1deg); }
.preview-top { display: flex; gap: .4rem; padding: .3rem .2rem .9rem; }
.preview-dot { width: 8px; height: 8px; border-radius: 50%; background: #65718a; }
.preview-card { background: #fff; border-radius: 13px; padding: 1rem; display: grid; gap: .25rem; }
.preview-card span, .preview-card small { color: var(--muted); }
.preview-card strong { font-size: 1.12rem; }
.preview-balance { background: linear-gradient(145deg, #eef2ff, #f5f3ff); min-height: 145px; align-content: center; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.preview-grid strong { font-size: 1.6rem; }
.preview-list { background: #fff; border-radius: 13px; margin-top: .8rem; overflow: hidden; }
.preview-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.preview-list > div:last-child { border: 0; }
.preview-list p { margin: 0; display: grid; }
.service-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 900; }
.section { padding: 5.4rem 0; }
.section-muted { background: #eef2f7; }
.section-heading { max-width: 680px; margin-bottom: 2.4rem; }
.section-heading h2 { margin-bottom: .6rem; }
.section-heading p { color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.service-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.35rem; display: flex; flex-direction: column; min-width: 0; }
.service-card h2, .service-card h3 { margin: .25rem 0 .55rem; }
.service-card > p:not(.service-category) { color: var(--muted); flex: 1; }
.service-card-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.service-code { font-family: ui-monospace, monospace; color: #475569; font-size: .75rem; background: #f1f5f9; padding: .25rem .45rem; border-radius: 6px; }
.service-category { color: var(--primary); text-transform: uppercase; font-size: .69rem; letter-spacing: .08em; font-weight: 850; margin: .85rem 0 0; }
.service-meta { display: flex; justify-content: space-between; gap: .7rem; border-top: 1px solid var(--line); padding-top: .9rem; margin: .8rem 0; color: var(--muted); font-size: .8rem; }
.service-details { display: grid; gap: .55rem; margin: .8rem 0 1.1rem; }
.service-details div { display: flex; justify-content: space-between; gap: .7rem; font-size: .82rem; }
.service-details dt { color: var(--muted); }
.service-details dd { margin: 0; text-align: right; font-weight: 700; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-card { padding: 1.4rem; }
.feature-number { color: var(--primary); font-weight: 900; font-size: .8rem; }
.feature-card h3 { margin-top: 1.2rem; }
.feature-card p { color: var(--muted); }
.compliance-section { background: #111827; color: #f8fafc; }
.compliance-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.compliance-grid p { color: #cbd5e1; }
.compliance-card { background: #1f2937; border: 1px solid #344052; border-radius: 18px; padding: 1.7rem; }
.check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.check-list li::before { content: "✓"; color: #6ee7b7; margin-right: .6rem; }
.cta-section { padding: 3.5rem 0; background: #eef2ff; }
.cta-card { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2.2rem; color: #fff; background: linear-gradient(135deg, #4338ca, #7c3aed); border-radius: 22px; box-shadow: var(--shadow); }
.cta-card h2 { margin: 0; }
.cta-card .eyebrow { color: #ddd6fe; }
.policy-section { min-height: 64vh; }
.policy-card { max-width: 820px; padding: 2rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.policy-card p { color: #475569; font-size: 1.03rem; }

.auth-section { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 4rem 1rem; background: radial-gradient(circle at 20% 15%, #ddd6fe 0, transparent 28%), #f8fafc; }
.auth-section-wide { align-items: start; }
.auth-card { width: min(100%, 460px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 2rem; }
.auth-card-wide { width: min(100%, 780px); }
.auth-brand { margin-bottom: 1.5rem; }
.auth-card h1 { font-size: 2rem; margin: 1rem 0 .5rem; }
.auth-card > p { color: var(--muted); }
.auth-foot { text-align: center; margin: 1.25rem 0 0; }
.error-card { text-align: center; }
.error-code { display: block; font-size: 4rem; font-weight: 900; color: var(--primary); }

.dashboard-body { background: var(--bg); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 255px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--sidebar); color: #cbd5e1; padding: 1.25rem; display: flex; flex-direction: column; z-index: 40; overflow-y: auto; }
.admin-sidebar { background: #0b1220; }
.sidebar-brand { padding: .2rem .3rem 1.2rem; }
.sidebar-nav { display: grid; gap: .22rem; margin-top: .4rem; }
.sidebar-nav a { color: #b9c4d5; padding: .67rem .78rem; border-radius: 9px; font-weight: 650; font-size: .88rem; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; background: rgba(99,102,241,.22); }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; display: grid; gap: .8rem; }
.user-mini { display: grid; }
.user-mini strong { color: #fff; }
.user-mini span { font-size: .78rem; color: #94a3b8; }
.app-main { min-width: 0; }
.topbar { min-height: 82px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); padding: .85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 25; backdrop-filter: blur(12px); }
.topbar h1 { margin: 0; font-size: 1.3rem; }
.topbar .eyebrow { margin: 0; }
.balance-chip { display: grid; text-align: right; background: var(--primary-soft); border: 1px solid #d9ddff; padding: .48rem .7rem; border-radius: 10px; }
.balance-chip span { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.balance-chip strong { color: var(--primary-dark); font-size: .92rem; }
.content-area { padding: 1.5rem; max-width: 1600px; margin: 0 auto; }

.alert { margin: 1rem 1.5rem 0; border-radius: 10px; padding: .85rem 1rem; border: 1px solid; font-weight: 650; }
.guest-body > .alert { margin: 1rem auto 0; }
.alert-success { color: #076447; background: var(--success-soft); border-color: #a9e7d2; }
.alert-danger { color: #8d1d14; background: var(--danger-soft); border-color: #ffc8c3; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem; margin-bottom: 1rem; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.panel-head h2 { font-size: 1.15rem; margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.admin-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem; box-shadow: var(--shadow-sm); display: grid; gap: .25rem; min-width: 0; }
.stat-card span { color: var(--muted); font-size: .78rem; font-weight: 650; }
.stat-card strong { font-size: 1.55rem; letter-spacing: -.04em; overflow-wrap: anywhere; }
.stat-card small { font-size: .72rem; }
.stat-card-highlight { color: #fff; background: linear-gradient(135deg, #4338ca, #7c3aed); border-color: transparent; }
.stat-card-highlight span, .stat-card-highlight small { color: #e0e7ff; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.admin-actions { grid-template-columns: repeat(4, 1fr); }
.quick-action { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 1rem; display: flex; gap: .85rem; align-items: center; }
.quick-action:hover { color: var(--ink); border-color: #c7c9ff; transform: translateY(-1px); }
.quick-action > span { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.quick-action div { display: grid; }
.quick-action small { font-size: .75rem; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 1rem; }
.form-layout, .detail-layout { align-items: start; }
.settings-layout { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); }
.detail-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.detail-header h2 { margin: 0 0 .25rem; }
.detail-header p { margin: 0; color: var(--muted); }
.detail-header > div:last-child { display: grid; justify-items: end; gap: .55rem; text-align: right; }
.detail-price { font-size: 1.4rem; }
.detail-list { margin: 0; display: grid; }
.detail-list div { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .7rem 0; }
.detail-list div:first-child { padding-top: 0; }
.detail-list div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.detail-list.compact { font-size: .85rem; }
.detail-block { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.detail-block h3 { margin-bottom: .45rem; }

.badge { display: inline-flex; align-items: center; width: fit-content; white-space: nowrap; border-radius: 999px; padding: .24rem .52rem; font-size: .68rem; font-weight: 850; letter-spacing: .015em; }
.badge-success { color: var(--success); background: var(--success-soft); }
.badge-warning { color: var(--warning); background: var(--warning-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); }
.badge-neutral { color: #475569; background: #eef2f7; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 660px; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: .78rem .65rem; vertical-align: middle; }
th { color: var(--muted); font-size: .7rem; letter-spacing: .055em; text-transform: uppercase; font-weight: 850; }
td { font-size: .84rem; }
td small { display: block; margin-top: .18rem; }
tbody tr:hover { background: #fafbfe; }
tbody tr:last-child td { border-bottom: 0; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: .82rem; }
.pagination a { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: .45rem .7rem; font-weight: 700; }

.form-stack { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.compact-grid { gap: .8rem; }
.form-span { grid-column: 1 / -1; }
label { display: grid; gap: .38rem; color: #334155; font-size: .8rem; font-weight: 750; }
label > span { color: #475569; }
input, select, textarea { width: 100%; color: var(--ink); background: #fff; border: 1px solid #cfd8e5; border-radius: 9px; padding: .68rem .75rem; min-height: 43px; }
textarea { resize: vertical; }
input[readonly] { background: #f1f5f9; color: #475569; }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--primary); }
label small { font-weight: 500; }
.field-error { color: var(--danger); font-size: .75rem; font-weight: 650; }
.checkbox-row { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; }
.checkbox-row span { color: #475569; }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: .85rem; }
.form-actions { display: flex; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; }
.inline-form { display: flex; align-items: end; gap: .7rem; }
.inline-form label { flex: 1; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }
.filter-panel { padding: .9rem; }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, .32fr)) auto auto; align-items: end; gap: .7rem; }
.filter-bar-small { grid-template-columns: minmax(220px, .5fr) auto auto; justify-content: start; }
.search-field { min-width: 220px; }
.order-summary { position: sticky; top: 98px; }
.number-list { margin: 1rem 0; padding-left: 1.3rem; display: grid; gap: .8rem; color: #475569; }
.security-note, .bank-details { margin-top: 1rem; border: 1px solid #d9ddff; background: var(--primary-soft); border-radius: 10px; padding: .9rem; }
.security-note strong, .bank-details h3 { color: var(--primary-dark); }
.security-note p, .bank-details p { margin: .35rem 0 0; color: #4b5563; }
.notice-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid #c8e7dc; background: var(--success-soft); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; }
.notice-card p { margin: .25rem 0 0; color: #39685a; }
.notice-warning { border-color: #f3d99e; background: var(--warning-soft); }
.notice-warning p { color: #76531e; }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty-state h2, .empty-state h3 { color: var(--ink); }

.transaction-list, .stack-list { display: grid; }
.transaction-item, .stack-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.transaction-item:last-child, .stack-item:last-child { border-bottom: 0; }
.transaction-item > div, .stack-item > div { display: grid; min-width: 0; }
.transaction-item small, .stack-item small { overflow-wrap: anywhere; }
.transaction-amount { text-align: right; font-weight: 800; }
.transaction-amount small { display: block; font-weight: 400; }
.positive { color: var(--success); }
.negative { color: var(--danger); }
.stack-note { grid-column: 1 / -1; margin: 0; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: .65rem; }
.stack-link { color: var(--ink); border-radius: 8px; padding-inline: .45rem; }
.stack-link:hover { color: var(--ink); background: var(--surface-2); }

.progress { height: 7px; width: 100%; min-width: 80px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.progress-large { height: 11px; }
.progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: inherit; transition: width .3s ease; }
.progress-label { color: var(--muted); text-align: right; font-size: .78rem; }

.timeline { position: relative; display: grid; gap: 1rem; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; background: #dfe4ed; }
.timeline-item { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: .8rem; }
.timeline-dot { width: 16px; height: 16px; z-index: 1; border-radius: 50%; border: 4px solid #c7d2fe; background: var(--primary); }
.timeline-item p { margin: .25rem 0; color: #475569; }
.timeline-item small { display: block; margin-bottom: .45rem; }

.message-list { display: grid; gap: .8rem; }
.message { border-radius: 12px; padding: 1rem; background: #f1f5f9; border: 1px solid var(--line); }
.message-support { background: var(--primary-soft); border-color: #d9ddff; }
.message-internal { background: var(--warning-soft); border-color: #f3d99e; }
.message-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; }
.message-head span { color: var(--muted); }
.message p { margin: .6rem 0 0; }
.reply-form { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }

.secret-box { border: 1px solid #a9e7d2; background: var(--success-soft); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; display: grid; gap: .65rem; }
.secret-box code { display: block; background: #fff; border: 1px solid #c8e7dc; padding: .8rem; word-break: break-all; }
.secret-box p { margin: 0; color: #39685a; }
.api-list { display: grid; }
.api-list div { display: grid; grid-template-columns: minmax(220px, .45fr) 1fr; gap: 1rem; border-bottom: 1px solid var(--line); padding: .75rem 0; align-items: center; }
.api-list div:last-child { border: 0; }

.edit-disclosure, .audit-entry { border-bottom: 1px solid var(--line); }
.edit-disclosure:last-child, .audit-entry:last-child { border: 0; }
.edit-disclosure summary, .audit-entry summary { list-style: none; cursor: pointer; padding: .85rem .2rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.edit-disclosure summary::-webkit-details-marker, .audit-entry summary::-webkit-details-marker { display: none; }
.edit-disclosure summary > span:first-child, .audit-entry summary > div { display: grid; }
.disclosure-form { padding: 1rem; margin-bottom: 1rem; background: var(--surface-2); border-radius: 10px; }
.payment-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.payment-card { border: 1px solid var(--line); border-radius: 13px; padding: 1rem; min-width: 0; }
.payment-card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.payment-card-head h2 { margin: 0; }
.review-form { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.health-list { display: grid; }
.health-list > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); padding: .7rem 0; }
.health-list > div:last-child { border: 0; }
.audit-entry summary > div:last-child { justify-items: end; font-size: .75rem; color: var(--muted); }
.audit-details { background: var(--surface-2); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.audit-details h3 { font-size: .8rem; }

@media (max-width: 1180px) {
    .stats-grid, .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-actions { grid-template-columns: repeat(2, 1fr); }
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-bar { grid-template-columns: minmax(220px, 1fr) minmax(130px, .45fr) minmax(130px, .45fr); }
    .filter-bar .button { align-self: end; }
}

@media (max-width: 900px) {
    .hero-grid, .compliance-grid { grid-template-columns: 1fr; }
    .hero-panel { max-width: 620px; margin-inline: auto; }
    .feature-grid { grid-template-columns: 1fr; }
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(290px, 86vw); box-shadow: 15px 0 50px rgba(0,0,0,.25); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    .sidebar-toggle { display: inline-flex; }
    .two-column, .settings-layout { grid-template-columns: 1fr; }
    .order-summary { position: static; }
    .payment-review-grid { grid-template-columns: 1fr; }
    .dashboard-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .container { width: min(100% - 1.2rem, 1180px); }
    .public-header { position: relative; }
    .header-inner { min-height: 62px; position: relative; }
    .nav-toggle { display: inline-flex; }
    .public-nav { display: none; position: absolute; top: 58px; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .8rem; box-shadow: var(--shadow); align-items: stretch; flex-direction: column; gap: .25rem; }
    .public-nav.open { display: flex; }
    .public-nav a { padding: .6rem; }
    .hero { padding: 4rem 0; }
    .hero-grid { gap: 2.4rem; }
    .hero-panel { transform: none; }
    .section { padding: 3.7rem 0; }
    .service-grid, .dashboard-service-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .cta-card { flex-direction: column; align-items: flex-start; }
    .content-area { padding: .8rem; }
    .topbar { padding: .7rem .8rem; min-height: 70px; }
    .topbar h1 { font-size: 1.05rem; }
    .topbar .eyebrow { display: none; }
    .balance-chip { font-size: .72rem; }
    .alert { margin: .8rem .8rem 0; }
    .stats-grid, .admin-stats, .quick-actions, .admin-actions { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .stat-card { padding: .9rem; }
    .stat-card strong { font-size: 1.28rem; }
    .quick-action { padding: .75rem; }
    .quick-action small { display: none; }
    .form-grid, .checkbox-grid { grid-template-columns: 1fr; }
    .form-span { grid-column: auto; }
    .filter-bar, .filter-bar-small { grid-template-columns: 1fr; }
    .filter-bar .button { width: 100%; }
    .detail-header { align-items: flex-start; }
    .detail-header > div:last-child { justify-items: start; text-align: left; }
    .panel { padding: 1rem; }
    .message-head { flex-direction: column; gap: .1rem; }
    .api-list div { grid-template-columns: 1fr; gap: .3rem; }
    .audit-details { grid-template-columns: 1fr; }
    .inline-form { flex-direction: column; align-items: stretch; }
}

@media (max-width: 460px) {
    .stats-grid, .admin-stats, .quick-actions, .admin-actions { grid-template-columns: 1fr; }
    .hero-actions .button { width: 100%; }
    .preview-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 1.3rem; }
    .detail-header { flex-direction: column; }
    .notice-card { align-items: flex-start; flex-direction: column; }
}
.progress-fill.progress-value-0{width:0%}
.progress-fill.progress-value-1{width:1%}
.progress-fill.progress-value-2{width:2%}
.progress-fill.progress-value-3{width:3%}
.progress-fill.progress-value-4{width:4%}
.progress-fill.progress-value-5{width:5%}
.progress-fill.progress-value-6{width:6%}
.progress-fill.progress-value-7{width:7%}
.progress-fill.progress-value-8{width:8%}
.progress-fill.progress-value-9{width:9%}
.progress-fill.progress-value-10{width:10%}
.progress-fill.progress-value-11{width:11%}
.progress-fill.progress-value-12{width:12%}
.progress-fill.progress-value-13{width:13%}
.progress-fill.progress-value-14{width:14%}
.progress-fill.progress-value-15{width:15%}
.progress-fill.progress-value-16{width:16%}
.progress-fill.progress-value-17{width:17%}
.progress-fill.progress-value-18{width:18%}
.progress-fill.progress-value-19{width:19%}
.progress-fill.progress-value-20{width:20%}
.progress-fill.progress-value-21{width:21%}
.progress-fill.progress-value-22{width:22%}
.progress-fill.progress-value-23{width:23%}
.progress-fill.progress-value-24{width:24%}
.progress-fill.progress-value-25{width:25%}
.progress-fill.progress-value-26{width:26%}
.progress-fill.progress-value-27{width:27%}
.progress-fill.progress-value-28{width:28%}
.progress-fill.progress-value-29{width:29%}
.progress-fill.progress-value-30{width:30%}
.progress-fill.progress-value-31{width:31%}
.progress-fill.progress-value-32{width:32%}
.progress-fill.progress-value-33{width:33%}
.progress-fill.progress-value-34{width:34%}
.progress-fill.progress-value-35{width:35%}
.progress-fill.progress-value-36{width:36%}
.progress-fill.progress-value-37{width:37%}
.progress-fill.progress-value-38{width:38%}
.progress-fill.progress-value-39{width:39%}
.progress-fill.progress-value-40{width:40%}
.progress-fill.progress-value-41{width:41%}
.progress-fill.progress-value-42{width:42%}
.progress-fill.progress-value-43{width:43%}
.progress-fill.progress-value-44{width:44%}
.progress-fill.progress-value-45{width:45%}
.progress-fill.progress-value-46{width:46%}
.progress-fill.progress-value-47{width:47%}
.progress-fill.progress-value-48{width:48%}
.progress-fill.progress-value-49{width:49%}
.progress-fill.progress-value-50{width:50%}
.progress-fill.progress-value-51{width:51%}
.progress-fill.progress-value-52{width:52%}
.progress-fill.progress-value-53{width:53%}
.progress-fill.progress-value-54{width:54%}
.progress-fill.progress-value-55{width:55%}
.progress-fill.progress-value-56{width:56%}
.progress-fill.progress-value-57{width:57%}
.progress-fill.progress-value-58{width:58%}
.progress-fill.progress-value-59{width:59%}
.progress-fill.progress-value-60{width:60%}
.progress-fill.progress-value-61{width:61%}
.progress-fill.progress-value-62{width:62%}
.progress-fill.progress-value-63{width:63%}
.progress-fill.progress-value-64{width:64%}
.progress-fill.progress-value-65{width:65%}
.progress-fill.progress-value-66{width:66%}
.progress-fill.progress-value-67{width:67%}
.progress-fill.progress-value-68{width:68%}
.progress-fill.progress-value-69{width:69%}
.progress-fill.progress-value-70{width:70%}
.progress-fill.progress-value-71{width:71%}
.progress-fill.progress-value-72{width:72%}
.progress-fill.progress-value-73{width:73%}
.progress-fill.progress-value-74{width:74%}
.progress-fill.progress-value-75{width:75%}
.progress-fill.progress-value-76{width:76%}
.progress-fill.progress-value-77{width:77%}
.progress-fill.progress-value-78{width:78%}
.progress-fill.progress-value-79{width:79%}
.progress-fill.progress-value-80{width:80%}
.progress-fill.progress-value-81{width:81%}
.progress-fill.progress-value-82{width:82%}
.progress-fill.progress-value-83{width:83%}
.progress-fill.progress-value-84{width:84%}
.progress-fill.progress-value-85{width:85%}
.progress-fill.progress-value-86{width:86%}
.progress-fill.progress-value-87{width:87%}
.progress-fill.progress-value-88{width:88%}
.progress-fill.progress-value-89{width:89%}
.progress-fill.progress-value-90{width:90%}
.progress-fill.progress-value-91{width:91%}
.progress-fill.progress-value-92{width:92%}
.progress-fill.progress-value-93{width:93%}
.progress-fill.progress-value-94{width:94%}
.progress-fill.progress-value-95{width:95%}
.progress-fill.progress-value-96{width:96%}
.progress-fill.progress-value-97{width:97%}
.progress-fill.progress-value-98{width:98%}
.progress-fill.progress-value-99{width:99%}
.progress-fill.progress-value-100{width:100%}