@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root{
  --bg:#f4f7fb;
  --panel:#fff;
  --ink:#101828;
  --muted:#64748b;
  --line:#d9e2ef;
  --primary:#174ea6;
  --primary-dark:#0f2f5f;
  --accent:#14b8c6;
  --success:#0f8f56;
  --warning:#b7791f;
  --danger:#c24141;
  --soft:#f8fbff;
  --radius:12px;
  --shadow-sm:0 10px 26px rgba(15,23,42,.07);
  --shadow-md:0 18px 44px rgba(15,23,42,.11);
  --shadow-lg:0 28px 70px rgba(15,23,42,.16);
  --sidebar-width:250px;
  --topbar-height:72px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left,rgba(20,184,198,.13),transparent 32rem),
    linear-gradient(180deg,#f7fbff 0%,#edf3fa 42%,#f6f8fb 100%);
  line-height:1.45;
}

a{color:inherit}

.hidden{display:none!important}

.login-view{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 18% 15%,rgba(20,184,198,.17),transparent 25rem),
    linear-gradient(135deg,rgba(15,47,95,.11),rgba(23,78,166,.06)),
    #f4f7fb;
}

.login-card{
  width:min(760px,96vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}

.brand-strip{
  background:linear-gradient(135deg,#0f2f5f 0%,#143f78 72%,#0f766e 100%);
  color:#fff;
  padding:22px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}

.brand-logo-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.brand-logo{
  width:min(560px,70vw);
  max-width:100%;
  height:auto;
  display:block;
  background:#fff;
  border-radius:8px;
  padding:8px 12px;
}

.brand-strip span{font-weight:800;color:#cbd5e1}
.login-body{padding:22px}
.login-body h2{margin-top:0}
.muted{color:var(--muted)}

.legal-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 16px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  line-height:1.45;
}

.legal-consent input{
  width:auto;
  margin-top:3px;
  flex:0 0 auto;
}

.legal-consent a{
  color:#155eef;
  font-weight:800;
}

.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  grid-template-rows:var(--topbar-height) minmax(0,1fr);
  transition:grid-template-columns .18s ease;
  background:
    radial-gradient(circle at top right,rgba(20,184,198,.10),transparent 28rem),
    linear-gradient(180deg,#f6f9fd 0%,#eef4fb 100%);
}

.app.menu-collapsed{
  grid-template-columns:0 minmax(0,1fr);
}

.sidebar{
  grid-column:1;
  grid-row:2;
  width:100%;
  min-width:0;
  height:calc(100vh - var(--topbar-height));
  position:sticky;
  top:var(--topbar-height);
  background:
    linear-gradient(180deg,#0f2f5f 0%,#102a56 58%,#0b2348 100%);
  color:#fff;
  padding:18px 14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, opacity .18s ease;
}

.menu-collapsed .sidebar{
  padding-left:0;
  padding-right:0;
  transform:none;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}

.menu-collapsed .sidebar > *{
  visibility:hidden;
}

.app-topbar{
  grid-column:1 / -1;
  grid-row:1;
  height:var(--topbar-height);
  position:sticky;
  top:0;
  z-index:45;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:8px clamp(12px,2vw,22px);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}

.app-topbar-brand{
  display:flex;
  align-items:center;
  min-width:0;
}

.app-topbar-brand img{
  width:min(292px,58vw);
  height:auto;
  display:block;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.drive-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
  font-family:inherit;
  cursor:pointer;
  transition:.16s ease;
}

.drive-badge:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}

.drive-badge-ok{
  color:#065f46;
  background:#dcfce7;
  border-color:#86efac;
}

.drive-badge-warn{
  color:#92400e;
  background:#fef3c7;
  border-color:#fcd34d;
}

.drive-badge-expired{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fca5a5;
}

.topbar-logout{
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:#102a56;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.topbar-logout svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.topbar-logout:hover{
  background:#eef2f7;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
  flex:0 0 auto;
}

.sidebar-brand-icon{
  width:42px;
  height:42px;
  flex:0 0 auto;
}

.sidebar-brand strong,
.sidebar-brand span{
  display:block;
  line-height:1.2;
}

.sidebar-brand strong{
  font-size:16px;
}

.sidebar-brand span{
  color:#cbd5e1;
  font-size:12px;
  font-weight:800;
  margin-top:3px;
}

.user-chip{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  border-radius:10px;
  padding:9px;
  font-size:12px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:14px;
  flex:0 0 auto;
}

nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
  overflow:auto;
  min-height:0;
  padding-right:2px;
}

.sidebar nav{
  width:100%;
}
.nav{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
  min-height:50px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.nav:hover{
  background:rgba(255,255,255,.15);
  transform:translateX(2px);
}
.nav.active{
  background:#fff;
  color:var(--primary-dark);
  border-color:#fff;
  box-shadow:0 13px 28px rgba(15,23,42,.18);
}

.nav-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  background:linear-gradient(180deg,#f0fdff,#dbeafe);
  border:1px solid rgba(191,219,254,.9);
  color:var(--primary);
  box-shadow:0 8px 18px rgba(15,23,42,.14);
}

.icon-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.nav-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav.active .nav-icon{
  background:linear-gradient(180deg,#ecfeff,#dbeafe);
  border-color:#67e8f9;
  color:#0f766e;
}

.menu-toggle{
  position:fixed;
  left:calc(var(--sidebar-width) - 17px);
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:1px solid var(--line);
  background:var(--primary-dark);
  color:#fff;
  border-radius:6px;
  padding:0;
  font-weight:900;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  font-size:14px;
  line-height:1;
  z-index:80;
}

.menu-toggle:hover{background:#1e3f73}

.menu-toggle.disabled,
.menu-toggle:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.menu-collapsed .menu-toggle{
  left:8px;
}

.content{
  grid-column:2;
  grid-row:2;
  padding:18px clamp(12px,2vw,26px) 28px;
  min-width:0;
  overflow-x:hidden;
}

.view{display:none}
.view.active{display:block}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.panel:hover{
  box-shadow:var(--shadow-md);
}

.panel + .panel{margin-top:18px}
.panel-head{
  padding:17px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.panel-head h2{margin:0;font-size:20px;letter-spacing:0}
.panel > :not(.panel-head){padding:18px}

.settings-collapsible.collapsed > :not(.panel-head){
  display:none;
}

.section-toggle{
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f8fafc;
  color:#102a56;
  font-size:18px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.section-toggle:hover{
  background:#eaf2ff;
}

.settings-tabbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.settings-tab{
  border:1px solid #c8d2e1;
  background:#fff;
  color:#102a56;
  border-radius:9px;
  min-height:42px;
  padding:0 16px;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.settings-tab.active{
  background:#102a56;
  color:#fff;
  border-color:#102a56;
  box-shadow:var(--shadow-sm);
}

#settings > .panel[data-settings-tab-panel]{
  display:none;
}

#settings > .panel[data-settings-tab-panel].active{
  display:block;
}

.settings-locked input:disabled,
.settings-locked select:disabled,
.settings-locked textarea:disabled{
  background:#eef3f8;
  color:#334155;
  border-color:#d7e0eb;
  opacity:1;
  cursor:not-allowed;
}

.admin-tabbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.admin-tab{
  border:1px solid #c8d2e1;
  background:#fff;
  color:#102a56;
  border-radius:6px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}

.admin-tab.active{
  background:#102a56;
  border-color:#102a56;
  color:#fff;
}

.admin-section{
  display:none;
}

.admin-section.active{
  display:block;
}

.admin-details{
  margin:0;
  background:#fff;
  border:0;
  border-radius:0;
  padding:0;
}

.admin-details summary{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  margin:0 0 14px;
  padding:9px 14px;
  border:1px solid #c8d2e1;
  border-radius:6px;
  background:#f8fafc;
  color:#102a56;
  font-size:14px;
}

.admin-details[open] summary{
  background:#102a56;
  border-color:#102a56;
  color:#fff;
}

.head-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.processing-main > .panel-head{
  align-items:flex-start;
  gap:14px;
}

.processing-main > .panel-head .head-actions{
  flex:1 1 auto;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}

.processing-main > .panel-head .button{
  padding:9px 12px;
  font-size:13px;
  min-height:38px;
  white-space:nowrap;
}

.button.process-without-manual{
  background:linear-gradient(180deg,#0f766e,#0b5f59);
}

.button.process-with-manual{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
}

.button{
  border:0;
  color:#fff;
  background:linear-gradient(180deg,#1b66d6,#174ea6);
  border-radius:9px;
  padding:10px 15px;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 8px 18px rgba(23,78,166,.18);
}

.button:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.14);
}
.button.success{background:linear-gradient(180deg,#13a463,#0f8f56)}
.button.secondary{background:linear-gradient(180deg,#53657c,#40516a)}
.button.warning{background:linear-gradient(180deg,#ca8a04,#b7791f)}
.button.danger{background:linear-gradient(180deg,#d94a4a,#c24141)}
.button.ghost{background:#fff;color:#102a56;border:1px solid #b6c2d1}
.button:disabled{opacity:.55;cursor:not-allowed}

.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}
.metric{
  border:1px solid var(--line);
  border-radius:12px;
  background:
    linear-gradient(180deg,#fff,#f8fbff);
  padding:15px;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.metric span{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
}
.metric strong{
  display:block;
  margin-top:8px;
  font-size:21px;
  letter-spacing:0;
}
.metric small{
  display:block;
  color:var(--muted);
  margin-top:6px;
}

.setup-wizard-panel{
  margin-top:16px;
}

.analytics-panel{
  margin-top:16px;
}

.analytics-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.analytics-box{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:14px;
}

.analytics-box h4{
  margin:0 0 10px;
  color:var(--primary-dark);
}

.analytics-table{
  display:grid;
  gap:6px;
}

.analytics-row{
  display:grid;
  grid-template-columns:minmax(120px,1fr) 70px 105px 105px;
  gap:8px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px dashed #dbe4f0;
  font-size:13px;
}

.analytics-row:last-child{border-bottom:0}

.analytics-head{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.wizard-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}

.wizard-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:13px;
}

.wizard-step > span,
.check-item > span{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex:0 0 auto;
}

.wizard-step.done > span,
.check-item.done > span{
  color:#065f46;
  background:#dcfce7;
}

.wizard-step.pending > span,
.check-item.missing > span{
  color:#92400e;
  background:#fef3c7;
}

.wizard-step strong,
.wizard-step small{
  display:block;
}

.wizard-step small{
  color:var(--muted);
  margin-top:4px;
  line-height:1.45;
}

.pre-run-checklist{
  border:1px solid #dbe7f4;
  border-radius:12px;
  background:#f8fbff;
  padding:12px;
  margin-bottom:14px;
}

.pre-run-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.checklist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px;
}

.check-item{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:9px;
}

.check-item strong{
  font-size:13px;
}

.subscription-actions{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--soft);
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.subscription-plan-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.subscription-actions span{
  color:var(--muted);
  font-weight:800;
}

.review-prompt{
  margin-top:14px;
  border:1px solid #99f6e4;
  border-radius:8px;
  background:#f0fdfa;
  padding:14px;
  display:grid;
  gap:8px;
}

.review-prompt strong{
  color:#0f766e;
  font-size:17px;
}

.review-prompt span{
  color:#334155;
  line-height:1.5;
}

.process-shell{
  display:grid;
  gap:14px;
}

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

.processing-main{
  min-width:0;
}

.processing-side{
  display:grid;
  gap:16px;
  position:sticky;
  top:18px;
  align-self:start;
  min-width:0;
}

.processing-side .panel + .panel{
  margin-top:0;
}

.processing-side .panel{
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}

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

.upload-grid.compact .upload-card{
  padding:12px;
}

.upload-grid.compact input[type="file"]{
  font-size:15px;
}

.upload-grid.compact h3{
  font-size:15px;
  margin-bottom:10px;
}

.source-panel > :not(.panel-head){
  padding:12px 14px;
}

.source-panel .upload-grid.compact{
  grid-template-columns:1fr;
  gap:8px;
}

.source-panel .upload-grid.compact .upload-card{
  display:grid;
  grid-template-columns:minmax(82px,108px) minmax(0,1fr) auto;
  grid-template-areas:
    "title input action"
    "title name action";
  align-items:center;
  gap:6px 10px;
  padding:10px 12px;
}

.source-panel .upload-grid.compact .upload-card h3{
  grid-area:title;
  margin:0;
  font-size:14px;
  line-height:1.25;
}

.source-panel .upload-grid.compact .upload-card input[type="file"]{
  grid-area:input;
  width:100%;
  min-width:0;
  font-size:15px;
}

.source-panel .upload-grid.compact .upload-card .button{
  grid-area:action;
  justify-self:end;
  white-space:nowrap;
  min-width:78px;
}

.upload-file-name{
  grid-area:name;
  display:block;
  min-width:0;
  color:#475569;
  font-size:12px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.source-panel input[type="file"]::file-selector-button{
  margin-right:8px;
  border:1px solid #b6c2d1;
  background:#fff;
  color:#102a56;
  border-radius:5px;
  padding:5px 9px;
  font-weight:800;
}

.live-panel .log{
  height:calc(100vh - 430px);
  min-height:230px;
  max-height:420px;
  overflow:auto;
  border-radius:0;
}

.manual-entry{
  border:1px solid #f0d39a;
  background:#fffbeb;
  border-radius:8px;
  padding:12px;
}

.process-option-row{
  display:flex;
  justify-content:flex-end;
  padding:0 18px 12px;
  border-bottom:1px solid var(--line);
}

.inline-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:800;
  color:#334155;
  user-select:none;
}

.inline-check input{
  width:16px;
  height:16px;
  accent-color:var(--green);
}

.manual-insertion-focus > .panel-head .head-actions > :not(#continueProcessBtn){
  display:none;
}

.manual-insertion-focus .process-status-metrics,
.manual-insertion-focus .progress-track,
.manual-insertion-focus .process-counter-metrics,
.manual-insertion-focus #processStepsGrid{
  display:none;
}

.manual-entry-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.manual-entry-head strong{
  font-size:16px;
}

.muted-text{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

.manual-rows{
  display:grid;
  gap:12px;
}

.manual-invoice-row,
.credit-note-row{
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  padding:12px;
}

.manual-row-actions{
  margin-top:10px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.manual-compact-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.manual-row-summary{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr 1fr 1fr auto;
  gap:10px;
  align-items:center;
}

.manual-row-summary > div{
  background:#f8fbff;
  border:1px solid #dbe4f0;
  border-radius:8px;
  padding:8px 10px;
  min-height:48px;
}

.manual-row-summary span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.manual-row-summary strong{
  display:block;
  margin-top:3px;
  font-size:14px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.manual-row-summary-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  background:transparent!important;
  border:0!important;
  padding:0!important;
}

.invoice-number-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}

.manual-only-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.manual-master-details{
  margin-top:10px;
  border:1px solid #dbe4f0;
  border-radius:12px;
  background:linear-gradient(180deg,#f8fbff,#f1f6fc);
  overflow:hidden;
}

.manual-master-details summary{
  cursor:pointer;
  padding:10px 12px;
  color:var(--primary-dark);
  font-weight:900;
  list-style:none;
}

.manual-master-details summary::-webkit-details-marker{
  display:none;
}

.manual-master-details summary::after{
  content:"v";
  float:right;
  color:#475569;
}

.manual-master-details[open] summary::after{
  content:"^";
}

.manual-master-details .form-grid{
  padding:0 12px 12px;
}

.template-placement{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--soft);
  padding:12px;
}

.template-placement-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.placement-note{
  display:block;
  margin:-2px 0 12px;
  color:#475569;
  font-weight:800;
  line-height:1.45;
}

.placement-grid{
  display:grid;
  grid-template-columns:minmax(150px,1.4fr) repeat(2,minmax(82px,.55fr)) minmax(88px,.6fr) repeat(2,minmax(82px,.55fr)) minmax(88px,.6fr);
  gap:8px;
  align-items:center;
}

.placement-check{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:12px;
  font-weight:900;
  color:#334155;
}

.placement-check input{
  width:auto;
  margin:0;
}

.placement-grid-head{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:8px;
}

.placement-row{
  margin-bottom:8px;
}

.placement-row input,
.placement-row select{
  margin-top:0;
}

.template-placement.locked{
  background:#f8fafc;
}

.template-placement.locked input,
.template-placement.locked select{
  background:#eef2f7;
  color:#64748b;
}

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

.process-status-metrics{
  grid-template-columns:.8fr 1.2fr .78fr 1.22fr;
  gap:10px;
}

.process-status-metrics .metric{
  min-height:76px;
  padding:12px 14px;
}

.process-status-metrics .metric strong{
  font-size:19px;
  line-height:1.2;
}

#processLastUpdate{
  white-space:nowrap;
  font-size:18px;
}

.process-counter-metrics{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.process-counter-metrics .metric{
  min-height:64px;
  padding:10px 12px;
  border-color:#bfdbfe;
  border-left:5px solid #1d4ed8;
  background:linear-gradient(180deg,#eff6ff 0%,#ffffff 100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:10px;
  row-gap:3px;
}

.process-counter-metrics .metric span{
  color:#1d4ed8;
  font-size:16px;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.process-counter-metrics .metric strong{
  color:#102a56;
  font-size:16px;
  line-height:1.15;
  text-align:right;
}

.process-counter-metrics .metric small{
  grid-column:1 / -1;
  font-size:13px;
  line-height:1.2;
}

.progress-track{
  height:28px;
  border-radius:7px;
  background:#dfe4ec;
  overflow:hidden;
}

.progress-fill{
  width:0;
  height:100%;
  background:linear-gradient(90deg,#138a43,#22a06b);
  color:#fff;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  transition:width .2s ease;
}

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

.step-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}

.step-no{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e9eff6;
  color:#0f274a;
  font-weight:900;
  font-size:13px;
}

.step-card.completed .step-no{background:var(--success);color:#fff}
.step-card.running .step-no{background:var(--warning);color:#fff}
.step-card.failed .step-no{background:var(--danger);color:#fff}

.step-title{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.step-status{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}

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

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

.regenerate-summary{
  margin:14px 0;
  padding:12px 14px;
  border:1px solid #d8e2ef;
  border-left:4px solid var(--primary);
  border-radius:10px;
  background:#f8fbff;
  color:#334155;
  font-weight:800;
}

.panel-subtitle{
  margin:12px 0 8px;
  color:#0f2c5c;
  font-size:16px;
  font-weight:900;
}
label{font-size:12px;font-weight:800;color:#334155}
input,select,textarea{
  width:100%;
  margin-top:6px;
  border:1px solid #c6d2e2;
  border-radius:9px;
  padding:10px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.35;
  color:#0f172a;
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
textarea{min-height:92px;resize:vertical}
.full{grid-column:1/-1}

input:focus,
select:focus,
textarea:focus{
  outline:0;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(23,78,166,.13);
}

.inline-field-lock{
  position:relative;
  padding-right:58px;
}

.inline-field-lock input,
.inline-field-lock select,
.inline-field-lock textarea{
  padding-right:54px;
}

.inline-field-toggle{
  position:absolute;
  right:8px;
  bottom:8px;
  min-width:42px;
  height:30px;
  border:1px solid #c6d2e2;
  border-radius:8px;
  background:#fff;
  color:var(--primary);
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}

.inline-field-toggle:hover{
  border-color:var(--primary);
  box-shadow:0 6px 14px rgba(15,23,42,.12);
}

.inline-field-toggle[hidden]{
  display:none;
}

.inline-field-lock.field-editing input,
.inline-field-lock.field-editing select,
.inline-field-lock.field-editing textarea{
  background:#fff;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(23,78,166,.10);
  cursor:text;
}

.locked-field input,
.locked-field select,
.locked-field textarea,
.protected-field input,
.protected-field select,
.protected-field textarea,
input[readonly],
textarea[readonly],
input:disabled,
select:disabled,
textarea:disabled{
  background:#eef4fb;
  color:#64748b;
  border-color:#cbd5e1;
  cursor:not-allowed;
  box-shadow:none;
}

.protected-field::after{
  content:"Locked by admin";
  display:inline-block;
  margin-top:4px;
  color:#64748b;
  font-size:11px;
  font-weight:900;
}

.inline-admin-action{
  display:grid;
  grid-template-columns:minmax(96px,1fr) auto;
  gap:8px;
  align-items:center;
  min-width:210px;
}

.inline-admin-action select{
  height:38px;
  min-width:96px;
}

.admin-identity-cell{
  display:grid;
  gap:6px;
  min-width:190px;
}

.admin-identity-cell strong{
  color:var(--primary-dark);
  font-size:13px;
  word-break:break-word;
}

.admin-identity-cell small{
  color:var(--muted);
  font-weight:800;
  line-height:1.35;
  word-break:break-word;
}

.admin-identity-cell .identity-remark{
  border-left:3px solid var(--accent);
  padding-left:8px;
  color:#334155;
}

.admin-identity-cell .button{
  justify-self:start;
  padding:8px 10px;
  font-size:12px;
}

.admin-user-row{
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease;
}

.admin-user-row:hover,
.admin-user-row.selected{
  background:#f3f8ff;
}

.admin-user-row.selected{
  box-shadow:inset 4px 0 0 var(--primary);
}

.admin-user-detail{
  margin-top:0;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  overflow:hidden;
  min-height:calc(100vh - 180px);
}

.admin-count-label{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.admin-user-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px;
  border-bottom:1px solid var(--line);
}

.admin-detail-close{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#0f2f63;
  font-size:22px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.admin-detail-close:hover{
  background:#eef6ff;
}

.admin-user-detail-head h3{
  margin:4px 0;
  font-size:22px;
  color:var(--primary-dark);
}

.admin-user-detail-head p{
  margin:0;
  color:var(--muted);
  font-weight:800;
}

.detail-card-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  padding:18px;
}

.admin-detail-sections{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:0 18px 18px;
}

.detail-box{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:14px;
}

.detail-box.full{grid-column:1/-1}

.detail-box h4{
  margin:0 0 12px;
  font-size:16px;
  color:var(--primary-dark);
}

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

.detail-row{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:10px;
  padding:9px 0;
  border-bottom:1px dashed #dbe4f0;
}

.detail-row:last-child{border-bottom:0}

.detail-row span{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.detail-row strong{
  color:#0f172a;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.audit-log-meta{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.admin-detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.admin-detail-actions select{
  width:auto;
  min-width:130px;
}

.settings-backup-actions{margin-top:12px}

.upload-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.upload-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.upload-card h3{margin-top:0}

.asset-upload-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.asset-upload{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--soft);
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:12px;
  align-items:end;
}

.asset-upload small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rental-actions{
  justify-content:flex-start;
}

.notice{
  border:1px solid #cfe2f3;
  background:#f0f7ff;
  color:#0b4778;
  border-radius:8px;
  padding:14px;
}
.log,.file-list{
  background:#111827;
  color:#e5e7eb;
  border-radius:8px;
  padding:14px;
  min-height:160px;
  white-space:pre-wrap;
}

.version-list{
  display:grid;
  gap:10px;
}

.version-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto minmax(160px,1.2fr);
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  background:var(--soft);
  border-radius:8px;
  padding:12px;
}

.version-row span{
  font-weight:900;
  color:#0b4778;
}

.version-row small{
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.table-wrap{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}

th,td{
  border-bottom:1px solid var(--line);
  padding:11px 10px;
  text-align:left;
  vertical-align:top;
}

th{
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--soft);
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  background:#102a56;
  color:#fff;
  padding:12px 14px;
  border-radius:8px;
  display:none;
  box-shadow:0 14px 30px rgba(15,23,42,.24);
}

.legal-page{
  min-height:100vh;
  background:#eef2f7;
}

.legal-wrap{
  width:min(920px,94vw);
  margin:0 auto;
  padding:34px 0;
}

.legal-logo{
  width:min(330px,80vw);
  height:auto;
  display:block;
  margin:0 0 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 14px;
}

.legal-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 16px 38px rgba(15,23,42,.08);
  padding:26px;
}

.legal-card h1{
  margin:0 0 16px;
  color:#102a56;
}

.legal-card h2{
  margin:24px 0 8px;
  color:#102a56;
  font-size:18px;
}

.legal-card p{
  color:#334155;
  line-height:1.65;
}

.legal-meta{
  color:var(--muted)!important;
  font-weight:800;
}

.site-page{
  min-height:100vh;
  background:
    linear-gradient(180deg,#f8fbff 0%,#eef3f9 44%,#f7f9fc 100%);
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px clamp(16px,4vw,54px);
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}

.site-logo img{
  width:min(278px,58vw);
  display:block;
}

.site-nav{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  margin:0;
  overflow:visible;
  padding:0;
}

.site-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.site-nav a{
  color:#102a56;
  text-decoration:none;
  font-weight:800;
  padding:8px 4px;
}

.site-nav a:hover{
  color:#155eef;
}

.site-login-link{
  background:#102a56;
  color:#fff!important;
  padding:10px 16px!important;
  border-radius:8px;
  text-decoration:none;
  font-weight:900;
}

.site-signin-link{
  color:#102a56;
  text-decoration:none;
  font-weight:900;
  padding:10px 8px;
}

.hero-dark{
  width:100%;
  padding-left:clamp(22px,6vw,84px);
  padding-right:clamp(22px,6vw,84px);
  background:
    radial-gradient(circle at 10% 10%,rgba(34,211,238,.12),transparent 30%),
    linear-gradient(135deg,#08111f,#0f1b2e 62%,#111827);
  color:#fff;
}

.hero-dark h1{
  color:#fff;
}

.hero-dark p{
  color:#cbd5e1;
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:22px;
  color:#a7f3d0;
  font-weight:800;
}

.hero-points span::before{
  content:"\2713 ";
  color:#22d3ee;
}

.hero-invoice-card{
  justify-self:end;
  width:min(360px,100%);
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  background:#111827;
  color:#fff;
  padding:24px;
  box-shadow:0 26px 70px rgba(0,0,0,.34);
}

.hero-invoice-card > span{
  display:block;
  color:#22d3ee;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
}

.hero-invoice-card strong{
  display:block;
  margin-top:10px;
  font-size:27px;
}

.hero-invoice-card small{
  color:#94a3b8;
}

.hero-invoice-card hr{
  border:0;
  border-top:1px solid rgba(148,163,184,.22);
  margin:18px 0;
}

.invoice-mini-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  color:#cbd5e1;
}

.invoice-mini-row b{
  color:#fff;
}

.invoice-mini-row.total{
  border-top:1px solid rgba(148,163,184,.22);
  margin-top:8px;
  padding-top:16px;
  font-size:18px;
}

.signed-strip{
  margin-top:16px;
  border:1px dashed rgba(148,163,184,.38);
  border-radius:8px;
  padding:10px;
  color:#5eead4;
  font-weight:900;
  text-align:center;
}

.hero-workflow-card{
  justify-self:end;
  width:min(420px,100%);
  border:1px solid rgba(148,163,184,.28);
  border-radius:18px;
  background:#111827;
  color:#fff;
  padding:28px;
  box-shadow:0 26px 70px rgba(0,0,0,.34);
}

.hero-workflow-card > span{
  display:block;
  color:#22d3ee;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
}

.hero-workflow-card strong{
  display:block;
  margin-top:10px;
  font-size:27px;
  line-height:1.2;
}

.hero-workflow-card ul{
  margin:18px 0 0;
  padding-left:20px;
  color:#cbd5e1;
  line-height:1.8;
}

.contrast-section{
  background:#ecfeff;
  border-color:#a5f3fc;
}

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

.comparison-card{
  border-radius:12px;
  padding:24px;
  border:1px solid var(--line);
  background:#fff;
  position:relative;
  overflow:hidden;
}

.comparison-card span{
  display:block;
  text-transform:uppercase;
  font-weight:900;
  font-size:12px;
  color:var(--muted);
}

.comparison-card strong{
  display:block;
  margin:8px 0 12px;
  font-size:28px;
  color:#102a56;
}

.comparison-card ul{
  margin:0;
  padding-left:20px;
  color:#475467;
  line-height:1.7;
}

.comparison-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  font-weight:900;
  font-size:22px;
}

.comparison-icon.bad{
  color:#ef4444;
  background:#fee2e2;
}

.comparison-icon.good{
  color:#0f766e;
  background:#ccfbf1;
}

.comparison-card.manual{
  border-color:#fecaca;
  background:#fff7f7;
}

.comparison-card.automated{
  border-color:#99f6e4;
  background:#f0fdfa;
}

.feature-spotlight{
  border-color:#7dd3fc!important;
  background:linear-gradient(135deg,#eff6ff,#ecfeff)!important;
  box-shadow:0 18px 40px rgba(14,116,144,.12);
}

.section-lead{
  max-width:820px;
  color:#475467;
  font-size:17px;
  line-height:1.7;
  margin:0 0 18px;
}

.feature-comparison-section{
  background:linear-gradient(135deg,#f8fbff,#ecfeff);
  border-color:#bae6fd;
}

.feature-compare-table{
  display:grid;
  border:1px solid #cfe0f3;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 24px 60px rgba(15,23,42,.10);
}

.compare-row{
  display:grid;
  grid-template-columns:1fr 1.25fr 1.15fr;
  align-items:stretch;
  border-bottom:1px solid #e5edf7;
}

.compare-row:last-child{
  border-bottom:0;
}

.compare-row > div{
  padding:16px 18px;
  border-right:1px solid #e5edf7;
  line-height:1.45;
}

.compare-row > div:last-child{
  border-right:0;
}

.compare-row > div:first-child{
  font-weight:900;
  color:#102a56;
  background:#f8fbff;
}

.compare-head > div{
  background:#123260!important;
  color:#fff!important;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.tick,.cross,.neutral{
  display:inline-flex;
  width:24px;
  height:24px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  font-weight:900;
}

.tick{
  color:#05603a;
  background:#d1fadf;
}

.cross{
  color:#b42318;
  background:#fee4e2;
}

.neutral{
  color:#175cd3;
  background:#dbeafe;
}

.sample-invoice-section{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);
  align-items:center;
  gap:24px;
}

.sample-invoice-frame{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 22px 54px rgba(15,23,42,.12);
}

.sample-invoice-frame img{
  width:100%;
  display:block;
}

.site-eyebrow,.section-kicker{
  display:inline-flex;
  color:#155eef;
  font-weight:900;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:0;
  margin-bottom:10px;
}

.site-eyebrow{
  font-size:18px;
  color:#22d3ee;
}

.rich-hero{
  padding-top:48px;
  padding-bottom:34px;
}

.site-hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:28px;
  align-items:center;
  width:min(1180px,92vw);
  margin:0 auto;
  padding:72px 0 42px;
}

.site-hero.hero-dark{
  width:100%;
  max-width:none;
  margin:0;
  padding:42px clamp(28px,7vw,96px) 34px;
  grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);
}

.site-hero.hero-dark > div:first-child{
  max-width:780px;
}

.site-hero h1{
  margin:0 0 16px;
  font-size:clamp(34px,5vw,58px);
  line-height:1.02;
  color:#102a56;
}

.hero-dark h1{
  font-size:clamp(40px,5.4vw,66px);
  color:#f8fafc;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}

.site-hero p,.site-section p{
  color:#475467;
  line-height:1.65;
  font-size:16px;
}

.site-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.site-panel{
  display:grid;
  gap:10px;
  background:#102a56;
  color:#fff;
  border-radius:8px;
  padding:24px;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
  border:1px solid rgba(255,255,255,.14);
}

.site-panel strong{
  font-size:18px;
}

.site-panel span{
  color:#dbeafe;
  line-height:1.5;
}

.site-section{
  width:min(1180px,92vw);
  margin:0 auto 26px;
  padding:34px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.site-section h2{
  margin:0 0 18px;
  color:#102a56;
}

.site-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}

.site-grid article{
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
  background:#f8fafc;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.site-grid article:hover{
  transform:translateY(-2px);
  border-color:#b8c7dc;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}

.site-grid h3{
  margin:0 0 8px;
  color:#102a56;
}

.feature-grid article{
  min-height:170px;
}

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

.timeline-grid div{
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
  background:#f8fafc;
  min-height:190px;
}

.timeline-grid span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  background:#102a56;
  color:#fff;
  border-radius:999px;
  font-weight:900;
  margin-bottom:12px;
}

.timeline-grid strong{
  display:block;
  color:#102a56;
  font-size:18px;
  margin-bottom:8px;
}

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

.pricing-section{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.pricing-block{
  display:grid;
  gap:20px;
}

.pricing-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  border-radius:12px;
  padding:18px;
  background:linear-gradient(135deg,#f8fbff,#eefcff);
  border:1px solid #c7f9ff;
}

.pricing-highlights{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.highlight-line{
  display:block;
  border-radius:10px;
  padding:12px 15px;
  font-weight:900;
  font-size:18px;
  line-height:1.35;
  border:1px solid transparent;
}

.highlight-line.trial{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.highlight-line.access{
  background:#ecfeff;
  color:#0e7490;
  border-color:#a5f3fc;
}

.highlight-line.bonus{
  background:#f0fdf4;
  color:#15803d;
  border-color:#86efac;
}

.highlight-line.normal{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}

.pricing-cta{
  min-width:150px;
  text-align:center;
}

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

.price-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:24px;
  display:grid;
  gap:12px;
  align-content:start;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  min-height:100%;
}

.price-card.highlighted{
  border-color:#5eead4;
  box-shadow:0 18px 42px rgba(20,184,166,.14);
}

.price-card.trial-plan{
  background:linear-gradient(180deg,#ffffff,#f8fafc);
}

.price-card.plus-plan{
  background:linear-gradient(180deg,#f0fdf4,#ffffff);
  border-color:#86efac;
  box-shadow:0 18px 42px rgba(22,163,74,.12);
}

.price-card.plus-plan .plan-badge{
  background:#dcfce7;
  color:#15803d;
}

.price-card.pro-plan{
  background:linear-gradient(180deg,#f5f3ff,#ffffff);
  border-color:#c4b5fd;
  box-shadow:0 18px 42px rgba(124,58,237,.13);
}

.price-card.pro-plan .plan-badge{
  background:#ede9fe;
  color:#6d28d9;
}

.price-card.pro-plan .button{
  background:#6d28d9;
}

.plan-badge{
  display:inline-flex;
  width:max-content;
  border-radius:999px;
  padding:6px 12px;
  background:#ecfeff;
  color:#0f766e;
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
}

.price-card h3{
  margin:0;
  color:#102a56;
  font-size:22px;
}

.price{
  color:#102a56;
  font-size:38px;
  line-height:1;
}

.price-card ul{
  margin:0;
  padding-left:20px;
  color:#475467;
  line-height:1.65;
}

.price-card .button{
  justify-self:start;
  margin-top:8px;
  white-space:normal;
  text-align:center;
}

.seo-keyword-section{
  background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%);
  border:1px solid #b6f3ea;
}

.seo-keyword-section h2{
  max-width:980px;
}

.keyword-pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0 0;
}

.keyword-pill-grid span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 12px;
  border:1px solid #99f6e4;
  border-radius:999px;
  background:#ffffff;
  color:#0f766e;
  font-size:14px;
  font-weight:800;
  box-shadow:0 8px 18px rgba(15,118,110,.07);
}

.seo-copy-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-top:22px;
}

.seo-copy-grid article{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:18px;
  box-shadow:0 14px 30px rgba(15,23,42,.06);
}

.seo-copy-grid h3{
  margin:0 0 8px;
  color:#102a56;
  font-size:18px;
}

.seo-copy-grid p{
  margin:0;
}

.reviews-section{
  background:#f8fafc;
}

.reviews-hero .review-card-dark{
  min-height:260px;
}

.review-frame-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0;
}

.google-review-frame-wrap{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 42px rgba(15,23,42,.08);
}

.google-review-frame{
  display:block;
  width:100%;
  min-height:620px;
  border:0;
  background:#fff;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  margin-top:18px;
}

.review-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:18px;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.review-card strong{
  color:#102a56;
}

.review-card p{
  margin:8px 0 0;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
}

.faq-grid details{
  margin:0;
  background:#f8fafc;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.faq-grid details[open]{
  border-color:#99f6e4;
  background:#f0fdfa;
  box-shadow:0 12px 26px rgba(20,184,166,.08);
}

.faq-grid summary{
  color:#102a56;
}

.faq-grid p{
  color:#475467;
  line-height:1.6;
  margin-bottom:0;
}

.contact-hero{
  grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);
}

.site-panel a{
  color:#fff;
  font-weight:900;
}

.site-footer{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:18px;
  align-items:start;
  padding:24px;
  color:#475467;
  border-top:1px solid var(--line);
  background:#fff;
}

.site-footer a{
  color:#102a56;
  font-weight:800;
  text-decoration:none;
}

.full-footer{
  padding:28px clamp(18px,4vw,54px);
}

.full-footer strong{
  color:#102a56;
  font-size:18px;
}

.full-footer p{
  margin:8px 0 0;
}

.full-footer nav{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px;
  margin:0;
  overflow:visible;
}

.full-footer small{
  grid-column:1/-1;
  color:#64748b;
  font-weight:800;
}

.help-intro{
  display:grid;
  gap:6px;
  border-bottom:1px solid var(--line);
  background:#f8fafc;
  padding:16px 18px;
}

.help-intro strong{
  font-size:17px;
}

.help-intro span{
  color:var(--muted);
  line-height:1.5;
}

.help-feature-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:16px 18px 0;
}

.help-feature-strip article{
  border:1px solid #cfe0f3;
  border-radius:12px;
  padding:14px;
  background:linear-gradient(135deg,#ffffff,#f0fdfa);
  box-shadow:0 12px 28px rgba(15,23,42,.07);
}

.help-feature-strip strong{
  display:block;
  color:#102a56;
  font-size:15px;
  margin-bottom:6px;
}

.help-feature-strip span{
  display:block;
  color:#475467;
  line-height:1.45;
  font-size:13px;
}

.help-search{
  width:min(360px,100%);
  margin-top:0;
}

details{
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  margin-bottom:10px;
  background:var(--soft);
}
summary{font-weight:900;cursor:pointer}

.help-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:12px;
}

.help-grid details{
  margin-bottom:0;
}

.help-grid p{
  margin-bottom:0;
  line-height:1.5;
  color:#334155;
}

.workflow-chart{
  display:grid;
  gap:8px;
  margin:10px 0 12px;
}

.workflow-chart div{
  position:relative;
  padding:10px 12px;
  border:1px solid #bfdbfe;
  border-radius:8px;
  background:#eff6ff;
  color:#0f2f5f;
  font-weight:800;
}

.workflow-chart div:not(:last-child)::after{
  content:"\2193";
  display:block;
  margin:6px 0 -3px;
  color:#1480d8;
  font-weight:900;
  text-align:center;
}

.help-link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
  margin-top:8px;
}

.help-link-grid a{
  display:block;
  border:1px solid #bfdbfe;
  border-radius:10px;
  background:#eff6ff;
  color:#0f2f5f;
  font-weight:900;
  padding:11px 12px;
  text-decoration:none;
}

.help-link-grid a:hover{
  border-color:#1480d8;
  background:#dbeafe;
}

.run-history-list{
  display:grid;
  gap:8px;
  max-height:210px;
  overflow:auto;
  padding:10px;
}

.run-history-item{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  padding:10px;
  cursor:pointer;
}

.run-history-item strong,
.run-history-item span{
  display:block;
}

.run-history-item span{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.compact-log{
  height:220px;
  max-height:220px;
}

@media(max-width:1100px){
  .processing-layout{grid-template-columns:1fr}
  .processing-side{position:static}
  .live-panel .log{height:320px;max-height:none}
  .process-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-counter-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:820px){
  :root{
    --sidebar-width:min(280px,84vw);
    --topbar-height:64px;
  }

  .app{
    grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  }

  .app.menu-collapsed{
    grid-template-columns:0 minmax(0,1fr);
  }

  .app-topbar{
    padding:7px 10px;
  }

  .app-topbar-brand img{
    width:min(218px,68vw);
  }

  .drive-badge{
    font-size:11px;
    min-height:30px;
    padding:0 8px;
  }

  .sidebar{
    padding:14px 10px;
  }

  .content{
    grid-column:2;
    padding:12px;
  }

  .admin-tabbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .admin-tab,
  .settings-tab{
    width:100%;
  }

  .settings-tabbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .processing-layout{grid-template-columns:1fr}
  .processing-side{position:static}
  .live-panel .log{height:320px;max-height:none}
  .analytics-grid{grid-template-columns:1fr}
  .manual-row-summary{grid-template-columns:1fr}
  .manual-row-summary-actions{justify-content:flex-start}
  .metrics,.process-metrics,.process-counter-metrics,.form-grid,.upload-grid,.steps-grid,.asset-upload-row,.help-grid,.help-feature-strip,.manual-only-options{grid-template-columns:1fr}
  #processLastUpdate{white-space:normal}
  .detail-card-grid,.admin-detail-sections{grid-template-columns:1fr}
  .admin-user-detail-head{flex-direction:column}
  .detail-row{grid-template-columns:1fr}
  .asset-upload{grid-template-columns:1fr}
  .upload-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .placement-grid{grid-template-columns:1fr 1fr}
  .placement-grid-head{display:none}
  .version-row{grid-template-columns:1fr}
  .site-header,.site-nav,.site-actions,.site-footer{align-items:flex-start}
  .site-header{flex-direction:column}
  .site-header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .site-nav{flex-wrap:wrap}
  .site-hero,.site-split,.contact-hero,.comparison-grid,.sample-invoice-section,.pricing-grid{grid-template-columns:1fr}
  .compare-row{grid-template-columns:1fr}
  .compare-row > div{border-right:0;border-bottom:1px solid #e5edf7}
  .compare-row > div:last-child{border-bottom:0}
  .pricing-section,.pricing-head{display:grid}
  .hero-invoice-card,.hero-workflow-card{justify-self:start}
  .site-footer{grid-template-columns:1fr}
  .full-footer nav{justify-content:flex-start}
}

@media(max-width:620px){
  .upload-grid.compact{grid-template-columns:1fr}
  .source-panel .upload-grid.compact .upload-card{
    grid-template-columns:1fr;
    grid-template-areas:"title" "input" "name" "action";
  }
  .source-panel .upload-grid.compact .upload-card .button{
    width:100%;
    justify-self:stretch;
  }
  .upload-file-name{
    white-space:normal;
  }
  .timeline-grid{grid-template-columns:1fr}
  .site-section{padding:22px}
  .site-hero{padding:44px 0 28px}
  .site-hero.hero-dark{padding:48px 22px 34px}
  .site-nav{gap:10px}
  .site-nav a{font-size:14px}
  .site-header-actions a{width:100%;text-align:center}
  .brand-strip{display:grid;justify-content:stretch}
  .brand-logo{width:100%}
  .login-card{width:100%}
  .comparison-card strong{font-size:23px}
  .sample-invoice-frame{max-height:560px;overflow:auto}
}