/* Subject Drift · PMI Colleges–Bohol design system, version 1.1.0
   Brand palette is based on the official seal supplied for this deployment.
   Purely visual layer: existing application routes, forms and assessment logic remain unchanged. */
:root{
  --pmi-navy:#0b0d62;
  --pmi-navy-deep:#080b40;
  --pmi-navy-soft:#23287d;
  --pmi-orange:#f47714;
  --pmi-orange-dark:#d65c08;
  --pmi-orange-pale:#fff2e7;
  --pmi-gray:#e2e5e9;
  --pmi-bg:#f5f7fb;
  --pmi-white:#fff;
  --pmi-text:#202b40;
  --pmi-subtext:#65738a;
  --pmi-border:#e6e9f1;
  --pmi-focus:rgba(244,119,20,.20);
  --pmi-shadow:0 4px 19px rgba(12,21,67,.055);
  --pmi-radius:16px;
  color:var(--pmi-text);background:var(--pmi-bg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
html{scroll-behavior:smooth}
body{background:var(--pmi-bg);color:var(--pmi-text);line-height:1.58}
::selection{background:#ffe1c5;color:var(--pmi-navy-deep)}
a{color:var(--pmi-navy);text-underline-offset:2px}
a:hover{color:#e3620c}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--pmi-orange);outline-offset:3px}
h1,h2,h3{color:#151d37;letter-spacing:-.026em}
h1{font-weight:800;font-size:clamp(1.55rem,2vw,2.05rem)}
h2{font-weight:800;font-size:1.19rem}
h3{font-weight:750}
.muted,.small.muted{color:var(--pmi-subtext)}
.eyebrow{font-size:.69rem;letter-spacing:.15em;font-weight:850;color:var(--pmi-orange-dark)}

/* PMI lockup and official university seal */
.pmi-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;transition:opacity .15s}
.pmi-brand:hover{text-decoration:none;opacity:.94}
.pmi-seal{display:block;flex:0 0 auto;object-fit:contain;width:60px;height:60px;border-radius:50%;padding:3px;background:#fff;box-shadow:0 0 0 1px rgba(232,232,239,.22),0 3px 12px rgba(0,0,0,.12)}
.pmi-brand-copy{display:grid;gap:0;min-width:0;line-height:1.14;color:white}
.pmi-brand-copy strong{font-size:1.02rem;font-weight:900;letter-spacing:.065em;white-space:nowrap}
.pmi-brand-copy small{font-size:.8rem;letter-spacing:.32em;font-weight:750;margin-top:2px;color:#d5d8f0}
.pmi-brand-copy em{font-style:normal;font-size:.68rem;letter-spacing:.115em;font-weight:850;color:#ffa14c;margin-top:7px}
.pmi-brand-auth .pmi-brand-copy strong{color:var(--pmi-navy-deep);font-size:1.14rem}
.pmi-brand-auth .pmi-brand-copy small{color:#4b5576}
.pmi-brand-auth .pmi-brand-copy em{color:var(--pmi-orange-dark)}
.pmi-brand-auth .pmi-seal{width:72px;height:72px;border:1px solid var(--pmi-border);box-shadow:0 4px 20px #0c165912}

/* Workspace shell, Laravel-style institutional navigation */
.shell{background:var(--pmi-bg)}
.sidebar{width:270px;min-width:270px;padding:27px 16px 19px;background:linear-gradient(165deg,#0e116b 0%,#0b0c58 53%,#070a34 100%);border-right:1px solid #303270;color:#d4d7eb;box-shadow:3px 0 22px rgba(6,11,46,.07)}
.sidebar .pmi-brand{padding:4px 9px 15px}
.sidebar-divider{height:1px;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.04));margin:4px 11px 24px}
.nav-caption{padding:0 14px;margin-bottom:13px;font-size:.68rem;font-weight:750;letter-spacing:.17em;color:#9a9dc7}
.sidebar nav{display:grid;gap:5px}
.nav-link{display:flex;align-items:center;gap:12px;padding:13px 14px;color:#ccd0ec;border-radius:12px;font-weight:650;font-size:.91rem;min-height:46px;position:relative;border:1px solid transparent;transition:background .16s,color .16s,transform .16s}
.nav-icon{flex:0 0 19px;opacity:.86}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.09);text-decoration:none;transform:translateX(2px)}
.nav-link.current{color:#fff;background:linear-gradient(100deg,rgba(245,121,21,.23),rgba(248,253,255,.085));border-color:rgba(245,121,21,.25);box-shadow:inset 3px 0 0 var(--pmi-orange)}
.nav-link.current .nav-icon{color:#ffa65c;opacity:1}
.sidebar-bottom{margin-top:auto}
.sidebar-info{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.095);border-radius:12px;background:rgba(255,255,255,.05);margin:14px 0 3px}
.sidebar-info-mark{display:grid;place-items:center;width:30px;height:30px;background:rgba(244,119,20,.21);border-radius:9px;color:#ff9b43;flex-shrink:0;font-size:1.1rem}
.sidebar-info strong{display:block;font-size:.75rem;letter-spacing:.01em;color:#fff}
.sidebar-info small{display:block;font-size:.62rem;letter-spacing:.085em;color:#b9c1e6;margin-top:2px}
.side-footer{border-top:1px solid rgba(255,255,255,.13);padding:17px 5px 0;margin-top:15px;display:flex;gap:10px;align-items:center}
.avatar{width:39px;height:39px;min-width:39px;border-radius:12px;background:linear-gradient(155deg,#ff963c,#d8620f);color:#fff;box-shadow:0 2px 9px rgba(221,103,14,.2)}
.side-footer strong{color:#fff;font-size:.83rem}
.side-footer small{color:#a8afd8;font-size:.76rem}
.main-area{background:var(--pmi-bg)}
.topbar{height:77px;padding:0 clamp(18px,3vw,45px);background:rgba(255,255,255,.97);border-bottom:1px solid var(--pmi-border);box-shadow:0 2px 15px rgba(19,22,70,.025);backdrop-filter:blur(12px)}
.topbar-start{display:flex;align-items:center;gap:16px;min-width:0}
.topbar-identity{display:grid;gap:3px;line-height:1.2;min-width:0}
.topbar-identity-name{color:#14194e;font-size:.9rem;letter-spacing:.12em;font-weight:900;white-space:nowrap}
.topbar-identity-name b{color:var(--pmi-orange-dark)}
.topbar-identity small{color:#778197;font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-separator{color:var(--pmi-orange);margin:0 5px}
.top-right{gap:11px}
.role-pill{background:var(--pmi-orange-pale);color:#a94908;border:1px solid #ffdfc2;font-size:.73rem;text-transform:uppercase;letter-spacing:.045em;padding:6px 12px}
.main-content{max-width:1480px;padding:34px clamp(20px,3vw,45px) 92px}
.page-header{margin-bottom:26px;padding-left:15px;border-left:4px solid var(--pmi-orange)}
.page-header h1{margin-bottom:6px}
.page-header p{font-size:.92rem;margin:0}

/* Consistent panels, tables, and Laravel-like forms */
.panel,.metric,.auth-box{background:#fff;border:1px solid var(--pmi-border);border-radius:var(--pmi-radius);box-shadow:var(--pmi-shadow)}
.panel{padding:26px;margin-bottom:20px}
.panel h2{border-bottom:1px solid #f0f1f6;padding-bottom:13px;margin-bottom:16px}
.panel h3{color:#252a47}
.metric{position:relative;overflow:hidden;padding:24px 25px;transition:transform .16s,box-shadow .16s}
.metric::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--pmi-orange),#ffc18a)}
.metric:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(12,21,67,.09)}
.metric b{color:var(--pmi-navy);font-size:2.25rem;font-variant-numeric:tabular-nums}
.metric span{color:var(--pmi-subtext);font-weight:550}
label{color:#333d59;font-size:.86rem;font-weight:700;gap:7px}
input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px;border:1px solid #d9deeb;background:#fff;color:#1a2440;border-radius:10px;padding:11px 13px;transition:border-color .16s,box-shadow .16s}
textarea{min-height:90px}
input:focus,textarea:focus,select:focus{border-color:var(--pmi-orange);box-shadow:0 0 0 3px var(--pmi-focus)}
input[readonly]{background:#f5f6fa}
input[type=checkbox],input[type=radio]{accent-color:var(--pmi-navy)}
.check-list label{color:#33405d;font-weight:550}
.btn{min-height:40px;border-radius:10px;font-weight:750;letter-spacing:.005em;padding:10px 17px;transition:background .16s,box-shadow .16s,transform .16s,filter .16s}
.btn:hover{transform:translateY(-1px);filter:none}
.btn.primary{background:linear-gradient(105deg,var(--pmi-navy),#292b8d);color:#fff;border:1px solid #111467;box-shadow:0 4px 10px rgba(10,13,98,.17)}
.btn.primary:hover{background:linear-gradient(105deg,#171b7f,#30359d);box-shadow:0 6px 15px rgba(10,13,98,.23)}
.btn.light{background:#fff;color:var(--pmi-navy);border-color:#fff}
.btn.light:hover{background:#fff3e6;color:#a84806}
.btn.outline{background:#fff;color:var(--pmi-navy);border-color:#cbd1e3}
.btn.outline:hover{background:#f7f6ff;border-color:#898fc3}
.btn.quiet{background:#f3f3f8;color:#525975;border-color:transparent}
.btn.quiet:hover{background:#e7e8f2}
.btn.tiny{min-height:33px;padding:7px 11px}
.pill,.role-pill,.chip{font-weight:750}
.pill{background:#f0effa;color:#3c4288;border-radius:999px}
.pill.info{background:#e9ecfc;color:#343b95}
.pill.success{background:#e7f6ed;color:#187044}
.pill.neutral{background:#f0f2f6;color:#5c6680}
.chip{background:#f3f1fc;color:#414693}
.alert{border-radius:12px;border:1px solid #c9eadb;background:#ebf8f1;color:#17734b}
.alert.danger{border-color:#ffd5d1;background:#fff1ef;color:#a63221}
.note{background:#f5f4ff;color:#363b7a;border-left:4px solid var(--pmi-orange);border-radius:10px}
.hero-panel{min-height:226px;padding:33px 40px;background:radial-gradient(circle at 87% 23%,rgba(255,153,64,.16),transparent 29%),linear-gradient(113deg,#0b0d61 0%,#1f2786 92%);border:1px solid #22257b;border-radius:20px;box-shadow:0 8px 25px rgba(11,14,98,.12);position:relative}
.hero-panel::after{content:"";position:absolute;left:0;bottom:0;width:140px;height:5px;background:var(--pmi-orange);border-radius:0 10px 0 0}
.hero-panel h2{color:#fff;letter-spacing:-.035em;font-size:1.95rem;margin:11px 0 8px}
.hero-panel .eyebrow{color:#ffab68}
.hero-panel p{color:#d4d9fd;max-width:520px}
.hero-panel .hero-graphic{flex:0 0 auto;display:grid;place-items:center;width:164px;height:164px;margin-right:12px;border-radius:50%;background:rgba(255,255,255,.12);font-size:0;transform:rotate(5deg)}
.hero-graphic img{max-width:100%;max-height:100%;object-fit:contain;border-radius:50%;padding:5px;background:#fff;filter:drop-shadow(0 8px 15px rgba(0,0,0,.12))}
.item-link,.directory-row,.question-row{border-bottom:1px solid #eceef4}
.item-link{padding:15px 8px;border-radius:8px;transition:background .15s}
.item-link:hover{background:#fbf7f2;text-decoration:none}
.item-link b,.directory-row b{color:#202652}
.item-link small,.directory-row small,.question-row small,.topic-step small,.exam-mini small{color:#7b859a}
.topic-step{border:1px solid #e5e7ee;background:#fff;border-radius:12px;padding:17px}
.step-index{background:var(--pmi-orange-pale);color:#ad4e0c;border:1px solid #ffdec3;border-radius:12px}
.join-badge{background:var(--pmi-orange-pale);color:#9e430c;border:1px solid #ffdfc3}
.join-badge strong{color:var(--pmi-navy);letter-spacing:.14em}
th{background:#f4f4fa;color:#3c4472;border-bottom:2px solid #e5e5f0;font-weight:800;font-size:.78rem;letter-spacing:.025em}
td{color:#3c4861;border-bottom:1px solid #eef0f5}
tbody tr:hover td{background:#fffaf6}
.reading{color:#35435f;line-height:1.95}
.exam-mini,.review-question{border-bottom-color:#edf0f5}
.student-answer,.camera-box{background:#f7f8fc}
.answer-option{border:1px solid #e0e4ed;transition:border-color .15s,background .15s}
.answer-option:hover{border-color:#b4b6dc;background:#f8f8ff}
.answer-option:has(input:checked){background:#fff4eb;border-color:var(--pmi-orange);box-shadow:inset 3px 0 0 var(--pmi-orange)}
.answer-option input{accent-color:var(--pmi-orange)}
.question-heading{color:#6c7193}
.timer{background:#fff;color:var(--pmi-navy);border:1px solid #e5e5ee;box-shadow:0 2px 9px rgba(11,14,98,.04)}
.timer.urgent{background:#fff0ee;color:#ae221e;border-color:#fedbd5}
.giant{color:var(--pmi-navy)}
.facts span{color:#6c7792}
.facts b{color:#232d4d}
.camera-box video,.proctor-sidebar video{background:#0a0e3c;border:2px solid #e5e4ee}

/* Student login, registration, installation and offline state */
.auth-shell{min-height:100svh;background:radial-gradient(circle at 82% 15%,rgba(244,119,20,.14) 0,transparent 33%),radial-gradient(circle at 15% 85%,rgba(14,17,106,.10) 0,transparent 33%),linear-gradient(145deg,#edf0f9,#f9fafc);padding:30px 18px;position:relative}
.auth-shell::before{content:"";position:fixed;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--pmi-navy) 0%,var(--pmi-navy) 67%,var(--pmi-orange) 67%,var(--pmi-orange) 100%);z-index:1}
.auth-box{width:min(465px,100%);padding:35px 38px 31px;box-shadow:0 24px 80px rgba(7,10,63,.10);border-radius:20px;position:relative;overflow:hidden}
.auth-box::after{content:"";position:absolute;right:-52px;bottom:-64px;width:180px;height:180px;border:1px solid rgba(244,119,20,.13);border-radius:50%;pointer-events:none}
.auth-school-banner{padding-bottom:22px;border-bottom:1px solid #e9eaf2;margin-bottom:27px}
.auth-hero{margin:0 0 26px}
.auth-hero h1{font-size:1.8rem;margin:10px 0 8px}
.auth-hero .eyebrow{color:var(--pmi-orange-dark)}
.auth-hero p{font-size:.91rem;line-height:1.7}
.auth-link{font-size:.88rem;margin:24px 0 11px}
.auth-link a{font-weight:800;color:var(--pmi-navy)}
.auth-box>.small{margin:12px 0 0;position:relative;z-index:1}
.auth-box.wide{width:min(740px,100%)}
.setup-page .auth-box.wide .eyebrow{margin:9px 0 8px}
.setup-page .auth-box.wide h1{margin-bottom:9px}
.setup-page .auth-box.wide form h3{margin:3px 0 0;padding:11px 0 6px;border-bottom:1px solid #ececf4;color:var(--pmi-navy);font-size:1.02rem}
.setup-page .auth-box.wide form .btn.primary{width:100%;min-height:46px}

/* Tablet/mobile navigation and touch layout */
.mobile-menu{border:1px solid #dfe2ec;border-radius:10px;width:38px;height:38px;display:none;align-items:center;justify-content:center;background:#fff;color:var(--pmi-navy);font-size:1.2rem;padding:0;flex-shrink:0}
@media(max-width:1100px){
  .sidebar{width:240px;min-width:240px;padding:23px 13px}
  .pmi-brand-copy strong{font-size:.9rem}
  .pmi-seal{height:53px;width:53px}
  .main-content{padding:28px 24px 75px}
  .hero-panel .hero-graphic{height:140px;width:140px}
}
@media(max-width:760px){
  .sidebar{position:fixed;top:0;bottom:0;left:-290px;width:275px;min-width:275px;height:100dvh;padding:24px 16px;z-index:40;box-shadow:12px 0 32px rgba(3,7,45,.2);transition:left .22s ease}
  .nav-open .sidebar{left:0}
  .mobile-menu{display:flex}
  .topbar{height:67px;padding:0 14px;gap:8px}
  .topbar-start{gap:10px;min-width:0}
  .topbar-identity-name{font-size:.76rem}
  .topbar-identity small{max-width:148px;font-size:.68rem}
  .top-right{gap:7px}
  .top-right .role-pill{display:none}
  .top-right .btn{font-size:.72rem;padding:6px 10px;min-height:35px}
  .main-content{padding:23px 14px 80px}
  .page-header{padding-left:10px;margin-bottom:21px}
  .page-header h1{font-size:1.6rem}
  .grid-two,.metric-row{grid-template-columns:1fr;gap:12px}
  .panel{padding:20px 17px;margin-bottom:14px}
  .hero-panel{padding:27px 22px;min-height:auto}
  .hero-panel h2{font-size:1.56rem}
  .hero-panel .hero-graphic{display:none}
  .metric{padding:19px 20px}
  .metric b{font-size:1.9rem}
  .cols{grid-template-columns:1fr}
  .topic-step{gap:10px;flex-wrap:wrap}
  .auth-shell{padding:20px 12px}
  .auth-box{padding:27px 23px;border-radius:17px}
  .pmi-brand-auth .pmi-seal{width:66px;height:66px}
  .pmi-brand-auth .pmi-brand-copy strong{font-size:1rem}
  .setup-page .auth-box.wide{padding:24px 18px}
  .timer{font-size:1.25rem}
  .exam-bar{flex-wrap:wrap}
  .facts>div{display:grid}
  .facts b{text-align:left}
  .horizontal-form{display:grid}
  .learning-grid,.exam-layout{grid-template-columns:1fr}
  .proctor-sidebar,.sticky{position:static}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* v1.2 question-import workspace */
.bulk-import-panel{margin-top:1.4rem;}
.bulk-import-panel .section-head{align-items:flex-start;gap:1rem;flex-wrap:wrap;}
.bulk-import-panel .section-head p{margin-top:.3rem;}
.template-downloads{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.1rem 0;}
.template-downloads .btn{border-color:rgba(255,111,0,.35);color:var(--pmi-navy,#0b105d);}
.template-downloads .btn:hover{background:#fff5e9;border-color:#ff7000;}
.bulk-upload-form{display:flex;gap:1rem;flex-wrap:wrap;align-items:end;margin-top:1rem;}
.bulk-upload-form label{flex:1 1 310px;min-width:200px;}
.bulk-upload-form input[type=file]{max-width:100%;}
.bulk-upload-form button{margin-bottom:0;}
.bulk-import-panel code{background:#f7ecde;border-radius:4px;padding:2px 4px;}
@media(max-width:640px){.bulk-upload-form button{width:100%;}.template-downloads .btn{flex:1 1 42%;text-align:center;}}