/* XP Governed Agent OS — dashboard styles. House palette per DASHBOARD_WIREFRAME_v1.html. */
:root{
  color-scheme:dark;
  --bg-top:#100e0b; --bg-bot:#060608;
  --gold:#d2b179; --gold-dim:#77684e;
  --gold-glow:rgba(96,78,48,.34);
  --line:rgba(210,177,121,.20);
  --card-top:rgba(41,36,28,.85); --card-bot:rgba(20,17,13,.92);
  --violet:#a795ff; --teal:#6fe3cf; --active:#7fe3a0; --alert:#ff9d90;
  --active-glow:rgba(111,227,160,.22);
  --ink:#efe8da; --ink-dim:#b3a893;
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
body{
  font-family:var(--sans); color:var(--ink);
  background:radial-gradient(1200px 800px at 20% -10%, var(--gold-glow), transparent 60%),
             radial-gradient(1000px 700px at 85% 110%, rgba(96,78,48,.22), transparent 55%),
             linear-gradient(180deg, var(--bg-top), var(--bg-bot));
  background-attachment:fixed; min-height:100vh;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px; opacity:.14; z-index:0;
}
#app{position:relative; z-index:1; max-width:1020px; margin:0 auto; padding:0 28px 90px}
:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

header{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:20px 0 16px; border-bottom:1px solid var(--line); margin-bottom:26px;
}
.brand{font-family:var(--serif); font-weight:600; letter-spacing:.14em; font-size:13px; color:var(--gold); text-transform:uppercase}
.brand small{display:block; font-family:var(--sans); font-weight:500; letter-spacing:.22em; font-size:9px; color:var(--gold-dim); margin-top:3px}
.acct{display:flex; align-items:center; gap:12px; font-size:11px; color:var(--ink-dim); flex-wrap:wrap}
.tier{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:6px 13px}
.signout{
  font-family:var(--sans); font-size:11px; color:var(--gold-dim); cursor:pointer;
  background:none; border:none; padding:0;
  text-decoration:underline; text-underline-offset:3px;
}

.kicker{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:10px}
h1{font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.2}
h1 .gold{color:var(--gold)}
.sub{font-size:14px; color:var(--ink-dim); margin-top:8px; max-width:620px; line-height:1.6}

/* ---- boot / error states ---- */
.boot-msg{font-size:13px; color:var(--ink-dim); padding:40px 0; text-align:center}
.boot-msg.err{color:var(--alert)}

/* ---- progress strip ---- */
.progress{
  display:flex; align-items:center; gap:22px; margin:26px 0 30px;
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid var(--line); border-radius:14px; padding:18px 24px;
}
.ring{position:relative; width:64px; height:64px; flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--gold)}
.progress .ptxt b{display:block; font-size:14px; margin-bottom:3px}
.progress .ptxt span{font-size:12px; color:var(--ink-dim)}

/* ---- hero card ---- */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid rgba(127,227,160,.55); border-radius:16px;
  padding:30px 32px; margin-bottom:34px;
  box-shadow:0 0 0 1px rgba(127,227,160,.12), 0 0 42px var(--active-glow), inset 0 0 60px rgba(127,227,160,.04);
}
.hero .kicker{color:var(--active); display:flex; align-items:center; gap:9px}
.hero .kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--active); box-shadow:0 0 10px var(--active); animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.hero h2{font-family:var(--serif); font-weight:600; font-size:26px; margin-bottom:8px}
.hero h2 .n{color:var(--gold-dim); margin-right:10px}
.hero .desc{font-size:14.5px; line-height:1.7; color:var(--ink-dim); max-width:640px}
.hero .meta{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-size:12px; color:var(--ink-dim)}
.hero .meta .chip{border:1px solid var(--line); border-radius:999px; padding:5px 12px}
.hero .meta .chip.resume{border-color:rgba(127,227,160,.4); color:var(--active)}
.cpbar{display:flex; gap:6px; margin-top:18px; max-width:300px}
.cpbar i{flex:1; height:4px; border-radius:2px; background:rgba(210,177,121,.18)}
.cpbar i.done{background:var(--active)}
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.06em;
  color:#14110c; background:linear-gradient(180deg,#a9f0c2,#7fe3a0); border:none; border-radius:8px; padding:13px 26px;
  cursor:pointer; margin-top:22px; transition:transform .18s, box-shadow .18s;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 26px rgba(127,227,160,.28)}
.btn.gold{background:linear-gradient(180deg,#e3c68f,var(--gold))}
.btn.ghost{background:transparent; color:var(--gold); border:1px solid var(--line)}
.btn.ghost:hover{box-shadow:0 8px 26px rgba(210,177,121,.15)}

/* ---- lesson / day list ---- */
.section-h{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 14px; gap:16px; flex-wrap:wrap}
.section-h .kicker{margin:0}
.section-h span{font-size:11px; color:var(--ink-dim)}
.lesson{
  display:grid; grid-template-columns:44px 1fr auto; gap:16px; align-items:center;
  width:100%; text-align:left; font-family:var(--sans); color:var(--ink); text-decoration:none;
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:10px;
  cursor:pointer; transition:transform .15s, border-color .15s;
}
.lesson:hover{transform:translateX(3px); border-color:rgba(210,177,121,.45)}
.lesson.current{border-color:rgba(127,227,160,.45)}
.lesson .num{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--gold-dim); text-align:center}
.lesson.done .num{color:var(--active)}
.lesson .t b{display:block; font-size:14.5px; margin-bottom:3px}
.lesson .t span{font-size:12px; color:var(--ink-dim); line-height:1.55; display:block; max-width:560px}
.lesson .t .art{font-size:10.5px; color:var(--gold-dim); letter-spacing:.08em; margin-top:5px; display:inline-block}
.lesson .right{text-align:right; font-size:11px; color:var(--ink-dim)}
.status{display:inline-block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; border-radius:999px; padding:5px 12px; border:1px solid var(--line); margin-bottom:6px}
.status.done{color:var(--active); border-color:rgba(127,227,160,.4)}
.status.prog{color:var(--teal); border-color:rgba(111,227,207,.4)}
.status.new{color:var(--ink-dim)}
.lesson .dur{display:block}

/* ---- day detail (accordion panel under a day row) ---- */
.day-detail{
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid rgba(111,227,207,.35); border-radius:12px;
  padding:18px 22px 20px; margin:-4px 0 12px;
}
.day-detail .dd-kicker{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); margin-bottom:12px}
.day-detail .step{display:flex; align-items:flex-start; gap:11px; padding:8px 0; font-size:13px; line-height:1.55; cursor:pointer}
.day-detail .step input[type=checkbox]{accent-color:#7fe3a0; width:16px; height:16px; margin-top:2px; flex:none; cursor:pointer}
.day-detail .step.on{color:var(--ink-dim); text-decoration:line-through; text-decoration-color:rgba(127,227,160,.5)}
.day-detail .tpl-links{margin-top:14px; padding-top:12px; border-top:1px solid rgba(210,177,121,.12); font-size:12px}
.day-detail .tpl-links .tplrow{display:flex; justify-content:space-between; gap:14px; align-items:center; padding:6px 0; flex-wrap:wrap}
.day-detail .tpl-links a{color:var(--gold); text-decoration:none; letter-spacing:.06em; white-space:nowrap}
.day-detail .tpl-links a:hover{text-decoration:underline; text-underline-offset:3px}

/* ---- downloads / kit ---- */
.dl{
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid var(--line); border-radius:14px; padding:22px 26px; margin-top:34px;
}
.dl .row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:11px 0; border-bottom:1px solid rgba(210,177,121,.1); font-size:13px; flex-wrap:wrap}
.dl .row:last-child{border-bottom:none}
.dl .row span{color:var(--ink-dim); font-size:11.5px}
.dl a{color:var(--gold); text-decoration:none; font-size:12px; letter-spacing:.06em; white-space:nowrap}
.dl a:hover{text-decoration:underline; text-underline-offset:3px}
.empty{font-size:12px; color:var(--ink-dim); font-style:italic; padding:8px 0}
.dl .row .actions{display:flex; align-items:center; gap:16px; white-space:nowrap; flex-wrap:wrap}
.inst-check{
  display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-dim);
  cursor:pointer; user-select:none; background:none; border:none; font-family:var(--sans); padding:0;
}
.inst-check .box{width:15px; height:15px; border:1px solid var(--line); border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:#14110c; flex:none}
.inst-check.on{color:var(--active)}
.inst-check.on .box{background:var(--active); border-color:var(--active)}
.upsell-tag{font-size:10px; color:var(--teal); letter-spacing:.08em}
.upsell-tag a{color:var(--teal); font-size:10px}

/* ---- upgrade card (starter) ---- */
.upgrade{
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid rgba(210,177,121,.5); border-radius:16px; padding:26px 30px; margin-bottom:34px;
  box-shadow:0 0 34px rgba(96,78,48,.3);
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center;
}
.upgrade h3{font-family:var(--serif); font-size:20px; font-weight:600; margin-bottom:6px}
.upgrade h3 em{color:var(--gold); font-style:normal}
.upgrade p{font-size:13px; color:var(--ink-dim); line-height:1.65; max-width:560px}
.upgrade .right-col{text-align:right}
.upgrade .price{font-family:var(--serif); font-size:15px; color:var(--gold); margin-bottom:4px}
.upgrade .price small{display:block; font-family:var(--sans); font-size:10.5px; color:var(--ink-dim); margin-top:3px}

/* ---- video cards (starter) ---- */
.vids{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:34px}
.vid{
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid var(--line); border-radius:14px; padding:20px 22px;
  transition:transform .15s, border-color .15s;
}
.vid:hover{transform:translateY(-2px); border-color:rgba(210,177,121,.45)}
.vid .play{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--gold); margin-bottom:14px; font-size:15px;
  background:none; cursor:pointer; font-family:var(--sans);
}
.vid .play:hover{border-color:rgba(210,177,121,.5); box-shadow:0 0 18px rgba(96,78,48,.4)}
.vid b{display:block; font-size:14px; margin-bottom:4px}
.vid span{font-size:11.5px; color:var(--ink-dim); line-height:1.55}
.vid video{width:100%; display:block; border-radius:10px; border:1px solid var(--line); background:#000; margin-bottom:14px; aspect-ratio:16/9}

/* ---- install tracker (full tier, collapsed secondary section) ---- */
.tracker{margin-top:34px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, var(--card-top), var(--card-bot))}
.tracker summary{
  list-style:none; cursor:pointer; padding:20px 26px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.tracker summary::-webkit-details-marker{display:none}
.tracker summary .kicker{margin:0}
.tracker summary .kicker::before{content:'▸ '; color:var(--gold-dim)}
.tracker[open] summary .kicker::before{content:'▾ '}
.tracker summary span{font-size:11px; color:var(--ink-dim)}
.tracker .tracker-body{padding:0 26px 22px}

/* ---- upgrade return overlay ---- */
.overlay{
  position:fixed; inset:0; z-index:60; background:rgba(6,6,8,.86);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
.overlay .panel{
  background:linear-gradient(180deg, var(--card-top), var(--card-bot));
  border:1px solid rgba(210,177,121,.5); border-radius:16px; padding:34px 38px; max-width:420px; text-align:center;
  box-shadow:0 0 42px rgba(96,78,48,.4);
}
.overlay .panel .dot{
  width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold);
  animation:pulse 1.6s infinite; margin:0 auto 16px;
}
.overlay .panel b{display:block; font-family:var(--serif); font-size:19px; font-weight:600; margin-bottom:8px}
.overlay .panel p{font-size:13px; color:var(--ink-dim); line-height:1.6}
.overlay .panel .btn{margin-top:20px}

footer{margin-top:40px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim); text-align:center}

@media (max-width:640px){
  #app{padding:0 18px 70px}
  h1{font-size:25px}
  .lesson{grid-template-columns:34px 1fr} .lesson .right{grid-column:2; text-align:left}
  .progress{flex-direction:column; align-items:flex-start}
  .upgrade{grid-template-columns:1fr} .upgrade .right-col{text-align:left}
  .vids{grid-template-columns:1fr}
  .hero{padding:24px 22px}
  .dl{padding:18px 18px}
  .dl .row .actions{white-space:normal}
}