:root{
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock-h: 72px;
  --sheet-gap: 10px;
}

/* Reset */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#f7f7fb; color:#0f172a; overflow:hidden; }

/* Topbar */
.topbar{ position:relative; z-index:10; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06); padding:12px 16px; text-align:center; }
.topbar h1{ margin:4px 0; font-size:34px; }

/* Stage */
.drawing-area-container{ position:relative; width:100vw; height:calc(100vh - 64px - (var(--dock-h) + var(--safe-b))); background:#fff; }
#drawingCanvas{ width:100%; height:100%; display:block; touch-action:none; -webkit-user-select:none; }

/* Dock (behind sheet) */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:970;
  background:#0f0f10; padding:10px 12px calc(10px + var(--safe-b));
  border-top-left-radius:16px; border-top-right-radius:16px; display:flex; gap:10px; justify-content:space-between; box-shadow:none; transition:opacity .15s ease;
}
body.sheet-open .dock{ opacity:.85; }

.dock-btn{ flex:1 1 0; min-width:0; background:#171a22; color:#e7eefc; border:1px solid #2b2b2c; border-radius:14px; padding:10px 10px; font-size:14px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.dock-btn span{ font-size:20px; } .dock-btn em{ font-style:normal; font-size:13px; }

/* Backdrop */
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:960; pointer-events:none; }
.backdrop.show{ display:block; pointer-events:auto; }

/* Sheets */
.sheet{
  position:fixed; left:0; right:0; bottom:var(--safe-b); z-index:980;
  background:#0f0f10; color:#e7eefc;
  border-top-left-radius:18px; border-top-right-radius:18px;
  transform:translateY(105%); transition:transform .24s ease-out;
  max-height:calc(85vh - var(--safe-b)); overflow:hidden; box-shadow:none;
  pointer-events:auto; touch-action:manipulation;
}
.sheet.open{ transform:translateY(0%); }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px; }
.sheet-handle{ width:64px; height:6px; background:#2a2c35; border-radius:6px; margin:10px auto 0; }
.sheet-body{ padding:8px 16px 18px; }
.sheet .row{ display:flex; gap:10px; margin:10px 0; flex-wrap:wrap; }
.sheet .muted{ color:#a3acc3; }
.sheet hr{ border:0; height:1px; background:#2b2b2c; margin:8px 0; }

.x-btn{ background:#233048; color:#e7eefc; border:0; width:36px; height:36px; border-radius:12px; font-size:18px; }

.pill{ background:#171a22; color:#e7eefc; border:1px solid #2b2b2c; border-radius:12px; padding:10px 12px; font-size:14px; }
.chip{ background:#171a22; color:#e7eefc; border:1px solid #2b2b2c; border-radius:12px; padding:8px 10px; display:flex; gap:8px; align-items:center; }
.chip input[type="color"]{ width:30px; height:30px; border:0; border-radius:8px; background:#fff; padding:0; }
.chip.grow{ flex:1; }
.label{ display:block; margin:6px 0 6px; color:#c7d2fe; }
.input,.select{ width:100%; background:#11151d; color:#e7eefc; border:1px solid #2b2b2c; border-radius:12px; padding:12px; font-size:16px; }

/* Modal + toast */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:999; }
.modal .modal-card{ width:90%; max-width:720px; background:#0f0f10; color:#e7eefc; border-radius:14px; border:1px solid #2b2b2c; padding:12px; }
.modal .modal-head{ display:flex; align-items:center; justify-content:space-between; }
.modal .code{ max-height:50vh; overflow:auto; background:#11151d; padding:12px; border-radius:10px; }
.modal.show{ display:flex; }
.toast{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:#0f0f10; color:#e7eefc; border:1px solid #2b2b2c; padding:10px 14px; border-radius:10px; display:none; z-index:1000; }
.toast.show{ display:block; }

/* make sheet elements tappable */
.sheet, .sheet * { touch-action: manipulation; pointer-events: auto; }/* --- Vector Studio: layers & backdrop safety --- */
.backdrop[aria-hidden="true"] { pointer-events: none; }

.floating-btn {
  position: fixed; right: 12px; bottom: 84px; z-index: 1000;
  background: #1e293b; color: #9ff6c1; border: 1px solid #334155;
  border-radius: 12px; padding: 10px 14px; font: 14px/1.2 system-ui;
}
.floating-btn:active { transform: translateY(1px); }

.layers-panel {
  position: fixed; right: 12px; bottom: 140px; z-index: 1000;
  width: 260px; max-height: 55vh; overflow: auto;
  background: #0f172a; color: #e2e8f0; border: 1px solid #334155;
  border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.35); display: none;
}
.layers-panel.open { display: block; }
.layers-panel header {
  padding: 10px 12px; border-bottom: 1px solid #1f2937; display:flex; align-items:center; justify-content:space-between;
}
.layers-list { list-style: none; padding: 6px; }
.layers-list li {
  display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px;
  border: 1px solid #1f2937; margin-bottom: 6px; cursor: pointer; user-select: none;
}
.layers-list li.active { border-color: #22c55e; outline: 2px solid rgba(34,197,94,.35); }
.layers-list small { color: #94a3b8; margin-left: auto; font-size: 11px; }