* { box-sizing: border-box; }
:root {
    --bg: #06110b;
    --bg-soft: #0c1710;
    --bg-elevated: #101c14;
    --bg-panel: rgba(15, 26, 18, 0.92);
    --card: rgba(14, 23, 17, 0.92);
    --card-2: #122117;
    --text: #eefbf1;
    --muted: #8ea695;
    --line: rgba(148, 177, 157, 0.12);
    --primary: #52e86f;
    --primary-2: #23c95b;
    --primary-soft: rgba(82, 232, 111, 0.12);
    --blue: #4db7ff;
    --yellow: #f7d56b;
    --pink: #f96ee0;
    --success-bg: rgba(82, 232, 111, 0.12);
    --success-text: #72f590;
    --warning-bg: rgba(247, 213, 107, 0.12);
    --warning-text: #ffd76a;
    --error-bg: rgba(255, 100, 100, 0.12);
    --error-text: #ff8d8d;
    --info-bg: rgba(77, 183, 255, 0.12);
    --info-text: #8ad0ff;
    --radius: 22px;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    --sidebar-width: 280px;
}
html { min-height: 100%; }
body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background:
 radial-gradient(circle at top right, rgba(82,232,111,.12), transparent 30%),
 radial-gradient(circle at bottom left, rgba(77,183,255,.08), transparent 24%),
 linear-gradient(180deg, #07120b 0%, #06110b 100%); }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; }
input::placeholder, textarea::placeholder { color: #7f9486; }
.container { width: min(100%, 1600px); margin: 0 auto; }
.auth-page-wrap { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 60px; }
.auth-hero-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.2fr .85fr; gap: 24px; align-items: center; }
.auth-showcase { padding: 42px; border-radius: 34px; background: linear-gradient(180deg, rgba(13,27,17,.9), rgba(8,16,11,.95)); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.auth-showcase::before { content: ''; position: absolute; width: 280px; height: 280px; right: -60px; top: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(82,232,111,.25), transparent 65%); }
.auth-showcase-badge { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--primary); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.auth-showcase h1 { margin: 22px 0 14px; font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; max-width: 760px; }
.auth-showcase p { max-width: 640px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 30px; }
.preview-card { min-height: 140px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.preview-card span, .preview-card small { display: block; }
.preview-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.preview-card strong { display: block; margin-top: 14px; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.04em; }
.preview-card small { margin-top: 10px; color: #a8beb0; }
.preview-balance { background: linear-gradient(135deg, rgba(82,232,111,.13), rgba(77,183,255,.06)); }
.preview-chart .bars { display: flex; align-items: end; gap: 10px; height: 72px; margin-top: 16px; }
.preview-chart .bars i { width: 18px; border-radius: 999px; background: linear-gradient(180deg, var(--primary), rgba(82,232,111,.12)); display: block; }
.preview-chart .bars i:nth-child(1){height:42px}.preview-chart .bars i:nth-child(2){height:70px}.preview-chart .bars i:nth-child(3){height:55px}.preview-chart .bars i:nth-child(4){height:62px}.preview-chart .bars i:nth-child(5){height:36px}.preview-chart .bars i:nth-child(6){height:52px}
.auth-panel.card { padding: 30px; }
.auth-panel h2 { margin: 8px 0 8px; font-size: 34px; letter-spacing: -.045em; }
.auth-form { margin-top: 18px; }
.auth-helper-box { margin-top: 18px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.auth-helper-box strong, .auth-helper-box span { display: block; }
.auth-helper-box span { margin-top: 6px; color: var(--muted); }
.auth-helper-box code { background: rgba(255,255,255,.05); border: 1px solid var(--line); padding: 2px 8px; border-radius: 8px; color: var(--text); }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 18px; background: linear-gradient(180deg, rgba(8,18,12,.98), rgba(10,19,13,.92)); border-right: 1px solid var(--line); }
.sidebar-top { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; color: var(--text); }
.sidebar-brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #06200a; font-weight: 900; font-size: 20px; box-shadow: 0 14px 28px rgba(82,232,111,.25); }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand strong { font-size: 18px; }
.sidebar-brand small { color: var(--muted); font-size: 12px; }
.sidebar-badge { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #bcd1c1; font-size: 12px; font-weight: 700; }
.sidebar-badge-dot, .topbar-pill-dot, .mobile-user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px rgba(82,232,111,.8); }
.sidebar-nav { display: grid; gap: 8px; margin-top: 26px; }
.sidebar-link { padding: 14px 16px; border-radius: 16px; color: #b8cabd; font-weight: 700; background: transparent; border: 1px solid transparent; transition: .18s ease; }
.sidebar-link:hover, .sidebar-link.active { color: var(--text); background: linear-gradient(180deg, rgba(82,232,111,.12), rgba(82,232,111,.06)); border-color: rgba(82,232,111,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.sidebar-footer { position: absolute; left: 18px; right: 18px; bottom: 22px; display: grid; gap: 14px; }
.sidebar-user-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.avatar-circle { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(82,232,111,.12); color: var(--primary); font-weight: 900; }
.sidebar-user-card strong, .sidebar-user-card small { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-card small { color: var(--muted); margin-top: 4px; }
.sidebar-logout { display: inline-flex; justify-content: center; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.03); color: var(--text); font-weight: 800; }
.app-main { min-width: 0; }
.main-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 28px 0; }
.topbar-kicker { display: inline-block; color: var(--primary); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.main-topbar h2 { margin: 8px 0 0; font-size: 28px; letter-spacing: -.04em; }
.topbar-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #bdd0c1; font-size: 13px; font-weight: 700; }
.page-content { padding: 22px 28px 40px; }
.mobile-topbar { display: none; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(8,18,12,.98); position: sticky; top: 0; z-index: 60; }
.mobile-brand { font-weight: 900; }
.mobile-menu-btn { appearance:none; border: 0; background: transparent; color: var(--text); font-size: 24px; cursor: pointer; }
.sidebar-overlay { display: none; }
.page-head { margin-bottom: 24px; }
.page-head-inline { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.page-head h1, .card h2, .card h3, .receipt h1, .receipt h2 { margin: 0; }
.page-head h1 { margin-top: 6px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.05em; }
.eyebrow { display: inline-block; color: var(--primary); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.card { background: linear-gradient(180deg, rgba(15,26,18,.95), rgba(12,21,15,.95)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.stat-grid-fintech { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.employee-stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.neo-stat { position: relative; overflow: hidden; }
.neo-stat::before { content:''; position:absolute; inset:auto -30px -50px auto; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%); opacity:.35; }
.neo-stat span, .neo-stat small { display:block; }
.neo-stat span { color: #b8cabd; font-size: 13px; font-weight: 700; }
.neo-stat strong { display:block; margin-top: 16px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.05em; }
.neo-stat small { margin-top: 12px; color: var(--muted); }
.glow-green { box-shadow: inset 0 0 0 1px rgba(82,232,111,.08), 0 0 0 1px rgba(82,232,111,.06), 0 24px 55px rgba(22,97,40,.18); }
.glow-blue { box-shadow: inset 0 0 0 1px rgba(77,183,255,.08), 0 24px 55px rgba(33,82,117,.17); }
.glow-yellow { box-shadow: inset 0 0 0 1px rgba(247,213,107,.08), 0 24px 55px rgba(117,95,33,.15); }
.glow-pink { box-shadow: inset 0 0 0 1px rgba(249,110,224,.08), 0 24px 55px rgba(117,33,96,.14); }
.dashboard-grid-modern { display: grid; grid-template-columns: 1.3fr .8fr; gap: 16px; margin-bottom: 20px; }
.employee-dashboard-grid { grid-template-columns: 1fr .8fr; }
.hero-finance-card { min-height: 360px; }
.hero-finance-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.hero-finance-top h2 { margin-top: 8px; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.055em; }
.ring-mock { width: 170px; height: 170px; border-radius: 50%; display:grid; place-items:center; background: conic-gradient(var(--primary) 0 240deg, rgba(255,255,255,.07) 240deg 360deg); padding: 18px; }
.ring-inner { width:100%; height:100%; border-radius:50%; display:grid; place-items:center; background: #0c1711; text-align:center; }
.ring-inner strong, .ring-inner span { display:block; }
.ring-inner strong { font-size: 32px; }
.ring-inner span { color: var(--muted); font-size: 12px; }
.mock-chart-area { margin-top: 24px; padding: 18px 18px 14px; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.mock-chart-bars { display:flex; align-items:end; gap:14px; height:180px; }
.mock-chart-bars.large i { width: calc((100% - 84px)/7); }
.mock-chart-bars.compact { height: 120px; }
.mock-chart-bars.compact i { width: calc((100% - 56px)/5); }
.mock-chart-bars i { display:block; border-radius: 999px 999px 12px 12px; background: linear-gradient(180deg, rgba(82,232,111,.95), rgba(82,232,111,.18)); box-shadow: 0 0 30px rgba(82,232,111,.12); }
.mock-chart-bars.large i:nth-child(1){height:90px}.mock-chart-bars.large i:nth-child(2){height:120px}.mock-chart-bars.large i:nth-child(3){height:110px}.mock-chart-bars.large i:nth-child(4){height:150px}.mock-chart-bars.large i:nth-child(5){height:138px}.mock-chart-bars.large i:nth-child(6){height:102px}.mock-chart-bars.large i:nth-child(7){height:68px}
.mock-chart-bars.compact i:nth-child(1){height:48px}.mock-chart-bars.compact i:nth-child(2){height:80px}.mock-chart-bars.compact i:nth-child(3){height:62px}.mock-chart-bars.compact i:nth-child(4){height:92px}.mock-chart-bars.compact i:nth-child(5){height:58px}
.mock-chart-labels { display:flex; justify-content:space-between; margin-top: 12px; color: var(--muted); font-size: 12px; }
.action-panel-card { display:flex; flex-direction:column; }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom: 18px; }
.section-title.compact { margin-bottom: 10px; }
.action-stack { display:grid; gap: 12px; margin-top: 6px; }
.action-tile { display:flex; align-items:center; gap: 14px; padding: 16px; border-radius: 18px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); transition: .18s ease; }
.action-tile:hover { transform: translateY(-1px); border-color: rgba(82,232,111,.18); box-shadow: 0 16px 32px rgba(82,232,111,.08); }
.tile-icon { width: 46px; height: 46px; flex: 0 0 46px; display:grid; place-items:center; border-radius: 14px; background: rgba(82,232,111,.14); color: var(--primary); font-weight: 900; }
.action-tile strong, .action-tile small { display:block; }
.action-tile small { margin-top: 4px; color: var(--muted); }
.form-shell-grid { display: grid; grid-template-columns: 1.35fr .75fr; gap: 16px; align-items: start; }
.form-card-modern { min-width: 0; }
.form-card-main { padding-top: 26px; }
.side-tip-card h2 { margin: 8px 0 12px; font-size: 28px; letter-spacing: -.04em; }
.tip-list { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.8; }
.tip-list li + li { margin-top: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; font-weight: 800; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.24); }
.btn-primary { border-color: rgba(82,232,111,.25); background: linear-gradient(180deg, var(--primary), var(--primary-2)); color: #07210d; }
.btn-primary:hover { box-shadow: 0 14px 28px rgba(82,232,111,.22); }
.btn-small { min-height: 36px; padding: 8px 12px; font-size: 13px; }
.btn-full { width: 100%; }
.form-stack { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.span-2, .full-span { grid-column: span 2; }
label { display: grid; gap: 8px; color: #c9d9cd; font-size: 14px; font-weight: 700; }
.field-help { color: var(--muted); font-size: 12px; font-weight: 500; }
input, select, textarea { width:100%; border:1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.03); color: var(--text); padding: 13px 14px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: rgba(82,232,111,.28); box-shadow: 0 0 0 4px rgba(82,232,111,.08); }
.checkbox-row { display:flex; align-items:center; gap:10px; }
.checkbox-row input { width:18px; height:18px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; }
.alert { margin-bottom: 16px; padding: 13px 15px; border-radius: 14px; font-weight: 700; border: 1px solid transparent; }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: rgba(82,232,111,.16); }
.alert-error { background: var(--error-bg); color: var(--error-text); border-color: rgba(255,100,100,.14); }
.alert-info { background: var(--info-bg); color: var(--info-text); border-color: rgba(77,183,255,.14); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: rgba(247,213,107,.14); }
.employee-grid-modern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.employee-neo-card { display: flex; flex-direction: column; gap: 16px; }
.employee-neo-top { display:flex; justify-content:space-between; gap: 14px; align-items:flex-start; }
.person-row { display:flex; align-items:center; gap: 12px; min-width:0; }
.person-row.large-gap { gap: 16px; }
.person-badge { width: 42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:14px; background: rgba(82,232,111,.12); color: var(--primary); font-weight: 900; }
.person-badge.large { width: 52px; height: 52px; flex-basis: 52px; }
.person-badge.xl { width: 64px; height: 64px; flex-basis: 64px; border-radius: 18px; font-size: 20px; }
.person-row strong { display:block; }
.employee-neo-top h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
.employee-neo-body { display:grid; gap:10px; }
.employee-meta-line { display:flex; justify-content:space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.employee-meta-line span { color: var(--muted); }
.employee-meta-line strong { max-width: 55%; text-align: right; word-break: break-word; }
.employee-neo-stats { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
.employee-neo-stats > div { padding:14px; border-radius:16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.employee-neo-stats span, .employee-neo-stats strong { display:block; }
.employee-neo-stats span { color: var(--muted); font-size: 12px; }
.employee-neo-stats strong { margin-top: 8px; font-size: 22px; }
.employee-neo-actions { display:flex; justify-content:flex-end; gap:8px; }
.profile-hero-card h2 { margin-top: 0; font-size: 30px; }
.small-top { margin-top: 16px; }
.table-wrap { overflow-x: auto; }
.modern-table { width:100%; border-collapse: separate; border-spacing: 0 10px; }
.modern-table thead th { color: #9db4a4; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 0 14px 6px; }
.modern-table tbody tr { background: rgba(255,255,255,.03); }
.modern-table tbody td { padding: 16px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.modern-table tbody td:first-child { border-left: 1px solid var(--line); border-radius: 16px 0 0 16px; }
.modern-table tbody td:last-child { border-right: 1px solid var(--line); border-radius: 0 16px 16px 0; }
.table-sub { display:block; margin-top:4px; color: var(--muted); font-size: 12px; }
.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.05); color:#d0ddd4; font-size:12px; font-weight: 900; }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.empty-state { padding: 42px 18px; text-align:center; color: var(--muted); }
.empty-state strong { display:block; color: var(--text); margin-bottom: 6px; }
.filter-tabs { display:flex; gap:8px; margin-bottom: 18px; }
.filter-tabs a { padding:10px 14px; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: #b9c9be; font-weight: 700; font-size: 14px; }
.filter-tabs a.active { border-color: rgba(82,232,111,.24); background: rgba(82,232,111,.14); color: var(--text); }
.receipt-toolbar { display:flex; justify-content:space-between; gap:12px; margin-bottom: 18px; }
.receipt { max-width: 920px; margin: 0 auto; padding: 42px; background: #fff; color: #162318; border:1px solid rgba(0,0,0,.06); border-radius: 26px; box-shadow: 0 24px 50px rgba(0,0,0,.28); }
.receipt-header { display:flex; justify-content:space-between; align-items:flex-start; gap:22px; padding-bottom:24px; border-bottom: 1px solid #e9eee9; }
.receipt-header h1 { font-size: 34px; letter-spacing: -.045em; }
.receipt-company-line { margin: 5px 0 0; color:#607061; font-size:13px; }
.receipt-number { text-align:right; }
.receipt-number span, .receipt-number strong { display:block; }
.receipt-number span { color:#5f6f61; font-size:12px; }
.receipt-number strong { margin-top: 6px; }
.receipt-intro { margin: 26px 0; color:#4c5c4e; line-height:1.7; }
.receipt-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid #e8eeea; border-radius: 18px; overflow: hidden; }
.receipt-field { padding: 18px; border-bottom:1px solid #e8eeea; }
.receipt-field:nth-child(odd) { border-right:1px solid #e8eeea; }
.receipt-field:nth-last-child(-n+2) { border-bottom: 0; }
.receipt-field span, .receipt-field strong { display:block; }
.receipt-field span { color:#667567; font-size:12px; font-weight:700; }
.receipt-field strong { margin-top:7px; }
.receipt-notes { margin-top:20px; padding:18px; border-radius: 14px; background:#f7faf7; }
.receipt-notes span { color:#6b7c6d; font-size:12px; font-weight:800; }
.receipt-notes p { margin-bottom:0; line-height:1.65; }
.receipt-declaration { margin: 28px 0; padding: 20px; border-left: 4px solid #31c960; background:#f3fcf5; border-radius: 0 14px 14px 0; line-height:1.75; }
.signature-box { margin-top: 26px; padding: 22px; border:1px solid #e7eeea; border-radius:18px; }
#signatureCanvas { width:100%; height:220px; display:block; background:#fff; border:2px dashed #c5d3c7; border-radius:14px; touch-action:none; }
.signature-actions { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:14px; }
.signature-saved { margin-top: 34px; padding-top: 24px; border-top:1px solid #e8eeea; }
.signature-label { display:block; color:#6a7a6c; font-size:12px; font-weight:800; }
.signature-image { width:min(340px, 100%); max-height:150px; object-fit:contain; object-position:left center; margin: 12px 0; }
.signature-meta strong, .signature-meta span { display:block; }
.signature-meta span { margin-top:4px; color:#657566; font-size:13px; }
.pending-signature { margin-top:28px; padding:18px; background:#fff8e8; color:#9a6700; border-radius:14px; font-weight:800; }
.receipt-footer { display:flex; justify-content:space-between; gap:16px; margin-top: 36px; padding-top:18px; border-top:1px solid #e8eeea; color:#687868; font-size:12px; }
@media (max-width: 1180px) {
  .stat-grid-fintech { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-grid-modern, .form-shell-grid, .employee-grid-modern, .auth-hero-wrap, .employee-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 320px); transform: translateX(-110%); z-index: 70; transition: transform .2s ease; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; display: none; }
  .sidebar-overlay.is-open { display: block; }
  .mobile-topbar { display:flex; }
  .main-topbar { padding: 20px 18px 0; }
  .page-content { padding: 18px 18px 34px; }
  .page-head-inline, .receipt-toolbar, .signature-actions, .receipt-header, .receipt-footer { flex-direction: column; align-items: stretch; }
  .page-head-inline .btn { width: 100%; }
}
@media (max-width: 640px) {
  .auth-page-wrap { width: min(100% - 20px, 1200px); padding-top: 20px; }
  .auth-showcase { padding: 28px 22px; }
  .auth-showcase h1 { font-size: clamp(34px, 8vw, 48px); }
  .preview-grid, .stat-grid-fintech, .employee-stats-grid, .form-grid, .receipt-grid { grid-template-columns: 1fr; }
  .span-2, .full-span { grid-column: span 1; }
  .modern-table thead { display: none; }
  .modern-table, .modern-table tbody, .modern-table tr, .modern-table td { display: block; width: 100%; }
  .modern-table tbody tr { margin-bottom: 12px; border-radius: 18px; overflow: hidden; }
  .modern-table tbody td { border-left: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; white-space: normal; }
  .modern-table tbody td:first-child { border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; }
  .modern-table tbody td:last-child { border-bottom-left-radius: 18px !important; border-bottom-right-radius: 18px !important; }
  .employee-neo-top, .employee-neo-actions, .employee-meta-line { flex-direction: column; align-items: stretch; }
  .receipt { padding: 24px 18px; border-radius: 18px; }
  .receipt-grid { grid-template-columns: 1fr; }
  .receipt-field, .receipt-field:nth-child(odd), .receipt-field:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid #e8eeea; }
  .receipt-field:last-child { border-bottom: 0; }
  #signatureCanvas { height: 180px; }
}
@media print {
  body { background: #fff; }
  .no-print, .sidebar, .mobile-topbar, .main-topbar { display:none !important; }
  .app-shell, .app-main, .page-content, .container { display:block !important; width:100% !important; padding:0 !important; margin:0 !important; }
  .receipt { max-width:none; padding:0; border:0; border-radius:0; box-shadow:none; }
}

/* ============================================================
   V3 EXTENSIONS
   ============================================================ */

select {
    color-scheme: dark;
}

select option {
    background: #122117;
    color: #eefbf1;
}

.narrow {
    max-width: 620px;
    margin: 40px auto;
}

.installer-card h1 {
    margin: 8px 0 12px;
    font-size: 34px;
    letter-spacing: -.04em;
}

.grid-toolbar-card,
.advanced-filter-card {
    margin-bottom: 18px;
}

.toolbar-search-form {
    display: flex;
    align-items: end;
    gap: 12px;
}

.search-field-grow {
    flex: 1;
}

.advanced-filter-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, minmax(150px, 1fr));
    gap: 14px;
    align-items: end;
}

.filter-search-wide {
    grid-column: span 2;
}

.filter-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.grid-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.grid-summary-row strong,
.grid-summary-row span {
    display: block;
}

.grid-summary-row span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.grid-summary-badges {
    display: flex;
    gap: 8px;
    align-items: center;
}

.data-grid-scroll {
    max-width: 100%;
    overflow: auto;
}

.data-grid-table {
    min-width: 1480px;
}

.data-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #101c14;
}

.grid-sort-link {
    color: #b9cdbc;
    font-weight: 800;
}

.grid-sort-link:hover {
    color: var(--primary);
}

.sticky-action-col {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #101c14 !important;
    box-shadow: -14px 0 22px rgba(0, 0, 0, .18);
}

.row-actions,
.receipt-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.pagination a {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    color: #c4d6c8;
    font-weight: 800;
}

.pagination a.active {
    color: #06150a;
    background: var(--primary);
    border-color: var(--primary);
}

/* Searchable select */
.smart-select {
    position: relative;
}

.smart-select-trigger {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(82, 232, 111, .22);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(26, 44, 31, .96), rgba(19, 34, 24, .96));
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-weight: 800;
    box-shadow: 0 0 0 4px rgba(82, 232, 111, .035);
}

.smart-select-trigger b {
    color: var(--primary);
    font-size: 18px;
}

.smart-select-dropdown {
    position: absolute;
    z-index: 120;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(82, 232, 111, .18);
    border-radius: 18px;
    background: #101c14;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .48);
}

.smart-select.is-open .smart-select-dropdown {
    display: block;
    animation: selectReveal .16s ease-out;
}

@keyframes selectReveal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.smart-select-search-wrap {
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.smart-select-search {
    min-height: 44px;
}

.smart-select-options {
    max-height: 320px;
    overflow: auto;
    padding: 8px;
}

.smart-select-option {
    width: 100%;
    display: block;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.smart-select-option:hover,
.smart-select-option.selected {
    background: rgba(82, 232, 111, .11);
}

.smart-select-option strong,
.smart-select-option small {
    display: block;
}

.smart-select-option small {
    margin-top: 4px;
    color: var(--muted);
}

/* Payment form */
.payment-form-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
}

.form-section-block + .form-section-block {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.form-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.form-section-heading h2,
.form-section-heading p {
    margin: 0;
}

.form-section-heading h2 {
    font-size: 22px;
    letter-spacing: -.03em;
}

.form-section-heading p {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.6;
}

.section-number {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(82, 232, 111, .12);
    color: var(--primary);
    font-weight: 900;
}

.segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.segment-option,
.radio-card {
    position: relative;
}

.segment-option input,
.radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segment-option span {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, .025);
    color: #bcd0c0;
    cursor: pointer;
    font-weight: 850;
}

.segment-option input:checked + span {
    border-color: rgba(82, 232, 111, .28);
    background: rgba(82, 232, 111, .12);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(82, 232, 111, .06);
}

.recipient-panel[hidden],
.signature-capture-panel[hidden],
.employee-only-signature-option[hidden] {
    display: none !important;
}

.signature-mode-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.radio-card > span {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
}

.radio-card strong,
.radio-card small {
    display: block;
}

.radio-card small {
    margin-top: 5px;
    color: var(--muted);
    line-height: 1.5;
}

.radio-card input:checked + span {
    border-color: rgba(82, 232, 111, .28);
    background: rgba(82, 232, 111, .10);
}

.file-drop-zone {
    position: relative;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border: 1.5px dashed rgba(82, 232, 111, .28);
    border-radius: 20px;
    background: rgba(82, 232, 111, .035);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
}

.file-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: 16px;
    background: rgba(82, 232, 111, .12);
    color: var(--primary);
    font-size: 28px;
}

.file-drop-zone strong,
.file-drop-zone small {
    display: block;
}

.file-drop-zone small {
    margin-top: 6px;
    color: var(--muted);
}

.file-preview-image {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    max-height: 280px;
    margin-top: 14px;
    object-fit: contain;
    border-radius: 16px;
}

.embedded-signature-box {
    margin-top: 0;
    padding: 0;
    border: 0;
}

.signature-canvas {
    width: 100%;
    height: 220px;
    display: block;
    border: 2px dashed #8da394;
    border-radius: 16px;
    background: #fff;
    touch-action: none;
}

.sticky-form-actions {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 26px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(10, 20, 13, .88);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}

.sticky-side-card {
    position: sticky;
    top: 24px;
}

/* Admin permissions */
.wide-form-card {
    max-width: 1120px;
}

.permission-master-row {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .025);
}

.permission-master-row > span strong,
.permission-master-row > span small {
    display: block;
}

.permission-master-row > span small {
    margin-top: 4px;
    color: var(--muted);
}

.permission-groups {
    display: grid;
    gap: 16px;
    transition: opacity .18s ease;
}

.permission-groups.is-disabled {
    opacity: .38;
}

.permission-group {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .02);
}

.permission-group h3 {
    margin: 0 0 14px;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.permission-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
}

.permission-card input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--primary);
}

.permission-card span strong,
.permission-card span small {
    display: block;
}

.permission-card span small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}

/* Logs */
.audit-action-code {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 10px;
    background: rgba(77, 183, 255, .10);
    color: #8ad0ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.log-summary-cell {
    min-width: 320px;
    white-space: normal !important;
}

.logs-table {
    min-width: 1200px;
}

/* Receipt improvements */
.receipt-header-branded {
    align-items: center;
}

.receipt-brand-block {
    display: flex;
    align-items: center;
    gap: 18px;
}

.receipt-logo {
    width: 150px;
    max-height: 70px;
    object-fit: contain;
    object-position: left center;
}

.receipt-company-details strong,
.receipt-company-details span {
    display: block;
}

.receipt-company-details span {
    margin-top: 3px;
    color: #5f7061;
    font-size: 12px;
}

.receipt-number small {
    display: block;
    margin-top: 5px;
    color: #6a786b;
}

.receipt-title-block {
    margin: 28px 0;
}

.receipt-title-block h1 {
    margin: 7px 0 10px;
    font-size: 32px;
}

.receipt-title-block p {
    margin: 0;
    color: #5a6b5d;
    line-height: 1.7;
}

.receipt-amount-highlight {
    color: #178a3e;
    font-size: 20px;
}

.receipt-evidence-section,
.receipt-signature-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e8eeea;
}

.receipt-photo-frame {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e3ebe5;
    border-radius: 16px;
    background: #f8fbf8;
}

.receipt-photo-frame img {
    width: 100%;
    max-height: 440px;
    object-fit: contain;
    border-radius: 12px;
}

.signature-image-frame {
    display: inline-flex;
    margin: 12px 0;
    padding: 10px;
    border: 1px solid #e4ebe5;
    border-radius: 14px;
    background: #fff;
}

.employee-sign-card {
    max-width: 920px;
    margin: 0 auto 18px;
}

@media (max-width: 1180px) {
    .advanced-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-search-wide {
        grid-column: span 2;
    }

    .payment-form-layout {
        grid-template-columns: 1fr;
    }

    .sticky-side-card {
        position: static;
    }
}

@media (max-width: 700px) {
    .advanced-filter-grid,
    .permission-grid,
    .segmented-control,
    .signature-mode-wrap {
        grid-template-columns: 1fr;
    }

    .filter-search-wide {
        grid-column: span 1;
    }

    .toolbar-search-form,
    .grid-summary-row,
    .grid-summary-badges,
    .receipt-toolbar-actions,
    .row-actions,
    .sticky-form-actions,
    .receipt-brand-block {
        flex-direction: column;
        align-items: stretch;
    }

    .smart-select-dropdown {
        position: fixed;
        left: 10px;
        right: 10px;
        top: 90px;
        max-height: calc(100vh - 120px);
    }

    .smart-select-options {
        max-height: calc(100vh - 210px);
    }

    .receipt-logo {
        width: 130px;
    }
}

/* ============================================================
   MADERARI CONTROL V4 · ERP / POS / COMPRAS / INVENTARIO / CAJA
   ============================================================ */

.sidebar-nav-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 245px);
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(82, 232, 111, .25) transparent;
}

.sidebar-group-label {
    display: block;
    margin: 18px 12px 5px;
    color: #5f7867;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.header-action-row,
.filter-toolbar,
.filter-actions,
.row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-stat-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-business-grid {
    grid-template-columns: 1.25fr .85fr;
}

.business-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.business-mini-grid > div,
.inventory-mini-metrics > div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.business-mini-grid span,
.business-mini-grid strong,
.inventory-mini-metrics span,
.inventory-mini-metrics strong {
    display: block;
}

.business-mini-grid span,
.inventory-mini-metrics span {
    color: var(--muted);
    font-size: 12px;
}

.business-mini-grid strong,
.inventory-mini-metrics strong {
    margin-top: 7px;
    font-size: 18px;
}

.dual-table-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mini-activity-list {
    display: grid;
    gap: 8px;
}

.mini-activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: var(--text);
}

.mini-activity-row:hover {
    border-color: rgba(82,232,111,.22);
    background: rgba(82,232,111,.055);
}

.mini-activity-row strong,
.mini-activity-row span {
    display: block;
}

.mini-activity-row span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.four-tight {
    grid-template-columns: repeat(4, minmax(0,1fr));
}

.filter-toolbar {
    margin-bottom: 16px;
    align-items: end;
}

.filter-toolbar label {
    min-width: 170px;
}

.filter-search-grow {
    flex: 1;
    min-width: 240px !important;
}

.supplier-card-grid,
.inventory-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.supplier-card,
.inventory-product-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.supplier-card-top,
.inventory-product-top,
.product-profile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.supplier-card h3,
.inventory-product-card strong {
    margin: 0;
}

.supplier-info-list,
.detail-list {
    display: grid;
    gap: 9px;
}

.supplier-info-list > div,
.detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}

.supplier-info-list span,
.detail-list span {
    color: var(--muted);
}

.supplier-info-list strong,
.detail-list strong {
    text-align: right;
    word-break: break-word;
}

.three-cols {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.product-thumb-mini,
.product-thumb-large,
.product-photo-large {
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(82,232,111,.1);
    color: var(--primary);
    font-weight: 900;
    border: 1px solid rgba(82,232,111,.12);
}

.product-thumb-mini {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}

.product-thumb-large {
    width: 62px;
    height: 62px;
    border-radius: 18px;
}

.product-photo-large {
    width: 120px;
    height: 120px;
    border-radius: 24px;
}

.product-thumb-mini img,
.product-thumb-large img,
.product-photo-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-profile-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 16px;
    margin-bottom: 16px;
}

.product-main-card {
    min-height: 280px;
}

.stock-hero {
    margin: 8px 0 4px !important;
    font-size: clamp(38px, 5vw, 64px);
    letter-spacing: -.06em;
}

.stock-low,
.negative-number {
    color: #ff8d8d;
}

.positive-number {
    color: var(--primary);
}

.inventory-product-card.inventory-low-card {
    border-color: rgba(247,213,107,.22);
    box-shadow: 0 20px 50px rgba(130,96,20,.12);
}

.inventory-stock-hero {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--line);
}

.inventory-stock-hero span,
.inventory-stock-hero strong,
.inventory-stock-hero small {
    display: block;
}

.inventory-stock-hero span,
.inventory-stock-hero small {
    color: var(--muted);
}

.inventory-stock-hero strong {
    margin: 7px 0;
    font-size: 30px;
    letter-spacing: -.04em;
}

.inventory-mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.inventory-history-table,
.cash-table {
    min-width: 1350px;
}

.document-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: start;
}

.document-main-stack,
.document-side-stack {
    display: grid;
    gap: 16px;
}

.document-lines {
    display: grid;
    gap: 12px;
}

.document-line {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.02);
}

.line-grid {
    display: grid;
    grid-template-columns: minmax(230px, 2.3fr) .7fr .85fr .7fr .7fr .9fr 38px;
    gap: 10px;
    align-items: end;
}

.line-product-field {
    min-width: 0;
}

.line-total-box {
    min-height: 47px;
    padding: 8px 10px;
    border-radius: 13px;
    background: rgba(82,232,111,.08);
    border: 1px solid rgba(82,232,111,.12);
}

.line-total-box span,
.line-total-box strong {
    display: block;
}

.line-total-box span {
    color: var(--muted);
    font-size: 11px;
}

.line-total-box strong {
    margin-top: 4px;
}

.line-remove {
    width: 38px;
    height: 47px;
    border: 1px solid rgba(255,100,100,.16);
    border-radius: 13px;
    color: #ff9494;
    background: rgba(255,100,100,.07);
    cursor: pointer;
    font-size: 20px;
}

.line-hint {
    min-height: 16px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}

.document-summary h2 {
    margin: 7px 0 18px;
}

.summary-lines {
    display: grid;
    gap: 11px;
}

.summary-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.summary-lines span {
    color: var(--muted);
}

.summary-grand {
    margin-top: 6px;
    padding: 16px !important;
    border: 1px solid rgba(82,232,111,.18) !important;
    border-radius: 16px;
    background: rgba(82,232,111,.08);
}

.summary-grand strong {
    color: var(--primary);
    font-size: 22px;
}

.stacked-actions {
    margin-top: 18px;
    flex-direction: column;
}

.stacked-actions .btn {
    width: 100%;
}

.upload-zone,
.compact-upload {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 24px;
    border: 1px dashed rgba(82,232,111,.24);
    border-radius: 18px;
    background: rgba(82,232,111,.035);
    cursor: pointer;
}

.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-zone-title {
    font-weight: 850;
}

.upload-zone-help {
    color: var(--muted);
    font-size: 12px;
}

.field-gap {
    margin-top: 16px;
}

.document-totals-block {
    width: min(420px, 100%);
    margin: 18px 0 0 auto;
    display: grid;
    gap: 8px;
}

.document-totals-block > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.document-totals-block span {
    color: var(--muted);
}

.document-totals-block .grand {
    padding: 16px;
    border: 1px solid rgba(82,232,111,.18);
    border-radius: 16px;
    background: rgba(82,232,111,.08);
}

.document-totals-block .grand strong {
    color: var(--primary);
    font-size: 20px;
}

.attachment-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}

.attachment-gallery a {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: var(--text);
}

.attachment-gallery img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 11px;
}

.attachment-gallery span {
    color: var(--muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-danger {
    border-color: rgba(255,100,100,.18);
    background: rgba(255,100,100,.1);
    color: #ff9b9b;
}

.cash-account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.cash-account-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cash-balance-big {
    display: block;
    margin: 18px 0 6px;
    color: var(--primary);
    font-size: clamp(34px, 4vw, 52px);
    letter-spacing: -.055em;
}

.narrow-form-card {
    max-width: 680px;
}

.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 16px;
    align-items: start;
}

.pos-search-row {
    margin-bottom: 16px;
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pos-product-card {
    appearance: none;
    display: grid;
    gap: 7px;
    padding: 12px;
    text-align: left;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    transition: .18s ease;
}

.pos-product-card:hover {
    transform: translateY(-2px);
    border-color: rgba(82,232,111,.25);
    box-shadow: 0 16px 32px rgba(82,232,111,.08);
}

.pos-product-card span {
    color: var(--muted);
    font-size: 12px;
}

.pos-product-card b {
    color: var(--primary);
    font-size: 17px;
}

.pos-product-image {
    width: 100%;
    aspect-ratio: 16/10;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    background: rgba(82,232,111,.08);
    color: var(--primary);
    font-weight: 900;
}

.pos-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pos-cart-panel h2 {
    margin: 7px 0 16px;
}

.pos-cart-empty {
    padding: 28px 14px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 16px;
}

.pos-cart-lines {
    display: grid;
    gap: 9px;
    max-height: 440px;
    overflow-y: auto;
}

.pos-cart-line {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.pos-cart-line-head,
.pos-cart-controls,
.pos-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pos-cart-line-head strong,
.pos-cart-line-head span {
    display: block;
}

.pos-cart-line-head span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.pos-remove,
.pos-qty-minus,
.pos-qty-plus {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    color: var(--text);
    cursor: pointer;
}

.pos-remove {
    width: 30px;
    height: 30px;
    color: #ff9b9b;
}

.pos-cart-controls {
    margin-top: 10px;
}

.pos-qty-minus,
.pos-qty-plus {
    width: 34px;
    height: 34px;
}

.pos-qty-input {
    width: 76px;
    padding: 8px;
    text-align: center;
}

.pos-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 16px;
}

.pos-total-row {
    margin: 18px 0 12px;
    padding: 16px;
    border: 1px solid rgba(82,232,111,.18);
    border-radius: 16px;
    background: rgba(82,232,111,.08);
}

.pos-total-row span {
    color: var(--muted);
}

.pos-total-row strong {
    color: var(--primary);
    font-size: 24px;
}

.installer-layout {
    min-height: calc(100vh - 80px);
}

.installer-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 26px;
}

.installer-feature-grid > div {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.installer-feature-grid strong {
    color: var(--primary);
    font-size: 18px;
}

.installer-feature-grid span {
    color: #c1d2c5;
    font-size: 13px;
}

@media (max-width: 1380px) {
    .line-grid {
        grid-template-columns: minmax(220px, 2fr) repeat(4, .8fr) .9fr 38px;
    }
    .pos-product-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 1180px) {
    .dashboard-stat-six,
    .four-tight,
    .dashboard-business-grid,
    .dual-table-grid,
    .product-profile-grid,
    .document-layout-grid,
    .pos-layout {
        grid-template-columns: 1fr;
    }
    .supplier-card-grid,
    .inventory-card-grid,
    .cash-account-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .line-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .line-product-field {
        grid-column: span 2;
    }
    .line-remove {
        width: 100%;
        height: 42px;
    }
    .attachment-gallery {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-stat-six,
    .four-tight,
    .supplier-card-grid,
    .inventory-card-grid,
    .cash-account-grid,
    .business-mini-grid,
    .three-cols,
    .attachment-gallery,
    .pos-product-grid,
    .pos-customer-grid,
    .installer-feature-grid {
        grid-template-columns: 1fr;
    }
    .header-action-row,
    .filter-toolbar,
    .filter-actions,
    .supplier-card-top,
    .inventory-product-top,
    .product-profile-top,
    .mini-activity-row {
        align-items: stretch;
        flex-direction: column;
    }
    .line-grid {
        grid-template-columns: 1fr;
    }
    .line-product-field {
        grid-column: span 1;
    }
    .product-photo-large {
        width: 100%;
        height: 180px;
    }
}