/* ── LockVault Styles ─────────────────────────────────────────────────────── */
:root {
  --bg:#0f0f0f; --surface:#1a1a1a; --surface2:#242424; --border:#333;
  --accent:#e8c84a; --accent-blue:#7eb8f7; --accent2:#c0392b;
  --text:#e8e8e8; --text-muted:#888; --radius:4px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',sans-serif;min-height:100vh;}

/* HEADER */
header{border-bottom:2px solid var(--accent);padding:18px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg);z-index:100;}
.logo{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:4px;color:var(--accent);line-height:1;}
.logo-sub{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;color:var(--text-muted);letter-spacing:2px;margin-top:2px;}
.header-stats{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.stat-pill{background:var(--surface2);border:1px solid var(--border);padding:5px 12px;font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--text-muted);border-radius:2px;text-align:center;}
.stat-pill strong{color:var(--accent);font-size:0.95rem;display:block;}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:73px;z-index:99;}
.tab-btn{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:3px;padding:14px 32px;background:none;border:none;color:var(--text-muted);cursor:pointer;border-bottom:3px solid transparent;transition:all 0.2s;display:flex;align-items:center;gap:10px;text-decoration:none;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
.tab-btn .tab-count{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;font-weight:600;background:var(--surface2);border:1px solid var(--border);padding:2px 7px;border-radius:10px;color:var(--text-muted);}
.tab-btn.active .tab-count{border-color:var(--accent);color:var(--accent);}

/* TOOLBAR */
.toolbar{padding:14px 32px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.spacer{flex:1;}
.search-box{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:7px 12px;font-family:'IBM Plex Mono',monospace;font-size:0.78rem;border-radius:var(--radius);width:200px;transition:border-color 0.2s;}
.search-box:focus{outline:none;border-color:var(--accent);}
.search-box::placeholder{color:var(--text-muted);}

/* BUTTONS */
.btn{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;font-weight:600;letter-spacing:1px;padding:8px 16px;border:none;cursor:pointer;border-radius:var(--radius);transition:all 0.15s;text-transform:uppercase;text-decoration:none;display:inline-block;}
.btn-primary{background:var(--accent);color:#111;}
.btn-primary:hover{background:#f0d45a;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost.active{border-color:var(--accent);color:var(--accent);background:rgba(232,200,74,0.08);}
.btn-danger{background:var(--accent2);color:#fff;font-size:0.68rem;padding:5px 10px;}
.btn-danger:hover{background:#e74c3c;}
.btn-restraint{background:#6c3d91;color:#fff;}
.btn-restraint:hover{background:#7d48a8;transform:translateY(-1px);}

/* MAIN */
main{padding:24px 32px;}

/* GRID */
.grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.lock-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color 0.2s,transform 0.2s;animation:fadeIn 0.3s ease;}
.lock-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.restraint-card:hover{border-color:#9b59b6!important;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.card-header{background:var(--surface2);padding:12px 14px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--border);}
.card-make{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:2px;color:var(--accent);line-height:1;}
.card-model{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--text-muted);margin-top:2px;}
.card-badges{display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.card-body{padding:12px 14px;display:flex;flex-direction:column;gap:9px;}
.card-stat{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--text-muted);}
.card-stat span{color:var(--text);font-weight:600;}
.card-desc{font-size:0.8rem;color:var(--text-muted);line-height:1.5;border-left:2px solid var(--border);padding-left:10px;}
.card-notes{font-size:0.75rem;color:#666;font-style:italic;line-height:1.4;}
.card-footer{padding:9px 14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}

/* BADGES */
.badges-row{display:flex;gap:7px;flex-wrap:wrap;}
.badge{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;font-weight:600;letter-spacing:0.5px;padding:3px 8px;border-radius:2px;text-transform:uppercase;}
.badge-on{background:rgba(39,174,96,0.15);color:#2ecc71;border:1px solid rgba(39,174,96,0.3);}
.badge-off{background:rgba(255,255,255,0.04);color:#555;border:1px solid #2a2a2a;}
.type-badge{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:rgba(232,200,74,0.12);color:var(--accent);border:1px solid rgba(232,200,74,0.3);padding:3px 7px;border-radius:2px;white-space:nowrap;}
.format-badge{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:rgba(100,160,255,0.12);color:var(--accent-blue);border:1px solid rgba(100,160,255,0.3);padding:3px 7px;border-radius:2px;white-space:nowrap;}
.restraint-badge{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:rgba(155,89,182,0.12);color:#bb8fce;border:1px solid rgba(155,89,182,0.3);padding:3px 7px;border-radius:2px;white-space:nowrap;}

/* COLOUR */
.colour-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;transition:transform 0.15s,border-color 0.15s;flex-shrink:0;}
.colour-swatch:hover{transform:scale(1.2);border-color:#fff!important;}
.swatch-active{border-color:#fff!important;transform:scale(1.15);box-shadow:0 0 0 2px rgba(255,255,255,0.35);}
.colour-chip{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;font-weight:600;padding:2px 7px;border-radius:2px;text-transform:uppercase;letter-spacing:0.5px;}
.colour-dot{width:11px;height:11px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,0.15);flex-shrink:0;}

/* TABLE */
.table-view{width:100%;border-collapse:collapse;}
.table-view th{font-family:'IBM Plex Mono',monospace;font-size:0.67rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:10px 12px;border-bottom:2px solid var(--accent);white-space:nowrap;}
.table-view td{padding:11px 12px;font-size:0.8rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.table-view tr:hover td{background:var(--surface);}
.table-view tr{animation:fadeIn 0.25s ease;}
.table-make{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;color:var(--accent);letter-spacing:1px;}
.table-model{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--text-muted);}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot-on{background:#2ecc71;}
.dot-off{background:#2a2a2a;border:1px solid #444;}
.yt-link{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:#e74c3c;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color 0.2s;}
.yt-link:hover{color:#ff6b6b;}

/* EMPTY */
.empty{text-align:center;padding:70px 20px;color:var(--text-muted);}
.empty-icon{font-size:3.5rem;display:block;margin-bottom:14px;opacity:0.25;}
.empty h2{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:3px;margin-bottom:6px;}
.empty p{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:200;align-items:center;justify-content:center;padding:20px;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;animation:slideUp 0.22s ease;}
.modal.restraint-modal{border-color:#9b59b6;}
@keyframes slideUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:3px;color:var(--accent);}
.modal-title.restraint{color:#bb8fce;}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.3rem;cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;}

/* FORM */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-family:'IBM Plex Mono',monospace;font-size:0.67rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);}
.field input,.field select,.field textarea{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:8px 11px;font-family:'IBM Plex Sans',sans-serif;font-size:0.83rem;border-radius:var(--radius);transition:border-color 0.2s;width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:65px;}
.field select option{background:var(--surface2);}
.section-divider{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);padding-bottom:5px;margin-top:2px;}
.checkboxes-row{display:flex;gap:18px;flex-wrap:wrap;}
.check-item{display:flex;align-items:center;gap:7px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--text-muted);}
.check-item input[type="checkbox"]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;}

/* ALERTS */
.alert{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;}
.alert-error{background:rgba(192,57,43,0.15);border:1px solid rgba(192,57,43,0.4);color:#e74c3c;}
.alert-success{background:rgba(39,174,96,0.15);border:1px solid rgba(39,174,96,0.4);color:#2ecc71;}

/* HOME PAGE */
.hb-hero{padding:36px 32px 24px;border-bottom:1px solid var(--border);}
.hb-hero-title{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;letter-spacing:6px;color:var(--accent);line-height:1;}
.hb-hero-sub{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--text-muted);letter-spacing:2px;margin-top:8px;}
.hb-stats-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;}
.hb-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 20px;text-align:center;min-width:90px;}
.hb-stat strong{display:block;font-family:'IBM Plex Mono',monospace;font-size:1.6rem;color:var(--accent);line-height:1;}
.hb-stat span{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:4px;display:block;}
.hb-cards{padding:24px 32px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.hb-col-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.hb-locks{border-top:3px solid var(--accent);}
.hb-restraints{border-top:3px solid #6c3d91;}
.hb-col-header{padding:14px 16px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.hb-col-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:3px;color:var(--accent);}
.hb-col-title.hb-purple{color:#bb8fce;}
.hb-col-count{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;color:var(--text-muted);border:1px solid var(--border);padding:2px 8px;border-radius:10px;}
.hb-col-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;}
.hb-col-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;}
.hb-mini-stats{display:flex;gap:8px;flex-wrap:wrap;}
.hb-mini-stat{background:var(--surface2);border:1px solid var(--border);border-radius:2px;padding:5px 10px;font-family:'IBM Plex Mono',monospace;font-size:0.65rem;color:var(--text-muted);}
.hb-mini-stat b{color:var(--accent);font-size:0.9rem;display:block;}
.hb-mini-stat b.purple{color:#bb8fce;}
.hb-breakdown-title{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);}
.hb-breakdown{display:flex;flex-direction:column;gap:5px;margin-top:4px;}
.hb-bar-row{display:flex;align-items:center;gap:8px;}
.hb-bar-label{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;color:var(--text-muted);width:84px;text-align:right;flex-shrink:0;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hb-bar-track{flex:1;background:var(--surface2);border-radius:2px;height:6px;}
.hb-bar-fill{height:6px;border-radius:2px;transition:width 0.4s ease;}
.hb-bar-fill.gold{background:var(--accent);}
.hb-bar-fill.purple{background:#6c3d91;}
.hb-bar-num{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;color:var(--text-muted);width:16px;text-align:right;}
.hb-cta{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:opacity 0.2s;}
.hb-cta.gold{color:var(--accent);}
.hb-cta.purple{color:#bb8fce;}
.hb-cta:hover{opacity:0.7;}
.hb-empty-msg{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--text-muted);font-style:italic;}
.hb-recent{padding:0 32px 32px;}
.hb-section-title{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:12px;}
.hb-recent-items{display:flex;flex-direction:column;gap:6px;}
.hb-recent-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 14px;display:flex;align-items:center;gap:10px;transition:border-color 0.2s;}
.hb-recent-item:hover{border-color:var(--accent);}
.hb-ri-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.hb-ri-dot.purple{background:#6c3d91;}
.hb-ri-name{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:1px;color:var(--accent);white-space:nowrap;}
.hb-ri-name.purple{color:#bb8fce;}
.hb-ri-model{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--text-muted);}
.hb-tag{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.5px;text-transform:uppercase;border:1px solid var(--border);padding:2px 6px;border-radius:2px;color:var(--text-muted);white-space:nowrap;}
.hb-ri-time{font-family:'IBM Plex Mono',monospace;font-size:0.65rem;color:var(--text-muted);margin-left:auto;white-space:nowrap;}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* RESPONSIVE */
@media(max-width:600px){
  header{padding:12px 16px;} main{padding:14px 16px;} .toolbar{padding:10px 16px;}
  .tab-btn{padding:12px 18px;font-size:1rem;letter-spacing:2px;}
  .form-row{grid-template-columns:1fr;} .logo{font-size:1.5rem;}
  .hb-hero{padding:24px 16px 18px;} .hb-cards{padding:16px;grid-template-columns:1fr;}
  .hb-recent{padding:0 16px 24px;} .hb-hero-title{font-size:2rem;}
}