*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;font-family:'Work Sans',system-ui,sans-serif;overflow:hidden;background:#0f172a;}
#whiteboard-wrap{position:fixed;inset:0;overflow:hidden;background:#fff;}

#bg-canvas{position:absolute;top:0;left:0;z-index:1;pointer-events:none;}
.canvas-container{position:absolute !important;top:0 !important;left:0 !important;z-index:2;}
#laser-canvas{position:absolute;top:0;left:0;z-index:3;pointer-events:none;}

/* ============================================================ TOOLBAR */
#top-menu{
  position:absolute;top:0;left:0;width:100%;z-index:50;
  background:linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 12px 40px -18px rgba(15,23,42,.35), 0 1px 0 rgba(255,255,255,.6) inset;
  border-bottom:1px solid #e8edf3;
  transform:translateY(-140%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
#top-menu.open{transform:translateY(0);}

.tb-row{display:flex;align-items:stretch;justify-content:space-between;padding:0;min-height:56px;}
.tb-row + .tb-row{border-top:1px solid #eef2f7;background:linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);min-height:60px;}
.menu-group{display:flex;align-items:center;gap:2px;padding:0 10px;border-right:1px solid #eef2f7;position:relative;flex-shrink:0;}
.menu-group:last-child{border-right:none;}

.tool-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 9px;border-radius:11px;cursor:pointer;min-width:56px;
  transition:background .15s,color .15s,transform .08s,box-shadow .15s;
  color:#475569;background:transparent;border:none;font-size:10.5px;font-weight:600;
  white-space:nowrap;line-height:1;font-family:inherit;
}
.tool-btn:hover{background:#f1f5f9;color:#0f172a;}
.tool-btn:active{transform:scale(.94);}
.tool-btn.active{
  background:linear-gradient(180deg,#f43f5e,#dc2626);color:#fff;
  box-shadow:0 5px 14px -5px rgba(220,38,38,.85), 0 0 0 1px rgba(220,38,38,.4) inset;
}
.tool-btn.active:hover{background:linear-gradient(180deg,#f43f5e,#dc2626);color:#fff;}
.tool-btn svg{width:19px;height:19px;flex:0 0 auto;}

.color-panel{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:6px 12px;border-right:none;min-width:320px;max-width:520px;
}
#color-swatches{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden;}
.swatch{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1;
  transition:transform .12s,box-shadow .12s;flex:0 0 auto;
}
.swatch:hover{transform:scale(1.15);}
.swatch.active{box-shadow:0 0 0 2.5px #0f172a;transform:scale(1.22);}

.slider-row{display:flex;align-items:center;gap:8px;width:100%;}
.slider-row label{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#94a3b8;min-width:52px;
}
.slider-row input[type=range]{flex:1;}
.slider-row .val{
  font-size:10.5px;font-weight:700;color:#0f172a;min-width:26px;
  text-align:right;font-variant-numeric:tabular-nums;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;height:5px;border-radius:5px;
  background:#e2e8f0;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:#e11d2f;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:#e11d2f;border:2px solid #fff;cursor:pointer;
}

#floating-icon{
  position:absolute;top:22px;right:22px;z-index:60;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:grab;
  box-shadow:0 10px 28px rgba(15,23,42,.32);user-select:none;touch-action:none;
  background:linear-gradient(145deg,#3b82f6,#2563eb);color:#fff;border:none;
  transition:transform .2s,box-shadow .2s;
}
#floating-icon:hover{transform:scale(1.06);box-shadow:0 12px 32px rgba(37,99,235,.45);}
#floating-icon:active{cursor:grabbing;transform:scale(.95);}
#floating-icon svg{width:23px;height:23px;}

#btn-close-menu{
  position:absolute;right:14px;bottom:-36px;z-index:10;
  display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:0 0 12px 12px;
  background:#0f172a;color:#fff;font-size:11px;font-weight:700;cursor:pointer;border:none;
  box-shadow:0 8px 20px -8px rgba(15,23,42,.7);font-family:inherit;letter-spacing:.04em;
}
#btn-close-menu:hover{background:#1e293b;}
#btn-close-menu svg{width:14px;height:14px;}

#spotlight{
  position:fixed;inset:0;z-index:40;pointer-events:none;display:none;
  --r:150px;--x:50vw;--y:50vh;
  background:radial-gradient(circle var(--r) at var(--x) var(--y),
    rgba(2,6,23,0) 0%, rgba(2,6,23,0) 88%, rgba(2,6,23,.86) 100%);
}
#spotlight.on{display:block;}

/* ---------- Context menu ---------- */
#context-menu{
  position:fixed;display:none;z-index:1000;background:#fff;border-radius:14px;
  box-shadow:0 18px 45px -12px rgba(15,23,42,.45);padding:6px;min-width:222px;
  border:1px solid #e2e8f0;
}
.ctx-item{
  display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;font-weight:500;
  color:#334155;border-radius:9px;cursor:pointer;transition:background .12s,color .12s;
}
.ctx-item:hover{background:#f1f5f9;color:#0f172a;}
.ctx-item svg{width:16px;height:16px;flex:0 0 auto;}
.ctx-item.danger{color:#dc2626;}
.ctx-item.danger:hover{background:#fef2f2;}
.ctx-sep{height:1px;background:#eef2f7;margin:5px 8px;}
.ctx-item[data-image-only],.ctx-item[data-text-only],.ctx-item[data-multi-only],.ctx-item[data-fill-only]{display:none;}
#context-menu.has-image .ctx-item[data-image-only]{display:flex;}
#context-menu.has-text .ctx-item[data-text-only]{display:flex;}
#context-menu.has-multi .ctx-item[data-multi-only]{display:flex;}
#context-menu.has-fill .ctx-item[data-fill-only]{display:flex;}

/* ---------- Panels ---------- */
.panel{
  position:fixed;z-index:70;background:#fff;border-radius:18px;
  box-shadow:0 22px 55px -18px rgba(15,23,42,.5);border:1px solid #e2e8f0;
  display:none;overflow:hidden;
}
.panel.on{display:block;animation:popIn .22s cubic-bezier(.16,1,.3,1);}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #eef2f7;background:#f8fafc;}
.panel-head h3{margin:0;font-size:12.5px;font-weight:700;color:#0f172a;letter-spacing:.02em;}
.panel-head button{background:none;border:none;cursor:pointer;color:#94a3b8;padding:3px;border-radius:7px;display:flex;}
.panel-head button:hover{background:#e2e8f0;color:#0f172a;}
.panel-head svg{width:16px;height:16px;}

#timer-panel{left:18px;bottom:18px;width:250px;}
#timer-display{
  font-size:44px;font-weight:700;text-align:center;color:#0f172a;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;padding:14px 0 4px;
}
#timer-display.warn{color:#dc2626;}

#picker-panel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,92vw);}
#picker-panel.on{animation:pickerIn .22s cubic-bezier(.16,1,.3,1);}
@keyframes pickerIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
#picker-result{
  font-size:32px;font-weight:700;color:#0f172a;text-align:center;
  padding:20px 14px;min-height:96px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fff,#f8fafc);border-radius:12px;margin:12px;
  border:2px dashed #e2e8f0;word-break:break-word;
}

#settings-panel{right:18px;top:100px;width:min(380px,92vw);}
#settings-panel .body{padding:16px;}

/* ---------- FILL OPTIONS PANEL ---------- */
#fill-options{
  right:18px;bottom:18px;width:280px;
}
#fill-options .body{padding:14px 16px 16px;}
#fill-options .info-box{
  margin-top:10px;padding:9px 11px;border-radius:10px;
  background:#eff6ff;border:1px solid #dbeafe;
  font-size:11.5px;color:#1e40af;line-height:1.45;
  display:flex;gap:8px;align-items:flex-start;
}
#fill-options .info-box svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;}

/* ---------- CROP BAR ---------- */
#crop-bar{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(140%);
  z-index:90;display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:#0f172a;border-radius:16px;
  box-shadow:0 24px 55px -12px rgba(15,23,42,.75), 0 0 0 1px rgba(255,255,255,.05) inset;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
#crop-bar.on{transform:translateX(-50%) translateY(0);}
#crop-bar .crop-hint{
  display:flex;align-items:center;gap:8px;color:#cbd5e1;
  font-size:12px;font-weight:600;padding:0 14px 0 4px;
  border-right:1px solid #334155;margin-right:6px;
}
#crop-bar .crop-hint svg{width:15px;height:15px;color:#f43f5e;}
#crop-bar button{
  display:flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:10px;border:none;
  font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .15s, transform .08s, color .15s;
}
#crop-bar button:active{transform:scale(.95);}
#crop-bar button svg{width:15px;height:15px;}
#crop-bar .btn-apply{background:#16a34a;color:#fff;}
#crop-bar .btn-apply:hover{background:#15803d;}
#crop-bar .btn-cancel{background:#334155;color:#fff;}
#crop-bar .btn-cancel:hover{background:#475569;}
#crop-bar .btn-reset{
  background:transparent;color:#94a3b8;border:1px solid #475569;padding:8px 12px;
}
#crop-bar .btn-reset:hover{background:#1e293b;color:#fff;border-color:#64748b;}

/* ============================================================
   UNIVERSAL OBJECT BAR — draggable + pinnable
   ============================================================ */
#object-bar{
  position:fixed;z-index:75;display:none;align-items:center;gap:0;
  padding:5px;background:#ffffff;border-radius:14px;
  box-shadow:0 16px 40px -12px rgba(15,23,42,.55), 0 0 0 1px #e2e8f0 inset;
  transform:translate(-50%,-100%);
  pointer-events:auto;max-width:calc(100vw - 24px);
  flex-wrap:nowrap;user-select:none;
}
#object-bar.on{display:flex;animation:objBarIn .22s cubic-bezier(.16,1,.3,1);}
#object-bar.pinned{box-shadow:0 16px 40px -12px rgba(15,23,42,.55), 0 0 0 2px #f59e0b inset;}
@keyframes objBarIn{from{opacity:0;transform:translate(-50%,-85%) scale(.92);}to{opacity:1;transform:translate(-50%,-100%) scale(1);}}

#object-bar .drag-handle{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:32px;border-radius:8px;
  background:#f1f5f9;color:#94a3b8;cursor:grab;
  margin-right:3px;flex-shrink:0;
  transition:background .12s, color .12s;
}
#object-bar .drag-handle:hover{background:#e2e8f0;color:#475569;}
#object-bar .drag-handle:active{cursor:grabbing;}
#object-bar .drag-handle svg{width:14px;height:14px;}

#object-bar .unpin-btn{
  display:none;align-items:center;justify-content:center;
  width:22px;height:32px;border-radius:8px;
  background:#fef3c7;color:#b45309;cursor:pointer;border:none;
  margin-right:3px;flex-shrink:0;
  transition:background .12s, color .12s;
}
#object-bar .unpin-btn:hover{background:#fde68a;}
#object-bar .unpin-btn svg{width:14px;height:14px;}
#object-bar.pinned .unpin-btn{display:flex;}

#object-bar .section{
  display:flex;align-items:center;gap:2px;padding:0 5px;
  border-right:1px solid #eef2f7;
}
#object-bar .section:last-child{border-right:none;}
#object-bar button{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;border:none;
  background:transparent;color:#475569;cursor:pointer;
  transition:background .12s, color .12s, transform .08s;
  flex-shrink:0;
}
#object-bar button:hover{background:#f1f5f9;color:#0f172a;}
#object-bar button:active{transform:scale(.9);}
#object-bar button.primary{background:#e11d2f;color:#fff;}
#object-bar button.primary:hover{background:#c11224;}
#object-bar button.danger{color:#dc2626;}
#object-bar button.danger:hover{background:#fef2f2;}
#object-bar button.active{background:#0f172a;color:#fff;}
#object-bar button svg{width:16px;height:16px;}

#object-bar .angle-wrap{
  display:flex;align-items:center;gap:2px;
  background:#f8fafc;border-radius:8px;padding:0 4px;
  border:1px solid #e2e8f0;height:32px;
}
#object-bar .angle-wrap input{
  width:48px;height:28px;border:none;background:transparent;
  font-family:inherit;font-size:13px;font-weight:700;color:#0f172a;
  text-align:right;padding:0;outline:none;
  font-variant-numeric:tabular-nums;
}
#object-bar .angle-wrap input:focus{background:#fff;}
#object-bar .angle-wrap input::-webkit-outer-spin-button,
#object-bar .angle-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#object-bar .angle-wrap input[type=number]{-moz-appearance:textfield;}
#object-bar .angle-wrap span{
  font-size:12px;font-weight:700;color:#94a3b8;padding-right:4px;
}

#object-bar .opacity-wrap{
  display:flex;align-items:center;gap:6px;
  background:#f8fafc;border-radius:8px;padding:0 8px;
  border:1px solid #e2e8f0;height:32px;
}
#object-bar .opacity-wrap .lbl{
  font-size:9px;font-weight:700;color:#94a3b8;
  text-transform:uppercase;letter-spacing:.05em;
}
#object-bar .opacity-wrap input[type=range]{
  width:56px;height:4px;background:#cbd5e1;
}
#object-bar .opacity-wrap input[type=range]::-webkit-slider-thumb{
  width:12px;height:12px;background:#2563eb;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
#object-bar .opacity-wrap .op-val{
  font-size:10.5px;font-weight:700;color:#0f172a;
  min-width:34px;text-align:right;font-variant-numeric:tabular-nums;
}

/* ---------- ROTATION HUD ---------- */
#rotate-hud{
  position:fixed;z-index:78;display:none;
  padding:9px 16px;border-radius:12px;
  background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;
  font-family:inherit;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;
  box-shadow:0 14px 32px -8px rgba(15,23,42,.7), 0 0 0 1px rgba(244,63,94,.4) inset;
  transform:translate(-50%,-50%);
  pointer-events:none;letter-spacing:.02em;
  white-space:nowrap;
}
#rotate-hud.on{display:block;animation:hudIn .15s ease;}
@keyframes hudIn{from{opacity:0;transform:translate(-50%,-50%) scale(.85);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
#rotate-hud .hint{
  font-size:10px;font-weight:500;color:#94a3b8;
  margin-left:8px;letter-spacing:.04em;
}
#rotate-hud.snapped{
  box-shadow:0 14px 32px -8px rgba(15,23,42,.7), 0 0 0 2px #16a34a inset;
}

/* ---------- FILL PROGRESS ---------- */
#fill-progress{
  position:fixed;z-index:76;display:none;
  top:50%;left:50%;transform:translate(-50%,-50%);
  padding:16px 24px;border-radius:14px;
  background:rgba(15,23,42,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:13px;font-weight:600;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.6);
  align-items:center;gap:10px;
}
#fill-progress.on{display:flex;animation:popIn .18s ease;}
#fill-progress .spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#f43f5e;
  animation:spin .8s linear infinite;
}

/* ---------- AUTOSAVE INDICATOR ---------- */
#autosave-badge{
  position:fixed;bottom:16px;left:16px;z-index:55;
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:20px;
  background:rgba(15,23,42,.85);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#cbd5e1;font-size:11px;font-weight:600;
  opacity:0;transition:opacity .3s;
  pointer-events:none;
}
#autosave-badge.show{opacity:1;}
#autosave-badge svg{width:13px;height:13px;color:#10b981;}
#autosave-badge.saving svg{color:#f59e0b;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.toast{
  animation:slideIn .3s cubic-bezier(.16,1,.3,1);
  pointer-events:auto;padding:11px 18px;border-radius:13px;font-size:13px;font-weight:600;
  box-shadow:0 14px 34px -12px rgba(15,23,42,.6);color:#fff;background:#0f172a;max-width:90vw;
}
.toast.err{background:#dc2626;}
.toast.ok{background:#059669;}
@keyframes slideIn{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}

.hidden{display:none !important;}
body.cropping .canvas-container{cursor:crosshair;}
body.cropping .upper-canvas{cursor:default !important;}

@media (max-width:1500px){
  .tool-btn{min-width:52px;font-size:10px;padding:7px 7px;}
  .tool-btn svg{width:18px;height:18px;}
  .color-panel{min-width:280px;padding:6px 8px;}
}
@media (max-width:1200px){
  .tool-btn{min-width:48px;}
  .color-panel{min-width:240px;}
  #object-bar .opacity-wrap input[type=range]{width:44px;}
}
@media (max-width:900px){
  .tool-btn{min-width:46px;font-size:9.5px;padding:6px 5px;}
  .tool-btn svg{width:17px;height:17px;}
  .swatch{width:20px;height:20px;}
  .color-panel{min-width:200px;}
  .slider-row label{min-width:44px;font-size:9px;}
  #object-bar button{width:30px;height:30px;}
  #object-bar .opacity-wrap{display:none;}
  #fill-options{right:8px;bottom:8px;width:calc(100vw - 16px);max-width:320px;}
}