:root {
  --green-950: #082954;
  --green-800: #0c356b;
  --green-700: #0f3d7a;
  --green-100: #e7eef8;
  --ink: #17243a;
  --muted: #68758a;
  --line: #e2e7ef;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --red: #ff3b30;
  --amber: #ffb238;
  --blue: #0f3d7a;
  --shadow: 0 12px 36px rgba(15, 61, 122, 0.1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "DM Sans", sans-serif; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 1.15em; height: 1.15em; display: block; flex: 0 0 auto; color: currentColor; }
.icon-button .ui-icon, .sidebar-toggle .ui-icon, .notification-button .ui-icon { width: 20px; height: 20px; }
body.login-active { height: 100dvh; overflow: hidden; }
.login-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: stretch; padding: 0; overflow: hidden; background: #fff; }
.login-screen.authenticated { display: none; }
.login-screen.restoring .login-shell { display: none; }
.session-restoring { display: none; color: var(--green-950); font: 800 16px Manrope, sans-serif; }
.login-screen.restoring .session-restoring { display: block; }
.login-shell { width: 100%; height: 100dvh; min-height: 0; display: grid; grid-template-columns: minmax(390px,44%) minmax(0,56%); overflow: hidden; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.login-card { min-width: 0; padding: clamp(38px,5.2vw,76px); background: white; display: grid; align-content: center; gap: 16px; }
.login-logo { width: min(360px,100%); height: 190px; object-fit: contain; justify-self: center; margin: 0 0 18px; }
.login-heading { margin-bottom: 4px; }
.login-card h1 { margin: 0; font: 800 27px "Manrope",sans-serif; }
.login-card p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.login-card label { display: grid; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 700; }
.login-card input { min-height: 52px; border: 1px solid #d7dee8; border-radius: 10px; padding: 14px 15px; outline-color: var(--green-700); background: #fbfcfe; }
.login-card input:focus { border-color: #5d83b8; box-shadow: 0 0 0 3px rgba(15,61,122,.09); background: #fff; }
.login-help { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 10px; }
.login-help .text-button { justify-self: auto; }
.login-submit { min-height: 54px; margin-top: 3px; background: linear-gradient(115deg,#082954,#0f3d7a); font-size: 14px; }
.login-showcase { position: relative; overflow: hidden; padding: clamp(48px,7vw,94px); color: #fff; background: radial-gradient(circle at 86% 18%,rgba(30,91,170,.5),transparent 28%),linear-gradient(145deg,#061d40,#082954 48%,#0f3d7a); }
.login-showcase::before { content:""; position:absolute; width:360px; height:360px; right:-150px; top:-150px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018); }
.login-showcase-copy { position: relative; z-index: 2; max-width: 520px; }
.login-showcase-copy > span { color:#93b9ea; font-size:11px; font-weight:800; letter-spacing:.18em; }
.login-showcase h2 { margin: 16px 0 22px; font: 800 clamp(35px,4vw,53px)/1.12 Manrope,sans-serif; }
.login-showcase p { max-width: 480px; color:#d9e5f5; font-size:17px; line-height:1.55; }
.login-visual { position:absolute; left:13%; right:9%; bottom:7%; height:330px; }
.visual-cloud { position:absolute; right:1%; bottom:90px; width:250px; height:105px; border-radius:70px; background:linear-gradient(160deg,#7fa3d2,#254f8a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 24px 45px rgba(0,0,0,.28); opacity:.78; }
.visual-cloud::before,.visual-cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.visual-cloud::before { width:120px;height:120px;left:35px;top:-48px; }
.visual-cloud::after { width:145px;height:145px;right:18px;top:-72px; }
.visual-chart { position:absolute; right:18px; bottom:18px; width:285px; height:170px; padding:28px 30px; border-radius:22px; display:flex; align-items:end; justify-content:space-around; gap:14px; transform:perspective(700px) rotateX(4deg) rotateY(-7deg); background:linear-gradient(155deg,#1c4d8e,#0b2f63); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 28px 50px rgba(0,0,0,.34); }
.visual-chart i { width:34px; border-radius:7px 7px 3px 3px; background:linear-gradient(#9bbbe3,#3e6faa); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.visual-chart i:nth-child(1){height:43%}.visual-chart i:nth-child(2){height:68%}.visual-chart i:nth-child(3){height:87%}.visual-chart i:nth-child(4){height:58%}
.visual-card { position:absolute; width:132px; height:112px; border-radius:16px; background:linear-gradient(145deg,#8eadd7,#315e98); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 22px 45px rgba(0,0,0,.3); }
.visual-card-lines { left:12%; bottom:12px; padding:24px 20px; transform:rotate(-3deg); }
.visual-card-lines i { display:block; height:8px; margin-bottom:12px; border-radius:99px; background:rgba(255,255,255,.75); }
.visual-card-lines i:nth-child(2){width:72%}.visual-card-lines i:nth-child(3){width:48%}
.visual-card-graph { left:36%; bottom:78px; }
.visual-card-graph i { position:absolute; inset:25px; border-left:3px solid rgba(255,255,255,.65); border-bottom:3px solid rgba(255,255,255,.65); transform:skewY(-18deg); }
.login-error { min-height: 14px; color: var(--red); font-size: 10px; }
.login-card .text-button { justify-self: center; }
.login-card .login-help .text-button { justify-self: auto; }
#forgotPasswordForm, #resetPasswordForm { padding: 22px; }
#changePasswordForm { padding: 30px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
.app-shell.sidebar-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.sidebar { min-width: 0; background: var(--green-950); color: white; padding: 26px 18px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; transition: opacity .15s ease, transform .2s ease, padding .2s ease; }
.app-shell.sidebar-hidden .sidebar { opacity: 0; transform: translateX(-100%); padding-left: 0; padding-right: 0; pointer-events: none; }
.brand { display: flex; align-items: center; justify-content: center; padding: 0 8px; min-height: 70px; }
.sidebar-logo { display: block; width: 100%; max-width: 190px; max-height: 88px; object-fit: contain; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--amber), var(--red)); font: 800 23px "Manrope",sans-serif; }
.brand strong, .brand span, .sidebar-footer strong, .sidebar-footer span { display: block; }
.brand strong { font: 800 17px "Manrope",sans-serif; }
.brand span, .sidebar-footer span { font-size: 11px; color: #b8c9e4; margin-top: 2px; }
.main-nav { display: grid; gap: 5px; margin-top: 42px; overflow-y: auto; padding-right: 3px; }
.nav-item { border: 0; background: transparent; color: #c4d2e8; border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; text-align: left; font-weight: 600; }
.nav-item .nav-icon { width: 20px; height: 20px; opacity: .95; }
.nav-item .nav-label { min-width: 0; line-height: 1.15; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.11); color: white; }
.nav-item.active { box-shadow: inset 3px 0 var(--amber); }
.sidebar-footer { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center; }
.sidebar-footer strong { font-size: 12px; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff1d8; color: var(--green-800); font-weight: 800; font-size: 12px; }
.icon-button { border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 20px; padding: 5px 8px; display: inline-grid; place-items: center; }
.main-content { min-width: 0; padding: 0 34px 45px; }
.topbar { height: 104px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.eyebrow { margin: 0 0 4px; color: var(--green-700); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
.topbar h1, .section-heading h2 { font: 800 25px "Manrope",sans-serif; margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.status-chip, .soft-chip { border-radius: 999px; padding: 8px 11px; background: var(--green-100); color: var(--green-800); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.status-chip i { width: 7px; height: 7px; background: var(--amber); border-radius: 50%; }
.status-chip.warning { color: #765511; background: #fff4d8; }
.status-chip.warning i { background: var(--amber); }
.status-chip.offline { color: #9d251e; background: #ffe4e1; }
.status-chip.offline i { background: var(--red); }
.status-chip.syncing { color: #765511; background: #fff4d8; }
.status-chip b { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: currentColor; color: white; font-size: 10px; }
.notification-button { position: relative; border: 1px solid var(--line); background: white; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #082954; }
.notification-button b { position: absolute; top: -5px; right: -5px; background: var(--red); color: white; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 9px; }
.notification-button.has-notifications { color: var(--green-700); box-shadow: 0 0 0 3px rgba(255,178,56,.18); }
.notification-dialog { width: min(560px, calc(100% - 30px)); }
.notification-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px; border-bottom: 1px solid var(--line); }
.notification-dialog-header h3 { margin: 2px 0 3px; font: 800 20px "Manrope",sans-serif; }
.notification-dialog-header span { color: var(--muted); font-size: 10px; }
.notification-list { display: grid; gap: 8px; max-height: 68vh; overflow-y: auto; padding: 14px; }
.notification-item { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 11px; text-align: left; color: var(--ink); }
.notification-item:hover { border-color: #9bb3d6; background: #f8fafc; }
.notification-item-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #fff3d8; color: #765511; font-weight: 800; }
.notification-item.danger .notification-item-icon { background: #ffe8e6; color: var(--red); }
.notification-item strong, .notification-item span { display: block; }
.notification-item strong { font-size: 11px; }
.notification-item span { color: var(--muted); font-size: 9px; margin-top: 3px; }
.notification-item em { color: var(--green-700); font-size: 9px; font-style: normal; font-weight: 800; }
.sidebar-toggle { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); font-size: 20px; }
.view { display: none; animation: fade .25s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hero-panel { min-height: 180px; padding: 34px 38px; color: white; border-radius: 20px; display: flex; align-items: end; justify-content: space-between; background: radial-gradient(circle at 75% 20%, rgba(255,178,56,.38), transparent 24%), linear-gradient(120deg, #082954, #0f3d7a); box-shadow: var(--shadow); }
.hero-panel h2 { font: 800 32px "Manrope",sans-serif; margin: 6px 0; }
.hero-panel p:last-child { margin: 0; color: #dbe6f6; font-size: 13px; }
.dashboard-heading { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 2px; }
.dashboard-heading h2 { margin: 0; font: 800 25px Manrope, sans-serif; }
.octo-dashboard { padding-bottom: 12px; }
.octo-dashboard-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.octo-dashboard-heading h2 { margin: 0; font: 800 25px "Manrope",sans-serif; color: #0d2343; }
.octo-dashboard-heading select { min-width: 127px; padding: 10px 34px 10px 13px; border: 1px solid #dce4ef; border-radius: 9px; background: #fff; color: #17325a; font-size: 11px; font-weight: 700; outline-color: var(--green-700); }
.octo-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.octo-kpi-card { min-width: 0; min-height: 124px; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 14px; padding: 20px; border: 1px solid #e2e8f1; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(8,41,84,.055); }
.octo-kpi-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 11px; font-size: 20px; font-weight: 800; }
.octo-kpi-icon .ui-icon { width: 23px; height: 23px; }
.octo-kpi-card span,.octo-kpi-card strong,.octo-kpi-card small { display: block; }
.octo-kpi-card span { margin-bottom: 5px; color: #193354; font-size: 11px; font-weight: 700; }
.octo-kpi-card strong { color: #102441; font: 800 18px "Manrope",sans-serif; white-space: nowrap; }
.octo-kpi-card small { margin-top: 7px; color: #138a43; font-size: 10px; font-weight: 700; }
.octo-kpi-card small.negative { color: #e23636; }
.kpi-sales .octo-kpi-icon { color: #13a455; background: #eaf8ef; }
.kpi-purchases .octo-kpi-icon { color: #f03333; background: #fff0f0; }
.kpi-expenses .octo-kpi-icon { color: #1764e8; background: #edf3ff; }
.kpi-profit .octo-kpi-icon { color: #7447e8; background: #f3efff; }
.octo-analytics-grid,.octo-bottom-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: 18px; margin-bottom: 18px; }
.octo-bottom-grid { grid-template-columns: minmax(0,1.1fr) minmax(380px,.9fr); }
.octo-dashboard-card { min-width: 0; overflow: hidden; border: 1px solid #e2e8f1; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(8,41,84,.05); }
.octo-dashboard-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 0; }
.octo-dashboard-card h3 { margin: 0; color: #102441; font: 800 14px "Manrope",sans-serif; }
.octo-dashboard-card header p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.octo-line-chart { min-height: 270px; padding: 8px 15px 14px; }
.octo-line-chart svg { display: block; width: 100%; height: 260px; overflow: visible; }
.octo-chart-grid { stroke: #e6ebf2; stroke-width: 1; }
.octo-chart-area { fill: url(#octoSalesGradient); }
.octo-chart-line { fill: none; stroke: #1764e8; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.octo-chart-point { fill: #1764e8; stroke: #fff; stroke-width: 3; }
.octo-chart-label { fill: #68758a; font: 11px "DM Sans",sans-serif; }
.category-content { min-height: 278px; display: grid; grid-template-columns: minmax(170px,1fr) minmax(160px,.8fr); align-items: center; gap: 18px; padding: 12px 24px 24px; }
.category-donut { width: min(210px,100%); aspect-ratio: 1; position: relative; justify-self: center; border-radius: 50%; background: #e9eef5; }
.category-donut::after { content:""; position:absolute; inset:22%; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(15,61,122,.04); }
.category-donut span { position:absolute; z-index:1; inset:0; display:grid; place-items:center; color:#102441; font:800 20px "Manrope",sans-serif; }
.category-legend { display: grid; gap: 15px; }
.category-legend-row { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 9px; color: #1e3557; font-size: 10px; }
.category-legend-row i { width: 9px; height: 9px; border-radius: 50%; }
.category-legend-row strong { font-size: 10px; }
.recent-sales-card .table-wrap { margin-top: 12px; }
.recent-sales-card table { min-width: 560px; }
.recent-sales-card th { padding: 10px 20px; color: #748197; background: #fbfcfe; font-size: 9px; }
.recent-sales-card td { padding: 10px 20px; border-top: 1px solid #edf1f6; color: #1d3658; font-size: 10px; }
.recent-sales-card td strong { color: #102441; }
.dashboard-card-link { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-top: 1px solid #edf1f6; background: #fff; color: #1764e8; font-size: 10px; font-weight: 800; }
.dashboard-card-link span { font-size: 20px; line-height: 1; }
.dashboard-card-link:hover { background: #f8fbff; }
.dashboard-sale-link { border: 0; background: transparent; color: #1764e8; padding: 4px; font-size: 9px; font-weight: 800; }
.receivables-summary-card { padding-bottom: 0; }
.receivables-total { padding: 20px 20px 10px; }
.receivables-total span,.receivables-total strong { display: block; }
.receivables-total span { color: #54647b; font-size: 9px; }
.receivables-total strong { margin-top: 3px; color: #102441; font: 800 22px "Manrope",sans-serif; }
.receivables-progress { height: 9px; margin: 0 20px 22px; overflow: hidden; border-radius: 999px; background: #e5ebf4; }
.receivables-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0f3d7a,#1764e8); transition: width .25s ease; }
.receivables-status-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 0 20px 18px; }
.receivables-status-grid > div { min-width: 0; min-height: 80px; display: grid; place-items: center; align-content: center; padding: 8px; border: 1px solid #e5eaf2; border-radius: 10px; text-align: center; }
.receivables-status-grid b { color: #0f3d7a; font-size: 15px; }
.receivables-status-grid strong { margin: 3px 0 1px; color: #102441; font: 800 15px "Manrope",sans-serif; }
.receivables-status-grid span { color: #65748a; font-size: 8px; }
.receivables-status-grid .danger b,.receivables-status-grid .danger strong,.receivables-status-grid .danger span { color: #f03333; }
.receivables-status-grid .warning b,.receivables-status-grid .warning strong,.receivables-status-grid .warning span { color: #e19a13; }
.receivables-status-grid .success b,.receivables-status-grid .success strong,.receivables-status-grid .success span { color: #18a551; }
.light { color: #ffd88e; }
.primary-button, .secondary-button { border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; font-size: 12px; }
.primary-button { background: var(--green-700); color: white; box-shadow: 0 5px 14px rgba(15,61,122,.24); }
.primary-button:hover { background: #0b3266; }
.secondary-button { background: white; color: var(--ink); border: 1px solid var(--line); }
.light-button { background: white; color: var(--green-800); box-shadow: none; }
.light-button:hover { background: #fff3dc; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 20px 0; }
.metrics-grid.compact { grid-template-columns: repeat(3, 1fr); }
.metric-card { background: white; border: 1px solid var(--line); border-radius: 15px; padding: 20px; display: flex; gap: 13px; align-items: center; box-shadow: 0 4px 16px rgba(27,68,54,.03); }
.metric-card span, .metric-card strong, .metric-card small { display: block; }
.metric-card span { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.metric-card strong { font: 800 20px "Manrope",sans-serif; }
.metric-card small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.metric-card .positive { color: var(--green-700); }
.metric-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; font-weight: 800; }
.metric-icon .ui-icon { width: 20px; height: 20px; }
.metric-icon.green { background: #e7eef8; color: var(--green-700); }
.metric-icon.blue { background: #e7f0fb; color: var(--blue); }
.metric-icon.amber { background: #fff3d8; color: var(--amber); }
.metric-icon.red { background: #fce6e6; color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-bottom: 18px; }
.panel { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 21px; box-shadow: 0 4px 16px rgba(27,68,54,.03); min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.panel-header h3 { font: 800 14px "Manrope",sans-serif; margin: 0 0 3px; }
.panel-header p { margin: 0; color: var(--muted); font-size: 10px; }
.text-button { border: 0; background: transparent; color: var(--green-700); font-weight: 700; font-size: 11px; }
.table-action { border: 1px solid var(--line); background: white; color: var(--green-700); border-radius: 7px; padding: 6px 9px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.table-action.danger { border-color: #fecaca; color: #b42318; background: #fff7f6; }
.bar-chart { height: 190px; display: flex; gap: 13px; align-items: end; padding-top: 12px; }
.bar-group { height: 100%; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: end; gap: 6px; color: var(--muted); font-size: 9px; }
.bar { width: 100%; max-width: 32px; min-height: 4px; background: linear-gradient(to top, var(--green-700), var(--amber)); border-radius: 7px 7px 3px 3px; position: relative; }
.bar:hover::before { content: attr(data-value); position: absolute; top: -27px; left: 50%; transform: translateX(-50%); background: var(--green-950); color: white; padding: 4px 6px; border-radius: 5px; white-space: nowrap; }
.alert-list { display: grid; gap: 10px; }
.alert-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: #f8faf9; }
.alert-item .alert-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #fff1d8; color: #765511; }
.alert-item strong, .alert-item span { display: block; }
.alert-item strong { font-size: 11px; }
.alert-item span { font-size: 9px; color: var(--muted); margin-top: 2px; }
.badge { display: inline-flex; border-radius: 999px; padding: 5px 8px; background: #e7eef8; color: var(--green-700); font-size: 9px; font-weight: 800; white-space: nowrap; }
.badge.warning { background: #fff2d5; color: #765511; }
.badge.danger { background: #ffe8e6; color: var(--red); }
.badge.blue { background: #e7eef8; color: var(--green-700); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 650px; }
th { color: #8a9891; text-transform: uppercase; letter-spacing: .05em; font-size: 8px; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 13px 12px; border-bottom: 1px solid #eef2f0; font-size: 10px; }
tbody tr:last-child td { border-bottom: 0; }
td strong { display: block; font-size: 10px; }
td small { display: block; color: var(--muted); font-size: 9px; margin-top: 2px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.heading-actions { display: flex; gap: 8px; }
.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.product-browser { min-height: 650px; }
.search-row, .filter-row { display: flex; gap: 12px; margin-bottom: 18px; }
.search-box { background: #f5f8f6; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; display: flex; align-items: center; gap: 8px; flex: 1; }
.search-box input { border: 0; outline: 0; background: transparent; width: 100%; padding: 11px 0; color: var(--ink); font-size: 11px; }
select, .dialog-fields input, .dialog-fields select, .cart-summary input { border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; background: white; color: var(--ink); outline-color: var(--green-700); font-size: 11px; }
.customer-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; }
.customer-picker label { min-width: 0; }
.compact-button { padding: 10px 11px; white-space: nowrap; }
.customer-balance-line { color: #b42318; font-weight: 800; }
.cashier-balance-notice { margin: 18px auto 0; width: min(680px,calc(100% - 40px)); padding: 14px 16px; border: 1px solid #f2c76f; border-left: 4px solid var(--amber); border-radius: 11px; background: #fff8e8; color: #63450c; }
.cashier-balance-notice span,.cashier-balance-notice strong,.cashier-balance-notice small { display: block; }
.cashier-balance-notice span { margin-bottom: 3px; color: #8a6416; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; }
.cashier-balance-notice strong { font-size: 13px; }
.cashier-balance-notice small { margin-top: 3px; color: #8b6a2a; font-size: 9px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.product-card { border: 1px solid var(--line); background: white; border-radius: 12px; padding: 10px; text-align: left; transition: .18s ease; overflow: hidden; }
.product-card:hover { transform: translateY(-2px); border-color: #9bb3d6; box-shadow: var(--shadow); }
.product-card .product-icon { width: 42px; height: 42px; border-radius: 10px; background: #e7eef8; color: var(--green-700); display: grid; place-items: center; font-weight: 800; margin-bottom: 12px; }
.product-image { display: block; width: 100%; height: 112px; border-radius: 9px; object-fit: cover; background: #f0f0f0; margin-bottom: 10px; }
.product-card strong, .product-card span { display: block; }
.product-card strong { font-size: 11px; min-height: 29px; }
.product-card span { color: var(--muted); font-size: 9px; margin-top: 3px; }
.product-card footer { display: flex; justify-content: space-between; align-items: end; margin-top: 13px; }
.product-card footer b { color: var(--green-700); font: 800 13px "Manrope",sans-serif; }
.cart-panel { min-width: 0; max-width: 100%; background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: sticky; top: 18px; box-shadow: var(--shadow); }
.cart-header { padding: 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.cart-header span, .cart-header strong { display: block; }
.cart-header span { font: 800 14px "Manrope",sans-serif; }
.cart-header strong { color: var(--muted); font-size: 9px; margin-top: 3px; }
.cart-items { max-height: 290px; overflow: auto; padding: 8px 18px; }
.empty-state { text-align: center; padding: 55px 20px; color: var(--muted); font-size: 11px; }
.empty-state b { display: block; font-size: 30px; color: #b8cbc3; margin-bottom: 10px; }
.cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cart-item > div, .cart-header > div, .cart-summary, .cart-summary label { min-width: 0; }
.cart-item strong, .cart-item small { overflow-wrap: anywhere; }
.cart-item strong, .cart-item small { display: block; }
.cart-item strong { font-size: 10px; }
.cart-item small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.quantity-control { display: flex; gap: 6px; align-items: center; margin-top: 7px; }
.quantity-control button { border: 1px solid var(--line); background: white; border-radius: 5px; width: 23px; height: 23px; }
.cart-summary { border-top: 1px solid var(--line); padding: 17px 18px 20px; display: grid; gap: 9px; }
.cart-summary > div { display: flex; justify-content: space-between; font-size: 10px; }
.cart-summary .grand-total { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 3px; font-size: 13px; }
.cart-summary label { color: var(--muted); display: grid; gap: 5px; font-size: 9px; margin-top: 5px; }
.cart-summary input, .cart-summary select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.customer-quick-history { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #f7faf8; font-size: 9px; }
.customer-quick-history span { display: block; color: var(--muted); }
.customer-quick-history strong { display: block; color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; }
.split-payment-summary { display: grid !important; gap: 5px; padding: 9px; border-radius: 10px; background: #e7eef8; color: var(--green-700); font-size: 9px; font-weight: 800; }
.split-payment-summary[hidden] { display: none !important; }
.cash-change-box { display: grid !important; gap: 7px; padding: 10px; border: 1px solid #dce6f2; border-radius: 12px; background: #f7fbff; }
.cash-change-box[hidden] { display: none !important; }
.cash-change-box div { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.cash-change-box strong { color: var(--green-700); font-size: 15px; }
.cash-change-box strong.pending { color: var(--red); }
.cash-change-box small { color: var(--muted); font-size: 9px; }
.pos-advanced-actions { display: flex !important; flex-wrap: wrap; gap: 6px; justify-content: flex-start !important; }
.pos-advanced-actions button { flex: 1 1 92px; }
.cart-line-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cart-line-actions button { border: 1px solid var(--line); background: #f7faf8; border-radius: 6px; padding: 5px 7px; font-size: 9px; color: var(--green-700); font-weight: 800; }
.line-note { color: var(--green-700) !important; font-weight: 700; }
.payment-methods { gap: 6px; margin: 5px 0; }
.payment-methods { flex-wrap: wrap; }
.payment-methods button { flex: 1 1 75px; min-width: 0; border: 1px solid var(--line); background: white; border-radius: 8px; padding: 8px 3px; font-size: 9px; color: var(--muted); }
.payment-methods button.active { border-color: var(--green-700); color: var(--green-700); background: var(--green-100); }
.checkout-button { width: 100%; padding: 13px; }
#view-pos.quotation-mode .cart-panel { border-color: var(--amber); box-shadow: 0 12px 36px rgba(255,178,56,.18); }
#view-pos.quotation-mode .cart-header { background: #fff8e9; }
#view-pos.quotation-mode #saveQuotationButton { background: var(--green-700); color: white; border-color: var(--green-700); }
.supplier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 18px; }
.enterprise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.compact-table { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.enterprise-grid .panel { min-width: 0; }
.enterprise-grid table small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.supplier-card { background: white; border: 1px solid var(--line); padding: 18px; border-radius: 14px; }
.supplier-card .supplier-avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; font-weight: 800; margin-bottom: 12px; }
.supplier-card strong, .supplier-card span { display: block; }
.supplier-card strong { font-size: 12px; }
.supplier-card span { color: var(--muted); font-size: 9px; margin-top: 4px; }
.rank-list { display: grid; gap: 12px; }
.rank-item { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; }
.rank-number { width: 22px; height: 22px; display: grid; place-items: center; background: var(--green-100); color: var(--green-700); border-radius: 6px; font-size: 9px; font-weight: 800; }
.rank-item strong, .rank-item span { display: block; font-size: 10px; }
.rank-item span { color: var(--muted); font-size: 9px; margin-top: 2px; }
.management-metrics { margin-top: -4px; }
.management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rank-list-horizontal { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.rank-list-horizontal .rank-item { min-width: 0; padding: 10px; border-radius: 11px; background: #f7faf8; }
.payment-report { display: grid; gap: 15px; padding: 10px 0; }
.payment-line header { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 7px; }
.progress { height: 7px; background: #edf2ef; border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--green-700), var(--amber)); border-radius: inherit; }
.report-filters-panel { margin-bottom: 18px; }
.report-filters { display: grid; grid-template-columns: repeat(6, minmax(115px, 1fr)) auto; gap: 10px; align-items: end; }
.advanced-report-panel { margin-top: 18px; }
.report-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.report-filters input, .report-filters select { border: 1px solid var(--line); border-radius: 9px; padding: 10px; background: white; color: var(--ink); outline-color: var(--green-700); font-size: 10px; min-width: 0; }
.report-document { color: #111; background: #fff; font-family: Arial, sans-serif; }
.report-document header { border-bottom: 2px solid var(--green-700); padding-bottom: 12px; margin-bottom: 18px; }
.report-document h1 { margin: 0 0 5px; }
.report-document p { margin: 3px 0; font-size: 11px; }
.report-document .report-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.report-document .report-summary div { border: 1px solid #ddd; padding: 10px; }
.report-document .report-summary strong { display: block; margin-top: 4px; font-size: 15px; }
.report-document table { min-width: 0; }
.report-document th, .report-document td { border: 1px solid #ddd; padding: 7px; font-size: 9px; }
.fiscal-notice { display: grid; gap: 4px; padding: 14px 17px; margin-bottom: 18px; border: 1px solid #f0d38c; border-radius: 12px; background: #fff8e6; color: #765511; font-size: 10px; }
.fiscal-notice strong { font-size: 11px; }
.tax-summary { display: grid; gap: 10px; }
.tax-summary div { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 8px; background: #f6faf8; font-size: 10px; }
.tax-summary strong { white-space: nowrap; }
.accounting-panel { margin-bottom: 18px; }
.accounting-panel .dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); margin-top: 22px; }
#view-banking .section-heading,
#view-taxes .section-heading,
#view-banking .panel-header,
#view-taxes .panel-header { align-items: flex-start; }
#view-banking .heading-actions,
#view-taxes .heading-actions { flex-wrap: wrap; justify-content: flex-end; }
#view-banking .heading-actions button,
#view-taxes .heading-actions button,
#view-taxes .heading-actions input { min-width: 0; }
#view-banking .dashboard-grid,
#view-taxes .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#view-banking .panel,
#view-taxes .panel,
#view-taxes .accounting-panel .dashboard-grid > div { min-width: 0; }
#view-banking .table-wrap,
#view-taxes .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#view-banking table,
#view-taxes table { min-width: 720px; }
#view-taxes #trialBalanceReport,
#view-taxes #generalLedgerReport,
#view-taxes #subsidiaryLedgerReport { overflow-wrap: anywhere; }
.customer-balance-list { display: grid; gap: 10px; }
.customer-balance-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 11px; border-radius: 10px; background: #f7faf8; }
.customer-balance-item strong, .customer-balance-item small { display: block; }
.customer-balance-item small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.payment-account-summary { margin: 18px 0 0; padding: 12px; background: #f5faf7; border-radius: 10px; display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
#paymentForm, #serverLoginForm { padding: 22px; }
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.device-form { display: grid; gap: 11px; margin-bottom: 15px; }
.device-form label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.device-form input, .device-form select, .device-test input { border: 1px solid var(--line); border-radius: 9px; padding: 10px; background: white; color: var(--ink); font-size: 10px; }
.device-form .switch-line { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.device-form .switch-line input { accent-color: var(--green-700); }
.device-test { display: flex; gap: 7px; }
.device-test input { min-width: 0; flex: 1; }
.device-result { margin-top: 10px; padding: 9px; border-radius: 8px; background: #f5f8f6; color: var(--muted); font-size: 9px; }
.pharmacy-operations { display: grid; gap: 18px; margin-top: 18px; }
.onboarding-grid { margin: 18px 0; }
.onboarding-checklist { display: grid; gap: 8px; margin: 12px 0 16px; }
.onboarding-item { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; padding: 10px; border-radius: 9px; background: #fff8e6; color: #765511; }
.onboarding-item.ready { background: #edf8f2; color: #17633b; }
.onboarding-item i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: white; font-style: normal; font-weight: 800; }
.contingency-panel { margin-top: 18px; }
.contingency-panel.highlight { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,178,56,.2), var(--shadow); }
.contingency-shortcut { margin-top: 16px; padding: 13px; border-radius: 10px; background: #fff8e6; border: 1px solid #f0d38c; display: grid; gap: 7px; color: #765511; font-size: 9px; }
.contingency-shortcut strong { font-size: 11px; }
.contingency-shortcut button { justify-self: start; margin-top: 2px; }
.contingency-controls { display: grid; grid-template-columns: auto 180px 1fr auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.contingency-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.contingency-controls input { border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 10px; }
.contingency-controls .switch-line { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; color: var(--ink); }
.contingency-controls .switch-line input { accent-color: var(--green-700); }
.company-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.company-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.company-form label { color: var(--muted); display: grid; gap: 6px; font-size: 10px; font-weight: 700; }
.company-form label.full, .company-form .full { grid-column: 1 / -1; }
.company-form input { border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; background: white; color: var(--ink); outline-color: var(--green-700); font-size: 12px; }
.company-form input[type="file"] { padding: 9px; background: #f8fbf9; }
.company-form small { color: var(--muted); font-size: 9px; font-weight: 400; }
.form-actions { display: flex; justify-content: end; gap: 9px; margin-top: 4px; }
.company-preview-panel { position: sticky; top: 18px; }
.company-preview { border: 1px dashed #cbd8d2; border-radius: 13px; padding: 22px; background: #fbfdfc; text-align: center; }
.company-logo, .receipt-logo { width: 74px; height: 74px; object-fit: contain; margin: 0 auto 10px; display: block; border-radius: 10px; }
.company-logo-placeholder, .receipt-logo-placeholder { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 16px; background: var(--green-100); color: var(--green-700); font: 800 28px "Manrope",sans-serif; }
.company-preview h3 { margin: 0 0 6px; font: 800 20px "Manrope",sans-serif; }
.company-preview p { margin: 4px 0; color: var(--muted); font-size: 11px; }
.business-features-panel { margin-top: 18px; }
.business-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.business-feature { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #f9fbfa; }
.business-feature strong, .business-feature span { display: block; }
.business-feature strong { font-size: 10px; }
.business-feature span { color: var(--muted); font-size: 9px; margin-top: 4px; }
.business-feature.pending { background: #fffaf0; border-color: #f2dfae; }
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 18px; }
.role-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.role-card header { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 12px; }
.role-card h3 { margin: 0; font: 800 13px "Manrope",sans-serif; }
.role-card p { color: var(--muted); margin: 4px 0 0; font-size: 9px; }
.permission-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.permission-pills span { background: #edf2fa; color: var(--green-800); border-radius: 999px; padding: 5px 7px; font-size: 8px; font-weight: 700; }
#roleForm, #userForm, #userSecurityForm, #switchUserForm, #ncfRangeForm { padding: 22px; }
.role-form-fields { display: grid; gap: 13px; margin: 20px 0; }
.role-form-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.role-form-fields input { border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; }
.role-form-fields p { margin: 5px 0 0; font-size: 10px; font-weight: 800; }
.permission-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.permission-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px !important; padding: 9px; background: #f7faf8; border-radius: 8px; color: var(--ink) !important; }
.permission-check input { accent-color: var(--green-700); }
.user-switch-list { display: grid; gap: 8px; margin-top: 20px; }
.user-switch-item { width: 100%; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 10px; }
.user-switch-item:hover { border-color: #9bb3d6; background: #f4f7fc; }
.user-switch-item strong, .user-switch-item small { display: block; }
.user-switch-item small { color: var(--muted); font-size: 9px; margin-top: 2px; }
dialog { border: 0; border-radius: 17px; padding: 0; width: min(510px, calc(100% - 30px)); box-shadow: 0 24px 80px rgba(7,59,50,.25); }
dialog::backdrop { background: rgba(7,35,29,.5); backdrop-filter: blur(2px); }
#dialogForm { padding: 22px; }
.dialog-header, .dialog-actions { display: flex; justify-content: space-between; align-items: center; }
.dialog-header h3 { font: 800 18px "Manrope",sans-serif; margin: 0; }
.dialog-error { margin: 14px 0 0; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 12px; background: #fff1f2; color: #991b1b; font-size: 11px; font-weight: 800; line-height: 1.35; }
.dialog-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin: 20px 0; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.dialog-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.dialog-fields label.full { grid-column: 1 / -1; }
.dialog-actions { justify-content: end; gap: 8px; }
#receiptDialog { width: min(560px, calc(100% - 30px)); }
#a4PreviewDialog { width: min(980px, calc(100% - 30px)); max-width: none; }
.receipt-dialog-header, .receipt-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 20px 22px; }
.receipt-dialog-header { border-bottom: 1px solid var(--line); }
.receipt-dialog-header h3 { font: 800 18px "Manrope",sans-serif; margin: 0; }
.receipt-actions { border-top: 1px solid var(--line); justify-content: end; flex-wrap: wrap; }
.receipt-preview { margin: 22px auto; width: min(340px, calc(100% - 35px)); padding: 22px; border: 1px dashed #cbd8d2; color: #17231e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; background: #fff; }
.receipt-preview h2, .print-document h2 { text-align: center; margin: 0 0 4px; font: 800 18px "Manrope",sans-serif; }
.receipt-preview h2.receipt-company-name-with-logo, .print-document h2.receipt-company-name-with-logo { margin-top: -4px; font-size: 10px; font-weight: 700; color: #59635e; }
.receipt-logo-placeholder { width: 48px; height: 48px; font-size: 19px; }
.receipt-logo { width: min(180px, 85%); height: 92px; object-fit: contain; border-radius: 0; }
.receipt-preview .receipt-meta, .print-document .receipt-meta { text-align: center; color: #617068; line-height: 1.6; }
.receipt-fiscal-block { margin: 10px 0 4px; padding: 7px 8px; border: 1px dashed #9daba4; }
.receipt-fiscal-block .receipt-line { padding: 2px 0; }
.receipt-rule { border: 0; border-top: 1px dashed #9daba4; margin: 13px 0; }
.receipt-line { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 4px 0; }
.receipt-line small { display: block; color: #75827c; margin-top: 2px; }
.receipt-total { font-size: 14px; font-weight: 800; }
.receipt-thanks { text-align: center; margin: 18px 0 0; font-weight: 700; }
.receipt-footer { border-top: 1px dashed #9daba4; margin-top: 12px; padding-top: 10px; text-align: center; color: #617068; line-height: 1.5; font-size: 9px; }
.invoice-qr { display: grid; justify-items: center; gap: 4px; color: #46524c; }
.invoice-qr img { display: block; object-fit: contain; image-rendering: pixelated; }
.invoice-qr span { font-size: 8px; line-height: 1.25; text-align: center; }
.invoice-qr-ticket { margin: 14px auto 4px; }
.invoice-qr-ticket img { width: 104px; height: 104px; }
.invoice-barcode { display: grid; justify-items: center; gap: 4px; color: #46524c; break-inside: avoid; }
.invoice-barcode-svg { display: block; width: min(230px,100%); height: 76px; }
.invoice-barcode span { font-size: 8px; line-height: 1.25; text-align: center; }
.invoice-barcode-ticket { margin: 16px auto 6px; }
.a4-note .invoice-barcode-a4 { justify-items: start; margin-top: 12px; }
.a4-note .invoice-barcode-a4 .invoice-barcode-svg { width: 180px; height: 62px; }
.a4-note .invoice-barcode-a4 span { text-align: left; }
.product-label { width: var(--label-width,50mm); height: var(--label-height,30mm); padding: 2.2mm 2.6mm; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; align-items: center; gap: 1mm; text-align: center; color: #000; background: #fff; font-family: Arial, sans-serif; box-sizing: border-box; overflow: hidden; transform: none; }
.product-label-company { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-label-name { font-size: 10.5px; font-weight: 800; line-height: 1.05; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-label-price { font-size: 16px; font-weight: 900; line-height: .95; white-space: nowrap; }
.product-label-code { font-size: 6.8px; color: #333; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-label-barcode { grid-template-rows: auto auto minmax(0,1fr) auto; padding: 1.6mm 2mm; }
.product-label-barcode .product-label-name { font-size: 8.2px; -webkit-line-clamp: 1; }
.product-label-barcode-wrap { width: 100%; min-width: 0; overflow: hidden; display: grid; place-items: center; }
.product-label-barcode-wrap .invoice-barcode-svg { width: 100%; height: 15mm; max-height: calc(var(--label-height,30mm) - 12mm); }
.product-label-barcode-wrap .invoice-barcode-svg text { font-size: 8px; }
.a4-preview-stage { max-height: 72vh; overflow: auto; padding: 28px; background: #dce3df; }
.a4-preview-sheet { width: 190mm; min-height: 270mm; margin: 0 auto; padding: 12mm; box-sizing: border-box; background: #fff; box-shadow: 0 8px 30px rgba(16,45,36,.18); }
.a4-preview-sheet .a4-document { min-height: 246mm; }
.company-approval-preview { display: flex; justify-content: center; gap: 18px; margin: 12px 0; }
.company-approval-preview img { width: 82px; height: 65px; object-fit: contain; }
.a4-document { min-height: 270mm; display: flex; flex-direction: column; color: #262b29; font-family: "DM Sans", Arial, sans-serif; }
.a4-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.a4-header h1 { margin: 4px 0; color: var(--a4-primary,#0f3d7a); font: 800 28px Manrope, sans-serif; }
.a4-header h1.a4-company-name-with-logo { margin-top: 2px; font-size: 13px; letter-spacing: .02em; color: #59635e; }
.a4-header p { margin: 2px 0; color: #59635e; }
.a4-logo { width: 210px; height: 118px; object-fit: contain; object-position: left center; }
.a4-logo-placeholder { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 18px; background: #e7eef8; color: var(--a4-primary,#0f3d7a); font: 800 32px "Manrope",sans-serif; }
.a4-title { display: grid; text-align: right; gap: 6px; min-width: 230px; }
.a4-title strong { background: var(--a4-title-bg,#e8e9ea); border-radius: 9px; padding: 8px 18px; color: #1f2522; font: 800 30px "Manrope",sans-serif; }
.a4-title span { font: 800 19px "Manrope",sans-serif; }
.a4-title time { margin-top: 18px; font-size: 16px; color: #59635e; }
.a4-rule { height: 4px; border-radius: 4px; background: var(--a4-accent,#ffb238); margin: 18px 0 8px; }
.a4-client { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 8px 4px 18px; }
.a4-client div { display: grid; gap: 5px; }
.a4-client b { color: var(--a4-primary,#0f3d7a); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.a4-client strong { font-size: 16px; }
.a4-client div:last-child { text-align: right; }
.a4-table { width: 100%; border-collapse: collapse; }
.a4-table th { background: var(--a4-primary,#0f3d7a); color: #fff; padding: 9px 12px; text-align: left; text-transform: uppercase; }
.a4-table th:first-child, .a4-table td:first-child { width: 12%; text-align: center; }
.a4-table th:nth-last-child(-n+3), .a4-table td:nth-last-child(-n+3) { text-align: right; }
.a4-table td { padding: 12px; background: #f2f4f3; border: 2px solid #fff; }
.a4-table td:nth-child(4) { font-size: 10px; }
.a4-table tbody tr:nth-child(even) td { background: #e5e8e6; }
.a4-bottom { display: grid; grid-template-columns: 1fr 280px; gap: 35px; margin-top: 45px; align-items: end; }
.a4-note { color: #59635e; }
.a4-note strong { color: #262b29; }
.a4-note .invoice-qr-a4 { justify-items: start; margin-top: 12px; }
.a4-note .invoice-qr-a4 img { width: 78px; height: 78px; }
.a4-note .invoice-qr-a4 span { max-width: 150px; text-align: left; }
.a4-totals { display: grid; gap: 7px; }
.a4-totals div { display: flex; justify-content: space-between; padding: 4px 8px; }
.a4-grand-total { background: var(--a4-primary,#0f3d7a); color: #fff; font-size: 18px; font-weight: 800; }
.a4-approval { display: grid; grid-template-columns: 1fr 280px; gap: 35px; margin-top: 38px; align-items: end; }
.a4-approval > div { min-height: 108px; display: grid; align-content: end; }
.a4-approval img { width: 170px; height: 100px; object-fit: contain; }
.a4-stamp { justify-items: start; }
.a4-signature { justify-items: center; text-align: center; border-bottom: 1px solid #59635e; }
.a4-signature img { width: 190px; }
.a4-signature span { width: 100%; background: #fff; padding: 3px 0; transform: translateY(14px); text-align: center; }
.a4-footer { width: 100%; margin-top: auto; flex: 0 0 auto; border-top: 3px solid var(--a4-accent,#ffb238); padding-top: 10px; text-align: center; color: #59635e; }
.a4-footer-contacts { display: block; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.a4-footer-contacts b { color: var(--a4-primary,#0f3d7a); }
.a4-footer-address { flex-basis: 100%; }
.profile-section-title { margin: 18px 0 10px; color: var(--primary); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.customer-profile-document .a4-table { margin-bottom: 12px; }
#printArea { display: none; }
.toast { position: fixed; right: 25px; bottom: 25px; background: var(--green-950); color: white; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow); font-size: 11px; transform: translateY(90px); opacity: 0; transition: .25s; z-index: 20; }
.toast.show { transform: none; opacity: 1; }
.pilot-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.pilot-card { display: grid; gap: 12px; align-content: start; border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: #fbfcfd; }
.pilot-card header { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.pilot-card h4 { margin: 0; font: 800 14px "Manrope",sans-serif; }
.pilot-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.pilot-card textarea { width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font: 12px "DM Sans"; }
.pilot-card select { width: 100%; }
.pilot-output { max-width: 340px; white-space: pre-wrap; color: var(--muted); font-size: 10px; line-height: 1.4; }
.license-status-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.license-status-line span { color: var(--muted); font-size: 12px; font-weight: 800; }
.license-status-line strong { font: 900 18px "Manrope", sans-serif; color: var(--primary); }
.license-status-line strong.blocked { color: var(--red); }
.muted-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.danger-button { background: #fff1f2 !important; color: #b91c1c !important; border-color: #fecdd3 !important; }

/* Readable application typography. Printed receipts keep their compact scale. */
.eyebrow { font-size: 11px; }
.primary-button, .secondary-button { font-size: 13px; }
.status-chip, .soft-chip { font-size: 12px; }
.metric-card span { font-size: 13px; }
.metric-card small { font-size: 12px; }
.panel-header h3 { font-size: 16px; }
.panel-header p, .text-button { font-size: 12px; }
.table-action { font-size: 11px; }
.danger-action { color: var(--red); border-color: #f2c8c8; }
.alert-item strong, .product-card strong { font-size: 13px; }
.alert-item span, .product-card span { font-size: 11px; }
.badge { font-size: 11px; }
th { font-size: 10px; padding: 12px; }
td, td strong { font-size: 12px; }
td small { font-size: 11px; line-height: 1.45; }
.search-box input,
select,
.dialog-fields input,
.dialog-fields select,
.cart-summary input { font-size: 13px; }
.cart-header strong, .cart-item small { font-size: 11px; }
.cart-item strong, .cart-summary > div { font-size: 12px; }
.cart-summary label, .report-filters label, .device-form label,
.contingency-controls label, .dialog-fields label, .role-form-fields label { font-size: 11px; }
.payment-methods button { font-size: 11px; }
.supplier-card span, .rank-item span, .customer-balance-item small,
.company-form small, .business-feature span, .role-card p,
.user-switch-item small { font-size: 11px; }
.supplier-card strong, .rank-item strong, .payment-line header,
.tax-summary div, .payment-account-summary, .company-form label,
.business-feature strong, .role-form-fields p { font-size: 12px; }
.report-filters input, .report-filters select,
.device-form input, .device-form select, .device-test input,
.contingency-controls input { font-size: 12px; }
.fiscal-notice, .device-result, .contingency-shortcut { font-size: 12px; line-height: 1.5; }
.fiscal-notice strong, .contingency-shortcut strong { font-size: 13px; }
.fiscal-exports-panel { margin-bottom: 18px; }
.fiscal-export-period { display: flex; align-items: end; gap: 18px; padding: 14px 16px; margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 14px; background: #f7f9fc; }
.fiscal-export-period label { display: grid; gap: 7px; min-width: 190px; color: var(--muted); font-size: 13px; font-weight: 800; }
.fiscal-export-period select { width: 100%; }
.fiscal-export-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 18px; }
.fiscal-export-actions button { display: grid; gap: 3px; text-align: left; }
.fiscal-export-actions strong { color: var(--green-700); font: 800 18px "Manrope",sans-serif; }
.fiscal-export-actions span { color: var(--muted); font-size: 10px; }
.fiscal-subsection-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 22px 0 10px; }
.fiscal-subsection-header strong { color: var(--green-700); font: 800 14px "Manrope",sans-serif; }
.fiscal-subsection-header span { color: var(--muted); font-size: 11px; }
.permission-pills span { font-size: 10px; }
.empty-state, .company-preview p, .toast { font-size: 12px; }
.restaurant-order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.restaurant-order-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; background: #fff; }
.restaurant-order-card header, .restaurant-order-card footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.restaurant-order-card h3 { margin: 0; }
.restaurant-order-card p { margin: 0; color: var(--muted); }
.restaurant-order-card ul { margin: 0; padding-left: 18px; color: var(--text); }
.restaurant-order-card footer { flex-wrap: wrap; justify-content: flex-start; }
.restaurant-order-card .order-schedule { background: #eef4fc; border-left: 4px solid var(--blue-700); border-radius: 8px; padding: 9px 11px; color: var(--blue-900); }
.order-dispatch { display: grid; gap: 5px; border: 1px solid #dce6f2; border-left: 4px solid var(--blue-700); border-radius: 10px; padding: 9px 11px; background: #f7fbff; color: var(--text); }
.order-dispatch span { line-height: 1.35; }
.order-dispatch b { color: var(--blue-900); }
.inventory-product { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.inventory-product img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; object-fit: cover; background: #f0f0f0; border: 1px solid var(--line); }
.inventory-product div { min-width: 0; }
.dialog-image-preview { display: block; width: 120px; height: 100px; object-fit: cover; margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; background: #f0f0f0; }
.table-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 16px; }
.table-pagination span { color: var(--muted); font-size: 10px; font-weight: 700; }

@media (max-width: 1100px) {
  .octo-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .octo-analytics-grid,.octo-bottom-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .report-filters { grid-template-columns: repeat(3, 1fr); }
  .contingency-controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
  .login-screen { padding: 0; }
  .login-shell { display: block; width: 100%; height: 100dvh; min-height: 0; max-width: none; }
  .login-card { min-height: 100dvh; padding: 36px 28px; overflow: hidden; }
  .login-logo { height: 145px; margin-bottom: 8px; }
  .login-showcase { display: none; }
  .app-shell { display: block; }
  .app-shell.sidebar-hidden { display: block; }
  .sidebar { position: fixed; z-index: 10; width: 244px; transform: translateX(-100%); transition: .2s; }
  .app-shell.sidebar-hidden .sidebar { opacity: 1; padding: 26px 18px 20px; pointer-events: auto; }
  .sidebar.open, .app-shell.sidebar-hidden .sidebar.open { transform: none; }
  .main-content { padding: 0 18px 35px; }
  .topbar { height: 82px; }
  .topbar .eyebrow, .status-chip { display: none; }
  .topbar h1 { font-size: 19px; }
  .hero-panel { min-height: 160px; padding: 24px; }
  .hero-panel h2 { font-size: 25px; }
  .octo-dashboard-heading { min-height: 62px; }
  .octo-line-chart { min-height: 240px; padding-left: 8px; padding-right: 8px; }
  .octo-line-chart svg { height: 230px; }
  .dashboard-grid, .pos-layout, .management-grid, .rank-list-horizontal, .enterprise-grid { grid-template-columns: 1fr; }
  #view-banking .section-heading,
  #view-taxes .section-heading,
  #view-banking .panel-header,
  #view-taxes .panel-header { flex-direction: column; align-items: stretch; }
  #view-banking .heading-actions,
  #view-taxes .heading-actions { justify-content: flex-start; width: 100%; }
  #view-banking .dashboard-grid,
  #view-taxes .dashboard-grid,
  .accounting-panel .dashboard-grid { grid-template-columns: 1fr; }
  .ecf-package-summary { grid-template-columns: 1fr; }
  .company-layout { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
  .supplier-grid { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr; }
  .device-grid { grid-template-columns: 1fr; }
  .business-features { grid-template-columns: repeat(2, 1fr); }
  .report-filters { grid-template-columns: 1fr 1fr; }
  .fiscal-export-actions { grid-template-columns: 1fr; }
  .fiscal-export-period { align-items: stretch; flex-direction: column; }
  .fiscal-export-period label { min-width: 0; }
  .pilot-grid { grid-template-columns: 1fr; }
  .restaurant-order-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .login-card { padding: 24px 22px; gap: 12px; }
  .login-logo { height: 120px; margin-bottom: 0; }
  .login-help { align-items: flex-start; flex-direction: column; gap: 5px; }
  .login-help .text-button { padding-left: 0; }
  .octo-kpi-grid { grid-template-columns: 1fr; gap: 10px; }
  .octo-kpi-card { min-height: 98px; padding: 15px; }
  .octo-analytics-grid,.octo-bottom-grid { gap: 12px; margin-bottom: 12px; }
  .category-content { grid-template-columns: 1fr; padding-top: 20px; }
  .category-donut { width: 180px; }
  .receivables-status-grid { grid-template-columns: repeat(2,1fr); }
  .octo-dashboard-card > header { padding: 16px 16px 0; }
  #userSecurityForm { padding: 20px; }
  #changePasswordForm { padding: 24px; }
  .metrics-grid, .metrics-grid.compact { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .product-card { padding: 10px; }
  .hero-panel { display: block; }
  .hero-panel button { margin-top: 20px; }
  .dialog-fields { grid-template-columns: 1fr; }
  .dialog-fields label.full { grid-column: auto; }
  .company-form { grid-template-columns: 1fr; }
  .company-form label.full, .company-form .full { grid-column: auto; }
  .business-features { grid-template-columns: 1fr; }
  .report-filters { grid-template-columns: 1fr; }
  #view-banking .heading-actions,
  #view-taxes .heading-actions { display: grid; grid-template-columns: 1fr; }
  #view-banking .heading-actions button,
  #view-taxes .heading-actions button,
  #view-taxes .heading-actions input { width: 100%; }
  #view-banking table,
  #view-taxes table { min-width: 620px; }
  #view-banking .metrics-grid.compact,
  #view-taxes .metrics-grid.compact { gap: 10px; }
  #view-banking .metric-card,
  #view-taxes .metric-card { padding: 16px; }
  #view-banking .metric-card strong,
  #view-taxes .metric-card strong { font-size: 17px; overflow-wrap: anywhere; }
  #view-taxes .tax-summary div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .contingency-controls { grid-template-columns: 1fr; }
  .a4-preview-stage { padding: 12px; }
  .restaurant-order-grid { grid-template-columns: 1fr; }
}

@media (max-height: 700px) and (min-width: 851px) {
  .login-card { padding-top: 24px; padding-bottom: 24px; gap: 10px; }
  .login-logo { height: 120px; margin-bottom: 0; }
  .login-showcase { padding-top: 42px; padding-bottom: 42px; }
  .login-visual { height: 260px; }
}

@media print {
  html, body, #printArea, #printArea * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    forced-color-adjust: none !important;
  }
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body > :not(#printArea) { display: none !important; }
  .cashier-only-balance, .cashier-balance-notice { display: none !important; }
  #printArea { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; }
  #printArea.print-a4 { width: 209mm !important; height: 296mm !important; overflow: hidden !important; }
  #printArea.print-label { width: var(--label-width,50mm) !important; height: var(--label-height,30mm) !important; min-height: 0 !important; overflow: hidden !important; }
  .print-document { color: #000; background: #fff; margin: 0 auto; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
  .print-document.ticket { width: 72mm; padding: 13mm 4mm 16mm; box-sizing: border-box; }
  .print-document.ticket-58 { width: 50mm; padding: 11mm 3mm 14mm; font-size: 9px; }
  .print-document.ticket-80 { width: 72mm; padding: 13mm 4mm 16mm; }
  .print-document.ticket .invoice-barcode-svg { width: 62mm !important; height: 20mm !important; }
  .print-document.ticket-58 .invoice-barcode-svg { width: 44mm !important; height: 18mm !important; }
  .print-document.ticket .invoice-qr-ticket img { width: 27mm !important; height: 27mm !important; }
  .print-document.ticket .invoice-qr span { color: #000 !important; }
  .print-document.product-label { margin: 0 !important; width: var(--label-width,50mm) !important; height: var(--label-height,30mm) !important; min-height: 0 !important; padding: 2.2mm 2.6mm !important; font-family: Arial, sans-serif; page: astro-label; break-inside: avoid; page-break-inside: avoid; page-break-after: avoid; transform: none !important; }
  .print-document.product-label.product-label-barcode { padding: 1.6mm 2mm !important; }
  .print-document.product-label.product-label-barcode .invoice-barcode-svg { width: 100% !important; height: 15mm !important; max-height: calc(var(--label-height,30mm) - 12mm) !important; }
  .print-document.invoice.a4-document { page: astro-a4; position: relative; width: 209mm; height: 296mm; min-height: 0; display: block; margin: 0; padding: 12mm 12mm 44mm; overflow: hidden; box-sizing: border-box; font-size: 12px; break-inside: avoid; }
  .print-document.invoice h2 { font-size: 24px; text-align: left; }
  .print-document.invoice .receipt-meta { text-align: left; }
  .a4-title strong { background: var(--a4-title-bg,#e8e9ea) !important; box-shadow: inset 0 0 0 1000px var(--a4-title-bg,#e8e9ea) !important; }
  .a4-logo-placeholder { background: #e7eef8 !important; box-shadow: inset 0 0 0 1000px #e7eef8 !important; }
  .a4-rule { background: var(--a4-accent,#ffb238) !important; box-shadow: inset 0 0 0 1000px var(--a4-accent,#ffb238) !important; }
  .a4-table th, .a4-grand-total { background: var(--a4-primary,#0f3d7a) !important; color: #fff !important; box-shadow: inset 0 0 0 1000px var(--a4-primary,#0f3d7a) !important; }
  .a4-table td { background: #f2f4f3 !important; box-shadow: inset 0 0 0 1000px #f2f4f3 !important; }
  .a4-table tbody tr:nth-child(even) td { background: #e5e8e6 !important; box-shadow: inset 0 0 0 1000px #e5e8e6 !important; }
  .print-document.invoice .invoice-qr-a4 img { width: 20mm !important; height: 20mm !important; }
  .print-document.invoice .a4-footer { position: absolute; left: 12mm; right: 12mm; bottom: 18mm; width: auto; min-height: 18mm; margin: 0; padding-top: 4mm; box-sizing: border-box; break-inside: avoid; page-break-inside: avoid; border-top-color: var(--a4-accent,#ffb238) !important; background: #fff !important; color: #000 !important; opacity: 1 !important; visibility: visible !important; z-index: 5; }
  .print-document.invoice .a4-footer-contacts { display: block !important; color: #000 !important; font: 600 9px/1.45 Arial, sans-serif !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; }
  .print-document.invoice .a4-footer-contacts span { display: block !important; color: #000 !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; }
  .print-document.invoice .a4-footer-contacts b { color: #000 !important; }
  .print-page-break { break-after: page; }
  @page { margin: 0; }
  @page astro-a4 { size: A4 portrait; margin: 0; }
  @page astro-label { size: 50mm 30mm; margin: 0; }
}

.ecf-module-notice { margin-bottom: 18px; }
.ecf-configuration-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin: 18px 0; }
.ecf-configuration-layout > .panel { margin: 0; min-width: 0; }
.form-subgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-subgrid.full { grid-column: 1 / -1; }
.ecf-bottom-grid { align-items: start; }
.sequence-input { width: 150px; max-width: 100%; }
.ecf-readiness-list { display: grid; gap: 10px; }
.ecf-readiness-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; }
.ecf-readiness-item > span { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; font-weight: 900; }
.ecf-readiness-item div { display: grid; gap: 2px; }
.ecf-readiness-item small { color: var(--muted); }
.ecf-readiness-item.passed > span { background: #e8f8ef; color: #14934a; }
.ecf-readiness-item.pending > span { background: #fff2d7; color: #b66a00; }
.ecf-certification-package { display: grid; gap: 14px; }
.ecf-package-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ecf-package-summary div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #f8fbff; display: grid; gap: 5px; }
.ecf-package-summary span, .ecf-endpoint-list small { color: var(--muted); font-size: 11px; }
.ecf-package-summary strong { color: var(--ink); font-size: 14px; }
.ecf-endpoint-list { display: grid; gap: 8px; }
.ecf-endpoint-list div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; background: #fff; }
.ecf-endpoint-list strong { color: var(--primary); font-size: 11px; letter-spacing: .08em; }
.ecf-endpoint-list code { color: var(--ink); white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.ecf-compact-notice { margin-bottom: 0; }
.ecf-pending-list { display: grid; gap: 6px; border: 1px dashed #f0d38c; border-radius: 14px; padding: 12px; background: #fffdf4; }
.ecf-pending-list strong { color: var(--ink); }
.ecf-pending-list span { color: var(--muted); font-size: 12px; }
.ecf-pending-list.ready { border-color: #b8e7c8; background: #f2fbf5; }

@media (max-width: 1050px) {
  .ecf-configuration-layout { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .form-subgrid { grid-template-columns: 1fr; }
  .sequence-input { width: 110px; }
}