:root { --ink:#ece7dd; --muted:#9a978f; --line:#302f2d; --paper:#1c1d1c; --panel:#242523; --accent:#d5ff57; --orange:#ff9d5a; --red:#ff7770; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; background:#141514; color:var(--ink); font-family:Outfit, sans-serif; min-height:100vh; }
button,input,textarea { font:inherit; } button { cursor:pointer; }
.app-shell { display:grid; grid-template-columns:280px 1fr; min-height:100vh; }.sidebar { border-right:1px solid var(--line); background:#191a19; padding:30px 18px; display:flex; flex-direction:column; overflow:auto; }
.brand { display:flex; align-items:center; gap:10px; line-height:.9; letter-spacing:1.5px; font-weight:700; font-size:14px; }.brand-mark { color:var(--accent); font-size:25px; }.new-chapter,.add-entry { border:1px solid var(--accent); background:var(--accent); color:#17200b; border-radius:6px; padding:11px 14px; font-weight:700; margin:22px 0 30px; text-align:left; }.new-chapter:hover,.add-entry:hover { background:#e1ff87; }
.section-tabs { display:grid; gap:4px; margin-top:30px; padding-bottom:22px; border-bottom:1px solid var(--line); }.section-tab { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 11px; border:0; border-radius:5px; background:transparent; color:#92938c; font-weight:600; text-align:left; }.section-tab:hover { background:#252624; color:var(--ink); }.section-tab.active { background:#2a2c27; color:var(--ink); box-shadow:inset 2px 0 var(--accent); }.section-tab span { display:inline-flex; min-width:22px; justify-content:center; padding:2px 6px; border-radius:10px; background:#1d1e1c; color:#777972; font:10px "DM Mono"; }.section-tab.active span { color:var(--accent); }
.sidebar-label,.eyebrow { color:var(--muted); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:1.4px; margin:0 0 9px; }.chapter-list { display:grid; gap:4px; }.chapter { width:100%; display:flex; gap:10px; align-items:center; color:#bab8b1; background:transparent; border:0; border-radius:5px; text-align:left; padding:11px 9px; }.chapter:hover { background:#252624; }.chapter.active { background:#2a2c27; color:var(--ink); }.chapter-number { color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; }.chapter-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.sidebar-footer { margin-top:auto; color:#696a64; font-size:12px; line-height:1.5; }.sidebar-footer span { color:#50514d; }
.workspace { max-width:1180px; width:100%; margin:auto; padding:54px 64px; }.topbar { display:flex; justify-content:space-between; align-items:start; border-bottom:1px solid var(--line); padding-bottom:29px; }.topbar h1 { font-size:36px; margin:0; letter-spacing:-1px; }.chapter-actions { display:flex; gap:8px; }.icon-button { border:1px solid var(--line); border-radius:5px; background:transparent; color:#aaa9a1; width:36px; height:36px; font-size:17px; }.icon-button:hover { color:var(--ink); border-color:#686963; }.icon-button.danger:hover { color:var(--red); border-color:var(--red); }
.tabs { display:flex; border-bottom:1px solid var(--line); gap:28px; }.tab { position:relative; border:0; background:transparent; padding:20px 1px 16px; color:var(--muted); font-weight:600; }.tab span { display:inline-flex; margin-left:5px; min-width:18px; justify-content:center; padding:1px 5px; background:#292a28; border-radius:9px; color:#9c9d96; font:10px "DM Mono"; }.tab.active { color:var(--ink); }.tab.active:after { content:""; height:2px; left:0; right:0; bottom:-1px; background:var(--accent); position:absolute; }
.content-area { padding-top:50px; }.topic-heading { display:flex; justify-content:space-between; align-items:start; gap:30px; }.topic-heading h2 { font-size:26px; margin:0 0 7px; }.topic-heading p:not(.eyebrow) { color:var(--muted); margin:0; max-width:530px; }.add-entry { margin:0; white-space:nowrap; }.entry-list { margin-top:30px; display:grid; gap:12px; }.entry { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px 22px; transition:border .15s; }.entry:hover { border-color:#5a5a52; }.entry-top { display:flex; align-items:start; justify-content:space-between; gap:15px; }.entry h3 { font-size:17px; margin:0; }.entry p { white-space:pre-wrap; color:#bfbbb2; line-height:1.55; margin:11px 0 0; }.tag { display:inline-block; color:#b9d94c; border:1px solid #53632b; border-radius:20px; padding:3px 8px; font:10px "DM Mono"; }.entry-buttons { display:flex; gap:7px; }.entry-buttons button { background:transparent; color:#898a83; border:0; padding:0 3px; font-size:15px; }.entry-buttons button:hover { color:var(--ink); }.entry-buttons .remove:hover { color:var(--red); }.empty-state { text-align:center; padding:90px 0; color:var(--muted); }.empty-state div { font-size:28px; color:var(--accent); }.empty-state h3 { color:var(--ink); margin:14px 0 4px; }
dialog { color:var(--ink); border:1px solid #444641; background:#212220; border-radius:10px; padding:0; max-width:680px; max-height:calc(100vh - 32px); width:calc(100% - 32px); overflow:auto; box-shadow:0 20px 70px #0009; } dialog::backdrop { background:#0009; } dialog form { padding:26px; }.dialog-heading { display:flex; justify-content:space-between; }.dialog-heading h2 { margin:0 0 25px; }.close { background:transparent; color:#aaa; border:0; font-size:27px; line-height:20px; } label { color:#c7c6be; display:grid; gap:7px; font-size:13px; margin:15px 0; } input,textarea { border:1px solid #444640; background:#171817; border-radius:5px; color:var(--ink); padding:10px; outline:0; } input:focus,textarea:focus { border-color:#a7cf3c; }.dialog-actions { display:flex; justify-content:end; gap:10px; margin-top:23px; }.primary,.secondary { border-radius:5px; padding:9px 13px; font-weight:600; }.primary { border:1px solid var(--accent); background:var(--accent); color:#17200b; }.secondary { color:#bab9b2; border:1px solid #51534d; background:transparent; }
.entry-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:18px 0 0; }.entry-fields div { padding:9px 11px; border:1px solid var(--line); border-radius:5px; background:#171817; }.entry-fields dt { color:#777972; font:9px "DM Mono"; letter-spacing:1px; text-transform:uppercase; }.entry-fields dd { margin:4px 0 0; color:var(--ink); font-size:14px; }
.property-editor { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }.property-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }.property-editor-heading span { display:block; color:#c7c6be; font-size:13px; }.property-editor-heading small { display:block; margin-top:3px; color:#74766f; }.property-editor-heading button { border:1px solid #51534d; border-radius:5px; padding:7px 9px; background:transparent; color:#c7c6be; }.property-editor-heading button:hover { border-color:var(--accent); color:var(--accent); }.property-list { display:grid; gap:8px; margin-top:13px; }.property-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; gap:8px; align-items:center; }.property-row>span { color:#666860; }.property-row button { border:0; background:transparent; color:#898a83; font-size:20px; }.property-row button:hover { color:var(--red); }
.data-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:24px 0; padding-top:20px; border-top:1px solid var(--line); }.data-actions button { padding:8px; border:1px solid var(--line); border-radius:5px; background:transparent; color:#85877f; font-size:11px; }.data-actions button:hover { border-color:#62645d; color:var(--ink); }.data-actions button:last-of-type { grid-column:1 / -1; }
.catalog-tools { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:10px; margin-top:28px; }.catalog-tools input,.catalog-tools select,.advanced-grid select,.relation-picker select { border:1px solid var(--line); background:#191a19; color:var(--ink); border-radius:5px; padding:10px 12px; outline:0; }.catalog-tools input:focus,.catalog-tools select:focus,.advanced-grid select:focus,.relation-picker select:focus { border-color:#a7cf3c; }
.entry-title-line { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }.entry-image { width:100%; max-height:260px; object-fit:cover; margin:-20px -22px 18px; width:calc(100% + 44px); border-radius:8px 8px 0 0; border-bottom:1px solid var(--line); }.status { display:inline-flex; align-items:center; width:max-content; padding:3px 7px; border-radius:12px; background:#30312e; color:#aaa; font:9px "DM Mono"; text-transform:uppercase; }.status--idea { color:#b8b9b2; }.status--designing { color:#8fc9ff; background:#1d3447; }.status--review { color:#ffc782; background:#46321e; }.status--approved { color:#c9e968; background:#303d1b; }.status--implemented { color:#77e0ad; background:#193b2a; }.status--discarded { color:#8b8c86; text-decoration:line-through; }.entry-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }.entry-links span { padding:5px 8px; border-radius:4px; background:#262725; color:#92948c; font-size:11px; }
.advanced-editor { margin-top:20px; padding-top:4px; }.advanced-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }.advanced-grid label:last-child { grid-column:1 / -1; }.link-editor { display:grid; gap:10px; margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:6px; background:#1b1c1a; }.link-editor>div:first-child>span { display:block; color:#c7c6be; font-size:13px; }.link-editor small { display:block; margin-top:3px; color:#74766f; }.chapter-link-list { display:flex; flex-wrap:wrap; gap:7px; }.chapter-link-list label { display:flex; grid-template-columns:none; align-items:center; gap:6px; margin:0; padding:6px 8px; border:1px solid var(--line); border-radius:4px; background:#171817; font-size:11px; }.chapter-link-list input { width:auto; margin:0; padding:0; accent-color:var(--accent); }.relation-picker { display:grid; grid-template-columns:1fr auto; gap:8px; }.relation-picker button { padding:0 12px; border:1px solid #51534d; border-radius:5px; background:transparent; color:#c7c6be; }.relation-picker button:hover { border-color:var(--accent); color:var(--accent); }.relation-list { display:flex; flex-wrap:wrap; gap:6px; }.relation-list>span { display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:4px; background:#30322d; color:#bdc0b6; font-size:11px; }.relation-list button { border:0; background:transparent; color:#888; padding:0; }.relation-list button:hover { color:var(--red); }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.metric { display:grid; gap:7px; min-height:130px; align-content:end; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }.metric span { font-size:34px; font-weight:700; }.metric small { color:var(--muted); }.metric--accent { border-color:#53632b; background:linear-gradient(145deg,#252a1c,#1c1d1c); }.metric--accent span { color:var(--accent); }.dashboard-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }.dashboard-panel { padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.panel-heading h3 { margin:0; font-size:16px; }.panel-heading>span { color:var(--accent); font:11px "DM Mono"; }.dashboard-categories { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.dashboard-category,.attention-item { border:1px solid var(--line); border-radius:5px; background:#191a19; color:var(--ink); text-align:left; }.dashboard-category { display:flex; align-items:center; gap:10px; padding:10px; }.dashboard-category span { display:grid; place-items:center; width:28px; aspect-ratio:1; border-radius:50%; background:#2c2e29; color:var(--accent); font:11px "DM Mono"; }.attention-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; width:100%; padding:9px; margin-top:6px; }.attention-item small { color:var(--muted); }.dashboard-category:hover,.attention-item:hover { border-color:#5a5c54; }.panel-empty { color:var(--muted); font-size:13px; }.balance-empty { padding:40px; text-align:center; }.balance-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; }.balance-table { width:100%; border-collapse:collapse; background:var(--paper); }.balance-table th,.balance-table td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.balance-table th { color:#797b74; font:10px "DM Mono"; text-transform:uppercase; }.balance-table tbody tr { cursor:pointer; }.balance-table tbody tr:hover { background:#252624; }.balance-field { display:inline-flex; margin:0 5px 5px 0; padding:3px 6px; border-radius:4px; background:#2a2b28; color:#aaa; font-size:10px; }
.research-tree { margin-top:28px; padding:20px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }.research-tree-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }.research-tree-heading h3 { margin:0; }.research-tree-heading>span { color:var(--muted); font-size:12px; }.research-tree ul { list-style:none; margin:0; padding-left:22px; position:relative; }.research-tree ul ul { margin-left:8px; border-left:1px solid #454840; }.research-tree li { position:relative; padding:4px 0 4px 14px; }.research-tree li::before { content:""; position:absolute; left:0; top:20px; width:13px; border-top:1px solid #454840; }.research-root { padding-left:0 !important; }.research-root>li { padding-left:0; }.research-root>li::before { display:none; }.research-tree button { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:5px; background:#191a19; color:var(--ink); }.research-tree button:hover { border-color:var(--accent); }.research-tree button .status { width:7px; height:7px; padding:0; }
.chapter-row { display:flex; align-items:center; border-radius:5px; }.chapter-row:hover { background:#252624; }.chapter-row.active { background:#2a2c27; }.chapter { min-width:0; }.order-buttons { display:flex; padding-right:6px; }.order-buttons button { background:transparent; color:#898a83; border:0; padding:0 3px; font-size:15px; }.order-buttons button:hover { color:var(--ink); }.order-buttons button:disabled,.entry-buttons button:disabled { color:#4f504b; cursor:default; }.entry-buttons button:hover { color:var(--ink); }
@media (max-width:900px) { .dashboard-grid { grid-template-columns:1fr 1fr; }.dashboard-columns { grid-template-columns:1fr; } }
@media (max-width:720px) { .app-shell { grid-template-columns:1fr; }.sidebar { padding:18px; border-right:0; border-bottom:1px solid var(--line); }.section-tabs { grid-template-columns:repeat(11,max-content); overflow:auto; padding-bottom:14px; }.section-tab { width:auto; }.data-actions { grid-template-columns:repeat(3,1fr); }.data-actions button:last-of-type { grid-column:auto; }.new-chapter { margin:20px 0; }.sidebar-footer { display:none; }.workspace { padding:30px 22px; }.topbar h1 { font-size:28px; }.content-area { padding-top:32px; }.topic-heading { display:block; }.add-entry { margin-top:22px; }.tabs { gap:16px; overflow:auto; }.tab { font-size:14px; }.catalog-tools { grid-template-columns:1fr; }.advanced-grid { grid-template-columns:1fr; }.advanced-grid label:last-child { grid-column:auto; } }
@media (max-width:520px) { .property-row { grid-template-columns:minmax(0,1fr) auto; }.property-row>span { display:none; }.property-row input:first-child { grid-column:1 / -1; }.dashboard-grid { grid-template-columns:1fr; }.dashboard-categories { grid-template-columns:1fr; }.attention-item { grid-template-columns:1fr; }.research-tree-heading { display:block; }.research-tree-heading>span { display:block; margin-top:6px; } }
.app-shell.is-locked { visibility:hidden; pointer-events:none; }
.lock-screen { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:#0d1218; }
.lock-screen[hidden] { display:none; }
.lock-card { width:min(420px,100%); padding:32px; border:1px solid #333a3d; border-radius:12px; background:#171d22; box-shadow:0 24px 80px #000b; }
.lock-card .brand { margin-bottom:42px; }
.lock-card h1 { margin:0 0 10px; font-size:28px; }
.lock-card>p:not(.eyebrow) { color:var(--muted); line-height:1.5; margin:0 0 20px; }
.lock-card form { display:grid; gap:4px; }
.lock-card label { margin:10px 0; }
.lock-submit { width:100%; margin-top:10px; }
.lock-warning { color:#d9b96b; font-size:12px; line-height:1.45; margin:8px 0 4px; }
.form-error { color:#ff8b7c; font-size:13px; line-height:1.4; margin:6px 0 0; }
.sidebar-footer.error { color:var(--red); }