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

:root {
  --codex-red:#7a0000; --codex-blue:#122538;
  --bg-start:#07111d; --bg-mid:var(--codex-blue); --bg-end:#18344f;
  --hdr-start:#4f0000; --hdr-mid:var(--codex-red); --hdr-end:#9b1616;
  --surface:rgba(255,255,255,0.04); --surface-2:rgba(255,255,255,0.07);
  --surface-3:rgba(255,255,255,0.11);
  --border:rgba(255,255,255,0.07); --border-2:rgba(255,255,255,0.12);
  --text:#e8ecf4; --text-dim:#8899b4; --text-muted:#5a6d8a;
  --accent:#4a90d9; --accent-glow:rgba(74,144,217,0.2);
  --red:var(--codex-red); --red-glow:rgba(122,0,0,0.28);
  --gold:#c9a84c; --gold-dim:#a07a30;
  --success:#2ecc71; --warn:#f39c12; --danger:#e74c3c; --purple:#9b59b6;
  --r:12px; --sidebar:280px; --header-h:68px;
  --font-display:'Cinzel',serif; --font-body:'Crimson Text',Georgia,serif; --font-mono:'JetBrains Mono',monospace;
}

html,body{height:100%;overflow:hidden}
body{font-family:var(--font-body);background:linear-gradient(160deg,var(--bg-start),var(--bg-mid) 45%,var(--bg-end));color:var(--text);display:flex;flex-direction:column}

/* GRID BG */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(74,144,217,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(74,144,217,0.035) 1px,transparent 1px);
  background-size:60px 60px;animation:gridMove 25s linear infinite}
@keyframes gridMove{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}

/* HEADER */
.app-header{
  position:relative;z-index:10;flex-shrink:0;height:var(--header-h);
  background:linear-gradient(135deg,var(--hdr-start),var(--hdr-mid),var(--hdr-end));
  border-bottom:1px solid rgba(255,255,255,0.1);
  box-shadow:0 4px 32px rgba(107,21,32,0.4);
  display:flex;align-items:center;padding:0 24px;gap:16px
}
.hdr-emblem{
  width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,0.28)
}
.hdr-emblem img{width:38px;height:38px;object-fit:contain;display:block}
.hdr-title{display:flex;flex-direction:column}
.hdr-title h1{font-family:var(--font-display);font-size:20px;font-weight:900;letter-spacing:4px;color:#fff;line-height:1}
.hdr-title p{font-size:10px;letter-spacing:2px;color:rgba(255,255,255,0.5);font-family:var(--font-mono);margin-top:2px}
.hdr-divider{width:1px;height:32px;background:rgba(255,255,255,0.15);margin:0 4px}
.hdr-search{flex:1;max-width:420px;position:relative}
.hdr-search input{width:100%;padding:9px 14px 9px 38px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;color:#fff;font-family:var(--font-body);font-size:14px;outline:none;transition:all 0.2s}
.hdr-search input::placeholder{color:rgba(255,255,255,0.35)}
.hdr-search input:focus{border-color:rgba(255,255,255,0.3);background:rgba(0,0,0,0.35)}
.hdr-search .material-icons-round{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:rgba(255,255,255,0.4)}
.hdr-right{margin-left:auto;display:flex;gap:8px}
.hdr-btn{padding:8px 16px;border-radius:9px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.2);
  color:#fff;font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;text-decoration:none;
  display:flex;align-items:center;gap:6px;white-space:nowrap}
.hdr-btn .material-icons-round{font-size:17px}
.hdr-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25)}
.hdr-btn.primary{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2)}
.entry-count-badge{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);border-radius:20px;
  padding:3px 12px;min-width:78px;font-size:11px;font-family:var(--font-mono);color:rgba(255,255,255,0.65);
  display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}

/* LAYOUT */
.app-body{flex:1;display:flex;overflow:hidden;position:relative;z-index:1}

/* SIDEBAR */
.sidebar{width:var(--sidebar);flex-shrink:0;background:rgba(0,0,0,0.2);
  border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.sidebar-inner{flex:1;overflow-y:auto;padding:16px 12px}
.sidebar-section{margin-bottom:4px}
.sidebar-label{font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);padding:10px 10px 6px;font-family:var(--font-mono)}

.cat-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  cursor:pointer;transition:all 0.15s;user-select:none;position:relative}
.cat-item:hover{background:var(--surface)}
.cat-item.active{background:var(--surface-2)}
.cat-item-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cat-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-icon .material-icons-round{font-size:16px}
.cat-icon i{font-size:15px}
.icon-field-row{display:flex;gap:8px;align-items:center}
.icon-field-row input{flex:1}
.icon-preview{width:42px;height:38px;border-radius:8px;background:rgba(0,0,0,0.25);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-preview .material-icons-round{font-size:20px}
.icon-preview i{font-size:18px}
.icon-picker-btn{height:38px;padding:0 12px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:12px;cursor:pointer;white-space:nowrap}
.icon-picker-btn:hover{background:var(--surface-2);border-color:var(--accent)}
.cat-item-text{flex:1;min-width:0}
.cat-item-name{font-size:13px;font-weight:600;font-family:var(--font-display);letter-spacing:0.5px;font-size:12px}
.cat-item-desc{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.cat-item-count{font-size:10px;font-family:var(--font-mono);background:var(--surface-2);padding:2px 7px;border-radius:8px;color:var(--text-muted);flex-shrink:0}
.cat-item-actions{display:none;gap:3px;flex-shrink:0}
.cat-item:hover .cat-item-actions{display:flex}
.cat-action-btn{width:22px;height:22px;border-radius:5px;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all 0.1s}
.cat-action-btn:hover{background:var(--surface-3);color:var(--text)}
.cat-action-btn.del:hover{color:var(--danger)}
.cat-action-btn .material-icons-round{font-size:13px}

.sidebar-footer{padding:12px;border-top:1px solid var(--border)}
.btn-add-cat{width:100%;padding:9px;border-radius:9px;background:var(--surface);border:1px dashed var(--border-2);
  color:var(--text-dim);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:all 0.2s;
  display:flex;align-items:center;justify-content:center;gap:6px}
.btn-add-cat:hover{background:var(--surface-2);color:var(--text);border-color:var(--accent)}
.btn-add-cat .material-icons-round{font-size:16px}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.main-toolbar{display:flex;align-items:center;gap:10px;padding:14px 20px;flex-shrink:0;border-bottom:1px solid var(--border)}
.toolbar-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:1px}
.toolbar-sub{font-size:12px;color:var(--text-muted);margin-left:6px;font-family:var(--font-mono)}
.toolbar-right{margin-left:auto;display:flex;gap:8px}
.view-btns{display:flex;gap:2px;background:rgba(0,0,0,0.2);border-radius:8px;padding:3px}
.view-btn{width:32px;height:28px;border-radius:6px;background:none;border:none;color:rgba(255,255,255,0.4);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.view-btn .material-icons-round{font-size:18px}
.view-btn.active{background:rgba(255,255,255,0.12);color:#fff}

.main-content{flex:1;overflow-y:auto;padding:20px}

/* ENTRY GRID */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.entry-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative;animation:fadeUp 0.3s ease both}
.entry-card:hover{border-color:var(--border-2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card-img{width:100%;height:170px;object-fit:cover;background:rgba(0,0,0,0.3);display:block}
.card-img-placeholder{width:100%;height:170px;background:linear-gradient(135deg,rgba(10,22,40,0.8),rgba(26,58,107,0.4));
  display:flex;align-items:center;justify-content:center}
.card-img-placeholder .material-icons-round{font-size:52px;color:rgba(255,255,255,0.1)}
.card-body{padding:14px}
.card-cat{font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:5px;opacity:0.8}
.card-name{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:0.5px;margin-bottom:4px}
.card-class{font-size:12px;color:var(--text-muted);font-style:italic;margin-bottom:8px}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.danger-meter{display:flex;gap:3px}
.danger-pip{width:14px;height:4px;border-radius:2px;background:rgba(255,255,255,0.1)}
.danger-pip.filled{background:var(--danger)}
.danger-pip.filled.low{background:var(--success)}
.danger-pip.filled.mid{background:var(--warn)}
.status-badge{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;font-family:var(--font-mono)}
.st-unconfirmed{background:rgba(243,156,18,0.15);color:var(--warn)}
.st-confirmed{background:rgba(46,204,113,0.15);color:var(--success)}
.st-legend{background:rgba(155,89,182,0.15);color:var(--purple)}
.st-disputed{background:rgba(231,76,60,0.15);color:var(--danger)}
.st-hoax{background:rgba(90,109,138,0.15);color:var(--text-muted)}
.st-paranormal{background:rgba(155,89,182,0.15);color:var(--purple)}

/* LIST VIEW */
.entry-list{display:flex;flex-direction:column;gap:8px}
.entry-list-item{display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  cursor:pointer;transition:all 0.15s;animation:fadeUp 0.2s ease both}
.entry-list-item:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateX(3px)}
.list-thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0}
.list-thumb-ph{width:52px;height:52px;border-radius:8px;background:rgba(0,0,0,0.3);
  flex-shrink:0;display:flex;align-items:center;justify-content:center}
.list-thumb-ph .material-icons-round{font-size:24px;color:rgba(255,255,255,0.15)}
.list-info{flex:1;min-width:0}
.list-name{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:0.5px}
.list-meta{font-size:12px;color:var(--text-muted);margin-top:2px;font-style:italic}
.list-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* EMPTY STATE */
.empty-state{text-align:center;padding:80px 20px;color:var(--text-muted)}
.empty-state .material-icons-round{font-size:64px;display:block;margin-bottom:16px;opacity:0.3}
.empty-state h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text-dim)}
.empty-state p{font-size:14px;line-height:1.6}

/* ── DETAIL OVERLAY ──────────────────────────────── */
.detail-overlay{position:fixed;inset:0;z-index:200;display:none;
  background:rgba(5,12,26,0.92);backdrop-filter:blur(12px);overflow-y:auto}
.detail-overlay.open{display:block;animation:overlayIn 0.3s ease}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
.detail-inner{min-height:100%;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;padding:0 0 60px}

.detail-header{display:flex;align-items:center;gap:12px;padding:16px 24px;
  border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;
  background:rgba(8,16,32,0.95);backdrop-filter:blur(10px);z-index:10}
.detail-back{width:36px;height:36px;border-radius:9px;background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:all 0.15s}
.detail-back:hover{background:var(--surface-2);color:var(--text)}
.detail-back .material-icons-round{font-size:20px}
.detail-header-name{font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:1px;flex:1}
.detail-header-actions{display:flex;gap:8px}
.dhdr-btn{padding:7px 14px;border-radius:8px;font-family:var(--font-body);font-size:13px;font-weight:600;
  cursor:pointer;border:1px solid var(--border);transition:all 0.15s;display:flex;align-items:center;gap:5px}
.dhdr-btn .material-icons-round{font-size:16px}
.dhdr-btn.edit{background:var(--surface);color:var(--text)}
.dhdr-btn.edit:hover{background:var(--surface-2)}
.dhdr-btn.del{background:rgba(231,76,60,0.1);border-color:rgba(231,76,60,0.3);color:var(--danger)}
.dhdr-btn.del:hover{background:rgba(231,76,60,0.2)}

.detail-body{display:grid;grid-template-columns:420px 1fr;gap:0;flex:1}
@media(max-width:900px){.detail-body{grid-template-columns:1fr}}

/* Image panel */
.detail-images{padding:24px;border-right:1px solid var(--border)}
.detail-hero{width:100%;aspect-ratio:4/3;border-radius:12px;object-fit:cover;
  background:rgba(0,0,0,0.3);display:block;cursor:zoom-in;transition:transform 0.2s}
.detail-hero:hover{transform:scale(1.01)}
.detail-hero-ph{width:100%;aspect-ratio:4/3;border-radius:12px;background:rgba(0,0,0,0.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-muted)}
.detail-hero-ph .material-icons-round{font-size:64px;opacity:0.2}
.hero-caption{font-size:12px;color:var(--text-muted);text-align:center;margin-top:8px;font-style:italic}
.thumb-strip{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.thumb{width:70px;height:70px;border-radius:8px;object-fit:cover;cursor:pointer;
  border:2px solid transparent;transition:all 0.15s;flex-shrink:0}
.thumb:hover{border-color:var(--accent-glow)}
.thumb.active{border-color:var(--accent)}
.thumb-add{width:70px;height:70px;border-radius:8px;border:2px dashed var(--border-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;flex-shrink:0}
.thumb-add:hover{border-color:var(--accent);background:var(--accent-glow)}
.thumb-add .material-icons-round{font-size:22px;color:var(--text-muted)}
.thumb-del-btn{position:relative}
.thumb-del-btn::after{content:'✕';position:absolute;top:2px;right:2px;width:16px;height:16px;
  background:rgba(231,76,60,0.85);border-radius:3px;font-size:9px;display:flex;align-items:center;
  justify-content:center;opacity:0;transition:opacity 0.15s;pointer-events:none;
  display:none}
.img-upload-hint{font-size:11px;color:var(--text-muted);margin-top:8px;font-style:italic}

/* Detail info panel */
.detail-info{padding:24px 28px;overflow-y:auto}
.detail-name{font-family:var(--font-display);font-size:28px;font-weight:900;letter-spacing:1px;margin-bottom:6px;
  background:linear-gradient(135deg,#fff,rgba(201,168,76,0.8));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.detail-aliases{font-size:14px;color:var(--text-muted);font-style:italic;margin-bottom:14px}
.detail-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.detail-cat-badge{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;
  font-size:11px;font-weight:600;letter-spacing:0.5px;font-family:var(--font-mono)}
.detail-class{font-size:13px;color:var(--text-dim);font-style:italic;margin-bottom:6px}
.danger-full{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.danger-full-label{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:0.5px}
.danger-pips{display:flex;gap:4px}
.danger-pip-lg{width:24px;height:6px;border-radius:3px;background:rgba(255,255,255,0.08)}
.danger-pip-lg.on-low{background:var(--success)}
.danger-pip-lg.on-mid{background:var(--warn)}
.danger-pip-lg.on-high{background:var(--danger)}

/* Sections */
.detail-section{margin-bottom:24px}
.detail-section-title{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;padding-bottom:6px;
  border-bottom:1px solid rgba(201,168,76,0.2);display:flex;align-items:center;gap:6px}
.detail-section-title .material-icons-round{font-size:14px}

/* TAXONOMY TABLE */
.taxonomy-grid{display:grid;gap:2px}
.tax-row{display:grid;grid-template-columns:140px 1fr;border-radius:6px;overflow:hidden}
.tax-row:nth-child(odd){background:var(--surface)}
.tax-key{padding:8px 12px;font-size:12px;font-weight:600;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:0.3px}
.tax-val{padding:8px 12px;font-size:13px;font-family:var(--font-body)}

.detail-text{font-size:15px;line-height:1.75;color:var(--text-dim)}
.detail-text p{margin-bottom:10px}

.tags-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tag{padding:4px 10px;border-radius:6px;font-size:11px;background:rgba(74,144,217,0.1);
  border:1px solid rgba(74,144,217,0.2);color:var(--accent);font-family:var(--font-mono)}

.info-row{display:flex;gap:6px;align-items:center;padding:6px 0;
  border-bottom:1px solid var(--border);font-size:13px}
.info-row:last-child{border-bottom:none}
.info-key{color:var(--text-muted);min-width:130px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.3px}

/* ── MODALS ──────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);z-index:300;
  display:none;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:#0f1e38;border:1px solid var(--border-2);border-radius:16px;
  width:100%;max-width:580px;max-height:90vh;overflow-y:auto;
  box-shadow:0 32px 80px rgba(0,0,0,0.7);animation:modalIn 0.25s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(0.96)}to{opacity:1;transform:none}}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-hdr h2{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:1px}
.modal-close{width:32px;height:32px;border-radius:8px;background:var(--surface);border:none;
  color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.1s}
.modal-close:hover{background:var(--surface-2);color:var(--text)}
.modal-close .material-icons-round{font-size:18px}
.modal-body{padding:22px}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--border)}

.fg{margin-bottom:14px}
.fg label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;
  color:var(--text-dim);margin-bottom:5px;font-family:var(--font-mono)}
.fg input,.fg textarea,.fg select{width:100%;padding:10px 14px;background:rgba(0,0,0,0.3);
  border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);
  font-family:var(--font-body);outline:none;transition:border-color 0.2s}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--accent)}
.fg textarea{resize:vertical;min-height:80px;line-height:1.6}
.fg select option{background:#0f1e38}
.fg-row{display:flex;gap:10px}
.fg-row .fg{flex:1}
.color-input-row{display:flex;align-items:center;gap:10px}
.color-input-row input[type=color]{width:44px;height:36px;padding:2px;border-radius:6px;cursor:pointer;flex-shrink:0}
.color-input-row input[type=text]{flex:1}

/* Taxonomy editor */
.tax-editor{display:flex;flex-direction:column;gap:6px}
.tax-editor-row{display:flex;gap:6px;align-items:center}
.tax-editor-row input{flex:1;padding:8px 12px;background:rgba(0,0,0,0.25);border:1px solid var(--border);
  border-radius:7px;font-size:12px;color:var(--text);font-family:var(--font-mono);outline:none;transition:border-color 0.2s}
.tax-editor-row input:focus{border-color:var(--accent)}
.tax-del-btn{width:28px;height:28px;border-radius:6px;background:none;border:1px solid rgba(231,76,60,0.2);
  cursor:pointer;color:var(--danger);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.1s}
.tax-del-btn:hover{background:rgba(231,76,60,0.15)}
.tax-del-btn .material-icons-round{font-size:14px}
.tax-add-btn{padding:7px 14px;border-radius:7px;background:var(--surface);border:1px dashed var(--border-2);
  color:var(--text-dim);font-family:var(--font-body);font-size:12px;cursor:pointer;transition:all 0.2s;
  display:flex;align-items:center;gap:5px;align-self:flex-start}
.tax-add-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--accent)}
.tax-add-btn .material-icons-round{font-size:15px}

/* v4 flexible section editor */
.sections-editor{display:flex;flex-direction:column;gap:12px}
.section-editor-card{border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,0.18);overflow:hidden}
.section-editor-head{display:flex;gap:8px;align-items:center;padding:10px;background:rgba(255,255,255,0.04);border-bottom:1px solid var(--border)}
.section-editor-head input{flex:1}
.section-editor-body{padding:10px;display:flex;flex-direction:column;gap:10px}
.rich-toolbar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.rich-btn{height:30px;min-width:32px;padding:0 9px;border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,0.05);color:var(--text);cursor:pointer;font-size:12px;font-family:var(--font-body)}
.rich-btn:hover{background:var(--surface-2);border-color:var(--accent)}
.rich-editor{min-height:110px;max-height:280px;overflow:auto;width:100%;padding:12px 14px;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:14px;line-height:1.6;outline:none}
.rich-editor:focus{border-color:var(--accent)}
.rich-editor ul,.rich-editor ol,.section-content ul,.section-content ol{margin:8px 0 8px 24px}
.rich-editor table,.section-content table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
.rich-editor th,.rich-editor td,.section-content th,.section-content td{border:1px solid var(--border-2);padding:6px 8px;vertical-align:top}
.rich-editor th,.section-content th{background:rgba(255,255,255,0.07);color:var(--text)}
.section-fields{display:flex;flex-direction:column;gap:6px}
.section-field-row{display:flex;gap:6px;align-items:center}
.section-field-row input{padding:8px 10px!important;font-size:12px!important}
.section-field-row .field-key{width:34%;min-width:120px}
.section-field-row .field-val{flex:1}
.section-field-delete{width:30px;height:30px;border-radius:7px;border:1px solid rgba(231,76,60,0.35);background:rgba(231,76,60,0.12);color:#ff8b81;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.section-field-delete:hover{background:rgba(231,76,60,0.25)}
.section-content{font-size:15px;line-height:1.75;color:var(--text-dim)}
.section-content p{margin-bottom:10px}
.section-field-table{display:grid;grid-template-columns:minmax(120px,220px) 1fr;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:12px}
.section-field-table div{padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px}
.section-field-table div:nth-child(odd){background:rgba(255,255,255,0.05);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--text)}
.section-field-table div:nth-child(even){color:var(--text-dim)}
.section-field-table div:nth-last-child(-n+2){border-bottom:none}

/* Aliases / tags */
.tag-input-wrap{display:flex;gap:6px}
.tag-input-wrap input{flex:1}
.tag-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tag-chip{display:flex;align-items:center;gap:4px;padding:3px 8px 3px 10px;border-radius:6px;
  font-size:11px;background:var(--surface-2);border:1px solid var(--border);font-family:var(--font-mono)}
.tag-chip button{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:0;
  display:flex;align-items:center;transition:color 0.1s}
.tag-chip button:hover{color:var(--danger)}
.tag-chip button .material-icons-round{font-size:12px}

/* Buttons */
.btn{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);border:1px solid var(--border);transition:all 0.2s}
.btn-cancel{background:var(--surface);color:var(--text)}
.btn-cancel:hover{background:var(--surface-2)}
.btn-save{background:linear-gradient(135deg,#6b1520,#a01e2e);border:none;color:#fff;
  box-shadow:0 4px 16px rgba(160,30,46,0.25)}
.btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(160,30,46,0.35)}
.btn-delete{background:rgba(231,76,60,0.1);border-color:rgba(231,76,60,0.3);color:var(--danger)}
.btn-delete:hover{background:rgba(231,76,60,0.2)}


/* Font Awesome icon picker */
.icon-picker-modal{max-width:860px}
.icon-picker-search{position:sticky;top:0;background:#0f1e38;padding-bottom:12px;z-index:2}
.icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:52vh;overflow-y:auto;padding-right:4px}
.icon-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;transition:all 0.15s;min-height:92px;text-align:center}
.icon-card:hover{transform:translateY(-2px);background:rgba(255,255,255,0.08);border-color:var(--accent);color:var(--text)}
.icon-card i{font-size:24px;color:var(--text)}
.icon-card span{font-family:var(--font-mono);font-size:10px;line-height:1.25;word-break:break-word}
.icon-picker-status{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-top:8px}

/* Toast */
.toasts{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;flex-direction:column;gap:8px}
.toast{padding:11px 16px;border-radius:10px;font-size:13px;font-weight:500;font-family:var(--font-body);
  box-shadow:0 8px 28px rgba(0,0,0,0.5);animation:toastIn 0.3s ease;display:flex;align-items:center;gap:8px}
.toast-success{background:#12281e;border:1px solid rgba(46,204,113,0.3);color:var(--success)}
.toast-error{background:#281212;border:1px solid rgba(231,76,60,0.3);color:var(--danger)}
.toast-info{background:#121828;border:1px solid rgba(74,144,217,0.3);color:var(--accent)}
.toast .material-icons-round{font-size:16px}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,0.92);display:none;
  align-items:center;justify-content:center;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:8px;object-fit:contain}
.lightbox-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,0.1);border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.lightbox-close .material-icons-round{font-size:22px}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-2)}

/* Spinner */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.2);
  border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


.codex-viewer .editor-only{display:none!important}
.user-badge{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9px;background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.1);font-size:12px;color:rgba(255,255,255,0.72);white-space:nowrap}
.user-badge .material-icons-round{font-size:16px;color:rgba(255,255,255,0.55)}
.viewer-note{font-size:11px;color:var(--text-muted);margin-top:8px;font-style:italic}



/* Mobile search/category controls */
.mobile-icon-btn{display:none;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.2);color:#fff;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}
.mobile-icon-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.mobile-icon-btn .material-icons-round{font-size:21px}

.mobile-panel-overlay{position:fixed;inset:0;z-index:275;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);display:none}
.mobile-panel-overlay.open{display:block}
.mobile-category-drawer{width:min(86vw,340px);height:100%;background:#0f1e38;border-right:1px solid var(--border-2);box-shadow:18px 0 60px rgba(0,0,0,.55);display:flex;flex-direction:column;transform:translateX(-100%);animation:drawerIn .22s ease forwards}
@keyframes drawerIn{to{transform:translateX(0)}}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.mobile-drawer-title{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:1px;color:#fff}
.mobile-drawer-sub{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-top:2px}
.mobile-drawer-body{flex:1;overflow:auto;padding:12px}
.mobile-search-modal{max-width:520px;margin:0 14px}
.mobile-search-box{position:relative}
.mobile-search-box .material-icons-round{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:20px;color:rgba(255,255,255,.42)}
.mobile-search-box input{width:100%;padding:13px 14px 13px 44px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:16px;font-family:var(--font-body);outline:none}
.mobile-search-box input:focus{border-color:var(--accent)}
.mobile-search-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}

/* Full-screen loading SVG */
.screen-loader{position:fixed;inset:0;z-index:650;display:none;align-items:center;justify-content:center;background:rgba(5,12,26,.76);backdrop-filter:blur(9px)}
.screen-loader.open{display:flex}
.screen-loader-card{width:min(320px,calc(100vw - 40px));padding:28px 22px;border-radius:18px;background:rgba(15,30,56,.94);border:1px solid var(--border-2);box-shadow:0 30px 90px rgba(0,0,0,.65);text-align:center}
.screen-loader-svg{width:92px;height:92px;margin:0 auto 14px;display:block}
.loader-ring{fill:none;stroke-width:8;stroke-linecap:round}
.loader-ring-back{stroke:rgba(255,255,255,.08)}
.loader-ring-front{stroke:url(#loaderGradient);stroke-dasharray:84 198;transform-origin:60px 60px;animation:loaderSpin 1s linear infinite}
.loader-mark{fill:none;stroke:rgba(255,255,255,.9);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:loaderCheck 1.4s ease-in-out infinite}
.screen-loader-title{font-family:var(--font-display);font-weight:800;letter-spacing:1px;color:#fff;font-size:15px}
.screen-loader-sub{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);margin-top:6px;line-height:1.35}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderCheck{0%,35%{stroke-dashoffset:80;opacity:.35}60%,100%{stroke-dashoffset:0;opacity:1}}

@media(max-width:700px){
  :root{--sidebar:0px;--header-h:62px}
  .app-header{padding:0 10px;gap:8px}
  .hdr-emblem{width:42px;height:42px}.hdr-emblem img{width:33px;height:33px}
  .hdr-title h1{font-size:16px;letter-spacing:2.5px}
  .hdr-title p,.hdr-divider,.desktop-search{display:none}
  .mobile-icon-btn{display:flex}
  .hdr-right{gap:6px;margin-left:auto}
  .hdr-btn{padding:7px 10px;font-size:12px}
  .hdr-btn:not(.primary){display:none}
  .hdr-btn.primary{width:38px;height:38px;padding:0;justify-content:center;border-radius:10px}
  .hdr-btn.primary .material-icons-round{margin:0}.hdr-btn.primary{font-size:0}
  .entry-count-badge,.user-badge{display:none}
  .sidebar{display:none}
  .main-toolbar{padding:12px 14px}.toolbar-sub{display:block;margin-left:0;margin-top:2px}.toolbar-title{font-size:14px}
  .main-content{padding:14px}
  .entry-grid{grid-template-columns:1fr;gap:12px}
  .entry-list-item{align-items:flex-start}.list-right{display:none}
  .detail-body{grid-template-columns:1fr}
  .detail-images{border-right:none;border-bottom:1px solid var(--border)}
  .detail-header{padding:12px}.detail-header-name{font-size:15px}.detail-header-actions{gap:5px}.dhdr-btn{padding:7px 9px;font-size:12px}
  .detail-info{padding:20px}.detail-name{font-size:24px}
  .modal{max-width:calc(100vw - 22px);max-height:88vh}.fg-row{flex-direction:column;gap:0}.section-field-table{grid-template-columns:1fr}.section-field-table div:nth-child(odd){border-bottom:none}
  .toasts{left:12px;right:12px;bottom:12px}.toast{width:100%}
}

/* Stronger image lazy loading: placeholders load first, real files load near viewport. */
.lazy-img {
  background: linear-gradient(135deg, rgba(10,22,40,0.8), rgba(26,58,107,0.35));
  opacity: 0;
  transition: opacity .22s ease, filter .22s ease;
  filter: blur(3px);
}
.lazy-img.is-loaded {
  opacity: 1;
  filter: none;
}

#mobileSearchForm { width: 100%; }
.desktop-search { margin: 0; }

/* Visibility controls / editor-only hidden-entry states */
.visibility-options{
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(0,0,0,0.16);
}
.toggle-row{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:7px 0;
  cursor:pointer;
  color:var(--text-dim) !important;
  font-size:13px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-family:var(--font-body) !important;
}
.toggle-row input{
  width:18px !important;
  height:18px;
  accent-color:var(--accent);
  flex-shrink:0;
}
.field-hint{
  margin-top:4px;
  font-size:11px;
  color:var(--text-muted);
  font-style:italic;
}
.visibility-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:5px;
  font-family:var(--font-mono);
  white-space:nowrap;
}
.visibility-mini.muted{
  background:rgba(90,109,138,.14);
  color:var(--text-muted);
  border:1px solid rgba(90,109,138,.22);
}
.visibility-mini.hidden-entry{
  background:rgba(231,76,60,.13);
  color:var(--danger);
  border:1px solid rgba(231,76,60,.26);
}
.card-visibility-row{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.entry-card-hidden{
  border-color:rgba(231,76,60,.22);
  box-shadow:inset 0 0 0 1px rgba(231,76,60,.08);
}
.entry-card-hidden .card-img,
.entry-card-hidden .card-img-placeholder,
.entry-card-hidden .list-thumb,
.entry-card-hidden .list-thumb-ph{
  opacity:.55;
  filter:grayscale(.35);
}
.danger-hidden-preview{
  opacity:.72;
  padding:8px 10px;
  border:1px dashed rgba(90,109,138,.35);
  border-radius:8px;
}

/* JSON-backed custom statuses */
.st-investigating{background:rgba(74,144,217,0.15);color:var(--accent)}
.st-classified{background:rgba(201,168,76,0.16);color:var(--gold)}
.st-archived{background:rgba(90,109,138,0.15);color:var(--text-muted)}
.st-custom{background:rgba(255,255,255,0.10);color:var(--text-dim)}
.field-hint code{font-family:var(--font-mono);font-size:10px;color:var(--gold)}

/* Status dropdown editor tools */
.status-select-row{display:flex;gap:8px;align-items:center}
.status-select-row select{flex:1}
.status-plug-btn{height:38px;width:42px;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.18s;flex-shrink:0}
.status-plug-btn:hover{background:var(--surface-2);border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px var(--accent-glow)}
.status-plug-btn .material-icons-round{font-size:20px}