:root {
  color-scheme: light;
  --ink: #172b24;
  --muted: #718078;
  --line: #e2eae5;
  --surface: #ffffff;
  --canvas: #f4f7f5;
  --green: #147a50;
  --green-dark: #0f6240;
  --green-soft: #e9f5ed;
  --red: #bd3d42;
  --red-soft: #fff0ef;
  --amber: #98620c;
  --amber-soft: #fff5dc;
  --blue: #336c9e;
  --blue-soft: #edf5fc;
  --radius: 18px;
  --shadow: 0 12px 35px #1e38250b;
}
* { box-sizing: border-box }
html { min-width: 320px; background: var(--canvas) }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.55 Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased }
button,input,select,textarea { font: inherit }
button { cursor: pointer }
h1,h2,h3,h4,strong { font-family: Inter, "Segoe UI", Arial, sans-serif }
h1,h2,h3,p { margin-top: 0 }
.hidden { display: none !important }
.app-shell { min-height: 100vh }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 270px; padding: 24px 17px 16px; background: var(--surface); border-right: 1px solid var(--line) }
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; color: var(--ink); font-size: 16px; font-weight: 750; letter-spacing: -.35px; text-decoration: none; overflow-wrap: anywhere }
.brand-mark { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 14px; background: linear-gradient(145deg,#168456,#0c6542); color: #fff; font-size: 21px; font-weight: 800; box-shadow: 0 7px 16px #11794a32 }
.brand-mark.large { width: 54px; height: 54px; flex-basis: 54px; border-radius: 18px; font-size: 27px }
.workspace { display: flex; align-items: center; gap: 11px; margin: 25px 2px 26px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--canvas) }
.workspace-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800 }
.workspace strong,.workspace small,.profile-name strong,.profile-name small { display: block }
.workspace strong { font-size: 13px; line-height: 1.3 }
.workspace small,.profile-name small { margin-top: 3px; color: var(--muted); font-size: 11px }
.chevron { margin-left: auto; color: var(--muted) }
.nav { flex: 1; overflow-y: auto }
.nav-label { margin: 0 10px 9px; color: #89968f; font-size: 10px; font-weight: 800; letter-spacing: .1em }
.admin-label { margin-top: 25px }
.nav-item { display: flex; width: 100%; align-items: center; gap: 12px; margin: 3px 0; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; color: #56655d; text-align: left; font-size: 14px; font-weight: 550; transition: background .16s, color .16s, transform .16s }
.nav-item:hover { background: var(--canvas); color: var(--ink); transform: translateX(2px) }
.nav-item.active { background: var(--green-soft); color: var(--green-dark); font-weight: 750 }
.nav-icon { display: grid; width: 23px; place-items: center; font-size: 17px }
.sidebar-bottom { margin-top: auto }
.help-card { position: relative; overflow: hidden; margin: 14px 0 17px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,#f5faf6,#fff) }
.help-card:after { position: absolute; top: -45px; right: -35px; width: 100px; height: 100px; border-radius: 50%; background: #e5f4e966; content: "" }
.help-spark { color: var(--green); font-size: 21px }
.help-card strong { position: relative; z-index: 1; display: block; margin: 7px 0; font-size: 13px }
.help-card p { position: relative; z-index: 1; margin: 0 0 10px; color: var(--muted); font-size: 11px }
.profile { display: flex; align-items: center; gap: 10px; padding: 15px 4px 3px; border-top: 1px solid var(--line) }
.avatar { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 14px; font-weight: 800 }
.profile-name { flex: 1; min-width: 0 }
.profile-name strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap }
.icon-button { display: inline-grid; min-width: 40px; min-height: 40px; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 19px }
.icon-button:hover { background: var(--canvas); color: var(--ink) }
.main-area { display: flex; min-height: 100vh; flex-direction: column; margin-left: 270px; padding: 0 clamp(20px,4vw,58px) }
.topbar { display: flex; min-height: 91px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line) }
.topbar>div:first-child { min-width: 0 }
.breadcrumb { margin: 0 0 4px; color: #85928a; font-size: 10px; font-weight: 800; letter-spacing: .09em }
.breadcrumb span { margin: 0 7px; color: #b1bbb5 }
.breadcrumb strong { color: var(--green-dark) }
.topbar h2 { margin: 0; font-size: 21px; font-weight: 750; letter-spacing: -.5px }
.top-actions { display: flex; align-items: center; gap: 9px }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-size: 11px; font-weight: 700; white-space: nowrap }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.status-pill.online { background: var(--green-soft); color: var(--green) }
.notification { font-size: 18px }
.content { width: 100%; max-width: 1320px; flex: 1; margin: 0 auto; padding: 30px 0 38px }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px }
.page-heading h3 { margin: 0 0 6px; font-size: clamp(22px,2.4vw,30px); font-weight: 760; letter-spacing: -.8px; line-height: 1.2 }
.page-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5 }
.page-heading>div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 13px }
.section-row h3 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.2px }
.text-link { border: 0; background: none; color: var(--green); font-size: 13px; font-weight: 750 }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform .16s, box-shadow .16s, background .16s }
.button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px #172b2410 }
.button.primary { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 5px 12px #147a5022 }
.button.primary:hover { border-color: var(--green-dark); background: var(--green-dark) }
.button.subtle { background: transparent }
.button.danger { border-color: #f2ceca; background: var(--red-soft); color: var(--red) }
.button.full { width: 100%; margin-top: 7px }
.button.small { min-height: 41px; padding: 9px 14px }
.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px }
.metric-card,.panel-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow) }
.metric-card { min-width: 0; padding: 19px 20px }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 650 }
.metric-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-size: 17px }
.metric-icon.red { background: var(--red-soft); color: var(--red) }
.metric-icon.gold { background: var(--amber-soft); color: var(--amber) }
.metric-value { overflow-wrap: anywhere; margin: 15px 0 5px; font-size: clamp(22px,2.2vw,30px); font-weight: 800; letter-spacing: -1px; line-height: 1.1 }
.metric-foot { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45 }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,1fr); gap: 16px }
.panel-card { min-width: 0; padding: 21px }
.panel-card h3,.panel-head h3 { margin: 0 0 5px; font-size: 16px; font-weight: 750; letter-spacing: -.2px }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px }
.panel-head p { margin: 0; color: var(--muted); font-size: 12px }
.chart-box { position: relative; height: 230px }
.chart-box canvas { width: 100%; height: 100% }
.activity-list { display: grid }
.activity { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line) }
.activity:last-child { border: 0 }
.activity-badge { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 800 }
.activity-main { flex: 1; min-width: 0 }
.activity-main strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap }
.activity-main small { color: var(--muted); font-size: 11px }
.activity-amount { color: var(--green); font-size: 12px; font-weight: 800; white-space: nowrap }
.table-card { overflow: hidden; padding: 0 }
.table-toolbar { display: flex; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--line) }
.search,.select { min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 13px }
.search { min-width: min(250px,100%); outline: none }
.search:focus,input:focus,textarea:focus,select:focus { border-color: #82b89a; box-shadow: 0 0 0 3px #147a5015; outline: none }
.spacer { flex: 1 }
.table-scroll { max-width: 100%; overflow: auto; overscroll-behavior-x: contain }
table { width: 100%; border-collapse: collapse; white-space: nowrap }
th { padding: 13px 15px; background: #f8faf8; color: #718078; text-align: left; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .06em }
td { padding: 13px 15px; border-top: 1px solid var(--line); color: #43534a; font-size: 13px; vertical-align: middle }
td strong { color: var(--ink); font-size: 13px }
.person-cell { display: flex; align-items: center; gap: 10px }
.person-avatar { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800 }
.subcell { display: block; margin-top: 3px; color: var(--muted); font-size: 11px }
.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: #eef1ef; color: #56645c; font-size: 11px; font-weight: 750 }
.badge.success { background: var(--green-soft); color: var(--green-dark) }
.badge.warning { background: var(--amber-soft); color: var(--amber) }
.badge.danger { background: var(--red-soft); color: var(--red) }
.row-actions { min-height: 34px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--green); font-size: 12px; font-weight: 700 }
.row-actions:hover { background: var(--green-soft) }
.filters { display: flex; flex-wrap: wrap; gap: 9px }
.empty { display: grid; min-height: 150px; align-content: center; justify-items: center; padding: 28px 15px; color: var(--muted); text-align: center; font-size: 13px }
.empty strong { margin: 6px; color: var(--ink); font-size: 15px }
.callout { margin: 14px 0; padding: 13px 15px; border: 1px solid #dcebe0; border-left: 4px solid var(--green); border-radius: 12px; background: #f1f8f3; color: #4e6256; font-size: 13px; line-height: 1.55 }
.overdue-panel { border-color: #f0d1ce; box-shadow: 0 8px 25px #bd3d420d }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px }
.form-grid .wide { grid-column: 1/-1 }
.field { min-width: 0 }
.field label,.stack label,.field-label { display: block; margin-bottom: 7px; color: #4e5f55; font-size: 12px; font-weight: 750 }
.field input,.field select,.field textarea,.stack input,.stack select,.stack textarea { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 14px }
.field textarea { min-height: 105px; resize: vertical }
.field small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px }
.field input[type=file] { padding: 9px }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: #4e5f55; font-size: 13px }
.check-row input,.toggle { accent-color: var(--green) }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 19px }
.form-error { min-height: 14px; margin: 0; color: var(--red); font-size: 12px }
.stack { display: grid; gap: 15px }
.modal { width: min(560px,calc(100% - 28px)); max-height: min(90dvh,900px); overflow: auto; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 25px 90px #0c211a35 }
.modal::backdrop { background: #1020197a; backdrop-filter: blur(4px) }
.modal-body { padding: 25px }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 22px }
.modal-header h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.4px }
.modal-header p { margin: 0; color: var(--muted); font-size: 13px }
.modal-close { width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--canvas); color: var(--muted); font-size: 22px }
.permission-list { display: grid; gap: 10px; margin: 11px 0 }
.perm-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 13px }
.perm-item input { margin-top: 4px }
.perm-item span strong { display: block; font-size: 13px }
.perm-item span small { color: var(--muted); font-size: 12px }
.tab-row { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 17px; border-bottom: 1px solid var(--line) }
.tab-button { padding: 11px 13px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 13px; white-space: nowrap }
.tab-button.active { border-color: var(--green); color: var(--green); font-weight: 800 }
.toast { position: fixed; z-index: 30; top: 18px; right: 22px; max-width: min(430px,calc(100vw - 32px)); padding: 13px 17px; border-radius: 13px; background: #18372a; color: #fff; box-shadow: 0 10px 30px #0d211a30; font-size: 13px }
.toast.error { background: #9d3035 }
.app-footer { padding: 17px 0; border-top: 1px solid var(--line); color: #89968e; text-align: center; font-size: 11px }
.auth-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(ellipse at 12% 12%,#e7f5ec 0,transparent 36%),radial-gradient(ellipse at 90% 82%,#e4efe8 0,transparent 35%),var(--canvas) }
.auth-card { width: min(450px,100%); padding: 35px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 22px 70px #17392712 }
.auth-card h1 { margin: 7px 0 8px; font-size: 27px; letter-spacing: -.7px }
.auth-card .muted { margin-bottom: 24px; color: var(--muted); font-size: 14px }
.auth-card small { color: var(--muted); font-size: 12px }
.eyebrow { margin: 19px 0 0; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .13em }
.auth-foot { position: absolute; bottom: 20px; color: var(--muted); text-align: center; font-size: 12px }
.mobile-menu { display: none }
.receipt-logo-preview { display: block !important; width: 180px !important; height: 90px !important; max-width: 100% !important; max-height: 90px !important; object-fit: contain !important; flex: none !important }
body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ecf5ef;
  --muted: #a2b2a8;
  --line: #2b4034;
  --surface: #18271f;
  --canvas: #101a15;
  --green: #5bc58f;
  --green-dark: #79d6a5;
  --green-soft: #203a2b;
  --red: #ff8983;
  --red-soft: #412827;
  --amber: #f0c05b;
  --amber-soft: #3d331f;
  --blue: #88bce8;
  --blue-soft: #1c3040;
  --shadow: 0 12px 35px #0000001a;
}
body[data-theme="dark"] .help-card { background: linear-gradient(145deg,#1c3025,#18271f) }
body[data-theme="dark"] th { background: #1b2c23; color: #a1b1a7 }
body[data-theme="dark"] td { color: #c2d0c7 }
body[data-theme="dark"] td strong { color: var(--ink) }
body[data-theme="dark"] .field label,body[data-theme="dark"] .check-row { color: #d0ded5 }
body[data-theme="dark"] .callout { border-color: #2c503b; background: #1c3025; color: #c5d9cb }
body[data-theme="dark"] .auth-screen { background: radial-gradient(ellipse at 12% 12%,#1b3828 0,transparent 36%),radial-gradient(ellipse at 90% 82%,#1b3025 0,transparent 35%),var(--canvas) }
body[data-theme="dark"] .nav-item { color: #bbcbc1 }
body[data-theme="dark"] .activity { border-color: var(--line) }
body[data-theme="dark"] .row-actions:hover { background: var(--green-soft) }
body[data-theme="dark"] .button:not(.primary):not(.danger) { background: #1c2d24; color: var(--ink); border-color: var(--line) }
@media (max-width: 1120px) {
  .sidebar { width: 238px }
  .main-area { margin-left: 238px; padding-inline: 25px }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)) }
  .dashboard-grid { grid-template-columns: minmax(0,1fr) }
}
@media (max-width: 760px) {
  .sidebar { width: 0; overflow: hidden; padding: 0; border: 0; transition: width .2s ease,padding .2s ease }
  .sidebar.open { width: min(310px,86vw); padding: 19px 15px; border-right: 1px solid var(--line); box-shadow: 12px 0 36px #10271a24 }
  .main-area { margin: 0; padding: 0 17px }
  .topbar { min-height: 76px; gap: 9px }
  .topbar>div:first-child { display: flex; align-items: center; min-width: 0 }
  .mobile-menu { display: inline-grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; margin-right: 5px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-size: 21px }
  .breadcrumb { overflow: hidden; max-width: 56vw; font-size: 9px; text-overflow: ellipsis; white-space: nowrap }
  .topbar h2 { font-size: 18px }
  .top-actions { gap: 3px }
  .top-actions .status-pill { display: none }
  .top-actions #quickAdd { min-width: 40px; padding: 8px 10px; font-size: 12px }
  .top-actions #quickAddLabel { display: none }
  .content { padding: 22px 0 27px }
  .page-heading { flex-wrap: wrap; align-items: center; margin-bottom: 18px }
  .page-heading h3 { font-size: 24px }
  .page-heading p { font-size: 13px }
  .page-heading>div:last-child { justify-content: flex-start; width: 100% }
  .page-heading .button { min-height: 42px }
  .metrics { gap: 10px }
  .metric-card { padding: 15px }
  .metric-top { font-size: 11px }
  .metric-icon { flex-basis: 31px; width: 31px; height: 31px }
  .metric-value { margin-top: 12px; font-size: clamp(19px,6vw,25px) }
  .metric-foot { font-size: 11px }
  .section-row { align-items: flex-start; flex-wrap: wrap; margin-top: 23px }
  .section-row h3 { font-size: 15px }
  .panel-card { padding: 16px }
  .table-card { padding: 0 }
  .table-toolbar { flex-wrap: wrap; padding: 12px }
  .table-toolbar .search { flex: 1 1 100%; min-width: 0 }
  .table-toolbar .select { flex: 1 1 140px }
  .table-scroll { margin-inline: 0 }
  table { min-width: 750px }
  th { padding: 12px; font-size: 10px }
  td { padding: 12px; font-size: 12px }
  .form-grid { grid-template-columns: minmax(0,1fr); gap: 13px }
  .form-grid .wide { grid-column: auto }
  .field input,.field select,.field textarea,.stack input,.stack select,.stack textarea { min-height: 46px; font-size: 16px }
  .modal { width: min(560px,calc(100% - 18px)); max-height: 92dvh; border-radius: 19px }
  .modal-body { padding: 19px }
  .form-actions { position: sticky; bottom: -19px; margin-inline: -19px; padding: 12px 19px 2px; background: var(--surface) }
  .button { min-height: 42px }
  .filters { width: 100% }
  .filters>* { flex: 1 1 130px; min-width: 0 }
  .chart-box { height: 205px }
  .toast { top: 10px; right: 10px; left: 10px; max-width: none }
  .auth-card { padding: 25px 21px }
}
@media (max-width: 390px) {
  .main-area { padding-inline: 12px }
  .metrics { grid-template-columns: minmax(0,1fr) }
  .metric-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px }
  .metric-top { grid-column: 1/-1 }
  .metric-value { margin: 5px 0; font-size: 24px }
  .metric-foot { grid-column: 1/-1 }
  .panel-card { padding: 13px }
  .table-card { padding: 0 }
  .topbar h2 { font-size: 16px }
  .breadcrumb { max-width: 52vw; font-size: 8px }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}
.danger-zone { border-color: #efc9c6; box-shadow: 0 12px 32px #bd3d420c }
.danger-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px }
.danger-heading h3 { margin: 5px 0; color: var(--red); font-size: 19px }
.danger-heading p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13px }
.danger-kicker { color: var(--red); font-size: 10px; font-weight: 850; letter-spacing: .12em }
.danger-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: var(--red-soft); color: var(--red); font-size: 22px }
.reset-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 19px }
.reset-options .perm-item { min-height: 84px; background: var(--surface) }
.reset-options .perm-item input { accent-color: var(--red) }
.warning-callout { border-color: #f0d59d; border-left-color: var(--amber); background: var(--amber-soft); color: var(--amber) }
.reset-complete { max-width: 760px; margin: clamp(30px,8vh,90px) auto; padding: clamp(23px,5vw,48px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); text-align: center }
.reset-complete h3 { margin: 6px 0 10px; font-size: clamp(24px,4vw,34px); letter-spacing: -.7px }
.reset-complete>p:not(.eyebrow) { color: var(--muted); font-size: 14px }
.success-mark { display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 14px; border-radius: 19px; background: var(--green-soft); color: var(--green); font-size: 28px; font-weight: 850 }
.setup-token-card { margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); text-align: left }
.setup-token-card label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800 }
.setup-token-card small { display: block; margin-top: 9px; color: var(--muted); font-size: 12px }
.token-row { display: flex; gap: 8px }
.token-row input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px }
.reset-complete>.button { margin-top: 14px }
body[data-theme="dark"] .danger-zone { border-color: #593438 }
body[data-theme="dark"] .reset-options .perm-item { background: var(--surface) }
body[data-theme="dark"] .setup-token-card { background: #132019 }
@media (max-width:760px) { .reset-options { grid-template-columns: minmax(0,1fr) } .danger-heading h3 { font-size: 17px } .token-row { flex-direction: column } .reset-complete { padding: 24px 17px } }