*{content:none}*,*::before,*::after{box-sizing:border-box}:root{--bg:#f5f7fb;--panel:#ffffff;--ink:#1b1f2a;--muted:#4a5568;--accent:#4f46e5;--accent-2:#22c55e;--danger:#ef4444;--focus:#ffbf47;--success:#0B6E4F;--warning:#92400e;--active-ring:var(--accent);--active-ring-offset:2px;--active-ring-width:3px;--topbar-h:56px;--bottombar-h:72px;--side-w:76px;--radius:14px;--min-touch-target:44px;--vhfix:100vh;--tool-icon:40px;--tool-inner:36px;--transition-fast:0.15s ease;--transition-normal:0.25s ease;--transition-slow:0.35s ease;--z-dropdown:1000;--z-modal:2000;--z-notification:3000;--z-tooltip:4000;
  
  /* Dynamic tool sizing variables (set by JavaScript for responsive scaling) */
  --dynamic-tool-size: 56px;
  --dynamic-tool-icon: 42px;
  --dynamic-tool-gap: 12px;
  --tool-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@supports (height:100svh){:root{--vhfix:100svh}}@supports (height:100dvh){:root{--vhfix:min(100svh, 100dvh)}}@media (prefers-reduced-motion:reduce){:root{--transition-fast:0.01ms;--transition-normal:0.01ms;--transition-slow:0.01ms;--tool-transition:none}*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';line-height:1.5;overflow-x:hidden}.app{display:grid;grid-template-rows:var(--topbar-h) 1fr var(--bottombar-h);grid-template-columns:var(--side-w) 1fr;grid-template-areas:"topbar topbar" "left   canvas" "bbar   bbar";height:var(--vhfix);width:100%;contain:layout style paint;will-change:scroll-position;max-height:100vh;max-height:100dvh;overflow:hidden}

/* iOS Safari viewport fix */
@supports (-webkit-touch-callout: none) {
  .app {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }
  
  .left-panel {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    touch-action: pan-y;
  }
  
  .tools {
    -webkit-overflow-scrolling: touch;
  }
}

.workspace,.tools{min-height:0;min-width:0;contain:layout style paint}.topbar{grid-area:topbar;position:sticky;top:env(safe-area-inset-top,0);z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px));background:var(--panel);border-bottom:1px solid #e6e8ee;user-select:none;backdrop-filter:blur(8px)}.logo{font-weight:800;letter-spacing:.2px;font-size:18px;color:var(--ink)}.sysmsg{justify-self:center;color:var(--success);font-size:16px;min-height:1.2em;opacity:0;transform:translateY(-10px);transition:opacity var(--transition-normal),transform var(--transition-normal);text-align:center;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sysmsg.show{opacity:1;transform:translateY(0)}.top-actions{display:flex;align-items:center;gap:8px}

.left-panel{
  grid-area:left;
  padding:8px;
  background:var(--panel);
  border-right:1px solid #e6e8ee;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:100%;
  overflow:hidden;
}

.panel-header{display:none;margin-bottom:6px;padding:8px;font-weight:600;font-size:14px;color:var(--muted)}

/* ENHANCED: Tools container with smart spacing and distribution */
.tools{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--muted) #fff0;
  padding:var(--dynamic-tool-gap, 12px) 0;
  gap:var(--dynamic-tool-gap, 12px);
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  min-height:0;
  max-height:100%;
}

/* Alternative: Use space-evenly when tools fit without scrolling */
.tools:not(.needs-scroll) {
  justify-content:space-evenly;
}

/* Scroll indicators for tools */
.tools::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--panel) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-top: -40px;
}

.tools.needs-scroll::before {
  content: '';
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, var(--panel) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  margin-bottom: -20px;
}

.tools.needs-scroll::after {
  opacity: 1;
  height: 30px;
  margin-top: -30px;
}

.tools::-webkit-scrollbar{width:6px}.tools::-webkit-scrollbar-track{background:#fff0}.tools::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}.tools::-webkit-scrollbar-thumb:hover{background:var(--ink)}

.tool-btn,.icon-btn{display:inline-grid;place-items:center;width:52px;height:52px;min-width:var(--min-touch-target);min-height:var(--min-touch-target);border-radius:12px;border:1px solid #e6e8ee;background:#fff;cursor:pointer;transition:all var(--transition-fast);user-select:none;touch-action:manipulation;will-change:transform,box-shadow;position:relative}.tool-btn:hover,.icon-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .15);border-color:var(--accent)}

/* AGGRESSIVE: Dynamic tool button sizing - containers get smaller, icons stay larger */
.tools .tool-btn{
  width:var(--dynamic-tool-size, 50px);
  height:var(--dynamic-tool-size, 50px);
  min-width:var(--dynamic-tool-size, 50px);
  min-height:var(--dynamic-tool-size, 50px);
  border-radius:calc(var(--dynamic-tool-size, 50px) * 0.23);
  flex-shrink:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tools .tool-btn.size-transition {
  transition: var(--tool-transition),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.tools .tool-btn svg{
  width:var(--dynamic-tool-icon, 36px);
  height:var(--dynamic-tool-icon, 36px);
  transition:var(--tool-transition);
  flex-shrink:0;
  pointer-events:none;
}

.tools .tool-btn:hover svg{transform:scale(1.1)}

.tool-btn[aria-pressed="true"],.icon-btn.primary{outline:var(--active-ring-width) solid var(--active-ring);outline-offset:var(--active-ring-offset);border-color:#fff0;background:rgb(79 70 229 / .05);transform:translateY(-1px);box-shadow:0 2px 8px rgb(79 70 229 / .2)}#btnGridToggle[aria-pressed="true"],#btnSnapToggle[aria-pressed="true"]{outline:var(--active-ring-width) solid var(--accent);outline-offset:var(--active-ring-offset);border-color:#fff0;background:rgb(79 70 229 / .1)}.tool-btn:focus-visible,.icon-btn:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px;position:relative;z-index:1}.tool-btn:disabled,.icon-btn:disabled,.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.icon-btn svg{width:28px;height:28px;transition:transform var(--transition-fast)}.icon-btn:hover svg,.icon-btn:focus-visible svg{transform:scale(1.06)}.tool-btn[data-tool="select"] svg{color:#0891b2}.tool-btn[data-tool="rect"] svg{color:#dc2626}.tool-btn[data-tool="circle"] svg{color:#0284c7}.tool-btn[data-tool="ellipse"] svg{color:#059669}.tool-btn[data-tool="shape"] svg{color:#0284c7}.tool-btn[data-tool="polygon"] svg{color:#7c3aed}.tool-btn[data-tool="pencil"] svg{color:#ea580c}.tool-btn[data-tool="fill"] svg{color:#be185d}.tool-btn[data-tool="text"] svg{color:#1d4ed8}.tool-btn[data-tool="undo"] svg{color:#374151}.tool-btn[data-tool="history"] svg{color:#374151}.tool-btn[data-tool="delete"] svg{color:#dc2626}.tool-btn[data-tool="zoom"] svg{color:#059669}.tool-btn[data-tool="grid"] svg{color:#4f46e5}.tool-btn[data-tool="colours"] svg{color:#9333ea}.tool-btn[data-tool="gradient"] svg{color:#db2777}.tool-btn.loading,.icon-btn.loading{position:relative;overflow:hidden}.tool-btn.loading::after,.icon-btn.loading::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .7),transparent);animation:loading-shimmer 1.5s infinite}@keyframes loading-shimmer{to{left:100%}}.workspace{grid-area:canvas;position:relative;overflow:hidden;background:var(--bg);contain:layout style paint}#stage{position:absolute;inset:0;width:100%;height:100%;background:#fff0;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}

/* ============================================
   SCROLLABLE BOTTOM BAR WITH INDICATORS
   ============================================ */
.bottombar{
  grid-area:bbar;
  position:sticky;
  bottom:0;
  z-index:4;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px;
  padding:8px max(10px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px));
  background:var(--panel);
  border-top:1px solid #e6e8ee;
  backdrop-filter:blur(8px);
  overflow:visible; /* Allow menu dropdowns to extend beyond boundaries */
}

/* Context area wrapper with scroll indicators */
.context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--min-touch-target);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  padding: 2px 0; /* Prevent focus rings from being clipped */
}

/* Hide scrollbar but keep functionality */
.context::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Scroll gradient indicators */
.context::before,
.context::after {
  content: '';
  position: sticky;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.context::before {
  left: 0;
  background: linear-gradient(to right, var(--panel) 0%, transparent 100%);
  margin-right: -30px;
}

.context::after {
  right: 0;
  background: linear-gradient(to left, var(--panel) 0%, transparent 100%);
  margin-left: -30px;
}

/* Show gradient when content is scrollable */
.context.has-scroll-left::before {
  opacity: 1;
}

.context.has-scroll-right::after {
  opacity: 1;
}

/* Ensure child elements don't wrap */
.context > * {
  flex-shrink: 0;
}

.right-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;overflow:visible}.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid #e6e8ee;background:#fff;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;min-height:var(--min-touch-target);transition:all var(--transition-fast);touch-action:manipulation}.btn:hover{background:var(--bg);border-color:var(--accent);transform:translateY(-1px)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.primary:hover{background:#4338ca;border-color:#4338ca}.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn.danger:hover{background:#dc2626;border-color:#dc2626}.seg{display:inline-flex;align-items:center;gap:6px;border:1px solid #e6e8ee;border-radius:10px;padding:6px;background:#fff;min-height:var(--min-touch-target)}.seg>*{margin:0 2px}.label{font-size:13px;color:var(--muted);font-weight:500}.num{width:68px;padding:6px;border-radius:8px;border:1px solid #d9dfea;font-size:14px;text-align:center;background:#fff;min-height:var(--min-touch-target)}.num:focus-visible{border-color:var(--accent);outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px rgb(79 70 229 / .2)}.slider{width:clamp(160px, 24vw, 360px);height:var(--min-touch-target)}.left-panel[data-collapsed="true"] .tools{display:none}.left-panel[data-collapsed="true"] .panel-header{display:block}

/* ============================================
   ENHANCED RESPONSIVE BREAKPOINTS
   Smart scaling: larger on big screens, compact on small screens
   JavaScript will fine-tune these values dynamically
   ============================================ */

/* Extra Large Desktop - maximum comfort */
@media (min-width: 1920px) {
  :root {
    --side-w: 84px;
    --dynamic-tool-size: 64px;
    --dynamic-tool-icon: 48px;
    --dynamic-tool-gap: 16px;
  }
  
  .tools {
    padding: 20px 0;
  }
}

/* Large Desktop - spacious layout */
@media (min-width: 1441px) and (max-width: 1919px) {
  :root {
    --side-w: 80px;
    --dynamic-tool-size: 60px;
    --dynamic-tool-icon: 44px;
    --dynamic-tool-gap: 14px;
  }
  
  .tools {
    padding: 18px 0;
  }
}

/* Standard Desktop - comfortable size */
@media (min-width: 1025px) and (max-width: 1440px) {
  :root {
    --side-w: 76px;
    --dynamic-tool-size: 56px;
    --dynamic-tool-icon: 42px;
    --dynamic-tool-gap: 12px;
  }
  
  .tools {
    padding: 16px 0;
  }
}

/* Large tablets */
@media (max-width: 1024px) and (min-width: 821px) {
  :root {
    --side-w: 68px;
    --dynamic-tool-size: 42px;
    --dynamic-tool-icon: 32px;
    --dynamic-tool-gap: 6px;
  }
  
  .tools {
    padding: 8px 0;
  }
}

/* Portrait iPad and smaller tablets */
@media (max-width: 820px) and (min-width: 641px) {
  :root {
    --side-w: 64px;
    --dynamic-tool-size: 38px;
    --dynamic-tool-icon: 30px;
    --dynamic-tool-gap: 5px;
  }
  
  .tools {
    padding: 6px 0;
  }
}

/* Landscape iPad - Optimized for limited vertical space */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 768px) {
  :root {
    --side-w: 60px;
    --topbar-h: 50px;
    --bottombar-h: 60px;
    --dynamic-tool-size: 34px;
    --dynamic-tool-icon: 28px;
    --dynamic-tool-gap: 3px;
  }
  
  .tools {
    padding: 3px 0;
  }
}

/* Narrow tablets and large phones */
@media (max-width: 640px) and (min-width: 401px) {
  :root {
    --side-w: 58px;
    --dynamic-tool-size: 36px;
    --dynamic-tool-icon: 28px;
    --dynamic-tool-gap: 4px;
  }
  
  .tools {
    padding: 5px 0;
  }
}

/* Standard phones */
@media (max-width: 400px) and (min-width: 361px) {
  :root {
    --side-w: 54px;
    --dynamic-tool-size: 34px;
    --dynamic-tool-icon: 27px;
    --dynamic-tool-gap: 3px;
  }
  
  .tools {
    padding: 4px 0;
  }
}

/* Small phones */
@media (max-width: 360px) {
  :root {
    --side-w: 52px;
    --dynamic-tool-size: 32px;
    --dynamic-tool-icon: 26px;
    --dynamic-tool-gap: 2px;
  }
  
  .tools {
    padding: 3px 0;
  }
  
  .topbar {
    padding: 0 6px;
  }
}

/* Landscape phones - VERY AGGRESSIVE */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  :root {
    --side-w: 56px;
    --topbar-h: 48px;
    --bottombar-h: 56px;
    --dynamic-tool-size: 32px;
    --dynamic-tool-icon: 26px;
    --dynamic-tool-gap: 2px;
  }
  
  .tools {
    padding: 2px 0;
    overflow-y: auto !important;
  }
}

/* Very tall screens - allow larger tools */
@media (min-height: 1080px) and (min-width: 1025px) {
  :root {
    --dynamic-tool-size: 54px;
    --dynamic-tool-icon: 40px;
  }
}

/* ============================================
   RESPONSIVE BREAKPOINT: 920px and below
   FIXED: Context tools now scroll instead of hiding
   ============================================ */
@media (max-width:920px){
  .panel-header{display:block}
  .left-panel[data-collapsed="true"] .tools{display:none}
  .bottombar{grid-template-columns:1fr auto;padding:6px 8px max(6px, env(safe-area-inset-bottom, 0px)) 8px}
  
  /* REMOVED: .hide-on-narrow{display:none} */
  /* Context tools are now always visible and scroll horizontally */
  
  .context {
    gap: 6px;
    max-width: calc(100vw - 200px); /* Reserve space for right actions */
  }
  
  /* Increase gradient visibility on smaller screens */
  .context::before,
  .context::after {
    width: 40px;
  }
}

@media (max-width:640px){
  .topbar{padding:0 8px;gap:8px}
  .logo{font-size:16px}
  .sysmsg{font-size:12px;max-width:200px}
  
  .context {
    max-width: calc(100vw - 150px);
  }
  
  /* Make gradients more prominent on small screens */
  .context::before,
  .context::after {
    width: 50px;
  }
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:absolute;top:-40px;left:6px;background:var(--accent);color:#fff;padding:8px;text-decoration:none;border-radius:4px;z-index:var(--z-tooltip)}.skip-link:focus{top:6px}@media (prefers-contrast:high){:root{--bg:#ffffff;--panel:#ffffff;--ink:#000000;--muted:#666666;--accent:#0000ff;--focus:#ffff00}.tool-btn,.icon-btn,.btn{border-width:2px}.tool-btn[aria-pressed="true"],.icon-btn.primary{outline-width:4px}.tools .tool-btn{min-width:44px;min-height:44px}}@media (prefers-color-scheme:dark){:root{--bg:#1a1a1a;--panel:#2d2d2d;--ink:#ffffff;--muted:#a0a0a0;--accent:#6366f1;--focus:#fbbf24}.tool-btn,.icon-btn,.btn,.seg,.num{background:var(--panel);border-color:#404040;color:var(--ink)}.tool-btn:hover,.icon-btn:hover,.btn:hover{background:#404040}.tools.needs-scroll::before,.tools.needs-scroll::after{background:linear-gradient(to bottom, var(--panel) 0%, transparent 100%)}.tools.needs-scroll::after{background:linear-gradient(to top, var(--panel) 0%, transparent 100%)}
  
  /* Dark mode scroll indicators for bottom bar */
  .context::before {
    background: linear-gradient(to right, var(--panel) 0%, transparent 100%);
  }
  .context::after {
    background: linear-gradient(to left, var(--panel) 0%, transparent 100%);
  }
}

.toolbar.file-actions{display:inline-flex;gap:8px;align-items:center;overflow:visible}.toolbar.file-actions .iconbtn{width:50px;height:50px;border-radius:12px;border:1px solid #e6e8ee;background:#fff;cursor:pointer;display:inline-grid;place-items:center;transition:all var(--transition-fast);min-width:var(--min-touch-target);min-height:var(--min-touch-target)}.toolbar.file-actions .iconbtn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .15);border-color:var(--accent)}.toolbar.file-actions .iconbtn svg{width:28px;height:28px}.sd-dialog{padding:0;border:none;border-radius:24px;background:#fff0;max-width:min(560px, 95vw);width:90vw;overflow:visible;max-height:90vh;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.sd-dialog::backdrop{background:rgb(0 0 0 / .5);backdrop-filter:blur(4px);pointer-events:auto}.sd-dialog{animation:modalSlideIn var(--transition-normal)}@keyframes modalSlideIn{from{opacity:0;transform:translate(-50%,-60%)}to{opacity:1;transform:translate(-50%,-50%)}}.sd-modal-header{background:linear-gradient(135deg,#7c3aed 0%,#a78bfa 50%,#c4b5fd 100%);padding:32px 24px 24px;border-radius:24px 24px 0 0;position:relative;color:#fff;text-align:center;text-shadow:0 2px 4px rgb(0 0 0 / .3)}.sd-modal-icon{font-size:48px;margin-bottom:16px;display:inline-block;filter:drop-shadow(0 4px 6px rgb(0 0 0 / .2));user-select:none}.sd-modal-title{font-size:clamp(24px, 5vw, 32px);font-weight:700;margin:0 0 8px 0;color:#fff;text-shadow:0 2px 4px rgb(0 0 0 / .3)}.sd-modal-subtitle{font-size:clamp(14px, 3vw, 18px);font-weight:400;color:rgb(255 255 255 / .95);margin:0}.sd-modal-close{position:absolute;top:20px;right:20px;width:var(--min-touch-target);height:var(--min-touch-target);border-radius:50%;background:rgb(255 255 255 / .3);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:1}.sd-modal-close:hover,.sd-modal-close:focus-visible{background:rgb(255 255 255 / .4);transform:scale(1.1);outline:2px solid var(--focus);outline-offset:2px}.sd-modal-close svg{width:24px;height:24px;stroke:#fff;stroke-width:3}.sd-modal-body{background:#f8f9fa;padding:32px 24px;border-radius:0 0 24px 24px;max-height:60vh;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;overscroll-behavior:contain}.sd-modal-body::-webkit-scrollbar{width:8px}.sd-modal-body::-webkit-scrollbar-track{background:#f1f5f9}.sd-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.sd-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.sd-name-section{background:#fff;border-radius:16px;padding:20px;margin-bottom:24px;border:2px dashed #e5e7eb;transition:border-color var(--transition-fast)}.sd-name-section:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgb(79 70 229 / .1)}.sd-name-label{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#374151;margin-bottom:12px}.sd-name-input{width:100%;padding:14px 16px;font-size:18px;border:2px solid #3b82f6;border-radius:12px;outline:none;transition:all var(--transition-fast);background:#fff;min-height:var(--min-touch-target)}.sd-name-input:focus{border-color:#2563eb;box-shadow:0 0 0 4px rgb(59 130 246 / .1)}.sd-name-input:invalid{border-color:var(--danger)}.sd-option-card{background:#fff;border-radius:20px;padding:20px;margin-bottom:16px;border:2px solid #e5e7eb;cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;min-height:var(--min-touch-target)}.sd-option-card:hover:not(.disabled){border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 8px 16px rgb(0 0 0 / .08)}.sd-option-card:focus-within{border-color:var(--accent);outline:2px solid var(--focus);outline-offset:2px}.sd-option-card.disabled{opacity:.6;cursor:not-allowed;background:#f9fafb}.sd-option-card.disabled:hover{transform:none;border-color:#e5e7eb;box-shadow:none}.sd-option-card.cloud-option{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border:2px solid #f59e0b}.sd-option-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0;user-select:none}.sd-option-icon.device{background:linear-gradient(135deg,#86efac 0%,#34d399 100%)}.sd-option-icon.browser{background:linear-gradient(135deg,#fca5a5 0%,#f87171 50%,#fbbf24 100%)}.sd-option-icon.cloud{background:linear-gradient(135deg,#bfdbfe 0%,#93c5fd 100%)}.sd-option-content{flex:1;min-width:0}.sd-option-title{font-size:20px;font-weight:700;color:#111827;margin:0 0 4px 0;overflow:hidden;text-overflow:ellipsis}.sd-option-desc{font-size:14px;color:#4a5568;margin:0;line-height:1.4}.sd-file-badge,.sd-new-badge{position:absolute;top:16px;right:16px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;user-select:none}.sd-file-badge{background:#3b82f6}.sd-new-badge{background:#10b981;font-weight:700;text-transform:uppercase}.sd-signin-prompt{background:linear-gradient(135deg,#fef3c7 0%,#fed7aa 100%);border-radius:16px;padding:20px;display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:16px;flex-wrap:wrap}.sd-signin-text{display:flex;align-items:center;gap:12px;font-size:16px;color:#92400e;font-weight:500;flex:1;min-width:200px}.sd-signin-icon{font-size:24px;flex-shrink:0}.sd-signin-btn{background:#fff;color:#f59e0b;border:2px solid #f59e0b;padding:10px 24px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all var(--transition-fast);min-height:var(--min-touch-target);white-space:nowrap}.sd-signin-btn:hover,.sd-signin-btn:focus-visible{background:#f59e0b;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgb(245 158 11 / .3);outline:2px solid var(--focus);outline-offset:2px}.sd-file-list{max-height:400px;overflow-y:auto;margin-top:20px;scroll-behavior:smooth;overscroll-behavior:contain}.sd-file-item{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;border:2px solid #e5e7eb;cursor:pointer;transition:all var(--transition-fast);gap:16px;min-height:var(--min-touch-target)}.sd-file-item:hover{border-color:#3b82f6;background:#f0f9ff}.sd-file-item:focus-within{border-color:var(--accent);outline:2px solid var(--focus);outline-offset:2px}.sd-file-info{flex:1;min-width:0}.sd-file-name{font-weight:600;color:#111827;font-size:16px;margin:0 0 4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sd-file-date{color:#4a5568;font-size:14px;margin:0}.sd-file-open-btn{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-height:var(--min-touch-target);white-space:nowrap}.sd-file-open-btn:hover,.sd-file-open-btn:focus-visible{background:#2563eb;transform:translateY(-1px);outline:2px solid var(--focus);outline-offset:2px}.sd-loading{text-align:center;padding:40px;color:#6b7280}.sd-loading-spinner{display:inline-block;width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.sd-error{background:#fef2f2;border:2px solid #fecaca;border-radius:12px;padding:16px;color:#991b1b;text-align:center}.sd-error-icon{font-size:24px;margin-bottom:8px}.sd-success{background:#f0fdf4;border:2px solid #bbf7d0;border-radius:12px;padding:16px;color:#166534;text-align:center}.sd-dialog.enhanced .sd-dialog-card{display:none}.sd-dialog.enhanced .sd-enhanced-content{display:block}

@media print{.topbar,.left-panel,.bottombar{display:none}.app{grid-template-rows:1fr;grid-template-columns:1fr;grid-template-areas:"canvas"}.workspace{position:static;overflow:visible}.tools .tool-btn{width:30px !important;height:30px !important;min-width:30px !important;min-height:30px !important}.tools .tool-btn svg{width:18px !important;height:18px !important}}

.tool-btn,.icon-btn,.btn,.sd-option-card{backface-visibility:hidden;perspective:1000px}

@media (hover:none) and (pointer:coarse){.stl-btn-save:hover,.stc-btn-save:hover,.stgd-btn-save:hover,.stod-btn-save:hover{transform:none;box-shadow:none}.stl-option-card:hover,.stl-close-btn:hover{background:none;transform:none}.stl-btn-save:active,.stc-btn-save:active,.stgd-btn-save:active,.stod-btn-save:active{transform:scale(.98);opacity:.9}.stl-close-btn:active,.stc-close-btn:active,.stgd-close:active,.stod-close:active{transform:scale(.95);background:rgb(0 0 0 / .1)}.stl-option-card:active{background:#f3f4f6}.tool-btn:active{transform:scale(.95)}.menu-toggle:active{transform:scale(0.95)}.menu-item:active{background:var(--bg);transform:scale(0.98)}.menu-item{min-height:48px;padding:14px 16px}.tools .tool-btn{min-width:44px;min-height:44px;-webkit-tap-highlight-color:rgba(79, 70, 229, 0.1)}
  
  /* Touch-friendly scrolling for bottom context area */
  .context {
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 20px;
  }
}

@media (hover:none) and (pointer:coarse){.stl-close-btn,.stc-close-btn,.stgd-close,.stod-close{min-width:44px;min-height:44px}.stl-btn,.stc-btn,.stgd-btn,.stod-btn{min-height:48px;padding:14px 24px}input[type="radio"]{width:20px;height:20px}}.stl-btn,.stc-btn,.stgd-btn,.stod-btn,.stl-close-btn,.stc-close-btn,.stgd-close,.stod-close{touch-action:manipulation;-webkit-tap-highlight-color:#fff0}@media (hover:none) and (pointer:coarse){.stl-btn:active::after,.stc-btn:active::after,.stgd-btn:active::after,.stod-btn:active::after{content:'';position:absolute;top:50%;left:50%;width:100px;height:100px;background:rgb(255 255 255 / .5);border-radius:50%;transform:translate(-50%,-50%) scale(0);animation:ripple 0.6s ease-out}@keyframes ripple{to{transform:translate(-50%,-50%) scale(2);opacity:0}}}.stl-body,.stc-body,.stgd-body,.stod-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.stl-modal,.stc-modal,.stgd-modal,.stod-modal{-webkit-user-select:none;user-select:none}.stl-name-input,.stc-name-input,.stgd-name-input,.stod-name-input{-webkit-user-select:text;user-select:text}@media (hover:none) and (pointer:coarse) and (min-width:768px){.stl-modal,.stc-modal-content,.stgd-container,.stod-container{max-width:600px}}@media (hover:none) and (pointer:coarse) and (max-width:640px){.stl-modal,.stc-modal-content,.stgd-container,.stod-container{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}.stl-close-btn,.stc-close-btn,.stgd-close,.stod-close{position:fixed;top:10px;right:10px;z-index:100}}@media (hover:none) and (pointer:coarse){.stl-name-input:focus,.stc-name-input:focus,.stgd-name-input:focus,.stod-name-input:focus{font-size:16px;border-width:3px}}

/* ============================================
   RESPONSIVE THREE-DOT MENU SYSTEM FOR iPAD
   ============================================ */

.menu-toggle {
  display: none;
  width: 50px;
  height: 50px;
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  border-radius: 12px;
  border: 1px solid #e6e8ee;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  padding: 0;
  align-items: center;
  justify-content: center;
}

.menu-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / .15);
  border-color: var(--accent);
}

.menu-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.menu-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgb(0 0 0 / .15);
  border: 1px solid #e5e7eb;
  padding: 8px;
  min-width: 200px;
  max-width: 280px;
  z-index: 10000;
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), 
              transform var(--transition-fast), 
              visibility 0s var(--transition-fast);
}

.menu-dropdown.show,
.menu-dropdown.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity var(--transition-fast), 
              transform var(--transition-fast);
}

.menu-dropdown::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 20px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  transform: rotate(45deg);
  z-index: -1;
}

.menu-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0;
}

/* Show menus on tablets and smaller */
@media (max-width: 1024px) {
  .file-actions .iconbtn:not(#btnPrintPreview):not(#btnPrint) {
    display: none !important;
  }
  
  /* Hide Print and Print Preview buttons on small screens - they'll be in the menu */
  .file-actions #btnPrint,
  .file-actions #btnPrintPreview {
    display: none !important;
  }
  
  .file-actions-menu {
    display: inline-flex !important;
  }
}

/* Show all buttons on desktop */
@media (min-width: 1025px) {
  .file-actions-menu {
    display: none !important;
  }
}

.file-actions-menu {
  position: relative;
  display: inline-flex;
}

.file-actions-menu .menu-dropdown {
  pointer-events: auto !important;
}

/* Context-specific tools menu (if needed) */
.context-tools-menu {
  position: relative;
  margin-left: auto;
}

.context-tools-menu .menu-toggle {
  background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  border-color: #7c3aed;
}

.context-tools-menu .menu-toggle svg {
  color: #fff;
}

/* Ensure gradients work in menu dropdowns in dark mode */
@media (prefers-color-scheme: dark) {
  .menu-dropdown {
    background: var(--panel);
    border-color: #404040;
  }
  
  .menu-dropdown::after {
    background: var(--panel);
    border-color: #404040;
  }
  
  .menu-divider {
    background: #404040;
  }
}

/* ============================================
   CRITICAL MENU FIXES
   ============================================ */

/* Force menu toggles to be visible and clickable */
#contextMenuToggle,
#fileMenuToggle {
  position: relative !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* CRITICAL: Menu items must be fully clickable */
.menu-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background 0.15s ease;
  font-size: 15px;
  color: var(--ink);
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

/* DEFENSIVE: Constrain any SVG in menu items, even without wrapper */
.menu-item > svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  pointer-events: none !important;
}

.menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.menu-item:active {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(0.98);
}

/* CRITICAL: Prevent icons from blocking clicks */
.menu-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  pointer-events: none !important;
}

.menu-icon-wrapper svg {
  width: 20px !important;
  height: 20px !important;
  pointer-events: none !important;
  fill: currentColor;
  stroke: currentColor;
}

/* CRITICAL: Prevent text from blocking clicks */
.menu-item-text {
  flex: 1;
  pointer-events: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Backdrop */
#menuBackdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#menuBackdrop.show,
#menuBackdrop.is-visible {
  display: block !important;
  opacity: 1;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .menu-item {
    min-height: 48px;
    padding: 14px 16px;
  }

  .menu-icon-wrapper {
    width: 28px;
    height: 28px;
  }

  .menu-icon-wrapper svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Small screen adjustments */
@media (max-width: 1024px) {
  #contextMenuToggle,
  #fileMenuToggle {
    display: inline-flex !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .menu-item:active {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* Version History Button Responsive Behavior */
@media (max-width: 768px) {
  #btnVersionHistory.vh-toolbar-btn {
    display: none !important;
  }

  /* Show in dropdown menu */
  .dropdown-menu #btnVersionHistory {
    display: block !important;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 0;
    padding: 12px 16px;
  }

  .dropdown-menu #btnVersionHistory:hover {
    background: #f3f4f6;
    border-color: transparent;
  }
}

@media (min-width: 769px) {
  #btnVersionHistory.vh-toolbar-btn {
    display: inline-block;
  }
}

/* Version History Button - Desktop */
#btnVersionHistory.vh-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#btnVersionHistory svg {
  width: 24px;
  height: 24px;
}

/* Hide desktop version history button on mobile */
@media (max-width: 1024px) {
  #btnVersionHistory.vh-toolbar-btn,
  #btnVersionHistory.iconbtn {
    display: none !important;
  }
}

/* Show version history in mobile menu */
@media (max-width: 1024px) {
  .menu-item[data-action="version-history"] {
    display: flex !important;
  }
}

/* =========================================================
   AUTH-DISABLED BUTTON STYLES
   Styles for buttons that require authentication
   ========================================================= */

/* Main toolbar buttons - all restricted features */
:is(body .toolbar.file-actions, body) button:is(
  #btnSave,
  #btnOpen,
  #btnImport,
  #btnPrintPreview,
  #btnPrint
).auth-disabled {
  opacity: 0.4 !important;
  filter: grayscale(100%) brightness(0.7) !important;
  pointer-events: auto !important; /* allow click to open auth modal */
  cursor: pointer !important;
  background-color: #e5e5e5 !important;
  border-color: #d0d0d0 !important;
  color: #888 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

/* Lock icon overlay for disabled buttons — SVG data URI avoids emoji being
   announced by screen readers; aria-disabled already conveys the state (WCAG 1.1.1) */
:is(body .toolbar.file-actions, body) button:is(
  #btnSave,
  #btnOpen,
  #btnImport,
  #btnPrintPreview,
  #btnPrint
).auth-disabled::before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  background-color: #ef4444 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 10px 10px !important;
  background-position: center !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  border: 1px solid #fff !important;
  z-index: 10 !important;
}

/* Hover effect for enabled buttons */
:is(body .toolbar.file-actions, body) button:is(
  #btnSave,
  #btnOpen,
  #btnImport,
  #btnPrintPreview,
  #btnPrint
):not(.auth-disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Menu items in dropdown - all restricted actions */
.menu-item[data-action="save"].auth-disabled,
.menu-item[data-action="open"].auth-disabled,
.menu-item[data-action="import"].auth-disabled,
.menu-item[data-action="printPreview"].auth-disabled,
.menu-item[data-action="print"].auth-disabled {
  opacity: 0.5 !important;
  filter: grayscale(100%) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
}

/* Lock icon for disabled menu items – SVG data URI keeps icon decorative (WCAG 1.1.1) */
.menu-item[data-action="save"].auth-disabled::after,
.menu-item[data-action="open"].auth-disabled::after,
.menu-item[data-action="import"].auth-disabled::after,
.menu-item[data-action="printPreview"].auth-disabled::after,
.menu-item[data-action="print"].auth-disabled::after {
  content: '';
  display: inline-block;
  margin-left: auto;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.7;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Focus states for accessibility */
:is(body .toolbar.file-actions, body) button:is(
  #btnSave,
  #btnOpen,
  #btnImport,
  #btnPrintPreview,
  #btnPrint
).auth-disabled:focus {
  outline: 2px solid #ef4444 !important;
  outline-offset: 2px !important;
}

/* Prevent accidental interactions with disabled state */
:is(body .toolbar.file-actions, body) button:is(
  #btnSave,
  #btnOpen,
  #btnImport,
  #btnPrintPreview,
  #btnPrint
).auth-disabled * {
  pointer-events: none !important;
}

/* Tooltip styling for disabled buttons */
:is(body .toolbar.file-actions, body) button:is(
  #btnSave,
  #btnOpen,
  #btnImport,
  #btnPrintPreview,
  #btnPrint
).auth-disabled[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  :is(body .toolbar.file-actions, body) button:is(
    #btnSave,
    #btnOpen,
    #btnImport,
    #btnPrintPreview,
    #btnPrint
  ).auth-disabled::before {
    width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :is(body .toolbar.file-actions, body) button:is(
    #btnSave,
    #btnOpen,
    #btnImport,
    #btnPrintPreview,
    #btnPrint
  ).auth-disabled {
    border: 2px solid #000 !important;
    opacity: 0.6 !important;
  }
  
  :is(body .toolbar.file-actions, body) button:is(
    #btnSave,
    #btnOpen,
    #btnImport,
    #btnPrintPreview,
    #btnPrint
  ).auth-disabled::before {
    border: 2px solid #000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :is(body .toolbar.file-actions, body) button:is(
    #btnSave,
    #btnOpen,
    #btnImport,
    #btnPrintPreview,
    #btnPrint
  ).auth-disabled,
  :is(body .toolbar.file-actions, body) button:is(
    #btnSave,
    #btnOpen,
    #btnImport,
    #btnPrintPreview,
    #btnPrint
  ):not(.auth-disabled):hover {
    transition: none !important;
    transform: none !important;
  }
}