:root{
  --paper:#faf9ec; --card:#d5eafe; --ink:#201C1B;
  --coral:#F0523A; --coral-d:#C93F2A;
  --sun:#FFC93C; --sky:#3AACFF; --leaf:#2FAE73;
  --ink-99: rgba(32,28,27,.6); --ink-80: rgba(32,28,27,.5); --ink-66: rgba(32,28,27,.4); --ink-4d: rgba(32,28,27,.3);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  background:var(--paper); color:var(--ink);
  min-height:100vh;
}
.mobile-menu:hover{ background:var(--card); color:#2b2626; border-color:var(--ink); transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--ink); }
.font-display{ font-family:'Fredoka', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight:600; letter-spacing:-0.01em; }
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{height:10px;width:10px;}
::-webkit-scrollbar-thumb{background:rgba(32,28,27,.2);border-radius:8px;}
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{scrollbar-width:none;}
 
/* layout helpers */
.wrap{max-width:1152px;margin:0 auto;padding:0 16px;}
@media(min-width:768px){.wrap{padding:0 24px;}}
.flex{display:flex;}
.flex-col{display:flex;flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.grid{display:grid;gap:16px;}
.hidden{display:none !important;}
 
/* buttons */
.btn{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease;
  padding:10px 16px; font-size:14px; border:2.5px solid var(--ink);
}
.btn:hover{transform:translate(-1px,-1px);}
.btn:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink) !important;}
.btn-lg{padding:14px 24px;font-size:16px;}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-full{width:100%;}
.btn-primary{background:var(--coral);color:#fff;box-shadow:3px 3px 0 var(--ink);}
.btn-secondary{background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);}
.btn-sky{background:var(--sky);color:#fff;box-shadow:3px 3px 0 var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:none;}
 
.eyebrow{ font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-d); }
 
.badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; border:1.5px solid var(--ink); }
.badge-ink{background:#eab4b4;color:var(--ink);border-color:var(--ink);}
.badge-coral{background:#FDE4E0;color:var(--coral-d);border-color:var(--coral-d);}
.badge-leaf{background:#E1F5EC;color:#1E8A5C;border-color:#1E8A5C;}
.badge-sun{background:#FFF3D2;color:#8A6300;border-color:#B98A00;}
.badge-sky{background:#E3F2FF;color:#1E6FB0;border-color:#1E6FB0;}
 
.doodle-card{ transition:transform .15s ease, box-shadow .15s ease; }
.doodle-card:hover{ transform:translate(-2px,-2px); }
 
.icon{ display:inline-block; vertical-align:middle; }
svg.ic{ stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
 
/* ============================== HEADER ============================== */
.site-header{ position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:2.5px solid var(--ink); }
.header-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.brand-mark{ width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--coral); border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
.brand-name{ font-size:20px; }
.main-nav{ display:none; align-items:center; gap:24px; }
@media(min-width:768px){ .main-nav{display:flex;} }
.nav-link{ font-size:14px; font-weight:700; padding:4px; }
.nav-link.active{ color:var(--coral-d); }
.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:2.5px solid var(--ink); background:#fff; }
.icon-btn.sun{ background:var(--sun); }
.icon-btn.hide-sm{ display:none; }
@media(min-width:640px){ .icon-btn.hide-sm{ display:flex; } }
.icon-btn.show-mobile{ display:flex; }
@media(min-width:768px){ .icon-btn.show-mobile{ display:none; } }
.mobile-menu{ display:flex; flex-direction:column; gap:12px; padding:0 16px 16px; border-top:2px solid var(--ink); }
.mobile-menu button{ font-size:14px; font-weight:700; text-align:left; padding:6px 0; }
 
/* ============================== SEARCH OVERLAY ============================== */
.overlay{ position:fixed; inset:0; z-index:40; display:flex; align-items:flex-start; justify-content:center; padding:64px 16px 0; background:rgba(32,28,27,.8); }
@media(min-width:768px){ .overlay{padding-top:96px;} }
.search-panel{ width:100%; max-width:576px; border-radius:24px; overflow:hidden; background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
.search-top{ padding:16px; display:flex; align-items:center; gap:8px; border-bottom:2.5px solid var(--ink); }
.search-top input{ flex:1; background:transparent; border:none; outline:none; font-size:14px; font-weight:600; color:var(--ink); }
.search-results{ overflow-y:auto; max-height:60vh; padding:12px; }
.search-group{ margin-bottom:8px; }
.search-row{ width:100%; text-align:left; padding:8px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.search-row:hover{ background:#fff; }
 
/* ============================== HERO ============================== */
.hero{ position:relative; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; }
.blob-sun{ top:-40px; right:-64px; width:288px; height:288px; background:var(--sun); opacity:.7; filter:blur(2px); }
.blob-sky{ top:160px; left:-80px; width:256px; height:256px; background:var(--sky); opacity:.6; }
.hero-inner{ position:relative; text-align:center; padding:56px 0 64px; }
@media(min-width:768px){ .hero-inner{ padding:80px 0 64px; } }
.hero-title{ margin-top:16px; font-size:38px; line-height:1.05; }
@media(min-width:768px){ .hero-title{ font-size:60px; } }
.hero-title .accent{ color:var(--coral); }
.hero-sub{ margin:20px auto 0; max-width:576px; font-size:16px; font-weight:600; color:var(--ink-99); }
@media(min-width:768px){ .hero-sub{ font-size:18px; } }
.hero-actions{ margin-top:32px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.hero-search{ margin-top:40px; max-width:512px; margin-left:auto; margin-right:auto; width:100%; display:flex; align-items:center; gap:12px; padding:16px 20px; border-radius:16px; text-align:left; background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.hero-search span{ font-size:14px; font-weight:600; color:var(--ink-80); }
.hero-stats{ margin-top:40px; display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; font-size:14px; font-weight:700; color:var(--ink-99); }
@media(min-width:768px){ .hero-stats{ gap:40px; } }
 
.section{ padding:40px 0; }
.section h2{ margin-top:4px; font-size:24px; }
@media(min-width:768px){ .section h2{ font-size:30px; } }
 
.dept-grid{ margin-top:24px; grid-template-columns:1fr; }
@media(min-width:640px){ .dept-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .dept-grid{ grid-template-columns:repeat(4,1fr); } }
.dept-card{ text-align:left; padding:20px; border-radius:16px; background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.dept-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; border:2px solid var(--ink); }
.dept-title{ font-size:18px; }
.dept-blurb{ font-size:14px; margin-top:4px; font-weight:600; color:var(--ink-99); }
.dept-foot{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink-80); }
 
.quick-grid{ margin-top:24px; grid-template-columns:1fr 1fr; }
@media(min-width:1024px){ .quick-grid{ grid-template-columns:repeat(4,1fr); } }
.quick-card{ padding:20px; border-radius:16px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.quick-emoji{ font-size:30px; }
 
.steps-grid{ margin-top:24px; grid-template-columns:1fr; }
@media(min-width:768px){ .steps-grid{ grid-template-columns:repeat(3,1fr); } }
.step-card{ padding:20px; border-radius:16px; background:#fff; border:2.5px solid var(--ink); }
.step-num{ width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:var(--ink); color:var(--paper); }
.step-title{ font-size:18px; }
.step-body{ font-size:14px; margin-top:4px; font-weight:600; color:var(--ink-99); }
 
/* ============================== BREADCRUMB ============================== */
.breadcrumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:14px; font-weight:700; margin-bottom:20px; }
.crumb-sep{ color:var(--ink-4d); }
.crumb{ padding:4px 10px; border-radius:999px; border:2px solid var(--ink); background:#fff; }
.crumb.current{ background:var(--coral); color:#fff; }
 
/* ============================== BROWSE GRIDS ============================== */
.year-grid{ margin-top:24px; grid-template-columns:repeat(2,1fr); }
@media(min-width:768px){ .year-grid{ grid-template-columns:repeat(4,1fr); } }
.year-card{ padding:24px; border-radius:16px; text-align:left; background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.sem-grid{ margin-top:24px; grid-template-columns:repeat(2,1fr); max-width:420px; }
.sem-card{ padding:24px; border-radius:16px; text-align:center; background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.subject-grid{ margin-top:24px; grid-template-columns:1fr; }
@media(min-width:640px){ .subject-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .subject-grid{ grid-template-columns:repeat(3,1fr); } }
.subject-card{ text-align:left; padding:20px; border-radius:16px; background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.subject-code-row{ display:flex; align-items:center; justify-content:space-between; }
.subject-name{ font-size:18px; margin-top:12px; }
.subject-teachers{ font-size:12px; margin-top:4px; font-weight:700; color:var(--ink-80); }
.subject-foot{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink-80); }
 
.stat-grid{ margin-top:24px; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:640px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{ padding:16px; border-radius:16px; text-align:center; background:#fff; border:2.5px solid var(--ink); }
.stat-value{ font-size:24px; }
.stat-label{ font-size:12px; margin-top:2px; font-weight:700; color:var(--ink-80); }
 
.cat-grid{ margin-top:12px; grid-template-columns:1fr; gap:12px; }
@media(min-width:640px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
.cat-card{ text-align:left; padding:16px; border-radius:16px; display:flex; align-items:center; gap:12px; background:#fff; border:2.5px solid var(--ink); }
.cat-card[disabled]{ opacity:.4; cursor:default; box-shadow:none !important; }
.cat-emoji{ font-size:24px; }
.cat-count{ font-size:12px; font-weight:700; color:var(--ink-80); }
 
.teacher-grid{ margin-top:24px; grid-template-columns:1fr; max-width:672px; gap:16px; }
@media(min-width:640px){ .teacher-grid{ grid-template-columns:1fr 1fr; } }
.teacher-card{ text-align:left; padding:20px; border-radius:16px; background:#fff; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.teacher-avatar{ width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--sun); border:2px solid var(--ink); }
.teacher-name{ font-size:18px; margin-top:12px; }
.teacher-sub{ font-size:12px; margin-top:4px; font-weight:700; color:var(--ink-80); }
.teacher-foot{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink-80); }
 
.unit-chips{ margin-top:20px; display:flex; align-items:center; gap:8px; overflow-x:auto; padding-bottom:4px; }
.unit-chip{ padding:6px 12px; border-radius:999px; font-size:14px; font-weight:700; white-space:nowrap; flex-shrink:0; border:2px solid var(--ink); background:#fff; }
.unit-chip.active{ background:var(--ink); color:var(--paper); }
 
.resource-grid{ margin-top:20px; grid-template-columns:1fr; gap:12px; }
@media(min-width:640px){ .resource-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1024px){ .resource-grid{ grid-template-columns:repeat(3,1fr); } }
.resource-card{ padding:16px; border-radius:16px; display:flex; flex-direction:column; gap:10px; background:#fff; border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
.res-top{ display:flex; align-items:center; justify-content:space-between; }
.res-top .tags{ display:flex; align-items:center; gap:6px; }
.heart-btn{ width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--ink); }
.res-title{ font-size:14px; line-height:1.35; }
.res-meta{ font-size:12px; font-weight:700; color:var(--ink-80); }
.res-meta2{ font-size:12px; font-weight:600; color:var(--ink-66); }
.res-actions{ margin-top:4px; display:flex; align-items:center; gap:8px; }
.res-actions .btn{ flex:1; }
 
.unit-group{ margin-bottom:24px; }
.unit-group h3{ font-size:18px; margin-bottom:8px; }
 
/* ============================== RESOURCE MODAL ============================== */
.modal-overlay{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center; padding:0; background:rgba(32,28,27,.8); }
@media(min-width:768px){ .modal-overlay{ align-items:center; padding:0 16px; } }
.modal-panel{ width:100%; overflow-y:auto; border-radius:24px 24px 0 0; background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); max-height:92vh; }
@media(min-width:768px){ .modal-panel{ max-width:576px; border-radius:24px; } }
.modal-head{ padding:20px; border-bottom:2.5px solid var(--ink); }
.modal-head-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.modal-tags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.modal-title{ font-size:24px; margin-top:12px; }
.modal-sub{ font-size:14px; font-weight:700; margin-top:4px; color:var(--ink-99); }
.modal-body{ padding:20px; display:flex; flex-direction:column; gap:12px; }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:14px; }
.info-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-66); }
.info-value{ font-weight:700; font-size:14px; margin-top:2px; }
.modal-desc{ font-size:14px; font-weight:600; line-height:1.6; color:var(--ink-99); }
.preview-box{ border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#fff; border:2.5px dashed var(--ink-66); aspect-ratio:4/3; }
.preview-box span{ font-size:12px; font-weight:700; color:var(--ink-66); }
.modal-actions{ display:flex; align-items:center; gap:8px; padding-top:4px; }
.modal-actions .btn{ flex:1; }
.save-toggle{ width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:#fff; }
.save-toggle.active{ background:#FDE4E0; }
.related-list{ display:flex; flex-direction:column; gap:8px; }
.related-row{ width:100%; text-align:left; padding:10px 12px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; border:2px solid var(--ink); font-size:14px; font-weight:700; }
 
/* ============================== UPLOAD FORM ============================== */
.upload-wrap{ max-width:672px; margin:0 auto; padding:40px 16px; }
@media(min-width:768px){ .upload-wrap{ padding:40px 24px; } }
.upload-title{ font-size:30px; margin-top:4px; }
@media(min-width:768px){ .upload-title{ font-size:36px; } }
.upload-form{ margin-top:32px; border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:16px; background:#fff; border:2.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.form-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.field label, .form-grid label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-80); display:block; }
.field input, .field textarea, .form-grid input, .form-grid select{ margin-top:4px; width:100%; border-radius:12px; padding:10px 12px; font-size:14px; font-weight:600; outline:none; border:2px solid var(--ink); background:#fff; }
.field textarea{ resize:vertical; }
.dropzone{ margin-top:4px; border-radius:12px; padding:32px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; border:2.5px dashed var(--ink-66); }
.dropzone span{ font-size:14px; font-weight:700; color:var(--ink-80); }
.form-note{ font-size:12px; font-weight:700; color:var(--ink-80); }
.upload-success{ max-width:512px; margin:0 auto; padding:96px 16px; text-align:center; }
.success-icon{ width:64px; height:64px; margin:0 auto; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#E1F5EC; border:2.5px solid var(--ink); }
.upload-success h1{ font-size:24px; margin-top:16px; }
.upload-success p{ margin-top:8px; font-weight:600; color:var(--ink-99); }
.success-actions{ margin-top:24px; display:flex; align-items:center; justify-content:center; gap:12px; }
 
/* ============================== DASHBOARD / SAVED ============================== */
.dash-title{ font-size:30px; }
.dash-sub{ margin-top:4px; font-weight:700; color:var(--ink-99); }
.dash-grid{ margin-top:24px; grid-template-columns:1fr; }
@media(min-width:640px){ .dash-grid{ grid-template-columns:repeat(3,1fr); } }
.dash-card{ padding:20px; border-radius:16px; text-align:left; border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.dash-card-title{ font-size:16px; margin-top:8px; }
.dash-card-sub{ font-size:12px; margin-top:4px; font-weight:700; color:var(--ink-80); }
.section-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.section-head h2{ font-size:20px; }
 
/* ============================== EMPTY / TOAST ============================== */
.empty-state{ text-align:center; padding:48px 24px; border-radius:16px; background:#fff; border:2.5px dashed var(--ink-66); }
.empty-emoji{ font-size:30px; margin-bottom:8px; }
.empty-title{ font-size:18px; }
.empty-body{ font-size:14px; margin-top:4px; font-weight:600; max-width:320px; margin-left:auto; margin-right:auto; color:var(--ink-99); }
.empty-action{ margin-top:16px; }
 
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:60; padding:12px 16px; border-radius:16px; font-weight:700; font-size:14px; background:var(--ink); color:var(--paper); box-shadow:3px 3px 0 var(--coral); animation:toastIn .2s ease; }
@keyframes toastIn{ from{opacity:0; transform:translate(-50%,12px);} to{opacity:1; transform:translate(-50%,0);} }
 
/* ============================== FOOTER ============================== */
.site-footer{ margin-top:64px; border-top:2.5px solid var(--ink); background:#fff; }
.footer-grid{ padding:48px 0 40px; display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; } }
.footer-brand{ grid-column:1 / -1; }
@media(min-width:768px){ .footer-brand{ grid-column:auto; } }
.footer-about-text{ font-size:14px; margin-top:12px; font-weight:600; max-width:320px; line-height:1.55; color:var(--ink-99); }
.footer-col .eyebrow{ margin-bottom:10px; display:block; }
.footer-links{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:700; }
.footer-links button{ text-align:left; }
.footer-about{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:700; color:var(--ink-99); }
.footer-social{ display:flex; align-items:center; gap:10px; }
.social-btn{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ink); background:#fff; color:var(--ink); transition:transform .12s ease, background .12s ease, color .12s ease; }
.social-btn:hover{ background:var(--coral); color:#fff; border-color:var(--ink); transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--ink); }
.footer-bottom{ text-align:center; font-size:12px; font-weight:700; padding:16px 0; color:var(--ink-80); border-top:2px solid var(--ink); }
.pdf-preview {
  width: 100%;
  height: 420px;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}
/* Improved Year buttons */
.year-grid {
  gap: 18px;
}

.year-card {
  min-height: 170px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  text-align: left;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}

.year-card:nth-child(1) { background: #facac3; }
.year-card:nth-child(2) { background: #a9d3f8; }
.year-card:nth-child(3) { background: #fee9b2; }
.year-card:nth-child(4) { background: #bbfbde; }

.year-card::after {
  content: "→";
  position: absolute;
  right: 20px;
  bottom: 15px;
  font-size: 28px;
  font-weight: 800;
  color: var(--coral-d);
}

.year-card:hover,
.sem-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink);
}

/* Improved Semester buttons */
.sem-grid {
  margin-top: 28px;
  max-width: 650px;
  gap: 18px;
}

.sem-card {
  min-height: 160px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  text-align: left;
  background: #d5b5ff;
  box-shadow: 5px 5px 0 var(--ink);
}

.sem-card:nth-child(2) {
  background: #fbe7b1;
}

.sem-card::before {
  content: "📚";
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  text-align: center;
  line-height: 42px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 20px;
}

.sem-card::after {
  content: "→";
  position: absolute;
  right: 20px;
  bottom: 14px;
  font-size: 28px;
  font-weight: 800;
  color: var(--coral-d);
}
/* Department cards: colourful main choices */
.dept-grid {
  gap: 18px;
}

.dept-card {
  min-height: 190px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
  position: relative;
  overflow: hidden;
}

.dept-card:nth-child(1) { background: #fecec7; }
.dept-card:nth-child(2) { background: #cfe7fc; }
.dept-card:nth-child(3) { background: #ffedbd; }
.dept-card:nth-child(4) { background: #c6f9e2; }
.dept-card:nth-child(5) { background: #fec6be; }
.dept-card:nth-child(6) { background: #fbe9b7; }
.dept-card:nth-child(7) { background: #bdfce0; }

.dept-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink);
}

.dept-card::after {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  color: var(--coral-d);
}


/* Subject cards: simpler so the page stays clean */
.subject-grid {
  gap: 18px;
}

.subject-card {
  min-height: 180px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
}

.subject-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9px;
  background: var(--coral);
}

.subject-card:nth-child(3n + 2)::before {
  background: var(--sky);
}

.subject-card:nth-child(3n)::before {
  background: #401e8a;
}

.subject-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.subject-name {
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.3;
}


/* Resource categories: compact and easy to scan */
.cat-grid {
  gap: 14px;
}

.cat-card {
  min-height: 88px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}

.cat-card:nth-child(1) { background: #a5d1f8; }
.cat-card:nth-child(2) { background: #f9e7b9; }
.cat-card:nth-child(3) { background: #fdc9c1; }
.cat-card:nth-child(4) { background: #c6fde4; }
.cat-card:nth-child(5) { background: #c4e4ff; }
.cat-card:nth-child(6) { background: #ffedbc; }
.cat-card:nth-child(7) { background: #ceffe9; }

.cat-card:hover:not([disabled]) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}

.cat-card[disabled] {
  background: #f1f1f1;
}
/* ============================== AUTH (login / sign-up) ============================== */
.auth-form{display:flex;flex-direction:column;gap:14px;}
.auth-seg{display:flex;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff;}
.auth-seg button{padding:7px 16px;font-size:13px;font-weight:800;}
.auth-seg button.on{background:var(--ink);color:var(--paper);}
.social-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.or-row{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:11px;font-weight:800;text-transform:uppercase;color:var(--ink-80);}
.or-row::before,.or-row::after{content:"";flex:1;height:2px;background:var(--ink);opacity:.12;}
.tab-row{display:flex;gap:8px;margin-bottom:14px;}
.tab-row .chip{flex:1;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:44px !important;}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-35%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink-80);}
.pw-meter{display:flex;gap:6px;margin-top:-6px;}
.pw-meter i{flex:1;height:6px;border-radius:99px;background:rgba(32,28,27,.12);}
.pw-meter i.l1{background:var(--coral);} .pw-meter i.l2{background:var(--sun);} .pw-meter i.l3,.pw-meter i.l4{background:var(--leaf);}
.pw-rules{list-style:none;margin:-4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font-size:12px;font-weight:700;color:var(--ink-80);}
.pw-rules li::before{content:"○ ";} .pw-rules li.ok{color:#1E8A5C;} .pw-rules li.ok::before{content:"✓ ";}
.check-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer;}
.check-row input{width:16px;height:16px;accent-color:var(--coral);}
.code-input{text-align:center;font-size:24px !important;letter-spacing:.5em;font-weight:800 !important;}
.auth-err{color:var(--coral-d);background:#FDE4E0;border:2px solid var(--coral-d);border-radius:12px;padding:8px 12px;}
.auth-ok{color:#1E8A5C;background:#E1F5EC;border:2px solid #96f9ce;border-radius:12px;padding:8px 12px;}
.form-note.center{text-align:center;}
.crumb.link{font-weight:800;text-decoration:underline;}

/* ============================== THEME POLISH ============================== */
.icon-btn,.icon-btn.sun{background:#fff;transition:background .12s,transform .12s,box-shadow .12s;}
.icon-btn:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink);}
.icon-btn:active,.icon-btn.on{background:var(--sun);transform:translate(1px,1px);box-shadow:none;}
.nav-link{border-radius:10px;padding:5px 11px;transition:background .12s,color .12s;}
.nav-link:hover{background:var(--sun);}
.nav-link:active,.nav-link.active{background:var(--coral);color:#fff;}
.btn-secondary:active,.chip:active{background:var(--coral);color:#fff;}
.chip.active{background:var(--coral);color:#fff;border-color:var(--ink);}
.site-header .mobile-menu{display:flex;flex-direction:column;gap:8px;padding:12px 16px 16px;background:var(--paper);border-top:2.5px solid var(--ink);transform:none;box-shadow:none;}
.site-header .mobile-menu button{text-align:left;padding:12px 14px;border:2.5px solid var(--ink);border-radius:14px;background:#fff;font-weight:800;font-size:15px;box-shadow:3px 3px 0 var(--ink);transition:background .12s,transform .12s,box-shadow .12s;}
.site-header .mobile-menu button:hover{background:var(--sun);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.site-header .mobile-menu button:active,.site-header .mobile-menu button.active{background:var(--coral);color:#fff;transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}
.footer-social .social-btn{background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);opacity:1;}
.footer-social .social-btn:hover{background:var(--sun);}
.footer-social .social-btn:active{background:var(--coral);color:#fff;}
.dept-card{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);}
.admin-note{background:#FFF3D2;color:#8A6300;border:2px dashed #B98A00;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700;margin-bottom:16px;}
.field select{margin-top:4px;width:100%;border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600;border:2px solid var(--ink);background:#fff;}

/* ============================== PREMIUM NAV + PROFILE ============================== */
:root{ --ease:cubic-bezier(.2,.8,.2,1); --coral-g:linear-gradient(180deg,#F66A52 0%,#E8452E 100%); }
.site-header{ background:linear-gradient(180deg,#fffdf2,var(--paper)); }
.main-nav{ gap:10px; }
.nav-link,.nav-link:hover{  color:#9e2424; border-radius:14px; padding:8px 16px; font-weight:800; font-size:14px;
  box-shadow:2px 2px 0 var(--ink); transition:transform.18s var(--ease),box-shadow .18s var(--ease),filter .18s; }
.nav-link:hover{ transform:translate(-1px,-2px); box-shadow:3px 3px 0 var(--ink); filter:brightness(1.06); }
.nav-link:active,.nav-link.active{ background:linear-gradient(180deg,#B5351F); color:#fff; }
.icon-btn{ box-shadow:3px 3px 0 var(--ink); transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s; }
.icon-btn:hover{ background:var(--sun); transform:translate(-1px,-2px); box-shadow:4px 5px 0 var(--ink); }
.icon-btn:active,.icon-btn.on{ background:var(--sun); transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }

.pf{ padding:40px 16px 56px; display:grid; gap:24px; align-items:start; grid-template-columns:1fr; }
@media(min-width:900px){ .pf{ grid-template-columns:320px 1fr; } .pf-side{ position:sticky; top:88px; } }
.pf-side,.pf-panel{ background:linear-gradient(160deg,#fff 0%,#fdf6ea 100%); border:2.5px solid var(--ink); border-radius:26px; box-shadow:5px 5px 0 var(--ink); }
.pf-side{ padding:28px 22px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.pf-panel{ padding:22px; margin-top:20px; }
.pf-avatar{ position:relative; width:124px; height:124px; border-radius:30px; border:2.5px solid var(--ink); background:linear-gradient(145deg,#eceaf2,#d9d6e6); overflow:visible;
  box-shadow:3px 3px 0 var(--ink); transition:transform .25s var(--ease),box-shadow .25s var(--ease); display:grid; place-items:center; }
.pf-avatar svg{ width:100%; height:100%; border-radius:27px; background:currentColor; display:block; }
.pf-avatar:hover{ transform:translate(-2px,-3px) rotate(-1.5deg); box-shadow:6px 7px 0 var(--ink); }
.pf-avatar:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.pf-ph{ color:var(--ink-80); display:grid; place-items:center; }
.pf-cam{ position:absolute; right:-8px; bottom:-8px; width:30px; height:30px; border-radius:50%; background:var(--sun); border:2.5px solid var(--ink); display:grid; place-items:center; font-style:normal; }
.pf-pick{ display:flex; gap:12px; animation:pfPop .28s var(--ease); }
.pf-opt{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 10px; border:2.5px solid var(--ink); border-radius:18px; background:#fff; font-weight:800; font-size:13px;
  box-shadow:3px 3px 0 var(--ink); transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s; }
.pf-opt:hover{ background:var(--sun); transform:translate(-1px,-2px); box-shadow:4px 5px 0 var(--ink); }
.pf-opt.on{ background:var(--coral); color:#fff; }
.pf-mini{ width:62px; height:62px; border-radius:14px; overflow:hidden; display:block; border:2px solid var(--ink); }
.pf-mini svg{ width:100%; height:100%; background:currentColor; display:block; }
.pf-name{ font-size:30px; line-height:1.1; margin:6px 0 0; word-break:break-word; }
.pf-mail{ margin:0; font-size:13px; font-weight:700; color:var(--ink-80); word-break:break-all; }
.pf-badge{ background:var(--ink); color:var(--sun); font-weight:800; font-size:12px; padding:4px 12px; border-radius:99px; }
.pf-btn{ width:100%; padding:13px 18px; border-radius:16px; border:2.5px solid var(--ink); font-weight:800; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s,background .18s; }
.pf-main{ background:var(--coral-g); color:#fff; box-shadow:3px 3px 0 var(--ink),0 10px 24px -6px rgba(240,82,58,.55); }
.pf-main:hover{ transform:translate(-1px,-2px); box-shadow:5px 5px 0 var(--ink),0 14px 30px -6px rgba(240,82,58,.6); filter:brightness(1.06); }
.pf-line{ background:#fff; color:var(--coral-d); border-color:var(--coral-d); box-shadow:3px 3px 0 var(--coral-d); }
.pf-line:hover{ background:#FDE4E0; transform:translate(-1px,-2px); box-shadow:5px 5px 0 var(--coral-d); }
.pf-btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.pf-out{ margin-top:10px; }
.pf-edit{ width:100%; display:flex; flex-direction:column; gap:10px; }
.pf-edit input,.pf-code input{ width:100%; padding:12px 14px; border:2.5px solid var(--ink); border-radius:14px; font-size:15px; font-weight:700; background:#fff; }
.pf-edit input:focus,.pf-code input:focus{ outline:3px solid rgba(240,82,58,.35); }
.pf-row{ display:flex; gap:10px; }
.pf-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:640px){ .pf-grid{ grid-template-columns:1fr 1fr; } }
.pf-card{ position:relative; overflow:hidden; text-align:left; display:flex; flex-direction:column; gap:4px; padding:22px; min-height:150px; border:2.5px solid var(--ink); border-radius:26px;
  box-shadow:4px 4px 0 var(--ink); transition:transform .22s var(--ease),box-shadow .22s var(--ease); }
.pf-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); transform:translateX(-120%); transition:transform .6s var(--ease); pointer-events:none; }
.pf-card:hover{ transform:translate(-2px,-4px); box-shadow:7px 9px 0 var(--ink); }
.pf-card:hover::after{ transform:translateX(120%); }
.pf-card:active{ transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
.pf-card b{ font-size:22px; margin-top:auto; }
.pf-sub{ font-size:14px; font-weight:700; color:var(--ink-99); }
.pf-ic{ width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.7); border:2px solid var(--ink); display:grid; place-items:center; }
.pf-card.c1{ background:linear-gradient(140deg,#F8CFCB,#FDE9E6); } .pf-card.c2{ background:linear-gradient(140deg,#FFE3A6,#FFF4D6); }
.pf-card.c3{ background:linear-gradient(140deg,#F6D9A8,#FBEBCB); } .pf-card.c4{ background:linear-gradient(140deg,#B9DDF7,#E6F3FD); }
.pf-card[data-action="noop"]{ cursor:default; }
.pf-code{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; animation:pfPop .28s var(--ease); }
.pf-code>div{ flex:1 1 220px; } .pf-code p{ margin:4px 0 0; font-size:13px; font-weight:700; color:var(--ink-99); }
.pf-code input{ flex:1 1 180px; width:auto; } .pf-code .pf-btn{ width:auto; }
.pf-empty{ margin:6px 0 0; font-weight:700; color:var(--ink-80); }
@keyframes pfPop{ from{ opacity:0; transform:translateY(-6px) scale(.96); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .pf *,.nav-link,.icon-btn{ transition:none !important; animation:none !important; } .pf-card::after{ display:none; } }
.nav-link:focus-visible,.pf-btn:focus-visible,.pf-card:focus-visible,.pf-avatar:focus-visible,.pf-opt:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }

/* =====================================================================
   LUMOS CONTRIBUTION PAGE  (same doodle theme: ink borders, offset shadows,
   Fredoka headings, coral / sun / sky / leaf)
   ===================================================================== */
.social-row{grid-template-columns:1fr;}
.c-wrap{max-width:760px;}
.c-muted{font-size:14px;font-weight:600;color:var(--ink-99);line-height:1.5;margin:0;}
.c-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.c-err{color:var(--coral-d);font-weight:800;}
.c-blocked{color:var(--coral-d);font-weight:800;}

/* hero */
.c-hero{position:relative;overflow:hidden;border:2.5px solid var(--ink);border-radius:24px;background:#fff;box-shadow:6px 6px 0 var(--ink);padding:34px 20px;text-align:center;margin-bottom:22px;isolation:isolate;}
.c-hero-in{position:relative;z-index:2;}
.c-title{font-size:30px;line-height:1.08;margin:8px 0 0;}
@media(min-width:640px){.c-title{font-size:44px;}}
.c-title .accent{color:var(--coral);}
.c-lead{margin:14px auto 0;max-width:520px;font-size:15px;font-weight:600;color:var(--ink-99);line-height:1.55;}
.c-lead b{color:var(--ink);background:linear-gradient(transparent 62%,var(--sun) 62%);}
.c-blob{position:absolute;border-radius:50%;z-index:0;}
.c-blob-a{width:210px;height:210px;background:var(--sun);opacity:.7;top:-70px;right:-50px;animation:cDrift 9s ease-in-out infinite;}
.c-blob-b{width:170px;height:170px;background:var(--sky);opacity:.55;bottom:-70px;left:-40px;animation:cDrift 11s ease-in-out infinite reverse;}
.c-float{position:absolute;z-index:1;font-size:26px;opacity:.9;animation:cFloat 5s ease-in-out infinite;user-select:none;}
.c-f1{top:16px;left:6%;}.c-f2{top:22px;right:8%;animation-delay:-1.4s;}.c-f3{bottom:14px;left:12%;animation-delay:-2.6s;}.c-f4{bottom:18px;right:10%;animation-delay:-3.5s;}
@media(max-width:520px){.c-float{font-size:20px;}.c-br{display:none;}}

/* steps */
.c-steps{list-style:none;display:flex;align-items:center;justify-content:center;gap:0;margin:0 0 20px;padding:0;}
.c-step{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--ink-80);position:relative;}
.c-step+.c-step{margin-left:34px;}
.c-step+.c-step::before{content:"";position:absolute;left:-30px;top:50%;width:26px;height:0;border-top:2.5px dashed var(--ink-66);}
.c-step.done+.c-step::before,.c-step.now::before{border-top-style:solid;border-color:var(--ink);}
.c-dot{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .25s;}
.c-step.now{color:var(--ink);}
.c-step.now .c-dot{background:var(--coral);color:#fff;box-shadow:3px 3px 0 var(--ink);animation:cPulse 2s ease-in-out infinite;}
.c-step.done .c-dot{background:#E1F5EC;color:#1E8A5C;}
@media(max-width:480px){.c-step-t{display:none;}.c-step.now .c-step-t{display:inline;}.c-step+.c-step{margin-left:22px;}.c-step+.c-step::before{left:-18px;width:14px;}}

/* gate / vault panels */
.c-panel{background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:26px 20px;display:grid;gap:12px;justify-items:center;text-align:center;margin-bottom:22px;}
.c-panel h2{font-size:22px;margin:0;}
.c-vault{background:#FFF8E1;}
.c-vault .field,.c-vault .btn{width:100%;max-width:360px;}
.c-vault .field{text-align:left;}
.c-lock{width:92px;height:92px;border-radius:50%;background:#FDE4E0;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink);animation:cWobble 3.2s ease-in-out infinite;}
.c-lock-blocked{background:#ffd0c9;animation:none;}
.c-code-input{letter-spacing:.18em;font-weight:800 !important;text-align:center;}
.c-pips{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--ink-99);}
.c-pip{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ink);background:var(--leaf);transition:background .3s,transform .3s;display:inline-block;}
.c-pip.used{background:var(--coral);animation:cPop .4s ease;}
.c-msg{min-height:20px;margin:0;}
.c-shake{animation:cShake .55s cubic-bezier(.36,.07,.19,.97);}
.c-spin{width:15px;height:15px;border-radius:50%;border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;display:inline-block;animation:cSpin .7s linear infinite;}
.c-unlocked{display:flex;align-items:center;gap:12px;background:#E1F5EC;border:2.5px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:12px 16px;margin-bottom:22px;animation:cPop .5s ease;}
.c-unlocked>div{display:grid;gap:2px;text-align:left;}
.c-unlocked .c-muted{font-size:13px;}
.c-open{width:44px;height:44px;flex:none;display:flex;}
.c-open svg{width:44px;height:44px;}
.c-open .c-shackle{animation:cUnlock .6s ease both;transform-origin:20px 28px;}

/* form */
.c-form{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:22px 18px;margin-top:0;}
@media(min-width:640px){.c-form{padding:26px;}}
.c-fields{border:0;margin:0;padding:0;min-width:0;display:grid;gap:14px;}
.c-fields[disabled]{opacity:.55;}
.c-veil{position:absolute;inset:0;z-index:3;border-radius:20px;display:flex;align-items:flex-start;justify-content:center;padding-top:16px;pointer-events:none;}
.c-veil span{background:var(--sun);border:2.5px solid var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;display:inline-flex;gap:6px;align-items:center;box-shadow:3px 3px 0 var(--ink);opacity:1;}
.c-locked .c-fields{padding-top:34px;}
.c-h{display:flex;align-items:center;gap:10px;font-size:17px;margin:6px 0 0;}
.c-h i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--sky);color:#fff;border:2.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:13px;}
.c-form .form-grid{gap:14px;}

/* dropzone + file */
.c-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 14px;margin:0;cursor:pointer;background:#fffdf3;border:2.5px dashed var(--ink-66);border-radius:18px;transition:all .18s;}
.c-drop:hover,.c-drop:focus-visible{border-color:var(--ink);background:#FFF3D2;outline:none;}
.c-drop.c-over{border-color:var(--coral);background:#FDE4E0;transform:scale(1.015);border-style:solid;}
.c-drop.c-off{cursor:not-allowed;}
.c-drop small{font-size:12px;font-weight:700;color:var(--ink-80);}
.c-up{width:54px;height:54px;border-radius:50%;background:var(--sky);color:#fff;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;animation:cBounce 2.2s ease-in-out infinite;}
.c-file{display:flex;align-items:center;gap:12px;background:#E3F2FF;border:2.5px solid var(--ink);border-radius:16px;padding:12px;box-shadow:3px 3px 0 var(--ink);animation:cPop .35s ease;}
.c-pdf{background:var(--coral);color:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:8px 9px;font-size:13px;flex:none;}
.c-file-i{display:grid;min-width:0;flex:1;}
.c-file-i b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
.c-file-i span{font-size:12px;font-weight:700;color:var(--ink-99);}
.c-x{width:30px;height:30px;flex:none;border-radius:50%;border:2.5px solid var(--ink);background:#fff;display:flex;align-items:center;justify-content:center;}
.c-x:hover{background:var(--coral);color:#fff;}
.c-bar{height:14px;border:2.5px solid var(--ink);border-radius:99px;overflow:hidden;background:#fff;}
.c-bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--leaf) 0 10px,#49c78d 10px 20px);background-size:28px 28px;animation:cStripe .8s linear infinite;transition:width .2s;}
.c-pct{margin:0;font-size:12px;font-weight:800;color:var(--ink-99);text-align:right;}

/* chips */
.c-chips,.c-units{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.c-chip{border:2.5px solid var(--ink);border-radius:999px;background:#fff;padding:7px 13px;font-size:13px;font-weight:800;display:inline-flex;gap:6px;align-items:center;transition:transform .12s,box-shadow .12s,background .12s;}
.c-chip:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink);}
.c-chip.on{background:var(--coral);color:#fff;box-shadow:3px 3px 0 var(--ink);}
.c-unit-field{animation:cFadeUp .35s ease both;}
.c-unit{width:42px;height:42px;border-radius:12px;border:2.5px solid var(--ink);background:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;transition:transform .12s,box-shadow .12s,background .12s;}
.c-unit:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink);}
.c-unit.on{background:var(--sun);box-shadow:3px 3px 0 var(--ink);animation:cPop .3s ease;}
.c-pop{animation:cPop .3s ease;}

/* success */
.c-success{position:relative;}
.c-check{width:84px;height:84px;position:relative;animation:cPop .6s cubic-bezier(.2,1.4,.4,1) both;}
.c-check::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2.5px solid var(--leaf);animation:cRing 1.4s ease-out .3s infinite;}
.c-burst{position:absolute;left:50%;top:128px;width:0;height:0;pointer-events:none;}
.c-burst i{position:absolute;width:10px;height:10px;border-radius:3px;background:var(--c);border:1.5px solid var(--ink);animation:cConfetti .9s ease-out var(--d) both;transform:rotate(var(--a)) translateY(0);}

/* entrance */
.c-in{animation:cFadeUp .5s ease both;}
.c-in+.c-in,.c-hero.c-in+ol+.c-in{animation-delay:.08s;}
.c-form.c-in{animation-delay:.16s;}

/* admin page polish */
.c-adm-row{padding:14px;margin-top:12px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);}
.c-adm-row .badge{margin-left:6px;background:var(--sun);}
@media(max-width:600px){.c-adm-row{flex-direction:column;}.c-row .btn{flex:1;}}

@keyframes cFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes cFloat{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-10px) rotate(6deg);}}
@keyframes cDrift{0%,100%{transform:translate(0,0);}50%{transform:translate(-14px,10px);}}
@keyframes cWobble{0%,100%{transform:rotate(0);}8%{transform:rotate(-8deg);}16%{transform:rotate(8deg);}24%{transform:rotate(-5deg);}32%{transform:rotate(0);}}
@keyframes cShake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(5px);}30%,50%,70%{transform:translateX(-9px);}40%,60%{transform:translateX(9px);}}
@keyframes cPop{0%{transform:scale(.6);opacity:0;}70%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);}}
@keyframes cPulse{0%,100%{box-shadow:3px 3px 0 var(--ink),0 0 0 0 rgba(240,82,58,.45);}50%{box-shadow:3px 3px 0 var(--ink),0 0 0 8px rgba(240,82,58,0);}}
@keyframes cBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes cSpin{to{transform:rotate(360deg);}}
@keyframes cStripe{to{background-position:28px 0;}}
@keyframes cUnlock{from{transform:rotate(0);}to{transform:rotate(-22deg) translate(-2px,-2px);}}
@keyframes cRing{0%{transform:scale(.9);opacity:.9;}100%{transform:scale(1.5);opacity:0;}}
@keyframes cConfetti{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1;}100%{transform:rotate(var(--a)) translateY(-120px) scale(.6);opacity:0;}}
@media (prefers-reduced-motion:reduce){.c-hero *,.c-panel *,.c-lock,.c-up,.c-step .c-dot,.c-shake,.c-in,.c-check,.c-check::after,.c-burst i,.c-bar i,.c-unlocked,.c-file,.c-unit-field{animation:none !important;}}