/* ══════════════════════════════════════════════════════════════════════ * FIDNT — SoftwareUI Theme · Windows 11 Task Manager scale * ───────────────────────────────────────────────────────────────────── * Activate : * Dark/light: data-theme="dark" | data-theme="light" * * Reference: Windows 11 Task Manager · Settings · File Explorer * * Design rules: * · Comfortable, readable text (12–14px, NOT tiny) * · Generous breathing room — items 36px+, padding 12–16px * · Segoe UI Variable / system-ui font stack * · Subtle Mica-like backgrounds (single tone, no gradients) * · 4px corner radius (Win11 Fluent) * · Active state: 3px accent bar on left + faint tint * · No shadows, no glow, no decorative framing * · Borders only as structural separators (1px solid neutral) * · All scrollbars hidden * · Affects: sidebar, footer, topbar, screens, tab bars, content * ══════════════════════════════════════════════════════════════════════ */ /* ── Dark tokens (Windows 11 Dark) ─────────────────────────────────── */ [data-ui="software"] { --sui-bg: #202020; /* Win11 dark surface */ --sui-surface: #2b2b2b; /* sidebar / topbar fill */ --sui-raised: #323232; /* card / input fill */ --sui-border: #3d3d3d; /* 1px separators */ --sui-border-sub: rgba(255,255,255,.06); --sui-text: #ffffff; /* primary text */ --sui-muted: #c0c0c0; /* secondary text */ --sui-faint: #8a8a8a; /* labels, captions */ --sui-active-bg: rgba(76,194,255,.10); --sui-active-bar: #4cc2ff; /* Win11 accent */ --sui-active: #4cc2ff; --sui-hover: rgba(255,255,255,.06); --sui-press: rgba(255,255,255,.10); --sui-mono: 'Cascadia Mono', Consolas, 'Courier New', monospace; --sui-sans: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* ── Light tokens (Windows 11 Light) ───────────────────────────────── */ [data-ui="software"][data-theme="light"] { --sui-bg: #f3f3f3; /* Win11 light surface */ --sui-surface: #fafafa; --sui-raised: #ffffff; --sui-border: #e0e0e0; --sui-border-sub: rgba(0,0,0,.05); --sui-text: #1a1a1a; --sui-muted: #424242; --sui-faint: #6b6b6b; --sui-active-bg: rgba(0,103,209,.08); --sui-active-bar: #0067d1; --sui-active: #0067d1; --sui-hover: rgba(0,0,0,.04); --sui-press: rgba(0,0,0,.08); } /* ── Remap global CSS vars to SoftwareUI palette ─────────────────── */ [data-ui="software"] { --bg-primary: var(--sui-bg); --bg-secondary: var(--sui-surface); --bg-tertiary: var(--sui-raised); --bg-card: var(--sui-raised); --bg-hover: var(--sui-hover); --bg-active: var(--sui-active-bg); --border: var(--sui-border); --border-subtle: var(--sui-border-sub); --text-primary: var(--sui-text); --text-secondary: var(--sui-muted); --text-muted: var(--sui-faint); --accent: var(--sui-active); --accent-muted: var(--sui-active-bg); --accent-glow: rgba(76,194,255,.12); --trust: #6ccb5f; --trust-soft: rgba(108,203,95,.12); --radius-sm: 4px; --radius: 4px; --radius-lg: 6px; --radius-xl: 6px; --radius-full: 4px; --topbar-h: 40px; --sidebar-w: 48px; --sidebar-expanded: 220px; --nav-h: 56px; font-family: var(--sui-sans) !important; background: var(--sui-bg); color: var(--sui-text); } /* ──────────────────────────────────────────────── SCROLLBARS — hidden everywhere ──────────────────────────────────────────────── */ [data-ui="software"] * { scrollbar-width: none !important; } [data-ui="software"] *::-webkit-scrollbar { display: none !important; } /* ──────────────────────────────────────────────── APP SHELL ──────────────────────────────────────────────── */ [data-ui="software"] html, [data-ui="software"] body, [data-ui="software"] #app { background: var(--sui-bg) !important; font-family: var(--sui-sans) !important; font-size: 13px !important; line-height: 1.45; } [data-ui="software"] .main { background: var(--sui-bg) !important; } /* ──────────────────────────────────────────────── SIDEBAR (Win11 Settings nav rail) ──────────────────────────────────────────────── */ [data-ui="software"] .sidebar { background: var(--sui-surface) !important; border-right: 1px solid var(--sui-border) !important; box-shadow: none !important; } /* Logo row — Win11-style title bar */ [data-ui="software"] .sidebar-logo { height: var(--topbar-h) !important; border-bottom: 1px solid var(--sui-border) !important; background: var(--sui-surface) !important; padding: 0 !important; } [data-ui="software"] .sidebar-logo-mark { width: 24px; height: 24px; background: var(--sui-active) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 4px !important; box-shadow: none !important; } [data-ui="software"] .sidebar.expanded .sidebar-logo { padding-left: 12px !important; } [data-ui="software"] .sidebar-logo-text { font-size: 13px !important; font-weight: 600 !important; color: var(--sui-text) !important; letter-spacing: 0 !important; } /* Nav items — 36px tall (Win11 settings) */ [data-ui="software"] .sidebar-nav { padding: 6px 4px !important; } [data-ui="software"] .sidebar-item { height: 36px !important; margin: 2px 0 !important; border-radius: 4px !important; color: var(--sui-muted) !important; font-size: 13px !important; font-weight: 400 !important; box-shadow: none !important; position: relative; transition: background .12s, color .12s !important; } [data-ui="software"] .sidebar-item:hover { background: var(--sui-hover) !important; color: var(--sui-text) !important; } [data-ui="software"] .sidebar-item:active { background: var(--sui-press) !important; } [data-ui="software"] .sidebar-item.active { background: var(--sui-active-bg) !important; color: var(--sui-text) !important; box-shadow: none !important; } /* Win11-style 3px accent bar on the left of active items */ [data-ui="software"] .sidebar-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--sui-active-bar); border-radius: 2px; } [data-ui="software"] .sidebar-item svg { width: 16px !important; height: 16px !important; } [data-ui="software"] .sidebar.expanded .sidebar-item { padding-left: 14px !important; } [data-ui="software"] .sidebar.expanded .sidebar-item span { margin-left: 12px !important; } /* Section dividers */ [data-ui="software"] .sidebar-section { height: 24px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; color: var(--sui-faint) !important; padding: 0 14px !important; text-transform: none !important; } [data-ui="software"] .sidebar:not(.expanded) .sidebar-section { height: 1px !important; margin: 4px 12px !important; background: var(--sui-border) !important; padding: 0 !important; } /* Badges */ [data-ui="software"] .sidebar-item-badge { font-size: 10px !important; color: var(--sui-faint) !important; font-family: var(--sui-mono) !important; font-weight: 500 !important; } /* Bottom area */ [data-ui="software"] .sidebar-bottom { border-top: 1px solid var(--sui-border) !important; padding: 6px 4px !important; background: var(--sui-surface) !important; } /* ──────────────────────────────────────────────── TOPBAR (Win11 title-bar style) ──────────────────────────────────────────────── */ [data-ui="software"] .topbar { height: var(--topbar-h) !important; background: var(--sui-surface) !important; border-bottom: 1px solid var(--sui-border) !important; padding: 0 14px !important; gap: 6px !important; box-shadow: none !important; } [data-ui="software"] .topbar-title { font-size: 14px !important; font-weight: 600 !important; color: var(--sui-text) !important; } [data-ui="software"] .icon-btn { width: 32px !important; height: 32px !important; border-radius: 4px !important; color: var(--sui-muted) !important; box-shadow: none !important; transition: background .12s !important; } [data-ui="software"] .icon-btn:hover { background: var(--sui-hover) !important; color: var(--sui-text) !important; } [data-ui="software"] .icon-btn:active { background: var(--sui-press) !important; } [data-ui="software"] .icon-btn svg { width: 16px !important; height: 16px !important; } /* ──────────────────────────────────────────────── SCREENS ──────────────────────────────────────────────── */ [data-ui="software"] .screen, [data-ui="software"] .screen-scroll { background: var(--sui-bg) !important; } /* ──────────────────────────────────────────────── SCREEN SUBNAV — Row A (Win11 pivot tabs) ──────────────────────────────────────────────── */ [data-ui="software"] .screen-subnav { height: 40px !important; background: var(--sui-bg) !important; border-bottom: 1px solid var(--sui-border) !important; padding: 0 12px !important; overflow: hidden !important; } [data-ui="software"] .subnav-tab { height: 40px !important; padding: 0 14px !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sui-muted) !important; font-family: var(--sui-sans) !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; transition: color .12s, background .12s, border-color .12s !important; } [data-ui="software"] .subnav-tab:hover { background: var(--sui-hover) !important; color: var(--sui-text) !important; } [data-ui="software"] .subnav-tab.active { color: var(--sui-text) !important; border-bottom: 2px solid var(--sui-active-bar) !important; background: transparent !important; } [data-ui="software"] .subnav-icon { width: 14px !important; height: 14px !important; } /* ──────────────────────────────────────────────── CMD RAIL (right zone of Row A) ──────────────────────────────────────────────── */ [data-ui="software"] .cmd-rail { gap: .4rem !important; } [data-ui="software"] .cmd-rail-avatar { width: 22px !important; height: 22px !important; font-size: 10px !important; background: var(--sui-active) !important; border: none !important; color: #ffffff !important; border-radius: 4px !important; box-shadow: none !important; } [data-ui="software"] .cmd-rail-handle { font-size: 12px !important; color: var(--sui-text) !important; font-family: var(--sui-sans) !important; font-weight: 400 !important; } [data-ui="software"] .cmd-rail-pill, [data-ui="software"] .cmd-rail-badge { background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; color: var(--sui-muted) !important; font-size: 10px !important; border-radius: 4px !important; padding: 2px 6px !important; } [data-ui="software"] .cmd-rail-score { color: var(--sui-text) !important; font-size: 12px !important; font-family: var(--sui-mono) !important; font-weight: 500 !important; } [data-ui="software"] .cmd-rail-dot { width: 8px !important; height: 8px !important; background: #6ccb5f !important; box-shadow: none !important; } [data-ui="software"] .cmd-rail-dot.offline { background: var(--sui-faint) !important; } [data-ui="software"] .cmd-rail-sep { background: var(--sui-border) !important; height: 14px !important; } [data-ui="software"] .cmd-rail-stat .v { font-size: 12px !important; color: var(--sui-text) !important; font-family: var(--sui-mono) !important; font-weight: 500 !important; } [data-ui="software"] .cmd-rail-stat .l { font-size: 10px !important; color: var(--sui-faint) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; } /* ──────────────────────────────────────────────── ID TAB BAR — Row B ──────────────────────────────────────────────── */ [data-ui="software"] .id-tab-bar { height: 36px !important; background: var(--sui-bg) !important; border-bottom: 1px solid var(--sui-border) !important; padding: 0 12px !important; top: 40px !important; } [data-ui="software"] .id-tab-btn { height: 36px !important; padding: 0 12px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sui-muted) !important; font-family: var(--sui-sans) !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; } [data-ui="software"] .id-tab-btn:hover { background: var(--sui-hover) !important; color: var(--sui-text) !important; } [data-ui="software"] .id-tab-btn.active { color: var(--sui-text) !important; border-bottom: 2px solid var(--sui-active-bar) !important; background: transparent !important; } [data-ui="software"] .id-action-btn { width: 28px !important; height: 28px !important; border: 1px solid var(--sui-border) !important; background: var(--sui-raised) !important; color: var(--sui-muted) !important; font-size: 12px !important; border-radius: 4px !important; } [data-ui="software"] .id-action-btn:hover { background: var(--sui-hover) !important; border-color: var(--sui-border) !important; color: var(--sui-text) !important; } /* ──────────────────────────────────────────────── CHANNEL TABS (Communicate) ──────────────────────────────────────────────── */ [data-ui="software"] .channel-tabs { background: var(--sui-bg) !important; border-bottom: 1px solid var(--sui-border) !important; } [data-ui="software"] .channel-tab { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--sui-muted) !important; padding: 10px 12px !important; border-bottom: 2px solid transparent !important; } [data-ui="software"] .channel-tab:hover { background: var(--sui-hover) !important; color: var(--sui-text) !important; } [data-ui="software"] .channel-tab.active { color: var(--sui-text) !important; border-bottom: 2px solid var(--sui-active-bar) !important; background: transparent !important; } [data-ui="software"] .channel-tab svg { width: 14px !important; height: 14px !important; } [data-ui="software"] .ctab-badge { font-size: 10px !important; background: var(--sui-active) !important; color: #ffffff !important; border-radius: 4px !important; padding: 1px 5px !important; font-weight: 600 !important; } /* ──────────────────────────────────────────────── MSG SUB-TABS ──────────────────────────────────────────────── */ [data-ui="software"] .msg-sub-tabs { background: var(--sui-bg) !important; border-bottom: 1px solid var(--sui-border) !important; } [data-ui="software"] .msg-sub-tab { font-size: 12px !important; font-family: var(--sui-sans) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sui-muted) !important; font-weight: 500 !important; padding: 8px 10px !important; border-bottom: 2px solid transparent !important; } [data-ui="software"] .msg-sub-tab.active { color: var(--sui-text) !important; border-bottom-color: var(--sui-active-bar) !important; } /* ──────────────────────────────────────────────── CHAT SIDEBAR ──────────────────────────────────────────────── */ [data-ui="software"] .chat-sidebar { background: var(--sui-surface) !important; border-right: 1px solid var(--sui-border) !important; width: 240px !important; } [data-ui="software"] .chat-sidebar-search { padding: 8px 10px !important; } [data-ui="software"] .search-input { height: 30px !important; font-size: 13px !important; background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; border-radius: 4px !important; color: var(--sui-text) !important; padding: 0 10px !important; } /* ──────────────────────────────────────────────── LOCAL PROTO STATUS BAR ──────────────────────────────────────────────── */ [data-ui="software"] .local-proto-bar { background: var(--sui-surface) !important; border-bottom: 1px solid var(--sui-border) !important; height: 28px !important; padding: 0 12px !important; } [data-ui="software"] .local-proto-label { font-size: 11px !important; color: var(--sui-faint) !important; letter-spacing: 0 !important; font-weight: 500 !important; } [data-ui="software"] .local-net-badge { font-size: 10px !important; padding: 2px 6px !important; border-radius: 4px !important; font-weight: 500 !important; } /* ──────────────────────────────────────────────── P&E SCREEN VARIABLE OVERRIDES ──────────────────────────────────────────────── */ [data-ui="software"] #screen-identity, [data-ui="software"] #screen-agency, [data-ui="software"] #screen-govern { --bg: var(--sui-bg) !important; --bg-primary: var(--sui-bg) !important; --bg-secondary: var(--sui-surface) !important; --bg-tertiary: var(--sui-raised) !important; --bg-card: var(--sui-raised) !important; --bg-hover: var(--sui-hover) !important; --bg-active: var(--sui-active-bg) !important; --border: var(--sui-border) !important; --border-subtle: var(--sui-border-sub) !important; --accent: var(--sui-active) !important; --text-primary: var(--sui-text) !important; --text-secondary: var(--sui-muted) !important; --text-muted: var(--sui-faint) !important; background: var(--sui-bg) !important; } /* ──────────────────────────────────────────────── CONTENT ELEMENTS ──────────────────────────────────────────────── */ [data-ui="software"] .id-panel { background: var(--sui-bg) !important; } [data-ui="software"] .section-title { font-family: var(--sui-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--sui-text) !important; letter-spacing: 0 !important; } [data-ui="software"] .id-field-label { font-family: var(--sui-sans) !important; font-size: 11px !important; font-weight: 500 !important; color: var(--sui-faint) !important; letter-spacing: 0 !important; text-transform: none !important; } [data-ui="software"] .id-contact-row { border-bottom: 1px solid var(--sui-border) !important; color: var(--sui-text) !important; font-size: 13px !important; padding: 10px 0 !important; } [data-ui="software"] .id-contact-icon { color: var(--sui-faint) !important; } [data-ui="software"] .id-copy-btn { border: 1px solid var(--sui-border) !important; background: var(--sui-raised) !important; color: var(--sui-muted) !important; font-size: 11px !important; border-radius: 4px !important; padding: 4px 8px !important; } [data-ui="software"] .id-copy-btn:hover { background: var(--sui-hover) !important; color: var(--sui-text) !important; } [data-ui="software"] .id-fid-handle { color: var(--sui-text) !important; font-family: var(--sui-mono) !important; font-size: 18px !important; font-weight: 500 !important; } [data-ui="software"] .id-stream-sym { color: var(--sui-active) !important; } /* x-badge */ [data-ui="software"] .x-badge { background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; color: var(--sui-muted) !important; font-size: 11px !important; border-radius: 4px !important; padding: 2px 8px !important; font-weight: 500 !important; } /* ──────────────────────────────────────────────── MOBILE BOTTOM NAV — comfortable Win11 phone scale ──────────────────────────────────────────────── */ [data-ui="software"] .bottom-nav { background: var(--sui-surface) !important; border-top: 1px solid var(--sui-border) !important; } [data-ui="software"] .nav-item { font-size: 11px !important; font-weight: 500 !important; color: var(--sui-muted) !important; } [data-ui="software"] .nav-item.active { color: var(--sui-active) !important; } [data-ui="software"] .nav-item svg { width: 20px !important; height: 20px !important; } [data-ui="software"] .nav-dot { background: var(--sui-active) !important; } /* ──────────────────────────────────────────────── FOOTER ──────────────────────────────────────────────── */ [data-ui="software"] .powered-badge { font-size: 11px !important; color: var(--sui-faint) !important; border-top: 1px solid var(--sui-border) !important; padding: 12px 16px !important; } /* ──────────────────────────────────────────────── TOASTS ──────────────────────────────────────────────── */ [data-ui="software"] .toast { background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; color: var(--sui-text) !important; font-size: 13px !important; border-radius: 6px !important; box-shadow: 0 4px 16px rgba(0,0,0,.20) !important; } /* ──────────────────────────────────────────────── BUTTONS — Win11 Fluent ──────────────────────────────────────────────── */ [data-ui="software"] .btn { font-size: 13px !important; height: 32px !important; border-radius: 4px !important; font-weight: 400 !important; font-family: var(--sui-sans) !important; box-shadow: none !important; padding: 0 14px !important; transition: background .12s !important; } [data-ui="software"] .btn-primary { background: var(--sui-active) !important; color: #ffffff !important; border: 1px solid var(--sui-active) !important; box-shadow: none !important; } [data-ui="software"] .btn-primary:hover { background: var(--sui-active-bar) !important; filter: brightness(1.08); } [data-ui="software"] .btn-ghost { background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; color: var(--sui-text) !important; } [data-ui="software"] .btn-ghost:hover { background: var(--sui-hover) !important; } [data-ui="software"] .btn-sm { height: 28px !important; font-size: 12px !important; padding: 0 10px !important; } /* ──────────────────────────────────────────────── INPUTS — Win11 form fields ──────────────────────────────────────────────── */ [data-ui="software"] input, [data-ui="software"] select, [data-ui="software"] textarea { background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; color: var(--sui-text) !important; border-radius: 4px !important; font-family: var(--sui-sans) !important; font-size: 13px !important; padding: 6px 10px !important; } [data-ui="software"] input:hover, [data-ui="software"] select:hover, [data-ui="software"] textarea:hover { border-color: var(--sui-faint) !important; } [data-ui="software"] input:focus, [data-ui="software"] select:focus, [data-ui="software"] textarea:focus { border-color: var(--sui-active) !important; outline: none !important; box-shadow: 0 0 0 1px var(--sui-active) !important; } /* ──────────────────────────────────────────────── CARDS / PANELS ──────────────────────────────────────────────── */ [data-ui="software"] .auth-card, [data-ui="software"] .card, [data-ui="software"] [style*="border-radius:12px"], [data-ui="software"] [style*="border-radius: 12px"] { background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; border-radius: 6px !important; box-shadow: none !important; } /* ──────────────────────────────────────────────── QR / OVERLAY MODALS ──────────────────────────────────────────────── */ [data-ui="software"] .qr-card, [data-ui="software"] .modal-card { background: var(--sui-raised) !important; border: 1px solid var(--sui-border) !important; border-radius: 8px !important; box-shadow: 0 8px 32px rgba(0,0,0,.30) !important; }