:root { --bg: #f4f3ef; --surface: #ffffff; --border: #e3e1da; --border-strong: #cfcdc5; --text: #26251f; --text-secondary: #6f6d64; --text-muted: #9c9a90; --accent: #185fa5; --accent-bg: #e6f1fb; --success: #0f6e56; --success-bg: #e1f5ee; --warning: #854f0b; --warning-bg: #faeeda; --danger: #a32d2d; --danger-bg: #fcebeb; --radius: 8px; } /* Dark theme: override the content palette. The sidebar is already dark. The active theme is set as data-theme on (see base.html); 'system' is resolved to light/dark there, so only this one selector is needed. */ :root[data-theme="dark"] { --bg: #14171b; --surface: #21252b; --border: #363b42; --border-strong: #474d55; --text: #e6e8ea; --text-secondary: #a9adb3; --text-muted: #7b8087; --accent: #4a9eea; --accent-bg: #17324e; --success: #3fbf9e; --success-bg: #123029; --warning: #d9a24a; --warning-bg: #3a2e18; --danger: #e57373; --danger-bg: #3a1f1f; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); } .app-layout { display: flex; align-items: stretch; min-height: 100vh; } .sidebar { flex: 0 0 232px; width: 232px; background: linear-gradient(180deg, #16233a 0%, #121c2e 100%); color: #aeb8c8; display: flex; flex-direction: column; padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 20px; text-decoration: none; } .brand-logo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2bb3a3, #1f8f9c); box-shadow: 0 4px 12px rgba(43, 179, 163, 0.30); } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-title { font-weight: 700; font-size: 17px; color: #fff; letter-spacing: 0.2px; } .brand-sub { font-size: 11.5px; color: #7c8aa0; } .sidenav { display: flex; flex-direction: column; gap: 3px; } .sidenav a, .sidenav-bottom a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #aab4c4; text-decoration: none; font-size: 14px; font-weight: 500; } .sidenav a:hover, .sidenav-bottom a:hover { background: rgba(255, 255, 255, 0.06); color: #eef2f7; } .sidenav a.active, .sidenav-bottom a.active { background: linear-gradient(135deg, #2b7a76 0%, #206a6a 100%); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(32, 106, 106, 0.35); } .sidenav a .ic, .sidenav-bottom a .ic { flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; } .sidenav a .ic svg, .sidenav-bottom a .ic svg { width: 20px; height: 20px; display: block; } .sidenav-bottom { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 10px; } .page { flex: 1 1 auto; min-width: 0; max-width: 1100px; margin: 0 auto; padding: 24px; width: 100%; box-sizing: border-box; } @media (max-width: 720px) { .app-layout { flex-direction: column; } .sidebar { flex-basis: auto; width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; gap: 2px; border-right: none; border-bottom: 1px solid var(--border); } .brand { padding: 4px 8px; } .sidenav { flex-direction: row; flex-wrap: wrap; } .sidenav a, .sidenav-bottom a { border-left: none; padding: 6px 10px; } .sidenav-bottom { margin-top: 0; border-top: none; padding-top: 0; } } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; } .page-head .sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; } .card h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; } .rows { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .row:last-child { border-bottom: none; } .row .grow { flex: 1; min-width: 0; } .row a.title { color: var(--text); font-weight: 500; text-decoration: none; } .row a.title:hover { color: var(--accent); } .row .meta { font-size: 12.5px; color: var(--text-secondary); } .badge { display: inline-block; font-size: 12px; padding: 1px 10px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; } .badge.neutral { background: var(--bg); color: var(--text-secondary); border-color: var(--border); } .badge.accent { background: var(--accent-bg); color: var(--accent); } .badge.success { background: var(--success-bg); color: var(--success); } .badge.warning { background: var(--warning-bg); color: var(--warning); } .badge.danger { background: var(--danger-bg); color: var(--danger); } button, .btn { font: inherit; font-size: 13.5px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; } button:hover, .btn:hover { background: var(--bg); } button:disabled { opacity: 0.5; cursor: default; } button.primary { background: var(--accent); border-color: var(--accent); color: #fff; } button.primary:hover { background: #144e88; } button.small { font-size: 12.5px; padding: 3px 10px; } /* Content links (file names, etc.). Use the accent colour and keep :visited the same so links stay readable — the browser default purple is unreadable on the dark theme. Wrapped in :where() for zero specificity so any component that sets its own link colour (sidenav, .btn) always wins, in every state. */ :where(a):where(:link, :visited) { color: var(--accent); } input[type="text"], select, textarea { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); width: 100%; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; } .field label { display: block; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; } .error-box { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; margin: 8px 0; } .info-box { background: var(--accent-bg); color: var(--accent); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; margin: 8px 0; } .muted { color: var(--text-muted); font-size: 13px; } .hidden { display: none; } /* Editor */ .editor-layout { display: flex; align-items: start; } .editor-layout > .card:first-child { flex: 1 1 auto; min-width: 0; } .editor-gutter { flex: 0 0 12px; align-self: stretch; cursor: col-resize; position: relative; } .editor-gutter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: var(--border); border-radius: 1px; } .editor-gutter:hover::before { background: var(--accent); } .ref-card { flex: 0 0 300px; } @media (max-width: 900px) { .editor-layout { flex-direction: column; } .editor-gutter { display: none; } .ref-card { flex-basis: auto; width: 100%; margin-top: 16px; } } .seg-table { width: 100%; border-collapse: collapse; } .seg-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } .seg-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13.5px; } .seg-table tr:last-child td { border-bottom: none; } .seg-table tr.seg-row { cursor: pointer; } .seg-table tr.seg-row:hover { background: var(--bg); } .seg-table tr.seg-row.active { background: var(--accent-bg); } .seg-status { font-size: 12px; white-space: nowrap; } .tag-chip { display: inline-block; font-family: Consolas, monospace; font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; color: var(--text-secondary); } .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: flex-start; justify-content: center; padding: 56px 16px; z-index: 60; overflow: auto; } .modal-overlay[hidden] { display: none; } .modal-panel { background: var(--surface); border-radius: 12px; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22); width: 100%; max-width: 900px; padding: 18px 22px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .modal-head h2 { margin: 0; } .modal-close { width: auto; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 6px; } .modal-close:hover { color: var(--text); } .suggestion-block { border-bottom: 1px solid var(--border); padding: 10px 0; } .suggestion-block:last-child { border-bottom: none; } .suggestion-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .suggestion-text { font-size: 13.5px; margin: 4px 0 8px; white-space: pre-wrap; } .suggestion-note { font-size: 12px; color: var(--text-muted); margin: 0 0 6px; } .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } .preview-pane { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .preview-pane .pane-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding: 6px 12px; border-bottom: 1px solid var(--border); } .preview-pane iframe { width: 100%; height: 320px; border: none; background: #fff; } .toolbar { display: flex; gap: 8px; flex-wrap: wrap; } /* Kebab (⋯) dropdown for row actions. */ .kebab { position: relative; display: inline-block; } .kebab-btn { width: auto; padding: 2px 10px; font-size: 18px; line-height: 1; color: var(--text-secondary); } /* Fixed so it escapes the `.rows` overflow:hidden; JS sets top/left from the button's rect. */ .kebab-menu { position: fixed; z-index: 60; min-width: 170px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: 4px; } .kebab-menu[hidden] { display: none; } .kebab-menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 7px 12px; border-radius: 5px; font-size: 13px; color: var(--text); cursor: pointer; } .kebab-menu button:hover { background: var(--accent-bg); } .dropzone { border: 2px dashed var(--border-strong); border-radius: 12px; padding: 24px; text-align: center; color: var(--text-secondary); font-size: 14px; background: var(--surface); margin-bottom: 16px; transition: border-color 0.15s, background 0.15s; } .dropzone.drag { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }