/* APPRI Academy UI theme, adapted from the Figma "Project Management Dashboard" community file:
   Inter, white app shell with hairline dividers, #5030E5 accent, 16px white cards on #F5F5F5 columns, pastel status tags.
   Brand accent is the single variable --red (kept under that name because the base stylesheet uses it everywhere). */
:root{
  --ink:#0D062D; --ink-2:#787486; --ink-3:#9C98AA; --ink-4:#C3C0CF;
  --paper:#F5F5F5; --surface:#FFFFFF; --line:#E8E7EE; --line-2:#F0EFF5;
  --red:#5030E5; --red-d:#3F22C7; --red-l:#EEEBFD; --red-m:#D3CBFA;
  --ok:#68B266; --ok-l:rgba(131,194,157,.2); --warn:#D58D49; --warn-l:rgba(223,168,116,.2); --info:#4F7BE8; --info-l:#E9EFFD; --high:#D8727D; --high-l:rgba(216,114,125,.1);
  --r-xl:20px; --r-lg:16px; --r-md:8px; --r-sm:6px;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lift:none; --pop:0 12px 32px -14px rgba(13,6,45,.28);
}
html,body{background:#fff;font-size:14px}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:34px}h2{font-size:20px}h3{font-size:16px}
::selection{background:var(--red-m)}
/* shell */
.app{background:#fff;grid-template-columns:272px minmax(0,1fr)}
.side{background:#fff;color:var(--ink-2);border-right:1px solid var(--line);padding:22px 16px 18px}
.side .logo{padding:0 4px 20px;border-bottom:0}.side .logo img{max-width:156px;border-radius:0;height:auto}
.nav>a,.nav .grp>a{color:var(--ink-2);font-weight:500;border-radius:6px;padding:10px 12px}
.nav a svg{opacity:1}
.nav a:hover{background:var(--paper);color:var(--ink)}
.nav a.on{background:rgba(80,48,229,.08);color:var(--ink);font-weight:600}
.nav>a.on::before,.nav .grp>a.on::before{display:none}
.nav .sub{border-left:1px solid var(--line);margin-left:22px}
.nav .sub a{color:var(--ink-2);font-size:13.5px}
.nav .sub a.on{background:var(--red-l);color:var(--ink)}
.nav .sub .lv{background:var(--line-2);color:var(--ink-2);border-radius:50%;width:22px;height:22px}
.nav .sub a.on .lv{background:var(--red);color:#fff}
.nav .sub .pct{color:var(--ink-3)}
.nav-label{color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;font-weight:700;padding:18px 12px 6px;border-top:1px solid var(--line);margin-top:10px}
.nav a.logout{color:var(--high)}
.tt{background:var(--paper);border-radius:12px;padding:18px 14px 14px;text-align:center;margin:10px 0 12px;position:relative}
.tt .lamp{width:46px;height:46px;border-radius:50%;background:rgba(255,200,64,.18);display:grid;place-items:center;margin:-34px auto 8px;box-shadow:0 0 0 6px #fff}
.tt b{display:block;font-size:14px;font-weight:600;color:var(--ink)}.tt p{margin:6px 0 12px;font-size:12px;color:var(--ink-2);line-height:1.5}
.tt a{display:block;background:#fff;border-radius:4px;padding:10px;color:var(--ink);font-weight:500;font-size:13px}.tt a:hover{text-decoration:none;box-shadow:var(--pop)}
.main{padding:0 32px 56px;gap:24px}
.topbar{background:#fff;margin:0 -32px 8px;padding:16px 32px;border-bottom:1px solid var(--line);gap:14px;position:sticky;top:0;z-index:20}
.search{flex:0 1 417px;margin-right:auto;border:0;background:var(--paper);border-radius:6px;padding:11px 16px;color:var(--ink-2)}
.icon-btn{border:0;background:transparent;border-radius:8px;color:var(--ink-2);width:38px;height:38px}
.icon-btn:hover{background:var(--paper);border:0}
.icon-btn .dot{background:var(--high);border:2px solid #fff;top:0;right:0}
.lang{border:1px solid var(--line);border-radius:6px;padding:2px}.lang button{border-radius:4px}.lang button.on{background:var(--red);color:#fff}
.me{gap:12px;padding-left:12px;border-left:1px solid var(--line)}
.me .who{display:flex;flex-direction:column;line-height:1.25;text-align:right}.me .who b{font-weight:500;font-size:14px;color:var(--ink)}.me .who small{font-size:12px;color:var(--ink-2);font-weight:400}
.avatar{background:linear-gradient(135deg,#7B5CF5,#5030E5);font-weight:600}
.avatar.sm{background:var(--red-l);color:var(--red)}
.card,.panel{border:1px solid var(--line-2);border-radius:16px;box-shadow:none}
.card.flat{background:var(--paper);border-color:transparent}
.btn{border-radius:6px;font-weight:600;background:var(--red)}.btn:hover{background:var(--red-d)}
.btn.ghost{background:#fff;color:var(--ink-2);border:1px solid #BDBBC8}.btn.ghost:hover{background:var(--paper);color:var(--ink)}
.btn.light{background:#fff;color:var(--red)}
.chip{border-radius:4px;padding:3px 9px;font-weight:500;font-size:12px;background:var(--red-l);color:var(--red)}
.chip.ok{background:var(--ok-l);color:var(--ok)}.chip.warn{background:var(--warn-l);color:var(--warn)}.chip.info{background:var(--info-l);color:var(--info)}
.chip.gray{background:var(--line-2);color:var(--ink-2)}.chip.high{background:var(--high-l);color:var(--high)}
.hero{background:linear-gradient(135deg,#5030E5 0%,#3A1FB5 100%);border-radius:20px}
.page-head h1{font-size:40px;font-weight:600;letter-spacing:-.025em}
.tabs .tabl.on,.tabs a.on{color:var(--red);border-color:var(--red)}
input,select,textarea{border-radius:6px}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(80,48,229,.12)}
table th{color:var(--ink-2);font-weight:600;text-transform:none}
/* kanban board (dashboard, tasks) */
.pm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pm-head h1{font-size:46px;line-height:1.1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pm-head .ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--red-l);color:var(--red)}.pm-head .ic svg{width:15px;height:15px}
.pm-sub{color:var(--ink-2);margin:6px 0 0;max-width:640px}
.pm-who{display:flex;align-items:center;gap:14px}.pm-who a.inv{color:var(--red);font-weight:500;display:inline-flex;gap:6px;align-items:center}
.avs{display:inline-flex;align-items:center}.avs i{width:26px;height:26px;border-radius:50%;margin-left:-7px;border:2px solid #fff;display:grid;place-items:center;font:600 10px var(--display);color:#fff;font-style:normal;background:var(--c,#7B5CF5)}
.avs i:first-child{margin-left:0}.avs.lg i{width:38px;height:38px;font-size:13px;margin-left:-9px}.avs .more{background:#FBE9EB;color:var(--high)}
.pm-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pm-tools .grp{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pm-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #BDBBC8;border-radius:6px;background:#fff;color:var(--ink-2);font-weight:500;cursor:pointer;font-size:14px}
.pm-btn:hover{text-decoration:none;color:var(--ink);background:var(--paper)}.pm-btn select{border:0;background:transparent;padding:0 4px;color:inherit;font-weight:500;outline:0;box-shadow:none;cursor:pointer}.pm-btn svg{width:16px;height:16px}
.pm-btn.pri{background:var(--red);border-color:var(--red);color:#fff}.pm-btn.pri:hover{background:var(--red-d);color:#fff}
.kb-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.kb-board.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kb-col{background:var(--paper);border-radius:16px;padding:18px 18px 20px;min-width:0}
.kb-col>header{display:flex;align-items:center;gap:8px;padding-bottom:14px;margin-bottom:16px;border-bottom:3px solid var(--c);font-weight:500;color:var(--ink)}
.kb-col>header .dot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.kb-col>header .n{min-width:20px;height:20px;border-radius:10px;background:#E0E0E0;color:#625F6D;font-size:12px;font-weight:500;display:grid;place-items:center;padding:0 6px}
.kb-col .kb-stack{display:flex;flex-direction:column;gap:18px}
.kb-empty{border:1px dashed rgba(80,48,229,.5);background:rgba(80,48,229,.05);border-radius:10px;padding:26px 16px;text-align:center;color:var(--ink-2);font-size:13px}
.kb-card{background:#fff;border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:box-shadow .15s,transform .15s;position:relative}
.kb-card:hover{box-shadow:var(--pop);transform:translateY(-1px)}
.kb-card .top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.kb-card h3{font-size:17px;font-weight:600;line-height:1.3}.kb-card p{margin:0;font-size:12px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-card .cv{margin:2px 0}.kb-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;font-size:12px;color:var(--ink-2);font-weight:500}
.kb-card .foot .m{display:inline-flex;gap:12px;align-items:center}.kb-card .foot .m span{display:inline-flex;gap:5px;align-items:center}.kb-card .foot svg{width:14px;height:14px}
.kb-card .bar{height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}.kb-card .bar i{display:block;height:100%;background:var(--c,var(--red));border-radius:2px}
.tag{display:inline-block;border-radius:4px;padding:3px 8px;font:500 12px var(--display)}
.tag.l1{background:var(--ok-l);color:var(--ok)}.tag.l2{background:var(--warn-l);color:var(--warn)}.tag.l3{background:var(--high-l);color:var(--high)}.tag.l4{background:var(--red-l);color:var(--red)}
.pm-sec{display:flex;flex-direction:column;gap:14px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.faq details{border-bottom:1px solid var(--line-2);padding:12px 0}.faq summary{cursor:pointer;font-weight:600;list-style:none}.faq p{color:var(--ink-2);margin:8px 0 0}
@media (max-width:1100px){.kb-board,.kb-board.four{grid-template-columns:1fr}.pm-head h1{font-size:34px}.search{flex:1}.me .who{display:none}}
@media (max-width:860px){.app{grid-template-columns:1fr}.topbar{margin:0 -16px 8px;padding:12px 16px}.main{padding:0 16px 48px}}

/* login hero */
.auth{background:#fff}
.auth .art{background:#0D062D;padding:44px 52px;isolation:isolate}
.auth .art .hero-bg{position:absolute;inset:0;z-index:-2;background:#0D062D url(/img/login-hero.jpg) 38% center/cover no-repeat;transform:scale(1.04);animation:heroIn 1.4s cubic-bezier(.2,.7,.2,1) both,heroDrift 28s ease-in-out 1.4s infinite alternate}
.auth .art .hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,6,45,.55) 0%,rgba(13,6,45,.05) 28%,rgba(13,6,45,.35) 55%,rgba(13,6,45,.92) 100%),linear-gradient(90deg,rgba(80,48,229,.28),rgba(80,48,229,0) 55%)}
.auth .art-top img.lg{width:200px;height:auto;border-radius:0;filter:drop-shadow(0 4px 18px rgba(0,0,0,.45));animation:artUp .8s .15s both}
.auth .art-copy{max-width:520px;animation:artUp .9s .3s both}
.auth .art-kick{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;margin-bottom:16px}
.auth .art h1{color:#fff;font-size:42px;line-height:1.12;letter-spacing:-.025em;margin-bottom:12px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.auth .art p{color:rgba(255,255,255,.88);font-size:16px;max-width:460px}
.auth .art-pts{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.auth .art-pts li{font-size:13px;font-weight:500;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 12px}
.auth .art-foot{font-size:12px;color:rgba(255,255,255,.65);animation:artUp .9s .45s both}
.auth .form .box{animation:artUp .7s .2s both}
@keyframes heroIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1.04)}}
@keyframes heroDrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
@keyframes artUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth .art .hero-bg,.auth .art-top img.lg,.auth .art-copy,.auth .art-foot,.auth .form .box{animation:none}}

/* ───────── Brand v2: colour tone taken from the gradient of the "A" in the APPRI Academy logo ─────────
   blue #0A9BC8 → green #7DBB26 → amber #FF9A0A → orange #F8730E (sampled from the logo mark) */
:root{
  --b1:#0A9BC8; --b2:#12A99A; --b3:#7DBB26; --b4:#FF9A0A; --b5:#F8730E;
  --grad:linear-gradient(115deg,#0A9BC8 0%,#12A99A 32%,#7DBB26 62%,#FF9A0A 100%);
  --ink:#0F2230; --ink-2:#5B7080; --ink-3:#8EA0AD; --ink-4:#C5D1D9;
  --paper:#F2F7F9; --line:#E2EAEF; --line-2:#EDF2F5;
  --red:#0A86B0; --red-d:#076C8F; --red-l:#E2F3F9; --red-m:#B5E0EF;
  --ok:#5F9A14; --ok-l:rgba(125,187,38,.16); --warn:#D97A00; --warn-l:rgba(255,154,10,.16); --info:#0A86B0; --info-l:#E2F3F9; --high:#E0541F; --high-l:rgba(248,115,14,.12);
}
.avatar{background:linear-gradient(135deg,#0A9BC8,#7DBB26)}
.lang button.on{background:var(--red)}
.topbar{border-bottom:0;box-shadow:0 1px 0 var(--line)}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.nav a.on{background:rgba(10,155,200,.1)}
.nav .sub a.on{background:rgba(10,155,200,.1)}
.nav a.logout{color:var(--high)}
.btn{background:var(--red)}.btn:hover{background:var(--red-d)}
.pm-btn.pri,.btn.grad{background:linear-gradient(115deg,#0A86B0,#12A99A);border-color:transparent;color:#fff}.pm-btn.pri:hover{background:linear-gradient(115deg,#076C8F,#0E8F82);color:#fff}
.hero{background:linear-gradient(120deg,#0A6E94 0%,#0A9BC8 45%,#12A99A 100%)}
.tag.l1{background:var(--ok-l);color:var(--ok)}.tag.l2{background:var(--warn-l);color:var(--warn)}.tag.l3{background:var(--high-l);color:var(--high)}.tag.l4{background:var(--red-l);color:var(--red)}
/* title card */
.pm-head{position:relative;overflow:hidden;border-radius:20px;padding:28px 32px;background:linear-gradient(120deg,#EAF7FC 0%,#F0F8EA 55%,#FFF5E4 100%);border:1px solid var(--line-2);isolation:isolate;align-items:center}
.pm-head::before{content:"";position:absolute;right:-60px;top:-70px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,155,200,.22),rgba(10,155,200,0));z-index:-1}
.pm-head::after{content:"";position:absolute;right:120px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,154,10,.22),rgba(255,154,10,0));z-index:-1}
.pm-head .amark{position:absolute;right:26px;bottom:0;width:150px;height:auto;opacity:.95;z-index:-1;filter:drop-shadow(0 10px 18px rgba(10,155,200,.25))}
.pm-head h1{font-size:40px;background:linear-gradient(100deg,#0F2230 0%,#0F2230 55%,#0A86B0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-head h1 .ic{-webkit-text-fill-color:initial;background:#fff;color:var(--red);box-shadow:0 2px 8px -2px rgba(10,155,200,.4)}
.pm-sub{color:var(--ink-2)}
.pm-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pm-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid rgba(15,34,48,.07);border-radius:12px;padding:8px 14px;font-size:13px;color:var(--ink-2)}
.pm-pill b{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em}.pm-pill i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--b1))}
.pm-who{position:relative;z-index:1;margin-right:120px}
.pm-who a.inv{color:var(--red)}
/* board */
.kb-col{background:var(--paper)}
.kb-col>header .n{background:#DCE6EC;color:#456}
.kb-empty{border-color:rgba(10,155,200,.45);background:rgba(10,155,200,.05)}
.kb-card{padding:0;overflow:hidden;border:1px solid var(--line-2)}
.kb-card .kcv{position:relative;height:96px;background:linear-gradient(120deg,var(--g1),var(--g2));overflow:hidden;display:flex;align-items:flex-start;padding:12px 14px}
.kb-card .kcv::before{content:"";position:absolute;inset:0;background:radial-gradient(120px 90px at 85% 10%,rgba(255,255,255,.35),rgba(255,255,255,0));}
.kb-card .kcv::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-70%;height:100%;border-radius:50%;background:rgba(255,255,255,.14)}
.kb-card .kcv .lvn{position:absolute;right:14px;bottom:-14px;font:800 74px/1 var(--display);color:rgba(255,255,255,.22);letter-spacing:-.04em}
.kb-card .kcv img{position:absolute;right:42px;top:12px;width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.25));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.kb-card:hover .kcv img{transform:translateY(-4px) rotate(-5deg) scale(1.06)}
.kb-card .kcv .tag{position:relative;z-index:1;background:rgba(255,255,255,.92);box-shadow:0 2px 8px -3px rgba(0,0,0,.25)}
.kb-card .kbody{padding:14px 18px 16px;display:flex;flex-direction:column;gap:9px}
.kb-card .kbody .chips{display:flex;gap:6px}

.avs i{border-color:#fff}
/* module & other heroes use the same tone */
.phero::after{background:linear-gradient(90deg,#0F2230 0%,#0F2230 34%,rgba(15,34,48,.78) 52%,rgba(15,34,48,.15) 82%,rgba(15,34,48,.05) 100%)}
.mentor-card{padding:0;overflow:hidden}.mentor-card .mh{height:64px;background:linear-gradient(115deg,var(--g1,#0A9BC8),var(--g2,#7DBB26))}
.mentor-card .mb{padding:0 18px 18px;margin-top:-26px}
.mentor-card .avatar{border:3px solid #fff;box-shadow:0 6px 14px -6px rgba(15,34,48,.4)}
.cert-hero .copy{max-width:640px}
/* login */
.auth .art .hero-shade{background:linear-gradient(180deg,rgba(15,34,48,.55) 0%,rgba(15,34,48,.05) 28%,rgba(15,34,48,.35) 55%,rgba(15,34,48,.93) 100%),linear-gradient(90deg,rgba(10,155,200,.30),rgba(10,155,200,0) 55%)}
.auth .art{background:#0F2230}.auth .art .hero-bg{background-color:#0F2230}
.auth .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--grad);z-index:2}
.auth .art-kick{background:rgba(255,255,255,.14)}
@media (max-width:860px){.pm-who{margin-right:0}.pm-head .amark{display:none}}

.mentor-card .mb .row{align-items:flex-start!important}.mentor-card .mb .row>div:last-child{padding-top:30px!important}