/* #SECTION: THEME VARIABLES */
/* ═══════ THEME VARIABLES ═══════ */

:root{--sw:230px;--sw-c:84px}
[data-theme="dark"]{
  --bg:#111318;--bg2:#1a1d24;--surface:#22262f;--surface2:#2a2f3a;--surface3:#333a47;
  --border:#2e3542;--border2:#3d4556;--text:#eaf0f6;--text2:#c0ccda;--muted:#7a8899;--muted2:#555f6d;
  --card:#1e2229;--card-hover:#262b34;--input-bg:#181b22;
  --red:#ef4444;--red-bg:rgba(239,68,68,.1);--red-bg2:rgba(239,68,68,.18);
  --green:#22c55e;--green-bg:rgba(34,197,94,.1);--blue:#3b82f6;--blue-bg:rgba(59,130,246,.1);
  --gold:#f59e0b;--gold-bg:rgba(245,158,11,.1);--purple:#8b5cf6;--purple-bg:rgba(139,92,246,.1);
  --teal:#06b6d4;--teal-bg:rgba(6,182,212,.1);
  --shadow:0 2px 8px rgba(0,0,0,.3);--shadow-lg:0 8px 30px rgba(0,0,0,.4);
}
[data-theme="light"]{
  --bg:#f1f5f9;--bg2:#ffffff;--surface:#ffffff;--surface2:#f8fafc;--surface3:#f1f5f9;
  --border:#e2e8f0;--border2:#cbd5e1;--text:#1e293b;--text2:#334155;--muted:#64748b;--muted2:#94a3b8;
  --card:#ffffff;--card-hover:#f8fafc;--input-bg:#f8fafc;
  --red:#dc2626;--red-bg:rgba(220,38,38,.06);--red-bg2:rgba(220,38,38,.12);
  --green:#16a34a;--green-bg:rgba(22,163,74,.06);--blue:#2563eb;--blue-bg:rgba(37,99,235,.06);
  --gold:#d97706;--gold-bg:rgba(217,119,6,.06);--purple:#7c3aed;--purple-bg:rgba(124,58,237,.06);
  --teal:#0891b2;--teal-bg:rgba(8,145,178,.06);
  --shadow:0 1px 4px rgba(0,0,0,.06);--shadow-lg:0 8px 24px rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}

 
/* #SECTION: ANIMATIONS */
/* Animations */

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes sparkle{0%,100%{opacity:.6;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.fade-up{animation:fadeUp .3s ease}.slide-in{animation:slideIn .28s cubic-bezier(.16,1,.3,1)}
.sparkle-a{animation:sparkle 2s ease-in-out infinite}.pulse-a{animation:pulse .3s ease}

 
/* #SECTION: SIDEBAR */
/* ═══════ SIDEBAR ═══════ */

.sb{position:fixed;top:0;left:0;bottom:0;width:var(--sw);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transition:width .25s cubic-bezier(.4,0,.2,1),background .3s;overflow:hidden}
.sb.c{width:var(--sw-c)}
/* Collapsed sidebar: bigger centred icons, hide labels/counts cleanly */
.sb.c .sb-item{padding:.6rem;justify-content:center;gap:0}
.sb.c .sb-label,.sb.c .sb-count{display:none}
.sb.c .sb-icon{width:44px;height:44px;border-radius:11px;font-size:1.25rem}
.sb.c .sb-toggle{width:44px;height:44px}
.sb.c .sb-brand{justify-content:center;padding:.9rem .5rem}
.sb.c .sb-brand-text,.sb.c .sb-brand-sub{display:none}
/* Collapsed footer: hide user row, icon-only signout, stack theme buttons */
.sb.c .user-p{display:none}
.sb.c .sb-signout{justify-content:center;gap:0;padding:.55rem;width:100%;font-size:1.1rem}
.sb.c .sb-signout .sb-signout-label{display:none}
.sb.c .theme-row{flex-direction:column;gap:.28rem;align-items:center}
.sb.c .theme-btn{width:44px;height:36px}
.sb-brand{padding:1rem;display:flex;align-items:center;gap:.65rem;border-bottom:1px solid var(--border);min-height:60px}
.sb-logo{width:36px;height:36px;border-radius:10px;overflow:hidden;flex-shrink:0;box-shadow:0 2px 8px rgba(245,158,11,.3)}
.sb-logo img{width:100%;height:100%;object-fit:contain}
.sb-brand-text{font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden}
.sb-brand-sub{font-size:.62rem;color:var(--muted);font-weight:500}
.sb-nav{flex:1;padding:.5rem 0;display:flex;flex-direction:column;gap:2px}
.sb-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .9rem;margin:0 .45rem;border-radius:10px;cursor:pointer;transition:all .15s;color:var(--muted);font-weight:600;font-size:.83rem;white-space:nowrap;overflow:hidden}
.sb-item:hover{background:var(--surface);color:var(--text2)}
.sb-item.active{background:var(--red-bg2);color:var(--red)}
.sb-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;background:var(--surface)}
.sb-profile-icon{overflow:hidden;padding:0;background:linear-gradient(135deg,var(--red-bg2),var(--surface))}
.sb-profile-icon img{width:100%;height:100%;object-fit:cover;display:block}
.sb-profile-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.95rem;background:linear-gradient(135deg,var(--gold-bg),var(--red-bg2));color:var(--gold)}
.sb-item.active .sb-icon{background:var(--red-bg2)}
.sb-label{overflow:hidden}
.sb-count{margin-left:auto;font-size:.65rem;font-weight:700;background:var(--surface);padding:1px 6px;border-radius:5px;color:var(--muted)}
.sb-item.active .sb-count{background:var(--red-bg2);color:var(--red)}
.sb-foot{padding:.6rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.35rem}
.sb-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--muted);font-size:.8rem;transition:all .15s;align-self:center}
.sb-toggle:hover{border-color:var(--red);color:var(--red)}
/* Subsection: Theme toggle */
.theme-row{display:flex;align-items:center;gap:.4rem;overflow:hidden;white-space:nowrap;justify-content:center;margin-bottom:.2rem}
.theme-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .15s;color:var(--muted)}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-btn.active{border-color:var(--gold);background:var(--gold-bg);color:var(--gold)}
/* Subsection: Auth */
.auth-c{display:flex;align-items:center;gap:.35rem;overflow:hidden;white-space:nowrap}
.auth-c input{flex:1;min-width:0;padding:.38rem .55rem;border-radius:7px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-family:inherit;font-size:.76rem}
.auth-c input::placeholder{color:var(--muted2)}
.ab{padding:.38rem .6rem;border-radius:7px;border:none;font-family:inherit;font-weight:600;font-size:.73rem;cursor:pointer;white-space:nowrap;transition:all .15s}
.ab-red{background:var(--red);color:#fff}.ab-red:hover{filter:brightness(.9)}
.ab-ghost{background:var(--surface);color:var(--muted);border:1px solid var(--border);width:100%}.ab-ghost:hover{border-color:var(--red);color:var(--red)}
.user-p{display:flex;align-items:center;gap:.4rem;background:var(--surface);padding:.4rem .6rem;border-radius:8px;font-size:.76rem;overflow:hidden;border:1px solid var(--border)}
.user-av{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--red),#b91c1c);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:#fff;flex-shrink:0}

 
/* #SECTION: MAIN LAYOUT */
/* ═══════ MAIN ═══════ */

.main{margin-left:var(--sw);transition:margin-left .25s cubic-bezier(.4,0,.2,1);min-height:100vh}
.sb.c~.main{margin-left:var(--sw-c)}

/* Subsection: Page header */
.pg-head{padding:1.4rem 2rem 1rem;background:var(--bg2);border-bottom:1px solid var(--border);transition:background .3s}
.pg-title{font-size:1.5rem;font-weight:900;display:flex;align-items:center;gap:.5rem}
.pg-sub{color:var(--muted);font-size:.83rem;margin-top:.15rem}
.pg-top{display:flex;justify-content:space-between;align-items:flex-start}

 
/* #SECTION: COMMON UI */
/* ═══════ COMMON ═══════ */

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.1rem;transition:background .3s,border-color .3s;box-shadow:var(--shadow)}
.card:hover{border-color:var(--border2)}
.btn{padding:.5rem 1rem;border-radius:9px;border:none;font-family:inherit;font-weight:600;font-size:.83rem;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.35rem}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{filter:brightness(.9)}
.btn-ghost{background:var(--surface);color:var(--muted);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.search-box{width:100%;padding:.65rem 1rem .65rem 2.4rem;border-radius:11px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);font-family:inherit;font-size:.88rem;transition:border-color .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%237a8899' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:.8rem center}
.search-box:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.fpill{padding:.28rem .65rem;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.fpill:hover{border-color:var(--text2);color:var(--text2)}.fpill.active{border-color:var(--red);background:var(--red-bg);color:var(--red)}
.type-pill{padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.03em;display:inline-block}
/* ── Toasts ── */
.toast-c{
  position:fixed;
  bottom:calc(62px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  z-index:2000;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  pointer-events:none;
  width:calc(100% - 2rem);max-width:400px;
}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}
.toast{
  pointer-events:auto;
  display:flex;align-items:center;gap:.65rem;
  padding:.7rem .9rem;border-radius:14px;
  font-size:.82rem;line-height:1.35;min-height:44px;width:100%;
  box-shadow:0 4px 24px rgba(0,0,0,.2),0 1px 6px rgba(0,0,0,.1);
  animation:toastIn .28s cubic-bezier(.16,1,.3,1) forwards;
}
.toast.toast-out{animation:toastOut .2s ease forwards}
.toast-icon{font-size:1.15rem;flex-shrink:0;line-height:1}
.toast-msg{flex:1;font-weight:700}
.toast-close{
  background:none;border:none;cursor:pointer;
  font-size:.82rem;line-height:1;padding:.15rem .2rem;
  color:inherit;opacity:.55;flex-shrink:0;
  border-radius:4px;font-family:inherit;transition:opacity .12s;
}
.toast-close:hover{opacity:1}
.toast-ok{background:color-mix(in srgb,var(--green) 10%,var(--card));color:var(--green);border:1px solid color-mix(in srgb,var(--green) 28%,var(--border))}
.toast-err{background:color-mix(in srgb,var(--red) 10%,var(--card));color:var(--red);border:1px solid color-mix(in srgb,var(--red) 28%,var(--border))}
.toast-info{background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 28%,var(--border))}
@media(min-width:768px){
  .toast-c{bottom:1.5rem;left:auto;right:1.5rem;transform:none;width:auto;max-width:340px;align-items:flex-end;}
}
.empty{text-align:center;padding:3rem;color:var(--muted)}.empty .em{font-size:2.2rem;margin-bottom:.5rem}
.page{display:none}.page.show{display:block}

 
/* #SECTION: STANDARDISED VIEW HEADERS (.vh-*) */
/* ═══════ VIEW HEADERS ═══════ */
/* Reusable header pattern for all list + detail views.
   List view:   .pg-head > .pg-top > title + .vh-actions(.vh-btn-new)
   Detail view: .pg-head > .vh-title-row > back-name + .vh-actions(.vh-btn-edit + .vh-btn-more)
                      .pg-sub below */

.vh-actions{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
/* Base button — shared by all header action buttons */
.vh-btn{padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-family:inherit;line-height:1;transition:all .12s;-webkit-tap-highlight-color:transparent}
.vh-btn:active{transform:scale(.93)}
/* Size variants */
.vh-btn-sm{width:32px;height:32px;min-width:32px;min-height:32px;flex:0 0 32px;border-radius:8px}
.vh-btn-md{width:36px;height:36px;min-width:36px;min-height:36px;flex:0 0 36px}
/* Role variants */
.vh-btn-edit{color:var(--text);font-size:.82rem}
.vh-btn-more{color:var(--muted);font-size:.95rem}
.vh-btn-new{background:var(--red);border-color:var(--red);color:#fff;font-size:1.25rem;font-weight:800}
/* Detail title row — ← Name + actions inline */
.vh-title-row{font-size:1.05rem;font-weight:900;line-height:1.15;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.vh-back{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}


/* #SECTION: DASHBOARD */
/* ═══════ DASHBOARD ═══════ */

/* Stat cards — gradient themed with glow watermark icons */
.da-stats{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;padding:.8rem 1rem}
.da-stat{border-radius:14px;padding:.85rem;position:relative;overflow:hidden;min-height:90px}
.da-stat-label{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.da-stat-val{font-size:1.8rem;font-weight:900;line-height:1.1;margin-top:.2rem;font-variant-numeric:tabular-nums}
.da-stat-sub{font-size:.7rem;font-weight:600;opacity:.7}
.da-stat-glow{position:absolute;bottom:-6px;right:-6px;opacity:.08;filter:blur(.5px)}
.da-stat-glow i{font-size:4.2rem}
.da-stat-glow svg{width:72px;height:72px}
.da-stat.da-collection{background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(239,68,68,.04));color:var(--red)}
.da-stat.da-builds{background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(59,130,246,.04));color:var(--blue)}
.da-stat.da-teams{background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.04));color:var(--gold)}
.da-stat.da-shiny{background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(139,92,246,.04));color:var(--purple)}

/* Recent builds — compact card list */
.da-section{padding:0 1rem}
.da-section-title{font-size:.82rem;font-weight:800;margin:.8rem 0 .5rem;display:flex;align-items:center;gap:.4rem}
.da-build{display:flex;align-items:center;gap:.65rem;padding:.65rem .7rem;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:.45rem;cursor:pointer;transition:border-color .15s}
.da-build:active{border-color:var(--border2)}
.da-build-img{width:42px;height:42px;object-fit:contain;border-radius:10px;background:var(--surface);padding:3px;flex-shrink:0}
.da-build-info{flex:1;min-width:0}
.da-build-name{font-weight:700;font-size:.78rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.da-build-sub{font-size:.62rem;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.da-build-sp{font-size:.68rem;font-weight:800;color:var(--blue);flex-shrink:0}

/* Quick action buttons */
.da-quick{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:0 1rem 1rem}
.da-qbtn{padding:.7rem .6rem;border-radius:12px;border:1px solid var(--border);background:var(--card);text-align:center;cursor:pointer;font-size:.72rem;font-weight:700;color:var(--text2);font-family:inherit;transition:all .12s}
.da-qbtn:active{transform:scale(.97);background:var(--surface)}
.da-qbtn-icon{font-size:1.2rem;margin-bottom:.2rem}