:root{--g:#12391f;--g2:#1f5630;--c:#fbf4e9;--l:#d6bd9e;--b:#b88a4a;--t:#2f241c;--r:#b13b2e;--a:#986816}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#f6ead8,#fff);color:var(--t)}
.topnote{position:static;background:var(--g);color:#fff;text-align:center;padding:8px 10px;font-size:13px}.app{max-width:980px;margin:auto;padding:14px 10px 28px}
.hero,.panel{background:var(--c);border:1px solid var(--l);border-radius:22px;padding:18px;box-shadow:0 12px 32px rgba(38,28,18,.10);margin-bottom:12px}.kicker{color:var(--b);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin:0 0 4px}h1,h2{font-family:Georgia,'Times New Roman',serif;color:var(--g);line-height:1.12}h1{font-size:34px;margin:4px 0 7px}h2{font-size:24px;margin:0 0 9px}.lead{font-size:17px;line-height:1.4;margin:0}
.actions,.bottom{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.btn{border:0;border-radius:999px;padding:11px 15px;font-weight:800;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block}.primary{background:var(--g);color:#fff}.primary:hover{background:var(--g2)}.secondary{background:#fff;color:var(--g);border:1px solid var(--l)}.small{font-size:13px;padding:7px 10px}.wide{width:100%;margin-top:8px}
.stepbar{display:flex;justify-content:space-between;font-weight:800;color:var(--g);font-size:14px}.bar{height:7px;background:#eadac4;border-radius:999px;overflow:hidden;margin:7px 0 11px}.bar div{height:100%;background:var(--g);width:0;transition:.25s}.step{display:none}.step.active{display:block}.hint{background:#fff;border:1px solid var(--l);border-radius:14px;padding:10px 12px;margin-bottom:10px;line-height:1.35;font-size:15px}
.tablet{background:#111;border-radius:24px;padding:10px;max-width:720px;margin:auto}.tabletTop{background:#0b0b0b;color:#eee;text-align:center;border-radius:16px 16px 0 0;padding:8px;font-size:13px}.screen{background:var(--c);border-radius:0 0 16px 16px;min-height:340px;padding:18px}.screen.compact{min-height:0}.center{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:12px}.mini div,.card{background:#fff;border:1px solid var(--l);border-radius:13px;padding:11px;font-weight:700}#badge{background:#e8e8e8;border-radius:999px;padding:4px 10px}#badge.on{background:#dcefdc;color:#18521e;font-weight:800}
.spinner{width:46px;height:46px;border:5px solid #eadac4;border-top-color:var(--g);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tile{background:#fff;border:1px solid var(--l);border-radius:14px;padding:12px;text-align:left;font-weight:800}.tile.sel{outline:3px solid rgba(184,138,74,.25);border-color:var(--b)}
textarea{width:100%;font:inherit;border:1px solid var(--l);border-radius:12px;padding:9px;background:#fff}.field b{display:block;margin-bottom:5px;color:var(--g)}.range{background:#fff;border:1px solid var(--l);border-radius:12px;padding:10px;margin:9px 0}.range input{width:100%;accent-color:var(--g)}.range div:last-child{display:flex;justify-content:space-between;color:#6b5d50;font-size:12px}.checks{display:grid;gap:6px;background:#fff;border:1px solid var(--l);border-radius:12px;padding:10px;font-size:14px}
details,.consent{display:block;background:#fff;border:1px solid var(--l);border-radius:12px;padding:10px;margin-bottom:10px}.consent{background:#f6ead8;line-height:1.35}summary{font-weight:800;color:var(--g);cursor:pointer}canvas{display:block;width:100%;height:118px;background:#fff;border:1px dashed var(--b);border-radius:12px;touch-action:none;margin-top:6px}.err{background:var(--r);color:white;border-radius:10px;padding:8px;margin-top:8px}.hide{display:none}
.risks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.risk{background:#fff;border-left:5px solid var(--g);border-radius:12px;padding:10px;line-height:1.3}.risk b{display:block}.risk.red{border-color:var(--r)}.risk.amber{border-color:var(--a)}.thai{background:#fff7e9;border:1px solid var(--l);border-radius:12px;padding:10px;margin-top:8px}.check{width:66px;height:66px;border-radius:50%;background:var(--g);color:#fff;font-size:44px;line-height:66px}
@media(max-width:680px){
  .app{padding:8px 7px 18px}.hero{padding:13px;border-radius:16px}.panel{padding:9px;border-radius:16px}
  .hero .lead{font-size:14px}.kicker{font-size:11px}h1{font-size:24px}h2{font-size:19px}
  .actions,.bottom{gap:7px;margin-top:10px}.btn{width:100%;text-align:center;padding:10px 12px;font-size:14px}
  .hint{font-size:14px;padding:8px 9px;margin-bottom:7px}.tablet{background:transparent;padding:0;border-radius:0}.tabletTop{border-radius:13px 13px 0 0;padding:7px}.screen{min-height:0;padding:11px;border:1px solid var(--l);border-top:0}
  .mini,.grid,.risks{grid-template-columns:1fr}.mini div,.card{padding:8px}.range{padding:8px;margin:7px 0}.checks{font-size:13px;padding:8px}
  details,.consent{padding:8px;font-size:13px}canvas{height:96px}.topnote{font-size:12px;padding:7px 6px}
}

.filmgrid{display:grid;grid-template-columns:1fr minmax(320px,630px);gap:12px;align-items:stretch}.caption{background:#fff;border:1px solid var(--l);border-radius:16px;padding:16px}.caption p{font-size:16px;line-height:1.4}.badge{background:#dcefdc;color:#18521e;border-radius:999px;padding:4px 10px;font-weight:800}.signatureDemo{height:90px;background:#fff;border:1px dashed var(--b);border-radius:12px;position:relative}.signatureDemo:after{content:'J. Demo';position:absolute;left:95px;top:23px;font-family:Georgia,'Times New Roman',serif;font-size:30px;color:var(--g);transform:rotate(-5deg)}@media(max-width:760px){.filmgrid{grid-template-columns:1fr}.caption{order:1;padding:10px}.tablet{order:2}.caption p{font-size:14px}}