:root{
  --black:#000000;--white:#FFFFFF;--red:#C8102E;--red-h:#a50d24;
  --g1:#111111;--g2:#1C1C1C;--g3:#2E2E2E;--g4:#555555;--g5:#888888;--g6:#BBBBBB;--g7:#E5E5E5;
  --serif:'EB Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
  --nav-bg:rgba(0,0,0,.94);--nav-border:rgba(255,255,255,.06);
  color-scheme:dark;
}
/* Same light-theme palette as marzullore.com — --black/--white are semantic
   (background/foreground), not literal, so they swap roles here. */
:root[data-theme="light"]{
  --black:#FFFFFF;--white:#161311;
  --g1:#F4F1EC;--g2:#EAE5DC;--g3:#D8D1C4;--g4:#8C8578;--g5:#6B655C;--g6:#4A443C;--g7:#211E19;
  --nav-bg:rgba(255,255,255,.94);--nav-border:rgba(0,0,0,.08);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}

.theme-picker{display:inline-flex;gap:2px;border:1px solid var(--g3);border-radius:999px;padding:3px}
.theme-opt{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--g5);background:none;transition:background .2s,color .2s}
.theme-opt svg{width:14px;height:14px}
.theme-opt.active{background:var(--red);color:var(--white)}
.theme-opt:not(.active):hover{color:var(--white)}

body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

button{cursor:pointer;border:none;font-family:var(--sans)}
input{font-family:var(--sans)}

/* Password gate */
#gate{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--black);
  padding:20px;
}
#gate[hidden]{display:none}
#gate-form{
  width:100%;max-width:360px;
  background:var(--g1);
  border:1px solid var(--g3);
  border-radius:12px;
  padding:36px 32px;
  text-align:center;
}
#gate-form h1{font-family:var(--serif);font-weight:400;font-size:1.8rem;margin-bottom:8px}
.gate-sub{color:var(--g6);font-size:.92rem;margin-bottom:24px}
#gate-password{
  width:100%;padding:12px 14px;
  background:var(--g2);border:1px solid var(--g3);border-radius:8px;
  color:var(--white);font-size:1rem;margin-bottom:14px;
}
#gate-password:focus{outline:none;border-color:var(--red)}
#gate-form button{
  width:100%;padding:12px 14px;
  background:var(--red);color:var(--white);
  border-radius:8px;font-size:1rem;font-weight:500;
  transition:background .2s ease;
}
#gate-form button:hover{background:var(--red-h)}
.gate-error{color:var(--red);font-size:.85rem;min-height:1.2em;margin-top:12px}

/* App shell */
#app{max-width:1400px;margin:0 auto;padding:28px 32px 60px}
#app-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  margin-bottom:6px;
}
#app-header h1{font-family:var(--serif);font-weight:400;font-size:2rem}
.header-controls{display:flex;gap:10px;align-items:center}
#search{
  background:var(--g1);border:1px solid var(--g3);border-radius:8px;
  color:var(--white);padding:9px 14px;font-size:.92rem;min-width:240px;
}
#search:focus{outline:none;border-color:var(--red)}
#sort-select{
  background:var(--g1);border:1px solid var(--g3);border-radius:8px;
  color:var(--white);padding:9px 10px;font-size:.92rem;
}
#sort-select:focus{outline:none;border-color:var(--red)}
#refresh-btn{
  background:var(--g2);color:var(--white);border:1px solid var(--g3);
  border-radius:8px;padding:9px 16px;font-size:.92rem;
  transition:border-color .2s ease;
}
#refresh-btn:hover{border-color:var(--red)}

#status-line{color:var(--g5);font-size:.85rem;margin:14px 0 20px}

/* Board */
#board{
  display:flex;gap:18px;
  overflow-x:auto;
  padding-bottom:20px;
}
.column{
  flex:0 0 300px;
  background:var(--g1);
  border:1px solid var(--g3);
  border-radius:12px;
  padding:16px;
  max-height:calc(100vh - 220px);
  display:flex;flex-direction:column;
}
.column-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--g3);
}
.column-title{font-family:var(--serif);font-size:1.15rem;font-weight:400}
.column-count{
  background:var(--g2);color:var(--g6);
  font-size:.75rem;font-weight:600;
  border-radius:999px;padding:2px 9px;
}
.column-cards{overflow-y:auto;display:flex;flex-direction:column;gap:10px}

.card{
  background:var(--g2);
  border:1px solid var(--g3);
  border-radius:8px;
  padding:12px 14px;
  cursor:pointer;
  transition:border-color .15s ease,transform .1s ease;
}
.card:hover{border-color:var(--red)}
.card-name{font-size:.95rem;font-weight:500;margin-bottom:4px}
.card-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.72rem;color:var(--g5)}
.card-source{color:var(--g5)}
.badge{
  display:inline-block;font-size:.68rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  border-radius:999px;padding:2px 8px;
}
.badge-dormant{background:rgba(200,16,46,.18);color:#ff5c72}
.card-tags{margin-top:6px;font-size:.72rem;color:var(--g6)}

.empty-state{color:var(--g5);font-size:.9rem;text-align:center;padding:40px 10px}

/* Detail panel */
#detail-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  display:flex;justify-content:flex-end;
  z-index:50;
}
#detail-overlay[hidden]{display:none}
#detail-panel{
  width:100%;max-width:420px;height:100%;
  background:var(--g1);
  border-left:1px solid var(--g3);
  padding:32px 28px;
  overflow-y:auto;
  position:relative;
}
#detail-close{
  position:absolute;top:20px;right:20px;
  background:none;color:var(--g6);font-size:1.5rem;line-height:1;
}
#detail-close:hover{color:var(--white)}
#detail-name{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:6px;padding-right:30px}
.detail-stage{color:var(--red);font-size:.85rem;font-weight:500;margin-bottom:24px}
.detail-fields{display:grid;grid-template-columns:100px 1fr;row-gap:14px;column-gap:10px;margin-bottom:28px}
.detail-fields dt{color:var(--g5);font-size:.8rem}
.detail-fields dd{color:var(--white);font-size:.9rem}
#detail-fub-link{
  display:inline-block;
  color:var(--red);text-decoration:none;font-size:.9rem;font-weight:500;
}
#detail-fub-link:hover{color:var(--red-h)}

@media (max-width:640px){
  #app{padding:20px 16px 40px}
  #app-header{flex-direction:column;align-items:flex-start}
  .header-controls{width:100%}
  #search{flex:1;min-width:0}
  .column{flex:0 0 260px}
  #detail-panel{max-width:100%}
}