/**
 * Clankoot Studio V3 - Main Stylesheet
 * Clean light theme: neutral grays, subtle shadows, refined borders
 */

/* Safe area insets for iOS/iPad notch + home indicator */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --bg-deep:#e4e4e7;--bg-base:#fafafa;--bg-panel:#ffffff;--bg-elevated:#e4e4e7;--bg-hover:#d4d4d8;
  --text-primary:#18181b;--text-secondary:#52525b;--text-muted:#71717a;--text-dim:#a1a1aa;
  --border:#e4e4e7;--border-subtle:rgba(0,0,0,0.06);
  --accent:#18181b;--accent-hover:#09090b;--danger:#EF4444;--success:#22C55E;--warning:#F59E0B;
  --bg-card:#f4f4f5;--bg-selected:rgba(0,0,0,0.06);
}

html,body,#root{height:100%;margin:0;padding:0}
*{margin:0;padding:0;box-sizing:border-box}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:#18181b;background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.15);border-radius:6px;padding:4px 8px;outline:none;font-size:11px}
select{-webkit-appearance:none;appearance:none;padding-right:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:10px 6px}
input:focus,select:focus,textarea:focus{border-color:rgba(0,0,0,0.6);box-shadow:0 0 0 2px rgba(0,0,0,0.15)}
body{overflow:hidden;font-family:"Plus Jakarta Sans","Inter","SF Pro Display",-apple-system,sans-serif;background:#fafafa;color:#18181b;font-size:12px;-webkit-font-smoothing:antialiased;padding-top:var(--safe-top);padding-right:var(--safe-right);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left)}
.app{display:flex;flex-direction:column;height:calc(100vh - var(--safe-top) - var(--safe-bottom));width:calc(100vw - var(--safe-left) - var(--safe-right))}

/* --- TOP BAR (frosted glass) --- */
.topbar{display:flex;align-items:center;background:#FFFFFF;min-height:38px;padding:2px 12px;border-bottom:0.5px solid rgba(0,0,0,0.08);gap:2px;flex-shrink:0;box-shadow:0 1px 0 rgba(0,0,0,0.06);flex-wrap:wrap;position:relative;z-index:100}
.topbar .logo{font-weight:700;color:#18181b;font-size:14px;margin-right:12px;white-space:nowrap;letter-spacing:-.3px;display:flex;align-items:center;gap:6px}
.topbar .logo svg{width:18px;height:18px}
.topbar .logo span{font-weight:800}
.sep{width:1px;height:20px;background:rgba(0,0,0,0.08);margin:0 3px;flex-shrink:0}
.tbtn{padding:3px 8px;border-radius:6px;font-size:10px;color:#52525b;display:flex;flex-direction:column;align-items:center;gap:0;white-space:nowrap;transition:all .2s ease;font-weight:500;line-height:1.1}
.tbtn .tb-icon{font-size:14px;display:block}
.tbtn .tb-label{font-size:8px;display:block;color:#71717a}
.tbtn:hover{background:rgba(0,0,0,0.04);color:#18181b}
.tbtn:hover .tb-label{color:#52525b}
.tbtn.act{background:rgba(0,0,0,0.12);color:#18181b}
.tbtn.act .tb-label{color:#18181b}
.menu-dd{position:absolute;top:100%;left:0;min-width:200px;background:rgba(255,255,255,0.95);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:0.5px solid rgba(0,0,0,0.1);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.12),0 0 8px rgba(0,0,0,0.04);z-index:200;padding:4px 0;margin-top:2px}

/* --- HEADER MENUS --- */
.hdr-menu{position:relative}
.hdr-menu .tbtn{padding:4px 8px;font-size:11px;font-weight:500;color:#52525b;flex-direction:row;gap:4px}
.hdr-menu .tbtn:hover{color:#18181b}
.hdr-menu .tbtn.act{color:#18181b}
.hdr-menu .tbtn .tb-label{font-size:11px;color:inherit}
.hdr-dropdown{position:absolute;top:100%;left:0;background:rgba(255,255,255,0.95);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:0.5px solid rgba(0,0,0,0.1);border-radius:10px;min-width:200px;box-shadow:0 12px 40px rgba(0,0,0,0.12),0 0 8px rgba(0,0,0,0.04);padding:4px 0;z-index:60;margin-top:2px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity 0.15s ease,transform 0.15s ease}
.hdr-dropdown.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.hdr-dd-item{padding:7px 14px;font-size:11px;color:#18181b;cursor:pointer;transition:background .1s;display:flex;align-items:center;gap:4px;white-space:nowrap}
.hdr-dd-item:hover{background:rgba(0,0,0,0.04);color:#09090b}
.hdr-sep{height:0.5px;background:rgba(0,0,0,0.08);margin:3px 0}
.hdr-dd-sub{position:relative}
.hdr-dd-sub>.hdr-dropdown{display:none;position:absolute;left:100%;top:-4px;margin-left:0;margin-top:0}
.hdr-dd-sub:hover>.hdr-dropdown{display:block}
.hdr-dd-sub>.hdr-dd-item::after{content:"\25B8";position:absolute;right:10px;font-size:9px;color:#71717a}
.hdr-dd-sub>.hdr-dd-item{padding-right:28px;position:relative}

/* --- TOOLBAR (Ribbon Tabs) --- */
.toolbar{display:flex;flex-direction:column;background:#fafafa;border-bottom:0.5px solid rgba(0,0,0,0.08);flex-shrink:0}
.tb-tabs{display:flex;align-items:center;background:#fafafa;padding:0 4px;gap:0;border-bottom:0.5px solid rgba(0,0,0,0.06);height:26px;flex-shrink:0}
.tb-tab{padding:4px 14px;font-size:10px;color:rgba(0,0,0,0.40);font-weight:600;text-transform:uppercase;letter-spacing:.6px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease;position:relative;white-space:nowrap;line-height:1}
.tb-tab:hover{color:rgba(0,0,0,0.70);background:rgba(0,0,0,0.03)}
.tb-tab.act{color:#18181b;border-bottom-color:#18181b;background:rgba(0,0,0,0.06)}
.tb-tab.cons{color:rgba(0,0,0,0.40)}
.tb-tab.cons:hover{color:rgba(0,0,0,0.70)}
.tb-tab.cons.act{color:#18181b;border-bottom-color:#18181b;background:rgba(0,0,0,0.04)}
.tb-tab.track{color:rgba(0,0,0,0.40)}
.tb-tab.track:hover{color:rgba(0,0,0,0.70)}
.tb-tab.track.act{color:#18181b;border-bottom-color:#18181b;background:rgba(0,0,0,0.04)}
.tb-tab.threed{color:rgba(0,0,0,0.40)}
.tb-tab.threed:hover{color:rgba(0,0,0,0.70)}
.tb-tab.threed.act{color:#18181b;border-bottom-color:#18181b;background:rgba(0,0,0,0.04)}
.tb-cat-sep{width:1px;height:16px;background:rgba(0,0,0,0.08);margin:0 6px;flex-shrink:0}
.tb-content{display:flex;align-items:center;padding:4px 8px;gap:2px;min-height:44px;overflow-x:auto}
.tgrp{display:flex;align-items:center;gap:2px;padding:0 6px;border-right:0.5px solid rgba(0,0,0,0.06);position:relative}
.tgrp:last-child{border-right:none}
.tgrp-l{font-size:8px;color:rgba(0,0,0,0.35);text-transform:uppercase;writing-mode:vertical-lr;transform:rotate(180deg);margin-right:2px;letter-spacing:.8px;font-weight:600}
.tool{width:36px;height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;color:rgba(0,0,0,0.55);position:relative;transition:all .2s ease;gap:0;padding:2px 1px}
.tool .tool-icon{font-size:14px;line-height:1;display:block}
.tool .tool-name{font-size:6px;line-height:1;display:block;color:rgba(0,0,0,0.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34px;text-align:center;font-weight:500}
.tool:hover{background:rgba(0,0,0,0.04);color:rgba(0,0,0,0.80)}
.tool:hover .tool-name{color:#52525b}
.tool.act{background:rgba(0,0,0,0.15);color:#18181b}
.tool.act .tool-name{color:#18181b}
.tool .tk{position:absolute;bottom:1px;right:1px;font-size:6px;color:#71717a;font-weight:600}

/* --- PANELS (frosted glass) --- */
.main{display:flex;flex:1;overflow:hidden}
.lpanel{background:#FFFFFF;border-right:0.5px solid rgba(0,0,0,0.08);display:flex;flex-direction:column;flex-shrink:0!important;flex-grow:0!important;box-shadow:2px 0 12px rgba(0,0,0,0.04);position:relative;overflow:hidden}
.resize-handle-l{position:absolute;top:0;right:0;width:6px;height:100%;cursor:ew-resize;z-index:20;background:transparent;transition:background .15s}
.resize-handle-l:hover,.resize-handle-l:active{background:rgba(0,0,0,0.25)}
.resize-handle-l::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:40px;border-radius:1px;background:rgba(0,0,0,0.10);transition:background .15s}
.resize-handle-l:hover::after,.resize-handle-l:active::after{background:#18181b}
.lpanel.hide{display:none}
.lptabs{display:flex;border-bottom:0.5px solid rgba(0,0,0,0.08);background:#fafafa;overflow-x:auto;flex-shrink:0}
.lptab{flex:1;min-width:0;padding:4px 2px;text-align:center;font-size:9px;color:rgba(0,0,0,0.40);border-bottom:2px solid transparent;transition:all .2s ease;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1}
.lptab .lp-icon{font-size:14px;display:block}
.lptab .lp-label{font-size:7px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lptab:hover{color:#18181b;background:rgba(0,0,0,0.03)}
.lptab.act{color:#18181b;border-bottom-color:#18181b;background:rgba(0,0,0,0.08)}
.lpcont{flex:1;overflow-y:auto;overflow-x:hidden;width:100%;scroll-behavior:smooth}
.rpanel{background:#FFFFFF;border-left:0.5px solid rgba(0,0,0,0.08);display:flex;flex-direction:column;flex-shrink:0!important;flex-grow:0!important;box-shadow:-2px 0 12px rgba(0,0,0,0.04);position:relative;overflow:hidden;z-index:5}
.resize-handle-r{width:6px;flex-shrink:0;align-self:stretch;cursor:ew-resize;z-index:10;background:transparent;transition:background .15s;position:relative}
.resize-handle-r:hover,.resize-handle-r:active{background:rgba(0,0,0,0.25)}
.resize-handle-r::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:40px;border-radius:1px;background:rgba(0,0,0,0.08);transition:all .15s}
.resize-handle-r:hover::after,.resize-handle-r:active::after{background:#18181b}
.rpanel.hide{display:none}
.rptabs{display:flex;flex-wrap:wrap;border-bottom:0.5px solid rgba(0,0,0,0.08);background:#fafafa;padding:3px 3px 0 10px;max-height:80px;overflow-y:auto;overflow-x:hidden}
.rptab{padding:3px 6px;margin:0 1px 3px;text-align:center;font-size:8px;color:#64748B;border:0.5px solid rgba(0,0,0,0.10);border-radius:6px;white-space:nowrap;transition:all .2s ease;font-weight:500;background:#e4e4e7}
.rptab:hover{color:#18181b;background:#e4e4e7;border-color:rgba(0,0,0,0.15)}
.rptab.act{color:#18181b;border-color:rgba(0,0,0,0.4);background:rgba(0,0,0,0.12)}
.rpcont{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 6px 6px 10px;width:100%;scroll-behavior:smooth}

/* --- FOOTER PANEL (Takeoff / Summary / Cost Dashboard) --- */
.fpanel{background:#e4e4e7;border-top:0.5px solid rgba(0,0,0,0.08);display:flex;flex-direction:column;flex-shrink:0;box-shadow:0 -4px 16px rgba(0,0,0,0.06);position:relative;overflow:hidden}
/* Panel content wrapper — must flex:1 to fill remaining space */
.fpanel>div:last-child:not(.fptabs):not(.resize-handle-f){flex:1;min-height:0}
.resize-handle-f{position:absolute;top:0;left:0;right:0;height:6px;cursor:ns-resize;z-index:20;background:transparent;transition:background .2s}
.resize-handle-f:hover,.resize-handle-f:active{background:linear-gradient(180deg,rgba(0,0,0,0.2),transparent)}
.resize-handle-f::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:2px;border-radius:1px;background:rgba(0,0,0,0.10);transition:all .2s}
.resize-handle-f:hover::after,.resize-handle-f:active::after{background:#18181b;box-shadow:0 0 8px rgba(0,0,0,.3)}
/* Tab bar */
.fptabs{display:flex;align-items:center;border-bottom:0.5px solid rgba(0,0,0,0.08);background:#fafafa;padding:0 8px;height:36px;flex-shrink:0;gap:2px}
.fptab{padding:8px 20px;font-size:11px;color:rgba(0,0,0,0.35);font-weight:600;letter-spacing:.3px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease;white-space:nowrap;line-height:1;border-radius:4px 4px 0 0;position:relative}
.fptab:hover{color:rgba(0,0,0,0.65);background:rgba(0,0,0,.03)}
.fptab.act{color:#09090b;border-bottom-color:#18181b;background:rgba(0,0,0,.08)}
.fptab.act::after{content:"";position:absolute;bottom:-1px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,#18181b,transparent);border-radius:1px;box-shadow:0 0 12px rgba(0,0,0,.3)}
.fpcont{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px;width:100%;scroll-behavior:smooth}
.fpanel .fp-close{margin-left:auto;padding:3px 10px;font-size:13px;color:#52525b;cursor:pointer;border-radius:6px;transition:all .2s;line-height:1;z-index:10;position:relative}
.fpanel .fp-close:hover{color:#EF4444;background:rgba(255,69,58,.1)}
.fpanel .fp-max{padding:3px 10px;font-size:11px;color:rgba(0,0,0,0.25);cursor:pointer;border-radius:6px;transition:all .2s;line-height:1}
.fpanel .fp-max:hover{color:#09090b;background:rgba(0,0,0,.1)}
/* Sticky elements inside scrollable footer content */
.fp-sticky{position:sticky;top:0;z-index:5;background:#e4e4e7}
.fp-sticky-bot{position:sticky;bottom:0;z-index:5;background:#e4e4e7;backdrop-filter:blur(8px)}
/* Tabular numbers for aligned digits */
.fp-num{font-variant-numeric:tabular-nums;text-align:right;font-family:"SF Mono","Cascadia Mono","Menlo",ui-monospace,monospace;font-size:9px}
/* Grid header row (legacy flex — kept for summary panel) */
.fp-hdr{display:flex;align-items:center;padding:5px 8px;font-size:8px;color:rgba(0,0,0,0.35);font-weight:700;text-transform:uppercase;letter-spacing:.8px;border-bottom:0.5px solid rgba(0,0,0,0.08);background:#e4e4e7}
/* Grid data row (legacy flex — kept for summary panel) */
.fp-row{display:flex;align-items:center;padding:5px 8px;font-size:9px;border-bottom:0.5px solid rgba(0,0,0,0.04);transition:all .15s;cursor:pointer;border-left:2px solid transparent}
.fp-row:hover{background:rgba(0,0,0,.06);border-left-color:rgba(0,0,0,.3)}
.fp-row.sel{background:rgba(0,0,0,.1);border-left-color:#18181b}
.fp-row:nth-child(even){background:rgba(0,0,0,.02)}
.fp-row:nth-child(even):hover{background:rgba(0,0,0,.06)}
/* Group header row (legacy flex — kept for summary panel) */
.fp-grp{display:flex;align-items:center;padding:7px 10px;font-size:10px;background:rgba(0,0,0,.02);border-radius:6px;margin:2px 2px 0;cursor:pointer;border-left:3px solid #18181b;transition:all .15s}
.fp-grp:hover{background:rgba(0,0,0,.04);border-left-width:4px}
/* ─── Real HTML Table for Takeoff / Cost Dashboard ─── */
.fp-tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px}
.fp-tbl th{position:sticky;top:0;z-index:5;background:#e4e4e7;padding:6px 10px;font-size:8px;color:rgba(0,0,0,0.35);font-weight:700;text-transform:uppercase;letter-spacing:.8px;text-align:right;border-bottom:0.5px solid rgba(0,0,0,0.08);white-space:nowrap}
.fp-tbl th:first-child{text-align:left;padding-left:14px}
.fp-tbl th.lms{text-align:center}
.fp-tbl td{padding:6px 10px;border-bottom:0.5px solid rgba(0,0,0,0.04);font-variant-numeric:tabular-nums;font-family:"SF Mono","Cascadia Mono","Menlo",ui-monospace,monospace;font-size:10px;text-align:right;color:#52525b;white-space:nowrap;vertical-align:middle}
.fp-tbl td:first-child{text-align:left;font-family:inherit;color:#18181b;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.fp-tbl td.lms{text-align:center;padding:6px 6px}
/* Data row hover + selection */
.fp-tbl tr.fp-item{cursor:pointer;border-left:2px solid transparent;transition:background .12s}
.fp-tbl tr.fp-item:hover{background:rgba(0,0,0,.06)}
.fp-tbl tr.fp-item:hover td:first-child{color:#09090b}
.fp-tbl tr.fp-item.sel{background:rgba(0,0,0,.1)}
.fp-tbl tr.fp-item.sel td:first-child{color:#09090b}
.fp-tbl tr.fp-item:nth-child(even){background:rgba(0,0,0,.02)}
.fp-tbl tr.fp-item:nth-child(even):hover{background:rgba(0,0,0,.06)}
/* Division / Group header row */
.fp-tbl tr.fp-div{cursor:pointer;background:rgba(0,0,0,.02)}
.fp-tbl tr.fp-div:hover{background:rgba(0,0,0,.04)}
.fp-tbl tr.fp-div td{padding:8px 10px;font-family:inherit;font-size:11px;font-weight:700;color:#09090b;border-bottom:0.5px solid rgba(0,0,0,0.08)}
.fp-tbl tr.fp-div td:first-child{border-left:3px solid #52525b}
/* Cost code grandchild row */
.fp-tbl tr.fp-code td{padding:4px 10px;font-size:9px;color:rgba(0,0,0,0.40);background:rgba(0,0,0,.02);border-bottom:0.5px solid rgba(0,0,0,0.04)}
.fp-tbl tr.fp-code td:first-child{padding-left:52px;color:#52525b;font-weight:600}
/* Column color classes */
.fp-tbl .c-lab{color:#52525b}
.fp-tbl .c-mat{color:#71717a}
.fp-tbl .c-sub{color:#a1a1aa}
.fp-tbl .c-tot{color:#09090b;font-weight:700}
.fp-tbl .c-dim{color:rgba(0,0,0,0.35);font-family:inherit;font-size:9px}
.fp-tbl .c-pct{color:#52525b;font-size:9px;font-weight:600}
/* L/M/S micro bar */
.fp-lms{display:flex;height:5px;border-radius:3px;overflow:hidden;margin-top:3px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.fp-lms>div{transition:width .3s ease}
/* Section header */
.fp-sec{font-size:9px;font-weight:700;color:rgba(0,0,0,0.35);text-transform:uppercase;letter-spacing:.8px;padding:10px 8px 5px;border-bottom:0.5px solid rgba(0,0,0,0.08);background:transparent}
/* KPI card */
.fp-kpi{padding:8px 10px;background:#FFFFFF;border-radius:8px;border:0.5px solid rgba(0,0,0,0.06);text-align:center;transition:all .25s;position:relative;overflow:hidden}
.fp-kpi:hover{border-color:rgba(0,0,0,0.12);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.fp-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.15),transparent)}
/* Export button bar */
.fp-export-bar{display:flex;gap:5px;padding:6px 10px;border-top:0.5px solid rgba(0,0,0,0.08);background:#fafafa}

/* --- CANVAS --- */
.canvas-wrap{flex:1;overflow:hidden;position:relative;background:#E5E7EB;z-index:0}
.canvas-inner{position:absolute;transform-origin:0 0;will-change:transform}
/* SVG rendering quality — macOS-native smooth curves and text */
.canvas-inner svg{shape-rendering:geometricPrecision}
.canvas-inner svg text{text-rendering:optimizeLegibility}

/* --- SPLIT COMPARE (Overlay Side-by-Side) --- */
.split-compare-container{display:flex;width:100%;height:100%;position:absolute;top:0;left:0}
.split-panel{flex:1;overflow:hidden;position:relative;background:#E5E7EB}
.split-compare-divider{width:2px;background:rgba(0,0,0,0.3);flex-shrink:0;z-index:5}
body.dark-mode .split-panel{background:#fafafa}

/* --- SPLIT VIEW 3D --- */
.split-handle-v{width:6px;cursor:col-resize;background:rgba(0,0,0,0.08);flex-shrink:0;transition:background .15s}
.split-handle-v:hover{background:rgba(0,0,0,0.25)}
.split-handle-v:active{background:#18181b}
.align-crosshair{position:absolute;width:20px;height:20px;border:2px solid #18181b;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:50;box-shadow:0 0 0 1px rgba(0,0,0,0.5)}
.align-crosshair::before,.align-crosshair::after{content:"";position:absolute;background:#18181b}
.align-crosshair::before{width:2px;height:10px;left:7px;top:-5px}
.align-crosshair::after{width:10px;height:2px;left:-5px;top:7px}

/* --- STATUS BAR --- */
.sbar{display:flex;align-items:center;height:26px;background:#e4e4e7;border-top:0.5px solid rgba(0,0,0,0.08);padding:0 12px;font-size:10px;color:#71717a;gap:16px;font-weight:500;z-index:50;flex-shrink:0}
.sbar .si{display:flex;align-items:center;gap:4px}

/* --- COMPONENTS --- */
.reuse-ind{position:fixed;bottom:34px;right:20px;background:#18181b;color:#fff;padding:5px 12px;border-radius:14px;font-size:10px;font-weight:700;z-index:100;animation:pulse 2s infinite;box-shadow:0 2px 12px rgba(0,0,0,.15)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.reply-box{background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.08);border-radius:6px;padding:5px;margin-top:4px}
.cut-badge{background:#EF4444;color:#fff;font-size:7px;padding:1px 5px;border-radius:8px;margin-left:4px}
.sbtn{padding:4px 10px;background:#e4e4e7;color:#52525b;border-radius:6px;font-size:10px;cursor:pointer;border:0.5px solid rgba(0,0,0,0.10);font-weight:600;transition:all .2s ease;letter-spacing:.2px}
.sbtn:hover{background:#e4e4e7;color:#18181b;border-color:rgba(0,0,0,0.15)}
.sbtn:active{transform:scale(.97)}
.sbtn.pri{background:#18181b;color:#fff;border-color:rgba(0,0,0,0.3);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.sbtn.pri:hover{background:#09090b;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sbtn.sm{font-size:9px;padding:3px 8px;border-radius:6px}
.sbtn.dan{background:rgba(255,69,58,0.12);color:#EF4444;border-color:rgba(255,69,58,0.2)}
.sbtn.dan:hover{background:rgba(255,69,58,0.2);border-color:rgba(255,69,58,0.3)}
.sbtn.disabled{pointer-events:none;opacity:0.4;cursor:not-allowed}
.phead{font-size:10px;color:#18181b;font-weight:600;margin:8px 0 4px;padding-bottom:4px;border-bottom:0.5px solid rgba(0,0,0,0.08);text-transform:uppercase;letter-spacing:.5px}
.prow{display:flex;align-items:center;gap:4px;margin:3px 0;font-size:9px}
.prow label{width:50px;color:#71717a;flex-shrink:0;font-weight:500}
.prow input,.prow select{flex:1;min-width:0}
.thumb{padding:6px;border:2px solid transparent;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;margin:0 0 6px 0;transition:all .15s}
.thumb:hover{background:rgba(0,0,0,0.03)}
.thumb.act{border-color:#18181b;background:rgba(0,0,0,0.08);box-shadow:none}
.thumb .tn{font-size:10px;color:#71717a}
.thumb .tn b{color:#18181b;font-size:11px;font-weight:600}
.ml-table{width:100%;border-collapse:collapse;font-size:9px}
.ml-table th{background:#e4e4e7;color:rgba(0,0,0,0.35);padding:4px 5px;text-align:left;border-bottom:0.5px solid rgba(0,0,0,0.08);cursor:pointer;white-space:nowrap;position:sticky;top:0;z-index:1;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.ml-table th:hover{color:#52525b}
.ml-table td{padding:3px 5px;border-bottom:0.5px solid rgba(0,0,0,0.04)}
.ml-table tr:hover{background:rgba(0,0,0,0.03)}
.ml-table tr.sel{background:rgba(0,0,0,0.12)}
.ml-footer{display:flex;gap:4px;padding:5px;border-top:0.5px solid rgba(0,0,0,0.08);background:#e4e4e7;align-items:center;flex-wrap:wrap}
.tc-set{margin:3px 0;border:0.5px solid rgba(0,0,0,0.08);border-radius:6px;overflow:hidden}
.tc-set-head{display:flex;align-items:center;padding:5px 8px;background:#fafafa;cursor:pointer;gap:6px;transition:background .15s}
.tc-set-head:hover{background:#e4e4e7}
.tc-tool{display:flex;align-items:center;padding:4px 10px;gap:8px;cursor:pointer;font-size:10px;transition:background .15s}
.tc-tool:hover{background:rgba(0,0,0,0.03)}
.overlay-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;z-index:200;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.overlay-box{background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.1);border-radius:12px;padding:20px;min-width:360px;max-width:520px;max-height:80vh;overflow-y:auto;box-shadow:0 22px 70px rgba(0,0,0,0.10),0 0 10px rgba(0,0,0,0.04)}
.overlay-box h3{color:#18181b;margin-bottom:10px;font-size:14px;font-weight:600}
.tab-bar{display:flex;gap:1px;margin-bottom:8px;background:#fafafa;border-radius:6px;overflow:hidden}
.tab-bar button{flex:1;padding:5px 2px;font-size:9px;color:#71717a;background:#fafafa;font-weight:500;transition:all .15s}
.tab-bar button:hover{color:#52525b}
.tab-bar button.act{color:#18181b;background:#FFFFFF}
.toast{position:fixed;top:44px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.95);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);color:#18181b;padding:8px 20px;border-radius:10px;font-size:11px;z-index:500;pointer-events:none;animation:toastIn .3s;border:0.5px solid rgba(0,0,0,0.1);box-shadow:0 8px 30px rgba(0,0,0,0.10);font-weight:500}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-12px)}}
.toast-exit{animation:toastOut .3s forwards}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
.cmd-modal{position:fixed;top:15%;left:50%;transform:translateX(-50%);width:440px;background:rgba(255,255,255,0.95);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:0.5px solid rgba(0,0,0,0.4);border-radius:12px;box-shadow:0 22px 70px rgba(0,0,0,0.12),0 0 10px rgba(0,0,0,0.04);z-index:250;overflow:hidden}
.cmd-modal input{width:100%;padding:12px 14px;background:rgba(248,250,252,0.9);border:none;border-bottom:0.5px solid rgba(0,0,0,0.08);color:#18181b;font-size:14px}
.cmd-item{padding:7px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:11px;transition:background .12s}
.cmd-item:hover{background:rgba(0,0,0,0.04)}
.legend-box{border:0.5px solid rgba(0,0,0,0.08);border-radius:6px;padding:8px;margin:4px 0;background:#FFFFFF}
.progress-bar{height:4px;background:rgba(0,0,0,0.08);border-radius:2px;overflow:hidden;margin:4px 0}
.progress-fill{height:100%;background:#18181b;border-radius:2px;transition:width .3s}
.badge{display:inline-block;padding:1px 6px;border-radius:8px;font-size:8px;font-weight:600}
/* --- SEARCH HIGHLIGHTS --- */
.search-highlight{background:rgba(0,0,0,0.10);color:#000;padding:0 1px;border-radius:1px}
.search-highlight.current{background:#18181b;color:#fff}
.dark-canvas rect:first-child{fill:#E5E7EB!important}

/* --- WELCOME SCREEN --- */
.welcome{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fafafa;z-index:10;pointer-events:all;padding:60px 24px}
.welcome h1{font-size:30px;color:#18181b;font-weight:800;letter-spacing:-1px;margin-bottom:6px}
.welcome h1 span{color:#18181b}
.welcome p{color:#a1a1aa;font-size:12px;margin-bottom:28px;text-align:center}
.welcome-btn{padding:12px 0;background:#18181b;color:#fff;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;box-shadow:0 2px 12px rgba(0,0,0,.15);transition:all .2s ease;width:280px;text-align:center;display:block}
.welcome-btn:hover{background:#09090b;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.28)}
.welcome-sub{margin-top:16px;color:#c4c4c7;font-size:10px}
.welcome-sub kbd{background:#f4f4f5;padding:1px 6px;border-radius:4px;font-family:inherit;color:#71717a;border:1px solid #e4e4e7;font-size:9px}
.loading-spinner{width:24px;height:24px;border:3px solid #e4e4e7;border-top-color:#18181b;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════ Smart Tracker ══════════ */
.tracker-dash{padding:6px;background:#FFFFFF;border-radius:6px;margin-bottom:6px}
.tracker-stats{display:flex;gap:6px;margin-bottom:6px}
.tracker-stat{flex:1;text-align:center;padding:6px 4px;border-radius:6px;background:#FFFFFF;border-left:3px solid transparent}
.tracker-stat-num{font-size:18px;font-weight:700;line-height:1.1}
.tracker-stat-lbl{font-size:7px;color:rgba(0,0,0,0.35);text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
.tracker-bar{position:relative;height:6px;background:rgba(0,0,0,0.08);border-radius:3px;overflow:hidden}
.tracker-bar-fill{height:100%;border-radius:3px;transition:width .3s ease}
.tracker-bar-lbl{position:absolute;right:4px;top:-1px;font-size:7px;color:rgba(0,0,0,0.25)}
.tracker-filters{padding:4px 0;border-bottom:0.5px solid rgba(0,0,0,0.08);margin-bottom:4px}
.tracker-search{width:100%;padding:4px 8px;font-size:10px;background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.10);border-radius:6px;color:#18181b;outline:none;margin-bottom:4px;box-sizing:border-box}
.tracker-search:focus{border-color:#18181b}
.tracker-filter-row{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.tracker-fbtn{padding:2px 8px;font-size:8px;border-radius:10px;border:0.5px solid rgba(0,0,0,0.10);background:transparent;color:#71717a;cursor:pointer;transition:all .15s}
.tracker-fbtn:hover{color:#18181b;border-color:#18181b}
.tracker-fbtn.active{background:#18181b;color:#fff;border-color:#18181b}
.tracker-sort{font-size:8px;padding:2px 4px;background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.10);border-radius:6px;color:#52525b;margin-left:auto;cursor:pointer}
.tracker-view-toggle{display:flex;gap:2px;margin-top:4px}
.tracker-vbtn{padding:2px 8px;font-size:10px;border-radius:6px;border:0.5px solid rgba(0,0,0,0.08);background:transparent;color:rgba(0,0,0,0.30);cursor:pointer;transition:all .15s}
.tracker-vbtn:hover{color:#18181b}
.tracker-vbtn.active{background:rgba(0,0,0,0.12);color:#09090b;border-color:rgba(0,0,0,0.3)}
.tracker-list{overflow-y:auto;max-height:calc(100vh - 340px)}
.tracker-row{display:flex;align-items:stretch;border-radius:6px;margin-bottom:2px;cursor:pointer;transition:background .15s;overflow:hidden}
.tracker-row:hover{background:rgba(0,0,0,0.03)}
.tracker-row.sel{background:rgba(0,0,0,0.10);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.3)}
.tracker-row.sm{font-size:9px}
.tracker-row-prio{width:3px;flex-shrink:0;border-radius:3px 0 0 3px}
.tracker-row-body{flex:1;padding:5px 8px;min-width:0}
.tracker-row-top{display:flex;align-items:center;gap:4px}
.tracker-row-icon{font-size:10px;flex-shrink:0}
.tracker-row-title{flex:1;font-size:10px;color:#18181b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracker-row-meta{display:flex;gap:6px;font-size:7px;color:rgba(0,0,0,0.30);margin-top:2px}
.tracker-chip{font-size:7px;padding:1px 6px;border-radius:8px;white-space:nowrap;font-weight:600}
.tracker-board{display:flex;gap:4px;overflow-x:auto;min-height:200px;padding-bottom:4px}
.tracker-col{flex:1;min-width:100px;background:#FFFFFF;border-radius:6px;display:flex;flex-direction:column}
.tracker-col-hdr{padding:5px 6px;font-size:9px;font-weight:700;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid transparent}
.tracker-col-cnt{font-size:8px;color:rgba(0,0,0,0.30);background:#fafafa;padding:1px 5px;border-radius:8px}
.tracker-card{padding:5px 6px;margin:2px 3px;border-radius:6px;background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.06);cursor:pointer;transition:all .15s}
.tracker-card:hover{border-color:rgba(0,0,0,0.3);background:rgba(0,0,0,0.02)}
.tracker-card.sel{border-color:rgba(0,0,0,0.4);box-shadow:0 0 6px rgba(0,0,0,.2)}
.tracker-map{overflow-y:auto;max-height:calc(100vh - 340px)}
.tracker-map-pg{margin-bottom:2px}
.tracker-map-hdr{display:flex;align-items:center;gap:4px;padding:5px 6px;cursor:pointer;border-radius:6px;transition:background .15s}
.tracker-map-hdr:hover{background:rgba(0,0,0,0.03)}
.tool.action{border:1px dashed #18181b;border-radius:6px}
.tracker-row-wrap{margin-bottom:2px}
.tracker-row.overdue{border-left:2px solid #EF4444}
.tracker-card.overdue{border-left:2px solid #EF4444}
.tracker-expand{padding:6px 8px 8px 12px;background:#f4f4f5;border:0.5px solid rgba(0,0,0,0.08);border-top:none;border-radius:0 0 6px 6px;margin-top:-2px}
.tracker-expand-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:4px}
.tracker-expand-field{display:flex;flex-direction:column;gap:1px}
.tracker-expand-field.full{grid-column:span 2;margin-top:2px}
.tracker-expand-field label{font-size:7px;color:rgba(0,0,0,0.30);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.tracker-expand-field input,.tracker-expand-field select{font-size:8px;padding:2px 4px;background:#FFFFFF;color:#18181b;border:0.5px solid rgba(0,0,0,0.10);border-radius:4px}
.tracker-expand-hist{margin-top:4px;padding-top:4px;border-top:0.5px solid rgba(0,0,0,0.08)}
.track-pipeline{display:flex;gap:2px;margin-top:3px}
.track-pipeline.compact{gap:1px;margin-top:2px}
.track-pipeline-dot{font-size:7px;padding:1px 6px;border-radius:10px;border:1px solid;cursor:pointer;transition:all .15s;font-weight:600;line-height:1.2}
.track-pipeline.compact .track-pipeline-dot{padding:0;width:10px;height:4px;border-radius:2px;font-size:0}
.track-pipeline-dot:hover{opacity:0.8;transform:scale(1.1)}
.track-pipeline-dot.current{font-weight:700}
.track-pipeline-dot.past{opacity:0.7}
.track-activity{max-height:180px;overflow-y:auto;margin-top:4px}
.track-activity-entry{display:flex;gap:4px;align-items:flex-start;padding:2px 0;border-bottom:0.5px solid rgba(0,0,0,0.04)}

/* ═══ AI Assistant Panel ═══ */
.ai-panel{display:flex;flex-direction:column;height:100%}
.ai-messages{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.ai-msg{max-width:90%;padding:8px 10px;border-radius:10px;font-size:10px;line-height:1.5;word-wrap:break-word}
.ai-msg-user{align-self:flex-end;background:#18181b;color:#fff;border-bottom-right-radius:2px}
.ai-msg-ai{align-self:flex-start;background:#fafafa;color:#18181b;border-bottom-left-radius:2px;border:0.5px solid rgba(0,0,0,0.08)}
.ai-msg-text{white-space:pre-wrap}
.ai-msg-source{margin-top:4px;font-size:8px;color:rgba(0,0,0,0.30)}
.ai-msg-conf{font-size:7px;color:rgba(0,0,0,0.25);margin-top:1px}
.ai-input-wrap{display:flex;gap:4px;padding:8px;border-top:0.5px solid rgba(0,0,0,0.08);background:#fafafa}
.ai-input{flex:1;background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.10);border-radius:8px;padding:8px 10px;color:#18181b;font-size:10px;outline:none;transition:border-color .15s}
.ai-input:focus{border-color:#18181b}
.ai-input:disabled{opacity:0.5}
.ai-send-btn{width:30px;height:30px;border-radius:8px;background:#18181b;color:#fff;border:none;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ai-send-btn:hover{background:#09090b}
.ai-send-btn:disabled{opacity:0.4;cursor:not-allowed}
.ai-loading-dot{display:inline-block;width:6px;height:6px;background:#71717a;border-radius:50%;animation:ai-pulse 1s ease-in-out infinite}
@keyframes ai-pulse{0%,100%{opacity:0.3;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}

/* ═══ DXF Entity Hover Effects ═══ */
.dxf-ent{transition:filter 0.12s ease}
.dxf-ent:hover{filter:brightness(1.3) drop-shadow(0 0 2px rgba(0,0,0,0.4))}

/* ═══ AI Consent Dialog ═══ */
.ai-consent-dialog{width:420px;background:#FFFFFF;border:0.5px solid rgba(0,0,0,0.1);border-radius:12px;padding:24px;box-shadow:0 22px 70px rgba(0,0,0,0.10),0 0 10px rgba(0,0,0,0.04)}

/* ══════════════════════════════════════════════════════════
   NATIVE macOS POLISH — Tooltips, Focus, Press, Animations
   ══════════════════════════════════════════════════════════ */

/* ── CSS Tooltips (data-tip attribute) ── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);background:rgba(30,41,59,0.95);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);color:rgba(255,255,255,0.95);padding:4px 10px;border-radius:6px;font-size:10px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.15s ease 0.5s;z-index:10000;border:0.5px solid rgba(0,0,0,0.15);box-shadow:0 4px 16px rgba(0,0,0,0.15);letter-spacing:0.1px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
[data-tip]:hover::after{opacity:1}
[data-tip]:active::after{opacity:0;transition-delay:0s}
/* Tooltip positioning variants */
[data-tip-pos="left"]::after{top:50%;left:auto;right:100%;transform:translateY(-50%) translateX(-6px)}
[data-tip-pos="right"]::after{top:50%;left:100%;transform:translateY(-50%) translateX(6px)}
[data-tip-pos="top"]::after{top:auto;bottom:100%;transform:translateX(-50%) translateY(-4px)}

/* ── Focus-visible states (keyboard navigation only) ── */
.tool:focus-visible,
.tbtn:focus-visible,
.lptab:focus-visible,
.rptab:focus-visible,
.fptab:focus-visible,
.sbtn:focus-visible,
.hdr-dd-item:focus-visible,
.welcome-btn:focus-visible,
.hdr-menu .tbtn:focus-visible,
.tb-tab:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,0.6);border-radius:4px;z-index:1}
.cmd-item:focus-visible{outline:2px solid #18181b;outline-offset:-2px;border-radius:4px}
.macos-toggle:focus-visible{outline:2px solid #18181b;outline-offset:2px;border-radius:9px}

/* ── Button press / active states ── */
.tool:active{transform:scale(0.92);transition-duration:0.06s}
.tbtn:active{transform:scale(0.94);transition-duration:0.06s}
.lptab:active,.rptab:active,.fptab:active{transform:scale(0.95);transition-duration:0.06s}
.welcome-btn:active{transform:translateY(0) scale(0.97)}
.hdr-dd-item:active{background:rgba(0,0,0,0.10)}
.tb-tab:active{transform:scale(0.96)}
.thumb:active{transform:scale(0.97);transition-duration:0.06s}

/* ── Panel slide animations ── */
.lpanel,.rpanel{transition:width 0.2s ease,min-width 0.2s ease,max-width 0.2s ease,opacity 0.18s ease}
.lpanel.collapsed,.rpanel.collapsed{opacity:0;pointer-events:none;border-color:transparent;box-shadow:none;overflow:hidden}
.fpanel{transition:height 0.2s ease,min-height 0.2s ease,max-height 0.2s ease,opacity 0.18s ease}
.fpanel.collapsed{opacity:0;pointer-events:none;border-color:transparent;box-shadow:none;overflow:hidden}

/* ── Typography improvements ── */
.lptab{padding:6px 4px;gap:2px}
.lptab .lp-icon{font-size:16px;display:flex;align-items:center;justify-content:center}
.lptab .lp-label{font-size:9px;font-weight:600;letter-spacing:0.2px}
.rptab{font-size:9px;padding:4px 8px}
.tool{min-width:38px;gap:1px}
.tool .tool-icon{font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;width:16px;height:16px}
.tool .tool-name{font-size:7px;letter-spacing:0.15px}

/* ── Scrollbar polish ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:3px}
*:hover>::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15)}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.25)!important}
::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,0.35)!important}

/* ── Resize handle improvements ── */
.resize-handle-l{width:8px}
.resize-handle-l::after{width:3px;height:28px;border-radius:1.5px;background:rgba(0,0,0,0.08)}
.resize-handle-l:hover::after,.resize-handle-l:active::after{height:44px;background:rgba(0,0,0,0.6)}
.resize-handle-r::after{width:3px;height:28px;border-radius:1.5px;background:rgba(0,0,0,0.08)}
.resize-handle-r:hover::after,.resize-handle-r:active::after{height:44px;background:rgba(0,0,0,0.6)}

/* ── SVG icon alignment in tool buttons ── */
.tool-icon svg,.tb-icon svg,.lp-icon svg{display:block}

/* ── Vibrancy-ready panel backgrounds ── */
.lpanel{background:rgba(255,255,255,0.95)}
.rpanel{background:rgba(255,255,255,0.95)}
body.dark-mode .lpanel,body.dark-mode .rpanel{background:rgba(255,255,255,0.95)}

/* ── Modal overlay transitions ── */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:200}
.modal-overlay.visible{opacity:1;pointer-events:auto}
.modal-overlay .modal-content{transform:scale(0.96) translateY(8px);transition:transform 0.2s ease}
.modal-overlay.visible .modal-content{transform:scale(1) translateY(0)}

/* ── macOS toggle switches ── */
.macos-toggle{position:relative;width:32px;height:18px;background:rgba(0,0,0,0.15);border-radius:9px;cursor:pointer;transition:background 0.2s ease;display:inline-block;vertical-align:middle;flex-shrink:0}
.macos-toggle.on{background:#18181b}
.macos-toggle::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform 0.2s ease;box-shadow:0 1px 3px rgba(0,0,0,0.3)}
.macos-toggle.on::after{transform:translateX(14px)}

/* ── Window drag region ── */
.topbar{-webkit-app-region:drag}
.topbar button,.topbar select,.topbar input,.topbar .tbtn,.topbar .tool,.topbar .tb-tab,.topbar .hdr-dropdown,.topbar a{-webkit-app-region:no-drag}

/* ── Accessibility: reduced motion ── */
@media(prefers-reduced-motion:reduce){*,.toast,.toast-exit,.modal-overlay,.modal-overlay .modal-content,.lpanel,.rpanel,.fpanel,.thumb,.sbtn,.tool,.tbtn,.tb-tab,.lptab,.rptab,.fptab,.macos-toggle,.macos-toggle::after{animation:none!important;transition:none!important}}

/* ── Selection styling ── */
::selection{background:rgba(0,0,0,0.15);color:#18181b}

/* ── Input/select hover state ── */
input:hover:not(:focus):not(:disabled){border-color:rgba(0,0,0,0.4)}

/* ── Command palette entrance animation ── */
.cmd-modal{opacity:0;pointer-events:none;transform:scale(0.97) translateY(-4px);transition:opacity 0.15s ease,transform 0.15s ease}
.cmd-modal.visible{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}

/* ── Document tab hover/transition ── */
.doc-tab{transition:background 0.15s ease,color 0.15s ease;cursor:pointer}
.doc-tab:hover{background:rgba(0,0,0,0.04)}

/* ── Inline button utility ── */
.ibtn{background:transparent;border:1px solid rgba(0,0,0,0.10);border-radius:4px;color:#52525b;cursor:pointer;transition:all 0.15s ease}
.ibtn:hover{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.15);color:#18181b}
.ibtn:active{transform:scale(0.97)}

/* ── Spinner animation (keyframes shared with .loading-spinner above) ── */
.spinner{width:16px;height:16px;border:2px solid rgba(0,0,0,0.1);border-top-color:#18181b;border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block}
.spinner.lg{width:24px;height:24px;border-width:2.5px}

/* ── JS hover migration classes ── */
.pg-thumb{transition:background 0.15s ease,border-color 0.15s ease,transform 0.15s ease}
.pg-thumb:hover{background:#e4e4e7 !important;transform:scale(1.02)}
.pg-thumb.del-hover:hover{background:#FEE2E2 !important}
.tpl-card{transition:border-color 0.15s ease}
.tpl-card:hover{border-color:rgba(0,0,0,0.20) !important}
.batch-card{transition:background 0.15s ease,border-color 0.15s ease}
.batch-card:hover{background:rgba(0,0,0,0.03) !important}

/* ── Page list scroll-snap ── */
.pg-list{scroll-snap-type:y proximity}
.pg-list > *{scroll-snap-align:start}

/* ── Layer row transitions ── */
.layer-row{transition:opacity 0.15s ease,background 0.15s ease}

/* ── Skeleton shimmer loader ── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,rgba(0,0,0,0.04) 25%,rgba(0,0,0,0.08) 50%,rgba(0,0,0,0.04) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;border-radius:4px}

/* ═══════════════════════════════════════════════════════════════ */
/* ── Touch support (iOS/iPad) ──                                 */
/* ═══════════════════════════════════════════════════════════════ */
.canvas-wrap{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ── Mobile floating undo/redo bar ── */
.mobile-undo-bar{position:fixed;bottom:80px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:120}
.mobile-undo-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.10);color:#52525b;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 8px rgba(0,0,0,0.10)}
.mobile-undo-btn:active{background:rgba(0,0,0,0.2);color:#fff}

/* ── Mobile bottom toolbar (iPhone) ── */
.mobile-toolbar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:stretch;background:rgba(255,255,255,0.95);border-top:1px solid rgba(0,0,0,0.08);padding:4px 4px calc(4px + var(--safe-bottom));z-index:130;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);gap:2px}
.mobile-tool{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;background:none;border:none;color:#71717a;font-size:9px;cursor:pointer;border-radius:8px;min-height:52px}
.mobile-tool.act{color:#18181b;background:rgba(0,0,0,0.12)}
.mobile-tool:active{background:rgba(0,0,0,0.04)}
.mobile-tool svg{width:20px;height:20px}

/* ── Mobile panel edge toggles ── */
.mobile-panel-toggles{position:fixed;top:50%;z-index:110;pointer-events:none}
.mobile-edge-tab{position:fixed;width:28px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.90);border:1px solid rgba(0,0,0,0.10);color:#71717a;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mobile-edge-tab.left{left:0;top:50%;transform:translateY(-50%);border-radius:0 8px 8px 0;border-left:none}
.mobile-edge-tab.right{right:0;top:50%;transform:translateY(-50%);border-radius:8px 0 0 8px;border-right:none}
.mobile-edge-tab:active{background:rgba(0,0,0,0.15);color:#fff}

/* ═══════════════════════════════════════════════════════════════ */
/* ── iPhone responsive layout (< 768px) ──                       */
/* ═══════════════════════════════════════════════════════════════ */
@media(max-width:767px){
  /* Topbar: compact */
  .topbar{min-height:44px;padding:2px 8px;-webkit-app-region:no-drag}
  .topbar .logo span{display:none}

  /* Toolbar: horizontal scroll */
  .toolbar .tb-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
  .toolbar .tb-tabs::-webkit-scrollbar{display:none}
  .toolbar .tb-content{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;scrollbar-width:none}
  .toolbar .tb-content::-webkit-scrollbar{display:none}

  /* Touch-friendly tool/button sizes */
  .tool{width:44px;height:44px;min-width:44px}
  .tbtn{padding:6px 12px;min-height:44px}
  .sbtn{min-height:44px;padding:8px 16px}
  .tb-tab{min-height:36px;padding:4px 12px}

  /* Panels: full-width slide-over overlays */
  .lpanel{position:fixed!important;top:0;bottom:0;left:0;width:100vw!important;min-width:100vw!important;max-width:100vw!important;z-index:150;transition:transform 0.25s ease!important}
  .lpanel.collapsed{transform:translateX(-100%)!important;opacity:1!important;pointer-events:auto}
  .rpanel{position:fixed!important;top:0;bottom:0;right:0;width:100vw!important;min-width:100vw!important;max-width:100vw!important;z-index:150;transition:transform 0.25s ease!important}
  .rpanel.collapsed{transform:translateX(100%)!important;opacity:1!important;pointer-events:auto}

  /* Footer panel: bottom sheet */
  .fpanel{position:fixed!important;left:0;right:0;bottom:0;z-index:140;border-radius:16px 16px 0 0;max-height:70vh}

  /* Hide resize handles on mobile */
  .resize-handle-l,.resize-handle-r,.resize-handle-f{display:none!important}

  /* Inputs: prevent iOS zoom on focus */
  input,select,textarea{font-size:16px!important}

  /* Status bar: compact */
  .sbar{font-size:9px;height:24px;padding:0 8px;overflow-x:auto}
  .sbar .si{white-space:nowrap}

  /* Panels need close button */
  .lptabs,.rptabs{min-height:44px}

  /* Bottom padding for mobile toolbar */
  .sbar{margin-bottom:60px}
}

/* ═══════════════════════════════════════════════════════════════ */
/* ── iPad responsive layout (768px–1024px) ──                    */
/* ═══════════════════════════════════════════════════════════════ */
@media(min-width:768px) and (max-width:1024px){
  .tool{width:40px;height:40px;min-width:40px}
  .tbtn{min-height:40px}
  .sbtn{min-height:40px}
  input,select,textarea{font-size:16px!important}
}

/* ═══════════════════════════════════════════════════════════════ */
/* ── Hide mobile-only elements on desktop ──                     */
/* ═══════════════════════════════════════════════════════════════ */
@media(min-width:768px){
  .mobile-toolbar{display:none!important}
  .mobile-panel-toggles{display:none!important}
}
@media(min-width:1025px){
  .mobile-undo-bar{display:none!important}
}