/* PT StudyBuddy — brand theme (green #30B058 · blue #1B66AD · black · white) */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{
  --green:#30B058; --green-2:#25924A; --green-soft:#E6F6EA;
  --blue:#1B66AD; --blue-2:#154F87; --blue-soft:#E8F0FA;
  --ink:#0F1720; --ink-2:#3B4753; --muted:#66727E; --line:#E3E8EE; --bg:#F5F8FA; --card:#FFFFFF;
  /* legacy variable bridge — old pages use these names */
  --navy:var(--blue); --gold:var(--green); --paper:var(--bg); --good:var(--green-2); --bad:#B23A3A;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,32,.04),0 8px 24px -12px rgba(15,23,32,.12);
}
html{-webkit-text-size-adjust:100%}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif !important;background:var(--bg) !important;color:var(--ink) !important;line-height:1.5}
h1,h2,h3,.display{font-family:'Sora','Manrope',system-ui,sans-serif !important;letter-spacing:-.01em}
h2{font-weight:700 !important}
a{color:var(--blue)}
header{background:#fff !important;color:var(--ink) !important;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(15,23,32,.03);position:sticky;top:0;z-index:20;padding:10px 18px !important}
header h1{font-size:1rem !important;font-weight:600 !important;color:var(--ink) !important;display:flex;align-items:center;gap:10px}
header a{color:var(--blue) !important;font-family:'Manrope',sans-serif !important;font-weight:600}
header .brand-logo{height:34px;width:auto;display:block}
header .brand-swoosh{height:3px;background:linear-gradient(90deg,var(--green),var(--blue));position:absolute;left:0;right:0;bottom:-1px}
.card{background:var(--card) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;box-shadow:var(--shadow)}
button, .btn{font-family:'Manrope',sans-serif !important;font-weight:600 !important;border-radius:10px !important}
button:not(.secondary):not(.ghost):not(.danger):not(.on):not(.card):not(.opt):not(.tile):not(.fbtn):not(.strike):not(.rb):not(.item):not(.link):not(.qtab):not(.endx):not(.flag):not(.pal button):not(.next):not(.slot):not(.pack):not(.pick):not(.x):not(.linky):not(.hostbtn):not(.tabs button):not(.bsave):not(.ed):not(.del){background:var(--green) !important;border:1px solid var(--green) !important;color:#fff !important}
button:not(.secondary):not(.ghost):not(.danger):not(.on):not(.card):not(.opt):not(.tile):not(.fbtn):not(.strike):not(.rb):not(.item):not(.link):not(.qtab):not(.endx):not(.flag):not(.pal button):not(.next):not(.slot):not(.pack):not(.pick):not(.x):not(.linky):not(.hostbtn):not(.tabs button):not(.bsave):not(.ed):not(.del):hover{background:var(--green-2) !important;border-color:var(--green-2) !important}
button.secondary,button.ghost{background:#fff !important;color:var(--blue) !important;border:1px solid var(--blue) !important}
button.danger{background:#fff !important;color:var(--bad) !important;border:1px solid var(--bad) !important}
input,select,textarea{font-family:'Manrope',sans-serif !important;border-radius:10px !important;border:1px solid var(--line) !important;background:#fff !important}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-soft);border-color:var(--green) !important}
.tag{border-radius:999px !important}
.bar>i,.pbar>i{background:var(--green) !important}
/* video tabs */
.tabs button.on{background:var(--green) !important;border-color:var(--green) !important;color:#fff !important}
/* the extra :not()s are needed to outrank the generic green-button rule above */
.tabs button:not(.on):not(.secondary):not(.ghost):not(.danger){background:var(--ink) !important;color:#fff !important;border:1px solid var(--ink) !important}
.tabs button:not(.on):not(.secondary):not(.ghost):not(.danger):hover{background:#000 !important;border-color:#000 !important}
/* generic pill/labels */
.pill{background:var(--green) !important}
.banner.ok{background:var(--green-soft) !important;border-color:#BFE7CB !important;color:#1F5C33 !important}
/* dashboard hero */
.hero-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--radius);padding:22px 22px 20px;margin:0 0 16px}
.hero-band::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;height:200%;background:linear-gradient(120deg,rgba(48,176,88,.55),rgba(27,102,173,.55));transform:rotate(18deg);filter:blur(2px);pointer-events:none}
.hero-band .row{position:relative;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:#fff;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;color:var(--blue);font-size:1.4rem;cursor:pointer;flex-shrink:0}
.hero-band .who h2{font-size:1.35rem !important;color:#fff !important;margin:0 0 4px}
.hero-band .who p{margin:0;opacity:.85;font-size:.9rem}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.02em}
.badge.g{background:var(--green);color:#fff}.badge.b{background:var(--blue);color:#fff}.badge.w{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3)}
.hero-band .stats{margin-left:auto;display:flex;gap:22px;text-align:center}
.hero-band .stat b{display:block;font-family:'Sora',sans-serif;font-size:1.6rem;line-height:1.05}
.hero-band .stat span{font-size:.72rem;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
/* dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:12px 0}
.tile{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 28px -12px rgba(15,23,32,.25)}
.tile .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:10px}
.tile .ic.g{background:var(--green-soft)}.tile .ic.b{background:var(--blue-soft)}.tile .ic.k{background:#EEF1F4}
.tile b{font-family:'Sora',sans-serif;font-size:1rem;display:block}
.tile small{color:var(--muted);display:block;margin-top:3px;font-size:.82rem;line-height:1.35}
.tile .go{position:absolute;right:14px;top:16px;color:var(--blue);font-weight:700}
.tile .mini{height:5px;background:#EEF1F4;border-radius:4px;margin-top:10px;overflow:hidden}.tile .mini i{display:block;height:100%;background:var(--green)}
.ask-fab{position:fixed;right:16px;bottom:16px;background:var(--ink);color:#fff;border-radius:999px;padding:12px 16px;text-decoration:none;font-weight:700;font-size:.9rem;box-shadow:0 8px 24px -8px rgba(15,23,32,.5);z-index:30;display:flex;gap:8px;align-items:center}
.ask-fab:hover{background:#000}
@media (prefers-reduced-motion:reduce){.tile{transition:none}}
@media (max-width:600px){.hero-band .stats{margin-left:0;width:100%;justify-content:space-between}}

/* ============================================================
   ADDITIONS — 21 Aug 2026
   Everything ABOVE this line is the original file. Do not remove it:
   it holds the dashboard layout (.hero-band, .tiles, .tile, .avatar,
   .ask-fab). Deleting it strips app.html back to browser defaults.
   Append below only.
   ============================================================ */

/* Legacy variable names used by exam.html, the admin pages and
   notifications.html, mapped onto the same logo palette. */
:root{
  --green-d:#1E7A3D; --body:#3B4753; --mute:#66727E; --wash:#EFF5F2;
  --amber:#B07A16; --rec:#B23A3A;
  --teal:var(--blue); --teal-dark:var(--blue-2); --navy-light:var(--blue-soft);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
h4,.display{font-family:'Sora','Manrope',system-ui,sans-serif}

/* ---- exam list: white cards, colour reserved for status ----
   A list item is not an action. Painting all 25 of them green made the
   metadata unreadable and gave no way to tell one paper from the next.
   Green now means something: a score you have earned. */
.card{background:#fff !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;border-radius:12px !important}
.card:hover{border-color:var(--blue-soft) !important;
  box-shadow:0 4px 14px -8px rgba(15,23,32,.22)}
.card .t{color:var(--ink)}
.card .m{color:var(--muted) !important}
.card .done{background:var(--green-soft) !important;color:#1E7A3D !important;
  font-weight:600 !important}

/* ---- exam tabs: selected green, the other quiet ---- */
.tabs{background:var(--bg) !important}
.tabs button.on{background:var(--green) !important;border-color:var(--green) !important;
  color:#fff !important}
.tabs button:not(.on){background:transparent !important;color:var(--muted) !important;
  border:0 !important}

/* ---- bottom bar: one green action, nothing else shouting ---- */
.bar .next,.bar .go{background:var(--green) !important;border-color:var(--green) !important;
  color:#fff !important}
.bar .endx{background:#fff !important;color:var(--bad) !important;
  border-color:#E5C3C3 !important}
.bar button:not(.next):not(.go):not(.endx){background:#fff !important;
  color:var(--ink) !important;border:1px solid var(--line) !important}

/* ---- shared admin nav (built by /admin-nav.js) ---- */
.adminnav{background:#fff;border-bottom:1px solid var(--line)}
.adminnav a{color:var(--blue);border-color:var(--line);text-decoration:none}
.adminnav a:hover{background:var(--green-soft)}
.adminnav a[aria-current]{background:var(--blue) !important;color:#fff !important;
  border-color:var(--blue) !important}

/* Structural buttons must keep their own styling. The blanket green rule above
   is for actions only — a list item, a tab or a calendar slot is not an action,
   and painting them all green made the exam list and the booking calendar
   unreadable. Add any new such class to the :not() list rather than fighting
   it with !important in the page. */
.tabs button{background:transparent;border:0;color:var(--muted)}
.slot,.pack,.pick{background:#fff;color:var(--ink)}

/* ---- results ---- */
.repline b.pass{color:var(--green-2)}
.repline b.fail{color:var(--bad)}
.pal button.done{background:var(--green) !important;border-color:var(--green) !important;
  color:#fff !important}

/* ------------------------------------------------------------
   Tile icons and status badges — 3 Sep 2026
   Emoji were replaced with inline SVG: emoji render differently on
   every OS, so the same page looked different on iPhone, Android and
   desktop. Icons inherit currentColor from .ic.g / .ic.b, keeping the
   existing green/blue alternation that echoes the hero band.
   ------------------------------------------------------------ */
.tile .ic svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tile .ic.g{color:var(--green-d,#22823F)}
.tile .ic.b{color:var(--blue,#1B66AD)}
.tile .ic.k{color:#5F6B72}
/* The badge sits opposite the icon, where the → used to be. Tiles that
   have a badge hide the arrow so the two never collide. */
.tile .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tile .top .ic{margin-bottom:0}
.tile .badge{font-size:.72rem;padding:3px 9px;border-radius:999px;font-weight:600;
  line-height:1.4;max-width:100%;overflow-wrap:anywhere}
.tile .badge.warn{background:#FDF3E3;color:#8A5A10}
.tile .badge.live{background:#FBE9E9;color:#A32D2D}
.tile .badge.ok{background:var(--green-soft,#E1F5EE);color:#0F6E56}
.tile .badge.info{background:var(--blue-soft,#E6F1FB);color:#185FA5}
.tile .badge.quiet{background:transparent;color:var(--muted);font-weight:500;padding:3px 0}
.tile .foot{display:block;margin-top:8px;font-size:.78rem;color:var(--muted)}
.tile .foot .badge{display:inline-block}
.tile .foot .qname{color:var(--ink,#0f172a);font-weight:600}
/* the weekend live quiz/oral name: the whole line in brand green (6 Oct 2026) */
.tile .foot.nextq,.tile .foot.nextq .qname{color:var(--green-d,#1E7A3D);font-weight:700}
/* …inside a light-green rounded box, like the blue "Opens" badge above it */
.tile .foot.nextq:not(:empty){display:inline-block;background:var(--green-soft,#E6F6EA);border:1px solid #BFE7CB;border-radius:12px;padding:6px 12px;line-height:1.4}

/* Tile copy as short bullets rather than a sentence — scans faster on a
   dashboard. Markers are drawn with ::before so the list keeps the same
   left edge as the heading above it. */
.tile ul.tl{list-style:none;margin:5px 0 0;padding:0 0 0 4px}
.tile ul.tl li{color:var(--muted);font-size:.82rem;line-height:1.45;
  padding-left:14px;position:relative;margin-top:3px}
.tile ul.tl li::before{content:"";position:absolute;left:2px;top:.6em;
  width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}