@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#1B2A41; --ink-soft:#4A5A70; --gold:#B8863B; --gold-light:#D9B672;
  --ivory:#F7F3EA; --paper:#FFFFFF; --sage:#7C9885; --sage-deep:#4F6657;
  --rose:#B5555F; --rose-deep:#7C3840; --line:#E4DCC8;
}
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family:'Inter',sans-serif; color:var(--ink); background:var(--ivory);
  min-height:100vh; width:100%;
}
button, input, select, textarea{ font-family:inherit; }
.jsp-display{ font-family:'Fraunces',serif; }
.jsp-mono{ font-family:'IBM Plex Mono',monospace; }

.jsp-topbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 28px; border-bottom:1px solid var(--line); background:var(--ivory); flex-wrap:wrap; gap:10px; }
.jsp-brand{ display:flex; align-items:center; gap:12px; cursor:pointer; background:none; border:none; text-align:left; }
.jsp-brand-mark{ width:44px; height:44px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.jsp-brand-mark img{ width:76%; height:76%; object-fit:contain; }
.jsp-brand-mark-sm{ width:38px; height:38px; }
.jsp-brand-text-wrap{ width:max-content; text-align:left; }
.jsp-brand-text{ font-size:19px; font-weight:600; letter-spacing:0.2px; line-height:1.15; text-align:left; }
.jsp-brand-sub{ font-size:10.5px; color:var(--ink-soft); letter-spacing:0.8px; text-transform:uppercase; margin-top:2px; text-align:left; white-space:nowrap; line-height:1.4; }
.jsp-nav-links{ display:flex; gap:8px; align-items:center; }

.jsp-link-btn{ background:none; border:none; color:var(--ink-soft); font-size:13px; cursor:pointer; padding:8px 12px; border-radius:8px; display:flex; align-items:center; gap:6px; }
.jsp-link-btn:hover{ background:rgba(27,42,65,0.06); color:var(--ink); }

.jsp-container{ max-width:1080px; margin:0 auto; padding:32px 24px 100px; }

.jsp-hero{ text-align:center; padding:70px 24px 40px; max-width:720px; margin:0 auto; }
.jsp-hero-eyebrow{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:14px; }
.jsp-hero h1{ font-size:44px; line-height:1.1; margin:0 0 16px; font-weight:600; }
.jsp-hero p{ font-size:16px; color:var(--ink-soft); line-height:1.6; margin:0 auto 8px; max-width:520px; }
.jsp-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; margin:40px auto 0; padding:0 24px; }
.jsp-tile{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:32px 28px; cursor:pointer; text-align:left; transition:border-color .15s, transform .15s; }
.jsp-tile:hover{ border-color:var(--gold); transform:translateY(-2px); }
.jsp-tile-icon{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px; }
.jsp-tile-icon.gold{ background:#F1E4CC; color:#8A6423; }
.jsp-tile-icon.ink{ background:#E4E9EF; color:var(--ink); }
.jsp-tile-icon.sage{ background:#E7EEE7; color:var(--sage-deep); }
.jsp-tile-icon.blue{ background:#E2ECF5; color:#2F5C82; }
.jsp-tile h3{ font-size:19px; margin:0 0 8px; font-weight:600; }
.jsp-tile p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.5; }
.jsp-tile-arrow{ margin-top:16px; font-size:13px; color:var(--gold); font-weight:600; }
.jsp-lookup-line{ text-align:center; margin-top:28px; font-size:13.5px; color:var(--ink-soft); }
.jsp-lookup-line button{ background:none; border:none; color:var(--ink); font-weight:600; text-decoration:underline; cursor:pointer; font-size:13.5px; padding:0; }

.jsp-page-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.jsp-back{ background:none; border:1px solid var(--line); border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); flex-shrink:0; }
.jsp-back:hover{ background:var(--paper); }
.jsp-page-head h2{ font-size:26px; margin:0; font-weight:600; }

.jsp-datebar{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 20px; display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap; }
.jsp-datebar label{ font-size:13px; color:var(--ink-soft); font-weight:600; display:flex; align-items:center; gap:6px; }
.jsp-datebar input[type="date"]{ font-family:'IBM Plex Mono',monospace; font-size:14px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:var(--ivory); color:var(--ink); }
.jsp-date-readout{ font-size:13px; color:var(--ink-soft); }

.jsp-tabs{ display:flex; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.jsp-tab{ background:none; border:none; padding:10px 16px; font-size:14px; font-weight:600; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:6px; }
.jsp-tab.active{ color:var(--ink); border-bottom-color:var(--gold); }

.jsp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:18px; }
.jsp-item-card{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .15s, border-color .15s; }
.jsp-item-card:hover{ box-shadow:0 6px 20px rgba(27,42,65,0.08); border-color:#DCD2B8; }
.jsp-item-photo{ position:relative; margin:-20px -20px 2px; border-radius:14px 14px 0 0; overflow:hidden; height:160px; background:#fff; border-bottom:1px solid var(--line); }
.jsp-item-photo img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; padding:14px; box-sizing:border-box; }
.jsp-item-avail-chip{ position:absolute; top:12px; right:12px; }
.jsp-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.jsp-item-icon{ width:38px; height:38px; border-radius:10px; background:var(--ivory); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; font-size:18px; }
.jsp-item-name{ font-size:15.5px; font-weight:600; margin:0 0 4px; }
.jsp-item-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin:0; min-height:32px; }
.jsp-item-price{ font-size:14px; font-weight:600; }
.jsp-item-avail{ font-size:11.5px; padding:3px 9px; border-radius:20px; font-weight:600; white-space:nowrap; }
.jsp-item-avail.ok{ background:#E7EEE7; color:var(--sage-deep); }
.jsp-item-avail.low{ background:#F6E9CE; color:#8A6423; }
.jsp-item-avail.none{ background:#F3E1E3; color:var(--rose-deep); }
.jsp-stepper{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:10px; padding:6px 8px; margin-top:auto; }
.jsp-stepper button{ background:var(--ivory); border:1px solid var(--line); border-radius:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); }
.jsp-stepper button:disabled{ opacity:0.35; cursor:not-allowed; }
.jsp-stepper span{ font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; min-width:26px; text-align:center; }

.jsp-cartbar{ position:sticky; bottom:0; left:0; right:0; background:var(--ink); color:#fff; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; border-radius:16px 16px 0 0; margin-top:28px; box-shadow:0 -6px 18px rgba(0,0,0,0.12); flex-wrap:wrap; gap:12px; }
.jsp-cartbar-info{ display:flex; align-items:center; gap:18px; font-size:13.5px; }
.jsp-cartbar-info b{ font-family:'IBM Plex Mono',monospace; color:var(--gold-light); }

.jsp-btn{ font-weight:600; font-size:14px; border-radius:10px; padding:11px 20px; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:8px; }
.jsp-btn-primary{ background:var(--gold); color:#fff; }
.jsp-btn-primary:hover{ background:#A3752F; }
.jsp-btn-primary:disabled{ background:#D8CBA9; cursor:not-allowed; }
.jsp-btn-dark{ background:var(--ink); color:#fff; }
.jsp-btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.jsp-btn-ghost:hover{ background:var(--paper); }
.jsp-btn-danger{ background:#F3E1E3; color:var(--rose-deep); }
.jsp-btn-danger:hover{ background:#EACCCF; }
.jsp-btn-sage{ background:#E7EEE7; color:var(--sage-deep); }
.jsp-btn-sage:hover{ background:#D6E2D6; }
.jsp-btn-sm{ padding:7px 12px; font-size:12.5px; border-radius:8px; }

.jsp-cart-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.jsp-cart-row{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.jsp-cart-row-info{ display:flex; align-items:center; gap:12px; }
.jsp-cart-row-name{ font-size:14.5px; font-weight:600; }
.jsp-cart-row-unit{ font-size:12px; color:var(--ink-soft); }
.jsp-cart-row-right{ display:flex; align-items:center; gap:16px; }
.jsp-cart-line-total{ font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; min-width:70px; text-align:right; }

.jsp-delivery-options{ display:flex; flex-direction:column; gap:10px; }
.jsp-delivery-option{ display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; transition:border-color .15s, background .15s; }
.jsp-delivery-option:hover{ border-color:var(--gold); }
.jsp-delivery-option:has(input:checked){ border-color:var(--gold); background:#FBF6EA; }
.jsp-delivery-option input[type="radio"]{ margin-top:3px; accent-color:var(--gold); flex-shrink:0; }
.jsp-delivery-option-title{ font-size:14.5px; font-weight:600; margin-bottom:2px; }
.jsp-delivery-option-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.jsp-delivery-quote{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-soft); background:var(--ivory); border-radius:8px; padding:8px 12px; margin-top:10px; flex-wrap:wrap; }
.jsp-checkbox-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:8px; margin-top:6px; }
.jsp-checkbox-option{ display:flex; align-items:center; gap:8px; font-size:13px; border:1px solid var(--line); border-radius:9px; padding:9px 12px; cursor:pointer; }
.jsp-checkbox-option:has(input:checked){ border-color:var(--gold); background:#FBF6EA; }
.jsp-checkbox-option input{ accent-color:var(--gold); flex-shrink:0; }
.jsp-menu-list{ display:flex; flex-direction:column; gap:6px; }
.jsp-menu-row{ display:flex; align-items:center; gap:10px; background:var(--ivory); border:1px solid var(--line); border-radius:9px; padding:8px 10px; cursor:grab; transition:border-color .12s, background .12s; }
.jsp-menu-row:active{ cursor:grabbing; }
.jsp-menu-row.dragging{ opacity:0.4; }
.jsp-menu-row.drag-over{ border-color:var(--gold); background:#FBF6EA; }
.jsp-menu-row-handle{ color:var(--ink-soft); flex-shrink:0; display:flex; }
.jsp-menu-row-name{ flex:1; font-size:13px; }
.jsp-menu-row button{ background:none; border:none; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; padding:4px; border-radius:50%; flex-shrink:0; }
.jsp-menu-row button:hover{ background:var(--line); color:var(--rose-deep); }

.jsp-panel{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:24px; }
.jsp-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px; }
.jsp-field{ display:flex; flex-direction:column; gap:6px; }
.jsp-field.full{ grid-column:1/-1; }
.jsp-field label{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.jsp-input, .jsp-select, .jsp-textarea{ font-size:14px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; background:var(--ivory); color:var(--ink); width:100%; }
.jsp-textarea{ resize:vertical; min-height:70px; }
.jsp-summary-row{ display:flex; justify-content:space-between; font-size:14px; padding:6px 0; }
.jsp-summary-row.total{ font-weight:700; font-size:16px; border-top:1px solid var(--line); margin-top:8px; padding-top:12px; }
.jsp-error{ background:#F3E1E3; color:var(--rose-deep); border-radius:9px; padding:10px 14px; font-size:13px; display:flex; align-items:center; gap:8px; margin-bottom:14px; }

.jsp-ticket{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px 26px 22px; max-width:460px; margin:0 auto; }
.jsp-ticket-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.jsp-ticket-id{ font-size:12.5px; color:var(--ink-soft); letter-spacing:0.5px; }
.jsp-ticket-title{ font-size:20px; margin:0 0 10px; font-weight:600; }
.jsp-ticket-meta{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.jsp-ticket-meta div{ display:flex; align-items:center; gap:7px; }
.jsp-ticket-divider{ position:relative; border-top:1.5px dashed var(--line); margin:16px 2px; }
.jsp-ticket-divider::before, .jsp-ticket-divider::after{ content:''; position:absolute; top:-10px; width:20px; height:20px; border-radius:50%; background:var(--ivory); }
.jsp-ticket-divider::before{ left:-38px; }
.jsp-ticket-divider::after{ right:-38px; }
.jsp-ticket-items{ display:flex; flex-direction:column; gap:7px; }
.jsp-ticket-line{ display:flex; justify-content:space-between; font-size:13.5px; }
.jsp-ticket-total{ display:flex; justify-content:space-between; font-size:16px; font-weight:700; }
.jsp-ticket-note{ font-size:12px; color:var(--ink-soft); margin-top:14px; line-height:1.5; }

.jsp-badge{ font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px; text-transform:uppercase; letter-spacing:0.4px; }
.jsp-badge-pending{ background:#F6E9CE; color:#8A6423; }
.jsp-badge-confirmed{ background:#E7EEE7; color:var(--sage-deep); }
.jsp-badge-picked_up, .jsp-badge-delivered{ background:#E2ECF5; color:#2F5C82; }
.jsp-badge-cancelled{ background:#F3E1E3; color:var(--rose-deep); }
.jsp-badge-completed{ background:#E4E9EF; color:var(--ink); }

.jsp-empty{ text-align:center; padding:60px 24px; color:var(--ink-soft); }
.jsp-empty h3{ color:var(--ink); font-size:18px; margin-bottom:6px; }

.jsp-staff-shell{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.jsp-staff-sidebar{ background:var(--ink); color:#fff; padding:24px 18px; display:flex; flex-direction:column; gap:6px; }
.jsp-staff-brand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; padding:0 6px; }
.jsp-staff-brand-text{ font-size:15px; font-weight:600; }
.jsp-staff-brand-sub{ font-size:10px; color:#B7C0CC; letter-spacing:1px; text-transform:uppercase; }
.jsp-staff-nav-item{ background:none; border:none; color:#C7CFDA; text-align:left; padding:11px 14px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:10px; }
.jsp-staff-nav-item.active{ background:rgba(255,255,255,0.1); color:#fff; }
.jsp-staff-nav-item:hover{ color:#fff; }
.jsp-staff-content{ padding:28px 32px 60px; }
.jsp-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.jsp-stat{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.jsp-stat-num{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; }
.jsp-stat-label{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.jsp-toolbar{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }

/* Dashboard */
.jsp-earnings-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.jsp-earnings-card{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.jsp-earnings-card-value{ font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--sage-deep); }
.jsp-earnings-card-label{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.jsp-dash-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; }
.jsp-dash-col{ display:flex; flex-direction:column; gap:16px; min-height:0; }
.jsp-dash-col .jsp-dash-panel:last-child{ flex:1; display:flex; flex-direction:column; min-height:0; }
.jsp-dash-panel{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px; }
.jsp-dash-panel h3{ margin:0 0 4px; font-size:16px; }
.jsp-dash-panel-sub{ font-size:12px; color:var(--ink-soft); margin:0 0 16px; }

.jsp-alert-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.jsp-alert-row:last-child{ border-bottom:none; padding-bottom:0; }
.jsp-alert-when{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.jsp-alert-when.overdue{ background:#F3E1E3; color:var(--rose-deep); }
.jsp-alert-when.today{ background:#F6E9CE; color:#8A6423; }
.jsp-alert-when.soon{ background:#E7EEE7; color:var(--sage-deep); }
.jsp-alert-info{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0; }
.jsp-alert-name{ font-weight:600; font-size:13.5px; }
.jsp-alert-meta{ font-size:12px; color:var(--ink-soft); }

.jsp-status-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12.5px; }
.jsp-status-bar-label{ width:88px; flex-shrink:0; color:var(--ink-soft); }
.jsp-status-bar-track{ flex:1; height:8px; border-radius:6px; background:var(--ivory); overflow:hidden; }
.jsp-status-bar-fill{ height:100%; border-radius:6px; background:var(--gold); }
.jsp-status-bar-count{ width:24px; text-align:right; font-family:'IBM Plex Mono',monospace; flex-shrink:0; }

.jsp-lowstock-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.jsp-lowstock-row:last-child{ border-bottom:none; padding-bottom:0; }
.jsp-dash-scroll{ max-height:280px; overflow-y:auto; overflow-x:auto; }
.jsp-dash-col .jsp-dash-panel:last-child .jsp-dash-scroll{ flex:1; min-height:120px; max-height:none; }
.jsp-table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
.jsp-table-scroll .jsp-inv-table{ min-width:600px; }
.jsp-inv-table thead th{ position:sticky; top:0; background:var(--paper); z-index:1; }
.jsp-chart-line{ stroke:var(--gold); stroke-width:2.5; }
.jsp-chart-area{ fill:var(--gold); opacity:0.13; stroke:none; }
.jsp-chart-point{ fill:var(--paper); stroke:var(--gold); stroke-width:2; }
.jsp-chart-point:hover{ fill:var(--gold); r:5; }
.jsp-chart-axis-label{ fill:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:10px; }

@media (max-width: 900px){
  .jsp-earnings-row{ grid-template-columns:1fr 1fr; }
  .jsp-dash-grid{ grid-template-columns:1fr; }
  .jsp-tiles{ grid-template-columns:1fr 1fr; }
}
.jsp-res-card{ background:var(--paper); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.jsp-res-head{ padding:14px 18px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:12px; flex-wrap:wrap; }
.jsp-res-head-left{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.jsp-res-name{ font-weight:600; font-size:14.5px; }
.jsp-res-date{ font-size:12.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }
.jsp-res-body{ border-top:1px solid var(--line); padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.jsp-res-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.jsp-inv-table{ width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.jsp-inv-thumb{ width:40px; height:40px; border-radius:8px; object-fit:contain; background:#fff; border:1px solid var(--line); flex-shrink:0; }
.jsp-inv-name-cell{ display:flex; align-items:center; gap:10px; }
.jsp-ni-photo-preview{ width:52px; height:52px; border-radius:10px; border:1px solid var(--line); background:var(--ivory); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; overflow:hidden; }
.jsp-ni-photo-preview img{ width:100%; height:100%; object-fit:contain; }
.jsp-inv-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft); padding:12px 14px; border-bottom:1px solid var(--line); }
.jsp-inv-table td{ padding:10px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
.jsp-inv-table tr:last-child td{ border-bottom:none; }
.jsp-inv-input{ width:80px; font-family:'IBM Plex Mono',monospace; font-size:13px; border:1px solid var(--line); border-radius:7px; padding:6px 8px; background:var(--ivory); color:var(--ink); }
.jsp-inv-text-input{ width:100%; min-width:150px; font-family:'Inter',sans-serif; display:block; }

.jsp-gate{ max-width:380px; margin:80px auto; text-align:center; padding:0 20px; }
.jsp-gate-icon{ width:52px; height:52px; border-radius:50%; background:var(--ink); color:var(--gold-light); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:20px; }
.jsp-totp-setup{ margin-top:10px; padding-top:16px; border-top:1px solid var(--line); }
.jsp-totp-qr{ width:180px; height:180px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff; }
.jsp-totp-secret{ font-size:13px; background:var(--ivory); border:1px solid var(--line); border-radius:8px; padding:8px 12px; word-break:break-all; display:inline-block; }

@media (max-width: 800px){
  .jsp-staff-shell{ grid-template-columns:1fr; }
  .jsp-staff-sidebar{ flex-direction:row; overflow-x:auto; padding:14px; }
  .jsp-staff-brand{ display:none; }
  .jsp-res-body{ grid-template-columns:1fr; }
  .jsp-form-grid{ grid-template-columns:1fr; }
  .jsp-stats-row{ grid-template-columns:1fr 1fr; }
  .jsp-tiles{ grid-template-columns:1fr; }
  .jsp-hero h1{ font-size:32px; }
}

/* Smallest phones (iPhone SE and similar, ~320-390px wide): drop
   remaining 2-column grids to a single column so cards and stat
   tiles never feel cramped or force horizontal scrolling. */
@media (max-width: 480px){
  .jsp-stats-row{ grid-template-columns:1fr; }
  .jsp-earnings-row{ grid-template-columns:1fr; }
  .jsp-hero{ padding:50px 16px 30px; }
  .jsp-hero h1{ font-size:26px; }
  .jsp-container{ padding-left:16px; padding-right:16px; }
  .jsp-topbar{ padding:14px 16px; }
  .jsp-nav-links{ gap:4px; }
  .jsp-link-btn{ padding:8px 10px; font-size:12.5px; }
}