/* BGCut Pro v2 — Mobile-first app-like UI */
:root{
  --brand:#3582ff;
  --bg:#0c0e14;
  --surface:#121724;
  --panel:#0f1421;
  --ink:#f2f6fd;
  --muted:#9fb1c9;
  --line:#22304a;
  --ok:#49d2a7;
  --danger:#ff5b6e;
  --radius:16px;
  --pad:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans JP',sans-serif;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.container{max-width:1200px; margin:0 auto; padding:0 16px;}

.site-header{border-bottom:1px solid var(--line); background:transparent;}
.header-inner{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 0;}
.brand img{height:38px; width:auto; display:block}
.head-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.status{color:var(--muted); font-size:14px}

.btn{
  appearance:none; border:1px solid var(--line); background:#132039; color:var(--ink);
  padding:10px 12px; border-radius:12px; min-height:40px; cursor:pointer;
}
.btn.primary{background:var(--brand); color:#fff; border-color:transparent; font-weight:700}
.btn.danger{background:#2b171a; border-color:#4b2228; color:#ffb6bd}
.btn:disabled{opacity:.6; cursor:not-allowed}
.file input[type=file]{display:none}

.stage-card{border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); overflow:hidden; margin-top:14px;}
.stage-top{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px; flex-wrap:wrap; background:var(--panel); border-bottom:1px solid var(--line);}
.chip{padding:8px 12px; background:linear-gradient(135deg, rgba(53,130,255,.18), rgba(53,130,255,.04));
  border:1px solid #2a406a; color:#dbe7ff; border-radius:999px; font-weight:700; letter-spacing:.2px}
.switch{display:flex; align-items:center; gap:8px;}
.switch input{accent-color:var(--brand);}
.toggle-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

.canvas-wrap{position:relative; min-height:60vh; background:
  conic-gradient(#27324a 25%, transparent 0) 0 0 / 24px 24px,
  conic-gradient(#1c2335 25%, transparent 0) 12px 12px / 24px 24px,
  #0b0e16; border-top:1px solid var(--line);}
.overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); z-index:1}
canvas#display{width:100%; height:100%; display:block; touch-action:none;}

.drawer{margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.tabs{display:flex; border-bottom:1px solid var(--line); background:var(--panel);}
.tab{appearance:none; flex:1; padding:12px; border:0; background:transparent; color:var(--muted); font-weight:700; cursor:pointer}
.tab.active{color:#fff; background:linear-gradient(180deg, rgba(53,130,255,.14), transparent 60%)}
.tabpanes{padding:12px; display:grid; grid-template-columns:1fr; gap:10px}
.tabpane{display:none}
.tabpane.active{display:block}
.control{background:#0f1626; border:1px solid #1f2b44; border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px}
.control.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.control .hint{color:var(--muted); font-size:12px}
.inline{display:inline-flex; align-items:center; gap:8px;}
input[type=range]{accent-color:var(--brand)}
input[type=color]{height:40px; width:80px; border:1px solid var(--line); border-radius:8px; background:#0f1626}

.tool-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.tool-btn{
  background:#0e1a33; border:1px solid #223353; color:#dbe7ff; padding:14px 10px; border-radius:12px; font-weight:800; letter-spacing:.2px;
}
.tool-btn.active{outline:2px solid var(--brand); background:#132350}

.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:6px; padding:10px env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background:rgba(10,14,24,.94); backdrop-filter: blur(10px); border-top:1px solid var(--line);
}
.dock-btn{
  appearance:none; flex:1; min-height:48px; border-radius:12px; border:1px solid #21304a; background:#0f1a32;
  color:#e8f0ff; font-weight:900; letter-spacing:.2px; cursor:pointer
}
.dock-btn.active{background:var(--brand); border-color:transparent; color:#fff}

.toast{position:fixed; left:50%; transform:translate(-50%, 0); bottom:90px; background:#0d1424; color:#fff; padding:10px 12px; border:1px solid #1e2a46; border-radius:12px; z-index:60; opacity:0; transition:.25s;}
.toast.show{opacity:1}

.site-footer{padding:80px 0 120px; color:var(--muted); text-align:center}

@media (min-width: 900px){
  .tool-grid{grid-template-columns:repeat(8,1fr)}
  .dock{position:sticky; bottom:unset; top:calc(100vh - 72px);}
}