/* ===== Life in the UK — Premium Ultra Pro Max ===== */
/* Color Palette: Royal Blue + Gold + Clean White */
:root {
    --pri: #1e3a6e; --pri-l: #2563eb; --pri-dark: #1e293b;
    --gold: #d4a017; --gold-l: #f5c842;
    --green: #16a34a; --red: #dc2626; --orange: #ea580c;
    --bg: #f4f6fa; --card: #ffffff; --text: #1a1a2e;
    --muted: #6b7280; --border: #e5e7eb; --radius: 14px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);color:var(--text);
    min-height:100vh;min-height:100dvh;
    padding-bottom:calc(68px + var(--safe-b));
    -webkit-tap-highlight-color:transparent;
    overscroll-behavior-y:contain;
}
.app{max-width:560px;margin:0 auto;padding:0}

/* ===== BOTTOM NAV ===== */
.bottom-nav{
    position:fixed;bottom:0;left:0;right:0;z-index:100;
    display:flex;background:#fff;
    border-top:1px solid var(--border);
    padding:8px 0 calc(8px + var(--safe-b));
    box-shadow:0 -4px 20px rgba(0,0,0,0.06);
}
.bnav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;color:#b0b8c4;
    font-size:10px;padding:4px;cursor:pointer;transition:all 0.2s;
}
.bnav-item.active{color:var(--pri-l)}
.bnav-icon{font-size:20px;line-height:1;transition:transform 0.2s;font-style:normal}
.bnav-item.active .bnav-icon{transform:scale(1.2)}
.bnav-label{font-weight:700;letter-spacing:0.2px}

/* ===== HEADER ===== */
.header{
    background:linear-gradient(135deg,var(--pri) 0%,#1e40af 100%);
    padding:14px 16px;position:sticky;top:0;z-index:50;
    box-shadow:0 4px 16px rgba(30,58,110,0.25);
}
.header-inner{display:flex;align-items:center;gap:10px}
.logo{font-size:26px}
.header-text h1{font-size:15px;font-weight:800;color:#fff;line-height:1.2}
.header-text p{font-size:10px;color:rgba(255,255,255,0.6);margin-top:1px}
.yt-badge{
    margin-left:auto;background:#ff0000;color:#fff;
    padding:5px 10px;border-radius:6px;font-size:10px;font-weight:700;
    text-decoration:none;display:flex;align-items:center;gap:4px;
    box-shadow:0 2px 8px rgba(255,0,0,0.3);transition:transform 0.15s;
}
.yt-badge:active{transform:scale(0.94)}
/* ===== CONTENT ===== */
.content{padding:14px 14px 20px}
.tab-panel{display:none;animation:fadeUp 0.3s ease}
.tab-panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ===== CARDS ===== */
.card{background:var(--card);border-radius:var(--radius);padding:16px;margin-bottom:12px;border:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,0.03)}
.card-title{font-size:15px;font-weight:800;color:var(--pri);margin-bottom:4px}
.card-desc{font-size:12px;color:var(--muted);line-height:1.4}
.stats-card{
    display:flex;gap:8px;padding:16px;border:none;
    background:linear-gradient(135deg,var(--pri),#2563eb);
    border-radius:var(--radius);box-shadow:0 6px 20px rgba(37,99,235,0.25);
}
.stat{flex:1;text-align:center}
.stat-num{display:block;font-size:22px;font-weight:900;color:#fff}
.stat-lbl{font-size:10px;color:rgba(255,255,255,0.7);font-weight:600}

/* ===== TEST GRID ===== */
.test-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.test-btn{
    padding:18px 4px;border:none;border-radius:12px;
    background:linear-gradient(145deg,var(--pri),#2563eb);
    color:#fff;font-size:13px;font-weight:800;cursor:pointer;
    box-shadow:0 3px 10px rgba(37,99,235,0.2);
    transition:transform 0.12s;position:relative;overflow:hidden;
}
.test-btn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,0.15),transparent 60%);
    border-radius:12px;
}
.test-btn:active{transform:scale(0.92)}
.test-btn span{position:relative;z-index:1}
/* ===== QUESTION VIEW ===== */
.question-view{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,0.04)}
.q-header{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#f9fafb;border-bottom:1px solid var(--border)}
.icon-btn{width:34px;height:34px;border-radius:50%;border:none;background:var(--border);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.icon-btn:active{background:#d1d5db}
.q-progress{flex:1;text-align:center;font-size:12px;font-weight:800;color:var(--pri-l)}
.toggle-pill{display:flex;align-items:center;gap:5px;background:#e5e7eb;padding:5px 10px;border-radius:14px;cursor:pointer}
.toggle-txt{font-size:10px;font-weight:700;color:var(--muted)}
.toggle-dot{width:18px;height:18px;border-radius:50%;background:#d1d5db;transition:background 0.2s}
.toggle-dot.active{background:var(--green)}
.score-strip{display:flex;justify-content:center;gap:18px;padding:8px;font-size:12px;font-weight:800}
.ss-ok{color:var(--green)}.ss-fail{color:var(--red)}.ss-total{color:var(--pri-l)}
.q-body{padding:16px}
.q-text{font-size:15px;font-weight:500;line-height:1.65;color:var(--text)}
.q-text .bn{display:block;font-size:13px;color:var(--muted);margin-top:5px;font-weight:400}
.q-text .bn.hidden{display:none}
.hint-pill{background:#fef9c3;color:#854d0e;padding:7px 12px;border-radius:8px;font-size:11px;font-weight:700;margin:10px 0;border:1px solid #fde047}
.options{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.opt{
    padding:14px 16px;background:#fff;border:2px solid var(--border);
    border-radius:12px;font-size:14px;line-height:1.5;cursor:pointer;
    transition:all 0.12s;
}
.opt:active:not(.locked){border-color:var(--pri-l);background:#eff6ff}
.opt.locked{cursor:default}
.opt.correct{border-color:var(--green);background:#dcfce7}
.opt.correct::before{content:'✅ '}
.opt.wrong{border-color:var(--red);background:#fee2e2}
.opt.wrong::before{content:'❌ '}
.opt .bn{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.opt .bn.hidden{display:none}
.answer-feedback{margin-top:12px;padding:12px 14px;border-radius:10px;font-size:12px;font-weight:600;display:none;line-height:1.5}
.answer-feedback.ok{background:#dcfce7;border:1px solid var(--green);color:#166534;display:block}
.answer-feedback.fail{background:#fee2e2;border:1px solid var(--red);color:#991b1b;display:block}
.q-footer{display:flex;gap:8px;padding:12px 14px;background:#f9fafb;border-top:1px solid var(--border)}
.foot-btn{flex:1;padding:13px;border:none;border-radius:12px;font-size:20px;font-weight:800;cursor:pointer;transition:transform 0.1s}
.foot-btn:active{transform:scale(0.94)}
.prev-btn{background:var(--border);color:var(--text)}
.next-btn{background:var(--pri-l);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,0.2)}
/* ===== RESULT ===== */
.result-view{text-align:center;padding:32px 16px}
.result-circle{
    width:130px;height:130px;border-radius:50%;margin:0 auto 18px;
    display:flex;align-items:center;justify-content:center;
    background:conic-gradient(var(--green) 0%,var(--border) 0%);
    box-shadow:0 8px 30px rgba(22,163,74,0.15);
}
.result-circle.fail-bg{box-shadow:0 8px 30px rgba(220,38,38,0.15)}
.res-pct{font-size:30px;font-weight:900;color:var(--text);background:#fff;width:106px;height:106px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.res-title{font-size:18px;font-weight:800}
.res-detail{font-size:13px;color:var(--muted);margin-top:6px}
.res-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}
.res-btn{padding:13px 28px;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer}
.res-btn.primary{background:var(--pri-l);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,0.2)}
.res-btn.secondary{background:var(--border);color:var(--text)}
.res-btn:active{transform:scale(0.95)}

/* ===== CHAPTER & QUIZ ===== */
.chapter-group{margin-bottom:18px}
.ch-heading{font-size:13px;font-weight:800;color:var(--pri);padding:10px 0 6px;border-bottom:2px solid var(--pri-l)}
.topic-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.topic-item{
    display:flex;align-items:center;gap:12px;padding:13px 14px;
    background:var(--card);border:1px solid var(--border);border-radius:12px;
    cursor:pointer;transition:all 0.12s;
}
.topic-item:active{background:#eff6ff;border-color:var(--pri-l)}
.t-icon{font-size:22px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#eff6ff;border-radius:10px}
.t-body{display:flex;flex-direction:column;gap:1px}
.t-body strong{font-size:13px;color:var(--text)}
.t-body span{font-size:11px;color:var(--muted)}
.quiz-list{display:flex;flex-direction:column;gap:6px}
.quiz-item{
    display:flex;align-items:center;gap:12px;padding:14px;
    background:var(--card);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all 0.12s;
}
.quiz-item:active{background:#eff6ff;border-color:var(--pri-l)}
.qi-num{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--pri),#2563eb);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qi-title{flex:1;font-size:13px;font-weight:600;color:var(--text)}
.qi-arrow{color:var(--muted);font-size:16px;font-weight:700}
.full-btn{
    display:block;width:100%;padding:15px;margin-top:18px;border:none;
    border-radius:12px;background:linear-gradient(135deg,var(--pri),#2563eb);color:#fff;
    font-size:14px;font-weight:800;cursor:pointer;text-align:center;
    box-shadow:0 4px 14px rgba(37,99,235,0.2);
}
.full-btn:active{transform:scale(0.97)}
.back-float{
    display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;padding:9px 16px;
    border:none;border-radius:10px;background:var(--border);color:var(--text);
    font-size:12px;font-weight:700;cursor:pointer;
}
.back-float:active{background:#d1d5db}
/* ===== MARKDOWN ===== */
.md-render{
    padding:16px;line-height:1.75;font-size:13px;background:#fafbfc;
    border-radius:var(--radius);border:1px solid var(--border);
    max-height:calc(100vh - 180px);overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.md-render h1{font-size:17px;color:var(--pri);border-bottom:2px solid var(--pri-l);padding-bottom:6px;margin:16px 0 10px}
.md-render h2{font-size:15px;color:var(--pri-l);margin:16px 0 8px}
.md-render h3{font-size:13px;color:var(--text);margin:12px 0 6px;font-weight:700}
.md-render table{width:100%;border-collapse:collapse;margin:10px 0;font-size:11px;display:block;overflow-x:auto}
.md-render th,.md-render td{padding:7px 9px;border:1px solid var(--border);white-space:nowrap}
.md-render th{background:var(--pri);color:#fff;font-weight:700}
.md-render blockquote{background:#eff6ff;border-left:3px solid var(--pri-l);padding:10px 14px;margin:12px 0;border-radius:0 10px 10px 0;font-size:12px}
.md-render code{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:11px}
.md-render strong{color:var(--pri)}
.md-render hr{border:none;border-top:1px solid var(--border);margin:14px 0}
.md-render ul,.md-render ol{padding-left:18px}
.md-render li{margin-bottom:3px}

/* ===== GUIDE CARDS ===== */
.guide-card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:14px 16px;margin-bottom:10px;border-left:4px solid var(--pri-l);
}
.guide-card.red{border-left-color:var(--red)}
.guide-card.orange{border-left-color:var(--orange)}
.guide-card.green{border-left-color:var(--green)}
.guide-card h4{font-size:13px;font-weight:800;margin-bottom:8px;color:var(--text)}
.guide-card ul{list-style:none;padding:0}
.guide-card li{padding:5px 0;font-size:12px;line-height:1.55;border-bottom:1px solid #f3f4f6;color:var(--text)}
.guide-card li:last-child{border:none}
.guide-card b{color:var(--pri)}

/* ===== ERROR ===== */
.error-card{text-align:center}
.error-card h3{color:var(--red);font-size:15px;margin-bottom:8px}
.error-card code{display:inline-block;background:var(--pri-dark);color:#86efac;padding:7px 14px;border-radius:8px;font-size:12px;margin:8px 0}
.error-card p{font-size:12px;color:var(--muted)}

/* ===== TABLET (540px+) ===== */
@media(min-width:540px){
    .app{max-width:600px;padding:0 8px}
    .test-grid{grid-template-columns:repeat(5,1fr)}
    .topic-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
}

/* ===== DESKTOP (768px+) ===== */
@media(min-width:768px){
    body{padding:24px 16px;padding-bottom:24px;display:flex;align-items:flex-start;justify-content:center}
    .app{max-width:780px;border-radius:20px;overflow:hidden;box-shadow:0 16px 50px rgba(0,0,0,0.1)}
    .bottom-nav{position:static;border-top:none;background:#f9fafb;border-bottom:1px solid var(--border);padding:0;box-shadow:none}
    .bnav-item{flex-direction:row;gap:6px;padding:14px 16px;font-size:12px}
    .bnav-icon{font-size:16px}
    .content{padding:28px;max-height:calc(100vh - 150px);overflow-y:auto}
    .test-grid{grid-template-columns:repeat(6,1fr);gap:10px}
    .test-btn{padding:22px 8px;font-size:14px}
    .test-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(37,99,235,0.25)}
    .topic-item:hover{background:#eff6ff;border-color:var(--pri-l);transform:translateX(4px)}
    .quiz-item:hover{background:#eff6ff;border-color:var(--pri-l)}
    .opt:hover:not(.locked){border-color:var(--pri-l);background:#eff6ff}
    .foot-btn:hover{transform:scale(1.03)}
}