/* Varrolabs cluster UI — shares the varrolabs.ai design language. Paper/ink/rust/violet/gold palette, Futura display + Optima body + mono, hairline rules, uppercase tracked labels, dark "console" surfaces. */ :root{ --rust:#8A3016; --violet:#7A2F94; --gold:#8A7A28; --paper:#EFEAE1; --paper-2:#E5DFD3; --card:#F7F4EE; --ink:#17110F; --ink-mid:#453931; --ink-dim:#6B5F5C; --line:rgba(23,17,15,.18); --line-soft:rgba(23,17,15,.09); --accent:var(--rust); --on-accent:#F7F3EC; --ok:#3F6B3A; --warn:#8A6A1E; --console:#141110; --console-2:#1D1817; --console-line:rgba(236,233,227,.14); --console-ink:#ECE9E3; --console-dim:rgba(236,233,227,.55); --display:"Futura","Avenir Next","Century Gothic","URW Gothic",sans-serif; --body:"Optima","Candara","Gill Sans","Trebuchet MS",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --gutter:clamp(20px,4.5vw,64px); --shell:1200px; } /* Dark palette — applied when the OS is dark AND the user hasn't chosen light, or when the user explicitly picks dark (data-theme="dark" on , toggled by the nav theme button, persisted in localStorage). */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --rust:#D46A45; --violet:#AA7DC4; --gold:#A89231; --paper:#100C0B; --paper-2:#0A0706; --card:#181312; --ink:#ECE9E3; --ink-mid:rgba(236,233,227,.76); --ink-dim:rgba(236,233,227,.52); --line:rgba(236,233,227,.18); --line-soft:rgba(236,233,227,.09); --on-accent:#100C0B; --ok:#7FB06F; --warn:#C4A24E; --console:#0B0908; --console-2:#141110; } } :root[data-theme="dark"]{ --rust:#D46A45; --violet:#AA7DC4; --gold:#A89231; --paper:#100C0B; --paper-2:#0A0706; --card:#181312; --ink:#ECE9E3; --ink-mid:rgba(236,233,227,.76); --ink-dim:rgba(236,233,227,.52); --line:rgba(236,233,227,.18); --line-soft:rgba(236,233,227,.09); --on-accent:#100C0B; --ok:#7FB06F; --warn:#C4A24E; --console:#0B0908; --console-2:#141110; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)} h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em} .label{font-family:var(--display);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)} /* ---------- top nav (same pattern as the marketing site) ---------- */ .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav__in{display:flex;align-items:center;gap:16px;padding-block:13px} .brand{font-family:var(--display);font-size:1.02rem;font-weight:500;letter-spacing:.15em; text-transform:uppercase;text-decoration:none;white-space:nowrap;margin-right:auto} .brand i{font-style:normal;color:var(--ink-dim);letter-spacing:.06em} .nav__who{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.72rem;color:var(--ink-dim)} .nav__who a{font-family:var(--display);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; text-decoration:none;color:var(--ink-dim);padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s} .nav__who a:hover{color:var(--ink);border-bottom-color:var(--accent)} /* theme toggle: sun/moon swap, same hairline-button language */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; background:none;border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;padding:0; transition:color .2s,border-color .2s} .theme-toggle:hover{color:var(--accent);border-color:var(--accent)} .theme-toggle svg{width:15px;height:15px;display:block} .theme-toggle--fixed{position:fixed;top:16px;right:16px;z-index:60;background:var(--card)} .theme-toggle .icon-sun{display:none} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block} :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none} } /* ---------- buttons ---------- */ .btn{display:inline-block;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;background:var(--accent);color:var(--on-accent);padding:10px 18px;border:0;cursor:pointer; transition:background .2s,opacity .2s} .btn:hover{background:var(--violet)} .btn:disabled{opacity:.4;cursor:not-allowed} .btn--sm{padding:6px 12px;font-size:.64rem} .btn--ghost{background:none;color:var(--ink-mid);border:1px solid var(--line)} .btn--ghost:hover{background:none;color:var(--accent);border-color:var(--accent)} .btn--danger{background:none;color:var(--rust);border:1px solid color-mix(in srgb,var(--rust) 40%,transparent)} .btn--danger:hover{background:color-mix(in srgb,var(--rust) 10%,transparent);color:var(--rust)} .btn--gold{background:none;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)} .btn--gold:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)} .btn--ok{background:none;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)} .btn--ok:hover{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)} /* ---------- badges / states ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem; letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--line);color:var(--ink-dim)} .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .badge--running{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .badge--booting{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)} .badge--stopped{color:var(--ink-dim)} .badge--admin{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent)} .badge--error{color:var(--rust);border-color:color-mix(in srgb,var(--rust) 40%,transparent)} .spinner{display:inline-block;width:10px;height:10px;border:2px solid currentColor;border-top-color:transparent; border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spinner{animation:none}} /* ---------- sections & panels ---------- */ main.shell{padding-block:clamp(28px,4vw,48px)} .section{margin-bottom:clamp(30px,4vw,46px)} /* --- Tabs (dashboard views) --- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:clamp(22px,3vw,34px);flex-wrap:wrap} .tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-dim); font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; padding:10px 16px;cursor:pointer;transition:color .15s,border-color .15s} .tab:hover{color:var(--ink)} .tab.active{color:var(--ink);border-bottom-color:var(--accent)} .tabpane{display:none} .tabpane.active{display:block} .section__head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px; padding-bottom:10px;border-bottom:1px solid var(--line)} .section__head h2{font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-dim);font-weight:500} .section__head .btn,.section__head .badge{margin-left:auto} .section__head .badge{margin-left:auto} .section__head .btn + .badge{margin-left:0} .panel{border:1px solid var(--line);background:var(--card)} .panel--console{background:var(--console);border-color:var(--console-line);color:var(--console-ink)} /* ---------- tables ---------- */ table.grid{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);font-size:.9rem} table.grid th{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-dim);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)} table.grid td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle} table.grid tr:last-child td{border-bottom:0} table.grid .actions{display:flex;flex-wrap:wrap;gap:6px} .empty{padding:36px;text-align:center;color:var(--ink-dim);font-style:italic; border:1px dashed var(--line);background:none} .panel .empty,table.grid .empty{border:0} /* ---------- forms ---------- */ input[type=text],input[type=email],input[type=password],input[type=number],textarea{ width:100%;padding:11px 13px;background:var(--paper);border:1px solid var(--line);color:var(--ink); font-family:var(--body);font-size:.95rem;border-radius:0;-webkit-appearance:none;appearance:none; transition:border-color .15s ease,box-shadow .15s ease} input::placeholder,textarea::placeholder{color:var(--ink-dim)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} /* Custom styled dropdown select */ select{ width:100%;padding:10px 34px 10px 13px;background:var(--paper);border:1px solid var(--line);color:var(--ink); font-family:var(--body);font-size:.92rem;border-radius:0;cursor:pointer; -webkit-appearance:none;-moz-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A3016' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:13px 13px; transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease} select:hover{border-color:var(--ink-mid);background-color:var(--paper-2)} select option{background:var(--card);color:var(--ink);padding:8px 12px} :root[data-theme="dark"] select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D46A45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D46A45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } } /* Custom styled checkboxes */ input[type=checkbox]{ -webkit-appearance:none;-moz-appearance:none;appearance:none; width:17px;height:17px;min-width:17px;border:1.5px solid var(--line); background:var(--paper);border-radius:2px;cursor:pointer; display:inline-grid;place-content:center;vertical-align:middle; margin:0;padding:0;position:relative; transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease} input[type=checkbox]::before{ content:"";width:9px;height:9px; clip-path:polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 82% 4%, 38% 70%); transform:scale(0);transition:transform .15s cubic-bezier(.22,1,.36,1); background-color:var(--on-accent)} input[type=checkbox]:checked{ background-color:var(--accent);border-color:var(--accent)} input[type=checkbox]:checked::before{ transform:scale(1)} input[type=checkbox]:hover{ border-color:var(--accent)} input[type=checkbox]:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} /* Custom styled radio buttons */ input[type=radio]{ -webkit-appearance:none;-moz-appearance:none;appearance:none; width:17px;height:17px;min-width:17px;border:1.5px solid var(--line); background:var(--paper);border-radius:50%;cursor:pointer; display:inline-grid;place-content:center;vertical-align:middle; margin:0;padding:0;position:relative; transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease} input[type=radio]::before{ content:"";width:7px;height:7px;border-radius:50%; transform:scale(0);transition:transform .15s cubic-bezier(.22,1,.36,1); background-color:var(--on-accent)} input[type=radio]:checked{ background-color:var(--accent);border-color:var(--accent)} input[type=radio]:checked::before{ transform:scale(1)} input[type=radio]:hover{ border-color:var(--accent)} input[type=radio]:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} textarea{min-height:120px;resize:vertical} label.field{display:block;margin-bottom:14px} label.field span{display:block;font-family:var(--display);font-size:.66rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px} .quota-input{width:84px;padding:5px 8px;font-size:.85rem} /* ---------- auth cards (login / register) ---------- */ .auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} .auth__card{width:100%;max-width:400px;border:1px solid var(--line);background:var(--card);padding:34px 32px} .auth__brand{font-family:var(--display);font-size:1.1rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase} .auth__brand i{font-style:normal;color:var(--ink-dim);letter-spacing:.06em} .auth__sub{margin-top:6px;color:var(--ink-dim);font-size:.9rem} .auth__form{margin-top:24px;display:flex;flex-direction:column;gap:14px} .auth__links{margin-top:18px;font-size:.85rem;color:var(--ink-dim);text-align:center} .auth__links a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent} .auth__links a:hover{border-bottom-color:var(--accent)} .form-error{color:var(--rust);font-size:.85rem;padding:10px 12px; background:color-mix(in srgb,var(--rust) 8%,transparent);border-left:2px solid var(--rust)} /* ---------- datasource cards ---------- */ .datasource-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px} .datasource-card{border:1px solid var(--line);background:var(--card);padding:20px 16px;cursor:pointer; transition:border-color .2s,transform .2s cubic-bezier(.22,1,.36,1)} .datasource-card.enabled:hover{border-color:var(--accent);transform:translateY(-2px)} .datasource-card.disabled{opacity:.42;cursor:not-allowed} .ds-icon{font-size:24px;margin-bottom:8px} .ds-name{font-family:var(--display);font-size:.9rem;letter-spacing:-.01em;margin-bottom:3px} .ds-status{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)} /* ---------- upload ---------- */ .upload-zone{border:1px dashed var(--line);padding:30px;text-align:center;cursor:pointer; transition:border-color .2s;margin-bottom:14px} .upload-zone:hover,.upload-zone.dragover{border-color:var(--accent)} .upload-zone .uz-icon{font-size:26px;margin-bottom:6px} .upload-zone .uz-text{color:var(--ink-dim);font-size:.86rem} .upload-progress{display:none;margin-bottom:12px} .upload-progress.active{display:block} .progress-bar{background:var(--line-soft);height:4px;overflow:hidden} .progress-fill{background:var(--accent);height:100%;width:0%;transition:width .3s} .progress-text{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);margin-top:6px} /* ---------- modals ---------- */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(16,12,11,.55);z-index:100; align-items:center;justify-content:center;padding:20px} .modal-overlay.active{display:flex} .modal{background:var(--card);border:1px solid var(--line);padding:26px;width:100%;max-width:420px} .modal h3{font-family:var(--display);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-dim);font-weight:500;margin-bottom:18px} .modal input,.modal select,.modal textarea{margin-bottom:12px} .modal__text{color:var(--ink-mid);font-size:.92rem;line-height:1.55;margin-bottom:6px} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px} /* ---------- toast ---------- */ .toast{position:fixed;bottom:24px;right:24px;background:var(--card);border:1px solid var(--line); border-left:3px solid var(--ok);padding:12px 18px;font-size:.86rem;z-index:200;display:none;max-width:min(420px,90vw)} .toast.active{display:block} .toast.success{border-left-color:var(--ok);color:var(--ink)} .toast.error{border-left-color:var(--rust);color:var(--ink)} /* ---------- Drive write switch (workers page) ---------- */ .wr-toggle{position:relative;display:inline-block;width:34px;height:19px;flex:none} .wr-toggle input{opacity:0;width:0;height:0;position:absolute} .wr-toggle .wr-track{position:absolute;inset:0;background:var(--line);border:1px solid var(--line); border-radius:19px;cursor:pointer;transition:background .15s ease,border-color .15s ease} .wr-toggle .wr-track::before{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px; background:var(--card);border-radius:50%;transition:transform .15s ease} .wr-toggle input:checked + .wr-track{background:var(--ok);border-color:var(--ok)} .wr-toggle input:checked + .wr-track::before{transform:translateX(15px)} .wr-toggle input:disabled + .wr-track{opacity:.45;cursor:not-allowed} .wr-cell{display:flex;align-items:center;gap:7px} .wr-cell .wr-ops-btn{padding:0 6px;line-height:1.4} .wr-mailcell{white-space:nowrap} .wr-mailaddr{font-family:var(--mono);font-size:.72rem;color:var(--ink-mid);margin-right:2px} .wr-mailcopy{padding:1px 6px;line-height:1.2;font-size:.7rem} /* Mail whitelist popover */ .ml-pop h4{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dim);margin:0 0 10px} .ml-tags{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;margin:4px 0 8px} .ml-tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:.72rem; background:var(--paper);border:1px solid var(--line);padding:3px 6px} .ml-tag-x{background:none;border:0;color:var(--rust);cursor:pointer;font-size:.9rem;line-height:1;padding:0 2px} .ml-empty{font-size:.72rem;color:var(--ink-dim);font-style:italic} .ml-addrow{display:flex;gap:6px;align-items:center} .ml-addrow input{flex:1;padding:6px 9px;font-size:.8rem} .wr-state{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)} .wr-state.on{color:var(--ok)} /* write-ops popover */ .wr-ops-pop{position:absolute;z-index:120;background:var(--card);border:1px solid var(--line); padding:14px 16px;min-width:230px;box-shadow:0 8px 28px rgba(16,12,11,.28)} .wr-ops-pop h4{font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-dim);margin:0 0 10px} .wr-ops-pop label{display:flex;align-items:center;gap:8px;font-size:.84rem;padding:4px 0;cursor:pointer} .wr-ops-pop label.dis{opacity:.45;cursor:not-allowed} .wr-ops-pop input[type=checkbox]{width:auto;margin:0} .wr-ops-pop .wr-ops-note{font-size:.72rem;color:var(--ink-dim);margin-top:8px;line-height:1.4} .wr-ops-pop .wr-ops-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px} .wr-ops-pop .wr-ops-sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-dim);margin:10px 0 4px} .wr-ops-pop .wr-ops-hint{font-size:.68rem;color:var(--ink-dim);margin-top:2px;line-height:1.35} .wr-ops-pop #wr-ops-admin{padding-bottom:8px;border-bottom:1px solid var(--line-soft);margin-bottom:6px} /* Drive write-access info panel (persistent, collapsible — never dismissed) */ .drive-info{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--card); margin-bottom:16px;font-size:.86rem} .drive-info__head{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;user-select:none} .drive-info__head:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)} .drive-info__icon{font-size:1rem;line-height:1} .drive-info__title{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink);font-weight:500} .drive-info__hint{color:var(--ink-dim);font-size:.8rem;margin-left:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .drive-info__chevron{color:var(--ink-dim);font-size:.8rem;transition:transform .18s ease;flex:none} .drive-info__chevron.collapsed{transform:rotate(-90deg)} .drive-info__body{padding:2px 16px 14px;border-top:1px solid var(--line-soft);overflow:hidden; max-height:400px;transition:max-height .2s ease,padding .2s ease} .drive-info__body.collapsed{display:none} .drive-info__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px} .drive-info__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)} .drive-info__email{font-family:var(--mono);font-size:.82rem;background:var(--paper);border:1px solid var(--line);padding:4px 10px} .drive-info__text{color:var(--ink-mid);font-size:.83rem;line-height:1.55;margin:12px 0 0;max-width:75ch} /* ---------- filter bar (workers / tables) ---------- */ .filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .filter-bar .search-input-wrap{position:relative;flex:1 1 200px;max-width:340px} .filter-bar input[type=text]{padding:7px 10px;font-size:.82rem;width:100%} .filter-bar select{padding:7px 30px 7px 10px;font-size:.82rem;width:auto;min-width:130px} .filter-bar .filter-count{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);margin-left:auto} /* sub-tabs within sections */ .subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line-soft);margin-bottom:16px} .subtab{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-dim); font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase; padding:8px 14px;cursor:pointer;transition:color .15s,border-color .15s} .subtab:hover{color:var(--ink)} .subtab.active{color:var(--ink);border-bottom-color:var(--accent)} .subtab-badge{display:inline-block;padding:1px 5px;font-size:.58rem;background:var(--line-soft); color:var(--ink-mid);border-radius:2px;margin-left:6px} .subtab.active .subtab-badge{background:var(--accent);color:var(--on-accent)} /* ---------- knowledge graph explorer ---------- */ .explorer{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .explorer input{flex:1 1 220px;width:auto} .explorer select{width:100px} .graph-canvas{width:100%;height:480px;background:var(--console);border:1px solid var(--console-line);position:relative} .graph-canvas .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; border:0;color:var(--console-dim)} .graph-legend{margin-top:10px;font-family:var(--mono);font-size:.68rem;color:var(--ink-dim)} .graph-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px} .graph-legend span.item{margin-right:16px} /* ---------- collapsible settings panels & controls ---------- */ .settings-section{border:1px solid var(--line);background:var(--card);margin-bottom:14px;transition:border-color .2s} .settings-section.open{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))} .settings-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;user-select:none} .settings-head:hover{background:color-mix(in srgb,var(--paper) 40%,transparent)} .settings-head__info{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .settings-head__title{font-family:var(--display);font-size:.86rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase} .settings-head__chevron{display:inline-block;transition:transform .2s ease;color:var(--ink-dim);font-size:.8rem} .settings-section.open .settings-head__chevron{transform:rotate(180deg)} .settings-body{display:none;padding:18px;border-top:1px solid var(--line-soft);background:var(--card)} .settings-section.open .settings-body{display:block} /* Service toggles & settings box */ .service-settings-box{border:1px solid var(--line-soft);background:var(--paper);padding:14px 16px;margin-bottom:14px} .service-toggle-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:12px} .service-toggle-info{display:flex;flex-direction:column;gap:3px} .service-toggle-name{font-family:var(--display);font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500} .service-toggle-desc{font-size:.78rem;color:var(--ink-dim)} .service-toggle-ctrl{display:flex;align-items:center;gap:10px} .service-sub-block{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft)} .service-sub-title{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px} /* Progress bar for sync */ .sync-progress-box{margin-top:10px;padding:10px 12px;background:var(--card);border:1px solid var(--line-soft)} .sync-progress-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-family:var(--mono);font-size:.72rem} .sync-progress-phase{color:var(--ink-mid);display:flex;align-items:center;gap:6px} .sync-progress-pct{font-weight:600;color:var(--accent)} .sync-progress-track{width:100%;height:6px;background:var(--line-soft);overflow:hidden;border-radius:1px} .sync-progress-fill{height:100%;background:var(--accent);width:0%;transition:width .3s ease} .sync-progress-detail{font-size:.72rem;color:var(--ink-dim);margin-top:5px;font-family:var(--mono)} /* Multi-credential card list */ .cred-card{border:1px solid var(--line-soft);background:var(--paper);padding:14px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .cred-card__main{display:flex;flex-direction:column;gap:4px} .cred-card__title{font-family:var(--mono);font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:8px} .cred-card__meta{font-size:.75rem;color:var(--ink-dim)} .cred-card__targets{display:flex;gap:6px;align-items:center;margin-top:4px} .cred-card__actions{display:flex;gap:8px;align-items:center} /* ---------- active knowledge stream (member view) ---------- */ .knowledge-stream{display:flex;flex-direction:column;gap:12px;margin-top:6px} .stream-item{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border:1px solid var(--line-soft);background:var(--card);transition:border-color .2s} .stream-item:hover{border-color:var(--line)} .stream-item__icon{font-size:1.6rem;line-height:1;margin-top:2px} .stream-item__main{flex:1;min-width:0} .stream-item__header{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap} .stream-item__title{font-family:var(--display);font-size:.9rem;font-weight:500;letter-spacing:-.01em} .stream-item__desc{font-size:.82rem;color:var(--ink-mid);line-height:1.5} .stream-item__actions{margin-left:auto;align-self:center} /* ---------- category option buttons (upload / context flow) ---------- */ .cat-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .cat-pick-card{border:1px solid var(--line);background:var(--paper);padding:14px;cursor:pointer;display:flex;align-items:flex-start;gap:10px;transition:border-color .2s,background .2s} .cat-pick-card:hover{border-color:var(--accent)} .cat-pick-card.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--paper))} .cat-pick-icon{font-size:1.4rem;line-height:1} .cat-pick-name{font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase} .cat-pick-sub{font-size:.74rem;color:var(--ink-dim);margin-top:2px;line-height:1.3} /* ---------- tags pills & tag management ---------- */ .tag-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:.65rem;padding:2px 7px;border-radius:3px;margin:2px;font-weight:500;text-transform:lowercase} .tag-pill--role{background:color-mix(in srgb,var(--gold) 15%,transparent);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)} .tag-pill--project{background:color-mix(in srgb,var(--violet) 15%,transparent);color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 40%,transparent)} .tag-pill__remove{cursor:pointer;opacity:0.7;font-weight:bold;margin-left:3px} .tag-pill__remove:hover{opacity:1} .tags-cell{display:flex;flex-wrap:wrap;gap:3px;align-items:center;max-width:260px} .tags-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px} .tag-card{background:var(--paper);border:1px solid var(--line-soft);padding:12px;display:flex;flex-direction:column;gap:6px} .tag-card__head{display:flex;align-items:center;justify-content:space-between} .tag-card__name{font-family:var(--mono);font-size:.82rem;font-weight:600} .tag-card__desc{font-size:.76rem;color:var(--ink-dim);line-height:1.4}