:root{
  --navy:#0D1B2A; --navy2:#0f2031; --card:#111f2e;
  --gold:#F5C518; --gold2:#c9a010; --goldSoft:rgba(245,197,24,.10); --goldLine:rgba(245,197,24,.22);
  --white:#fff; --grey:#7a8fa6; --greyLt:#aabccc; --line:rgba(255,255,255,.07);
  --r:14px; --rs:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Titillium Web",sans-serif;background:var(--navy);color:var(--white);min-height:100vh;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(245,197,24,.06) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(245,197,24,.03) 0%, transparent 60%),
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 54px,
      rgba(255,255,255,.018) 54px, rgba(255,255,255,.018) 56px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.0) 0px, rgba(0,0,0,.0) 110px,
      rgba(255,255,255,.008) 110px, rgba(255,255,255,.008) 220px
    );}
body::after{content:"";position:fixed;
  width:0;height:0;pointer-events:none;z-index:0;}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:0 18px;height:52px;background:rgba(13,27,42,.97);
  border-bottom:1px solid var(--goldLine);backdrop-filter:blur(14px);
  /* Stadium scoreboard bottom accent */
  box-shadow:0 1px 0 rgba(245,197,24,.22), 0 2px 20px rgba(0,0,0,.4);}
.logo{font-family:"Oswald",sans-serif;font-size:22px;font-weight:700;letter-spacing:.08em;
  color:var(--gold);text-shadow:0 0 22px rgba(245,197,24,.38);}
.logo span{color:var(--white)}
.brand-lockup{display:flex;align-items:center;gap:12px;}
.brand-lockup.compact{gap:10px;}
.brand-mini-art{
  width:34px;height:34px;object-fit:cover;object-position:center;
  border-radius:11px;border:1px solid rgba(245,197,24,.14);
  background:var(--navy);
  filter:drop-shadow(0 0 10px rgba(245,197,24,.16));flex-shrink:0;
}
.brand-mark{
  position:relative;display:grid;place-items:center;flex-shrink:0;
  width:60px;height:60px;border-radius:18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(245,197,24,.34), transparent 38%),
    linear-gradient(160deg,#102133 0%,#08111a 100%);
  border:1px solid rgba(245,197,24,.28);
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}
.brand-mark::before{
  content:"";position:absolute;inset:10px;border-radius:14px;
  background:radial-gradient(circle, rgba(245,197,24,.28), transparent 68%);
  filter:blur(2px);opacity:.9;
}
.brand-mark::after{
  content:"GM";position:relative;z-index:1;
  font-family:"Oswald",sans-serif;font-size:26px;font-weight:700;letter-spacing:.08em;
  color:var(--gold);text-shadow:0 0 22px rgba(245,197,24,.48);
}
.brand-lockup.compact .brand-mark{
  width:34px;height:34px;border-radius:11px;box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.brand-lockup.compact .brand-mark::before{inset:6px;border-radius:8px;}
.brand-lockup.compact .brand-mark::after{font-size:15px;}
.brand-text{display:flex;flex-direction:column;gap:2px;}
.brand-wordmark{
  font-family:"Oswald",sans-serif;font-size:52px;font-weight:700;line-height:1;
  letter-spacing:.08em;color:var(--gold);text-shadow:0 0 40px rgba(245,197,24,.4);
}
.brand-wordmark span{color:var(--white);}
.brand-tagline{
  font-family:"Oswald",sans-serif;font-size:15px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,197,24,.82);
}
.brand-lockup.compact .brand-text{gap:0;}
.brand-lockup.compact .brand-wordmark{
  font-size:21px;letter-spacing:.06em;text-shadow:0 0 22px rgba(245,197,24,.32);
}
.brand-lockup.compact .brand-tagline{
  font-size:8px;letter-spacing:.18em;color:var(--grey);opacity:.9;
}
.xp-pill{display:flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;
  background:var(--goldSoft);border:1px solid var(--goldLine);
  font-family:"Oswald",sans-serif;font-size:12px;font-weight:600;color:var(--gold);}

/* ── NAV ── */
.nav{position:sticky;top:52px;z-index:29;display:flex;overflow-x:auto;scrollbar-width:none;
  background:var(--navy2);border-bottom:1px solid var(--line);
  /* Stadium row shadow */
  box-shadow:0 2px 12px rgba(0,0,0,.3);}
.nav::-webkit-scrollbar{display:none}
.nav button{background:none;border:none;color:var(--grey);padding:13px 15px;cursor:pointer;
  white-space:nowrap;font-family:"Oswald",sans-serif;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:2px solid transparent;transition:all .18s;}
.nav button.active{color:var(--gold);border-bottom-color:var(--gold);
  /* Stadium floodlight glow on active tab */
  text-shadow:0 0 12px rgba(245,197,24,.35);}
.nav button:hover:not(.active){color:var(--white);}

/* ── TABS ── */
.tab{display:none;max-width:860px;margin:0 auto;padding:18px;position:relative;z-index:1;}
.tab.active{display:block;animation:fadeUp .2s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── UTILS ── */
.sec{font-family:"Oswald",sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;}
.sec::before{content:"";display:block;width:3px;height:14px;
  background:var(--gold);border-radius:2px;flex-shrink:0;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;
  position:relative;overflow:hidden;}
/* Corner flag arc */
.card::after{content:"";position:absolute;bottom:-18px;right:-18px;
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.04);
  pointer-events:none;}
.grey{color:var(--grey);font-size:13px;line-height:1.6;}
.brand-surface{
  display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:14px;
  border-radius:var(--r);border:1px solid rgba(245,197,24,.14);
  background:linear-gradient(135deg,rgba(245,197,24,.08),rgba(255,255,255,.02));
}
.brand-surface-tight{margin-bottom:12px;}
.brand-surface-art{
  width:56px;height:56px;object-fit:cover;object-position:center;flex-shrink:0;
  border-radius:16px;border:1px solid rgba(245,197,24,.14);
  background:var(--navy);
  filter:drop-shadow(0 0 14px rgba(245,197,24,.16));
}
.brand-surface-title{
  font-family:"Oswald",sans-serif;font-size:15px;font-weight:700;color:var(--white);margin-bottom:4px;
}
.brand-surface-copy{font-size:12px;color:var(--greyLt);line-height:1.55;}
.persona-card{
  background:linear-gradient(135deg,rgba(245,197,24,.08),rgba(255,255,255,.02));
  border:1px solid rgba(245,197,24,.18);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;
}
.persona-card-soft{
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(245,197,24,.03));
}
.persona-eyebrow{
  font-family:"Oswald",sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;
}
.persona-title{font-family:"Oswald",sans-serif;font-size:18px;font-weight:700;color:var(--white);margin-bottom:6px;}
.persona-copy{font-size:12px;color:var(--greyLt);line-height:1.65;margin-bottom:10px;}
.persona-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.persona-pill{
  padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--greyLt);text-transform:uppercase;
}
.persona-list{display:flex;flex-direction:column;gap:5px;margin-top:10px;}
.persona-list-item{font-size:12px;color:var(--greyLt);line-height:1.55;}

/* ── FIFA CARD ── */
.player-card{position:relative;
  background:
    repeating-linear-gradient(92deg,transparent 0px,transparent 28px,rgba(255,255,255,.012) 28px,rgba(255,255,255,.012) 30px),
    linear-gradient(150deg,#1b3454 0%,#0f2031 50%,#080f18 100%);
  border:2px solid var(--goldLine);border-radius:18px;margin-bottom:16px;overflow:hidden;
  box-shadow:0 10px 50px rgba(0,0,0,.55);}
.player-card::before{content:"";position:absolute;top:-100px;right:-100px;width:320px;height:320px;
  background:conic-gradient(from 0deg,transparent 55%,rgba(245,197,24,.09) 68%,transparent 78%);
  border-radius:50%;pointer-events:none;}
/* Pitch arc in bottom-left of card */
.player-card .pc-pitch-arc{
  position:absolute;bottom:-40px;left:-40px;
  width:160px;height:160px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.04);
  pointer-events:none;
}
.player-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.pc-top{display:flex;align-items:stretch;border-bottom:1px solid rgba(245,197,24,.12);}
.pc-left{padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid rgba(245,197,24,.1);min-width:88px;gap:3px;
  /* Jersey number column background */
  background:linear-gradient(180deg,rgba(245,197,24,.05) 0%,transparent 100%);}
.pc-rating{font-family:"Oswald",sans-serif;font-size:52px;font-weight:700;color:var(--gold);
  line-height:1;text-shadow:0 0 30px rgba(245,197,24,.5);}
.pc-pos{font-family:"Oswald",sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--gold);}
.pc-flag{font-size:18px;margin-top:3px;}
.pc-mid{flex:1;padding:16px 14px;position:relative;}
.pc-mid::after{
  content:"";position:absolute;top:14px;right:14px;width:42px;height:42px;
  background:
    linear-gradient(var(--navy),var(--navy)),
    url("goatmaker-logo-mark.jpg") center/cover no-repeat;
  border-radius:13px;border:1px solid rgba(245,197,24,.10);
  opacity:.16;pointer-events:none;
}
.pc-name{font-family:"Oswald",sans-serif;font-size:26px;font-weight:700;letter-spacing:.04em;line-height:1;margin-bottom:3px;}
.pc-club{font-size:12px;color:var(--grey);margin-bottom:12px;}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:10px;}
.pcs{background:rgba(0,0,0,.25);border-radius:6px;padding:5px 4px;text-align:center;border:1px solid var(--line);}
.pcs-v{font-family:"Oswald",sans-serif;font-size:18px;font-weight:700;color:var(--gold);line-height:1;}
.pcs-l{font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-top:1px;}
.pc-right{padding:16px 16px 16px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.pc-animal{font-size:54px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));line-height:1;}
.pc-lvl{font-family:"Oswald",sans-serif;font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.06em;text-align:center;}
.pc-bot{padding:11px 18px;display:flex;align-items:center;}
.mantra{font-size:12px;font-style:italic;color:rgba(245,197,24,.72);padding-left:10px;border-left:2px solid rgba(245,197,24,.28);}

/* ── XP BAR ── */
.xp-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin-bottom:14px;}
.xp-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.xp-title{font-family:"Oswald",sans-serif;font-size:12px;font-weight:600;color:var(--white);}
.xp-val{font-family:"Oswald",sans-serif;font-size:11px;color:var(--gold);}
.xp-track{height:7px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;margin-bottom:6px;}
.xp-fill{height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  box-shadow:0 0 8px rgba(245,197,24,.4);
  transition:width 1.3s cubic-bezier(.4,0,.2,1);}
.xp-animals{display:flex;justify-content:space-between;}
.xp-a{font-size:9px;color:var(--grey);}
.xp-a.cur{color:var(--gold);}

/* ── SPIDER / RADAR CHART ── */
/* radar removed — replaced by diagnostic grid */

/* ── STRENGTHS ── */
.strength-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.stag{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;
  font-size:11px;font-weight:700;background:var(--goldSoft);border:1px solid var(--goldLine);color:var(--gold);}

/* ── FOCUS BOXES ── */
.focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.focus-box{background:rgba(245,197,24,.05);border:1px solid var(--goldLine);border-radius:var(--r);padding:14px;}
.fb-label{font-family:"Oswald",sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
.fb-main{font-size:15px;font-weight:700;margin-bottom:4px;}
.fb-sub{font-size:12px;color:var(--greyLt);line-height:1.55;}

/* ════════════════════════════════
   DIAGNOSTIC  
════════════════════════════════ */
.age-sel{display:flex;gap:6px;margin-bottom:14px;}
.age-btn{flex:1;padding:9px 4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--rs);font-family:"Oswald",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.06em;color:var(--grey);cursor:pointer;text-align:center;transition:all .15s;}
.age-btn.active{background:var(--goldSoft);border-color:var(--goldLine);color:var(--gold);}
.age-lock{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;
  padding:12px 14px;border-radius:var(--r);background:rgba(245,197,24,.05);border:1px solid var(--goldLine);}
.age-lock-copy{min-width:0;}
.age-lock-label{font-family:"Oswald",sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.age-lock-note{font-size:12px;color:var(--greyLt);line-height:1.5;}
.age-lock-band{flex-shrink:0;padding:8px 12px;border-radius:999px;background:rgba(245,197,24,.12);
  border:1px solid var(--goldLine);font-family:"Oswald",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.08em;color:var(--gold);}

/* Pillar group header */
.p-group{margin-bottom:10px;border-radius:var(--r);overflow:hidden;}
.p-hdr{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color .18s;
  position:relative;overflow:hidden;}
/* Jersey stripe pattern on pillar header */
.p-hdr::after{content:"";position:absolute;top:0;right:0;bottom:0;width:60px;
  background:repeating-linear-gradient(
    90deg,
    transparent 0px,transparent 8px,
    rgba(255,255,255,.018) 8px,rgba(255,255,255,.018) 10px
  );pointer-events:none;}
.p-hdr.open{border-radius:var(--r) var(--r) 0 0;border-bottom-color:transparent;}
.p-hdr:hover{border-color:var(--goldLine);}
.p-stripe{width:3px;height:32px;border-radius:2px;flex-shrink:0;}
.p-label{font-family:"Oswald",sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;flex:1;}
.p-avg{font-size:11px;color:var(--grey);}
.p-ani{font-size:18px;}
.p-chev{font-size:10px;color:var(--grey);transition:transform .2s;}
.p-chev.open{transform:rotate(180deg);}
.p-subs{display:none;background:var(--card);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--r) var(--r);}
.p-subs.open{display:block;}

/* Sub-component row */
.s-row{border-top:1px solid rgba(255,255,255,.04);overflow:hidden;}
.s-row:first-child{border-top:none;}
.s-hdr{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;transition:background .15s;}
.s-hdr:hover{background:rgba(255,255,255,.025);}

/* Level indicator dots */
.level-dots{display:flex;gap:3px;align-items:center;}
.ld{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);transition:all .2s;}
.ld.earned{background:var(--gold);}
.ld.cur{background:var(--gold);box-shadow:0 0 6px rgba(245,197,24,.6);transform:scale(1.2);}

.s-name-col{flex:1;min-width:0;}
.s-name{font-size:13px;font-weight:700;color:var(--white);}
.s-desc{font-size:11px;color:var(--greyLt);line-height:1.45;margin-top:2px;}
.s-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.s-lvl-pill{padding:4px 8px;border-radius:8px;font-family:"Oswald",sans-serif;font-size:11px;font-weight:600;
  background:var(--goldSoft);color:var(--gold);border:1px solid var(--goldLine);}
.s-ani{font-size:20px;line-height:1;}
.s-chev{font-size:10px;color:var(--grey);transition:transform .2s;}
.s-chev.open{transform:rotate(180deg);}

/* Accordion body — REDESIGNED */
.s-acc{display:none;padding:14px 16px 16px;}
.s-acc.open{display:block;animation:fadeUp .18s ease;}

/* Evidence + protocol strip */
.ev-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--line);}
.ev-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.05em;}
.ev-measured{background:rgba(245,197,24,.1);color:var(--gold);border:1px solid var(--goldLine);}
.ev-observed{background:rgba(170,188,204,.1);color:var(--greyLt);border:1px solid rgba(170,188,204,.2);}
.ev-checked{background:rgba(255,255,255,.07);color:var(--greyLt);border:1px solid var(--line);}
.proto-chip{font-family:"Oswald",sans-serif;font-size:10px;letter-spacing:.08em;color:var(--grey);
  padding:4px 8px;border-radius:6px;border:1px solid var(--line);}

/* Level ladder — horizontal cards */
.level-ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px;}
.ll-item{position:relative;padding:8px 6px;border-radius:8px;border:1.5px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.15);cursor:pointer;transition:all .15s;text-align:center;}
.ll-item:hover{border-color:var(--goldLine);background:rgba(245,197,24,.04);}
.ll-item.selected{border-color:var(--gold);background:rgba(245,197,24,.1);}
.ll-item.earned:not(.selected){border-color:rgba(245,197,24,.3);background:rgba(245,197,24,.04);}
.ll-num{font-family:"Oswald",sans-serif;font-size:12px;font-weight:700;color:var(--grey);
  margin-bottom:3px;
  /* Jersey number style */
  text-shadow:0 1px 2px rgba(0,0,0,.5);}
.ll-item.selected .ll-num{color:var(--gold);}
.ll-ani{font-size:16px;line-height:1;margin-bottom:3px;}
.ll-name{font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);line-height:1.2;}
.ll-item.selected .ll-name{color:var(--gold);}
.ll-item::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid var(--gold);display:none;}
.ll-item.selected::after{display:block;}

/* Criteria panel */
.criteria-panel{background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.cp-pass{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;
  font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px;}
.cp-all{background:rgba(245,197,24,.12);color:var(--gold);border:1px solid var(--goldLine);}
.cp-both{background:rgba(170,188,204,.1);color:var(--greyLt);border:1px solid rgba(170,188,204,.2);}
.cp-text{font-size:12px;color:var(--greyLt);line-height:1.65;margin-bottom:8px;}
.cp-next{font-size:11px;color:rgba(100,200,120,.9);font-style:italic;}
.cp-next::before{content:"Next level: ";}


/* Scorecard table layout */
.sc-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 14px;}
.sc-meta-card{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:10px;padding:12px;}
.sc-label{font-family:"Oswald",sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
.sc-text{font-size:11px;color:var(--greyLt);line-height:1.5;}
.sc-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.18);}
.sc-table{width:100%;border-collapse:collapse;min-width:640px;}
.sc-table th,.sc-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;text-align:left;}
.sc-table th{font-family:"Oswald",sans-serif;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(245,197,24,.05);}
.sc-table tr:last-child td{border-bottom:none;}
.sc-table tr.selected{background:rgba(245,197,24,.08);}
.sc-level-btn{padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--greyLt);font-family:"Oswald",sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;cursor:pointer;white-space:nowrap;}
.sc-level-btn.active{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.sc-row-criteria{font-size:11px;color:var(--white);line-height:1.45;}
.sc-row-next{font-size:11px;color:#8be0a4;line-height:1.45;}
@media(max-width:640px){.sc-meta-grid{grid-template-columns:1fr;}}
@media(max-width:640px){.learn-quick-grid{grid-template-columns:1fr;}}

/* ════════════════════════════════
   GOALS  
════════════════════════════════ */
.goals-intro{background:rgba(245,197,24,.05);border:1px solid var(--goldLine);border-radius:var(--r);
  padding:14px 16px;margin-bottom:16px;font-size:13px;color:rgba(245,197,24,.82);line-height:1.65;}
.goals-intro strong{color:var(--gold);}

.goal-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:14px;overflow:hidden;transition:border-color .2s;}
.goal-card:hover{border-color:var(--goldLine);}
.goal-card.complete{opacity:.5;}

/* Goal card top accent bar */
.goal-accent{height:4px;
  background:repeating-linear-gradient(
    90deg,
    var(--gold) 0px,var(--gold) 12px,
    var(--gold2) 12px,var(--gold2) 24px
  );}
.goal-accent.done{background:linear-gradient(90deg,#22c55e,#16a34a);}

.g-sec{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);}
.g-sec:last-child{border-bottom:none;}
.g-lbl{font-family:"Oswald",sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-bottom:6px;
  display:flex;align-items:center;gap:6px;}
.g-lbl::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.04);}

/* Goal header row */
.goal-hdr-row{display:flex;align-items:flex-start;gap:10px;}
.goal-chk{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:11px;transition:all .2s;margin-top:2px;}
.goal-chk.done{background:#22c55e;border-color:#22c55e;}
.goal-title{font-size:15px;font-weight:700;color:var(--white);}
.goal-sub{font-size:12px;color:var(--grey);margin-top:2px;}

/* Level progress within goal */
.goal-level-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.glr-from{font-family:"Oswald",sans-serif;font-size:12px;color:var(--grey);}
.glr-arrow{color:var(--gold);font-size:12px;}
.glr-to{font-family:"Oswald",sans-serif;font-size:12px;color:var(--gold);}
.glr-bar{flex:1;height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;}
.glr-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold2),var(--gold));}

/* Actions */
.act-list{display:flex;flex-direction:column;gap:6px;}
.act-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--greyLt);
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);}
.act-item:last-child{border-bottom:none;}
.act-cb{width:18px;height:18px;border-radius:4px;border:1.5px solid rgba(255,255,255,.2);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;font-size:10px;margin-top:2px;}
.act-cb.done{background:#22c55e;border-color:#22c55e;color:var(--white);}
.act-cb.done+span{text-decoration:line-through;opacity:.5;}

/* Progress */
.prog-row{display:flex;align-items:center;gap:10px;}
.prog-label{font-size:12px;color:var(--grey);}
.prog-bar{flex:1;height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;}
.prog-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold2),var(--gold));}

.add-goal{width:100%;padding:13px;background:rgba(245,197,24,.05);
  border:1.5px dashed var(--goldLine);border-radius:var(--r);
  color:var(--gold);font-family:"Oswald",sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.06em;cursor:pointer;transition:all .2s;}
.add-goal:hover{background:rgba(245,197,24,.1);}

/* ════════════════════════════════
   MATCH + HISTORY + LEARN
════════════════════════════════ */
.match-hdr{
  background:
    repeating-linear-gradient(180deg,transparent 0,transparent 18px,rgba(255,255,255,.02) 18px,rgba(255,255,255,.02) 20px),
    linear-gradient(135deg,#0d2a12 0%,#0a1f0d 40%,#061409 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:18px;margin-bottom:14px;position:relative;overflow:hidden;}
/* Centre circle on match card */
.match-hdr::before{content:"";position:absolute;
  width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;}
.match-hdr::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:48px;opacity:.05;}
.match-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:12px;}
.match-team{font-family:"Oswald",sans-serif;font-size:15px;font-weight:700;}
.match-team.away{text-align:right;}
.match-score{font-family:"Oswald",sans-serif;font-size:30px;font-weight:700;color:var(--gold);
  text-align:center;
  text-shadow:0 0 18px rgba(245,197,24,.5), 0 0 40px rgba(245,197,24,.2);
  white-space:nowrap;
  letter-spacing:.04em;
  /* Scoreboard box */
  background:rgba(0,0,0,.35);
  padding:6px 14px;border-radius:8px;
  border:1px solid rgba(245,197,24,.2);}
.stat-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.sb{background:var(--card);border:1px solid var(--line);border-radius:var(--rs);padding:10px 6px;text-align:center;}
.sb-n{font-family:"Oswald",sans-serif;font-size:22px;font-weight:700;color:var(--gold);line-height:1;}
.sb-l{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);margin-top:3px;}
.q-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;}
.q-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--gold);color:var(--navy);font-family:"Oswald",sans-serif;font-size:10px;font-weight:700;margin-right:8px;}
.q-txt{font-size:13px;font-weight:700;color:var(--white);margin-bottom:6px;display:flex;align-items:center;}
.q-hint{font-size:11px;color:var(--grey);margin-bottom:8px;font-style:italic;}
.quick-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 12px;}
.quick-chip{
  padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);color:var(--greyLt);cursor:pointer;
  font-family:"Titillium Web",sans-serif;font-size:11px;font-weight:700;
}
.quick-chip:hover{border-color:var(--goldLine);color:var(--white);}
.fld{width:100%;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:var(--rs);
  padding:10px 12px;color:var(--white);font-family:"Titillium Web",sans-serif;font-size:13px;
  outline:none;transition:border-color .15s;resize:none;}
.fld:focus{border-color:var(--goldLine);}
.fld::placeholder{color:var(--grey);}
.e-row{display:flex;align-items:center;gap:10px;margin-top:6px;}
input[type=range]{flex:1;-webkit-appearance:none;height:5px;border-radius:3px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--gold) 70%,rgba(255,255,255,.1) 70%);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--gold);border:2px solid var(--navy);cursor:pointer;}
.e-val{font-family:"Oswald",sans-serif;font-size:15px;font-weight:700;color:var(--gold);width:28px;}

.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.s3{background:var(--card);border:1px solid var(--line);border-radius:var(--rs);padding:14px 10px;text-align:center;}
.s3-n{font-family:"Oswald",sans-serif;font-size:26px;font-weight:700;color:var(--gold);line-height:1;}
.s3-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin-top:4px;}
.timeline{position:relative;padding-left:24px;}
.timeline::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1.5px;background:rgba(245,197,24,.18);}
.tl-item{position:relative;margin-bottom:18px;}
.tl-dot{position:absolute;left:-22px;top:3px;width:12px;height:12px;border-radius:50%;
  background:var(--gold);border:2px solid var(--navy);
  box-shadow:0 0 6px rgba(245,197,24,.4);}
.tl-dot.past{background:var(--grey);}
.tl-date{font-size:10px;color:var(--grey);margin-bottom:3px;}
.tl-lvl{font-family:"Oswald",sans-serif;font-size:15px;font-weight:600;color:var(--white);}
.tl-d{font-size:12px;color:#4ade80;margin-top:3px;}
.tl-scores{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;}
.tl-s{font-size:10px;padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.05);color:var(--grey);}

.mod-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  margin-bottom:10px;cursor:pointer;transition:border-color .2s;display:flex;align-items:center;gap:12px;}
.mod-card:hover{border-color:var(--goldLine);}
.mod-card.done{border-color:rgba(74,222,128,.2);}
.mod-icon{width:42px;height:42px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.mod-title{font-size:14px;font-weight:700;margin-bottom:3px;}
.mod-desc{font-size:11px;color:var(--grey);line-height:1.5;}
.mod-bdg{margin-left:auto;flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;}
.mod-bdg.done{background:rgba(74,222,128,.12);}
.mod-bdg.todo{background:rgba(255,255,255,.05);color:var(--grey);font-size:9px;}

select option{background:var(--navy2);color:var(--white);}
.save-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--gold),var(--gold2));
  border:none;border-radius:var(--r);color:var(--navy);font-family:"Oswald",sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:opacity .2s;margin-top:8px;}
.save-btn:hover{opacity:.88;}

@media(max-width:500px){
  .level-ladder{grid-template-columns:repeat(4,1fr);}
  .pc-rating{font-size:42px;} .pc-name{font-size:22px;} .pc-animal{font-size:42px;}
  .match-score{font-size:24px;} .tab{padding:12px;}
  .focus-grid{grid-template-columns:1fr;}
}

/* ── Brand icon images ── */
.brand-icon {
  display:inline-block;
  width:1em; height:1em;
  object-fit:contain;
  vertical-align:middle;
  filter:brightness(1);
}
.pillar-icon {
  width:22px; height:22px;
  object-fit:contain;
  vertical-align:middle;
  flex-shrink:0;
}
.mod-icon-img {
  width:26px; height:26px;
  object-fit:contain;
}
.radar-icon { display:none; } /* radar uses SVG labels, not img */

/* ── SCREENS ── */
.screen-hidden{display:none!important;}
.auth-hero{
  text-align:center;padding:4px 0 2px;
}
.auth-logo-mark{
  width:96px;height:96px;display:block;margin:0 auto 10px;
  object-fit:cover;object-position:center;border-radius:28px;
  filter:drop-shadow(0 0 20px rgba(245,197,24,.16));
}
.auth-hero-title{
  font-family:"Oswald",sans-serif;font-size:42px;font-weight:700;line-height:1;
  letter-spacing:.04em;color:var(--gold);text-transform:uppercase;margin-bottom:8px;
}
.auth-hero-tagline{margin-bottom:14px;}
.auth-hero-copy{
  font-size:13px;color:var(--greyLt);line-height:1.72;max-width:400px;margin:0 auto 14px;
}
.auth-hero-stats{
  display:flex;justify-content:center;gap:20px;margin-bottom:4px;
}
.auth-hero-stat{
  text-align:center;min-width:72px;
}
.auth-hero-stat-value{
  font-family:"Oswald",sans-serif;font-size:22px;font-weight:700;color:var(--gold);
}
.auth-hero-stat-label{
  font-size:10px;color:var(--grey);letter-spacing:.08em;text-transform:uppercase;
}
.auth-hero-sep{width:1px;background:rgba(255,255,255,.1);}
.account-menu{position:fixed;top:52px;right:0;left:0;z-index:50;background:var(--navy2);border-bottom:1px solid var(--goldLine);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;transform:translateY(-100%);transition:transform .25s ease;}
.account-menu.open{transform:translateY(0);}
.am-player{font-family:"Oswald",sans-serif;font-size:14px;font-weight:600;color:var(--white);}
.am-sub{font-size:11px;color:var(--grey);}
.am-actions{display:flex;gap:8px;}
.am-btn{padding:7px 12px;border-radius:8px;font-family:"Oswald",sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer;border:none;}
.am-logout{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2);color:#f87171;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--gold);color:var(--navy);font-family:"Oswald",sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;padding:12px 24px;border-radius:24px;box-shadow:0 8px 30px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:9999;white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}
#screen-app{transition:opacity .2s;}

/* Pillar brand icons */
.pil-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:999px;flex-shrink:0;vertical-align:middle;
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08);
  background-image:none!important;position:relative;overflow:hidden;
  font-size:15px;line-height:1;
}
.pil-Technical{color:#60a5fa;}
.pil-Tactical{color:#4ade80;}
.pil-Mental{color:#c084fc;}
.pil-Social{color:#fb923c;}
.pil-Physical{color:#F5C518;}

/* ── AUTH OVERLAY (V18 style) ── */
.auth-step{display:none;} .auth-step.active{display:block;}
.auth-pip{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .3s;}
.auth-pip.active,.auth-pip.done{background:var(--gold);}
.auth-step-label{font-family:"Oswald",sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.auth-field{width:100%;padding:13px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--white);font-family:"Titillium Web",sans-serif;font-size:14px;outline:none;margin-bottom:10px;transition:border-color .15s;}
.auth-field:focus{border-color:var(--goldLine);}
.auth-field::placeholder{color:var(--grey);}
.auth-field option{background:var(--navy2);}
.auth-chip{padding:10px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;font-family:"Oswald",sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--grey);transition:all .15s;text-align:center;}
.auth-chip.selected{border-color:var(--gold);background:var(--goldSoft);color:var(--gold);}
.proto-tools{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);}
.proto-tools.hidden{display:none;}
.proto-toggle{
  width:100%;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:var(--greyLt);cursor:pointer;
  font-family:"Oswald",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;
}
.proto-toggle:hover{border-color:var(--goldLine);color:var(--white);}
.proto-panel{display:none;margin-top:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);}
.proto-panel.open{display:block;}
.proto-title{
  font-family:"Oswald",sans-serif;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--gold);
  margin-bottom:6px;
}
.proto-copy{font-size:11px;color:var(--grey);line-height:1.6;margin-bottom:12px;}
.proto-list{display:grid;gap:10px;}
.proto-card{
  padding:12px;border-radius:12px;background:rgba(13,27,42,.78);border:1px solid rgba(255,255,255,.08);
}
.proto-card-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.proto-pill{
  padding:3px 8px;border-radius:999px;background:rgba(245,197,24,.08);border:1px solid rgba(245,197,24,.18);
  font-size:10px;color:var(--gold);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.proto-name{font-family:"Oswald",sans-serif;font-size:15px;color:var(--white);font-weight:700;}
.proto-summary{font-size:12px;color:var(--greyLt);line-height:1.5;margin-bottom:8px;}
.proto-focus{font-size:11px;color:var(--grey);line-height:1.5;margin-bottom:10px;}
.proto-actions{display:flex;gap:8px;align-items:center;}
.proto-load{
  padding:8px 12px;border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);
  font-family:"Oswald",sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;
}
.proto-mini{font-size:10px;color:var(--grey);}

/* ── Quote bar ── */
#quote-bar { position:sticky; top:52px; z-index:28; }

/* ── Goal form ── */
.goal-pillar-chip{padding:7px 12px;border-radius:8px;border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);cursor:pointer;font-family:"Oswald",sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--grey);transition:all .15s;}
.goal-pillar-chip.selected{border-color:var(--gold);background:var(--goldSoft);color:var(--gold);}

/* ── XP Toast (rich breakdown) ── */
#xp-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120px);
  background:linear-gradient(135deg,#1a3020,#0d2018);
  border:1px solid rgba(245,197,24,.4);
  border-radius:16px; padding:16px 20px; z-index:9999;
  min-width:260px; max-width:340px;
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(245,197,24,.1);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  opacity:0; pointer-events:none;
}
#xp-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.xpt-title { font-family:"Oswald",sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.08em; color:var(--gold); margin-bottom:10px; display:flex;
  align-items:center; gap:6px; }
.xpt-row { display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--greyLt); padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.05); }
.xpt-row:last-of-type { border-bottom:none; }
.xpt-label { color:var(--grey); }
.xpt-val { font-family:"Oswald",sans-serif; font-size:13px; font-weight:700; color:var(--gold); }
.xpt-total { display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:10px; border-top:1px solid rgba(245,197,24,.2); }
.xpt-total-label { font-family:"Oswald",sans-serif; font-size:12px; color:var(--white); font-weight:700; }
.xpt-total-val { font-family:"Oswald",sans-serif; font-size:18px; font-weight:700; color:var(--gold);
  text-shadow:0 0 16px rgba(245,197,24,.5); }
.xpt-streak { margin-top:8px; font-size:11px; color:var(--gold);
  text-align:center; letter-spacing:.06em; }
/* Coach prompt card */
.coach-prompt-card {
  background:linear-gradient(135deg,rgba(74,222,128,.06),rgba(74,222,128,.02));
  border:1px solid rgba(74,222,128,.2); border-radius:var(--r); padding:14px 16px;
  margin-bottom:14px;
}
.coach-prompt-label { font-family:"Oswald",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#4ade80; margin-bottom:4px;
  display:flex; align-items:center; gap:6px; }
.coach-prompt-bonus { font-size:10px; color:#4ade80; background:rgba(74,222,128,.12);
  border:1px solid rgba(74,222,128,.2); border-radius:6px; padding:2px 7px;
  font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.05em; margin-left:auto; }

/* ── Learn tab ── */
.learn-quickstart{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(79,164,255,.05));
  border:1px solid rgba(79,164,255,.16);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;
}
.learn-quickstart-title{
  font-family:"Oswald",sans-serif;font-size:18px;font-weight:700;color:var(--white);margin-bottom:6px;
}
.learn-quickstart-copy{font-size:12px;color:var(--greyLt);line-height:1.6;margin-bottom:14px;max-width:560px;}
.learn-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.learn-quick-card{
  background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;
}
.learn-quick-step{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  background:rgba(245,197,24,.16);border:1px solid rgba(245,197,24,.24);
  font-family:"Oswald",sans-serif;font-size:12px;font-weight:700;color:var(--gold);
}
.learn-quick-head{font-size:13px;font-weight:700;color:var(--white);margin-bottom:5px;}
.learn-quick-body{font-size:11px;color:var(--greyLt);line-height:1.55;}
.learn-hero{background:linear-gradient(135deg,rgba(245,197,24,.08),rgba(245,197,24,.03));
  border:1px solid rgba(245,197,24,.2);border-radius:var(--r);padding:20px 18px;margin-bottom:16px;}
.learn-pillar-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;cursor:pointer;transition:border-color .18s;}
.learn-pillar-card:hover{border-color:var(--goldLine);}
.lpc-header{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.lpc-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:18px;flex-shrink:0;}
.lpc-title{font-size:14px;font-weight:700;color:var(--white);margin-bottom:2px;}
.lpc-sub{font-size:11px;color:var(--grey);line-height:1.4;}
.lpc-chev{margin-left:auto;color:var(--grey);font-size:12px;transition:transform .2s;flex-shrink:0;}
.lpc-body{display:none;padding:0 16px 16px;border-top:1px solid var(--line);}
.lpc-body.open{display:block;}
.lpc-body p{font-size:13px;color:var(--greyLt);line-height:1.75;margin-bottom:10px;}
.lpc-body p:last-child{margin-bottom:0;}
.lpc-key{background:rgba(245,197,24,.06);border-left:3px solid rgba(245,197,24,.4);
  border-radius:0 8px 8px 0;padding:10px 14px;font-size:12px;color:var(--greyLt);
  line-height:1.6;margin-top:12px;}
.learn-article-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:12px;}
.lac-icon{font-size:22px;margin-bottom:8px;}
.lac-title{font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;color:var(--white);
  margin-bottom:12px;letter-spacing:.02em;}
.lac-body p{font-size:13px;color:var(--greyLt);line-height:1.75;margin-bottom:10px;}
.lac-body p:last-child{margin-bottom:0;}
.lac-body ul{margin:0 0 10px 18px;}
.lac-body li{font-size:13px;color:var(--greyLt);line-height:1.75;margin-bottom:4px;}
.lac-body strong{color:var(--white);}

/* ── Diagnostic Grid — skills as rows, pillars as columns ── */
.diag-grid-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px;}

/* Column layout: skill name | 5 pillar cells */
.diag-col-widths{ grid-template-columns: 1fr repeat(5,52px); }

/* Pillar header row */
.diag-hdr-row{display:grid;border-bottom:2px solid var(--goldLine);}
.diag-hdr-spacer{background:rgba(0,0,0,.25);}
.diag-pil-hdr{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 4px;background:rgba(0,0,0,.25);
  border-left:1px solid rgba(255,255,255,.06);
  gap:4px;
}
.dph-icon{font-size:18px;line-height:1;}
.dph-name{
  font-family:"Oswald",sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--white);
  text-align:center;line-height:1.2;
}
.dph-avg{font-size:8px;color:var(--grey);text-align:center;margin-top:1px;}

/* Skill rows */
.diag-skill-row{
  display:grid;border-top:1px solid rgba(255,255,255,.05);
}
.diag-skill-row:hover .dsr-name{color:var(--white);}

/* Skill name cell */
.dsr-name-cell{
  padding:10px 12px;display:flex;align-items:center;
  border-right:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.1);
}
.dsr-name{
  font-size:12px;font-weight:600;color:var(--greyLt);
  line-height:1.35;transition:color .15s;
}

/* Pillar level cells */
.dsr-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-left:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:opacity .14s,transform .1s;
  padding:6px 2px;min-height:58px;text-align:center;
}
.dsr-cell:hover{opacity:.82;transform:scale(.94);}
.dsr-cell:active{transform:scale(.88);}
.dsr-lvl{
  font-family:"Oswald",sans-serif;font-size:15px;font-weight:700;
  color:rgba(255,255,255,.95);line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.5);margin-bottom:2px;
}
.dsr-ani{font-size:12px;line-height:1;}
.dsr-nm{
  font-size:9px;font-weight:600;color:rgba(255,255,255,.88);
  line-height:1.3;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5);
  margin-top:2px;word-break:break-word;padding:0 3px;
}
.dsr-empty .dsr-lvl{font-size:10px;color:rgba(255,255,255,.2);
  font-weight:400;font-family:"Titillium Web",sans-serif;}
.dsr-empty .dsr-nm{color:rgba(255,255,255,.2);}

/* Group dividers between pillars */
.diag-group-start{border-top:2px solid rgba(245,197,24,.18)!important;}

/* Legend */
.diag-legend{display:flex;gap:5px;flex-wrap:wrap;padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.12);}
.dl-item{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--greyLt);}
.dl-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);}

/* Detail drawer */
.diag-detail{display:none;background:var(--card);border:1px solid var(--goldLine);
  border-radius:var(--r);padding:16px;margin-bottom:14px;
  animation:ddSlide .18s ease-out;}
.diag-detail.open{display:block;}
@keyframes ddSlide{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.dd-hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.dd-badge{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:20px;flex-shrink:0;}
.dd-pillar{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:2px;}
.dd-name{font-family:"Oswald",sans-serif;font-size:16px;font-weight:700;color:var(--white);}
.dd-pips{display:flex;gap:3px;margin-bottom:12px;}
.dd-pip{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.08);}
.dd-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);margin-bottom:4px;margin-top:10px;}
.dd-text{font-size:12px;color:var(--greyLt);line-height:1.65;}
.dd-next{background:rgba(245,197,24,.06);border-left:3px solid rgba(245,197,24,.4);
  border-radius:0 8px 8px 0;padding:9px 12px;font-size:12px;color:var(--greyLt);line-height:1.6;}
.dd-close{float:right;background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--grey);font-size:11px;padding:3px 9px;cursor:pointer;
  font-family:"Titillium Web",sans-serif;}
.dd-close:hover{border-color:var(--goldLine);color:var(--white);}

@media (max-width:640px){
  .brand-wordmark{font-size:40px;}
  .brand-tagline{font-size:12px;letter-spacing:.1em;}
  .brand-mini-art{width:28px;height:28px;}
  .auth-logo-mark{width:84px;height:84px;border-radius:24px;}
  .auth-hero-title{font-size:34px;}
  .brand-surface{align-items:flex-start;}
  .brand-surface-art{width:44px;height:44px;}
  .auth-hero-stats{gap:12px;}
  .auth-hero-stat{min-width:60px;}
}