:root{
  color-scheme:dark;
  --bg:#070b11;
  --panel:#0e1623;
  --panel2:#121d2e;
  --line:#243246;
  --text:#f4f7fb;
  --muted:#91a0b4;
  --accent:#83d834;
  --accent2:#b5ff6a;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);overflow:hidden}
button,input,select{font:inherit}
.app-shell{display:grid;grid-template-columns:350px 1fr;width:100vw;height:100vh}
.sidebar{background:linear-gradient(180deg,#0b121d 0%,#0b111a 100%);border-right:1px solid #202c3b;padding:22px;overflow:auto;box-shadow:20px 0 60px rgba(0,0,0,.18);z-index:5;scrollbar-width:thin;scrollbar-color:#405a3b transparent}
.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-button{display:none;width:0;height:0}.sidebar::-webkit-scrollbar-thumb{background:rgba(105,154,72,.42);border-radius:999px}.sidebar::-webkit-scrollbar-thumb:hover{background:#7bca35}
.brand-row{display:flex;align-items:center;gap:13px;margin-bottom:24px;padding:2px 0 0}
.brand-lockup{min-width:0}.brand-logo{display:block;width:58px;height:58px;object-fit:contain;filter:invert(1) grayscale(1) brightness(2);mix-blend-mode:screen}
.eyebrow{font-size:10px;letter-spacing:.28em;color:var(--accent2);font-weight:700}
h1{font-size:20px;margin:3px 0 0;font-weight:650;letter-spacing:.01em}
.panel{background:linear-gradient(180deg,rgba(19,30,46,.95),rgba(13,21,33,.95));border:1px solid var(--line);border-radius:16px;padding:15px;margin-bottom:13px;box-shadow:0 14px 35px rgba(0,0,0,.14)}
.section-title{font-size:11px;color:#aebbd0;text-transform:uppercase;letter-spacing:.16em;font-weight:700;margin-bottom:12px}
.upload-card{border:1px dashed #415269;border-radius:13px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:.2s;background:#0b1420}
.upload-card:hover{border-color:var(--accent);background:#0d1824}
.upload-icon{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#17263a;color:var(--accent2);font-size:22px;margin-bottom:8px}
.upload-card strong{font-size:13px}.upload-card small{color:var(--muted);font-size:10px;line-height:1.45;margin-top:5px}.file-name{font-size:10px;color:#7e8ca0;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.design-library{margin-top:12px}.library-title{margin:0 0 7px 2px;color:#aebbd0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:128px;overflow-y:auto;padding:2px 4px 2px 2px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#526f49 transparent}.preset-grid::-webkit-scrollbar{width:4px}.preset-grid::-webkit-scrollbar-track{background:transparent}.preset-grid::-webkit-scrollbar-thumb{background:#526f49;border-radius:999px}.preset-button{padding:8px 5px;font-size:10px;background:#0b1420}.preset-button.active{border-color:var(--accent);color:var(--accent2);background:#15251b;box-shadow:inset 0 0 0 1px rgba(131,216,52,.12)}.preset-preview{display:flex;align-items:center;gap:9px;margin-top:8px;padding:7px;background:#0b1420;border:1px solid #26374a;border-radius:10px;color:#c7d1df;font-size:10px}.preset-preview img{width:48px;height:48px;object-fit:cover;object-position:center;border-radius:7px;background:white}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button{border:1px solid #304158;background:#152236;color:#eaf0f7;border-radius:10px;padding:9px 10px;cursor:pointer;transition:.18s;font-size:11px;font-weight:650}
button:hover{transform:translateY(-1px);border-color:#5f748e;background:#192942}
button.primary{grid-column:1/-1;background:linear-gradient(180deg,#8fe33f,#6fbd29);border-color:#9bf053;color:#102006;box-shadow:0 7px 20px rgba(126,216,50,.15)}
button.active{border-color:var(--accent);color:var(--accent2);box-shadow:inset 0 0 0 1px rgba(132,216,52,.15)}
.range-label{display:flex;justify-content:space-between;margin:15px 1px 8px;font-size:10px;color:#aebbd0}.range-label output{color:var(--accent2);font-weight:700}.range{width:100%;accent-color:var(--accent)}
.shadow-controls .range-label:first-of-type{margin-top:0}.shadow-controls .range{display:block}.full-button{width:100%;margin-top:13px}
.hint{font-size:10px;color:#8392a6;line-height:1.55;margin-top:12px}.hint b{color:#b8c6d7}
.advanced summary{cursor:pointer;font-size:11px;font-weight:700;color:#c6d1de;list-style:none}.advanced summary::-webkit-details-marker{display:none}.advanced summary::after{content:'＋';float:right;color:var(--accent)}.advanced[open] summary::after{content:'−'}.advanced p{font-size:10px;line-height:1.45;color:#8290a3}
.mapping-row{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:7px;font-size:10px;margin:11px 0}select,input[type=number]{background:#0b1420;border:1px solid #2c3b4e;color:#eaf0f7;border-radius:8px;padding:7px;outline:none}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mini-grid label{display:flex;flex-direction:column;gap:4px;font-size:9px;color:#91a0b4}.compact{margin-top:10px}.compact button{font-size:10px;padding:7px}
footer{font-size:9px;color:#5f6d80;text-align:center;padding:4px 0 12px}
.stage-wrap{position:relative;min-width:0;background:radial-gradient(circle at 50% 35%,#172235 0%,#0a1019 48%,#060a10 100%);overflow:hidden}.topbar{height:56px;position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid rgba(111,132,158,.12);background:linear-gradient(180deg,rgba(7,11,17,.7),rgba(7,11,17,0));pointer-events:none;color:#9aa9bb;font-size:11px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(131,216,52,.7);margin-right:8px}.badge{font-size:9px;letter-spacing:.18em;border:1px solid rgba(131,216,52,.35);color:#a9e879;border-radius:999px;padding:6px 9px;background:rgba(15,29,14,.35)}#stage{width:100%;height:100%}canvas{display:block;width:100%;height:100%}.stage-help{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.2em;color:#647386;background:rgba(5,9,14,.55);border:1px solid rgba(106,126,151,.17);padding:8px 12px;border-radius:999px;pointer-events:none}
@media(max-width:850px){
  html,body{overflow:auto;overscroll-behavior-y:none}
  .app-shell{display:flex;flex-direction:column;width:100%;height:auto;min-height:100svh}
  .stage-wrap{position:sticky;top:0;z-index:20;order:-1;width:100%;height:54svh;min-height:360px;max-height:560px;border-bottom:1px solid #202c3b;box-shadow:0 14px 32px rgba(0,0,0,.38)}
  .sidebar{width:100%;padding:18px clamp(14px,4vw,28px) calc(26px + env(safe-area-inset-bottom));overflow:visible;border-right:0;border-bottom:0;box-shadow:0 -18px 45px rgba(0,0,0,.2)}
  .brand-row{margin-bottom:16px}.brand-logo{width:50px;height:50px}h1{font-size:19px}
  .panel{max-width:680px;margin:0 auto 12px;padding:14px;border-radius:14px}
  .upload-card{padding:13px}.upload-icon{margin-bottom:5px}
  .preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:174px}
  button{min-height:44px;font-size:12px;touch-action:manipulation}
  .range{height:28px}.range-label{font-size:11px}
  .hint{font-size:11px}.advanced p{font-size:11px}
  footer{padding-bottom:8px}
  .topbar{height:48px;padding:0 14px;font-size:10px}.badge{font-size:8px;padding:5px 7px}
  .stage-help{bottom:13px;width:max-content;max-width:86%;padding:7px 10px;text-align:center;font-size:8px;letter-spacing:.12em}
  #stage canvas{touch-action:none}
}
@media(max-width:480px){
  .stage-wrap{height:48svh;min-height:330px}
  .sidebar{padding-left:12px;padding-right:12px}
  .panel{padding:13px}
  .button-grid{gap:7px}.button-grid button{padding:9px 6px}
  .brand-row{justify-content:center}.brand-lockup{text-align:left}
  .preset-preview img{width:42px;height:42px}
  .topbar>div:first-child{max-width:68%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage-help{display:none}
}