*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:        #f8f6f2;
  --bg2:       #ffffff;
  --bg3:       #f2efe9;
  --border:    #e8e2d9;
  --border2:   #d4cdc2;
  --accent:    #e85d26;
  --accent2:   #cf4d18;
  --accent-l:  #fff0ea;
  --green:     #2d8a5e;
  --green-l:   #e8f5ee;
  --blue:      #2c6fad;
  --blue-l:    #e8f0f9;
  --yellow:    #e8a020;
  --yellow-l:  #fef3dc;
  --red:       #c0392b;
  --red-l:     #fdecea;
  --muted:     #9e9087;
  --muted2:    #6e6358;
  --text:      #2c2520;
  --text2:     #4a4238;
  --mono:      'IBM Plex Mono', monospace;
  --sans:      'Nunito', sans-serif;
  --r:         10px;
  --r-sm:      6px;
}
html,body{height:100%;font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;}

/* ── TOPBAR ── */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--bg2);border-bottom:2px solid var(--border);
  display:flex;align-items:center;padding:0;height:54px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
#topbar .logo{
  font-family:'Nunito',sans-serif;font-size:1.1rem;font-weight:900;
  color:var(--accent);letter-spacing:-0.5px;white-space:nowrap;
  padding:0 1.3rem;border-right:2px solid var(--border);height:100%;
  display:flex;align-items:center;flex-shrink:0;gap:.35rem;
}
#topbar .logo-cart{font-size:1.2rem;}
#topbar .logo span{color:var(--muted2);font-weight:600;}

/* NAV MENU */
.nav-menu{display:flex;align-items:center;height:100%;gap:0;}
.nav-item{
  position:relative;height:100%;display:flex;align-items:center;
  padding:0 1rem;font-size:.85rem;font-weight:700;color:var(--muted2);
  cursor:pointer;border-bottom:3px solid transparent;transition:all .15s;
  white-space:nowrap;user-select:none;
}
.nav-item:hover{color:var(--text);background:var(--bg3);}
.nav-item.active{color:var(--accent);border-bottom-color:var(--accent);}
.nav-arrow{font-size:.55rem;margin-left:.3rem;opacity:.6;}
.nav-dropdown{
  display:none;position:absolute;top:calc(100% + 1px);left:0;min-width:200px;
  background:var(--bg2);border:2px solid var(--border);border-radius:0 0 var(--r) var(--r);
  box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:400;overflow:hidden;
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{display:block;}
.nav-dd-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem 1rem;font-size:.83rem;font-weight:600;color:var(--muted2);cursor:pointer;transition:all .1s;
}
.nav-dd-item:hover{background:var(--bg3);color:var(--text);}
.nav-dd-item .dd-icon{font-size:.9rem;width:18px;text-align:center;flex-shrink:0;}
.nav-dd-divider{height:1px;background:var(--border);margin:.2rem 0;}
.nav-dd-label{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.4rem 1rem .15rem;}

.nav-search-wrap{display:flex;align-items:center;padding:0 .85rem;border-left:2px solid var(--border);gap:.5rem;}
.nav-search-wrap::before{content:'🔍';font-size:.85rem;}
#search-global{
  width:240px;background:var(--bg3);border:1.5px solid var(--border);
  border-radius:50px;padding:.35rem .85rem;font-family:var(--sans);font-size:.83rem;font-weight:600;
  color:var(--text);outline:none;transition:all .15s;
}
#search-global:focus{border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px var(--accent-l);}
#search-global::placeholder{color:var(--muted);}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:.75rem;padding:0 1rem;border-left:2px solid var(--border);height:100%;}
.tb-stat{font-size:.78rem;color:var(--muted2);font-weight:600;}
.tb-stat strong{color:var(--accent);font-family:var(--mono);}
.nav-add-btn{
  background:var(--accent);color:#fff;border:none;border-radius:50px;
  padding:.4rem 1rem;font-family:var(--sans);font-size:.8rem;font-weight:800;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  box-shadow:0 2px 8px rgba(232,93,38,.3);
}
.nav-add-btn:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(232,93,38,.35);}

/* ── MODAL ── */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(44,37,32,.6);
  z-index:500;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--bg2);border:2px solid var(--border);border-radius:var(--r);
  width:min(700px,96vw);max-height:92vh;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.2);
  animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(-16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.2rem;border-bottom:2px solid var(--border);background:var(--bg3);flex-shrink:0;
}
.modal-title-wrap h2{font-size:1rem;font-weight:900;color:var(--accent);}
.modal-title-wrap p{font-size:.75rem;color:var(--muted);margin-top:.15rem;font-weight:600;}
.modal-close{
  background:none;border:1.5px solid var(--border);color:var(--muted);
  width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;
}
.modal-close:hover{border-color:var(--red);color:var(--red);background:var(--red-l);}
.modal-body{overflow-y:auto;padding:1.2rem;flex:1;}
.modal-footer{
  padding:.8rem 1.2rem;border-top:2px solid var(--border);background:var(--bg3);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.modal-footer-note{font-size:.72rem;color:var(--muted);font-weight:600;}
.modal-footer-btns{display:flex;gap:.5rem;}

/* FORM */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.form-full{grid-column:1/-1;}
.form-group{display:flex;flex-direction:column;gap:.35rem;}
.form-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);}
.form-label .req{color:var(--red);margin-left:2px;}
.form-input,.form-select,.form-textarea{
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:.5rem .75rem;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--text);
  outline:none;transition:all .15s;width:100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px var(--accent-l);
}
.form-input::placeholder{color:var(--muted);font-weight:400;}
.form-select{cursor:pointer;} .form-select option{background:var(--bg2);}
.form-textarea{resize:vertical;min-height:60px;line-height:1.5;}
.form-hint{font-size:.67rem;color:var(--muted);font-weight:600;}
.form-section{
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted2);grid-column:1/-1;padding:.6rem 0 .5rem;
  border-bottom:2px solid var(--border);margin-bottom:.2rem;
  display:flex;align-items:center;gap:.5rem;
}
.form-section::before{content:'';width:4px;height:12px;background:var(--accent);border-radius:2px;flex-shrink:0;}

.price-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;}
.price-col-wrap{display:flex;flex-direction:column;gap:.35rem;}
.price-store-name{font-size:.67rem;font-weight:800;text-transform:uppercase;color:var(--muted2);text-align:center;}
.price-col-wrap .form-input{text-align:right;}

.rating-wrap{display:flex;align-items:center;gap:.25rem;}
.star-btn{background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--border);transition:all .1s;padding:0;line-height:1;}
.star-btn:hover{transform:scale(1.2);}
.star-btn.lit{color:var(--yellow);}
.rating-val{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-left:.4rem;font-weight:600;}

.btn-cancel{
  background:none;border:1.5px solid var(--border);color:var(--muted2);
  border-radius:50px;padding:.45rem 1rem;font-family:var(--sans);font-size:.82rem;font-weight:700;
  cursor:pointer;transition:all .15s;
}
.btn-cancel:hover{border-color:var(--muted2);color:var(--text);background:var(--bg3);}
.btn-submit{
  background:var(--accent);color:#fff;border:none;border-radius:50px;
  padding:.45rem 1.2rem;font-family:var(--sans);font-size:.82rem;font-weight:800;
  cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(232,93,38,.3);
}
.btn-submit:hover{background:var(--accent2);transform:translateY(-1px);}

/* TOAST */
#toast{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:600;
  background:var(--bg2);border:2px solid var(--green);border-radius:50px;
  padding:.6rem 1.1rem;font-size:.82rem;font-weight:700;color:var(--green);
  display:none;align-items:center;gap:.5rem;
  box-shadow:0 4px 20px rgba(0,0,0,.12);pointer-events:none;
}
#toast.show{display:flex;animation:toastIn .2s ease;}
#toast.error{border-color:var(--red);color:var(--red);}
#toast.info{border-color:var(--blue);color:var(--blue);}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── LAYOUT ── */
#layout{display:flex;margin-top:54px;height:calc(100vh - 54px);}

/* ── LEFT SIDEBAR ── */
#sidebar-left{
  width:190px;flex-shrink:0;background:var(--bg2);
  border-right:2px solid var(--border);overflow-y:auto;
  padding:.75rem 0;
}
.sl-section-label{
  font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:.5rem 1rem .3rem;
}
.sl-cat{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem 1rem;cursor:pointer;border-left:3px solid transparent;
  font-size:.84rem;font-weight:700;color:var(--muted2);transition:all .15s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;border-radius:0 var(--r-sm) var(--r-sm) 0;margin-right:.4rem;
}
.sl-cat:hover{background:var(--bg3);color:var(--text);}
.sl-cat.active{border-left-color:var(--accent);color:var(--accent);background:var(--accent-l);}
.sl-cat .cat-icon{font-size:1rem;flex-shrink:0;}
.sl-cat .cat-count{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--muted);
  background:var(--bg3);border-radius:50px;padding:1px 6px;font-weight:700;}
.sl-divider{height:1px;background:var(--border);margin:.6rem 1rem;}

/* ── CENTER ── */
#center{flex:1;overflow-y:auto;padding:0;min-width:0;background:var(--bg);}

/* CATEGORY SECTION */
.cat-section{border-bottom:2px solid var(--border);}
.cat-header{
  position:sticky;top:0;z-index:10;
  background:var(--bg3);border-bottom:2px solid var(--border);
  display:flex;align-items:center;gap:.7rem;padding:.65rem 1.1rem;
}
.cat-header .ch-icon{font-size:1.2rem;}
.cat-header h2{font-size:.85rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);}

/* ITEM TABLE */
.item-table{width:100%;border-collapse:collapse;}
.item-table thead th{
  background:var(--bg2);font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted2);
  padding:.5rem .85rem;border-bottom:2px solid var(--border);
  text-align:left;white-space:nowrap;position:sticky;top:43px;z-index:9;
}
.item-table thead th.price-col{text-align:right;}
.item-table tbody tr{border-bottom:1px solid var(--border);transition:background .12s;}
.item-table tbody tr:hover{background:var(--bg3);}
.item-table tbody tr.in-list{background:var(--green-l);}
.item-table tbody tr.in-list:hover{background:#d8eee3;}

.item-table td{padding:.55rem .85rem;vertical-align:middle;}
.td-add button{
  background:var(--bg3);border:1.5px solid var(--border2);color:var(--accent);
  border-radius:var(--r-sm);width:28px;height:28px;cursor:pointer;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;font-weight:900;
}
.td-add button:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.1);}
.in-list .td-add button{background:var(--green-l);border-color:var(--green);color:var(--green);}

.td-name .item-name{font-weight:700;font-size:.88rem;color:var(--text);}
.td-name .item-brand{font-size:.74rem;color:var(--blue);font-weight:700;margin-top:.1rem;}
.td-name .item-size{font-size:.72rem;color:var(--muted);font-weight:600;}
.td-name .item-new{font-size:.62rem;background:var(--accent-l);color:var(--accent);
  border-radius:50px;padding:1px 7px;font-weight:800;margin-left:.4rem;vertical-align:middle;}

.td-cat-tag{
  font-size:.67rem;font-weight:700;padding:3px 8px;border-radius:50px;
  background:var(--bg3);color:var(--muted2);border:1px solid var(--border);
  white-space:nowrap;
}

.price-cell{
  text-align:right;font-family:var(--mono);font-size:.82rem;
  color:var(--muted);white-space:nowrap;font-weight:600;
}
.price-cell.best{color:var(--green);font-weight:800;}
.price-cell.best::after{content:' ✓';font-size:.65rem;}
.price-cell.worst{color:var(--red);}
.price-cell .no-stock{color:var(--border2);font-size:.72rem;}

.td-rating{text-align:center;}
.stars{font-size:.7rem;letter-spacing:-1px;color:var(--yellow);}

/* ── RIGHT SIDEBAR ── */
#sidebar-right{
  width:270px;flex-shrink:0;background:var(--bg2);
  border-left:2px solid var(--border);display:flex;flex-direction:column;
  overflow:hidden;
}
.sr-header{
  padding:.7rem 1rem;border-bottom:2px solid var(--border);background:var(--bg3);
  font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--text2);
  display:flex;align-items:center;justify-content:space-between;
}
.sr-header button{
  background:none;border:1.5px solid var(--border);color:var(--muted);
  border-radius:50px;padding:2px 10px;font-size:.7rem;font-weight:700;cursor:pointer;
  font-family:var(--sans);transition:all .12s;
}
.sr-header button:hover{border-color:var(--red);color:var(--red);background:var(--red-l);}

#list-items{flex:1;overflow-y:auto;min-height:0;}
.list-empty{
  padding:2.5rem 1.2rem;text-align:center;color:var(--muted);font-size:.83rem;line-height:1.7;font-weight:600;
}
.list-empty .le-icon{font-size:2.5rem;display:block;margin-bottom:.6rem;}
.list-row{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem 1rem;border-bottom:1px solid var(--border);
}
.list-row:hover{background:var(--bg3);}
.list-row .lr-name{flex:1;min-width:0;}
.list-row .lr-item{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.list-row .lr-brand{font-size:.67rem;color:var(--blue);font-weight:700;}
.list-row .lr-qty{display:flex;align-items:center;gap:3px;}
.list-row .lr-qty button{
  background:var(--bg3);border:1.5px solid var(--border);color:var(--muted2);
  width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:.8rem;line-height:1;
  display:flex;align-items:center;justify-content:center;font-weight:900;transition:all .12s;
}
.list-row .lr-qty button:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.list-row .lr-qty span{font-family:var(--mono);font-size:.78rem;min-width:16px;text-align:center;font-weight:700;}
.list-row .lr-remove{
  background:none;border:none;cursor:pointer;color:var(--border2);font-size:.85rem;padding:0;
  transition:color .12s;
}
.list-row .lr-remove:hover{color:var(--red);}

#totals-section{border-top:2px solid var(--border);padding:.7rem 1rem .5rem;}
.totals-label{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);margin-bottom:.5rem;}
.store-total-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.3rem 0;font-size:.8rem;
}
.store-total-row .str-name{color:var(--muted2);font-weight:700;}
.store-total-row .str-price{font-family:var(--mono);font-weight:800;color:var(--text);}
.str-price.best-total{color:var(--green);}
.str-best-badge{
  font-size:.62rem;background:var(--green-l);color:var(--green);
  border:1px solid var(--green);border-radius:50px;padding:1px 7px;margin-left:5px;font-weight:800;
}
.str-savings{font-size:.68rem;color:var(--muted);font-family:var(--mono);margin-right:.3rem;}

#mode-section{border-top:2px solid var(--border);padding:.7rem 1rem;}
.mode-label{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);margin-bottom:.5rem;}
.mode-tabs{display:flex;gap:.4rem;}
.mode-tab{
  flex:1;padding:.4rem .5rem;background:var(--bg3);border:1.5px solid var(--border);
  color:var(--muted2);font-family:var(--sans);font-size:.75rem;font-weight:700;
  border-radius:50px;cursor:pointer;text-align:center;transition:all .15s;
}
.mode-tab:hover{border-color:var(--accent);color:var(--accent);}
.mode-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 2px 8px rgba(232,93,38,.3);}

#route-section{border-top:2px solid var(--border);padding:.7rem 1rem;overflow-y:auto;max-height:340px;}
.results-empty{text-align:center;padding:1.2rem .5rem;color:var(--muted);font-size:.8rem;font-weight:600;line-height:1.6;}
.route-label{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);margin-bottom:.6rem;}
.route-stop{margin-bottom:.7rem;}
.rs-store{font-size:.78rem;font-weight:800;color:var(--text);margin-bottom:.25rem;
  display:flex;align-items:center;justify-content:space-between;}
.rs-store span{font-family:var(--mono);color:var(--green);font-size:.75rem;font-weight:700;}
.rs-item{font-size:.7rem;color:var(--muted2);font-weight:600;padding:.12rem 0 .12rem .6rem;
  border-left:2px solid var(--border);display:flex;justify-content:space-between;}
.rs-item span{font-family:var(--mono);color:var(--muted);}

#find-btn{
  margin:.7rem 1rem;padding:.6rem;background:var(--accent);color:#fff;
  border:none;border-radius:50px;font-family:var(--sans);font-weight:800;font-size:.85rem;
  cursor:pointer;transition:all .15s;letter-spacing:.01em;
  box-shadow:0 3px 12px rgba(232,93,38,.3);
}
#find-btn:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 5px 16px rgba(232,93,38,.35);}
#find-btn:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;transform:none;box-shadow:none;}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:50px;}

/* HIGHLIGHT SEARCH */
mark{background:var(--yellow-l);color:var(--yellow);border-radius:3px;padding:0 2px;font-weight:700;}
/* ── HOURS GRID ── */
.hours-grid{display:flex;flex-direction:column;gap:.35rem;margin-top:.2rem;}
.hours-row{display:grid;grid-template-columns:100px 44px 1fr;align-items:center;gap:.5rem;margin-bottom:.1rem;}
.hours-time-area{display:flex;align-items:center;gap:.35rem;}
.hours-day-label{font-size:.78rem;font-weight:700;color:var(--text2);}
.hours-toggle{
  appearance:none;width:36px;height:20px;background:var(--border2);border-radius:50px;
  cursor:pointer;position:relative;transition:background .15s;flex-shrink:0;border:none;outline:none;
}
.hours-toggle:checked{background:var(--accent);}
.hours-toggle::after{
  content:'';position:absolute;width:14px;height:14px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:left .15s;
}
.hours-toggle:checked::after{left:19px;}
.hours-time{
  background:var(--bg3);border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:.3rem .4rem;font-family:var(--sans);font-size:.78rem;font-weight:600;
  color:var(--text);outline:none;width:100%;transition:all .15s;
}
.hours-time:focus{border-color:var(--accent);}
.hours-time:disabled{opacity:.35;cursor:not-allowed;}
.hours-sep{text-align:center;font-size:.75rem;color:var(--muted);font-weight:700;}
.hours-closed-label{font-size:.72rem;color:var(--muted);font-weight:600;grid-column:3/6;}
.store-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.85rem;
  padding:.75rem 1rem;border-radius:var(--r-sm);border:1.5px solid var(--border);
  background:var(--bg);margin-bottom:.5rem;transition:border-color .15s;
}
.store-card:hover{border-color:var(--border2);}
.store-card-emoji{font-size:1.6rem;line-height:1;}
.store-card-info .sc-name{font-weight:800;font-size:.9rem;color:var(--text);}
.store-card-info .sc-nickname{font-size:.75rem;font-weight:700;color:var(--accent);}
.store-card-info .sc-meta{font-size:.72rem;color:var(--muted);margin-top:.15rem;font-weight:600;}
.store-card-info .sc-hours{font-size:.7rem;color:var(--muted2);font-weight:600;margin-top:.1rem;}
.store-card-actions{display:flex;gap:.4rem;align-items:center;}
.sc-btn{
  background:none;border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:.3rem .65rem;font-size:.75rem;font-weight:700;cursor:pointer;
  font-family:var(--sans);transition:all .15s;color:var(--muted2);
}
.sc-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-l);}
.sc-btn.delete:hover{border-color:var(--red);color:var(--red);background:var(--red-l);}
.sc-item-count{
  font-size:.68rem;background:var(--bg3);border:1px solid var(--border);
  border-radius:50px;padding:2px 8px;font-weight:700;color:var(--muted2);
  font-family:var(--mono);white-space:nowrap;
}
.manage-empty{
  text-align:center;padding:2.5rem 1rem;color:var(--muted);font-weight:600;font-size:.85rem;
}
.manage-empty .me-icon{font-size:2.5rem;display:block;margin-bottom:.5rem;}

/* ── AUTH MODAL ── */
.auth-modal{max-width:420px;border-radius:16px;position:relative;}
.auth-header{
  background:linear-gradient(135deg, #fff5f0 0%, #fff9f5 100%);
  border-bottom:2px solid var(--border);padding:1.5rem 1.5rem 1rem;
  border-radius:16px 16px 0 0;text-align:center;
}
.auth-logo{font-size:2rem;margin-bottom:.4rem;}
.auth-header h2{font-size:1.15rem;font-weight:900;color:var(--text);margin-bottom:.15rem;}
.auth-header p{font-size:.78rem;color:var(--muted);font-weight:600;}
.auth-tabs{display:flex;margin:.9rem 1.4rem 0;gap:.4rem;}
.auth-tab{
  flex:1;padding:.5rem;text-align:center;font-size:.82rem;font-weight:800;
  border-radius:8px 8px 0 0;cursor:pointer;transition:all .15s;
  border:2px solid transparent;border-bottom:none;
  color:var(--muted2);background:transparent;
}
.auth-tab.active{
  background:var(--bg2);color:var(--accent);
  border-color:var(--border);border-bottom-color:var(--bg2);
  position:relative;z-index:1;margin-bottom:-2px;
}
.auth-body{padding:1.4rem 1.5rem;}
.auth-social{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.1rem;}
.social-btn{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  width:100%;padding:.65rem 1rem;border-radius:50px;border:2px solid var(--border);
  background:var(--bg2);font-family:var(--sans);font-size:.85rem;font-weight:700;
  color:var(--text);cursor:pointer;transition:all .15s;
}
.social-btn:hover{border-color:var(--border2);background:var(--bg3);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.08);}
.social-btn.google:hover{border-color:#4285f4;color:#4285f4;}
.social-btn.facebook:hover{border-color:#1877f2;color:#1877f2;}
.social-btn-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.auth-divider{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
  font-size:.72rem;font-weight:700;color:var(--muted);
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-form{display:flex;flex-direction:column;gap:.65rem;}
.auth-field{display:flex;flex-direction:column;gap:.3rem;}
.auth-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);}
.auth-input{
  background:var(--bg);border:1.5px solid var(--border);border-radius:10px;
  padding:.6rem .85rem;font-family:var(--sans);font-size:.88rem;font-weight:600;
  color:var(--text);outline:none;transition:all .15s;width:100%;
}
.auth-input:focus{border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px var(--accent-l);}
.auth-input::placeholder{color:var(--muted);font-weight:400;}
.auth-name-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
.auth-forgot{font-size:.72rem;color:var(--accent);font-weight:700;text-align:right;cursor:pointer;text-decoration:none;display:block;margin-top:-.3rem;}
.auth-forgot:hover{text-decoration:underline;}
.auth-submit{
  width:100%;padding:.7rem;background:var(--accent);color:#fff;border:none;
  border-radius:50px;font-family:var(--sans);font-size:.9rem;font-weight:800;
  cursor:pointer;transition:all .15s;margin-top:.2rem;
  box-shadow:0 3px 12px rgba(232,93,38,.3);
}
.auth-submit:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 5px 16px rgba(232,93,38,.4);}
.auth-footer-note{
  font-size:.7rem;color:var(--muted);text-align:center;margin-top:.9rem;
  line-height:1.5;font-weight:600;
}
.auth-footer-note a{color:var(--accent);cursor:pointer;font-weight:700;}
.auth-footer-note a:hover{text-decoration:underline;}
.auth-terms{
  font-size:.67rem;color:var(--muted);text-align:center;margin-top:.65rem;line-height:1.5;
}
.auth-terms a{color:var(--blue);font-weight:700;}

/* Auth button in topbar */
.tb-auth-btn{
  background:none;border:2px solid var(--border);color:var(--text2);
  border-radius:50px;padding:.3rem .85rem;font-family:var(--sans);font-size:.8rem;font-weight:700;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.tb-auth-btn:hover{border-color:var(--accent);color:var(--accent);}
.tb-auth-btn.signed-in{border-color:var(--green);color:var(--green);display:flex;align-items:center;gap:.4rem;}
.tb-avatar{
  width:22px;height:22px;border-radius:50%;background:var(--accent);
  color:#fff;font-size:.7rem;font-weight:900;display:flex;align-items:center;justify-content:center;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   DEBUG PANEL
   ═══════════════════════════════════════════════════════════════ */

:root {
  --debug-bg:       #0f172a;
  --debug-surface:  #1e293b;
  --debug-border:   #334155;
  --debug-text:     #e2e8f0;
  --debug-muted:    #64748b;
  --debug-accent:   #38bdf8;
  --debug-green:    #4ade80;
  --debug-yellow:   #facc15;
  --debug-red:      #f87171;
  --debug-header:   #0f172a;
}

/* FAB toggle button */
#debug-fab {
  position: fixed;
  bottom: 1.2rem;
  left: 1.2rem;
  z-index: 9990;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--debug-border);
  background: var(--debug-surface);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transition: all .15s;
  opacity: .7;
}
#debug-fab:hover { opacity: 1; transform: scale(1.1); }

/* Modal shell */
.debug-modal-inner {
  background: var(--debug-bg);
  max-width: 860px;
  width: 96vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--debug-border);
}

/* Tab strip */
.debug-tabs {
  display: flex;
  gap: 0;
  background: var(--debug-surface);
  border-bottom: 1px solid var(--debug-border);
  overflow-x: auto;
  flex-shrink: 0;
}
.debug-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--debug-muted);
  padding: .55rem 1rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.debug-tab:hover   { color: var(--debug-text); }
.debug-tab.active  { color: var(--debug-accent); border-bottom-color: var(--debug-accent); }

/* Badge on tab */
.debug-badge {
  background: var(--debug-surface);
  border: 1px solid var(--debug-border);
  color: var(--debug-muted);
  border-radius: 50px;
  padding: 1px 7px;
  font-size: .65rem;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}
.debug-badge.error { background: #450a0a; border-color: var(--debug-red);    color: var(--debug-red);    }
.debug-badge.warn  { background: #422006; border-color: var(--debug-yellow); color: var(--debug-yellow); }

/* Panel container */
.debug-body {
  background: var(--debug-bg);
  overflow-y: auto;
  flex: 1;
  padding: 1rem;
}
.debug-panel        { display: none; }
.debug-panel.active { display: block; }

/* ── Overview stats grid ── */
.debug-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .6rem;
  margin-bottom: 1rem;
}
.debug-stat-card {
  background: var(--debug-surface);
  border: 1px solid var(--debug-border);
  border-radius: 8px;
  padding: .7rem .9rem;
}
.debug-stat-label {
  font-size: .65rem;
  font-weight: 700;
  color: var(--debug-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .2rem;
}
.debug-stat-value {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--debug-text);
  font-family: var(--mono);
}
.debug-stat-value.ok   { color: var(--debug-green);  }
.debug-stat-value.warn { color: var(--debug-yellow); }
.debug-stat-value.bad  { color: var(--debug-red);    }
.debug-stat-sub {
  font-size: .65rem;
  color: var(--debug-muted);
  margin-top: .1rem;
}

/* ── Timing bar ── */
.debug-section-label {
  font-size: .68rem;
  font-weight: 800;
  color: var(--debug-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1rem 0 .4rem;
}
.debug-timing-bar-wrap {
  background: var(--debug-surface);
  border: 1px solid var(--debug-border);
  border-radius: 8px;
  height: 28px;
  overflow: hidden;
  display: flex;
  margin-bottom: .4rem;
}
.debug-timing-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  transition: width .3s;
}
.debug-timing-legend {
  display: flex;
  gap: 1rem;
  font-size: .7rem;
  color: var(--debug-muted);
}
.debug-timing-legend span { display: flex; align-items: center; gap: .3rem; }
.debug-timing-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}

/* ── Memory bar ── */
.debug-mem-bar-wrap {
  background: var(--debug-surface);
  border: 1px solid var(--debug-border);
  border-radius: 8px;
  height: 20px;
  overflow: hidden;
  margin-bottom: .4rem;
}
.debug-mem-fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  transition: width .3s;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  font-size: .6rem;
  color: #fff;
  font-weight: 700;
}

/* ── Query list ── */
.debug-query-row {
  background: var(--debug-surface);
  border: 1px solid var(--debug-border);
  border-radius: 8px;
  margin-bottom: .6rem;
  overflow: hidden;
}
.debug-query-row.slow  { border-color: var(--debug-yellow); }
.debug-query-row.error { border-color: var(--debug-red);    }

.debug-query-head {
  display: grid;
  grid-template-columns: 48px 56px 1fr auto;
  align-items: center;
  padding: .5rem .75rem;
  gap: .6rem;
  cursor: pointer;
  font-size: .74rem;
}
.debug-query-head:hover { background: rgba(255,255,255,.03); }

.debug-query-num {
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--debug-muted);
  font-weight: 700;
}
.debug-query-type {
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 50px;
  text-align: center;
}
.qt-SELECT { background: #0c4a6e; color: #38bdf8; }
.qt-INSERT { background: #14532d; color: #4ade80; }
.qt-UPDATE { background: #713f12; color: #facc15; }
.qt-DELETE { background: #450a0a; color: #f87171; }
.qt-OTHER  { background: #1e293b; color: #94a3b8; }

.debug-query-sql {
  font-family: var(--mono);
  font-size: .73rem;
  color: var(--debug-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.debug-query-ms {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}
.debug-query-ms.ok   { color: var(--debug-green);  }
.debug-query-ms.warn { color: var(--debug-yellow); }
.debug-query-ms.bad  { color: var(--debug-red);    }

/* Expandable query detail */
.debug-query-detail {
  display: none;
  padding: .75rem;
  border-top: 1px solid var(--debug-border);
  background: #0a0f1a;
}
.debug-query-detail.open { display: block; }
.debug-query-detail pre {
  margin: 0 0 .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: #93c5fd;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}
.debug-param-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .4rem;
}
.debug-param {
  background: var(--debug-surface);
  border: 1px solid var(--debug-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--debug-yellow);
}

/* ── Error / warning rows ── */
.debug-issue-row {
  background: var(--debug-surface);
  border: 1px solid var(--debug-border);
  border-radius: 8px;
  padding: .7rem .9rem;
  margin-bottom: .5rem;
  font-size: .78rem;
}
.debug-issue-row.error   { border-left: 3px solid var(--debug-red);    }
.debug-issue-row.warning { border-left: 3px solid var(--debug-yellow); }
.debug-issue-row.notice  { border-left: 3px solid #818cf8;             }
.debug-issue-message { color: var(--debug-text); font-weight: 700; margin-bottom: .3rem; }
.debug-issue-meta    { color: var(--debug-muted); font-size: .68rem; font-family: var(--mono); }

/* ── Server info ── */
.debug-kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.debug-kv-table td {
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--debug-border);
  font-family: var(--mono);
}
.debug-kv-table td:first-child {
  color: var(--debug-muted);
  font-weight: 700;
  width: 38%;
  font-size: .7rem;
}
.debug-kv-table td:last-child { color: var(--debug-text); }

/* ── Footer ── */
.debug-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  border-top: 1px solid var(--debug-border);
  background: var(--debug-surface);
  flex-shrink: 0;
}
.debug-footer kbd {
  background: var(--debug-bg);
  border: 1px solid var(--debug-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: .65rem;
}

/* ── Empty state ── */
.debug-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--debug-muted);
  font-size: .85rem;
}
.debug-empty-icon { font-size: 2rem; margin-bottom: .5rem; }