/* Skybound shared styles: fonts, tokens, buttons, brand lockup, form controls, auth-page layout. */

/* TT Commons Pro (Latin subset, WOFF) */
@font-face{font-family:"TT Commons Pro";src:url(/fonts/TTCommonsPro-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url(/fonts/TTCommonsPro-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url(/fonts/TTCommonsPro-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url(/fonts/TTCommonsPro-DemiBold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url(/fonts/TTCommonsPro-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"TT Commons Pro";src:url(/fonts/TTCommonsPro-ExtraBold.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}

:root{
  color-scheme:dark;
  --font:"TT Commons Pro","TT Commons","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --bg:#1648db;--glow:#5b8dff;--mut:#d3e0ff;--line:rgba(255,255,255,.28);--card:rgba(255,255,255,.12);--card-2:rgba(255,255,255,.07);
  --ember:#ff6a3d;--amber:#ffa05a;--paper:#f5f8ff;--ink:#0a2470;--sky:#8fb2ff;--night:#06143f;
  --ok:#8df0b4;--err:#ffd0c4;--amber-lt:#ffc89f;--danger:#d92d20;
  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#081a55;--glow:#2058ff;--mut:#aebfe8;--line:rgba(255,255,255,.18);--card:rgba(255,255,255,.07);--card-2:rgba(255,255,255,.04)}}
:root[data-theme=dark]{--bg:#081a55;--glow:#2058ff;--mut:#aebfe8;--line:rgba(255,255,255,.18);--card:rgba(255,255,255,.07);--card-2:rgba(255,255,255,.04)}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--safe-t) + 5rem)}
body{margin:0;min-height:100svh;color:#fff;background:var(--bg);font:400 1rem/1.55 var(--font);letter-spacing:-.005em;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1;letter-spacing:-.035em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
::selection{background:#fff;color:var(--ink)}
.num{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip:auto;left:1rem;top:calc(var(--safe-t) + .5rem);z-index:99;background:#fff;color:var(--ink);padding:.6rem 1rem;border-radius:10px;font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.35rem;border-radius:999px;border:1px solid transparent;background:#fff;color:var(--ink);font:600 .95rem/1 var(--font);letter-spacing:-.005em;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(0,10,70,.65)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.btn.g{background:transparent;color:#fff;border-color:var(--line)}
.btn.g:hover{background:var(--card);border-color:rgba(255,255,255,.5)}
.btn.sm{min-height:40px;padding:.4rem 1rem;font-size:.88rem}
.btn.lg{min-height:56px;padding:.9rem 1.9rem;font-size:1.08rem}
.btn.danger{background:var(--danger);color:#fff;border-color:rgba(255,255,255,.35)}
.btn.danger:hover{background:#e5392b}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* Brand lockup: SB tile + the Skybound wordmark */
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;min-height:44px}
.brand .tile{display:block;width:32px;height:32px;border-radius:8px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.brand .mark{display:block;height:15px;width:auto;aspect-ratio:1967/271}
.brand.big .tile{width:40px;height:40px;border-radius:10px}
.brand.big .mark{height:19px}

/* Form controls */
input,select,textarea{font:inherit;color:#fff;letter-spacing:inherit}
.field{display:grid;gap:.45rem}
.field>label,.field>.lbl{font-weight:600;font-size:.95rem}
.field .hint{color:var(--mut);font-size:.85rem}
.in{width:100%;min-height:46px;padding:.55rem 1rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.1);transition:border-color .2s,background-color .2s,box-shadow .2s}
.in::placeholder{color:var(--mut);opacity:.85}
.in:hover{border-color:rgba(255,255,255,.45)}
.in:focus-visible{outline:none;border-color:#fff;background:rgba(255,255,255,.16);box-shadow:0 0 0 3px rgba(255,160,90,.55)}
select.in{appearance:none;-webkit-appearance:none;padding-right:2.4rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
select.in option{color:#0a2470;background:#f5f8ff}
.in[aria-invalid=true]{border-color:var(--err)}
.err{color:var(--err);font-size:.88rem;font-weight:500}

/* Auth-style pages (login, 404, worker error pages) */
.auth{min-height:100svh;display:grid;place-items:center;padding:calc(1.5rem + var(--safe-t)) 1.5rem calc(1.5rem + var(--safe-b));background:radial-gradient(60rem 36rem at 90% -10%,var(--glow),transparent 62%),radial-gradient(40rem 28rem at -10% 110%,rgba(255,106,61,.16),transparent 60%),var(--bg)}
.auth main{width:min(30rem,100%);animation:auth-in .6s var(--ease) both}
.auth .brand{margin-bottom:2.2rem}
.auth h1{font-size:clamp(2.4rem,9vw,3.6rem);margin-bottom:1rem}
.auth p{color:var(--mut);margin-bottom:1.8rem;font-size:1.05rem;max-width:26em}
@keyframes auth-in{from{opacity:0;transform:translateY(16px)}}

@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Comfortable tap targets on touch screens */
@media(pointer:coarse){.btn.sm{min-height:44px}}