:root{--navy:#1d3557;--navy-dark:#14243d;--gold:#d4a017;--gold-light:#f1c40f;--bg:#f4f6f9;--panel:#fff;--border:#dde3ec;--text:#1c2331;--text-muted:#6b7688;--danger:#c0392b;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}#app{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--navy);color:#fff;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;display:flex;box-shadow:0 2px 6px #00000026}.brand{align-items:center;gap:.6rem;font-size:1.1rem;font-weight:600;display:flex}.tabs{gap:.5rem;display:flex}.tab-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff4d;border-radius:6px;padding:.5rem 1rem;font-size:.95rem}.tab-btn.active{background:var(--gold);border-color:var(--gold);color:var(--navy-dark);font-weight:600}main#view{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1.5rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1.5rem}.panel+.panel{margin-top:1.5rem}.panel-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.panel-header>div{gap:.5rem;display:flex}h2{margin:0 0 .5rem}h3{color:var(--navy);margin:1.25rem 0 .5rem}.empty-hint{color:var(--text-muted);text-align:center;padding:2rem 0}.hint{color:var(--text-muted);font-size:.9rem}.hint-inline{color:var(--text-muted);margin-top:.25rem;font-size:.85rem}.btn{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#fff;border-radius:6px;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.95rem;display:inline-flex}.btn:hover{border-color:var(--navy)}.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}.btn-primary:hover{background:var(--navy-dark)}.btn-danger{color:var(--danger);border-color:var(--danger)}.btn-danger:hover{background:var(--danger);color:#fff}.btn-small{padding:.3rem .6rem;font-size:.85rem}.template-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;display:grid}.template-card{border:1px solid var(--border);cursor:pointer;background:#fafbfc;border-radius:8px;transition:box-shadow .15s,transform .15s;overflow:hidden}.template-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.template-card img{object-fit:cover;background:#eee;width:100%;height:140px;display:block}.template-card-name{padding:.6rem .75rem .1rem;font-weight:600}.template-card-meta{color:var(--text-muted);padding:0 .75rem .6rem;font-size:.85rem}.page-picker-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;display:grid}.page-picker-card{border:1px solid var(--border);cursor:pointer;text-align:center;background:#fafbfc;border-radius:8px;transition:box-shadow .15s,transform .15s,opacity .15s;overflow:hidden}.page-picker-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.page-picker-card.loading{opacity:.5;pointer-events:none}.page-picker-card img{background:#eee;width:100%;display:block}.page-picker-card div{padding:.5rem;font-size:.9rem;font-weight:600}.crop-wrap{border-radius:6px;max-width:100%;line-height:0;display:inline-block;position:relative;overflow:hidden}.crop-wrap img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;max-width:100%;height:auto;display:block}.crop-rect{border:2px solid var(--gold-light);cursor:move;position:absolute;box-shadow:0 0 0 9999px #0a0f198c}.crop-handle{background:var(--gold-light);border:1px solid var(--navy-dark);border-radius:2px;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%)}.crop-handle.n{cursor:ns-resize;top:0;left:50%}.crop-handle.s{cursor:ns-resize;top:100%;left:50%}.crop-handle.e{cursor:ew-resize;top:50%;left:100%}.crop-handle.w{cursor:ew-resize;top:50%;left:0}.crop-handle.nw{cursor:nwse-resize;top:0;left:0}.crop-handle.se{cursor:nwse-resize;top:100%;left:100%}.crop-handle.ne{cursor:nesw-resize;top:0;left:100%}.crop-handle.sw{cursor:nesw-resize;top:100%;left:0}.editor-layout{grid-template-columns:1fr 340px;align-items:start;gap:1.5rem;display:grid}.editor-main{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1.25rem}.editor-toolbar{align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.tpl-name-input{border:1px solid #0000;border-radius:6px;flex:1;max-width:400px;padding:.3rem .5rem;font-size:1.1rem;font-weight:600}.tpl-name-input:hover,.tpl-name-input:focus{border-color:var(--border);outline:none}.spacer{flex:1}.canvas-wrap{background:repeating-conic-gradient(#eef1f5 0% 25%,#fff 0% 50%) 0 0/20px 20px;border-radius:8px;justify-content:center;width:100%;padding:.5rem;display:flex}.canvas-wrap canvas{cursor:crosshair;max-width:100%;height:auto;box-shadow:0 2px 10px #00000026}.editor-sidebar{flex-direction:column;gap:1.25rem;display:flex}.sidebar-section{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:1.1rem}.sidebar-header{justify-content:space-between;align-items:center;display:flex}.sidebar-header h3{margin:0}.field-row{border-radius:6px;align-items:center;gap:.5rem;padding:.5rem .6rem;font-size:.9rem;display:flex}.field-row-label{cursor:pointer;flex:1}.field-align-check{cursor:pointer;flex-shrink:0}.field-row:hover{background:var(--bg)}.field-row.selected{background:#eaf0fb;font-weight:600}.field-row em{color:var(--gold);font-size:.8rem;font-style:normal}#align-toolbar{border-top:1px solid var(--border);margin-top:.75rem;padding-top:.75rem}.align-btn-row{gap:.5rem;margin-top:.4rem;display:flex}.align-btn-row .btn{flex:1}.form-label{color:var(--text-muted);flex-direction:column;gap:.25rem;margin-bottom:.75rem;font-size:.85rem;display:flex}.form-label input:disabled{background:var(--bg);color:var(--text-muted);cursor:not-allowed}.form-label input,.form-label select,textarea{border:1px solid var(--border);color:var(--text);border-radius:6px;padding:.4rem .5rem;font-family:inherit;font-size:.95rem}.form-row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.checkbox-label{align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.9rem;display:flex}textarea{resize:vertical;width:100%;font-family:Consolas,monospace}.generate-layout{grid-template-columns:1fr 1fr;align-items:start;gap:1.5rem;display:grid}.actions-row{gap:.75rem;margin-top:1rem;display:flex}#gen-status{color:var(--text-muted);margin-top:.75rem;font-size:.9rem}.thumb-strip{flex-wrap:wrap;gap:.5rem;max-height:200px;margin-top:1rem;display:flex;overflow-y:auto}.thumb{border:1px solid var(--border);border-radius:4px;height:80px}@media (width<=900px){.editor-layout,.generate-layout{grid-template-columns:1fr}}