
:root{
  --navy:#0c1a3d; --navy2:#142a5c; --mint:#6ef0a8; --mint-d:#1f9e63; --mint-ink:#062a1a;
  --paper:#f4f6f8; --paper-edge:#c9d1da; --fold:#d6dde4; --gold:#ffce34; --gold-d:#c99a00;
  --text:#e9eef8; --muted:#9fb0cc; --warn:#ff7a8f; --ink:#241a33;
  --bg:#0a1733; --card:#112352; --card2:#0f2150; --line:#2a4378;
  --c-perf:#e0a800; --c-soc:#cc3366; --c-eco:#006699; --c-fam:#663399; --c-id:#3f9f3f;
  --cond:"Bahnschrift SemiBold Condensed","Bahnschrift Condensed","Bahnschrift","Roboto Condensed","Arial Narrow",sans-serif;
  --sans:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.45}
button,input,select{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* ============ Ecran: panoul profesorului ============ */
.app{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;max-width:1500px;margin:0 auto;padding:18px}
@media (max-width:980px){.app{grid-template-columns:1fr}}
.side{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow:auto}
.mark{position:relative;display:inline-block;background:var(--paper);border:3px solid var(--paper-edge);border-radius:8px;padding:5px 26px 5px 12px;font-family:var(--cond);font-weight:800;font-size:21px;color:var(--navy);font-stretch:condensed;white-space:nowrap}
.mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;background:linear-gradient(315deg,var(--mint) 50%,var(--fold) 50%);border-top-left-radius:5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.card h2{margin:0 0 4px;font-size:18px}
.card h3{margin:16px 0 8px;font-size:14px;color:var(--mint)}
.hint{margin:0 0 12px;color:var(--muted);font-size:13.5px}
.matlist{display:grid;gap:6px}
.mat{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);background:var(--card2);border-radius:10px;padding:9px 11px;cursor:pointer}
.mat:hover{border-color:#3b5690}
.mat input{width:17px;height:17px;accent-color:#6ef0a8}
.mat .t{font-weight:600;font-size:14px}
.mat .m{font-size:12px;color:var(--muted)}
.mat .n{font-family:var(--cond);font-stretch:condensed;font-weight:800;font-size:15px;color:var(--mint);white-space:nowrap}
.opt{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:#b9c8e4;margin-bottom:10px}
.opt select,.opt input{border:1px solid #3b5690;background:#0c1a3d;color:var(--text);border-radius:8px;padding:7px 9px;font-weight:400}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid #3b5690;background:#0c1a3d;color:var(--text);border-radius:8px;padding:7px 11px;font-size:14px}
.seg button[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--mint-ink);font-weight:700}
.btn{border:0;border-radius:10px;padding:11px 18px;font-weight:800;background:var(--mint);color:var(--mint-ink)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid #3b5690;font-weight:600}
.btn.small{padding:7px 12px;font-size:14px}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:6px}
.chk input{width:16px;height:16px;accent-color:#6ef0a8}
.pcount{font-family:var(--cond);font-stretch:condensed;font-weight:800;font-size:30px;color:var(--mint);line-height:1}
.chars{display:grid;gap:4px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--card2)}
.chars label{display:flex;align-items:center;gap:8px;font-size:13px}
.lbl{font-family:var(--cond);font-weight:700;font-stretch:condensed;text-transform:uppercase;font-size:12px;padding:1px 7px;border-radius:4px;color:#fff;white-space:nowrap}
.cat-perf{background:var(--c-perf);color:#2e2300}.cat-soc{background:var(--c-soc)}.cat-eco{background:var(--c-eco)}.cat-fam{background:var(--c-fam)}.cat-id{background:var(--c-id)}
.note{border-left:3px solid var(--gold);background:rgba(255,206,52,.12);color:#ffe8a8;padding:9px 12px;border-radius:0 8px 8px 0;font-size:13px}
.prevhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.prevhead h1{margin:0;font-size:20px}
.zoomwrap{overflow:auto}
.foot{margin-top:20px;font-size:12px;color:#6f86b3;text-align:center}
.logos{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;margin:18px 0 4px}
.logos img{display:block;height:24px;width:auto;opacity:.95}
.logos .sep{width:1px;height:24px;background:rgba(255,255,255,.25)}

/* ============ Foile A4 ============ */
#out{display:flex;flex-direction:column;align-items:center;gap:18px}
.sheet{position:relative;width:210mm;min-height:297mm;max-height:297mm;background:#fff;color:var(--ink);padding:10mm;box-shadow:0 10px 34px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column}
.sheet.land{width:297mm;min-height:210mm}
.sheet .sh{display:flex;align-items:baseline;gap:10px;border-bottom:2px solid var(--navy);padding-bottom:4mm;margin-bottom:5mm}
.sheet .sh b{font-family:var(--cond);font-stretch:condensed;font-size:17pt;color:var(--navy);line-height:1}
.sheet .sh span{font-size:8.5pt;color:#5a6a85}
.sheet .sf{margin-top:auto;padding-top:3mm;border-top:1px solid #d3dce7;font-size:7pt;color:#6a7a92;display:flex;gap:4mm;align-items:center;line-height:1.25}
.sheet .sf .cp{flex:1;min-width:0}
.sheet .sf .cl{white-space:nowrap;color:#8a97ab}
.sheet .sf .lg{display:flex;gap:10px;align-items:center;margin-left:auto}
.sheet .sf img{height:5mm;width:auto;filter:brightness(0) opacity(.72)}
.cut{outline:1px dashed #b9c5d4;outline-offset:0}
.ovf{position:absolute;top:0;right:0;background:var(--warn);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:0 0 0 8px;z-index:5}
@media print{.ovf{display:none}}
.nocut .cut{outline:0}
.grid{display:grid;gap:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}

/* eticheta-autocolant */
.stk{position:relative;display:inline-block;background:var(--paper);border:2.5px solid var(--paper-edge);border-radius:5px;padding:.16em .75em .2em .5em;font-family:var(--cond);font-weight:800;font-stretch:condensed;text-transform:uppercase;color:var(--navy);line-height:1.1}
.stk::after{content:"";position:absolute;right:-2.5px;bottom:-2.5px;width:.7em;height:.7em;background:linear-gradient(315deg,var(--mint-d) 50%,var(--fold) 50%);border-top-left-radius:3px}
.stk.star{background:linear-gradient(160deg,#fff3b0,var(--gold));border-color:var(--gold-d);color:#3d2d00}
.stk.star::before{content:"★ ";color:#a97b00}
.eco .stk{background:#fff}
.eco .stk.star{background:#fff}

/* fișa de personaj (pliant) */
.fold{display:flex;flex-direction:column;height:118mm;border:1px dashed #b9c5d4}
.fold .half{flex:1;padding:5mm 6mm;display:flex;flex-direction:column;gap:2mm;overflow:hidden}
.fold .half.front{background:var(--navy);color:#fff;border-bottom:2px dashed #8fa0bb}
.eco .fold .half.front{background:#fff;color:var(--ink);border-bottom:2px dashed #999}
.fold .half.back{background:#fff}
.fold .foldnote{position:absolute;font-size:7pt;color:#8a97ab}
.fr-top{display:flex;align-items:center;gap:3mm}
.av{width:11mm;height:11mm;border-radius:50%;display:grid;place-items:center;font-family:var(--cond);font-weight:800;font-size:15pt;color:#fff;border:2px solid rgba(255,255,255,.9);flex:none}
.eco .av{border-color:#333}
.fr-top .who{font-size:12pt;font-weight:700;line-height:1.15}
.fr-top .who small{display:block;font-weight:400;font-size:8pt;opacity:.75}
.fr-stk{text-align:center;margin:1mm 0}
.fr-stk .stk{font-size:21pt}
.blk{font-size:9.5pt;line-height:1.35}
.blk b{display:block;font-size:7.5pt;text-transform:uppercase;letter-spacing:.05em;color:#7d8ca6;margin-bottom:.6mm}
.fold .front .blk b{color:#a9bcdc}
.pot{background:var(--mint);color:var(--mint-ink);border-radius:3mm;padding:3mm 4mm;font-size:9.5pt;font-weight:600}
.eco .pot{background:#fff;border:2px solid var(--mint-d);color:var(--ink)}
.pot b{display:block;font-size:7.5pt;text-transform:uppercase;letter-spacing:.05em;opacity:.75;font-weight:700;margin-bottom:.6mm}

/* cărți de dilemă */
.dil{height:120mm;border:1px dashed #b9c5d4;padding:6mm 7mm;display:flex;flex-direction:column;gap:3mm;background:#fff}
.dil .dh{display:flex;align-items:center;gap:3mm;border-bottom:1.5px solid var(--navy);padding-bottom:2mm}
.dil .dh .cod{font-family:var(--cond);font-stretch:condensed;font-size:10pt;color:#5a6a85;margin-left:auto}
.dil .sit{font-size:11pt;line-height:1.35;font-weight:600}
.dil .o{display:grid;grid-template-columns:auto 1fr;gap:2.5mm;font-size:9.5pt;line-height:1.3;border-top:1px solid #dfe6ef;padding-top:2mm}
.dil .o .L{font-family:var(--cond);font-stretch:condensed;font-weight:800;font-size:15pt;color:var(--navy);line-height:.9}

/* cărți de context */
.ctxc{height:66mm;border:1px dashed #b9c5d4;padding:5mm;display:flex;flex-direction:column;gap:2mm;background:#fff}
.ctxc .k{font-size:7.5pt;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-d);font-weight:700}
.ctxc .t{font-family:var(--cond);font-stretch:condensed;font-size:14pt;color:var(--navy);line-height:1.05}
.ctxc .x{font-size:9pt;line-height:1.3}
.ctxc .e{margin-top:auto;font-size:8pt;font-weight:700;color:var(--mint-d)}

/* cartonașe de vot */
.vote{height:122mm;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2mm;border:1px dashed #b9c5d4;background:#fff}
.vote .L{font-family:var(--cond);font-stretch:condensed;font-weight:800;font-size:86pt;line-height:.8;color:var(--navy)}
.vote .n{font-size:9pt;color:#5a6a85}
.vote.col-0{background:#fdeef3}.vote.col-1{background:#fff8e3}.vote.col-2{background:#eefaf2}
.eco .vote{background:#fff}

/* jetoane */
.tok{aspect-ratio:1;border-radius:50%;border:2px dashed #b9c5d4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1mm;background:var(--mint);color:var(--mint-ink);padding:4mm}
.eco .tok{background:#fff;border-style:solid;border-color:var(--mint-d)}
.tok .i{font-size:19pt;line-height:1}
.tok .t{font-family:var(--cond);font-stretch:condensed;font-weight:800;font-size:10pt;line-height:1.05}
.tok .s{font-size:6.5pt;line-height:1.15}

/* bilețele */
.slip{height:66mm;border:1px dashed #b9c5d4;padding:5mm;display:flex;flex-direction:column;gap:2mm;background:#fff}
.slip .t{font-family:var(--cond);font-stretch:condensed;font-size:12pt;color:var(--navy)}
.slip .q{font-size:8pt;color:#5a6a85}
.slip .lines{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4.5mm;padding-bottom:1mm}
.slip .lines i{display:block;border-bottom:1px solid #c9d1da}

/* tabla indicatorilor */
.board{display:grid;gap:5mm}
.trk{border:1.5px solid var(--navy);border-radius:3mm;padding:4mm 5mm}
.trk .tn{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--cond);font-stretch:condensed;font-size:13pt;color:var(--navy);margin-bottom:2mm}
.trk .tn small{font-family:var(--sans);font-size:8pt;color:#5a6a85}
.cells{display:grid;grid-template-columns:repeat(11,1fr);gap:1.5mm}
.cells i{aspect-ratio:1;border:1px solid #b9c5d4;border-radius:1.5mm;display:grid;place-items:center;font-size:8pt;color:#8a97ab;font-style:normal}
.cells i.mid{border-color:var(--navy);border-width:2px;color:var(--navy);font-weight:700}
.cells i.hi{background:#eefaf2}.cells i.lo{background:#fdeef3}
.eco .cells i.hi,.eco .cells i.lo{background:#fff}

/* harta și vălurile */
.mapbox{position:relative;width:100%;aspect-ratio:1200/760;border:2px solid var(--navy);border-radius:3mm;overflow:hidden}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.veil{position:absolute;border:2px dashed #8a97ab;background:#e3e7ec;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1mm;text-align:center;padding:2mm}
.veil .vn{font-family:var(--cond);font-stretch:condensed;font-size:9pt;color:#4a5568}
.veilsheet{display:flex;flex-wrap:wrap;gap:6mm;align-items:flex-start}
.vcard{border:2px dashed #8a97ab;background:#e3e7ec;padding:3mm;display:flex;flex-direction:column;gap:1.5mm;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.eco .vcard,.eco .veil{background:#fff}
.vcard .vloc{font-family:var(--cond);font-stretch:condensed;font-size:11pt;color:var(--navy);line-height:1.05}
.vcard .vst{display:flex;gap:3mm;flex-wrap:wrap;justify-content:center}
.vcard .stk{font-size:9pt}
.vcard .vs{font-size:6.5pt;color:#5a6a85;line-height:1.2}

/* etichete de tăiat */
.stkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm}
.stkcell{border:1px dashed #c9d1da;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5mm;padding:4mm 2mm;min-height:26mm}
.stkcell .stk{font-size:13pt}
.stkcell .who{font-size:7.5pt;color:#5a6a85}

/* flashcards */
.fc{height:88mm;border:1px dashed #b9c5d4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2mm;padding:5mm;text-align:center;background:#fff}
.fc .band{position:absolute;top:0;left:0;right:0;height:3mm}
.fc.front .w{font-family:var(--cond);font-stretch:condensed;font-weight:800;font-size:17pt;color:var(--navy);line-height:1.05;text-transform:uppercase}
.fc .cod{font-size:7pt;color:#8a97ab}
.fc.back{justify-content:flex-start;text-align:left;gap:1.5mm}
.fc.back .w{font-family:var(--cond);font-stretch:condensed;font-size:12pt;color:var(--mint-d)}
.fc.back .d{font-size:9pt;line-height:1.3}
.fc.back .ex{font-size:8pt;line-height:1.25;color:#4a5568;border-top:1px dashed #c9d1da;padding-top:1.5mm;margin-top:auto}
.fcwrap{position:relative}

/* fișe de facilitare, formulare */
.tbl{width:100%;border-collapse:collapse;font-size:9pt}
.tbl th,.tbl td{border:1px solid #c9d1da;padding:2mm 2.5mm;text-align:left;vertical-align:top}
.tbl th{background:#eef2f7;font-size:8pt;color:#40506b}
.eco .tbl th{background:#fff}
.keybox{border:1.5px solid var(--mint-d);border-radius:3mm;padding:5mm 6mm;margin-bottom:4mm;break-inside:avoid;flex:1;display:flex;flex-direction:column}
.keybox .tbl{margin-top:auto}
.keybox .kh{display:flex;align-items:center;gap:3mm;margin-bottom:2mm}
.keybox .kh .nm{font-family:var(--cond);font-stretch:condensed;font-size:13pt;color:var(--navy)}
.keybox .kh .met{margin-left:auto;font-size:8pt;color:var(--mint-d);font-weight:700}
.keybox .q{font-size:10.5pt;font-weight:600;margin-bottom:2mm}
.keybox ul{margin:0 0 3mm;padding-left:5mm;font-size:9.5pt;line-height:1.4}
.keybox .ok{color:var(--mint-d);font-weight:700}
.keybox .deb{border-left:3px solid var(--gold);padding-left:3mm;font-size:9.5pt;color:#6b5200}
.form-lines{display:flex;flex-direction:column;gap:7mm;margin-top:3mm}
.form-lines i{display:block;border-bottom:1px solid #c9d1da}
.scalebox{display:flex;gap:2mm}
.scalebox span{border:1px solid #b9c5d4;border-radius:1.5mm;padding:1mm 2.5mm;font-size:8pt;color:#5a6a85}
/* legenda vizuală */
.legp{border:3px solid var(--navy);border-radius:4mm;padding:8mm 10mm;flex:1;display:flex;flex-direction:column;gap:4mm}
.legp .lh{font-size:15pt;font-weight:800;color:var(--navy);line-height:1.25}
.legrow{display:grid;grid-template-columns:42mm 1fr;gap:5mm;align-items:center;border-bottom:1px solid #dfe6ef;padding-bottom:3.5mm}
.legrow:last-of-type{border-bottom:0}
.legrow .d{display:flex;align-items:center;justify-content:center;gap:2mm}
.legrow .w b{display:block;font-family:var(--cond);font-stretch:condensed;font-size:13pt;color:var(--navy);line-height:1.1}
.legrow .w span{font-size:9.5pt;line-height:1.3}
.legrow .sw{width:11mm;height:11mm;border-radius:2mm}
.legrow .sw.pink{background:var(--warn)}.legrow .sw.mint{background:var(--mint)}
.eco .legrow .sw{border:2px solid var(--navy)}
.legrow .ms{display:flex;flex-direction:column;gap:1mm;width:26mm}
.legrow .ms i{height:3mm;border-radius:1mm;background:var(--paper);border:1px solid var(--paper-edge);display:block}
.legrow .ms i:nth-child(2){margin-left:20%}.legrow .ms i:nth-child(3){margin-left:40%}
.legrow .ms i:nth-child(4){margin-left:60%;background:var(--warn);border-color:#c24b5f}
.legrow .way{display:flex;align-items:center;gap:1.5mm;flex-wrap:wrap}
.legrow .way span{background:var(--mint);color:var(--mint-ink);border-radius:99px;padding:1mm 3mm;font-weight:800;font-size:8.5pt}
.eco .legrow .way span{background:#fff;border:1.5px solid var(--mint-d);color:var(--navy)}
.legrow .way b{color:var(--mint-d)}
.poster-rules{border:3px solid var(--navy);border-radius:4mm;padding:8mm 10mm;flex:1;display:flex;flex-direction:column;gap:3mm}
.poster-rules .gold{font-size:15pt;font-weight:800;color:var(--navy);line-height:1.3}
.poster-rules ol{margin:0;padding-left:6mm}
.poster-rules li{font-size:11.5pt;margin-bottom:2.5mm;line-height:1.3}
.psteps{display:flex;gap:3mm;flex-wrap:wrap;margin-top:auto}
.psteps span{border:2px solid var(--navy);border-radius:99px;padding:1.5mm 4mm;font-weight:600;font-size:10pt;color:var(--navy)}
.psteps b{display:inline-grid;place-items:center;width:6mm;height:6mm;border-radius:50%;background:var(--navy);color:#fff;font-size:8pt;margin-right:1.5mm}
.acord-lines{display:flex;flex-direction:column;gap:9mm;margin-top:4mm;flex:1}
.acord-lines div{display:flex;align-items:flex-end;gap:3mm}
.acord-lines .n{font-family:var(--cond);font-stretch:condensed;font-size:15pt;color:var(--mint-d)}
.acord-lines i{flex:1;border-bottom:1.5px solid #c9d1da}
.big-q{font-size:12pt;line-height:1.35}

@media print{
  body{background:#fff}
  .side,.prevhead,.foot,.logos{display:none !important}
  .app{display:block;padding:0;max-width:none}
  #out{display:block}
  .sheet{width:auto;min-height:auto;height:auto;padding:0;box-shadow:none;break-after:page;page-break-after:always}
  .sheet:last-child{break-after:auto;page-break-after:auto}
  @page{size:A4 portrait;margin:10mm}
  @page land{size:A4 landscape;margin:10mm}
  .sheet.land{width:auto;max-height:190mm;page:land}
}
