*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg-deep:#141418;--bg:#1a1a20;--bg-card:#212128;--bg-card-hover:#28282f;
  --orange:#e86a10;--orange-light:#ff8534;
  --cyan:#4fc3f7;--lime:#a8ff30;
  --text:#c8c8d2;--text-dim:#8888a0;--text-bright:#f0f0f8;
  --border:rgba(255,255,255,0.08);
  --glow-orange:0 0 40px rgba(232,106,16,0.2);
  --glow-cyan:0 0 40px rgba(79,195,247,0.15);
  --radius:12px;
  --canvas-bg:#1e1e26;
  --font-display:'Syne',sans-serif;--font-body:'Outfit',sans-serif;--font-mono:'IBM Plex Mono',monospace;
}
html,body{height:100%;width:100%;max-width:100vw;overflow:hidden;background:var(--bg-deep);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;}
::selection{background:var(--orange);color:var(--bg-deep);}

/* NAV */
#nav{height:50px;background:rgba(20,20,24,0.85);backdrop-filter:blur(20px);display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--border);gap:12px;z-index:100;position:relative;}
#nav .nav-brand{display:flex;align-items:center;text-decoration:none;}
#nav .nav-brand img{height:30px;width:auto;transition:opacity .2s;}
#nav .nav-brand:hover img{opacity:.85;}
#nav .nav-breadcrumb{font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;color:var(--text-dim);display:flex;align-items:center;gap:6px;}
#nav .nav-breadcrumb .bc-sep{color:var(--text-dim);opacity:.5;}
#nav .nav-breadcrumb .bc-current{color:var(--text-bright);font-weight:500;}
#nav .spacer{flex:1;}
#nav .nav-back{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dim);text-decoration:none;padding:5px 12px;border:1px solid var(--border);border-radius:4px;transition:all .2s;white-space:nowrap;}
#nav .nav-back:hover{color:var(--orange);border-color:var(--orange);}
#nav .admin-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:18px;padding:6px;border-radius:4px;transition:color .2s;}
#nav .admin-btn:hover{color:var(--orange);}

/* PAGE TRANSITION */
.page-transition-overlay{position:fixed;inset:0;background:var(--bg-deep);z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.page-transition-overlay.active{opacity:1;pointer-events:all;}
.page-fade-in{animation:pageFadeIn .4s ease forwards;}
@keyframes pageFadeIn{from{opacity:0;}to{opacity:1;}}

/* TOOLBAR */
#toolbar{height:44px;background:var(--bg-card);display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--border);gap:4px;flex-shrink:0;overflow-x:auto;overflow-y:hidden;max-width:100vw;width:100%;}
#toolbar::-webkit-scrollbar{height:3px;}
#toolbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}

/* Toolbar dropdown menus */
.tb-dropdown{position:relative;}
.tb-dropdown-btn{background:none;border:1px solid transparent;color:var(--text-dim);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;font-family:var(--font-mono);transition:all .15s;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.tb-dropdown-btn:hover{color:var(--text-bright);background:var(--bg-card-hover);}
.tb-dropdown-btn.active,.tb-dropdown.open .tb-dropdown-btn{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.tb-dropdown-btn svg{width:16px;height:16px;fill:currentColor;}
.tb-dropdown-btn::after{content:'';border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;margin-left:2px;opacity:0.5;}
.tb-dropdown-menu{display:none;position:absolute;top:100%;left:0;margin-top:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:6px;min-width:180px;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,0.5);}
.tb-dropdown.open .tb-dropdown-menu{display:flex;flex-wrap:wrap;gap:2px;}
.tb-dropdown-menu .tb-btn{width:100%;justify-content:flex-start;}
.tb-dropdown-menu .tb-btn svg{width:16px;height:16px;flex-shrink:0;}
.tb-dropdown-menu .tb-divider{width:100%;height:1px;background:var(--border);margin:4px 0;}
.tb-dropdown-menu.grid-layout{display:none;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:2px;padding:8px;}
.tb-dropdown.open .tb-dropdown-menu.grid-layout{display:grid;}
.tb-dropdown-menu.grid-layout .tb-btn{width:auto;padding:6px;justify-content:center;}
.tb-group{display:flex;align-items:center;gap:2px;}
.tb-sep{width:1px;height:24px;background:var(--border);margin:0 8px;}
.tb-btn{background:none;border:1px solid transparent;color:var(--text-dim);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;font-family:var(--font-mono);transition:all .15s;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.tb-btn:hover{color:var(--text-bright);background:var(--bg-card-hover);}
.tb-btn.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.tb-btn.disabled{opacity:.4;pointer-events:none;}
.tb-btn svg{width:16px;height:16px;fill:currentColor;}
.tb-select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:3px 6px;border-radius:4px;cursor:pointer;}
.tb-select:focus{outline:1px solid var(--orange);}
.tb-input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:3px 6px;border-radius:4px;width:50px;text-align:center;}
.tb-input:focus{outline:1px solid var(--orange);}
.tb-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-right:2px;}
.print-toggle{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-dim);font-family:var(--font-mono);}
.print-toggle input{accent-color:var(--orange);}

/* MAIN LAYOUT */
#main{display:flex;flex:1;overflow:hidden;height:calc(100vh - 50px - 44px - 28px);}

/* LAYERS PANEL */
#layers-panel{width:240px;background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.panel-header{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-bright);padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.panel-header button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;}
.panel-header button:hover{color:var(--orange);}
#layer-list{flex:1;overflow-y:auto;padding:4px 0;}
.layer-item{display:flex;align-items:center;gap:6px;padding:6px 10px;cursor:pointer;font-size:12px;font-family:var(--font-mono);color:var(--text-dim);border-left:3px solid transparent;transition:background .1s;}
.layer-item:hover{background:var(--bg-card-hover);}
.layer-item.selected{background:rgba(232,106,16,0.08);border-left-color:var(--orange);color:var(--text-bright);}
.layer-item.drag-over{border-top:2px solid var(--orange);}
.layer-item .layer-vis,.layer-item .layer-lock{font-size:13px;opacity:.6;cursor:pointer;padding:2px;flex-shrink:0;}
.layer-item .layer-vis:hover,.layer-item .layer-lock:hover{opacity:1;color:var(--orange);}
.layer-item .layer-color{width:10px;height:10px;border-radius:2px;flex-shrink:0;border:1px solid rgba(255,255,255,0.15);}
.layer-item .layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.layer-item .layer-name-input{background:var(--bg);border:1px solid var(--orange);color:var(--text-bright);font-family:var(--font-mono);font-size:12px;padding:1px 4px;width:100%;border-radius:2px;}
.layer-item.hidden{opacity:.4;}

/* CANVAS AREA */
#canvas-area{flex:1;background:var(--canvas-bg);position:relative;overflow:hidden;cursor:crosshair;}
#canvas-area.tool-select{cursor:default;}
#canvas-area.tool-text{cursor:text;}
#canvas-area.tool-path{cursor:crosshair;}
#canvas-area.tool-pen{cursor:crosshair;}
#canvas-area.tool-polygon{cursor:crosshair;}
#canvas-area.tool-line{cursor:crosshair;}
#canvas-area.tool-arrow{cursor:crosshair;}
#canvas-area.tool-measure{cursor:crosshair;}
#canvas-area.tool-comment{cursor:crosshair;}
#canvas-area.panning{cursor:grab;}
#canvas-area.panning-active{cursor:grabbing;}
#main-svg{position:absolute;top:0;left:0;}

/* PROPERTIES PANEL */
#props-panel{width:280px;background:var(--bg-card);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.props-section{padding:10px 12px;border-bottom:1px solid var(--border);}
.props-section-title{font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--text-bright);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;}
.props-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.props-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);width:20px;text-align:right;flex-shrink:0;}
.props-input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:4px 6px;border-radius:4px;width:100%;min-width:0;}
.props-input:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.props-textarea{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:4px 6px;border-radius:4px;width:100%;min-height:50px;resize:vertical;}
.props-textarea:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.color-palette{display:flex;flex-wrap:wrap;gap:4px;}
.color-swatch{width:28px;height:28px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s;position:relative;}
.color-swatch:hover{transform:scale(1.15);z-index:1;}
.color-swatch.selected{border-color:var(--orange);box-shadow:0 0 0 2px rgba(232,106,16,0.3);}
.color-swatch .oos-line{position:absolute;top:50%;left:0;right:0;height:2px;background:red;transform:rotate(-45deg);pointer-events:none;}
.font-option{font-size:14px;padding:4px 8px;}
.props-select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:12px;padding:4px 6px;border-radius:4px;width:100%;cursor:pointer;}
.props-select:focus{outline:1px solid var(--orange);}
.props-btn{background:var(--orange);color:#fff;border:none;font-family:var(--font-body);font-weight:500;font-size:12px;padding:6px 14px;border-radius:4px;cursor:pointer;transition:background .15s;width:100%;}
.props-btn:hover{background:var(--orange-light);}
.props-btn.secondary{background:var(--bg);border:1px solid var(--border);color:var(--text);}
.props-btn.secondary:hover{border-color:var(--orange);color:var(--orange);}

/* RGB color picker for print mode */
.rgb-picker{display:flex;gap:6px;align-items:center;margin-top:6px;}
.rgb-picker input[type="color"]{width:36px;height:28px;border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:4px;padding:1px;}
.rgb-picker .hex-input{flex:1;}

/* STATUS BAR */
#statusbar{height:28px;background:var(--bg);display:flex;align-items:center;padding:0 16px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
#statusbar .sb-left{flex:1;}
#statusbar .sb-center{flex:1;text-align:center;}
#statusbar .sb-right{flex:1;text-align:right;}
.sb-brand-link{color:var(--orange);text-decoration:none;transition:color .2s;}
.sb-brand-link:hover{color:var(--orange-light);}

/* ADMIN MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:640px;max-height:80vh;overflow-y:auto;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.modal h2{font-family:var(--font-display);font-size:20px;color:var(--text-bright);margin-bottom:16px;}
.modal h3{font-family:var(--font-display);font-size:14px;color:var(--text-bright);margin:16px 0 8px;}
.modal label{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);display:block;margin-bottom:4px;}
.modal input[type="text"],.modal input[type="password"],.modal input[type="color"]{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:4px;font-size:13px;width:100%;}
.modal input:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.modal .color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0;}
.modal .color-grid-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;background:var(--bg);cursor:pointer;transition:background .15s;}
.modal .color-grid-item:hover{background:var(--bg-card-hover);}
.modal .color-grid-item .cg-swatch{width:20px;height:20px;border-radius:3px;flex-shrink:0;border:1px solid rgba(255,255,255,0.1);}
.modal .color-grid-item .cg-name{font-size:10px;font-family:var(--font-mono);color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modal .color-grid-item input[type="checkbox"]{accent-color:var(--orange);flex-shrink:0;}
.modal-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end;}
.modal-actions button{padding:8px 20px;border-radius:6px;font-family:var(--font-body);font-weight:500;font-size:13px;cursor:pointer;border:none;transition:background .15s;}
.modal-actions .btn-primary{background:var(--orange);color:#fff;}
.modal-actions .btn-primary:hover{background:var(--orange-light);}
.modal-actions .btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border);}
.modal-actions .btn-secondary:hover{border-color:var(--text-dim);}

/* PIN SCREEN */
.pin-screen{text-align:center;padding:20px;}
.pin-screen input{text-align:center;letter-spacing:8px;font-size:24px;max-width:200px;margin:12px auto;display:block;}
.pin-screen .pin-error{color:#e53935;font-size:12px;margin-top:8px;display:none;}

/* CONTEXT MENU */
.context-menu{position:fixed;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:4px 0;z-index:500;min-width:160px;box-shadow:0 8px 30px rgba(0,0,0,0.4);}
.context-menu-item{padding:6px 14px;font-size:12px;font-family:var(--font-mono);color:var(--text);cursor:pointer;display:flex;justify-content:space-between;}
.context-menu-item:hover{background:var(--bg-card-hover);color:var(--orange);}
.context-menu-item .shortcut{color:var(--text-dim);margin-left:20px;}
.context-menu-sep{height:1px;background:var(--border);margin:4px 0;}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg-deep);}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:3px;}

/* INLINE TEXT EDITOR */
.inline-text-editor{position:absolute;background:transparent;border:1px dashed var(--orange);color:var(--text-bright);font-size:24px;padding:2px 4px;outline:none;min-width:40px;min-height:1.2em;z-index:50;white-space:pre;overflow:hidden;}

/* ORDER MODAL */
.order-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.order-overlay.open { opacity: 1; pointer-events: all; }

.order-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  width: 520px; max-height: 85vh; overflow-y: auto; padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.order-header {
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.order-header h2 { font-family: var(--font-display); font-size: 18px; color: var(--text-bright); margin: 0; }
.order-close { background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; }
.order-close:hover { color: var(--text-bright); }

.order-body { padding: 20px 24px; }

.order-steps { display: flex; gap: 4px; margin-bottom: 20px; }
.order-step { flex: 1; height: 3px; background: var(--border); border-radius: 2px; }
.order-step.active { background: var(--orange); }
.order-step.done { background: var(--orange); opacity: 0.5; }

.order-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.order-table td { padding: 6px 0; font-size: 13px; font-family: var(--font-mono); }
.order-table td:last-child { text-align: right; color: var(--text-bright); }
.order-table .label { color: var(--text-dim); }
.order-table .layer-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(255,255,255,0.15); }
.order-table tr.total td { border-top: 1px solid var(--border); padding-top: 10px; font-weight: 600; font-size: 15px; color: var(--orange); }

.order-form-group { margin-bottom: 12px; }
.order-form-group label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.order-form-group input, .order-form-group textarea, .order-form-group select {
  width: 100%; padding: 8px 10px; background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-bright); font-family: var(--font-body); font-size: 13px; outline: none;
}
.order-form-group input:focus, .order-form-group textarea:focus { border-color: var(--orange); }
.order-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }

.order-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.order-btn { padding: 10px 24px; border-radius: 6px; font-family: var(--font-body); font-weight: 500; font-size: 13px; cursor: pointer; border: none; transition: all 0.15s; }
.order-btn-primary { background: var(--orange); color: #fff; }
.order-btn-primary:hover { background: var(--orange-light); }
.order-btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.order-btn-secondary:hover { border-color: var(--text-dim); }
.order-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.payment-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.payment-option { padding: 16px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 12px; }
.payment-option:hover { border-color: var(--orange); background: rgba(232,106,16,0.05); }
.payment-option.selected { border-color: var(--orange); background: rgba(232,106,16,0.1); }
.payment-option-icon { font-size: 24px; }
.payment-option-text { flex: 1; }
.payment-option-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-bright); }
.payment-option-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.order-total-display { text-align: center; padding: 16px; background: var(--bg-deep); border-radius: 8px; margin: 12px 0; }
.order-total-display .amount { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--orange); }
.order-total-display .sublabel { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

.rush-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-deep); border-radius: 6px; margin: 10px 0; }
.rush-toggle label { font-size: 12px; color: var(--text); font-family: var(--font-mono); cursor: pointer; }
.rush-toggle input { accent-color: var(--orange); }
.rush-label { color: var(--orange); font-weight: 500; }

/* ADMIN-ONLY ELEMENTS */
.admin-only { display: none !important; }
body.admin-authenticated .admin-only { display: flex !important; }
body.admin-authenticated .tb-sep.admin-only { display: block !important; }

/* FONT PREVIEW DROPDOWN */
.font-preview-dropdown { position:relative; }
.font-preview-list { position:absolute; top:100%; left:0; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; max-height:350px; overflow-y:auto; z-index:200; box-shadow:0 8px 30px rgba(0,0,0,0.5); display:none; min-width:240px; }
.font-preview-list.open { display:block; }
.font-search { position:sticky; top:0; z-index:1; padding:6px 8px; background:var(--bg-card); border-bottom:1px solid var(--border); }
.font-search input { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--font-mono); font-size:12px; padding:5px 8px; border-radius:4px; outline:none; }
.font-search input:focus { border-color:var(--orange); }
.font-search input::placeholder { color:var(--text-dim); }
.font-category { padding:4px 10px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); background:var(--bg); position:sticky; top:38px; z-index:1; }
.font-preview-item { padding:8px 12px; cursor:pointer; color:var(--text); transition:background .1s; font-size:16px; border-bottom:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.font-preview-item:hover { background:var(--bg-card-hover); color:var(--orange); }
.font-preview-item.selected { background:rgba(232,106,16,0.1); color:var(--orange); }
.font-preview-item.loading { color:var(--text-dim); font-style:italic; font-family:var(--font-body) !important; font-size:13px; }
.font-preview-trigger { background:var(--bg); border:1px solid var(--border); color:var(--text); font-size:13px; padding:6px 10px; border-radius:4px; width:100%; cursor:pointer; text-align:left; display:flex; align-items:center; justify-content:space-between; }
.font-preview-trigger:focus { outline:1px solid var(--orange); border-color:var(--orange); }
.font-preview-trigger .arrow { font-size:10px; color:var(--text-dim); }

/* QUOTE MODAL */
.quote-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:1000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; }
.quote-overlay.open { opacity:1; pointer-events:all; }

/* ALIGNMENT TOOLBAR */
.align-group { display:flex; gap:2px; }
.align-btn { background:none; border:1px solid transparent; color:var(--text-dim); cursor:pointer; font-size:12px; padding:4px 6px; border-radius:4px; transition:all .15s; display:flex; align-items:center; }
.align-btn:hover { color:var(--text-bright); background:var(--bg-card-hover); }
.align-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; }

/* PROPS PANEL ICON BUTTONS (align, distribute, order) */
.props-align-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.props-distribute-grid{display:flex;gap:4px;}
.props-order-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.props-icon-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;padding:6px;border-radius:4px;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px;}
.props-icon-btn:hover{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.08);}
.props-icon-btn svg{width:16px;height:16px;flex-shrink:0;}
.props-icon-btn.wide{flex:1;font-family:var(--font-mono);font-size:10px;}
.props-icon-btn.wide span{white-space:nowrap;}

/* SNAP GUIDES */
.snap-guide { position:absolute; z-index:40; pointer-events:none; }
.snap-guide-h { left:0; right:0; height:1px; background:rgba(232,106,16,0.5); }
.snap-guide-v { top:0; bottom:0; width:1px; background:rgba(232,106,16,0.5); }

/* TEXT FORMATTING BUTTONS */
.text-format-group { display:flex; gap:2px; margin-bottom:6px; }
.text-format-btn { background:var(--bg); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; font-size:13px; padding:3px 8px; border-radius:4px; transition:all .15s; font-family:var(--font-mono); min-width:28px; text-align:center; }
.text-format-btn:hover { color:var(--text-bright); border-color:var(--text-dim); }
.text-format-btn.active { color:var(--orange); border-color:var(--orange); background:rgba(232,106,16,0.1); }

/* PROPS RANGE (opacity slider) */
.props-range { -webkit-appearance:none; width:100%; height:4px; background:var(--bg-deep); border-radius:2px; outline:none; }
.props-range::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:var(--orange); border-radius:50%; cursor:pointer; }
.props-range::-moz-range-thumb { width:14px; height:14px; background:var(--orange); border-radius:50%; cursor:pointer; border:none; }

/* RULERS */
.ruler{position:absolute;background:var(--bg-card);z-index:60;overflow:hidden;}
.ruler-h{top:0;left:30px;right:0;height:20px;border-bottom:1px solid var(--border);}
.ruler-v{top:20px;left:0;bottom:0;width:30px;border-right:1px solid var(--border);}
.ruler-corner{position:absolute;top:0;left:0;width:30px;height:20px;background:var(--bg-card);z-index:61;border-bottom:1px solid var(--border);border-right:1px solid var(--border);}
.ruler canvas{display:block;}
.ruler-h canvas{cursor:s-resize;}
.ruler-v canvas{cursor:e-resize;}

/* KEYBOARD SHORTCUTS OVERLAY */
.shortcuts-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.shortcuts-overlay.open{opacity:1;pointer-events:all;}
.shortcuts-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:480px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.shortcuts-card h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin-bottom:16px;}
.shortcuts-card table{width:100%;border-collapse:collapse;}
.shortcuts-card td{padding:4px 8px;font-family:var(--font-mono);font-size:12px;color:var(--text);border-bottom:1px solid var(--border);}
.shortcuts-card td:first-child{color:var(--orange);width:40%;text-align:right;}
.shortcuts-card .sc-close{float:right;background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;}
.shortcuts-card .sc-close:hover{color:var(--text-bright);}

/* AUTOSAVE RESTORE BAR */
.restore-bar{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--orange);border-radius:8px;padding:10px 20px;z-index:1200;display:flex;align-items:center;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,0.5);font-family:var(--font-mono);font-size:12px;color:var(--text);}
.restore-bar button{padding:4px 12px;border-radius:4px;font-family:var(--font-body);font-size:12px;cursor:pointer;border:none;}
.restore-bar .restore-yes{background:var(--orange);color:#fff;}
.restore-bar .restore-no{background:var(--bg);color:var(--text);border:1px solid var(--border);}

/* TOAST NOTIFICATIONS */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:6px;padding:10px 16px;font-family:var(--font-mono);font-size:12px;color:var(--text);box-shadow:0 8px 30px rgba(0,0,0,0.5);pointer-events:all;animation:toastIn .3s ease-out;max-width:360px;}
.toast.toast-out{animation:toastOut .3s ease-in forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(40px);}}

/* AI PANEL */
.ai-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.ai-overlay.open{opacity:1;pointer-events:all;}
.ai-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:580px;max-height:85vh;overflow-y:auto;padding:0;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.ai-panel-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.ai-panel-header h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin:0;display:flex;align-items:center;gap:8px;}
.ai-panel-header h2 .ai-icon{color:var(--orange);font-size:20px;}
.ai-panel-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;}
.ai-panel-close:hover{color:var(--text-bright);}
.ai-panel-body{padding:16px 20px;}
.ai-field{margin-bottom:14px;}
.ai-field label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:4px;}
.ai-field textarea{width:100%;min-height:80px;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;color:var(--text-bright);font-family:var(--font-body);font-size:13px;padding:8px 10px;resize:vertical;outline:none;}
.ai-field textarea:focus{border-color:var(--orange);}
.ai-field select,.ai-field input[type="text"]{width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;color:var(--text-bright);font-family:var(--font-body);font-size:13px;padding:8px 10px;outline:none;}
.ai-field select:focus,.ai-field input:focus{border-color:var(--orange);}
.ai-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ai-generate-btn{width:100%;padding:12px;background:var(--orange);color:#fff;border:none;border-radius:6px;font-family:var(--font-display);font-weight:600;font-size:14px;cursor:pointer;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.ai-generate-btn:hover{background:var(--orange-light);}
.ai-generate-btn:disabled{opacity:.5;cursor:not-allowed;}
.ai-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:aiSpin .6s linear infinite;}
@keyframes aiSpin{to{transform:rotate(360deg);}}
.ai-preview{margin-top:14px;text-align:center;}
.ai-preview img{max-width:100%;max-height:300px;border-radius:8px;border:1px solid var(--border);}
.ai-preview-actions{margin-top:10px;display:flex;gap:8px;justify-content:center;}
.ai-preview-actions button{padding:8px 20px;border-radius:6px;font-family:var(--font-body);font-weight:500;font-size:13px;cursor:pointer;border:none;transition:all .15s;}
.ai-add-btn{background:var(--orange);color:#fff;}
.ai-add-btn:hover{background:var(--orange-light);}
.ai-history{margin-top:16px;border-top:1px solid var(--border);padding-top:12px;}
.ai-history-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:8px;}
.ai-history-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.ai-history-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:border-color .15s;}
.ai-history-thumb:hover{border-color:var(--orange);}
.ai-no-api{text-align:center;padding:20px 10px;color:var(--text-dim);font-size:13px;line-height:1.6;}
.ai-no-api .ai-no-api-icon{font-size:32px;margin-bottom:8px;opacity:.5;}

/* AI Button glow */
.tb-btn.ai-configured{position:relative;}
.tb-btn.ai-configured::after{content:'';position:absolute;inset:-2px;border-radius:6px;background:rgba(232,106,16,0.15);animation:aiGlow 2s ease-in-out infinite;pointer-events:none;}
@keyframes aiGlow{0%,100%{opacity:.3;}50%{opacity:.8;}}

/* AI TOOLS in properties panel */
.props-section .ai-tools-divider{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin:4px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);}

/* EYEDROPPER TOOL */
#canvas-area.tool-eyedropper{cursor:crosshair;}
.eyedropper-preview{position:fixed;width:32px;height:32px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.5);pointer-events:none;z-index:200;transform:translate(12px,-36px);transition:background-color 0.05s;}
.eyedropper-preview::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #fff;}

/* GRADIENT EDITOR */
.gradient-toggle{display:flex;gap:0;margin-bottom:8px;border-radius:4px;overflow:hidden;border:1px solid var(--border);}
.gradient-toggle button{flex:1;background:var(--bg);border:none;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:4px 8px;cursor:pointer;transition:all .15s;}
.gradient-toggle button.active{background:rgba(232,106,16,0.15);color:var(--orange);font-weight:500;}
.gradient-toggle button:hover:not(.active){background:var(--bg-card-hover);color:var(--text);}
.gradient-type-toggle{display:flex;gap:4px;margin-bottom:8px;}
.gradient-type-toggle button{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:3px 6px;border-radius:4px;cursor:pointer;transition:all .15s;}
.gradient-type-toggle button.active{border-color:var(--orange);color:var(--orange);background:rgba(232,106,16,0.1);}
.gradient-bar-wrap{position:relative;margin:10px 0 20px;user-select:none;}
.gradient-bar{height:24px;border-radius:4px;border:1px solid var(--border);cursor:crosshair;position:relative;}
.gradient-stop{position:absolute;bottom:-12px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.5);cursor:grab;transform:translateX(-7px);transition:box-shadow .15s;z-index:1;}
.gradient-stop:hover,.gradient-stop.active{box-shadow:0 0 0 2px var(--orange),0 1px 4px rgba(0,0,0,0.5);}
.gradient-stop-del{position:absolute;top:-8px;right:-8px;width:14px;height:14px;border-radius:50%;background:#e53935;color:#fff;font-size:10px;line-height:14px;text-align:center;cursor:pointer;display:none;border:none;padding:0;}
.gradient-stop.active .gradient-stop-del{display:block;}
.gradient-presets{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.gradient-preset{width:36px;height:18px;border-radius:3px;border:1px solid var(--border);cursor:pointer;transition:border-color .15s;}
.gradient-preset:hover{border-color:var(--orange);}

/* MINIMAP */
#minimap{position:absolute;bottom:12px;right:12px;z-index:50;background:rgba(20,20,24,0.85);border:1px solid rgba(255,255,255,0.08);border-radius:6px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.4);cursor:pointer;transition:opacity 0.2s,border-color 0.2s;}
#minimap:hover{border-color:rgba(232,106,16,0.3);}
#minimap svg{display:block;}
#minimap-toggle{position:absolute;bottom:12px;right:12px;z-index:51;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:3px 7px;cursor:pointer;transition:all .15s;}
#minimap-toggle:hover{color:var(--orange);border-color:var(--orange);}
#minimap-toggle.minimap-visible{bottom:140px;}

/* TEMPLATE GALLERY */
.template-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.template-overlay.open{opacity:1;pointer-events:all;}
.template-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:680px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.template-panel-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.template-panel-header h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin:0;}
.template-panel-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;}
.template-panel-close:hover{color:var(--text-bright);}
.template-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid var(--border);overflow-x:auto;}
.template-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:8px 14px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.template-tab:hover{color:var(--text-bright);}
.template-tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.template-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:16px 20px;overflow-y:auto;flex:1;}
.template-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color .15s;position:relative;overflow:hidden;}
.template-card:hover{border-color:var(--orange);}
.template-card.template-card-preset{border-style:dashed;}
.template-thumb{aspect-ratio:1;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.template-thumb img{width:100%;height:100%;object-fit:contain;}
.template-thumb .preset-icon{font-size:28px;color:var(--text-dim);opacity:.5;}
.template-name{font-family:var(--font-mono);font-size:11px;padding:6px 8px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--border);}
.template-name .template-size{color:var(--text-dim);font-size:9px;display:block;margin-top:2px;}
.template-delete{position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.7);border:none;color:#f44336;font-size:14px;width:22px;height:22px;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1;}
.template-card:hover .template-delete{display:flex;}
.template-delete:hover{background:#f44336;color:#fff;}

/* SAVE TEMPLATE MODAL */
.save-template-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:400px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.save-template-modal h3{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0 0 16px;}
.save-template-modal .stm-field{margin-bottom:12px;}
.save-template-modal .stm-field label{display:block;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:4px;}
.save-template-modal .stm-field input,.save-template-modal .stm-field select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:13px;padding:8px 10px;border-radius:6px;outline:none;}
.save-template-modal .stm-field input:focus{border-color:var(--orange);}
.save-template-modal .stm-preview{text-align:center;margin:12px 0;border:1px solid var(--border);border-radius:6px;background:var(--bg-deep);padding:12px;}
.save-template-modal .stm-preview img{max-width:180px;max-height:180px;border-radius:4px;}
.save-template-modal .stm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.save-template-modal .stm-actions button{padding:8px 20px;border-radius:6px;font-family:var(--font-body);font-weight:500;font-size:13px;cursor:pointer;border:none;transition:all .15s;}

/* CANVAS PRESETS PANEL (in properties) */
.canvas-presets-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px;}
.canvas-preset-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:10px;padding:6px 8px;border-radius:4px;cursor:pointer;transition:all .15s;text-align:left;}
.canvas-preset-btn:hover{border-color:var(--orange);color:var(--orange);}
.canvas-preset-btn.active{border-color:var(--orange);color:var(--orange);background:rgba(232,106,16,0.08);}
.canvas-preset-btn .preset-dims{font-weight:500;display:block;}
.canvas-preset-btn .preset-label{color:var(--text-dim);font-size:9px;}
.lock-aspect-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .15s;width:100%;margin-top:4px;text-align:center;}
.lock-aspect-btn:hover{border-color:var(--orange);}
.lock-aspect-btn.active{border-color:var(--orange);color:var(--orange);background:rgba(232,106,16,0.08);}

/* RECENT SAVES PANEL (in properties) */
.recent-saves-list{margin-top:6px;}
.recent-save-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:10px;color:var(--text-dim);}
.recent-save-item button{background:none;border:none;color:var(--orange);cursor:pointer;font-family:var(--font-mono);font-size:10px;padding:2px 6px;}
.recent-save-item button:hover{text-decoration:underline;}

/* HISTORY PANEL */
#history-panel{position:absolute;top:0;right:0;width:280px;height:100%;background:var(--bg-card);border-left:1px solid var(--border);z-index:80;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;overflow:hidden;}
#history-panel.open{transform:translateX(0);}
.history-header{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.history-header h3{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-bright);margin:0;text-transform:uppercase;letter-spacing:.5px;}
.history-close{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px;}
.history-close:hover{color:var(--text-bright);background:var(--bg-card-hover);}
.history-list{flex:1;overflow-y:auto;padding:4px 0;}
.history-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:12px;font-family:var(--font-mono);color:var(--text-dim);transition:background .1s;border-left:3px solid transparent;position:relative;}
.history-item:hover{background:var(--bg-card-hover);}
.history-item.current{background:rgba(232,106,16,0.08);border-left-color:var(--orange);color:var(--text-bright);}
.history-item.future{opacity:.4;}
.history-item .history-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;border:2px solid var(--text-dim);}
.history-item.current .history-dot{background:var(--orange);border-color:var(--orange);box-shadow:0 0 6px rgba(232,106,16,0.4);}
.history-item.future .history-dot{border-style:dashed;}
.history-item .history-desc{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.history-item .history-time{font-size:10px;color:var(--text-dim);flex-shrink:0;}
.history-item.current .history-time{color:var(--orange);}
.history-footer{padding:8px 12px;border-top:1px solid var(--border);display:flex;gap:6px;flex-shrink:0;}
.history-footer button{flex:1;padding:4px 8px;border-radius:4px;font-family:var(--font-mono);font-size:11px;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);transition:all .15s;}
.history-footer button:hover:not(:disabled){color:var(--orange);border-color:var(--orange);}
.history-footer button:disabled{opacity:.3;cursor:not-allowed;}

/* ENHANCED SHORTCUTS OVERLAY */
.shortcuts-overlay .shortcuts-card{max-width:720px;width:95%;padding:0;overflow:hidden;}
.shortcuts-overlay.open{animation:scOverlayIn .25s ease forwards;}
@keyframes scOverlayIn{from{opacity:0;}to{opacity:1;}}
.sc-header{padding:20px 24px 12px;display:flex;align-items:center;justify-content:space-between;}
.sc-header h2{font-family:var(--font-display);font-size:20px;color:var(--text-bright);margin:0;display:flex;align-items:center;gap:8px;}
.sc-header h2 .sc-icon{color:var(--orange);font-size:22px;}
.sc-search{padding:12px 24px;border-bottom:1px solid var(--border);background:var(--bg);}
.sc-search input{width:100%;background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:8px 12px;border-radius:6px;outline:none;}
.sc-search input:focus{border-color:var(--orange);}
.sc-search input::placeholder{color:var(--text-dim);}
.sc-body{padding:16px 24px 24px;max-height:60vh;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.sc-category{margin-bottom:16px;}
.sc-category-title{font-family:var(--font-display);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(232,106,16,0.2);}
.sc-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;font-size:12px;color:var(--text);}
.sc-row .sc-desc{flex:1;}
.sc-row .sc-keys{display:flex;gap:3px;flex-shrink:0;}
.shortcut-key{display:inline-block;background:var(--bg-deep);border:1px solid var(--border);border-bottom:2px solid rgba(255,255,255,0.12);border-radius:4px;padding:2px 8px;font-family:var(--font-mono);font-size:11px;color:var(--text);min-width:24px;text-align:center;line-height:1.4;}
.sc-row.sc-hidden{display:none;}

/* FIND & REPLACE BAR */
.find-bar{position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:70;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 14px;box-shadow:0 8px 30px rgba(0,0,0,0.5);display:none;min-width:480px;max-width:90%;animation:findBarIn .2s ease;}
.find-bar.open{display:block;}
@keyframes findBarIn{from{opacity:0;transform:translateX(-50%) translateY(-8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.find-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.find-bar-row:last-child{margin-bottom:0;}
.find-bar label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);width:54px;text-align:right;flex-shrink:0;}
.find-bar input{flex:1;background:var(--bg-deep);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:12px;padding:6px 10px;border-radius:4px;outline:none;min-width:0;}
.find-bar input:focus{border-color:var(--orange);}
.find-bar-actions{display:flex;align-items:center;gap:4px;}
.find-bar-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:5px 10px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.find-bar-btn:hover{color:var(--orange);border-color:var(--orange);}
.find-bar-btn.primary{background:var(--orange);color:#fff;border-color:var(--orange);}
.find-bar-btn.primary:hover{background:var(--orange-light);}
.find-bar-close{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:2px 6px;margin-left:4px;}
.find-bar-close:hover{color:var(--text-bright);}
.find-bar-count{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:40px;text-align:center;}

/* LAYER PANEL BULK ACTIONS */
.layer-bulk-actions{display:flex;gap:2px;padding:4px 8px;border-bottom:1px solid var(--border);flex-shrink:0;}
.layer-bulk-btn{background:none;border:1px solid transparent;color:var(--text-dim);cursor:pointer;font-size:10px;padding:3px 6px;border-radius:3px;font-family:var(--font-mono);transition:all .15s;flex:1;text-align:center;white-space:nowrap;}
.layer-bulk-btn:hover{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.08);}

/* HELP BUTTON (bottom-left) */
#btn-help-float{position:absolute;bottom:12px;left:12px;z-index:51;width:28px;height:28px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
#btn-help-float:hover{color:var(--orange);border-color:var(--orange);transform:scale(1.1);}

/* WARP TYPE GRID */
.warp-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:6px 0 8px;}
.warp-type-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;background:var(--bg);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .15s;user-select:none;}
.warp-type-cell:hover{border-color:var(--text-dim);color:var(--text-bright);background:var(--bg-card-hover);}
.warp-type-cell.active{border-color:var(--orange);color:var(--orange);background:rgba(232,106,16,0.1);}
.warp-type-cell .warp-icon{font-size:16px;line-height:1;}
.warp-type-cell .warp-name{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.02em;color:var(--text-dim);}
.warp-type-cell.active .warp-name{color:var(--orange);}
.warp-type-select{font-family:var(--font-mono);font-size:12px;}

/* FONT PREVIEW ENHANCEMENTS */
.font-preview-sample{display:inline-block;width:28px;text-align:center;font-size:18px;margin-right:4px;vertical-align:middle;color:var(--text-bright);}
.font-preview-name{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);vertical-align:middle;}
.font-preview-item:hover .font-preview-name{color:var(--orange);}
.font-preview-item.selected .font-preview-name{color:var(--orange);}
.font-preview-item.loading .font-preview-sample{font-family:var(--font-body) !important;color:var(--text-dim);font-size:13px;}
.font-category-recent{color:var(--orange);border-bottom:1px solid rgba(232,106,16,0.2);}

/* ============================================================
   TEMPLATE GALLERY
   ============================================================ */
.template-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.template-overlay.open{opacity:1;pointer-events:all;}
.template-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:720px;max-height:80vh;overflow-y:auto;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.template-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.template-panel-header h2{font-family:var(--font-display);font-size:20px;color:var(--text-bright);margin:0;}
.template-panel-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:4px 8px;}
.template-panel-close:hover{color:var(--text-bright);}
.template-section-title{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-bright);margin:16px 0 8px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding-bottom:6px;}
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.template-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;overflow:hidden;position:relative;}
.template-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.3);}
.template-card-thumb{width:100%;aspect-ratio:4/3;background:var(--bg-deep);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.template-card-thumb svg{width:100%;height:100%;}
.template-card-thumb .template-placeholder{font-size:32px;opacity:0.4;}
.template-card-info{padding:8px 10px;}
.template-card-name{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.template-card-size{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;}
.template-card-delete{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.7);border:none;color:var(--text-dim);font-size:14px;width:24px;height:24px;border-radius:4px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .15s;}
.template-card:hover .template-card-delete{display:flex;}
.template-card-delete:hover{color:#e53935;background:rgba(0,0,0,0.9);}

/* Save Template Modal */
.save-template-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:400px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.save-template-modal h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin-bottom:16px;}
.save-template-modal label{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);display:block;margin-bottom:4px;}
.save-template-modal input[type="text"]{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:6px;font-size:13px;width:100%;font-family:var(--font-body);outline:none;}
.save-template-modal input[type="text"]:focus{border-color:var(--orange);}
.save-template-modal .modal-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;}

/* ============================================================
   HISTORY PANEL
   ============================================================ */
#history-panel{position:absolute;top:20px;right:0;bottom:0;width:260px;background:var(--bg-card);border-left:1px solid var(--border);z-index:55;display:none;flex-direction:column;overflow:hidden;box-shadow:-4px 0 20px rgba(0,0,0,0.3);}
#history-panel.open{display:flex;}
.history-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.history-header h3{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--text-bright);margin:0;}
.history-close{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:2px 6px;}
.history-close:hover{color:var(--text-bright);}
.history-list{flex:1;overflow-y:auto;padding:4px 0;}
.history-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);border-left:3px solid transparent;transition:all .1s;}
.history-item:hover{background:var(--bg-card-hover);color:var(--text);}
.history-item.current{background:rgba(232,106,16,0.08);border-left-color:var(--orange);color:var(--text-bright);}
.history-item.future{opacity:0.4;}
.history-item-icon{font-size:14px;flex-shrink:0;width:18px;text-align:center;}
.history-item-desc{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.history-item-time{font-size:9px;color:var(--text-dim);flex-shrink:0;}
.history-empty{padding:20px;text-align:center;color:var(--text-dim);font-size:12px;font-family:var(--font-mono);}

/* ============================================================
   FIND & REPLACE BAR
   ============================================================ */
#find-bar{position:absolute;top:28px;left:50%;transform:translateX(-50%);z-index:55;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:none;align-items:center;gap:6px;box-shadow:0 4px 20px rgba(0,0,0,0.4);min-width:420px;}
#find-bar.open{display:flex;flex-wrap:wrap;}
.find-input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:5px 8px;border-radius:4px;outline:none;flex:1;min-width:120px;}
.find-input:focus{border-color:var(--orange);}
.find-replace-input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:5px 8px;border-radius:4px;outline:none;flex:1;min-width:120px;}
.find-replace-input:focus{border-color:var(--orange);}
.find-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.find-btn:hover{color:var(--orange);border-color:var(--orange);}
.find-btn.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.find-close{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:2px 4px;flex-shrink:0;}
.find-close:hover{color:var(--text-bright);}
.find-count{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);flex-shrink:0;min-width:40px;text-align:center;}
.find-row{display:flex;align-items:center;gap:6px;width:100%;}
.find-row+.find-row{margin-top:6px;}

/* ============================================================
   ENHANCED LAYERS PANEL
   ============================================================ */
.layer-item{display:flex;align-items:center;gap:4px;padding:4px 6px;cursor:pointer;font-size:12px;font-family:var(--font-mono);color:var(--text-dim);border-left:3px solid transparent;transition:background .1s;min-height:38px;}
.layer-item:hover{background:var(--bg-card-hover);}
.layer-item.selected{background:rgba(232,106,16,0.08);border-left-color:var(--orange);color:var(--text-bright);}
.layer-item.hidden{opacity:.4;}
.layer-item.locked .layer-name{font-style:italic;opacity:.7;}
.layer-item.dragging{opacity:.4;}
.layer-item.drag-over-above{border-top:2px solid var(--orange);padding-top:2px;}
.layer-item.drag-over-below{border-bottom:2px solid var(--orange);padding-bottom:2px;}

.layer-drag-handle{cursor:grab;color:var(--text-dim);opacity:.4;flex-shrink:0;padding:2px;display:flex;align-items:center;transition:opacity .15s;}
.layer-drag-handle:hover{opacity:1;color:var(--orange);}
.layer-drag-handle:active{cursor:grabbing;}

.layer-thumb{width:32px;height:32px;flex-shrink:0;border-radius:4px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--bg);border:1px solid var(--border);}

.layer-name-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
.layer-name-input{background:var(--bg);border:1px solid var(--orange);color:var(--text-bright);font-family:var(--font-mono);font-size:11px;padding:1px 4px;width:100%;border-radius:2px;}

.layer-opacity-wrap{display:flex;align-items:center;}
.layer-opacity-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer;}
.layer-opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:var(--orange);cursor:pointer;}
.layer-opacity-slider::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--orange);cursor:pointer;border:none;}

.layer-item .layer-vis,.layer-item .layer-lock{display:flex;align-items:center;justify-content:center;opacity:.5;cursor:pointer;padding:2px;flex-shrink:0;transition:opacity .15s;}
.layer-item .layer-vis:hover,.layer-item .layer-lock:hover{opacity:1;color:var(--orange);}

/* ============================================================
   ADVANCED COLOR PICKER
   ============================================================ */
.acp-popup{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:12px;width:280px;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.5);backdrop-filter:blur(10px);}

.acp-header{display:flex;gap:4px;margin-bottom:10px;align-items:center;}
.acp-target-btn{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.05em;}
.acp-target-btn:hover{color:var(--text-bright);border-color:var(--text-dim);}
.acp-target-btn.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.acp-eyedrop-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);padding:4px 8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;transition:all .15s;}
.acp-eyedrop-btn:hover{color:var(--orange);border-color:var(--orange);}

.acp-picker-area{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:10px;gap:8px;}
.acp-hue-ring{width:200px;height:200px;cursor:crosshair;border-radius:50%;}
.acp-sl-square{position:absolute;width:120px;height:120px;cursor:crosshair;border-radius:4px;border:1px solid rgba(255,255,255,0.1);}

.acp-preview-row{display:flex;gap:6px;align-items:center;margin-bottom:8px;}
.acp-preview-swatch{width:40px;height:28px;border-radius:4px;border:1px solid var(--border);flex-shrink:0;}
.acp-save-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.05em;}
.acp-save-btn:hover{color:var(--orange);border-color:var(--orange);}

.acp-input-tabs{display:flex;gap:2px;margin-bottom:6px;}
.acp-input-tab{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:3px 6px;border-radius:3px;cursor:pointer;text-align:center;transition:all .15s;}
.acp-input-tab:hover{color:var(--text-bright);}
.acp-input-tab.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}

.acp-input-fields{display:flex;gap:4px;margin-bottom:8px;}
.acp-input-row{display:flex;align-items:center;gap:4px;flex:1;}
.acp-input-label{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);width:14px;text-align:right;flex-shrink:0;}
.acp-color-input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;padding:3px 4px;border-radius:3px;width:100%;min-width:0;}
.acp-color-input:focus{outline:1px solid var(--orange);border-color:var(--orange);}

.acp-palette-section{margin-bottom:8px;}
.acp-palette-select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:10px;padding:3px 6px;border-radius:4px;width:100%;cursor:pointer;margin-bottom:6px;}
.acp-palette-select:focus{outline:1px solid var(--orange);}

.acp-palette-grid,.acp-swatch-grid{display:flex;flex-wrap:wrap;gap:4px;}
.acp-mini-swatch{width:22px;height:22px;border-radius:3px;cursor:pointer;border:1px solid rgba(255,255,255,0.1);transition:transform .1s,box-shadow .1s;}
.acp-mini-swatch:hover{transform:scale(1.2);box-shadow:0 0 6px rgba(232,106,16,0.3);z-index:1;}

.acp-section-label{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;margin-top:6px;}

.acp-recent-section,.acp-saved-section{margin-bottom:4px;}

/* EFFECTS PANEL */
.fx-header{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;border-bottom:1px solid var(--border);user-select:none;}
.fx-header input[type="checkbox"]{accent-color:var(--orange);flex-shrink:0;cursor:pointer;}
.fx-title{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text);text-transform:uppercase;letter-spacing:0.05em;flex:1;transition:color .15s;}
.fx-title:hover{color:var(--orange);}
.fx-header.fx-closed .fx-title{color:var(--text-dim);}
.fx-title::after{content:'\25BE';float:right;font-size:10px;color:var(--text-dim);transition:transform .15s;}
.fx-header.fx-closed .fx-title::after{transform:rotate(-90deg);}
.fx-body{padding:8px 0 4px;transition:max-height .2s ease,opacity .15s ease;overflow:hidden;}
.fx-body.fx-collapsed{max-height:0 !important;opacity:0;padding:0;pointer-events:none;overflow:hidden;}

/* ============================================================
   PATTERN FILL EDITOR
   ============================================================ */
.pattern-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin:6px 0 8px;}
.pattern-type-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;background:var(--bg);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .15s;user-select:none;}
.pattern-type-cell:hover{border-color:var(--text-dim);color:var(--text-bright);background:var(--bg-card-hover);}
.pattern-type-cell.active{border-color:var(--orange);color:var(--orange);background:rgba(232,106,16,0.1);}
.pattern-icon{font-size:16px;line-height:1;}
.pattern-name{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.02em;color:var(--text-dim);}
.pattern-type-cell.active .pattern-name{color:var(--orange);}
.pattern-preview{height:32px;border-radius:4px;border:1px solid var(--border);margin-top:8px;}

/* ============================================================
   MEASUREMENT TOOL
   ============================================================ */
.measure-annotation{pointer-events:none;}
.measure-annotation .measure-hit{pointer-events:stroke;}
.dim-label{pointer-events:none;}

/* ============================================================
   CLIPPING MASK
   ============================================================ */
.layer-item.clip-group .layer-name{color:var(--orange);font-style:italic;}
.layer-item.clip-group .layer-name::before{content:'\2702 ';font-style:normal;}

/* ============================================================
   ADVANCED TEXT FEATURES
   ============================================================ */
/* Text format group - flex wrapping for many buttons */
.text-format-group{flex-wrap:wrap;}

/* Text box outline in canvas */
.text-box-outline{pointer-events:none;}

/* Props select improvements */
.props-select{font-family:var(--font-mono);font-size:11px;}

/* ============================================================
   CANVAS BACKGROUND CONTROLS
   ============================================================ */
.canvas-bg-toggle{display:flex;gap:2px;margin-bottom:6px;}
.canvas-bg-toggle button{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:4px 6px;border-radius:4px;cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.03em;}
.canvas-bg-toggle button:hover{color:var(--text-bright);border-color:var(--text-dim);}
.canvas-bg-toggle button.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.canvas-bg-swatches{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.canvas-bg-swatch{width:24px;height:24px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s;}
.canvas-bg-swatch:hover{transform:scale(1.15);z-index:1;}
.canvas-bg-swatch.active{border-color:var(--orange);box-shadow:0 0 0 2px rgba(232,106,16,0.3);}
.canvas-bg-img-preview{height:60px;border-radius:4px;border:1px solid var(--border);margin-top:8px;background-size:cover;background-position:center;background-repeat:no-repeat;}

/* ============================================================
   EXPORT DIALOG
   ============================================================ */
.export-dialog-overlay .modal{max-width:540px;}
.export-dialog-section{margin-bottom:14px;}
.export-dialog-label{display:block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:6px;}
.export-format-row{display:flex;gap:4px;flex-wrap:wrap;}
.export-format-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:6px 12px;border-radius:4px;cursor:pointer;transition:all .15s;flex:1;text-align:center;min-width:60px;}
.export-format-btn:hover{color:var(--text-bright);border-color:var(--text-dim);}
.export-format-btn.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}

/* ============================================================
   QR CODE & BARCODE DIALOGS
   ============================================================ */
.qrbar-dialog-overlay .modal{max-width:480px;}
.qrbar-section{margin-bottom:14px;}
.qrbar-section label{display:block;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:4px;}
.qrbar-section input[type="text"],.qrbar-section input[type="number"],.qrbar-section select{
  background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:4px;
  font-family:var(--font-mono);font-size:13px;width:100%;
}
.qrbar-section input:focus,.qrbar-section select:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.qrbar-row{display:flex;gap:8px;align-items:flex-end;}
.qrbar-row > *{flex:1;}
.qrbar-color-row{display:flex;gap:12px;align-items:center;margin-top:4px;}
.qrbar-color-row label{margin-bottom:0;display:flex;align-items:center;gap:6px;text-transform:none;font-size:11px;}
.qrbar-color-row input[type="color"]{width:32px;height:26px;border:1px solid var(--border);border-radius:4px;padding:0;cursor:pointer;background:var(--bg);}
.qrbar-preview{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;align-items:center;justify-content:center;min-height:160px;margin-top:8px;}
.qrbar-preview svg{max-width:100%;max-height:200px;}
.qrbar-error{color:#e53935;font-size:11px;font-family:var(--font-mono);margin-top:4px;min-height:16px;}
.qrbar-tabs{display:flex;gap:2px;margin-bottom:14px;}
.qrbar-tab{flex:1;text-align:center;padding:6px 10px;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);
  font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:all .15s;border-radius:4px;}
.qrbar-tab:hover{color:var(--text-bright);border-color:var(--text-dim);}
.qrbar-tab.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.qrbar-check{display:flex;align-items:center;gap:6px;margin-top:6px;}
.qrbar-check input[type="checkbox"]{accent-color:var(--orange);}
.qrbar-check label{font-size:11px;text-transform:none;margin-bottom:0;}

/* ============================================================
   ZOOM ENHANCEMENTS
   ============================================================ */
#zoom-display{cursor:pointer;user-select:none;transition:color .15s;}
#zoom-display:hover{color:var(--orange);}

/* ============================================================
   ENHANCED AI PANEL
   ============================================================ */
.ai-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg-deep);}
.ai-tab{flex:1;padding:10px 6px;text-align:center;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:all .15s;}
.ai-tab:hover{color:var(--text-bright);background:rgba(255,255,255,0.03);}
.ai-tab.active{color:var(--orange);border-bottom-color:var(--orange);background:rgba(232,106,16,0.05);}
.ai-tab-content{display:none;padding:16px 20px;}
.ai-tab-content.active{display:block;}

/* Prompt history dropdown */
.ai-prompt-wrap{position:relative;}
.ai-prompt-history-btn{position:absolute;top:4px;right:6px;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;z-index:1;transition:color .15s;}
.ai-prompt-history-btn:hover{color:var(--orange);}
.ai-prompt-history-drop{position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;background:var(--bg-deep);border:1px solid var(--border);border-radius:0 0 6px 6px;z-index:10;display:none;}
.ai-prompt-history-drop.open{display:block;}
.ai-prompt-history-item{padding:8px 10px;font-size:12px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .1s;}
.ai-prompt-history-item:hover{background:var(--bg-card-hover);color:var(--text-bright);}
.ai-prompt-history-item:last-child{border-bottom:none;}

/* Three-column row */
.ai-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}

/* Seed/Variations row */
.ai-field input[type="number"]{width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;color:var(--text-bright);font-family:var(--font-mono);font-size:13px;padding:8px 10px;outline:none;-moz-appearance:textfield;}
.ai-field input[type="number"]::-webkit-outer-spin-button,
.ai-field input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ai-field input[type="number"]:focus{border-color:var(--orange);}

/* Secondary generate buttons */
.ai-btn-row{display:flex;gap:8px;margin-top:10px;}
.ai-btn-secondary{flex:1;padding:10px;background:var(--bg-deep);color:var(--text);border:1px solid var(--border);border-radius:6px;font-family:var(--font-display);font-weight:500;font-size:13px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.ai-btn-secondary:hover{border-color:var(--orange);color:var(--orange);}
.ai-btn-secondary:disabled{opacity:.4;cursor:not-allowed;}

/* History grid enhanced */
.ai-history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.ai-history-item{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:border-color .15s;}
.ai-history-item:hover{border-color:var(--orange);}
.ai-history-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.ai-history-item .ai-history-actions{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.8));padding:4px;display:flex;gap:3px;justify-content:center;opacity:0;transition:opacity .15s;}
.ai-history-item:hover .ai-history-actions{opacity:1;}
.ai-history-action-btn{background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:10px;padding:3px 6px;border-radius:3px;cursor:pointer;font-family:var(--font-mono);backdrop-filter:blur(4px);transition:background .1s;}
.ai-history-action-btn:hover{background:var(--orange);}

/* Preview grid for multiple variations */
.ai-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px;}
.ai-preview-grid.single{grid-template-columns:1fr;}
.ai-preview-grid-item{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:border-color .15s;}
.ai-preview-grid-item:hover{border-color:var(--orange);}
.ai-preview-grid-item img{width:100%;display:block;}
.ai-preview-grid-item .ai-add-overlay{position:absolute;inset:0;background:rgba(232,106,16,0.2);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;}
.ai-preview-grid-item:hover .ai-add-overlay{opacity:1;}
.ai-preview-grid-item .ai-add-overlay span{background:var(--orange);color:#fff;padding:6px 14px;border-radius:6px;font-family:var(--font-display);font-weight:600;font-size:12px;}

/* Inpainting */
.ai-inpaint-canvas-wrap{position:relative;margin:10px 0;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--bg-deep);text-align:center;}
.ai-inpaint-canvas-wrap canvas{display:block;max-width:100%;margin:0 auto;cursor:crosshair;}
.ai-inpaint-controls{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ai-inpaint-controls label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.ai-inpaint-controls input[type="range"]{flex:1;}
.ai-inpaint-controls span{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);width:30px;text-align:right;}

/* Slider with value */
.ai-slider-field{display:flex;align-items:center;gap:8px;}
.ai-slider-field label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:60px;flex-shrink:0;}
.ai-slider-field input[type="range"]{flex:1;accent-color:var(--orange);}
.ai-slider-field .ai-slider-val{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);width:32px;text-align:right;flex-shrink:0;}

/* Style transfer preset grid */
.ai-style-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px;}
.ai-style-chip{padding:8px 4px;text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .15s;line-height:1.2;}
.ai-style-chip:hover{color:var(--text-bright);border-color:var(--text-dim);}
.ai-style-chip.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.08);}

/* Smart suggestions panel (in properties) */
.ai-suggest-section{margin-top:4px;}
.ai-suggest-btn{width:100%;padding:7px 10px;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.ai-suggest-btn:hover{border-color:var(--orange);color:var(--orange);}
.ai-suggest-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0;}
.ai-color-suggestions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.ai-color-swatch{width:28px;height:28px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;}
.ai-color-swatch:hover{transform:scale(1.15);border-color:var(--orange);}
.ai-color-swatch .ai-color-tip{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:9px;color:var(--text-dim);white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none;}
.ai-color-swatch:hover .ai-color-tip{opacity:1;}

/* Layout fix button */
.ai-fix-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;margin-bottom:4px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);cursor:pointer;transition:all .15s;}
.ai-fix-item:hover{border-color:var(--orange);color:var(--text-bright);}
.ai-fix-item svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.5;}

/* Text suggestion chips */
.ai-text-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.ai-text-chip{padding:4px 10px;background:var(--bg-deep);border:1px solid var(--border);border-radius:12px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);cursor:pointer;transition:all .15s;white-space:nowrap;}
.ai-text-chip:hover{border-color:var(--orange);color:var(--orange);}
.ai-text-chip.loading{opacity:.5;pointer-events:none;}

/* ============================================================
   GRID & SNAP SETTINGS POPUPS
   ============================================================ */
.settings-popup{
  position:fixed;z-index:9000;background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;padding:12px 14px;min-width:200px;max-width:260px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  font-family:var(--font-mono);font-size:11px;color:var(--text);
}
.settings-popup-title{
  font-family:var(--font-display);font-weight:600;font-size:12px;
  color:var(--text-bright);margin-bottom:10px;padding-bottom:6px;
  border-bottom:1px solid var(--border);letter-spacing:0.02em;
}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:8px;
}
.settings-label{
  color:var(--text-dim);font-size:10px;white-space:nowrap;flex-shrink:0;
}
.settings-label span{color:var(--orange);font-weight:600;margin-left:4px;}
.settings-select{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:10px;padding:3px 6px;
  border-radius:4px;cursor:pointer;flex:1;max-width:100px;
}
.settings-select:focus{outline:1px solid var(--orange);}
.settings-range{
  flex:1;max-width:100px;accent-color:var(--orange);height:4px;cursor:pointer;
}
.settings-color{
  width:28px;height:22px;border:1px solid var(--border);border-radius:3px;
  cursor:pointer;padding:0;background:none;
}
.settings-toggle-row input[type="checkbox"]{accent-color:var(--orange);cursor:pointer;}

/* Ruler origin & unit label */
.ruler-corner{display:flex;align-items:center;justify-content:center;user-select:none;}
.ruler-unit-label{
  font-family:var(--font-mono);font-size:9px;color:var(--text-dim);
  pointer-events:none;letter-spacing:0.02em;
}
.ruler-corner:hover{background:var(--bg-card-hover);}
.ruler-corner:hover .ruler-unit-label{color:var(--orange);}

/* ============================================================
   PRECISION TRANSFORM PANEL
   ============================================================ */
.precision-ref-wrap{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.precision-ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:36px;height:36px;}
.precision-ref-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--text-dim);background:transparent;cursor:pointer;padding:0;transition:all .15s;}
.precision-ref-dot:hover{border-color:var(--orange);background:rgba(232,106,16,0.2);}
.precision-ref-dot.active{border-color:var(--orange);background:var(--orange);box-shadow:0 0 4px rgba(232,106,16,0.5);}
.precision-lock-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;padding:3px 4px;border-radius:4px;transition:all .15s;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.precision-lock-btn:hover{color:var(--orange);border-color:var(--orange);}
.precision-lock-btn.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.precision-input{font-variant-numeric:tabular-nums;}
.precision-input::-webkit-inner-spin-button{opacity:1;height:20px;}

/* ============================================================
   STYLE LIBRARY
   ============================================================ */
.style-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;margin-top:4px;}
.style-swatch{position:relative;height:40px;border-radius:6px;border:1px solid var(--border);cursor:pointer;transition:all .15s;display:flex;align-items:flex-end;overflow:hidden;}
.style-swatch:hover{border-color:var(--orange);transform:scale(1.05);z-index:1;}
.style-swatch-label{display:block;width:100%;padding:2px 4px;font-family:var(--font-mono);font-size:8px;color:#fff;background:rgba(0,0,0,0.6);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,0.8);}

/* ============================================================
   SMART LAYOUT PANEL
   ============================================================ */
.props-icon-btn.wide span{font-family:var(--font-mono);font-size:10px;white-space:nowrap;}

/* ============================================================
   SYMBOL LIBRARY
   ============================================================ */
.symbol-library-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:2000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.symbol-library-overlay.open{display:flex;}
.symbol-library-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:680px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.symbol-library-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);}
.symbol-library-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-bright);letter-spacing:0.02em;}
.symbol-library-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s;}
.symbol-library-close:hover{color:var(--orange);}
.symbol-library-search{padding:10px 18px 6px;}
.symbol-library-search-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:13px;padding:8px 12px;border-radius:6px;outline:none;transition:border-color .15s;}
.symbol-library-search-input:focus{border-color:var(--orange);}
.symbol-library-search-input::placeholder{color:var(--text-dim);}
.symbol-library-tabs{display:flex;gap:2px;padding:6px 18px 0;overflow-x:auto;flex-shrink:0;border-bottom:1px solid var(--border);}
.symbol-library-tabs::-webkit-scrollbar{height:3px;}
.symbol-library-tabs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.symbol-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:6px 10px;cursor:pointer;white-space:nowrap;transition:all .15s;}
.symbol-tab:hover{color:var(--text-bright);}
.symbol-tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.symbol-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;padding:14px 18px;overflow-y:auto;flex:1;min-height:200px;}
.symbol-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;background:var(--bg);color:var(--text-dim);}
.symbol-cell:hover{border-color:var(--orange);background:rgba(232,106,16,0.06);color:var(--orange);transform:scale(1.04);}
.symbol-cell svg{width:48px;height:48px;flex-shrink:0;}
.symbol-cell-label{font-family:var(--font-mono);font-size:9px;text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;padding:0 2px;}
.symbol-library-empty{grid-column:1/-1;text-align:center;padding:40px 20px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);}

/* ============================================================
   SVG DRAG-AND-DROP INDICATOR
   ============================================================ */
#canvas-area.svg-drag-over{outline:3px dashed var(--orange);outline-offset:-3px;background:rgba(232,106,16,0.04);}
#canvas-area.svg-drag-over::after{content:'Drop SVG or image here';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:18px;color:var(--orange);background:rgba(20,20,24,0.9);padding:12px 24px;border-radius:8px;pointer-events:none;z-index:50;}

/* ============================================================
   ANIMATION PANEL
   ============================================================ */
.anim-section{margin-top:6px;}
.anim-section-header{display:flex;align-items:center;justify-content:space-between;padding:4px 0;cursor:pointer;user-select:none;}
.anim-section-header .anim-type-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;}
.anim-section-header .anim-chevron{font-size:10px;color:var(--text-dim);transition:transform .15s;}
.anim-section-header.open .anim-chevron{transform:rotate(90deg);}
.anim-section-body{display:none;padding:4px 0 8px;}
.anim-section-body.open{display:block;}
.anim-select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;padding:3px 6px;border-radius:4px;width:100%;cursor:pointer;}
.anim-select:focus{outline:1px solid var(--orange);}
.anim-slider-row{display:flex;align-items:center;gap:6px;margin-top:4px;}
.anim-slider-row .anim-slider-label{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);width:36px;flex-shrink:0;}
.anim-slider-row input[type="range"]{flex:1;accent-color:var(--orange);height:4px;}
.anim-slider-row .anim-slider-val{font-family:var(--font-mono);font-size:10px;color:var(--text);width:32px;text-align:right;flex-shrink:0;}
.anim-preview-btns{display:flex;gap:4px;margin-top:6px;}
.anim-preview-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:10px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s;flex:1;text-align:center;}
.anim-preview-btn:hover{border-color:var(--orange);color:var(--orange);}
.anim-preview-btn.primary{background:var(--orange);color:#fff;border-color:var(--orange);}
.anim-preview-btn.primary:hover{background:var(--orange-light);}

/* ============================================================
   ANIMATION TIMELINE
   ============================================================ */
#anim-timeline{
  height:0;overflow:hidden;background:var(--bg-card);border-top:1px solid var(--border);
  transition:height .2s ease;position:relative;flex-shrink:0;
}
#anim-timeline.open{height:80px;}
#anim-timeline .tl-header{
  display:flex;align-items:center;padding:4px 12px;gap:8px;border-bottom:1px solid var(--border);height:28px;
}
#anim-timeline .tl-header button{
  background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;
  font-family:var(--font-mono);font-size:11px;padding:2px 8px;border-radius:3px;transition:all .15s;
}
#anim-timeline .tl-header button:hover{color:var(--orange);border-color:var(--orange);}
#anim-timeline .tl-header button.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
#anim-timeline .tl-time{font-family:var(--font-mono);font-size:11px;color:var(--text);min-width:52px;text-align:center;}
#anim-timeline .tl-close{margin-left:auto;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;padding:2px 6px;}
#anim-timeline .tl-close:hover{color:var(--text-bright);}
#anim-timeline .tl-track{position:relative;height:52px;margin:0 12px;cursor:pointer;user-select:none;}
#anim-timeline .tl-ruler{position:absolute;top:0;left:0;right:0;height:16px;display:flex;align-items:flex-end;}
#anim-timeline .tl-ruler-tick{position:absolute;bottom:0;width:1px;height:8px;background:var(--border);}
#anim-timeline .tl-ruler-tick.major{height:12px;}
#anim-timeline .tl-ruler-label{position:absolute;top:0;font-family:var(--font-mono);font-size:8px;color:var(--text-dim);transform:translateX(-50%);}
#anim-timeline .tl-bars{position:absolute;top:18px;left:0;right:0;bottom:0;overflow:hidden;}
#anim-timeline .tl-bar{position:absolute;height:8px;border-radius:3px;opacity:0.7;min-width:4px;}
#anim-timeline .tl-bar.entrance{background:var(--cyan);}
#anim-timeline .tl-bar.emphasis{background:var(--lime);}
#anim-timeline .tl-bar.exit{background:var(--orange);}
#anim-timeline .tl-bar-label{position:absolute;left:2px;top:-1px;font-family:var(--font-mono);font-size:7px;color:var(--bg-deep);white-space:nowrap;pointer-events:none;}
#anim-timeline .tl-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--orange);z-index:5;pointer-events:none;transition:left 0.05s linear;}
#anim-timeline .tl-playhead::before{content:'';position:absolute;top:-2px;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--orange);}

/* ============================================================
   PAGE NAVIGATOR
   ============================================================ */
#page-navigator{
  height:0;overflow:hidden;background:var(--bg-card);border-top:1px solid var(--border);
  transition:height .2s ease;flex-shrink:0;display:flex;align-items:center;
}
#page-navigator.open{height:72px;}
#page-navigator .pn-controls{
  display:flex;flex-direction:column;gap:2px;padding:4px 8px;flex-shrink:0;
}
#page-navigator .pn-btn{
  background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;
  font-size:14px;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;transition:all .15s;
}
#page-navigator .pn-btn:hover{color:var(--orange);border-color:var(--orange);}
#page-navigator .pn-thumbnails{
  display:flex;gap:8px;padding:6px 12px;overflow-x:auto;flex:1;align-items:center;
}
#page-navigator .pn-thumb{
  width:80px;height:56px;border:2px solid var(--border);border-radius:6px;background:var(--bg);
  cursor:pointer;flex-shrink:0;position:relative;transition:all .15s;overflow:hidden;
}
#page-navigator .pn-thumb:hover{border-color:var(--text-dim);}
#page-navigator .pn-thumb.active{border-color:var(--orange);box-shadow:0 0 0 2px rgba(232,106,16,0.3);}
#page-navigator .pn-thumb canvas{width:100%;height:100%;display:block;}
#page-navigator .pn-thumb-label{
  position:absolute;bottom:0;left:0;right:0;padding:1px 4px;
  background:rgba(0,0,0,0.7);font-family:var(--font-mono);font-size:8px;
  color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#page-navigator .pn-thumb .pn-thumb-actions{
  position:absolute;top:2px;right:2px;display:none;gap:2px;
}
#page-navigator .pn-thumb:hover .pn-thumb-actions{display:flex;}
#page-navigator .pn-thumb-actions button{
  background:rgba(0,0,0,0.7);border:none;color:var(--text-dim);cursor:pointer;
  font-size:10px;width:16px;height:16px;border-radius:2px;display:flex;
  align-items:center;justify-content:center;
}
#page-navigator .pn-thumb-actions button:hover{color:var(--orange);}
.pn-drag-over{border-color:var(--orange) !important;background:rgba(232,106,16,0.1) !important;}

/* ============================================================
   COMMENT / ANNOTATIONS
   ============================================================ */
.comment-pin{cursor:pointer;pointer-events:all;transition:transform .15s;}
.comment-pin:hover{transform:scale(1.2);}
.comment-popup{position:fixed;z-index:600;width:300px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.5);font-family:var(--font-body);overflow:hidden;}
.comment-popup-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg-deep);}
.comment-popup-header .cp-num{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--orange);margin-right:6px;}
.comment-popup-header .cp-author{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.comment-popup-header .cp-time{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-left:auto;}
.comment-popup-header .cp-close{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;padding:2px 4px;margin-left:8px;}
.comment-popup-header .cp-close:hover{color:var(--text-bright);}
.comment-popup-body{padding:10px 12px;font-size:13px;color:var(--text);line-height:1.5;max-height:200px;overflow-y:auto;}
.comment-popup-body .cp-text{white-space:pre-wrap;word-break:break-word;}
.comment-popup-body .cp-resolved-badge{display:inline-block;background:rgba(79,195,247,0.15);color:var(--cyan);font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:3px;margin-top:6px;}
.comment-popup-replies{padding:0 12px 6px;border-top:1px solid var(--border);}
.comment-popup-replies .cp-reply{padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--text);}
.comment-popup-replies .cp-reply:last-child{border-bottom:none;}
.comment-popup-replies .cp-reply-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:2px;}
.comment-popup-footer{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--border);background:var(--bg-deep);}
.comment-popup-footer textarea{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:12px;padding:6px 8px;border-radius:4px;resize:none;height:32px;outline:none;}
.comment-popup-footer textarea:focus{border-color:var(--orange);}
.comment-popup-footer button{background:var(--orange);color:#fff;border:none;font-family:var(--font-body);font-size:11px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:background .15s;white-space:nowrap;}
.comment-popup-footer button:hover{background:var(--orange-light);}
.comment-popup-actions{display:flex;gap:4px;padding:4px 12px 8px;justify-content:flex-end;}
.comment-popup-actions button{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:3px;cursor:pointer;transition:all .15s;}
.comment-popup-actions button:hover{color:var(--orange);border-color:var(--orange);}

/* Comment side panel */
.comments-panel{position:absolute;top:0;right:0;width:280px;height:100%;background:var(--bg-card);border-left:1px solid var(--border);z-index:55;display:none;flex-direction:column;overflow:hidden;}
.comments-panel.open{display:flex;}
.comments-panel .cp-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);}
.comments-panel .cp-header h3{font-family:var(--font-display);font-size:13px;color:var(--text-bright);margin:0;}
.comments-panel .cp-header-actions{display:flex;gap:4px;align-items:center;}
.comments-panel .cp-header-actions button{background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font-mono);font-size:10px;padding:3px 6px;border-radius:3px;transition:all .15s;}
.comments-panel .cp-header-actions button:hover{color:var(--orange);border-color:var(--orange);}
.comments-panel .cp-header-actions button.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}
.comments-panel .cp-list{flex:1;overflow-y:auto;padding:4px 0;}
.comments-panel .cp-item{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;}
.comments-panel .cp-item:hover{background:var(--bg-card-hover);}
.comments-panel .cp-item.selected{background:rgba(232,106,16,0.08);}
.comments-panel .cp-item.resolved{opacity:.5;}
.comments-panel .cp-item-num{background:var(--orange);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.comments-panel .cp-item-num.resolved-num{background:var(--cyan);}
.comments-panel .cp-item-body{flex:1;min-width:0;}
.comments-panel .cp-item-text{font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.comments-panel .cp-item-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;}

/* ============================================================
   SNAPSHOT / VERSIONING
   ============================================================ */
.snapshots-panel{position:absolute;top:0;right:0;width:300px;height:100%;background:var(--bg-card);border-left:1px solid var(--border);z-index:55;display:none;flex-direction:column;overflow:hidden;}
.snapshots-panel.open{display:flex;}
.snapshots-panel .sp-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);}
.snapshots-panel .sp-header h3{font-family:var(--font-display);font-size:13px;color:var(--text-bright);margin:0;}
.snapshots-panel .sp-header-actions{display:flex;gap:4px;}
.snapshots-panel .sp-header-actions button{background:none;border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:3px;transition:all .15s;}
.snapshots-panel .sp-header-actions button:hover{color:var(--orange);border-color:var(--orange);}
.snapshots-panel .sp-list{flex:1;overflow-y:auto;padding:4px 0;}
.snapshots-panel .sp-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;}
.snapshots-panel .sp-item:hover{background:var(--bg-card-hover);}
.snapshots-panel .sp-item.comparing{border-left:3px solid var(--cyan);}
.snapshots-panel .sp-item-thumb{width:48px;height:34px;border-radius:4px;border:1px solid var(--border);background:var(--bg);flex-shrink:0;overflow:hidden;}
.snapshots-panel .sp-item-thumb canvas{width:100%;height:100%;display:block;}
.snapshots-panel .sp-item-body{flex:1;min-width:0;}
.snapshots-panel .sp-item-name{font-family:var(--font-body);font-size:12px;color:var(--text-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.snapshots-panel .sp-item-time{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;}
.snapshots-panel .sp-item-auto{font-family:var(--font-mono);font-size:9px;color:var(--cyan);margin-left:4px;}
.snapshots-panel .sp-item-actions{display:flex;gap:2px;flex-shrink:0;}
.snapshots-panel .sp-item-actions button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:3px;transition:color .15s;}
.snapshots-panel .sp-item-actions button:hover{color:var(--orange);}
.snapshots-panel .sp-compare-bar{padding:8px 12px;background:var(--bg-deep);border-top:1px solid var(--border);display:none;align-items:center;justify-content:space-between;}
.snapshots-panel .sp-compare-bar.active{display:flex;}
.snapshots-panel .sp-compare-bar span{font-family:var(--font-mono);font-size:11px;color:var(--cyan);}
.snapshots-panel .sp-compare-bar button{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:3px;transition:all .15s;}
.snapshots-panel .sp-compare-bar button:hover{color:var(--orange);border-color:var(--orange);}

/* ============================================================
   ACCESSIBILITY / STATUS BAR ENHANCED
   ============================================================ */
#statusbar{height:28px;display:flex;align-items:center;padding:0 12px;gap:8px;}
#statusbar .sb-left{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#statusbar .sb-tool{font-family:var(--font-mono);font-size:11px;color:var(--orange);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;}
#statusbar .sb-sep{width:1px;height:14px;background:var(--border);flex-shrink:0;}

/* High contrast mode */
body.high-contrast .tb-btn{color:var(--text-bright);}
body.high-contrast .layer-item{color:var(--text-bright);}
body.high-contrast .props-label{color:var(--text);}
body.high-contrast #statusbar{color:var(--text-bright);}
body.high-contrast .panel-header{color:#fff;}
body.high-contrast .context-menu-item{color:var(--text-bright);}
body.high-contrast :focus-visible{outline:2px solid var(--orange) !important;outline-offset:2px;}

/* Focus indicators */
.tb-btn:focus-visible,.align-btn:focus-visible,.props-btn:focus-visible,.props-input:focus-visible,.props-select:focus-visible,.layer-item:focus-visible{outline:2px solid var(--orange);outline-offset:1px;}
.layer-item[tabindex]:focus-visible{background:rgba(232,106,16,0.08);border-left-color:var(--orange);}

/* Inline property editor */
.inline-prop-editor{position:fixed;z-index:610;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,0.5);width:240px;}
.inline-prop-editor .ipe-title{font-family:var(--font-display);font-size:11px;color:var(--text-bright);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;}
.inline-prop-editor .ipe-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.inline-prop-editor .ipe-row label{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);width:24px;text-align:right;flex-shrink:0;}
.inline-prop-editor .ipe-row input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:3px 6px;border-radius:3px;outline:none;}
.inline-prop-editor .ipe-row input:focus{border-color:var(--orange);}
.inline-prop-editor .ipe-actions{display:flex;gap:4px;margin-top:8px;justify-content:flex-end;}
.inline-prop-editor .ipe-actions button{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:3px;cursor:pointer;transition:all .15s;}
.inline-prop-editor .ipe-actions button:hover{color:var(--orange);border-color:var(--orange);}
.inline-prop-editor .ipe-actions button.primary{background:var(--orange);color:#fff;border-color:var(--orange);}

/* Tab navigation selected object highlight */
.tab-nav-highlight{stroke:var(--cyan) !important;stroke-width:2 !important;stroke-dasharray:4,3;fill:none;pointer-events:none;}

/* ---- Advanced Path Tools ---- */

/* Node type toggle buttons */
.node-type-toggle .props-btn{min-width:0;font-size:10px !important;padding:3px 4px !important;}

/* Path tool slider (simplify, smoothing) */
.path-tool-slider{-webkit-appearance:none;appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;}
.path-tool-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--orange);cursor:pointer;border:2px solid var(--bg-card);}
.path-tool-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--orange);cursor:pointer;border:2px solid var(--bg-card);}
.path-tool-slider:hover::-webkit-slider-thumb{background:var(--orange-light);}
.path-tool-slider:hover::-moz-range-thumb{background:var(--orange-light);}

/* Shape Builder overlay regions */
.shape-builder-region{transition:fill 0.12s ease, stroke 0.12s ease;pointer-events:all;}
.shape-builder-region:hover{fill:rgba(232,106,16,0.25) !important;stroke:#e86a10 !important;}

/* Shape Builder tool cursor */
.tool-shapebuilder{cursor:crosshair;}

/* Brush preset row */
.brush-preset-row .props-btn{font-size:9px !important;padding:3px 4px !important;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

/* ============================================================
   VINYL PRO FEATURES
   ============================================================ */

/* Vinyl Color Match */
.vinyl-match-info{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.vinyl-match-swatch{width:22px;height:22px;border-radius:3px;border:1px solid rgba(255,255,255,0.15);flex-shrink:0;}
.vinyl-match-label{color:var(--text);font-size:11px;}
.vinyl-match-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto;}
.vinyl-match-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;transition:background .15s;}
.vinyl-match-row:hover{background:var(--bg-card-hover);}
.vinyl-match-detail{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);line-height:1.4;}
.vinyl-match-detail strong{color:var(--text-bright);font-size:10px;}
.vinyl-match-de{font-size:9px;padding:1px 4px;border-radius:3px;font-weight:600;}
.vinyl-match-de.excellent{color:#00e676;background:rgba(0,230,118,0.1);}
.vinyl-match-de.good{color:#4fc3f7;background:rgba(79,195,247,0.1);}
.vinyl-match-de.fair{color:#ffd54f;background:rgba(255,213,79,0.1);}
.vinyl-match-de.poor{color:#ff5252;background:rgba(255,82,82,0.1);}
.vinyl-match-finish{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;opacity:.7;}

/* Vinyl Brand Palette */
.vinyl-brand-info{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:6px;}
.vinyl-brand-palette{display:flex;flex-wrap:wrap;gap:3px;}
.vinyl-brand-swatch{width:24px;height:24px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s;position:relative;}
.vinyl-brand-swatch:hover{transform:scale(1.15);z-index:2;border-color:rgba(255,255,255,0.3);}
.vinyl-brand-swatch.selected{border-color:var(--orange);box-shadow:0 0 8px rgba(232,106,16,0.4);}
.vinyl-brand-swatch.metallic{background-image:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,transparent 50%,rgba(255,255,255,0.15) 100%) !important;}
.vinyl-finish-dot{position:absolute;bottom:1px;right:1px;width:6px;height:6px;border-radius:50%;border:1px solid rgba(0,0,0,0.3);}
.vinyl-finish-dot.metallic{background:linear-gradient(135deg,#fff,#aaa);}
.vinyl-finish-dot.matte{background:rgba(128,128,128,0.6);}

/* Material Estimate */
.vinyl-mat-empty{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);font-style:italic;padding:4px 0;}
.vinyl-mat-summary{font-family:var(--font-mono);font-size:11px;color:var(--text);margin-bottom:6px;}
.vinyl-mat-summary strong{color:var(--orange);}
.vinyl-mat-brand{color:var(--text-dim);font-size:10px;}
.vinyl-mat-list{display:flex;flex-direction:column;gap:4px;}
.vinyl-mat-row{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:3px;}
.vinyl-mat-row:hover{background:var(--bg-card-hover);}
.vinyl-mat-detail{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);line-height:1.4;}
.vinyl-mat-area{font-size:9px;color:var(--text-dim);opacity:.8;}

/* Print & Cut Tools */
.vinyl-tool-row{margin-bottom:4px;}
.vinyl-tool-toggle{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);cursor:pointer;padding:3px 0;transition:color .15s;}
.vinyl-tool-toggle:hover{color:var(--text-bright);}
.vinyl-tool-toggle input[type="checkbox"]{accent-color:var(--orange);cursor:pointer;width:14px;height:14px;}
.vinyl-pro-section{border-left:2px solid rgba(232,106,16,0.2);}
.vinyl-pro-section .props-section-title{color:var(--orange);opacity:.9;}

/* Props button active state for mirror */
.props-btn.active{background:rgba(232,106,16,0.15);color:var(--orange);border-color:var(--orange);}

/* ============================================================ */
/* TOUR / ONBOARDING                                            */
/* ============================================================ */
.tour-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:9000;pointer-events:all;}
.tour-spotlight{position:fixed;z-index:9001;border:2px solid var(--orange);border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,0.55),0 0 30px rgba(232,106,16,0.4);pointer-events:none;transition:all .4s ease;}
.tour-tooltip{position:fixed;z-index:9002;background:var(--bg-card);border:1px solid var(--orange);border-radius:12px;padding:20px 24px;width:340px;box-shadow:0 12px 40px rgba(0,0,0,0.6),0 0 20px rgba(232,106,16,0.15);animation:tourFadeIn .3s ease;}
@keyframes tourFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.tour-tooltip-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-bright);margin-bottom:8px;}
.tour-tooltip-text{font-size:13px;color:var(--text);line-height:1.5;margin-bottom:16px;}
.tour-tooltip-nav{display:flex;align-items:center;justify-content:space-between;}
.tour-tooltip-dots{display:flex;gap:6px;}
.tour-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s;}
.tour-dot.active{background:var(--orange);}
.tour-tooltip-buttons{display:flex;gap:6px;}
.tour-btn{padding:6px 14px;border-radius:6px;font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text-dim);transition:all .15s;}
.tour-btn:hover{color:var(--text-bright);border-color:var(--text-dim);}
.tour-btn-primary{background:var(--orange);color:#fff;border-color:var(--orange);}
.tour-btn-primary:hover{background:var(--orange-light);}
.tour-btn-back{background:none;}
.tour-btn-skip{background:none;opacity:.7;}
.tour-btn-skip:hover{opacity:1;}

/* ============================================================ */
/* ENHANCED TOOLTIPS                                            */
/* ============================================================ */
.enhanced-tooltip{position:fixed;z-index:800;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 14px;width:220px;box-shadow:0 8px 24px rgba(0,0,0,0.5);animation:etooltipIn .15s ease;pointer-events:none;}
@keyframes etooltipIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.etooltip-name{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-bright);margin-bottom:4px;}
.etooltip-key{display:inline-block;background:var(--bg-deep);border:1px solid var(--border);border-radius:3px;padding:1px 6px;font-family:var(--font-mono);font-size:10px;color:var(--orange);margin-left:4px;vertical-align:middle;}
.etooltip-desc{font-size:11px;color:var(--text-dim);line-height:1.4;}
.etooltip-anim{margin-top:8px;height:20px;position:relative;overflow:hidden;border-radius:4px;background:var(--bg-deep);}
.etooltip-anim-cursor{width:8px;height:8px;background:var(--orange);border-radius:50%;position:absolute;top:6px;left:4px;animation:etooltipCursor 2s ease-in-out infinite;}
@keyframes etooltipCursor{0%{left:4px;}50%{left:calc(100% - 12px);}100%{left:4px;}}

/* ============================================================ */
/* WHAT'S NEW PANEL                                             */
/* ============================================================ */
.whatsnew-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.whatsnew-overlay.open{opacity:1;pointer-events:all;}
.whatsnew-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:420px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:tourFadeIn .3s ease;}
.whatsnew-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.whatsnew-header h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin:0;}
.whatsnew-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;}
.whatsnew-close:hover{color:var(--text-bright);}
.whatsnew-body{padding:16px 24px;}
.whatsnew-item{padding:10px 0;border-bottom:1px solid var(--border);}
.whatsnew-item:last-child{border-bottom:none;}
.whatsnew-item-title{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--orange);margin-bottom:3px;}
.whatsnew-item-desc{font-size:12px;color:var(--text-dim);line-height:1.4;}
.whatsnew-footer{padding:12px 24px;border-top:1px solid var(--border);text-align:right;}
.whatsnew-dismiss{background:var(--orange);color:#fff;border:none;padding:8px 20px;border-radius:6px;font-family:var(--font-body);font-weight:500;font-size:13px;cursor:pointer;transition:background .15s;}
.whatsnew-dismiss:hover{background:var(--orange-light);}

/* ============================================================ */
/* DESIGN STATISTICS & OBJECT INSPECTOR                         */
/* ============================================================ */
.ds-section{padding:8px 0;border-bottom:1px solid var(--border);}
.ds-section:last-of-type{border-bottom:none;}
.ds-section-title{font-family:var(--font-display);font-weight:600;font-size:11px;color:var(--text-bright);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.ds-stat-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;font-family:var(--font-mono);font-size:12px;}
.ds-stat-label{color:var(--text-dim);}
.ds-stat-value{color:var(--text-bright);text-align:right;max-width:60%;}
.ds-color-row{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0;}
.ds-color-swatch{display:inline-block;width:20px;height:20px;border-radius:3px;border:1px solid rgba(255,255,255,0.15);vertical-align:middle;}
.ds-font-list{display:flex;flex-wrap:wrap;gap:4px;}
.ds-font-tag{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-family:var(--font-mono);font-size:11px;color:var(--text);}
.ds-complexity-simple{color:var(--lime);}
.ds-complexity-moderate{color:var(--cyan);}
.ds-complexity-complex{color:var(--orange);}
.ds-complexity-very-complex{color:#e53935;}

/* ============================================================ */
/* WORKSPACE PANEL DIVIDERS                                       */
/* ============================================================ */
.ws-panel-divider{width:4px;background:transparent;cursor:col-resize;flex-shrink:0;position:relative;z-index:10;transition:background .15s;}
.ws-panel-divider:hover,.ws-panel-divider:active{background:var(--orange);}
.ws-panel-divider::after{content:'';position:absolute;top:50%;left:-3px;right:-3px;height:30px;transform:translateY(-50%);}

/* STATUS BAR EXPANDED */
#statusbar.sb-expanded{height:40px;font-size:12px;}

/* ============================================================ */
/* PREFERENCES DIALOG                                            */
/* ============================================================ */
.pref-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.pref-overlay.open{opacity:1;pointer-events:all;}
.pref-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:700px;max-width:95vw;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:prefFadeIn .2s ease;}
@keyframes prefFadeIn{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.pref-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.pref-header h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin:0;}
.pref-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:4px;}
.pref-close:hover{color:var(--text-bright);background:var(--bg-card-hover);}
.pref-tabs{display:flex;gap:2px;padding:8px 16px;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;}
.pref-tab{background:none;border:none;color:var(--text-dim);font-family:var(--font-mono);font-size:12px;padding:6px 12px;border-radius:6px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.pref-tab:hover{color:var(--text-bright);background:var(--bg-card-hover);}
.pref-tab.active{color:var(--orange);background:rgba(232,106,16,0.1);font-weight:600;}
.pref-body{flex:1;overflow-y:auto;padding:16px 20px;}
.pref-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}
.pref-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.pref-label{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);min-width:130px;flex-shrink:0;}
.pref-value{flex:1;display:flex;align-items:center;}
.pref-select{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:5px 8px;border-radius:4px;width:100%;cursor:pointer;}
.pref-select:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.pref-input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:5px 8px;border-radius:4px;width:100%;}
.pref-input:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.pref-color{width:40px;height:30px;border:1px solid var(--border);background:var(--bg);border-radius:4px;cursor:pointer;padding:2px;}
.pref-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:4px;opacity:0.7;}
.pref-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border);}
.pref-section:last-child{border-bottom:none;}
.pref-section-title{font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--text-bright);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;}

/* Shortcut editor */
.pref-sc-search{display:flex;align-items:center;margin-bottom:12px;}
.pref-sc-list{max-height:400px;overflow-y:auto;}
.pref-sc-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.pref-sc-row:last-child{border-bottom:none;}
.pref-sc-desc{flex:1;font-family:var(--font-mono);font-size:12px;color:var(--text);}
.pref-sc-key{background:var(--bg-deep);border:1px solid var(--border);color:var(--orange);font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:4px;cursor:pointer;min-width:80px;text-align:center;transition:all .15s;}
.pref-sc-key:hover{border-color:var(--orange);background:rgba(232,106,16,0.05);}
.pref-sc-key.recording{border-color:var(--cyan);color:var(--cyan);animation:scPulse 1s ease infinite;}
@keyframes scPulse{0%,100%{opacity:1;}50%{opacity:0.5;}}
.pref-sc-reset{background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer;transition:all .15s;}
.pref-sc-reset:hover{border-color:var(--orange);color:var(--orange);}

/* Workspace presets grid */
.pref-ws-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.pref-ws-btn{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:8px;cursor:pointer;text-align:left;transition:all .15s;}
.pref-ws-btn:hover{border-color:var(--orange);background:rgba(232,106,16,0.05);}
.pref-ws-btn.active{border-color:var(--orange);background:rgba(232,106,16,0.1);}
.pref-ws-btn strong{display:block;font-family:var(--font-display);font-size:13px;color:var(--text-bright);margin-bottom:4px;}
.pref-ws-desc{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);}
.pref-ws-custom-list{margin-top:10px;}
.pref-ws-custom-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.pref-ws-custom-row span{flex:1;font-family:var(--font-mono);font-size:12px;color:var(--text);}

/* ============================================================ */
/* MOBILE & TOUCH SUPPORT                                        */
/* ============================================================ */

/* Canvas touch behavior */
/* Only disable touch-action on actual touch interactions, not touchpads */
@media (pointer: coarse) {
  #canvas-area{touch-action:none;}
  #main-svg{touch-action:none;}
}

/* Prevent text selection during drag */
body.dragging{-webkit-user-select:none;user-select:none;}

/* Mobile toolbar toggle */
.mobile-toolbar-toggle{display:none;position:fixed;top:56px;right:12px;z-index:200;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-dim);padding:8px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.4);transition:all .2s;}
.mobile-toolbar-toggle:hover{color:var(--orange);border-color:var(--orange);}
.mobile-toolbar-toggle.active{color:var(--orange);border-color:var(--orange);background:rgba(232,106,16,0.1);}

/* Mobile panel overlay */
.mobile-panel-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:89;opacity:0;pointer-events:none;transition:opacity .25s;}
.mobile-panel-overlay.visible{opacity:1;pointer-events:all;}

/* Offline banner */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:3000;background:rgba(229,57,53,0.95);color:#fff;font-family:var(--font-mono);font-size:12px;padding:6px 16px;display:flex;align-items:center;gap:8px;justify-content:center;transform:translateY(-100%);transition:transform .3s ease;backdrop-filter:blur(8px);}
.offline-banner.visible{transform:translateY(0);}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-top)){
  #nav{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
  #toolbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}
  #statusbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom);}
}

/* ============================================================ */
/* TABLET: 768px - 1024px                                        */
/* ============================================================ */
@media (max-width:1024px){
  #layers-panel{width:180px;}
  #props-panel{width:220px;}
  .tb-btn{padding:3px 6px;font-size:12px;}
  .tb-sep{margin:0 4px;}
  .tb-label{font-size:10px;}
  .align-btn{padding:3px 5px;}

  /* Hide text labels in toolbar buttons */
  #btn-templates,#btn-quote{font-size:0;}
  #btn-templates svg,#btn-quote svg{font-size:initial;}
  #btn-order{font-size:0;padding:6px 10px;}
  #btn-order svg{font-size:initial;}
}

/* ============================================================ */
/* TOUCH DEVICE ENHANCEMENTS                                     */
/* ============================================================ */
@media (pointer:coarse){
  .tb-btn{min-width:44px;min-height:44px;padding:8px;justify-content:center;}
  .align-btn{min-width:44px;min-height:44px;padding:8px;justify-content:center;}
  .color-swatch{width:36px;height:36px;}
  .acp-mini-swatch{width:32px;height:32px;}
  .layer-item{min-height:48px;padding:8px 10px;}
  .props-input{padding:8px 10px;font-size:14px;}
  .props-select{padding:8px 10px;font-size:14px;}
  .props-btn{padding:10px 16px;font-size:14px;}
  .context-menu-item{padding:10px 16px;font-size:14px;min-height:44px;}
  .tb-select{padding:6px 10px;font-size:14px;}
  .tb-input{padding:6px 8px;font-size:14px;}

  /* Bigger handle hit targets */
  .gradient-stop{width:20px;height:20px;transform:translateX(-10px);}
  .props-range::-webkit-slider-thumb{width:22px;height:22px;}
  .props-range::-moz-range-thumb{width:22px;height:22px;}

  /* Hide hover-only elements */
  #btn-help-float{display:none;}
  .nav-breadcrumb{display:none;}
}

/* ============================================================ */
/* MOBILE: < 768px                                               */
/* ============================================================ */
@media (max-width:767px){
  /* Show mobile toolbar toggle */
  .mobile-toolbar-toggle{display:flex;}

  /* Nav compact */
  #nav{height:44px;padding:0 12px;gap:8px;}
  #nav .nav-brand img{height:24px;}
  #nav .nav-breadcrumb{display:none;}
  #nav .nav-back{display:none;}

  /* Toolbar: collapsed by default, scrollable when shown */
  #toolbar{position:fixed;top:44px;left:0;right:0;z-index:150;height:auto;max-height:0;overflow:hidden;flex-wrap:wrap;padding:0;transition:max-height .3s ease,padding .3s ease;border-bottom:none;}
  #toolbar.mobile-open{max-height:400px;padding:8px 12px;overflow-y:auto;border-bottom:1px solid var(--border);}
  .tb-group{flex-wrap:wrap;}
  .tb-sep{height:1px;width:100%;margin:4px 0;display:none;}
  #toolbar.mobile-open .tb-sep{display:block;}

  /* Main layout: stacked, full width */
  #main{flex-direction:column;height:calc(100vh - 44px - 24px);height:calc(100dvh - 44px - 24px);}

  /* Layers panel: slide-out drawer from left */
  #layers-panel{position:fixed;top:44px;left:0;bottom:24px;width:260px;z-index:90;transform:translateX(-100%);transition:transform .3s ease;box-shadow:4px 0 20px rgba(0,0,0,0.4);}
  #layers-panel.mobile-open{transform:translateX(0);}

  /* Props panel: slide-out drawer from right */
  #props-panel{position:fixed;top:44px;right:0;bottom:24px;width:280px;z-index:90;transform:translateX(100%);transition:transform .3s ease;box-shadow:-4px 0 20px rgba(0,0,0,0.4);}
  #props-panel.mobile-open{transform:translateX(0);}

  /* Canvas area: full screen */
  #canvas-area{flex:1;width:100%;}

  /* Status bar compact */
  #statusbar{height:24px;font-size:10px;padding:0 8px;}
  .sb-tool{font-size:9px;}
  #statusbar .sb-right{display:none;}

  /* Rulers: hide on mobile */
  .ruler,.ruler-corner{display:none;}
  #canvas-area{padding-left:0;padding-top:0;}

  /* Minimap: smaller */
  #minimap{bottom:8px;right:8px;max-width:100px;}

  /* Modals: full width */
  .modal{width:95%;max-width:480px;}
  .order-modal{width:95%;max-width:480px;}
  .ai-panel{width:95%;max-width:520px;}
  .template-panel{width:95%;max-width:600px;}
  .shortcuts-overlay .shortcuts-card{width:95%;max-width:400px;}
  .sc-body{grid-template-columns:1fr;}

  /* Toast: bottom center */
  .toast-container{bottom:32px;right:8px;left:8px;align-items:center;}
  .toast{max-width:100%;}

  /* Mobile swipe indicators */
  #layers-panel::after{content:'';position:absolute;top:50%;right:-20px;width:20px;height:40px;background:var(--bg-card);border:1px solid var(--border);border-left:none;border-radius:0 6px 6px 0;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .2s;}
  #props-panel::before{content:'';position:absolute;top:50%;left:-20px;width:20px;height:40px;background:var(--bg-card);border:1px solid var(--border);border-right:none;border-radius:6px 0 0 6px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .2s;}

  /* Context menu: bottom sheet style */
  .context-menu{position:fixed;bottom:0;left:0;right:0;top:auto;max-height:60vh;overflow-y:auto;border-radius:12px 12px 0 0;padding:8px 0;transform:translateY(0);animation:contextSlideUp .2s ease;}
  @keyframes contextSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
}

/* ============================================================ */
/* SMALL MOBILE: < 480px                                         */
/* ============================================================ */
@media (max-width:479px){
  #layers-panel{width:220px;}
  #props-panel{width:100%;max-width:100%;}

  .order-form-row{grid-template-columns:1fr;}
  .order-form-row-3{grid-template-columns:1fr;}

  .ai-row{grid-template-columns:1fr;}
  .template-gallery{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .template-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}

/* ============================================================ */
/* LANDSCAPE MOBILE                                              */
/* ============================================================ */
@media (max-width:767px) and (orientation:landscape){
  #nav{height:36px;}
  #statusbar{height:20px;font-size:9px;}
  #main{height:calc(100vh - 36px - 20px);height:calc(100dvh - 36px - 20px);}
  #layers-panel{top:36px;bottom:20px;}
  #props-panel{top:36px;bottom:20px;}
  .mobile-toolbar-toggle{top:40px;}
  #toolbar{top:36px;}
}

/* ============================================================ */
/* TOUCH-DEVICE BODY CLASS ENHANCEMENTS                          */
/* ============================================================ */
body.touch-device .tb-btn{min-width:44px;min-height:44px;padding:10px;}
body.touch-device .prop-input,
body.touch-device .props-input,
body.touch-device select{min-height:36px;font-size:14px;}
body.touch-device .layer-item{min-height:48px;}
body.touch-device .context-menu-item{min-height:44px;padding:10px 16px;}

/* ============================================================ */
/* MOBILE PANEL BOTTOM-SHEET VARIANT                             */
/* ============================================================ */
@media (max-width:767px){
  .comments-panel,
  .snapshots-panel,
  #history-panel{
    position:fixed !important;
    bottom:0;left:0;right:0;top:auto !important;
    max-height:60vh;z-index:999;
    transform:translateY(100%);transition:transform .3s ease;
    border-radius:16px 16px 0 0;overflow-y:auto;
    width:100% !important;
  }
  .comments-panel.mobile-open,
  .snapshots-panel.mobile-open,
  #history-panel.mobile-open{
    transform:translateY(0);
  }
  #canvas-area{margin-left:0 !important;}
}

/* ============================================================ */
/* VERY SMALL MOBILE: < 480px                                    */
/* ============================================================ */
@media (max-width:479px){
  .modal{width:95vw !important;max-width:none !important;margin:10px !important;}
}

/* ============================================================ */
/* VARIABLE DATA / MAIL MERGE / BATCH PRODUCTION                 */
/* ============================================================ */
.variable-data-panel{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.variable-data-panel.open{opacity:1;pointer-events:all;}
.variable-data-panel .vd-dialog{
  background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
  width:860px;max-width:95vw;max-height:85vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden;
}
.variable-data-panel .vd-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.variable-data-panel .vd-header h2{
  font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin:0;
}
.variable-data-panel .vd-close{
  background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;
  padding:4px 8px;border-radius:4px;transition:color .15s;
}
.variable-data-panel .vd-close:hover{color:var(--text-bright);}
.vd-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;padding:0 20px;
}
.vd-tab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--text-dim);font-family:var(--font-mono);font-size:12px;
  padding:10px 16px;cursor:pointer;transition:all .15s;letter-spacing:0.03em;
}
.vd-tab:hover{color:var(--text-bright);}
.vd-tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.vd-body{flex:1;overflow-y:auto;padding:20px;}
.vd-section{margin-bottom:16px;}
.vd-section-label{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;
}
.vd-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:6px;}
.vd-table{
  width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px;
}
.vd-table th{
  background:var(--bg);color:var(--text-dim);font-weight:500;text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;
  font-size:11px;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap;
}
.vd-table td{
  padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text);
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vd-table tr:nth-child(even) td{background:rgba(255,255,255,0.02);}
.vd-table tr:hover td{background:rgba(232,106,16,0.06);}
.vd-table td input{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:12px;padding:3px 6px;border-radius:3px;
  width:100%;min-width:80px;
}
.vd-table td input:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.vd-table .vd-row-num{
  color:var(--text-dim);font-size:10px;width:40px;text-align:center;
}
.vd-table .vd-row-actions{width:30px;text-align:center;}
.vd-table .vd-row-del{
  background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:14px;
  padding:2px 6px;border-radius:3px;transition:color .15s;
}
.vd-table .vd-row-del:hover{color:#ff5252;}
.vd-field-badge{
  display:inline-block;background:rgba(232,106,16,0.15);color:var(--orange);
  font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:3px;
  margin:2px;border:1px solid rgba(232,106,16,0.3);
}
.vd-field-type{
  display:inline-block;background:var(--bg);color:var(--text-dim);
  font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:3px;
  margin-left:4px;
}
.vd-csv-drop{
  border:2px dashed var(--border);border-radius:8px;padding:32px 20px;
  text-align:center;transition:all .2s;cursor:pointer;
  background:rgba(255,255,255,0.01);
}
.vd-csv-drop:hover,.vd-csv-drop.drag-over{
  border-color:var(--orange);background:rgba(232,106,16,0.05);
}
.vd-csv-drop .vd-drop-icon{font-size:28px;margin-bottom:8px;color:var(--text-dim);}
.vd-csv-drop .vd-drop-text{
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
}
.vd-csv-drop .vd-drop-text strong{color:var(--orange);cursor:pointer;}
.vd-preview-nav{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.vd-preview-nav button{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:6px 12px;border-radius:4px;font-family:var(--font-mono);font-size:12px;
  cursor:pointer;transition:all .15s;
}
.vd-preview-nav button:hover{border-color:var(--orange);color:var(--orange);}
.vd-preview-nav button:disabled{opacity:.4;pointer-events:none;}
.vd-preview-nav .vd-row-indicator{
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
}
.vd-preview-canvas{
  border:1px solid var(--border);border-radius:6px;background:var(--bg);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  min-height:200px;position:relative;
}
.vd-preview-canvas svg{max-width:100%;max-height:400px;}
.vd-btn-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.vd-btn{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:7px 14px;border-radius:5px;font-family:var(--font-mono);font-size:12px;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;
}
.vd-btn:hover{border-color:var(--orange);color:var(--orange);}
.vd-btn.primary{background:var(--orange);color:#fff;border-color:var(--orange);}
.vd-btn.primary:hover{background:var(--orange-light);}
.vd-btn:disabled{opacity:.4;pointer-events:none;}
.vd-info{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  padding:8px 12px;background:var(--bg);border-radius:4px;
  border:1px solid var(--border);margin-bottom:12px;line-height:1.5;
}
.vd-progress{
  width:100%;height:4px;background:var(--bg);border-radius:2px;overflow:hidden;
  margin-top:8px;
}
.vd-progress-bar{
  height:100%;background:var(--orange);border-radius:2px;transition:width .2s;width:0%;
}
.vd-export-options{display:flex;flex-direction:column;gap:12px;}
.vd-export-option{
  display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);
  border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .15s;
}
.vd-export-option:hover{border-color:var(--orange);}
.vd-export-option .vd-export-icon{font-size:22px;width:36px;text-align:center;}
.vd-export-option .vd-export-label{
  font-family:var(--font-body);font-size:13px;color:var(--text-bright);font-weight:500;
}
.vd-export-option .vd-export-desc{
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;
}
.vd-filename-pattern{
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:12px;padding:6px 10px;border-radius:4px;
  width:100%;margin-top:8px;
}
.vd-filename-pattern:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.vd-field-list{display:flex;flex-direction:column;gap:6px;}
.vd-field-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);
  border:1px solid var(--border);border-radius:5px;
}
.vd-field-name{
  font-family:var(--font-mono);font-size:13px;color:var(--orange);font-weight:500;
}
.vd-field-sample{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vd-empty{
  text-align:center;padding:32px 20px;color:var(--text-dim);
  font-family:var(--font-mono);font-size:12px;
}
.vd-row-count{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  margin-left:auto;
}

/* ============================================================ */
/* GUIDE LINE STYLES                                             */
/* ============================================================ */
.guide-line{pointer-events:stroke;}
.guide-tooltip{
  position:fixed;z-index:10000;pointer-events:none;
  background:rgba(33,33,40,0.95);color:var(--cyan);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  padding:3px 8px;border-radius:4px;
  border:1px solid var(--cyan);
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}

/* ============================================================ */
/* IMAGE TRACE DIALOG                                            */
/* ============================================================ */
.trace-dialog-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
  z-index:10000;display:flex;align-items:center;justify-content:center;
}
.trace-dialog{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);width:720px;max-width:90vw;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.trace-dialog-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  color:var(--text-bright);
}
.trace-dialog-close{
  background:none;border:none;color:var(--text-dim);font-size:22px;
  cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;
  transition:color .15s;
}
.trace-dialog-close:hover{color:var(--orange);}
.trace-dialog-body{
  display:flex;gap:0;flex:1;overflow:hidden;
}
.trace-preview{
  flex:1;min-width:0;background:#111116;
  display:flex;align-items:center;justify-content:center;
  padding:16px;overflow:hidden;
  border-right:1px solid var(--border);
}
.trace-preview-canvas{
  max-width:100%;max-height:100%;
  border:1px solid var(--border);border-radius:4px;
  background:repeating-conic-gradient(#1a1a20 0% 25%, #22222a 0% 50%) 50% / 16px 16px;
}
.trace-dialog-controls{
  width:240px;flex-shrink:0;padding:14px;
  overflow-y:auto;display:flex;flex-direction:column;gap:8px;
}
.trace-dialog-row{
  display:flex;align-items:center;gap:8px;
}
.trace-dialog-label{
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim);
  width:60px;flex-shrink:0;text-transform:uppercase;letter-spacing:0.05em;
}
.trace-dialog-stats{
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim);
  padding:8px 0;border-top:1px solid var(--border);margin-top:4px;
  text-align:center;
}
@media (max-width:600px){
  .trace-dialog-body{flex-direction:column;}
  .trace-preview{border-right:none;border-bottom:1px solid var(--border);min-height:200px;}
  .trace-dialog-controls{width:100%;}
}

/* ============================================================ */
/* CONTOUR CUT LINE DIALOG                                       */
/* ============================================================ */
.cut-line-dialog-overlay{z-index:10001;}
.cut-line-dialog h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin-bottom:16px;}
.cut-line-body{display:flex;flex-direction:column;gap:12px;}
.cut-line-section{display:flex;flex-direction:column;gap:6px;}
.cut-line-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);letter-spacing:0.05em;text-transform:uppercase;}
.cut-line-row{display:flex;align-items:center;gap:8px;}
.cut-line-unit{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:20px;}
.cut-line-hint{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);opacity:0.7;margin-top:2px;}
.cut-line-preview{margin-top:8px;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.cut-line-preview svg{width:100%;height:120px;display:block;}

/* ============================================================ */
/* GRADIENT EDITOR DIALOG                                        */
/* ============================================================ */
.gradient-editor-overlay{z-index:10001;}
.gradient-editor-dialog h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin-bottom:16px;}
.gradient-editor-body{display:flex;flex-direction:column;gap:14px;}
.gradient-editor-section{display:flex;flex-direction:column;gap:6px;}
.gradient-editor-dialog .gradient-bar{height:32px;border-radius:6px;cursor:crosshair;}
.gradient-editor-dialog .gradient-stop{width:16px;height:16px;transform:translateX(-8px);bottom:-14px;}
.gradient-editor-dialog .gradient-stop.active{box-shadow:0 0 0 3px var(--orange),0 2px 6px rgba(0,0,0,0.5);}
.gradient-editor-dialog .gradient-presets{display:flex;gap:6px;flex-wrap:wrap;}
.gradient-editor-dialog .gradient-preset{width:44px;height:24px;border-radius:4px;border:1px solid var(--border);cursor:pointer;transition:border-color .15s,transform .15s;}
.gradient-editor-dialog .gradient-preset:hover{border-color:var(--orange);transform:scale(1.08);}
.gradient-editor-dialog .rgb-picker{display:flex;align-items:center;gap:6px;}

/* Toolbar cut/grad buttons */
#btn-cut-lines svg, #btn-gradient-editor svg{width:16px;height:16px;}

@media (max-width:767px){
  .cut-line-dialog,.gradient-editor-dialog{width:95vw !important;max-width:420px !important;}
}

/* Compound Path indicator in layers panel */
.layer-row[data-type="compound"] .layer-thumb {
  border: 1px dashed var(--orange);
  border-radius: 3px;
}
.layer-row[data-type="compound"] .layer-name::after {
  content: ' [C]';
  color: var(--orange);
  font-size: 9px;
  font-weight: 600;
  opacity: 0.7;
}

/* Vertical text toggle direction buttons */
.text-format-btn[title="Horizontal"],
.text-format-btn[title="Vertical"] {
  font-weight: bold;
  line-height: 1;
}

/* Context menu shortcut label for compound path */
.context-menu-shortcut {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-left: auto;
  padding-left: 16px;
  opacity: 0.7;
}

/* ============================================================ */
/* SWATCHES PANEL                                                */
/* ============================================================ */
.swatches-panel{
  width:0;overflow:hidden;background:var(--bg-card);border-left:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;transition:width .25s ease;
}
.swatches-panel.open{width:220px;overflow-y:auto;}
.swatches-header{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;
  border-bottom:1px solid var(--border);
}
.swatches-header h3{
  font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-bright);
  letter-spacing:0.02em;margin:0;
}
.swatches-close{
  background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;
  padding:2px 6px;border-radius:4px;transition:color .15s;
}
.swatches-close:hover{color:var(--orange);}
.swatches-search{padding:8px 10px 4px;}
.swatches-filter-input{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  font-family:var(--font-mono);font-size:11px;padding:5px 8px;border-radius:4px;
  outline:none;transition:border-color .15s;
}
.swatches-filter-input:focus{border-color:var(--orange);}
.swatches-filter-input::placeholder{color:var(--text-dim);opacity:.6;}
.swatches-actions{
  display:flex;gap:4px;padding:4px 10px 8px;flex-wrap:wrap;
}
.swatches-action-btn{
  background:var(--bg);border:1px solid var(--border);color:var(--text-dim);
  font-family:var(--font-mono);font-size:10px;padding:4px 8px;border-radius:4px;
  cursor:pointer;transition:all .15s;flex:1;text-align:center;white-space:nowrap;
}
.swatches-action-btn:hover{color:var(--text-bright);border-color:var(--text-dim);}
.swatch-add-btn{color:var(--orange);border-color:rgba(232,106,16,0.3);}
.swatch-add-btn:hover{border-color:var(--orange);background:rgba(232,106,16,0.08);}
.swatch-group{margin-bottom:2px;}
.swatch-group-header{
  display:flex;align-items:center;gap:4px;padding:6px 10px;cursor:pointer;
  font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-dim);
  transition:color .15s;user-select:none;
}
.swatch-group-header:hover{color:var(--text-bright);}
.swatch-group-arrow{font-size:8px;width:12px;display:inline-block;text-align:center;}
.swatch-group-count{font-size:9px;opacity:.6;margin-left:auto;}
.swatch-grid{
  display:grid;grid-template-columns:repeat(auto-fill, 24px);gap:3px;
  padding:2px 10px 8px;
}
.swatch-tile{
  width:24px;height:24px;border-radius:4px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.1);
  transition:transform .12s ease, box-shadow .12s ease;
  position:relative;
}
.swatch-tile:hover{
  transform:scale(1.2);z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 0 1px var(--orange);
}
.swatch-tile:active{transform:scale(1.05);}
.swatch-tile-light{border-color:rgba(0,0,0,0.15);}
#btn-swatches svg{width:16px;height:16px;}

@media (max-width:767px){
  .swatches-panel.open{width:180px;}
}

/* ============================================================ */
/* MATERIAL USAGE INDICATOR                                       */
/* ============================================================ */
.material-usage{font-family:var(--font-mono);font-size:10px;padding:2px 8px;border-radius:3px;white-space:nowrap;transition:color .3s;}

/* ============================================================ */
/* DESIGN LIBRARY PANEL                                           */
/* ============================================================ */
.design-library-panel{position:fixed;top:94px;right:12px;width:320px;max-height:calc(100vh - 140px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:800;display:flex;flex-direction:column;overflow:hidden;animation:libPanelIn .2s ease;}
@keyframes libPanelIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.lib-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);}
.lib-panel-header h3{font-family:var(--font-display);font-size:15px;color:var(--text-bright);font-weight:600;margin:0;}
.lib-panel-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s;}
.lib-panel-close:hover{color:var(--orange);background:rgba(232,106,16,0.1);}
.lib-panel-toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);}
.library-search{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:11px;padding:5px 10px;border-radius:6px;outline:none;transition:border-color .15s;}
.library-search:focus{border-color:var(--orange);}
.lib-panel-actions{display:flex;gap:4px;}
.lib-btn-import,.lib-btn-export{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.lib-btn-import:hover,.lib-btn-export:hover{border-color:var(--orange);color:var(--orange);}
.library-category-tabs{display:flex;gap:2px;padding:6px 14px;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;}
.lib-cat-tab{background:none;border:none;color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.lib-cat-tab:hover{color:var(--text-bright);background:var(--bg-card-hover);}
.lib-cat-tab.active{color:var(--orange);background:rgba(232,106,16,0.1);font-weight:500;}
.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px;overflow-y:auto;flex:1;min-height:0;}
.library-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;overflow:hidden;display:flex;flex-direction:column;align-items:center;}
.library-item:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 12px rgba(232,106,16,0.15);}
.lib-item-thumb{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--bg-deep);overflow:hidden;}
.lib-item-thumb img{width:100%;height:100%;object-fit:contain;}
.lib-item-placeholder{font-family:var(--font-display);font-size:24px;color:var(--text-dim);font-weight:700;opacity:0.4;}
.lib-item-name{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);padding:4px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
.lib-panel-footer{display:flex;align-items:center;justify-content:center;padding:6px 14px;border-top:1px solid var(--border);flex-shrink:0;}
.lib-item-count{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);}

/* Design Library Save Dialog */
.design-library-save-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease;}
.design-library-save-dialog{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:360px;max-width:90vw;box-shadow:0 12px 40px rgba(0,0,0,0.5);}
.design-library-save-dialog h3{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin:0 0 16px;}
.lib-save-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.lib-save-row label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:60px;}
.lib-save-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}

/* Canvas preset grid enhancement for large format */
.canvas-presets-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px;max-height:200px;overflow-y:auto;}

@media (max-width:767px){
  .design-library-panel{width:95vw;right:2.5vw;max-height:70vh;}
  .library-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── Collaboration ────────────────────────────────────────────────────────── */

/* Remote cursors */
.collab-cursor{position:absolute;pointer-events:none;z-index:9000;transition:left 0.08s linear,top 0.08s linear;will-change:left,top;}
.collab-cursor.faded{opacity:.3;transition:opacity 1s ease;}
.collab-cursor svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
.collab-cursor-label{position:absolute;left:18px;top:0;font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:3px;color:#fff;white-space:nowrap;pointer-events:none;line-height:1.4;}

/* User presence panel */
.collab-users-panel{position:fixed;top:100px;right:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;z-index:8000;min-width:160px;box-shadow:0 4px 20px rgba(0,0,0,.4);font-family:var(--font-mono);font-size:12px;max-height:300px;overflow-y:auto;}
.collab-users-panel .collab-panel-title{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text-bright);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;}
.collab-users-panel .collab-panel-status{font-size:9px;padding:2px 6px;border-radius:10px;text-transform:uppercase;letter-spacing:.05em;}
.collab-panel-status.connected{background:rgba(52,211,153,.15);color:#34d399;}
.collab-panel-status.reconnecting{background:rgba(251,191,36,.15);color:#fbbf24;}
.collab-panel-status.disconnected{background:rgba(239,68,68,.15);color:#ef4444;}

.collab-user-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--text);}
.collab-user-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.collab-user-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.collab-user-you{font-size:9px;color:var(--text-dim);margin-left:4px;}

.collab-share-btn{width:100%;margin-top:8px;padding:5px 0;background:var(--orange);color:var(--bg-deep);border:none;border-radius:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:background .15s;}
.collab-share-btn:hover{background:var(--orange-light);}

/* Share dialog */
.collab-share-dialog{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);}
.collab-share-dialog-inner{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:420px;max-width:90vw;box-shadow:0 8px 40px rgba(0,0,0,.5);}
.collab-share-dialog-inner h3{font-family:var(--font-display);font-size:18px;color:var(--text-bright);margin-bottom:12px;}
.collab-share-dialog-inner .share-url-row{display:flex;gap:8px;margin-bottom:16px;}
.collab-share-dialog-inner .share-url-input{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font-mono);font-size:12px;padding:8px 10px;border-radius:6px;outline:none;}
.collab-share-dialog-inner .share-url-input:focus{border-color:var(--orange);}
.collab-share-dialog-inner .share-copy-btn{padding:8px 16px;background:var(--orange);color:var(--bg-deep);border:none;border-radius:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.collab-share-dialog-inner .share-copy-btn:hover{background:var(--orange-light);}
.collab-share-dialog-inner .share-close-btn{display:block;margin:0 auto;padding:6px 20px;background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:12px;border-radius:6px;cursor:pointer;}
.collab-share-dialog-inner .share-close-btn:hover{color:var(--text-bright);border-color:var(--text-dim);}

/* Selection highlights from other users */
.collab-selection{outline-offset:3px;outline-width:2px;outline-style:dashed;pointer-events:none;}

/* Collaborate toolbar button badge */
.collab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--orange);color:var(--bg-deep);font-size:10px;font-weight:700;margin-left:4px;line-height:1;}

/* ── Cloud Save / Sync ────────────────────────────────────────────────── */

/* Cloud save status indicator */
.cloud-save-status{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;padding:2px 8px;border-radius:10px;line-height:1.4;}
.cloud-save-status.saved{color:#4caf50;}
.cloud-save-status.saving{color:var(--cyan);}
.cloud-save-status.unsaved{color:var(--orange);}
.cloud-save-status.error{color:#e53935;}
.cloud-save-status .cloud-dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.cloud-save-status.saved .cloud-dot{background:#4caf50;}
.cloud-save-status.saving .cloud-dot{background:var(--cyan);animation:cloudPulse 1s infinite;}
.cloud-save-status.unsaved .cloud-dot{background:var(--orange);}
.cloud-save-status.error .cloud-dot{background:#e53935;}
@keyframes cloudPulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Cloud dropdown menu */
.cloud-dropdown{position:absolute;top:100%;right:0;min-width:200px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,0.5);z-index:999;padding:4px 0;display:none;}
.cloud-dropdown.open{display:block;}
.cloud-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 14px;font-family:var(--font-mono);font-size:12px;color:var(--text);cursor:pointer;transition:background .15s;white-space:nowrap;}
.cloud-dropdown-item:hover{background:var(--bg-card-hover);color:var(--text-bright);}
.cloud-dropdown-item svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0;}
.cloud-dropdown-sep{height:1px;background:var(--border);margin:4px 0;}
.cloud-dropdown-item .cloud-shortcut{margin-left:auto;font-size:10px;color:var(--text-dim);opacity:.7;}
.cloud-dropdown-item.disabled{opacity:.4;pointer-events:none;}

/* Cloud designs dialog (open/save) */
.cloud-designs-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.cloud-designs-overlay.open{opacity:1;pointer-events:all;}
.cloud-designs-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:90vw;max-width:720px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 64px rgba(0,0,0,0.6);}
.cloud-designs-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.cloud-designs-header h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);font-weight:600;margin:0;}
.cloud-designs-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color .15s;}
.cloud-designs-close:hover{color:var(--text-bright);}
.cloud-designs-actions{display:flex;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--border);}
.cloud-designs-actions button{font-family:var(--font-mono);font-size:11px;padding:6px 14px;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text);transition:all .15s;}
.cloud-designs-actions button:hover{border-color:var(--orange);color:var(--orange);}
.cloud-designs-actions button.primary{background:var(--orange);color:#fff;border-color:var(--orange);}
.cloud-designs-actions button.primary:hover{background:var(--orange-light);}
.cloud-designs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:20px;overflow-y:auto;flex:1;}
.cloud-designs-empty{padding:40px 20px;text-align:center;color:var(--text-dim);font-family:var(--font-mono);font-size:13px;grid-column:1/-1;}

/* Design card */
.cloud-design-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .2s;position:relative;}
.cloud-design-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 16px rgba(232,106,16,0.15);}
.cloud-design-card.active{border-color:var(--orange);box-shadow:0 0 0 2px rgba(232,106,16,0.3);}
.cloud-design-card-thumb{width:100%;aspect-ratio:1;background:var(--canvas-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cloud-design-card-thumb img{width:100%;height:100%;object-fit:contain;}
.cloud-design-card-thumb .no-thumb{color:var(--text-dim);font-size:11px;font-family:var(--font-mono);}
.cloud-design-card-info{padding:8px 10px;}
.cloud-design-card-name{font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cloud-design-card-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;}
.cloud-design-card-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s;}
.cloud-design-card:hover .cloud-design-card-actions{opacity:1;}
.cloud-design-card-actions button{background:rgba(0,0,0,0.7);border:none;color:var(--text-dim);width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:color .15s;}
.cloud-design-card-actions button:hover{color:var(--text-bright);}

/* Version history panel */
.cloud-versions-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.cloud-versions-overlay.open{opacity:1;pointer-events:all;}
.cloud-versions-panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:480px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 16px 64px rgba(0,0,0,0.6);}
.cloud-versions-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.cloud-versions-header h2{font-family:var(--font-display);font-size:18px;color:var(--text-bright);font-weight:600;margin:0;}
.cloud-versions-list{flex:1;overflow-y:auto;padding:8px 0;}
.cloud-version-item{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border);transition:background .15s;cursor:pointer;}
.cloud-version-item:hover{background:var(--bg-card-hover);}
.cloud-version-item.active{background:rgba(232,106,16,0.08);border-left:3px solid var(--orange);}
.cloud-version-num{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--orange);min-width:32px;text-align:center;}
.cloud-version-info{flex:1;min-width:0;}
.cloud-version-msg{font-size:12px;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cloud-version-date{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-top:2px;}
.cloud-version-restore{background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.cloud-version-restore:hover{border-color:var(--orange);color:var(--orange);}

/* Share dialog */
.cloud-share-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.cloud-share-overlay.open{opacity:1;pointer-events:all;}
.cloud-share-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:420px;max-width:90vw;padding:24px;box-shadow:0 16px 64px rgba(0,0,0,0.6);}
.cloud-share-dialog h3{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0 0 16px;}
.cloud-share-url{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.cloud-share-url input{flex:1;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--font-mono);font-size:12px;padding:8px 12px;}
.cloud-share-url input:focus{outline:1px solid var(--orange);}
.cloud-share-url button{background:var(--orange);border:none;color:#fff;font-family:var(--font-mono);font-size:11px;padding:8px 14px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .15s;}
.cloud-share-url button:hover{background:var(--orange-light);}
.cloud-share-toggle{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);}
.cloud-share-toggle label{cursor:pointer;display:flex;align-items:center;gap:6px;}

/* Sign-in prompt for cloud features */
.cloud-signin-prompt{padding:32px 20px;text-align:center;}
.cloud-signin-prompt p{font-family:var(--font-mono);font-size:13px;color:var(--text-dim);margin-bottom:16px;}
.cloud-signin-prompt a{color:var(--orange);text-decoration:none;font-weight:500;}
.cloud-signin-prompt a:hover{text-decoration:underline;}

/* ============================================================
   PRODUCTION WORKFLOW — Dialog, Nesting, Tiling, Weeding
   ============================================================ */
.production-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.production-overlay.open{opacity:1;pointer-events:all;}
.production-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:520px;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,0.7);overflow:hidden;}
.production-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
.production-header h2{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0;letter-spacing:.02em;}
.production-tabs{display:flex;gap:2px;padding:8px 16px 0;border-bottom:1px solid var(--border);overflow-x:auto;}
.production-tab{background:none;border:none;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;}
.production-tab:hover{color:var(--text-bright);}
.production-tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.production-body{padding:16px 20px;overflow-y:auto;flex:1;min-height:0;}
.production-info{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);line-height:1.5;margin-bottom:8px;}
.production-dim{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);font-style:italic;padding:8px 0;}
.production-warn{color:#ef5350;font-size:11px;}
.production-form-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.production-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:110px;flex-shrink:0;}
.production-value{flex:1;}
.production-value .pref-input,.production-value .pref-select{width:100%;box-sizing:border-box;}
.production-section-title{font-family:var(--font-display);font-size:12px;color:var(--text-bright);margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.production-preview{margin-top:12px;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:80px;}
.production-preview-info{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.production-obj-list{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto;}
.production-tile-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}

/* Nesting */
.nest-queue{margin:8px 0;padding:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;max-height:200px;overflow-y:auto;min-height:40px;}
.nest-design-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;transition:background .15s;}
.nest-design-item:hover{background:var(--bg-card-hover);}
.nest-color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,0.15);}
.nest-design-label{font-family:var(--font-mono);font-size:11px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nest-qty-input{width:48px;background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;padding:3px 6px;text-align:center;}
.nest-qty-input:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.nest-remove-btn{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:3px;transition:all .15s;line-height:1;}
.nest-remove-btn:hover{color:#ef5350;background:rgba(239,83,80,0.1);}
.nest-preview{margin-top:12px;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:60px;}
.nest-efficiency{font-family:var(--font-mono);font-size:12px;padding:6px 12px;border-radius:4px;text-align:center;}
.nest-efficiency strong{font-size:16px;margin-right:4px;}
.nest-efficiency.good{color:#66bb6a;background:rgba(102,187,106,0.1);}
.nest-efficiency.fair{color:#ffa726;background:rgba(255,167,38,0.1);}
.nest-efficiency.poor{color:#ef5350;background:rgba(239,83,80,0.1);}
.nest-details{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);text-align:center;}

/* Weeding box preview items */
.weed-box-preview{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);}
.weed-box-preview:hover{background:var(--bg-card-hover);}
.weed-box-swatch{width:14px;height:14px;border-radius:2px;border:1px solid rgba(255,255,255,0.12);flex-shrink:0;}

/* Registration mark preview */
.reg-mark-preview{display:flex;justify-content:center;padding:12px;margin-top:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;}
.reg-mark-preview svg{filter:invert(0.85);}

/* Tile labels */
.tile-label{font-family:var(--font-mono);font-size:10px;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:3px 8px;white-space:nowrap;}

/* ============================================================
   COLOR MANAGEMENT — CMYK, Pantone, Spot Colors, Separation
   ============================================================ */
.cmyk-display{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;}
.cmyk-values{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:0.03em;}
.pantone-badge{font-family:var(--font-mono);font-size:9px;color:var(--bg-deep);background:var(--orange);padding:1px 6px;border-radius:3px;font-weight:600;white-space:nowrap;}

/* Color Separation overlay */
.color-sep-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1200;display:flex;align-items:center;justify-content:center;}
.color-sep-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:560px;max-width:95vw;max-height:85vh;overflow-y:auto;box-shadow:0 16px 64px rgba(0,0,0,0.6);}
.color-sep-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
.color-sep-header h3{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0;}
.color-sep-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s;}
.color-sep-close:hover{color:var(--orange);}

/* Color sep tabs */
.color-sep-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:12px 16px;border-bottom:1px solid var(--border);}
.color-sep-tab{display:flex;align-items:center;gap:5px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:4px;cursor:pointer;transition:all .15s;}
.color-sep-tab:hover{border-color:var(--text-dim);color:var(--text);}
.color-sep-tab.active{border-color:var(--orange);color:var(--orange);background:rgba(232,106,16,0.1);}
.color-sep-tab-swatch{width:12px;height:12px;border-radius:2px;border:1px solid rgba(255,255,255,0.15);flex-shrink:0;}

/* Color sep preview canvas */
.color-sep-preview{padding:16px;display:flex;justify-content:center;background:var(--bg-deep);}
.color-sep-preview canvas{border:1px solid var(--border);border-radius:6px;}

/* Color sep summary */
.color-sep-summary{padding:12px 16px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 16px;}
.color-sep-stat{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.color-sep-stat strong{color:var(--text);}

/* Spot color list */
.spot-color-list{padding:8px 16px;max-height:320px;overflow-y:auto;}
.spot-color-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;margin-bottom:4px;transition:all .15s;cursor:pointer;}
.spot-color-item:hover{border-color:var(--orange);background:rgba(232,106,16,0.05);}
.spot-color-swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,0.15);flex-shrink:0;}
.spot-color-info{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.spot-color-hex{font-family:var(--font-mono);font-size:12px;color:var(--text-bright);font-weight:500;}
.spot-color-count{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);white-space:nowrap;}
.spot-color-actions{padding:8px 16px 16px;}

/* ============================================================
   CUTTER QUEUE — Job cards, panel, material summary
   ============================================================ */
.cutter-queue-panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:560px;max-width:95vw;max-height:85vh;overflow-y:auto;box-shadow:0 16px 64px rgba(0,0,0,0.6);}
.cq-toolbar{padding:12px 16px;border-bottom:1px solid var(--border);}
.cq-jobs{padding:8px 16px;max-height:380px;overflow-y:auto;}

/* Job card */
.queue-job-card{border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:6px;background:var(--bg-card);transition:all .2s;cursor:grab;}
.queue-job-card:hover{border-color:rgba(255,255,255,0.15);background:var(--bg-card-hover);}
.queue-job-card.cutting{border-color:var(--orange);animation:cutPulse 1.5s ease-in-out infinite;}
@keyframes cutPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,106,16,0);}50%{box-shadow:0 0 12px 2px rgba(232,106,16,0.25);}}
.queue-job-card.done{border-color:rgba(0,180,80,0.4);background:rgba(0,180,80,0.05);}
.queue-job-card.error{border-color:rgba(220,40,40,0.5);background:rgba(220,40,40,0.05);}

.qj-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.qj-name{font-family:var(--font-display);font-size:13px;color:var(--text-bright);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.qj-details{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:3px;}
.qj-status{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:3px;}
.qj-status strong{color:var(--text);}
.qj-settings{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:4px;}
.qj-actions{display:flex;gap:4px;flex-wrap:wrap;}

/* Priority badges */
.queue-priority-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.06em;padding:2px 7px;border-radius:3px;text-transform:uppercase;flex-shrink:0;}
.queue-priority-badge.rush{background:var(--orange);color:var(--bg-deep);}
.queue-priority-badge.normal{background:var(--bg);color:var(--text-dim);border:1px solid var(--border);}

/* Material summary */
.queue-material-summary{padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-card);}
.qm-title{font-family:var(--font-display);font-size:12px;color:var(--text-bright);font-weight:600;margin-bottom:6px;}
.qm-row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);padding:2px 0;}
.qm-row span:last-child{color:var(--text);font-weight:500;}

/* Queue toolbar badge */
.cq-toolbar-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--orange);color:var(--bg-deep);font-size:10px;font-weight:700;font-family:var(--font-mono);margin-left:4px;}

/* ============================================================
   WAVE 14 PART 2 — Color Management Dialog
   ============================================================ */
.color-mgr-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.color-mgr-overlay.open{opacity:1;pointer-events:all;}
.color-mgr-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:540px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,0.7);overflow:hidden;}
.color-mgr-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
.color-mgr-header h2{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0;letter-spacing:.02em;}
.color-mgr-tabs{display:flex;gap:2px;padding:8px 16px 0;border-bottom:1px solid var(--border);overflow-x:auto;}
.color-mgr-tab{background:none;border:none;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;}
.color-mgr-tab:hover{color:var(--text-bright);}
.color-mgr-tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.color-mgr-body{padding:16px 20px;overflow-y:auto;flex:1;min-height:0;}
.color-mgr-info{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);line-height:1.5;margin:0 0 8px;}
.color-mgr-section-title{font-family:var(--font-display);font-size:12px;color:var(--text-bright);margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.color-mgr-section-title:first-child{margin-top:0;}
.color-mgr-swatch-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.color-mgr-swatch{width:40px;height:40px;border-radius:6px;border:1px solid rgba(255,255,255,0.15);flex-shrink:0;}
.color-mgr-swatch-info{display:flex;flex-direction:column;gap:2px;}
.color-mgr-hex{font-family:var(--font-mono);font-size:14px;color:var(--text-bright);font-weight:600;}
.color-mgr-rgb{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.color-mgr-bars{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.color-mgr-bar-row{display:flex;align-items:center;gap:8px;}
.color-mgr-bar-label{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text);width:16px;text-align:center;}
.color-mgr-bar-track{flex:1;height:14px;background:var(--bg-deep);border-radius:4px;overflow:hidden;border:1px solid var(--border);}
.color-mgr-bar-fill{height:100%;border-radius:3px;transition:width .3s ease;}
.color-mgr-bar-val{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);width:36px;text-align:right;}
.color-mgr-cmyk-inputs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.color-mgr-cmyk-inputs label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:4px;}
.color-mgr-input{width:50px;background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;padding:4px 6px;text-align:center;}
.color-mgr-input:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.color-mgr-apply-btn{background:var(--orange);color:var(--bg-deep);border:none;padding:5px 14px;border-radius:4px;font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.color-mgr-apply-btn:hover{filter:brightness(1.15);}
.color-mgr-nearest-pantone{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);flex-wrap:wrap;}
.color-mgr-nearest-pantone strong{color:var(--text-bright);}
.color-mgr-delta-e{color:var(--orange);font-weight:600;font-size:11px;}
.color-mgr-search{width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;padding:6px 10px;margin-bottom:10px;box-sizing:border-box;}
.color-mgr-search:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.color-mgr-pantone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;max-height:320px;overflow-y:auto;padding:2px;}
.color-mgr-pantone-chip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .15s;}
.color-mgr-pantone-chip:hover{border-color:var(--orange);background:rgba(232,106,16,0.08);transform:translateY(-1px);}
.color-mgr-pantone-swatch{width:100%;height:28px;border-radius:4px;border:1px solid rgba(255,255,255,0.1);}
.color-mgr-pantone-label{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
.color-mgr-spot-add{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;margin-bottom:12px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);}
.color-mgr-spot-badge{font-family:var(--font-mono);font-size:10px;color:var(--orange);font-weight:600;padding:2px 8px;border:1px solid var(--orange);border-radius:4px;}
.color-mgr-spot-list{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto;}
.color-mgr-spot-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;transition:all .15s;}
.color-mgr-spot-item:hover{border-color:rgba(255,255,255,0.15);}
.color-mgr-spot-hex{font-family:var(--font-mono);font-size:12px;color:var(--text-bright);font-weight:500;}
.color-mgr-spot-pantone{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);flex:1;}
.color-mgr-spot-remove{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1;transition:all .15s;}
.color-mgr-spot-remove:hover{color:#ef5350;background:rgba(239,83,80,0.1);}
.color-mgr-sep-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.color-mgr-sep-panel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;}
.color-mgr-sep-label{font-family:var(--font-mono);font-size:11px;font-weight:700;}
.color-mgr-sep-canvas{border:1px solid var(--border);border-radius:4px;background:#fff;}

/* ============================================================
   WAVE 14 PART 2 — Cutter Queue Dialog
   ============================================================ */
.cutter-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.cutter-overlay.open{opacity:1;pointer-events:all;}
.cutter-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:560px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,0.7);overflow:hidden;}
.cutter-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
.cutter-header h2{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0;letter-spacing:.02em;}
.cutter-body{padding:0;overflow-y:auto;flex:1;min-height:0;}
.cutter-add-section{padding:16px 20px;border-bottom:1px solid var(--border);}
.cutter-list-section{padding:12px 20px;}
.cutter-preview-section{padding:12px 20px;border-top:1px solid var(--border);}
.cutter-section-title{font-family:var(--font-display);font-size:12px;color:var(--text-bright);margin:0 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.cutter-add-form{display:flex;flex-direction:column;gap:8px;}
.cutter-form-row{display:flex;align-items:center;gap:10px;}
.cutter-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:80px;flex-shrink:0;}
.cutter-input{flex:1;background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;padding:5px 8px;max-width:80px;}
.cutter-input:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.cutter-select{flex:1;background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;padding:5px 8px;}
.cutter-select:focus{outline:1px solid var(--orange);border-color:var(--orange);}
.cutter-add-btn{background:var(--orange);color:var(--bg-deep);border:none;padding:6px 16px;border-radius:4px;font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;align-self:flex-start;}
.cutter-add-btn:hover{filter:brightness(1.15);}
.cutter-info{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin:0;}
.cutter-queue-items{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;}
.cutter-queue-item{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:10px 12px;transition:all .15s;}
.cutter-queue-item:hover{border-color:rgba(255,255,255,0.15);background:var(--bg-card-hover);}
.cutter-item-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.cutter-item-name{font-family:var(--font-display);font-size:12px;color:var(--text-bright);font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cutter-item-status{font-family:var(--font-mono);font-size:10px;padding:2px 8px;border-radius:3px;font-weight:600;text-transform:uppercase;}
.cutter-status-pending{color:#ffa726;background:rgba(255,167,38,0.12);}
.cutter-status-cutting{color:var(--orange);background:rgba(232,106,16,0.12);animation:cutPulse 1.5s ease-in-out infinite;}
.cutter-status-done{color:#66bb6a;background:rgba(102,187,106,0.12);}
.cutter-item-remove{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1;transition:all .15s;}
.cutter-item-remove:hover{color:#ef5350;background:rgba(239,83,80,0.1);}
.cutter-item-details{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:3px;}
.cutter-item-calc{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin-bottom:4px;}
.cutter-item-calc span:last-child{color:var(--text);font-weight:500;}
.cutter-item-actions{display:flex;gap:6px;align-items:center;}
.cutter-status-sel{background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:10px;padding:3px 6px;}
.cutter-total{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);padding:10px 0 0;text-align:right;}
.cutter-total strong{color:var(--orange);font-size:14px;}
.cutter-roll-svg{width:100%;max-width:460px;height:auto;margin:8px auto;display:block;}

/* ============================================================
   WAVE 15 PART 1 — FEATURE 1: Import System
   ============================================================ */
.import-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.import-overlay.open{opacity:1;pointer-events:all;}
.import-dialog{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;width:420px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,0.5);transform:scale(0.95);transition:transform .2s;}
.import-overlay.open .import-dialog{transform:scale(1);}
.import-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);}
.import-dialog-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-bright);}
.import-dialog-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;transition:all .15s;}
.import-dialog-close:hover{color:#ef5350;background:rgba(239,83,80,0.1);}
.import-dropzone{margin:18px;padding:36px 24px;border:2px dashed var(--border);border-radius:10px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg-deep);}
.import-dropzone:hover,.import-dropzone.import-dropzone-hover{border-color:var(--orange);background:rgba(232,106,16,0.06);}
.import-dropzone-icon{color:var(--text-dim);margin-bottom:10px;transition:color .2s;}
.import-dropzone:hover .import-dropzone-icon,.import-dropzone.import-dropzone-hover .import-dropzone-icon{color:var(--orange);}
.import-dropzone-text{font-family:var(--font-body);font-size:13px;color:var(--text);margin-bottom:12px;}
.import-dropzone-types{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.import-type-badge{font-family:var(--font-mono);font-size:10px;padding:3px 10px;border-radius:4px;background:rgba(255,255,255,0.06);color:var(--text-dim);border:1px solid var(--border);font-weight:600;text-transform:uppercase;}
.import-trace-popup{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 30px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transition:all .25s;z-index:1300;font-family:var(--font-body);font-size:12px;color:var(--text);}
.import-trace-popup.open{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);}
.import-trace-btn{border:none;border-radius:5px;padding:5px 14px;font-family:var(--font-display);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.import-trace-yes{background:var(--orange);color:#fff;}
.import-trace-yes:hover{filter:brightness(1.15);}
.import-trace-no{background:var(--bg-deep);color:var(--text-dim);border:1px solid var(--border);}
.import-trace-no:hover{color:var(--text);border-color:rgba(255,255,255,0.15);}

/* ============================================================
   WAVE 15 PART 1 — FEATURE 2: Effects Engine
   ============================================================ */
.fx-engine-section{border-top:1px solid var(--border);padding-top:6px;margin-top:4px;}
.fx-add-row{padding:4px 0 8px;}
.fx-add-select{width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:var(--font-body);font-size:11px;padding:6px 8px;cursor:pointer;transition:border-color .15s;}
.fx-add-select:hover{border-color:var(--orange);}
.fx-add-select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 2px rgba(232,106,16,0.15);}
.fx-item{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;margin-bottom:6px;overflow:hidden;transition:all .15s;}
.fx-item:hover{border-color:rgba(255,255,255,0.12);}
.fx-item-disabled{opacity:0.5;}
.fx-item-header{display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:default;}
.fx-item-header input[type="checkbox"]{accent-color:var(--orange);cursor:pointer;flex-shrink:0;}
.fx-item-label{flex:1;font-family:var(--font-display);font-size:11px;color:var(--text-bright);font-weight:600;cursor:pointer;user-select:none;}
.fx-item-remove{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:0 4px;border-radius:3px;line-height:1;transition:all .15s;flex-shrink:0;}
.fx-item-remove:hover{color:#ef5350;background:rgba(239,83,80,0.1);}
.fx-item-body{padding:4px 8px 8px;transition:all .2s;}
.fx-item-body.fx-collapsed{display:none;}
.fx-item-collapsed .fx-item-label{color:var(--text-dim);}

/* ============================================================
   WAVE 15 PART 2: ADVANCED TRANSFORM SYSTEM
   ============================================================ */

/* Skew handles */
.skew-handle{pointer-events:all;transition:opacity .15s;}
.skew-handle:hover{opacity:0.8;}

/* Transform section in properties panel */
.tf-section{border-top:1px solid var(--border);padding-top:8px;margin-top:4px;}
.tf-lock-btn{background:none;border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-size:12px;padding:2px 4px;cursor:pointer;line-height:1;transition:all .15s;}
.tf-lock-btn:hover{border-color:var(--orange);}
.tf-lock-btn.active{color:var(--orange);border-color:var(--orange);}
.tf-dial-wrap{display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle;}
.tf-dial-wrap svg{display:block;}
.tf-flip-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:11px;padding:5px 8px;cursor:pointer;transition:all .15s;}
.tf-flip-btn:hover{border-color:var(--orange);color:var(--orange);background:rgba(232,106,16,0.08);}
.tf-flip-icon{font-size:14px;line-height:1;}
.tf-origin-label{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin:6px 0 4px;text-transform:uppercase;letter-spacing:0.5px;}
.tf-origin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:48px;height:48px;padding:4px;background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;}
.tf-origin-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border);background:transparent;cursor:pointer;padding:0;transition:all .15s;}
.tf-origin-dot:hover{border-color:var(--orange);background:rgba(232,106,16,0.2);}
.tf-origin-dot.active{background:var(--orange);border-color:var(--orange);box-shadow:0 0 4px rgba(232,106,16,0.5);}
.tf-reset-btn{width:100%;margin-top:8px;padding:6px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:all .15s;}
.tf-reset-btn:hover{border-color:#ef5350;color:#ef5350;background:rgba(239,83,80,0.08);}

/* Transform Dialog Overlay */
.tf-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.tf-dialog-overlay.open{opacity:1;pointer-events:all;}
.tf-dialog{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;width:380px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.5);animation:tfDialogIn .2s ease;}
@keyframes tfDialogIn{from{transform:scale(0.95) translateY(10px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.tf-dialog-title{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-bright);}
.tf-dialog-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:0 4px;line-height:1;transition:color .15s;}
.tf-dialog-close:hover{color:#ef5350;}
.tf-dialog-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
.tf-dlg-row{display:flex;align-items:center;gap:8px;}
.tf-dlg-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);width:60px;flex-shrink:0;text-transform:uppercase;letter-spacing:0.5px;}
.tf-dlg-inputs{display:flex;align-items:center;gap:6px;flex:1;}
.tf-dlg-input-wrap{display:flex;align-items:center;gap:3px;flex:1;}
.tf-dlg-input{width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--font-mono);font-size:12px;padding:5px 6px;outline:none;transition:border-color .15s;}
.tf-dlg-input:focus{border-color:var(--orange);}
.tf-dlg-suffix{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);white-space:nowrap;}
.tf-dlg-lock{background:none;border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-size:14px;padding:3px 5px;cursor:pointer;line-height:1;transition:all .15s;flex-shrink:0;}
.tf-dlg-lock:hover{border-color:var(--orange);}
.tf-dlg-lock.active{color:var(--orange);border-color:var(--orange);}
.tf-dlg-dial{display:flex;align-items:center;margin-left:4px;}
.tf-dlg-flip-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:7px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:var(--font-mono);font-size:12px;cursor:pointer;transition:all .15s;}
.tf-dlg-flip-btn:hover{border-color:var(--orange);color:var(--orange);}
.tf-dlg-flip-btn.active{background:rgba(232,106,16,0.12);border-color:var(--orange);color:var(--orange);}
.tf-dialog-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--border);}
.tf-dlg-btn{padding:7px 18px;border-radius:5px;font-family:var(--font-display);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid var(--border);}
.tf-dlg-btn.primary{background:var(--orange);border-color:var(--orange);color:#fff;}
.tf-dlg-btn.primary:hover{background:#f57c00;border-color:#f57c00;}
.tf-dlg-btn.secondary{background:var(--bg-card);color:var(--text-dim);}
.tf-dlg-btn.secondary:hover{border-color:#ef5350;color:#ef5350;}

/* ============================================================
   OUTLINE TOOL — Offset/Expand Path Dialog
   ============================================================ */
.outline-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.outline-overlay.open{opacity:1;pointer-events:all;}
.outline-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:440px;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,0.7);overflow:hidden;animation:outlineFadeIn .2s ease;}
@keyframes outlineFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.outline-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
.outline-header h2{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0;letter-spacing:.02em;}
.outline-body{padding:16px 20px;overflow-y:auto;flex:1;min-height:0;}
.outline-info{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-bottom:12px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;}
.outline-form-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.outline-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);min-width:60px;flex-shrink:0;}
.outline-dist-wrap{display:flex;align-items:center;gap:8px;flex:1;}
.outline-dist-wrap .props-range{flex:1;}
.outline-dist-val{font-family:var(--font-mono);font-size:11px;color:var(--orange);min-width:48px;text-align:right;}
.outline-presets{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap;}
.outline-preset-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:5px 10px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.outline-preset-btn:hover{border-color:var(--orange);color:var(--text-bright);}
.outline-preset-btn.active{background:rgba(232,106,16,0.15);border-color:var(--orange);color:var(--orange);}
.outline-preview{margin:14px 0;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;display:flex;justify-content:center;align-items:center;min-height:200px;}
.outline-preview svg{max-width:100%;}
.outline-actions{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--border);}
.outline-actions .btn-primary{background:var(--orange);border:none;color:#fff;font-family:var(--font-display);font-size:13px;font-weight:600;padding:10px 20px;border-radius:6px;cursor:pointer;transition:background .15s;}
.outline-actions .btn-primary:hover{background:var(--orange-light);}
.outline-actions .btn-secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-display);font-size:13px;padding:10px 20px;border-radius:6px;cursor:pointer;transition:all .15s;}
.outline-actions .btn-secondary:hover{border-color:var(--text-dim);color:var(--text-bright);}

/* ── Boolean Operations — Wave 16 Part 1 ─────────────────── */
.bool-toolbar-group{display:inline-flex;gap:1px;margin-left:2px;background:var(--border);border-radius:4px;overflow:hidden;}
.bool-tb-btn{background:var(--bg-card);border:none;color:var(--text-dim);padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;min-width:26px;height:26px;}
.bool-tb-btn:hover{background:var(--bg-hover,rgba(255,255,255,0.06));color:var(--text-bright);}
.bool-tb-btn:active{background:rgba(232,106,16,0.2);color:var(--orange);}
.bool-tb-btn svg{pointer-events:none;}

/* ============================================================
   WAVE 16 PART 2 — Smart Snap & Enhanced Rulers
   ============================================================ */

/* Snap guide lines in SVG */
#snap-guides-group line{transition:opacity 0.12s ease-out;}
#snap-guides-group text{user-select:none;pointer-events:none;}

/* Ruler cursor coordinate tooltip */
.ruler-cursor-tooltip{
  position:absolute;
  z-index:62;
  background:rgba(33,33,40,0.92);
  color:#4fc3f7;
  font-family:var(--font-mono);
  font-size:10px;
  padding:2px 6px;
  border-radius:3px;
  border:1px solid rgba(79,195,247,0.3);
  pointer-events:none;
  white-space:nowrap;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  transition:opacity 0.1s ease-out;
}

/* Enhanced snap settings equal spacing row */
#snap-settings-popup .settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}

/* Ruler hidden state adjustments */
.ruler[style*="display: none"]+.ruler-corner,
.ruler-corner[style*="display: none"]{display:none !important;}

/* ════════════════════════════════════════════════════════════════════
   Wave 17 Part 2 — Multi-Artboard System
   ════════════════════════════════════════════════════════════════════ */

/* Artboard strip — fixed at bottom of canvas-area */
.ab-strip{
  position:absolute;bottom:0;left:0;right:0;
  height:90px;
  background:var(--bg-card,#1e1e26);
  border-top:1px solid var(--border,#333);
  display:flex;align-items:center;
  z-index:60;
  padding:0 6px;
  gap:4px;
}
.ab-strip-scroll{
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  flex:1;
  scroll-behavior:smooth;
  padding:4px 0;
}
.ab-strip-scroll::-webkit-scrollbar{height:4px;}
.ab-strip-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:2px;}

/* Artboard card */
.ab-card{
  flex:0 0 auto;
  width:120px;
  cursor:pointer;
  border-radius:6px;
  padding:4px;
  text-align:center;
  transition:background 0.15s, box-shadow 0.15s;
  position:relative;
}
.ab-card:hover{background:rgba(255,255,255,0.05);}
.ab-card-active{
  box-shadow:0 0 0 2px #e86a10;
  background:rgba(232,106,16,0.08);
}
.ab-card-active .ab-card-name{color:#e86a10;font-weight:600;}

/* Thumbnail wrapper */
.ab-thumb-wrap{
  width:112px;height:56px;
  border-radius:4px;
  overflow:hidden;
  background:#2a2a34;
  border:1px solid var(--border,#333);
  position:relative;
  margin:0 auto;
}
.ab-thumb-img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

/* Hover overlay */
.ab-thumb-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;gap:6px;
  opacity:0;transition:opacity 0.15s;
}
.ab-card:hover .ab-thumb-overlay{opacity:1;}
.ab-overlay-btn{
  background:rgba(255,255,255,0.15);border:none;color:#fff;
  width:24px;height:24px;border-radius:4px;cursor:pointer;
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background 0.1s;
}
.ab-overlay-btn:hover{background:rgba(255,255,255,0.3);}
.ab-overlay-btn-danger:hover{background:rgba(255,60,60,0.6);}

/* Card name */
.ab-card-name{
  font-size:10px;
  color:var(--text-dim,#888);
  margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:112px;
  margin-left:auto;margin-right:auto;
}

/* Add card */
.ab-card-add{
  border:1px dashed rgba(255,255,255,0.2);
  border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:68px;
  opacity:0.6;transition:opacity 0.15s;
}
.ab-card-add:hover{opacity:1;border-color:#e86a10;}
.ab-add-icon{
  font-size:24px;color:var(--text-dim,#888);
  line-height:1;
}
.ab-card-add:hover .ab-add-icon{color:#e86a10;}

/* Rename input */
.ab-rename-input{
  width:100%;
  background:var(--bg-card,#1e1e26);
  border:1px solid #e86a10;
  color:#fff;
  font-size:10px;
  padding:1px 3px;
  border-radius:3px;
  text-align:center;
  outline:none;
}

/* Export all button */
.ab-export-all-btn{
  flex:0 0 auto;
  background:#e86a10;
  color:#fff;
  border:none;
  border-radius:5px;
  padding:6px 10px;
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.15s;
  margin-left:4px;
}
.ab-export-all-btn:hover{background:#ff8833;}

/* Canvas label */
.ab-canvas-label{
  position:absolute;top:8px;left:8px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:rgba(255,255,255,0.3);
  pointer-events:none;
  z-index:50;
  letter-spacing:0.5px;
}

/* Context menu */
.ab-context-menu{
  position:fixed;
  background:var(--bg-card,#1e1e26);
  border:1px solid var(--border,#444);
  border-radius:6px;
  padding:4px 0;
  min-width:140px;
  z-index:9999;
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
.ab-context-item{
  padding:6px 14px;
  font-size:12px;
  color:var(--text,#ddd);
  cursor:pointer;
  transition:background 0.1s;
}
.ab-context-item:hover{background:rgba(255,255,255,0.08);}
.ab-context-danger{color:#ff5555;}
.ab-context-danger:hover{background:rgba(255,60,60,0.15);}

/* Dialog overlay */
.ab-dialog-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
  z-index:10000;
}
.ab-dialog{
  background:var(--bg-card,#1e1e26);
  border:1px solid var(--border,#444);
  border-radius:10px;
  padding:20px 24px;
  min-width:300px;max-width:380px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  color:var(--text,#ddd);
}
.ab-dialog-title{
  font-size:16px;font-weight:700;
  margin-bottom:14px;
  color:#fff;
}
.ab-dialog-label{
  font-size:11px;color:var(--text-dim,#888);
  display:block;margin:10px 0 4px;
  text-transform:uppercase;letter-spacing:0.5px;
}
.ab-dialog-input{
  width:100%;padding:7px 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border,#444);
  border-radius:5px;color:#fff;font-size:13px;
  outline:none;box-sizing:border-box;
}
.ab-dialog-input:focus{border-color:#e86a10;}
.ab-dialog-input-sm{width:80px !important;text-align:center;}
.ab-dialog-select{
  width:100%;padding:7px 10px;
  background:var(--bg-card,#1e1e26);
  border:1px solid var(--border,#444);
  border-radius:5px;color:#fff;font-size:13px;
  outline:none;
}
.ab-dialog-select:focus{border-color:#e86a10;}
.ab-dialog-custom{
  display:flex;align-items:center;justify-content:center;
  margin-top:8px;
}
.ab-dialog-buttons{
  display:flex;gap:8px;justify-content:flex-end;
  margin-top:18px;
}
.ab-dialog-btn{
  padding:7px 16px;border-radius:5px;
  font-size:12px;font-weight:600;
  cursor:pointer;border:none;
  transition:background 0.15s;
}
.ab-dialog-btn-cancel{
  background:rgba(255,255,255,0.08);color:#ccc;
}
.ab-dialog-btn-cancel:hover{background:rgba(255,255,255,0.14);}
.ab-dialog-btn-ok{
  background:#e86a10;color:#fff;
}
.ab-dialog-btn-ok:hover{background:#ff8833;}

/* ════════════════════════════════════════════════════════════════════
   Wave 17 Part 1 — Template System
   ════════════════════════════════════════════════════════════════════ */

.tmpl-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.tmpl-overlay.open{opacity:1;pointer-events:all;}
.tmpl-dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);width:820px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,0.7);overflow:hidden;}
.tmpl-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);gap:12px;}
.tmpl-header h2{font-family:var(--font-display);font-size:16px;color:var(--text-bright);margin:0;letter-spacing:.02em;flex:1;}
.tmpl-close-btn{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:2px 6px;border-radius:4px;line-height:1;}
.tmpl-close-btn:hover{color:var(--text-bright);background:rgba(255,255,255,0.08);}
.tmpl-back-btn{background:none;border:none;color:var(--accent);font-size:13px;cursor:pointer;padding:4px 8px;border-radius:4px;font-family:var(--font-body);}
.tmpl-back-btn:hover{background:rgba(232,106,16,0.15);}

/* Search bar */
.tmpl-search-bar{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--border);}
.tmpl-search-input{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 12px;color:var(--text-bright);font-size:13px;font-family:var(--font-body);outline:none;}
.tmpl-search-input:focus{border-color:var(--accent);}
.tmpl-search-input::placeholder{color:var(--text-dim);}
.tmpl-save-btn{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:7px 14px;color:var(--text);font-size:12px;cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:border-color .15s,background .15s;}
.tmpl-save-btn:hover{border-color:var(--accent);background:rgba(232,106,16,0.1);color:var(--text-bright);}

/* Body layout */
.tmpl-body{display:flex;flex:1;overflow:hidden;min-height:0;}

/* Sidebar */
.tmpl-sidebar{width:160px;min-width:140px;border-right:1px solid var(--border);padding:10px 0;overflow-y:auto;flex-shrink:0;}
.tmpl-cat-tab{padding:8px 18px;font-size:13px;color:var(--text);cursor:pointer;transition:background .12s,color .12s;font-family:var(--font-body);}
.tmpl-cat-tab:hover{background:rgba(255,255,255,0.05);color:var(--text-bright);}
.tmpl-cat-tab.active{background:rgba(232,106,16,0.12);color:var(--accent);border-right:2px solid var(--accent);}

/* Grid */
.tmpl-grid{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;align-content:start;}
.tmpl-empty{grid-column:1/-1;text-align:center;color:var(--text-dim);padding:40px 0;font-size:14px;}

/* Card */
.tmpl-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;position:relative;}
.tmpl-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 4px 20px rgba(232,106,16,0.18);}
.tmpl-thumb{width:100%;aspect-ratio:4/3;overflow:hidden;background:#0d0d1a;display:flex;align-items:center;justify-content:center;padding:6px;}
.tmpl-thumb svg{width:100%;height:100%;display:block;}
.tmpl-info{padding:8px 10px;}
.tmpl-name{font-size:13px;font-weight:600;color:var(--text-bright);font-family:var(--font-display);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tmpl-size{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);}

/* Delete button */
.tmpl-delete-btn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,0.7);border:none;color:#ef5350;font-size:16px;cursor:pointer;padding:0 5px;border-radius:4px;line-height:1.2;opacity:0;transition:opacity .15s;}
.tmpl-card:hover .tmpl-delete-btn{opacity:1;}
.tmpl-delete-btn:hover{background:rgba(239,83,80,0.2);}

/* Detail view */
.tmpl-detail-body{flex:1;overflow-y:auto;padding:20px;display:flex;gap:20px;align-items:flex-start;}
.tmpl-detail-preview{flex:1;min-width:0;aspect-ratio:4/3;background:#0d0d1a;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:12px;}
.tmpl-detail-preview svg{width:100%;height:100%;}
.tmpl-detail-info{width:180px;flex-shrink:0;}
.tmpl-detail-cat{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-family:var(--font-mono);margin-bottom:8px;}
.tmpl-detail-size{font-size:14px;color:var(--text-bright);margin-bottom:4px;}
.tmpl-detail-count{font-size:12px;color:var(--text-dim);}

/* Actions bar */
.tmpl-actions{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--border);justify-content:flex-end;}
.tmpl-action-btn{padding:9px 18px;border-radius:6px;border:none;font-size:13px;font-family:var(--font-body);cursor:pointer;transition:background .15s,transform .1s;}
.tmpl-action-btn:active{transform:scale(0.97);}
.tmpl-replace-btn{background:#e86a10;color:#fff;}
.tmpl-replace-btn:hover{background:#ff8833;}
.tmpl-add-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-bright);}
.tmpl-add-btn:hover{border-color:var(--accent);background:rgba(232,106,16,0.1);}

/* Responsive */
@media(max-width:640px){
  .tmpl-dialog{max-width:100vw;max-height:100vh;border-radius:0;width:100vw;height:100vh;}
  .tmpl-body{flex-direction:column;}
  .tmpl-sidebar{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;overflow-y:hidden;padding:0;flex-shrink:0;}
  .tmpl-cat-tab{white-space:nowrap;padding:8px 14px;border-right:none;}
  .tmpl-cat-tab.active{border-right:none;border-bottom:2px solid var(--accent);}
  .tmpl-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:10px;}
  .tmpl-detail-body{flex-direction:column;}
  .tmpl-detail-info{width:100%;}
}

/* ============================================================
   WAVE 19 PART 2 — PERFORMANCE OPTIMIZER STYLES
   ============================================================ */

/* Perf Monitor (bottom-right of canvas) */
.perf-monitor{
  position:absolute;bottom:36px;right:12px;z-index:50;
  font-family:var(--font-mono);font-size:11px;line-height:1;
  padding:4px 10px;border-radius:4px;
  background:rgba(20,20,24,0.75);backdrop-filter:blur(6px);
  color:var(--text-dim);pointer-events:none;
  transition:color .2s,opacity .2s;opacity:0.7;
  white-space:nowrap;
}
.perf-monitor:hover{opacity:1;}
.perf-green{color:#4caf50;}
.perf-yellow{color:#ff9800;}
.perf-red{color:#f44336;}

/* ============================================================
   WAVE 19 PART 2 — ACCESSIBILITY + STATUS BAR STYLES
   ============================================================ */

/* Screen reader only (visually hidden but accessible) */
.a11y-sr-only{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;
}

/* Enhanced Status Bar */
.status-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  height:28px;display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-deep);border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;line-height:28px;
  color:var(--text-dim);padding:0 14px;gap:16px;
  user-select:none;-webkit-user-select:none;
}
.status-left{
  flex:1 1 40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.status-center{
  flex:0 0 auto;text-align:center;white-space:nowrap;
  color:var(--text);opacity:0.7;
}
.status-right{
  flex:1 1 30%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.status-right .perf-green{color:#4caf50;}
.status-right .perf-yellow{color:#ff9800;}
.status-right .perf-red{color:#f44336;}

/* Prevent status bar from overlapping artboard strip */
#canvas-area{
  margin-bottom:28px;
}

/* Focus visible for keyboard nav */
.tb-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* High contrast focus indicator */
.high-contrast .tb-btn:focus-visible,
.high-contrast [role="button"]:focus-visible{
  outline:3px solid #fff;outline-offset:2px;
}

@media(max-width:640px){
  .status-bar{font-size:10px;padding:0 8px;height:24px;line-height:24px;}
  .status-center{display:none;}
  .perf-monitor{bottom:32px;right:8px;font-size:10px;}
}

/* ============================================================
   WAVE 19 PART 1 — HISTORY PANEL STYLES
   ============================================================ */
.hist-panel{
  position:absolute;top:0;left:0;bottom:0;width:260px;
  background:var(--bg, #1a1a2e);border-right:1px solid var(--border, #333);
  transform:translateX(-100%);transition:transform 0.25s ease;
  z-index:80;display:flex;flex-direction:column;
  box-shadow:2px 0 12px rgba(0,0,0,0.3);
}
.hist-panel.hist-open{transform:translateX(0);}
.hist-header{
  display:flex;align-items:center;gap:6px;
  padding:10px 12px;border-bottom:1px solid var(--border, #333);
  flex-shrink:0;background:var(--bg2, #16162a);
}
.hist-title-wrap{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.hist-title{font-size:13px;font-weight:600;color:var(--text, #eee);white-space:nowrap;}
.hist-count{font-size:11px;color:var(--text-dim, #888);white-space:nowrap;}
.hist-clear-btn{
  background:none;border:1px solid var(--border, #444);color:var(--text-dim, #999);
  font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;
  transition:background 0.15s,color 0.15s;white-space:nowrap;
}
.hist-clear-btn:hover{background:rgba(232,106,16,0.15);color:var(--accent, #e86a10);border-color:var(--accent, #e86a10);}
.hist-close-btn{
  background:none;border:none;color:var(--text-dim, #999);
  font-size:18px;line-height:1;cursor:pointer;padding:0 4px;
  transition:color 0.15s;
}
.hist-close-btn:hover{color:var(--accent, #e86a10);}
.hist-list{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 0;
  scrollbar-width:thin;scrollbar-color:var(--border, #444) transparent;
}
.hist-entry{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;font-size:11px;color:var(--text, #ddd);
  transition:background 0.12s;border-left:3px solid transparent;
  min-height:30px;
}
.hist-entry:hover{background:rgba(255,255,255,0.04);}
.hist-entry.hist-current{
  border-left-color:var(--accent, #e86a10);
  background:rgba(232,106,16,0.08);color:#fff;font-weight:600;
}
.hist-entry.hist-past{opacity:0.7;}
.hist-entry.hist-past:hover{opacity:1;}
.hist-entry.hist-future{opacity:0.4;font-style:italic;}
.hist-entry.hist-future:hover{opacity:0.7;}
.hist-icon{
  flex-shrink:0;width:14px;height:14px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim, #888);
}
.hist-entry.hist-current .hist-icon{color:var(--accent, #e86a10);}
.hist-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hist-time{flex-shrink:0;font-size:9px;color:var(--text-dim, #666);font-family:var(--mono, 'IBM Plex Mono', monospace);}
@media(max-width:640px){
  .hist-panel{width:220px;}
}

/* ============================================================
   WAVE 19 PART 1 — ENHANCED PATTERN FILL STYLES
   ============================================================ */
.pat-grid-enhanced{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(60px,1fr));
  gap:4px;margin-bottom:8px;
}
.pat-grid-enhanced .pattern-type-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 2px;border:1px solid var(--border, #333);border-radius:5px;
  cursor:pointer;transition:border-color 0.15s,background 0.15s;
  background:rgba(255,255,255,0.02);min-height:48px;
}
.pat-grid-enhanced .pattern-type-cell:hover{
  border-color:var(--accent, #e86a10);background:rgba(232,106,16,0.06);
}
.pat-grid-enhanced .pattern-type-cell.active{
  border-color:var(--accent, #e86a10);background:rgba(232,106,16,0.12);
  box-shadow:0 0 0 1px var(--accent, #e86a10);
}
.pat-grid-enhanced .pattern-icon{font-size:16px;line-height:1;margin-bottom:2px;}
.pat-grid-enhanced .pattern-name{font-size:8px;color:var(--text-dim, #999);text-align:center;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.pat-grid-enhanced .pattern-type-cell.active .pattern-name{color:var(--accent, #e86a10);}
.pat-preview-enhanced{
  height:40px;border-radius:5px;border:1px solid var(--border, #333);
  margin-top:8px;background-size:16px 16px !important;
}