/* =====================================================================
   Introdução da Staff · Quebrada Paulista Roleplay
   Tema escuro · layout: topbar + sidebar + conteúdo
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:            #0a0c10;
  --bg-soft:       #0e1117;
  --surface:       #12161e;
  --surface-2:     #161b25;
  --surface-3:     #1c2231;
  --line:          #212836;
  --line-soft:     #1a202c;

  --txt:           #e8ecf4;
  --txt-2:         #a7b0c0;
  --txt-3:         #6f7a8d;

  --brand:         #7589d5;
  --brand-2:       #93a4e8;
  --brand-dim:     rgba(117,137,213,.14);
  --brand-line:    rgba(117,137,213,.32);

  --ok:            #46c48b;
  --ok-dim:        rgba(70,196,139,.13);
  --warn:          #e5b567;
  --warn-dim:      rgba(229,181,103,.12);
  --danger:        #e2685f;
  --danger-dim:    rgba(226,104,95,.13);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 10px 30px -12px rgba(0,0,0,.65);
  --sh-3: 0 30px 70px -30px rgba(0,0,0,.85);

  --topbar-h: 64px;
  --side-w: 268px;

  --ease: cubic-bezier(.22,.68,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(117,137,213,.10), transparent 62%),
    radial-gradient(900px 520px at 4% 4%, rgba(70,196,139,.05), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3,h4{ margin:0; line-height:1.25; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }
svg{ display:block; }
[data-lucide]{ width:18px; height:18px; stroke-width:2; }

::selection{ background:var(--brand-line); color:#fff; }

/* scrollbar */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#232a38; border-radius:99px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#303a4d; background-clip:padding-box; }

kbd{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600;
  background:var(--surface-3); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px;
  padding:1px 5px; color:var(--txt-2); min-width:20px; text-align:center; display:inline-block;
}

/* ---------- 2. Topbar ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; height:var(--topbar-h); z-index:60;
  display:flex; align-items:center; gap:14px; padding:0 18px;
  background:rgba(10,12,16,.82);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:linear-gradient(150deg,var(--brand),#54639e);
  color:#fff; box-shadow:0 4px 14px -4px rgba(117,137,213,.7);
}
.brand-mark [data-lucide]{ width:19px; height:19px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text strong{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
.brand-text small{ font-size:11px; color:var(--txt-3); letter-spacing:.04em; text-transform:uppercase; }

.search-trigger{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  height:38px; padding:0 10px 0 12px; min-width:320px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  color:var(--txt-3); cursor:pointer; transition:.18s var(--ease);
}
.search-trigger span{ font-size:13px; margin-right:auto; }
.search-trigger [data-lucide]{ width:15px; height:15px; }
.search-trigger:hover{ border-color:var(--brand-line); background:var(--surface-2); color:var(--txt-2); }

.topbar-progress{ display:flex; align-items:center; gap:10px; padding-left:14px; border-left:1px solid var(--line-soft); }
.topbar-progress-text{ display:flex; flex-direction:column; line-height:1.15; }
.topbar-progress-text strong{ font-size:14px; }
.topbar-progress-text small{ font-size:10.5px; color:var(--txt-3); }
.ring{ position:relative; width:40px; height:40px; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:3; }
.ring-bg{ stroke:var(--surface-3); }
.ring-fg{
  stroke:var(--brand); stroke-linecap:round;
  stroke-dasharray:100 100; stroke-dashoffset:100;
  transition:stroke-dashoffset .55s var(--ease), stroke .3s;
}
.ring span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:10.5px; font-weight:700; color:var(--txt-2);
}

.icon-btn{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; transition:.16s var(--ease);
}
.icon-btn:hover{ background:var(--surface-2); border-color:var(--brand-line); color:var(--brand-2); }
.only-mobile{ display:none; }

/* ---------- 3. Sidebar ---------- */
.sidebar{
  position:fixed; top:var(--topbar-h); bottom:0; left:0; width:var(--side-w); z-index:50;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--bg-soft),rgba(14,17,23,.6));
  border-right:1px solid var(--line-soft);
}
.sidebar-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line-soft); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-3); }
.nav{ flex:1; overflow-y:auto; padding:14px 12px 8px; }
.nav-group{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-3); padding:14px 10px 7px; font-weight:600; }
.nav-item{
  position:relative; display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; margin-bottom:2px; border-radius:9px;
  color:var(--txt-2); font-size:13.5px; cursor:pointer;
  background:transparent; border:0; text-align:left;
  transition:.16s var(--ease);
}
.nav-item [data-lucide]{ width:16px; height:16px; flex:none; opacity:.85; }
.nav-item .nav-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-item .nav-count{
  font-size:10.5px; font-weight:600; color:var(--txt-3);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; padding:1px 7px; flex:none;
}
.nav-item:hover{ background:var(--surface); color:var(--txt); }
.nav-item.active{ background:var(--brand-dim); color:#fff; }
.nav-item.active [data-lucide]{ opacity:1; color:var(--brand-2); }
.nav-item.active::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--brand);
}
.nav-item.done .nav-count{ color:var(--ok); border-color:rgba(70,196,139,.3); background:var(--ok-dim); }

.sidebar-foot{ padding:14px; border-top:1px solid var(--line-soft); display:grid; gap:12px; }
.progress-block-top{ display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:var(--txt-3); margin-bottom:7px; }
.progress-block-top strong{ font-size:13px; color:var(--txt); }
.progress-block small{ display:block; margin-top:6px; font-size:11px; color:var(--txt-3); }

.bar{ height:6px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.bar-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transition:width .5s var(--ease);
}
.bar-fill.full{ background:linear-gradient(90deg,#33a873,var(--ok)); }

.scrim{ display:none; }

/* ---------- 4. Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 15px; border-radius:10px; cursor:pointer;
  font-size:13.5px; font-weight:600; white-space:nowrap;
  background:var(--brand); border:1px solid transparent; color:#fff;
  transition:.16s var(--ease);
}
.btn [data-lucide]{ width:16px; height:16px; }
.btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:var(--surface); border-color:var(--line); color:var(--txt-2); }
.btn.ghost:hover{ background:var(--surface-2); border-color:var(--brand-line); color:var(--txt); filter:none; }
.btn.danger{ background:var(--danger); }
.btn.ghost.danger{ background:transparent; color:var(--danger); border-color:rgba(226,104,95,.28); }
.btn.ghost.danger:hover{ background:var(--danger-dim); color:#f08a82; }
.btn.ok{ background:linear-gradient(120deg,#2f9e6b,var(--ok)); }
.btn.full{ width:100%; }
.btn.sm{ height:32px; padding:0 12px; font-size:12.5px; border-radius:8px; }

/* ---------- 5. Área principal ---------- */
.main{ margin-left:var(--side-w); padding-top:var(--topbar-h); min-height:100vh; display:flex; flex-direction:column; }
.view{ flex:1; max-width:1140px; width:100%; margin:0 auto; padding:34px 34px 60px; }
.foot{
  max-width:1140px; width:100%; margin:0 auto; padding:20px 34px 34px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:11.5px; color:var(--txt-3); border-top:1px solid var(--line-soft);
}

/* Cabeçalho de seção */
.page-head{ margin-bottom:28px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-2); background:var(--brand-dim); border:1px solid var(--brand-line);
  padding:4px 11px; border-radius:99px;
}
.eyebrow [data-lucide]{ width:13px; height:13px; }
.page-head h1{ font-size:31px; margin-bottom:10px; }
.page-head .lede{ font-size:15.5px; color:var(--txt-2); max-width:76ch; }
.page-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--txt-2);
  background:var(--surface); border:1px solid var(--line);
  padding:4px 10px; border-radius:99px;
}
.chip [data-lucide]{ width:13px; height:13px; color:var(--txt-3); }
.chip.ok{ color:var(--ok); border-color:rgba(70,196,139,.28); background:var(--ok-dim); }
.chip.ok [data-lucide]{ color:var(--ok); }

/* Barra de progresso da seção */
.section-progress{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; margin-bottom:26px;
}
.section-progress .top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; font-size:12.5px; color:var(--txt-3); }
.section-progress .top strong{ color:var(--txt); font-size:14px; }

/* ---------- 6. Blocos de conteúdo ---------- */
.block{ margin-bottom:34px; }
.block-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.block-head h2{ font-size:18px; }
.block-head .bh-icon{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--brand-2);
}
.block-head .bh-icon [data-lucide]{ width:15px; height:15px; }
.block-desc{ color:var(--txt-2); font-size:14px; margin:-4px 0 16px; max-width:80ch; }

/* Callout */
.callout{
  display:flex; gap:12px; padding:14px 16px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand);
  font-size:13.5px; color:var(--txt-2); margin-bottom:18px;
}
.callout strong{ color:var(--txt); display:block; margin-bottom:3px; font-size:13.5px; }
.callout .co-icon{ flex:none; color:var(--brand-2); margin-top:1px; }
.callout.warn{ border-left-color:var(--warn); } .callout.warn .co-icon{ color:var(--warn); }
.callout.ok{ border-left-color:var(--ok); } .callout.ok .co-icon{ color:var(--ok); }
.callout.danger{ border-left-color:var(--danger); } .callout.danger .co-icon{ color:var(--danger); }

/* Passos numerados */
.steps{ display:grid; gap:2px; }
.step{
  display:grid; grid-template-columns:34px 1fr; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.step:last-child{ border-bottom:0; }
.step-num{
  width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line);
  font-size:12px; font-weight:700; color:var(--brand-2);
}
.step h4{ font-size:14.5px; margin-bottom:4px; }
.step p{ font-size:13.5px; color:var(--txt-2); }

/* Grade de cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; align-items:start; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:.2s var(--ease); box-shadow:var(--sh-1);
}
.card:hover{ border-color:#2b3446; box-shadow:var(--sh-2); transform:translateY(-2px); }
.card.is-done{ border-color:rgba(70,196,139,.34); }
.card.is-done .card-top{ background:linear-gradient(180deg,var(--ok-dim),transparent); }

.card-top{ display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px; }
.card-icon{
  width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:var(--surface-3); border:1px solid var(--line); color:var(--brand-2);
}
.card-icon [data-lucide]{ width:17px; height:17px; }
.card.is-done .card-icon{ background:var(--ok-dim); border-color:rgba(70,196,139,.3); color:var(--ok); }
.card-title{ flex:1; min-width:0; }
.card-title h3{ font-size:15.5px; margin-bottom:3px; }
.card-title .sub{ font-size:12.5px; color:var(--txt-3); }
.card-badge{
  flex:none; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--txt-3);
}
.card.is-done .card-badge{ background:var(--ok-dim); border-color:rgba(70,196,139,.3); color:var(--ok); }

.card-body{ padding:0 16px 14px; }
.fields{ display:grid; gap:9px; margin-bottom:14px; }
.field{ display:grid; grid-template-columns:118px 1fr; gap:10px; font-size:13px; }
.field dt{ color:var(--txt-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding-top:2px; font-weight:600; }
.field dd{ margin:0; color:var(--txt-2); }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.tag{ font-size:10.5px; color:var(--txt-3); background:var(--surface-2); border:1px solid var(--line); padding:2px 8px; border-radius:6px; }

/* Checklist */
.checklist-title{
  display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--txt-3); margin:14px 0 8px;
}
.checklist-title [data-lucide]{ width:13px; height:13px; }
.check{
  display:flex; align-items:flex-start; gap:10px; padding:7px 9px; border-radius:9px;
  cursor:pointer; font-size:13.5px; color:var(--txt-2); transition:.14s var(--ease);
  user-select:none;
}
.check:hover{ background:var(--surface-2); color:var(--txt); }
.check .box{
  width:18px; height:18px; flex:none; margin-top:1px; border-radius:6px;
  border:1.5px solid #364157; background:var(--bg-soft);
  display:grid; place-items:center; transition:.16s var(--ease);
}
.check .box [data-lucide]{ width:12px; height:12px; color:#fff; opacity:0; transform:scale(.5); transition:.16s var(--ease); }
.check.on .box{ background:var(--ok); border-color:var(--ok); }
.check.on .box [data-lucide]{ opacity:1; transform:scale(1); }
.check.on .check-text{ color:var(--txt-3); text-decoration:line-through; text-decoration-color:rgba(111,122,141,.5); }

.card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-top:1px solid var(--line-soft); background:rgba(0,0,0,.14);
}
.card-foot .mini{ font-size:11.5px; color:var(--txt-3); }

/* ---------- 7. Dashboard ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg,var(--surface-2),var(--surface) 60%);
  border:1px solid var(--line); border-radius:22px;
  padding:34px 34px 30px; margin-bottom:26px;
}
.hero::after{
  content:''; position:absolute; right:-90px; top:-120px; width:380px; height:380px;
  background:radial-gradient(circle,rgba(117,137,213,.20),transparent 66%); pointer-events:none;
}
.hero h1{ font-size:34px; margin-bottom:12px; max-width:22ch; }
.hero p{ font-size:15.5px; color:var(--txt-2); max-width:66ch; margin-bottom:22px; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:30px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.stat .lbl{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--txt-3); margin-bottom:8px; }
.stat .lbl [data-lucide]{ width:14px; height:14px; }
.stat .val{ font-size:24px; font-weight:700; letter-spacing:-.03em; }
.stat .val small{ font-size:13px; font-weight:500; color:var(--txt-3); }

.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.tile{
  position:relative; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; transition:.2s var(--ease); overflow:hidden;
}
.tile:hover{ transform:translateY(-3px); border-color:var(--brand-line); box-shadow:var(--sh-2); }
.tile-icon{
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px; margin-bottom:13px;
  background:var(--brand-dim); border:1px solid var(--brand-line); color:var(--brand-2);
}
.tile h3{ font-size:15px; margin-bottom:5px; }
.tile p{ font-size:12.8px; color:var(--txt-3); margin-bottom:14px; }
.tile .tile-bar{ height:4px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.tile .tile-bar div{ height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .5s var(--ease); }
.tile .tile-meta{ display:flex; justify-content:space-between; font-size:11px; color:var(--txt-3); margin-top:7px; }
.tile.done .tile-icon{ background:var(--ok-dim); border-color:rgba(70,196,139,.3); color:var(--ok); }
.tile.done .tile-bar div{ background:var(--ok); }

/* ---------- 8. Jornada ---------- */
.journey-hero{
  display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;
  background:linear-gradient(140deg,var(--surface-2),var(--surface) 62%);
  border:1px solid var(--line); border-radius:22px; padding:28px 30px; margin-bottom:26px;
}
.journey-hero h1{ font-size:27px; margin-bottom:9px; }
.journey-hero p{ color:var(--txt-2); font-size:14.5px; max-width:60ch; }
.journey-ring{ position:relative; width:132px; height:132px; flex:none; }
.journey-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.journey-ring circle{ fill:none; stroke-width:6; }
.journey-ring .rb{ stroke:var(--surface-3); }
.journey-ring .rf{ stroke:var(--brand); stroke-linecap:round; stroke-dasharray:100 100; stroke-dashoffset:100; transition:stroke-dashoffset .6s var(--ease), stroke .3s; }
.journey-ring.full .rf{ stroke:var(--ok); }
.journey-ring .lbl{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.journey-ring .lbl b{ font-size:28px; font-weight:800; letter-spacing:-.04em; }
.journey-ring .lbl span{ font-size:10.5px; color:var(--txt-3); text-transform:uppercase; letter-spacing:.09em; }

.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:26px; }
.cat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px; }
.cat .cat-top{ display:flex; align-items:center; gap:8px; margin-bottom:9px; font-size:12.5px; font-weight:600; }
.cat .cat-top [data-lucide]{ width:14px; height:14px; color:var(--brand-2); }
.cat .cat-top span{ margin-left:auto; font-size:11px; color:var(--txt-3); font-weight:500; }
.cat.done{ border-color:rgba(70,196,139,.3); }
.cat.done .cat-top [data-lucide]{ color:var(--ok); }

.stage-list{ display:grid; gap:8px; }
.stage{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; transition:.16s var(--ease);
}
.stage:hover{ border-color:var(--brand-line); background:var(--surface-2); }
.stage .box{
  width:22px; height:22px; flex:none; border-radius:7px; border:1.5px solid #364157;
  background:var(--bg-soft); display:grid; place-items:center; transition:.16s var(--ease);
}
.stage .box [data-lucide]{ width:14px; height:14px; color:#fff; opacity:0; transform:scale(.5); transition:.16s var(--ease); }
.stage.on{ border-color:rgba(70,196,139,.3); background:linear-gradient(90deg,var(--ok-dim),transparent 45%); }
.stage.on .box{ background:var(--ok); border-color:var(--ok); }
.stage.on .box [data-lucide]{ opacity:1; transform:scale(1); }
.stage.on .stage-title{ color:var(--txt-3); text-decoration:line-through; text-decoration-color:rgba(111,122,141,.45); }
.stage.current{ border-color:var(--brand-line); box-shadow:0 0 0 1px var(--brand-dim) inset; }
.stage-idx{ font-size:11px; font-weight:700; color:var(--txt-3); width:24px; flex:none; font-variant-numeric:tabular-nums; }
.stage-main{ flex:1; min-width:0; }
.stage-title{ font-size:14.5px; font-weight:600; }
.stage-desc{ font-size:12.5px; color:var(--txt-3); margin-top:2px; }
.stage-side{ display:flex; align-items:center; gap:8px; flex:none; }
.stage-tag{ font-size:10.5px; color:var(--txt-3); background:var(--surface-2); border:1px solid var(--line); padding:2px 8px; border-radius:99px; white-space:nowrap; }
.stage-go{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--txt-3); transition:.16s var(--ease); cursor:pointer; }
.stage-go:hover{ color:var(--brand-2); border-color:var(--brand-line); }
.now-badge{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-2); background:var(--brand-dim); border:1px solid var(--brand-line); padding:2px 8px; border-radius:99px; }

/* Conclusão */
.finish{
  text-align:center; padding:46px 30px; margin-bottom:26px;
  background:linear-gradient(150deg,rgba(70,196,139,.1),var(--surface) 62%);
  border:1px solid rgba(70,196,139,.28); border-radius:22px;
}
.finish .medal{
  width:64px; height:64px; margin:0 auto 18px; display:grid; place-items:center; border-radius:20px;
  background:linear-gradient(140deg,#2f9e6b,var(--ok)); color:#06210f; box-shadow:0 14px 34px -14px rgba(70,196,139,.75);
}
.finish .medal [data-lucide]{ width:30px; height:30px; stroke-width:2.4; }
.finish h2{ font-size:26px; margin-bottom:10px; }
.finish p{ color:var(--txt-2); max-width:60ch; margin:0 auto 22px; }
.finish-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; max-width:720px; margin:0 auto 24px; }
.finish-stats .fs{ background:rgba(0,0,0,.24); border:1px solid var(--line); border-radius:var(--r); padding:14px; }
.finish-stats .fs b{ display:block; font-size:22px; letter-spacing:-.03em; }
.finish-stats .fs span{ font-size:11.5px; color:var(--txt-3); }
.finish-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- 9. Busca ---------- */
.overlay{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(4,6,10,.72); backdrop-filter:blur(6px);
  padding:12vh 20px 20px;
}
.overlay.open{ display:block; animation:fade .16s var(--ease); }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(-8px) scale(.99)} to{opacity:1; transform:none} }

.search-panel{
  max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--sh-3); overflow:hidden; animation:pop .2s var(--ease);
}
.search-input{ display:flex; align-items:center; gap:11px; padding:14px 14px; border-bottom:1px solid var(--line-soft); }
.search-input > [data-lucide]{ color:var(--txt-3); flex:none; }
.search-input input{
  flex:1; background:transparent; border:0; outline:0; color:var(--txt); font-size:15px;
}
.search-input input::placeholder{ color:var(--txt-3); }
.search-results{ max-height:46vh; overflow-y:auto; padding:8px; }
.sr{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer;
  transition:.12s var(--ease);
}
.sr:hover,.sr.sel{ background:var(--brand-dim); }
.sr .sr-icon{ width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); color:var(--brand-2); }
.sr .sr-main{ flex:1; min-width:0; }
.sr .sr-main b{ font-size:13.5px; font-weight:600; display:block; }
.sr .sr-main span{ font-size:11.5px; color:var(--txt-3); }
.sr .sr-go{ color:var(--txt-3); flex:none; }
.sr-empty{ padding:26px 14px; text-align:center; color:var(--txt-3); font-size:13.5px; }
.search-foot{ display:flex; gap:16px; padding:10px 14px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--txt-3); }
.search-foot kbd{ margin-right:3px; }

/* ---------- 10. Confirmação / toast ---------- */
.confirm-panel{
  max-width:420px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:26px; text-align:center; box-shadow:var(--sh-3); animation:pop .2s var(--ease);
}
.confirm-icon{
  width:48px; height:48px; margin:0 auto 14px; display:grid; place-items:center; border-radius:14px;
  background:var(--danger-dim); border:1px solid rgba(226,104,95,.3); color:var(--danger);
}
.confirm-panel h3{ font-size:18px; margin-bottom:8px; }
.confirm-panel p{ font-size:13.5px; color:var(--txt-2); margin-bottom:20px; }
.confirm-actions{ display:flex; gap:10px; justify-content:center; }

.toast{
  position:fixed; bottom:22px; left:50%; transform:translate(-50%,20px);
  display:flex; align-items:center; gap:9px; z-index:200;
  background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--ok);
  border-radius:11px; padding:11px 16px; font-size:13.5px; box-shadow:var(--sh-2);
  opacity:0; pointer-events:none; transition:.25s var(--ease);
}
.toast [data-lucide]{ color:var(--ok); width:16px; height:16px; }
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- 11. Skeleton ---------- */
.skeleton{ display:grid; gap:16px; }
.sk{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); height:96px; position:relative; overflow:hidden; }
.sk::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  animation:shimmer 1.25s infinite;
}
@keyframes shimmer{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ---------- 12. Responsivo ---------- */
@media (max-width:1180px){
  .search-trigger{ min-width:240px; }
}
@media (max-width:1024px){
  :root{ --side-w:240px; }
  .view,.foot{ padding-left:24px; padding-right:24px; }
  .journey-hero{ grid-template-columns:1fr; }
  .journey-ring{ margin:0 auto; }
}
@media (max-width:860px){
  .only-mobile{ display:grid; }
  .topbar{ padding:0 12px; gap:10px; }
  .search-trigger{ display:none; }
  .topbar-progress{ margin-left:auto; padding-left:0; border-left:0; }
  .topbar-progress-text{ display:none; }
  .brand-text small{ display:none; }

  .sidebar{
    transform:translateX(-100%); width:280px; top:0; z-index:120;
    box-shadow:var(--sh-3); transition:transform .28s var(--ease);
    background:var(--bg-soft);
  }
  .sidebar.open{ transform:none; }
  .scrim{
    display:block; position:fixed; inset:0; z-index:110;
    background:rgba(4,6,10,.6); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
  }
  .scrim.open{ opacity:1; pointer-events:auto; }

  .main{ margin-left:0; }
  .view{ padding:22px 16px 46px; }
  .foot{ padding:18px 16px 28px; flex-direction:column; gap:4px; }
  .hero{ padding:24px 20px; border-radius:18px; }
  .hero h1{ font-size:26px; }
  .page-head h1{ font-size:25px; }
  .cards{ grid-template-columns:1fr; }
  .field{ grid-template-columns:1fr; gap:2px; }
  .field dt{ padding-top:0; }
  .stage{ flex-wrap:wrap; }
  .stage-side{ width:100%; justify-content:flex-end; }
  .overlay{ padding:8vh 12px 12px; }
}
@media (max-width:420px){
  .card-top{ flex-wrap:wrap; }
  .finish-stats{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}