*,*::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%;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;}
.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.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; }

/* 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;}

/* 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:480px;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;}}