:root { --ink: #2b2622; --ink-2: #403833; --paper: #f8f5ef; --paper-2: #efe8df; --white: #fffdfa; --coral: #e8664a; --coral-dark: #bd4c35; --mint: #dce8df; --muted: #736c65; --line: #d8d0c7; --danger: #aa4034; --display: 'Fraunces', Georgia, serif; --body: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', monospace; --shadow: 0 22px 65px rgba(43,38,34,.12); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--body); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(232,102,74,.36); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 50; top: 12px; left: -999px; padding: 10px 14px; background: var(--coral); color: var(--white); text-decoration: none; font-weight: 700; }.skip-link:focus { left: 12px; }
.topbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 70px; padding: 14px clamp(20px, 4vw, 62px); background: var(--ink); color: var(--white); }.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--white); text-decoration: none; }.brand img { width: 39px; height: 39px; border-radius: 11px; }.brand span { display: grid; gap: 4px; line-height: 1; }.brand strong { font: 700 .9rem/1 var(--mono); letter-spacing: .17em; }.brand small { color: #b9aea5; font: .47rem/1 var(--mono); letter-spacing: .15em; }.topbar-right, .user-area { display: flex; align-items: center; gap: 14px; }.connection-pill { display: flex; align-items: center; gap: 8px; color: #beb4ad; font: .62rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }.connection-pill i, .workspace-ribbon i { width: 7px; height: 7px; border-radius: 50%; background: #7fb58d; box-shadow: 0 0 0 4px rgba(127,181,141,.13); }.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 0 15px; border: 1px solid transparent; cursor: pointer; font-weight: 700; text-decoration: none; transition: transform .18s ease, background .18s ease, border-color .18s ease; }.button:hover { transform: translateY(-2px); }.button-primary { background: var(--coral); color: var(--white); }.button-primary:hover { background: var(--coral-dark); }.button-dark { border-color: #746961; background: transparent; color: var(--white); }.button-dark:hover { border-color: var(--coral); background: rgba(232,102,74,.12); }.button:disabled { cursor: wait; opacity: .6; }
main { min-height: calc(100vh - 70px); }
.auth-shell { display: grid; grid-template-columns: minmax(280px, 470px) minmax(0, 570px); gap: clamp(45px, 9vw, 140px); align-items: center; width: min(1120px, calc(100% - 44px)); min-height: calc(100vh - 70px); margin: auto; padding: 70px 0 100px; }.auth-art { position: relative; display: grid; place-items: center; min-height: 460px; overflow: hidden; background: var(--ink); box-shadow: 24px 24px 0 var(--coral); }.art-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 37px 37px; }.auth-art img { position: relative; z-index: 1; width: 165px; height: 165px; border-radius: 43px; box-shadow: 22px 22px 0 rgba(232,102,74,.3); transform: rotate(-7deg); }.art-label, .art-index { position: absolute; z-index: 1; color: #b3a79f; font: .62rem var(--mono); letter-spacing: .13em; }.art-label { top: 24px; left: 25px; }.art-index { right: 25px; bottom: 25px; color: var(--coral); }.auth-copy { max-width: 550px; }.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; color: var(--coral-dark); font: 500 .65rem/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; }.eyebrow > span { display: inline-block; width: 17px; height: 2px; background: var(--coral); }.auth-copy h1, .workspace-heading h1, .pane-intro h2, .panel h2 { margin: 0 0 23px; font: 600 clamp(3.7rem, 7vw, 6.6rem)/.88 var(--display); letter-spacing: -.065em; }.auth-copy h1 em, .workspace-heading h1 em, .pane-intro h2 em, .panel h2 em, .guidance h3 em { color: var(--coral); font-style: normal; }.auth-copy > p:not(.eyebrow) { max-width: 485px; margin-bottom: 28px; color: var(--muted); font-size: 1.03rem; }.auth-copy small { display: block; margin-top: 17px; color: var(--muted); }.auth-copy code { color: var(--ink); font-family: var(--mono); }.denied-art { background: var(--coral-dark); }.denied-symbol { position: relative; z-index: 1; display: grid; place-items: center; width: 130px; height: 130px; border: 1px solid #f3aa97; color: var(--white); font: 600 5rem var(--display); transform: rotate(7deg); }
.console-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); width: min(1480px, calc(100% - 44px)); min-height: calc(100vh - 70px); margin: auto; }.side-rail { display: flex; flex-direction: column; min-height: calc(100vh - 70px); padding: 34px 15px 28px 0; border-right: 1px solid var(--line); }.rail-heading { display: grid; gap: 4px; padding: 0 17px 30px; }.rail-heading span { color: var(--muted); font: .58rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }.rail-heading strong { font: 600 1.45rem var(--display); letter-spacing: -.04em; }.rail-nav { display: grid; gap: 4px; }.tab { display: grid; grid-template-columns: 24px 1fr 22px; gap: 9px; align-items: center; width: 100%; padding: 12px 13px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-weight: 600; }.tab:hover { color: var(--ink); background: var(--paper-2); }.tab.active { border-left-color: var(--coral); background: var(--white); color: var(--ink); box-shadow: 8px 0 0 var(--white); }.nav-glyph { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid currentColor; color: var(--coral-dark); font: .8rem var(--mono); }.tab small { color: #a49a91; font: .58rem var(--mono); text-align: right; }.rail-footer { margin-top: auto; padding: 20px 17px 0; border-top: 1px solid var(--line); }.rail-footer p { margin: 0 0 6px; color: var(--muted); font: .58rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }.rail-footer a { color: var(--coral-dark); font-weight: 700; text-decoration: none; }.rail-footer a:hover { text-decoration: underline; }.rail-footer small { display: block; margin-top: 8px; color: var(--muted); font-size: .68rem; line-height: 1.4; }.workspace { min-width: 0; padding: 54px clamp(20px, 5vw, 72px) 90px; }.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 27px; }.workspace-heading h1 { margin-bottom: 0; font-size: clamp(3.3rem, 6vw, 6rem); }.heading-actions { display: flex; align-items: center; gap: 14px; color: var(--muted); font: .62rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }.workspace-ribbon { display: flex; flex-wrap: wrap; gap: 12px 25px; align-items: center; margin-bottom: 38px; padding: 11px 15px; border: 1px solid var(--line); background: var(--white); color: var(--muted); font: .64rem var(--mono); }.workspace-ribbon span { display: inline-flex; align-items: center; gap: 8px; }.workspace-ribbon a { color: var(--coral-dark); font-weight: 600; }.pane { display: none; }.pane.active { display: block; }.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }.metric { min-height: 135px; padding: 18px; border: 1px solid var(--line); background: var(--white); }.metric:nth-child(2) { background: var(--paper-2); }.metric:nth-child(4) { background: var(--mint); }.metric:nth-child(5) { background: var(--ink); color: var(--white); }.metric .metric-label { display: block; color: var(--muted); font: .59rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }.metric:nth-child(5) .metric-label { color: #bcb1a9; }.metric strong { display: block; margin: 17px 0 7px; font: 600 clamp(2.1rem, 3vw, 3rem)/.9 var(--display); letter-spacing: -.06em; }.metric small { color: var(--muted); font-size: .68rem; }.metric:nth-child(5) small { color: #bcb1a9; }.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.overview-grid .signal-panel { grid-column: 1 / -1; }.panel { min-width: 0; padding: 25px; border: 1px solid var(--line); background: var(--white); }.panel-dark { background: var(--ink); color: var(--white); }.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.panel-dark .panel-heading { border-color: #5b514b; }.panel h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.7rem); }.panel-index { color: var(--muted); font: .59rem var(--mono); letter-spacing: .1em; }.panel-dark .panel-index { color: #a99d95; }.signal-panel > p { max-width: 620px; margin: 20px 0; color: #c5bbb4; }.text-button { border: 0; background: transparent; color: var(--coral-dark); cursor: pointer; padding: 0; font-weight: 700; }.panel-dark .text-button { color: #f28a73; }.rank-row, .error-row { display: grid; grid-template-columns: 29px 1fr auto; gap: 11px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }.rank-row:last-child, .error-row:last-child { border-bottom: 0; }.rank-number { color: var(--coral-dark); font: .64rem var(--mono); }.rank-name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.rank-name small, .error-row small { display: block; overflow: hidden; max-width: 245px; color: var(--muted); font-size: .69rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }.rank-value { color: var(--ink-2); font: .63rem var(--mono); }.error-row { grid-template-columns: 1fr auto; }.error-row strong { color: var(--danger); font-size: .75rem; }.error-row time { color: var(--muted); font: .6rem var(--mono); }.pane-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: end; margin-bottom: 31px; }.pane-intro h2 { margin-bottom: 0; font-size: clamp(3.4rem, 6vw, 5.5rem); }.pane-intro > p { max-width: 470px; margin: 0 0 4px; color: var(--muted); }
.table-panel { padding: 0; overflow: hidden; }.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 17px; min-height: 70px; padding: 13px 19px; border-bottom: 1px solid var(--line); }.toolbar-title { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font: .67rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }.toolbar-title > span:last-child { color: var(--muted); font-weight: 400; }.toolbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }.toolbar-tools { display: flex; align-items: center; gap: 9px; color: var(--muted); font: .61rem var(--mono); }.table-toolbar input, .table-toolbar select { min-width: 190px; padding: 10px 11px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: .8rem var(--body); }.table-toolbar select { min-width: 138px; }.table-scroll { overflow: auto; }table { width: 100%; min-width: 770px; border-collapse: collapse; text-align: left; }th { color: var(--muted); background: var(--paper-2); font: 500 .59rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }th, td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }td { font-size: .78rem; }td strong { display: block; }td small { display: block; color: var(--muted); white-space: nowrap; }.tier { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 20px; font: 500 .59rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }.tier.premium { background: #f5d5cc; color: var(--coral-dark); }.tier.free { background: var(--mint); color: var(--ink-2); }.mini-button { padding: 7px 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: .68rem; font-weight: 700; }.mini-button:hover { border-color: var(--coral); background: var(--coral); color: var(--white); }
.telemetry-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; margin-bottom: 12px; }.compact-heading { align-items: center; }.compact-heading h3 { margin: 0; font: 600 1.5rem var(--display); letter-spacing: -.04em; }.bar-row { display: grid; grid-template-columns: minmax(130px, 190px) 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .76rem; }.bar-row:last-child { border-bottom: 0; }.bar-track { height: 7px; background: var(--mint); }.bar-fill { height: 100%; background: var(--coral); }.bar-value { font: .61rem var(--mono); }.cost-panel { background: var(--paper-2); }.cost-number { margin: 27px 0 11px; color: var(--coral-dark); font: 600 clamp(3.1rem, 5vw, 5.2rem)/.9 var(--display); letter-spacing: -.07em; }.muted { color: var(--muted); font-size: .77rem; }.status-success { color: #438154; font-weight: 700; }.status-error { color: var(--danger); font-weight: 700; }
.announce-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }.form-panel { display: flex; flex-direction: column; gap: 17px; }.form-head { display: flex; align-items: start; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.form-head h3 { margin: 0; font: 600 2rem var(--display); letter-spacing: -.05em; }.form-panel label { display: flex; flex-direction: column; gap: 7px; font-size: .73rem; font-weight: 700; }.label-note { color: var(--muted); font: .6rem var(--mono); font-weight: 400; }.form-panel input, .form-panel textarea, .form-panel select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); resize: vertical; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.form-status { min-height: 18px; margin: 0; color: #438154; font-size: .76rem; }.guidance { background: var(--ink); color: var(--white); }.guidance-mark { margin-bottom: 23px; }.guidance-mark img { width: 58px; height: 58px; border-radius: 16px; }.guidance h3 { margin: 0 0 22px; font: 600 2.7rem/.95 var(--display); letter-spacing: -.055em; }.guidance ul { margin: 0; padding-left: 18px; color: #c1b6ae; font-size: .79rem; }.guidance li { margin: 14px 0; }
.release-card { min-height: 250px; }.release-card h3 { margin: 9px 0 9px; font: 600 clamp(2.4rem, 5vw, 4.4rem)/.9 var(--display); letter-spacing: -.06em; }.release-card p { color: var(--muted); }.asset-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; }.asset-chip { padding: 7px 9px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: .62rem var(--mono); }.release-actions { display: flex; flex-wrap: wrap; gap: 10px; }.release-flow { display: flex; flex-wrap: wrap; gap: 10px 13px; align-items: center; margin-top: 14px; color: var(--muted); font: .62rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }.release-flow i { color: var(--coral); font-style: normal; font-size: 1rem; }.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: 370px; padding: 14px 17px; border: 1px solid #5e534b; background: var(--ink); color: var(--white); box-shadow: var(--shadow); transform: translateY(150%); transition: transform .22s ease; font-size: .79rem; }.toast.show { transform: translateY(0); }
[hidden] { display: none !important; }
@media (max-width: 1100px) { .console-shell { grid-template-columns: 190px minmax(0,1fr); }.metric-grid { grid-template-columns: repeat(3, 1fr); }.metric:nth-child(4), .metric:nth-child(5) { grid-column: span 1; }.workspace-heading { align-items: start; flex-direction: column; }.heading-actions { width: 100%; justify-content: space-between; }.auth-shell { gap: 60px; }.section-heading { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .auth-shell { grid-template-columns: 1fr; width: min(600px, calc(100% - 44px)); padding-top: 55px; }.auth-art { min-height: 280px; box-shadow: 15px 15px 0 var(--coral); }.auth-art img { width: 105px; height: 105px; border-radius: 28px; }.console-shell { display: block; width: calc(100% - 32px); }.side-rail { min-height: 0; padding: 20px 0 0; border-right: 0; }.rail-heading { display: none; }.rail-nav { display: flex; overflow: auto; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.tab { min-width: max-content; grid-template-columns: 21px auto 18px; border-left: 0; border-bottom: 2px solid transparent; }.tab.active { border-bottom-color: var(--coral); box-shadow: none; }.rail-footer { display: none; }.workspace { padding: 38px 0 70px; }.overview-grid, .telemetry-grid, .announce-grid { grid-template-columns: 1fr; }.overview-grid .signal-panel { grid-column: auto; }.pane-intro { grid-template-columns: 1fr; gap: 13px; }.pane-intro > p { margin: 0; }.workspace-ribbon { margin-bottom: 27px; }.connection-pill { display: none; } }
@media (max-width: 560px) { .topbar { padding: 12px 16px; }.topbar-right { gap: 0; }.user-area span { display: none; }.auth-shell { width: calc(100% - 32px); }.auth-copy h1, .workspace-heading h1 { font-size: 3.55rem; }.metric-grid { grid-template-columns: 1fr 1fr; }.metric:last-child { grid-column: 1 / -1; }.metric strong { font-size: 2.25rem; }.workspace { padding-top: 30px; }.heading-actions { align-items: start; flex-direction: column; gap: 10px; }.heading-actions .button { width: 100%; }.workspace-ribbon { display: grid; gap: 9px; }.panel { padding: 18px; }.panel h2 { font-size: 2.6rem; }.table-toolbar { align-items: stretch; flex-direction: column; }.toolbar-tools { align-items: stretch; flex-direction: column; }.table-toolbar input, .table-toolbar select { min-width: 0; }.form-row { grid-template-columns: 1fr; }.release-flow { line-height: 1.8; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button, .toast { transition: none; }.button:hover { transform: none; } }