:root{
  --bg:#0A0A0E;
  --bg-2:#0F0F15;
  --surface:#14141C;
  --surface-2:#1A1A24;
  --border:#23232E;
  --border-2:#2E2E3B;
  --text:#F2F2F5;
  --text-2:#A0A0AD;
  --text-3:#6B6B77;
  --accent:#7C5CFF;
  --accent-2:#00D4FF;
  --ok:#3EE6A8;
  --warn:#FFB547;
  --err:#FF5E8A;
  --grad:linear-gradient(120deg,#7C5CFF 0%,#00D4FF 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
button{font-family:inherit}
input, textarea, select{ font-family:inherit }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* login */
.login{
  min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(40% 30% at 50% 100%, rgba(0,212,255,.08), transparent 60%),
    var(--bg);
  padding:20px;
}
.login-card{
  width:100%; max-width:440px; padding:48px 40px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 40px 80px rgba(0,0,0,.4);
}
.login-mark{
  width:48px; height:48px; border-radius:50%;
  background:var(--grad);
  font-family:'Instrument Serif',serif; font-style:italic;
  display:grid; place-items:center; color:#0A0A0E;
  font-size:20px; font-weight:600;
  margin-bottom:32px;
}
.login-card h1{
  font-size:28px; font-weight:600; letter-spacing:-.02em;
  margin-bottom:6px;
}
.login-sub{ color:var(--text-2); font-size:14px; margin-bottom:32px; line-height:1.5 }
#loginForm{ display:flex; flex-direction:column; gap:14px }
#loginForm input{
  padding:14px 16px; border-radius:6px;
  background:var(--bg-2); border:1px solid var(--border);
  color:var(--text); font-size:14px; outline:none;
  transition:border-color .2s ease;
}
#loginForm input:focus{ border-color:var(--accent) }
#loginForm button{
  padding:14px 16px; border-radius:6px;
  background:var(--grad); color:#0A0A0E; border:none;
  font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
#loginForm button:hover{ filter:brightness(1.1) }
.login-hint{ margin-top:16px; font-size:12px; color:var(--err); min-height:16px }

/* shell */
.shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh }
.side{
  background:var(--bg-2); border-right:1px solid var(--border);
  padding:28px 20px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.side-brand{ display:flex; align-items:center; gap:12px; margin-bottom:36px }
.brand-dot{
  width:36px; height:36px; border-radius:50%; background:var(--grad); flex-shrink:0;
}
.brand-title{ font-size:11px; text-transform:uppercase; letter-spacing:.15em; color:var(--text-3); font-family:'JetBrains Mono',monospace }
.brand-sub{ font-size:14px; font-weight:500; margin-top:2px }

.side-nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:auto }
.side-nav button{
  all:unset; cursor:pointer;
  padding:11px 14px; border-radius:6px;
  color:var(--text-2); font-size:14px;
  transition:background .2s ease, color .2s ease;
}
.side-nav button:hover{ background:var(--surface); color:var(--text) }
.side-nav button.active{ background:var(--surface-2); color:var(--text) }

.side-footer{
  display:flex; flex-direction:column; gap:8px;
  padding-top:24px; border-top:1px solid var(--border);
  font-size:13px;
}
.side-footer a{ color:var(--text-2); text-decoration:none; padding:6px 0; transition:color .2s ease }
.side-footer a:hover{ color:var(--text) }
.logout{
  all:unset; cursor:pointer;
  font-size:12px; color:var(--err); padding:6px 0;
  text-align:left;
}
.logout:hover{ text-decoration:underline }

/* main */
.main{ padding:40px 48px 80px; max-width:1100px; width:100%; margin-left:0 }
.main-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding-bottom:24px; border-bottom:1px solid var(--border);
  margin-bottom:32px;
}
.crumb{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.15em; margin-bottom:8px }
#pageTitle{ font-size:28px; font-weight:600; letter-spacing:-.02em }
.head-actions{ display:flex; align-items:center; gap:16px }
.save-status{ font-size:12px; color:var(--text-3); font-family:'JetBrains Mono',monospace }
.save-status.ok{ color:var(--ok) }
.save-status.err{ color:var(--err) }
.primary{
  all:unset; cursor:pointer;
  padding:10px 18px; border-radius:6px;
  background:var(--grad); color:#0A0A0E;
  font-size:13px; font-weight:600;
  transition:filter .2s ease;
}
.primary:hover{ filter:brightness(1.1) }

.ghost{
  all:unset; cursor:pointer;
  padding:8px 14px; border-radius:6px;
  border:1px dashed var(--border-2); color:var(--text-2);
  font-size:13px;
  transition:color .2s ease, border-color .2s ease;
}
.ghost:hover{ color:var(--text); border-color:var(--accent) }

.tab{ display:none }
.tab.active{ display:block }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.grid-2 .full{ grid-column:1 / -1 }
.grid-2 label{
  display:flex; flex-direction:column; gap:6px;
  font-size:11px; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.12em;
  font-family:'JetBrains Mono',monospace;
}
.grid-2 input, .grid-2 textarea,
.list input, .list textarea, .list select{
  padding:11px 13px; background:var(--surface); border:1px solid var(--border);
  border-radius:6px; color:var(--text); font:500 14px 'Inter',sans-serif;
  outline:none; transition:border-color .2s ease;
  letter-spacing:normal; text-transform:none;
  width:100%;
}
.grid-2 input:focus, .grid-2 textarea:focus,
.list input:focus, .list textarea:focus, .list select:focus{
  border-color:var(--accent);
}
.grid-2 textarea{ resize:vertical; min-height:120px; font-family:'Instrument Serif',serif; font-size:16px; font-style:italic }

.list-actions{ margin-bottom:18px }
.list{ display:flex; flex-direction:column; gap:14px }
.list-item{
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:22px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  transition:border-color .2s ease;
}
.list-item:hover{ border-color:var(--border-2) }
.list-item .row{
  display:grid; gap:14px;
}
.list-item .row.two{ grid-template-columns:1fr 1fr }
.list-item .row.three{ grid-template-columns:1fr 1fr 1fr }
.list-item .row.four{ grid-template-columns:1fr 1fr 1fr 120px }
.list-item label{
  display:flex; flex-direction:column; gap:6px;
  font-size:11px; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.12em;
  font-family:'JetBrains Mono',monospace;
}
.list-item .bullets-wrap{ display:flex; flex-direction:column; gap:8px }
.list-item .bullets-wrap textarea{
  font-family:'Inter',sans-serif; font-style:normal;
  min-height:160px; resize:vertical;
}
.list-item .remove{
  all:unset; cursor:pointer;
  position:absolute; top:16px; right:16px;
  font-size:11px; color:var(--text-3);
  font-family:'JetBrains Mono',monospace;
  padding:4px 10px; border-radius:4px; background:var(--bg-2);
  transition:color .2s ease, background .2s ease;
}
.list-item .remove:hover{ color:var(--err); background:rgba(255,94,138,.1) }

.list.compact .list-item{ padding:16px }
.list.compact .list-item .row.three{ grid-template-columns:1fr 120px 80px }

.swatch{
  display:inline-block; width:28px; height:28px; border-radius:6px;
  border:1px solid var(--border); vertical-align:middle;
}

@media (max-width: 900px){
  .shell{ grid-template-columns:1fr }
  .side{ position:sticky; top:0; height:auto; padding:14px 16px; z-index:10 }
  .side-brand{ margin-bottom:12px }
  .side-nav{ flex-direction:row; overflow-x:auto; gap:4px; margin-bottom:14px; padding-bottom:4px }
  .side-nav::-webkit-scrollbar{ display:none }
  .side-nav{ scrollbar-width:none }
  .side-nav button{ white-space:nowrap; flex:0 0 auto; padding:8px 12px; font-size:13px }
  .side-footer{ flex-direction:row; flex-wrap:wrap; padding-top:12px; gap:14px; font-size:12px }
  .main{ padding:24px 18px 80px }
  .main-head{ flex-direction:column; align-items:flex-start; gap:14px }
  .head-actions{ width:100%; justify-content:space-between }
  #pageTitle{ font-size:22px }
  .grid-2{ grid-template-columns:1fr }
  .list-item .row.two, .list-item .row.three, .list-item .row.four,
  .list.compact .list-item .row.three{ grid-template-columns:1fr }
  .list-item{ padding:18px }
  .login-card{ padding:36px 24px }
}