/* ===================================================================== refs-db · design system Adapted from the dimension design pack. Two themes (dark / light) switched via the data-theme attribute on . The cooldown color tiers preserve the locked hex values from the original product spec. ===================================================================== */ /* ---------- fonts (self-hosted; no external CDN) ---------- */ @font-face{ font-family: 'Inter'; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); } @font-face{ font-family: 'Inter'; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); } @font-face{ font-family: 'Inter'; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); } @font-face{ font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face{ font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2"); } /* ---------- tokens — dark theme is the default ---------- */ :root{ --bg: #0a0a0a; --surface: #171717; --surface-2: #1c1c1c; --elevated: #212121; --border-sub: #262626; --border: #2e2e2e; --border-act: #404040; --text-1: #fafafa; --text-2: #a3a3a3; --text-3: #737373; --text-4: #525252; --accent: #8b85d6; --accent-soft: rgba(139,133,214,.14); --accent-strong:#a098e8; --cd-red: #ef4444; --cd-red-bg: rgba(239,68,68,.10); --cd-org: #f97316; --cd-org-bg: rgba(249,115,22,.07); --cd-yel: #eab308; --cd-yel-bg: rgba(234,179,8,.05); --good: #4ade80; --good-bg: rgba(74,222,128,.08); --error: #ef4444; --error-bg: rgba(239,68,68,.10); --warn: #f59e0b; --warn-bg: rgba(245,158,11,.10); --info: #60a5fa; --info-bg: rgba(96,165,250,.10); --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --r-card: 6px; --r-input: 6px; --r-chip: 4px; --gap-x: 14px; --gap-y: 14px; --card-pad: 12px; } html[data-theme="light"]{ --bg: #f7f5f1; --surface: #ffffff; --surface-2: #faf8f4; --elevated: #ffffff; --border-sub: #e9e5dd; --border: #d8d3c8; --border-act: #b8b1a3; --text-1: #18171a; --text-2: #5a564f; --text-3: #807a70; --text-4: #aaa49a; --accent-soft: rgba(139,133,214,.18); --cd-red-bg: rgba(239,68,68,.08); --cd-org-bg: rgba(249,115,22,.07); --cd-yel-bg: rgba(234,179,8,.07); --good: #1f8a4a; --good-bg: rgba(34,140,76,.08); } /* ---------- base ---------- */ *{box-sizing: border-box} html, body{ margin: 0; padding: 0; background: var(--bg); color: var(--text-1); font-family: var(--font-ui); font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; } button{font-family: inherit; color: inherit;} a{color: var(--accent-strong); text-decoration: none;} a:hover{text-decoration: underline; text-underline-offset: 3px;} h1{font-size: 22px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 12px;} h2{font-size: 16px; font-weight: 600; letter-spacing: -.2px; margin: 20px 0 10px;} h3{font-size: 14px; font-weight: 600; margin: 0;} p{margin: 0 0 10px;} code{font-family: var(--font-mono); font-size: 12px; color: var(--text-2);} hr{border: 0; border-top: 1px solid var(--border-sub); margin: 16px 0;} /* ---------- top bar ---------- */ header.topbar{ position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px) saturate(120%); border-bottom: 1px solid var(--border-sub); } .wordmark{font-weight: 600; font-size: 15px; letter-spacing: -.2px; color: var(--text-1); display: flex; align-items: center; gap: 8px; text-decoration: none;} .wordmark:hover{text-decoration: none; color: var(--text-1);} .wordmark .glyph{ width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(140deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent) inset; } .wordmark .build{ color: var(--text-3); font-weight: 400; font-size: 12px; margin-left: 6px; letter-spacing: 0; font-family: var(--font-mono); } header.topbar nav{display: flex; align-items: center; gap: 4px;} header.topbar nav a{ color: var(--text-2); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 5px; text-decoration: none; } header.topbar nav a:hover{color: var(--text-1); background: var(--surface); text-decoration: none;} header.topbar .spacer{flex: 1;} header.topbar .user-info{ color: var(--text-3); font-size: 12px; font-family: var(--font-mono); padding: 0 6px; } .inline-form{display: inline; margin: 0;} .link-button, .link-button-dark{ background: none; border: none; color: var(--text-2); cursor: pointer; padding: 6px 10px; border-radius: 5px; font: inherit; font-size: 13px; } .link-button:hover, .link-button-dark:hover{color: var(--text-1); background: var(--surface);} /* theme segmented control (in top bar or settings) */ .theme-switch{ display: inline-flex; border: 1px solid var(--border-sub); border-radius: 5px; overflow: hidden; background: var(--surface); } .theme-switch button{ background: none; border: none; font: inherit; font-size: 12px; color: var(--text-2); padding: 5px 10px; cursor: pointer; border-right: 1px solid var(--border-sub); } .theme-switch button:last-child{border-right: none;} .theme-switch button.on{background: var(--accent-soft); color: var(--accent-strong);} main{padding: 14px 20px 80px; max-width: 1480px; width: 100%; margin: 0 auto;} /* ---------- buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-input); border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s; } .btn:hover{background: var(--surface-2); border-color: var(--border-act); text-decoration: none;} .btn:active{background: var(--elevated);} .btn.primary{background: var(--accent); border-color: var(--accent); color: #fff;} .btn.primary:hover{background: var(--accent-strong); border-color: var(--accent-strong); color: #fff;} .btn.ghost{background: transparent; border-color: transparent; color: var(--text-2);} .btn.ghost:hover{background: var(--surface); color: var(--text-1);} .btn.danger{background: transparent; border-color: transparent; color: var(--cd-red);} .btn.danger:hover{background: rgba(239,68,68,.08);} .btn .ic{width: 14px; height: 14px; flex: none;} .btn.sq{padding: 0; width: 30px; justify-content: center;} .btn.sm{height: 26px; padding: 0 9px; font-size: 12px;} .btn.lg{height: 36px; padding: 0 14px; font-size: 14px;} button[type=submit]:not(.btn):not(.link-button):not(.link-button-dark):not(.rm){ display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: var(--r-input); background: var(--accent); border: 1px solid var(--accent); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; } button[type=submit]:hover:not(.btn):not(.link-button):not(.link-button-dark):not(.rm){ background: var(--accent-strong); border-color: var(--accent-strong); } /* ---------- inputs ---------- */ .field{display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;} .field .lab, .lab{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } .input, input[type=text], input[type=url], input[type=password], input[type=number], input[type=date], input[type=email], select, textarea{ background: var(--surface); border: 1px solid var(--border-sub); border-radius: var(--r-input); padding: 0 11px; height: 34px; font-size: 13px; color: var(--text-1); font-family: inherit; outline: none; } textarea{ height: auto; min-height: 80px; padding: 9px 11px; line-height: 1.45; resize: vertical; } .input:focus-within, input:focus, select:focus, textarea:focus{ border-color: var(--border-act); background: var(--surface-2); } input::placeholder, textarea::placeholder{color: var(--text-3);} .input.mono{font-family: var(--font-mono); font-size: 12px; color: var(--text-2);} .hint{color: var(--text-3); font-size: 12px; line-height: 1.5;} .hint code{background: var(--surface-2); padding: 1px 5px; border-radius: 3px;} fieldset{ border: 1px solid var(--border-sub); border-radius: var(--r-input); padding: 12px 14px; margin: 0 0 16px; } legend{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; padding: 0 6px; } fieldset label{display: block; margin: 8px 0;} .stacked-form label{display: flex; flex-direction: column; gap: 6px; margin: 8px 0;} .stacked-form .checkbox-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; } .stacked-form .checkbox-grid label{ display: inline-flex; flex-direction: row; gap: 6px; align-items: center; margin: 0; } .form-actions{display: flex; gap: 10px; align-items: center; margin-top: 14px;} .form-actions a{color: var(--text-3); font-size: 13px;} kbd, .kbd{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; background: var(--surface-2); display: inline-flex; align-items: center; line-height: 1.2; } /* ---------- chips ---------- */ .chip{ display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--border-sub); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; text-decoration: none; } .chip:hover{border-color: var(--border-act); color: var(--text-1); text-decoration: none;} .chip.on{ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent-strong); } .chip.on .dot{background: var(--accent);} .chip .dot{width: 6px; height: 6px; border-radius: 50%; background: var(--text-4);} .chip input[type=checkbox]{ position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } /* ---------- tags ---------- */ .tag, .badge{ display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-chip); background: var(--surface-2); border: 1px solid var(--border-sub); color: var(--text-2); font-size: 10.5px; font-weight: 500; letter-spacing: .1px; white-space: nowrap; } .tag.type{color: var(--text-2); background: transparent;} .tag.more{color: var(--text-3); background: transparent; border-color: transparent; padding: 0 4px;} /* ---------- thumb / placeholder ---------- */ .thumb-placeholder, .thumb-ph{ background: linear-gradient(135deg, #2a2530 0%, #1a1a1f 100%); color: #3a3540; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .4px; text-transform: uppercase; position: relative; overflow: hidden; } html[data-theme="light"] .thumb-placeholder, html[data-theme="light"] .thumb-ph{ background: linear-gradient(135deg, #ecead8 0%, #d8d2c2 100%); color: #a8a190; } /* ---------- library layout ---------- */ .library-layout{ display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } .filters{ background: var(--surface); padding: 16px; border-radius: var(--r-card); border: 1px solid var(--border-sub); position: sticky; top: 70px; max-height: calc(100vh - 90px); overflow-y: auto; } .filters h2{margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--text-1); text-transform: uppercase; font-family: var(--font-mono); letter-spacing: .08em;} .filter-block{margin-bottom: 14px;} .filter-block legend{margin-bottom: 6px;} .filter-block label{display: block; margin: 5px 0; font-size: 12.5px;} .filter-block input[type=text], .filter-block input[type=url], .filter-block input[type=number], .filter-block input[type=date], .filter-block select{width: 100%; box-sizing: border-box; font-size: 12.5px;} .filter-actions{display: flex; align-items: center; gap: 10px; margin-top: 10px;} .filter-actions button{flex: 1;} .reset-link{font-size: 12px; color: var(--text-3);} .entries-header{display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px;} .entries-header h1{margin: 0;} .entries-count{color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px; margin: 0;} /* ---------- entry grid (landscape cards) ---------- */ .entry-grid{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-y) var(--gap-x); } @media (max-width: 1100px){.entry-grid{grid-template-columns: 1fr;}} .entry-card{ position: relative; display: grid; grid-template-columns: 118px 1fr; background: var(--surface); border: 1px solid var(--border-sub); border-radius: var(--r-card); overflow: hidden; transition: background .12s, border-color .12s, transform .12s; cursor: pointer; } .entry-card:hover{background: var(--surface-2); border-color: var(--border);} .entry-card:hover .entry-select{opacity: 1;} /* Whole-card click → entry detail. The title has a ::before that stretches to cover the entire card; the entry-select label sits ABOVE it via z-index so the checkbox can still be clicked independently. */ .entry-card .card-link{position: static; color: inherit; text-decoration: none;} .entry-card .card-link::before{ content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; } .entry-card .card-link:hover{text-decoration: underline; text-underline-offset: 3px;} .entry-card .entry-body, .entry-card .thumb{position: relative;} .entry-card .entry-body .cooldown-pill{position: relative; z-index: 2;} /* cooldown left bar + softer gradient on the card body */ .entry-card::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; } .entry-card.tier-red::before{background: var(--cd-red);} .entry-card.tier-orange::before{background: var(--cd-org);} .entry-card.tier-yellow::before{background: var(--cd-yel);} .entry-card.tier-red{background: linear-gradient(to right, var(--cd-red-bg), transparent 60%), var(--surface);} .entry-card.tier-orange{background: linear-gradient(to right, var(--cd-org-bg), transparent 60%), var(--surface);} .entry-card.tier-yellow{background: linear-gradient(to right, var(--cd-yel-bg), transparent 60%), var(--surface);} .entry-select{ position: absolute; top: 8px; left: 9px; background: rgba(0,0,0,.45); border-radius: 3px; padding: 2px; z-index: 3; opacity: 0; transition: opacity .12s; } .entry-select input{margin: 0; vertical-align: middle; cursor: pointer;} /* Persistent visible state when the checkbox is checked, via :has() — no JS needed. Card also tints with the accent color so it reads as "selected" at a glance. */ .entry-card:has(.entry-checkbox:checked){ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 60%, transparent); } .entry-card:has(.entry-checkbox:checked) .entry-select{ opacity: 1; background: var(--accent); } .thumb{ position: relative; aspect-ratio: 9 / 16; width: 118px; background: linear-gradient(135deg, #2a2530 0%, #1a1a1f 100%); display: flex; align-items: center; justify-content: center; color: #3a3540; border-right: 1px solid var(--border-sub); overflow: hidden; } html[data-theme="light"] .thumb{background: linear-gradient(135deg, #ecead8 0%, #d8d2c2 100%); color: #a8a190;} .thumb img{width: 100%; height: 100%; object-fit: cover;} .entry-body{ padding: var(--card-pad); display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; } .entry-body .row1{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .entry-body h3{ font-size: 13px; font-weight: 600; letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .entry-body h3 a{color: var(--text-1); text-decoration: none;} .entry-body h3 a:hover{text-decoration: underline;} .entry-body .meta{ font-size: 12px; color: var(--text-2); margin: 0; } .entry-body .creator{color: var(--text-1); font-weight: 500;} .entry-body .perf{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-2); margin: 0; } .entry-body .perf .v{color: var(--text-1); font-weight: 500;} .entry-body .perf .roas-good{background: var(--good-bg); color: var(--good); padding: 1px 4px; border-radius: 3px;} .cooldown-pill{ flex: none; font-family: var(--font-mono); font-size: 10.5px; display: inline-flex; align-items: center; gap: 4px; letter-spacing: .2px; } .cooldown-pill .dot{width: 7px; height: 7px; border-radius: 50%; display: inline-block;} .tier-red .cooldown-pill{color: var(--cd-red);} .tier-red .cooldown-pill .dot{background: var(--cd-red);} .tier-orange .cooldown-pill{color: var(--cd-org);} .tier-orange .cooldown-pill .dot{background: var(--cd-org);} .tier-yellow .cooldown-pill{color: var(--cd-yel);} .tier-yellow .cooldown-pill .dot{background: transparent; border: 1px solid var(--cd-yel);} .tier-green .cooldown-pill{color: var(--text-3);} .tier-green .cooldown-pill .dot{display: none;} .empty{ background: var(--surface); padding: 40px 20px; border-radius: var(--r-card); border: 1px dashed var(--border-sub); text-align: center; color: var(--text-3); } .empty a{color: var(--accent-strong);} .pagination{ margin-top: 24px; display: flex; gap: 14px; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); } .pagination a{color: var(--accent-strong); padding: 4px 8px; border-radius: 4px;} .pagination a:hover{background: var(--surface); text-decoration: none;} .page-indicator{color: var(--text-3);} /* ---------- sticky export bar ---------- */ .export-bar{ display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; background: color-mix(in srgb, var(--accent-soft) 92%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r-input); font-size: 12.5px; color: var(--text-1); position: sticky; top: 70px; z-index: 18; backdrop-filter: blur(10px) saturate(120%); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 25%, transparent) inset, 0 8px 24px -10px rgba(0,0,0,.45); } .export-bar label.select-all-line{display: inline-flex; align-items: center; gap: 6px;} .export-bar .flex-spacer{flex: 1;} /* ---------- entry detail ---------- */ .back-link{margin-bottom: 12px; font-size: 12.5px;} .back-link a{color: var(--text-3);} .back-link a:hover{color: var(--text-1);} .entry-detail{ background: var(--surface); padding: 24px; border-radius: var(--r-card); border: 1px solid var(--border-sub); position: relative; } .entry-detail::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-top-left-radius: var(--r-card); border-bottom-left-radius: var(--r-card); } .entry-detail.tier-red::before{background: var(--cd-red);} .entry-detail.tier-orange::before{background: var(--cd-org);} .entry-detail.tier-yellow::before{background: var(--cd-yel);} .detail-layout{display: grid; grid-template-columns: 280px 1fr; gap: 28px;} .detail-thumb{ width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-card); border: 1px solid var(--border-sub); } .detail-body h1{margin: 0 0 8px;} .detail-body .meta{color: var(--text-2); font-size: 13px; margin: 0 0 16px;} .detail-body .badge{margin-left: 4px;} .detail-body section{margin: 18px 0;} .detail-body section h2{margin-top: 0;} .detail-body .links{margin: 0 0 12px;} .detail-body .links a{margin-right: 10px;} .user-fields, .perf-fields{ display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0; } .user-fields dt, .perf-fields dt{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; align-self: center; } .user-fields dd, .perf-fields dd{margin: 0; color: var(--text-1); font-size: 13px;} .perf-fields dd{font-family: var(--font-mono); font-feature-settings: "tnum";} .cooldown-line, .created-line{ color: var(--text-3); font-size: 12px; font-family: var(--font-mono); margin: 12px 0 0; } .actions{margin-top: 18px; display: flex; gap: 10px; align-items: center;} .actions .btn{text-decoration: none;} /* ---------- login ---------- */ body.login-page{ background: radial-gradient(600px 400px at 30% 20%, rgba(139,133,214,.10), transparent 60%), var(--bg); } .login-main{ max-width: 380px; margin: 8vh auto; background: var(--surface); padding: 28px 32px 32px; border-radius: 8px; border: 1px solid var(--border-sub); box-shadow: 0 18px 40px -10px rgba(0,0,0,.5); } .login-main h1{text-align: center; font-size: 20px; margin: 0 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px;} .login-main h1 .glyph{ width: 16px; height: 16px; border-radius: 3px; background: linear-gradient(140deg, var(--accent), var(--accent-strong)); } .login-main .stacked-form label{margin: 10px 0;} .login-main .form-actions{margin-top: 18px;} .login-main .form-actions button{flex: 1; justify-content: center; height: 36px;} /* ---------- flash messages ---------- */ /* Default inline style (used by the login card, where the flash sits inside the centered card with the form). */ .flash{ padding: 8px 14px; border-radius: 5px; margin-bottom: 14px; font-size: 13px; border: 1px solid transparent; } .flash-success{background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent);} .flash-error{background: var(--error-bg); color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent);} .flash-warning{background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent);} .flash-info{background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent);} /* Toast-stack style for flashes raised from any page that extends base.html. Position fixed top-right so the page layout doesn't shift when a flash appears. JS auto-dismisses after 4s; the × button dismisses early. */ .flash-stack{ position: fixed; top: 64px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: 380px; pointer-events: none; } .flash-stack .flash{ display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 10px 10px 14px; background: var(--elevated); color: var(--text-1); border: 1px solid var(--border); border-left: 3px solid var(--text-3); border-radius: 6px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); pointer-events: auto; animation: flashIn .2s ease-out; } .flash-stack .flash-success{border-left-color: var(--good);} .flash-stack .flash-error{border-left-color: var(--error);} .flash-stack .flash-warning{border-left-color: var(--warn);} .flash-stack .flash-info{border-left-color: var(--info);} .flash-stack .flash-msg{flex: 1; min-width: 0; font-size: 13px;} .flash-stack .flash-close{ background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 16px; line-height: 1; padding: 0 4px; flex: none; } .flash-stack .flash-close:hover{color: var(--text-1);} @keyframes flashIn{ from{ transform: translateY(-8px); opacity: 0; } to{ transform: none; opacity: 1; } } @media (max-width: 600px){ .flash-stack{top: 60px; right: 12px; left: 12px; max-width: none;} } /* ---------- tables (imports, export history) ---------- */ .card-section{ background: var(--surface); padding: 14px 18px; border-radius: var(--r-card); border: 1px solid var(--border-sub); margin-bottom: 18px; } .card-section h2{margin-top: 0;} .imports-table{ width: 100%; border-collapse: collapse; font-size: 13px; } .imports-table th, .imports-table td{ padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-sub); } .imports-table th{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; } .imports-table tr:last-child td{border-bottom: none;} .imports-table tr:hover td{background: var(--surface-2);} .imports-table code{font-size: 11px;} .error-count{color: var(--cd-red); font-weight: 600;} .error-list{ font-family: var(--font-mono); font-size: 11.5px; background: var(--cd-yel-bg); padding: 10px 14px; border-radius: var(--r-input); border: 1px solid color-mix(in srgb, var(--cd-yel) 40%, transparent); list-style-position: inside; } .error-list li{margin: 4px 0; color: var(--text-1);} /* ---------- export preview ---------- */ .export-preview{padding-left: 20px; font-size: 13px;} .export-preview li{margin: 6px 0; color: var(--text-2);} .export-preview .creator{color: var(--text-3); font-family: var(--font-mono); font-size: 11.5px;} /* ---------- accessibility ---------- */ .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- scrollbar polish ---------- */ ::-webkit-scrollbar{width: 10px; height: 10px;} ::-webkit-scrollbar-thumb{background: var(--border); border-radius: 5px; border: 2px solid var(--bg);} ::-webkit-scrollbar-thumb:hover{background: var(--border-act);} ::-webkit-scrollbar-track{background: transparent;} /* ===================================================================== STAGE 2: slide-over sheet, dialogs, chip widgets, tag tokenization ===================================================================== */ /* ---------- slide-over sheet (entry detail) ---------- */ body.sheet-page-body{overflow: hidden; background: var(--bg);} /* decorative blurred library backdrop behind the sheet */ .sheet-backdrop{ position: fixed; inset: 0; padding: 60px 20px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; opacity: .35; filter: blur(2px) saturate(80%); z-index: 0; pointer-events: none; } .sheet-backdrop::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52px; background: var(--bg); border-bottom: 1px solid var(--border-sub); } .bg-card{ display: grid; grid-template-columns: 108px 1fr; background: var(--surface); border: 1px solid var(--border-sub); border-radius: var(--r-card); height: 128px; overflow: hidden; position: relative; } .bg-card::before{content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;} .bg-card.tier-red::before{background: var(--cd-red);} .bg-card.tier-orange::before{background: var(--cd-org);} .bg-card.tier-yellow::before{background: var(--cd-yel);} .bg-thumb{background: linear-gradient(135deg, #2a2530 0%, #1a1a1f 100%);} html[data-theme="light"] .bg-thumb{background: linear-gradient(135deg, #ecead8, #d8d2c2);} .bg-body{padding: 10px; display: flex; flex-direction: column; gap: 6px;} .bg-line{height: 9px; background: var(--border-sub); border-radius: 3px;} .bg-line.w70{width: 70%;} .bg-line.w50{width: 50%;} /* the sheet itself */ .sheet{ position: fixed; right: 0; top: 0; bottom: 0; width: 920px; max-width: 92vw; z-index: 100; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -24px 0 60px -10px rgba(0,0,0,.6); display: flex; flex-direction: column; animation: sheetIn .22s ease-out; } @keyframes sheetIn{ from{transform: translateX(40px); opacity: 0;} to{transform: none; opacity: 1;} } .sheet-head{ display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--border-sub); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); flex: none; } .sheet-head .sheet-back{ display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; font-weight: 500; padding: 4px 8px; border-radius: 5px; text-decoration: none; } .sheet-head .sheet-back:hover{color: var(--text-1); background: var(--surface); text-decoration: none;} .sheet-head .sheet-pos{font-family: var(--font-mono); font-size: 11px; color: var(--text-3);} .sheet-head .spacer{flex: 1;} .sheet-head .sheet-x{ width: 30px; height: 30px; border-radius: 5px; color: var(--text-3); font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; text-decoration: none; } .sheet-head .sheet-x:hover{background: var(--surface); color: var(--text-1); border-color: var(--border); text-decoration: none;} .sheet-flash{margin: 12px 20px 0;} .sheet-form{display: flex; flex-direction: column; flex: 1; min-height: 0;} .sheet-body{flex: 1; overflow-y: auto; padding: 24px 28px 24px;} .sheet .detail-layout{display: grid; grid-template-columns: 280px 1fr; gap: 28px; margin-bottom: 24px;} @media (max-width: 820px){.sheet .detail-layout{grid-template-columns: 1fr;}} .media-stack{display: flex; flex-direction: column; gap: 12px;} .media-stack .detail-thumb{width: 100%; aspect-ratio: 9/16; border-radius: var(--r-card); border: 1px solid var(--border-sub); object-fit: cover;} .media-stack .field{margin: 0;} .meta-mono{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); line-height: 1.7; margin-top: 8px; } .meta-mono span{color: var(--text-2);} .form-col{display: flex; flex-direction: column; gap: 16px;} .form-col .field{margin: 0;} .field-row{display: grid; grid-template-columns: 1fr 140px 100px; gap: 12px;} @media (max-width: 820px){.field-row{grid-template-columns: 1fr;}} .title-input{font-size: 16px; font-weight: 600;} .chips-edit{display: flex; flex-wrap: wrap; gap: 6px; align-items: center;} /* perf block (detail) */ .perf-block{ border: 1px solid var(--border-sub); border-radius: var(--r-card); background: var(--surface); margin: 24px 0; overflow: hidden; } .perf-block > header{ display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-sub); font-family: var(--font-mono); font-size: 11px; color: var(--text-3); } .perf-block > header .lab{margin: 0;} .perf-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-sub); } @media (max-width: 820px){.perf-grid{grid-template-columns: repeat(2, 1fr);}} .perf-grid > div{ background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .perf-grid span{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } .perf-grid b{font-size: 16px; font-weight: 500; color: var(--text-1); letter-spacing: -.3px; font-feature-settings: "tnum";} .perf-grid b.good{color: var(--good);} .perf-block > footer{ display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border-sub); font-size: 12px; color: var(--text-2); align-items: center; } .perf-block > footer .mono{font-family: var(--font-mono); font-size: 11.5px;} /* export block (mini) */ .exp-block{ border: 1px solid var(--border-sub); border-radius: var(--r-card); background: var(--surface); margin: 24px 0; } .exp-block > header{ display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; } .exp-block > header .lab{margin: 0;} /* sheet footer */ .sheet-foot{ display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(10px); flex: none; } .sheet-foot .spacer{flex: 1;} /* ---------- chip widgets driven by hidden checkboxes ---------- */ /* Hide the actual checkbox but keep it focusable for keyboard nav. */ .chip-check{ position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; } /* :has() is supported in all modern browsers (Safari 15.4+, Chrome 105+, Firefox 121+). If a user is on an ancient browser, chips just look "off" until clicked again — clickable labels still toggle the underlying checkbox via the standard label-for relationship. */ .chip:has(.chip-check:checked){ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent-strong); } .chip:has(.chip-check:checked) .dot{background: var(--accent);} .chip:has(.chip-check:focus-visible){ outline: 2px solid var(--accent); outline-offset: 2px; } /* tag tokenization host — JS adds chip rendering on top of the underlying CSV input */ [data-tag-host]{position: relative;} .tag-chips-rendered{ display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 10px; min-height: 34px; background: var(--surface); border: 1px solid var(--border-sub); border-radius: var(--r-input); } .tag-chips-rendered:focus-within{border-color: var(--border-act); background: var(--surface-2);} .tag-chip{ display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 9px; background: var(--surface-2); border: 1px solid var(--border-sub); border-radius: var(--r-chip); font-size: 12px; color: var(--text-1); } .tag-chip .rm{ width: 16px; height: 16px; border: none; background: none; color: var(--text-4); cursor: pointer; font-size: 13px; line-height: 1; border-radius: 3px; } .tag-chip .rm:hover{background: var(--surface); color: var(--cd-red);} .tag-chip-input{ flex: 1; min-width: 120px; height: 22px; background: none; border: none; outline: none; color: var(--text-1); font: inherit; font-size: 12.5px; } .tag-chip-input::placeholder{color: var(--text-3);} [data-tag-host].js-on .tag-input{display: none;} /* ---------- styling ---------- */ .dim-dialog{ border: 1px solid var(--border); border-radius: 8px; background: var(--elevated); color: var(--text-1); padding: 0; margin: auto; width: 90%; max-width: 480px; box-shadow: 0 18px 40px -10px rgba(0,0,0,.6); } .dim-dialog::backdrop{ background: rgba(0,0,0,.55); backdrop-filter: blur(2px) saturate(110%); } html[data-theme="light"] .dim-dialog::backdrop{background: rgba(40,32,20,.32);} .dim-dialog .dialog-head{ display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-sub); } .dim-dialog .dialog-head .lab{margin: 0;} .dim-dialog .dialog-body{padding: 16px;} .dim-dialog .dialog-body fieldset{margin: 10px 0;} .dim-dialog .dialog-foot{ display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border-sub); } /* ===================================================================== STAGE 3: top-bar search, chip-rail filter, view toggle, status bar, tweaks panel, density variants, J/K nav, grid/table view ===================================================================== */ /* ---------- density variants (driven by html[data-density]) ---------- */ html[data-density="compact"]{ --gap-x: 10px; --gap-y: 10px; --card-pad: 10px; } html[data-density="spacious"]{ --gap-x: 18px; --gap-y: 18px; --card-pad: 14px; } /* ---------- top-bar search ---------- */ .topbar-search{ flex: 1; max-width: 480px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--border-sub); border-radius: var(--r-input); background: var(--surface); color: var(--text-2); font-size: 13px; } .topbar-search:focus-within{border-color: var(--border-act); background: var(--surface-2);} .topbar-search svg{width: 14px; height: 14px; color: var(--text-3); flex: none;} .topbar-search input{flex: 1; background: none; border: none; outline: none; color: var(--text-1); font: inherit; height: 100%; padding: 0;} .topbar-search input::placeholder{color: var(--text-3);} .topbar-search kbd{font-size: 10.5px;} /* ---------- filter rail (horizontal, replaces sidebar) ---------- */ .rail{ padding: 14px 0 10px; border-bottom: 1px solid var(--border-sub); background: var(--bg); position: sticky; top: 52px; z-index: 20; } /* Hide the filter-form Apply button when JS is enabled — JS auto-submits on every chip toggle, so the explicit button is redundant. */ html.js-enabled #filter-form .apply-btn{display: none;} /* ---------- settings page (narrower than the library) ---------- */ .settings-wrap{max-width: 760px; margin: 0 auto;} .settings-wrap h1{font-size: 22px; font-weight: 600; letter-spacing: -.3px; margin: 0 0 6px;} .settings-wrap .subtitle{font-size: 13px; color: var(--text-3); margin: 0 0 28px;} .settings-wrap .section{ background: var(--surface); border: 1px solid var(--border-sub); border-radius: 10px; margin-bottom: 18px; overflow: hidden; } .settings-wrap .section > header{ display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-sub); } .settings-wrap .section > header h2{ margin: 0; font-size: 14px; font-weight: 600; color: var(--text-1); letter-spacing: -.1px; } .settings-wrap .section > header .desc{font-size: 12px; color: var(--text-3);} .settings-wrap .section > .body{padding: 18px; display: flex; flex-direction: column; gap: 14px;} .settings-wrap .section > .body.gap-lg{gap: 20px;} .settings-wrap .row{ display: grid; grid-template-columns: 160px 1fr auto; gap: 16px; align-items: center; } .settings-wrap .row .lbl{ font-family: var(--font-mono); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } .settings-wrap .row .val{font-size: 13.5px; color: var(--text-1); font-family: var(--font-mono);} .settings-wrap .row .val.txt{font-family: var(--font-ui);} .settings-wrap .list-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .settings-wrap .list-head .lbl{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } .settings-wrap .list-head .meta-note{ font-family: var(--font-mono); font-size: 11px; color: var(--text-4); } /* Chip list — pill-shaped tag chips with inline count + X */ .chips-list{display: flex; flex-wrap: wrap; gap: 6px; align-items: center;} .list-chip{ display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 12px; background: var(--surface-2); border: 1px solid var(--border-sub); border-radius: 999px; font-size: 12.5px; color: var(--text-1); margin: 0; } .list-chip .count{font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4);} .list-chip .rm{ background: none; border: none; color: var(--text-4); cursor: pointer; width: 18px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 13px; padding: 0; } .list-chip .rm:hover:not([disabled]){background: var(--bg); color: var(--cd-red);} .list-chip .rm[disabled]{opacity: .35; cursor: not-allowed;} /* "+ add niche" pill — dashed border; clicking focuses the inline input. */ .chip-add{ display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; border: 1px dashed var(--border); border-radius: 999px; color: var(--text-3); background: transparent; font-size: 12.5px; cursor: text; margin: 0; } .chip-add:hover{color: var(--text-1); border-color: var(--border-act);} .chip-add input{ background: transparent; border: none; outline: none; font: inherit; font-size: 12.5px; color: var(--text-1); width: 100px; padding: 0; height: auto; margin: 0; } .chip-add input::placeholder{color: var(--text-3);} .chip-add:has(input:focus){ border-style: solid; border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: var(--accent-soft); color: var(--accent-strong); } /* Segmented control (Appearance) */ .seg{ display: inline-flex; border: 1px solid var(--border-sub); border-radius: 6px; overflow: hidden; background: var(--surface-2); } .seg button{ background: none; border: none; font: inherit; font-size: 12.5px; color: var(--text-2); padding: 6px 12px; cursor: pointer; border-right: 1px solid var(--border-sub); } .seg button:last-child{border-right: none;} .seg button.on{background: var(--accent-soft); color: var(--accent-strong);} .seg button.add{ color: var(--text-3); background: transparent; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 8px; } .seg button.add:hover{color: var(--text-1); background: var(--surface);} .seg button.add::before{content: "+"; font-size: 13px; line-height: 1; color: var(--text-3);} .seg button.add:hover::before{color: var(--accent-strong);} /* Accent picker — joined seg-style container (consistent with the Theme and Density rows above). Each cell uses the same min-width so the five color buttons render as equal-width segments centered within. */ .accent-picker{ display: inline-flex; align-items: center; border: 1px solid var(--border-sub); border-radius: 6px; background: var(--surface-2); overflow: hidden; } .accent-picker .ap{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 110px; padding: 7px 12px; font-size: 12.5px; color: var(--text-2); background: none; border: none; border-right: 1px solid var(--border-sub); cursor: pointer; font-family: inherit; } .accent-picker .ap:last-child{border-right: 1px solid transparent;} .accent-picker .ap:hover{background: var(--surface); color: var(--text-1);} .accent-picker .ap.on{background: var(--accent-soft); color: var(--accent-strong);} .accent-picker .ap .dot{ width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; flex: none; } /* Danger zone */ .danger-zone{ border: 1px solid rgba(239,68,68,.3); border-radius: 10px; padding: 18px; margin-top: 8px; background: rgba(239,68,68,.03); } .danger-zone h2{margin: 0 0 4px; font-size: 14px; color: var(--cd-red); font-weight: 600;} .danger-zone > .desc{font-size: 12px; color: var(--text-3); margin-bottom: 14px;} .danger-row{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.25); border-radius: 8px; } .danger-row b{color: var(--text-1); font-weight: 500;} .danger-row .desc{font-size: 12px; color: var(--text-3); margin-top: 2px;} /* Each .danger-row is wrapped in its own
. The .inline-form class sets display:inline, so margin-top on the form would be silently ignored. Force the danger-zone's forms to block layout and stack with a real gap between them. */ .danger-zone form{display: block; margin: 0;} .danger-zone form + form{margin-top: 16px;} /* System stats grid */ .stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-sub); border: 1px solid var(--border-sub); border-radius: 8px; overflow: hidden; } .stats-grid > div{ background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; } .stats-grid span{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } .stats-grid b{ font-size: 18px; font-weight: 500; color: var(--text-1); font-family: var(--font-mono); font-feature-settings: "tnum"; } .rail-row{display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0;} .rail-row + .rail-row{margin-top: 6px;} .rail-label{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; width: 54px; flex: none; } .rail-spacer{flex: 1;} /* "More" row popover-style chips via
*/ .chip-pop{display: inline-block;} .chip-pop > summary{list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--border-sub); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; } .chip-pop > summary::-webkit-details-marker{display: none;} .chip-pop > summary::after{ content: ""; display: inline-block; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .6; margin-left: 1px; } .chip-pop > summary:hover{border-color: var(--border-act); color: var(--text-1);} .chip-pop.active > summary{ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent-strong); } .chip-pop > .pop-body{ position: absolute; z-index: 25; margin-top: 6px; background: var(--elevated); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 180px; box-shadow: 0 12px 28px -6px rgba(0,0,0,.45); } .chip-pop > .pop-body label{display: flex; flex-direction: column; gap: 4px; margin: 0;} .chip-pop > .pop-body input, .chip-pop > .pop-body select{width: 100%; font-size: 13px;} .linklike{ font-size: 12px; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 0 4px; height: 24px; display: inline-flex; align-items: center; text-decoration: none; } .linklike:hover{color: var(--text-1); text-decoration: underline; text-underline-offset: 3px;} /* ---------- result header (sort + view toggle) ---------- */ .result-head{ display: flex; align-items: center; gap: 14px; padding: 2px 0 12px; } .result-count{font-size: 13px; color: var(--text-2); margin: 0;} .result-count b{color: var(--text-1); font-weight: 600;} .view-toggle{ display: inline-flex; align-items: center; border: 1px solid var(--border-sub); border-radius: var(--r-input); background: var(--surface); padding: 2px; height: 28px; } .view-toggle a{ background: none; border: none; color: var(--text-3); height: 22px; padding: 0 9px; border-radius: 3px; font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; } .view-toggle a:hover{color: var(--text-1); text-decoration: none;} .view-toggle a.on{background: var(--elevated); color: var(--text-1); box-shadow: 0 1px 0 rgba(0,0,0,.2);} html[data-theme="light"] .view-toggle a.on{box-shadow: 0 1px 1px rgba(0,0,0,.06);} .view-toggle .ic{width: 13px; height: 13px;} /* ---------- table view ---------- */ .table-view{ background: var(--surface); border: 1px solid var(--border-sub); border-radius: var(--r-card); overflow: hidden; } .tr{ display: grid; grid-template-columns: 28px 52px minmax(140px, 1.2fr) minmax(180px, 2.2fr) 130px 80px 90px 70px 90px 24px; align-items: center; gap: 10px; padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--border-sub); cursor: pointer; position: relative; text-decoration: none; color: inherit; } .tr:hover{background: var(--surface-2); text-decoration: none;} .tr:last-child{border-bottom: none;} .tr.head{ background: transparent; border-bottom: 1px solid var(--border); color: var(--text-3); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; height: 36px; cursor: default; } .tr.head:hover{background: transparent;} .tr.tier-red{background: linear-gradient(to right, var(--cd-red-bg), transparent 30%);} .tr.tier-orange{background: linear-gradient(to right, var(--cd-org-bg), transparent 30%);} .tr.tier-yellow{background: linear-gradient(to right, var(--cd-yel-bg), transparent 30%);} .tr .bar-cell{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 30px; border-radius: 2px; } .tr.tier-red .bar-cell{background: var(--cd-red);} .tr.tier-orange .bar-cell{background: var(--cd-org);} .tr.tier-yellow .bar-cell{background: var(--cd-yel);} .tr .checkcell{display: flex; align-items: center; justify-content: center;} .tr .checkcell input{margin: 0; cursor: pointer;} .tr .thumb-mini{ width: 50px; height: 34px; border-radius: 3px; background: linear-gradient(135deg, #2a2530, #1a1a1f); display: flex; align-items: center; justify-content: center; color: #3a3540; font-family: var(--font-mono); font-size: 8px; letter-spacing: .4px; border: 1px solid var(--border-sub); } html[data-theme="light"] .tr .thumb-mini{background: linear-gradient(135deg, #ecead8, #d8d2c2); color: #a8a190;} .tr .h{font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .tr .c{color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .tr .nicheT{display: flex; gap: 4px; flex-wrap: nowrap;} .tr .mono{font-family: var(--font-mono); font-size: 11px; color: var(--text-2);} .tr .mono.v{color: var(--text-1); font-weight: 500;} .tr .last{font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3);} .tr.tier-red .last{color: var(--cd-red);} .tr.tier-orange .last{color: var(--cd-org);} .tr.tier-yellow .last{color: var(--cd-yel);} .tr .arrow{color: var(--text-4); font-size: 14px; text-align: right;} /* ---------- status bar (bottom of library) ---------- */ .statusbar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 14px; padding: 6px 18px; background: color-mix(in srgb, var(--bg) 92%, transparent); border-top: 1px solid var(--border-sub); font-family: var(--font-mono); font-size: 11px; color: var(--text-3); backdrop-filter: blur(8px); } .statusbar .sep{color: var(--text-4);} .statusbar .legend{display: flex; align-items: center; gap: 10px; margin-left: auto;} .statusbar .legend span{display: inline-flex; align-items: center; gap: 4px;} .statusbar .legend .d{width: 7px; height: 7px; border-radius: 50%;} .statusbar .legend .d.r{background: var(--cd-red);} .statusbar .legend .d.o{background: var(--cd-org);} .statusbar .legend .d.y{background: var(--cd-yel);} .statusbar .legend .d.g{background: transparent; border: 1px solid var(--text-4);} main.has-statusbar{padding-bottom: 50px;} /* ---------- tweaks floating panel ---------- */ .tweaks-trigger{ position: fixed; right: 18px; bottom: 42px; z-index: 55; width: 34px; height: 34px; border-radius: 8px; background: var(--elevated); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -4px rgba(0,0,0,.3); } .tweaks-trigger:hover{color: var(--text-1); border-color: var(--border-act);} .tweaks-trigger.is-open{display: none;} .tweaks{ position: fixed; right: 18px; bottom: 42px; z-index: 60; width: 280px; background: var(--elevated); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 32px -8px rgba(0,0,0,.5); font-size: 12px; display: none; overflow: hidden; } html[data-theme="light"] .tweaks{box-shadow: 0 12px 32px -8px rgba(0,0,0,.15);} .tweaks.open{display: block;} .tweaks .hd{ display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-sub); font-weight: 600; font-size: 12px; color: var(--text-1); } .tweaks .hd .x{cursor: pointer; color: var(--text-3); background: none; border: none; font-size: 16px; line-height: 1; padding: 0;} .tweaks .hd .x:hover{color: var(--text-1);} .tweaks .sec{padding: 10px 12px; border-bottom: 1px solid var(--border-sub);} .tweaks .sec:last-child{border-bottom: none;} .tweaks .lab{display: block; margin-bottom: 6px;} .seg{display: flex; border: 1px solid var(--border-sub); border-radius: 5px; overflow: hidden; background: var(--surface);} .seg button{ flex: 1; background: none; border: none; color: var(--text-2); padding: 5px 6px; font-size: 11.5px; cursor: pointer; border-right: 1px solid var(--border-sub); } .seg button:last-child{border-right: none;} .seg button.on{background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 -2px 0 var(--accent);} /* ---------- responsive ---------- */ @media (max-width: 900px){ .library-layout{grid-template-columns: 1fr;} .filters{position: static; max-height: none;} .detail-layout{grid-template-columns: 1fr;} .entry-grid{grid-template-columns: 1fr;} header.topbar nav, .topbar-search{display: none;} } @media (min-width: 1100px){ .entry-grid{grid-template-columns: repeat(3, minmax(0, 1fr));} }