.root{
}
:root{--bg-1:#0b0d0f;--bg-2:#141617;--card:#e3dfda;--pane:#efede9;--muted:#5b5956;--accent:#b08a00;--accent-2:#8a6500;--text:#1f1f1e}
*{box-sizing:border-box;font-family:Inter,system-ui,Arial,sans-serif}
html,body{min-height:100%;margin:0;background:var(--bg-2);color:var(--text);padding-bottom:0}
.card{max-width:1100px;margin:28px auto;padding:22px;border-radius:12px;background:var(--card);box-shadow:0 6px 18px rgba(2,6,10,0.30)}
h1{margin:0 0 4px;font-size:20px;text-align:center}
.card > h1{ text-align:center }
.lead{color:var(--muted);margin:0 0 14px;text-align:center}
.controls{display:flex;flex-direction:column;gap:12px;align-items:center}
.controls .row{display:flex;gap:12px;align-items:center;justify-content:center}
.sliderRow{flex-direction:column;align-items:center;width:100%;max-width:800px}
.sliderRow .wide{width:100%}
.file{display:block}
.file .fileRow{display:flex;gap:10px;align-items:center;justify-content:center}
.fileName{color:var(--muted);font-size:13px}
.file input[type=file]{display:none}

.browse-btn{ -webkit-appearance:none; appearance:none; outline:none }
.browse-btn.primary{ background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;font-family:inherit }
label{font-size:13px;color:var(--muted)}
input[type=file]{margin-top:8px}
.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
.primary:disabled{opacity:0.6}
input[type=number]{padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent;color:inherit}

select{padding:8px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:var(--pane);color:var(--text);box-shadow:0 6px 18px rgba(16,16,16,0.04);appearance:none;-webkit-appearance:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
select:focus{outline:none;box-shadow:0 10px 30px rgba(16,16,16,0.07);transform:translateY(-2px)}
select option{color:var(--text);background:var(--pane)}
.primary:disabled{opacity:0.6}
.sliderRow{flex-direction:column;align-items:center}
.sliderLabel{font-size:13px;color:var(--muted);text-align:center;margin-bottom:6px}
.wide{width:100%;-webkit-appearance:none;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(176,138,0,0.95),rgba(138,101,0,0.9));outline:none}
.sliderMeta{font-size:13px;color:var(--muted);margin-top:6px;text-align:center}
.options{display:flex;gap:12px;align-items:center}
.small{font-size:13px;color:var(--muted)}
.controls .row label select{min-width:140px}
.preview{display:flex;gap:18px;margin-top:18px;align-items:stretch}
.pane{flex:1;min-width:300px;background:var(--pane);padding:16px;border-radius:10px;display:flex;flex-direction:column;min-height:420px;border:1px solid rgba(0,0,0,0.04)}
.pane h3{margin:0 0 8px;font-size:15px}
.canvas{width:100%;height:auto;border-radius:6px;background:#f6f5f3;max-height:80vh}
canvas{width:100%;height:auto;border-radius:6px;background:#f6f5f3;max-height:80vh}
.info{margin-top:8px;font-size:13px;color:var(--muted)}
.stats{margin-top:10px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.stats .row{display:flex;justify-content:space-between;gap:8px}
.meta{margin-top:10px;background:#f2f1ef;padding:10px;border-radius:8px;color:var(--text);overflow:auto;white-space:pre-wrap;max-height:200px;border:1px solid rgba(0,0,0,0.03)}

.controls .row label{position:relative}
.controls .row label select{z-index:5}
.metaLabel{font-size:12px;color:var(--muted);margin-top:10px}
.btn{display:inline-block;margin-top:8px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,0.03);color:var(--muted);text-decoration:none}
.actions{display:flex;justify-content:flex-end;margin-top:14px;gap:12px;align-items:center}
.actions .primary{padding:10px 16px}
.actions .primary:disabled{opacity:0.5}
.note{margin-top:14px;color:var(--muted);font-size:13px}
@media (max-width:900px){.preview{flex-direction:column}.controls .row{flex-direction:column;align-items:stretch}.options{flex-direction:column;align-items:flex-start}}

.info-grid{display:flex;gap:18px;margin-top:18px;align-items:stretch}
.info-pane{flex:1;min-width:260px;background:var(--pane);padding:16px;border-radius:10px;display:flex;flex-direction:column}
.info-pane h3{margin:0 0 8px;font-size:15px}
.feature-list{list-style:none;padding:0;margin:8px 0 0;color:var(--muted);font-size:14px}
.feature-list.compact{display:grid;grid-template-columns:1fr;gap:8px}
.feature-list li{position:relative;padding-left:26px;margin:6px 0}
.feature-list li::before{content:'';position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.about-pane{padding-bottom:8px}

@media (max-width:900px){.actions{justify-content:center}.info-grid{flex-direction:column}}

.info-row{margin-top:18px}
.info-row .info-pane{width:100%}

.site-footer{max-width:1100px;margin:28px auto 28px auto;padding:10px;border-radius:10px;background:var(--card);box-shadow:0 6px 18px rgba(2,6,10,0.12)}
.site-footer .footer-inner{text-align:center;color:var(--muted);font-size:13px}