/* ==========================================================================
   TechLearners — Skeuomorphism Theme (data-theme="skeuo")
   Realistic materials: wooden desk, brushed metal, stitched leather,
   paper cards, 3D buttons, engraved inputs.
   Fully responsive: 360px phones → tablets → desktop → large screens.
   File: assets/css/skeuomorphism.css
   Usage: <link rel="stylesheet" href="assets/css/skeuomorphism.css?v=skeuo-1">
   Activate via: document.documentElement.setAttribute('data-theme','skeuo')
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
[data-theme="skeuo"] {
  color-scheme: light;
  --bg: #cfc3a8;
  --card: #fdf8e7;
  --text: #2f2620;
  --muted: #6d5f4e;
  --accent: #0b4f5a;
  --accent2: #6a8f00;
  --accent3: #2a7f8f;
  --accent-soft: rgba(11, 79, 90, 0.1);
  --border: #b3a284;
  --glass: #fdf8e7;
  --body-bg: #b8a888;
  --header-bg: #d9d9d9;
  --input-bg: #efe6cd;
  --nav-bg: #d9d9d9;
  --shadow: 0 10px 30px rgba(43, 30, 12, 0.35);
  --logo-bg: linear-gradient(145deg, #f6f6f6, #9a9a9a 45%, #e0e0e0 60%, #7a7a7a);
  --logo-text: #2b2118;
  --logo-halo: rgba(255, 255, 255, 0.6);
  --icon-color: #2f2620;

  /* skeuo-only materials */
  --skeuo-desk-hi: #d9cba9;
  --skeuo-desk-lo: #8a7355;
  --skeuo-metal-hi: #ffffff;
  --skeuo-metal-mid: #c8c8c8;
  --skeuo-metal-lo: #7e7e7e;
  --skeuo-paper: #fdf8e7;
  --skeuo-paper-line: rgba(11, 79, 90, 0.07);
  --skeuo-leather: #33473b;
  --skeuo-leather-stitch: #d8e6a0;
  --skeuo-inset-shadow: inset 0 2px 6px rgba(43, 30, 12, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  --skeuo-outset: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -2px 4px rgba(0, 0, 0, 0.18) inset, 0 5px 0 #6b5d4e, 0 8px 18px rgba(43, 30, 12, 0.4);
  --skeuo-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 28px rgba(43, 30, 12, 0.32), 0 2px 6px rgba(43, 30, 12, 0.25);
  --skeuo-engraved: 0 1px 0 rgba(255, 255, 255, 0.85), 0 -1px 1px rgba(0, 0, 0, 0.25) inset;
}

/* ---------- 2. Desk / body texture ---------- */
[data-theme="skeuo"] body {
  background-color: var(--skeuo-desk-lo);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255, 250, 230, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(0, 0, 0, 0.28), transparent 55%),
    repeating-linear-gradient(93deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--skeuo-desk-hi) 0%, #c4b28e 30%, #a68f68 70%, var(--skeuo-desk-lo) 100%);
  background-attachment: fixed;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

[data-theme="skeuo"] body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 40%);
  opacity: 1;
}

/* Global media safety — all themes, helps every device */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}
iframe { aspect-ratio: 16 / 9; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
* { -webkit-tap-highlight-color: transparent; }

/* ---------- 3. Brushed-metal header ---------- */
[data-theme="skeuo"] .site-header {
  background:
    linear-gradient(180deg, #ffffff 0%, #e9e9e9 8%, #c2c2c2 48%, #a8a8a8 52%, #d4d4d4 92%, #f2f2f2 100%);
  border-bottom: 2px solid #6f6f6f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
  position: sticky;
}
/* screw heads */
[data-theme="skeuo"] .site-header::before,
[data-theme="skeuo"] .site-header::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, #f0f0f0, #8a8a8a);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-theme="skeuo"] .site-header::before { left: 8px; }
[data-theme="skeuo"] .site-header::after { right: 8px; }

/* Brand coin */
[data-theme="skeuo"] .brand {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  padding-left: 14px;
}
[data-theme="skeuo"] .brand-mark {
  background: linear-gradient(145deg, #ffffff 0%, #cfcfcf 30%, #8f8f8f 52%, #e8e8e8 70%, #7a7a7a 100%);
  color: #2b2118;
  border: 2px solid #5f5f5f;
  border-radius: 50%;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.95),
    inset 0 -3px 5px rgba(0, 0, 0, 0.4),
    0 3px 0 #5f5f5f,
    0 6px 12px rgba(0, 0, 0, 0.4);
  animation: none;
  transform: rotate(-7deg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="skeuo"] .brand-mark::after { display: none; }
[data-theme="skeuo"] .brand-accent { color: #0b4f5a; }

/* ---------- 4. Metal tab navigation ---------- */
[data-theme="skeuo"] .nav a {
  background: linear-gradient(180deg, #fefefe, #d6d6d6 50%, #bcbcbc);
  border: 1px solid #7a7a7a;
  border-radius: 10px;
  color: #2f2620;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 3px 0 #6f6f6f,
    0 5px 10px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="skeuo"] .nav a:hover {
  background: linear-gradient(180deg, #ffffff, #e2e2e2 50%, #c8c8c8);
  color: #0b4f5a;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 0 #6f6f6f,
    0 7px 14px rgba(0, 0, 0, 0.28);
}
[data-theme="skeuo"] .nav a:active,
[data-theme="skeuo"] .nav a.active:not(.btn) {
  background: linear-gradient(180deg, #b8b8b8, #d0d0d0);
  box-shadow: var(--skeuo-inset-shadow);
  transform: translateY(2px);
  color: #0b4f5a !important;
  border-bottom-color: #7a7a7a !important;
}
[data-theme="skeuo"] .nav-dd-trigger {
  background: linear-gradient(180deg, #fefefe, #cfcfcf);
  border: 1px solid #7a7a7a;
  border-radius: 10px;
  color: #2f2620;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 0 #6f6f6f,
    0 5px 10px rgba(0, 0, 0, 0.22);
}
[data-theme="skeuo"] .nav-dd-menu,
[data-theme="skeuo"] .nav-dropdown {
  background: linear-gradient(180deg, #fdf8e7, #efe3c2);
  border: 2px solid #7a6a4f;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: none;
}
[data-theme="skeuo"] .menu-btn {
  background: linear-gradient(180deg, #fff, #c9c9c9);
  border: 1px solid #6f6f6f;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #6f6f6f, 0 5px 10px rgba(0,0,0,.3);
}
[data-theme="skeuo"] .menu-btn span { background: #2b2118; }

/* ---------- 5. Leather portal / hero ---------- */
[data-theme="skeuo"] .learning-portal {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #3f5548 0%, #2e4036 60%, #24332b 100%);
  border-bottom: 3px solid #1a2620;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 8px rgba(0, 0, 0, 0.5);
  border-radius: 0 0 22px 22px;
  color: #f2ecd8;
}
[data-theme="skeuo"] .learning-portal .hero-study-title,
[data-theme="skeuo"] .learning-portal h1 {
  color: #fdf8e7;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.2);
}
[data-theme="skeuo"] .learning-portal p { color: #d9d0b4; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
[data-theme="skeuo"] .hero .hero-platform-tag {
  background: linear-gradient(180deg, #fdf6dd, #e8d9ae);
  border: 1px solid #7a6a4f;
  color: #4a3d28 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 0 #6b5d44,
    0 6px 14px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* stitched divider around portal on desktop */
@media (min-width: 701px) {
  [data-theme="skeuo"] .learning-portal::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px dashed rgba(216, 230, 160, 0.45);
    border-radius: 16px;
    pointer-events: none;
  }
}

/* ---------- 6. Inset search slot ---------- */
[data-theme="skeuo"] .learning-search {
  background: linear-gradient(180deg, #4a4436, #2e2a20);
  border: 2px solid #1c1a13;
  border-radius: 16px;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.35);
  backdrop-filter: none;
  padding: 10px;
}
[data-theme="skeuo"] .learning-search input {
  background: linear-gradient(180deg, #fdf6dd, #f0e4bd);
  border: 1px solid #7a6a4f;
  border-radius: 10px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #2f2620;
}

/* ---------- 7. Paper cards ---------- */
[data-theme="skeuo"] .hero-card,
[data-theme="skeuo"] .card,
[data-theme="skeuo"] .form-card,
[data-theme="skeuo"] .login-card,
[data-theme="skeuo"] .quiz-box,
[data-theme="skeuo"] .exam-card,
[data-theme="skeuo"] .qotd-card,
[data-theme="skeuo"] .practice-question,
[data-theme="skeuo"] .mcq-card,
[data-theme="skeuo"] .announcement-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.7) 0, transparent 90px),
    repeating-linear-gradient(180deg, transparent 0 27px, var(--skeuo-paper-line) 27px 28px),
    linear-gradient(180deg, #fffdf2, var(--skeuo-paper));
  border: 1px solid #a08c64;
  outline: 1px dashed rgba(122, 106, 79, 0.55);
  outline-offset: -7px;
  border-radius: 12px;
  box-shadow: var(--skeuo-card-shadow);
  backdrop-filter: none;
  color: var(--text);
}
[data-theme="skeuo"] .card::before,
[data-theme="skeuo"] .exam-card::before,
[data-theme="skeuo"] .class-module::before {
  background: linear-gradient(90deg, #8a2b2b, #c25a3a, #d9a441) !important;
  height: 6px;
  border-radius: 12px 12px 0 0;
  opacity: 1;
}
[data-theme="skeuo"] .card:hover,
[data-theme="skeuo"] .exam-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 38px rgba(43, 30, 12, 0.38);
}
/* tape corners on class modules */
[data-theme="skeuo"] .class-module-image {
  border: 6px solid #fffdf2;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  outline: none;
}
[data-theme="skeuo"] .class-module-image::after { display: none; }

/* topic pills = embossed labels */
[data-theme="skeuo"] .topic-pills a,
[data-theme="skeuo"] .portal-stats span {
  background: linear-gradient(180deg, #fffdf2, #e7d9b0);
  border: 1px solid #8a7757;
  color: #3d3325 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 0 #8a7757,
    0 6px 12px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="skeuo"] .topic-pills a:active { transform: translateY(2px); box-shadow: var(--skeuo-inset-shadow); }

/* ---------- 8. Chunky 3D buttons ---------- */
[data-theme="skeuo"] .btn,
[data-theme="skeuo"] button.btn,
[data-theme="skeuo"] a.btn,
[data-theme="skeuo"] .login-submit-button,
[data-theme="skeuo"] .login-google-button {
  background: linear-gradient(180deg, #2ec4d6 0%, #15707d 48%, #0b4f5a 52%, #1890a1 100%);
  border: 1px solid #062e34;
  border-radius: 12px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    0 4px 0 #062e34,
    0 7px 14px rgba(0, 0, 0, 0.35);
  min-height: 44px;
}
[data-theme="skeuo"] .btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 5px 0 #062e34,
    0 9px 18px rgba(0, 0, 0, 0.38);
}
[data-theme="skeuo"] .btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.5),
    0 1px 0 #062e34;
}
[data-theme="skeuo"] .btn.secondary,
[data-theme="skeuo"] .paper-filter.btn.secondary {
  background: linear-gradient(180deg, #ffffff, #d9d0b4 55%, #c4b894);
  border-color: #7a6a4f;
  color: #2f2620;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 #7a6a4f,
    0 7px 14px rgba(0, 0, 0, 0.28);
}
[data-theme="skeuo"] .btn.secondary:active { transform: translateY(3px); box-shadow: var(--skeuo-inset-shadow); }
[data-theme="skeuo"] .btn.danger {
  background: linear-gradient(180deg, #f26d5f, #b91c1c 55%, #7f1212);
  border-color: #5c0d0d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 #5c0d0d, 0 7px 14px rgba(0,0,0,.35);
}
[data-theme="skeuo"] .google-btn { color: #1f2937; }

/* ---------- 9. Engraved inputs ---------- */
[data-theme="skeuo"] input,
[data-theme="skeuo"] textarea,
[data-theme="skeuo"] select,
[data-theme="skeuo"] .login-light-field input {
  background: linear-gradient(180deg, #e9dcb9, #f7efd6);
  border: 1px solid #8a7757;
  border-radius: 10px;
  box-shadow:
    inset 0 3px 7px rgba(43, 30, 12, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.6);
  color: #2f2620;
  min-height: 44px;
}
[data-theme="skeuo"] input:focus,
[data-theme="skeuo"] textarea:focus,
[data-theme="skeuo"] select:focus {
  outline: 3px solid rgba(11, 79, 90, 0.45);
  outline-offset: 2px;
  border-color: #0b4f5a;
}
[data-theme="skeuo"] label { color: #4a3d28; text-shadow: 0 1px 0 rgba(255,255,255,.6); }

/* radio / checkbox bigger touch targets */
[data-theme="skeuo"] input[type="radio"],
[data-theme="skeuo"] input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 22px;
  accent-color: #0b4f5a;
}

/* ---------- 10. Theme toggle as steel switch ---------- */
[data-theme="skeuo"] .theme-toggle-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #d6d6d6 28%, #9a9a9a 62%, #6f6f6f 100%);
  border: 2px solid #555;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4),
    0 4px 0 #444,
    0 8px 16px rgba(0, 0, 0, 0.4);
  color: #2b2118;
}
[data-theme="skeuo"] .theme-toggle-btn:hover { transform: scale(1.05); }
[data-theme="skeuo"] .theme-toggle-btn:active { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0,0,0,.5), 0 1px 0 #444; }
[data-theme="skeuo"] .theme-toggle-btn .theme-toggle-label-text { display: none; }
[data-theme="skeuo"] .sun-path, [data-theme="skeuo"] .moon-path { display: block; }

/* skeuo LED dot on toggle to show active */
.theme-toggle-btn.skeuo-active {
  outline: 3px solid rgba(175, 225, 55, 0.6);
  outline-offset: 2px;
}

/* ---------- 11. Footer metal plate ---------- */
[data-theme="skeuo"] .footer {
  background: linear-gradient(180deg, #3a3a3a, #222 60%, #111);
  border-top: 3px solid #000;
  color: #d9d0b4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  backdrop-filter: none;
}
[data-theme="skeuo"] .footer-grid { border-top-color: rgba(255,255,255,.25); }
[data-theme="skeuo"] .footer-bottom { border-top-color: rgba(255,255,255,.2); }
[data-theme="skeuo"] .footer a { color: #ffe9a8; }
[data-theme="skeuo"] .social-icon {
  background: radial-gradient(circle at 30% 25%, #fff, #bdbdbd 60%, #7a7a7a);
  border: 1px solid #222;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #111, 0 5px 10px rgba(0,0,0,.5);
  color: #222;
}

/* ---------- 12. Progress = VU meter / LED ---------- */
[data-theme="skeuo"] .progress {
  background: linear-gradient(180deg, #1c1a13, #3a3527);
  border: 2px solid #111;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.4);
}
[data-theme="skeuo"] .progress span {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, #2e7d32, #afe137 60%, #ffd54f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 12px rgba(175,225,55,.55);
}
[data-theme="skeuo"] .quiz-progress {
  background: linear-gradient(180deg, #fffdf2, #efe3c2);
  border: 1px solid #8a7757;
  box-shadow: var(--skeuo-card-shadow);
}

/* ---------- 13. Tables / ledger, notices, consent ---------- */
[data-theme="skeuo"] th { background: linear-gradient(180deg, #4a4436, #2e2a20); color: #fdf8e7; text-shadow: 0 -1px 0 #000; }
[data-theme="skeuo"] td { background: rgba(255, 253, 242, 0.85); }
[data-theme="skeuo"] .notice {
  background: linear-gradient(180deg, #fff6c9, #f5e6a8);
  border: 1px solid #8a7757;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(0,0,0,.2);
}
[data-theme="skeuo"] .consent-banner,
[data-theme="skeuo"] .advertisement-card,
[data-theme="skeuo"] .login-loading-card {
  background: linear-gradient(180deg, #fffdf2, #efe3c2);
  border: 2px solid #7a6a4f;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), inset 0 1px 0 #fff;
}
[data-theme="skeuo"] .go-to-top {
  background: radial-gradient(circle at 30% 25%, #ff9d5c, #c25a3a 60%, #7a2b1a);
  border: 2px solid #4a1a0e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 #4a1a0e, 0 8px 16px rgba(0,0,0,.4);
}

/* ---------- 14. RESPONSIVE — all devices ---------- */

/* Base fluid type + spacing that helps every device */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.hero h1, .section h1, .section h2 { text-wrap: balance; }
p, li { overflow-wrap: anywhere; }

/* Small phones ≤ 400px */
@media (max-width: 400px) {
  [data-theme="skeuo"] .site-header { padding: 10px 12px 10px 26px; }
  [data-theme="skeuo"] .site-header::before { left: 5px; width: 11px; height: 11px; margin-top: -5px; }
  [data-theme="skeuo"] .site-header::after { display: none; }
  [data-theme="skeuo"] .brand { font-size: 1.05rem; }
  [data-theme="skeuo"] .brand-mark { width: 34px; height: 34px; font-size: 0.68rem; }
  [data-theme="skeuo"] .hero-card,
  [data-theme="skeuo"] .card,
  [data-theme="skeuo"] .exam-card { outline-offset: -5px; border-radius: 10px; padding: 16px; }
  [data-theme="skeuo"] .btn { width: 100%; min-height: 48px; }
  [data-theme="skeuo"] .learning-search { grid-template-columns: 1fr; }
}

/* Phones ≤ 700px (matches existing nav breakpoint) */
@media (max-width: 700px) {
  [data-theme="skeuo"] body { background-attachment: scroll; }
  [data-theme="skeuo"] body::before { display: block; opacity: 0.5; }
  [data-theme="skeuo"] .site-header { backdrop-filter: none; }
  [data-theme="skeuo"] .nav {
    background: linear-gradient(180deg, #e8e8e8, #bdbdbd);
    border: 2px solid #6f6f6f;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 #fff;
    backdrop-filter: none;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  [data-theme="skeuo"] .nav a,
  [data-theme="skeuo"] .nav-dd-trigger {
    min-height: 48px;
    font-size: 1rem;
  }
  [data-theme="skeuo"] .learning-portal { border-radius: 0 0 16px 16px; }
  [data-theme="skeuo"] .learning-portal::after { display: none; }
  [data-theme="skeuo"] .hero-card,
  [data-theme="skeuo"] .card { box-shadow: 0 6px 16px rgba(43, 30, 12, 0.3); }
  /* flatten heavy textures for performance */
  [data-theme="skeuo"] .card,
  [data-theme="skeuo"] .hero-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,.6) 0, transparent 70px),
      linear-gradient(180deg, #fffdf2, #f7efd6);
  }
  [data-theme="skeuo"] .theme-toggle-btn { width: 100%; height: 48px; border-radius: 12px; }
  [data-theme="skeuo"] .footer { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
}

/* Tablets 701–1024px */
@media (min-width: 701px) and (max-width: 1024px) {
  [data-theme="skeuo"] .hero { grid-template-columns: 1fr; gap: 24px; }
  [data-theme="skeuo"] .learning-hierarchy { grid-template-columns: 1fr 1fr; }
  [data-theme="skeuo"] .exam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-theme="skeuo"] .cards, [data-theme="skeuo"] .two { grid-template-columns: 1fr 1fr; }
  [data-theme="skeuo"] .site-header { padding-left: 30px; padding-right: 30px; }
}

/* Desktop ≥ 1025px — full skeuo detail */
@media (min-width: 1025px) {
  [data-theme="skeuo"] .site-header { padding-left: 7%; padding-right: 7%; }
  [data-theme="skeuo"] .hero-card:hover,
  [data-theme="skeuo"] .card:hover { transform: translateY(-4px) rotate(-0.15deg); }
  [data-theme="skeuo"] .exam-card:hover { transform: translateY(-5px); }
}

/* Large screens ≥ 1440px — constrain + center */
@media (min-width: 1440px) {
  [data-theme="skeuo"] main { max-width: 1320px; margin-inline: auto; }
  [data-theme="skeuo"] .site-header { padding-left: max(7%, calc((100vw - 1320px) / 2)); padding-right: max(7%, calc((100vw - 1320px) / 2)); }
  [data-theme="skeuo"] .section, [data-theme="skeuo"] .hero { padding-left: 40px; padding-right: 40px; }
}

/* Coarse pointers (touch phones/tablets/TVs): bigger targets */
@media (pointer: coarse) {
  [data-theme="skeuo"] .btn,
  [data-theme="skeuo"] .nav a,
  [data-theme="skeuo"] .nav-dd-trigger,
  [data-theme="skeuo"] input,
  [data-theme="skeuo"] select,
  [data-theme="skeuo"] textarea,
  [data-theme="skeuo"] .practice-options label {
    min-height: 48px;
  }
  [data-theme="skeuo"] .practice-options label { padding: 14px 16px; }
  [data-theme="skeuo"] .card:hover,
  [data-theme="skeuo"] .exam-card:hover,
  [data-theme="skeuo"] .btn:hover { transform: none; }
}

/* Landscape phones: keep header compact */
@media (max-height: 500px) and (orientation: landscape) {
  [data-theme="skeuo"] .site-header { padding-top: 8px; padding-bottom: 8px; }
  [data-theme="skeuo"] .hero { padding-top: 24px; padding-bottom: 24px; }
  [data-theme="skeuo"] .nav { max-height: calc(100dvh - 60px); }
}

/* Notch / safe-area */
@supports (padding: env(safe-area-inset-bottom)) {
  [data-theme="skeuo"] .site-header {
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }
  [data-theme="skeuo"] .go-to-top {
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* Reduced motion: kill shine/tilt */
@media (prefers-reduced-motion: reduce) {
  [data-theme="skeuo"] *, [data-theme="skeuo"] *::before, [data-theme="skeuo"] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-theme="skeuo"] .card:hover { transform: none; }
}

/* High contrast: keep engraving readable */
@media (prefers-contrast: more) {
  [data-theme="skeuo"] { --text: #1a120b; --muted: #3d3325; }
  [data-theme="skeuo"] .card,
  [data-theme="skeuo"] .hero-card,
  [data-theme="skeuo"] input,
  [data-theme="skeuo"] textarea { border-width: 2px; }
}

/* Print: flatten textures */
@media print {
  [data-theme="skeuo"] body,
  [data-theme="skeuo"] body::before,
  [data-theme="skeuo"] .site-header,
  [data-theme="skeuo"] .learning-portal,
  [data-theme="skeuo"] .footer {
    background: #fff !important;
    box-shadow: none !important;
    color: #000 !important;
  }
  [data-theme="skeuo"] .card,
  [data-theme="skeuo"] .hero-card,
  [data-theme="skeuo"] .btn { box-shadow: none !important; border: 1px solid #000 !important; }
  [data-theme="skeuo"] .site-header::before,
  [data-theme="skeuo"] .site-header::after,
  [data-theme="skeuo"] .learning-portal::after { display: none !important; }
}