/* ========================================================================== Snappy Host Status — design system Light is the default. Dark is opt-in via [data-theme="dark"] on , set by the inline script in the layout head before first paint. The dark palette is deliberately neutral graphite, not navy: tinted dark blues turn muddy next to the brand blue and read as cheap. ========================================================================== */ /* --- Tokens --------------------------------------------------------------- */ :root { color-scheme: light; --bg: #ffffff; --bg-sunken: #f7f7f8; --surface: #ffffff; --surface-2: #f7f7f8; --surface-hover: #f2f2f4; --border: #e5e5e8; --border-strong: #d3d3d8; --text: #101012; --text-muted: #67676f; --text-subtle: #8c8c95; --accent: #0e73d8; --accent-hover: #0a5cb0; --accent-ink: #ffffff; --accent-soft: #eaf2fd; --tone-ok-fg: #0a7040; --tone-ok-solid: #16a34a; --tone-ok-bg: #eaf7ef; --tone-ok-border: #bce3cc; --tone-warn-fg: #855400; --tone-warn-solid: #d18b00; --tone-warn-bg: #fdf4e5; --tone-warn-border: #eedaab; --tone-orange-fg: #a13c07; --tone-orange-solid: #e2650f; --tone-orange-bg: #fdefe6; --tone-orange-border: #f4cdb2; --tone-bad-fg: #ad241d; --tone-bad-solid: #d93a2e; --tone-bad-bg: #fdedeb; --tone-bad-border: #f5c5c0; --tone-info-fg: #0a5cb0; --tone-info-solid: #0e73d8; --tone-info-bg: #eaf2fd; --tone-info-border: #c4ddf8; --tone-muted-fg: #5f5f68; --tone-muted-solid: #9a9aa3; --tone-muted-bg: #f3f3f5; --tone-muted-border: #e0e0e4; --tone-none-solid: #e6e6ea; --shadow-sm: 0 1px 2px rgba(16, 16, 18, .05); --shadow-md: 0 4px 16px rgba(16, 16, 18, .08), 0 1px 2px rgba(16, 16, 18, .04); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --measure: 940px; } [data-theme="dark"] { color-scheme: dark; --bg: #0c0c0d; --bg-sunken: #0c0c0d; --surface: #141416; --surface-2: #1a1a1d; --surface-hover: #202024; --border: #26262a; --border-strong: #35353b; --text: #ededee; --text-muted: #9a9aa2; --text-subtle: #74747c; --accent: #57a0f2; --accent-hover: #7db6f6; --accent-ink: #06121f; --accent-soft: #16222f; --tone-ok-fg: #57cf85; --tone-ok-solid: #35b866; --tone-ok-bg: #12241a; --tone-ok-border: #204630; --tone-warn-fg: #e6b13d; --tone-warn-solid: #cf982c; --tone-warn-bg: #241d0c; --tone-warn-border: #453619; --tone-orange-fg: #f0904f; --tone-orange-solid: #db7333; --tone-orange-bg: #26170c; --tone-orange-border: #472c17; --tone-bad-fg: #f47268; --tone-bad-solid: #dd4b3e; --tone-bad-bg: #271311; --tone-bad-border: #4a221e; --tone-info-fg: #6cadf5; --tone-info-solid: #4a94e6; --tone-info-bg: #101d2b; --tone-info-border: #1f344d; --tone-muted-fg: #9a9aa2; --tone-muted-solid: #55555d; --tone-muted-bg: #1c1c1f; --tone-muted-border: #2e2e33; --tone-none-solid: #232327; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 20px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3); } /* Tone helper: any element carrying data-tone exposes the matching set. */ [data-tone="ok"] { --tone-fg: var(--tone-ok-fg); --tone-solid: var(--tone-ok-solid); --tone-bg: var(--tone-ok-bg); --tone-border: var(--tone-ok-border); } [data-tone="warn"] { --tone-fg: var(--tone-warn-fg); --tone-solid: var(--tone-warn-solid); --tone-bg: var(--tone-warn-bg); --tone-border: var(--tone-warn-border); } [data-tone="orange"] { --tone-fg: var(--tone-orange-fg); --tone-solid: var(--tone-orange-solid); --tone-bg: var(--tone-orange-bg); --tone-border: var(--tone-orange-border); } [data-tone="bad"] { --tone-fg: var(--tone-bad-fg); --tone-solid: var(--tone-bad-solid); --tone-bg: var(--tone-bad-bg); --tone-border: var(--tone-bad-border); } [data-tone="info"] { --tone-fg: var(--tone-info-fg); --tone-solid: var(--tone-info-solid); --tone-bg: var(--tone-info-bg); --tone-border: var(--tone-info-border); } [data-tone="muted"] { --tone-fg: var(--tone-muted-fg); --tone-solid: var(--tone-muted-solid); --tone-bg: var(--tone-muted-bg); --tone-border: var(--tone-muted-border); } [data-tone="none"] { --tone-fg: var(--text-subtle); --tone-solid: var(--tone-none-solid); --tone-bg: var(--surface-2); --tone-border: var(--border); } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } hr { border: 0; border-top: 1px solid var(--border); margin: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Layout --------------------------------------------------------------- */ .shell { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 20px; } .page { padding-bottom: 72px; } .stack > * + * { margin-top: 16px; } .stack-lg > * + * { margin-top: 28px; } .stack-sm > * + * { margin-top: 8px; } /* --- Masthead ------------------------------------------------------------- */ .masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; margin-bottom: 28px; border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); } .brand:hover { text-decoration: none; } .brand__logo { height: 26px; width: auto; } [data-theme="dark"] .brand__logo--light { display: none; } :root:not([data-theme="dark"]) .brand__logo--dark { display: none; } .brand__rule { width: 1px; height: 20px; background: var(--border-strong); } .brand__label { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-muted); } .masthead__nav { display: flex; align-items: center; gap: 4px; } .navlink { padding: 7px 11px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--text-muted); } .navlink:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .navlink[aria-current="page"] { color: var(--text); background: var(--surface-2); } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } .icon-button:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); } .icon-button svg { width: 16px; height: 16px; } .theme-toggle .theme-toggle__moon { display: none; } [data-theme="dark"] .theme-toggle .theme-toggle__moon { display: block; } [data-theme="dark"] .theme-toggle .theme-toggle__sun { display: none; } /* --- Cards and sections --------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--border); } .card__title { font-size: 14px; font-weight: 600; letter-spacing: -.005em; } .card__aside { font-size: 12.5px; color: var(--text-subtle); } .card__body { padding: 18px; } .card__foot { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); } .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .section-heading h2 { font-size: 14px; font-weight: 600; color: var(--text); } .section-heading a { font-size: 13px; font-weight: 500; } /* --- Status banner -------------------------------------------------------- */ .banner { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border: 1px solid var(--tone-border); border-radius: var(--radius-lg); background: var(--tone-bg); } .banner__indicator { position: relative; flex: none; width: 11px; height: 11px; margin-top: 9px; border-radius: 50%; background: var(--tone-solid); } .banner__indicator::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--tone-solid); opacity: .3; } .banner--live .banner__indicator::after { animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { transform: scale(.85); opacity: .5; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } } .banner__headline { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.021em; color: var(--tone-fg); } .banner__meta { margin-top: 5px; font-size: 13.5px; color: var(--text-muted); } @media (max-width: 600px) { .banner { padding: 18px; } .banner__headline { font-size: 21px; } } /* --- Status pill / tags --------------------------------------------------- */ .status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--tone-fg); white-space: nowrap; } .status__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-solid); } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--tone-border); border-radius: 999px; background: var(--tone-bg); color: var(--tone-fg); font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; } .tag--plain { border-color: var(--border); background: var(--surface-2); color: var(--text-muted); } /* --- Components list ------------------------------------------------------ */ .component-group + .component-group { border-top: 1px solid var(--border); } .component-group__title { padding: 13px 18px 3px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-subtle); } .component { padding: 14px 18px; } .component + .component { border-top: 1px solid var(--border); } .component__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .component__name { font-size: 14.5px; font-weight: 500; } .component__desc { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--text-subtle); } /* --- Uptime strip --------------------------------------------------------- */ .uptime { margin-top: 11px; } .uptime__strip { display: flex; gap: 2px; height: 28px; } .uptime__bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--tone-solid); } .uptime__bar:hover { filter: brightness(1.12); } .uptime__legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 12px; color: var(--text-subtle); } .uptime__legend-rule { flex: 1; height: 1px; background: var(--border); } .uptime__pct { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Older bars get squeezed out on narrow screens rather than shrinking to invisible slivers. The caption switches to match. */ .uptime__range--90 { display: inline; } .uptime__range--60, .uptime__range--30 { display: none; } @media (max-width: 880px) { .uptime__bar:nth-last-child(n+61) { display: none; } .uptime__range--90 { display: none; } .uptime__range--60 { display: inline; } } @media (max-width: 620px) { .uptime__bar:nth-last-child(n+31) { display: none; } .uptime__range--60 { display: none; } .uptime__range--30 { display: inline; } .uptime__strip { height: 24px; } } /* --- Incidents ------------------------------------------------------------ */ .incident { padding: 18px; } .incident + .incident { border-top: 1px solid var(--border); } .incident__head { margin-bottom: 14px; } .incident__title { margin-top: 7px; font-size: 17px; font-weight: 600; letter-spacing: -.014em; line-height: 1.35; } .incident__title a { color: var(--text); } .incident__title a:hover { color: var(--accent); } .incident__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .incident__affected { margin-top: 7px; font-size: 13px; color: var(--text-muted); } .incident__meta { margin-top: 6px; font-size: 12.5px; color: var(--text-subtle); } /* --- Timeline ------------------------------------------------------------- */ .timeline { position: relative; } .timeline__item { position: relative; padding: 0 0 18px 22px; } .timeline__item:last-child { padding-bottom: 0; } /* The connecting rail stops at the last marker instead of dangling. */ .timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 1px; background: var(--border); } .timeline__marker { position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--tone-solid); } .timeline__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 13.5px; } .timeline__status { font-weight: 600; color: var(--tone-fg); } .timeline__time { font-size: 12.5px; color: var(--text-subtle); font-variant-numeric: tabular-nums; } .timeline__body { margin-top: 4px; font-size: 14px; color: var(--text-muted); } /* --- Prose ---------------------------------------------------------------- */ .prose { font-size: 14px; line-height: 1.65; color: var(--text-muted); } .prose p + p { margin-top: 10px; } .prose strong { color: var(--text); font-weight: 600; } .prose a { text-decoration: underline; text-underline-offset: 2px; } /* --- Empty state ---------------------------------------------------------- */ .empty { padding: 28px 18px; text-align: center; font-size: 14px; color: var(--text-subtle); } .empty__title { font-size: 14.5px; font-weight: 500; color: var(--text-muted); } .empty__hint { margin-top: 3px; font-size: 13px; } /* --- Maintenance ---------------------------------------------------------- */ .maintenance { padding: 16px 18px; } .maintenance + .maintenance { border-top: 1px solid var(--border); } .maintenance__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .maintenance__title a { color: var(--text); } .maintenance__title a:hover { color: var(--accent); } .maintenance__window { margin-top: 4px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* --- History -------------------------------------------------------------- */ .month + .month { margin-top: 28px; } .month__title { padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 600; letter-spacing: -.01em; } /* --- Footer --------------------------------------------------------------- */ .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-subtle); } .footer__links { display: flex; flex-wrap: wrap; gap: 16px; } .footer a { color: var(--text-muted); } .footer a:hover { color: var(--text); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, opacity .12s ease; } .btn:hover { background: var(--surface-hover); text-decoration: none; color: var(--text); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn svg { width: 15px; height: 15px; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); } .btn--danger { background: var(--tone-bad-solid); border-color: var(--tone-bad-solid); color: #fff; } .btn--danger:hover { filter: brightness(.94); color: #fff; } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--surface-hover); color: var(--text); } .btn--sm { padding: 5px 10px; font-size: 12.5px; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; } /* --- Forms ---------------------------------------------------------------- */ .field + .field { margin-top: 16px; } .field__label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--text); } .field__hint { margin-top: 5px; font-size: 12.5px; color: var(--text-subtle); } .field__error { margin-top: 5px; font-size: 12.5px; color: var(--tone-bad-fg); } .input, .select, .textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; transition: border-color .12s ease, box-shadow .12s ease; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--tone-bad-solid); } .textarea { min-height: 130px; resize: vertical; line-height: 1.6; } .select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2367676f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; } [data-theme="dark"] .select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a9aa2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); } .checkbox { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; cursor: pointer; } .checkbox input { flex: none; width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--accent); cursor: pointer; } .checkbox__hint { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-subtle); } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field-grid .field + .field { margin-top: 0; } @media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } } .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); max-height: 260px; overflow-y: auto; } /* --- Alerts --------------------------------------------------------------- */ .alert { display: flex; gap: 10px; padding: 11px 14px; border: 1px solid var(--tone-border); border-radius: var(--radius-sm); background: var(--tone-bg); color: var(--tone-fg); font-size: 13.5px; } .alert svg { flex: none; width: 16px; height: 16px; margin-top: 2px; } .alert__body { min-width: 0; } .alert strong { font-weight: 600; } /* --- Tables --------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap; } .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-2); } .table__num { font-variant-numeric: tabular-nums; } .table__actions { text-align: right; white-space: nowrap; } .table__primary { font-weight: 500; color: var(--text); } /* --- Pagination ----------------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 20px; font-size: 13px; } .pagination a, .pagination span { display: inline-flex; align-items: center; min-width: 32px; height: 32px; padding: 0 9px; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); } .pagination a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .pagination [aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: 600; } .pagination .disabled { opacity: .4; } /* ========================================================================== Admin ========================================================================== */ .admin-bar { border-bottom: 1px solid var(--border); background: var(--surface); } .admin-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 56px; } .admin-bar__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; font-weight: 600; } .admin-bar__brand:hover { text-decoration: none; } .admin-bar__brand img { height: 20px; width: auto; } .admin-nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; } .admin-nav::-webkit-scrollbar { display: none; } .admin-nav__link { padding: 6px 10px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .admin-nav__link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .admin-nav__link.is-active { background: var(--surface-2); color: var(--text); } .admin-user { display: flex; align-items: center; gap: 10px; } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; } .admin-user__meta { line-height: 1.25; } .admin-user__name { font-size: 13px; font-weight: 500; } .admin-user__role { font-size: 11.5px; color: var(--text-subtle); } @media (max-width: 760px) { .admin-bar__inner { height: auto; flex-wrap: wrap; padding: 10px 0; } .admin-nav { order: 3; width: 100%; padding-top: 4px; } .admin-user__meta { display: none; } } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 28px 0 20px; } .page-head__title { font-size: 22px; font-weight: 600; letter-spacing: -.019em; } .page-head__sub { margin-top: 3px; font-size: 13.5px; color: var(--text-muted); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .stat { padding: 15px 17px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .stat__label { font-size: 12px; font-weight: 500; color: var(--text-subtle); } .stat__value { margin-top: 5px; font-size: 25px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat__note { margin-top: 3px; font-size: 12.5px; color: var(--text-subtle); } .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: var(--bg-sunken); } .auth-card { width: 100%; max-width: 380px; } .auth-card__brand { display: flex; justify-content: center; margin-bottom: 24px; } .auth-card__brand img { height: 30px; width: auto; } .auth-card__panel { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); } .auth-card__title { font-size: 18px; font-weight: 600; letter-spacing: -.015em; } .auth-card__sub { margin-top: 3px; margin-bottom: 20px; font-size: 13.5px; color: var(--text-muted); } .auth-card__foot { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--text-subtle); } .activity { display: flex; gap: 12px; padding: 13px 18px; } .activity + .activity { border-top: 1px solid var(--border); } .activity__marker { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--tone-solid); } .activity__body { min-width: 0; flex: 1; } .activity__text { font-size: 13.5px; } .activity__meta { margin-top: 2px; font-size: 12px; color: var(--text-subtle); display: flex; flex-wrap: wrap; gap: 4px 10px; } .code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--text-muted); word-break: break-all; } .code-block { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; } .divider-label { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 12px; color: var(--text-subtle); } .divider-label::before, .divider-label::after { content: ""; flex: 1; height: 1px; background: var(--border); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .nowrap { white-space: nowrap; } .tnum { font-variant-numeric: tabular-nums; } .text-sm { font-size: 13px; } .text-right { text-align: right; }