/* ============================================================================ Cost Seg Smart — Partner Portal App-dashboard chrome, brand-matched to the main site (tokens.css). Plain CSS, no build step. Loaded by every /portal/ page. ============================================================================ */ /* Fonts — preloaded in each page ; @import is the fallback */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,400..700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Source Serif 4', 'Charter', Georgia, serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; --navy: #0a2540; --navy-2: #12365c; --fg: #0b1220; --fg-muted:#5a6778; --fg-soft: #8892a3; --border: #e4e8ee; --bg: #f4f7fa; --paper: #ffffff; --accent: #0a2540; --positive:#1f7a4f; --positive-bg:#e8f3ec; --amber: #b9791d; --amber-bg:#fbf2e1; --red: #b33a3a; --red-bg: #f8ebeb; --blue: #0a5ad9; --blue-bg: #e7eefb; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(11,18,32,.04), 0 6px 24px rgba(11,18,32,.05); } * { box-sizing: border-box; } html, body { margin: 0; } /* The `hidden` attribute must always win over component display rules (e.g. .alert--danger{display:flex} would otherwise show an empty box). */ [hidden] { display: none !important; } body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } h1, h2, h3 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; } p { margin: 0; } img { max-width: 100%; display: block; } button { font-family: inherit; } .tabular { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } /* ───── App chrome ───── */ .topbar { background: var(--navy); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); } .topbar__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 28px; } .topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; color: #fff; white-space: nowrap; } .topbar__brand .mark { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #3b82f6, #0a5ad9); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } .topbar__brand .sub { color: rgba(255,255,255,.55); font-weight: 500; } .topbar__nav { display: flex; gap: 4px; margin-left: 8px; } .topbar__nav a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 7px; transition: background .15s, color .15s; } .topbar__nav a:hover { color: #fff; background: rgba(255,255,255,.08); } .topbar__nav a.is-active { color: #fff; background: rgba(255,255,255,.14); } .topbar__spacer { flex: 1; } .topbar__who { font-size: 13px; color: rgba(255,255,255,.7); } .topbar__signout { background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background .15s; } .topbar__signout:hover { background: rgba(255,255,255,.1); } /* ───── Layout ───── */ .wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; } .wrap--narrow { max-width: 760px; } .page-head { margin-bottom: 24px; } .page-head h1 { font-size: 26px; font-weight: 700; } .page-head .eyebrow { font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; margin-bottom: 6px; } .page-head .sub { color: var(--fg-muted); font-size: 15px; margin-top: 6px; } /* ───── Cards ───── */ .card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } .card + .card { margin-top: 18px; } .card__title { font-size: 16px; font-weight: 700; margin-bottom: 4px; } .card__hint { font-size: 13.5px; color: var(--fg-muted); margin-bottom: 18px; } /* ───── Stat tiles ───── */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .stat { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .stat__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; } .stat__value { font-size: 28px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; } /* ───── Buttons ───── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s, border-color .12s; white-space: nowrap; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-primary { background: var(--navy); color: #fff; } .btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10,37,64,.25); } .btn-secondary { background: var(--paper); color: var(--navy); border-color: var(--border); } .btn-secondary:not(:disabled):hover { border-color: var(--navy); } .btn-ghost { background: transparent; color: var(--fg-muted); padding: 8px 12px; } .btn-ghost:hover { color: var(--fg); background: var(--bg); } .btn-sm { padding: 7px 12px; font-size: 13px; } .btn-block { width: 100%; } .btn .spin { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ───── Form fields ───── */ .field { margin-bottom: 16px; } .field > label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--fg); } .field .opt { color: var(--fg-soft); font-weight: 400; } .field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper); color: var(--fg); font-size: 15px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(10,37,64,.12); } .field textarea { resize: vertical; min-height: 76px; } .field input[readonly] { background: var(--bg); color: var(--fg-muted); } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .help { font-size: 12.5px; color: var(--fg-muted); margin-top: 6px; } /* ───── Status badges ───── */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.6; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--ready { color: var(--positive); background: var(--positive-bg); } .badge--processing { color: var(--amber); background: var(--amber-bg); } .badge--hold { color: var(--red); background: var(--red-bg); } .badge--review, .badge--qc_hold { color: var(--amber); background: var(--amber-bg); } .badge--declined { color: var(--fg-muted); background: var(--bg); } /* Feature checkboxes — clean inline rows (override the global width:100% input rule). #featBox is the live container (renamed from #featResidential/#featStr); keep all three. */ #featResidential label, #featStr label, #featBox label { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; font-weight: 500; cursor: pointer; font-size: 14.5px; } #featResidential input[type=checkbox], #featStr input[type=checkbox], #featBox input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 0; } /* The optional per-feature cost input sits indented under its checkbox row. */ #featBox input.feat-cost { margin-bottom: 12px; } /* Partner-agreement clickwrap modal */ .agree-overlay { position: fixed; inset: 0; background: rgba(11,31,58,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .agree-modal { background: #fff; border-radius: 14px; max-width: 680px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .agree-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--border); } .agree-head h2 { margin: 0; font-size: 19px; } .agree-head .agree-sub { color: var(--fg-muted); font-size: 13.5px; margin-top: 3px; } .agree-body { padding: 18px 24px; overflow-y: auto; font-size: 13.5px; line-height: 1.55; color: var(--fg); } .agree-body h1, .agree-body h2, .agree-body h3 { font-size: 15px; margin: 16px 0 6px; } .agree-foot { padding: 16px 24px 20px; border-top: 1px solid var(--border); background: var(--bg); } .agree-row { display: flex; gap: 10px; margin-bottom: 10px; } .agree-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; } .agree-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; cursor: pointer; } .agree-check input { width: auto; flex: 0 0 auto; margin-top: 2px; } .agree-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } .agree-err { color: #b33a3a; font-size: 13px; margin-top: 8px; min-height: 16px; } .badge--delivered { color: var(--blue); background: var(--blue-bg); } .badge--unpaid { color: var(--fg-muted); background: var(--bg); } .badge--pending_payment { color: var(--amber); background: var(--amber-bg); } .badge--payment_failed { color: var(--red); background: var(--red-bg); } /* ───── Table ───── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); } table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align: left; padding: 12px 16px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } .tbl td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tbl tr:last-child td { border-bottom: none; } .tbl tr:hover td { background: #fafbfd; } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; } .tbl .muted { color: var(--fg-muted); } .tbl .acts { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; } /* ───── Empty / loading states ───── */ .empty { text-align: center; padding: 56px 24px; color: var(--fg-muted); } .empty h3 { font-size: 17px; color: var(--fg); margin-bottom: 6px; } .empty p { margin-bottom: 18px; } .skeleton { color: var(--fg-soft); padding: 40px; text-align: center; font-size: 14px; } /* ───── Skeleton shimmer (loading placeholders) ───── */ .skel { position: relative; overflow: hidden; background: var(--border); border-radius: 6px; } .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: translateX(-100%); animation: skelShimmer 1.3s ease-in-out infinite; } .skel-line { height: 12px; } .skel-line--sm { height: 9px; border-radius: 5px; background: var(--bg); } .skel-stat { height: 28px; width: 56%; margin-top: 10px; border-radius: 7px; } .skel-pill { height: 20px; width: 78px; border-radius: 999px; } @keyframes skelShimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } } /* ───── Centered auth layout ───── */ .auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth__card { width: 100%; max-width: 400px; } .auth__brand { text-align: center; margin-bottom: 24px; } .auth__brand .name { font-weight: 800; font-size: 20px; color: var(--navy); letter-spacing: -0.01em; } .auth__brand .tag { font-size: 13px; color: var(--fg-muted); margin-top: 4px; } .auth .divider { display: flex; align-items: center; gap: 12px; color: var(--fg-soft); font-size: 12.5px; margin: 18px 0; } .auth .divider::before, .auth .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth__foot { text-align: center; font-size: 12.5px; color: var(--fg-soft); margin-top: 18px; } /* ───── Inline messages ───── */ .msg { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 14px; display: none; } .msg.show { display: block; } .msg--error { background: var(--red-bg); color: var(--red); } .msg--ok { background: var(--positive-bg); color: var(--positive); } .msg--info { background: var(--accent-soft, #eef2f7); color: var(--ink, #1f2937); } /* ───── Toast ───── */ #toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; } .toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(11,18,32,.25); font-size: 14px; max-width: 340px; animation: toastIn .2s ease; } .toast--error { background: var(--red); } .toast--ok { background: var(--positive); } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } } /* ───── Pricing preview (new-order) ───── */ .pricebox { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } .pricebox .line { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; } .pricebox .line .v { font-variant-numeric: tabular-nums; } .pricebox .strike { text-decoration: line-through; color: var(--fg-soft); } .pricebox .total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; } .pricebox .total .k { font-weight: 700; } .pricebox .total .v { font-weight: 700; font-size: 20px; } .pricebox .margin { color: var(--positive); font-weight: 600; } /* ───── Billing ───── */ .alert--danger { display: flex; align-items: flex-start; gap: 10px; background: var(--red-bg); color: var(--red); border: 1px solid #eab8b8; border-radius: var(--radius-sm); padding: 13px 16px; font-size: 13.5px; font-weight: 500; margin-bottom: 20px; } .alert--danger a { color: var(--red); font-weight: 700; text-decoration: underline; white-space: nowrap; } .bstat { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .bstat .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .bstat--current { color: var(--positive); } .bstat--current .dot { background: var(--positive); } .bstat--past { color: var(--red); } .bstat--past .dot { background: var(--red); } .meter { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 12px; } .meter__fill { height: 100%; background: var(--navy); border-radius: 999px; transition: width .3s; } .meter__fill.is-high { background: var(--amber); } .meter__fill.is-over { background: var(--red); } .inv-toggle { background: none; border: none; cursor: pointer; color: var(--blue); font-weight: 600; font-size: 13.5px; padding: 0; font-family: inherit; } .inv-studies td { background: #fafbfd; padding: 0 16px 12px; } .inv-studies ul { margin: 0; padding: 4px 0 0; list-style: none; font-size: 13px; } .inv-studies li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px dashed var(--border); color: var(--fg-muted); } .inv-studies li:last-child { border-bottom: none; } /* ───── QC data-check (input-error holds) ───── */ .badge--action { color: var(--amber); background: var(--amber-bg); } .qc-note { margin-top: 8px; padding: 8px 11px; border-radius: var(--radius-sm); background: var(--amber-bg); color: #7a5212; font-size: 12.5px; line-height: 1.45; border: 1px solid #ecd9ad; } .qc-note strong { color: var(--amber); } .qc-note--banner { margin: 0 0 20px; padding: 13px 16px; font-size: 13.5px; } .field-flag { border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgba(185,121,29,.15) !important; } /* ───── Responsive ───── */ @media (max-width: 720px) { .topbar__inner { gap: 12px; padding: 0 16px; } .topbar__nav { margin-left: 0; } .topbar__nav a { padding: 8px 9px; font-size: 13px; } .topbar__who { display: none; } .topbar__brand .sub { display: none; } .wrap { padding: 20px 16px 64px; } .stats { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr !important; } } /* New-order two-column */ .grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; } .sticky { position: sticky; top: 24px; } /* ============================================================================ COMMAND REDESIGN (2026-06-13) — recreated from the Claude Design "Command" bundle. EVERYTHING here is scoped under `.portal` so a page that hasn't opted in (no `.portal` wrapper) keeps 100% of its original styling. The Schibsted Grotesk font is loaded via a in each converted page's . ============================================================================ */ .portal{ --att:#6D4AC9; --att-soft:#EFEAFB; --font-ui:'Schibsted Grotesk',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-display:'Schibsted Grotesk',system-ui,-apple-system,sans-serif; --title-weight:700; --title-tracking:-0.02em; --title-size:34px; --bg:#F2F5F9; --surface:#fff; --surface-2:#F6F8FB; --border:#E3E9EF; --border-strong:#D2DBE4; --text:#0C1E33; --muted:#5A6779; --faint:#90A0B0; --accent:#2563EB; --accent-soft:#EAF1FE; --accent-line:#C9DCFB; --pos:#0F7A4D; --pos-soft:#E5F4EC; --warn:#B45309; --warn-soft:#FBEEDA; --info:#2563EB; --info-soft:#EAF1FE; --slate:#64748B; --slate-soft:#EDF0F4; --ink-btn:#0B1D31; --radius:11px; --radius-sm:8px; --shadow:0 1px 2px rgba(12,30,51,.05); --nav-bg:#0B1D31; --nav-text:#EAF1F8; --nav-muted:#93A5B8; --nav-active-bg:rgba(37,99,235,.20); --nav-active-text:#fff; --nav-border:rgba(255,255,255,.07); font-family:var(--font-ui); color:var(--text); background:var(--bg); min-height:100vh; } .portal *{box-sizing:border-box} .portal h1,.portal h2,.portal h3,.portal h4,.portal p,.portal ul,.portal li{margin:0;padding:0} .portal ul{list-style:none} .portal button{font-family:inherit} .portal a{color:inherit} .portal *:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .portal .eyebrow{font:600 11px/1 var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .portal .page-title{font-family:var(--font-display);font-weight:var(--title-weight);letter-spacing:var(--title-tracking);font-size:var(--title-size);line-height:1.04;color:var(--text);margin-top:9px} .portal .page-sub{font:500 15.5px var(--font-ui);color:var(--muted);margin-top:9px;max-width:62ch;line-height:1.5} .portal .strong{font-weight:600;color:var(--text)} .portal .dim{color:var(--muted)} .portal .mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:13px} .portal .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .portal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 17px;border-radius:var(--radius-sm);font:600 14.5px var(--font-ui);border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s,border-color .15s,box-shadow .15s;white-space:nowrap;text-decoration:none} .portal .btn-sm{height:34px;padding:0 12px;font-size:13px;border-radius:8px} .portal .btn-block{width:100%;height:46px} .portal .btn-dark{background:var(--ink-btn);color:#fff} .portal .btn-dark:hover{filter:brightness(1.12)} .portal .btn-primary{background:var(--accent);color:#fff} .portal .btn-primary:hover{filter:brightness(1.06)} .portal .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)} .portal .btn-ghost:hover{background:var(--surface-2);border-color:var(--muted)} .portal .btn-pos{background:var(--pos);color:#fff} .portal .btn-pos:hover{filter:brightness(1.08)} .portal .link-btn{background:none;border:none;color:var(--accent);font:600 13.5px var(--font-ui);cursor:pointer;padding:0;white-space:nowrap;text-decoration:none} .portal .link-btn:hover{text-decoration:underline} .portal .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} .portal .card-pad{padding:24px 26px} .portal .card-title{font:600 16px var(--font-ui);color:var(--text);letter-spacing:-.01em} .portal .card-title.mt{margin-top:26px} .portal .card-desc{font:500 14px var(--font-ui);color:var(--muted);margin-top:6px;line-height:1.5} .portal .card-eyebrow{display:flex;align-items:center;gap:8px;font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .portal .layout-side{display:grid;grid-template-columns:250px 1fr;min-height:100vh} .portal .sidebar{position:sticky;top:0;height:100vh;background:var(--nav-bg);display:flex;flex-direction:column;padding:22px 16px 18px;gap:3px;border-right:1px solid var(--nav-border)} .portal .side-brand{padding:4px 10px 2px;color:#fff;font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap} .portal .side-brand .accent{color:#6ba3ff} .portal .side-context{font:600 11px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--nav-muted);padding:0 10px 14px;margin-bottom:6px;border-bottom:1px solid var(--nav-border)} .portal .side-nav{display:flex;flex-direction:column;gap:3px;margin-top:10px} .portal .side-link{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:10px;background:none;border:none;color:var(--nav-muted);font:600 14.5px var(--font-ui);cursor:pointer;transition:.14s;text-align:left;text-decoration:none} .portal .side-link:hover{color:var(--nav-text);background:rgba(255,255,255,.04)} .portal .side-link.is-active{background:var(--nav-active-bg);color:var(--nav-active-text)} .portal .side-ico{display:flex;opacity:.9} .portal .side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:14px;border-top:1px solid var(--nav-border)} .portal .side-support{display:flex;align-items:center;gap:11px;padding:0 6px} .portal .ss-name{color:var(--nav-text);font:600 13.5px var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .portal .ss-sub{color:var(--nav-muted);font:500 12px var(--font-ui)} .portal .side-secure{display:flex;align-items:center;gap:7px;color:var(--nav-muted);font:500 11.5px var(--font-ui);padding:0 6px} .portal .side-out{display:flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 12px;border-radius:9px;background:none;border:1px solid var(--nav-border);color:var(--nav-text);font:600 13.5px var(--font-ui);cursor:pointer;transition:.14s} .portal .side-out:hover{background:rgba(255,255,255,.06)} .portal .main-side{min-width:0;display:flex;flex-direction:column} .portal .command-topbar{position:sticky;top:0;z-index:20;height:60px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px} .portal .ct-context{font:600 15px var(--font-ui);color:var(--text);letter-spacing:-.01em} .portal .ct-right{display:flex;align-items:center;gap:16px} .portal .ct-firm{font:500 14px var(--font-ui);color:var(--muted)} .portal .content-side{max-width:1220px;width:100%;margin:0 auto;padding:30px 32px 36px} .portal .avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;flex-shrink:0;font-weight:700;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)} .portal .avatar.light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)} .portal .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px} .portal .stat-row,.portal .bill-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px} .portal .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px} .portal .stat-label{font:600 11.5px var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .portal .stat-num{font-family:var(--font-display);font-weight:var(--title-weight);letter-spacing:var(--title-tracking);font-size:32px;line-height:1.05;color:var(--text);margin-top:10px;font-variant-numeric:tabular-nums} .portal .stat-note{font:500 13px var(--font-ui);color:var(--faint);margin-top:7px} .portal .pay-method{display:flex;align-items:center;gap:9px;font:600 18px var(--font-ui);color:var(--text);margin-top:12px} .portal .orders-card{padding:0;overflow:hidden} .portal .orders-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 16px} .portal .orders-head{display:flex;align-items:baseline;gap:12px} .portal .result-count{font:500 13px var(--font-ui);color:var(--faint);white-space:nowrap} .portal .search{display:flex;align-items:center;gap:9px;height:40px;padding:0 13px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--muted);min-width:300px;transition:.14s} .portal .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)} .portal .search input{border:none;background:none;outline:none;font:500 14px var(--font-ui);color:var(--text);width:100%} .portal .search input::placeholder{color:var(--faint)} .portal .filter-tabs{display:flex;gap:4px;padding:0 16px 14px;flex-wrap:wrap} .portal .tab{height:32px;padding:0 13px;border-radius:8px;background:none;border:none;color:var(--muted);font:600 13px var(--font-ui);cursor:pointer;transition:.14s;white-space:nowrap} .portal .tab:hover{background:var(--surface-2);color:var(--text)} .portal .tab.is-active{background:var(--text);color:var(--surface)} .portal .table-wrap{overflow-x:auto;border:none;border-radius:0;box-shadow:none;background:none} .portal .table{width:100%;border-collapse:collapse} .portal .table th,.portal .table td{white-space:nowrap} /* Property column carries multi-line content (address + type + an Action-needed note) — let it wrap instead of forcing the table into a horizontal scroll. */ .portal .table td.cell-prop{white-space:normal;overflow-wrap:anywhere;min-width:240px} .portal .table td.cell-prop .qc-note{white-space:normal} .portal .table th{font:600 11px var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 16px;background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .portal .table th.num,.portal .table td.num{text-align:right} .portal .table th.ta-right,.portal .table td.ta-right{text-align:right} .portal .table td{padding:15px 16px;border-bottom:1px solid var(--border);font:500 14.5px var(--font-ui);color:var(--text);vertical-align:middle} .portal .table th:first-child,.portal .table td:first-child{padding-left:24px} .portal .table th:last-child,.portal .table td:last-child{padding-right:24px} .portal .table tbody tr{transition:background .12s} .portal .table tbody tr:hover{background:var(--surface-2)} .portal .table tbody tr:last-child td{border-bottom:none} .portal .prop-addr{font-weight:500;color:var(--text);white-space:nowrap} .portal .prop-sub{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:normal;max-width:260px} .portal .row-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px} .portal .row-wait{color:var(--muted);font:500 13.5px var(--font-ui)} .portal .empty-row{text-align:center;color:var(--muted);padding:40px 16px!important;font-weight:500} .portal .paid-pill{display:inline-flex;align-items:center;gap:7px;color:var(--pos);font:600 13px var(--font-ui)} .portal .paid-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--pos)} .portal .total-row td{border-top:2px solid var(--border-strong);background:var(--surface-2);font-size:14.5px} .portal .ready-hero{display:flex;align-items:center;gap:20px;padding:18px 24px 18px 26px;background:var(--pos-soft);border:1px solid var(--pos);border-radius:var(--radius);margin-bottom:18px;position:relative;overflow:hidden} .portal .ready-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--pos)} .portal .rh-num{font-family:var(--font-display);font-weight:var(--title-weight);font-size:48px;line-height:1;color:var(--pos);font-variant-numeric:tabular-nums;min-width:52px;text-align:center;letter-spacing:var(--title-tracking)} .portal .rh-text{flex:1;min-width:0} .portal .rh-title{display:flex;align-items:center;gap:10px;font:700 17.5px var(--font-ui);color:var(--text);letter-spacing:-.01em} .portal .rh-dot{width:9px;height:9px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 0 var(--pos);animation:rhpulse 2.6s ease-out infinite} @keyframes rhpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pos) 38%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}} @media(prefers-reduced-motion:reduce){.portal .rh-dot{animation:none}} .portal .rh-sub{font:500 13.5px var(--font-ui);color:var(--muted);margin-top:5px} .portal .cost-dim{color:var(--muted);font-variant-numeric:tabular-nums;font-weight:500} .portal .due-pill{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:5px 11px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font:600 12.5px var(--font-ui);white-space:nowrap} .portal .open-pill{display:inline-flex;align-items:center;gap:7px;color:var(--warn);font:600 13px var(--font-ui)} .portal .open-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)} .portal .open-row{background:color-mix(in srgb,var(--warn-soft) 45%,transparent)} .portal .pill{display:inline-flex;align-items:center;gap:7px;padding:0 11px;height:26px;border-radius:999px;font:600 12.5px var(--font-ui);white-space:nowrap} .portal .pill .dot{width:7px;height:7px;border-radius:50%} .portal .settings-grid{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start} .portal .settings-main{display:flex;flex-direction:column;gap:18px} .portal .settings-rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:90px} .portal .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin:18px 0 20px} .portal .field{display:flex;flex-direction:column} .portal .field-full{grid-column:1/-1} .portal .field-label{font:600 13.5px var(--font-ui);color:var(--text);margin-bottom:8px} .portal .field-opt{font-style:normal;font-weight:500;color:var(--faint)} .portal .field-hint{font:500 12.5px var(--font-ui);color:var(--muted);margin-top:7px;line-height:1.45} .portal .input{height:46px;width:100%;border:1px solid var(--border-strong);border-radius:10px;padding:0 14px;font:500 15px var(--font-ui);color:var(--text);background:var(--surface);transition:.14s} .portal .input::placeholder{color:var(--faint)} .portal .input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .portal .input-lock{background:var(--surface-2);color:var(--muted)} .portal .copy-field{display:flex;gap:10px} .portal .copy-field .input{flex:1} .portal .support-top{display:flex;align-items:center;gap:13px} .portal .support-name{font:600 16px var(--font-ui);color:var(--text)} .portal .support-title{font:500 13px var(--font-ui);color:var(--muted);margin-top:2px} .portal .support-rows{display:flex;flex-direction:column;gap:2px;margin-top:16px} .portal .support-row{display:flex;align-items:center;gap:10px;height:38px;color:var(--text);font:500 14px var(--font-ui);text-decoration:none;border-radius:8px;padding:0 8px;margin:0 -8px;transition:.12s} .portal a.support-row:hover{background:var(--surface-2);color:var(--accent)} .portal .support-row.muted{color:var(--muted)} .portal .sec-list{display:flex;flex-direction:column;gap:15px;margin-top:16px} .portal .sec-item{display:flex;gap:12px} .portal .sec-check{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--pos-soft);color:var(--pos);display:flex;align-items:center;justify-content:center;margin-top:1px;font-size:11px;font-weight:800} .portal .sec-title{font:600 14px var(--font-ui);color:var(--text)} .portal .sec-body{font:500 13px var(--font-ui);color:var(--muted);margin-top:3px;line-height:1.5} .portal .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding:20px 2px 8px;border-top:1px solid var(--border)} .portal .foot-secure{display:flex;align-items:center;gap:8px;color:var(--muted);font:500 13px var(--font-ui)} .portal .foot-links{color:var(--muted);font:500 13px var(--font-ui)} .portal .foot-links a{color:var(--accent);font-weight:600;text-decoration:none} .portal .foot-dot{margin:0 9px;color:var(--faint)} .portal .signin{display:grid;grid-template-columns:1.04fr 1fr;min-height:100vh} .portal .signin-brand{background:linear-gradient(160deg,#102A47 0%,#0A1A2E 64%,#091627 100%);color:#fff;padding:54px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px} .portal .sb-top{color:#fff} .portal .sb-top .sb-logo{font-weight:800;font-size:25px;letter-spacing:-.01em} .portal .sb-tag{color:rgba(255,255,255,.5);font:600 11px var(--font-ui);letter-spacing:.18em;text-transform:uppercase;margin-top:7px} .portal .sb-top .accent{color:#6ba3ff} .portal .sb-mid{max-width:440px} .portal .sb-eyebrow{font:600 11px var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:#7FA8E6} .portal .sb-head{font-family:var(--font-display);font-weight:var(--title-weight);letter-spacing:var(--title-tracking);font-size:33px;line-height:1.18;color:#fff;margin-top:18px} .portal .sb-points{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:30px} .portal .sb-points li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.86);font:500 15px var(--font-ui)} .portal .sb-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(127,168,230,.18);color:#9DC0F0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800} .portal .sb-foot{display:flex;align-items:center;gap:13px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)} .portal .sb-foot-name{color:#fff;font:600 14px var(--font-ui)} .portal .sb-foot-sub{color:rgba(255,255,255,.6);font:500 13px var(--font-ui);margin-top:3px} .portal .signin-form-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 28px;background:var(--bg)} .portal .signin-card{width:100%;max-width:472px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 50px -24px rgba(12,30,51,.28);padding:42px 44px 34px} .portal .signin-mobile-brand{display:none;justify-content:center;margin-bottom:22px;font-weight:800;font-size:21px;color:var(--text)} .portal .signin-mobile-brand .accent{color:var(--accent)} .portal .signin-title{font-family:var(--font-display);font-weight:var(--title-weight);letter-spacing:var(--title-tracking);font-size:27px;color:var(--text)} .portal .signin-sub{font:500 14.5px var(--font-ui);color:var(--muted);margin:7px 0 26px;line-height:1.5} .portal .signin-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;font:500 13.5px var(--font-ui);line-height:1.45;margin-bottom:20px} .portal .signin-alert.err{background:#FCEDEC;color:#B42318;border:1px solid #F4D2CE} .portal .signin-alert.ok{background:var(--pos-soft);color:var(--pos);border:1px solid var(--pos)} .portal .signin-card .field{margin-bottom:16px} .portal .signin-card .btn-block{margin-top:6px} .portal .signin-forgot{font:500 13px var(--font-ui);color:var(--muted);text-align:center;margin-top:14px;line-height:1.55} .portal .signin-forgot b{color:var(--text);font-weight:600} .portal .or-divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--faint);font:600 12px var(--font-ui)} .portal .or-divider::before,.portal .or-divider::after{content:"";flex:1;height:1px;background:var(--border)} .portal .signin-magic{font:500 13px var(--font-ui);color:var(--muted);text-align:center;margin-top:13px;line-height:1.5} .portal .signin-secure{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--faint);font:500 12px var(--font-ui);margin-top:22px;padding-top:18px;border-top:1px solid var(--border)} .portal .signin-trouble{font:600 13.5px var(--font-ui);color:var(--text)} .portal .signin-trouble a{color:var(--accent);font-weight:600;text-decoration:none} /* Reuse-from-old-portal niceties, re-scoped for the new look */ .portal .qc-note{margin-top:8px;padding:8px 11px;border-radius:8px;background:var(--warn-soft);color:#7a5212;font-size:12.5px;line-height:1.45;border:1px solid #ecd9ad} .portal .qc-note strong{color:var(--warn)} .portal .qc-note--banner{margin:0 0 20px;padding:13px 16px;font-size:13.5px} .portal .alert--danger{display:flex;align-items:flex-start;gap:10px;background:var(--warn-soft);color:#8a3a12;border:1px solid #eab8b8;border-radius:8px;padding:13px 16px;font-size:13.5px;margin-bottom:20px} .portal .alert--danger a{color:var(--accent);font-weight:700} .portal .meter{height:7px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:12px} .portal .meter__fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s} .portal .meter__fill.is-high{background:var(--warn)} .portal .meter__fill.is-over{background:#B42318} .portal .inv-toggle{background:none;border:none;cursor:pointer;color:var(--accent);font:600 13.5px var(--font-ui);padding:0} .portal .inv-toggle:hover{text-decoration:underline} .portal .inv-studies td{background:var(--surface-2);padding:0 24px 14px!important} .portal .inv-studies ul{margin:0;padding:8px 0 0;list-style:none;font-size:13px} .portal .inv-studies li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dashed var(--border);color:var(--muted)} .portal .inv-studies li:last-child{border-bottom:none} /* New-order form keeps its original field/card behavior inside the new shell (P5: shell-only) */ .portal .legacy-form .card{padding:24px} .portal .legacy-form .field{display:block;margin-bottom:16px} /* Resources hub */ .portal .resource-row{display:flex;align-items:center;gap:12px;padding:13px 8px;margin:0 -8px;border-radius:9px;text-decoration:none;color:var(--text);font:600 14.5px var(--font-ui);transition:.12s;border-bottom:1px solid var(--border)} .portal .resource-row:last-child{border-bottom:none} .portal .resource-row:hover{background:var(--surface-2);color:var(--accent)} .portal .resource-row .rr-ico{flex-shrink:0;color:var(--accent);display:flex} .portal .resource-row .rr-text{flex:1;min-width:0} .portal .resource-row .rr-sub{font:500 12.5px var(--font-ui);color:var(--muted);margin-top:2px} .portal .resource-row .rr-arrow{flex-shrink:0;color:var(--faint)} .portal .faq details{border-bottom:1px solid var(--border);padding:4px 0} .portal .faq details:last-child{border-bottom:none} .portal .faq summary{cursor:pointer;list-style:none;padding:13px 2px;font:600 14.5px var(--font-ui);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px} .portal .faq summary::-webkit-details-marker{display:none} .portal .faq summary::after{content:"+";color:var(--muted);font-weight:600;font-size:18px;line-height:1} .portal .faq details[open] summary::after{content:"−"} .portal .faq .faq-a{padding:0 2px 14px;font:500 14px var(--font-ui);color:var(--muted);line-height:1.55} @media(max-width:1000px){ .portal .settings-grid{grid-template-columns:1fr} .portal .settings-rail{position:static} .portal .stat-row,.portal .bill-summary{grid-template-columns:1fr} } @media(max-width:880px){ .portal .signin{grid-template-columns:1fr} .portal .signin-brand{display:none} .portal .signin-mobile-brand{display:flex} .portal .layout-side{grid-template-columns:1fr} .portal .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px} .portal .side-nav{flex-direction:row;margin-top:0;flex-wrap:wrap} .portal .side-context,.portal .side-foot{display:none} .portal .content-side{padding:20px 16px 28px} .portal .command-topbar{padding:0 16px} } @media(max-width:560px){ .portal .form-grid{grid-template-columns:1fr} .portal .page-head{flex-direction:column;align-items:flex-start} .portal .search{min-width:0;width:100%} .portal .orders-toolbar{flex-direction:column;align-items:stretch} }