/* ToolForge v2 — Design System */
:root {
  --bg: #0f0f0f;
  --bg-elevated: #151515;
  --surface: #1a1a1a;
  --card-bg: #222222;
  --border: #2e2e2e;
  --border-hover: #444;
  --gold: #D4AF37;
  --gold-dim: rgba(212,175,55,0.12);
  --gold-border: rgba(212,175,55,0.3);
  --gold-hover: #e8c84a;
  --primary: #D4AF37;
  --text: #f0f0f0;
  --text-muted: #888;
  --text-dim: #444;
  --success: #4caf50;
  --danger: #ef5350;
  --warning: #ff9800;
  --radius: 8px;
  --radius-lg: 12px;
  --font: system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono: 'SF Mono','Fira Code','Courier New',monospace;
}
[data-theme="light"] {
  --bg:#f4f4f4; --bg-elevated:#fff; --surface:#fff; --card-bg:#fff;
  --border:#e0e0e0; --border-hover:#bbb; --text:#1a1a1a;
  --text-muted:#666; --text-dim:#aaa;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3,h4{font-weight:600;line-height:1.3}
h1{font-size:24px} h2{font-size:18px} h3{font-size:15px}
p{color:var(--text-muted)}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--font-mono);font-size:12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
/* Layout */
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
#main-header{flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;height:54px;gap:12px;z-index:200}
.logo{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--gold);letter-spacing:-.3px;cursor:pointer;text-decoration:none}
.logo-sub{color:var(--text-muted);font-weight:400;font-size:13px}
#header-user-section{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);padding:4px 10px;border-radius:var(--radius);background:var(--card-bg);border:1px solid var(--border)}
#header-user{color:var(--text);font-weight:500}
header nav{margin-left:auto;display:flex;gap:6px;align-items:center}
header nav button,header nav a{color:var(--text-muted);background:none;border:none;font-family:var(--font);font-size:13px;padding:6px 10px;border-radius:var(--radius);cursor:pointer;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
header nav button:hover,header nav a:hover{color:var(--text);background:var(--card-bg);text-decoration:none}
#main-content{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column}
/* Grid view */
#tool-grid-view{flex:1;overflow-y:auto;padding:1.5rem 2rem}
.page-title{margin-bottom:.25rem}
.page-subtitle{font-size:14px;color:var(--text-muted);margin-bottom:1.5rem}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.tool-grid-empty{grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--text-muted)}
.tool-grid-empty h3{color:var(--text);margin-bottom:8px}
/* Cards */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color .15s,transform .15s}
.tool-card{display:flex;flex-direction:column;padding:1.25rem;cursor:pointer;position:relative;overflow:hidden}
.tool-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.tool-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tool-icon{font-size:30px;margin-bottom:10px;line-height:1}
.tool-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.tool-meta{font-size:12px;color:var(--text-muted);margin-bottom:14px;flex:1}
.tool-badge{position:absolute;top:10px;right:10px;background:var(--gold-dim);color:var(--gold);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;border:1px solid var(--gold-border)}
/* Viewer */
#tool-viewer{flex:1;display:none;flex-direction:column;overflow:hidden;position:relative}
#viewer-toolbar{flex-shrink:0;height:42px;background:var(--bg-elevated);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:8px;z-index:50}
#viewer-toolbar button{display:flex;align-items:center;gap:5px;padding:4px 10px;background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-family:var(--font);font-size:12px;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
#viewer-toolbar button:hover{background:var(--card-bg);color:var(--text);border-color:var(--border-hover)}
#viewer-tool-name{font-size:13px;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.toolbar-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 2px}
.tb-spacer{flex:1}
#tb-save-btn{border-color:rgba(212,175,55,.4);color:var(--gold)}
#tb-save-btn:hover{background:rgba(212,175,55,.1);border-color:var(--gold)}
#tool-frame-container{flex:1;overflow:hidden;position:relative;display:flex}
#tool-frame{flex:1;border:none;background:#fff;display:block;min-width:0}
/* Drawer */
#proj-drawer{position:absolute;top:0;right:0;bottom:0;width:280px;background:var(--surface);border-left:1px solid var(--border);z-index:40;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease}
#proj-drawer.open{transform:translateX(0)}
.drawer-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.drawer-header h3{font-size:13px;font-weight:600;color:var(--text)}
.drawer-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;padding:2px 4px;border-radius:4px;line-height:1}
.drawer-close:hover{color:var(--text);background:var(--card-bg)}
#proj-list{flex:1;overflow-y:auto;padding:8px}
.proj-item{padding:10px 12px;border-radius:var(--radius);cursor:pointer;transition:background .12s;margin-bottom:3px;position:relative;border:1px solid transparent}
.proj-item:hover{background:var(--card-bg)}
.proj-item.active{background:var(--gold-dim);border-color:var(--gold-border)}
.proj-name{font-size:13px;font-weight:500;color:var(--text)}
.proj-active-dot{color:var(--gold);font-size:10px}
.proj-meta{font-size:11px;color:var(--text-muted);margin-top:2px}
.proj-actions{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:3px;opacity:0;transition:opacity .12s}
.proj-item:hover .proj-actions{opacity:1}
.proj-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:3px 5px;border-radius:4px;transition:all .12s}
.proj-btn:hover{background:var(--card-bg);color:var(--text)}
.proj-btn.delete:hover{background:var(--danger);color:#fff}
.proj-loading,.proj-empty{color:var(--text-muted);font-size:13px;text-align:center;padding:2rem 1rem;line-height:1.8}
.drawer-footer{padding:10px;border-top:1px solid var(--border);flex-shrink:0}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:var(--radius);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid transparent;text-decoration:none;white-space:nowrap}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--gold);color:#000}
.btn-primary:hover:not(:disabled){background:var(--gold-hover);transform:translateY(-1px)}
.btn-secondary{background:var(--surface);color:var(--text-muted);border-color:var(--border)}
.btn-secondary:hover:not(:disabled){color:var(--text);border-color:var(--border-hover);background:var(--card-bg);text-decoration:none}
.btn-danger{background:rgba(239,83,80,.12);color:var(--danger);border-color:var(--danger)}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-full{width:100%}
/* Forms */
.field{margin-bottom:1rem}
.field-label{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=url],select,textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:14px;padding:9px 12px;transition:border-color .15s,box-shadow .15s;outline:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
input::placeholder,textarea::placeholder{color:var(--text-dim)}
select{cursor:pointer}
select option{background:var(--surface)}
/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(10,10,10,.92);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1.5rem}
.modal{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:420px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.modal-header h2{font-size:17px;font-weight:600;color:var(--text)}
.modal-error{color:var(--danger);font-size:12.5px;margin-top:8px;min-height:18px}
.modal-info{color:var(--text-muted);font-size:12.5px;margin-top:8px;min-height:18px}
/* Auth-specific */
.auth-logo{font-size:36px;margin-bottom:4px;text-align:center}
.auth-tagline{font-size:13px;color:var(--text-muted);margin-bottom:1.5rem;text-align:center}
.forgot-link{font-size:12px;color:var(--gold);cursor:pointer;text-align:right;display:block;margin-top:4px}
.forgot-link:hover{text-decoration:underline}
/* Toasts */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius);padding:10px 14px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;box-shadow:0 4px 20px rgba(0,0,0,.4);min-width:220px;max-width:300px;animation:toastIn .2s ease,toastOut .3s ease 3s forwards}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warning)}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(20px)}}
/* Status bar */
#status-bar{flex-shrink:0;height:26px;background:var(--bg-elevated);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 1rem;gap:1rem;font-size:11px;color:var(--text-dim)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}
.status-dot.offline{background:var(--text-dim)}
#status-msg{flex:1;color:var(--text-muted)}
/* Responsive */
@media(max-width:768px){.tool-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))};#proj-drawer{width:100%};#tool-grid-view{padding:1rem};#main-header{padding:0 1rem};.logo-sub{display:none}}
@media(max-width:480px){.tool-grid{grid-template-columns:1fr 1fr};.modal{padding:1.5rem}}
/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
*:focus:not(:focus-visible){outline:none}
.hidden{display:none!important}
/* Viewer proj inputs */
#viewer-proj-name{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;padding:3px 8px;width:130px;outline:none;font-family:var(--font)}
#viewer-proj-name:focus{border-color:var(--gold);background:var(--card-bg)}
#viewer-proj-select{background:var(--bg-elevated);border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:12px;padding:3px 8px;outline:none;cursor:pointer;max-width:110px}
#viewer-proj-select:focus{border-color:var(--gold)}