@import url('framework-tokens.css');
:root{--red:#dd001b;--red2:#f20a22;--green:#087e2b;--green2:#005c1b;--paper:#fafafa;--line:#dce2e6;--muted:#64717b;--ink:#20292d;--shadow:0 3px 15px rgba(18,29,37,.065)}
*{box-sizing:border-box}html,body{margin:0;background:#f5f7f8;color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}input,select,textarea{border:1px solid #c4cdd3;border-radius:7px;background:white;padding:10px 11px;min-height:39px;outline:none;width:100%;color:var(--ink)}input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 2px #daf6e2}input[readonly]{background:#f4f6f7}textarea{resize:vertical}label{font-weight:650;font-size:12px}h1,h2,h3{margin:0}h1{font-size:25px}h2{font-size:17px}h3{font-size:14px}.muted,.small{color:var(--muted)}.small{font-size:12px}.subtle{color:#078137;font-weight:700}.grow{flex:1}hr{border:0;border-top:1px solid #d5dce1;margin:18px 0}.inline{display:flex;align-items:center;gap:10px}.inline input{width:auto;min-height:0}.btn{border:1px solid transparent;border-radius:7px;min-height:39px;padding:8px 14px;font-size:13px;font-weight:750;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:white;box-shadow:0 1px 3px rgba(10,25,25,.08)}.btn:hover{filter:brightness(.96)}.btn.red{background:linear-gradient(110deg,#ef071d,#d90824);color:white}.btn.green{background:linear-gradient(110deg,#16893a,#00641b);color:white}.btn.primary{background:var(--green);color:white}.btn.light{border-color:#b6c2c9;color:#2b353a}.btn.compact{min-height:33px}.topbar{height:70px;background:white;border-bottom:1px solid #dbe1e6;display:flex;align-items:center;justify-content:space-between;padding:8px 32px;gap:20px}.brand{display:flex;align-items:center;min-width:0;gap:22px}.brand img{width:auto;max-width:190px;height:52px;object-fit:contain}.brand-divider{width:2px;height:39px;background:#344047;opacity:.55}.app-title{font-size:27px;font-weight:900;letter-spacing:-1.1px;white-space:nowrap}.app-title small{font-size:11px;font-weight:600;letter-spacing:0;color:#6b767e}.top-actions{display:flex;align-items:center;gap:21px}.user-tag{font-weight:700}.navbar{display:flex;align-items:center;height:62px;background:white;border-bottom:3px solid #0a7d29;gap:5px;padding:7px 22px;overflow-x:auto}.navtab{border:0;background:transparent;border-radius:7px;min-height:43px;padding:0 15px;color:#2a3338;white-space:nowrap;font-size:14px;font-weight:750;display:flex;align-items:center;gap:8px}.navtab.active{background:linear-gradient(#008c2d,#005d1b);color:white;box-shadow:0 2px 4px #064f1c25}.saved-state{font-size:12px;color:#0d8b37;font-weight:700;white-space:nowrap;margin:0 13px}.studio-layout{display:grid;grid-template-columns:minmax(290px,335px) minmax(360px,1fr) minmax(315px,370px);gap:8px;max-width:2000px;margin:10px auto 0;min-height:calc(100vh - 203px);padding:0 10px}.side{background:white;border:1px solid #dce2e6;border-radius:14px;padding:12px;min-height:600px;box-shadow:var(--shadow);overflow:hidden}.panel-heading{color:white;border-radius:9px;padding:13px 15px;font-size:17px;font-weight:800;margin-bottom:14px}.panel-heading.red{background:linear-gradient(100deg,#fa031d,#dc001a)}.panel-heading.green{background:linear-gradient(100deg,#005e22,#168c35)}.form-scroll,.right-scroll{overflow:auto;max-height:calc(100vh - 235px);scrollbar-width:thin;padding:2px 2px 12px}.form-line{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 11px}.form-line label{line-height:1.3}.form-line input,.form-line select,.form-line textarea{min-width:0}.section-label{font-size:12px;font-weight:900;color:#596872;letter-spacing:.5px;margin:14px 0}.switch-line{display:flex;align-items:center;justify-content:space-between;margin:13px 0}.switch-line input{width:22px;height:22px;min-height:0}.comparison-box{background:#f7faf7;border:1px solid #d8e7d9;border-radius:8px;padding:11px 9px}.comparison-box[hidden]{display:none}.comparison-box .form-line{display:block}.comparison-box .form-line label{display:block;margin-bottom:4px}.comparison-box .btn{width:100%;margin:10px 0}.bottom-actions{display:flex;gap:8px;position:sticky;bottom:0;background:white;padding:8px 0 0}.canvas-column{min-width:0;border:1px solid #dbe2e6;background:#f1f3f5;display:flex;flex-direction:column;box-shadow:var(--shadow)}.canvas-toolbar{height:58px;min-height:58px;background:white;display:flex;align-items:center;padding:7px 15px;gap:12px;border-bottom:1px solid #dce2e6}.tool{border:0;background:white;color:#263038;min-height:36px;border-radius:5px;padding:7px 10px;font-size:19px;white-space:nowrap}.tool:hover{background:#eff2f3}.sep{height:27px;width:1px;background:#d6dce0}.canvas-toolbar select{width:auto;min-height:36px}.canvas-wrap{background-color:#f6f7f8;background-image:linear-gradient(45deg,#e4e9ec 25%,transparent 25%),linear-gradient(-45deg,#e4e9ec 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e9ec 75%),linear-gradient(-45deg,transparent 75%,#e4e9ec 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 17px;min-height:450px}#tileCanvas{background:white;display:block;width:min(100%,640px);height:auto;object-fit:contain;box-shadow:0 8px 22px rgba(0,0,0,.13);touch-action:none;cursor:move}#tileCanvas.selected{outline:3px solid #3493f1}.canvas-bottom{background:white;min-height:41px;padding:10px 13px;display:flex;justify-content:space-between;gap:12px;color:#66747e;font-size:11px}.right-side .right-scroll{padding:0 2px}.search-row{display:flex;gap:8px;margin:0 0 12px}.search-row input{flex:1;min-width:0}.image-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:136px}.image-candidate{background:#f9fafb;border:1px solid #cdd5d9;border-radius:8px;min-height:125px;padding:6px;cursor:pointer;position:relative;text-align:center}.image-candidate.selected{outline:3px solid #168c35}.image-candidate img{max-width:100%;height:107px;object-fit:contain}.image-candidate small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-actions{display:flex;gap:8px;margin:13px 0}.image-actions .btn{flex:1;min-width:0}.image-approved{background:#e7f8e8;border:1px solid #cceacc;border-radius:8px;padding:12px;margin:10px 0;color:#155e28;font-weight:750;font-size:12px}.image-approved.no{background:#fff8e6;border-color:#f4ddac;color:#916121}.layer-title{margin-top:18px;margin-bottom:8px}.layer-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e0e5e8;padding:9px;gap:9px;font-size:12px;cursor:pointer}.layer-row:hover{background:#f4f6f7}.layer-row.selected{background:#e5f0ff;box-shadow:inset 3px 0 #378be7}.layer-row button{background:none;border:0;font-size:18px;color:#415258}.layer-controls{margin-top:14px}.layer-controls .form-line{grid-template-columns:80px 1fr}.layer-controls input{min-height:20px;padding:0}.subview{max-width:1330px;margin:20px auto 40px;padding:12px 22px;min-height:500px}.sub-title{display:flex;align-items:baseline;justify-content:space-between;margin:8px 0 24px}.card{background:white;border:1px solid #dce2e6;border-radius:12px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.stat-value{font-size:34px;font-weight:900;color:#086a2b}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:12px 9px;border-bottom:1px solid #e3e8eb;text-align:left}th{color:#43515a;background:#f4f8f7}tr:hover td{background:#fbfcfc}.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}.filters input,.filters select{width:auto;min-width:160px}.check{font-size:12px;padding:8px;background:#f5f7f9;border-radius:7px}.check.yes{color:#087c32}.check.no{color:#d01827}.app-footer{border-top:1px solid #d6dee2;background:white;color:#64707b;padding:13px 24px;display:flex;justify-content:space-between;font-size:11px}.login-background{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at top left,#dbeede,#f8f8f9 66%);padding:25px}.auth-card{background:white;border:1px solid #dce2e6;border-radius:16px;box-shadow:0 18px 80px #1b403220;padding:28px 35px;max-width:490px;width:100%}.auth-logo{max-height:104px;max-width:200px;object-fit:contain;display:block;margin:0 0 16px}.auth-card h1{font-size:25px}.auth-card form{display:grid;gap:12px;margin-top:20px}.auth-card label{display:grid;gap:6px}.preflight{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.mini-footer{color:#67737a;margin-top:24px;font-size:11px}.alert{padding:12px;border-radius:7px;margin:14px 0}.alert.danger{background:#ffeded;color:#9e1822}.alert.good{background:#e6f9e9;color:#16682a}.toast{position:fixed;z-index:100;bottom:26px;right:26px;max-width:440px;background:#17362a;color:white;padding:12px 19px;border-radius:10px;box-shadow:0 9px 35px #0004;display:none}.toast.error{background:#aa1424}.modal-shade{position:fixed;z-index:90;inset:0;background:#0c2025bb;display:grid;place-items:center;padding:20px}.modal-shade[hidden]{display:none}.modal{background:white;border-radius:11px;padding:22px;max-height:94vh;overflow:auto;width:min(96vw,800px)}.modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.modal img{display:block;max-width:100%;max-height:75vh;margin:auto;object-fit:contain}.pill{font-size:11px;font-weight:750;border-radius:50px;padding:5px 9px;background:#e8f3e9;color:#176a2c}.pill.warn{background:#fff5dc;color:#875b05}.action-buttons{display:flex;gap:7px;flex-wrap:wrap}.file-button{position:relative}.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}.item-card{background:white;border:1px solid #dde3e7;border-radius:10px;padding:12px}.item-card img{width:100%;height:125px;object-fit:contain}.toolbar-line{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 17px}
@media(max-width:1280px){.studio-layout{grid-template-columns:270px minmax(300px,1fr) 300px;padding:0 6px}.form-line{grid-template-columns:88px 1fr;gap:6px}.brand img{max-width:145px}.app-title{font-size:22px}.navtab{padding:0 10px;font-size:12px}.topbar{padding:7px 14px}}
@media(max-width:1020px){.studio-layout{grid-template-columns:280px 1fr}.right-side{grid-column:1/-1}.right-side .right-scroll{max-height:none}.image-grid{grid-template-columns:repeat(4,1fr)}.form-scroll{max-height:none}.top-actions .subtle{display:none}.canvas-wrap{min-height:470px}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.studio-layout{display:flex;flex-direction:column}.topbar{height:auto;padding:9px 12px}.brand{gap:10px}.brand img{max-width:100px;max-height:48px}.brand-divider{height:28px}.app-title{font-size:14px;letter-spacing:0}.app-title small{display:none}.top-actions .user-tag{display:none}.navbar{padding:5px;height:auto;min-height:58px}.navtab{font-size:12px}.navbar .saved-state{display:none}.canvas-column{order:0}.left-side{order:1}.right-side{order:2}.canvas-wrap{padding:15px 8px;min-height:330px}.form-scroll{max-height:none}.right-scroll{max-height:none}.canvas-bottom{display:none}.image-grid{grid-template-columns:repeat(2,1fr)}.canvas-toolbar{gap:5px;padding:5px}.canvas-toolbar .tool{font-size:14px;padding:5px}.canvas-toolbar .tool:nth-of-type(n+4){display:none}.app-footer span{display:none}.cards{grid-template-columns:1fr}.auth-card{padding:22px}.subview{padding:10px}}

[hidden]{display:none!important}