/* ScholarPilot — hand-drawn / low-fi aesthetic reproduced from the wireframe */
:root{
  --ink:#2d2d2d;
  --paper:#faf9f5;
  --card:#fff;
  --muted:#908d84;
  --faint:#a8a59b;
  --line:#e4e2d9;
  --yellow:#ffd84d;
  --yellow-soft:#ffe98a;
  --green:#2faa6a;
  --mint:#d8f3e3;
  --blue:#2f6fed;
  --blue-soft:#d8e6ff;
  --pink:#ffd1c9;
  --chip:#f3f1e9;
}
*{box-sizing:border-box}
/* the HTML `hidden` attribute must win over our display:flex/block rules */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
::placeholder{color:#a8a59b}
body{
  font-family:'Kalam',cursive;color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(#ecebe3 1px,transparent 1px),linear-gradient(90deg,#ecebe3 1px,transparent 1px);
  background-size:26px 26px;
}
.app-shell{min-height:100vh;display:flex}
.caveat{font-family:'Caveat',cursive}
button{font-family:inherit}

/* ---------------- sidebar ---------------- */
.sidebar{width:236px;flex:none;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;border-right:2px solid var(--ink);background:#fffdf6;padding:18px 14px 28px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.brand-badge{width:40px;height:40px;flex:none;border:2px solid var(--ink);border-radius:14px 8px 16px 9px;background:var(--yellow);box-shadow:2px 2px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Caveat',cursive;font-weight:700;font-size:22px}
.brand-name{font-family:'Caveat',cursive;font-weight:700;font-size:23px;line-height:1}
.brand-tag{font-size:11px;color:var(--muted);letter-spacing:.3px}
.nav-group-label{font-family:'Caveat',cursive;font-size:16px;color:var(--muted);margin:14px 4px 4px}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 8px;cursor:pointer;border-radius:10px 16px 9px 14px;margin-bottom:2px}
.nav-item:hover{background:#fff7da}
.nav-num{font-family:monospace;font-size:11px;color:#bdbab0;width:18px;flex:none}
.nav-label{font-size:15px;color:#54514a}
.nav-item.active .nav-label{font-weight:700;color:var(--ink);background:linear-gradient(transparent 55%,var(--yellow) 55%);padding:0 2px}
.nav-item.locked{opacity:.5}
.user-card{margin-top:20px;border:2px solid var(--ink);border-radius:14px 9px 16px 10px;padding:11px;background:#fff}
.user-card .row{display:flex;align-items:center;gap:8px}
.user-card .avatar{width:30px;height:30px;flex:none;border:2px solid var(--ink);border-radius:50%;background:#e9e7df;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.user-card .nm{font-weight:700;font-size:14px}
.user-card .sub{font-size:11px;color:var(--muted)}

/* ---------------- main / topbar ---------------- */
.main{flex:1;min-width:0;padding:22px 30px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.nav-toggle{display:none;flex:none;width:42px;height:42px;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:12px 8px 13px 9px;background:#fffdf6;box-shadow:2px 2px 0 var(--ink);font-size:20px;line-height:1;cursor:pointer}
.nav-toggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(45,45,45,.42);z-index:40}
.topbar-eyebrow{font-size:12px;color:var(--muted);font-family:monospace}
.topbar-title{font-family:'Caveat',cursive;font-weight:700;font-size:34px;line-height:1}
.topbar-right{display:flex;align-items:center;gap:10px}
.search-pill{border:2px solid var(--ink);border-radius:18px 9px 16px 11px;background:#fff;padding:6px 13px;font-size:13px;display:flex;align-items:center;gap:7px}
.search-ico{font-family:monospace;color:var(--faint)}
.plan-pill{border:2px solid var(--ink);border-radius:16px 9px 16px 10px;background:var(--mint);padding:6px 12px;font-size:13px;font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.plan-pill.unpaid{background:var(--pink)}

/* ---------------- generic building blocks ---------------- */
.card{background:var(--card);border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(45,45,45,.12);padding:20px;border-radius:18px 10px 18px 10px}
.card.r2{border-radius:10px 18px 10px 18px}
.card.r3{border-radius:16px 10px 18px 10px}
.card.r4{border-radius:10px 16px 10px 18px}
.h-caveat{font-family:'Caveat',cursive;font-weight:700}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-family:monospace}
.grid{display:grid;gap:18px}
.section-intro{font-size:14px;color:var(--muted);margin-bottom:18px}
.wrap-1000{max-width:1000px}
.wrap-1040{max-width:1040px}
.wrap-1080{max-width:1080px}
.wrap-1100{max-width:1100px}

.btn{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);border-radius:14px 8px 15px 9px;background:var(--yellow);padding:9px 18px;font-weight:700;box-shadow:2px 2px 0 var(--ink);cursor:pointer;font-size:14px}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:#fff;box-shadow:none}
.btn.sm{padding:5px 12px;font-size:13px}
.chip{display:inline-block;border:1.5px solid var(--ink);background:#fff;border-radius:14px 9px 12px 10px;padding:3px 10px;font-size:12px}
.chip.alt{border-radius:12px 14px 10px 9px}
.chip.fill{background:var(--chip)}
.tab{border:2px solid var(--ink);border-radius:14px 9px 12px 10px;background:#fff;padding:5px 12px;font-size:13px;cursor:pointer}
.tab.alt{border-radius:12px 14px 10px 9px}
.tab.active{background:var(--yellow);font-weight:700;box-shadow:2px 2px 0 var(--ink)}

.field-label{font-size:12px;color:#54514a;margin-bottom:4px}
.input,.textarea,.select{width:100%;border:2px solid var(--ink);border-radius:12px 16px 9px 14px;padding:10px 12px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.textarea{height:84px;resize:vertical}
.select{border-radius:12px 14px 9px 13px;cursor:pointer}
.note{font-family:'Caveat',cursive;font-size:19px;color:var(--blue);line-height:1.2}

.barline{height:16px;border:2px solid var(--ink);border-radius:9px;background:#f1efe7;overflow:hidden}
.barline > i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--yellow),var(--yellow) 7px,var(--yellow-soft) 7px,var(--yellow-soft) 14px)}
.bar{height:12px;border:1.5px solid var(--ink);border-radius:7px;background:#f1efe7;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--yellow)}

.toast{position:fixed;right:20px;bottom:20px;border:2px solid var(--ink);background:var(--mint);box-shadow:3px 3px 0 var(--ink);border-radius:14px 9px 16px 10px;padding:12px 16px;font-weight:700;font-size:14px;z-index:50;animation:pop .15s ease}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(45,45,45,.35);display:flex;align-items:center;justify-content:center;z-index:60}
.modal{background:#fff;border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(45,45,45,.25);border-radius:18px 10px 18px 10px;padding:22px;width:440px;max-width:92vw}
.modal h3{font-family:'Caveat',cursive;font-size:26px;margin:0 0 12px}
.modal .row{margin-bottom:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}

.row-flex{display:flex;gap:12px}
.between{display:flex;justify-content:space-between;align-items:center}
.wrap-flex{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------------- auth (login / register) ---------------- */
.auth-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:430px;max-width:94vw;background:#fffdf6;border:2px solid var(--ink);border-radius:20px 11px 22px 12px;box-shadow:5px 5px 0 rgba(45,45,45,.15);padding:26px 26px 20px}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.auth-tabs{display:flex;gap:8px;margin-bottom:18px}
.auth-tab{flex:1;text-align:center;border:2px solid var(--ink);border-radius:12px 9px 13px 10px;background:#fff;padding:8px;font-size:14px;cursor:pointer}
.auth-tab:nth-child(2){border-radius:9px 13px 10px 12px}
.auth-tab.active{background:var(--yellow);font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.auth-form{display:block}
.auth-switch{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}
.auth-switch span{color:var(--blue);cursor:pointer;border-bottom:1.5px solid var(--blue)}
.auth-error{border:2px solid #c0392b;background:#ffe9e6;color:#a5281b;border-radius:12px 9px 13px 10px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.auth-foot{margin-top:18px;text-align:center;font-size:12px;color:var(--muted);line-height:1.35}
.logout-btn{margin-top:10px;width:100%;text-align:center;border:2px solid var(--ink);border-radius:11px 9px 12px 10px;background:#fff;padding:6px;font-size:12px;cursor:pointer}
.logout-btn:hover{background:#fff1f0}

/* ---------------- admin console ---------------- */
.admin-view{min-height:100vh}
.admin-brand{display:flex;align-items:center;gap:12px}
.admin-shell{display:flex;min-height:100vh}
.admin-side{width:248px;flex:none;position:sticky;top:0;align-self:flex-start;height:100vh;display:flex;flex-direction:column;overflow-y:auto;border-right:2px solid var(--ink);background:#fffdf6;padding:18px 14px 22px}
.admin-navitem{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;border-radius:10px 16px 9px 14px;margin-bottom:3px}
.admin-navitem:hover{background:#fff7da}
.admin-navitem.active{background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:7px 8px}
.admin-navicon{width:22px;flex:none;text-align:center;font-size:15px}
.admin-navlabel{font-size:14px;font-weight:700;flex:1}
.admin-badge{background:var(--ink);color:#fff;border-radius:10px;font-size:11px;font-weight:700;padding:1px 7px;font-family:monospace}
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-mainbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 30px;border-bottom:2px solid var(--ink);background:#fffdf6;position:sticky;top:0;z-index:10}
.admin-content{padding:24px 30px 60px;max-width:1040px}
.avatar-lg{width:46px;height:46px;flex:none;border:2px solid var(--ink);border-radius:50%;background:#e9e7df;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.acting-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--yellow);border-bottom:2px solid var(--ink);padding:10px 30px;font-size:13px}
.ws-student{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px 14px 9px 12px;cursor:pointer;margin-bottom:3px}
.ws-student:hover{background:#fff7da}
.ws-student.active{background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:6px}

/* ---------------- landing (one page, non-scrollable) ---------------- */
.landing{height:100vh;display:flex;flex-direction:column;overflow:hidden;padding:22px 30px}
.landing-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.landing-brand{display:flex;align-items:center;gap:10px}
.landing-hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.landing-eyebrow{display:inline-block;border:2px solid var(--ink);background:var(--yellow);border-radius:14px 9px 12px 10px;padding:4px 14px;font-size:13px;font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.landing-title{font-size:clamp(30px,5.6vw,58px);line-height:1.03;max-width:880px;margin:0}
.landing-sub{font-size:clamp(14px,1.5vw,17px);color:var(--muted);max-width:680px;line-height:1.5;margin:0}
.landing-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.landing-cta .btn{font-size:15px;padding:11px 22px}
.landing-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;width:100%;max-width:980px}
.landing-pill{text-align:left;padding:16px}
.lp-ico{font-size:24px;margin-bottom:6px}
.lp-t{font-weight:700;font-size:15px;margin-bottom:3px}
.lp-d{font-size:12.5px;color:var(--muted);line-height:1.35}
.landing-foot{flex:none;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap;padding-top:8px}
.landing-navlinks{display:flex;gap:8px;align-items:center}
.landing-banner{display:flex;align-items:center;gap:12px;width:100%;max-width:760px;cursor:pointer;text-align:left;
  border:2px solid var(--ink);background:var(--mint);border-radius:14px 9px 16px 10px;box-shadow:2px 2px 0 var(--ink);padding:10px 16px;margin-top:2px}
.landing-banner:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.lb-badge{flex:none;font-weight:700;font-size:12px;border:2px solid var(--ink);background:var(--yellow);border-radius:9px 7px 9px 7px;padding:2px 9px}
.lb-text{flex:1;font-size:13px;line-height:1.3}
.lb-cta{flex:none;font-weight:700;font-size:13px;color:var(--blue);white-space:nowrap}
.svc-row:hover{background:#fff7da}

/* originality (Turnitin-style) report */
.ti-top{display:flex;gap:16px;align-items:center}
.ti-score{width:74px;height:74px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:22px}
.ti-score-title{font-weight:700;font-size:15px}
.ti-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:10px;color:var(--muted)}
.ti-legend span{display:flex;align-items:center;gap:4px}
.ti-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.ti-find{background:#fff;border:1px solid var(--line);border-radius:4px;padding:9px 11px;margin-bottom:8px}
.ti-badge{display:inline-block;color:#fff;font-weight:700;font-size:10px;border-radius:4px;padding:1px 8px;letter-spacing:.04em}
.ti-excerpt{font-style:italic;color:#374151;font-size:12px;margin:2px 0 5px;line-height:1.4}

/* landing — two-column advert (pitch + live report sample) */
.landing-split{flex-direction:row;align-items:center;justify-content:center;gap:40px;text-align:left}
.ls-left{flex:1;max-width:560px;display:flex;flex-direction:column;gap:13px;align-items:flex-start;min-width:0}
.ls-left .landing-title,.ls-left .landing-sub{text-align:left;max-width:none}
.ls-right{flex:none;width:384px;max-width:100%}
.ls-features{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:2px;width:100%}
.ls-feat{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.lf-ico{font-size:16px;flex:none}
.advert-card{border:2px solid var(--ink);background:var(--card);border-radius:18px 11px 20px 12px;box-shadow:5px 5px 0 rgba(45,45,45,.16);padding:16px}
.advert-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.advert-tt{font-weight:700;font-size:15px}
.advert-tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;border:2px solid var(--ink);background:var(--yellow);border-radius:8px 6px 8px 6px;padding:1px 8px}
.advert-sub{font-size:11.5px;color:var(--muted);margin:3px 0 10px;line-height:1.35}
.ti-sample{border:1.5px dashed #c9c6bc;border-radius:12px;padding:12px;background:#fffdf6}
.ti-sample .ti-score{width:62px;height:62px;font-size:18px}
.ti-sample .ti-find{margin-bottom:6px;padding:7px 9px}
.ti-sample .ti-legend{font-size:9px;gap:7px;margin-top:5px}

/* landing advert carousel (rotating service ads) */
.advert-rotator{position:relative;height:420px}  /* JS auto-sizes to the tallest slide on desktop */
.advert-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.advert-slide.active{opacity:1;pointer-events:auto}
.adv-dots{display:flex;gap:7px;justify-content:center;margin-top:12px}
.adv-dot{width:8px;height:8px;border-radius:50%;background:#cfccc2;border:1.5px solid var(--ink);cursor:pointer}
.adv-dot.active{background:var(--yellow)}
.adv-phase{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.adv-pname{width:106px;flex:none;font-size:11.5px}
.adv-pstat{width:40px;text-align:right;font-size:11px;color:var(--muted)}
.adv-fb{border-left:3px solid var(--yellow);padding:4px 0 4px 10px;margin-bottom:9px;font-size:12px;line-height:1.35;color:#374151}
.adv-fb-meta{font-size:10px;color:var(--muted);margin-bottom:2px}
.auth-home{font-size:12px;color:var(--muted);cursor:pointer;margin-bottom:8px;display:inline-block}
.auth-home:hover{color:var(--ink)}
@media(max-width:820px){
  /* the two-column advert stacks and the page is allowed to scroll on phones */
  .landing{padding:16px;height:auto;min-height:100vh;overflow:visible}
  .landing-hero{overflow:visible}
  .landing-split{flex-direction:column;align-items:stretch;gap:18px}
  .landing-title{font-size:clamp(26px,7vw,42px)}
  .landing-sub{font-size:14px}
  .landing-cta .btn{font-size:14px;padding:10px 18px}
  .ls-left{max-width:none}
  .ls-right{width:100%}
  .ls-features{grid-template-columns:1fr}
  /* carousel: show the active slide in normal flow (no fixed height) */
  .advert-rotator{height:auto}
  .advert-slide{position:relative;opacity:1;pointer-events:auto;display:none}
  .advert-slide.active{display:block}
}

/* ============================================================ *
 *  PROFESSIONAL THEME — clean, flat, modern SaaS look.          *
 *  Activated by <html data-theme="pro">. Overrides the          *
 *  hand-drawn defaults above, including inline styles (via       *
 *  !important and [style*=…] selectors that catch the inline     *
 *  ink borders / offset shadows the JS templates set).          *
 * ============================================================ */
[data-theme="pro"]{
  --ink:#1f2937;            /* text */
  --paper:#f4f5f7;          /* app background */
  --card:#ffffff;
  --muted:#6b7280;
  --faint:#9ca3af;
  --line:#e5e7eb;           /* hairline borders */
  --yellow:#e0e7ff;         /* incidental accent → light indigo (dark text stays readable) */
  --yellow-soft:#eef2ff;
  --green:#16a34a;
  --mint:#dcfce7;
  --blue:#2563eb;
  --blue-soft:#dbeafe;
  --pink:#fee2e2;
  --chip:#f3f4f6;
  --primary:#4f46e5;        /* solid brand for buttons / active states (white text) */
  --pro-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
[data-theme="pro"] body{
  font-family:var(--pro-sans);
  background-image:none;background-color:var(--paper);
  -webkit-font-smoothing:antialiased;
}
/* typography — drop the cursive */
[data-theme="pro"] .h-caveat,[data-theme="pro"] .caveat,[data-theme="pro"] .note,
[data-theme="pro"] .brand-name,[data-theme="pro"] .nav-group-label,[data-theme="pro"] .topbar-title,
[data-theme="pro"] .modal h3,[data-theme="pro"] .brand-badge{font-family:var(--pro-sans) !important;letter-spacing:-.01em}
[data-theme="pro"] .topbar-title{font-size:24px;font-weight:700}
[data-theme="pro"] .modal h3{font-size:19px;font-weight:700}
[data-theme="pro"] .note{font-size:13px;font-style:italic;color:var(--muted)}
[data-theme="pro"] .nav-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
[data-theme="pro"] .topbar-eyebrow{font-family:var(--pro-sans);text-transform:uppercase;letter-spacing:.05em}

/* core building blocks: flat radii, hairline borders, soft shadows */
[data-theme="pro"] .card,[data-theme="pro"] .card.r2,[data-theme="pro"] .card.r3,[data-theme="pro"] .card.r4{
  border:1px solid var(--line) !important;border-radius:12px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04) !important;
}
[data-theme="pro"] .btn{
  border:1px solid var(--primary) !important;background:var(--primary) !important;color:#fff !important;
  border-radius:8px !important;box-shadow:none !important;font-weight:600 !important;
}
[data-theme="pro"] .btn:active{transform:none}
[data-theme="pro"] .btn:hover{filter:brightness(.94)}
[data-theme="pro"] .btn.ghost{background:#fff !important;color:var(--ink) !important;border-color:var(--line) !important}
[data-theme="pro"] .btn.ghost:hover{background:#f9fafb !important;filter:none}
[data-theme="pro"] .chip,[data-theme="pro"] .tab{border:1px solid var(--line) !important;border-radius:8px !important;box-shadow:none !important}
[data-theme="pro"] .chip.fill{background:var(--chip) !important}
[data-theme="pro"] .tab.active{background:var(--primary) !important;color:#fff !important;box-shadow:none !important}
[data-theme="pro"] .input,[data-theme="pro"] .textarea,[data-theme="pro"] .select{
  border:1px solid var(--line) !important;border-radius:8px !important;background:#fff !important;
}
[data-theme="pro"] .input:focus,[data-theme="pro"] .textarea:focus,[data-theme="pro"] .select:focus{
  outline:none;border-color:var(--primary) !important;box-shadow:0 0 0 3px var(--yellow-soft) !important;
}
[data-theme="pro"] .modal{
  border:1px solid var(--line) !important;border-radius:14px !important;
  box-shadow:0 20px 25px -5px rgba(16,24,40,.14),0 8px 10px -6px rgba(16,24,40,.08) !important;
}
[data-theme="pro"] .modal-backdrop{background:rgba(17,24,39,.45)}
[data-theme="pro"] .toast{
  border:1px solid #111827 !important;border-radius:10px !important;background:#111827 !important;color:#fff !important;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.2) !important;font-weight:600;
}

/* brand / pills / chrome */
[data-theme="pro"] .brand-badge{border:1px solid var(--primary) !important;border-radius:10px !important;background:var(--primary) !important;color:#fff !important;box-shadow:none !important}
[data-theme="pro"] .plan-pill{border:1px solid var(--line) !important;border-radius:8px !important;background:var(--mint) !important;color:#065f46 !important;box-shadow:none !important;font-weight:600}
[data-theme="pro"] .plan-pill.unpaid{background:var(--pink) !important;color:#991b1b !important}
[data-theme="pro"] .search-pill{border:1px solid var(--line) !important;border-radius:8px !important;background:#fff !important;color:var(--muted)}
[data-theme="pro"] .nav-toggle{border:1px solid var(--line) !important;border-radius:8px !important;background:#fff !important;box-shadow:none !important}

/* sidebar + nav */
[data-theme="pro"] .sidebar,[data-theme="pro"] .admin-side{background:#fff !important;border-right:1px solid var(--line) !important}
[data-theme="pro"] .nav-item{border-radius:8px !important}
[data-theme="pro"] .nav-item:hover{background:#f3f4f6 !important}
[data-theme="pro"] .nav-item.active{background:var(--yellow-soft) !important}
[data-theme="pro"] .nav-item.active .nav-label{background:none !important;color:var(--primary) !important;font-weight:600;padding:0}
[data-theme="pro"] .user-card{border:1px solid var(--line) !important;border-radius:10px !important}
[data-theme="pro"] .user-card .avatar,[data-theme="pro"] .avatar-lg{border:1px solid var(--line) !important;background:#eef2ff !important;color:var(--primary) !important}
[data-theme="pro"] .logout-btn{border:1px solid var(--line) !important;border-radius:8px !important}

/* admin chrome */
[data-theme="pro"] .admin-navitem{border-radius:8px !important}
[data-theme="pro"] .admin-navitem:hover{background:#f3f4f6 !important}
[data-theme="pro"] .admin-navitem.active{background:var(--yellow-soft) !important;border:1px solid var(--line) !important;box-shadow:none !important;color:var(--primary) !important}
[data-theme="pro"] .admin-mainbar{background:#fff !important;border-bottom:1px solid var(--line) !important}
[data-theme="pro"] .admin-badge{background:var(--primary) !important;border-radius:6px !important}
[data-theme="pro"] .acting-banner{background:var(--yellow-soft) !important;border-bottom:1px solid var(--line) !important}
[data-theme="pro"] .ws-student{border-radius:8px !important}
[data-theme="pro"] .ws-student.active{background:var(--yellow-soft) !important;border:1px solid var(--line) !important;box-shadow:none !important}

/* progress bars → clean rounded fills */
[data-theme="pro"] .barline,[data-theme="pro"] .bar{border:1px solid var(--line) !important;background:#eef2f6 !important;border-radius:999px !important}
[data-theme="pro"] .barline > i{background:var(--primary) !important}
[data-theme="pro"] .bar > i{background:var(--primary) !important}

/* auth */
[data-theme="pro"] .auth-card{background:#fff !important;border:1px solid var(--line) !important;border-radius:14px !important;box-shadow:0 10px 25px rgba(16,24,40,.08) !important}
[data-theme="pro"] .auth-tab{border:1px solid var(--line) !important;border-radius:8px !important}
[data-theme="pro"] .auth-tab.active{background:var(--primary) !important;color:#fff !important;box-shadow:none !important}
[data-theme="pro"] .auth-error{border:1px solid #fca5a5 !important;border-radius:8px !important;background:#fef2f2 !important}

/* landing */
[data-theme="pro"] .landing-eyebrow{border:1px solid var(--line) !important;border-radius:999px !important;box-shadow:none !important;background:var(--yellow-soft) !important;color:var(--primary) !important;font-weight:600}
[data-theme="pro"] .landing-banner{border:1px solid var(--line) !important;border-radius:12px !important;box-shadow:0 1px 2px rgba(16,24,40,.06) !important;background:var(--yellow-soft) !important}
[data-theme="pro"] .lb-badge{border:1px solid var(--primary) !important;border-radius:6px !important;background:var(--primary) !important;color:#fff !important}
[data-theme="pro"] .lb-cta{color:var(--primary) !important}
[data-theme="pro"] .advert-card{border:1px solid var(--line) !important;border-radius:14px !important;box-shadow:0 12px 28px rgba(16,24,40,.10) !important}
[data-theme="pro"] .advert-tag{border:1px solid var(--primary) !important;background:var(--primary) !important;color:#fff !important;border-radius:6px !important}
[data-theme="pro"] .ti-sample{background:#f9fafb !important;border-color:var(--line) !important}
[data-theme="pro"] .adv-dot{border:1px solid var(--line);background:#d1d5db}
[data-theme="pro"] .adv-dot.active{background:var(--primary);border-color:var(--primary)}
[data-theme="pro"] .svc-row:hover{background:#f3f4f6}

/* catch the JS-template inline hand-drawn ink borders + offset shadows */
[data-theme="pro"] [style*="solid var(--ink)"]{border-color:var(--line) !important}
[data-theme="pro"] [style*="0 var(--ink)"]{box-shadow:0 1px 2px rgba(16,24,40,.06) !important}

/* floating theme toggle (present on every screen, injected once) */
#themeToggle{
  position:fixed;left:16px;bottom:16px;z-index:35;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:7px 12px;
  border:2px solid var(--ink);background:#fff;color:var(--ink);
  border-radius:12px 9px 13px 10px;box-shadow:2px 2px 0 var(--ink);
}
#themeToggle:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
[data-theme="pro"] #themeToggle{
  border:1px solid var(--line) !important;border-radius:8px !important;
  box-shadow:0 1px 3px rgba(16,24,40,.12) !important;font-weight:600;
}
[data-theme="pro"] #themeToggle:active{transform:none}

@media(max-width:820px){
  #themeToggle{font-size:11px;padding:6px 10px;left:12px;bottom:12px}
  .nav-toggle{display:flex}
  .sidebar{
    position:fixed;top:0;left:0;z-index:50;width:264px;height:100vh;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:5px 0 0 rgba(45,45,45,.12)
  }
  .app-shell.nav-open .sidebar{transform:translateX(0)}
  .app-shell.nav-open .sidebar-backdrop{display:block}
  .main{padding:16px}
  .admin-side{width:188px;padding:14px 8px}
  .admin-navlabel{font-size:13px}
  .admin-content .grid{grid-template-columns:repeat(2,1fr) !important}
  .admin-mainbar,.admin-content{padding-left:16px;padding-right:16px}
}