/* ToolBench — styling adapted from the "Tool Suite" command-center design. */ :root { --bg: #0f1217; --sidebar: #0b0e12; --card: #161a20; --card-hover-border: #3a4250; --surface: #171b22; --border: #232932; --border-soft: #1b1f26; --text: #e6e8ec; --muted: #8a909a; --dim: #6b7280; --dim-2: #5a616b; --green: #4ade80; --red: #ef4444; --link: #a9c2d8; --gold: #e0c79a; --amber: #f0b357; --radius: 13px; --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.88 6.49.95-4.7 4.58 1.11 6.46L12 17.92l-5.8 3.05 1.1-6.46-4.69-4.58 6.49-.95z'/%3E%3C/svg%3E"); } /* ---- Light theme ---- Applied when is set by the renderer (Settings → Appearance). The default look is the dark palette in :root above; this block only remaps the variables, so every surface that uses var(--…) follows along. A few rules below patch the handful of places that hardcode a dark value. */ :root[data-theme="light"] { --bg: #f4f6f9; --sidebar: #eaedf2; --card: #ffffff; --card-hover-border: #b8c1cf; --surface: #eef1f5; --border: #d7dce4; --border-soft: #e6e9ef; --text: #1a1e25; --muted: #5b626d; --dim: #767d89; --dim-2: #99a0ab; --green: #15a34a; --red: #dc2626; --link: #2f74ab; --gold: #b0832f; --amber: #c07d18; } /* Buttons use var(--link) as a fill; on light theme that fill is dark enough to need white text instead of the near-black used on the light-blue dark fill. */ :root[data-theme="light"] .btn { color: #fff; } :root[data-theme="light"] .login-btn { color: #0b0e12; } /* Hardcoded dark surfaces that don't read from a variable. */ :root[data-theme="light"] .section-placeholder { background: #eef1f5; } :root[data-theme="light"] .profile-avatar { background: #d7dce4; color: #4a515c; } :root[data-theme="light"] .switch .slider::before { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } input, button, textarea { font-family: inherit; } input:focus, textarea:focus { outline: none; } ::placeholder { color: var(--dim-2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---- App layout ---- */ #app, .shell { display: flex; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; } /* ---- Sidebar ---- */ .sidebar { width: 236px; flex: none; background: var(--sidebar); display: flex; flex-direction: column; padding: 22px 16px; border-right: 1px solid var(--border-soft); } .brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 22px; cursor: pointer; } .brand-logo { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .brand-name { font-weight: 700; font-size: 14.5px; line-height: 1.1; } .brand-tag { font-size: 9.5px; color: var(--dim); letter-spacing: 0.04em; } .nav { display: flex; flex-direction: column; gap: 3px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; color: var(--muted); cursor: pointer; border: 1px solid transparent; } .nav-item:hover { color: var(--text); } .nav-item.active { background: var(--surface); color: var(--text); font-weight: 600; border-color: var(--border); } .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: #8ba6c2; flex: none; } .nav-sq { width: 7px; height: 7px; border-radius: 2px; border: 1.5px solid #3a414c; flex: none; } .nav-star { width: 9px; height: 9px; flex: none; background: #c8a875; -webkit-mask: var(--star-mask) center/contain no-repeat; mask: var(--star-mask) center/contain no-repeat; } .profile { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--border-soft); } .profile-avatar { width: 30px; height: 30px; border-radius: 50%; background: #232932; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #aeb4bd; } .profile-name { font-size: 12.5px; font-weight: 600; line-height: 1.2; } .profile-role { font-size: 10.5px; color: var(--dim); } /* ---- Main ---- */ .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .view { display: flex; flex-direction: column; height: 100%; animation: fadeIn 0.18s ease; } .page-header { display: flex; align-items: center; justify-content: space-between; padding: 26px 34px 0; } .page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .page-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; } .page-title-wrap { display: flex; align-items: center; gap: 14px; } .header-logo { height: 40px; width: auto; object-fit: contain; display: block; } .search-box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; width: 230px; } .search-icon { width: 13px; height: 13px; border: 1.6px solid #4a515c; border-radius: 50%; flex: none; } .search-box input { background: transparent; border: none; color: var(--text); font-size: 13px; width: 100%; } .body-scroll { padding: 24px 34px; overflow: auto; } .count-label { font-size: 10.5px; letter-spacing: 0.08em; color: var(--dim); margin-bottom: 13px; } .count-label.warn { color: var(--amber); } .attention-note { color: var(--dim); font-size: 12px; margin: -6px 0 13px; } /* ---- Tile grid ---- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 920px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } } .tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; } .tile:hover { border-color: var(--card-hover-border); transform: translateY(-2px); } .tile-top { display: flex; align-items: flex-start; justify-content: space-between; } .tile-top-right { display: flex; align-items: center; gap: 10px; } /* ---- Favorite star ---- */ .fav-btn { background: transparent; border: none; padding: 2px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--dim-2); line-height: 0; border-radius: 6px; transition: color 0.15s, transform 0.15s; } .fav-btn:hover { color: var(--gold); transform: scale(1.12); } .fav-btn.on { color: var(--gold); } .fav-star { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; } .fav-btn.on .fav-star, .fav-detail.on .fav-star { fill: currentColor; } /* Detail-page Favorite button (reuses .back-btn shape) */ .fav-detail { line-height: 1; } .fav-detail .fav-star { stroke: currentColor; } .fav-detail.on { color: var(--gold); border-color: rgba(224, 199, 154, 0.4); } .fav-detail .fav-label { font-size: 13px; } /* Separator under the Home favorites strip */ .fav-sep { height: 1px; background: var(--border-soft); margin: 22px 0 24px; } .badge { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; font-family: 'JetBrains Mono', monospace; } .status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--green); font-weight: 600; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .status.idle { color: var(--muted); } .status-dot.idle { background: var(--muted); } /* Backend actively working (e.g. "Retrieving data") — amber with a gentle pulse. */ .status.busy { color: #E8920C; } .status-dot.busy { background: #E8920C; animation: tb-pulse 1.1s ease-in-out infinite; } @keyframes tb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Frozen waiting for an account to be connected — red with a gentle pulse. */ .status.error { color: var(--red); } .status-dot.error { background: var(--red); box-shadow: 0 0 0 2px rgba(239, 68, 68, .18); animation: tb-pulse 1.4s ease-in-out infinite; } .svc-dot.error { background: var(--red); box-shadow: 0 0 0 2px var(--card), 0 0 6px rgba(239, 68, 68, .55); } .tile-name { font-weight: 700; font-size: 16px; } .tile-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 4px; } .tile-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 6px; } .tile-meta { font-size: 10.5px; color: var(--dim-2); } .tile-open { font-size: 12.5px; font-weight: 600; color: var(--link); } .empty { padding: 40px; text-align: center; color: var(--dim-2); font-size: 13px; } .empty-link { color: var(--link); cursor: pointer; text-decoration: underline; } .empty-link:hover { color: var(--text); } /* Active services: compact icon-only chips that expand on hover */ .svc-row { display: flex; flex-wrap: wrap; gap: 12px; } .svc-chip { position: relative; width: 58px; height: 58px; border-radius: 13px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .12s ease; } .svc-chip:hover { border-color: var(--card-hover-border); z-index: 30; } .svc-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--card); } .svc-pop { position: absolute; top: calc(100% + 8px); left: 0; width: 244px; padding: 13px 14px; border-radius: 13px; text-align: left; background: var(--card); border: 1px solid var(--card-hover-border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; z-index: 40; } .svc-chip:hover .svc-pop { opacity: 1; visibility: visible; transform: translateY(0); } .svc-chip.pop-left .svc-pop { left: auto; right: 0; } .svc-pop-name { font-size: 14px; font-weight: 600; color: var(--text); } .svc-pop-desc { font-size: 12px; color: var(--dim); margin-top: 5px; line-height: 1.45; } .svc-pop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; } /* ---- Tool detail ---- */ .detail-header { display: flex; align-items: center; gap: 16px; padding: 22px 34px; border-bottom: 1px solid var(--border-soft); } .back-btn { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; } .back-btn:hover { color: var(--text); border-color: var(--card-hover-border); } .badge-sm { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; font-family: 'JetBrains Mono', monospace; } /* Image icon badge (used when a tool ships an icon). */ /* display:block overrides .badge's flex — otherwise the img is a flex item whose min-height:auto pins it to the image's intrinsic size and blows up the tile. */ .badge-img { display: block; background: #fff; border: 1px solid #e7e9ee; padding: 4px; overflow: hidden; box-sizing: border-box; } .badge-img img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Settings — "Run at startup" list */ .autostart-search { width: 100%; padding: 9px 12px; margin-bottom: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 13.5px; } .autostart-search:focus { border-color: var(--card-hover-border); } .autostart-list { display: flex; flex-direction: column; } .autostart-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border-soft); cursor: pointer; } .autostart-row:last-child { border-bottom: none; } .autostart-name { font-size: 13.5px; color: var(--text); } .switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .18s ease; } .switch .slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s ease; } .switch input:checked + .slider { background: var(--green); } .switch input:checked + .slider::before { transform: translateX(16px); } .detail-title { font-size: 18px; font-weight: 700; } .detail-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } .tool-root { flex: 1; padding: 28px 34px; overflow: auto; } .section-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 340px; border: 1.5px dashed var(--border); border-radius: 16px; background: #12161c; gap: 12px; color: var(--dim-2); } /* ---- Header actions + add-tool ---- */ .header-actions { display: flex; align-items: center; gap: 10px; } .add-btn { padding: 9px 15px; font-size: 13px; } .tile-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; border: 1.5px dashed var(--border); background: transparent; color: var(--muted); } .tile-add:hover { border-color: var(--link); color: var(--link); transform: translateY(-2px); } .tile-add-plus { font-size: 30px; font-weight: 300; line-height: 1; } .tile-add-label { font-size: 13.5px; font-weight: 600; } .swatches { display: flex; gap: 10px; } .swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .swatch.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; } .success-panel { max-width: 560px; padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); } .success-check { width: 40px; height: 40px; border-radius: 50%; background: rgba(74, 222, 128, .15); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; } .success-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .import-row { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); } .divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; margin: 0 0 20px; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ---- Credential vault (Settings) ---- */ .cred-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; } .cred-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .cred-name { font-weight: 700; font-size: 16px; } .cred-badge { font-size: 11px; font-weight: 600; color: var(--dim); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .cred-badge.on { color: var(--green); border-color: rgba(74, 222, 128, .4); } .readonly-value { padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13.5px; } .cred-warn { margin: 0 34px 0; padding: 12px 16px; background: rgba(200, 168, 117, .12); border: 1px solid rgba(200, 168, 117, .35); border-radius: 10px; color: #e0c79a; font-size: 13px; } .cred-warn a { color: var(--link); font-weight: 600; } /* ---- Home-screen "Action needed" credential alert (one tile per account) ---- */ .cred-tiles { display: flex; flex-direction: column; gap: 12px; margin: 0 0 13px; } .cred-tile { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius); background: var(--card); border: 1px solid rgba(239, 68, 68, .38); box-shadow: inset 3px 0 0 var(--red); } .cred-tile-info { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; min-width: 0; } .cred-tile-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: var(--red); background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4); } .cred-tile-text { min-width: 0; } .cred-tile-title { font-weight: 700; font-size: 15px; color: var(--text); } .cred-tile-sub { font-size: 12.5px; color: var(--muted); margin: 3px 0 10px; line-height: 1.45; } .cred-alert-btn { white-space: nowrap; } .cred-alert-link { color: var(--link); font-weight: 600; white-space: nowrap; } .cred-tile-chips { margin-left: auto; } /* ---- Manage actions in tool detail ---- */ .detail-actions { display: flex; align-items: center; gap: 8px; } .back-btn.danger { color: #e08a8a; } .back-btn.danger:hover { border-color: #c46a6a; color: #ff9a9a; } /* ---- Status text states ---- */ .svc-status.ok { color: var(--green); } .svc-status.error { color: #ff8a8a; } /* ---- App version in sidebar ---- */ .app-version { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 10px; color: var(--dim-2); text-align: center; } /* ---- Sign-out button ---- */ .signout-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; flex: none; font-size: 13px; } .signout-btn:hover { border-color: var(--card-hover-border); color: var(--text); } /* ---- Login screen ---- */ .login-screen { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; background: radial-gradient(120% 80% at 50% 32%, #15202b 0%, #0f1217 55%, #0b0e12 100%); } .login-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 50% 30%, rgba(139,166,194,.10), transparent 70%); } .login-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 40px; animation: fadeIn .4s ease both; } .login-logo-tile { width: 96px; height: 96px; border-radius: 24px; padding: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #e4ebf2, #c4d1dd); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); } .login-logo-tile img { width: 100%; height: 100%; object-fit: contain; display: block; } .login-heading { display: flex; flex-direction: column; align-items: center; gap: 10px; } .login-title { font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .login-sub { font-size: 11px; letter-spacing: .26em; color: #8ba6c2; padding-left: .26em; text-transform: uppercase; } .login-tagline { font-size: 15px; color: var(--muted); max-width: 380px; line-height: 1.55; } .login-btn { margin-top: 8px; background: #8ba6c2; border: none; border-radius: 11px; padding: 14px 30px; font-size: 14.5px; font-weight: 700; color: #0b0e12; cursor: pointer; transition: background .15s, transform .15s; } .login-btn:hover { background: #a3bcd4; transform: translateY(-1px); } .login-btn:disabled { opacity: .6; cursor: default; transform: none; background: #8ba6c2; } .login-status { min-height: 18px; font-size: 13px; color: var(--muted); } .login-footer { position: absolute; bottom: 26px; font-size: 10.5px; color: #3f4651; letter-spacing: .06em; } /* ---- Admin / Access screen ---- */ .admin-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 8px; } .admin-email { font-size: 14px; } .admin-role, .field .admin-role { width: auto; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); } .admin-tool { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 8px; } .admin-tool-name { font-weight: 650; margin-bottom: 10px; } .admin-checks { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .admin-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; } .note.ok { color: var(--green); } /* ---- Shared form controls reused by tools ---- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 14px; } .field textarea { min-height: 110px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--link); } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .btn { background: var(--link); color: #0b0e12; border: none; padding: 11px 18px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; } .btn:hover { filter: brightness(1.08); } .btn.secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .btn.secondary:hover { border-color: var(--card-hover-border); } .note { color: var(--muted); font-size: 13px; margin-top: 10px; } .error { color: #ff6b6b; } .link-group { margin-bottom: 20px; } .link-group h3 { font-size: 14px; margin: 0 0 10px; color: var(--muted); } .link-list { display: flex; flex-wrap: wrap; gap: 10px; } .link-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; } .link-btn:hover { border-color: var(--link); color: var(--link); } /* ---- Activity page ---- */ .act-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .act-clear { white-space: nowrap; padding: 8px 14px; font-size: 13px; } .act-filters { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .act-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; } .act-chip:hover { border-color: var(--card-hover-border); color: var(--text); } .act-chip.active { color: var(--text); border-color: var(--card-hover-border); background: var(--card); } .act-chip-n { font-size: 11px; color: var(--dim); font-weight: 700; } .act-chip.active .act-chip-n { color: var(--muted); } .act-list { list-style: none; margin: 0; padding: 0; } .act-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); } .act-row:last-child { border-bottom: none; } .act-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--muted); } .act-dot.app { background: var(--link); } .act-dot.tool { background: var(--gold); } .act-dot.backend { background: var(--green); } .act-main { flex: 1; min-width: 0; } .act-title { font-size: 14px; color: var(--text); line-height: 1.4; } .act-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; word-break: break-word; } .act-meta { display: flex; align-items: center; gap: 10px; flex: none; } .act-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--dim); } .act-tag.app { color: var(--link); border-color: rgba(169, 194, 216, .35); } .act-tag.tool { color: var(--gold); border-color: rgba(224, 199, 154, .35); } .act-tag.backend { color: var(--green); border-color: rgba(74, 222, 128, .35); } .act-time { font-size: 11.5px; color: var(--dim); white-space: nowrap; min-width: 56px; text-align: right; } /* ---- Confirmation modal ---- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(6, 8, 11, 0.6); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.12s ease; } .modal { width: 380px; max-width: calc(100% - 40px); background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5); animation: fadeIn 0.14s ease; } .modal-title { font-size: 17px; font-weight: 700; margin-bottom: 7px; } .modal-msg { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 22px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } .btn.danger { background: var(--red); color: #fff; } .btn.danger:hover { filter: brightness(1.08); } /* ---- Admin: Tool Status ---- */ .status-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; } .status-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .status-light { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--dim); } .status-light.ok { background: var(--green); } .status-light.warn { background: var(--amber); } .status-light.error { background: var(--red); } .status-light.off { background: var(--dim-2); } .status-light.running { background: var(--green); animation: tb-pulse 1.1s ease-in-out infinite; } .status-title { font-weight: 700; font-size: 15px; } .status-sub { margin-left: auto; font-size: 12px; color: var(--muted); } .status-rows { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 13px; } .status-rows .k { color: var(--muted); white-space: nowrap; } .status-rows code { font-size: 12px; padding: 1px 6px; border-radius: 5px; background: var(--border-soft); border: 1px solid var(--border); } @keyframes tb-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); } 50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } }