/* ============================================================ HUB v2 SHELL — full theme system (light + dark), Vitally-grade. Light mode (Vitally-like: cool gray/white, teal/violet accents) is the BASE. Dark mode is a class override on . Toggle: top-bar sun/moon button -> html.v2.dark, persisted. ============================================================ */ /* ---------------- LIGHT (base) ---------------- */ :root { --v2-bg: #f4f6f8; --v2-panel: #ffffff; --v2-panel2: #ffffff; --v2-line: #e3e8ee; --v2-line2: #cfd6df; --v2-fg: #171d26; --v2-mut: #67717f; --v2-mut2: #464f5c; --v2-acc: #14b8a6; --v2-acc-ink: #ffffff; --v2-violet: #7c3aed; --v2-violet-soft: rgba(124, 58, 237, 0.09); --v2-violet-txt: #6d28d9; --v2-violet-strong: #6d28d9; --v2-danger: #dc2626; /* component-level tokens (both themes) */ --v2-input: #ffffff; --v2-box: #ffffff; --v2-hover: #eef1f5; --v2-hover-soft: rgba(15, 23, 42, 0.045); --v2-hover-soft2: rgba(15, 23, 42, 0.035); --v2-border-hover: #aab6c4; --v2-subline: #e9edf2; --v2-note-fg: #3f4857; --v2-ent-id: #8a94a3; --v2-topbar-bg: rgba(255, 255, 255, 0.92); --v2-tile-grad-a: #33404f; --v2-tile-grad-b: #7c3aed; --v2-status-muted-bg: rgba(15, 23, 42, 0.05); --v2-status-muted-border: #cfd6df; --v2-tag-v-fg: #6d28d9; --v2-tag-g-bg: rgba(20, 184, 166, 0.12); --v2-badge-fg: #6d28d9; --v2-crumb-hover: rgba(20, 184, 166, 0.12); --v2-kbd-bg: rgba(124, 58, 237, 0.08); --v2-sel-bg: rgba(124, 58, 237, 0.10); --v2-overlay: rgba(15, 23, 42, 0.42); --v2-overlay2: rgba(15, 23, 42, 0.5); --v2-shadow: 0 20px 60px rgba(15, 23, 42, 0.16); --v2-toast-ok-bg: #e7f7f4; --v2-toast-ok-bd: rgba(20, 184, 166, 0.45); --v2-toast-err-bg: #fdeaec; --v2-toast-err-bd: rgba(220, 38, 38, 0.4); --v2-toast-shadow: 0 12px 36px rgba(15, 23, 42, 0.16); --v2-book-cover-a: #0f9e8e; --v2-book-cover-b: #7c3aed; --v2-avatar-a: #0f9e8e; --v2-avatar-b: #7c3aed; --v2-legacy-bg: #ffffff; --v2-pill-bg: #eff3f7; --v2-ghost-hover: rgba(15, 23, 42, 0.06); --v2-table-row-line: #e9edf2; --v2-rail-sec-line: #e3e8ee; --v2-board-grad: none; } /* ---------------- DARK (override) ---------------- */ html.v2.dark { --v2-bg: #0b1919; --v2-panel: #0e1c1c; --v2-panel2: #102424; --v2-line: #1f2e2e; --v2-line2: #2a3c3c; --v2-fg: #ffffff; --v2-mut: #6b7d7d; --v2-mut2: #9aa8a8; --v2-acc: #3dd6c3; --v2-acc-ink: #062020; --v2-violet: #8b3dff; --v2-violet-soft: rgba(139, 61, 255, 0.14); --v2-violet-txt: #cbb3ff; --v2-violet-strong: #ffffff; --v2-danger: #ff6b6b; --v2-input: #0f1f1f; --v2-box: #0f1f1f; --v2-hover: #0f1f1f; --v2-hover-soft: rgba(255, 255, 255, 0.035); --v2-hover-soft2: rgba(255, 255, 255, 0.03); --v2-border-hover: #345050; --v2-subline: #152424; --v2-note-fg: #d1d5db; --v2-ent-id: #4a5a5a; --v2-topbar-bg: rgba(11, 25, 25, 0.92); --v2-tile-grad-a: #ffffff; --v2-tile-grad-b: #b79bff; --v2-status-muted-bg: rgba(107, 125, 125, 0.1); --v2-status-muted-border: #2a3c3c; --v2-tag-v-fg: #b79bff; --v2-tag-g-bg: rgba(61, 214, 195, 0.12); --v2-badge-fg: #b79bff; --v2-crumb-hover: rgba(61, 214, 195, 0.08); --v2-kbd-bg: rgba(139, 61, 255, 0.08); --v2-sel-bg: rgba(139, 61, 255, 0.14); --v2-overlay: rgba(4, 10, 10, 0.66); --v2-overlay2: rgba(4, 10, 10, 0.7); --v2-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); --v2-toast-ok-bg: #10302d; --v2-toast-ok-bd: rgba(61, 214, 195, 0.4); --v2-toast-err-bg: #331a1a; --v2-toast-err-bd: rgba(255, 107, 107, 0.4); --v2-toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); --v2-book-cover-a: #2b6b63; --v2-book-cover-b: #5b25b3; --v2-avatar-a: #2b6b63; --v2-avatar-b: #5b25b3; --v2-legacy-bg: #142a2a; --v2-pill-bg: #142a2a; --v2-ghost-hover: rgba(255, 255, 255, 0.04); --v2-table-row-line: #162626; --v2-rail-sec-line: #162626; --v2-board-grad: linear-gradient(135deg, #2b6b63, #5b25b3); } html.v2, html.v2 body { background: var(--v2-bg); color: var(--v2-fg); } /* ---------------- icon sizing (SVG line icons) ---------------- */ .v2-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; } .v2-ic svg { width: 100%; height: 100%; display: block; } .rail-ic { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0; color: inherit; } .rail-ic svg { width: 100%; height: 100%; display: block; } .page-ic { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0; } .page-ic svg { width: 100%; height: 100%; display: block; } .search-ic { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; flex-shrink: 0; } .search-ic svg { width: 100%; height: 100%; display: block; } .v2-book-cover .v2-ic svg, .v2-side .ent-av svg, .v2-erow .av svg { width: 60%; height: 60%; } .v2-book-cover .v2-ic, .v2-book-cover .v2-ic svg { color: rgba(255,255,255,.9); } /* ---------- top bar ---------- */ .v2-topbar { height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--v2-line); background: var(--v2-topbar-bg); position: sticky; top: 0; z-index: 60; } .v2-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; cursor: pointer; color: var(--v2-fg); user-select: none; } .v2-logo .mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--v2-acc), var(--v2-violet)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; } .v2-crumbs { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; font-size: 12.5px; color: var(--v2-mut); white-space: nowrap; } .v2-crumbs .sep { margin: 0 6px; color: var(--v2-line2); } .v2-crumbs .c { color: var(--v2-mut2); cursor: pointer; text-decoration: none; border: 0; background: none; font: inherit; padding: 2px 2px; border-radius: 5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .v2-crumbs .c:hover { color: var(--v2-acc); background: var(--v2-crumb-hover); } .v2-crumbs .c.last { color: var(--v2-fg); font-weight: 650; cursor: default; } .v2-crumbs .c.last:hover { background: none; color: var(--v2-fg); } .v2-topbar .spacer { flex: 1; } .v2-searchbtn { display: flex; align-items: center; gap: 8px; background: var(--v2-input); border: 1px solid var(--v2-line2); border-radius: 999px; padding: 7px 14px; min-width: 200px; color: var(--v2-mut); font-size: 12px; cursor: pointer; } .v2-searchbtn kbd { margin-left: auto; border: 1px solid var(--v2-line2); border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--v2-violet-txt); background: var(--v2-kbd-bg); } .v2-btn { border: 1px solid var(--v2-line2); background: var(--v2-pill-bg); color: var(--v2-fg); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; } .v2-btn:hover { border-color: var(--v2-border-hover); } .v2-btn.primary { background: var(--v2-violet); border-color: var(--v2-violet); color: #fff; } .v2-btn.primary:hover { filter: brightness(1.12); } .v2-btn.ghost { background: transparent; border-color: transparent; color: var(--v2-mut2); } .v2-btn.ghost:hover { color: var(--v2-fg); background: var(--v2-ghost-hover); } .v2-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--v2-avatar-a), var(--v2-avatar-b)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; } /* ---------- main 3-column body ---------- */ .v2-body { display: flex; align-items: stretch; min-height: calc(100vh - 56px); } /* far-left hub rail */ .v2-rail { width: 214px; flex-shrink: 0; border-right: 1px solid var(--v2-line); background: var(--v2-panel); padding: 14px 10px 24px; overflow-y: auto; } .v2-rail h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--v2-mut); margin: 6px 10px 8px; font-weight: 800; } .v2-rail .hub { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; color: var(--v2-mut2); font-weight: 600; font-size: 12.5px; cursor: pointer; margin-bottom: 2px; } .v2-rail .hub:hover { background: var(--v2-hover-soft); color: var(--v2-fg); } .v2-rail .hub.on { background: var(--v2-violet-soft); color: var(--v2-violet-txt); } .v2-rail .hub .ic { font-size: 14px; width: 18px; text-align: center; } .v2-rail .hub .cnt { margin-left: auto; font-size: 10.5px; color: var(--v2-mut); } .v2-rail .hub.on .cnt { color: var(--v2-violet-txt); } .v2-rail .child { display: flex; align-items: center; gap: 8px; margin-left: 22px; padding: 6px 10px; border-radius: 8px; color: var(--v2-mut); font-size: 12px; cursor: pointer; max-width: 100%; } .v2-rail .child .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-rail .child:hover { color: var(--v2-fg); background: var(--v2-hover-soft2); } .v2-rail .child.on { color: var(--v2-fg); background: var(--v2-pill-bg); } .v2-rail .child .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-acc); flex-shrink: 0; } .v2-rail .child.off .dot { background: var(--v2-line2); } .v2-rail .rail-sec { margin-top: 16px; border-top: 1px solid var(--v2-rail-sec-line); padding-top: 10px; } /* entity contextual sidebar (step 3 fills tabs; shell renders header + props + pages) */ .v2-side { width: 260px; flex-shrink: 0; border-right: 1px solid var(--v2-line); background: var(--v2-panel2); padding: 18px 14px; overflow-y: auto; } .v2-side .ent-head { display: flex; align-items: center; gap: 11px; } .v2-side .ent-av { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--v2-acc), var(--v2-violet)); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; flex-shrink: 0; } .v2-side .ent-name { font-weight: 800; font-size: 15.5px; line-height: 1.25; } .v2-side .ent-id { color: var(--v2-ent-id); font-size: 10px; margin-top: 2px; } .v2-side .ent-actions { display: flex; gap: 6px; margin-top: 10px; } .v2-side .ent-actions .ic { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--v2-line2); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--v2-mut); cursor: pointer; } .v2-side .ent-actions .ic:hover { color: var(--v2-fg); border-color: var(--v2-border-hover); } .v2-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 11px; margin-top: 10px; background: var(--v2-tag-g-bg); border: 1px solid var(--v2-toast-ok-bd); color: var(--v2-acc); } .v2-status.muted { background: var(--v2-status-muted-bg); border-color: var(--v2-status-muted-border); color: var(--v2-mut2); } .v2-status.violet { background: var(--v2-violet-soft); border-color: var(--v2-violet-soft); color: var(--v2-violet-txt); } .v2-side h5 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--v2-mut); margin: 22px 4px 8px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; } .v2-side h5 .plus { color: var(--v2-acc); font-size: 14px; cursor: pointer; } .v2-prop { display: flex; align-items: center; justify-content: space-between; padding: 7px 4px; border-radius: 8px; gap: 10px; } .v2-prop:hover { background: var(--v2-hover); } .v2-prop .k { color: var(--v2-mut); font-size: 11.5px; flex-shrink: 0; } .v2-prop .v { color: var(--v2-fg); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; text-align: right; word-break: break-word; } .v2-prop .v .pin { color: var(--v2-acc); } .v2-page { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; color: var(--v2-mut2); font-size: 12.5px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font: inherit; } .v2-page:hover { background: var(--v2-hover); } .v2-page.on { background: var(--v2-violet-soft); color: var(--v2-violet-txt); font-weight: 700; } .v2-page .cnt { margin-left: auto; color: var(--v2-mut); font-size: 11px; } .v2-view { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; color: var(--v2-mut2); font-size: 12px; cursor: pointer; } .v2-view:hover { background: var(--v2-hover); } /* main content */ .v2-main { flex: 1; padding: 20px 26px 48px; min-width: 0; } .v2-mhead { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .v2-mhead h1 { font-size: 21px; font-weight: 800; } .v2-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--v2-violet-soft); color: var(--v2-badge-fg); } .v2-msub { color: var(--v2-mut); font-size: 12px; margin-bottom: 16px; } .v2-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--v2-line); margin-bottom: 20px; flex-wrap: wrap; } .v2-tab { padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--v2-mut); cursor: pointer; border-bottom: 2px solid transparent; border-top: 0; border-left: 0; border-right: 0; background: none; font-family: inherit; } .v2-tab:hover { color: var(--v2-fg); } .v2-tab.on { color: var(--v2-fg); border-bottom-color: var(--v2-violet); } .v2-tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .v2-tile { background: var(--v2-panel2); border: 1px solid var(--v2-line); border-radius: 14px; padding: 15px 17px; } .v2-tile .n { font-size: 24px; font-weight: 800; background: linear-gradient(120deg, var(--v2-tile-grad-a), var(--v2-tile-grad-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .v2-tile .l { color: var(--v2-mut2); font-size: 11.5px; margin-top: 2px; } .v2-grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; } @media (max-width: 1100px) { .v2-grid2 { grid-template-columns: 1fr; } } .v2-widget { background: var(--v2-panel2); border: 1px solid var(--v2-line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; } .v2-widget h3 { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .v2-widget h3 .more { color: var(--v2-violet-txt); font-size: 11.5px; cursor: pointer; } .v2-widget h3 .more:hover { color: var(--v2-violet); } .v2-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-radius: 8px; cursor: pointer; } .v2-row:hover { background: var(--v2-hover); } .v2-row .t { font-size: 12.5px; font-weight: 500; } .v2-row .s { margin-left: auto; color: var(--v2-mut); font-size: 11px; } .v2-tag { border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; } .v2-tag.v { background: var(--v2-violet-soft); color: var(--v2-tag-v-fg); } .v2-tag.g { background: var(--v2-tag-g-bg); color: var(--v2-acc); } .v2-meet { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-radius: 8px; cursor: pointer; } .v2-meet .d { width: 48px; color: var(--v2-mut); font-size: 11px; } .v2-meet .n { font-size: 12.5px; font-weight: 500; } .v2-note { display: flex; gap: 9px; padding: 8px 2px; border-bottom: 1px solid var(--v2-subline); font-size: 12px; color: var(--v2-note-fg); } .v2-note:last-child { border-bottom: none; } /* landing / overview cards */ .v2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .v2-card { background: var(--v2-panel2); border: 1px solid var(--v2-line); border-radius: 14px; padding: 16px 17px; cursor: pointer; transition: border-color .12s, transform .12s; } .v2-card:hover { border-color: var(--v2-border-hover); transform: translateY(-1px); } .v2-card .ttl { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 9px; } .v2-card .sub { color: var(--v2-mut); font-size: 11.5px; margin-top: 6px; } .v2-card .meta { color: var(--v2-mut2); font-size: 11px; margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .v2-empty { border: 1px dashed var(--v2-line2); border-radius: 14px; padding: 34px; text-align: center; color: var(--v2-mut); font-size: 12.5px; margin: 10px 0; } .v2-empty b { color: var(--v2-mut2); } /* entity list rows (hub landings) */ .v2-elist { display: flex; flex-direction: column; gap: 8px; } /* ---------- step 4: view switcher + table + board ---------- */ .v2-viewsw { display: inline-flex; gap: 2px; background: var(--v2-input); border: 1px solid var(--v2-line2); border-radius: 999px; padding: 3px; margin-bottom: 16px; } .v2-viewsw-btn { border: 0; background: none; color: var(--v2-mut2); font: inherit; font-size: 12px; font-weight: 650; border-radius: 999px; padding: 6px 14px; cursor: pointer; } .v2-viewsw-btn:hover { color: var(--v2-fg); } .v2-viewsw-btn.on { background: var(--v2-violet); color: #fff; } .v2-table { width: 100%; border-collapse: collapse; background: var(--v2-panel2); border: 1px solid var(--v2-line); border-radius: 14px; overflow: hidden; font-size: 12.5px; } .v2-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--v2-mut); font-weight: 800; padding: 11px 14px; border-bottom: 1px solid var(--v2-line); cursor: pointer; user-select: none; white-space: nowrap; } .v2-table thead th:hover { color: var(--v2-acc); } .v2-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--v2-table-row-line); color: var(--v2-mut2); } .v2-table tbody tr:last-child td { border-bottom: 0; } .v2-table tbody tr { cursor: pointer; } .v2-table tbody tr:hover { background: var(--v2-hover); } .v2-table tbody tr:hover td { color: var(--v2-fg); } .v2-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 10px; } .v2-bcol { min-width: 220px; max-width: 300px; flex: 1; background: var(--v2-hover-soft2); border: 1px solid var(--v2-line); border-radius: 14px; padding: 10px; } .v2-bhead { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--v2-mut2); padding: 4px 6px 10px; display: flex; align-items: center; gap: 8px; } .v2-bhead .cnt { margin-left: auto; font-size: 10.5px; color: var(--v2-mut); background: var(--v2-pill-bg); border: 1px solid var(--v2-line2); border-radius: 999px; padding: 1px 9px; } .v2-bcard { background: var(--v2-panel2); border: 1px solid var(--v2-line); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s; } .v2-bcard:hover { border-color: var(--v2-border-hover); } .v2-bcard .bc-t { font-size: 12.5px; font-weight: 600; color: var(--v2-fg); } .v2-bcard .bc-m { font-size: 11px; color: var(--v2-mut); margin-top: 4px; } .v2-erow { display: flex; align-items: center; gap: 12px; background: var(--v2-panel2); border: 1px solid var(--v2-line); border-radius: 12px; padding: 12px 15px; cursor: pointer; } .v2-erow:hover { border-color: var(--v2-border-hover); } .v2-erow .av { width: 34px; height: 34px; border-radius: 10px; background: var(--v2-violet-soft); color: var(--v2-violet-txt); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .v2-erow .nm { font-weight: 650; font-size: 13px; } .v2-erow .ds { color: var(--v2-mut); font-size: 11.5px; margin-top: 2px; } .v2-erow .right { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--v2-mut); font-size: 11.5px; } /* book cards on the Books & Writing landing */ .v2-book-card { display: flex; align-items: center; gap: 14px; background: var(--v2-panel2); border: 1px solid var(--v2-line); border-radius: 12px; padding: 12px 15px; cursor: pointer; } .v2-book-card:hover { border-color: var(--v2-border-hover); } .v2-book-cover { width: 42px; height: 56px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, var(--v2-book-cover-a), var(--v2-book-cover-b)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.18); } .v2-book-card .nm { font-weight: 700; font-size: 13.5px; } .v2-book-card .ds { color: var(--v2-mut); font-size: 11.5px; margin-top: 3px; } .v2-book-card .right { margin-left: auto; color: var(--v2-mut); font-size: 11.5px; white-space: nowrap; } /* watermark legend */ .v2-legend { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: var(--v2-legacy-bg); border: 1px solid var(--v2-line2); border-radius: 999px; padding: 8px 18px; font-size: 11.5px; color: var(--v2-mut2); white-space: nowrap; box-shadow: 0 8px 24px rgba(15,23,42,.08); } .v2-legend b { color: var(--v2-acc); } /* ⌘K palette */ .v2-palette { position: fixed; inset: 0; z-index: 200; background: var(--v2-overlay); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .v2-palette .box { width: min(560px, 92vw); background: var(--v2-box); border: 1px solid var(--v2-line2); border-radius: 16px; overflow: hidden; box-shadow: var(--v2-shadow); } .v2-palette input { width: 100%; border: 0; background: none; outline: none; color: var(--v2-fg); font-size: 15px; padding: 16px 18px; border-bottom: 1px solid var(--v2-line); } .v2-palette .res { max-height: 380px; overflow-y: auto; padding: 8px; } .v2-palette .r { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; cursor: pointer; font-size: 13px; } .v2-palette .r:hover, .v2-palette .r.sel { background: var(--v2-sel-bg); } .v2-palette .r .tp { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--v2-mut); border: 1px solid var(--v2-line2); border-radius: 6px; padding: 1px 7px; flex-shrink: 0; } .v2-palette .r .crumb-small { margin-left: auto; color: var(--v2-mut); font-size: 11px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v2-palette .r .rmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .v2-palette .r .rmain .rt { display: flex; align-items: center; gap: 7px; font-weight: 600; } .v2-palette .r .rmain .rsn { color: var(--v2-mut); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .v2-palette .hint { padding: 9px 16px; color: var(--v2-mut); font-size: 11px; border-top: 1px solid var(--v2-line); } /* capture modal (v2-styled) */ .v2-modal { position: fixed; inset: 0; z-index: 210; background: var(--v2-overlay2); display: flex; align-items: center; justify-content: center; } .v2-modal .card { width: min(560px, 92vw); background: var(--v2-box); border: 1px solid var(--v2-line2); border-radius: 16px; padding: 20px; box-shadow: var(--v2-shadow); } .v2-modal h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; } .v2-modal p.sub { color: var(--v2-mut); font-size: 12px; margin-bottom: 14px; } .v2-modal textarea { width: 100%; min-height: 96px; resize: vertical; background: var(--v2-bg); border: 1px solid var(--v2-line2); border-radius: 12px; color: var(--v2-fg); font: inherit; font-size: 13.5px; padding: 12px; outline: none; } .v2-modal input[type="text"], .v2-modal select { width: 100%; box-sizing: border-box; background: var(--v2-bg); border: 1px solid var(--v2-line2); border-radius: 12px; color: var(--v2-fg); font: inherit; font-size: 13.5px; padding: 11px 13px; outline: none; } .v2-modal textarea:focus, .v2-modal input[type="text"]:focus, .v2-modal select:focus { border-color: var(--v2-violet); } .v2-modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; } .v2-modal .err { color: var(--v2-danger); font-size: 12px; min-height: 16px; margin-top: 8px; } .v2-modal .filed { color: var(--v2-acc); font-size: 12px; min-height: 16px; margin-top: 8px; } /* toast */ .v2-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--v2-toast-ok-bg); color: var(--v2-acc); border: 1px solid var(--v2-toast-ok-bd); border-radius: 999px; padding: 10px 20px; font-size: 12.5px; z-index: 300; box-shadow: var(--v2-toast-shadow); } .v2-toast.err { background: var(--v2-toast-err-bg); color: var(--v2-danger); border-color: var(--v2-toast-err-bd); } /* legacy handoff notice (shows while old routes render) */ .v2-legacy-note { position: fixed; bottom: 14px; right: 16px; z-index: 90; background: var(--v2-legacy-bg); border: 1px solid var(--v2-line2); border-radius: 999px; padding: 6px 14px; font-size: 11px; color: var(--v2-mut2); cursor: pointer; box-shadow: 0 8px 24px rgba(15,23,42,.08); } .v2-legacy-note:hover { color: var(--v2-fg); } /* v2 login screen */ .v2-login-card input, .v2-inp { background: var(--v2-bg); border: 1px solid var(--v2-line2); border-radius: 12px; color: var(--v2-fg); font: inherit; font-size: 13.5px; padding: 11px 13px; outline: none; box-sizing: border-box; width: 100%; } .v2-inp:focus { border-color: var(--v2-violet); } @media (max-width: 900px) { .v2-rail { width: 64px; } .v2-rail h4, .v2-rail .child .name, .v2-rail .hub .cnt { display: none; } .v2-rail .child { margin-left: 4px; justify-content: center; } .v2-side { display: none; } .v2-searchbtn { min-width: 40px; } .v2-searchbtn span.txt { display: none; } }