:root {
  --ink: #071343;
  --muted: #64739a;
  --soft: #edf1ff;
  --line: #dfe5f4;
  --blue: #2f3bf2;
  --violet: #6346f5;
  --violet-2: #7c64ff;
  --green: #00a86b;
  --orange: #f28a0c;
  --red: #ef4444;
  --bg: #f7f9ff;
  --card: rgba(255,255,255,.86);
  --shadow: 0 18px 45px rgba(24, 32, 80, .10);
  --radius: 24px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
body { font-family: var(--font); color: var(--ink); background: radial-gradient(circle at top right, #ffffff 0, #f8faff 42%, #f2f5ff 100%); }
a { color: var(--blue); text-decoration:none; font-weight:700; }
.icon { width: 23px; height: 23px; flex: 0 0 auto; }
.icon-lg { width: 34px; height: 34px; }
.chev { width: 14px; height: 14px; opacity:.7; }
.btn-icon { width: 20px; height: 20px; }
.pill-icon { width: 18px; height: 18px; }
.field-icon { width: 22px; height: 22px; color:#8fa0ca; }
button, input { font: inherit; }

.app-body { overflow-x:hidden; }
.app-shell { min-height:100vh; display:grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:34px 20px 28px; display:flex; flex-direction:column; background:rgba(255,255,255,.72); border-right:1px solid rgba(198,207,234,.7); box-shadow: 14px 0 44px rgba(41,57,112,.07); overflow-y:auto; scrollbar-width:thin; scrollbar-color: rgba(88,99,232,.45) transparent; }
.brand { display:flex; align-items:center; color:var(--ink); margin-bottom:46px; }
.logo-type { display:flex; flex-direction:column; line-height:1; }
.logo-type strong { font-size:25px; letter-spacing:-.04em; }
.logo-type span { font-weight:700; color:var(--blue); font-size:18px; margin-top:3px; text-align:center; width:100%; display:block; }
.sidebar-nav { display:flex; flex-direction:column; gap:20px; }
.sidebar::-webkit-scrollbar { width:10px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(88,99,232,.28); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
.nav-group { display:flex; flex-direction:column; gap:10px; }
.nav-group-label { padding:0 6px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#8b98ba; }
.side-link { position:relative; display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:16px; color:var(--ink); font-weight:650; transition:.2s ease; }
.side-link-sub { margin-left:2px; }
.side-link .icon { color:#9aa7c9; }
.side-link.active { background: linear-gradient(120deg, rgba(98,70,245,.12), rgba(255,255,255,.92)); border:1px solid rgba(98,70,245,.16); color:var(--blue); box-shadow: 0 12px 24px rgba(76,70,229,.10); }
.side-link-sub.active::before { content:""; position:absolute; left:-12px; top:12px; bottom:12px; width:4px; border-radius:999px; background:var(--blue); box-shadow: 0 0 0 4px rgba(74,66,244,.12); }
.side-link.active .icon { color:var(--blue); }
.mra-mode { margin-top:auto; border:1px solid #e4e9f6; background:#fff; border-radius:15px; padding:16px 18px; box-shadow: var(--shadow); display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:center; }
.mra-mode small { grid-column:2; color:#7d89ad; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-green { background:#10b981; }
.dot-orange { background:#f59e0b; }
.dot-blue { background:#4f46e5; }
.dot-red { background:#ef4444; }
.main { min-width:0; padding: 20px 28px 42px; }
.topbar { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:28px; }
.searchbar { width:min(590px, 56vw); height:56px; border:1px solid #dbe3f4; border-radius:14px; background:rgba(255,255,255,.85); display:flex; align-items:center; gap:12px; padding:0 18px; box-shadow: 0 8px 24px rgba(21,31,80,.04); }
.searchbar input { border:0; background:transparent; outline:0; flex:1; color:var(--ink); }
.searchbar kbd { color:#8b98ba; border:1px solid #e4e9f6; border-radius:8px; padding:5px 8px; background:#f8faff; }
.top-actions { display:flex; align-items:center; gap:18px; }
.icon-btn, .company-switch { border:0; background:white; color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 22px rgba(24,32,80,.05); }
.icon-btn { width:48px; height:48px; position:relative; background:transparent; box-shadow:none; }
.icon-btn.has-count span { position:absolute; top:4px; right:6px; width:18px; height:18px; display:grid; place-items:center; color:white; font-size:11px; background:var(--blue); border-radius:50%; }
.company-switch { gap:12px; height:56px; padding:0 18px; border:1px solid #dfe5f4; border-radius:14px; font-weight:700; cursor:pointer; }
.company-switch .icon:first-child { color:var(--blue); }
.company-switch-wrap { position:relative; }
.company-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:320px; background:white; border:1px solid #e4e9f6; border-radius:16px; box-shadow:0 16px 48px rgba(24,32,80,.12); opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s ease; z-index:100; overflow:hidden; }
.company-dropdown.open { opacity:1; visibility:visible; transform:translateY(0); }
.company-dropdown-header { display:flex; align-items:center; gap:10px; padding:14px 18px; font-size:12px; font-weight:600; color:#8b98ba; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid #f0f3fa; }
.company-dropdown-item { padding:14px 18px; display:flex; flex-direction:column; gap:4px; }
.company-dropdown-item.active { background:#f4f7ff; }
.company-dropdown-item.active strong { color:var(--ink); font-size:15px; }
.company-dropdown-item.active small { color:#8b98ba; font-size:12px; }
.company-dropdown-item.empty { color:#8b98ba; font-style:italic; }
.company-dropdown-notice { display:flex; align-items:center; gap:8px; padding:12px 18px; background:#fafbfd; border-top:1px solid #f0f3fa; color:#6b7a99; font-size:12px; }
.company-dropdown-notice .icon { color:var(--blue); flex-shrink:0; }
.page-content { width:100%; margin:0; }
.page-title { display:flex; align-items:center; justify-content:space-between; gap:22px; margin: 6px 0 24px; }
.page-title h1 { margin:0 0 6px; font-size:40px; letter-spacing:-.045em; }
.page-title p { margin:0; font-size:18px; color:var(--muted); }
.page-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.btn { border:1px solid #dbe3f4; border-radius:12px; height:56px; padding:0 22px; background:#fff; display:inline-flex; align-items:center; justify-content:center; gap:10px; color:var(--ink); cursor:pointer; font-weight:750; box-shadow: 0 10px 24px rgba(19,30,75,.05); }
.btn-primary { border:0; color:white; background:linear-gradient(135deg, #6e56ff, #3d32ef); box-shadow: 0 16px 32px rgba(73, 55, 236, .24); }
.btn-soft { color:var(--blue); background:#fff; }
.btn-ghost { background:#fff; color:#4c5b82; }
.btn-danger { color:#e34242; }
.btn[disabled], .btn-disabled { background:#e8ebf4 !important; color:#a3acc6 !important; border-color:#e8ebf4; box-shadow:none; cursor:not-allowed; }
.card, .filters-card, .stat, .control-hero { background:var(--card); border:1px solid #e0e6f5; border-radius:var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.control-hero { padding:28px 34px 34px; margin-bottom:24px; background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(240,242,255,.92)); border-bottom:4px solid #5749f3; position:relative; overflow:hidden; }
.control-hero::after { content:""; position:absolute; right:-80px; top:-80px; width:360px; height:360px; background:radial-gradient(circle, rgba(103,86,255,.14), transparent 65%); }
.control-hero h1 { margin:0 0 8px; font-size:40px; letter-spacing:-.045em; }
.control-hero p { margin:0; color:var(--muted); font-size:18px; }
.hero-flow { margin-top:28px; display:flex; align-items:center; justify-content:center; gap:28px; position:relative; z-index:1; }
.flow-step { min-width:128px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.flow-icon { width:72px; height:72px; border-radius:20px; display:grid; place-items:center; color:var(--blue); background:linear-gradient(145deg,#fff,#f0f2ff); border:1px solid #dde3fb; box-shadow: 0 15px 30px rgba(60,60,160,.12); }
.flow-dots { flex:1; max-width:138px; border-top:3px dotted #5146f3; }
.flow-step small { color:var(--muted); }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:22px; align-items:start; }
.stat { min-height:112px; padding:22px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; }
.stat-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; color:var(--blue); background:#efefff; }
.stat p { margin:0 0 3px; font-size:16px; }
.stat strong { display:block; font-size:31px; color:var(--blue); }
.stat small { color:var(--muted); }
.stat-arrow { width:20px; color:#9ba7c6; }
.stat-green .stat-icon, .stat-green strong { color:var(--green); }
.stat-orange .stat-icon, .stat-orange strong { color:var(--orange); }
.stat-gray .stat-icon, .stat-gray strong { color:#64748b; }
.stat-red .stat-icon, .stat-red strong { color:var(--red); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px 24px 0; }
.section-head h2, .card h2 { margin:0; font-size:20px; letter-spacing:-.025em; }
.section-head p { margin:4px 0 0; color:var(--muted); }
.data-card { overflow:hidden; }
.data-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.data-table th { text-align:left; color:#2c355e; background:rgba(248,249,255,.85); font-size:13px; padding:16px 18px; border-bottom:1px solid #e4e8f3; }
.data-table td { padding:16px 18px; border-bottom:1px solid #e9edf6; vertical-align:middle; }
.data-table tbody tr:hover { background:#f8f9ff; }
.data-table tbody tr.selected { background:#f1f0ff; box-shadow: inset 4px 0 0 var(--blue); }
.badge { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:5px 10px; border-radius:8px; font-weight:800; font-size:12px; white-space:nowrap; border:1px solid transparent; }
.badge-blue { color:#2e3beb; background:#eef0ff; border-color:#dfe2ff; }
.badge-purple { color:#6d45e9; background:#f1edff; border-color:#e1d7ff; }
.badge-orange, .badge-warning { color:#c95d00; background:#fff4e8; border-color:#ffd6a9; }
.badge-success, .badge-green { color:#059669; background:#e9fbf1; border-color:#bdf3d4; }
.badge-red { color:#dc2626; background:#fff0f0; border-color:#ffd5d5; }
.badge-neutral { color:#66708d; background:#f0f3f9; border-color:#e4e8f3; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:800; font-size:13px; }
.pill-success { color:#059669; background:#e9fbf1; border:1px solid #bdf3d4; }
.pill-blue { color:var(--blue); background:#f0f2ff; }
.pill-warning { color:#c95d00; background:#fff4e8; border:1px solid #ffd6a9; }
.filters-card { padding:22px; display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)) auto; gap:20px; align-items:end; margin-bottom:26px; }
.filter-field > span { display:block; font-weight:700; margin-bottom:8px; }
.filter-field button { width:100%; height:48px; border:1px solid #dce4f4; background:white; border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#263159; padding:0 15px; }
.filters-action { align-self:end; }
.form-card { padding:26px; }
.form-card h2, .panel h2 { margin:0 0 22px; font-size:20px; display:flex; gap:9px; align-items:center; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px; }
.form-grid.one { grid-template-columns:1fr; }
.form-field { display:block; }
.field-label { display:block; margin-bottom:10px; font-weight:750; color:#1e2a55; }
.required { color:#ef4444; }
.input-wrap { display:flex; align-items:center; gap:12px; min-height:56px; border:1px solid #dce4f4; border-radius:12px; background:#fff; padding:0 15px; color:#24305c; }
.input-wrap input { flex:1; border:0; outline:0; background:transparent; min-width:0; color:#24305c; }
.select-wrap input { cursor:pointer; }
.form-field small { display:block; margin-top:8px; color:#7481a8; }
.form-field.field-error .input-wrap { border-color:#ff5252; box-shadow:0 0 0 3px rgba(239,68,68,.08); }
.form-field.field-error small { color:#ef4444; }
.panel { background:rgba(255,255,255,.86); border:1px solid #e0e6f5; border-radius:20px; box-shadow:var(--shadow); padding:24px; }
.side-panel { position:sticky; top:100px; }
.info-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:15px 0; border-bottom:1px solid #edf0f7; }
.info-row span { color:#5a678f; }
.info-row strong { color:#28355e; text-align:right; }
.info-row:last-child { border-bottom:0; }
.action-row { display:flex; gap:14px; margin-top:22px; }
.action-row .btn { flex:1; }
.invoice-card { border:1px solid #dfe5f4; border-radius:16px; background:#fff; padding:18px; box-shadow:0 16px 28px rgba(30,40,90,.08); }
.invoice-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.invoice-head strong, .invoice-head small { display:block; }
.invoice-head h3 { margin:0; font-size:20px; letter-spacing:.02em; }
.invoice-meta { text-align:right; display:flex; flex-direction:column; color:#65749e; margin:8px 0; }
.invoice-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:18px 0; }
.invoice-grid small, .invoice-grid b { display:block; }
.mini-invoice-table { width:100%; border-collapse:collapse; font-size:12px; }
.mini-invoice-table th, .mini-invoice-table td { padding:10px 7px; border-bottom:1px solid #edf0f8; text-align:right; }
.mini-invoice-table th:first-child, .mini-invoice-table td:first-child { text-align:left; }
.invoice-totals { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:14px; }
.invoice-totals em { font-style:normal; font-weight:900; color:var(--blue); font-size:20px; }
.flow-mini { display:flex; align-items:center; justify-content:space-around; padding:22px; }
.flow-mini .node { display:flex; flex-direction:column; align-items:center; gap:8px; color:#65749e; font-weight:700; }
.flow-mini .node.active { color:var(--blue); }
.flow-mini .node .icon { width:35px; height:35px; padding:8px; border-radius:12px; background:#f1f0ff; box-sizing:content-box; }
.table-actions { display:flex; gap:6px; }
.tiny-btn { width:42px; height:42px; border:1px solid #e0e5f4; background:#fff; color:var(--blue); border-radius:10px; display:inline-grid; place-items:center; }
.tiny-btn .icon { width:18px; height:18px; }
.pagination { display:flex; justify-content:flex-end; gap:10px; padding:18px; }
.pagination button { width:40px; height:40px; border:1px solid #dce4f4; background:#fff; border-radius:10px; color:#52618a; }
.pagination .active { background:var(--blue); color:#fff; }
.notice { border:1px solid #d6ddff; background:#f7f7ff; color:#4050c7; border-radius:12px; padding:15px 18px; display:flex; align-items:center; gap:12px; }
.notice-warning { border-color:#ffd8a8; background:#fff9ed; color:#b45309; }
.customer-avatar { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-weight:900; background:#eef0ff; color:var(--blue); border:1px solid #dce1ff; }
.customer-avatar.gray { background:#f4f6fa; color:#667085; }
.customer-avatar.green { background:#edfbf3; color:#059669; }
.customer-avatar.orange { background:#fff5eb; color:#e66a00; }
.customer-avatar.pink { background:#fff0f6; color:#db2777; }
.customer-avatar.brown { background:#f8f2ee; color:#986344; }
.avatar-row { display:flex; align-items:center; gap:12px; }
.customer-detail { display:flex; flex-direction:column; gap:20px; }
.customer-detail .big-avatar { width:58px; height:58px; font-size:24px; border-radius:14px; }
.recent-doc { display:flex; gap:12px; align-items:center; justify-content:space-between; border:1px solid #e8ecf7; padding:12px; border-radius:12px; }
.recent-doc + .recent-doc { margin-top:10px; }
.preview-bar { height:30px; border-radius:8px; background:linear-gradient(90deg, var(--blue) 0 74%, #b6a7ff 74% 100%); }
.legend { display:flex; gap:26px; color:#6b789e; margin-top:14px; }
.legend span { display:flex; align-items:center; gap:8px; }
.requirement-card { border-color:#ffd8a8; background:linear-gradient(180deg,#fffaf0,#fffdf9); }
.req-list { border:1px solid #ffd8a8; border-radius:14px; padding:10px 16px; }
.req-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #ffe5c4; }
.req-row:last-child { border-bottom:0; }
.req-row .icon { color:#f97316; }
.req-row .badge { margin-left:auto; }
.process-flow { display:grid; gap:14px; margin-top:20px; }
.process-box { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid #e5e8f4; border-radius:12px; background:#fff; }
.process-box.warn { border-color:#ffd8a8; background:#fffaf2; }
.process-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:#f1f0ff; color:var(--blue); }
.sequence { padding:24px; border:1px solid #b8b2ff; }
.sequence-chain { display:flex; gap:18px; align-items:center; }
.sequence-node { min-width:250px; height:76px; display:flex; align-items:center; gap:14px; border:1px solid #e0e5f4; border-radius:14px; padding:12px 18px; background:#fff; }
.counter-circle { width:46px; height:46px; border:2px solid #6c63ff; border-radius:16px; display:grid; place-items:center; font-size:26px; font-weight:850; color:var(--blue); }
.hash-link { flex:1; border-top:3px dotted #4d47f4; position:relative; text-align:center; color:#6b789e; font-size:12px; }
.hash-link::after { content:"→"; position:absolute; right:-8px; top:-13px; color:#4d47f4; font-size:24px; }
.timeline { padding:24px 34px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.timeline-step { flex:1; text-align:center; position:relative; }
.timeline-step:not(:last-child)::after { content:""; position:absolute; top:38px; left:65%; right:-35%; border-top:3px dotted #22c55e; }
.timeline-step.pending:not(:last-child)::after { border-color:#5d54f4; }
.timeline-icon { width:78px; height:78px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; background:#f1f0ff; color:var(--blue); border:1px solid #dfe1fb; }
.timeline-step strong { display:block; }
.timeline-step small { color:#64739a; }
.hash-box { background:#eef1f7; padding:9px 12px; border-radius:8px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em; }
.login-body { min-height:100vh; background:radial-gradient(circle at top left,#fff 0,#f7f9ff 45%,#eef2ff 100%); }
.login-page { min-height:100vh; display:grid; grid-template-columns: 55% 45%; border:1px solid #cad5ef; border-radius:30px; overflow:hidden; }
.login-hero { min-height:100vh; padding:clamp(26px,5vh,48px) clamp(28px,5vw,64px) clamp(20px,4vh,34px); position:relative; display:flex; flex-direction:column; justify-content:space-between; background-image:url('../login.png'),linear-gradient(135deg,#fbfcff,#eff3ff); background-size:auto 100%,cover; background-position:center center,center; background-repeat:no-repeat; overflow:hidden; }
.login-copy { position:relative; z-index:1; max-width:min(560px,82%); }
.login-hero h1 { font-size:clamp(28px,3vw,38px); line-height:1.02; letter-spacing:-.06em; margin:0 0 12px; max-width:520px; text-shadow:0 1px 4px rgba(255,255,255,.92); }
.login-hero p { color:#536188; font-size:clamp(13px,1.2vw,15px); line-height:1.34; max-width:590px; text-shadow:0 1px 4px rgba(255,255,255,.92); }
.login-visual { position:relative; height:560px; margin-top:25px; }
.mock-invoice { position:absolute; left:0; top:55px; width:220px; background:#fff; border:1px solid #dfe6f4; border-radius:14px; box-shadow:0 22px 44px rgba(35,47,100,.16); padding:28px 22px; transform:rotate(.4deg); }
.mock-invoice::before, .mock-invoice::after { content:""; position:absolute; inset:22px -20px auto auto; width:210px; height:300px; border:1px solid #e4e9f6; border-radius:14px; background:#fff; z-index:-1; transform:rotate(7deg); }
.mock-invoice::after { transform:rotate(-6deg); right:-40px; }
.mock-invoice h3 { color:#2f3bf2; margin:0 0 20px; }
.mock-line { height:2px; background:#dfe5f4; margin:14px 0; }
.mock-qr { width:78px; height:78px; }
.map-wrap { position:absolute; left:300px; top:0; width:360px; height:440px; opacity:.85; }
.login-api-card { position:absolute; left:285px; top:270px; width:320px; background:#fff; border:1px solid #e4e9f6; border-radius:14px; box-shadow:var(--shadow); padding:16px 22px; }
.login-api-card div { display:flex; align-items:center; gap:14px; justify-content:space-between; border-bottom:1px solid #eef1f7; padding:13px 0; }
.login-api-card div:last-child { border-bottom:0; }
.api-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#f0efff; color:var(--blue); }
.login-flow { position:absolute; left:260px; top:220px; right:30px; display:flex; align-items:center; gap:24px; }
.login-flow .flow-box { width:86px; height:86px; border-radius:18px; background:#fff; display:grid; place-items:center; color:var(--blue); box-shadow:var(--shadow); border:1px solid #e2e7f6; }
.login-flow .flow-dots { max-width:120px; }
.feature-pills { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,24px); margin-top:auto; }
.feature-pills span { display:flex; align-items:center; gap:10px; font-size:clamp(12px,1.25vw,15px); line-height:1.1; font-weight:700; }
.feature-pills .iconbox { flex:0 0 auto; width:clamp(42px,4vw,54px); height:clamp(42px,4vw,54px); border-radius:14px; display:grid; place-items:center; background:#fff; color:var(--blue); box-shadow:var(--shadow); }
.login-footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; color:#65749e; }
.login-panel { display:grid; place-items:center; background:rgba(255,255,255,.6); }
.login-card { width:min(480px, 84%); background:#fff; border:1px solid #e1e7f5; border-radius:18px; padding:52px 48px 36px; box-shadow:0 18px 48px rgba(33,42,90,.10); text-align:center; }
.login-card .brand { justify-content:center; margin:0 0 35px; }
.login-card h2 { font-size:29px; letter-spacing:-.04em; margin:0 0 28px; }
.login-card .form-field { text-align:left; margin-bottom:22px; }
.login-card .btn { width:100%; }
.login-card .forgot { display:block; margin:22px 0 34px; }
.login-card .secure { border-top:1px solid #e6ebf5; padding-top:24px; color:#7a87aa; display:flex; gap:10px; justify-content:center; }
.invoice-page-body { background:#f8faff; }
.invoice-toolbar { height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 26px; border-bottom:1px solid #e4e9f6; background:rgba(255,255,255,.86); position:sticky; top:0; z-index:2; }
.invoice-stage { min-height:calc(100vh - 90px); display:grid; place-items:start center; padding:24px; }
.invoice-sheet { width:840px; min-height:980px; background:white; padding:46px 52px 38px; box-shadow:0 16px 44px rgba(24,32,80,.16); color:#111; }
.invoice-sheet header { display:flex; justify-content:space-between; align-items:flex-start; }
.invoice-logo { display:flex; align-items:center; gap:14px; }
.invoice-logo img { width:42px; }
.invoice-logo strong { display:block; font-size:24px; }
.invoice-logo small { font-size:12px; font-weight:800; display:block; }
.seller { display:flex; flex-direction:column; line-height:1.45; }
.accent-line { width:260px; height:4px; background:#3d32ef; margin:22px 0; }
.invoice-sheet h1 { margin:0 0 12px; font-size:28px; }
.invoice-parties { border-top:1px solid #444; display:grid; grid-template-columns: 1fr 1fr; gap:24px; margin:22px 0; }
.invoice-parties > div { padding-top:12px; }
.invoice-parties h3 { margin:0 0 8px; }
.invoice-parties dl, .print-totals dl { display:grid; grid-template-columns:1fr auto; gap:8px 16px; margin:0 0 18px; }
.invoice-parties dt, .print-totals dt { font-weight:500; }
.invoice-parties dd, .print-totals dd { margin:0; text-align:right; }
.print-table { width:100%; border-collapse:collapse; margin-top:22px; font-size:14px; }
.print-table th, .print-table td { border:1px solid #aaa; padding:14px 12px; text-align:right; }
.print-table th:nth-child(2), .print-table td:nth-child(2) { text-align:left; }
.print-table th:first-child, .print-table td:first-child { text-align:center; }
.print-footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:40px; }
.print-qr { width:110px; border:1px solid #aaa; padding:8px; }
.print-totals { align-self:start; border-bottom:2px solid #111; padding-bottom:10px; }
.print-totals dt:last-of-type, .print-totals dd:last-of-type { font-weight:900; border-top:2px solid #111; padding-top:14px; }
.note { margin-top:36px; font-size:13px; }
.invoice-sheet footer { border-top:2px solid #444; margin-top:36px; padding-top:18px; display:flex; align-items:center; justify-content:center; gap:10px; color:#5a6682; }
.invoice-sheet footer .icon { width:20px; }
.reference-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.reference-card { background:white; border:1px solid #dfe5f4; border-radius:18px; padding:14px; box-shadow:var(--shadow); }
.reference-card img { width:100%; display:block; border-radius:12px; }
@media (max-width: 1100px) { .app-shell { grid-template-columns: 90px 1fr; } .sidebar { padding:24px 14px; } .logo-type, .nav-group-label, .side-link span, .mra-mode strong, .mra-mode small { display:none; } .brand { justify-content:center; margin-bottom:28px; } .side-link { justify-content:center; padding:16px; } .nav-group { gap:8px; } .sidebar-nav { gap:14px; } .grid-main { grid-template-columns:1fr; } .side-panel { position:static; } .filters-card { grid-template-columns:repeat(2,1fr); } .login-page { grid-template-columns:1fr; } .login-hero { display:none; } }
@media (max-width: 760px) { .main { padding:18px; } .topbar { flex-direction:column; align-items:stretch; } .searchbar { width:100%; } .page-title { align-items:flex-start; flex-direction:column; } .grid-2,.grid-3,.grid-4,.form-grid,.filters-card { grid-template-columns:1fr; } .hero-flow,.sequence-chain,.timeline { flex-direction:column; align-items:stretch; } .flow-dots,.hash-link,.timeline-step::after { display:none !important; } .invoice-sheet { width:100%; padding:30px 20px; } }