:root{
  --bg: #fff6ef;
  --bg-2: #fff0e6;
  --violet: #e8380d;
  --violet-bright: #ff6a1a;
  --card: #ffffff;
  --card-ink: #2b1a12;
  --card-muted: #8a7367;
  --teal: #ff8c00;
  --pink: #d6280a;
  --text: #2b1a12;
  --muted: #8a7367;
  --danger: #c8251a;
  --radius: 12px;
  --shadow: 0 14px 30px -14px rgba(216,44,10,.28);
  --p1:#e8380d; --p2:#ff6a1a; --p3:#ff9a00; --p4:#d6280a; --p5:#ff4d2e; --p6:#ffab00; --p7:#c8251a;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 92% -8%, rgba(255,106,26,.20), transparent 60%),
    radial-gradient(900px 500px at -5% 10%, rgba(232,56,13,.18), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(255,171,0,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  min-height:100vh;
}
::selection{ background:var(--violet); color:#fff; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px 80px; }

header.cabinet{
  padding:36px 0 26px;
  border-bottom:2px solid rgba(216,44,10,.15);
  margin-bottom:28px;
}
.cabinet-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.cabinet-text{ min-width:0; flex:1; }
.brand-logo{
  flex:none;
  height:104px;
  width:auto;
  filter:drop-shadow(0 10px 18px rgba(216,44,10,.18));
}
@media (max-width:640px){
  .cabinet-top{ flex-direction:column; align-items:flex-start; gap:14px; }
  .brand-logo{ height:64px; align-self:flex-end; }
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:clamp(9px, 1.35vw, 11px);
  font-weight:600;
  color:var(--pink);
  margin:0 0 10px;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.eyebrow::-webkit-scrollbar{ display:none; }
h1{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:clamp(30px, 4vw, 44px);
  margin:0 0 8px;
  letter-spacing:-.01em;
  background:linear-gradient(100deg, #d6280a 0%, #ff6a1a 55%, #ffab00 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  width:fit-content;
}
header.cabinet p.sub{
  margin:0;
  color:var(--muted);
  font-size:15px;
  max-width:60ch;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
  align-items:center;
}
.field{
  display:flex;
  align-items:center;
  gap:8px;
  background:#ffffff;
  border:2px solid rgba(216,44,10,.18);
  border-radius:10px;
  padding:9px 12px;
  box-shadow:0 4px 14px -8px rgba(216,44,10,.25);
}
.field svg{ flex:none; opacity:.7; }
.field input, .field select{
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14px;
  min-width:0;
}
.field select{ cursor:pointer; }
.field select option{ background:#fff; color:var(--text); }
#searchInput{ width:220px; }
#searchInput::placeholder{ color:var(--muted); }

.btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:.03em;
  border-radius:9px;
  border:2px solid transparent;
  padding:10px 16px;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
  background:transparent;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-brass{
  background:linear-gradient(100deg, #d6280a, #ff8c00);
  color:#fff;
  font-weight:600;
  box-shadow:0 8px 18px -8px rgba(216,44,10,.55);
}
.btn-brass:hover{ filter:brightness(1.08); }
.btn-ghost{
  border-color:rgba(216,44,10,.35);
  color:var(--violet);
  font-weight:600;
}
.btn-ghost:hover{ background:rgba(216,44,10,.08); }
.btn-danger{
  border-color:rgba(230,54,95,.5);
  color:var(--danger);
}
.btn-danger:hover{ background:rgba(230,54,95,.1); }
.btn-danger-solid{
  background:var(--danger);
  color:#fff;
  font-weight:600;
  box-shadow:0 8px 18px -8px rgba(200,37,26,.55);
}
.btn-danger-solid:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn:focus-visible, .field:focus-within, input:focus-visible, select:focus-visible, .letter:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
}

.spacer{ flex:1; }
.count-pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:600;
  color:var(--teal);
}

.layout{ display:flex; gap:26px; align-items:flex-start; margin-top:8px; }
.rail{
  position:sticky;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:none;
  padding-right:6px;
  border-right:2px solid rgba(216,44,10,.15);
}
.letter{
  width:26px;
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:12px;
  padding:3px 0;
  color:#cabfe0;
  background:none;
  border:none;
  cursor:default;
  border-radius:6px;
}
.letter.active{ color:var(--violet); cursor:pointer; }
.letter.active:hover{ background:rgba(216,44,10,.12); color:var(--pink); }

main{ flex:1; min-width:0; }

.guide{
  display:flex;
  align-items:center;
  gap:14px;
  margin:30px 0 16px;
}
.guide:first-child{ margin-top:0; }
.guide .tab{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:20px;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:12px 12px 12px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.35);
}
.guide .rule{ flex:1; height:2px; background:linear-gradient(90deg, rgba(216,44,10,.3), transparent); }
.guide .n{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); }

.list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--card);
  color:var(--card-ink);
  border-radius:9px;
  padding:11px 14px;
  border:2px solid rgba(216,44,10,.08);
  border-left:5px solid var(--accent, var(--violet));
  box-shadow:0 4px 14px -10px rgba(216,44,10,.3);
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.row:hover{
  background:color-mix(in srgb, var(--accent, var(--violet)) 16%, #fff);
  border-color:color-mix(in srgb, var(--accent, var(--violet)) 55%, transparent);
  border-left-color:var(--accent, var(--violet));
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--accent, var(--violet)) 45%, transparent);
}

.row-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:15.5px;
  line-height:1.3;
  color:var(--card-ink);
  text-decoration:none;
  cursor:pointer;
}
.row-name:hover{ color:var(--violet); text-decoration:underline; }
.row-name:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; }

.row-tag{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.03em;
  color:#fff;
  background:var(--accent, var(--teal));
  padding:3px 9px;
  border-radius:20px;
  flex:none;
}

.row-spacer{ flex:1; }

.edit-row{
  display:flex;
  gap:10px;
  flex:none;
}
.edit-row button{
  background:none; border:none; cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:10.5px;
  color:var(--card-muted);
  text-decoration:underline;
  padding:0;
}
.edit-row button:hover{ color:var(--danger); }

.hover-preview-box{
  position:fixed;
  z-index:120;
  max-width:min(70vw, 760px);
  max-height:min(75vh, 600px);
  background:#fff;
  border-radius:12px;
  border:4px solid var(--preview-accent, #fff);
  box-shadow:0 30px 70px -16px rgba(0,0,0,.45);
  padding:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transform:scale(.55);
  opacity:0;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.3), opacity .16s ease, left .18s ease, top .18s ease;
}
.hover-preview-box.grown{
  transform:scale(1);
  opacity:1;
}
.hover-preview-box img{
  max-width:min(70vw, 760px);
  max-height:min(75vh, 600px);
  width:auto; height:auto;
  display:block;
  object-fit:contain;
}
.hover-preview-box .img-loading,
.hover-preview-box .no-preview{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--card-muted);
  text-align:center;
  padding:16px 20px;
}

.empty{
  text-align:center;
  padding:70px 20px;
  color:var(--muted);
}
.empty .big{
  font-family:'Fraunces', serif;
  font-size:22px;
  color:var(--text);
  margin-bottom:8px;
}

.form-card{
  background:#fff;
  border:2px dashed rgba(216,44,10,.35);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:24px;
  box-shadow:var(--shadow);
}
.form-card h3{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pink);
  margin:0 0 14px;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-grid .full{ grid-column:1 / -1; }
.form-grid label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--muted);
  margin-bottom:5px;
  letter-spacing:.03em;
}
.form-grid input, .form-grid select{
  width:100%;
  background:#faf8ff;
  border:2px solid rgba(216,44,10,.25);
  border-radius:8px;
  color:var(--text);
  padding:9px 10px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14px;
  cursor:auto;
}
.form-grid select{ cursor:pointer; }
.form-grid input:focus-visible, .form-grid select:focus-visible{ outline:2px solid var(--violet); }
.form-actions{ margin-top:14px; display:flex; gap:10px; align-items:center; }
.form-error{ color:var(--danger); font-size:12.5px; margin-top:10px; min-height:14px; }

.img-field{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.img-preview-wrap{
  width:120px; height:80px;
  border-radius:8px;
  border:2px solid rgba(216,44,10,.2);
  background:#faf8ff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex:none;
}
.img-preview-wrap .img-thumb{ width:100%; height:100%; object-fit:cover; }
.img-loading, .img-empty{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  color:var(--card-muted);
  text-align:center;
  padding:0 8px;
}
.img-field-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.img-field-actions .btn{ padding:8px 12px; font-size:11.5px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

.lightbox-backdrop{
  position:fixed; inset:0;
  background:rgba(20,10,5,.72);
  display:flex; align-items:center; justify-content:center;
  z-index:200;
  padding:36px;
  animation:lightboxFade .18s ease;
}
@keyframes lightboxFade{ from{ opacity:0; } to{ opacity:1; } }
.lightbox-backdrop img{
  max-width:min(900px, 90vw);
  max-height:85vh;
  width:auto; height:auto;
  border-radius:10px;
  border:5px solid var(--preview-accent, #fff);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.6);
  cursor:zoom-out;
}
.lightbox-close{
  position:absolute; top:20px; right:24px;
  width:38px; height:38px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:var(--card-ink);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.lightbox-close:hover{ background:var(--violet); color:#fff; }

.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(15,20,17,.6);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
  padding:20px;
}
.modal{
  background:var(--card);
  color:var(--card-ink);
  border-radius:16px;
  padding:26px;
  width:100%; max-width:340px;
  box-shadow:0 30px 60px -20px rgba(216,44,10,.35);
  border:2px solid rgba(216,44,10,.12);
}
.modal h3{ font-family:'Fraunces', serif; margin:0 0 6px; font-size:19px; }
.modal p{ font-size:13px; color:var(--card-muted); margin:0 0 14px; }
.modal input{
  width:100%;
  padding:10px 12px;
  border:2px solid #e6e0f5;
  border-radius:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  letter-spacing:.1em;
  margin-bottom:12px;
}
.modal input:focus-visible{ outline:2px solid var(--violet); border-color:var(--violet); }
.modal .row{ display:flex; gap:8px; justify-content:flex-end; }
.modal .err{ color:var(--danger); font-size:12px; margin:-6px 0 12px; min-height:14px; }

footer{
  margin-top:60px;
  padding-top:18px;
  border-top:2px solid rgba(216,44,10,.12);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:#a99fc2;
  text-align:center;
}

@media (max-width:640px){
  .rail{ display:none; }
  .wrap{ padding:0 16px 60px; }
  #searchInput{ width:150px; }
}