/* =========================================================
   ORIENLY — FOUNDATION
   Design tokens (dark + light), reset, base typography, auth pages.
   Every colour used by components comes from a token defined here.
   ========================================================= */

/* ---------- Tokens: dark (default) ---------- */
:root, [data-theme="dark"] {
    color-scheme: dark;
    --bg-rgb: 8 11 9;
    --bg: rgb(var(--bg-rgb));
    --bg-soft: #0c100d;
    --surface: #111612;
    --surface-2: #161c17;
    --surface-3: #1e2620;
    --fg-rgb: 255 255 255;                 /* overlays: hover, lines, tints */
    --text: #eef3ef;
    --text-soft: #a8b3ac;
    --text-muted: #6d7871;
    --title-grad: linear-gradient(180deg, #ffffff 25%, #b7c5bd);

    --accent-rgb: 99 245 154;
    --green: #63f59a;
    --green-bright: #82ffad;
    --green-dark: #2ecb6b;
    --on-accent: #06110a;
    --violet-rgb: 180 140 255;   --violet: rgb(var(--violet-rgb));
    --teal-rgb: 79 209 197;      --teal: rgb(var(--teal-rgb));
    --orange-rgb: 255 169 77;    --orange: rgb(var(--orange-rgb));
    --blue-rgb: 120 145 255;     --blue: rgb(var(--blue-rgb));
    --red-rgb: 255 113 113;      --red: rgb(var(--red-rgb));
    --yellow-rgb: 246 211 101;   --yellow: rgb(var(--yellow-rgb));

    --field-bg: rgb(0 0 0 / .28);
    --field-bg-focus: rgb(0 0 0 / .38);
    --ambient-1: rgb(99 245 154 / .085);
    --ambient-2: rgb(120 145 255 / .06);
    --shadow-sm: 0 1px 0 rgb(255 255 255 / .04) inset, 0 6px 20px -10px rgb(0 0 0 / .6);
    --shadow-md: 0 1px 0 rgb(255 255 255 / .05) inset, 0 20px 50px -24px rgb(0 0 0 / .75);
    --shadow-lg: 0 30px 90px -20px rgb(0 0 0 / .7);
    --card-sheen: linear-gradient(180deg, rgb(255 255 255 / .028), transparent 42%);
}


/* ---------- Scale (shared) ---------- */
:root {
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
    --fs-display: clamp(2.6rem, 6.2vw, 4.6rem);
    --fs-h1: clamp(1.9rem, 3.4vw, 2.75rem);
    --fs-h2: 1.375rem;
    --fs-h3: 1.0625rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.84rem;
    --fs-caption: 0.74rem;

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-card: 20px;

    --line: rgb(var(--fg-rgb) / .075);
    --line-strong: rgb(var(--fg-rgb) / .13);
    --hover: rgb(var(--fg-rgb) / .045);
    --press: rgb(var(--fg-rgb) / .08);
    --glass: rgb(var(--bg-rgb) / .72);
    --glass-strong: rgb(var(--bg-rgb) / .94);
    --accent-soft: rgb(var(--accent-rgb) / .1);
    --accent-line: rgb(var(--accent-rgb) / .32);
    --focus: 0 0 0 3px rgb(var(--accent-rgb) / .35);
    --glow: 0 0 0 1px rgb(var(--accent-rgb) / .22), 0 14px 40px -16px rgb(var(--accent-rgb) / .4);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-1: .15s; --dur-2: .25s; --dur-3: .45s;
    --transition: var(--dur-2) var(--ease);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55;
    font-optical-sizing: auto; font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background: var(--bg);
}
/* Ambient light on its own fixed, GPU-composited layer: `background-attachment: fixed` would repaint the
   whole viewport on every scroll frame. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
               background: radial-gradient(1100px 620px at 6% -12%, var(--ambient-1), transparent 62%),
                           radial-gradient(900px 520px at 104% -4%, var(--ambient-2), transparent 58%); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.022em; line-height: 1.2; font-weight: 700; }
p { color: var(--text-soft); }
strong { font-weight: 650; }
kbd { font-family: inherit; }
::selection { background: rgb(var(--accent-rgb) / .28); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.tnum, .ug-score strong, .ug-ring > div, .ug-program-score strong, .ug-right { font-variant-numeric: tabular-nums; }

/* Smooth cross-page transitions (Chromium/Safari); harmless elsewhere */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--ease); }
.ug-nav { view-transition-name: ug-nav; }
.ug-tabbar { view-transition-name: ug-tabbar; }

/* =========================================================
   AUTH (login / register)
   ========================================================= */
.auth-page { position: relative; min-height: 100dvh; display: flex; isolation: isolate; overflow: hidden; }
.auth-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.auth-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; animation: auth-drift 18s ease-in-out infinite alternate;
             will-change: transform; contain: strict; }
.auth-glow-one { width: 560px; height: 560px; left: -140px; top: -160px; background: rgb(var(--accent-rgb) / .16); }
.auth-glow-two { width: 520px; height: 520px; right: -160px; bottom: -200px; background: rgb(var(--blue-rgb) / .14); animation-delay: -6s; }
@keyframes auth-drift { to { transform: translate(60px, 40px) scale(1.08); } }
.auth-grid { position: absolute; inset: 0; opacity: .55;
    background-image: radial-gradient(rgb(var(--fg-rgb) / .09) 1px, transparent 1px); background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000, transparent 75%); }

.auth-layout { width: min(1200px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px; align-items: center; padding: 48px 0; }
.auth-showcase { display: flex; flex-direction: column; gap: 40px; min-height: min(720px, calc(100dvh - 96px)); justify-content: space-between; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; text-decoration: none; }
.auth-brand-mark { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; color: var(--on-accent);
    background: linear-gradient(135deg, var(--green-bright), var(--green-dark)); box-shadow: 0 8px 24px -8px rgb(var(--accent-rgb) / .7); }
.auth-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600;
    color: var(--text-soft); background: var(--hover); border: 1px solid var(--line); }
.auth-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.auth-showcase h1 { font-size: var(--fs-display); line-height: 1; letter-spacing: -.045em; margin: 22px 0 18px; font-weight: 800; }
.auth-showcase h1 span { display: block; background: linear-gradient(100deg, var(--green-bright), var(--green-dark) 55%, rgb(var(--teal-rgb))); -webkit-background-clip: text;
    background-clip: text; color: transparent; }
.auth-showcase-content > p { font-size: 1.08rem; line-height: 1.65; max-width: 520px; }
.auth-features { display: grid; gap: 12px; margin-top: 30px; max-width: 540px; }
.auth-feature { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--card-sheen), var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform var(--dur-3) var(--ease), border-color var(--dur-2); }
.auth-feature:hover { transform: translateX(4px); border-color: var(--accent-line); }
.auth-feature-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--green); font-weight: 800;
    background: var(--accent-soft); border: 1px solid var(--accent-line); }
.auth-feature strong { display: block; color: var(--text); font-size: .95rem; margin-bottom: 2px; }
.auth-feature span { color: var(--text-soft); font-size: .86rem; line-height: 1.5; }
.auth-showcase-footer { display: flex; gap: 10px; align-items: center; font-size: .8rem; color: var(--text-muted); }

.auth-panel-wrapper { display: flex; justify-content: center; }
.auth-panel { width: min(440px, 100%); padding: 36px; border-radius: var(--radius-xl); background: var(--card-sheen), var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: auth-in .7s var(--ease) both; }
@keyframes auth-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.auth-mobile-brand { display: none; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 26px; font-size: 1.1rem; }
.auth-panel-label { display: block; font-size: .72rem; letter-spacing: .14em; font-weight: 700; color: var(--green); margin-bottom: 10px; }
.auth-panel-header h2 { font-size: 1.85rem; letter-spacing: -.035em; margin: 0 0 6px; }
.auth-panel-header p { margin: 0 0 26px; font-size: .95rem; }
.auth-messages { display: grid; gap: 8px; margin-bottom: 18px; }
.auth-message { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 12px; font-size: .88rem; color: var(--text);
    background: rgb(var(--red-rgb) / .08); border: 1px solid rgb(var(--red-rgb) / .28); }
.auth-message span { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-weight: 800; font-size: .8rem;
    color: var(--red); background: rgb(var(--red-rgb) / .14); }
.auth-form { display: grid; gap: 18px; }
.auth-field { display: grid; gap: 8px; }
.auth-field label { font-size: .84rem; font-weight: 600; color: var(--text-soft); }
.auth-input-wrapper { position: relative; display: flex; align-items: center; }
.auth-input-icon { position: absolute; left: 15px; color: var(--text-muted); font-size: .95rem; pointer-events: none; transition: color var(--dur-2); }
.auth-input-wrapper input { width: 100%; height: 50px; padding: 0 86px 0 42px; border-radius: 14px; border: 1px solid var(--line-strong);
    background: var(--field-bg); color: var(--text); font-size: 16px; transition: border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2); }
.auth-input-wrapper input::placeholder { color: var(--text-muted); }
.auth-input-wrapper input:hover { border-color: rgb(var(--fg-rgb) / .2); }
.auth-input-wrapper input:focus { outline: none; border-color: rgb(var(--accent-rgb) / .6); box-shadow: var(--focus); background: var(--field-bg-focus); }
.auth-input-wrapper:focus-within .auth-input-icon { color: var(--green); }
.password-toggle { position: absolute; right: 8px; height: 34px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--hover);
    color: var(--text-soft); font-size: .78rem; font-weight: 600; transition: background var(--dur-2), color var(--dur-2); }
.password-toggle:hover { background: var(--press); color: var(--text); }
.auth-password-hint { font-size: .76rem; color: var(--text-muted); }
.auth-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin-top: 4px;
    border: 0; border-radius: 14px; font-weight: 700; font-size: .98rem; color: var(--on-accent);
    background: linear-gradient(135deg, var(--green-bright), var(--green) 55%, var(--green-dark));
    box-shadow: 0 14px 34px -16px rgb(var(--accent-rgb) / .9), 0 1px 0 rgb(255 255 255 / .25) inset;
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2), filter var(--dur-2); }
.auth-submit:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 40px -16px rgb(var(--accent-rgb) / 1), 0 1px 0 rgb(255 255 255 / .25) inset; }
.auth-submit:active { transform: scale(.985); }
.auth-submit-arrow { transition: transform var(--dur-3) var(--ease); }
.auth-submit:hover .auth-submit-arrow { transform: translateX(4px); }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 16px; color: var(--text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-secondary-button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 14px; text-decoration: none;
    font-weight: 600; font-size: .92rem; color: var(--text); background: var(--hover); border: 1px solid var(--line-strong);
    transition: background var(--dur-2), border-color var(--dur-2), transform var(--dur-2) var(--ease); }
.auth-secondary-button:hover { background: var(--press); border-color: var(--accent-line); transform: translateY(-1px); }
.auth-legal { margin: 20px 0 0; font-size: .74rem; line-height: 1.5; color: var(--text-muted); text-align: center; }

@media (max-width: 1024px) {
    .auth-layout { grid-template-columns: 1fr; padding: 28px 0; min-height: 100dvh; }
    .auth-showcase { display: none; }
    .auth-mobile-brand { display: flex; }
}
@media (max-width: 480px) {
    .auth-layout { width: calc(100% - 24px); padding: 12px 0; }
    .auth-panel { padding: 26px 20px; border-radius: 24px; }
}