:root{
  --font-scale: 1;
  --line-height: 1.35;

  --bg0:#060b17;
  --bg1:#0b1530;
  --panel:#0f1c3b;
  --panel2:#0b142c;
  --edge:#5fd3ff;
  --edge2:#2c8cff;
  --gold:#ffbf46;
  --gold2:#ffdb6e;
  --text:#eaf6ff;
  --muted:#9bb4d0;
  --danger:#ff4b55;
  --ok:#31e981;
  --shadow: 0 18px 45px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 14px;
  --glow: 0 0 22px rgba(95,211,255,.35), 0 0 44px rgba(44,140,255,.18);
  --goldGlow: 0 0 14px rgba(255,191,70,.35), 0 0 32px rgba(255,219,110,.22);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% 12%, rgba(95,211,255,.22), transparent 60%),
    radial-gradient(900px 500px at 85% 25%, rgba(255,191,70,.16), transparent 58%),
    radial-gradient(1000px 700px at 50% 100%, rgba(44,140,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.bg-stars{
  position:fixed; inset:0;
  background: url("../assets/starfield.svg") center/cover no-repeat;
  opacity:.45;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:-2;
}

a{color:inherit}
img{max-width:100%; display:block}
button, input, select, textarea{font:inherit}

.container{
  width:min(1200px, 96vw);
  margin:0 auto;
  padding:18px 0 40px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:18px 0;
}

.brand{
  display:flex; align-items:center; gap:14px;
}
.brand .logo{
  width:260px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.6));
}
.badges{
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center;
}
.badge{
  padding:8px 12px;
  border-radius:999px;
  background: rgba(15,28,59,.65);
  border:1px solid rgba(95,211,255,.35);
  box-shadow: var(--glow);
  font-size:13px;
  color:var(--muted);
}

.shell{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:start;
}

.panel{
  position:relative;
  background: linear-gradient(180deg, rgba(15,28,59,.92), rgba(8,14,30,.92));
  border-radius: var(--radius);
  border: 2px solid rgba(95,211,255,.35);
  box-shadow: var(--shadow), var(--glow);
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(95,211,255,.20) 22%, transparent 45%),
    linear-gradient(180deg, rgba(255,191,70,.10), transparent 60%);
  opacity:.7;
  pointer-events:none;
}

.panel-header{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(95,211,255,.20);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.panel-title{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--gold2);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.panel-title img{width:28px; height:28px}

.panel-body{padding:16px}

.card{
  background: rgba(11,20,44,.65);
  border:1px solid rgba(255,191,70,.20);
  border-radius: var(--radius2);
  padding:14px;
  box-shadow: inset 0 0 0 1px rgba(95,211,255,.10);
}

.stack{display:grid; gap:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}

.field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
}
.field input, .field select, .field textarea{
  width:100%;
  background: rgba(6,10,22,.75);
  border:1px solid rgba(95,211,255,.28);
  border-radius: 12px;
  color:var(--text);
  padding:10px 12px;
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.field textarea{min-height:110px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(255,191,70,.55);
  box-shadow: var(--goldGlow);
}

.btn{
  cursor:pointer;
  user-select:none;
  border:none;
  padding:10px 14px;
  border-radius: 14px;
  color:#0b1020;
  font-weight:800;
  letter-spacing:.3px;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  box-shadow: var(--shadow), var(--goldGlow);
  transition: transform .08s ease, filter .2s ease, opacity .2s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform: translateY(1px)}
.btn.secondary{
  background: linear-gradient(180deg, rgba(95,211,255,.85), rgba(44,140,255,.85));
  color:#041022;
  box-shadow: var(--shadow), var(--glow);
}
.btn.ghost{
  background: rgba(15,28,59,.5);
  color:var(--text);
  border:1px solid rgba(95,211,255,.35);
  box-shadow: var(--glow);
}
.btn.danger{
  background: linear-gradient(180deg, #ff8a8f, var(--danger));
  color:#1a0507;
  box-shadow: var(--shadow);
}
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.1);
}

.list{
  display:grid;
  gap:10px;
}
.list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(6,10,22,.55);
  border:1px solid rgba(95,211,255,.22);
}
.list-item strong{color:var(--gold2)}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,191,70,.12);
  border:1px solid rgba(255,191,70,.25);
  color:var(--gold2);
}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  padding:16px;
}
.hero .welcome{
  display:grid;
  gap:10px;
}
.kpi{
  display:flex; gap:10px; flex-wrap:wrap;
}
.kpi .pill{background:rgba(95,211,255,.10); border-color:rgba(95,211,255,.25); color:#bfefff}
.hero-illu{
  position:relative;
  min-height:260px;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(95,211,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,191,70,.12);
}
.hero-illu::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,10,22,.25), rgba(6,10,22,.82));
}
.hero-illu img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.05);
  filter:saturate(1.05) contrast(1.05);
}

.tabs{
  display:flex; gap:10px; flex-wrap:wrap;
}
.tab{
  padding:9px 12px;
  border-radius: 999px;
  background: rgba(6,10,22,.55);
  border:1px solid rgba(95,211,255,.25);
  color:var(--muted);
  cursor:pointer;
}
.tab.active{
  color:#051024;
  background: linear-gradient(180deg, rgba(95,211,255,.92), rgba(44,140,255,.92));
  border-color: rgba(95,211,255,.55);
  box-shadow: var(--glow);
  font-weight:800;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
.table th{
  text-align:left;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  padding:0 10px;
}
.table td{
  background: rgba(6,10,22,.55);
  border:1px solid rgba(95,211,255,.22);
  padding:10px;
}
.table tr td:first-child{border-radius:14px 0 0 14px}
.table tr td:last-child{border-radius:0 14px 14px 0}

.notice{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,191,70,.28);
  background: rgba(255,191,70,.08);
  color:#ffdca0;
}
.notice.ok{border-color:rgba(49,233,129,.30); background:rgba(49,233,129,.08); color:#bfffe1}
.notice.danger{border-color:rgba(255,75,85,.35); background:rgba(255,75,85,.08); color:#ffc6c9}

.footer{
  margin-top:16px;
  color:rgba(234,246,255,.65);
  font-size:12px;
  text-align:center;
}

.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.55);
  z-index:50;
}
.modal.open{display:flex}
.modal .box{
  width:min(980px, 96vw);
  max-height: 92vh;
  overflow:auto;
  background: linear-gradient(180deg, rgba(15,28,59,.96), rgba(8,14,30,.96));
  border:2px solid rgba(95,211,255,.35);
  border-radius: 18px;
  box-shadow: var(--shadow), var(--glow);
}
.modal .box header{
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px solid rgba(95,211,255,.20);
}
.modal .box header h3{
  margin:0;
  color:var(--gold2);
}
.modal .box main{padding:16px}
.modal .box footer{
  padding:12px 16px 16px;
  display:flex; gap:10px; justify-content:flex-end;
  border-top:1px solid rgba(95,211,255,.18);
}

.canvas-wrap{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(95,211,255,.28);
  background: rgba(6,10,22,.55);
}
canvas{display:block; width:100%; height:auto}

@media (max-width: 980px){
  .shell{grid-template-columns: 1fr}
  .hero{grid-template-columns:1fr}
}


/* extra components */
.tline{ margin: 0 0 6px; line-height: 1.5; text-align: justify; }
.opt{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background: rgba(8,14,30,.35); }
.opt input{ margin-top:3px; }
.list.compact .list-item{ padding:10px 12px; }
.calc{ display:flex; flex-direction:column; gap:10px; }
.calc-screen{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 20px; padding: 12px; border-radius: 14px;
  background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15);
  text-align:right; color: var(--text); }
.calc-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.calc-grid .btn{ padding: 12px 10px; }
.grid3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 980px){
  .grid3{ grid-template-columns: 1fr; }
}


/* Accessibility: global scaling */
html{ font-size: calc(16px * var(--font-scale)); line-height: var(--line-height); }

/* A11Y bar */
.skip-link{
  position:absolute; left:8px; top:-80px; z-index:9999;
  background:#000; color:#fff; padding:10px 12px; border-radius:10px;
  border:2px solid rgba(255,255,255,.35);
}
.skip-link:focus{ top:8px; outline:3px solid rgba(255,255,255,.8); }

.a11ybar{
  position:fixed; top:10px; right:10px; z-index:9998;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  padding:10px; border-radius:16px;
  background:rgba(10,16,30,.70);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
}
.btn.mini{ padding:8px 10px; font-size: 0.9rem; }

/* estado ativo (ex.: VLibras / Leitor) */
.a11ybar .btn.active{
  border-color: rgba(255,212,0,.8) !important;
  box-shadow: 0 0 0 2px rgba(255,212,0,.25), 0 10px 24px rgba(0,0,0,.35);
  filter: saturate(1.15);
}

/* High contrast mode */
:root[data-contrast="high"]{
  --bg: #000000;
  --panel: #0b0b0b;
  --text: #ffffff;
  --muted: rgba(255,255,255,.85);
  --accent: #FFD400;
}
:root[data-contrast="high"] .card,
:root[data-contrast="high"] .panel{
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: none !important;
}
:root[data-contrast="high"] a,
:root[data-contrast="high"] .badge{
  color: #FFD400 !important;
}

/* Dyslexia-friendly font toggle */
:root[data-dyslexia="on"]{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Verdana", sans-serif;
  letter-spacing: 0.02em;
}

/* Reduce motion */
:root[data-motion="reduce"] *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Big cursor */
:root[data-cursor="big"]{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23FFD400'/%3E%3Ccircle cx='12' cy='12' r='6' fill='%23000000'/%3E%3C/svg%3E") 12 12, auto; }

/* Strong focus indicators */
:focus-visible{
  outline: 3px solid rgba(255,212,0,.85);
  outline-offset: 2px;
}

/* ====== Teoria: subtítulos maiores ====== */
#theoryBox h2{
  font-size: calc(30px * var(--font-scale));
  line-height: 1.2;
  margin: 18px 0 10px;
  color: var(--gold2);
  letter-spacing: .2px;
  text-shadow: 0 0 14px rgba(255,212,0,.20);
}
#theoryBox h3{
  font-size: calc(22px * var(--font-scale));
  line-height: 1.25;
  margin: 16px 0 8px;
  color: rgba(255,240,180,.95);
  text-shadow: 0 0 12px rgba(120,200,255,.12);
}
#theoryBox h4{
  font-size: calc(18px * var(--font-scale));
  line-height: 1.3;
  margin: 14px 0 6px;
  color: rgba(210,235,255,.95);
}
#theoryBox p, #theoryBox li{
  font-size: calc(16px * var(--font-scale));
}

/* Destaque para itens em lista (como na referência) */
#theoryBox ul, #theoryBox ol{
  padding-left: 18px;
}
#theoryBox li{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(120,200,255,.22);
  background: linear-gradient(180deg, rgba(255,212,0,.10), rgba(10,25,45,.55));
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
#theoryBox li::marker{
  color: var(--gold2);
}
#theoryBox .callout{
  border: 1px solid rgba(120,200,255,.25);
  background: rgba(10,25,45,.55);
  padding: 12px 14px;
  border-radius: 14px;
}