:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f7;
  --text: #172033;
  --muted: #667085;
  --muted-2: #98a2b3;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --brand: #5b5ce2;
  --brand-strong: #4647c8;
  --brand-soft: #ededff;
  --accent: #14b8a6;
  --success: #12b76a;
  --warning: #f79009;
  --danger: #f04438;
  --info: #2e90fa;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .08);
  --shadow-md: 0 12px 28px rgba(16, 24, 40, .12);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .18);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --sidebar: 264px;
  --header: 72px;
  --max: 1240px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d111c;
  --surface: #151b28;
  --surface-2: #1a2232;
  --surface-3: #222c3e;
  --text: #f5f7fa;
  --muted: #a7b0c0;
  --muted-2: #7d899c;
  --border: #2b3548;
  --border-strong: #3a465c;
  --brand: #8587ff;
  --brand-strong: #9a9bff;
  --brand-soft: #272957;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .26);
  --shadow-md: 0 16px 32px rgba(0, 0, 0, .34);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, .44);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img, svg { max-width: 100%; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny { font-size: .75rem; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-brand { color: var(--brand); }
.center { text-align: center; }
.stack { display: grid; gap: 18px; }
.stack-sm { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.space-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Shared brand */
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.025em; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; }
.brand-name { font-size: 1.16rem; }
.brand-sub { display: block; color: var(--muted); font-size: .67rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* Buttons */
.btn {
  border: 1px solid transparent;
  border-radius: 11px;
  min-height: 42px;
  padding: 9px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 24%, transparent);
  outline-offset: 2px;
}
.btn-primary { background: var(--brand); color: white; box-shadow: 0 5px 15px color-mix(in srgb, var(--brand) 25%, transparent); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-secondary { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn-soft { background: var(--brand-soft); color: var(--brand); }
.btn-danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 20%, var(--border)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { min-height: 36px; padding: 7px 11px; border-radius: 9px; font-size: .875rem; }
.btn-lg { min-height: 50px; padding: 12px 20px; border-radius: 13px; }
.icon-btn {
  width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface);
  display: inline-grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-xs);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* Forms */
.field { display: grid; gap: 7px; }
.field label, .label { color: var(--text); font-size: .84rem; font-weight: 700; }
.field-hint { color: var(--muted); font-size: .77rem; }
.input, input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="url"], select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  min-height: 42px;
  padding: 10px 12px;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 120px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); outline: none; }
input[type="checkbox"] { accent-color: var(--brand); }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-prefix > input { padding-left: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

/* Cards / content */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.card-pad { padding: 20px; }
.card-header { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.card-body { padding: 20px; }
.card-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.section-title { margin: 0; font-size: 1.04rem; letter-spacing: -.015em; }
.section-copy { margin: 5px 0 0; color: var(--muted); font-size: .88rem; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 9px; font-size: .73rem; font-weight: 800; background: var(--surface-3); color: var(--muted); }
.badge-brand { background: var(--brand-soft); color: var(--brand); }
.badge-success { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.badge-warning { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: #b54708; }
.badge-danger { background: color-mix(in srgb, var(--danger) 11%, var(--surface)); color: var(--danger); }
.divider { height: 1px; background: var(--border); }
.empty-state { padding: 44px 22px; text-align: center; color: var(--muted); }
.empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 14px; font-size: 1.4rem; }

/* Marketing site */
.site-header {
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--surface) 86%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.site-header-inner { max-width: var(--max); margin: auto; min-height: 72px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.site-nav { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: .93rem; font-weight: 700; }
.site-nav a:hover { color: var(--text); }
.site-actions { display: flex; align-items: center; gap: 9px; }
.mobile-nav-btn { display: none; }
.hero { position: relative; overflow: hidden; padding: 88px 22px 72px; }
.hero::before {
  content: ""; position: absolute; width: 720px; height: 720px; border-radius: 50%; top: -420px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 24%, transparent), transparent 68%); pointer-events: none;
}
.hero-inner { max-width: 1120px; margin: auto; position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 58px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-soft); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border)); border-radius: 999px; padding: 6px 10px; font-size: .78rem; font-weight: 800; }
.hero h1 { margin: 18px 0; max-width: 720px; font-size: clamp(2.7rem, 6vw, 5rem); line-height: .99; letter-spacing: -.065em; }
.hero h1 span { color: var(--brand); }
.hero-copy { max-width: 650px; margin: 0 0 28px; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .82rem; }
.hero-note span::before { content: "✓"; color: var(--success); font-weight: 900; margin-right: 6px; }
.product-window { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.window-bar { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.window-body { display: grid; grid-template-columns: 140px 1fr; min-height: 400px; }
.window-side { padding: 18px 12px; background: #17193b; color: #d8d9ff; }
.window-side .mini-logo { font-weight: 900; margin-bottom: 22px; color: white; }
.window-nav-item { padding: 9px 10px; border-radius: 8px; margin-bottom: 5px; font-size: .72rem; }
.window-nav-item.active { background: rgba(255,255,255,.12); color: white; }
.window-main { padding: 20px; }
.window-main h3 { margin: 0 0 5px; }
.mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 18px 0; }
.mini-stat { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.mini-stat strong { display: block; font-size: 1.05rem; }
.mini-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mini-row { display: grid; grid-template-columns: 1.4fr .8fr .7fr; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .7rem; }
.mini-row:last-child { border-bottom: 0; }
.mini-row.header { background: var(--surface-2); color: var(--muted); font-weight: 800; }
.marketing-section { padding: 82px 22px; }
.marketing-section.alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-inner { max-width: var(--max); margin: auto; }
.section-heading { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.section-heading.left { margin-left: 0; text-align: left; }
.section-heading h2 { margin: 0 0 14px; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.045em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 1.03rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.feature-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.feature-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1.15rem; margin-bottom: 18px; }
.feature-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.feature-card p { color: var(--muted); margin: 0; font-size: .91rem; }
.workflow { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.workflow-list { display: grid; gap: 13px; }
.workflow-item { display: grid; grid-template-columns: 38px 1fr; gap: 13px; padding: 15px; border-radius: 13px; border: 1px solid transparent; }
.workflow-item.active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.workflow-number { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 900; }
.workflow-item h3 { margin: 0 0 4px; font-size: .98rem; }
.workflow-item p { margin: 0; color: var(--muted); font-size: .86rem; }
.workflow-preview { min-height: 430px; background: linear-gradient(145deg, #17193b, #2c2f70); border-radius: 26px; padding: 28px; box-shadow: var(--shadow-lg); color: white; }
.preview-doc { background: white; color: #172033; border-radius: 14px; padding: 26px; min-height: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.preview-doc-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 2px solid #e8eaf0; }
.preview-doc-logo { width: 42px; height: 42px; border-radius: 12px; background: #5b5ce2; display: grid; place-items: center; color: white; font-weight: 900; }
.preview-doc h4 { margin: 0; font-size: 1.3rem; }
.preview-line { height: 8px; border-radius: 8px; background: #eef0f5; margin-top: 12px; }
.preview-line.short { width: 45%; }
.preview-line.medium { width: 70%; }
.preview-doc-table { margin-top: 24px; border: 1px solid #e8eaf0; border-radius: 9px; overflow: hidden; }
.preview-doc-row { display: grid; grid-template-columns: 1.5fr .5fr .7fr; padding: 11px; border-bottom: 1px solid #e8eaf0; font-size: .7rem; }
.preview-doc-row:first-child { background: #f8f9fb; font-weight: 800; }
.preview-doc-row:last-child { border-bottom: 0; }
.security-banner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px; padding: 32px; border-radius: 24px; background: #17193b; color: white; }
.security-banner p { margin: 6px 0 0; color: #c8cae8; }
.cta { margin: 0 auto; max-width: 1120px; border-radius: 28px; padding: 56px; background: linear-gradient(135deg, #5b5ce2, #383a9a); color: white; text-align: center; overflow: hidden; position: relative; }
.cta::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.1); right: -160px; top: -180px; }
.cta h2 { position: relative; margin: 0 0 12px; font-size: clamp(2rem,4vw,3.2rem); letter-spacing: -.04em; }
.cta p { position: relative; margin: 0 auto 24px; max-width: 600px; color: #e6e7ff; }
.site-footer { padding: 50px 22px 28px; background: var(--surface); border-top: 1px solid var(--border); }
.footer-inner { max-width: var(--max); margin: auto; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 38px; }
.footer-copy { color: var(--muted); max-width: 320px; font-size: .88rem; }
.footer-col h4 { margin: 0 0 13px; font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.footer-col a { display: block; color: var(--muted); margin: 8px 0; font-size: .88rem; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: .8rem; }

/* App shell */
.app-shell { min-height: 100vh; }
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sidebar); background: #17193b; color: #d8d9f5;
  display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar-head { height: var(--header); padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-head .brand { color: white; }
.sidebar-head .brand-sub { color: #9fa2cf; }
.sidebar-nav { padding: 18px 12px; overflow-y: auto; flex: 1; }
.nav-label { margin: 14px 11px 8px; color: #888cb9; font-size: .65rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 9px 11px; border-radius: 10px; color: #b9bbda; font-size: .88rem; font-weight: 700; margin: 3px 0; }
.nav-item:hover { background: rgba(255,255,255,.07); color: white; }
.nav-item.active { background: linear-gradient(135deg, rgba(133,135,255,.34), rgba(91,92,226,.22)); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.nav-icon { width: 24px; text-align: center; font-size: 1rem; }
.sidebar-foot { padding: 14px 12px 18px; border-top: 1px solid rgba(255,255,255,.07); }
.data-note { border-radius: 11px; background: rgba(255,255,255,.06); padding: 12px; color: #aeb1d5; font-size: .73rem; }
.data-note strong { display: block; color: white; margin-bottom: 4px; font-size: .77rem; }
.sidebar-close { display: none; color: white; border: 0; background: transparent; font-size: 1.35rem; }
.app-main { margin-left: var(--sidebar); min-height: 100vh; }
.app-topbar {
  position: sticky; top: 0; z-index: 45; height: var(--header); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border);
}
.topbar-left { display: flex; align-items: center; gap: 13px; min-width: 0; }
.mobile-menu-btn { display: none; }
.page-kicker { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.page-title-mini { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.app-content { max-width: 1480px; margin: 0 auto; padding: 28px; }
.page-heading { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.page-heading h1 { margin: 0 0 7px; font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.page-heading p { margin: 0; color: var(--muted); }
.page-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.metric-card { padding: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.metric-label { color: var(--muted); font-size: .79rem; font-weight: 700; }
.metric-value { margin-top: 7px; font-size: 1.65rem; font-weight: 900; letter-spacing: -.035em; }
.metric-sub { margin-top: 5px; color: var(--muted); font-size: .75rem; }
.metric-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin-top: 18px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.quick-action { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); display: flex; gap: 12px; align-items: center; font-weight: 800; font-size: .86rem; }
.quick-action:hover { border-color: var(--brand); background: var(--brand-soft); }
.quick-action span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.data-table th { color: var(--muted); background: var(--surface-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .055em; text-align: left; }
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.table-title { font-weight: 800; font-size: .88rem; }
.table-sub { color: var(--muted); font-size: .75rem; margin-top: 3px; }
.activity-list { display: grid; }
.activity { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.activity:last-child { border-bottom: 0; }
.activity-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; }
.activity strong { display: block; font-size: .83rem; }
.activity span { color: var(--muted); font-size: .73rem; }

/* Document editor */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr); gap: 20px; align-items: start; }
.editor-panel { min-width: 0; }
.preview-panel { position: sticky; top: calc(var(--header) + 20px); }
.editor-section { padding: 20px; border-bottom: 1px solid var(--border); }
.editor-section:last-child { border-bottom: 0; }
.editor-section h2 { margin: 0 0 16px; font-size: 1rem; }
.document-preview { background: #dfe3ea; padding: 20px; border-radius: var(--radius); min-height: 700px; }
.document-paper { background: white; color: #1f2937; width: 100%; min-height: 660px; padding: 38px; box-shadow: 0 10px 28px rgba(16,24,40,.13); font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.document-head { display: flex; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.document-logo { max-width: 120px; max-height: 58px; object-fit: contain; }
.doc-brand-placeholder { width: 52px; height: 52px; border-radius: 13px; background: #5b5ce2; color: white; display: grid; place-items: center; font-size: 20px; font-weight: 900; }
.doc-company { font-size: 13px; line-height: 1.55; }
.doc-title { font-size: 28px; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; text-align: right; }
.doc-meta { margin-top: 12px; display: grid; gap: 4px; text-align: right; }
.doc-meta div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; }
.doc-meta strong { color: #667085; }
.bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 28px; }
.doc-label { color: #667085; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; margin-bottom: 7px; }
.doc-items { width: 100%; border-collapse: collapse; margin-top: 10px; }
.doc-items th { background: #f2f4f7; color: #344054; text-transform: uppercase; letter-spacing: .05em; font-size: 9px; text-align: right; padding: 10px; border-bottom: 1px solid #d0d5dd; }
.doc-items th:first-child, .doc-items td:first-child { text-align: left; }
.doc-items td { padding: 11px 10px; border-bottom: 1px solid #eaecf0; text-align: right; }
.doc-summary { margin: 20px 0 0 auto; width: min(260px, 100%); }
.doc-summary-row { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; }
.doc-summary-row.total { margin-top: 8px; border-top: 2px solid #344054; padding-top: 11px; font-size: 15px; font-weight: 900; }
.doc-notes { margin-top: 32px; padding-top: 20px; border-top: 1px solid #eaecf0; }
.doc-footer { margin-top: 46px; color: #98a2b3; font-size: 9px; text-align: center; }
.item-row { display: grid; grid-template-columns: minmax(180px,1fr) 82px 115px 110px 38px; gap: 8px; align-items: start; margin-bottom: 9px; }
.item-row textarea { min-height: 42px; height: 42px; resize: vertical; }
.item-row .btn { min-height: 42px; padding: 0; }
.summary-controls { max-width: 360px; margin-left: auto; display: grid; gap: 10px; }
.summary-control { display: grid; grid-template-columns: 1fr 130px; gap: 12px; align-items: center; }
.summary-control label { font-size: .82rem; color: var(--muted); font-weight: 700; }
.summary-total { border-top: 1px solid var(--border); padding-top: 12px; display: flex; justify-content: space-between; font-size: 1.12rem; font-weight: 900; }
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.segmented button { border: 0; background: transparent; color: var(--muted); border-radius: 8px; padding: 7px 12px; font-weight: 800; cursor: pointer; }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

/* Meetings */
.minutes-preview { font-family: Arial, Helvetica, sans-serif; }
.minutes-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; border-bottom: 3px solid #5b5ce2; padding-bottom: 18px; }
.minutes-title h1 { margin: 0 0 5px; font-size: 25px; }
.minutes-section { margin-top: 24px; }
.minutes-section h2 { margin: 0 0 10px; color: #344054; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
.minutes-box { border: 1px solid #e4e7ec; border-radius: 8px; padding: 13px; white-space: pre-wrap; min-height: 50px; }
.action-editor-row { display: grid; grid-template-columns: 1fr 150px 150px 38px; gap: 8px; margin-bottom: 9px; }
.action-table { width: 100%; border-collapse: collapse; }
.action-table th, .action-table td { border: 1px solid #e4e7ec; padding: 9px; text-align: left; }
.action-table th { background: #f2f4f7; }

/* Tasks */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.kanban-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); min-height: 420px; }
.kanban-head { padding: 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.kanban-head h2 { margin: 0; font-size: .9rem; }
.kanban-count { min-width: 24px; height: 24px; border-radius: 999px; background: var(--surface-3); display: grid; place-items: center; font-size: .72rem; font-weight: 900; }
.kanban-body { min-height: 360px; padding: 10px; }
.kanban-body.drag-over { background: var(--brand-soft); }
.task-card { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-xs); margin-bottom: 9px; cursor: grab; }
.task-card:active { cursor: grabbing; }
.task-title { font-weight: 800; font-size: .88rem; }
.task-meta { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .72rem; }
.priority-high { color: var(--danger); }
.priority-medium { color: var(--warning); }
.priority-low { color: var(--success); }

/* Modal and toast */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(10,14,25,.58); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.open { display: flex; }
.modal { width: min(600px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); }
.modal-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.modal-head h2 { margin: 0; font-size: 1.05rem; }
.modal-body { padding: 20px; }
.modal-foot { padding: 15px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 9px; }
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: grid; gap: 9px; }
.toast { min-width: 280px; max-width: 400px; background: #101828; color: white; border-radius: 11px; padding: 12px 14px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: toastIn .25s ease; }
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }

/* Legal content */
.content-page { max-width: 850px; margin: auto; padding: 64px 22px; }
.content-page h1 { font-size: clamp(2.3rem,5vw,4rem); letter-spacing: -.055em; margin: 0 0 14px; }
.content-page h2 { margin-top: 34px; font-size: 1.35rem; }
.content-page p, .content-page li { color: var(--muted); }
.content-page .lead { font-size: 1.08rem; }
.content-page code { background: var(--surface-3); padding: 2px 6px; border-radius: 5px; color: var(--text); }

/* Responsive */
@media (max-width: 1100px) {
  .hero-inner, .workflow { grid-template-columns: 1fr; }
  .product-window { max-width: 720px; width: 100%; margin: auto; transform: none; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .editor-layout { grid-template-columns: 1fr; }
  .preview-panel { position: static; }
}
@media (max-width: 860px) {
  .site-nav { display: none; }
  .mobile-nav-btn { display: inline-grid; }
  .site-nav.open { display: grid; position: absolute; top: 72px; left: 14px; right: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); }
  .app-sidebar { transform: translateX(-105%); transition: transform .22s ease; box-shadow: var(--shadow-lg); }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-close { display: block; }
  .app-main { margin-left: 0; }
  .mobile-menu-btn { display: inline-grid; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .site-header-inner { padding: 0 14px; }
  .site-actions .btn-secondary { display: none; }
  .hero { padding: 60px 17px 54px; }
  .hero h1 { font-size: 2.75rem; }
  .window-body { grid-template-columns: 100px 1fr; min-height: 330px; }
  .window-side { padding: 14px 8px; }
  .window-main { padding: 14px; }
  .mini-stats { grid-template-columns: 1fr; }
  .mini-stat:nth-child(n+2) { display: none; }
  .marketing-section { padding: 58px 17px; }
  .feature-grid, .form-grid, .form-grid-3, .form-grid-4, .bill-grid { grid-template-columns: 1fr; }
  .security-banner { grid-template-columns: 1fr; }
  .cta { margin-inline: 0; padding: 42px 20px; border-radius: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; }
  .app-topbar { padding: 0 14px; }
  .topbar-actions .btn { display: none; }
  .app-content { padding: 18px 14px 28px; }
  .page-heading { display: grid; }
  .page-actions { justify-content: flex-start; }
  .metric-grid { grid-template-columns: 1fr; }
  .item-row { grid-template-columns: 1fr 68px 95px 38px; }
  .item-row .item-description { grid-column: 1 / -1; }
  .item-row .item-amount { display: none; }
  .action-editor-row { grid-template-columns: 1fr 1fr 38px; }
  .action-editor-row .action-text { grid-column: 1 / -1; }
  .document-preview { padding: 8px; overflow-x: auto; }
  .document-paper { min-width: 620px; padding: 30px; }
  .modal-backdrop { padding: 10px; }
}

@media print {
  body { background: white !important; }
  .app-sidebar, .app-topbar, .page-heading, .editor-panel, .preview-toolbar, .site-header, .site-footer, .no-print, .toast-stack { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; max-width: none !important; }
  .editor-layout { display: block !important; }
  .preview-panel, .document-preview { position: static !important; padding: 0 !important; background: white !important; border: 0 !important; }
  .document-paper { width: 100% !important; min-width: 0 !important; min-height: auto !important; box-shadow: none !important; padding: 12mm !important; }
  @page { size: A4; margin: 0; }
}

/* Moloin v1.1 public growth layer */
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--text); color: var(--surface); padding: 10px 14px; border-radius: 9px; font-weight: 800; }
.skip-link:focus { top: 12px; }
.site-nav .nav-dropdown { position: relative; }
.site-nav .nav-dropdown > button { border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; padding: 10px 0; }
.dropdown-panel { display: none; position: absolute; top: calc(100% + 10px); left: -18px; width: 320px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); }
.nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel { display: grid; }
.dropdown-panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; }
.dropdown-panel a:hover { background: var(--surface-2); }
.dropdown-panel strong { color: var(--text); font-size: .88rem; }
.dropdown-panel span { color: var(--muted); font-size: .76rem; font-weight: 500; }
.breadcrumbs { max-width: var(--max); margin: 0 auto; padding: 18px 22px 0; color: var(--muted); font-size: .82rem; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--muted-2); }
.tool-hero { padding: 48px 22px 30px; }
.tool-hero-inner { max-width: 980px; margin: auto; text-align: center; }
.tool-hero h1 { margin: 16px auto 14px; font-size: clamp(2.25rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.055em; max-width: 900px; }
.tool-hero p { max-width: 760px; margin: auto; color: var(--muted); font-size: 1.06rem; }
.trust-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; color: var(--muted); font-size: .82rem; }
.trust-row span::before { content: "✓"; color: var(--success); font-weight: 900; margin-right: 6px; }
.tool-shell { max-width: var(--max); margin: 0 auto; padding: 12px 22px 72px; }
.tool-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: 22px; align-items: start; }
.tool-editor { overflow: hidden; }
.tool-editor .editor-section:first-child { border-top: 0; }
.tool-preview { position: sticky; top: 92px; }
.tool-preview .document-paper { min-height: 720px; }
.tool-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-content { max-width: 980px; margin: 0 auto; padding: 68px 22px; }
.tool-content h2 { margin: 42px 0 12px; font-size: clamp(1.7rem, 3vw, 2.45rem); letter-spacing: -.035em; }
.tool-content h3 { margin: 28px 0 8px; font-size: 1.18rem; }
.tool-content p, .tool-content li { color: var(--muted); }
.tool-content .lead { font-size: 1.08rem; }
.content-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 28px 0; }
.info-card { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.info-card h3 { margin-top: 0; }
.step-list { counter-reset: steps; display: grid; gap: 14px; margin: 22px 0; }
.step-item { position: relative; padding: 18px 18px 18px 62px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.step-item::before { counter-increment: steps; content: counter(steps); position: absolute; left: 17px; top: 17px; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 900; }
.step-item h3 { margin: 0 0 4px; font-size: 1rem; }
.step-item p { margin: 0; }
.faq-list { display: grid; gap: 10px; margin-top: 22px; }
.faq-list details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 17px; }
.faq-list summary { cursor: pointer; font-weight: 800; padding: 16px 0; }
.faq-list details p { margin: 0 0 17px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.related-card { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: transform .16s ease, border-color .16s ease; }
.related-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.related-card h3 { margin: 8px 0 5px; }
.related-card p { margin: 0; font-size: .88rem; }
.resource-hero { padding: 64px 22px 52px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 75%, var(--bg)), var(--bg)); }
.resource-hero-inner { max-width: 920px; margin: auto; }
.resource-hero h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.058em; margin: 16px 0; }
.resource-hero p { max-width: 760px; color: var(--muted); font-size: 1.08rem; }
.article-layout { max-width: 1080px; margin: 0 auto; padding: 54px 22px 76px; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 42px; align-items: start; }
.article-body { max-width: 760px; }
.article-body h2 { margin: 42px 0 12px; font-size: 1.75rem; letter-spacing: -.03em; }
.article-body h3 { margin-top: 28px; }
.article-body p, .article-body li { color: var(--muted); }
.article-body .callout { border-left: 4px solid var(--brand); background: var(--brand-soft); padding: 16px 18px; border-radius: 0 12px 12px 0; color: var(--text); }
.article-aside { position: sticky; top: 96px; display: grid; gap: 14px; }
.toc { padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.toc strong { display: block; margin-bottom: 10px; }
.toc a { display: block; color: var(--muted); padding: 6px 0; font-size: .86rem; }
.toc a:hover { color: var(--brand); }
.tool-mini-cta { padding: 18px; border-radius: var(--radius); background: linear-gradient(135deg, var(--brand), #7779ff); color: white; }
.tool-mini-cta p { color: rgba(255,255,255,.82); font-size: .86rem; }
.tool-mini-cta .btn { background: white; color: #3c3ea8; width: 100%; }
.site-map-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.site-map-card { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.site-map-card h2 { margin: 0 0 12px; font-size: 1.1rem; }
.site-map-card a { display: block; color: var(--muted); padding: 5px 0; }
.site-map-card a:hover { color: var(--brand); }
.copy-output { min-height: 330px; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.65; }
.checklist { display: grid; gap: 10px; }
.check-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.check-item input { margin-top: 3px; }
.check-item.done span { text-decoration: line-through; color: var(--muted-2); }
.public-tool-status { margin-top: 12px; color: var(--muted); font-size: .82rem; }
.logo-inline-preview { min-height: 54px; display: flex; align-items: center; gap: 10px; }
.logo-inline-preview img { max-width: 140px; max-height: 58px; padding: 5px; background: white; border: 1px solid var(--border); border-radius: 9px; }
.highlight-strip { max-width: var(--max); margin: 0 auto 58px; padding: 0 22px; }
.highlight-strip-inner { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.highlight-stat { background: var(--surface); padding: 24px; }
.highlight-stat strong { display: block; font-size: 1.2rem; margin-bottom: 3px; }
.highlight-stat span { color: var(--muted); font-size: .82rem; }

@media (max-width: 1000px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-preview { position: static; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; grid-template-columns: 1fr 1fr; }
  .highlight-strip-inner { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .content-columns, .related-grid, .site-map-grid { grid-template-columns: 1fr; }
  .article-aside { grid-template-columns: 1fr; }
  .tool-shell { padding-inline: 14px; }
  .tool-hero { padding-inline: 16px; }
  .tool-hero h1 { font-size: 2.55rem; }
  .highlight-strip { padding-inline: 14px; }
  .highlight-strip-inner { grid-template-columns: 1fr; }
  .site-nav .nav-dropdown > button { width: 100%; text-align: left; padding: 0; }
  .dropdown-panel { position: static; width: auto; display: grid; box-shadow: none; border: 0; padding: 4px 0 0 12px; background: transparent; }
}

@media print {
  .tool-page .site-header, .tool-page .breadcrumbs, .tool-page .tool-hero, .tool-page .tool-editor, .tool-page .tool-toolbar, .tool-page .tool-content, .tool-page .site-footer { display: none !important; }
  .tool-page .tool-shell, .tool-page .tool-grid, .tool-page .tool-preview, .tool-page .document-preview { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: white !important; }
  .tool-page .document-paper { width: 100% !important; min-width: 0 !important; min-height: auto !important; box-shadow: none !important; padding: 12mm !important; }
}

/* Prevent public tool editors and previews from forcing page-level mobile overflow. */
.tool-grid, .tool-editor, .tool-preview { min-width: 0; }
.tool-preview, .document-preview { max-width: 100%; }
@media (max-width: 640px) {
  .tool-toolbar { align-items: flex-start; }
  .tool-toolbar > div:first-child { min-width: 0; }
  .tool-actions { width: 100%; }
  .tool-actions .btn { flex: 1 1 auto; }
}

@media print {
  body[data-tool="client-onboarding"] .tool-editor { display: block !important; border: 0 !important; box-shadow: none !important; }
  body[data-tool="client-onboarding"] .tool-preview { display: none !important; }
  body[data-tool="client-onboarding"] .tool-editor > .editor-section:first-child { display: none !important; }
  body[data-tool="client-onboarding"] .tool-editor > .editor-section { border: 0 !important; padding: 0 !important; }
  body[data-tool="client-onboarding"] .check-item { break-inside: avoid; background: white !important; }
}


/* Moloin v1.3 growth tools */
.tools-directory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tool-directory-card { display:grid; grid-template-columns:58px 1fr; gap:16px; padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-xs); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.tool-directory-card:hover { transform:translateY(-3px); border-color:var(--brand); box-shadow:var(--shadow-sm); }
.tool-directory-card h2 { margin:8px 0 6px; font-size:1.12rem; }
.tool-directory-card p { margin:0 0 10px; color:var(--muted); font-size:.9rem; }
.tool-directory-icon { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-size:1.35rem; font-weight:900; }
.tool-link { color:var(--brand); font-weight:800; font-size:.86rem; }
.callout-soft { padding:16px 18px; background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border)); border-radius:12px; }
.callout-soft p { margin:4px 0 0; color:var(--muted); font-size:.88rem; }
.calculator-paper { min-height:620px !important; }
.calculator-empty { min-height:400px; display:grid; place-items:center; color:var(--muted); text-align:center; }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:24px 0; }
.result-metric { padding:18px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; }
.result-metric span { display:block; color:var(--muted); font-size:.78rem; font-weight:700; margin-bottom:5px; }
.result-metric strong { display:block; font-size:1.45rem; letter-spacing:-.03em; }
.result-metric.primary { grid-column:1/-1; background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 22%,var(--border)); }
.result-metric.primary strong { color:var(--brand); font-size:2.25rem; }
.cost-row { display:grid; grid-template-columns:minmax(160px,2.2fr) minmax(75px,.65fr) minmax(95px,.8fr) minmax(105px,.9fr) 38px; gap:8px; align-items:center; margin-top:8px; }
.cost-row-head,.po-item-head,.expense-head,.timesheet-head { color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.cost-row .row-amount,.po-item-row .row-amount,.timesheet-row .row-hours { text-align:right; font-weight:800; }
.po-item-row { display:grid; grid-template-columns:minmax(170px,2.2fr) minmax(70px,.55fr) minmax(100px,.8fr) minmax(105px,.85fr) 38px; gap:8px; align-items:center; margin-top:8px; }
.expense-row { display:grid; grid-template-columns:125px 130px minmax(170px,1.8fr) 110px 38px; gap:8px; align-items:center; margin-top:8px; }
.timesheet-row { display:grid; grid-template-columns:125px minmax(160px,1.7fr) 95px 95px 80px 76px 38px; gap:8px; align-items:center; margin-top:8px; }
.doc-total-banner { margin:22px 0; padding:18px; display:flex; justify-content:space-between; align-items:center; gap:18px; border-radius:12px; background:var(--brand-soft); }
.doc-total-banner span { color:var(--muted); font-weight:700; }
.doc-total-banner strong { color:var(--brand); font-size:1.85rem; }
.receipt-amount { margin:30px 0; padding:28px; border-radius:16px; background:var(--brand-soft); text-align:center; }
.receipt-amount span { display:block; color:var(--muted); font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.receipt-amount strong { display:block; color:var(--brand); font-size:2.7rem; margin-top:5px; }
@media(max-width:900px){.tools-directory-grid{grid-template-columns:1fr}.cost-row,.po-item-row,.expense-row,.timesheet-row{grid-template-columns:1fr 1fr}.cost-row-head,.po-item-head,.expense-head,.timesheet-head{display:none}.cost-row textarea,.po-item-row textarea,.expense-row .expense-desc,.timesheet-row .time-desc{grid-column:1/-1}.cost-row button,.po-item-row button,.expense-row button,.timesheet-row button{justify-self:end}}
@media(max-width:560px){.tool-directory-card{grid-template-columns:46px 1fr;padding:17px}.tool-directory-icon{width:42px;height:42px}.metric-grid{grid-template-columns:1fr}.result-metric.primary{grid-column:auto}.cost-row,.po-item-row,.expense-row,.timesheet-row{grid-template-columns:1fr}.cost-row textarea,.po-item-row textarea,.expense-row .expense-desc,.timesheet-row .time-desc{grid-column:auto}.doc-total-banner{align-items:flex-start;flex-direction:column}}


/* Moloin v1.3 document library and gate pass */
.library-card { overflow:hidden; }
.library-controls { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; flex-wrap:wrap; }
.library-filter-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.compact-field { min-width:160px; }
.compact-field span { display:block; color:var(--muted); font-size:.72rem; font-weight:800; margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.library-title-button { display:flex; align-items:center; gap:10px; width:100%; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer; }
.library-type-icon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--brand-soft); color:var(--brand); font-weight:900; }
.library-row-actions { flex-wrap:nowrap; }
.library-empty { padding:64px 20px; }
.document-modal { width:min(1040px,100%); max-height:calc(100vh - 24px); }
.document-modal .modal-body { background:var(--surface-2); }
.library-preview { max-height:calc(100vh - 220px); overflow:auto; }
.library-preview .document-paper { margin:auto; }
.library-modal-actions { flex-wrap:wrap; }
.library-fallback { padding:50px 30px; text-align:center; }
.library-fallback .doc-brand-placeholder { margin:auto; }
.library-fallback dl { max-width:440px; margin:28px auto; display:grid; grid-template-columns:1fr 1fr; text-align:left; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.library-fallback dt,.library-fallback dd { margin:0; padding:12px; border-bottom:1px solid var(--border); }
.library-fallback dt { background:var(--surface-2); color:var(--muted); font-weight:800; }
.library-text-snapshot pre { white-space:pre-wrap; font:inherit; line-height:1.7; }
#libraryPrintArea { display:none; }
.gate-material-row { display:grid; grid-template-columns:minmax(170px,1.8fr) 75px 85px minmax(150px,1.2fr) 38px; gap:8px; align-items:center; margin-top:8px; }
.gate-material-head { color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.gate-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.gate-checks label { display:flex; align-items:center; gap:9px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); font-size:.88rem; font-weight:700; }
.gate-pass-paper { border-top:8px solid var(--brand); }
.gate-pass-banner { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-bottom:20px; border-bottom:2px solid var(--text); }
.gate-pass-heading { text-align:right; }
.gate-pass-heading span { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.gate-pass-heading h2 { margin:5px 0 10px; font-size:1.75rem; }
.gate-pass-heading strong { display:inline-block; padding:7px 11px; border:1px solid var(--border); border-radius:8px; }
.gate-validity { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:22px 0; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.gate-validity div { padding:12px; background:var(--surface); }
.gate-validity span,.gate-detail-grid span,.gate-signatures span { display:block; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; margin-bottom:4px; }
.gate-section-title { margin:24px 0 10px; padding-bottom:7px; border-bottom:1px solid var(--border); color:var(--brand); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; font-weight:900; }
.gate-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 20px; }
.gate-detail-grid .wide { grid-column:1/-1; }
.gate-check-preview { display:flex; flex-wrap:wrap; gap:8px; }
.gate-check-preview span { padding:8px 10px; border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:.76rem; }
.gate-check-preview span.checked { background:var(--brand-soft); color:var(--brand); border-color:color-mix(in srgb,var(--brand) 25%,var(--border)); }
.gate-signatures { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.gate-signatures div { padding-top:10px; border-top:1px solid var(--text); }
.section-muted { opacity:.72; }
@media(max-width:900px){.library-controls{align-items:stretch}.library-filter-row{width:100%}.compact-field{flex:1 1 170px}.gate-material-row{grid-template-columns:1fr 1fr}.gate-material-head{display:none}.gate-material-row textarea,.gate-material-row .gate-material-remarks{grid-column:1/-1}.gate-material-row button{justify-self:end}}
@media(max-width:640px){.library-row-actions{flex-wrap:wrap}.gate-checks{grid-template-columns:1fr}.gate-material-row{grid-template-columns:1fr}.gate-material-row textarea,.gate-material-row .gate-material-remarks{grid-column:auto}.gate-pass-banner,.gate-validity,.gate-detail-grid,.gate-signatures{grid-template-columns:1fr}.gate-pass-heading{text-align:left}.gate-detail-grid .wide{grid-column:auto}}
@media print {
  body.printing-library-doc > *:not(#libraryPrintArea) { display:none !important; }
  body.printing-library-doc #libraryPrintArea { display:block !important; }
  body.printing-library-doc #libraryPrintArea .document-paper { width:100% !important; min-width:0 !important; min-height:auto !important; padding:12mm !important; box-shadow:none !important; }
}