/* kobalt account — same tokens and spacing scale as kobaltdev.ltd */
@font-face { font-family: "Inter"; src: url(/fonts/Inter-400.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter-600.ttf) format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url(/fonts/Unbounded-700.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/JetBrainsMono-400.ttf) format("truetype"); font-weight: 400 500; font-display: swap; }

:root {
  --kobalt: #2447F5; --kobalt-2: #1A37D2; --kobalt-soft: #8D9FFF;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --bg: #F5F6F9; --bg-2: #FFFFFF; --fg: #0A0B10; --muted: #4F5566; --faint: #7A8091;
  --line: #DCDFE7; --line-2: #C7CBD6; --accent: #2447F5; --pos: #0E9F6E; --neg: #D92D4B; --warn: #B7791F;
  --field: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090D; --bg-2: #0F1117; --fg: #F4F5F8; --muted: #A2A8B7; --faint: #6F7586;
    --line: #1E212B; --line-2: #2C303C; --accent: #8D9FFF; --pos: #34D399; --neg: #F2405D; --warn: #FFB020;
    --field: #0B0C11;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.55 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; border-radius: 4px; }
.kb { font-family: "Unbounded", system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: .94em; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
[hidden] { display: none !important; }
.lockup { height: 22px; width: auto; display: block; }
.lk-dark { display: none; }
@media (prefers-color-scheme: dark) { .lk-light { display: none; } .lk-dark { display: block; } }

/* ---------- auth pages: brand panel + form */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.panel { background: var(--kobalt); color: #fff; padding: var(--s7); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; isolation: isolate; }
.panel .lockup { height: 24px; }
.panel h1 { font: 700 clamp(30px, 3.2vw, 44px)/1.08 "Unbounded", system-ui, sans-serif; letter-spacing: -.03em; max-width: 13ch; }
.panel p { color: rgba(255,255,255,.8); margin-top: var(--s4); max-width: 36ch; }
.panel ul { list-style: none; margin-top: var(--s6); border-top: 1px solid rgba(255,255,255,.22); max-width: 380px; }
.panel li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid rgba(255,255,255,.22); font-size: 15px; }
.panel li span:last-child { color: rgba(255,255,255,.7); font-size: 13px; }
.panel .mark { position: absolute; right: -60px; bottom: -70px; height: 320px; width: auto; opacity: .12; z-index: -1; }
.panel .foot { color: rgba(255,255,255,.65); font-size: 13px; }
.main { display: flex; align-items: center; justify-content: center; padding: var(--s7) var(--s5); }
.card { width: 100%; max-width: 400px; }
.card h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.card .lead { color: var(--muted); margin-top: var(--s2); }
.card .lead b { color: var(--fg); font-weight: 600; }
form { display: grid; gap: var(--s4); margin-top: var(--s6); }
label { display: grid; gap: var(--s2); font-size: 14px; font-weight: 500; }
label .hint { font-weight: 400; color: var(--faint); font-size: 13px; }
.row-label { display: flex; justify-content: space-between; align-items: baseline; }
.row-label a { font-size: 13px; font-weight: 400; }
input { width: 100%; height: 46px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: 10px; background: var(--field); color: var(--fg); font: 400 16px "Inter", system-ui, sans-serif; transition: border-color .15s, box-shadow .15s; }
input:hover { border-color: var(--faint); }
input:focus { outline: none; border-color: var(--kobalt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kobalt) 22%, transparent); }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 46px; padding: 0 var(--s5); border: 1px solid transparent; border-radius: 10px; font: 500 15px "Inter", system-ui, sans-serif; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .15s, border-color .15s; }
.btn.primary { background: var(--kobalt); color: #fff; }
.btn.primary:hover { background: var(--kobalt-2); }
.btn.ghost { border-color: var(--line-2); background: transparent; color: var(--fg); }
.btn.ghost:hover { border-color: var(--faint); }
.btn.danger { background: transparent; color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--neg) 10%, transparent); }
.btn.sm { height: 36px; padding: 0 var(--s4); font-size: 14px; border-radius: 8px; }
.btn[disabled] { opacity: .6; cursor: progress; }
form .btn { width: 100%; margin-top: var(--s2); }
.alt { margin-top: var(--s5); color: var(--muted); font-size: 15px; text-align: center; }
.msg { padding: var(--s3) var(--s4); border-radius: 10px; font-size: 14px; border: 1px solid; }
.msg.err { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, transparent); background: color-mix(in srgb, var(--neg) 8%, transparent); }
.msg.ok { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 40%, transparent); background: color-mix(in srgb, var(--pos) 8%, transparent); }
.msg.info { color: var(--muted); border-color: var(--line-2); background: var(--bg-2); }
.notice { margin-top: var(--s6); display: grid; gap: var(--s4); }
.icon-circle { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--kobalt) 12%, transparent); color: var(--accent); margin-bottom: var(--s5); }
.icon-circle svg { width: 24px; height: 24px; }
.mobile-brand { display: none; }

/* ---------- account home */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .in { max-width: 760px; margin: 0 auto; padding: 0 var(--s5); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s3); }
.crumb { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-weight: 500; }
.crumb::before { content: ""; width: 1px; height: 18px; background: var(--line-2); }
.page { max-width: 760px; margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
.hello { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s7); }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--kobalt); color: #fff; display: grid; place-items: center; font: 700 24px "Unbounded", system-ui, sans-serif; flex: none; }
.hello h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.hello p { color: var(--muted); }
.box { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); margin-bottom: var(--s5); overflow: hidden; }
.box > header { padding: var(--s5) var(--s5) 0; }
.box h2 { font-size: 17px; font-weight: 600; }
.box > header p { color: var(--muted); font-size: 14px; margin-top: var(--s1); }
.box .body { padding: var(--s5); }
.box form { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.actions { display: flex; gap: var(--s3); justify-content: flex-end; flex-wrap: wrap; }
.actions .btn { width: auto; margin-top: 0; }
.actions.left { justify-content: flex-start; }
.spaced { margin-top: var(--s4); }
.body.flush { padding-top: 0; }
.list { list-style: none; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.list .t { font-weight: 500; }
.list .d { color: var(--faint); font-size: 13px; }
.badge { width: fit-content; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px var(--s2); border-radius: 999px; }
.badge.ok { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); }
.badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.badge.dim { color: var(--muted); background: color-mix(in srgb, var(--faint) 14%, transparent); }
.app-ic { width: 40px; height: 40px; border-radius: 10px; background: #0B0C11; display: grid; place-items: center; flex: none; }
.app-ic svg { width: 20px; height: 20px; }
.app { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.box.danger { border-color: color-mix(in srgb, var(--neg) 35%, var(--line)); }
.toast { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); z-index: 50; background: var(--fg); color: var(--bg); padding: var(--s3) var(--s5); border-radius: 10px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.loading { min-height: 60vh; display: grid; place-items: center; color: var(--faint); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .panel { display: none; }
  .main { align-items: flex-start; padding-top: var(--s5); }
  .mobile-brand { display: block; margin-bottom: var(--s7); }
}
@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; }
  .hello { gap: var(--s4); }
  .avatar { width: 52px; height: 52px; font-size: 20px; }
  .list li { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 auto; }
}