*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:       #0a0a12;
  --card:     #13131e;
  --elevated: #1a1a28;
  --border:   #262638;
  --accent:   #6c63ff;
  --accent-s: rgba(108,99,255,.15);
  --success:  #10b981;
  --danger:   #ef4444;
  --warning:  #f59e0b;
  --text:     #e8e8f4;
  --muted:    #8888a8;
  --dim:      #55556a;
  --r:        10px;
  --r-lg:     14px;
}
body.light-mode{
  --bg:       #f2f3f7;
  --card:     #ffffff;
  --elevated: #eaecf3;
  --border:   #dcdee8;
  --accent:   #5b52e0;
  --accent-s: rgba(91,82,224,.12);
  --success:  #059669;
  --danger:   #dc2626;
  --text:     #1a1a2e;
  --muted:    #6b6b8a;
  --dim:      #a0a0be;
}
body.light-mode .toast--success{background:#d1fae5;border-color:#6ee7b7;color:#065f46}
body.light-mode .toast--error  {background:#fee2e2;border-color:#fca5a5;color:#7f1d1d}
body.light-mode .toast--info   {background:#e0e7ff;border-color:#a5b4fc;color:#312e81}
body.light-mode .deploy-table tr:hover td{background:rgba(0,0,0,.025)}
body.light-mode .box-shadow,
body.light-mode .toast{box-shadow:0 4px 16px rgba(0,0,0,.10)}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.icon{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;
  font-size:1.2rem;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;font-feature-settings:'liga';
  -webkit-font-feature-settings:'liga';vertical-align:middle}

/* ── LAYOUT ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 2rem;background:var(--card);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.topbar__brand{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1rem}
.topbar__gem{font-size:1.4rem;color:var(--accent)}
.topbar__tag{font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:.2rem .6rem;border:1px solid var(--border);border-radius:999px}
.topbar__right{display:flex;align-items:center;gap:1rem}
.btn-ghost{background:none;border:1px solid var(--border);border-radius:var(--r);
  color:var(--muted);padding:.4rem .9rem;cursor:pointer;font-size:.82rem;font-weight:500;
  display:flex;align-items:center;gap:.4rem;
  transition:border-color .2s,color .2s}
.btn-ghost:hover{border-color:var(--accent);color:var(--text)}
.btn-primary{background:var(--accent);border:none;border-radius:var(--r);color:#fff;
  padding:.55rem 1.2rem;cursor:pointer;font-size:.85rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.45rem;
  transition:background .2s,transform .1s,box-shadow .2s;
  box-shadow:0 4px 14px rgba(108,99,255,.3)}
.btn-primary:hover{background:#5a52d5;box-shadow:0 6px 20px rgba(108,99,255,.4);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:var(--r);
  color:var(--danger);padding:.35rem .75rem;cursor:pointer;font-size:.78rem;font-weight:500;
  display:inline-flex;align-items:center;gap:.3rem;
  transition:background .2s,border-color .2s}
.btn-danger:hover{background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.5)}

.main{max-width:1100px;margin:0 auto;padding:2.5rem 2rem}

/* ── LOGIN ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:2.5rem 2.5rem 2rem;width:min(100%,400px)}
.login-card h1{font-size:1.4rem;font-weight:700;margin-bottom:.3rem}
.login-card p{color:var(--muted);font-size:.85rem;margin-bottom:2rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.input{background:var(--elevated);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);padding:.65rem .9rem;font-size:.9rem;outline:none;width:100%;
  transition:border-color .2s,box-shadow .2s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
.error-msg{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);
  border-radius:var(--r);padding:.6rem .9rem;font-size:.82rem;color:var(--danger);margin-bottom:1rem}

/* ── STATS BAR ── */
.stats-bar{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem 1.25rem;flex:1;min-width:140px}
.stat-card__val{font-size:1.8rem;font-weight:700;line-height:1}
.stat-card__lbl{font-size:.72rem;color:var(--muted);margin-top:.35rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em}

/* ── SECTION HEAD ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.section-head h2{font-size:1rem;font-weight:600}

/* ── LIST CONTROLS (search + sort) ── */
.list-controls{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap}
.search-wrap{flex:1;min-width:180px;display:flex;align-items:center;gap:.5rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:.45rem .85rem;transition:border-color .2s}
.search-wrap:focus-within{border-color:var(--accent)}
.search-wrap .icon{color:var(--muted);font-size:1.1rem;flex-shrink:0}
.search-input{background:none;border:none;outline:none;color:var(--text);
  font:inherit;font-size:.85rem;width:100%}
.search-input::placeholder{color:var(--muted)}
.sort-btns{display:flex;gap:.4rem;flex-shrink:0}
.sort-btn{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  color:var(--muted);padding:.4rem .85rem;cursor:pointer;font-size:.78rem;font-weight:500;
  display:inline-flex;align-items:center;gap:.35rem;transition:all .15s;white-space:nowrap}
.sort-btn:hover{border-color:var(--accent);color:var(--text)}
.sort-btn.active{background:var(--accent-s);border-color:var(--accent);color:var(--text)}
.sort-arrow{font-size:.75rem;display:inline-block;transition:transform .2s}
.sort-arrow.asc{transform:rotate(180deg)}

/* ── DEPLOYMENT TABLE ── */
.deploy-table{width:100%;border-collapse:collapse}
.deploy-table th{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.6rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.deploy-table td{padding:.85rem 1rem;border-bottom:1px solid rgba(38,38,56,.6);vertical-align:middle}
.deploy-table tr:last-child td{border-bottom:none}
.deploy-table tr:hover td{background:rgba(255,255,255,.02)}
.site-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;
  padding:.25rem .65rem;border-radius:999px;border:1px solid;white-space:nowrap}
.site-badge--event-it{color:#38bdf8;border-color:rgba(56,189,248,.3);background:rgba(56,189,248,.08)}
.site-badge--itforbusiness{color:#a78bfa;border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.08)}
.slug-cell{font-family:'Courier New',monospace;font-size:.82rem;color:var(--text)}
.title-cell{font-size:.88rem;color:var(--text);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.url-link{font-size:.75rem;color:var(--accent);display:inline-flex;align-items:center;gap:.2rem;
  padding:.2rem .5rem;border-radius:6px;transition:background .15s}
.url-link:hover{background:var(--accent-s)}
.date-cell{font-size:.75rem;color:var(--muted);white-space:nowrap}
.actions-cell{white-space:nowrap}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--muted)}
.empty-state .icon{font-size:3rem;display:block;margin-bottom:1rem;color:var(--dim)}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;
  pointer-events:none;transition:opacity .25s}
.modal-overlay.is-open{opacity:1;pointer-events:auto}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  width:min(100%,880px);max-height:90vh;overflow-y:auto;padding:2rem;
  transform:translateY(12px);transition:transform .25s}
.modal-overlay.is-open .modal{transform:none}
.modal h2{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
.modal p{color:var(--muted);font-size:.83rem;margin-bottom:1.75rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.select{background:var(--elevated);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);padding:.65rem .9rem;font-size:.9rem;outline:none;width:100%;
  cursor:pointer;transition:border-color .2s,box-shadow .2s}
.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
.field-hint{font-size:.73rem;color:var(--muted);margin-top:.3rem}
.avail-ok{color:var(--success);font-size:.73rem;margin-top:.3rem;display:flex;align-items:center;gap:.3rem}
.avail-err{color:var(--danger);font-size:.73rem;margin-top:.3rem;display:flex;align-items:center;gap:.3rem}
.avail-checking{color:var(--muted);font-size:.73rem;margin-top:.3rem}
.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.section-sep{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:1.25rem 0 .75rem;display:flex;align-items:center;gap:.5rem}
.section-sep::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── TOAST ── */
.toast-area{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.5rem;z-index:999}
.toast{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.15rem;border-radius:var(--r);
  font-size:.83rem;font-weight:500;max-width:360px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transform:translateX(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.toast.show{transform:none;pointer-events:auto}
.toast--success{background:#064e3b;border:1px solid #065f46;color:#6ee7b7}
.toast--error{background:#450a0a;border:1px solid #7f1d1d;color:#fca5a5}
.toast--info{background:#1e1b4b;border:1px solid #312e81;color:#a5b4fc}

/* ── SUCCESS RESULT ── */
.result-box{background:var(--elevated);border:1px solid rgba(16,185,129,.3);border-radius:var(--r);
  padding:1.25rem 1.5rem;margin-top:1rem}
.result-box h3{font-size:.85rem;font-weight:600;color:var(--success);margin-bottom:.85rem;
  display:flex;align-items:center;gap:.4rem}
.result-url{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;flex-wrap:wrap}
.result-url label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);min-width:60px}
.result-url a{font-size:.83rem;color:var(--accent);word-break:break-all}
.copy-btn{background:var(--accent-s);border:none;border-radius:6px;color:var(--accent);
  padding:.2rem .5rem;cursor:pointer;font-size:.7rem;white-space:nowrap;transition:background .15s}
.copy-btn:hover{background:rgba(108,99,255,.3)}

/* ── SPINNER ── */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:1rem;height:1rem;border:2px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}

/* ── THEME SELECTOR ── */
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem}
.theme-card{
  border-radius:var(--r);overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:var(--elevated);
  position:relative;
  transition:border-color .22s,box-shadow .22s,transform .22s}
.theme-card:hover{border-color:var(--border)}
.theme-card.is-selected{
  border-color:var(--tc-accent);
  box-shadow:0 0 0 1px var(--tc-accent), 0 0 22px var(--tc-glow);
  transform:scale(1.025)}
.theme-card__check{
  position:absolute;top:8px;right:8px;width:20px;height:20px;
  border-radius:50%;background:var(--tc-accent);
  display:none;align-items:center;justify-content:center;
  font-size:.75rem;color:#fff;font-weight:900;
  box-shadow:0 2px 8px var(--tc-glow);z-index:10}
.theme-card.is-selected .theme-card__check{display:flex}
.theme-card__img{
  aspect-ratio:16/9;
  background:var(--tc-gradient);
  position:relative;overflow:hidden}
.theme-card__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s}
.theme-card:hover .theme-card__img img{transform:scale(1.04)}
.theme-card__img-fallback{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:2rem;color:var(--tc-accent);opacity:.2}
.theme-card__body{padding:9px 11px 11px}
.theme-card__header{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.theme-card__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--tc-accent);
  box-shadow:0 0 5px var(--tc-glow), 0 0 0 1.5px rgba(128,128,128,.2);flex-shrink:0}
.theme-card__name{font-size:.8rem;font-weight:700;color:var(--text)}
.theme-card__desc{font-size:.68rem;color:var(--muted);line-height:1.45;margin-bottom:7px}
.theme-card__preview{
  font-size:.68rem;color:var(--accent);
  display:inline-flex;align-items:center;gap:3px;
  transition:opacity .15s;text-decoration:none}
.theme-card__preview:hover{opacity:.72}

/* ── CONFIRM DIALOG ── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;
  pointer-events:none;transition:opacity .2s}
.confirm-overlay.is-open{opacity:1;pointer-events:auto}
.confirm-box{background:var(--card);border:1px solid rgba(239,68,68,.3);border-radius:var(--r-lg);
  padding:1.75rem 2rem;width:min(100%,380px);text-align:center}
.confirm-box h3{font-size:1rem;font-weight:700;margin-bottom:.5rem}
.confirm-box p{font-size:.83rem;color:var(--muted);margin-bottom:1.5rem;line-height:1.6}
.confirm-btns{display:flex;gap:.75rem;justify-content:center}
.btn-cancel{background:var(--elevated);border:1px solid var(--border);border-radius:var(--r);
  color:var(--muted);padding:.5rem 1.2rem;cursor:pointer;font-size:.85rem;font-weight:500;transition:color .2s}
.btn-cancel:hover{color:var(--text)}

@media(max-width:700px){
  .topbar{padding:.75rem 1rem}
  .main{padding:1.5rem 1rem}
  .form-row{grid-template-columns:1fr}
  .deploy-table th:nth-child(4),.deploy-table td:nth-child(4){display:none}
}