/* ══════════════════════════════════════════════════════════════
   BEN'S ARCHIVE — page-specific styles only
   Global styles (sidebar, search bar, cat-btn, footer) live in main.css
   ══════════════════════════════════════════════════════════════ */

/* Hero sections */
.featured-section { margin-top:80px; margin-bottom:16px; }
.values-section   { margin-top:100px; margin-bottom:16px; }
.who-section      { margin-top:100px; margin-bottom:16px; }

/* Featured concepts */
.featured-header { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-bottom:32px;gap:16px; }
.featured-title  { font-size:36px;font-weight:700;color:#fff;margin-bottom:12px; }
.featured-sub    { font-size:17px;color:#64748b;line-height:1.65;max-width:560px;margin:0 auto; }
.explore-all-btn { background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:10px;padding:12px 24px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.2s;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:7px;box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.explore-all-btn:hover { transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.6); }
.featured-cards  { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.feat-card       { background:rgba(15,20,25,0.6);border:1px solid rgba(99,102,241,0.2);border-radius:16px;padding:26px;cursor:pointer;transition:all 0.3s;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.feat-card:hover { border-color:rgba(99,102,241,0.55);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.6); }
.feat-card-top   { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.feat-icon       { width:40px;height:40px;background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.22);border-radius:10px;display:flex;align-items:center;justify-content:center; }
.feat-card-name  { font-size:19px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:12px; }
.feat-card-def   { font-size:15px;color:#94a3b8;line-height:1.6;flex:1;margin-bottom:20px; }
.feat-learn      { font-size:14px;font-weight:700;background:linear-gradient(135deg,#8b5cf6,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-flex;align-items:center;gap:5px; }

/* Values section */
.values-title { font-size:36px;font-weight:700;color:#fff;text-align:center;margin-bottom:14px; }
.values-sub   { font-size:17px;color:#64748b;line-height:1.75;text-align:center;max-width:700px;margin:0 auto 36px; }
.values-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.value-card   { background:rgba(15,20,25,0.6);border:1px solid rgba(99,102,241,0.2);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.value-icon   { width:44px;height:44px;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.value-card-name { font-size:17px;font-weight:700;color:#fff;line-height:1.3; }
.value-card-text { font-size:15px;color:#94a3b8;line-height:1.7; }

/* Who section */
.who-title { font-size:36px;font-weight:700;color:#fff;text-align:center;margin-bottom:14px; }
.who-sub   { font-size:17px;color:#64748b;line-height:1.7;text-align:center;max-width:620px;margin:0 auto 36px; }
.who-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }
.who-card  { background:rgba(15,20,25,0.6);border:1px solid rgba(99,102,241,0.2);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:all 0.3s;box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.who-card:hover { border-color:rgba(99,102,241,0.5);transform:translateY(-3px); }
.who-icon  { width:48px;height:48px;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.who-card-name { font-size:17px;font-weight:700;color:#fff;line-height:1.3; }
.who-card-text { font-size:15px;color:#94a3b8;line-height:1.7; }

/* Concept grid */
.concept-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px; }
.cat-buttons { display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px; }
.cat-btn { background:linear-gradient(135deg,rgba(20,15,50,0.8),rgba(30,20,70,0.7));border:1px solid rgba(102,126,234,0.3);border-radius:7px;padding:7px 14px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.3s;white-space:nowrap;font-family:inherit; }
.cat-btn:hover { border-color:rgba(102,126,234,0.5);transform:translateY(-1px); }
.cat-btn.active { background:linear-gradient(135deg,rgba(102,126,234,0.3),rgba(124,58,237,0.3));border-color:rgba(102,126,234,0.6); }
.concept-card { background:rgba(15,20,25,0.6);border:1px solid rgba(99,102,241,0.2);border-radius:13px;padding:20px;transition:all 0.3s;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.concept-card:hover { border-color:rgba(99,102,241,0.55);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.6); }
.concept-card.locked { opacity:0.45;cursor:default; }
.concept-card.locked:hover { transform:none;box-shadow:0 4px 18px rgba(0,0,0,0.5);border-color:rgba(99,102,241,0.2); }
.concept-card-name { font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.3; }
.concept-card-def  { font-size:14px;color:#94a3b8;line-height:1.6;flex:1; }
.concept-card-inventor { font-size:11px;color:#64748b;font-style:italic;margin-top:10px; }
.no-results { text-align:center;padding:50px 20px;color:#475569;display:none; }

/* Pagination */
.pagination      { display:flex;align-items:center;gap:8px;justify-content:flex-start;margin-bottom:10px; }
.pagination-info { font-size:12px;color:#475569;margin-bottom:24px; }
.pg-btn          { background:transparent;border:1px solid rgba(99,102,241,0.25);border-radius:8px;color:#94a3b8;font-size:13px;font-weight:500;padding:0 13px;height:34px;cursor:pointer;transition:all 0.2s;font-family:inherit; }
.pg-btn:hover    { border-color:rgba(99,102,241,0.6);color:#a5b4fc;background:rgba(99,102,241,0.08); }
.pg-btn.active   { background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff; }
.pg-btn:disabled,.pg-ellipsis { opacity:0.35;pointer-events:none; }

/* Grid / Detail toggle */
.grid-view { display:block; } .grid-view.hidden { display:none; }
.detail-view { display:none; } .detail-view.active { display:block; }

/* Detail view */
.detail-back       { display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(99,102,241,0.25);border-radius:8px;color:#94a3b8;font-size:13px;font-weight:500;padding:7px 14px;cursor:pointer;font-family:inherit;transition:all 0.2s;margin-bottom:24px; }
.detail-back:hover { border-color:rgba(99,102,241,0.6);color:#a5b4fc;background:rgba(99,102,241,0.08); }
.detail-back svg   { width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.detail-header     { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:24px;flex-wrap:wrap; }
.detail-name       { font-size:34px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:6px; }
.detail-cat-badge  { font-size:13px;font-weight:400;color:#64748b; }
.detail-tabs       { display:flex;gap:6px;flex-shrink:0; }
.detail-content    { background:rgba(15,20,25,0.6);border:1px solid rgba(99,102,241,0.2);border-radius:16px;padding:32px;box-shadow:0 4px 18px rgba(0,0,0,0.5); }

/* Tab panes */
.tab-pane { display:none; } .tab-pane.active { display:block; }
.def-block      { background:rgba(99,102,241,0.07);border-left:3px solid #8b5cf6;border-radius:0 10px 10px 0;padding:18px 22px;margin-bottom:28px; }
.def-block-name { font-size:13px;font-weight:700;color:#8b5cf6;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px; }
.def-block-text { font-size:17px;color:#e2e8f0;line-height:1.75; }
.section-h      { font-size:18px;font-weight:700;color:#fff;margin:28px 0 14px; }
.body-text      { font-size:16px;color:#94a3b8;line-height:1.85;margin-bottom:16px; }
.research-block { background:rgba(99,102,241,0.05);border:1px solid rgba(99,102,241,0.15);border-radius:10px;padding:16px 20px;margin-top:24px; }
.academic-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#6366f1;margin-bottom:8px; }
.example-card   { background:rgba(99,102,241,0.05);border:1px solid rgba(99,102,241,0.15);border-radius:12px;padding:22px;margin-bottom:18px; }
.example-card:last-child { margin-bottom:0; }
.example-title  { font-size:17px;font-weight:700;color:#fff;margin-bottom:12px; }
.example-label  { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#8b5cf6;margin-bottom:6px; }
.approach-block { border:1px solid rgba(99,102,241,0.15);border-radius:10px;padding:18px 20px;margin-bottom:14px;background:rgba(99,102,241,0.04); }
.approach-name  { font-size:16px;font-weight:700;color:#c4b5fd;margin-bottom:10px; }
.approach-limit { font-size:14px;color:#475569;font-style:italic;margin-top:8px; }

/* Test tab */
.q-counter  { font-size:11px;color:#475569;text-align:right;margin-bottom:12px; }
.q-text     { font-size:17px;font-weight:600;color:#e2e8f0;line-height:1.65;margin-bottom:22px; }
.q-options  { display:flex;flex-direction:column;gap:10px;margin-bottom:20px; }
.answer-opt { background:rgba(15,20,25,0.8);border:1px solid rgba(99,102,241,0.2);border-radius:10px;padding:15px 18px;font-size:15px;color:#cbd5e1;cursor:pointer;transition:all 0.2s;text-align:left;font-family:inherit;line-height:1.55; }
.answer-opt:hover    { border-color:rgba(99,102,241,0.5);background:rgba(99,102,241,0.08);color:#fff; }
.answer-opt.correct  { border-color:#10b981;background:rgba(16,185,129,0.1);color:#34d399; }
.answer-opt.incorrect { border-color:#ef4444;background:rgba(239,68,68,0.08);color:#f87171; }
.answer-opt:disabled { cursor:default; }
.q-explanation         { background:rgba(99,102,241,0.08);border:1px solid rgba(99,102,241,0.2);border-radius:10px;padding:14px 18px;margin-bottom:20px;display:none; }
.q-explanation.visible { display:block; }
.q-explanation-text    { font-size:15px;color:#94a3b8;line-height:1.75; }
.q-nav     { display:flex;justify-content:space-between;align-items:center; }
.q-nav-btn { display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(99,102,241,0.25);border-radius:8px;color:#94a3b8;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;font-family:inherit;transition:all 0.2s; }
.q-nav-btn:hover   { border-color:rgba(99,102,241,0.6);color:#a5b4fc;background:rgba(99,102,241,0.08); }
.q-nav-btn:disabled { opacity:0.3;pointer-events:none; }
.q-nav-btn.primary { background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff; }
.completion-state         { text-align:center;padding:40px 20px;display:none; }
.completion-state.visible { display:block; }
.score-display { width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 20px; }
.score-num   { font-size:28px;font-weight:700;color:#fff; }
.score-label { font-size:11px;color:rgba(255,255,255,0.7); }
.score-msg   { font-size:15px;color:#e2e8f0;font-weight:600;margin-bottom:20px; }

/* My Learning Path */
.mlp-view   { padding-bottom:40px; }
.mlp-header { text-align:center;margin-bottom:36px; }
.mlp-title  { font-size:56px;font-weight:700;color:#fff;margin-bottom:16px; }
.mlp-sub    { font-size:18px;color:#64748b;max-width:560px;margin:0 auto;line-height:1.65; }
.mlp-overall { background:rgba(15,20,25,0.6);border:1px solid rgba(99,102,241,0.2);border-radius:16px;padding:28px 32px;margin-bottom:32px;box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.mlp-overall-top   { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px; }
.mlp-overall-label { font-size:16px;font-weight:600;color:#e2e8f0; }
.mlp-overall-pct   { font-size:18px;font-weight:700;background:linear-gradient(135deg,#8b5cf6,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.mlp-bar-track { background:rgba(99,102,241,0.12);border-radius:6px;height:8px;overflow:hidden;margin-bottom:10px; }
.mlp-bar-fill  { height:100%;border-radius:6px;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width 0.6s ease; }
.mlp-overall-count { font-size:13px;color:#475569;text-align:center; }
.mlp-cat-grid  { display:flex;flex-direction:column;gap:18px; }
.mlp-cat-row   { display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start; }
.mlp-cat-card  { background:rgba(15,20,25,0.6);border:1px solid rgba(99,102,241,0.2);border-radius:16px;padding:24px 28px;box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.mlp-cat-top   { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px; }
.mlp-cat-left  { display:flex;align-items:center;gap:14px; }
.mlp-cat-icon  { width:44px;height:44px;background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.mlp-cat-name  { font-size:16px;font-weight:700;color:#fff;line-height:1.3; }
.mlp-cat-count { font-size:12px;color:#64748b;margin-top:2px; }
.mlp-cat-desc  { font-size:13px;color:#64748b;line-height:1.6;margin:12px 0 16px; }
.mlp-cat-progress-row   { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px; }
.mlp-cat-progress-label { font-size:12px;font-weight:600;color:#94a3b8; }
.mlp-cat-progress-pct   { font-size:12px;font-weight:700;background:linear-gradient(135deg,#8b5cf6,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.mlp-cat-bar-track { background:rgba(99,102,241,0.1);border-radius:4px;height:5px;overflow:hidden;margin-bottom:16px; }
.mlp-cat-bar-fill  { height:100%;border-radius:4px;background:linear-gradient(90deg,#6366f1,#8b5cf6);transition:width 0.5s ease; }
.mlp-concept-list      { display:none;border-top:1px solid rgba(99,102,241,0.15);padding-top:16px;margin-top:4px; }
.mlp-concept-list.open { display:block; }
.mlp-concept-row       { display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(99,102,241,0.08);cursor:pointer;transition:all 0.2s; }
.mlp-concept-row:last-child { border-bottom:none; }
.mlp-concept-row:hover .mlp-concept-name { color:#a78bfa; }
.mlp-concept-left  { display:flex;align-items:center;gap:12px; }
.mlp-concept-check { width:20px;height:20px;border-radius:50%;border:2px solid rgba(99,102,241,0.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s; }
.mlp-concept-check.done { background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent; }
.mlp-concept-check.done svg { display:block; }
.mlp-concept-check svg { display:none;width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none; }
.mlp-concept-name  { font-size:14px;color:#e2e8f0;font-weight:500; }
.mlp-concept-arrow { font-size:12px;color:#475569; }

/* Founding Fathers */
.related-concepts-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px; }

/* Mobile */
@media ( max-width: 768px ) {
    .featured-cards,.values-cards,.who-cards,.concept-grid { grid-template-columns:1fr !important; }
    .mlp-cat-row  { grid-template-columns:1fr !important; }
    .detail-header { flex-direction:column !important; }
    .detail-tabs   { flex-wrap:wrap !important; }
    .mlp-title     { font-size:36px !important; }
}