:root{
  --bg:#06010f;
  --bg-2:#0b0418;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.13);
  --text:#f3f1ff;
  --soft:rgba(255,255,255,.76);
  --mute:rgba(255,255,255,.55);
  --indigo:#6366f1;
  --violet:#8b5cf6;
  --rose:#ef4444;
  --amber:#f59e0b;
  --cyan:#06b6d4;
  --lime:#10f981;
  --grad:linear-gradient(120deg,#6366f1,#8b5cf6,#ef4444,#f59e0b);
  --font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 18%,rgba(99,102,241,.24),transparent 32rem),
    radial-gradient(circle at 90% 8%,rgba(239,68,68,.18),transparent 30rem),
    radial-gradient(circle at 54% 90%,rgba(6,182,212,.16),transparent 34rem),
    var(--bg);
  font-family:var(--font);
  line-height:1.5;
}
a{color:inherit}
button,input,select,textarea{font:inherit}
.shell{
  width:min(1440px,100%);
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
}
.content{
  display:grid;
  gap:18px;
  align-content:start;
  min-width:0;
}
.sidebar{
  position:sticky;
  top:20px;
  height:calc(100vh - 40px);
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(6,1,15,.72);
  backdrop-filter:blur(18px);
  padding:14px;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  padding:8px;
  border-radius:8px;
}
.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--grad);
  font-weight:800;
}
.brand strong,.brand small{display:block}
.brand small{color:var(--mute);margin-top:2px}
.nav{
  display:grid;
  gap:6px;
  margin-top:18px;
}
.nav-title{
  display:block;
  padding:0 12px 6px;
  color:var(--cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.nav-subtitle{
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.nav a{
  padding:12px;
  border-radius:8px;
  color:var(--soft);
  text-decoration:none;
  font-weight:700;
}
.nav a:hover,.nav a.active,.nav a.soft-active{background:rgba(255,255,255,.08);color:#fff}
.nav a.active{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(120deg,rgba(99,102,241,.26),rgba(6,182,212,.14));
}
.main{display:grid;gap:18px;min-width:0}
.topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  background:rgba(6,1,15,.62);
  backdrop-filter:blur(18px);
}
.topbar-kicker{
  margin:0 0 4px;
  color:var(--cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.account{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.account span,.account small{color:var(--mute);font-size:12px;font-weight:800}
.account strong{font-size:15px}
.topbar-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.auth-main{
  width:min(720px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:24px;
  display:grid;
  align-content:center;
  gap:18px;
}
/* Legacy class retained for older markup if any cached view renders it. */
.user-box{
  display:none;
  gap:8px;
  margin-top:18px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.045);
}
.user-box strong,.user-box small{display:block}
.user-box small{color:var(--mute)}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:22px;
  background:var(--panel);
}
.eyebrow{
  margin:0 0 8px;
  color:var(--cyan);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
h1,h2{
  margin:0;
  line-height:1.05;
  letter-spacing:0;
}
h1{font-size:clamp(32px,5vw,54px)}
h2{font-size:24px}
.lede,.panel p{color:var(--soft);max-width:760px}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.stat,.panel{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel);
  backdrop-filter:blur(18px);
}
.stat{padding:18px}
.stat span{display:block;color:var(--mute);font-size:13px;font-weight:800}
.stat strong{display:block;margin-top:8px;font-size:34px}
.stat-link{
  display:inline-block;
  margin-top:12px;
  color:var(--cyan);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.panel{padding:18px}
.panel-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.actions,.row-actions,.form-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 13px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}
.button:hover{background:rgba(255,255,255,.1)}
.button:disabled,button:disabled{opacity:.45;cursor:not-allowed}
.button:disabled:hover,button:disabled:hover{background:rgba(255,255,255,.06)}
.button.primary{background:var(--grad);border-color:transparent}
.button.danger{color:#ffd7d7;border-color:rgba(239,68,68,.28)}
.button.small{min-height:32px;padding:6px 9px;font-size:12px}
.flash{
  border:1px solid rgba(16,249,129,.3);
  background:rgba(16,249,129,.1);
  color:#c7ffdf;
  border-radius:8px;
  padding:12px 14px;
}
.action-link{
  display:grid;
  gap:8px;
}
.action-link span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
}
.action-link code{overflow-wrap:anywhere}
.form-note{
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
  color:var(--soft);
  background:rgba(255,255,255,.045);
}
.timeline-note-form{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}
.timeline{
  display:grid;
  gap:10px;
}
.timeline-item{
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:12px;
  background:rgba(255,255,255,.04);
}
.timeline-item p{margin:8px 0 0}
.timeline-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--mute);
  font-size:12px;
  font-weight:800;
}
.stage-pipeline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.stage-step{
  min-height:36px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 11px;
  background:rgba(255,255,255,.05);
  color:var(--soft);
  font-weight:800;
  cursor:pointer;
}
.stage-step:hover{background:rgba(255,255,255,.1);color:#fff}
.stage-step.active{
  color:#fff;
  border-color:transparent;
  background:var(--grad);
}
.stage-settings-table input{
  min-width:120px;
}
.stage-settings-table .compact-input{
  width:90px;
  min-width:90px;
}
.inline-check{
  display:flex;
  align-items:center;
  grid-template-columns:none;
  gap:8px;
  min-height:42px;
}
.inline-check input{
  width:18px;
  min-height:18px;
  accent-color:var(--lime);
}
.stage-create-form{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.email-template-list{
  display:grid;
  gap:14px;
}
.template-editor{
  display:grid;
  gap:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:14px;
  background:rgba(255,255,255,.04);
}
.template-editor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.template-editor h3{
  margin:0 0 4px;
  font-size:18px;
}
.template-editor p{
  margin:0 0 8px;
}
.auth-card{
  width:min(560px,100%);
  margin:8vh auto;
  border:1px solid var(--border);
  border-radius:8px;
  padding:26px;
  background:var(--panel);
  backdrop-filter:blur(18px);
}
.public-portfolio-body{
  min-height:100vh;
}
.public-portfolio{
  width:min(1120px,100%);
  margin:0 auto;
  padding:24px;
  display:grid;
  gap:18px;
}
.public-hero{
  min-height:56vh;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:32px;
  background:
    linear-gradient(120deg,rgba(6,1,15,.2),rgba(6,1,15,.7)),
    radial-gradient(circle at 78% 20%,rgba(16,249,129,.2),transparent 24rem),
    var(--panel);
  backdrop-filter:blur(18px);
}
.public-hero h1{
  max-width:780px;
}
.public-headline{
  max-width:760px;
  color:var(--soft);
  font-size:22px;
  font-weight:700;
}
.public-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.public-meta span{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 9px;
  color:var(--soft);
  font-size:12px;
  font-weight:800;
}
.public-contact{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.public-section{
  border:1px solid var(--border);
  border-radius:8px;
  padding:24px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(18px);
}
.public-section > p{
  color:var(--soft);
  max-width:820px;
}
.public-section-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}
.public-project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.public-card{
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:16px;
  background:rgba(255,255,255,.045);
}
.public-card h3{
  margin:10px 0 6px;
  font-size:21px;
  line-height:1.15;
}
.public-card p{
  color:var(--soft);
}
.public-card-subtitle{
  margin:0;
  color:#fff;
  font-weight:800;
}
.public-project-card{
  display:grid;
  gap:14px;
}
.public-project-card img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
}
.public-skill-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.public-skill{
  display:grid;
  gap:3px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:12px;
  background:rgba(255,255,255,.045);
}
.public-skill span,.public-skill small{
  color:var(--mute);
  font-size:12px;
  font-weight:800;
}
.public-timeline{
  display:grid;
  gap:12px;
}
.login-form{
  display:grid;
  gap:14px;
  margin-top:22px;
}
.empty{color:var(--mute)}
.table-wrap{overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
th,td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
}
th{
  color:var(--mute);
  font-size:12px;
  letter-spacing:.06em;
}
.badge{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  color:var(--soft);
  font-size:12px;
  font-weight:800;
}
.muted{
  display:block;
  color:var(--mute);
  margin-top:4px;
  font-size:12px;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
label{display:grid;gap:7px;color:var(--mute);font-size:12px;font-weight:800}
label span{letter-spacing:.05em}
label small{color:var(--mute);font-weight:600;line-height:1.4;text-transform:none;letter-spacing:0}
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tabs a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 13px;
  color:var(--soft);
  text-decoration:none;
  font-weight:800;
  background:rgba(255,255,255,.045);
}
.tabs a.active,.tabs a:hover{background:var(--panel-2);color:#fff;border-color:rgba(255,255,255,.24)}
.check-field{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:10px 0;
}
.check-field input{width:18px;min-height:18px;accent-color:var(--lime)}
input,select,textarea{
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(6,1,15,.58);
  color:var(--text);
  padding:10px 11px;
  outline:none;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(6,182,212,.12)}
.wide{grid-column:1 / -1}
code{
  padding:2px 6px;
  border-radius:6px;
  background:rgba(255,255,255,.08);
}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;top:auto}
  .nav{grid-template-columns:repeat(4,1fr)}
  .nav-title{grid-column:1 / -1}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .shell{padding:12px}
  .topbar{align-items:flex-start;flex-direction:column}
  .topbar-actions{justify-content:flex-start}
  .public-hero{min-height:auto;align-items:flex-start;flex-direction:column;padding:22px}
  .public-contact{justify-content:flex-start}
  .public-project-grid,.public-skill-list{grid-template-columns:1fr}
  .page-head,.panel-head{align-items:flex-start;flex-direction:column}
  .nav,.stats-grid,.form-grid{grid-template-columns:1fr}
  .table-wrap{overflow:visible}
  table{min-width:0}
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    margin-bottom:10px;
    background:rgba(255,255,255,.035);
    overflow:hidden;
  }
  td{
    display:flex;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  td:last-child{border-bottom:0}
  td::before{
    content:attr(data-label);
    color:var(--mute);
    flex:0 0 42%;
    font-size:12px;
    font-weight:800;
  }
  td.row-actions{
    align-items:flex-start;
    justify-content:flex-start;
  }
  td.row-actions::before{flex-basis:100%}
}