/* AltoSky back-office styles. Tokens match altosky.com (src/styles/global.css). Copyright (c) 2026 AltoSky, Inc. */
@font-face { font-family: 'Geist'; src: url('/assets/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/assets/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { --night:#070A14; --ink:#0A0F1F; --cloud:#F4F6FA; --mist:#E8EEFF; --white:#fff; --blue:#2A63F5; --blue-d:#5B8CFF; --steel:#5B6478; --steel-d:#A3ACC2; --signal:#2BD47D; --warn:#F5A524; --bad:#E5484D;
  --line:rgba(10,15,31,.1); --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace; --r:14px; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--cloud); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01'; }
a { color: var(--blue); }
.top { background: var(--night); color: var(--mist); }
.top .in { max-width: 1240px; margin: 0 auto; padding: 14px clamp(16px,4vw,40px); display: flex; align-items: center; gap: 20px; }
.top img { height: 45px; width: auto; display: block; margin: -6px 0 -6px -18px; }
.top .who { color: var(--steel-d); font-size: 14px; }
.top button { white-space: nowrap; }
.top .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--steel-d); }
.top .sp { flex: 1; }
.top button { background: transparent; color: var(--mist); border: 1px solid rgba(232,238,255,.2); }
main { max-width: 1240px; margin: 0 auto; padding: clamp(20px,4vw,40px) clamp(16px,4vw,40px) 64px; }
h1 { font-size: clamp(26px,3.2vw,36px); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; font-weight: 600; }
h2 { font-size: 19px; margin: 0 0 12px; font-weight: 600; letter-spacing: -.01em; }
.lede { color: var(--steel); margin: 0 0 28px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; min-width: 0; }
.card.wide { grid-column: 1 / -1; }
.k { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--steel); }
.v { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
button, .btn { font: inherit; font-weight: 500; border: 0; border-radius: 999px; padding: 0 20px; min-height: 44px; background: var(--blue); color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.danger { background: var(--bad); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue-d); outline-offset: 2px; }
label { display: block; font-size: 14px; font-weight: 500; margin: 14px 0 6px; }
input, textarea { font: inherit; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(10,15,31,.18); border-radius: 10px; background: #fff; color: var(--ink); }
textarea { min-height: 120px; resize: vertical; }
.auth { max-width: 420px; margin: clamp(32px,8vh,96px) auto; }
.auth .card { padding: 32px; }
.err { color: var(--bad); font-size: 14px; min-height: 20px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--mist); color: var(--ink); white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.pill.ok::before { background: var(--signal); } .pill.warn::before { background: var(--warn); } .pill.bad::before { background: var(--bad); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--steel); padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.scroll { overflow-x: auto; }
.meter { height: 10px; background: var(--mist); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.meter > i { display: block; height: 100%; background: var(--blue); width: 0; }
.meter.warn > i { background: var(--warn); } .meter.bad > i { background: var(--bad); }
.timeline { list-style: none; margin: 10px 0 0; padding: 0; border-left: 2px solid var(--mist); }
.timeline li { padding: 4px 0 8px 14px; font-size: 14px; color: var(--steel); }
.timeline b { color: var(--ink); font-weight: 500; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.muted { color: var(--steel); font-size: 14px; }
.hidden { display: none !important; }
.notice { background: var(--mist); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
@media (max-width: 600px) { .top .tag, .top .who, .hide-sm { display: none; } .pill { white-space: normal; } td, th { padding: 10px 6px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card .row + .row { margin-top: 14px; }
details.inc { border-top: 1px solid var(--line); padding: 12px 0; }
details.inc summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }