:root {
  color-scheme: dark;
  --bg: #07101f;
  --panel: #0c1a2e;
  --panel-soft: rgba(15, 30, 52, .82);
  --line: rgba(148, 163, 184, .17);
  --line-bright: rgba(125, 211, 252, .32);
  --text: #eef5ff;
  --muted: #91a4bd;
  --muted-2: #71849c;
  --blue: #7dd3fc;
  --cyan: #22d3ee;
  --green: #34d399;
  --red: #fb7185;
  --amber: #fbbf24;
  --shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 84% 5%, rgba(34, 211, 238, .11), transparent 34rem),
    radial-gradient(circle at 8% 22%, rgba(59, 130, 246, .13), transparent 31rem),
    var(--bg);
}

button, input { font: inherit; }
a { color: inherit; }
.page-shell { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 780; letter-spacing: -.02em; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  color: #03111e; font-weight: 950; background: linear-gradient(135deg, #93c5fd, var(--cyan));
  box-shadow: 0 10px 34px rgba(34, 211, 238, .18);
}
.site-nav { display: flex; align-items: center; gap: 26px; color: #b6c6da; font-size: 14px; font-weight: 680; }
.site-nav a { text-decoration: none; transition: color .18s ease; }
.site-nav a:hover { color: white; }
.site-nav form { margin: 0; }
.nav-cta, .nav-button { border: 1px solid var(--line-bright); border-radius: 10px; padding: 10px 15px; background: rgba(34, 211, 238, .07); color: #dff9ff !important; }
.nav-button { cursor: pointer; }

.hero { min-height: 650px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 72px; padding-block: 72px 82px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.hero h1, .auth-copy h1, .dashboard-head h1 { margin: 20px 0; letter-spacing: -.055em; line-height: 1.02; }
.hero h1 { font-size: clamp(48px, 6.2vw, 78px); }
.gradient-text { background: linear-gradient(90deg, #93c5fd, #67e8f9); color: transparent; background-clip: text; }
.hero-lead { max-width: 650px; margin: 0; color: #9eb2cc; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 21px;
  border: 1px solid transparent; border-radius: 12px; font-weight: 760; text-decoration: none; cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: #04121f; background: linear-gradient(135deg, #93c5fd, #67e8f9); box-shadow: 0 12px 34px rgba(34, 211, 238, .12); }
.button-secondary { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, .035); }
.button-secondary:hover { border-color: var(--line-bright); background: rgba(125, 211, 252, .065); }
.button-full { width: 100%; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; color: var(--muted); font-size: 13px; }
.trust-row b { margin-right: 5px; color: var(--green); }

.hero-console { position: relative; padding: 20px; border: 1px solid var(--line-bright); border-radius: 22px; background: linear-gradient(145deg, rgba(15, 33, 56, .94), rgba(8, 20, 36, .96)); box-shadow: var(--shadow); }
.hero-console::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(145deg, rgba(125, 211, 252, .4), transparent 40%); filter: blur(14px); opacity: .24; }
.console-top, .console-bottom { display: flex; justify-content: space-between; align-items: center; }
.console-title { font-size: 13px; color: #cbd8e8; font-weight: 720; }
.live-pill, .pending-pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 780; }
.live-pill { color: #8ff1cd; background: rgba(52, 211, 153, .1); }
.search-preview { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; height: 46px; margin: 18px 0 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(3, 11, 23, .55); font-size: 12px; }
.search-preview kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: #7f91a8; background: rgba(255, 255, 255, .03); }
.number-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.number-row:last-of-type { border-bottom: 0; }
.number-row > span { display: flex; flex-direction: column; }
.number-row b { font-size: 13px; }
.number-row small { margin-top: 4px; color: var(--muted-2); font-size: 10px; }
.flag { display: grid !important; place-items: center; width: 38px; height: 32px; border-radius: 8px; color: #c8e9ff; background: rgba(125, 211, 252, .08); font-size: 11px; font-weight: 800; }
.price { align-items: flex-end; color: #dff9ff; font-size: 13px; font-weight: 760; }
.console-bottom { padding-top: 17px; color: var(--muted-2); font-size: 10px; }

.feature-section { padding-block: 82px; border-top: 1px solid var(--line); }
.section-heading span { color: var(--cyan); font-size: 12px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.section-heading h2 { margin: 12px 0 34px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.04em; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feature-card { min-height: 205px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-soft); transition: transform .18s ease, border-color .18s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: var(--line-bright); }
.feature-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--cyan); background: rgba(34, 211, 238, .08); font-size: 19px; }
.feature-card h3 { margin: 24px 0 9px; font-size: 17px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.status-strip { display: flex; justify-content: space-between; align-items: center; margin-block: 18px 72px; padding: 21px 24px; border: 1px solid var(--line); border-radius: 15px; background: rgba(15, 30, 52, .52); }
.status-strip > div { display: flex; align-items: center; gap: 13px; }
.status-strip > div > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.status-strip b { font-size: 13px; }
.status-strip small { color: var(--muted-2); font-size: 11px; }
.status-strip a { color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: none; }

.auth-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 90px; align-items: center; min-height: calc(100vh - 184px); padding-block: 66px 90px; }
.auth-copy h1 { font-size: clamp(44px, 5vw, 64px); }
.auth-copy > p { max-width: 510px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.auth-proof { display: flex; align-items: flex-start; gap: 13px; margin-top: 25px; }
.auth-proof > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--green); background: rgba(52, 211, 153, .09); }
.auth-proof div { display: flex; flex-direction: column; gap: 5px; }
.auth-proof b { font-size: 14px; }
.auth-proof small { color: var(--muted); line-height: 1.45; }
.step-list { margin: 30px 0 0; padding: 0; list-style: none; }
.step-list li { display: flex; gap: 14px; margin-top: 20px; }
.step-list li > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line-bright); border-radius: 9px; color: var(--cyan); font-size: 12px; font-weight: 800; }
.step-list div { display: flex; flex-direction: column; gap: 5px; }
.step-list b { font-size: 14px; }
.step-list small { color: var(--muted); line-height: 1.45; }
.form-card { width: min(100%, 540px); justify-self: end; padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: rgba(12, 26, 46, .9); box-shadow: var(--shadow); }
.form-heading > span { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.form-heading h2 { margin: 10px 0 27px; font-size: 25px; letter-spacing: -.03em; }
.portal-form { display: grid; gap: 18px; }
.portal-form label { display: grid; gap: 8px; color: #c7d5e5; font-size: 13px; font-weight: 680; }
.portal-form input, .portal-form select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: white; background: #071426; }
.portal-form input:focus, .portal-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .08); }
.portal-form label small { color: var(--muted-2); font-size: 11px; font-weight: 500; }
.portal-form .terms-check { display: flex; grid-template-columns: none; align-items: flex-start; gap: 10px; color: var(--muted); font-weight: 520; line-height: 1.55; }
.portal-form .terms-check input { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--cyan); }
.portal-form .terms-check a { color: var(--blue); font-weight: 700; }
.form-foot { margin: 24px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.form-foot a { color: var(--blue); font-weight: 700; }
.secure-lock { padding: 32px 20px; border: 1px dashed var(--line-bright); border-radius: 14px; text-align: center; background: rgba(34, 211, 238, .035); }
.secure-lock > span { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto; border-radius: 50%; color: var(--cyan); background: rgba(34, 211, 238, .08); font-size: 23px; }
.secure-lock h3 { margin: 17px 0 8px; font-size: 17px; }
.secure-lock p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.staging-warning { display: flex; flex-direction: column; gap: 5px; margin: -7px 0 18px; padding: 12px 13px; border: 1px solid rgba(251, 191, 36, .25); border-radius: 10px; color: #fde68a; background: rgba(251, 191, 36, .065); }
.staging-warning b { font-size: 12px; }
.staging-warning span { color: #c7b779; font-size: 11px; line-height: 1.5; }

.flash-stack { display: grid; gap: 8px; }
.flash { padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.flash-success { color: #065f46; font-weight: 600; border-color: rgba(52, 211, 153, .25); background: rgba(52, 211, 153, .08); }
.flash-error { color: #fecdd3; border-color: rgba(251, 113, 133, .25); background: rgba(251, 113, 133, .08); }
.flash-info { color: #cbeafe; border-color: rgba(125, 211, 252, .25); background: rgba(125, 211, 252, .08); }

.dashboard { flex: 1; padding-block: 60px 90px; }
.dashboard-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }
.dashboard-head h1 { margin-bottom: 10px; font-size: clamp(38px, 5vw, 58px); }
.dashboard-head p { margin: 0; color: var(--muted); }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-grid article { display: flex; flex-direction: column; min-height: 150px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); }
.metric-grid article > span { color: var(--muted); font-size: 12px; }
.metric-grid article > b { margin: 19px 0 5px; font-size: 27px; letter-spacing: -.035em; }
.metric-grid article > small { color: var(--muted-2); font-size: 11px; }
.metric-ok { color: var(--green); }
.empty-panel { margin-top: 20px; padding: 62px 25px; border: 1px solid var(--line); border-radius: 18px; text-align: center; background: rgba(12, 26, 46, .58); }
.empty-panel h2 { margin: 18px 0 8px; font-size: 22px; }
.empty-panel p { margin: 0 auto 23px; max-width: 500px; color: var(--muted); font-size: 14px; }
.empty-panel.compact { margin: 0; padding: 50px 20px; border: 0; }
.table-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--panel-soft); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 17px 20px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; font-weight: 720; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
td > b, td > small { display: block; }
td > small { margin-top: 4px; color: var(--muted-2); }
.align-right { text-align: right; }
.pending-pill { color: #fde68a; background: rgba(251, 191, 36, .09); }
.row-actions { display: flex; justify-content: flex-end; gap: 8px; }
.row-actions form { margin: 0; }
.mini-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: white; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.mini-button.approve { color: #065f46; font-weight: 600; border-color: rgba(52, 211, 153, .25); background: rgba(52, 211, 153, .07); }
.mini-button.danger { color: #fecdd3; border-color: rgba(251, 113, 133, .23); }

.catalog-head { align-items: center; }
.result-count { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(52, 211, 153, .23); border-radius: 999px; color: #a7f3d0; background: rgba(52, 211, 153, .07); font-size: 12px; font-weight: 750; }
.filter-bar { display: grid; grid-template-columns: minmax(250px, 1fr) 210px 210px auto; gap: 11px; align-items: end; margin-bottom: 22px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: rgba(12, 26, 46, .72); }
.filter-bar > label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.filter-bar input, .filter-bar select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: white; background: #071426; }
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--cyan); }
.filter-bar .search-field { position: relative; display: block; }
.filter-bar .search-field > span { position: absolute; z-index: 1; top: 14px; left: 13px; color: var(--cyan); }
.filter-bar .search-field input { padding-left: 37px; }
.filter-bar .button { min-height: 44px; }
.inventory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.did-card { padding: 23px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel-soft); transition: border-color .18s ease, transform .18s ease; }
.did-card:hover { transform: translateY(-2px); border-color: var(--line-bright); }
.did-card-top { display: flex; justify-content: space-between; align-items: center; }
.country-badge { display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 8px; color: #c8e9ff; background: rgba(125, 211, 252, .08); font-size: 11px; font-weight: 800; }
.availability { display: flex; align-items: center; gap: 6px; color: #a7f3d0; font-size: 11px; font-weight: 700; }
.availability i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.did-card h2 { margin: 22px 0 6px; font-size: 23px; letter-spacing: -.03em; }
.did-card > p { margin: 0; color: var(--muted); font-size: 13px; }
.did-commercial-line { display: grid; gap: 5px; margin: 12px 0 16px; padding: 11px 12px; border: 1px solid rgba(14,116,144,.12); border-radius: 9px; color: #527084; background: rgba(237,248,253,.7); font-size: 9px; }
.capabilities { display: flex; gap: 7px; min-height: 27px; margin: 18px 0; }
.capabilities span { align-self: start; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: #adbed2; font-size: 10px; }
.did-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 17px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(3, 11, 23, .4); }
.did-price > span { display: flex; flex-direction: column; gap: 5px; }
.did-price small { color: var(--muted-2); font-size: 9px; text-transform: uppercase; }
.did-price b { font-size: 13px; }
.admin-split { display: grid; grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.pricing-split { grid-template-columns: minmax(360px, .65fr) minmax(0, 1.35fr); }
.admin-form-card { position: sticky; top: 18px; width: 100%; padding: 27px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-row { display: flex; gap: 20px; padding: 3px 0 8px; }
.check-row label { display: flex; align-items: center; gap: 8px; color: #c7d5e5; font-size: 13px; }
.check-row input { width: 16px; height: 16px; accent-color: var(--cyan); }
.inventory-table-panel { min-height: 300px; }
.panel-title { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); }
.panel-title div { display: flex; flex-direction: column; gap: 4px; }
.panel-title span { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.panel-title h2 { margin: 0; font-size: 18px; }
.panel-title > b { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 8px; color: #c8e9ff; background: rgba(125, 211, 252, .08); font-size: 12px; }
.status-pill { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 750; }
.status-available { color: #a7f3d0; background: rgba(52, 211, 153, .08); }
.status-reserved { color: #fde68a; background: rgba(251, 191, 36, .08); }
.status-sold { color: #cbd5e1; background: rgba(148, 163, 184, .08); }

.site-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-block: 30px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 12px; }
.legal-page { width: min(820px, calc(100% - 40px)); padding-block: 65px 90px; }
.legal-page > h1 { margin: 18px 0 7px; font-size: clamp(40px, 6vw, 62px); letter-spacing: -.05em; }
.legal-updated { margin: 0 0 45px; color: var(--muted-2); font-size: 12px; }
.legal-page section { padding: 22px 0; border-top: 1px solid var(--line); }
.legal-page section h2 { margin: 0 0 10px; font-size: 18px; }
.legal-page section p { margin: 0; color: var(--muted); line-height: 1.75; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { max-width: 750px; }
  .hero-console { width: min(100%, 600px); }
  .feature-grid, .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-layout { grid-template-columns: 1fr; gap: 42px; }
  .form-card { justify-self: start; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .inventory-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-split, .pricing-split { grid-template-columns: 1fr; }
  .admin-form-card { position: static; max-width: 620px; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 28px, 1180px); }
  .site-header { height: 76px; }
  .brand-mark { width: 37px; height: 37px; }
  .brand > span:last-child { display: none; }
  .site-nav { gap: 13px; }
  .site-nav > a:not(.nav-cta) { display: none; }
  .hero { min-height: auto; padding-block: 55px 65px; }
  .hero h1 { font-size: clamp(44px, 14vw, 62px); }
  .hero-console { padding: 14px; }
  .trust-row { display: grid; gap: 10px; }
  .feature-grid, .metric-grid { grid-template-columns: 1fr; }
  .feature-section { padding-block: 62px; }
  .status-strip, .dashboard-head, .site-footer { align-items: flex-start; flex-direction: column; }
  .auth-layout { padding-block: 48px 70px; }
  .form-card { padding: 25px 20px; }
  .dashboard { padding-block: 45px 70px; }
  .dashboard-head { align-items: flex-start; }
  .filter-bar, .inventory-grid, .form-row { grid-template-columns: 1fr; }
  .catalog-head { align-items: flex-start; }
}

/* Diversify light sky theme */
:root {
  color-scheme: light;
  --bg: #eef9ff;
  --panel: #ffffff;
  --panel-soft: rgba(255, 255, 255, .82);
  --line: rgba(14, 116, 144, .14);
  --line-bright: rgba(14, 165, 233, .36);
  --text: #102a43;
  --muted: #56728f;
  --muted-2: #7890a8;
  --blue: #0284c7;
  --cyan: #0ea5e9;
  --green: #10b981;
  --shadow: 0 28px 75px rgba(14, 116, 144, .14);
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 85% 4%, rgba(56, 189, 248, .24), transparent 29rem),
    radial-gradient(circle at 7% 38%, rgba(186, 230, 253, .62), transparent 33rem),
    linear-gradient(145deg, #f8fdff 0%, #eaf7ff 48%, #dff3ff 100%);
  background-attachment: fixed;
}

.page-shell { background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 24rem); }
.site-header { position: relative; z-index: 20; }
.brand { color: #12304d; }
.brand-mark {
  width: 47px; height: 47px; border-radius: 14px; color: white; font-size: 12px;
  background: linear-gradient(145deg, #38bdf8, #0284c7);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 11px 22px rgba(2, 132, 199, .23), inset 0 2px 1px rgba(255, 255, 255, .5), inset 0 -4px 8px rgba(3, 105, 161, .24);
}
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy b { font-size: 14px; letter-spacing: -.015em; }
.brand-copy small { color: #68839e; font-size: 9px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.site-nav { color: #365875; }
.site-nav a:hover { color: #075985; }
.nav-cta, .nav-button { color: #075985 !important; border-color: rgba(2, 132, 199, .24); background: rgba(255, 255, 255, .62); box-shadow: 0 7px 18px rgba(2, 132, 199, .08); }

.landing-main { display: flex; flex: 1; }
.landing-main > .hero { display: grid; width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 158px); flex: none; grid-template-columns: 1.03fr .97fr; gap: 55px; margin-inline: auto; padding-block: 58px 72px; }
.eyebrow { color: #0284c7; }
.live-dot { background: #38bdf8; box-shadow: 0 0 0 5px rgba(56, 189, 248, .12), 0 0 18px rgba(2, 132, 199, .4); }
.hero h1 { color: #102a43; text-shadow: 0 2px 0 white; }
.gradient-text { background: none; color: #0b8fce; -webkit-text-fill-color: #0b8fce; filter: drop-shadow(0 8px 15px rgba(14, 165, 233, .13)); }
.hero-lead { color: #52708d; }
.button-primary { color: white; background: linear-gradient(135deg, #0284c7, #38bdf8); box-shadow: 0 12px 27px rgba(2, 132, 199, .22), inset 0 1px 1px rgba(255, 255, 255, .45); }
.button-secondary { color: #164e73; border-color: rgba(2, 132, 199, .17); background: rgba(255, 255, 255, .72); box-shadow: 0 9px 22px rgba(14, 116, 144, .08); }
.button-secondary:hover { border-color: rgba(2, 132, 199, .35); background: white; }
.trust-row { color: #5f7b95; }
.trust-row b { color: #0284c7; }

.brand-stage {
  position: relative; min-height: 505px; border: 1px solid rgba(255, 255, 255, .82); border-radius: 42% 58% 48% 52% / 38% 39% 61% 62%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(186, 230, 253, .48));
  box-shadow: 0 35px 90px rgba(14, 116, 144, .16), inset 0 1px 0 white;
  perspective: 1000px; isolation: isolate; overflow: hidden;
}
.brand-stage::before { content: ""; position: absolute; inset: 11%; border: 1px solid rgba(14, 165, 233, .12); border-radius: 50%; transform: rotate(-17deg); }
.stage-glow { position: absolute; width: 280px; height: 280px; top: 78px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: #7dd3fc; filter: blur(68px); opacity: .42; }
.orbit { position: absolute; top: 46%; left: 50%; width: 420px; height: 170px; margin: -85px 0 0 -210px; border: 2px solid rgba(2, 132, 199, .2); border-radius: 50%; transform: rotate(-17deg); }
.orbit::after { content: ""; position: absolute; width: 13px; height: 13px; top: 16px; right: 72px; border-radius: 50%; background: #0ea5e9; box-shadow: 0 0 0 7px rgba(14, 165, 233, .12), 0 6px 15px rgba(2, 132, 199, .28); }
.orbit-two { width: 360px; height: 300px; margin: -150px 0 0 -180px; transform: rotate(61deg); border-style: dashed; opacity: .55; }
.orbit-two::after { top: auto; right: auto; bottom: 25px; left: 52px; width: 9px; height: 9px; background: #7dd3fc; }
.brand-cube { position: absolute; z-index: 4; width: 220px; height: 220px; top: 103px; left: 50%; margin-left: -110px; transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(-24deg) rotateZ(2deg); filter: drop-shadow(0 28px 23px rgba(3, 105, 161, .22)); }
.cube-face { position: absolute; border: 1px solid rgba(255, 255, 255, .64); overflow: hidden; backface-visibility: hidden; }
.cube-front { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 220px; height: 220px; border-radius: 35px; color: white; background: linear-gradient(145deg, #38bdf8 0%, #0284c7 64%, #0369a1 100%); box-shadow: inset 10px 12px 24px rgba(255, 255, 255, .22), inset -16px -18px 28px rgba(3, 105, 161, .24); transform: translateZ(45px); }
.cube-front::after { content: ""; position: absolute; width: 130%; height: 55%; top: -32%; left: -18%; transform: rotate(-18deg); background: rgba(255, 255, 255, .15); filter: blur(4px); }
.cube-front span { font-size: 76px; font-weight: 900; letter-spacing: -.1em; text-shadow: 0 6px 16px rgba(3, 105, 161, .25); transform: translateX(-4px); }
.cube-front small { margin-top: -4px; font-size: 11px; font-weight: 800; letter-spacing: .34em; opacity: .75; }
.cube-side { width: 90px; height: 220px; left: 175px; border-radius: 0 22px 22px 0; background: linear-gradient(90deg, #0369a1, #075985); transform: rotateY(90deg) translateZ(45px); }
.cube-top { width: 220px; height: 90px; top: -45px; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, #bae6fd, #38bdf8); transform: rotateX(90deg) translateZ(-45px); }
.floating-chip { position: absolute; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .86); border-radius: 13px; color: #315d7b; background: rgba(255, 255, 255, .78); box-shadow: 0 14px 30px rgba(14, 116, 144, .14); backdrop-filter: blur(14px); font-size: 11px; font-weight: 720; }
.floating-chip i { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .1); }
.chip-one { top: 78px; right: 27px; transform: rotate(3deg); }
.chip-two { left: 25px; top: 285px; transform: rotate(-4deg); }
.chip-two b { color: #0284c7; }
.company-plaque { position: absolute; z-index: 7; display: flex; align-items: center; gap: 12px; left: 50%; bottom: 39px; width: min(390px, calc(100% - 48px)); transform: translateX(-50%); padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; color: #123b5a; background: rgba(255, 255, 255, .84); box-shadow: 0 18px 45px rgba(14, 116, 144, .16); backdrop-filter: blur(16px); }
.plaque-mark { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border-radius: 12px; color: white; background: linear-gradient(145deg, #38bdf8, #0284c7); font-size: 11px; font-weight: 900; box-shadow: inset 0 1px 1px white, 0 8px 18px rgba(2, 132, 199, .2); }
.company-plaque > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.company-plaque b { font-size: 14px; }
.company-plaque small { color: #718ca4; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.form-card, .hero-console, .feature-card, .metric-grid article, .empty-panel, .table-panel, .filter-bar, .did-card, .status-strip {
  color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, .82); box-shadow: 0 16px 42px rgba(14, 116, 144, .09);
}
.form-card { box-shadow: 0 28px 75px rgba(14, 116, 144, .13); }
.portal-form input, .portal-form select, .filter-bar input, .filter-bar select { color: #163650; border-color: rgba(14, 116, 144, .16); background: rgba(248, 253, 255, .92); }
.portal-form input::placeholder, .filter-bar input::placeholder { color: #8aa0b4; }
.portal-form .form-hint { margin-top: -3px; color: #7890a2; font-size: 9px; font-weight: 500; line-height: 1.4; }
.portal-form label, .check-row label { color: #385a76; }
.portal-form input:focus, .portal-form select:focus, .filter-bar input:focus, .filter-bar select:focus { border-color: #38bdf8; background: white; }
.secure-lock { border-color: rgba(2, 132, 199, .22); background: rgba(186, 230, 253, .22); }
.secure-lock > span, .feature-icon { color: #0284c7; background: rgba(14, 165, 233, .1); }
.auth-copy > p, .auth-proof small, .step-list small, .empty-panel p, .feature-card p, .did-card > p, .dashboard-head p { color: var(--muted); }
.auth-proof > span { color: #0284c7; background: rgba(14, 165, 233, .1); }
.step-list li > span { color: #0284c7; border-color: rgba(2, 132, 199, .24); background: rgba(255, 255, 255, .55); }
.search-preview, .did-price { color: var(--text); border-color: var(--line); background: rgba(239, 249, 255, .8); }
.country-badge, .panel-title > b { color: #0369a1; background: rgba(14, 165, 233, .09); }
th, td { border-color: var(--line); }
th { color: #66819a; }
.site-footer { color: #6f879d; border-color: var(--line); }
.staging-warning { color: #8a5b00; border-color: rgba(217, 119, 6, .25); background: rgba(254, 243, 199, .68); }
.staging-warning span { color: #8a6a2c; }
.flash-info { color: #075985; border-color: rgba(2, 132, 199, .22); background: rgba(186, 230, 253, .45); }
.legal-page section { border-color: var(--line); }

@media (max-width: 980px) {
  .landing-main > .hero { grid-template-columns: 1fr; }
  .brand-stage { width: min(100%, 620px); min-height: 470px; justify-self: center; }
}

@media (max-width: 640px) {
  .brand-copy { display: none; }
  .landing-main > .hero { width: min(100% - 28px, 1180px); grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .hero-copy { min-width: 0; }
  .brand-stage { width: 100%; min-width: 0; min-height: 410px; border-radius: 30px; }
  .brand-cube { top: 82px; transform: scale(.78) rotateX(-10deg) rotateY(-24deg) rotateZ(2deg); }
  .orbit { transform: scale(.76) rotate(-17deg); }
  .orbit-two { transform: scale(.76) rotate(61deg); }
  .floating-chip { font-size: 9px; }
  .chip-one { top: 58px; right: 13px; }
  .chip-two { top: 250px; left: 13px; }
  .company-plaque { bottom: 23px; }
}

/* Authenticated client workspace header */
.client-site-header {
  width: min(1480px, calc(100% - 32px)); height: 84px; gap: 22px; margin-top: 12px; padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, .86); border-radius: 21px;
  background: rgba(255, 255, 255, .78); box-shadow: 0 18px 50px rgba(14, 116, 144, .12); backdrop-filter: blur(18px);
}
.client-site-header .brand { flex: 0 0 auto; }
.client-site-header .brand-mark { width: 43px; height: 43px; }
.client-primary-nav { display: flex; align-self: stretch; align-items: center; justify-content: center; gap: 4px; margin-left: auto; }
.client-primary-nav a {
  position: relative; display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 13px;
  color: #526f89; font-size: 12px; font-weight: 730; text-decoration: none; transition: color .16s ease, background .16s ease;
}
.client-primary-nav a::after { content: ""; position: absolute; right: 13px; bottom: 0; left: 13px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.client-primary-nav a:hover, .client-primary-nav a.active { color: #0279b8; background: linear-gradient(180deg, transparent 50%, rgba(14, 165, 233, .07)); }
.client-primary-nav a.active::after { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.nav-icon { display: grid; place-items: center; width: 21px; height: 21px; color: #0b91ce; font-size: 15px; }
.client-utilities { display: flex; align-items: center; gap: 9px; padding-left: 13px; border-left: 1px solid rgba(14, 116, 144, .13); }
.topup-button {
  display: grid; place-items: center; height: 37px; padding: 0 16px; border-radius: 10px; color: white;
  background: linear-gradient(135deg, #0284c7, #38bdf8); box-shadow: 0 9px 20px rgba(2, 132, 199, .22); font-size: 12px; font-weight: 780; text-decoration: none;
}
.balance-block { display: flex; min-width: 92px; flex-direction: column; gap: 2px; padding: 0 5px; text-decoration: none; }
.balance-block small { color: #7790a6; font-size: 8px; font-weight: 760; letter-spacing: .07em; text-transform: uppercase; }
.balance-block b { color: #164e73; font-size: 12px; white-space: nowrap; }
.utility-icon, .cart-utility, .profile-avatar {
  position: relative; display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(14, 116, 144, .13); border-radius: 11px;
  color: #1479a8; background: rgba(239, 249, 255, .74); text-decoration: none; transition: transform .16s ease, background .16s ease;
}
.utility-icon:hover, .cart-utility:hover, .profile-avatar:hover { transform: translateY(-1px); background: white; }
.cart-utility > span { font-size: 24px; transform: rotate(180deg); }
.cart-utility > b { position: absolute; display: grid; place-items: center; min-width: 17px; height: 17px; top: -7px; right: -6px; padding: 0 4px; border-radius: 999px; color: white; background: #0284c7; border: 2px solid white; font-size: 8px; }
.profile-menu { display: flex; align-items: center; gap: 6px; }
.profile-avatar { color: white; border: 0; background: linear-gradient(145deg, #38bdf8, #0369a1); font-size: 10px; font-weight: 850; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 8px 18px rgba(2,132,199,.18); }
.profile-menu form { margin: 0; }
.profile-menu button { padding: 6px; border: 0; color: #7890a8; background: transparent; cursor: pointer; font-size: 9px; }
.profile-menu button:hover { color: #075985; }

.client-workspace { padding-top: 52px; }
.workspace-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 29px; }
.workspace-titlebar h1 { margin: 12px 0 8px; color: #102a43; font-size: clamp(38px, 4.2vw, 56px); letter-spacing: -.05em; line-height: 1; }
.workspace-titlebar p { margin: 0; color: var(--muted); font-size: 15px; }
.workspace-panel, .settings-card, .billing-overview {
  border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: rgba(255,255,255,.8); box-shadow: 0 18px 50px rgba(14,116,144,.1); backdrop-filter: blur(16px);
}
.workspace-panel { overflow: hidden; }
.workspace-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 23px; border-bottom: 1px solid var(--line); }
.workspace-panel-head div { display: flex; flex-direction: column; gap: 4px; }
.workspace-panel-head span { color: #6f8ca5; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.workspace-panel-head h2 { margin: 0; font-size: 18px; }
.workspace-panel-head > b { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 9px; color: #0279b8; background: #e6f6ff; font-size: 12px; }
.workspace-empty { padding: 62px 24px; text-align: center; }
.empty-orb { display: grid; place-items: center; width: 53px; height: 53px; margin: 0 auto; border: 1px solid rgba(14,165,233,.15); border-radius: 17px; color: #0284c7; background: linear-gradient(145deg,#f4fbff,#dff4ff); box-shadow: 0 12px 25px rgba(14,116,144,.1); font-size: 21px; }
.workspace-empty h2 { margin: 17px 0 7px; font-size: 20px; }
.workspace-empty p { margin: 0 auto 20px; color: var(--muted); font-size: 13px; }
.simple-record-list { display: grid; }
.simple-record-list article { display: flex; justify-content: space-between; gap: 20px; padding: 18px 23px; border-bottom: 1px solid var(--line); font-size: 13px; }
.simple-record-list article:last-child { border-bottom: 0; }
.simple-record-list span { color: #0284c7; }
.billing-overview { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 1px; align-items: center; margin-bottom: 20px; overflow: hidden; }
.billing-overview article { display: flex; min-height: 132px; flex-direction: column; justify-content: center; gap: 9px; padding: 22px; border-right: 1px solid var(--line); }
.billing-overview article span { color: #6e899f; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.billing-overview article b { color: #123b5a; font-size: 23px; }
.billing-overview article small { color: #8197ab; font-size: 10px; }
.billing-overview > .button { margin: 20px; }
.settings-card { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; }
.settings-card div { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.settings-card div:nth-child(even) { border-right: 0; }
.settings-card span { color: #718ca4; font-size: 10px; font-weight: 760; text-transform: uppercase; }
.settings-card b { font-size: 14px; }
.status-good { color: #059669; }

@media (max-width: 1180px) {
  .client-site-header .brand-copy { display: none; }
  .client-primary-nav a { padding-inline: 9px; }
  .client-primary-nav a::after { right: 9px; left: 9px; }
  .nav-icon { display: none; }
  .balance-block { min-width: 80px; }
  .profile-menu button { display: none; }
}

@media (max-width: 900px) {
  .client-site-header { position: sticky; top: 0; width: 100%; height: auto; flex-wrap: wrap; gap: 10px; margin: 0; padding: 11px 14px 0; border-width: 0 0 1px; border-radius: 0; }
  .client-site-header .brand { order: 1; }
  .client-utilities { order: 2; margin-left: auto; padding-left: 0; border-left: 0; }
  .client-primary-nav { order: 3; width: calc(100% + 28px); height: 48px; margin: 0 -14px; overflow-x: auto; border-top: 1px solid var(--line); justify-content: flex-start; scrollbar-width: none; }
  .client-primary-nav::-webkit-scrollbar { display: none; }
  .client-primary-nav a { flex: 1 0 auto; height: 48px; padding-inline: 17px; }
  .topup-button { height: 35px; padding-inline: 12px; }
  .billing-overview { grid-template-columns: repeat(3, 1fr); }
  .billing-overview > .button { grid-column: 1 / -1; margin: 10px 20px 20px; }
}

@media (max-width: 640px) {
  .client-site-header .brand-mark { width: 37px; height: 37px; }
  .balance-block { min-width: auto; }
  .balance-block small { display: none; }
  .balance-block b { font-size: 10px; }
  .utility-icon { display: none; }
  .client-utilities { gap: 6px; }
  .topup-button { padding-inline: 10px; font-size: 10px; }
  .cart-utility, .profile-avatar { width: 34px; height: 34px; }
  .workspace-titlebar { align-items: flex-start; flex-direction: column; }
  .billing-overview, .settings-card { grid-template-columns: 1fr; }
  .billing-overview article { min-height: 105px; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-card div { border-right: 0; }
}

/* Professional B2B dashboard refinement */
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 82% 6%, rgba(125, 211, 252, .18), transparent 32rem),
    linear-gradient(180deg, #f7fbfe 0%, #edf7fc 100%);
}
h1, h2, h3, .brand-copy b, .button, .metric-grid article > b, .balance-block b {
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
}
.client-site-header {
  width: 100%; max-width: none; height: 76px; gap: 24px; margin-top: 0;
  padding: 0 max(30px, calc((100% - 1540px) / 2)); border-width: 0 0 1px; border-color: rgba(15, 75, 105, .1); border-radius: 0;
  background: rgba(255, 255, 255, .9); box-shadow: 0 8px 28px rgba(15, 75, 105, .06); backdrop-filter: blur(20px);
}
.client-site-header .brand { gap: 11px; }
.client-site-header .brand-mark {
  width: 40px; height: 40px; border-radius: 10px; font-family: "Manrope", sans-serif; font-size: 11px;
  box-shadow: 0 7px 16px rgba(2, 132, 199, .18), inset 0 1px 1px rgba(255,255,255,.65);
}
.client-site-header .brand-copy { gap: 1px; }
.client-site-header .brand-copy b { color: #0f2f48; font-size: 13px; font-weight: 800; letter-spacing: -.02em; }
.client-site-header .brand-copy small { color: #7a91a4; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.client-primary-nav { gap: 2px; }
.client-primary-nav a {
  gap: 8px; padding: 0 15px; color: #526b7f; font-size: 12px; font-weight: 600; letter-spacing: -.005em;
}
.client-primary-nav a::after { right: 15px; bottom: 0; left: 15px; height: 2px; }
.client-primary-nav a:hover, .client-primary-nav a.active { color: #036f9f; background: rgba(14, 165, 233, .035); }
.nav-icon { width: 18px; height: 18px; color: currentColor; }
.nav-icon svg, .utility-icon svg, .cart-utility svg, .metric-svg svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.client-utilities { gap: 8px; padding-left: 15px; border-left-color: rgba(15, 75, 105, .1); }
.topup-button {
  height: 36px; padding: 0 15px; border-radius: 8px; font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700;
  min-width: 72px; white-space: nowrap; background: #078ec7; box-shadow: 0 6px 14px rgba(2, 132, 199, .18);
}
.balance-block { min-width: 90px; gap: 1px; }
.balance-block small { color: #8295a5; font-size: 7px; font-weight: 700; }
.balance-block b { color: #153d59; font-size: 11px; font-weight: 800; }
.utility-icon, .cart-utility, .profile-avatar {
  width: 36px; height: 36px; border-radius: 9px; color: #39718f; border-color: rgba(15, 75, 105, .12); background: #f8fcfe;
}
.utility-icon svg, .cart-utility svg { width: 16px; height: 16px; }
.cart-utility > span { display: grid; place-items: center; transform: none; }
.cart-utility > b { top: -6px; right: -5px; background: #078ec7; font-family: "Inter", sans-serif; }
.profile-avatar { border-radius: 9px; background: linear-gradient(145deg, #169fd4, #0474a6); font-family: "Manrope", sans-serif; }
.profile-menu button { color: #8295a5; font-size: 8px; font-weight: 600; }

.dashboard.container { width: min(1420px, calc(100% - 64px)); }
.dashboard { padding-block: 56px 88px; }
.professional-dashboard-head { align-items: flex-end; margin-bottom: 30px; }
.professional-dashboard-head .eyebrow { color: #1584b2; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.professional-dashboard-head h1 {
  margin: 11px 0 8px; color: #102f47; font-size: clamp(36px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08;
}
.professional-dashboard-head p { display: flex; align-items: center; gap: 9px; color: #5f7789; font-size: 13px; }
.approved-account-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid rgba(5, 150, 105, .14); border-radius: 999px;
  color: #087a58; background: rgba(16, 185, 129, .07); font-size: 9px; font-weight: 700; line-height: 1;
}
.approved-account-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #10b981; }
.professional-dashboard-head .button { min-height: 43px; padding: 0 17px; border-radius: 9px; font-size: 12px; box-shadow: 0 8px 18px rgba(2, 132, 199, .16); }
.professional-metrics { gap: 16px; }
.professional-metrics article {
  min-height: 142px; padding: 20px; border: 1px solid rgba(15, 75, 105, .1); border-radius: 13px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(15, 75, 105, .055);
}
.professional-metrics article > b { margin: 18px 0 4px; color: #102f47; font-size: 25px; font-weight: 800; }
.professional-metrics article > small { color: #8193a1; font-size: 10px; }
.metric-label { display: flex; align-items: center; gap: 9px; color: #5c7588; font-size: 11px; font-weight: 600; }
.metric-svg { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #078ec7; background: #edf8fd; }
.metric-svg svg { width: 14px; height: 14px; stroke-width: 1.8; }
.empty-panel { margin-top: 18px; padding: 54px 25px; border-radius: 14px; border-color: rgba(15, 75, 105, .09); box-shadow: 0 8px 26px rgba(15, 75, 105, .05); }
.empty-panel h2 { font-family: "Manrope", sans-serif; color: #16364d; font-size: 20px; letter-spacing: -.025em; }
.empty-panel p { font-size: 12px; }

@media (max-width: 1180px) {
  .client-site-header { padding-inline: 22px; }
  .client-primary-nav a { padding-inline: 10px; }
  .client-primary-nav a::after { right: 10px; left: 10px; }
}

@media (max-width: 900px) {
  .client-site-header { height: auto; padding: 10px 14px 0; }
  .client-primary-nav a { padding-inline: 17px; }
  .dashboard.container { width: min(100% - 32px, 1420px); }
  .dashboard { padding-block: 42px 70px; }
}

@media (max-width: 640px) {
  .professional-dashboard-head h1 { font-size: 34px; }
  .professional-dashboard-head p { align-items: flex-start; flex-direction: column; gap: 7px; }
  .professional-metrics { gap: 11px; }
}

/* Action-first client home */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.action-dashboard { padding-top: 54px; }
.action-welcome {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(15, 75, 105, .12);
}
.action-welcome h1 {
  margin: 11px 0 8px; color: #102f47; font-family: "Manrope", sans-serif;
  font-size: clamp(36px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08;
}
.action-welcome > div:first-child > p { display: flex; align-items: center; gap: 9px; margin: 0; color: #5f7789; font-size: 13px; }
.inline-summary { display: flex; align-items: stretch; }
.inline-summary a {
  display: grid; min-width: 115px; gap: 4px; padding: 1px 23px; border-left: 1px solid rgba(15, 75, 105, .13);
  color: inherit; text-decoration: none; transition: color .15s ease;
}
.inline-summary a:first-child { border-left: 0; }
.inline-summary a:hover { color: #0284c7; }
.inline-summary small { color: #71879a; font-size: 9px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.inline-summary b { color: #16364d; font-family: "Manrope", sans-serif; font-size: 21px; font-weight: 800; }
.action-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 52px; padding-top: 42px; }
.primary-journey { min-width: 0; padding: 13px 0 18px; }
.section-kicker { color: #1584b2; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.primary-journey h2, .account-activity h2 {
  margin: 10px 0 9px; color: #15344b; font-family: "Manrope", sans-serif; font-size: 25px; font-weight: 800; letter-spacing: -.035em;
}
.primary-journey > p { max-width: 620px; margin: 0; color: #657d90; font-size: 13px; line-height: 1.65; }
.dashboard-search { display: flex; align-items: center; gap: 12px; max-width: 760px; margin-top: 28px; }
.dashboard-search label {
  display: flex; align-items: center; min-width: 0; height: 48px; flex: 1; gap: 11px;
  padding: 0 4px; border-bottom: 1px solid rgba(15, 75, 105, .24); color: #1684b3;
}
.dashboard-search svg, .dashboard-shortcuts svg, .activity-status svg {
  width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.dashboard-search input { width: 100%; min-width: 0; height: 46px; border: 0; outline: 0; color: #15344b; background: transparent; font: inherit; font-size: 13px; }
.dashboard-search input::placeholder { color: #879aaa; }
.dashboard-search label:focus-within { border-bottom-color: #0284c7; box-shadow: 0 1px 0 #0284c7; }
.dashboard-search .button { min-height: 43px; border-radius: 8px; font-size: 12px; box-shadow: 0 7px 17px rgba(2, 132, 199, .16); }
.dashboard-shortcuts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.dashboard-shortcuts a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px;
  border: 1px solid rgba(15, 75, 105, .12); border-radius: 8px; color: #496a81; background: rgba(255, 255, 255, .54);
  font-size: 10px; font-weight: 650; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.dashboard-shortcuts a:hover { color: #0279b8; border-color: rgba(2, 132, 199, .26); background: rgba(255, 255, 255, .86); }
.dashboard-shortcuts svg { width: 14px; height: 14px; }
.account-activity { padding: 13px 0 18px 38px; border-left: 1px solid rgba(15, 75, 105, .12); }
.account-activity h2 { font-size: 18px; }
.activity-list { display: grid; margin-top: 18px; }
.activity-entry {
  display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(15, 75, 105, .1);
  color: inherit; text-decoration: none;
}
.activity-entry:last-child { border-bottom: 0; }
.activity-status { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; color: #6d8798; background: rgba(226, 239, 246, .82); }
.activity-status.success { color: #0a8b63; background: rgba(16, 185, 129, .1); }
.activity-status svg { width: 15px; height: 15px; }
.activity-entry > div { display: grid; gap: 4px; }
.activity-entry b { color: #294a61; font-size: 11px; font-weight: 700; }
.activity-entry small { color: #8396a5; font-size: 9px; }
.muted-entry { opacity: .82; }

@media (max-width: 900px) {
  .action-welcome { align-items: flex-start; flex-direction: column; }
  .inline-summary { width: 100%; }
  .inline-summary a { min-width: 0; flex: 1; padding-inline: 17px; }
  .inline-summary a:first-child { padding-left: 0; }
  .action-workspace { grid-template-columns: 1fr; gap: 30px; }
  .account-activity { padding: 30px 0 0; border-top: 1px solid rgba(15, 75, 105, .12); border-left: 0; }
}

@media (max-width: 640px) {
  .action-dashboard { padding-top: 38px; }
  .action-welcome h1 { font-size: 34px; }
  .action-welcome > div:first-child > p { align-items: flex-start; flex-direction: column; gap: 7px; }
  .inline-summary a { padding-inline: 11px; }
  .inline-summary small { font-size: 8px; }
  .inline-summary b { font-size: 18px; }
  .dashboard-search { align-items: stretch; flex-direction: column; }
  .dashboard-search .button { width: 100%; }
  .dashboard-shortcuts { display: grid; grid-template-columns: 1fr; }
  .dashboard-shortcuts a { justify-content: center; }
}

/* Stable authenticated header alignment */
@media (min-width: 901px) {
  .client-site-header {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(395px, 1fr);
    align-items: center;
  }
  .client-site-header .brand { justify-self: start; }
  .client-primary-nav { justify-self: center; margin-left: 0; }
  .client-utilities { justify-self: end; }
}
.profile-menu form { display: flex; align-items: center; }
.profile-menu .signout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 86px; height: 36px; padding: 0 10px; white-space: nowrap;
  border: 1px solid rgba(15, 75, 105, .13); border-radius: 8px; color: #506b7f; background: #f8fcfe;
  font-family: "Inter", sans-serif; font-size: 10px; font-weight: 650; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.profile-menu .signout-button:hover { color: #b42318; border-color: rgba(180, 35, 24, .2); background: rgba(254, 242, 242, .8); }
.profile-menu .signout-button svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 1180px) and (min-width: 901px) {
  .client-site-header { grid-template-columns: minmax(45px, 1fr) auto minmax(330px, 1fr); }
  .profile-menu .signout-button { width: 36px; min-width: 36px; padding: 0; }
  .profile-menu .signout-button span { display: none; }
}

/* Admin console */
.admin-site-header {
  width: 100%; max-width: none; height: 76px; gap: 20px; padding: 0 max(26px, calc((100% - 1760px) / 2));
  border-width: 0 0 1px; border-color: rgba(15, 75, 105, .1); border-radius: 0; background: rgba(255,255,255,.94);
  box-shadow: 0 8px 28px rgba(15,75,105,.055); backdrop-filter: blur(20px);
}
.admin-site-header .brand-mark { width: 40px; height: 40px; border-radius: 10px; }
.admin-primary-nav { display: flex; align-self: stretch; align-items: center; justify-content: center; gap: 1px; }
.admin-primary-nav a {
  position: relative; display: grid; place-items: center; height: 100%; padding: 0 11px; color: #567083;
  font-size: 11px; font-weight: 650; text-decoration: none; white-space: nowrap;
}
.admin-primary-nav a::after { content: ""; position: absolute; right: 11px; bottom: 0; left: 11px; height: 2px; background: transparent; }
.admin-primary-nav a:hover, .admin-primary-nav a.active { color: #0279b8; background: rgba(14,165,233,.035); }
.admin-primary-nav a.active::after { background: #0ea5e9; }
.admin-utilities { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-utilities form { margin: 0; }
.approval-utility { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid rgba(217,119,6,.17); border-radius: 8px; color: #8b5b09; background: rgba(255,251,235,.72); font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.approval-utility b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; color: white; background: #d97706; font-size: 8px; }
.admin-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: white; background: linear-gradient(145deg,#334e68,#102f47); font-size: 10px; font-weight: 800; text-decoration: none; }
.admin-signout { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 86px; height: 36px; padding: 0 10px; border: 1px solid rgba(15,75,105,.13); border-radius: 8px; color: #506b7f; background: #f8fcfe; font-size: 10px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.admin-signout svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-signout:hover { color: #b42318; border-color: rgba(180,35,24,.2); background: rgba(254,242,242,.8); }
@media (min-width: 1101px) {
  .admin-site-header { display: grid; grid-template-columns: minmax(210px,1fr) auto minmax(270px,1fr); align-items: center; }
  .admin-site-header .brand { justify-self: start; }
  .admin-primary-nav { justify-self: center; }
  .admin-utilities { justify-self: end; }
}

.admin-console { width: min(1500px, calc(100% - 64px)) !important; padding-top: 52px; }
.admin-welcome, .admin-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 27px; border-bottom: 1px solid rgba(15,75,105,.12); }
.admin-welcome h1, .admin-page-head h1 { margin: 11px 0 8px; color: #102f47; font-size: clamp(36px,3.1vw,48px); letter-spacing: -.045em; line-height: 1.06; }
.admin-welcome p, .admin-page-head p { max-width: 700px; margin: 0; color: #627b8e; font-size: 13px; }
.admin-welcome .button, .admin-page-head .button { min-height: 42px; border-radius: 8px; font-size: 11px; }
.admin-stat-line { display: grid; grid-template-columns: repeat(5,1fr); border-bottom: 1px solid rgba(15,75,105,.12); }
.admin-stat-line a { display: grid; gap: 6px; padding: 22px 24px; border-left: 1px solid rgba(15,75,105,.1); color: inherit; text-decoration: none; }
.admin-stat-line a:first-child { border-left: 0; padding-left: 0; }
.admin-stat-line a:hover b { color: #0284c7; }
.admin-stat-line small { color: #748a9b; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.admin-stat-line b { color: #15364d; font-family: "Manrope",sans-serif; font-size: 23px; font-weight: 800; }
.admin-operations-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: 38px; padding-top: 34px; }
.admin-focus-panel, .admin-activity-panel { min-width: 0; }
.admin-activity-panel { padding-left: 34px; border-left: 1px solid rgba(15,75,105,.12); }
.admin-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 13px; }
.admin-panel-heading > div { display: grid; gap: 5px; }
.admin-panel-heading span { color: #1584b2; font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.admin-panel-heading h2 { margin: 0; color: #18394f; font-size: 18px; }
.admin-panel-heading > a { color: #087fab; font-size: 9px; font-weight: 700; text-decoration: none; }
.admin-operation-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(15,75,105,.1); color: inherit; text-decoration: none; }
.operation-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #087fab; background: #eaf7fd; font-size: 10px; font-weight: 800; }
.admin-operation-row > span:nth-child(2) { display: grid; gap: 4px; }
.admin-operation-row b { color: #294a61; font-size: 11px; }
.admin-operation-row small { color: #8195a4; font-size: 9px; }
.admin-operation-row strong { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; color: #15364d; background: #edf4f7; font-size: 11px; }
.admin-activity-list { display: grid; }
.admin-activity-list > div { display: grid; grid-template-columns: 8px 1fr; gap: 11px; padding: 13px 0; border-top: 1px solid rgba(15,75,105,.1); }
.admin-activity-list > div > span { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #38bdf8; }
.admin-activity-list p { display: grid; gap: 4px; margin: 0; }
.admin-activity-list b { color: #294a61; font-size: 10px; }
.admin-activity-list small { color: #8496a4; font-size: 8px; }
.admin-empty-inline { padding: 24px 0; border-top: 1px solid rgba(15,75,105,.1); color: #8195a4; font-size: 10px; }
.admin-quick-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 34px; border-top: 1px solid rgba(15,75,105,.12); border-bottom: 1px solid rgba(15,75,105,.12); }
.admin-quick-links a { display: grid; gap: 5px; padding: 18px 20px; border-left: 1px solid rgba(15,75,105,.1); color: inherit; text-decoration: none; }
.admin-quick-links a:first-child { border-left: 0; }
.admin-quick-links b { color: #294a61; font-size: 11px; }
.admin-quick-links span { color: #8195a4; font-size: 9px; }

.admin-records { padding-top: 48px; }
.admin-page-head { align-items: flex-end; }
.admin-page-head h1 { font-size: clamp(34px,2.8vw,44px); }
.admin-head-stat { padding: 8px 11px; border: 1px solid rgba(14,116,144,.14); border-radius: 999px; color: #527084; background: rgba(255,255,255,.65); font-size: 10px; }
.admin-data-panel { margin-top: 26px; overflow: hidden; border: 1px solid rgba(15,75,105,.1); border-radius: 12px; background: rgba(255,255,255,.78); box-shadow: 0 8px 25px rgba(15,75,105,.045); }
.admin-data-panel th { background: rgba(238,247,251,.75); }
.admin-data-panel td, .admin-data-panel th { padding-block: 15px; }

/* Compact operational records, details and invoice presentation */
.compact-records-page { padding-top: 42px; }
.compact-table-panel { overflow: hidden; }
.compact-record-table { width: 100%; border-collapse: collapse; }
.compact-record-table th { padding: 10px 14px !important; font-size: 11px; line-height: 1.2; letter-spacing: .035em; text-transform: uppercase; color: #58738d; }
.compact-record-table td { padding: 10px 14px !important; font-size: 13px; line-height: 1.25; vertical-align: middle; }
.compact-record-table td small { display: block; margin-top: 3px; color: #6d87a0; font-size: 10px; }
.record-link, .record-link-button { color: #057fb9; font-weight: 750; text-decoration: none; }
.record-link:hover, .record-link-button:hover { color: #005d8c; text-decoration: underline; }
.record-link-button { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.record-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 12px 16px; border-top: 1px solid rgba(31, 107, 145, .12); color: #58738d; font-size: 12px; }
.record-pagination a { color: #087fb8; font-weight: 750; text-decoration: none; }
.record-pagination a:last-child, .record-pagination span:last-child { justify-self: end; }
.record-pagination .disabled { color: #a7b7c5; }
.record-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid #cfe3ee; border-radius: 18px; background: #fff; color: #0d2b44; box-shadow: 0 28px 80px rgba(13, 54, 79, .24); }
.record-dialog::backdrop { background: rgba(7, 31, 48, .48); backdrop-filter: blur(3px); }
.record-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 17px; border-bottom: 1px solid #e2eef4; }
.record-dialog-head span { color: #0889c5; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.record-dialog-head h2 { margin: 4px 0 0; font-size: 22px; }
.dialog-close { width: 34px; height: 34px; border: 1px solid #d8e8f0; border-radius: 9px; background: #f5fbfe; color: #46677e; font-size: 24px; line-height: 1; cursor: pointer; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 20px 24px; overflow: hidden; border: 1px solid #dcebf2; border-radius: 12px; background: #dcebf2; }
.detail-grid > div { padding: 13px 15px; background: #f8fcfe; }
.detail-grid span, .invoice-meta span, .invoice-total span { display: block; margin-bottom: 4px; color: #688198; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dialog-items { margin: 0 24px; overflow: hidden; border: 1px solid #dcebf2; border-radius: 12px; }
.dialog-item { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid #e7f0f5; font-size: 12px; }
.dialog-item:first-child { border-top: 0; }
.dialog-item-head { background: #f2f9fc; color: #688198; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; }
.dialog-footer .button { min-height: 38px; padding: 8px 15px; font-size: 12px; }
.compact-billing-overview { margin-bottom: 20px; }
.invoice-page { padding-top: 42px; padding-bottom: 60px; }
.invoice-sheet { overflow: hidden; border: 1px solid #d4e7f1; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(23, 86, 119, .08); }
.invoice-sheet > header { display: flex; align-items: center; justify-content: space-between; padding: 25px 28px; border-bottom: 1px solid #e0edf3; }
.invoice-sheet > header > div:first-child { display: flex; align-items: center; gap: 12px; }
.invoice-sheet h2, .invoice-sheet p { margin: 0; }
.invoice-brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#41c4f3,#0787c2); color: #fff; font-weight: 850; }
.invoice-total { text-align: right; }
.invoice-total b { font-size: 24px; }
.invoice-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 24px 28px; }
.invoice-items { border-top: 1px solid #e0edf3; border-bottom: 1px solid #e0edf3; }
.invoice-totals { width: min(360px, 100%); margin-left: auto; padding: 22px 28px 28px; }
.invoice-totals > div { display: flex; justify-content: space-between; padding: 7px 0; }
.invoice-totals .grand-total { margin-top: 7px; padding-top: 13px; border-top: 1px solid #cfdee6; font-size: 18px; }
@media (max-width: 700px) {
  .record-pagination { grid-template-columns: 1fr 1fr; }
  .record-pagination > span:nth-child(2) { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .detail-grid, .invoice-meta { grid-template-columns: 1fr; }
  .dialog-item { grid-template-columns: 1.3fr 1fr 1fr; }
  .invoice-sheet > header { align-items: flex-start; gap: 18px; }
}
.admin-empty-state { padding: 70px 24px; text-align: center; }
.admin-empty-state h2 { margin: 0 0 7px; color: #294a61; font-size: 19px; }
.admin-empty-state p { margin: 0; color: #8195a4; font-size: 11px; }
.wallet-summary-row { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(15,75,105,.1); }
.wallet-summary-row > div { display: grid; gap: 5px; padding: 17px 20px; border-left: 1px solid rgba(15,75,105,.1); }
.wallet-summary-row > div:first-child { border-left: 0; }
.wallet-summary-row span { color: #748a9b; font-size: 9px; }
.wallet-summary-row b { color: #294a61; font-size: 13px; }
.admin-report-strip { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 25px; border-top: 1px solid rgba(15,75,105,.12); border-bottom: 1px solid rgba(15,75,105,.12); }
.admin-report-strip > div { display: grid; gap: 6px; padding: 20px; border-left: 1px solid rgba(15,75,105,.1); }
.admin-report-strip > div:first-child { border-left: 0; padding-left: 0; }
.admin-report-strip span { color: #748a9b; font-size: 9px; text-transform: uppercase; }
.admin-report-strip b { color: #15364d; font-size: 22px; }
.admin-report-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 28px; }
.admin-report-grid section { padding-left: 20px; border-left: 1px solid rgba(15,75,105,.12); }
.admin-report-grid section:first-child { padding-left: 0; border-left: 0; }
.admin-report-grid h2 { margin: 0 0 12px; color: #294a61; font-size: 15px; }
.admin-report-grid section > div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid rgba(15,75,105,.1); font-size: 10px; }
.admin-report-grid section > div span { color: #617b8e; }
.admin-report-grid section > p { color: #8195a4; font-size: 10px; }
.admin-settings-list { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 26px; border-top: 1px solid rgba(15,75,105,.12); }
.admin-settings-list > div { display: grid; gap: 6px; padding: 21px 0; border-bottom: 1px solid rgba(15,75,105,.1); }
.admin-settings-list > div:nth-child(odd) { padding-right: 28px; }
.admin-settings-list > div:nth-child(even) { padding-left: 28px; border-left: 1px solid rgba(15,75,105,.1); }
.admin-settings-list span { color: #748a9b; font-size: 9px; text-transform: uppercase; }
.admin-settings-list b { color: #294a61; font-size: 13px; }
.admin-settings-list small { color: #8195a4; font-size: 9px; }
.settings-note { margin-top: 18px; color: #8195a4; font-size: 9px; }
.status-pending { color: #9a6700; background: rgba(251,191,36,.12); }
.status-approved { color: #087a58; background: rgba(16,185,129,.1); }
.status-completed { color: #087a58; background: rgba(16,185,129,.1); }
.status-rejected, .status-suspended { color: #b42318; background: rgba(251,113,133,.1); }
.status-sold { color: #29475f; background: #e2edf3; border: 1px solid #cbdde7; }
.status-available { color: #087457; background: #ddf6eb; border: 1px solid #bce8d6; }
.status-reserved { color: #805700; background: #fff1c7; border: 1px solid #f0d98d; }
.status-released { color: #65458b; background: #efe7f8; border: 1px solid #ddccef; }
.admin-client-layout { display: grid; grid-template-columns: minmax(520px,.9fr) minmax(620px,1.1fr); gap: 24px; align-items: start; margin-top: 26px; }
.admin-client-layout .form-card, .admin-client-layout .table-panel { margin: 0; }
.admin-client-form { padding: 25px; }
.admin-client-form .form-heading p { margin: 7px 0 0; color: #7890a2; font-size: 10px; }
.admin-client-form .portal-form { margin-top: 20px; }
.admin-client-form .form-row.single-short { grid-template-columns: minmax(180px, 240px); }
.admin-approval-check { display: flex !important; gap: 11px; align-items: flex-start; margin: 4px 0 14px; padding: 13px; border: 1px solid rgba(14,116,144,.12); border-radius: 10px; background: rgba(234,247,253,.65); cursor: pointer; }
.admin-approval-check input { width: 17px !important; height: 17px !important; margin-top: 1px; accent-color: #0696d7; }
.admin-approval-check span { display: grid; gap: 4px; }
.admin-approval-check b { color: #23475e; font-size: 10px; }
.admin-approval-check small, .secure-password-note { color: #7890a2; font-size: 9px; line-height: 1.55; }
.secure-password-note { margin: 0 0 15px; padding-left: 11px; border-left: 2px solid #38bdf8; }
.admin-active-note { display: flex; gap: 9px; align-items: center; margin: 4px 0 14px; padding: 12px 13px; border: 1px solid rgba(16,185,129,.18); border-radius: 10px; background: rgba(236,253,245,.72); }
.admin-active-note b { color: #087a58; font-size: 10px; }
.admin-active-note span { color: #648277; font-size: 9px; }
.admin-client-table { overflow: hidden; }
.admin-client-table td small { display: block; margin-top: 4px; color: #8296a5; }
.head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bulk-inventory-bar { display: grid; grid-template-columns: minmax(260px,1fr) auto auto; gap: 22px; align-items: center; margin: 24px 0; padding: 18px 20px; border: 1px solid rgba(14,116,144,.13); border-radius: 13px; background: rgba(255,255,255,.78); }
.bulk-inventory-bar > div { display: grid; gap: 4px; }
.bulk-inventory-bar > div > span { color: #087fab; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bulk-inventory-bar > div > b { color: #18394f; font-size: 13px; }
.bulk-inventory-bar small { color: #7890a2; font-size: 9px; }
.bulk-inventory-bar form { display: flex; gap: 10px; align-items: center; }
.bulk-inventory-bar input[type=file] { max-width: 230px; color: #527084; font-size: 9px; }
.bulk-inventory-bar > a { color: #087fab; font-size: 9px; font-weight: 750; text-decoration: none; }
.inventory-table-panel td small { display: block; margin-top: 5px; color: #7890a2; font-size: 8px; line-height: 1.45; }
.inventory-terms-editor { margin-top: 7px; }
.inventory-terms-editor summary { color: #087fab; font-size: 8px; font-weight: 750; cursor: pointer; }
.inventory-terms-editor form { display: flex; gap: 5px; margin-top: 7px; }
.inventory-terms-editor input { width: 62px; height: 29px; padding: 0 6px; border: 1px solid rgba(14,116,144,.16); border-radius: 6px; color: #294a61; background: white; font-size: 8px; }
.inventory-terms-editor button { padding: 0 9px; border: 0; border-radius: 6px; color: white; background: #0796d2; font-size: 8px; font-weight: 750; cursor: pointer; }
.muted-cell { color: #9aacb8; }
.purchased-did-list { display: grid; }
.purchased-did-list article { display: grid; grid-template-columns: minmax(190px,1.2fr) repeat(4,minmax(120px,.8fr)) auto; gap: 18px; align-items: center; padding: 20px 22px; border-bottom: 1px solid rgba(15,75,105,.1); }
.purchased-did-list article:last-child { border-bottom: 0; }
.purchased-did-list article > div { display: grid; gap: 5px; }
.purchased-did-list article small { color: #7890a2; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.purchased-did-list article b { color: #18394f; font-size: 11px; }
.purchased-did-list article span { color: #7890a2; font-size: 9px; }
.purchased-number > b { font-size: 15px !important; }
.purchased-number .availability { display: flex; align-items: center; gap: 6px; color: #087a58; font-size: 8px; font-weight: 750; }
.client-delete-did { color: #b42318 !important; border-color: rgba(180,35,24,.18) !important; background: rgba(254,242,242,.8) !important; }
.cart-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 24px; align-items: start; margin-top: 28px; }
.cart-list-panel, .cart-summary { border: 1px solid rgba(15,75,105,.11); border-radius: 14px; background: rgba(255,255,255,.8); box-shadow: 0 12px 34px rgba(15,75,105,.06); }
.cart-list-panel { overflow: hidden; }
.cart-list-panel .workspace-panel-head { padding: 20px 22px; }
.cart-line { display: grid; grid-template-columns: 42px minmax(190px,1fr) auto auto; gap: 16px; align-items: center; padding: 19px 22px; border-top: 1px solid rgba(15,75,105,.1); }
.cart-line > div:nth-child(2) { display: grid; gap: 5px; }
.cart-line > div:nth-child(2) b { color: #14364f; font-size: 14px; }
.cart-line small, .cart-line-price span { color: #7890a2; font-size: 9px; }
.cart-line-price { display: grid; gap: 4px; min-width: 150px; text-align: right; }
.cart-line-price b { color: #15364d; font-size: 12px; }
.cart-remove { border: 0; color: #b42318; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.cart-summary { display: grid; gap: 15px; padding: 24px; }
.cart-summary > span { color: #087fab; font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.cart-summary h2 { margin: -7px 0 2px; color: #15364d; font-size: 22px; }
.cart-summary > div { display: flex; justify-content: space-between; gap: 15px; padding: 15px 0; border-top: 1px solid rgba(15,75,105,.1); border-bottom: 1px solid rgba(15,75,105,.1); }
.cart-summary > div small, .cart-summary p, .cart-warning { color: #7890a2; font-size: 9px; line-height: 1.55; }
.cart-summary > div b { color: #14364f; font-size: 14px; }
.cart-summary p { margin: 0; }
.cart-warning { color: #b42318; }

@media (max-width: 1450px) {
  .admin-site-header .brand-copy { display: none; }
  .admin-primary-nav a { padding-inline: 8px; font-size: 10px; }
  .admin-primary-nav a::after { right: 8px; left: 8px; }
  .admin-signout { width: 36px; min-width: 36px; padding: 0; }
  .admin-signout span { display: none; }
}

@media (max-width: 1180px) {
  .admin-client-layout, .cart-layout { grid-template-columns: 1fr; }
  .bulk-inventory-bar { grid-template-columns: 1fr; }
  .purchased-did-list article { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1100px) {
  .admin-site-header { position: sticky; top: 0; display: flex; height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 14px 0; }
  .admin-site-header .brand { order: 1; }
  .admin-utilities { order: 2; margin-left: auto; }
  .admin-primary-nav { order: 3; width: calc(100% + 28px); height: 48px; margin: 0 -14px; overflow-x: auto; justify-content: flex-start; border-top: 1px solid var(--line); scrollbar-width: none; }
  .admin-primary-nav::-webkit-scrollbar { display: none; }
  .admin-primary-nav a { flex: 1 0 auto; height: 48px; padding-inline: 16px; }
  .admin-console { width: min(100% - 32px,1500px) !important; }
  .admin-operations-grid { grid-template-columns: 1fr; }
  .admin-activity-panel { padding: 28px 0 0; border-top: 1px solid rgba(15,75,105,.12); border-left: 0; }
}
@media (max-width: 720px) {
  .approval-utility span { display: none; }
  .admin-welcome, .admin-page-head { align-items: flex-start; flex-direction: column; }
  .admin-stat-line { grid-template-columns: repeat(2,1fr); }
  .admin-stat-line a { border-bottom: 1px solid rgba(15,75,105,.1); }
  .admin-stat-line a:nth-child(odd) { padding-left: 0; border-left: 0; }
  .admin-quick-links, .admin-report-grid, .admin-settings-list { grid-template-columns: 1fr; }
  .admin-quick-links a { border-top: 1px solid rgba(15,75,105,.1); border-left: 0; }
  .admin-report-grid section, .admin-report-grid section:first-child { padding: 20px 0 0; border-top: 1px solid rgba(15,75,105,.12); border-left: 0; }
  .admin-settings-list > div:nth-child(even), .admin-settings-list > div:nth-child(odd) { padding-inline: 0; border-left: 0; }
  .wallet-summary-row { grid-template-columns: repeat(2,1fr); }
  .cart-line { grid-template-columns: 38px 1fr auto; }
  .cart-line-price { grid-column: 2 / -1; text-align: left; }
  .purchased-did-list article { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .client-site-header { display: flex; }
  .profile-menu .signout-button { width: 34px; min-width: 34px; padding: 0; }
  .profile-menu .signout-button span { display: none; }
}

/* Compact and consistent admin page system */
.admin-body .admin-console { padding-top: 34px; }
.admin-body .admin-records { padding-top: 34px; }
.admin-body .admin-welcome, .admin-body .admin-page-head, .admin-body .dashboard-head { padding-bottom: 18px; }
.admin-body .admin-welcome h1, .admin-body .admin-page-head h1, .admin-body .dashboard-head h1 {
  margin: 8px 0 6px; font-size: clamp(29px,2.25vw,36px); line-height: 1.08; letter-spacing: -.04em;
}
.admin-body .admin-welcome p, .admin-body .admin-page-head p, .admin-body .dashboard-head p { font-size: 11px; }
.admin-body .eyebrow { font-size: 9px; }
.admin-body .button {
  min-height: 36px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 10px; box-shadow: none;
}
.admin-body .button-primary { box-shadow: 0 6px 14px rgba(2,132,199,.14); }
.admin-body .button-full { width: 100%; }
.admin-body .button-quiet { color: #647f91; border: 1px solid transparent; background: transparent; text-decoration: none; }
.admin-body .admin-stat-line a { padding: 16px 20px; }
.admin-body .admin-stat-line b { font-size: 20px; }
.admin-body .admin-operations-grid { gap: 30px; padding-top: 24px; }
.admin-body .admin-operation-row { padding: 13px 0; }
.admin-body .admin-quick-links { margin-top: 25px; }
.compact-admin-head { align-items: flex-end; }

.admin-nav-menu { position: relative; height: 100%; }
.admin-nav-menu > .admin-nav-trigger { display: flex; height: 100%; align-items: center; gap: 5px; }
.admin-nav-trigger > span { color: #91a4b2; font-size: 9px; }
.admin-nav-dropdown {
  position: absolute; z-index: 50; top: calc(100% - 1px); left: 50%; display: none; width: 220px; padding: 7px;
  transform: translateX(-50%); border: 1px solid rgba(15,75,105,.12); border-radius: 0 0 11px 11px;
  background: rgba(255,255,255,.98); box-shadow: 0 16px 34px rgba(15,75,105,.13);
}
.admin-nav-menu:hover .admin-nav-dropdown, .admin-nav-menu:focus-within .admin-nav-dropdown { display: grid; }
.admin-primary-nav .admin-nav-dropdown a {
  display: grid; place-items: start; gap: 3px; height: auto; padding: 11px 12px; border-radius: 7px; color: #35556b; background: transparent; font-size: 10px;
}
.admin-primary-nav .admin-nav-dropdown a::after { display: none; }
.admin-primary-nav .admin-nav-dropdown a:hover { color: #0279b8; background: #eef9fe; }
.admin-primary-nav .admin-nav-dropdown small { color: #8a9ca9; font-size: 8px; font-weight: 500; }

.admin-inventory-filters {
  display: grid; grid-template-columns: minmax(210px,1.2fr) repeat(3,minmax(145px,.75fr)) auto auto;
  gap: 10px; align-items: end; margin-top: 20px; padding: 15px; border: 1px solid rgba(15,75,105,.1);
  border-radius: 11px; background: rgba(255,255,255,.76);
}
.admin-inventory-filters label { display: grid; gap: 6px; }
.admin-inventory-filters label > span { color: #72899a; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.admin-inventory-filters input, .admin-inventory-filters select {
  width: 100%; height: 36px; padding: 0 10px; border: 1px solid rgba(14,116,144,.15); border-radius: 7px;
  outline: 0; color: #294a61; background: white; font: inherit; font-size: 10px;
}
.inventory-list-panel { margin-top: 16px; }
.inventory-list-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid rgba(15,75,105,.1); }
.inventory-list-head > div { display: grid; gap: 3px; }
.inventory-list-head span { color: #1584b2; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.inventory-list-head h2 { margin: 0; color: #18394f; font-size: 15px; }
.inventory-list-head > b { display: grid; place-items: center; min-width: 30px; height: 27px; border-radius: 7px; color: #087fab; background: #eaf7fd; font-size: 10px; }
.inventory-list-panel td small { display: block; margin-top: 4px; color: #8296a5; font-size: 8px; }
.inventory-list-panel td { white-space: nowrap; }
.inventory-list-panel td:last-child { min-width: 200px; white-space: normal; }
.inventory-add-card { max-width: 760px; margin: 20px auto 0; padding: 24px; }
.inventory-add-card .portal-form { margin-top: 18px; }

@media (max-width: 1100px) {
  .admin-nav-dropdown { display: none !important; }
  .admin-inventory-filters { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .admin-inventory-filters { grid-template-columns: 1fr; }
  .admin-inventory-filters .button { width: 100%; }
}

/* Compact and consistent client page system */
.client-body .dashboard { padding-top: 36px; padding-bottom: 72px; }
.client-body .client-workspace { padding-top: 36px; }
.client-body .workspace-titlebar, .client-body .dashboard-head, .client-body .action-welcome {
  align-items: flex-end; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(15,75,105,.11);
}
.client-body .workspace-titlebar h1, .client-body .dashboard-head h1, .client-body .action-welcome h1 {
  margin: 8px 0 6px; font-size: clamp(29px,2.25vw,36px); line-height: 1.08; letter-spacing: -.04em;
}
.client-body .workspace-titlebar p, .client-body .dashboard-head p, .client-body .action-welcome > div:first-child > p {
  margin: 0; color: #627b8e; font-size: 11px;
}
.client-body .eyebrow { font-size: 9px; }
.client-body .button {
  min-height: 36px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 10px; box-shadow: none;
}
.client-body .button-primary { box-shadow: 0 6px 14px rgba(2,132,199,.14); }
.client-body .button-full { width: 100%; }
.client-body .head-actions { gap: 8px; }
.client-body .filter-bar { margin-bottom: 18px; padding: 14px; border-radius: 11px; }
.client-body .filter-bar input, .client-body .filter-bar select { height: 38px; font-size: 10px; }
.client-body .inventory-grid { gap: 12px; }
.client-body .did-card { padding: 19px; border-radius: 13px; }
.client-body .did-card h2 { margin: 17px 0 5px; font-size: 19px; }
.client-body .did-price { padding: 12px; }
.client-body .workspace-panel, .client-body .settings-card, .client-body .billing-overview { border-radius: 14px; box-shadow: 0 10px 30px rgba(14,116,144,.07); }
.client-body .workspace-panel-head { padding: 16px 19px; }
.client-body .workspace-panel-head h2 { font-size: 15px; }
.client-body .workspace-empty { padding: 48px 22px; }
.client-body .billing-overview article { min-height: 108px; padding: 18px; }
.client-body .billing-overview article b { font-size: 19px; }
.client-body .settings-card div { padding: 19px; }
.client-body .action-dashboard { padding-top: 36px; }
.client-body .action-welcome { margin-bottom: 0; }
.client-body .action-workspace { gap: 38px; padding-top: 29px; }
.client-body .primary-journey { padding-top: 8px; }
.client-body .primary-journey h2 { font-size: 21px; }
.client-body .dashboard-search { margin-top: 21px; }
.client-body .dashboard-search label { height: 42px; }
.client-body .dashboard-search input { height: 40px; }
.client-body .account-activity { padding-top: 8px; }
.client-body .cart-layout { margin-top: 20px; }
.client-body .cart-summary { border-radius: 13px; }

@media (max-width: 640px) {
  .client-body .workspace-titlebar, .client-body .dashboard-head, .client-body .action-welcome { align-items: flex-start; }
  .client-body .head-actions { width: 100%; }
  .client-body .head-actions .button { flex: 1; }
}
.api-page-head { align-items: center; }
.api-security-badge { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: 1px solid rgba(15,75,105,.1); border-radius: 11px; background: rgba(255,255,255,.68); }
.api-security-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #087fab; background: #eaf7fc; }
.api-security-icon svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.api-security-badge > span:last-child { display: grid; gap: 2px; }
.api-security-badge small { color: #7b91a1; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.api-security-badge b { color: #18394f; font-size: 11px; }
.api-create-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: 18px; margin-top: 24px; align-items: stretch; }
.api-create-card { position: static; max-width: none; margin: 0; }
.api-create-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.api-create-form .button-full { grid-column: 1 / -1; margin-top: 2px; }
.api-guidance-card { padding: 27px; border: 1px solid rgba(15,75,105,.1); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(239,249,253,.72)); box-shadow: 0 10px 30px rgba(15,75,105,.05); }
.api-guidance-card h2 { margin: 8px 0 20px; color: #18394f; font-size: 19px; }
.api-guidance-card ul { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.api-guidance-card li { display: flex; gap: 13px; padding: 14px 0; border-top: 1px solid rgba(15,75,105,.09); }
.api-guidance-card li > span { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 8px; color: #0785b8; background: #e8f7fd; font-size: 8px; font-weight: 800; }
.api-guidance-card li div { display: grid; gap: 4px; }
.api-guidance-card li b { color: #294a60; font-size: 11px; }
.api-guidance-card li small { color: #7890a2; font-size: 9px; line-height: 1.55; }
.api-key-table { margin-top: 18px; }
.api-key-table td, .api-key-table th { padding-block: 14px; }
.api-prefix { display: inline-flex; padding: 5px 8px; border: 1px solid #d8e9f0; border-radius: 6px; color: #345b70; background: #f6fbfd; font-size: 9px; }
.api-key-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.api-key-actions form { margin: 0; }
.api-copy-btn, .mini-button { display: inline-flex; align-items: center; justify-content: center; min-width: auto; height: 30px; padding: 0 11px; border: 1px solid #8fd4ee; border-radius: 7px; background: #fff; color: #087fab !important; font-size: 9px; font-weight: 750; cursor: pointer; text-decoration: none; white-space: nowrap; transition: .15s ease; }
.api-copy-btn:hover, .mini-button:hover { border-color: #0a91c6; background: #effaff; }
.mini-button.danger { color: #c43b43 !important; border-color: #efb5b9; }
.mini-button.danger:hover { border-color: #dc6670; background: #fff5f5; }
.mini-button.approve { color: #168255 !important; border-color: #9cd7bc; }
.mini-button.approve:hover { border-color: #43a878; background: #f1fbf6; }
.api-reveal-card { margin-top: 23px; padding: 25px; border: 1px solid #9ddbc1; border-radius: 15px; background: linear-gradient(135deg, #f4fcf8, rgba(255,255,255,.9)); box-shadow: 0 10px 30px rgba(27,128,84,.06); }
.api-reveal-heading { display: flex; gap: 13px; align-items: flex-start; }
.api-success-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; color: #fff; background: #27a56c; font-size: 14px; font-weight: 800; }
.api-reveal-heading h2 { margin: 5px 0 4px; color: #173f31; font-size: 19px; }
.api-reveal-heading p { margin: 0; color: #638176; font-size: 10px; }
.api-copy-field { display: flex; gap: 9px; align-items: center; }
.api-copy-field input { min-width: 0; flex: 1; height: 39px; padding: 0 12px; border: 1px solid #cce2ea; border-radius: 8px; background: #fff; color: #254b60; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.api-secret-field { margin-top: 18px; }
.api-secret-field input { height: 42px; border-color: #a9d8c3; background: rgba(255,255,255,.86); }
.api-quickstart { margin-top: 20px; border-top: 1px solid rgba(31,117,77,.14); }
.api-quickstart summary { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; color: #2a5945; cursor: pointer; font-size: 11px; font-weight: 750; }
.api-quickstart summary small { color: #769388; font-size: 9px; font-weight: 500; }
.api-endpoint-grid, .api-code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 17px; }
.api-endpoint-grid label { color: #58776b; font-size: 9px; font-weight: 700; }
.api-endpoint-grid .api-copy-field { margin-top: 6px; }
.api-code-grid article { min-width: 0; overflow: hidden; border: 1px solid #d5e4e9; border-radius: 10px; background: #102c3d; }
.api-code-grid article > div { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.1); color: #d7edf6; font-size: 9px; }
.api-code-grid pre { min-height: 135px; max-height: 220px; overflow: auto; margin: 0; padding: 13px; color: #dff3fb; font-size: 9px; line-height: 1.6; }
@media (max-width: 850px) { .api-create-layout { grid-template-columns: 1fr; } .api-security-badge { display: none; } }
@media (max-width: 620px) { .api-create-form, .api-endpoint-grid, .api-code-grid { grid-template-columns: 1fr; } .api-secret-field { align-items: stretch; flex-direction: column; } .api-quickstart summary small { display: none; } }
.client-order-page { max-width: 1280px; }
.order-search-head { align-items: flex-end; }
.order-search-panel { display: grid; grid-template-columns: 1.25fr 1fr 1.15fr .75fr auto; gap: 13px; align-items: end; margin-top: 22px; padding: 19px; border: 1px solid rgba(15,75,105,.1); border-radius: 14px; background: rgba(255,255,255,.82); box-shadow: 0 12px 34px rgba(15,75,105,.055); }
.order-search-title { display: flex; gap: 11px; align-items: center; align-self: center; }
.order-search-title > div { display: grid; gap: 3px; }
.order-search-title > div span, .order-search-panel label > span { color: #718ca0; font-size: 8px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.order-search-title b { color: #1c4158; font-size: 11px; }
.order-search-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #078bc1; background: #e9f7fd; }
.order-search-icon svg, .order-query-field svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.order-search-panel label { display: grid; gap: 6px; }
.order-search-panel select, .order-search-panel input { width: 100%; height: 39px; border: 1px solid #d0e2ea; border-radius: 8px; color: #25485d; background: #fff; font-size: 10px; }
.order-query-field > div { position: relative; }
.order-query-field svg { position: absolute; top: 11px; left: 11px; color: #7895a8; }
.order-query-field input { padding-left: 35px; }
.order-results-panel { overflow: hidden; margin-top: 18px; border: 1px solid rgba(15,75,105,.1); border-radius: 15px; background: rgba(255,255,255,.8); box-shadow: 0 14px 38px rgba(15,75,105,.06); }
.order-results-list { display: grid; }
.order-result-card + .order-result-card { border-top: 1px solid rgba(15,75,105,.1); }
.order-result-summary { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr .75fr .8fr auto; gap: 18px; align-items: center; padding: 18px 20px; }
.order-number-block { display: flex; gap: 12px; align-items: center; min-width: 0; }
.order-number-block .country-badge { flex: 0 0 auto; }
.order-number-block h2 { margin: 0; color: #173b52; font-size: 15px; letter-spacing: -.02em; }
.order-number-block p { margin: 4px 0 0; overflow: hidden; color: #7890a2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.order-service-block, .order-requirement-block, .order-lead-block, .order-price-block { display: grid; gap: 5px; }
.order-service-block > small, .order-requirement-block > small, .order-lead-block > small, .order-price-block > small { color: #7991a3; font-size: 7px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.order-capability-list { display: flex; gap: 5px; flex-wrap: wrap; }
.order-capability-list span { color: #8b9aa5; font-size: 8px; }
.order-capability-list .is-on { color: #19825a; }
.requirement-pill { display: inline-flex; width: fit-content; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 7px; font-size: 8px; font-weight: 700; }
.requirement-pill.required { color: #a45c0e; background: #fff5df; }
.requirement-pill.clear { color: #177952; background: #eaf9f2; }
.requirement-pill.neutral { color: #657d8f; background: #f0f5f7; }
.order-lead-block b { color: #187a54; font-size: 9px; }
.order-lead-block b i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #21bd7b; box-shadow: 0 0 0 3px rgba(33,189,123,.12); }
.order-lead-block span, .order-price-block span { color: #8397a5; font-size: 8px; }
.order-price-block b { color: #173f57; font-size: 13px; }
.order-card-actions { display: flex; gap: 7px; align-items: center; }
.order-card-actions form { margin: 0; }
.order-card-actions .button { min-height: 34px; padding-inline: 13px; font-size: 9px; }
.order-info-panel { margin: 0 20px 18px; overflow: hidden; border: 1px solid #cfe1e9; border-radius: 12px; background: #f9fcfd; animation: orderInfoIn .18s ease; }
@keyframes orderInfoIn { from { opacity: 0; transform: translateY(-5px); } }
.order-info-nav { display: flex; gap: 2px; padding: 0 15px; border-bottom: 1px solid #d8e8ee; background: #f1f8fb; }
.order-info-nav button { position: relative; padding: 13px 14px 11px; border: 0; color: #688397; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.order-info-nav button.active { color: #087fab; }
.order-info-nav button.active::after { content: ''; position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: #0ea5e9; }
.order-info-nav button i { display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; background: #eea52c; }
.order-info-content { display: none; padding: 20px; }
.order-info-content.active { display: block; }
.info-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.info-stat-grid > div { display: grid; gap: 6px; padding: 14px; border: 1px solid #dceaf0; border-radius: 9px; background: #fff; }
.info-stat-grid small { color: #7b92a2; font-size: 8px; text-transform: uppercase; }
.info-stat-grid b { color: #21465b; font-size: 11px; }
.info-feature { display: flex; gap: 13px; align-items: flex-start; }
.info-feature > span { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border-radius: 9px; font-size: 12px; font-weight: 800; }
.info-feature > span.available { color: #157c54; background: #e8f8f0; }
.info-feature > span.unavailable { color: #7890a0; background: #edf3f6; }
.info-feature b { color: #22485e; font-size: 11px; }
.info-feature p { margin: 5px 0 0; color: #718999; font-size: 9px; line-height: 1.6; }
.requirements-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.requirements-layout h3 { margin: 7px 0 6px; color: #1e455b; font-size: 15px; }
.requirements-layout p { margin: 0; color: #718999; font-size: 9px; line-height: 1.6; }
.requirements-layout ul { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }
.requirements-layout li { display: flex; gap: 9px; align-items: center; padding: 10px; border: 1px solid #dbe9ef; border-radius: 8px; color: #34566a; background: #fff; font-size: 9px; }
.requirements-layout li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #a16116; background: #fff1d5; }
.requirement-empty { display: flex; gap: 10px; align-items: center; padding: 13px; border-radius: 9px; background: #edf5f8; }
.requirement-empty > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: #7aa1b6; font-size: 10px; font-weight: 800; }
.inventory-capability-heading { margin-top: 12px; padding-top: 20px; border-top: 1px solid rgba(15,75,105,.1); }
.portal-form textarea { width: 100%; resize: vertical; }
.inventory-documents { padding: 14px; border: 1px solid #d8e7ed; border-radius: 9px; }
.inventory-documents legend { padding: 0 6px; color: #557286; font-size: 9px; font-weight: 700; }
@media (max-width: 1100px) { .order-search-panel { grid-template-columns: 1fr 1fr 1fr; } .order-search-title { grid-column: 1 / -1; } .order-result-summary { grid-template-columns: 1.4fr 1fr 1fr; } .order-card-actions { justify-self: start; } }
@media (max-width: 700px) { .order-search-panel { grid-template-columns: 1fr; } .order-result-summary { grid-template-columns: 1fr 1fr; } .order-number-block, .order-card-actions { grid-column: 1 / -1; } .order-card-actions .button, .order-card-actions form { flex: 1; width: 100%; } .info-stat-grid, .requirements-layout { grid-template-columns: 1fr 1fr; } .order-info-nav { overflow-x: auto; } }
@media (max-width: 440px) { .order-result-summary, .info-stat-grid, .requirements-layout { grid-template-columns: 1fr; } .order-service-block, .order-requirement-block, .order-lead-block, .order-price-block { padding-top: 10px; border-top: 1px solid #e0ebef; } }
/* Readability system: minimum practical type sizes and stronger contrast. */
html { font-size: 16px; }
body { color: #16384f; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.site-header { min-height: 78px; }
.brand-copy b { font-size: 14px; }
.brand-copy small, .client-site-header .brand-copy small { font-size: 10px; }
.client-primary-nav a, .admin-primary-nav a { font-size: 13px; }
.topup-button, .signout-button, .admin-signout { font-size: 12px; }
.balance-block small { font-size: 9px; }
.balance-block b { font-size: 13px; }
.client-body .dashboard, .admin-body .dashboard { padding-top: 48px; }
.client-body .eyebrow, .admin-body .eyebrow, .section-kicker { font-size: 11px; }
.client-body .workspace-titlebar h1, .client-body .dashboard-head h1, .client-body .action-welcome h1, .admin-body .admin-page-head h1, .admin-body .dashboard-head h1 { font-size: clamp(34px,3vw,44px); line-height: 1.12; }
.client-body .workspace-titlebar p, .client-body .dashboard-head p, .client-body .action-welcome > div:first-child > p, .admin-body .admin-page-head p, .admin-body .dashboard-head p { color: #4d687c; font-size: 14px; line-height: 1.6; }
.client-body .button, .admin-body .button { min-height: 42px; height: 42px; padding-inline: 17px; font-size: 12px; }
.client-body input, .client-body select, .client-body textarea, .admin-body input, .admin-body select, .admin-body textarea { color: #173c54; font-size: 14px; }
.workspace-panel-head span, .panel-title span, .inventory-list-head span, .form-heading > span { font-size: 10px; }
.workspace-panel-head h2, .panel-title h2, .inventory-list-head h2 { font-size: 18px; }
table { font-size: 13px; }
th, .compact-record-table th { color: #49657b; font-size: 11px; }
td small, .compact-record-table td small { color: #607b90; font-size: 11px; }
.status-pill, .country-badge, .availability { font-size: 11px; }
.form-heading p, .portal-form label small, .form-hint { color: #5c7689 !important; font-size: 12px !important; }
.portal-form label { color: #294d63; font-size: 13px; }
.action-welcome { padding-bottom: 30px; }
.action-welcome h1 { font-size: 42px; }
.inline-summary small { font-size: 10px; }
.inline-summary b { font-size: 25px; }
.primary-journey h2 { font-size: 27px !important; }
.primary-journey > p { color: #4f6c80; font-size: 14px; }
.dashboard-search input { font-size: 14px; }
.dashboard-shortcuts a { font-size: 12px; }
.account-activity h2 { font-size: 21px; }
.activity-entry b { font-size: 13px; }
.activity-entry small { color: #607b90; font-size: 11px; }

/* DID marketplace: supplier-style master/detail flow in the portal design system. */
.client-order-page { width: min(1400px,calc(100% - 64px)); max-width: 1400px; }
.order-page-heading { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #cfe0e8; }
.order-market-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 24px; align-items: start; }
.order-filter-sidebar { position: sticky; top: 22px; overflow: hidden; border: 1px solid #cbdde6; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(28,73,98,.07); }
.order-sidebar-title { display: flex; gap: 12px; align-items: center; padding: 20px; color: #fff; background: #173b52; }
.order-sidebar-title > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: #173b52; background: #fff; }
.order-sidebar-title svg, .prompt-globe svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.order-sidebar-title small { display: block; color: #a9c5d5; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.order-sidebar-title h2 { margin: 2px 0 0; font-size: 18px; }
.order-filter-sidebar form { display: grid; gap: 18px; padding: 22px; }
.order-filter-sidebar label { display: grid; gap: 8px; color: #294d63; font-size: 13px; font-weight: 700; }
.order-filter-sidebar select, .order-filter-sidebar input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #b8cfdc; border-radius: 7px; background: #fff; }
.order-filter-sidebar select:focus, .order-filter-sidebar input:focus { outline: 3px solid rgba(14,165,233,.14); border-color: #159fd4; }
.country-select-label { padding-bottom: 18px; border-bottom: 1px solid #e0e9ee; }
.order-clear-link { color: #087fab; font-size: 12px; font-weight: 700; text-align: center; }
.order-sidebar-help { display: flex; gap: 10px; align-items: flex-start; margin: 0 22px 22px; padding: 13px; border-radius: 8px; color: #526f82; background: #edf6fa; }
.order-sidebar-help > span { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; color: #fff; background: #3b8bad; font-size: 11px; font-weight: 800; }
.order-sidebar-help p { margin: 0; font-size: 11px; line-height: 1.55; }
.order-market-content { min-width: 0; }
.order-select-prompt { display: grid; justify-items: center; min-height: 390px; padding: 80px 30px; border: 1px solid #cddfe8; border-radius: 12px; background: rgba(255,255,255,.76); text-align: center; }
.prompt-globe { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #078fc7; background: #e5f6fd; }
.prompt-globe svg { width: 28px; }
.order-select-prompt h2 { margin: 22px 0 9px; color: #173b52; font-size: 24px; }
.order-select-prompt p { max-width: 570px; margin: 0; color: #557185; font-size: 14px; }
.order-plans-panel { overflow: hidden; border: 1px solid #cbdde6; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(28,73,98,.07); }
.order-plans-heading { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; color: #fff; background: #173b52; }
.order-plans-heading span { color: #a9c5d5; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.order-plans-heading h2 { margin: 3px 0 0; font-size: 19px; }
.order-plans-heading > b { padding: 7px 10px; border-radius: 7px; color: #173b52; background: #fff; font-size: 12px; }
.order-plan-table-head, .plan-summary-grid { display: grid; grid-template-columns: 1.55fr 1fr 1.05fr .58fr .62fr .72fr 1.22fr; gap: 14px; align-items: center; }
.order-plan-table-head { padding: 12px 18px; border-bottom: 1px solid #d9e5eb; color: #4e6b7e; background: #f2f7f9; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.order-plan-row + .order-plan-row { border-top: 1px solid #dce7ec; }
.plan-summary-grid { padding: 18px; }
.order-number-block h3 { margin: 0; color: #163c54; font-size: 15px; }
.order-number-block p { font-size: 11px; }
.order-capability-list { display: grid; gap: 3px; }
.order-capability-list span { color: #718698; font-size: 11px; }
.order-capability-list .is-on { color: #157b55; font-weight: 650; }
.requirement-pill { min-height: 29px; padding: 0 9px; font-size: 10px; }
.plan-money { display: flex; gap: 4px; align-items: baseline; }
.plan-money small { color: #647d8f; font-size: 10px; }
.plan-money b { color: #173d55; font-size: 15px; }
.plan-stock { display: grid; gap: 3px; }
.plan-stock b { color: #167a53; font-size: 11px; }
.plan-stock b i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #20b978; }
.plan-stock small { color: #6c8495; font-size: 10px; }
.order-card-actions { justify-content: flex-end; }
.order-card-actions .button { min-height: 36px; height: 36px; padding-inline: 11px; font-size: 11px; }
.order-info-panel { margin: 0 18px 18px; border: 1px solid #bdcfda; border-radius: 8px; background: #fbfdfe; }
.order-info-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; color: #fff; background: #294c62; }
.order-info-title span { font-size: 12px; font-weight: 700; }
.order-info-title b { font-size: 13px; }
.order-info-nav { background: #eef4f7; }
.order-info-nav button { padding: 14px 18px 12px; font-size: 12px; }
.order-info-content { padding: 22px; }
.order-info-content > h3 { margin: 0 0 14px; font-size: 16px; }
.info-stat-grid small { color: #5f788b; font-size: 10px; }
.info-stat-grid b { font-size: 13px; }
.info-feature b { font-size: 14px; }
.info-feature p, .requirements-layout p, .requirements-layout li { color: #506d80; font-size: 12px; }
@media (max-width: 1100px) { .order-market-layout { grid-template-columns: 260px minmax(0,1fr); } .order-plan-table-head { display: none; } .plan-summary-grid { grid-template-columns: 1fr 1fr 1fr; } .order-number-block, .order-card-actions { grid-column: span 3; } .order-card-actions { justify-content: flex-start; } }
@media (max-width: 760px) { .client-order-page { width: min(100% - 28px,1400px); } .order-market-layout { grid-template-columns: 1fr; } .order-filter-sidebar { position: static; } .plan-summary-grid { grid-template-columns: 1fr 1fr; } .order-number-block, .order-card-actions { grid-column: span 2; } }
@media (max-width: 480px) { .plan-summary-grid, .info-stat-grid, .requirements-layout { grid-template-columns: 1fr; } .order-number-block, .order-card-actions { grid-column: auto; } .order-card-actions { align-items: stretch; flex-direction: column; } }

/* V35: compact, production-style authenticated workspace */
.admin-body, .client-body { font-size: 13px; line-height: 1.45; }
.admin-body .dashboard, .client-body .dashboard { padding-top: 28px; padding-bottom: 58px; }
.admin-body .admin-console, .admin-body .admin-records, .client-body .client-workspace, .client-body .action-dashboard, .client-body .compact-records-page, .client-body .invoice-page { padding-top: 28px; }
.admin-body .admin-welcome, .admin-body .admin-page-head, .client-body .workspace-titlebar, .client-body .dashboard-head, .client-body .action-welcome {
  min-height: 0; align-items: center; gap: 18px; margin-bottom: 16px; padding-bottom: 15px;
}
.admin-body .admin-welcome h1, .admin-body .admin-page-head h1, .admin-body .dashboard-head h1,
.client-body .workspace-titlebar h1, .client-body .dashboard-head h1, .client-body .action-welcome h1 {
  margin: 5px 0 4px; font-size: clamp(27px, 2vw, 34px); line-height: 1.12; letter-spacing: -.035em;
}
.admin-body .admin-welcome p, .admin-body .admin-page-head p, .admin-body .dashboard-head p,
.client-body .workspace-titlebar p, .client-body .dashboard-head p, .client-body .action-welcome > div:first-child > p {
  max-width: 760px; color: #587184; font-size: 12px; line-height: 1.45;
}
.admin-body .eyebrow, .client-body .eyebrow, .admin-body .section-kicker, .client-body .section-kicker { font-size: 9px; letter-spacing: .1em; }
.admin-body .button, .client-body .button { min-height: 36px; height: 36px; padding: 0 13px; border-radius: 8px; font-size: 10px; }
.admin-body input, .admin-body select, .admin-body textarea, .client-body input, .client-body select, .client-body textarea { font-size: 12px; }
.admin-body .portal-form label, .client-body .portal-form label { gap: 6px; font-size: 11px; }
.admin-body .portal-form input, .admin-body .portal-form select, .client-body .portal-form input, .client-body .portal-form select { height: 40px; padding-inline: 11px; }
.admin-body .portal-form label small, .client-body .portal-form label small, .admin-body .form-hint, .client-body .form-hint { font-size: 10px !important; }
.admin-body .form-card, .client-body .form-card { padding: 20px; border-radius: 13px; }
.admin-body .form-heading h2, .client-body .form-heading h2 { margin: 6px 0 16px; font-size: 19px; }
.admin-body .form-heading p, .client-body .form-heading p { font-size: 10px !important; }
.admin-body .admin-client-layout { gap: 18px; margin-top: 18px; }
.admin-body .admin-client-form { padding: 20px; }
.admin-body .admin-client-form .portal-form { margin-top: 14px; }
.admin-body .admin-active-note { margin-bottom: 10px; padding: 9px 11px; }
.admin-body .secure-password-note { margin-bottom: 11px; font-size: 9px; }
.admin-body .admin-stat-line a { gap: 4px; padding: 13px 18px; }
.admin-body .admin-stat-line small { font-size: 8px; }
.admin-body .admin-stat-line b { font-size: 18px; }
.admin-body .admin-operations-grid { gap: 26px; padding-top: 20px; }
.admin-body .admin-operation-row { padding: 11px 0; }
.admin-body .admin-activity-panel { padding-left: 26px; }
.admin-body .admin-activity-list > div { padding: 10px 0; }
.admin-body .admin-quick-links { margin-top: 20px; }
.admin-body .admin-quick-links a { padding: 13px 16px; }
.admin-body .admin-data-panel, .admin-body .table-panel { margin-top: 16px; border-radius: 10px; }
.admin-body .panel-title, .admin-body .inventory-list-head, .client-body .workspace-panel-head { padding: 13px 16px; }
.admin-body .panel-title h2, .admin-body .inventory-list-head h2, .client-body .workspace-panel-head h2 { font-size: 15px; }
.admin-body th, .client-body th, .admin-body .compact-record-table th, .client-body .compact-record-table th { padding: 9px 12px !important; font-size: 9px; }
.admin-body td, .client-body td, .admin-body .compact-record-table td, .client-body .compact-record-table td { padding: 10px 12px !important; font-size: 11px; }
.admin-body td small, .client-body td small, .admin-body .compact-record-table td small, .client-body .compact-record-table td small { font-size: 9px; }
.admin-body .status-pill, .client-body .status-pill { padding: 4px 7px; font-size: 9px; }
.admin-body .admin-inventory-filters { margin-top: 14px; padding: 11px; }
.admin-body .admin-inventory-filters input, .admin-body .admin-inventory-filters select { height: 34px; font-size: 10px; }
.admin-body .inventory-list-panel { margin-top: 12px; }
.admin-body .bulk-inventory-bar { margin: 16px 0; padding: 13px 16px; }
.admin-body .inventory-add-card { margin-top: 15px; padding: 20px; }
.admin-body .api-create-layout { margin-top: 16px; }
.admin-body .api-guidance-card { padding: 20px; }
.admin-body .api-guidance-card h2 { font-size: 17px; }
.client-body .workspace-titlebar { margin-bottom: 16px; }
.client-body .workspace-panel, .client-body .settings-card, .client-body .billing-overview { border-radius: 12px; box-shadow: 0 8px 22px rgba(14,116,144,.06); }
.client-body .workspace-empty { padding: 38px 20px; }
.client-body .billing-overview article { min-height: 88px; gap: 5px; padding: 14px 16px; }
.client-body .billing-overview article b { font-size: 17px; }
.client-body .settings-card div { padding: 14px 16px; }
.client-body .action-welcome { margin-bottom: 0; padding-bottom: 15px; }
.client-body .action-workspace { gap: 30px; padding-top: 22px; }
.client-body .primary-journey { padding-top: 4px; }
.client-body .primary-journey h2 { margin: 7px 0 6px; font-size: 20px !important; }
.client-body .primary-journey > p { font-size: 12px; }
.client-body .dashboard-search { margin-top: 17px; }
.client-body .dashboard-search label, .client-body .dashboard-search input { height: 38px; }
.client-body .dashboard-shortcuts { margin-top: 17px; }
.client-body .dashboard-shortcuts a { min-height: 33px; font-size: 10px; }
.client-body .account-activity { padding-top: 4px; }
.client-body .account-activity h2 { margin-top: 7px; font-size: 17px; }
.client-body .activity-entry { padding: 10px 0; }
.client-body .activity-entry b { font-size: 11px; }
.client-body .activity-entry small { font-size: 9px; }
.client-body .inline-summary small { font-size: 8px; }
.client-body .inline-summary b { font-size: 19px; }
.client-body .order-page-heading { margin-bottom: 18px; padding-bottom: 15px; }
.client-body .order-filter-sidebar form { gap: 13px; padding: 16px; }
.client-body .order-filter-sidebar select, .client-body .order-filter-sidebar input { height: 40px; }
.client-body .order-plans-heading { padding: 15px 18px; }
.client-body .plan-summary-grid { padding: 13px 16px; }
.portal-live-status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid #cce9dc; border-radius: 999px; color: #147354; background: #f1fbf6; font-size: 9px; font-weight: 700; white-space: nowrap; }
.portal-live-status > i, .live-feed-label > i { width: 6px; height: 6px; border-radius: 50%; background: #22b978; box-shadow: 0 0 0 3px rgba(34,185,120,.12); animation: livePulse 2s ease-in-out infinite; }
.portal-live-status.is-offline { color: #a23b37; border-color: #f0cfcd; background: #fff7f6; }
.portal-live-status.is-offline > i { background: #dc5c55; box-shadow: none; animation: none; }
.live-feed-label { display: inline-flex !important; align-items: center; gap: 7px; }
@keyframes livePulse { 50% { opacity: .55; transform: scale(.82); } }
.assistant-launcher { position: fixed; z-index: 80; right: 22px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 43px; padding: 0 14px; border: 0; border-radius: 999px; color: white; background: #087fab; box-shadow: 0 12px 30px rgba(8,84,122,.25); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.assistant-launcher svg, .assistant-input svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.assistant-launcher > i { position: absolute; top: 1px; right: 2px; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #22b978; }
.assistant-panel { position: fixed; z-index: 81; right: 22px; bottom: 72px; width: min(350px, calc(100vw - 28px)); overflow: hidden; border: 1px solid #c9dde7; border-radius: 15px; background: white; box-shadow: 0 22px 60px rgba(19,61,83,.22); }
.assistant-panel[hidden] { display: none; }
.assistant-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; color: white; background: #173b52; }
.assistant-panel > header > div { display: flex; align-items: center; gap: 10px; }
.assistant-panel > header > div > div { display: grid; gap: 2px; }
.assistant-panel > header b { font-size: 12px; }
.assistant-panel > header small { display: flex; align-items: center; gap: 5px; color: #b9d0dc; font-size: 8px; }
.assistant-panel > header small i { width: 5px; height: 5px; border-radius: 50%; background: #36d692; }
.assistant-panel > header button { border: 0; color: #c9dce5; background: transparent; font-size: 22px; cursor: pointer; }
.assistant-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #087fab; background: white; font-size: 9px; font-weight: 850; }
.assistant-messages { display: grid; gap: 9px; max-height: 245px; min-height: 120px; overflow-y: auto; padding: 15px; background: #f5fafc; }
.assistant-message { width: fit-content; max-width: 88%; padding: 9px 11px; border-radius: 10px; font-size: 10px; line-height: 1.5; }
.assistant-message.bot { color: #294c61; border: 1px solid #d8e7ed; background: white; }
.assistant-message.user { justify-self: end; color: white; background: #168fc3; }
.assistant-message a { display: block; margin-top: 6px; color: #087fab; font-weight: 750; text-decoration: none; }
.assistant-quick-actions { display: flex; gap: 6px; padding: 9px 12px; overflow-x: auto; border-top: 1px solid #e1ebf0; }
.assistant-quick-actions button { flex: 0 0 auto; min-height: 29px; padding: 0 9px; border: 1px solid #c7e0eb; border-radius: 999px; color: #14779f; background: #f6fbfd; font-size: 9px; font-weight: 700; cursor: pointer; }
.assistant-input { display: grid; grid-template-columns: 1fr 34px; gap: 7px; padding: 10px 12px; border-top: 1px solid #e1ebf0; }
.assistant-input input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #cbdfe8; border-radius: 8px; outline: 0; color: #294c61; background: white; font-size: 10px; }
.assistant-input input:focus { border-color: #1497cf; box-shadow: 0 0 0 3px rgba(20,151,207,.1); }
.assistant-input button { display: grid; place-items: center; border: 0; border-radius: 8px; color: white; background: #087fab; cursor: pointer; }
.assistant-panel > footer { padding: 8px 12px 11px; color: #7b91a1; font-size: 8px; text-align: center; }
.assistant-panel > footer a { color: #087fab; font-weight: 700; }
@media (max-width: 900px) { .portal-live-status span { display: none; } .portal-live-status { width: 28px; padding: 0; justify-content: center; } }
@media (max-width: 640px) { .admin-body .dashboard, .client-body .dashboard { padding-top: 22px; } .admin-body .admin-welcome h1, .admin-body .admin-page-head h1, .client-body .workspace-titlebar h1, .client-body .action-welcome h1 { font-size: 27px; } .assistant-launcher { right: 14px; bottom: 14px; } .assistant-panel { right: 14px; bottom: 65px; } }