/* Story Parts App Theme - clean, modern, responsive */
:root{
  --bg:#0b0f14;
  --panel:#121824;
  --muted:#8aa0b3;
  --text:#e6eef6;
  --brand:#6cc3ff;
  --brand-2:#8ef0c5;
  --danger:#ff6b6b;
  --success:#59d98c;
  --border:#243246;
  --card:#0f141e;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --gap:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 800px at 20% -10%, rgba(108,195,255,.12), transparent 60%), radial-gradient(1000px 700px at 120% 10%, rgba(142,240,197,.10), transparent 60%), linear-gradient(180deg, #0b0f14, #0b0f14 60%);
}
.app{
  max-width:1100px; margin: 32px auto; padding: 0 20px;
}
/* Top navigation */
.nav{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); background: linear-gradient(180deg, #121824, #0f1520); border-radius: var(--radius); box-shadow: var(--shadow);
}
.nav .title{ font-weight:700; letter-spacing:.4px; margin-right:auto; display:flex; align-items:center; gap:10px}
.badge{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#07131c; font-weight:800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3)}
.nav a{ color:var(--text); text-decoration:none; padding:8px 10px; border-radius:8px; border:1px solid transparent}
.nav a:hover{ border-color:var(--border); background:#0c131e }
.nav .hello{ color:var(--muted); margin-left:6px; }
.hr{ height:12px }
/* Page headers */
.page h1, .page h2{ margin: 18px 4px; }
.page h1{ font-size:28px }
.page h2{ font-size:22px; color:#d7e7f5 }
/* Panels and cards */
.panel, .card{
  border:1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #101723, #0c121c); box-shadow: var(--shadow);
}
.panel{ padding: 18px }
.card{ padding: 14px; margin: 10px 0 }
.part.card{ border:1px solid #1e2a3b }
/* Layout */
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px }
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr } }
/* Forms */
form{ max-width: 720px }
label{ display:block; font-size:13px; color: var(--muted); margin: 12px 4px 6px }
input, textarea, select{
  width:100%; padding:12px 12px; background:#0a111a; color:var(--text); border:1px solid #1d2838; border-radius: 10px; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.02)
}
input:focus, textarea:focus, select:focus{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(108,195,255,.15) }
/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius: 10px; border:1px solid #1e2a3b; background: linear-gradient(180deg, #172233, #0f1624); color: var(--text); cursor:pointer; text-decoration:none; box-shadow: var(--shadow) }
.btn:hover{ filter: brightness(1.06) }
.btn.primary{ border-color: #2a86c7; background: linear-gradient(180deg, #1a4871, #143653) }
.btn.danger{ border-color: #5a2222; background: linear-gradient(180deg, #612929, #3a1a1a) }
/* Tables */
table{ width:100%; border-collapse: collapse; overflow:hidden; border-radius: 12px; border:1px solid var(--border); background: linear-gradient(180deg, #0f1624, #0c121c); box-shadow: var(--shadow) }
th, td{ padding:12px 14px; border-bottom:1px solid #1a2333 }
th{ text-align:left; color:#bcd1e4; background: #0f1a29 }
tr:last-child td{ border-bottom:0 }
/* Helpers */
.error{ color: var(--danger); font-weight:600 }
.success{ color: var(--success); font-weight:600 }
.m-0{ margin:0 }
.mt-2{ margin-top:12px }
.mb-2{ margin-bottom:12px }
.space-between{ display:flex; justify-content:space-between; align-items:center }
.small{ font-size:12px; color: var(--muted) }
/* Reader links list */
ul.links{ list-style: none; padding:0; margin: 6px 0 }
ul.links li{ margin: 8px 0 }
ul.links a{ text-decoration:none; color: var(--brand); }
ul.links a:hover{ text-decoration: underline }
/* Part list */
ul.part-list{ list-style: none; padding-left: 6px }
ul.part-list li{ margin: 6px 0 }
ul.part-list a{ color: var(--text); text-decoration:none; padding:6px 8px; border-radius:8px }
ul.part-list a:hover{ background:#0d1522 }
/* Folder Tree view */
ul.folder-tree{ list-style:none; margin:0; padding-left: 16px; position:relative }
ul.folder-tree .folder-node{ margin:6px 0 6px 0; position:relative }
ul.folder-tree .folder-node::before{ content:''; position:absolute; left:-12px; top:0; bottom:-6px; width:1px; background: linear-gradient(#274055,#274055) no-repeat; background-size:1px 100%; opacity:.8 }
ul.folder-tree .folder-node:last-child::before{ bottom:0 }
.folder-tree .icon{ margin-right:6px; opacity:.9 }
.folder-link{ color: var(--text); text-decoration:none; padding:4px 6px; border-radius:6px }
.folder-link:hover{ background:#0d1522 }
.folder-link.sel{ font-weight:700; background:#0d1522 }
/* Collapsed folders */
.folder-node.collapsed > ul.children{ display:none }
.folder-node .toggle{ width:16px; height:16px; border:1px solid var(--border); border-radius:4px; margin-right:6px; background: linear-gradient(180deg,#102030,#0b1420); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.folder-node .toggle::after{ content:'+'; font-weight:700; line-height:1; font-size:12px }
.folder-node:not(.collapsed) .toggle::after{ content:'–' }
/* Modals */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.55); z-index:1000 }
.modal.open{ display:flex }
.modal .dialog{ width:min(800px, 95vw); max-height:85vh; overflow:auto; border:1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, #101723, #0c121c); box-shadow: var(--shadow); padding:18px }
.modal .dialog .header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.modal .dialog .close{ cursor:pointer; border:0; background:transparent; color:var(--muted); font-size:22px; line-height:1 }
/* Footer spacing */
.footer-space{ height:24px }