:root { color-scheme: light; --ink:#17212b; --muted:#6c7782; --line:#dfe5ea; --panel:rgba(255,255,255,.82); --brand:#173e57; --accent:#e97943; --bg:#eef3f6; --radius:18px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at top left,#fff 0,var(--bg) 50%,#e4edf0 100%); min-height:100vh; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; }
.shell { width:100%; min-height:100vh; padding:20px; }
.app-screen { min-height:calc(100vh - 40px); min-height:calc(100dvh - 40px); display:flex; flex-direction:column; }
.app-toplinks,.app-bottomlinks { min-height:24px; display:flex; align-items:center; justify-content:flex-end; }
.app-toplinks { margin-bottom:8px; } .app-bottomlinks { margin-top:8px; }
.utility-link { border:0; background:transparent; color:#31556a; font-size:13px; font-weight:700; padding:2px 4px; }
.utility-link:hover { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.utility-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
.glass { background:var(--panel); border:1px solid rgba(255,255,255,.75); box-shadow:0 18px 55px rgba(23,62,87,.1); backdrop-filter:blur(18px); border-radius:var(--radius); }
.login { width:min(880px,calc(100vw - 40px)); min-height:620px; margin:8vh auto; padding:80px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.brand-logo { display:block; width:min(357px,100%); height:auto; margin:0 auto 42px; }
.login h1 { font-size:clamp(20px,3vw,36px); margin-bottom:16px; }
.login form { width:min(100%,620px); }
.login .field { text-align:center; }
.login input { text-align:center; font-size:18px; padding:16px 18px; }
.login .primary { display:block; width:100%; margin:16px auto 0; font-size:18px; padding:16px 24px; }
.login .muted[role="status"] { text-align:center; margin-top:18px; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(30px,5vw,52px); letter-spacing:-.05em; } h2 { letter-spacing:-.03em; }
.muted { color:var(--muted); }
.field { display:grid; gap:8px; margin:18px 0; } label { font-size:13px; font-weight:650; }
input,select,textarea { width:100%; padding:12px 14px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:12px; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(23,62,87,.12); }
.primary { background:var(--brand); color:#fff; padding:12px 18px; border-radius:12px; font-weight:700; } .secondary { background:#fff; color:var(--brand); border:1px solid var(--line); padding:10px 14px; border-radius:10px; } .danger { color:#a33d30; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; } .actions { display:flex; gap:10px; flex-wrap:wrap; }
.workspace-heading { display:flex; align-items:center; gap:14px; } .workspace-heading h2 { margin-bottom:0; }
.icon-button { width:40px; height:40px; padding:0; display:grid; place-items:center; flex:none; } .icon-label { display:inline-flex; align-items:center; gap:8px; }
.table-actions { width:1%; text-align:right; }
.table-actions .icon-button { width:34px; height:34px; padding:0; display:inline-grid; place-items:center; }
.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; }
.size-range { display:inline-flex; min-width:82px; justify-content:center; padding:5px 9px; border-radius:999px; background:#eef5f7; color:var(--brand); font-variant-numeric:tabular-nums; }
.admin-companies-table { min-width:0; }
.admin-row-actions { display:flex; justify-content:flex-end; gap:8px; }
.member-form-controls { display:flex; gap:8px; margin:9px 0 0; }
.member-form-controls input { min-width:0; flex:1; }
.member-form-controls button { white-space:nowrap; }
.member-list { display:grid; gap:8px; margin-top:22px; }
.member-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.member-row span { min-width:0; overflow-wrap:anywhere; font-weight:600; }
.member-row button { flex:none; }
.member-empty { margin:0; padding:18px; border:1px dashed var(--line); border-radius:11px; text-align:center; }
.member-note { margin:20px 0 0; font-size:12px; }
.fab { position:fixed; right:32px; bottom:72px; z-index:3; display:grid; place-items:center; width:64px; height:64px; padding:0 0 5px; border-radius:50%; background:var(--brand); color:#fff; box-shadow:0 12px 28px rgba(23,62,87,.25); font-size:38px; line-height:1; } .fab:hover { background:#24536f; } .fab:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.workspace { flex:1 0 auto; width:100%; min-height:0; padding:32px; display:flex; flex-direction:column; }
.toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; margin:14px 0 28px; }
.search-control { min-width:0; height:56px; display:flex; align-items:center; gap:12px; padding:0 18px; border:1px solid #9eb7c7; border-radius:16px; background:#f7fbfd; color:#31566c; box-shadow:0 2px 5px rgba(23,62,87,.04); }
.search-control:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px rgba(23,62,87,.15); background:#fff; }
.search-control input,.search-control input:focus { flex:1; min-width:0; width:100%; border:0; outline:0; box-shadow:none; background:transparent; padding:0; font-size:16px; }
.search-control input::placeholder { color:#607b8e; opacity:1; }
.segmented { display:inline-flex; gap:4px; padding:4px; border:1px solid #a9c0ce; border-radius:999px; background:#dce9ef; box-shadow:inset 0 1px 3px rgba(23,62,87,.12); }
.segment { min-width:126px; padding:11px 20px; border-radius:999px; background:transparent; color:#23475d; font-weight:700; }
.segment[aria-pressed="true"] { background:var(--brand); color:#fff; box-shadow:0 3px 9px rgba(23,62,87,.22); }
.segment[aria-pressed="false"]:hover { background:rgba(255,255,255,.65); }
.segment:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.workspace-content { flex:1; min-height:0; display:flex; flex-direction:column; }
.loading-screen { position:fixed; inset:0; z-index:10; display:grid; place-items:center; align-content:center; gap:16px; background:rgba(238,243,246,.96); color:var(--brand); font-weight:700; }
.spinner { width:46px; height:46px; border:4px solid #cfe0e7; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.company-summary { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.company-summary span,.company-meta-pill { padding:5px 10px; border-radius:999px; background:#d4e5eb; color:var(--brand); font-size:13px; font-weight:700; }
.workspace-content>.empty { flex:1; min-height:200px; display:grid; place-items:center; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff; } table { width:100%; border-collapse:collapse; min-width:840px; } th,td { padding:15px 14px; text-align:left; border-bottom:1px solid #edf0f2; white-space:nowrap; } th { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } tr:last-child td { border-bottom:0; } .clickable { cursor:pointer; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border-radius:999px; background:#f3f6f7; color:var(--muted); font-size:12px; } .hot { background:#fff0e9; color:#b84d23; }
.empty { padding:60px 20px; text-align:center; color:var(--muted); } .workspace>.empty { flex:1; display:grid; place-items:center; } .footer-nav { display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; padding-top:22px; padding-right:96px; }
.modal { position:fixed; inset:0; display:grid; place-items:center; padding:2.5vh 2.5vw; background:rgba(13,28,39,.42); z-index:4; } .sheet { width:100%; height:100%; max-width:none; max-height:none; overflow:auto; padding:36px; position:relative; } .sheet-compact { width:min(480px,100%); height:auto; } .sheet-head { display:flex; justify-content:space-between; gap:16px; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .span-2 { grid-column:span 2; }
.company-header-line { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:18px 0 24px; }
.company-meta-pill { display:inline-flex; }
.modal-fab { position:fixed; right:32px; bottom:32px; z-index:6; display:grid; place-items:center; width:58px; height:58px; border:0; border-radius:50%; background:var(--brand); color:#fff; box-shadow:0 10px 24px rgba(23,62,87,.25); font-size:32px; line-height:1; cursor:pointer; }
.modal-fab:hover,.modal-fab:focus,.modal-fab:active { background:var(--brand); color:#fff; box-shadow:0 10px 24px rgba(23,62,87,.25); }
.sheet .table-wrap { overflow:hidden; }
.sheet table { min-width:0; table-layout:fixed; }
.sheet th,.sheet td { overflow:hidden; text-overflow:ellipsis; }


.api-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0 26px; }
.api-details>div,.api-endpoints>div,.api-created-key { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#f7fafb; }
.api-label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.api-value,.api-endpoints code { display:block; overflow-wrap:anywhere; color:var(--brand); font-size:13px; }
.api-endpoints { display:grid; gap:10px; margin:14px 0 24px; }
.api-endpoints>div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:4px 12px; align-items:start; }
.api-endpoints .muted { grid-column:2; font-size:12px; }
.api-method { color:var(--brand); font-size:12px; font-weight:800; }
.api-example { overflow:auto; margin:12px 0; padding:16px; border-radius:12px; background:#142f42; color:#f7fbfd; font-size:13px; line-height:1.55; }
.api-note { font-size:13px; line-height:1.5; }
.api-key-actions { display:flex; align-items:center; gap:14px; margin-top:24px; }
.api-created-key { margin-top:16px; background:#fff; }
.api-created-key[hidden] { display:none; }
.api-key-field { display:flex; gap:8px; margin:10px 0; }
.api-key-field input { min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.api-created-key p { margin-bottom:0; font-size:12px; }
@media (max-width:700px) { .shell { padding:12px; } .app-screen { min-height:calc(100vh - 24px); min-height:calc(100dvh - 24px); } .workspace { padding:20px; } .login { width:calc(100vw - 28px); min-height:560px; margin:5vh auto; padding:36px 22px; } .grid { grid-template-columns:1fr; } .span-2 { grid-column:auto; } .topbar { align-items:flex-start; flex-direction:column; } .toolbar { grid-template-columns:1fr; gap:12px; } .segmented { width:100%; } .segment { flex:1; min-width:0; } .footer-nav { padding-right:72px; } .fab { right:20px; bottom:64px; width:56px; height:56px; } }
@media (max-width:700px) { .admin-row-actions,.member-form-controls { flex-wrap:wrap; } .admin-row-actions button { white-space:nowrap; } .member-form-controls input { flex-basis:100%; } }
@media (max-width:700px) { .api-details { grid-template-columns:1fr; } .api-endpoints>div { grid-template-columns:1fr; } .api-endpoints .muted { grid-column:1; } .api-key-actions { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }