/* ============================================================================
   facultyportal-v2.css  -  the Faculty Portal V2 theme ("theme faculty.html")
   GENERATED by scratchpad build-css.js from the approved mockup - EDIT THE
   MOCKUP OR THE BUILD SCRIPT, NOT THIS FILE, unless the note below says so.

   NAMESPACE CONTRACT (same discipline as studentportal-v2.css):
     * every class is prefixed  fp2-     (the mockup's .card/.btn/.badge/.pill/
       .content/.page ... collide with Bootstrap 4 + Metronic on legacy pages)
     * every custom property is prefixed  --fp2-
     * every @keyframes is prefixed  fp2
     * bare element rules are scoped:
         page canvas          ->  body.fp2
         box-sizing reset     ->  .fp2-ui  (put fp2-ui on NEW themed blocks only,
                                            never on a legacy wrapper)
         table/th/td/tr       ->  .fp2-tbl
         scrollbars           ->  body.fp2
     * #page-dashboard        ->  .fp2-page-dashboard
   Part 1 = the mockup's own stylesheet (shell, dashboard, pages).
   Part 2 = the login block the mockup carried over from the Student Portal
            (sp2 -> fp2; duplicate tokens re-pointed at Part 1's palette).
   Legacy controls (form-control, RadGrid, card-custom, .btn ...) are restyled
   in facultyportal-v2-compat.css, NOT here.
   ============================================================================ */

/* ===================== PART 1 - MOCKUP STYLESHEET ===================== */
  :root{
    --fp2-bg: #F7F2E8;
    --fp2-bg-soft: #F1E8D8;
    --fp2-surface: #FFFDF8;
    --fp2-surface-2: #FAF5EB;
    --fp2-ink: #25231F;
    --fp2-ink-soft: #5A5145;
    --fp2-ink-muted: #817B70;
    --fp2-line: #DED7C9;
    --fp2-line-soft: #EFE7D8;
    --fp2-primary: #241F18;
    --fp2-primary-soft: #3D3226;
    --fp2-primary-deep: #14110B;
    --fp2-accent: #F26A1B;
    --fp2-accent-soft: #F6975F;
    --fp2-accent-warm: #D8580E;
    --fp2-accent-tint: #FCEDE1;
    --fp2-success: #55744C;
    --fp2-success-soft: #E7EDE2;
    --fp2-warning: #A96A08;
    --fp2-warning-soft: #F6EBD8;
    --fp2-danger: #A2412A;
    --fp2-danger-soft: #F3E2DB;
    --fp2-shadow-sm: 0 1px 2px rgba(60, 44, 28, 0.05);
    --fp2-shadow: 0 4px 20px rgba(60, 44, 28, 0.08);
    --fp2-shadow-lg: 0 12px 40px rgba(60, 44, 28, 0.14);
  }

  /* (2026-10-02) ":root[data-theme]", not a bare "[data-theme]": PART 2 below
     opens with its own :root{} that redeclares --fp2-sand, --fp2-border-strong
     and the whole --fp2-ember-50..700 ramp. A bare [data-theme="dark"] and a
     bare :root are the same specificity (0,1,0) and both land on <html>, so
     whichever comes LATER in the file wins - and Part 2 comes later. The block
     below therefore never applied to those tokens at all (measured in a
     harness: in dark mode the default theme still computed --fp2-sand
     #F2E9DA, --fp2-border-strong #D8CDBB and ember-50/100/700 at their light
     values - RadGrid hover rows, footers and pager bars stayed pale on a dark
     page). The extra :root makes this block (0,2,0), so it wins whatever the
     order. Tokens only this block declares were never affected. */
  :root[data-theme="dark"]{
    --fp2-bg: #17110A;
    --fp2-bg-soft: #211913;
    --fp2-surface: #221A11;
    --fp2-surface-2: #2A2117;
    --fp2-ink: #F2EADC;
    --fp2-ink-soft: #C2B5A1;
    --fp2-ink-muted: #8C8172;
    --fp2-line: #3A2E20;
    --fp2-line-soft: #2C2317;
    --fp2-primary: #2E2318;
    --fp2-primary-soft: #3E3022;
    --fp2-primary-deep: #1A1409;
    --fp2-accent: #F6975F;
    --fp2-accent-soft: #FAB98A;
    --fp2-accent-tint: rgba(246, 151, 95, 0.15);
    --fp2-accent-warm: #FAB98A;
    --fp2-success: #8FAE85;
    --fp2-success-soft: #26301F;
    --fp2-warning: #D5A253;
    --fp2-warning-soft: #33281a;
    --fp2-danger: #D48468;
    --fp2-danger-soft: #33221f;
    --fp2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --fp2-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    --fp2-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
    /* --fp2-border-strong/-sand and the whole --fp2-ember-50..700 ramp belong
       here, not in facultyportal-v2-compat.css's own [data-theme="dark"]
       body.fp2{} block they used to live in (2026-09-23) - every one of
       these is ALSO redeclared per client in facultyportal-v2-themes.css
       (body.fp2-theme-X{...}), and that block's selector (element+class,
       0,1,1) loses to [data-theme="dark"] body.fp2's (attribute+element+
       class, 0,2,1) since both land directly on <body> - not an inheritance
       question, a straight specificity fight the theme block cannot win.
       Declared here instead (targeting <html>, inherited unless a theme
       overrides it on <body> itself) a theme's own value wins exactly the
       way every OTHER themed token on this page already does (client,
       2026-10-01: dark mode showing the default orange/peach instead of
       each theme's own accent on several elements - confirmed in a harness,
       not guessed: a themed client's accent-warm/ember-* computed back to
       this file's flat dark hex the moment dark mode switched on, moving
       from light to dark with nothing else changed). Moved out, not
       duplicated - removed from the compat.css block in the same change. */
    --fp2-border-strong: #5A4632;
    --fp2-sand: var(--fp2-bg-soft);
    --fp2-ember-50: rgba(246, 151, 95, 0.08);
    --fp2-ember-100: rgba(246, 151, 95, 0.14);
    --fp2-ember-200: rgba(246, 151, 95, 0.20);
    --fp2-ember-300: rgba(246, 151, 95, 0.28);
    --fp2-ember-400: var(--fp2-accent-soft);
    --fp2-ember-500: var(--fp2-accent);
    --fp2-ember-600: var(--fp2-accent-warm);
    --fp2-ember-700: #FDCBA8;
  }

  .fp2-ui, .fp2-ui *{ box-sizing: border-box; margin: 0; padding: 0; }

  body.fp2, body.fp2{
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--fp2-bg);
    color: var(--fp2-ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .fp2-serif{ font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }

  
  .fp2-app{ display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

  
  .fp2-sidebar{
    background: var(--fp2-surface);
    border-right: 1px solid var(--fp2-line);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  .fp2-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 24px;
    border-bottom: 1px solid var(--fp2-line-soft);
    margin-bottom: 16px;
  }

  .fp2-brand-mark{
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--fp2-primary), var(--fp2-primary-deep));
    border-radius: 10px;
    display: grid; place-items: center;
    color: var(--fp2-accent);
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(60, 44, 28, 0.20);
  }

  .fp2-brand-text{ line-height: 1.1; }
  .fp2-brand-text .fp2-t1{ font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
  .fp2-brand-text .fp2-t2{ font-size: 11px; color: var(--fp2-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }

  .fp2-nav-section{ margin-top: 8px; }
  .fp2-nav-label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fp2-ink-muted);
    padding: 12px 12px 6px;
    font-weight: 600;
  }

  .fp2-nav-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--fp2-ink-soft);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s;
    position: relative;
  }
  .fp2-nav-item:hover{ background: var(--fp2-surface-2); color: var(--fp2-ink); }
  .fp2-nav-item.fp2-active{
    background: var(--fp2-primary);
    color: #fff;
  }
  [data-theme="dark"] .fp2-nav-item.fp2-active{ color: #F2EADC; }
  .fp2-nav-item .fp2-ico{ width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
  .fp2-nav-item.fp2-active .fp2-ico{ opacity: 1; }
  .fp2-nav-item .fp2-badge{
    margin-left: auto;
    background: var(--fp2-accent);
    color: var(--fp2-primary-deep);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
  }
  .fp2-nav-item.fp2-active .fp2-badge{ background: #fff; color: var(--fp2-primary); }


  
  .fp2-main{ padding: 0; min-width: 0; }

  .fp2-topbar{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--fp2-line);
    background: var(--fp2-bg);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
  }

  .fp2-topbar .fp2-crumb{
    font-size: 12px;
    color: var(--fp2-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .fp2-topbar .fp2-crumb b{ color: var(--fp2-ink); font-weight: 600; }

  .fp2-search{
    flex: 1;
    max-width: 420px;
    margin-left: auto;
    position: relative;
  }
  .fp2-search input{
    width: 100%;
    padding: 9px 14px 9px 38px;
    border: 1px solid var(--fp2-line);
    background: var(--fp2-surface);
    border-radius: 10px;
    font-size: 13px;
    color: var(--fp2-ink);
    outline: none;
    transition: all 0.15s;
    font-family: inherit;
  }
  .fp2-search input:focus{ border-color: var(--fp2-primary); box-shadow: 0 0 0 3px rgba(242,106,27,0.10); }
  .fp2-search svg{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fp2-ink-muted); }

  .fp2-top-actions{ display: flex; gap: 8px; align-items: center; }
  .fp2-icon-btn{
    width: 36px; height: 36px;
    border-radius: 9px;
    border: 1px solid var(--fp2-line);
    background: var(--fp2-surface);
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--fp2-ink-soft);
    transition: all 0.15s;
    position: relative;
  }
  .fp2-icon-btn:hover{ color: var(--fp2-ink); border-color: var(--fp2-ink-muted); }
  .fp2-icon-btn .fp2-dot{
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px;
    background: var(--fp2-accent);
    border-radius: 50%;
    border: 2px solid var(--fp2-surface);
  }

  
  .fp2-content{ padding: 20px 26px 36px; max-width: 1400px; }

  .fp2-page{ display: none; }
  .fp2-page.fp2-active{ display: block; animation: fp2fadeIn 0.3s ease; }
  @keyframes fp2fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  .fp2-page-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 20px;
    flex-wrap: wrap;
  }
  .fp2-page-head h1{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .fp2-page-head .fp2-sub{
    color: var(--fp2-ink-muted);
    font-size: 13px;
    margin-top: 6px;
  }
  .fp2-page-head .fp2-actions{ display: flex; gap: 8px; }

  .fp2-btn{
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid var(--fp2-line);
    background: var(--fp2-surface);
    color: var(--fp2-ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
  }
  .fp2-btn:hover{ border-color: var(--fp2-ink-muted); }
  /* color needs !important: body.fp2 a:hover{color:var(--fp2-accent)}
     (facultyportal-v2-compat.css) is (0,2,2) - beats this plain class
     pair's (0,2,0) on hover, same global anchor-color specificity bug
     already fixed on .fp2-bt.fp2-pri (Part 1's "Take attendance" button) -
     preventively fixed here too (this variant is not currently reported
     broken, but it is the same gap: a plain <a class="fp2-btn fp2-primary">
     would lose its hover text color to the same global rule). NOTE: this
     is NOT the LOGIN button - btnlgn is a plain CssClass="fp2-btn" (no
     fp2-primary) and renders as <input type="submit">, which body.fp2
     a:hover cannot match at all; its own hover rule is the OTHER .fp2-btn
     definition further down this file (~line 1886, Part 2), and its
     orange hover (background: var(--fp2-ember-600)) reads as this
     project's own deliberate, consistently-applied hover treatment, not a
     leaked/wrong color - left alone pending clearer direction on bug #10,
     rather than guessing at a redesign of an intentional-looking effect. */
  .fp2-btn.fp2-primary{
    background: var(--fp2-primary);
    color: #fff !important;
    border-color: var(--fp2-primary);
  }
  [data-theme="dark"] .fp2-btn.fp2-primary{ color: #F2EADC; }
  .fp2-btn.fp2-primary:hover{ background: var(--fp2-primary-soft); }
  .fp2-btn.fp2-ghost{ background: transparent; border-color: transparent; }
  .fp2-btn.fp2-ghost:hover{ background: var(--fp2-surface-2); }

  
  
  

  
  .fp2-welcome-strip{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .fp2-welcome-strip .fp2-greet{
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .fp2-welcome-strip .fp2-date-pill{
    background: var(--fp2-primary);
    color: var(--fp2-accent);
    padding: 8px 12px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.1;
    min-width: 64px;
  }
  .fp2-welcome-strip .fp2-date-pill .fp2-d{
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 600;
    display: block;
  }
  .fp2-welcome-strip .fp2-date-pill .fp2-m{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
  }
  .fp2-welcome-strip .fp2-greet-text h2{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
  }
  .fp2-welcome-strip .fp2-greet-text p{
    font-size: 12.5px;
    color: var(--fp2-ink-muted);
    margin-top: 2px;
  }
  .fp2-welcome-strip .fp2-quick-stats{
    display: flex;
    gap: 24px;
  }
  .fp2-welcome-strip .fp2-qs{
    text-align: center;
    padding: 0 16px;
    border-left: 1px solid var(--fp2-line);
  }
  .fp2-welcome-strip .fp2-qs:first-child{ border-left: none; padding-left: 0; }
  .fp2-welcome-strip .fp2-qs .fp2-v{
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--fp2-primary);
    line-height: 1;
  }
  .fp2-welcome-strip .fp2-qs .fp2-l{
    font-size: 10.5px;
    color: var(--fp2-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    font-weight: 600;
  }

  
  .fp2-dash-grid{
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    margin-bottom: 20px;
  }

  
  .fp2-next-class-hero{
    background: linear-gradient(135deg, var(--fp2-primary) 0%, var(--fp2-primary-deep) 100%);
    border-radius: 18px;
    padding: 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .fp2-next-class-hero::before{
    content: '';
    position: absolute;
    top: -100px; right: -50px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(242, 106, 27, 0.20) 0%, transparent 70%);
    border-radius: 50%;
  }
  .fp2-next-class-hero::after{
    content: '';
    position: absolute;
    bottom: -80px; left: 30%;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    border-radius: 50%;
  }
  .fp2-nch-inner{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
  }
  .fp2-nch-label{
    font-size: 11px;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .fp2-nch-label::before{
    content: '';
    width: 8px; height: 8px;
    background: var(--fp2-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--fp2-accent);
    animation: fp2pulse 2s infinite;
  }
  @keyframes fp2pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .fp2-nch-code{
    font-family: 'Fraunces', serif;
    font-size: 42px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .fp2-nch-title{
    font-size: 15px;
    opacity: 0.9;
    margin-bottom: 14px;
  }
  .fp2-nch-meta{
    display: flex;
    gap: 16px;
    font-size: 12.5px;
    opacity: 0.85;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .fp2-nch-meta span{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
  }
  .fp2-nch-actions{
    display: flex;
    gap: 8px;
  }
  .fp2-nch-btn{
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.15s;
  }
  .fp2-nch-btn.fp2-gold{
    background: var(--fp2-accent);
    color: var(--fp2-primary-deep);
  }
  .fp2-nch-btn.fp2-gold:hover{ background: var(--fp2-accent-soft); }
  .fp2-nch-btn.fp2-ghost{
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .fp2-nch-btn.fp2-ghost:hover{ background: rgba(255,255,255,0.25); }

  
  .fp2-countdown-ring{
    width: 140px;
    height: 140px;
    position: relative;
    display: grid;
    place-items: center;
  }
  .fp2-countdown-ring svg{
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
  }
  .fp2-countdown-ring .fp2-ring-bg{
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 6;
  }
  .fp2-countdown-ring .fp2-ring-fg{
    fill: none;
    stroke: var(--fp2-accent);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 377;
    stroke-dashoffset: 280;
    transition: stroke-dashoffset 1s ease;
  }
  .fp2-countdown-ring .fp2-inner{
    text-align: center;
    z-index: 1;
  }
  .fp2-countdown-ring .fp2-num{
    font-family: 'Fraunces', serif;
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
    color: var(--fp2-accent);
  }
  .fp2-countdown-ring .fp2-unit{
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
  }

  
  .fp2-quick-actions{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .fp2-qa-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .fp2-qa-head h3{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 16px;
  }
  .fp2-qa-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .fp2-qa-item{
    padding: 14px;
    border: 1px solid var(--fp2-line);
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--fp2-surface-2);
  }
  .fp2-qa-item:hover{
    border-color: var(--fp2-primary);
    transform: translateY(-2px);
    box-shadow: var(--fp2-shadow);
  }
  .fp2-qa-item .fp2-qa-ico{
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--fp2-primary);
    color: var(--fp2-accent);
    display: grid; place-items: center;
    margin-bottom: 10px;
  }
  .fp2-qa-item .fp2-qa-title{
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 2px;
  }
  .fp2-qa-item .fp2-qa-sub{
    font-size: 11px;
    color: var(--fp2-ink-muted);
  }

  
  .fp2-timeline{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 22px;
  }
  .fp2-timeline-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
  }
  .fp2-timeline-head h3{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 18px;
  }
  .fp2-timeline-head .fp2-link{
    font-size: 12px;
    color: var(--fp2-ink-muted);
    cursor: pointer;
    font-weight: 500;
  }
  .fp2-timeline-head .fp2-link:hover{ color: var(--fp2-primary); }

  .fp2-tl-item{
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 16px;
    position: relative;
    padding-bottom: 18px;
  }
  .fp2-tl-item:last-child{ padding-bottom: 0; }
  .fp2-tl-item:not(:last-child)::after{
    content: '';
    position: absolute;
    left: 35px;
    top: 36px;
    bottom: 0;
    width: 1px;
    background: var(--fp2-line);
  }
  .fp2-tl-time{
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--fp2-ink-soft);
    padding-top: 10px;
    text-align: center;
    position: relative;
  }
  .fp2-tl-time::after{
    content: '';
    position: absolute;
    right: -10px;
    top: 16px;
    width: 10px; height: 10px;
    background: var(--fp2-surface);
    border: 2px solid var(--fp2-line);
    border-radius: 50%;
  }
  .fp2-tl-item.fp2-now .fp2-tl-time{ color: var(--fp2-primary); font-weight: 600; }
  .fp2-tl-item.fp2-now .fp2-tl-time::after{
    background: var(--fp2-primary);
    border-color: var(--fp2-primary);
    box-shadow: 0 0 0 4px rgba(60, 44, 28, 0.15);
  }
  .fp2-tl-item.fp2-done .fp2-tl-time{ color: var(--fp2-ink-muted); }
  .fp2-tl-item.fp2-done .fp2-tl-time::after{
    background: var(--fp2-success);
    border-color: var(--fp2-success);
  }

  .fp2-tl-card{
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--fp2-surface-2);
    border-left: 3px solid var(--fp2-primary);
    cursor: pointer;
    transition: all 0.15s;
  }
  .fp2-tl-card:hover{ transform: translateX(2px); }
  .fp2-tl-item.fp2-now .fp2-tl-card{
    background: linear-gradient(135deg, var(--fp2-primary), var(--fp2-primary-soft));
    color: #fff;
    border-left-color: var(--fp2-accent);
  }
  [data-theme="dark"] .fp2-tl-item.fp2-now .fp2-tl-card{ color: #F2EADC; }
  .fp2-tl-item.fp2-done .fp2-tl-card{ opacity: 0.7; border-left-color: var(--fp2-success); }
  .fp2-tl-item.fp2-office .fp2-tl-card{ border-left-color: var(--fp2-accent); }

  .fp2-tl-top{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
  }
  .fp2-tl-code{ font-weight: 600; font-size: 13px; }
  .fp2-tl-meta{ font-size: 11.5px; color: var(--fp2-ink-muted); }
  .fp2-tl-item.fp2-now .fp2-tl-meta{ color: rgba(255,255,255,0.8); }
  .fp2-tl-title{ font-size: 12.5px; color: var(--fp2-ink-soft); }
  .fp2-tl-item.fp2-now .fp2-tl-title{ color: rgba(255,255,255,0.85); }
  .fp2-tl-actions{
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .fp2-tl-status{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    margin-top: 6px;
    background: var(--fp2-success-soft);
    color: var(--fp2-success);
  }
  .fp2-tl-item.fp2-now .fp2-tl-status{
    background: rgba(255,255,255,0.2);
    color: #fff;
  }

  
  .fp2-deadlines{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .fp2-deadlines-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .fp2-deadlines-head h3{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 16px;
  }
  .fp2-deadlines-head .fp2-link{
    font-size: 12px;
    color: var(--fp2-ink-muted);
    cursor: pointer;
    font-weight: 500;
  }
  .fp2-dl-item{
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fp2-line-soft);
    align-items: flex-start;
  }
  .fp2-dl-item:last-child{ border-bottom: none; }
  .fp2-dl-date{
    width: 44px;
    flex-shrink: 0;
    text-align: center;
    padding: 6px 0;
    background: var(--fp2-surface-2);
    border-radius: 8px;
    border: 1px solid var(--fp2-line-soft);
  }
  .fp2-dl-date .fp2-d{ font-family: 'Fraunces', serif; font-size: 16px; font-weight: 500; line-height: 1; }
  .fp2-dl-date .fp2-m{ font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fp2-ink-muted); margin-top: 2px; }
  .fp2-dl-date.fp2-urgent{ background: var(--fp2-warning-soft); border-color: var(--fp2-warning); }
  .fp2-dl-date.fp2-urgent .fp2-d{ color: var(--fp2-warning); }
  .fp2-dl-body{ flex: 1; min-width: 0; }
  .fp2-dl-title{ font-size: 13px; font-weight: 500; margin-bottom: 2px; line-height: 1.3; }
  .fp2-dl-meta{ font-size: 11.5px; color: var(--fp2-ink-muted); }

  
  .fp2-alerts{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
  }
  .fp2-alerts-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .fp2-alerts-head h3{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 16px;
  }
  .fp2-alert-item{
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s;
  }
  .fp2-alert-item:hover{ transform: translateX(2px); }
  .fp2-alert-item.fp2-danger{ background: var(--fp2-danger-soft); }
  .fp2-alert-item.fp2-warning{ background: var(--fp2-warning-soft); }
  .fp2-alert-item.fp2-info{ background: var(--fp2-surface-2); }
  .fp2-alert-ico{
    width: 32px; height: 32px;
    border-radius: 8px;
    display: grid; place-items: center;
    flex-shrink: 0;
    font-size: 16px;
  }
  .fp2-alert-item.fp2-danger .fp2-alert-ico{ background: var(--fp2-danger); color: #fff; }
  .fp2-alert-item.fp2-warning .fp2-alert-ico{ background: var(--fp2-warning); color: #fff; }
  .fp2-alert-item.fp2-info .fp2-alert-ico{ background: var(--fp2-primary); color: var(--fp2-accent); }
  .fp2-alert-body{ flex: 1; min-width: 0; }
  .fp2-alert-title{ font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
  .fp2-alert-meta{ font-size: 11.5px; color: var(--fp2-ink-soft); }

  
  .fp2-courses-row{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 22px;
  }
  .fp2-courses-row-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
  }
  .fp2-courses-row-head h3{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 18px;
  }
  .fp2-courses-row-head .fp2-link{
    font-size: 12px;
    color: var(--fp2-ink-muted);
    cursor: pointer;
    font-weight: 500;
  }
  .fp2-course-scroll{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  .fp2-course-mini{
    padding: 16px;
    border: 1px solid var(--fp2-line);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    background: var(--fp2-surface-2);
  }
  .fp2-course-mini::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fp2-primary), var(--fp2-accent));
  }
  .fp2-course-mini:hover{
    transform: translateY(-3px);
    box-shadow: var(--fp2-shadow);
    border-color: var(--fp2-primary);
  }
  .fp2-cm-code{
    font-family: 'Fraunces', serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
  }
  .fp2-cm-title{
    font-size: 12px;
    color: var(--fp2-ink-soft);
    margin-bottom: 12px;
    line-height: 1.3;
    min-height: 32px;
  }
  .fp2-cm-stats{
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--fp2-line-soft);
    font-size: 11.5px;
  }
  .fp2-cm-stat .fp2-l{ color: var(--fp2-ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .fp2-cm-stat .fp2-v{ font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; margin-top: 1px; }
  .fp2-cm-stat .fp2-v.fp2-good{ color: var(--fp2-success); }
  .fp2-cm-stat .fp2-v.fp2-warn{ color: var(--fp2-warning); }

  
  .fp2-stats-strip{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
  }
  .fp2-stat-card{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
  }
  .fp2-stat-card:hover{ transform: translateY(-2px); box-shadow: var(--fp2-shadow); }
  .fp2-stat-card .fp2-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fp2-ink-muted);
    font-weight: 600;
  }
  .fp2-stat-card .fp2-value{
    font-family: 'Fraunces', serif;
    font-size: 30px;
    font-weight: 500;
    margin: 6px 0 4px;
    letter-spacing: -0.02em;
    color: var(--fp2-primary);
  }
  .fp2-stat-card .fp2-delta{
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .fp2-stat-card .fp2-delta.fp2-up{ color: var(--fp2-success); }
  .fp2-stat-card .fp2-delta.fp2-down{ color: var(--fp2-danger); }
  .fp2-stat-card .fp2-delta.fp2-neutral{ color: var(--fp2-ink-muted); }
  .fp2-stat-card .fp2-spark{
    position: absolute;
    right: 16px; bottom: 16px;
    opacity: 0.5;
  }

  
  .fp2-card{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 22px;
  }
  .fp2-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .fp2-card-head h3{
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
  }
  .fp2-card-head .fp2-link{
    font-size: 12px;
    color: var(--fp2-ink-muted);
    cursor: pointer;
    font-weight: 500;
  }
  .fp2-card-head .fp2-link:hover{ color: var(--fp2-primary); }

  
  .fp2-course-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .fp2-course-card{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
  }
  .fp2-course-card:hover{ transform: translateY(-3px); box-shadow: var(--fp2-shadow-lg); border-color: var(--fp2-primary); }
  .fp2-course-card::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fp2-primary), var(--fp2-accent));
  }
  .fp2-cc-head{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
  .fp2-cc-code{ font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
  .fp2-cc-section{
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--fp2-surface-2);
    color: var(--fp2-ink-soft);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .fp2-cc-title{ font-size: 13.5px; color: var(--fp2-ink-soft); margin-bottom: 14px; line-height: 1.4; }
  .fp2-cc-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--fp2-line-soft); }
  .fp2-cc-stat .fp2-l{ font-size: 10.5px; color: var(--fp2-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .fp2-cc-stat .fp2-v{ font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; margin-top: 2px; }
  .fp2-cc-foot{ margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fp2-line-soft); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fp2-ink-muted); }
  .fp2-cc-foot .fp2-next{ color: var(--fp2-primary); font-weight: 500; }

  
  .fp2-table-wrap{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    overflow: hidden;
  }
  .fp2-tbl table{ width: 100%; border-collapse: collapse; }
  .fp2-tbl th{
    text-align: left;
    padding: 14px 18px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fp2-ink-muted);
    font-weight: 600;
    background: var(--fp2-surface-2);
    border-bottom: 1px solid var(--fp2-line);
  }
  .fp2-tbl td{
    padding: 14px 18px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--fp2-line-soft);
  }
  .fp2-tbl tr:last-child td{ border-bottom: none; }
  .fp2-tbl tr:hover td{ background: var(--fp2-surface-2); }
  .fp2-student-cell{ display: flex; align-items: center; gap: 10px; }
  .fp2-student-cell .fp2-av{
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--fp2-surface-2);
    color: var(--fp2-primary);
    display: grid; place-items: center;
    font-weight: 600;
    font-size: 11.5px;
    border: 1px solid var(--fp2-line);
  }
  .fp2-student-cell .fp2-nm{ font-weight: 500; }
  .fp2-student-cell .fp2-rg{ font-size: 11.5px; color: var(--fp2-ink-muted); font-family: 'SF Mono', monospace; }

  .fp2-standing{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
  }
  .fp2-st-excellent{ background: var(--fp2-success-soft); color: var(--fp2-success); }
  .fp2-st-good{ background: var(--fp2-surface-2); color: var(--fp2-ink-soft); border: 1px solid var(--fp2-line); }
  .fp2-st-watch{ background: var(--fp2-warning-soft); color: var(--fp2-warning); }
  .fp2-st-risk{ background: var(--fp2-danger-soft); color: var(--fp2-danger); }

  .fp2-bar{
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--fp2-line-soft);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 8px;
  }
  .fp2-bar > span{ display: block; height: 100%; background: var(--fp2-primary); border-radius: 3px; }
  .fp2-bar.fp2-good > span{ background: var(--fp2-success); }
  .fp2-bar.fp2-warn > span{ background: var(--fp2-warning); }
  .fp2-bar.fp2-bad > span{ background: var(--fp2-danger); }

  
  .fp2-att-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
  .fp2-att-stat{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
  }
  .fp2-att-stat .fp2-n{ font-family: 'Fraunces', serif; font-size: 28px; font-weight: 500; }
  .fp2-att-stat .fp2-l{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fp2-ink-muted); margin-top: 4px; font-weight: 600; }
  .fp2-att-stat.fp2-present .fp2-n{ color: var(--fp2-success); }
  .fp2-att-stat.fp2-absent .fp2-n{ color: var(--fp2-danger); }
  .fp2-att-stat.fp2-late .fp2-n{ color: var(--fp2-warning); }

  .fp2-att-row{
    display: grid;
    grid-template-columns: 40px 1fr 120px 100px 200px;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--fp2-line-soft);
    transition: background 0.15s;
  }
  .fp2-att-row:hover{ background: var(--fp2-surface-2); }
  .fp2-att-row .fp2-idx{ color: var(--fp2-ink-muted); font-size: 12px; font-family: 'SF Mono', monospace; }
  .fp2-att-options{ display: flex; gap: 6px; }
  .fp2-att-opt{
    flex: 1;
    padding: 7px 0;
    border: 1px solid var(--fp2-line);
    background: var(--fp2-surface);
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    color: var(--fp2-ink-soft);
    transition: all 0.15s;
    font-family: inherit;
  }
  .fp2-att-opt:hover{ border-color: var(--fp2-ink-muted); }
  .fp2-att-opt.fp2-sel-p{ background: var(--fp2-success); color: #fff; border-color: var(--fp2-success); }
  .fp2-att-opt.fp2-sel-a{ background: var(--fp2-danger); color: #fff; border-color: var(--fp2-danger); }
  .fp2-att-opt.fp2-sel-l{ background: var(--fp2-warning); color: #fff; border-color: var(--fp2-warning); }

  
  .fp2-msg-layout{ display: grid; grid-template-columns: 320px 1fr; gap: 0; background: var(--fp2-surface); border: 1px solid var(--fp2-line); border-radius: 14px; overflow: hidden; min-height: 560px; }
  .fp2-msg-list{ border-right: 1px solid var(--fp2-line); }
  .fp2-msg-list-head{ padding: 16px; border-bottom: 1px solid var(--fp2-line); display: flex; justify-content: space-between; align-items: center; }
  .fp2-msg-list-head h4{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 16px; }
  .fp2-msg-item{
    padding: 14px 16px;
    border-bottom: 1px solid var(--fp2-line-soft);
    cursor: pointer;
    transition: background 0.15s;
  }
  .fp2-msg-item:hover{ background: var(--fp2-surface-2); }
  .fp2-msg-item.fp2-active{ background: var(--fp2-surface-2); border-left: 3px solid var(--fp2-primary); padding-left: 13px; }
  .fp2-msg-item .fp2-from{ font-weight: 600; font-size: 13px; margin-bottom: 2px; display: flex; justify-content: space-between; }
  .fp2-msg-item .fp2-from .fp2-time{ font-size: 11px; color: var(--fp2-ink-muted); font-weight: 400; }
  .fp2-msg-item .fp2-subj{ font-size: 12.5px; color: var(--fp2-ink-soft); margin-bottom: 4px; }
  .fp2-msg-item .fp2-prev{ font-size: 12px; color: var(--fp2-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fp2-msg-item.fp2-unread .fp2-from::before{ content: ''; display: inline-block; width: 7px; height: 7px; background: var(--fp2-accent); border-radius: 50%; margin-right: 6px; vertical-align: middle; }

  .fp2-msg-view{ padding: 24px; display: flex; flex-direction: column; }
  .fp2-msg-view-head{ padding-bottom: 16px; border-bottom: 1px solid var(--fp2-line-soft); margin-bottom: 20px; }
  .fp2-msg-view-head h3{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 20px; margin-bottom: 8px; }
  .fp2-msg-view-head .fp2-meta{ font-size: 12.5px; color: var(--fp2-ink-muted); }
  .fp2-msg-body{ flex: 1; font-size: 13.5px; line-height: 1.7; color: var(--fp2-ink-soft); }
  .fp2-msg-reply{ margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--fp2-line-soft); }
  .fp2-msg-reply textarea{
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid var(--fp2-line);
    border-radius: 10px;
    background: var(--fp2-surface-2);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    outline: none;
    color: var(--fp2-ink);
  }
  .fp2-msg-reply textarea:focus{ border-color: var(--fp2-primary); }
  .fp2-msg-reply .fp2-actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

  
  .fp2-profile-layout{ display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
  .fp2-profile-main{ background: var(--fp2-surface); border: 1px solid var(--fp2-line); border-radius: 14px; padding: 28px; text-align: center; }
  .fp2-profile-main .fp2-big-av{
    width: 100px; height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fp2-primary), var(--fp2-primary-soft));
    color: var(--fp2-accent);
    display: grid; place-items: center;
    font-family: 'Fraunces', serif;
    font-size: 38px;
    font-weight: 500;
    margin: 0 auto 16px;
  }
  .fp2-profile-main h2{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; margin-bottom: 4px; }
  .fp2-profile-main .fp2-desig{ color: var(--fp2-ink-muted); font-size: 13px; margin-bottom: 16px; }
  .fp2-profile-main .fp2-id{ font-family: 'SF Mono', monospace; font-size: 12px; color: var(--fp2-ink-muted); padding: 6px 12px; background: var(--fp2-surface-2); border-radius: 6px; display: inline-block; }
  .fp2-profile-details{ background: var(--fp2-surface); border: 1px solid var(--fp2-line); border-radius: 14px; padding: 24px; }
  .fp2-detail-row{ display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--fp2-line-soft); }
  .fp2-detail-row:last-child{ border-bottom: none; }
  .fp2-detail-row .fp2-l{ font-size: 12px; color: var(--fp2-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding-top: 2px; }
  .fp2-detail-row .fp2-v{ font-size: 13.5px; }

  
  .fp2-grade-cell{
    font-family: 'SF Mono', monospace;
    font-size: 12.5px;
    text-align: center;
    padding: 6px 4px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .fp2-grade-cell:hover{ background: var(--fp2-surface-2); }
  .fp2-grade-cell.fp2-high{ color: var(--fp2-success); font-weight: 600; }
  .fp2-grade-cell.fp2-mid{ color: var(--fp2-ink); }
  .fp2-grade-cell.fp2-low{ color: var(--fp2-danger); font-weight: 600; }

  
  .fp2-survey-item{
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 14px;
    transition: all 0.2s;
  }
  .fp2-survey-item:hover{ box-shadow: var(--fp2-shadow); }
  .fp2-survey-head{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
  .fp2-survey-head h4{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; margin-bottom: 4px; }
  .fp2-survey-head .fp2-desc{ font-size: 13px; color: var(--fp2-ink-soft); max-width: 600px; }
  .fp2-survey-meta{ display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--fp2-ink-muted); }
  .fp2-survey-meta span{ display: inline-flex; align-items: center; gap: 4px; }

  
  .fp2-task{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fp2-line-soft);
  }
  .fp2-task:last-child{ border-bottom: none; }
  .fp2-task-date{
    width: 48px;
    flex-shrink: 0;
    text-align: center;
    padding: 6px 0;
    background: var(--fp2-surface-2);
    border-radius: 8px;
    border: 1px solid var(--fp2-line-soft);
  }
  .fp2-task-date .fp2-d{ font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; line-height: 1; }
  .fp2-task-date .fp2-m{ font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fp2-ink-muted); margin-top: 2px; }
  .fp2-task-date.fp2-urgent{ background: var(--fp2-warning-soft); border-color: var(--fp2-warning); }
  .fp2-task-date.fp2-urgent .fp2-d{ color: var(--fp2-warning); }
  .fp2-task-body{ flex: 1; }
  .fp2-task-title{ font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
  .fp2-task-meta{ font-size: 12px; color: var(--fp2-ink-muted); }
  .fp2-task-tag{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 8px;
  }
  .fp2-tag-reg{ background: var(--fp2-surface-2); color: var(--fp2-ink-soft); }
  .fp2-tag-qec{ background: #E9EDF0; color: #4E626F; }
  [data-theme="dark"] .fp2-tag-qec{ background: #232C31; color: #9BB0BD; }
  .fp2-tag-exam{ background: var(--fp2-warning-soft); color: var(--fp2-warning); }

  .fp2-pill{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
  }
  .fp2-pill-pending{ background: var(--fp2-warning-soft); color: var(--fp2-warning); }
  .fp2-pill-done{ background: var(--fp2-success-soft); color: var(--fp2-success); }
  .fp2-pill-draft{ background: var(--fp2-surface-2); color: var(--fp2-ink-muted); border: 1px solid var(--fp2-line); }

  .fp2-divider{ height: 1px; background: var(--fp2-line-soft); margin: 20px 0; }

  body.fp2::-webkit-scrollbar{ width: 8px; height: 8px; }
  body.fp2::-webkit-scrollbar-track{ background: transparent; }
  body.fp2::-webkit-scrollbar-thumb{ background: var(--fp2-line); border-radius: 4px; }
  body.fp2::-webkit-scrollbar-thumb:hover{ background: var(--fp2-ink-muted); }

  @media (max-width: 1200px) {
    .fp2-dash-grid{ grid-template-columns: 1fr; }
    .fp2-course-scroll{ grid-template-columns: repeat(3, 1fr); }
    .fp2-stats-strip{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    .fp2-app{ grid-template-columns: 1fr; }
    .fp2-sidebar{ display: none; }
    .fp2-content{ padding: 20px 16px; }
    .fp2-user-btn .fp2-nm{ display: none; }
    .fp2-user-btn{ padding: 0 4px; gap: 0; }
    .fp2-topbar{ padding: 14px 16px; }
    .fp2-course-scroll{ grid-template-columns: repeat(2, 1fr); }
    .fp2-nch-inner{ grid-template-columns: 1fr; }
    .fp2-countdown-ring{ margin: 0 auto; }
    .fp2-profile-layout{ grid-template-columns: 1fr; }
    .fp2-msg-layout{ grid-template-columns: 1fr; }
    .fp2-msg-list{ border-right: none; border-bottom: 1px solid var(--fp2-line); }
  }

  
  .fp2-app{ grid-template-columns: 222px 1fr; }
  .fp2-sidebar{ padding: 18px 16px; }
  .fp2-brand{ align-items: center; justify-content: flex-start; gap: 0;
           padding: 0 0 4px; border-bottom: 0; margin-bottom: 0; }
  .fp2-brand-rule{ width: 1px; align-self: stretch; background: var(--fp2-line); margin: 0 9px; }
  .fp2-brand .fp2-brand-mark{ display: none; }
  .fp2-brand-text{ line-height: 1.25; flex: none; }
  .fp2-brand-text .fp2-t1{ font-size: 12px; font-weight: 700; letter-spacing: 0.002em;
                    color: var(--fp2-ink); text-transform: none; white-space: nowrap; }
  .fp2-brand-text .fp2-t1 em{ font-style: normal; color: var(--fp2-accent); }
  .fp2-brand-text .fp2-t2{ font-size: 9.5px; font-weight: 700; letter-spacing: 0.002em;
                    text-transform: none; margin-top: 1px; color: var(--fp2-ink);
                    white-space: nowrap; }

  .fp2-nav-section{ margin-top: 0; }
  .fp2-nav-label{ padding: 17px 0 6px; font-size: 10px; letter-spacing: 0.14em; color: var(--fp2-ink-muted); }
  .fp2-nav-item{ padding: 6px 0; gap: 11px; font-size: 13.5px; border-radius: 0; color: var(--fp2-ink-soft); }
  .fp2-nav-item:hover{ background: transparent; color: var(--fp2-ink); }
  .fp2-nav-item.fp2-active{ background: transparent !important; color: var(--fp2-accent) !important; font-weight: 600; }
  .fp2-nav-item.fp2-active::before{ content: ''; position: absolute; left: -16px; top: 2px; bottom: 2px;
                             width: 3px; background: var(--fp2-accent); }
  .fp2-nav-item .fp2-ico{ opacity: 1; }
  .fp2-nav-item.fp2-active .fp2-ico{ color: var(--fp2-accent); }
  .fp2-nav-item .fp2-badge{ background: transparent; color: var(--fp2-ink-muted); font-size: 11.5px;
                     font-weight: 500; padding: 0; border-radius: 0; }
  .fp2-nav-item.fp2-active .fp2-badge{ color: var(--fp2-accent); }

  

  
  .fp2-topbar{ height: 54px; padding: 0 26px; gap: 14px; }
  .fp2-topbar .fp2-crumb{ font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--fp2-ink-muted); }
  .fp2-topbar .fp2-crumb b{ font-weight: 600; color: var(--fp2-ink); }
  .fp2-tb-term{ font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em;
             text-transform: uppercase; color: var(--fp2-ink-muted); margin-left: auto; }
  .fp2-search{ flex: none; width: 230px; margin-left: auto; }
  .fp2-search input{ height: 38px; border-radius: 8px; padding: 0 38px 0 14px; font-size: 13.5px; }
  .fp2-search svg{ left: auto; right: 13px; }
  .fp2-user-btn{ display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 13px 0 4px;
              border: 1px solid var(--fp2-line); background: var(--fp2-surface); border-radius: 999px;
              cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
              color: var(--fp2-ink); white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
  .fp2-user-btn:hover{ border-color: var(--fp2-ink-muted); background: var(--fp2-surface-2); }
  .fp2-user-btn .fp2-av{ width: 28px; height: 28px; border-radius: 50%; flex: none;
                  background: var(--fp2-accent-tint); color: var(--fp2-accent-warm);
                  display: grid; place-items: center; font-size: 11.5px; font-weight: 600; }

  .fp2-tnum{ font-variant-numeric: tabular-nums; }

  
  :root{  }
  .fp2-brand-logo{ width: 34px; height: 34px; flex: none;
                 }
  body.fp2-fp2 .fp2-seal .fp2-seal-logo{  }

  
  .fp2-rmod-tabs{ display: flex; align-items: center; gap: 16px;
               padding: 15px 0 9px; border-top: 1px solid var(--fp2-line); margin-top: 15px; }
  .fp2-rtab{ border: 0; background: none; padding: 0 0 5px; cursor: pointer;
          font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
          letter-spacing: 0.12em; text-transform: uppercase; color: var(--fp2-ink-muted);
          border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
  .fp2-rtab:hover{ color: var(--fp2-ink); }
  .fp2-rtab.fp2-on{ color: var(--fp2-ink); border-bottom-color: var(--fp2-accent); }
  .fp2-rtab .fp2-rtab-n,
  .fp2-shead h3 .fp2-rtab-n{ font-size: 9.5px; font-weight: 700; letter-spacing: 0;
                  color: var(--fp2-accent-warm); margin-left: 5px; }
  
  .fp2-rstack{ display: grid; }
  .fp2-rstack > .fp2-rpane{ grid-area: 1 / 1; }
  .fp2-rpane-off{ visibility: hidden; pointer-events: none; }

  .fp2-rmod-foot{ display: flex; justify-content: flex-end; padding-top: 11px; }
  .fp2-rmod-foot .fp2-go{ font-size: 12.5px; color: var(--fp2-ink-muted); cursor: pointer; }
  .fp2-rmod-foot .fp2-go:hover{ color: var(--fp2-accent); }

  
  .fp2-cmr{ display: grid; grid-template-columns: 7px 30px minmax(0,1fr);
         align-items: start; gap: 11px; padding: 12px 0;
         border-top: 1px solid var(--fp2-line); cursor: pointer; }
  .fp2-cmr:first-of-type{ border-top: 0; }
  .fp2-cmr-dot{ width: 6px; height: 6px; border-radius: 50%; margin-top: 8px;
             background: var(--fp2-accent); }
  .fp2-cmr:not(.fp2-unread) .fp2-cmr-dot{ background: transparent;
                               box-shadow: inset 0 0 0 1px var(--fp2-line-soft, var(--fp2-line)); }
  .fp2-cmr-av{ width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
            background: var(--fp2-accent-tint); color: var(--fp2-accent-warm);
            font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
  .fp2-cmr-b{ min-width: 0; }
  .fp2-cmr-top{ display: flex; align-items: baseline; gap: 8px; }
  .fp2-cmr-from{ font-size: 12px; font-weight: 600; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
  .fp2-cmr-time{ margin-left: auto; flex: none; font-size: 10px; color: var(--fp2-ink-muted); }
  .fp2-cmr-sub{ font-size: 12px; font-weight: 600; line-height: 1.35; margin-top: 2px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fp2-cmr-p{ font-size: 11.5px; line-height: 1.4; color: var(--fp2-ink-muted); margin-top: 2px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fp2-cmr:hover .fp2-cmr-from{ color: var(--fp2-accent); }

  
  .fp2-frm{ display: grid; gap: 14px 16px; align-items: end; }
  .fp2-frm-l{ display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em;
           text-transform: uppercase; color: var(--fp2-ink-muted); margin-bottom: 6px; }
  .fp2-inp, .fp2-sel{ width: 100%; height: 36px; padding: 0 11px; box-sizing: border-box;
               font-family: 'Inter', sans-serif; font-size: 13px; color: var(--fp2-ink);
               background: var(--fp2-surface); border: 1px solid var(--fp2-line);
               border-radius: 7px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
  .fp2-inp::placeholder{ color: var(--fp2-ink-muted); }
  .fp2-inp:focus, .fp2-sel:focus{ border-color: var(--fp2-accent); box-shadow: 0 0 0 3px rgba(242,106,27,0.10); }
  .fp2-sel{ cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 30px;
         background-repeat: no-repeat; background-position: right 11px center; background-size: 11px 8px;
         background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23817B70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
  .fp2-frm-date{ position: relative; }
  .fp2-frm-date .fp2-cal{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
                   color: var(--fp2-ink-muted); pointer-events: none; }
  .fp2-frm-date .fp2-inp{ padding-right: 32px; }
  .fp2-chk-row{ display: flex; align-items: center; gap: 9px; height: 36px; }
  .fp2-chk{ width: 16px; height: 16px; margin: 0; accent-color: var(--fp2-accent-warm); cursor: pointer; }
  .fp2-chk-row label{ font-size: 13px; color: var(--fp2-ink-soft); cursor: pointer; }
  .fp2-tbtn{ border: 1px solid var(--fp2-line); background: var(--fp2-surface); border-radius: 6px;
          width: 28px; height: 28px; display: inline-grid; place-items: center; cursor: pointer;
          color: var(--fp2-ink-muted); transition: all 0.15s; }
  .fp2-tbtn:hover{ color: var(--fp2-ink); border-color: var(--fp2-ink-muted); }
  .fp2-tbtn.fp2-danger:hover{ color: #B3402A; border-color: #B3402A; }
  .fp2-pri{ display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; }
  .fp2-pri::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .fp2-pri-high{ color: #B3402A; }
  .fp2-pri-med{ color: var(--fp2-accent-warm); }
  .fp2-pri-low{ color: var(--fp2-ink-muted); }

  
  .fp2-page-dashboard{ max-width: 1360px; }
  .fp2-d4-head{ padding: 2px 0 11px; border-bottom: 1px solid var(--fp2-line); }
  .fp2-d4-greet{ font-size: 13px; color: var(--fp2-ink-muted); }
  .fp2-d4-date{ font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 600;
             letter-spacing: -0.02em; line-height: 1.15; margin-top: 5px; }
  .fp2-d4-meta{ font-size: 12.5px; color: var(--fp2-ink-muted); margin-top: 7px; }

  /* Announcement ticker (client, 2026-09-30: "like there is in student
     portal") - ported from StudentPortal's studentportal-v2.css, same
     shape, retokened to this file's own --fp2-* names (--sp2-text ->
     --fp2-ink, --sp2-muted -> --fp2-ink-muted, --sp2-border -> --fp2-line,
     --sp2-ember-500/600/50 -> --fp2-accent/-accent-warm/-accent-tint,
     Part 1's own accent family, NOT Part 2's login-page --fp2-ember-* ramp -
     the two are unrelated tokens sharing a hue by coincidence, see this
     file's own header comment). The pulse keyframe is named fp2tickerpulse,
     not fp2pulse: fp2pulse already exists (~line 440, .fp2-nch-label's
     opacity fade, a different shape entirely) - reusing that name would
     have silently repointed both animations at whichever rule the cascade
     picks. initTicker() in facultyportal-v2.js duplicates .fp2-ticker-move's
     content once so this keyframe's -50% loops seamlessly. */
  .fp2-ticker{ display: flex; align-items: center; gap: 12px; color: var(--fp2-ink);
            border: 1px solid var(--fp2-line); border-radius: 10px; box-shadow: var(--fp2-shadow-sm);
            padding: 0 8px 0 14px; height: 38px; overflow: hidden; position: relative;
            background: var(--fp2-surface); margin: 16px 0 2px; }
  .fp2-ticker::after{ content: ''; position: absolute; inset: 0; opacity: .3; pointer-events: none;
            background: repeating-linear-gradient(135deg, rgba(216,88,14,.04) 0 1px, transparent 1px 16px); }
  .fp2-ticker > *{ position: relative; z-index: 1; }
  .fp2-ticker-label{ display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800;
            color: var(--fp2-accent-warm); text-transform: uppercase; letter-spacing: .06em; flex: none;
            padding-right: 12px; border-right: 1px solid var(--fp2-line); }
  .fp2-ticker-live{ width: 8px; height: 8px; border-radius: 50%; background: var(--fp2-accent);
            box-shadow: 0 0 0 0 rgba(242,106,27,.5); animation: fp2tickerpulse 1.8s ease-out infinite; }
  @keyframes fp2tickerpulse{ 0%{ box-shadow: 0 0 0 0 rgba(242,106,27,.45); } 70%{ box-shadow: 0 0 0 7px rgba(242,106,27,0); } 100%{ box-shadow: 0 0 0 0 rgba(242,106,27,0); } }
  .fp2-ticker-view{ flex: 1; overflow: hidden; position: relative; height: 100%; }
  .fp2-ticker-move{ display: flex; align-items: center; position: absolute; top: 0; height: 100%;
            white-space: nowrap; will-change: transform; animation: fp2ticker 34s linear infinite; }
  .fp2-ticker:hover .fp2-ticker-move{ animation-play-state: paused; }
  .fp2-ticker-item{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
            color: var(--fp2-ink-muted); margin-right: 38px; }
  .fp2-ticker-item b{ color: var(--fp2-ink); font-weight: 700; }
  .fp2-ti-ico{ display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
            background: var(--fp2-accent-tint); color: var(--fp2-accent-warm); flex: none; }
  .fp2-ti-ico svg{ width: 12px; height: 12px; }
  @keyframes fp2ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
  .fp2-ticker-all{ flex: none; font-size: 11px; color: var(--fp2-accent-warm); font-weight: 700;
            padding-left: 10px; border-left: 1px solid var(--fp2-line); }
  .fp2-ticker-all:hover{ opacity: .85; }

  /* Mobile app download card (client, 2026-09-29; single file-download
     button, not a store link - client, 2026-09-29) - a self-contained
     banner between the greeting header and the two-column grid below, so
     it never touches either column's width/height math. The download link
     itself is wired by someone else later; this only owns the look.

     .fp2-appcard-btn is its OWN class, deliberately NOT .fp2-btn: this file
     has two unrelated rules both named .fp2-btn (Part 1's small dashboard
     pill ~line 273, Part 2's 64px-tall uppercase LOGIN submit button ~line
     1777 - same class name, different components, never meant to collide).
     Confirmed live in a harness screenshot: .fp2-btn.fp2-primary here
     rendered as the tall uppercase login button, not the compact pill this
     card needs, because Part 2 loads later and wins the cascade tie on
     every property Part 1's .fp2-primary override doesn't touch (height,
     text-transform, letter-spacing, padding). Same ink-gradient fill as
     the icon tile above and the sidebar brand mark, built fresh rather
     than fixing the collision at its source - Part 2's .fp2-btn is a real,
     live login button, out of scope for a dashboard card. */
  .fp2-appcard{
    display: flex; align-items: center; gap: 18px;
    padding: 16px 22px;
    margin: 16px 0 2px;
    background: var(--fp2-surface);
    border: 1px solid var(--fp2-line);
    border-radius: 14px;
    box-shadow: var(--fp2-shadow-sm);
  }
  .fp2-appcard-ico{
    width: 48px; height: 48px; flex: none;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--fp2-primary), var(--fp2-primary-deep));
    color: var(--fp2-accent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(60, 44, 28, 0.20);
  }
  .fp2-appcard-body{ flex: 1; min-width: 0; }
  .fp2-appcard-body h4{
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 16px;
    letter-spacing: -0.01em; margin: 0 0 2px;
  }
  .fp2-appcard-body p{ font-size: 12.5px; color: var(--fp2-ink-muted); margin: 0; }
  .fp2-appcard-btns{ display: flex; flex: none; }
  .fp2-appcard-btn{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 9px;
    border: 1px solid var(--fp2-primary);
    background: var(--fp2-primary);
    color: #fff !important;
    font-size: 13px; font-weight: 600;
    text-transform: none; letter-spacing: normal;
    transition: all 0.15s;
  }
  .fp2-appcard-btn:hover{ background: var(--fp2-primary-soft); border-color: var(--fp2-primary-soft); }
  [data-theme="dark"] .fp2-appcard-btn{ color: #F2EADC !important; }
  .fp2-appcard-btn svg{ width: 16px; height: 16px; flex: none; }
  @media (max-width: 720px){
    .fp2-appcard{ flex-wrap: wrap; }
    .fp2-appcard-btns{ width: 100%; margin-top: 2px; }
    .fp2-appcard-btn{ width: 100%; justify-content: center; }
  }

  .fp2-d4-cols{ display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 28px; align-items: start; }
  .fp2-d4-right{ border-left: 1px solid var(--fp2-line); padding-left: 25px; }
  .fp2-d4-cols2{ display: grid; grid-template-columns: minmax(0,1fr) 224px; gap: 44px;
              align-items: start; }

  .fp2-shead{ display: flex; align-items: center; justify-content: space-between; gap: 14px;
           padding: 19px 0 8px; }
  .fp2-shead h3{ font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
              text-transform: uppercase; color: var(--fp2-ink-soft); }
  .fp2-shead .fp2-go{ font-size: 12.5px; color: var(--fp2-ink-muted); cursor: pointer; }
  .fp2-shead .fp2-go:hover{ color: var(--fp2-accent); }

  
  .fp2-ag-r{ display: grid; grid-template-columns: 62px 22px minmax(0,1fr) auto; align-items: start;
          padding: 8px 14px 8px 0; margin: 0; position: relative; }
  .fp2-ag-r.fp2-on{ background: var(--fp2-accent-tint); border-radius: 8px; padding: 14px; margin: 3px -14px; }
  .fp2-ag-t{ font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 1px; }
  .fp2-ag-r.fp2-on .fp2-ag-t{ color: var(--fp2-accent); }
  .fp2-ag-rail{ position: relative; align-self: stretch; }
  .fp2-ag-rail::before{ content: ''; position: absolute; left: 4px; top: -12px; bottom: -12px;
                     width: 1.5px; background: var(--fp2-line); }
  .fp2-ag-r.fp2-on .fp2-ag-rail::before{ background: var(--fp2-accent); }
  .fp2-ag-r:first-child .fp2-ag-rail::before{ top: 7px; }
  .fp2-ag-r:last-child .fp2-ag-rail::before{ bottom: calc(100% - 7px); }
  .fp2-ag-dot{ position: absolute; left: 0; top: 2px; width: 9px; height: 9px; border-radius: 50%;
            background: var(--fp2-line-strong, #C9BFAC); border: 2px solid var(--fp2-bg); }
  .fp2-ag-r.fp2-on .fp2-ag-dot{ background: var(--fp2-accent); border-color: var(--fp2-accent-tint); }
  .fp2-ag-title{ font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
  .fp2-ag-r.fp2-on .fp2-ag-title{ color: var(--fp2-accent); }
  .fp2-ag-sub{ font-size: 12.5px; line-height: 1.35; color: var(--fp2-ink-muted); margin-top: 2px; }
  .fp2-ag-desc{ font-size: 12.5px; line-height: 1.35; color: var(--fp2-ink-soft); margin-top: 2px; }
  .fp2-ag-btns{ display: flex; gap: 8px; margin-top: 11px; }
  .fp2-ag-side{ text-align: right; padding-left: 12px; white-space: nowrap; }
  .fp2-ag-ok{ display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
           font-weight: 500; color: var(--fp2-success); }
  .fp2-ag-in{ display: inline-block; font-size: 12px; font-weight: 500; color: var(--fp2-accent);
           background: var(--fp2-surface); border: 1px solid var(--fp2-line); border-radius: 6px; padding: 4px 9px; }

  .fp2-bt{ display: inline-flex; align-items: center; justify-content: center; height: 33px;
        padding: 0 14px; border-radius: 7px; border: 1px solid transparent; cursor: pointer;
        font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
        transition: background 0.14s, border-color 0.14s, color 0.14s; }
  /* color needs !important on both variants: body.fp2 a:hover{color:var(--fp2-accent)}
     (facultyportal-v2-compat.css) is (0,2,2) - element+class+element+pseudo-class -
     which already beats a plain .fp2-bt.fp2-pri's (0,2,0) on hover, same global
     anchor-color specificity bug this project has hit before (see e.g. the mobile
     app card button). On .fp2-pri specifically that made "Take attendance"'s hover
     text the exact same color as its own hover background - invisible (client,
     2026-10-01). */
  .fp2-bt.fp2-pri{ background: var(--fp2-accent-warm); color: #fff !important; font-weight: 600; }
  .fp2-bt.fp2-pri:hover{ background: var(--fp2-accent); }
  .fp2-bt.fp2-sec{ background: var(--fp2-surface); border-color: var(--fp2-line); color: var(--fp2-ink) !important; }
  .fp2-bt.fp2-sec:hover{ border-color: var(--fp2-ink-muted); }

  
  .fp2-mc{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fp2-mc-i{ padding: 2px 17px; border-left: 1px solid var(--fp2-line); cursor: pointer; }
  .fp2-mc-i:first-child{ padding-left: 0; border-left: 0; }
  .fp2-mc-i:last-child{ padding-right: 0; }
  .fp2-mc-code{ font-size: 12.5px; font-weight: 700; color: var(--fp2-accent); letter-spacing: 0.02em; }
  .fp2-mc-title{ font-family: 'Fraunces', Georgia, serif; font-size: 16.5px; font-weight: 600;
              letter-spacing: -0.012em; margin-top: 5px; line-height: 1.25; }
  .fp2-mc-sub{ font-size: 12px; line-height: 1.35; color: var(--fp2-ink-muted); margin-top: 4px; }
  .fp2-mc-foot{ display: flex; align-items: flex-end; gap: 10px; margin-top: 11px; flex-wrap: nowrap;
             padding-top: 11px; border-top: 1px solid var(--fp2-line); }
  .fp2-mc-s b{ display: block; font-size: 18px; font-weight: 600; line-height: 1; }
  .fp2-mc-s{ flex: none; }
  .fp2-mc-s span{ display: block; font-size: 10.5px; color: var(--fp2-ink-muted); margin-top: 4px; }
  .fp2-mc-next{ margin-left: auto; text-align: right; font-size: 10.5px; color: var(--fp2-ink-muted); white-space: nowrap; }
  .fp2-mc-next b{ display: block; font-size: 11.5px; font-weight: 600; color: var(--fp2-accent); margin-top: 2px; white-space: nowrap; }
  .fp2-mc-arrow{ align-self: flex-end; color: var(--fp2-ink-muted); font-size: 13px; flex: none; padding-bottom: 2px; }
  .fp2-mc-i:hover .fp2-mc-arrow{ color: var(--fp2-accent); }

  
  .fp2-dl4{ display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 14px;
         padding: 7px 0; border-bottom: 1px solid var(--fp2-line); cursor: pointer; }
  .fp2-dl4:last-of-type{ border-bottom: 0; }
  .fp2-dl4-m{ font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
           text-transform: uppercase; color: var(--fp2-ink-muted); text-align: center; }
  .fp2-dl4-n{ font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--fp2-accent);
           line-height: 1; text-align: center; margin-top: 2px; }
  .fp2-dl4-t{ font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
  .fp2-dl4-s{ font-size: 12px; line-height: 1.35; color: var(--fp2-ink-muted); margin-top: 2px; }
  .fp2-dl4-p{ display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 500;
           color: var(--fp2-ink-muted); background: var(--fp2-bg-soft); border: 1px solid var(--fp2-line);
           border-radius: 5px; padding: 2px 7px; }
  .fp2-dl4:hover .fp2-dl4-t{ color: var(--fp2-accent); }

  
  .fp2-tk4{ display: flex; align-items: center; gap: 11px; padding: 6px 0;
         border-bottom: 1px solid var(--fp2-line); cursor: pointer; }
  .fp2-tk4:last-of-type{ border-bottom: 0; }
  .fp2-tk4-i{ width: 24px; height: 24px; border-radius: 7px; background: var(--fp2-bg-soft);
           display: grid; place-items: center; color: var(--fp2-ink-soft); flex: none; }
  .fp2-tk4.fp2-hot .fp2-tk4-i{ background: var(--fp2-accent-tint); color: var(--fp2-accent-warm); }
  .fp2-tk4-t{ font-size: 13px; font-weight: 600; line-height: 1.3; }
  .fp2-tk4-s{ font-size: 11.5px; line-height: 1.25; color: var(--fp2-ink-muted); margin-top: 0; }
  .fp2-tk4-n{ margin-left: auto; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .fp2-tk4:hover .fp2-tk4-t{ color: var(--fp2-accent); }

  @media (max-width: 1180px) {
    .fp2-d4-cols, .fp2-d4-cols2{ grid-template-columns: 1fr; }
    .fp2-d4-right{ border-left: 0; padding-left: 0; margin-left: 0;
                border-top: 1px solid var(--fp2-line); margin-top: 26px; }
    .fp2-mc{ grid-template-columns: 1fr; }
    .fp2-mc-i{ border-left: 0; padding: 18px 0; border-top: 1px solid var(--fp2-line); }
    .fp2-mc-i:first-child{ border-top: 0; }
  }


/* ===================== PART 2 - LOGIN (from Student Portal V2) ===================== */
  /* ==========================================================================
     LOGIN - ported from the V2 StudentPortal login page
     (studentportal-v2.css tokens + login block, plus the login rules from
     studentportal-v2-compat.css). Scoped to body.fp2, which is on only
     while the login is showing, so the workspace never inherits it.
     ========================================================================== */
  .fp2-hide{ display: none !important; }
  :root{
    --fp2-serif:'Fraunces',Georgia,'Times New Roman',serif;
    --fp2-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

    /* ---- BRAND ORANGE · exact brand hue (#F26A1B), unchanged.
       We do NOT shift the color — we change its ROLE: rationed as
       an accent against warm neutrals so it reads refined, not loud. */
    --fp2-ember-50:#FEF3EB;--fp2-ember-100:#FCE1D3;--fp2-ember-200:#FBD1BD;
    --fp2-ember-300:#FAC2A7;--fp2-ember-400:#F6975F;--fp2-ember-500:#F26A1B;
    --fp2-ember-600:#D8580E;--fp2-ember-700:#B4480A;

    /* ---- UNIVERSITY BRAND ----
       UIT University blue. The ember above is the eDU SMARTZ product
       brand; this is the institution's. Per-deployment: swap these. */
    --fp2-brand:#1A4E9E;--fp2-brand-600:#153F80;--fp2-brand-50:#EBF1F9;

    /* ---- SLATE · dusty-blue counterpoint (relief + balance) ---- */
    --fp2-slate-100:#E8EDF0;--fp2-slate-200:#D4DDE2;--fp2-slate-300:#AEBDC6;
    --fp2-slate-500:#5F7482;--fp2-slate-600:#485866;

    /* ---- WARM NEUTRALS · bone → sand → greige → espresso ink ---- */
    --fp2-paper:var(--fp2-bg);--fp2-sand:#F2E9DA;
    --fp2-border:var(--fp2-line);--fp2-border-strong:#D8CDBB;
    --fp2-text:var(--fp2-ink);--fp2-muted:var(--fp2-ink-muted);--fp2-faint:#AAA090;
    --fp2-espresso:#2B231C;--fp2-espresso-2:#38291F;

    /* ---- semantic accents, kept warm & low-saturation ---- */
    --fp2-ok:#5F7B57;--fp2-ok-tint:#E9EFE2;
    --fp2-warn:#F26A1B;--fp2-warn-tint:#FCE1D3;
    --fp2-crit:#B0553D;--fp2-crit-tint:#F5E4DB;

    /* ---- aliases: recolor the original markup coherently ----
       everything that used to be a different orange/blue/purple
       now resolves into the disciplined ember + slate + neutral set */
    --fp2-blue:var(--fp2-slate-500);--fp2-blue-600:var(--fp2-slate-600);--fp2-blue-500:var(--fp2-slate-500);--fp2-blue-tint:var(--fp2-slate-100);
    --fp2-lblue:var(--fp2-slate-300);--fp2-lblue-tint:#EEF2F3;
    --fp2-skyblue:var(--fp2-slate-500);--fp2-skyblue-tint:var(--fp2-slate-100);
    --fp2-cyan:var(--fp2-slate-500);--fp2-cyan-tint:var(--fp2-slate-100);
    --fp2-purple:var(--fp2-slate-600);--fp2-purple-600:var(--fp2-slate-600);--fp2-purple-tint:#E6ECEF;
    --fp2-lavender:#E4DCCF;--fp2-lavender-tint:#F2ECE2;
    --fp2-orange:var(--fp2-ember-500);--fp2-orange-500:var(--fp2-ember-500);--fp2-orange-600:var(--fp2-ember-600);
    --fp2-orange-400:var(--fp2-ember-400);--fp2-orange-300:var(--fp2-ember-300);--fp2-orange-200:var(--fp2-ember-200);
    --fp2-orange-100:var(--fp2-ember-100);--fp2-orange-tint:var(--fp2-ember-50);
    --fp2-orange-grad:linear-gradient(120deg,var(--fp2-ember-400),var(--fp2-ember-600));
    --fp2-grad:linear-gradient(135deg,var(--fp2-ember-400),var(--fp2-ember-600) 92%);

    --fp2-ground:var(--fp2-paper);
    --fp2-shadow-hov:0 14px 28px -14px rgba(60,44,28,.18),0 4px 10px -4px rgba(60,44,28,.09);
    --fp2-shadow-ember:0 8px 18px -8px rgba(216,88,14,.38);
    --fp2-r:14px;--fp2-r-sm:10px;
    --fp2-nav-w:74px;
  }
body.fp2 *,body.fp2{box-sizing:border-box}
  [hidden]{display:none!important}
  body.fp2{margin:0}
  body.fp2{color:var(--fp2-text);font-family:var(--fp2-sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;
    background:var(--fp2-paper);
    background-image:
      radial-gradient(1100px 620px at 100% -8%,rgba(242,106,27,.07),transparent 60%),
      radial-gradient(880px 540px at -6% 3%,rgba(246,151,95,.07),transparent 58%),
      radial-gradient(760px 480px at 55% 112%,rgba(232,214,186,.42),transparent 62%);
    background-attachment:fixed}
  /* film grain over the whole page — kills the sterile vector look */
  body.fp2::after{content:"";position:fixed;inset:0;z-index:2147483647;pointer-events:none;
    opacity:.4;mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:150px 150px;animation:fp2grainDrift 90s linear infinite}
  .fp2-ui h1,.fp2-ui h2,.fp2-ui h3,.fp2-ui h4{margin:0;font-weight:600;text-wrap:balance}
  .fp2-ui a{color:inherit;text-decoration:none}
  .fp2-ui button{font-family:inherit;cursor:pointer}
  .fp2-tnum{font-variant-numeric:tabular-nums}
  .fp2-ui svg{display:block}

  /* MOTION */
  @keyframes fp2fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes fp2grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes fp2growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes fp2draw{to{stroke-dashoffset:0}}
  @keyframes fp2drift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(2deg)}}
  .fp2-reveal{animation:fp2fadeUp .5s cubic-bezier(.2,.7,.3,1) both}
  .fp2-card,.fp2-p-links a,.fp2-icon-btn,.fp2-btn,.fp2-btn-sm,.fp2-btn-ghost,.fp2-av,.fp2-quick a,.fp2-link,.fp2-card-head a,.fp2-hbtn{transition:transform .18s ease,box-shadow .22s ease,background .18s ease,border-color .18s ease,color .15s ease}
  .fp2-card:hover{transform:translateY(-3px);box-shadow:var(--fp2-shadow-hov);border-color:var(--fp2-border-strong)}
  @media (prefers-reduced-motion:reduce){body.fp2 *{animation:none!important;transition:none!important}body.fp2::after,.fp2-login::before{animation:none!important}.fp2-card:hover{transform:none}
    .fp2-chart2 .fp2-line{stroke-dashoffset:0}.fp2-donut .fp2-seg1{stroke-dashoffset:0}.fp2-donut .fp2-seg2{opacity:1}.fp2-mini i,.fp2-att-bar i,.fp2-fee-meter i,.fp2-chart2 .fp2-bar{transform:none}}


  /* ============ LOGIN — EDITORIAL ARCHITECTURE ============
     One sheet of paper, edge to edge: no white panel, no grey panel, no
     divider. The drawing is deliberately unfinished — a third of the
     secondary detail is eroded, ink falls off from the centre bay
     outward, and a radial mask dissolves the edges into the page, so the
     eye lands on the entrance and nowhere else.
     Colour is rationed to two ember marks (the eyebrow dot, the focus
     rule). The primary action is charcoal, going bronze on hover. */
  .fp2-login{position:relative;min-height:100vh;display:grid;
    grid-template-columns:clamp(400px,44%,640px) 1fr;align-items:start;
    overflow:hidden;padding:0;background:var(--fp2-paper);
    background-image:linear-gradient(97deg,#FBF4E8 40%,#FAF1E2 72%,#F7EBD9 100%)}
  /* one quiet gradient, deepening toward the illustration to carry the eye
     across; the only two glows are behind the headline and the tower */
  /* premium stationery, almost invisible */
  .fp2-login::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3;
    mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:150px 150px;
    animation:fp2grainDrift 90s linear infinite}
  @keyframes fp2grainDrift{from{background-position:0 0}to{background-position:150px 150px}}

  /* ---------- left ---------- */
  .fp2-sheet-form{position:relative;z-index:2;min-width:0;padding:clamp(24px,6vh,56px) clamp(32px,4.4vw,72px) 24px;
    transition:opacity .5s ease,transform .6s ease}
  .fp2-sf-in{position:relative;z-index:1;width:100%;max-width:392px}
  /* one intentional focal glow — soft warmth behind the headline only */
  .fp2-sf-in::before{content:"";position:absolute;z-index:-1;left:-110px;top:30px;width:560px;height:380px;
    border-radius:50%;pointer-events:none;filter:blur(34px);
    background:radial-gradient(closest-side,rgba(242,106,27,.10),rgba(246,151,95,.05) 55%,transparent 72%)}

  /* embossed seal — light copy offset under a dark copy reads as debossing */
  /* deliberate half-crop: the circle's centre sits on the column's left edge,
     vertically centred — cropped on purpose, not by accident */
  .fp2-seal{position:absolute;z-index:0;left:-420px;top:calc(50vh - 420px);
    width:840px;height:840px;pointer-events:none}
  /* both copies pinned to the same box: the dark copy is the emboss shadow
     UNDER the white one — as flowing blocks it stacked 840px below and
     could drift into the page */
  .fp2-seal svg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .fp2-seal .fp2-s-dark{opacity:.10;color:#8A5A2B}
  .fp2-seal .fp2-s-light{opacity:.75;color:#fff;transform:translate(-3px,-3px)}

  .fp2-sf-mark{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;
    font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--fp2-ink);font-weight:700}
  .fp2-sf-mark span{letter-spacing:.16em;font-size:9px;color:var(--fp2-ink);font-weight:600;
    border-left:1px solid var(--fp2-border-strong);padding-left:8px}
  .fp2-sf-rule{height:1px;background:var(--fp2-ink);opacity:.8;margin-top:16px;transform-origin:left;
    animation:fp2grow 1.1s .1s cubic-bezier(.2,.7,.3,1) both}
  .fp2-sf-eye{display:flex;align-items:center;gap:9px;margin-top:32px;
    font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--fp2-ink);font-weight:700}
  .fp2-sf-eye i{width:5px;height:5px;border-radius:50%;background:var(--fp2-ember-500);flex:none}
  .fp2-sf-in h1{font-family:var(--fp2-serif);font-size:clamp(38px,4.4vw,56px);line-height:.98;letter-spacing:-.035em;
    color:var(--fp2-ink);font-weight:600;margin-top:16px;margin-left:-3px}  /* optical: serif side bearing */
  /* small caps + tracking — same serif, more intent than generic italic */
  .fp2-sf-arc{margin:24px 0 0;font-family:var(--fp2-serif);font-size:14px;line-height:1.5;color:var(--fp2-espresso);
    font-style:normal;font-variant:small-caps;letter-spacing:.16em}
  .fp2-sf-form{margin-top:32px}
  /* entrance: the column settles in top-to-bottom, then stays still */
  .fp2-sf-eye{animation:fp2fadeUp .7s .08s cubic-bezier(.16,.84,.34,1) both}
  .fp2-sf-in h1{animation:fp2fadeUp .9s .16s cubic-bezier(.16,.84,.34,1) both}
  .fp2-sf-arc{animation:fp2fadeUp .8s .28s cubic-bezier(.16,.84,.34,1) both}
  .fp2-sf-form{animation:fp2fadeUp .8s .4s cubic-bezier(.16,.84,.34,1) both}
  /* animated ember underline beneath the tagline */
  .fp2-sf-arc::after{content:"";display:block;width:64px;height:2px;background:var(--fp2-ember-500);
    margin-top:12px;transform:scaleX(0);transform-origin:left;
    animation:fp2grow .8s 1.15s cubic-bezier(.2,.7,.3,1) both}

  /* fields are rules, not boxes */
  .fp2-ed-field{margin-bottom:24px}
  .fp2-ed-field label{display:block;font-size:9px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--fp2-ink);font-weight:700;margin-bottom:8px;transition:color .2s}
  .fp2-ed-field:focus-within label{color:var(--fp2-ember-600)}
  .fp2-ed-line{position:relative;display:flex;align-items:center;gap:10px;height:40px;
    border-bottom:2px solid #A69372;transition:background .4s ease,border-color .25s ease,box-shadow .4s ease}
  .fp2-ed-line:hover{border-bottom-color:#8A7758}
  .fp2-ed-line:focus-within{background:linear-gradient(to top,rgba(242,106,27,.05),transparent 72%);
    box-shadow:0 12px 22px -16px rgba(216,88,14,.42)}
  .fp2-ed-line::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--fp2-ember-600);
    transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
  .fp2-ed-line:focus-within::after{transform:scaleX(1)}
  .fp2-ed-line input{border:0;background:none;outline:0;width:100%;height:100%;font-family:inherit;
    font-size:17px;color:var(--fp2-ink);letter-spacing:.01em;caret-color:var(--fp2-ember-500)}
  .fp2-ed-line input::placeholder{color:#96876F;letter-spacing:0;transition:color .2s}
  .fp2-ed-line input:focus::placeholder{color:#BFB29A}
  .fp2-ed-line .fp2-peek{background:none;border:0;padding:2px;color:var(--fp2-faint);display:grid;place-items:center}
  .fp2-ed-line .fp2-peek:hover{color:var(--fp2-ink)}
  .fp2-peek .fp2-e-hide{display:none}
  .fp2-peek.fp2-shown .fp2-e-show{display:none}
  .fp2-peek.fp2-shown .fp2-e-hide{display:block}

  /* a rule with a mark, not a bootstrap checkbox */
  .fp2-ed-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 32px}
  .fp2-keep{display:inline-flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--fp2-ink);font-weight:600;cursor:pointer}
  .fp2-keep input{position:absolute;opacity:0;width:0;height:0}
  .fp2-keep i{width:13px;height:13px;border:1px solid var(--fp2-border-strong);display:grid;place-items:center;flex:none;
    transition:border-color .2s,background .2s}
  .fp2-keep i::after{content:"";width:5px;height:5px;background:var(--fp2-ember-500);transform:scale(0);transition:transform .2s}
  .fp2-keep input:checked + i{border-color:var(--fp2-ember-500)}
  .fp2-keep input:checked + i::after{transform:scale(1)}
  .fp2-link{color:var(--fp2-ink);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    border-bottom:1px solid var(--fp2-border-strong);padding-bottom:2px;transition:color .2s,border-color .2s}
  .fp2-link:hover{color:var(--fp2-ember-600);border-color:var(--fp2-ember-600)}

  /* charcoal, not orange. Luxury does not shout. */
  .fp2-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:64px;padding:0 20px 0 26px;
    border:0;border-radius:0;background:var(--fp2-ink);color:#F5F1E9;font-family:inherit;
    font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;
    box-shadow:0 1px 2px rgba(36,31,24,.16),0 16px 36px -16px rgba(36,31,24,.42);
    transition:background .45s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,transform .35s ease}
  .fp2-btn:hover{background:var(--fp2-ember-600);transform:translateY(-1px);
    box-shadow:0 2px 3px rgba(36,31,24,.14),0 20px 44px -16px rgba(216,88,14,.48);
    /* the glow follows the client's colour (BUG-029, 2026-10-05); the line above stays for a browser without color-mix */
    box-shadow:0 2px 3px rgba(36,31,24,.14),0 20px 44px -16px color-mix(in srgb,var(--fp2-ember-600) 48%,transparent)}
  .fp2-btn:active{transform:translateY(0) scale(.985);transition-duration:.12s}
  .fp2-btn svg{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
  .fp2-btn:hover svg{transform:translateX(7px)}

  /* ---------- right: the sheet ---------- */
  .fp2-sheet{position:relative;z-index:1;min-width:0;height:100vh;display:grid;place-items:center;overflow:hidden}
  /* an extremely soft radial behind the tower — depth, not decoration */
  .fp2-sheet::before{content:"";position:absolute;right:10%;top:2%;width:520px;height:560px;z-index:0;
    pointer-events:none;border-radius:50%;filter:blur(58px);
    background:radial-gradient(closest-side,rgba(242,106,27,.10),rgba(246,151,95,.04) 58%,transparent 74%)}
  .fp2-elev{position:absolute;right:calc(-4% - 78px);bottom:calc(-6% + 85px);width:108%;height:108%;display:block;
    -webkit-mask-image:radial-gradient(ellipse 94% 90% at 46% 54%,#000 58%,rgba(0,0,0,.78) 80%,transparent 99%),
      linear-gradient(90deg,#000 74%,rgba(0,0,0,.5) 89%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:radial-gradient(ellipse 94% 90% at 46% 54%,#000 58%,rgba(0,0,0,.78) 80%,transparent 99%),
      linear-gradient(90deg,#000 74%,rgba(0,0,0,.5) 89%,transparent 100%);
    mask-composite:intersect}
  /* sunlight crossing the paper, once every 20s */
  .fp2-sheet::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:46%;pointer-events:none;z-index:2;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.62) 46%,transparent);
    transform:translateX(-160%) skewX(-8deg);animation:fp2sunsweep 20s ease-in-out infinite}
  @keyframes fp2sunsweep{0%,70%{transform:translateX(-160%) skewX(-8deg)}
                      92%,100%{transform:translateX(340%) skewX(-8deg)}}

  .fp2-elev line,.fp2-elev rect,.fp2-elev path,.fp2-elev circle{fill:none}
  .fp2-elev polygon.fp2-dw{fill:none}
  .fp2-elev .fp2-l-corner{stroke:#A33F07;stroke-width:2.65}
  /* these carry --a inline like .dw does, but are not .dw — they need the
     opacity binding of their own or they paint solid and bury the drawing */
  .fp2-elev .fp2-face-a,.fp2-elev .fp2-face-b{stroke:none;opacity:var(--fp2-a,.06)}
  .fp2-elev .fp2-face-a{fill:#D8580E}
  .fp2-elev .fp2-face-b{fill:#B4480A}
  .fp2-elev .fp2-l-ground{stroke:#C9793C;stroke-width:1.2}
  .fp2-elev .fp2-l-mid{stroke:#C24E0B;stroke-width:1.45}
  .fp2-elev .fp2-l{stroke:#D2701F;stroke-width:.95}
  .fp2-elev .fp2-l-faint{stroke:#DC8C48;stroke-width:.78}
  .fp2-elev .fp2-l-hair{stroke:#E5A876;stroke-width:.62}
  .fp2-elev .fp2-l-dash{stroke:#D8B48C;stroke-width:.55;stroke-dasharray:5 5}
  .fp2-elev .fp2-fill-hatch{fill:url(#hatch);stroke:none;opacity:.2}
  .fp2-elev .fp2-pane{fill:#D8580E;opacity:.045;stroke:none;transition:opacity .4s}
  .fp2-elev .fp2-bay:hover .fp2-pane{opacity:.13}
  .fp2-elev .fp2-dim,.fp2-elev .fp2-grid-l{fill:#C08050;font-family:var(--fp2-sans);letter-spacing:.1em}
  .fp2-elev .fp2-dim{font-size:12px}
  .fp2-elev .fp2-grid-l{font-size:11px;font-weight:700}

  /* the drawing inks itself over ~6 seconds, then stops for good */
  .fp2-elev .fp2-dw{opacity:var(--fp2-a,1);stroke-dasharray:2600;stroke-dashoffset:2600;
    animation:fp2ink 2.6s cubic-bezier(.4,.85,.35,1) forwards;animation-delay:calc(var(--fp2-o,0) * 2.1ms)}
  @keyframes fp2ink{to{stroke-dashoffset:0}}
  .fp2-elev text{opacity:0;animation:fp2fadeUp .9s ease forwards;animation-delay:4.6s}

  /* museum labels */
  /* bottom derives from the caption's own anchor (see .cap) so the first
     stat label always sits on the same line as "UIT UNIVERSITY" */
  .fp2-notes{position:absolute;right:clamp(8px,1.2vw,30px);bottom:calc(clamp(30px,6vh,74px) + 15px);z-index:3;
    width:196px;animation:fp2fadeUp .9s 2.4s both}
  .fp2-notes div{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    padding:12px 0;border-top:1px solid var(--fp2-border-strong)}
  .fp2-notes div:last-child{border-bottom:1px solid var(--fp2-border-strong)}
  .fp2-notes small{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fp2-ink);font-weight:700}
  .fp2-notes b{font-family:var(--fp2-serif);font-size:22px;font-weight:700;color:var(--fp2-ink);letter-spacing:-.01em;line-height:1}
  .fp2-cap{position:absolute;left:clamp(26px,3vw,58px);bottom:calc(clamp(30px,6vh,74px) + 99px);z-index:3;
    animation:fp2fadeUp .9s 2.4s both}
  .fp2-cap b{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--fp2-ink);font-weight:700}
  .fp2-cap span{display:block;margin-top:2px;font-family:var(--fp2-serif);font-style:italic;font-size:12.5px;color:var(--fp2-espresso)}

  .fp2-login.fp2-entering .fp2-sheet-form{opacity:0;transform:translateY(-18px)}
  .fp2-login.fp2-entering .fp2-sheet{opacity:0;transition:opacity .5s ease}

  @media (prefers-reduced-motion:reduce){
    .fp2-elev .fp2-dw{animation:none!important;stroke-dashoffset:0!important}
    .fp2-elev text,.fp2-notes,.fp2-cap{animation:none!important;opacity:1!important}
    .fp2-sf-rule{animation:none!important;transform:none!important}
    .fp2-sheet::after{animation:none!important;opacity:0}
  }
  @media (max-width:980px){
    .fp2-login{grid-template-columns:1fr}
    .fp2-sheet{display:none}
    .fp2-seal{display:none}
    .fp2-sheet-form{padding:7vh 26px 6vh}
  }
  /* short screens: tighten further so the login never scrolls */
  @media (max-height:760px){
    .fp2-sheet-form{padding-top:20px;padding-bottom:16px}
    .fp2-sf-eye{margin-top:18px}
    .fp2-sf-in h1{font-size:clamp(32px,3.8vw,44px)}
    .fp2-sf-arc{margin-top:16px}
    .fp2-sf-arc::after{margin-top:8px}
    .fp2-sf-form{margin-top:22px}
    .fp2-ed-field{margin-bottom:16px}
    .fp2-ed-row{margin:0 0 22px}
    .fp2-btn{height:54px}
  }

  /* ============ NOTEBOOK INDEX-TAB NAV ============
     Espresso rail; inactive tabs are warm sand with an ink glyph.
     The active tab turns white and merges into the page, its
     glyph lit in ember — the one place orange announces itself. */
  .fp2-tabs-nav{position:fixed;left:0;top:0;bottom:0;width:var(--fp2-nav-w);z-index:70;display:flex;flex-direction:column;align-items:flex-end;padding:16px 0;
    background:var(--fp2-surface);border-right:1px solid var(--fp2-border)}
  .fp2-tn-crest{width:58px;height:34px;margin:4px 9px 16px 0;display:grid;place-items:center}
  .fp2-p-links{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:1;width:100%;overflow:visible}
  .fp2-p-links a{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:48px;border-radius:13px 0 0 13px;color:var(--fp2-muted);background:var(--fp2-surface-2);box-shadow:inset 0 0 0 1px var(--fp2-border);transition:width .18s ease,background .18s,box-shadow .18s,color .15s}
  .fp2-p-links a .fp2-ic{display:grid;place-items:center;background:transparent;box-shadow:none;color:inherit}
  .fp2-p-links a svg{width:21px;height:21px;stroke-linecap:round;stroke-linejoin:round}
  .fp2-p-links a svg .fp2-duo{fill:currentColor;stroke:none;opacity:.16}
  .fp2-p-links a:hover{width:60px;color:var(--fp2-text);background:var(--fp2-sand)}
  .fp2-p-links a.fp2-logout{margin-top:auto;color:var(--fp2-muted)}
  .fp2-p-links a.fp2-logout:hover{color:var(--fp2-crit);background:var(--fp2-crit-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fp2-crit) 26%,transparent)}
  .fp2-p-links a.fp2-active{width:64px;background:var(--fp2-ember-50);color:var(--fp2-ember-500);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fp2-ember-500) 30%,transparent),-6px 4px 14px -9px rgba(216,88,14,.5)}
  .fp2-p-links a.fp2-active svg .fp2-duo{opacity:.20}
  .fp2-p-links a .fp2-badge{position:absolute;top:3px;right:5px;background:var(--fp2-ember-500);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--fp2-surface);z-index:3}
  .fp2-p-links a .fp2-tip{position:absolute;left:calc(100% + 13px);top:50%;transform:translateY(-50%) translateX(-5px);background:var(--fp2-espresso);color:#fff;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);z-index:120}
  .fp2-p-links a .fp2-tip::before{content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);width:8px;height:8px;background:var(--fp2-espresso)}
  .fp2-p-links a:hover .fp2-tip{opacity:1;transform:translateY(-50%) translateX(0)}


  /* ============ TOP STRIP ============ */
/* ...but that rule is (0,2,1) and outranks the theme's own (0,1,1) display
   headings, which silently lost their serif. Restore them here - these four are
   every h1-h6 in studentportal-v2.css that asks for --fp2-serif. */
body.fp2 .fp2-sf-in h1,
body.fp2 .fp2-hero h1,
body.fp2 .fp2-mail-read h4,
body.fp2 .fp2-pf-head h4 {
    font-family: var(--fp2-serif);
}
/* ==========================================================================
   1b. LOGIN SCREEN  (Student/EDU_EBS_STU_Login.aspx)
   The mockup's editorial login, adapted to ASP.NET WebForms: the mockup's
   <form> is the page's own runat=server form, its <button> is an <input
   type=submit>, and its <input>s are <asp:TextBox>es.
   ========================================================================== */
body.fp2.fp2-login-body {
    /* the login must never scroll - the drawing is sized to the viewport */
    overflow: hidden;
    background-image: none;
}
/* the runat=server form is an extra box between .fp2-login and the page */
body.fp2.fp2-login-body > form { display: block; min-height: 100vh; }
/* --- CLIENT LOGO AT THE SEAL'S CENTRE ------------------------------------
   The embossed seal's central mark used to be a monogram hardcoded in the
   two seal SVGs (a UIT-style glyph). It is now the DB-driven RadBinaryImage
   that used to sit above the wordmark, moved inside .fp2-seal - so every
   client gets its own mark with no markup change per client.
   The seal box is 840x840 and half-cropped (its centre sits at 420,420 on
   the form column's left edge); the image is pinned to that centre and
   ghosted so it reads as part of the embossed stamp, not a printed logo.
   width/height carry !important because Telerik can stamp the bitmap's own
   pixel size as an inline style on the rendered img (the declaration also
   sets AutoAdjustImageControlSize="False", this is the belt to that brace). */
body.fp2 .fp2-seal .fp2-seal-logo,
body.fp2 .fp2-seal img {
    position: absolute;
    left: 420px;
    top: 420px;
    transform: translate(-50%, -50%);
    width: 230px !important;
    height: 230px !important;
    max-width: none;
    max-height: none;
    object-fit: contain;
    opacity: .16;
    filter: saturate(.85);
    pointer-events: none;
}
/* --- LONG INSTITUTION NAMES ---------------------------------------------
   The mockup's wordmark was "UIT University"; the real one is
   SP_GetClientName_Query.InstitutionName, which can be
   "Sir Syed University of Engineering and Technology". At the mockup's .36em
   tracking that blows straight out of the 392px form column, so here the
   wordmark wraps, the tracking is dialled back, and "Student Portal" drops to
   its own line with a rule above it instead of a left divider. */
body.fp2 .fp2-sf-mark {
    display: block;
    letter-spacing: .18em;
    line-height: 1.5;
    text-wrap: balance;
}
body.fp2 .fp2-sf-mark span {
    display: block;
    margin-top: 5px;
    padding-left: 0;
    border-left: 0;
    letter-spacing: .22em;
    color: var(--fp2-muted);
}
/* the sheet caption sits over the drawing - keep it off the tower */
body.fp2 .fp2-cap { max-width: min(42%, 320px); }
body.fp2 .fp2-cap b { letter-spacing: .16em; line-height: 1.45; }
/* --- ASP.NET renders the submit button as <input>, which has no children:
       flexbox and ::after are both useless on it. The arrow is a sibling that
       .fp2-btn-wrap pins inside the button's right padding. --------------- */
body.fp2 .fp2-btn-wrap { position: relative; display: block; }
body.fp2 input.fp2-btn,
body.fp2 input[type="submit"].fp2-btn {
    display: block;
    width: 100%;
    height: 64px;
    padding: 0 62px 0 26px;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: var(--fp2-ink);
    color: #F5F1E9;
    font-family: var(--fp2-sans);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(36, 31, 24, .16), 0 16px 36px -16px rgba(36, 31, 24, .42);
    transition: background .45s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, transform .35s ease;
}
/* BUG-029 (client: "LOGIN and Send Email buttons glow ORANGE on hover", every client): the glow below was a
   literal orange, and this rule is (0,4,2) - it beat every per-client `.fp2-btn:hover` override in
   facultyportal-v2-themes.css ((0,3,1)), so the button turned the client's blue/purple but glowed orange.
   Written 2026-10-01 as "deliberate brand hover" - wrong: only the background was the client's colour.
   The glow now comes from the same token as the background, so every client and mode follows it. */
body.fp2 .fp2-btn-wrap:hover input.fp2-btn {
    background: var(--fp2-ember-600);
    transform: translateY(-1px);
    box-shadow: 0 2px 3px rgba(36, 31, 24, .14), 0 20px 44px -16px rgba(216, 88, 14, .48);
    box-shadow: 0 2px 3px rgba(36, 31, 24, .14), 0 20px 44px -16px color-mix(in srgb, var(--fp2-ember-600) 48%, transparent);
}
body.fp2 .fp2-btn-wrap input.fp2-btn:active { transform: translateY(0) scale(.985); transition-duration: .12s; }
body.fp2 .fp2-btn-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #F5F1E9;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
body.fp2 .fp2-btn-wrap:hover .fp2-btn-arrow { transform: translateY(-50%) translateX(7px); }
/* ASP.NET TextBoxes inside the rule-not-box field */
body.fp2 .fp2-ed-line input[type="text"],
body.fp2 .fp2-ed-line input[type="password"] {
    border: 0;
    background: none;
    outline: 0;
    width: 100%;
    height: 100%;
    font-family: inherit;
    font-size: 17px;
    color: var(--fp2-ink);
    letter-spacing: .01em;
    caret-color: var(--fp2-ember-500);
    box-shadow: none;
    padding: 0;
}
body.fp2 .fp2-login-actions { margin-top: 2px; }
/* login error strip - the code-behind fills #alertD and shows #alertDU */
body.fp2 .fp2-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 22px;
    padding: 10px 13px;
    border-radius: var(--fp2-r-sm);
    background: var(--fp2-crit-tint);
    border: 1px solid color-mix(in srgb, var(--fp2-crit) 28%, transparent);
    color: var(--fp2-crit);
    animation: fp2fadeUp .35s cubic-bezier(.2, .7, .3, 1) both;
}
body.fp2 .fp2-login-alert .fp2-la-ico { flex: none; margin-top: 1px; }
body.fp2 .fp2-login-alert .fp2-la-txt {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}
body.fp2.fp2-fp-body .fp2-sheet { position: sticky; top: 0; }
body.fp2.fp2-fp-body .fp2-ed-field { margin-bottom: 18px; }
body.fp2.fp2-fp-body .fp2-sf-form { margin-top: 26px; }
/* Step 1's registration number is disabled once the code has been sent - it is
   the thing being reset, so it must stay readable rather than greyed out. */
body.fp2 .fp2-ed-line input[disabled] {
    color: var(--fp2-muted);
    cursor: not-allowed;
}
body.fp2 .fp2-login-signup {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    color: var(--fp2-muted);
    font-weight: 600;
}
/* --- primary buttons that render as <a> --------------------------------
   The theme declares `.fp2-btn-pri { color: #fff }
` (0,2,1) outranks
   it, so a primary button that happens to be an anchor - the dashboard's
   "Pay now" is one - painted ember text on the ember gradient and was barely
   legible. Restated here at (0,2,2) so it wins on SPECIFICITY rather than by
   reaching for !important, and repeated across the link states because
   Bootstrap colours :hover/:focus/:visited separately. Applies to every
   anchor-shaped primary button, not just the fee card, so the same clash
   cannot resurface on another page. */
body.fp2 a.fp2-btn-pri,
body.fp2 a.fp2-btn-pri:link,
body.fp2 a.fp2-btn-pri:visited,
body.fp2 a.fp2-btn-pri:hover,
body.fp2 a.fp2-btn-pri:focus,
body.fp2 a.fp2-btn-pri:active {
    color: #fff;
}