/* The Grad Hub: Farrah Morgan's navy and gold, taken into a dark, glassy, premium app. */
:root {
  --bg: #070d1b; --bg2: #0b1428; --bg3: #111c35;
  --panel: rgba(255,255,255,0.045); --panel2: rgba(255,255,255,0.075); --line: rgba(255,255,255,0.09); --line2: rgba(255,255,255,0.16);
  --text: #eef2fb; --mute: #a3aec6; --dim: #6f7c98;
  --gold: #e8b84b; --gold2: #f5d07a; --gold-ink: #1a1405;
  --coral: #ff8a65; --teal: #3fd8c2; --violet: #9b8cff; --red: #ff6b7a; --green: #5ee0a0;
  --navy: #1a2744;
  --r: 18px; --r-sm: 12px;
  --shadow: 0 20px 60px rgba(0,0,0,0.45);
  --serif: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.55; min-height: 100vh; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 600px at 85% -10%, rgba(232,184,75,0.16), transparent 60%),
              radial-gradient(700px 500px at -10% 30%, rgba(155,140,255,0.12), transparent 60%),
              radial-gradient(800px 600px at 60% 110%, rgba(63,216,194,0.08), transparent 60%), var(--bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); }
h1, h2, h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.gold { color: var(--gold); } .mute { color: var(--mute); } .dim { color: var(--dim); }
em.g { font-style: italic; color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; transition: transform .15s, box-shadow .2s, background .2s; white-space: nowrap; }
.btn-gold { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--gold-ink); box-shadow: 0 8px 28px rgba(232,184,75,0.35); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(232,184,75,0.45); }
.btn-ghost { background: var(--panel); border: 1px solid var(--line2); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold2); }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; border-radius: 10px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* glass card */
.card { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; }
.card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); color: var(--mute); white-space: nowrap; }
.pill.gold { background: rgba(232,184,75,0.14); border-color: rgba(232,184,75,0.35); color: var(--gold2); }
.pill.teal { background: rgba(63,216,194,0.12); border-color: rgba(63,216,194,0.35); color: var(--teal); }
.pill.violet { background: rgba(155,140,255,0.13); border-color: rgba(155,140,255,0.35); color: var(--violet); }
.pill.coral { background: rgba(255,138,101,0.13); border-color: rgba(255,138,101,0.35); color: var(--coral); }
.pill.red { background: rgba(255,107,122,0.13); border-color: rgba(255,107,122,0.35); color: var(--red); }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; align-items: center; gap: 12px; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 18px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: linear-gradient(135deg, var(--bg3), #23345c); border: 1px solid var(--line2); flex: none; }
.avatar.coach { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--gold-ink); border: 0; box-shadow: 0 0 0 3px rgba(232,184,75,0.2); }
.preview-tag { position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 60; font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: 5px 12px; border-radius: 99px; background: rgba(7,13,27,0.85); border: 1px solid var(--line2); color: var(--mute); pointer-events: none; }

/* ======= LANDING ======= */
.l-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(16px, 5vw, 64px); background: rgba(7,13,27,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--serif); font-weight: 900; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold2), var(--gold)); color: var(--gold-ink); font-size: 1rem; box-shadow: 0 6px 20px rgba(232,184,75,0.35); }
.brand span { color: var(--gold); }
.l-nav .links { display: flex; gap: 26px; align-items: center; }
.l-nav .links a:not(.btn) { color: var(--mute); font-weight: 500; font-size: .92rem; }
.l-nav .links a:not(.btn):hover { color: var(--gold2); }
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: clamp(48px, 8vw, 110px) clamp(16px, 5vw, 64px) 70px; max-width: 1320px; margin: 0 auto; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight: 900; margin: 18px 0 20px; }
.hero p.lead { font-size: 1.12rem; color: var(--mute); max-width: 560px; margin-bottom: 30px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .trust { display: flex; gap: 26px; margin-top: 36px; flex-wrap: wrap; }
.hero .trust b { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--gold2); }
.hero .trust span { font-size: .78rem; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mock { position: relative; }
.mock .card { box-shadow: var(--shadow); }
.mock .m1 { padding: 24px; }
.mock .m2 { position: absolute; right: -18px; bottom: -86px; width: 60%; padding: 16px; background: linear-gradient(180deg, rgba(20,30,56,0.95), rgba(12,20,40,0.95)); }
.ring { --p: 0; --c: var(--gold); width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,0.08) 0); position: relative; }
.ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--bg2); }
.ring b { position: relative; font-family: var(--serif); font-size: 2.3rem; white-space: nowrap; }
.ring b small { font-size: .9rem; color: var(--mute); }
.ring.sm { width: 64px; height: 64px; } .ring.sm::before { inset: 6px; } .ring.sm b { font-size: 1.15rem; } .ring.sm b small { font-size: .62rem; }
.bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.bar.teal i { background: linear-gradient(90deg, #22b8a5, var(--teal)); } .bar.coral i { background: linear-gradient(90deg, #f06a45, var(--coral)); } .bar.violet i { background: linear-gradient(90deg, #7a69f0, var(--violet)); }
section.l { padding: 80px clamp(16px, 5vw, 64px); max-width: 1320px; margin: 0 auto; }
.l-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.l-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 12px 0 14px; }
.l-head p { color: var(--mute); font-size: 1.05rem; }
.zone { padding: 26px; overflow: hidden; }
.zone .ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 18px; }
.zone h3 { font-size: 1.35rem; margin-bottom: 8px; }
.zone p { color: var(--mute); font-size: .95rem; }
.zone ul { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.zone li { font-size: .9rem; padding-left: 22px; position: relative; color: #d4dbea; }
.zone li::before { content: '\2726'; position: absolute; left: 0; color: var(--gold); font-size: .8rem; top: 2px; }
.ic.gold { background: rgba(232,184,75,0.15); } .ic.teal { background: rgba(63,216,194,0.13); } .ic.violet { background: rgba(155,140,255,0.15); } .ic.coral { background: rgba(255,138,101,0.14); }
.tiers .card { display: flex; flex-direction: column; }
.tiers .price { font-family: var(--serif); font-size: 2.3rem; margin: 10px 0 2px; }
.tiers .price small { font-family: var(--sans); font-size: .95rem; color: var(--mute); font-weight: 500; }
.tiers ul { list-style: none; margin: 18px 0 24px; display: grid; gap: 10px; flex: 1; }
.tiers li { font-size: .92rem; padding-left: 26px; position: relative; color: #d4dbea; }
.tiers li::before { content: '\2713'; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.tiers .feat { border-color: rgba(232,184,75,0.5); background: linear-gradient(180deg, rgba(232,184,75,0.12), rgba(255,255,255,0.03)); box-shadow: 0 0 0 1px rgba(232,184,75,0.15), var(--shadow); }
.employers { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; max-width: 1000px; margin: 0 auto; }
.employers span { font-family: var(--serif); font-size: 1.15rem; color: #c2cbe0; opacity: .85; }
.quote p { font-size: 1rem; color: #dfe5f3; }
.quote p::before { content: '\201C'; font-family: var(--serif); font-size: 3rem; color: var(--gold); line-height: 0; vertical-align: -0.45em; margin-right: 4px; }
.quote .who { margin-top: 16px; font-weight: 700; } .quote .who small { display: block; color: var(--gold2); font-weight: 600; }
.l-foot { border-top: 1px solid var(--line); padding: 34px clamp(16px, 5vw, 64px) 60px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--mute); font-size: .88rem; }

/* sign-in sheet */
.sheet-bg { position: fixed; inset: 0; z-index: 80; background: rgba(3,6,14,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 16px; }
.sheet-bg.on { display: flex; }
.sheet { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, #121d38, #0b1428); border: 1px solid var(--line2); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); }
.sheet h2 { font-size: 1.7rem; margin-bottom: 6px; }
.field { display: block; margin-top: 14px; }
.field span { display: block; font-size: .8rem; font-weight: 700; color: var(--mute); margin-bottom: 6px; }
.input, textarea.input, select.input { width: 100%; background: rgba(0,0,0,0.25); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .2s; }
.input:focus { border-color: var(--gold); }
textarea.input { resize: vertical; min-height: 120px; line-height: 1.5; }
.personas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.persona { text-align: left; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.persona:hover { border-color: var(--gold); background: rgba(232,184,75,0.08); }
.persona b { display: block; } .persona small { color: var(--mute); font-size: .8rem; }
.close-x { float: right; width: 36px; height: 36px; border-radius: 10px; background: var(--panel); font-size: 1.2rem; }

/* ======= APP SHELL ======= */
.shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.shell > div { min-width: 0; }
.side { position: sticky; top: 0; height: 100vh; padding: 22px 16px; border-right: 1px solid var(--line); background: rgba(5,10,22,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.side .brand { padding: 4px 10px 22px; }
.nav-i { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: var(--mute); font-weight: 600; font-size: .94rem; transition: background .2s, color .2s; }
.nav-i .ni { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel); font-size: 1rem; flex: none; }
.nav-i:hover { background: var(--panel); color: var(--text); }
.nav-i.on { background: linear-gradient(90deg, rgba(232,184,75,0.16), rgba(232,184,75,0.03)); color: var(--gold2); box-shadow: inset 2px 0 0 var(--gold); }
.nav-i .lk { margin-left: auto; font-size: .8rem; opacity: .7; }
.side .sep { height: 1px; background: var(--line); margin: 12px 6px; }
.side .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.side .me small { display: block; color: var(--mute); font-size: .76rem; }
.main { min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 100px; max-width: 1240px; width: 100%; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.top h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.top p { color: var(--mute); margin-top: 4px; }
.mtop { display: none; }
.bnav { display: none; }

/* home tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tile { display: block; padding: 24px; min-height: 196px; transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; }
.tile:hover { transform: translateY(-3px); border-color: rgba(232,184,75,0.45); box-shadow: 0 18px 50px rgba(0,0,0,0.4); }
.tile .glow { position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; filter: blur(10px); opacity: .55; pointer-events: none; }
.tile h3 { font-size: 1.4rem; margin: 14px 0 6px; }
.tile p { color: var(--mute); font-size: .93rem; max-width: 420px; }
.tile .foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tile.locked { opacity: 1; }
.tile.locked > *:not(.lockcover) { filter: grayscale(0.8); opacity: .42; }
.lockcover { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 22px; background: linear-gradient(180deg, rgba(7,13,27,0.25), rgba(7,13,27,0.6)); }
.lockcover .pill { background: rgba(7,13,27,0.85); }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.mini { display: flex; gap: 14px; align-items: flex-start; }
.mini .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.mini b { display: block; font-size: .98rem; } .mini small { color: var(--mute); font-size: .85rem; }
.checkin { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.checkin button { width: 40px; height: 40px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; }
.checkin button.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }

/* tabs */
.tabs { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(0,0,0,0.25); border: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem; color: var(--mute); white-space: nowrap; }
.tab.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

/* scanner */
.scan-io { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.card-head select.input { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.scan-io textarea { min-height: 260px; font-size: .88rem; }
.scan-res { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.parts { display: grid; gap: 12px; margin-top: 8px; }
.part .row { justify-content: space-between; font-size: .88rem; margin-bottom: 6px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: .8rem; padding: 5px 10px; border-radius: 99px; font-weight: 600; }
.chip.hit { background: rgba(94,224,160,0.12); color: var(--green); border: 1px solid rgba(94,224,160,0.3); }
.chip.miss { background: rgba(255,107,122,0.1); color: #ff9aa5; border: 1px solid rgba(255,107,122,0.3); }
.fix { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.fix:first-child { border-top: 0; padding-top: 4px; }
.fix .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex: none; }
.fix .dot.high { background: var(--coral); box-shadow: 0 0 0 4px rgba(255,138,101,0.15); } .fix .dot.mid { background: var(--gold); box-shadow: 0 0 0 4px rgba(232,184,75,0.15); } .fix .dot.low { background: var(--violet); box-shadow: 0 0 0 4px rgba(155,140,255,0.15); } .fix .dot.good { background: var(--green); }
.fix b { display: block; font-size: .95rem; } .fix p { color: var(--mute); font-size: .9rem; margin-top: 2px; }
.farrah-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(232,184,75,0.12), rgba(232,184,75,0.03)); border: 1px solid rgba(232,184,75,0.28); }
.farrah-note .avatar { width: 34px; height: 34px; font-size: .75rem; }
.farrah-note b { font-size: .82rem; color: var(--gold2); display: block; }
.farrah-note p { font-size: .9rem; color: #e6eaf4; }
.quota { font-size: .85rem; color: var(--mute); }

/* jobs */
.job { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; }
.logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; font-size: 1.05rem; background: linear-gradient(135deg, #1d2b4f, #121c36); border: 1px solid var(--line2); color: var(--gold2); }
.job h3 { font-size: 1.08rem; } .job .meta { color: var(--mute); font-size: .86rem; display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 3px; }
.job .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.job-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fchip { padding: 8px 14px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--mute); }
.fchip.on { border-color: var(--gold); color: var(--gold2); background: rgba(232,184,75,0.1); }
.job-detail { display: none; grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; }
.job.open .job-detail { display: block; }

/* tracker */
.board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.col { background: rgba(0,0,0,0.2); border: 1px solid var(--line); border-radius: 16px; padding: 12px; min-height: 220px; }
.col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-bottom: 10px; display: flex; justify-content: space-between; }
.tcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.tcard b { display: block; font-size: .9rem; } .tcard small { color: var(--mute); font-size: .8rem; }
.tcard .mv { display: flex; gap: 6px; margin-top: 8px; }
.tcard .mv button { font-size: .75rem; padding: 4px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--mute); }
.col.offer { border-color: rgba(94,224,160,0.35); background: rgba(94,224,160,0.05); }

/* training */
.mod { display: flex; flex-direction: column; gap: 10px; }
.mod .bar { margin-top: auto; }
.studio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 18px; }
.cv-line { margin-bottom: 14px; }
.notes { display: grid; gap: 8px; margin-top: 10px; }
.note { display: flex; gap: 10px; font-size: .9rem; align-items: flex-start; }
.note i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; flex: none; font-weight: 800; }
.note.ok i { background: rgba(94,224,160,0.15); color: var(--green); } .note.no i { background: rgba(232,184,75,0.15); color: var(--gold2); }
.star { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.star div { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: center; }
.star div b { font-family: var(--serif); font-size: 1.6rem; display: block; }
.star div.ok { border-color: rgba(94,224,160,0.4); background: rgba(94,224,160,0.08); } .star div.ok b { color: var(--green); }
.qlist button { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 8px; font-size: .92rem; }
.qlist button.on { border-color: var(--gold); background: rgba(232,184,75,0.08); }
.qlist button small { display: block; color: var(--gold2); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.letter { white-space: pre-wrap; font-size: .93rem; line-height: 1.7; color: #e3e8f3; background: rgba(0,0,0,0.22); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }

/* community */
.feed .post { padding: 20px; }
.post .hd { display: flex; gap: 12px; align-items: center; }
.post .hd small { color: var(--mute); font-size: .8rem; }
.post p { margin-top: 12px; color: #e3e8f3; }
.post .win { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(94,224,160,0.14), rgba(94,224,160,0.02)); border: 1px solid rgba(94,224,160,0.3); font-weight: 700; color: var(--green); }
.post .acts { display: flex; gap: 18px; margin-top: 14px; color: var(--mute); font-size: .85rem; }
.post .acts button.on { color: var(--gold2); }
.compose { display: flex; gap: 12px; align-items: center; }
.replay { padding: 0; overflow: hidden; }
.thumb { aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #1b2a50, #0d1630 60%, #2a2140); }
.thumb .play { width: 54px; height: 54px; border-radius: 50%; background: rgba(232,184,75,0.92); color: var(--gold-ink); display: grid; place-items: center; font-size: 1.2rem; box-shadow: 0 8px 26px rgba(232,184,75,0.4); }
.thumb .len { position: absolute; right: 10px; bottom: 10px; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,0.6); }
.thumb .cat { position: absolute; left: 10px; top: 10px; }
.thumb.lock .play { background: rgba(255,255,255,0.15); color: var(--text); box-shadow: none; }
.replay .bd { padding: 14px 16px 18px; } .replay .bd b { display: block; font-size: .96rem; line-height: 1.35; } .replay .bd small { color: var(--mute); font-size: .8rem; }
.event { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; }
.date { text-align: center; padding: 8px 0; border-radius: 12px; background: rgba(232,184,75,0.1); border: 1px solid rgba(232,184,75,0.25); }
.date b { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--gold2); } .date small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--mute); }

/* coaching */
.session { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 18px; }
.session .thumb { border-radius: 12px; }
.session ul { margin: 10px 0 0 18px; color: #d4dbea; font-size: .9rem; }
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 4px; }
.msg { max-width: 78%; padding: 11px 14px; border-radius: 16px; font-size: .93rem; }
.msg small { display: block; font-size: .72rem; color: var(--mute); margin-top: 4px; }
.msg.me { align-self: flex-end; background: linear-gradient(135deg, rgba(232,184,75,0.25), rgba(232,184,75,0.12)); border: 1px solid rgba(232,184,75,0.3); border-bottom-right-radius: 4px; }
.msg.them { align-self: flex-start; background: var(--panel2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.fb { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.fb:first-child { border-top: 0; }
.timeline { display: flex; gap: 6px; margin-top: 12px; }
.timeline i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.1); }
.timeline i.done { background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.timeline i.next { background: rgba(232,184,75,0.35); }

/* locked screen */
.gate { text-align: center; max-width: 620px; margin: 30px auto; padding: 40px 28px; }
.gate .ic { width: 70px; height: 70px; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; margin: 0 auto 18px; background: rgba(232,184,75,0.14); }
.gate h2 { font-size: 1.9rem; margin-bottom: 10px; }
.gate p { color: var(--mute); margin-bottom: 22px; }
.gate ul { list-style: none; text-align: left; display: grid; gap: 10px; margin: 0 auto 26px; max-width: 420px; }
.gate li { padding-left: 26px; position: relative; color: #d4dbea; } .gate li::before { content: '\2713'; position: absolute; left: 0; color: var(--gold); font-weight: 800; }

/* coach dashboard */
.kpi b { font-family: var(--serif); font-size: 2rem; display: block; line-height: 1.1; margin-top: 6px; }
.kpi small { color: var(--mute); font-size: .82rem; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.list-row small { color: var(--mute); font-size: .84rem; display: block; }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 14px; }
.spark i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--gold2), rgba(232,184,75,0.25)); }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90; padding: 12px 18px; border-radius: 12px; background: #17244a; border: 1px solid rgba(232,184,75,0.45); box-shadow: var(--shadow); font-weight: 600; font-size: .92rem; max-width: calc(100vw - 32px); }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .55s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ======= RESPONSIVE ======= */
@media (max-width: 1100px) {
  .scan-res { grid-template-columns: minmax(0, 1fr); }
  .studio { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .mtop { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 40; padding: 12px 16px; background: rgba(7,13,27,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
  .mtop .brand { font-size: 1.08rem; } .mtop .brand .mark { width: 30px; height: 30px; }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(7,13,27,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .bnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; font-size: .68rem; font-weight: 700; color: var(--dim); }
  .bnav a span { font-size: 1.15rem; }
  .bnav a.on { color: var(--gold2); background: rgba(232,184,75,0.08); }
  .main { padding: 20px 16px 110px; }
  .preview-tag { bottom: 76px; }
  .hero { grid-template-columns: 1fr; }
  .mock { max-width: 560px; margin-bottom: 40px; }
  .l-nav .links a:not(.btn) { display: none; }
}
@media (max-width: 820px) {
  .g3, .strip { grid-template-columns: minmax(0, 1fr); }
  .g2, .tiles, .scan-io { grid-template-columns: minmax(0, 1fr); }
  .session { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
}
@media (max-width: 560px) {
  .g4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card { padding: 18px; }
  .job { grid-template-columns: 46px minmax(0, 1fr); }
  .job .logo { width: 46px; height: 46px; font-size: .9rem; }
  .job-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .job-side .row { flex-wrap: wrap; justify-content: flex-end; }
  .job-side .btn-sm { white-space: nowrap; padding: 8px 12px; }
  .job .logo { align-self: start; }
  .event { grid-template-columns: 56px minmax(0, 1fr); } .event > :last-child { grid-column: 1 / -1; }
  .personas { grid-template-columns: 1fr; }
  .mock .m2 { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 12px; }
  .star div b { font-size: 1.3rem; }
  .msg { max-width: 90%; }
  .hero .trust { gap: 18px; }
  .btn { white-space: normal; }
}


/* ======= SIGN-IN SCREEN ======= */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 16px 60px; }
.login-card { width: min(440px, 100%); padding: 34px 30px; border-radius: 24px; background: linear-gradient(180deg, rgba(22,33,62,0.92), rgba(11,20,40,0.92)); border: 1px solid var(--line2); box-shadow: var(--shadow), 0 0 0 1px rgba(232,184,75,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.demo-pick { width: min(440px, 100%); }
.demo-pick .personas { grid-template-columns: 1fr 1fr; }
.persona { display: flex; align-items: center; gap: 12px; }
.persona .avatar { width: 36px; height: 36px; font-size: .78rem; }

/* notifications + coach client pages */
.bell { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); font-size: 1.05rem; }
.bell b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--coral); color: #1b0b05; font-size: .68rem; display: grid; place-items: center; padding: 0 4px; }
.notif { position: fixed; z-index: 70; top: 70px; right: 16px; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; padding: 16px; background: linear-gradient(180deg, #14203f, #0c1630); border: 1px solid var(--line2); border-radius: 18px; box-shadow: var(--shadow); }
.notif .list-row { align-items: flex-start; }
.top-tools { display: flex; align-items: center; gap: 10px; }
.client-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.client-head .avatar { width: 68px; height: 68px; font-size: 1.25rem; }
.trend { display: flex; align-items: flex-end; gap: 8px; height: 130px; margin-top: 8px; }
.trend i { width: 22px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--teal), rgba(63,216,194,0.25)); }
.trend i.low { background: linear-gradient(180deg, var(--coral), rgba(255,138,101,0.25)); }
.clickrow { cursor: pointer; border-radius: 12px; transition: background .2s; }
.clickrow:hover { background: var(--panel); }
.inbox { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
.inbox .thread.on { background: rgba(232,184,75,0.08); box-shadow: inset 2px 0 0 var(--gold); }
@media (max-width: 820px) { .inbox { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .demo-pick .personas { grid-template-columns: 1fr; } }

@media (max-width: 1023px) { .desk-only { display: none; } }