/* kokeen-luominen-ohje: sivun omat sisältötyylit (pienoismallit). Poistuvat, kun pienoismallit korvataan kaappauksilla. */
:root{--amber:#d97706; --amber-dark:#b45309; --orange:#f59e0b; --violet:#7c3aed; --violet-bg:#faf5ff; --violet-line:#c4b5fd; --ink:#1e293b; --muted:#475569; --soft:#64748b; --faint:#94a3b8; --line:#e2e8f0; --line2:#cbd5e1; --card:#fafbfc; --head:#f1f5f9; --help-bg:#fffbeb; --help-line:#fbbf24; --help-ink:#92400e; --warn-bg:#fef3c7; --warn-line:#f59e0b; --warn-ink:#92400e; --req:#dc2626}
h3.sub{font-size:1.12em; margin:26px 0 8px; color:var(--ink)}
.callout{background:var(--help-bg); border-left:4px solid var(--help-line); color:var(--help-ink); padding:12px 16px; border-radius:8px; margin:16px 0; font-size:.95em;}
.callout.warn{background:var(--warn-bg); border-left-color:var(--warn-line); color:var(--warn-ink)}
.callout.vio{background:var(--violet-bg); border-left-color:var(--violet); color:#5b21b6}
ul.clean{margin:10px 0; padding-left:22px}
ul.clean li{margin:6px 0}
.path{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:14px 0; font-size:.92em}
.path .crumb{background:#fff; border:1px solid var(--line2); border-radius:8px; padding:6px 12px; font-weight:600; color:var(--muted)}
.path .arr{color:var(--faint); font-weight:700}
.mock{margin:20px 0 8px; border-radius:12px; overflow:hidden; box-shadow:0 14px 34px rgba(15,23,42,.16); border:1px solid var(--line)}
.mock .bar{background:#e9eef5; padding:9px 12px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line)}
.mock .dot{width:11px;height:11px;border-radius:50%}
.mock .dot.r{background:#f87171}
.mock .dot.y{background:#fbbf24}
.mock .dot.g{background:#34d399}
.mock .bar .ttl{margin-left:10px; font-size:.8em; color:var(--soft); font-weight:600}
.app{font-size:14px; color:var(--ink)}
.screen{background:#f4f6fb; padding:16px 18px}
.btn{border:1px solid transparent; border-radius:7px; padding:8px 14px; font-weight:600; font-size:.85em; display:inline-flex; align-items:center; gap:6px; cursor:default; white-space:nowrap}
.btn.amber{background:var(--orange); color:#fff}
.btn.ghost{background:#fff; border-color:var(--line); color:#334155}
.btn.danger{background:#fee2e2; border-color:#fecaca; color:#b91c1c}
.btn.add{background:#fff7ed; border:1px solid #fed7aa; color:#c2410c}
.btn.vio{background:#fff; border:1px solid var(--violet-line); color:var(--violet)}
.split{display:grid; grid-template-columns:1fr 1.1fr; gap:14px}
@media(max-width:720px){
.split{grid-template-columns:1fr}
}
.pane{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.pane h4{margin:0 0 4px; font-size:1.05em}
.points{display:inline-block; background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; font-weight:700; border-radius:8px; padding:4px 11px; font-size:.84em; margin-bottom:10px}
.fg{margin-bottom:10px}
.fg label{display:block; font-size:.8em; font-weight:600; color:var(--muted); margin-bottom:3px}
.inp{width:100%; padding:7px 10px; border:1px solid var(--line2); border-radius:7px; font-size:.88em; background:#fff; color:var(--ink)}
.inp.ph{color:var(--faint)}
.inp.area{min-height:40px}
.inp.sel{display:flex; justify-content:space-between; align-items:center}
.chkrow{display:flex; align-items:center; gap:8px; font-size:.85em; color:var(--muted); margin-bottom:8px}
.chk{display:inline-flex; align-items:center; gap:6px}
.box{width:15px;height:15px;border:1px solid var(--line2);border-radius:3px;display:inline-block;position:relative;background:#fff}
.box.x{background:var(--orange);border-color:var(--orange)}
.box.x::after{content:"✓";color:#fff;font-size:11px;position:absolute;top:-2px;left:1px}
.box.v{background:var(--violet);border-color:var(--violet)}
.box.v::after{content:"✓";color:#fff;font-size:11px;position:absolute;top:-2px;left:1px}
.smtag{font-size:.72em;font-weight:700;color:#c2410c;background:#fff7ed;border:1px solid #fed7aa;border-radius:5px;padding:1px 6px}
.ppart{margin-bottom:10px}
.ppart h5{margin:0 0 6px; font-size:.9em; color:var(--amber-dark); border-bottom:1px solid var(--line); padding-bottom:4px}
.emptyq{font-size:.84em; color:var(--faint); font-style:italic; padding:10px; text-align:center; border:1px dashed var(--line2); border-radius:8px; background:#fafbfc; margin-bottom:8px}
.qtm{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px}
.qtm h4{margin:0 0 12px; font-size:1.05em; text-align:center}
.qtm-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media(max-width:680px){
.qtm-grid{grid-template-columns:repeat(2,1fr)}
}
.qcard{border:1px solid var(--line); border-radius:10px; padding:13px 10px; text-align:center; background:#fff; display:flex; flex-direction:column; gap:5px; align-items:center}
.qcard .qi{font-size:24px; line-height:1}
.qcard .qt{font-weight:700; font-size:.85em; color:var(--ink)}
.qcard .qd{font-size:.74em; color:var(--soft); line-height:1.35}
.qrow{background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px}
.qrow .qh{display:flex; align-items:center; gap:8px; font-size:.9em; font-weight:600}
.qrow .qh .tag{margin-left:auto; font-size:.72em; background:#f1f5f9; border:1px solid var(--line); border-radius:6px; padding:1px 7px; color:var(--soft)}
.vfollow{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line2)}
.vfollow .vadd{width:100%; text-align:center; color:var(--violet); border:1px dashed var(--violet-line); background:var(--violet-bg); border-radius:7px; padding:7px; font-size:.84em; font-weight:600}
.vform{background:var(--violet-bg); border:1px solid var(--violet-line); border-radius:8px; padding:12px}
.vform .vt{font-weight:700; color:var(--violet); margin-bottom:8px; font-size:.9em}
.vform label{display:block; font-size:.78em; color:var(--muted); margin-bottom:4px}
.vform .vmeta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:.82em; color:var(--muted)}
.badgekey{display:inline-flex; align-items:center; gap:6px; font-size:.82em; background:#f1f5f9; border:1px solid var(--line); border-radius:7px; padding:4px 9px; color:var(--muted); font-weight:600; margin:2px 4px 2px 0}
.kbd{font-family:ui-monospace,Menlo,Consolas,monospace; background:#eef2f7; border:1px solid var(--line2); border-radius:5px; padding:1px 7px; font-size:.86em}
ol.clean{margin:10px 0; padding-left:22px}
ol.clean li{margin:6px 0}
.newtag{display:inline-block; font-size:.62em; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:#dcfce7; color:#166534; border:1px solid #bbf7d0; border-radius:6px; padding:2px 7px; margin-left:4px; vertical-align:middle}
.qcard.new{border-color:#fbbf24; box-shadow:0 0 0 2px rgba(251,191,36,.25)}
.form{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.form h4{margin:0 0 6px; font-size:1.02em}
.form .help{font-size:.8em; color:var(--soft); background:#f8fafc; border:1px solid var(--line); border-radius:7px; padding:7px 10px; margin-bottom:10px}
.mediabtns{display:flex; gap:6px; margin:2px 0 5px}
.mbtn{font-size:.74em; border:1px solid var(--line2); background:#fff; border-radius:6px; padding:2px 8px; color:#334155; font-weight:600}
.setitem{border:1px solid var(--line2); border-radius:8px; padding:8px 10px; margin:7px 0; background:#fcfcfd}
.setitem .ih{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; font-size:.84em}
.setitem .ih .inp{flex:1; min-width:160px}
.optrow{display:flex; gap:6px; align-items:center; margin:4px 0; font-size:.82em}
.optrow .inp{flex:1}
.optrow.ok .inp{border-color:#86efac; background:#f0fdf4}
.xbtn{border:1px solid var(--line2); background:#fff; border-radius:6px; padding:1px 7px; color:var(--soft); font-size:.85em}
.mini{font-size:.8em; color:var(--muted); font-weight:600}
.pairrow{display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap; font-size:.84em}
.pairrow .side{flex:1; display:flex; gap:6px; align-items:center; min-width:180px}
.pairrow .side .inp{flex:1}
.thumb{width:40px; height:40px; border-radius:5px; border:1px solid var(--line2); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:22px; background:#fef9c3}
.folderitem{background:#fff; border:1px solid var(--line); border-radius:7px; padding:7px 11px; margin:5px 0; font-size:.86em}
.folderitem.hover{border-color:var(--orange); background:#fff7ed}
.qcardx{background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin-bottom:10px; font-size:.88em}
.qcardx h5{margin:0 0 4px; font-size:1em}
.qcardx .meta{color:var(--soft); font-size:.9em}
.radios{display:flex; gap:16px; flex-wrap:wrap; font-size:.84em; color:var(--muted); margin-bottom:8px}
.radio{display:inline-flex; align-items:center; gap:6px}
.rdot{width:14px; height:14px; border-radius:50%; border:1px solid var(--line2); background:#fff; display:inline-block; position:relative}
.rdot.on{border-color:var(--violet)}
.rdot.on::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--violet)}
.okbox{font-size:.8em; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px; padding:6px 10px; margin-top:8px}
.fubadge{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--violet); font-size:.85em; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line2)}
.fubadge em{color:var(--muted)}
.fubadge .p{margin-left:auto; color:var(--soft); font-size:.9em}
.xp{background:rgba(15,23,42,.82)}
.xp-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 14px; background:#0f172a; color:#fff; font-size:.85em}
.xp-top b{font-size:1.05em}
.xp-top .sub{color:#94a3b8; font-size:.9em}
.xp-top .qi{margin-left:auto; color:#cbd5e1}
.xp-top .chk{color:#e2e8f0}
.xp-top .cls{background:#b91c1c; border-radius:6px; padding:5px 12px; font-weight:600}
.xp-page{background:#f8fafc; padding:16px 18px}
.xp-head{text-align:center; margin-bottom:8px}
.xp-head h4{margin:0; font-size:1.2em}
.xp-head .i{color:var(--soft); font-size:.85em}
.xp-timer{display:inline-block; margin-top:4px; font-family:ui-monospace,Menlo,Consolas,monospace; background:#1e293b; color:#fff; border-radius:7px; padding:3px 12px; font-size:.95em}
.xp-tools{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0 4px}
.xp-tool{background:#fff; border:1px solid var(--line); border-radius:9px; padding:6px 10px; font-size:.76em; color:#334155; font-weight:600}
.xp-note{text-align:center; color:var(--faint); font-size:.74em; margin-bottom:8px}
.xp-nav{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0}
.xp-nav span{min-width:34px; text-align:center; border:1px solid var(--line2); border-radius:7px; padding:3px 7px; font-size:.78em; background:#fff; font-weight:600}
.xp-nav span.cur{background:#2563eb; border-color:#2563eb; color:#fff}
.xp-nav span.ans{background:#dcfce7; border-color:#86efac}
.xp-q{background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:.88em}
.xp-rand{display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:#fdf4ff; border:1px dashed #d8b4fe; color:#6b21a8; border-radius:8px; padding:6px 10px; font-size:.85em; margin-bottom:10px}
.xp-rand .b{border:1px solid #c084fc; background:#fff; border-radius:6px; padding:2px 9px; font-weight:600}
.xp-opt{border:1px solid var(--line2); border-radius:8px; padding:6px 10px; margin:5px 0; background:#fff}
.xp-opt.sel{border-color:#2563eb; background:#eff6ff}
.xp-opt.ok{outline:3px solid #10b981; outline-offset:1px}
.xp-btns{display:flex; gap:8px; margin-top:10px}
.xp-btns span{border:1px solid var(--line2); background:#fff; border-radius:7px; padding:5px 14px; font-size:.82em; font-weight:600}
.xp-btns span.dis{color:var(--faint)}