/* ============================================================
   Course Compass — In-app screen mockups (vector recreations)
   Dark app theme + light Jobs screen. Scoped under .app
   ============================================================ */

.app {
  --a-bg: #0a0e1a;
  --a-bg2: #0c1120;
  --a-card: #131b2e;
  --a-card2: #161f34;
  --a-line: rgba(125,150,200,.14);
  --a-line2: rgba(125,150,200,.22);
  --a-text: #eef2f9;
  --a-mut: #8893ab;
  --a-mut2: #5f6b85;
  --a-blue: #5b9cff;
  --a-blue2: #4f8cf5;
  --a-amber: #f5b13f;
  --a-green: #34d18b;
  --a-red: #f04668;
  font-family: var(--sans);
  color: var(--a-text);
  width: 100%;
  height: 100%;
  background: var(--a-bg);
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.app * { box-sizing: border-box; }
.app h1, .app h2, .app h3, .app h4, .app h5 { font-family: var(--sans); font-weight: 800; }
.app .a-scroll { position:absolute; inset:0; overflow:hidden; }
.app .grow { flex:1; }

/* shot frame override: let mockups define their own height, dark bezel */
.shot.appshot { background: var(--a-bg, #0a0e1a); border-color: #1c2540; box-shadow: var(--sh-lg); }
.shot.appshot::after { content:""; position:absolute; inset:0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); pointer-events:none; }

/* ---------- Phone (hero) ---------- */
.phone-screen .app { border-radius: 34px; }

/* ---------- Status bar / chrome ---------- */
.app .statusbar { display:flex; align-items:center; justify-content:space-between; padding: 12px 22px 6px; font-size:14px; font-weight:600; }
.app .statusbar .sb-right { display:flex; align-items:center; gap:6px; }
.app .island { background:#000; border-radius:999px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.app .island .dot { color: var(--a-green); }
.app .sb-ic { width:16px; height:16px; }
.app .batt { width:24px; height:12px; border:1.4px solid #fff; border-radius:3px; position:relative; opacity:.9; }
.app .batt::after { content:""; position:absolute; left:1.5px; top:1.5px; bottom:1.5px; width:62%; background:#fff; border-radius:1px; }
.app .batt::before { content:""; position:absolute; right:-3px; top:3px; bottom:3px; width:2px; background:#fff; border-radius:1px; }

.app .topbar { display:flex; align-items:center; justify-content:space-between; padding: 10px 18px 14px; }
.app .tb-bell { width:38px; height:38px; border-radius:50%; background: var(--a-card); display:flex; align-items:center; justify-content:center; position:relative; color:#cfd8ea; }
.app .tb-bell::after { content:""; position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background: var(--a-red); border:2px solid var(--a-card); }
.app .tb-bell svg { width:18px; height:18px; }
.app .tb-brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; }
.app .tb-brand .tb-logo { width:24px; height:24px; border-radius:50%; background: radial-gradient(circle at 50% 40%, #1a2746, #0c1730); display:flex; align-items:center; justify-content:center; border:1px solid rgba(140,180,255,.3); }
.app .tb-brand .tb-logo span { width:3px; height:13px; background: linear-gradient(#dCe8ff,#5b9cff); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); display:block; }
.app .tb-brand b { color: var(--a-blue); font-weight:700; }
.app .tb-ava { width:38px; height:38px; border-radius:50%; background: linear-gradient(150deg,#3f7df0,#2b5bd0); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }

/* ---------- Roadmap ---------- */
.app .rm-head { padding: 6px 20px 4px; }
.app .rm-head h2 { font-family: var(--sans); font-size:21px; font-weight:800; letter-spacing:-.01em; margin:0; }
.app .rm-sub { color: var(--a-mut); font-size:13px; margin-top:5px; }
.app .rm-sub b { color:#c6d0e4; font-weight:600; }
.app .rm-share { display:inline-flex; align-items:center; gap:7px; color:#aeb9d2; font-size:12.5px; font-weight:600; margin-top:14px; padding-bottom:14px; border-bottom:1px solid var(--a-line); width:100%; }
.app .rm-share svg { width:14px; height:14px; }
.app .rm-list { padding: 8px 16px 0; display:flex; flex-direction:column; gap:10px; }
.app .sem-row { display:flex; align-items:center; gap:13px; background: var(--a-card); border:1px solid var(--a-line); border-radius:15px; padding:14px 15px; }
.app .sem-cap { width:34px; height:34px; border-radius:9px; background: linear-gradient(150deg,#1d2944,#151f37); border:1px solid var(--a-line2); display:flex; align-items:center; justify-content:center; flex:none; color:#9fb2d8; }
.app .sem-cap svg { width:17px; height:17px; }
.app .sem-row .grow { min-width:0; }
.app .sem-name { font-size:14.5px; font-weight:700; }
.app .sem-meta { color: var(--a-mut); font-size:12px; margin-top:3px; }
.app .sem-chev { color: var(--a-mut2); width:18px; height:18px; flex:none; }

/* ---------- Bottom nav ---------- */
.app .botnav { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; align-items:center; padding:10px 8px 22px; background: linear-gradient(to top, var(--a-bg) 65%, transparent); border-top:1px solid var(--a-line); }
.app .nav-item { display:flex; flex-direction:column; align-items:center; gap:5px; color: var(--a-mut2); font-size:10.5px; font-weight:600; padding:5px 12px; border-radius:12px; }
.app .nav-item svg { width:19px; height:19px; }
.app .nav-item.active { color:#fff; background: linear-gradient(150deg,#3f7df0,#2f63d8); box-shadow: 0 8px 18px -6px rgba(63,125,240,.7); }

/* ---------- Semester expanded (planner) ---------- */
.app .pl-wrap { padding: 18px; }
.app .pl-card { background: linear-gradient(180deg,#0e1424,#0b101d); border:1px solid var(--a-line); border-radius:22px; padding:18px; }
.app .pl-head { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.app .pl-head > span:not(.pl-cap) { display:flex; flex-direction:column; flex:1; min-width:0; }
.app .pl-cap { width:46px; height:46px; border-radius:13px; background: linear-gradient(150deg,#4f8cf5,#2f63d8); display:flex; align-items:center; justify-content:center; flex:none; box-shadow: 0 8px 18px -6px rgba(63,125,240,.6); }
.app .pl-cap svg { width:24px; height:24px; color:#fff; }
.app .pl-title { font-size:19px; font-weight:800; color: var(--a-blue); letter-spacing:-.01em; white-space:nowrap; }
.app .pl-sub { color: var(--a-mut); font-size:13px; margin-top:3px; white-space:nowrap; }
.app .pl-up { margin-left:auto; color: var(--a-blue); width:20px; height:20px; }
.app .crow { display:flex; align-items:center; gap:13px; background: var(--a-card); border:1px solid var(--a-line); border-radius:15px; padding:15px 14px; position:relative; overflow:hidden; margin-top:11px; }
.app .crow::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:2px; background: linear-gradient(#eaf1ff,#7aa6ff); }
.app .crow-check { width:22px; height:22px; border-radius:50%; border:2px solid #39456a; flex:none; margin-left:6px; }
.app .crow .grow { min-width:0; }
.app .crow-top { display:flex; align-items:center; gap:9px; flex-wrap:nowrap; min-width:0; }
.app .ccode { font-family: var(--mono); font-size:12px; font-weight:600; color: var(--a-blue); background:#1b2950; border-radius:6px; padding:3px 8px; letter-spacing:.02em; white-space:nowrap; flex:none; }
.app .ccr { color: var(--a-mut); font-size:12.5px; white-space:nowrap; flex:none; }
.app .cname { font-size:15px; font-weight:700; margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app .cdots { display:flex; flex-direction:column; gap:3px; flex:none; padding:0 4px; }
.app .cdots i { width:3.5px; height:3.5px; border-radius:50%; background: var(--a-mut2); display:block; }

/* ---------- Professor ratings ---------- */
.app .pr-wrap { padding: 20px; }
.app .pr-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1.5px solid var(--a-blue2); }
.app .pr-head h3 { font-size:19px; font-weight:800; letter-spacing:-.01em; margin:0; line-height:1.25; }
.app .pr-x { color:#c2ccdf; width:22px; height:22px; flex:none; margin-top:2px; }
.app .pr-card { background: var(--a-card); border:1px solid var(--a-line); border-radius:14px; padding:16px 17px; margin-top:14px; }
.app .pr-name { display:flex; align-items:center; justify-content:space-between; }
.app .pr-name b { font-size:16px; font-weight:700; white-space:nowrap; }
.app .pr-name svg { width:17px; height:17px; color: var(--a-mut); }
.app .pr-stats { display:flex; align-items:center; justify-content:space-between; margin-top:11px; font-size:13.5px; color: var(--a-mut); }
.app .pr-stats .v-blue { color: var(--a-blue); font-weight:700; }
.app .pr-stats .v-amber { color: var(--a-amber); font-weight:700; }

/* ---------- GPA ---------- */
.app .gpa-wrap { padding: 18px; display:flex; flex-direction:column; gap:14px; }
.app .gpa-card { background: radial-gradient(120% 120% at 50% -10%, #16213b 0%, #0d1322 70%); border:1px solid var(--a-line); border-radius:18px; padding:20px; text-align:center; }
.app .gpa-lab { font-family: var(--mono); font-size:11px; letter-spacing:.16em; color: var(--a-mut); text-transform:uppercase; }
.app .gpa-big { font-size:46px; font-weight:800; letter-spacing:-.02em; line-height:1.05; margin-top:6px; background: linear-gradient(180deg,#9ec3ff,#5b9cff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.app .gpa-dec { color:#c6d0e4; font-size:14px; margin-top:2px; font-weight:600; }
.app .gpa-note { color: var(--a-mut); font-size:12.5px; margin-top:10px; }
.app .gpa-scale { background: var(--a-card); border:1px solid var(--a-line); border-radius:18px; padding:18px 20px; }
.app .gpa-scale .gpa-lab { display:block; margin-bottom:12px; }
.app .scale-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:14px; }
.app .scale-row .sl { display:flex; align-items:center; gap:10px; color:#d4dcec; white-space:nowrap; }
.app .scale-row .sdot { width:9px; height:9px; border-radius:50%; }
.app .scale-row .sval { font-weight:700; font-size:13.5px; white-space:nowrap; }
.app .fill-lab { font-family: var(--mono); font-size:11px; letter-spacing:.12em; color: var(--a-mut); text-transform:uppercase; margin:18px 0 11px; border-top:1px solid var(--a-line); padding-top:16px; }
.app .fill-btns { display:flex; gap:9px; }
.app .fbtn { flex:1; text-align:center; font-size:13px; font-weight:700; padding:11px 0; border-radius:11px; border:1px solid transparent; }
.app .fbtn.a { background: rgba(52,209,139,.14); color: var(--a-green); border-color: rgba(52,209,139,.3); }
.app .fbtn.b { background: rgba(91,156,255,.14); color: var(--a-blue); border-color: rgba(91,156,255,.3); }
.app .fbtn.c { background: rgba(245,177,63,.14); color: var(--a-amber); border-color: rgba(245,177,63,.3); }
.app .fbtn.clear { background: var(--a-card2); color: var(--a-mut); border-color: var(--a-line); }

/* ---------- AI detector ---------- */
.app .aid-wrap { padding: 20px; }
.app .aid-head { display:flex; gap:14px; align-items:flex-start; }
.app .aid-ic { width:54px; height:54px; border-radius:15px; background: linear-gradient(150deg,#ff5d77,#c4253f); display:flex; align-items:center; justify-content:center; flex:none; box-shadow: 0 10px 22px -8px rgba(240,70,104,.7); }
.app .aid-ic svg { width:27px; height:27px; color:#fff; }
.app .aid-head h3 { font-size:22px; font-weight:800; margin:0; letter-spacing:-.01em; }
.app .aid-head p { color: var(--a-mut); font-size:13.5px; margin:5px 0 0; line-height:1.4; }
.app .aid-credits { display:inline-flex; align-items:center; gap:9px; background: var(--a-card); border:1px solid var(--a-line); border-radius:11px; padding:10px 15px; font-size:14px; margin-top:18px; white-space:nowrap; }
.app .aid-credits .bolt { color: var(--a-red); }
.app .aid-credits b { font-weight:700; }
.app .aid-credits .mut { color: var(--a-mut); }
.app .aid-credits .buy { color: var(--a-red); font-weight:700; }
.app .aid-panel { background: var(--a-bg2); border:1px solid var(--a-line); border-radius:16px; margin-top:18px; overflow:hidden; }
.app .aid-panel-h { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--a-line); }
.app .aid-panel-h .l { display:flex; align-items:center; gap:9px; font-family: var(--mono); font-size:12px; letter-spacing:.12em; color:#c4cee0; }
.app .aid-panel-h .l .bd { width:8px; height:8px; border-radius:50%; background: var(--a-blue); }
.app .aid-panel-h .r { color: var(--a-mut); font-size:13px; }
.app .aid-body { padding:18px; color: var(--a-mut2); font-size:17px; line-height:1.5; min-height:120px; }
.app .aid-foot { display:flex; align-items:center; gap:12px; padding:16px 18px; border-top:1px solid var(--a-line); }
.app .aid-scan { display:inline-flex; align-items:center; gap:9px; background: linear-gradient(150deg,#d83a58,#a52740); color:#fff; font-weight:700; font-size:14px; padding:13px 20px; border-radius:12px; }
.app .aid-scan svg { width:16px; height:16px; }
.app .aid-div { width:1px; height:28px; background: var(--a-line2); }
.app .aid-upload { display:inline-flex; align-items:center; gap:9px; background: var(--a-card); border:1px solid var(--a-line2); color:#dde4f0; font-weight:600; font-size:14px; padding:13px 18px; border-radius:12px; }
.app .aid-upload svg { width:16px; height:16px; }
.app .aid-types { color: var(--a-mut); font-size:12px; }

/* ---------- Transfer evaluation ---------- */
.app .tf-wrap { padding: 18px; }
.app .tf-card { background: linear-gradient(180deg,#0e1424,#0b101d); border:1px solid var(--a-line); border-radius:22px; padding:18px; }
.app .tf-head { display:flex; align-items:center; gap:13px; margin-bottom:6px; }
.app .tf-head > span:not(.tf-cap) { display:flex; flex-direction:column; flex:1; min-width:0; }
.app .tf-cap { width:46px; height:46px; border-radius:13px; background: linear-gradient(150deg,#4f8cf5,#2f63d8); display:flex; align-items:center; justify-content:center; flex:none; box-shadow: 0 8px 18px -6px rgba(63,125,240,.6); }
.app .tf-cap svg { width:23px; height:23px; color:#fff; }
.app .tf-title { font-size:18px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
.app .tf-sub { color: var(--a-mut); font-size:13px; margin-top:3px; white-space:nowrap; }
.app .tf-summary { display:flex; gap:9px; margin:14px 0 4px; }
.app .tf-pill { flex:1; text-align:center; border-radius:12px; padding:11px 4px; border:1px solid var(--a-line); }
.app .tf-pill .n { font-size:20px; font-weight:800; }
.app .tf-pill .l { font-size:10.5px; font-family: var(--mono); letter-spacing:.06em; text-transform:uppercase; margin-top:3px; color: var(--a-mut); }
.app .tf-pill.ok .n { color: var(--a-green); }
.app .tf-pill.part .n { color: var(--a-amber); }
.app .tf-pill.no .n { color: var(--a-red); }
.app .trow { display:flex; align-items:center; gap:12px; background: var(--a-card); border:1px solid var(--a-line); border-radius:14px; padding:13px 14px; margin-top:11px; }
.app .trow .grow { min-width:0; }
.app .trow-top { display:flex; align-items:center; gap:9px; flex-wrap:nowrap; min-width:0; }
.app .tname { font-size:14px; font-weight:700; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app .tstat { font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; flex:none; white-space:nowrap; }
.app .tstat.ok { background: rgba(52,209,139,.16); color: var(--a-green); }
.app .tstat.part { background: rgba(245,177,63,.16); color: var(--a-amber); }
.app .tstat.no { background: rgba(240,70,104,.16); color: var(--a-red); }

/* ---------- Jobs (LIGHT) ---------- */
.app.app-light { --jbg:#eef1f6; --jcard:#fff; --jline:#e6eaf1; --jink:#1d2632; --jmut:#6a7585; background: var(--jbg); color: var(--jink); }
.app .job-wrap { padding: 22px; }
.app .job-head { display:flex; align-items:flex-start; justify-content:space-between; }
.app .job-head .jh-l { display:flex; flex-direction:column; }
.app .job-titlerow { display:flex; align-items:center; gap:11px; }
.app .job-titlerow svg { width:24px; height:24px; color:#2a3340; }
.app .job-titlerow h3 { font-size:22px; font-weight:800; margin:0; letter-spacing:-.01em; color:#1a222e; white-space:nowrap; }
.app .job-sub { color: var(--jmut); font-size:14px; margin-top:7px; }
.app .job-refresh { width:34px; height:34px; color:#8a94a3; }
.app .job-refresh svg { width:21px; height:21px; }
.app .job-filters { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.app .jchip { font-size:14px; font-weight:600; padding:9px 16px; border-radius:11px; background:#e4e8ef; color:#56616f; }
.app .jchip.active { background:#3b82f6; color:#fff; }
.app .jchip .n { opacity:.65; }
.app .job-card { background: var(--jcard); border:1px solid var(--jline); border-radius:16px; padding:20px; margin-top:16px; box-shadow: 0 8px 22px -14px rgba(31,40,58,.25); }
.app .job-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.app .job-card-top h4 { font-size:17px; font-weight:700; margin:0; line-height:1.3; color:#1a222e; letter-spacing:-.01em; }
.app .job-card-top svg { width:19px; height:19px; color:#2a3340; flex:none; }
.app .jtag { display:inline-block; font-size:12.5px; font-weight:600; padding:4px 12px; border-radius:999px; margin-top:14px; }
.app .jtag.intern { background:#e2edff; color:#3b7bf0; }
.app .jtag.entry { background:#e2f6ea; color:#2faa6a; }
.app .jtag.full { background:#efe7fb; color:#7d56d6; }
.app .job-src { color:#5d6776; font-size:15px; margin-top:12px; }
.app .job-loc { display:flex; align-items:center; gap:6px; color:#8a94a3; font-size:13.5px; margin-top:9px; }
.app .job-loc svg { width:14px; height:14px; }

@media (max-width: 980px) {
  .app .gpa-big { font-size:42px; }
}