/*
 * MONETIC UI - CYBERPUNK PATRIOT EDITION
 * ======================================
 * Based on AN-ELITE DESIGN SYSTEM
 * Red, White & Blue cyberpunk aesthetic
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================================
   CSS CUSTOM PROPERTIES (Cyberpunk Patriot Design Tokens)
   ============================================================================ */

:root {
    /* Primary Color Palette - Patriotic Neon */
    --primary-blue: #00a8ff;
    --primary-blue-glow: #00a8ff99;
    --secondary-blue: #0052cc;
    --navy-dark: #001a33;
    
    --accent-red: #ff1744;
    --accent-red-glow: #ff1744cc;
    --accent-red-dark: #cc0033;
    
    --patriot-white: #f0f4ff;
    --star-white: #ffffff;
    
    /* Background Colors - Deep Navy */
    --dark-bg: #0a0f1a;
    --card-bg: #0d1929;
    --modal-bg: #101d33;
    --panel-bg: linear-gradient(135deg, #0d1929 0%, #1a2744 100%);
    
    /* Grid and Effects */
    --grid-color: #00a8ff15;
    --border-glow: #00a8ff80;
    --border-glow-red: #ff174480;
    
    /* Typography */
    --text-primary: #ffffff;
    --text-secondary: #b8c7e0;
    --text-accent: #00a8ff;
    --text-accent-red: #ff1744;
    --text-muted: #6b7c93;
    
    /* Status Colors */
    --status-success: #00ff88;
    --status-warning: #ffaa00;
    --status-error: #ff1744;
    --status-info: #00a8ff;
    
    /* Spacing Scale */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-pill: 25px;
    
    /* Animation */
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    
    /* Shadows */
    --shadow-glow-blue: 0 0 20px var(--primary-blue-glow);
    --shadow-glow-red: 0 0 20px var(--accent-red-glow);
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--dark-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    overflow: hidden;
    
    /* Cyberpunk grid background - brightened 10% */
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(0, 168, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.07) 1px, transparent 1px);
    background-size: 400px 400px, 500px 500px, 50px 50px, 50px 50px;
    background-color: var(--dark-bg);
}

/* Patriot stripe at bottom */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--accent-red) 0%, 
        var(--accent-red) 33%, 
        var(--patriot-white) 33%, 
        var(--patriot-white) 66%, 
        var(--primary-blue) 66%, 
        var(--primary-blue) 100%
    );
    z-index: 9999;
    pointer-events: none;
}

/* ============================================================================
   WORKSPACE
   ============================================================================ */

.monetic-app {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-panels {
    flex: 1;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) var(--dark-bg);
}

/* ============================================================================
   PANEL CONTAINER - Flex grow for equal distribution
   ============================================================================ */

.panel-container {
    /* Fixed width panels - no flex grow/shrink */
    flex: 0 0 auto;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: box-shadow var(--duration-fast);
    
    /* Frosted glass effect */
    background: rgba(13, 25, 41, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(0, 168, 255, 0.3);
    
    /* Subtle inner glow */
    box-shadow: inset 0 0 40px rgba(0, 168, 255, 0.03);
}

/* Last panel fills remaining space */
.panel-container:last-child {
    flex: 1 0 auto;
}

.panel-container:last-child {
    border-right: none;
}

.panel-container.focused {
    background: rgba(13, 25, 41, 0.9);
    box-shadow: 
        inset 0 0 40px rgba(0, 168, 255, 0.08),
        inset 0 0 0 1px rgba(0, 168, 255, 0.5);
}

/* Panel header with patriot stripe */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 26, 51, 0.7);
    border-bottom: 1px solid rgba(0, 168, 255, 0.3);
    min-height: 44px;
    position: relative;
}

.panel-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--accent-red),
        var(--patriot-white),
        var(--primary-blue)
    );
}

.panel-header-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-blue);
}

.panel-code {
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 6px;
    background: rgba(0, 168, 255, 0.15);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    letter-spacing: 1px;
}

.panel-header-controls {
    display: flex;
    gap: var(--spacing-xs);
}

.panel-control {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--duration-fast);
}

.panel-control:hover {
    background: rgba(0, 168, 255, 0.1);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.panel-control.close:hover {
    background: rgba(255, 23, 68, 0.2);
    border-color: var(--accent-red);
    color: var(--accent-red);
}

.panel-content {
    flex: 1;
    overflow: hidden;
}

/* ============================================================================
   RESIZE HANDLE
   ============================================================================ */

.resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s ease;
}

.resize-handle:hover {
    background: linear-gradient(180deg, var(--accent-red), var(--primary-blue));
    box-shadow: 0 0 10px var(--primary-blue-glow);
}

/* Global resizing state - applied to body during drag */
body.resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

body.resizing * {
    cursor: col-resize !important;
}

body.resizing .resize-handle {
    background: linear-gradient(180deg, var(--accent-red), var(--primary-blue));
    box-shadow: 0 0 10px var(--primary-blue-glow);
}

/* ============================================================================
   CHAT PANEL
   ============================================================================ */

.chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
}

.chat-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
}

.chat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.chat-navigation {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid rgba(0, 168, 255, 0.2);
    background: rgba(0, 26, 51, 0.5);
}

.chat-input-container {
    padding: var(--spacing-md);
    background: rgba(0, 26, 51, 0.7);
    border-top: 1px solid rgba(0, 168, 255, 0.3);
}

/* Session Manager */
.session-manager {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
}

.current-thread {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--duration-fast);
}

.current-thread:hover {
    background: rgba(0, 168, 255, 0.15);
    box-shadow: var(--shadow-glow-blue);
}

.new-thread {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    box-shadow: var(--shadow-glow-blue);
    transition: all var(--duration-fast);
}

.new-thread:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px var(--primary-blue-glow);
}

.thread-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 48px;
    margin-top: var(--spacing-xs);
    background: var(--modal-bg);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-md);
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), var(--shadow-glow-blue);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.thread-item {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    pointer-events: auto;
    position: relative;
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--duration-fast);
}

.thread-item:hover {
    background: rgba(0, 168, 255, 0.1);
    color: var(--primary-blue);
}

.thread-item.active {
    background: rgba(0, 168, 255, 0.2);
    color: var(--primary-blue);
    border-left: 3px solid var(--primary-blue);
}

/* Messages */
.message-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow-y: auto;
    scroll-behavior: smooth;
}

.message {
    max-width: 85%;
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
}

.message-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
    color: white;
    box-shadow: var(--shadow-glow-blue);
}

.message-agent {
    align-self: flex-start;
    background: var(--navy-dark);
    border: 1px solid var(--primary-blue);
    color: var(--text-secondary);
}

.message-system {
    align-self: center;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
    font-size: 0.65rem;
    font-family: 'Orbitron', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.message-content {
    line-height: 1.6;
}

/* Markdown Content Styling */
.markdown-content {
    line-height: 1.7;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: var(--cyber-cyan);
    font-family: 'Orbitron', monospace;
    margin: 0.8em 0 0.4em 0;
    font-weight: 600;
}

.markdown-content h1 {
    font-size: 1.4rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.3em;
}

.markdown-content h2 {
    font-size: 1.2rem;
}

.markdown-content h3 {
    font-size: 1rem;
    color: var(--patriot-gold);
}

.markdown-content p {
    margin: 0.5em 0;
}

.markdown-content ul,
.markdown-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.markdown-content li {
    margin: 0.25em 0;
}

.markdown-content strong {
    color: var(--patriot-gold);
    font-weight: 600;
}

.markdown-content em {
    color: var(--text-secondary);
    font-style: italic;
}

.markdown-content code {
    background: rgba(0, 0, 0, 0.5);
    color: var(--cyber-cyan);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85em;
}

.markdown-content pre {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin: 0.75em 0;
    overflow-x: auto;
}

.markdown-content pre code {
    background: none;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75em 0;
    font-size: 0.85em;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--border-color);
    padding: 0.4em 0.6em;
    text-align: left;
}

.markdown-content th {
    background: rgba(0, 168, 255, 0.1);
    color: var(--cyber-cyan);
    font-weight: 600;
}

.markdown-content tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.2);
}

.markdown-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    margin: 1em 0;
}

.markdown-content blockquote {
    border-left: 3px solid var(--patriot-gold);
    margin: 0.75em 0;
    padding: 0.5em 1em;
    background: rgba(255, 215, 0, 0.05);
    color: var(--text-secondary);
}

.markdown-content a {
    color: var(--cyber-cyan);
    text-decoration: none;
    border-bottom: 1px dashed var(--cyber-cyan);
}

.markdown-content a:hover {
    color: var(--patriot-gold);
    border-color: var(--patriot-gold);
}

/* Task lists */
.markdown-content input[type="checkbox"] {
    margin-right: 0.5em;
    accent-color: var(--cyber-cyan);
}

/* Server-rendered diagrams (mermaid, etc.) */
.markdown-content .diagram {
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(10, 25, 47, 0.9);
    border: 1px solid var(--cyber-cyan);
    border-radius: var(--radius-md);
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.15);
    /* Container fits content */
    display: inline-block;
    max-width: 100%;
    transition: all 0.3s ease;
}

/* SVG sizing - use width to control size, container follows */
.markdown-content .diagram svg {
    display: block;
    /* Default: small thumbnail */
    width: 280px;
    height: auto;
    cursor: zoom-in;
    transition: width 0.3s ease;
}

/* Expand on hover */
.markdown-content .diagram:hover svg {
    width: 500px;
    cursor: zoom-out;
}

/* Full size on click/active - caps at container width */
.markdown-content .diagram:active svg {
    width: 100%;
    max-width: 800px;
}

/* Hint text */
.markdown-content .diagram figcaption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--cyber-cyan);
}

.markdown-content .diagram figcaption::after {
    content: " (hover to zoom)";
    opacity: 0.6;
    font-size: 0.7rem;
}

.markdown-content .diagram figcaption {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--cyber-cyan);
    text-align: center;
    font-style: italic;
}

/* Monochromatic cyan theme for diagrams */
.markdown-content .diagram svg * {
    /* Reset all fills and strokes */
}

/* All text white */
.markdown-content .diagram svg text,
.markdown-content .diagram svg tspan,
.markdown-content .diagram svg .nodeLabel,
.markdown-content .diagram svg .label,
.markdown-content .diagram svg .edgeLabel span,
.markdown-content .diagram svg foreignObject div,
.markdown-content .diagram svg foreignObject span,
.markdown-content .diagram svg foreignObject p {
    fill: #ffffff !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Node boxes - monochromatic cyan */
.markdown-content .diagram svg rect,
.markdown-content .diagram svg .node rect,
.markdown-content .diagram svg .node polygon,
.markdown-content .diagram svg .basic,
.markdown-content .diagram svg .label-container {
    fill: rgba(0, 168, 255, 0.2) !important;
    stroke: var(--cyber-cyan) !important;
    stroke-width: 2px !important;
}

/* Edges/arrows - white for visibility */
.markdown-content .diagram svg path.flowchart-link,
.markdown-content .diagram svg .edgePath path,
.markdown-content .diagram svg line {
    stroke: #ffffff !important;
    stroke-width: 2px !important;
}

/* Arrow markers - white */
.markdown-content .diagram svg marker path,
.markdown-content .diagram svg .arrowMarkerPath {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Edge labels background */
.markdown-content .diagram svg .edgeLabel rect,
.markdown-content .diagram svg .labelBkg {
    fill: rgba(10, 25, 47, 0.95) !important;
    opacity: 1 !important;
}

/* Cluster/subgraph boxes */
.markdown-content .diagram svg .cluster rect {
    fill: rgba(0, 168, 255, 0.08) !important;
    stroke: rgba(0, 168, 255, 0.5) !important;
}

/* ============================================================================
   ACTION BUTTONS (from an-agent action catalog)
   ============================================================================ */

/* Base action button */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin: 0.5rem 0.25rem;
    border-radius: var(--radius-md);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Interactive actions (forms, wizards) - Blue theme */
.action-btn.interactive {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.action-btn.interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
}

/* Approval actions (biometric, signing) - Green theme */
.action-btn.approval {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.action-btn.approval:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, #34d399, #10b981);
}

/* Notification actions - Subtle gray theme */
.action-btn.notification {
    background: linear-gradient(135deg, #4b5563, #374151);
    color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.3);
}

.action-btn.notification:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.4);
}

/* Action button icon */
.action-btn .action-icon {
    font-size: 1.1rem;
}

/* Action button label */
.action-btn .action-label {
    white-space: nowrap;
}

/* Active/pressed state */
.action-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Disabled state */
.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Group of actions */
.markdown-content .action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.message.streaming .typing-indicator {
    color: var(--accent-red);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Chat Input */
.chat-input {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

.chat-input-field {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--card-bg);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    resize: none;
    outline: none;
    transition: all var(--duration-fast);
}

.chat-input-field:focus {
    box-shadow: var(--shadow-glow-blue);
}

.chat-input-field::placeholder {
    color: var(--text-muted);
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.chat-send-button {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-red-dark), var(--accent-red));
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    cursor: pointer;
    font-size: 18px;
    box-shadow: var(--shadow-glow-red);
    transition: all var(--duration-fast);
}

.chat-send-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 30px var(--accent-red-glow);
}

.chat-send-button:disabled {
    background: var(--navy-dark);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.chat-disconnected {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 23, 68, 0.2);
    border: 1px solid var(--accent-red);
    border-radius: var(--radius-sm);
    color: var(--accent-red);
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

/* Chat Navigation */
/* Chat action bar - right justified user actions */
.chat-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 0;
}

/* Legacy chat-nav for backwards compat */
.chat-nav {
    display: flex;
    gap: var(--spacing-sm);
}

.chat-nav-button {
    height: 32px;
    padding: 0 var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all var(--duration-fast);
}

.chat-nav-button:hover {
    background: rgba(0, 168, 255, 0.2);
    color: var(--primary-blue);
    box-shadow: var(--shadow-glow-blue);
}

.chat-nav-button.active {
    background: var(--primary-blue);
    color: var(--dark-bg);
    box-shadow: var(--shadow-glow-blue);
}

.nav-label {
    font-weight: 700;
}

/* ============================================================================
   PLACEHOLDER PANEL
   ============================================================================ */

.placeholder-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--spacing-xl);
}

.placeholder-content {
    text-align: center;
}

.placeholder-code {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: var(--spacing-md);
    color: var(--primary-blue);
    opacity: 0.4;
    letter-spacing: 4px;
}

.placeholder-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-blue);
}

.placeholder-message {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================================================
   PANEL OPENER
   ============================================================================ */

.panel-opener {
    position: relative;
    z-index: 100;
}

.panel-opener-toggle {
    height: 28px;
    padding: 0 var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    color: var(--primary-blue);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: 'IBM Plex Mono', monospace;
    transition: all var(--duration-fast);
    flex-shrink: 0;
}

.panel-opener-toggle:hover {
    background: rgba(0, 168, 255, 0.2);
    box-shadow: var(--shadow-glow-blue);
}

.panel-opener-toggle.active {
    background: var(--primary-blue);
    color: var(--dark-bg);
    box-shadow: var(--shadow-glow-blue);
}

.panel-opener-menu {
    position: absolute;
    bottom: 36px;
    right: 0;
    background: var(--modal-bg);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), var(--shadow-glow-blue);
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.panel-opener-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    transition: all var(--duration-fast);
}

.panel-opener-item:hover {
    background: rgba(0, 168, 255, 0.15);
    color: var(--primary-blue);
}

.panel-opener-item .icon {
    width: 28px;
    text-align: center;
    font-size: 16px;
}

.panel-opener-divider {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.7rem;
    color: var(--patriot-gold);
    text-align: center;
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-xs);
}

/* ============================================================================
   MINIMIZED TRAY
   ============================================================================ */

.workspace-tray {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--navy-dark);
    border-top: 1px solid var(--primary-blue);
}

.tray-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--duration-fast);
}

.tray-item:hover {
    background: rgba(0, 168, 255, 0.2);
    color: var(--primary-blue);
    box-shadow: var(--shadow-glow-blue);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-pill);
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
    color: white;
    box-shadow: var(--shadow-glow-blue);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 30px var(--primary-blue-glow);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--primary-blue);
    color: var(--dark-bg);
    box-shadow: var(--shadow-glow-blue);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-md);
}

.btn-icon:hover:not(:disabled) {
    background: rgba(0, 168, 255, 0.1);
    color: var(--primary-blue);
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card {
    background: var(--card-bg);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0, 168, 255, 0.05);
}

.card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, 
        var(--accent-red),
        var(--patriot-white),
        var(--primary-blue)
    );
}

.card-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
    background: var(--navy-dark);
}

.card-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-blue);
}

.card-body {
    padding: var(--spacing-md);
}

/* ============================================================================
   SCROLLBARS - Patriot Style
   ============================================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-blue), var(--accent-red));
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-red), var(--primary-blue));
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes pulse-patriot {
    0%, 100% {
        box-shadow: 
            0 0 10px var(--primary-blue-glow),
            0 0 20px rgba(0, 168, 255, 0.3);
    }
    50% {
        box-shadow: 
            0 0 20px var(--accent-red-glow),
            0 0 40px rgba(255, 23, 68, 0.3);
    }
}

.pulse-patriot {
    animation: pulse-patriot 2s ease-in-out infinite;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.text-blue { color: var(--primary-blue); }
.text-red { color: var(--accent-red); }
.text-white { color: var(--patriot-white); }
.text-success { color: var(--status-success); }
.text-warning { color: var(--status-warning); }
.text-muted { color: var(--text-muted); }

.glow-blue { box-shadow: var(--shadow-glow-blue); }
.glow-red { box-shadow: var(--shadow-glow-red); }

/* ============================================================================
   ACCOUNTS PANEL
   ============================================================================ */

.accounts-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    height: 100%;
}

.accounts-summary {
    text-align: center;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(0, 168, 255, 0.1), rgba(255, 23, 68, 0.05));
    border-radius: var(--radius-md);
    border: 1px solid var(--primary-blue);
}

.summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.summary-amount {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-shadow: 0 0 20px var(--primary-blue-glow);
}

.accounts-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.account-card {
    padding: var(--spacing-md);
    background: rgba(13, 25, 41, 0.6);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.account-card:hover {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.05);
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.account-name {
    font-weight: 600;
    color: var(--patriot-white);
}

.account-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    background: rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-pill);
    color: var(--primary-blue);
}

.account-balance {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--patriot-white);
}

.account-currency {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: var(--spacing-xs);
}

.account-chain {
    font-size: 0.7rem;
    color: var(--primary-blue);
    margin-top: var(--spacing-xs);
}

.accounts-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.action-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-blue);
    color: var(--dark-bg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: var(--accent-cyan);
    box-shadow: 0 0 20px var(--primary-blue-glow);
}

.action-btn.secondary {
    background: transparent;
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
}

.action-btn.secondary:hover {
    background: rgba(0, 168, 255, 0.1);
}

/* ============================================================================
   TRANSACTIONS PANEL
   ============================================================================ */

.transactions-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.transactions-filters {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
}

.filter-select,
.search-input {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(13, 25, 41, 0.8);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--patriot-white);
    font-size: 0.85rem;
}

.filter-select:focus,
.search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.filter-group {
    flex-shrink: 0;
}

.search-group {
    flex: 1;
}

.search-input {
    width: 100%;
}

.transactions-list {
    flex: 1;
    overflow-y: auto;
}

.transaction-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
    transition: background 0.2s ease;
}

.transaction-row:hover {
    background: rgba(0, 168, 255, 0.05);
}

.tx-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-md);
}

.tx-type-badge {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--primary-blue);
}

.tx-details {
    flex: 1;
}

.tx-counterparty {
    font-weight: 600;
    color: var(--patriot-white);
    margin-bottom: 2px;
}

.tx-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tx-amount-section {
    text-align: right;
}

.tx-amount {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}

.tx-amount.amount-positive {
    color: var(--status-success);
}

.tx-amount.amount-negative {
    color: var(--accent-red);
}

.tx-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.tx-status.status-completed {
    color: var(--status-success);
}

.tx-status.status-pending {
    color: var(--status-warning);
}

.tx-status.status-failed {
    color: var(--accent-red);
}

.transactions-footer {
    padding: var(--spacing-md);
    text-align: center;
}

.load-more-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: transparent;
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-more-btn:hover {
    background: rgba(0, 168, 255, 0.1);
}

/* ============================================================================
   TRANSFER PANEL
   ============================================================================ */

.transfer-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-md);
}

.transfer-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.transfer-progress .step {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 255, 0.1);
    border: 2px solid rgba(0, 168, 255, 0.3);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.transfer-progress .step.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--dark-bg);
    box-shadow: 0 0 15px var(--primary-blue-glow);
}

.step-connector {
    width: 30px;
    height: 2px;
    background: rgba(0, 168, 255, 0.3);
}

.transfer-content {
    flex: 1;
    overflow-y: auto;
}

.transfer-step {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--patriot-white);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.quick-recipients {
    margin-bottom: var(--spacing-lg);
}

.section-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-right: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
}

.recipient-chip:hover {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.2);
}

.recipient-avatar {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-blue);
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--dark-bg);
}

.recipient-name {
    font-size: 0.8rem;
    color: var(--patriot-white);
}

.recipient-input-group,
.memo-input-group {
    margin-bottom: var(--spacing-md);
}

.input-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.transfer-input {
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(13, 25, 41, 0.8);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--patriot-white);
    font-size: 1rem;
}

.transfer-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 10px var(--primary-blue-glow);
}

.amount-input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.currency-symbol {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.amount-input {
    width: 200px;
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--primary-blue);
    color: var(--patriot-white);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.amount-input:focus {
    outline: none;
}

.balance-info {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.amount-presets {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.preset-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    background: transparent;
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-pill);
    color: var(--primary-blue);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-btn:hover {
    background: rgba(0, 168, 255, 0.1);
    border-color: var(--primary-blue);
}

.routes-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.route-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: rgba(13, 25, 41, 0.6);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.route-option:hover {
    border-color: var(--primary-blue);
}

.route-option.selected {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.1);
    box-shadow: 0 0 15px var(--primary-blue-glow);
}

.route-name {
    font-weight: 600;
    color: var(--patriot-white);
    margin-bottom: 2px;
}

.route-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.route-check {
    font-size: 1.25rem;
    color: var(--primary-blue);
}

.review-summary {
    background: rgba(13, 25, 41, 0.6);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.review-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.review-row:last-child {
    border-bottom: none;
}

.review-row.total {
    border-top: 2px solid var(--primary-blue);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
}

.review-label {
    color: var(--text-muted);
}

.review-value {
    font-weight: 600;
    color: var(--patriot-white);
}

.review-row.total .review-value {
    color: var(--primary-blue);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.step-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.back-btn {
    flex: 1;
    padding: var(--spacing-md);
    background: transparent;
    border: 1px solid rgba(0, 168, 255, 0.3);
    color: var(--text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.next-btn {
    flex: 2;
    padding: var(--spacing-md);
    background: var(--primary-blue);
    border: none;
    color: var(--dark-bg);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.next-btn:hover:not(:disabled) {
    background: var(--accent-cyan);
    box-shadow: 0 0 20px var(--primary-blue-glow);
}

.next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.confirm-btn {
    flex: 2;
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    border: none;
    color: var(--dark-bg);
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-btn:hover {
    box-shadow: 0 0 25px var(--primary-blue-glow);
}

.transfer-step.processing,
.transfer-step.complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.processing-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 168, 255, 0.2);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.processing-text,
.complete-text {
    color: var(--text-muted);
    text-align: center;
}

.success-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-success);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--dark-bg);
    margin-bottom: var(--spacing-md);
}

.new-transfer-btn {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--primary-blue);
    border: none;
    color: var(--dark-bg);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-transfer-btn:hover {
    background: var(--accent-cyan);
    box-shadow: 0 0 20px var(--primary-blue-glow);
}

/* ============================================================================
   SETTINGS PANEL
   ============================================================================ */

.settings-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.settings-nav {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
    overflow-x: auto;
}

.settings-nav .nav-item {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.settings-nav .nav-item:hover {
    color: var(--primary-blue);
}

.settings-nav .nav-item.active {
    background: rgba(0, 168, 255, 0.1);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.settings-section {
    animation: fadeIn 0.3s ease;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--patriot-white);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
}

.setting-group {
    margin-bottom: var(--spacing-lg);
}

.setting-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.setting-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(13, 25, 41, 0.8);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--patriot-white);
    font-size: 0.9rem;
}

.setting-select:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.theme-options {
    display: flex;
    gap: var(--spacing-sm);
}

.theme-btn {
    flex: 1;
    padding: var(--spacing-sm);
    background: transparent;
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.theme-btn.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--dark-bg);
}

.toggle-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: rgba(13, 25, 41, 0.6);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
}

.toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label {
    font-weight: 600;
    color: var(--patriot-white);
}

.toggle-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.toggle {
    width: 44px;
    height: 24px;
    background: rgba(0, 168, 255, 0.2);
    border: none;
    border-radius: var(--radius-pill);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle.on {
    background: var(--primary-blue);
}

.toggle-slider {
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--patriot-white);
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s ease;
}

.toggle.on .toggle-slider {
    transform: translateX(20px);
}

.security-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: rgba(13, 25, 41, 0.6);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
}

.security-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.security-label {
    font-weight: 600;
    color: var(--patriot-white);
}

.security-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.security-status.status-active {
    color: var(--status-success);
}

.security-status.status-inactive {
    color: var(--text-muted);
}

.security-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.security-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.security-btn:hover {
    background: rgba(0, 168, 255, 0.1);
}

.danger-zone {
    border-color: rgba(255, 23, 68, 0.3);
    background: rgba(255, 23, 68, 0.05);
}

.danger-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-red);
    margin-bottom: var(--spacing-sm);
}

.danger-btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.danger-btn:hover {
    background: rgba(255, 23, 68, 0.1);
}

.settings-footer {
    padding: var(--spacing-md);
    border-top: 1px solid rgba(0, 168, 255, 0.2);
}

.save-btn {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--primary-blue);
    border: none;
    color: var(--dark-bg);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-btn:hover {
    background: var(--accent-cyan);
    box-shadow: 0 0 20px var(--primary-blue-glow);
}

/* ============================================================================
   LOADING OVERLAY
   ============================================================================ */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 15, 25, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 168, 255, 0.2);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: var(--spacing-md);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ============================================================================
   KEYBOARD SHORTCUTS HINT
   ============================================================================ */

.keyboard-hint {
    position: relative;
}

.keyboard-hint-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 var(--spacing-sm);
    background: transparent;
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.keyboard-hint-icon:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    box-shadow: var(--shadow-glow-blue);
}

.keyboard-shortcuts-popup {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    padding: var(--spacing-md);
    background: rgba(13, 25, 41, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-lg);
    min-width: 200px;
    animation: fadeInUp 0.15s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    gap: var(--spacing-md);
}

.shortcut-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.shortcut-keys {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.1);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.shortcut-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ============================================================================
   INSIGHTS SECTION - Learning visibility
   ============================================================================ */

.empty-insights {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-dim);
}

.empty-insights .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-insights .empty-text {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
    max-width: 280px;
}

.empty-insights .empty-hint {
    font-size: 0.8rem;
    opacity: 0.7;
}

.section-desc {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: var(--spacing-md);
}

.insights-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.insight-card {
    padding: var(--spacing-md);
    background: rgba(13, 25, 41, 0.6);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
}

.insight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.insight-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--primary-blue);
    padding: 2px 8px;
    background: rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-sm);
}

.insight-relevance {
    font-size: 0.8rem;
    color: var(--patriot-gold);
    font-weight: 500;
}

.insight-content {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* ============================================================================
   INVENTORY PANELS (Admin Reference)
   ============================================================================ */

.inventory-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-secondary);
}

.inventory-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.3);
}

.inventory-header h2 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-blue);
}

.inventory-subtitle {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.inventory-tabs {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    flex-wrap: nowrap;
}

.inventory-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.inventory-tab:hover {
    background: rgba(0, 168, 255, 0.1);
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.inventory-tab.active {
    background: rgba(0, 168, 255, 0.2);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.tab-icon {
    font-size: 1rem;
}

.tab-name {
    font-weight: 500;
}

.inventory-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.capability-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.capability-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: border-color var(--transition-fast);
}

.capability-card:hover {
    border-color: var(--primary-blue);
}

.capability-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.method-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.method-get {
    background: rgba(97, 175, 254, 0.2);
    color: #61affe;
}

.method-post {
    background: rgba(73, 204, 144, 0.2);
    color: #49cc90;
}

.method-patch {
    background: rgba(252, 161, 48, 0.2);
    color: #fca130;
}

.method-delete {
    background: rgba(249, 62, 62, 0.2);
    color: #f93e3e;
}

.capability-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.capability-endpoint {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--patriot-gold);
    background: rgba(0, 0, 0, 0.4);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin: var(--spacing-xs) 0;
    overflow-x: auto;
}

.capability-description {
    margin: var(--spacing-xs) 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.capability-params {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.params-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
    display: block;
}

.params-list {
    margin: var(--spacing-xs) 0 0 0;
    padding-left: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.params-list li {
    margin-bottom: 2px;
}

.inventory-footer {
    padding: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

.webhook-events summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: var(--spacing-xs);
}

.webhook-events summary:hover {
    color: var(--text-primary);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
}

.event-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-xs);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.event-item code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--patriot-gold);
}

.event-item span {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* ============================================================================
   DEPLOYMENT & SECRETS PANEL
   ============================================================================ */

.deployment-secrets-panel .service-info-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(90deg, rgba(0, 195, 255, 0.1), rgba(255, 215, 0, 0.05));
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
}

.deployment-secrets-panel .service-label {
    color: var(--cyber-cyan);
    font-weight: 600;
}

.deployment-secrets-panel .service-port {
    font-family: var(--font-mono);
    color: var(--patriot-gold);
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
}

.deployment-secrets-panel .auth-info {
    color: var(--text-secondary);
    font-style: italic;
    margin-left: auto;
}

.deployment-secrets-panel .tab-port {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.deployment-secrets-panel .inventory-tab:hover .tab-port {
    color: var(--cyber-cyan);
    opacity: 1;
}

/* Method badge for ACTION type */
.method-badge.method-action {
    background: linear-gradient(135deg, var(--primary-blue), var(--cyber-cyan));
    color: var(--bg-primary);
}

/* Security Tiers */
.deployment-secrets-panel .security-tiers,
.deployment-secrets-panel .rate-limits,
.deployment-secrets-panel .quick-reference {
    margin-bottom: var(--spacing-sm);
}

.deployment-secrets-panel details summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.deployment-secrets-panel details summary:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.deployment-secrets-panel details[open] summary {
    color: var(--cyber-cyan);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-sm);
}

.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.tier-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
}

.tier-card h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.85rem;
    color: var(--patriot-gold);
}

.tier-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--spacing-xs);
}

.tier-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-detail code,
.tier-detail span:not(.tier-label) {
    font-size: 0.75rem;
    color: var(--text-primary);
}

.tier-detail code {
    font-family: var(--font-mono);
    color: var(--cyber-cyan);
}

/* Rate Limits Table */
.limits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin: var(--spacing-sm);
}

.limits-table th,
.limits-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.limits-table th {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}

.limits-table td {
    color: var(--text-primary);
}

.limits-table code {
    font-family: var(--font-mono);
    color: var(--patriot-gold);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Quick Reference Grid */
.reference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.ref-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
}

.ref-section h4 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.75rem;
    color: var(--cyber-cyan);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ref-section code {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--patriot-gold);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
    word-break: break-all;
}

.ref-section p {
    margin: var(--spacing-xs) 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

.ref-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ref-section li {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 2px 0;
}

.ref-section li code {
    display: inline;
    padding: 1px 4px;
    margin-right: var(--spacing-xs);
}

/* ============================================================================
   DEPLOYMENT & SECRETS - MANAGEMENT MODE
   ============================================================================ */

.deployment-secrets-panel.management-mode {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.management-tabs {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-color);
}

.management-tab {
    padding: var(--spacing-xs) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.management-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.management-tab.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.management-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

/* Secrets Manager */
.secrets-manager {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.secrets-filters {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--cyber-cyan);
}

.btn-refresh,
.btn-add,
.btn-save,
.btn-delete,
.btn-deploy {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.btn-refresh {
    background: rgba(0, 195, 255, 0.2);
    color: var(--cyber-cyan);
}

.btn-refresh:hover:not(:disabled) {
    background: rgba(0, 195, 255, 0.3);
}

.btn-add {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    margin-left: auto;
}

.btn-add:hover {
    background: rgba(0, 255, 136, 0.3);
}

.btn-save {
    background: var(--cyber-cyan);
    color: var(--bg-primary);
    font-weight: 600;
}

.btn-save:hover:not(:disabled) {
    background: #00e5ff;
}

.btn-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-delete {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
    padding: 4px 8px;
}

.btn-delete:hover {
    background: rgba(255, 68, 68, 0.4);
}

/* Reveal/Hide buttons for secrets */
.btn-reveal,
.btn-hide {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    margin-left: var(--spacing-xs);
}

.btn-reveal {
    background: rgba(0, 195, 255, 0.2);
    color: var(--cyber-cyan);
}

.btn-reveal:hover {
    background: rgba(0, 195, 255, 0.4);
}

.btn-hide {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.btn-hide:hover {
    background: rgba(139, 92, 246, 0.4);
}

.btn-reveal-all {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--cyber-cyan);
    background: transparent;
    color: var(--cyber-cyan);
}

.btn-reveal-all:hover {
    background: rgba(0, 195, 255, 0.2);
}

/* Passkey registration */
.passkey-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--border-color);
}

.btn-register-passkey {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--patriot-gold);
    background: rgba(255, 193, 7, 0.1);
    color: var(--patriot-gold);
    font-weight: 600;
}

.btn-register-passkey:hover {
    background: rgba(255, 193, 7, 0.25);
    transform: translateY(-1px);
}

.passkey-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Secret value states */
.col-value .masked {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.col-value .revealed {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.col-value .revealed code {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    color: #00ff88;
    font-size: 0.8rem;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-value .revealing {
    color: var(--patriot-gold);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.btn-deploy {
    background: linear-gradient(135deg, var(--patriot-gold), #ff9900);
    color: var(--bg-primary);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-lg);
}

.btn-deploy:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-deploy:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error banner */
.error-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid #ff4444;
    border-radius: var(--radius-sm);
    color: #ff6666;
    font-size: 0.85rem;
}

.error-banner button {
    background: transparent;
    border: none;
    color: #ff6666;
    cursor: pointer;
    font-size: 1rem;
}

/* Add secret form */
.add-secret-form {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.add-secret-form h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: #00ff88;
    font-size: 0.9rem;
}

.form-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.form-row input {
    flex: 1;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.form-row input:focus {
    outline: none;
    border-color: var(--cyber-cyan);
}

.form-row input::placeholder {
    color: var(--text-muted);
}

.form-hint {
    margin: var(--spacing-xs) 0 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Secrets list */
.secrets-list {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.secrets-header,
.secret-row {
    display: grid;
    grid-template-columns: 1fr 120px 150px 60px;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    align-items: center;
}

.secrets-header {
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.secret-row {
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.secret-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.col-key code {
    font-family: var(--font-mono);
    color: var(--patriot-gold);
    font-size: 0.8rem;
}

.col-value .masked {
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.col-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.empty-state {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Security info */
.security-info {
    padding: var(--spacing-sm);
}

.tss-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.tss-badge {
    padding: 2px 8px;
    background: var(--patriot-gold);
    color: var(--bg-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Deployments Manager */
.deployments-manager {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.deploy-trigger {
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.deploy-trigger h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--patriot-gold);
}

.trigger-form {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex-wrap: wrap;
}

.trigger-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trigger-form label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.trigger-form select,
.trigger-form input {
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 150px;
}

.trigger-form select:focus,
.trigger-form input:focus {
    outline: none;
    border-color: var(--patriot-gold);
}

/* Executions list */
.executions-list {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.executions-list h4 {
    margin: 0;
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-color);
}

.executions-header,
.execution-row {
    display: grid;
    grid-template-columns: 100px 1fr 100px 80px 150px;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    align-items: center;
}

.executions-header {
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.execution-row {
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
}

.execution-row code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyber-cyan);
}

.col-status {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-success {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

.status-running {
    background: rgba(0, 195, 255, 0.2);
    color: var(--cyber-cyan);
}

.status-failed {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

.status-unknown {
    background: rgba(128, 128, 128, 0.2);
    color: var(--text-muted);
}

/* Service Status */
.service-status {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-header h4 {
    margin: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.service-healthy {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.3);
}

.service-unhealthy {
    background: rgba(255, 165, 0, 0.1);
    border-color: rgba(255, 165, 0, 0.3);
}

.service-unavailable {
    background: rgba(255, 68, 68, 0.1);
    border-color: rgba(255, 68, 68, 0.3);
}

.service-icon {
    font-size: 1.5rem;
}

.service-info {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}

.service-name {
    font-weight: 600;
    color: var(--text-primary);
}

.service-port {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.service-status {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.service-message {
    font-size: 0.7rem;
    color: var(--text-muted);
    word-break: break-all;
}

/* CRDT Status */
.crdt-status {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.crdt-status h4 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--cyber-cyan);
}

.crdt-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-sm);
}

.crdt-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crdt-key {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.crdt-item code {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* API Reference */
.api-reference {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.reference-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.reference-section h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--cyber-cyan);
}

.endpoint-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.endpoint {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.method {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

.method-get {
    background: rgba(0, 195, 255, 0.3);
    color: var(--cyber-cyan);
}

.method-post {
    background: rgba(0, 255, 136, 0.3);
    color: #00ff88;
}

.method-delete {
    background: rgba(255, 68, 68, 0.3);
    color: #ff4444;
}

.endpoint code {
    font-family: var(--font-mono);
    color: var(--patriot-gold);
    font-size: 0.75rem;
}

.endpoint .desc {
    color: var(--text-muted);
    margin-left: auto;
}

.auth-info {
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.auth-info code {
    display: block;
    font-family: var(--font-mono);
    color: var(--patriot-gold);
    margin-bottom: var(--spacing-xs);
}

.auth-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.rate-limits-table {
    width: 100%;
    font-size: 0.8rem;
}

.rate-limits-table td {
    padding: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
}

.rate-limits-table td:first-child {
    color: var(--text-secondary);
}

.rate-limits-table td:last-child {
    font-family: var(--font-mono);
    color: var(--patriot-gold);
}

/* Admin nav styling */
.nav-divider {
    color: var(--border-color);
    padding: 0 var(--spacing-xs);
    font-size: 0.8rem;
}

.admin-nav {
    border-color: var(--patriot-gold) !important;
}

.admin-nav:hover {
    background: rgba(255, 215, 0, 0.1) !important;
}

.admin-nav.active {
    background: rgba(255, 215, 0, 0.2) !important;
    color: var(--patriot-gold) !important;
}

/* Admin mode indicator */
.monetic-app.admin-mode::before {
    content: "ADMIN MODE";
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--patriot-gold);
    color: var(--bg-primary);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    z-index: 9999;
    letter-spacing: 1px;
}

/* Additional method badge for PUT */
.method-put {
    background: rgba(156, 39, 176, 0.2);
    color: #9c27b0;
}

/* Status badges for capabilities */
.status-badge {
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    margin-left: auto;
}

.status-available {
    background: rgba(97, 218, 251, 0.2);
    color: var(--cyber-cyan);
}

.status-coming-soon {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.status-tbd {
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

/* Inventory notice for pending integrations */
.inventory-notice {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-sm);
    margin-top: var(--spacing-sm);
    font-size: 0.75rem;
}

.notice-badge {
    background: rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
}

/* Action Buttons in Chat Messages */
.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    margin: 12px 4px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, var(--cyber-cyan) 0%, var(--quantum-teal) 100%);
    color: var(--patriot-navy);
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 212, 255, 0.5);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.interactive {
    background: linear-gradient(135deg, var(--cyber-cyan) 0%, var(--quantum-teal) 100%);
}

.action-btn.approval {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
}

.action-btn.notification {
    background: linear-gradient(135deg, #a8a8a8 0%, #888888 100%);
    cursor: default;
}

.action-icon {
    font-size: 18px;
}

.action-label {
    white-space: nowrap;
}

/* ============================================================================
   ESCROW PANEL
   ============================================================================ */

.escrow-panel {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.escrow-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.escrow-card {
    background: var(--card-bg);
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    padding: var(--spacing-md);
}

.escrow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.escrow-id {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
}

.escrow-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.escrow-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.escrow-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: var(--spacing-md);
}

.escrow-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.escrow-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

/* ============================================================================
   LOANS PANEL
   ============================================================================ */

.loans-panel {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.loans-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.loan-card {
    background: var(--card-bg);
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    padding: var(--spacing-md);
}

.loan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.loan-id {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
}

.loan-status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.loan-provider {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.provider-value {
    color: var(--primary-blue);
    font-weight: 600;
}

.loan-flow {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.collateral-box,
.loan-box {
    flex: 1;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--border-glow);
    border-radius: 6px;
    padding: var(--spacing-sm);
    text-align: center;
}

.box-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.box-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.box-asset {
    font-size: 12px;
    color: var(--primary-blue);
}

.flow-arrow {
    font-size: 24px;
    color: var(--status-success);
}

.loan-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.loans-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

/* ============================================================================
   MULTI-HOP TRACKER PANEL
   ============================================================================ */

.tracker-panel {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.tracker-header {
    text-align: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-glow);
}

.txn-id {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    color: var(--primary-blue);
}

.txn-description {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--spacing-xs);
}

.tracker-progress {
    background: rgba(0, 168, 255, 0.1);
    border-radius: 8px;
    padding: var(--spacing-md);
}

.progress-bar {
    height: 8px;
    background: rgba(0, 168, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--status-success) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    font-size: 13px;
}

.progress-percent {
    color: var(--status-success);
    font-weight: 600;
}

.progress-eta {
    color: var(--text-muted);
}

.hops-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hop-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hop-wrapper.hop-parallel {
    margin-left: var(--spacing-lg);
}

.parallel-branch-indicator {
    width: 100%;
    text-align: center;
    padding: var(--spacing-sm) 0;
}

.branch-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.hop-card {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    padding: var(--spacing-md);
}

.hop-card.hop-complete {
    border-color: var(--status-success);
}

.hop-card.hop-progress {
    border-color: var(--primary-blue);
    box-shadow: 0 0 12px rgba(0, 168, 255, 0.3);
}

.hop-card.hop-manual {
    border-color: var(--status-warning);
}

.hop-card.hop-failed {
    border-color: var(--status-error);
}

.hop-card.hop-pending {
    opacity: 0.6;
}

.hop-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.hop-icon {
    font-size: 18px;
}

.hop-complete .hop-icon { color: var(--status-success); }
.hop-progress .hop-icon { color: var(--primary-blue); }
.hop-manual .hop-icon { color: var(--status-warning); }
.hop-failed .hop-icon { color: var(--status-error); }
.hop-pending .hop-icon { color: var(--text-muted); }

.hop-name {
    font-weight: 600;
    color: var(--text-primary);
}

.hop-provider {
    font-size: 12px;
    color: var(--primary-blue);
    margin-left: auto;
}

.hop-flow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.hop-arrow {
    color: var(--status-success);
}

.hop-timing {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

.timing-live {
    color: var(--status-success);
    animation: pulse 1.5s ease-in-out infinite;
}

.hop-error {
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid var(--status-error);
    border-radius: 4px;
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 12px;
}

.error-icon {
    color: var(--status-error);
}

.error-text {
    color: var(--text-primary);
    flex: 1;
}

.support-link {
    color: var(--primary-blue);
    text-decoration: none;
}

.support-link:hover {
    text-decoration: underline;
}

.hop-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

.connector-line {
    width: 2px;
    height: 16px;
    background: var(--border-glow);
}

.connector-arrow {
    font-size: 10px;
    color: var(--border-glow);
}

.tracker-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-glow);
}

/* ============================================================================
   SHARED PANEL STYLES
   ============================================================================ */

.panel-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.detail-label {
    color: var(--text-muted);
}

.detail-value {
    color: var(--text-primary);
}

.summary-item {
    background: rgba(0, 168, 255, 0.1);
    border-radius: 6px;
    padding: var(--spacing-md);
    text-align: center;
}

.summary-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--spacing-xs);
}

.summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Status indicators shared across panels */
.status-active {
    background: rgba(0, 255, 136, 0.2);
    color: var(--status-success);
}

.status-pending {
    background: rgba(255, 170, 0, 0.2);
    color: var(--status-warning);
}

.status-complete {
    background: rgba(0, 168, 255, 0.2);
    color: var(--primary-blue);
}

.status-error {
    background: rgba(255, 23, 68, 0.2);
    color: var(--status-error);
}

/* ============================================================================
   1KONTO INVENTORY PANEL
   ============================================================================ */

.onekonto-inventory .inventory-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
}

.onekonto-inventory .provider-logo {
    font-size: 28px;
    font-weight: 900;
    color: #7b68ee;
}

.integration-notes {
    background: rgba(123, 104, 238, 0.1);
    border: 1px solid rgba(123, 104, 238, 0.3);
    border-radius: 8px;
    padding: var(--spacing-md);
}

.integration-notes ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.integration-notes li {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: var(--spacing-xs);
}

/* ============================================================================
   GREY FOX THEME (Customer Tenant Branding)
   ============================================================================ */

.tenant-grey-fox {
    /* Grey Fox color palette - sophisticated slate grays */
    --primary-blue: #718096 !important;
    --primary-blue-glow: #71809699 !important;
    --secondary-blue: #4a5568 !important;
    --navy-dark: #1a202c !important;
    
    --accent-red: #9f7aea !important;  /* Purple accent instead of red */
    --accent-red-glow: #9f7aeacc !important;
    
    --dark-bg: #171923 !important;
    --card-bg: #1a202c !important;
    --modal-bg: #2d3748 !important;
    --panel-bg: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
    
    --border-glow: #4a556880 !important;
    --grid-color: #4a556815 !important;
    
    --text-accent: #a0aec0 !important;
    --status-info: #718096 !important;
}

/* Grey Fox header branding */
.tenant-grey-fox .workspace::before {
    content: '🦊 GREY FOX HOLDINGS';
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #718096;
    background: rgba(26, 32, 44, 0.9);
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid #4a5568;
    z-index: 1000;
}

/* Grey Fox panel styling */
.tenant-grey-fox .panel {
    border-color: #4a5568 !important;
}

.tenant-grey-fox .panel-header {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
    border-bottom-color: #4a5568 !important;
}

/* Grey Fox panel opener button */
.tenant-grey-fox .panel-opener-toggle {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
    border-color: #718096 !important;
}

.tenant-grey-fox .panel-opener-toggle:hover {
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%) !important;
}

/* ============================================================================
   ACCOUNT MANAGEMENT PANEL
   ============================================================================ */

.account-management-panel {
    background: var(--panel-bg);
}

.account-management-panel .inventory-header {
    background: linear-gradient(135deg, #1a2744 0%, #0d1929 100%);
    border-bottom: 2px solid var(--primary-blue);
}

/* Overview Tab */
.overview-tab {
    padding: var(--spacing-md);
}

.account-overview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.overview-section {
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.overview-section h3 {
    font-size: 14px;
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.info-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-value {
    font-size: 13px;
    color: var(--text-primary);
}

.info-value.selectable {
    user-select: all;
    cursor: pointer;
}

/* TSS Status */
.tss-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.tss-threshold {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 168, 255, 0.1);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    min-width: 100px;
}

.threshold-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
}

.threshold-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.tss-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tss-key, .tss-parties {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Devices List */
.devices-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.device-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 168, 255, 0.2);
}

.device-icon {
    font-size: 20px;
}

.device-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.device-name {
    font-size: 13px;
    color: var(--text-primary);
}

.device-registered {
    font-size: 11px;
    color: var(--text-muted);
}

.device-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.device-status.active {
    background: rgba(0, 255, 136, 0.2);
    color: var(--status-success);
}

.btn-add-device {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    transition: all var(--duration-fast);
}

.btn-add-device:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

.device-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.stat-card {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid rgba(0, 168, 255, 0.2);
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    display: block;
}

.stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Whitelist Tab */
.whitelist-tab {
    padding: var(--spacing-md);
}

.whitelist-header, .tss-header, .addresses-header, .linked-header, .documents-header {
    margin-bottom: var(--spacing-lg);
}

.whitelist-header h3, .tss-header h3, .addresses-header h3, .linked-header h3, .documents-header h3 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.whitelist-desc, .tss-desc, .addresses-desc, .linked-desc, .documents-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.add-whitelist-form {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.add-whitelist-form input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
}

.add-whitelist-form input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
}

.btn-invite {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    white-space: nowrap;
}

.btn-invite:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.whitelist-entries {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.whitelist-entry {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 168, 255, 0.2);
}

.entry-email {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}

.entry-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.status-accepted {
    background: rgba(0, 255, 136, 0.2);
    color: var(--status-success);
}

.status-pending {
    background: rgba(255, 170, 0, 0.2);
    color: var(--status-warning);
}

.status-expired {
    background: rgba(255, 23, 68, 0.2);
    color: var(--status-error);
}

.entry-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

.empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

/* Info Box */
.info-box {
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.info-box h4 {
    font-size: 13px;
    color: var(--text-accent);
    margin-bottom: var(--spacing-sm);
}

.info-box ol, .info-box ul {
    margin: 0;
    padding-left: var(--spacing-lg);
}

.info-box li {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

/* TSS Tab */
.tss-tab {
    padding: var(--spacing-md);
}

.tss-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.tss-scheme-card {
    background: linear-gradient(135deg, rgba(0, 168, 255, 0.1) 0%, rgba(0, 82, 204, 0.1) 100%);
    border: 2px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
}

.scheme-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.scheme-threshold, .scheme-total {
    font-size: 48px;
    font-weight: 900;
    color: var(--primary-blue);
}

.scheme-divider {
    font-size: 24px;
    color: var(--text-muted);
}

.scheme-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scheme-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

.tss-parties {
    margin-top: var(--spacing-lg);
}

.tss-parties h4 {
    font-size: 13px;
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
}

.party-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 168, 255, 0.2);
    margin-bottom: var(--spacing-sm);
}

.party-icon {
    font-size: 20px;
}

.party-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.party-label {
    font-size: 13px;
    color: var(--text-primary);
}

.party-type {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: capitalize;
}

.party-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(0, 255, 136, 0.2);
    color: var(--status-success);
    text-transform: capitalize;
}

.party-pending .party-status {
    background: rgba(255, 170, 0, 0.2);
    color: var(--status-warning);
}

.party-revoked .party-status {
    background: rgba(255, 23, 68, 0.2);
    color: var(--status-error);
}

.tss-key-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
}

.key-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.key-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.key-item code, .key-item span:last-child {
    font-size: 12px;
    color: var(--text-secondary);
}

.tss-actions {
    display: flex;
    gap: var(--spacing-md);
}

.btn-rotate, .btn-upgrade {
    flex: 1;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    color: var(--primary-blue);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
}

.btn-rotate:disabled, .btn-upgrade:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.upgrade-path {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.path-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 168, 255, 0.2);
}

.path-step.current {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.1);
}

.step-scheme {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
}

.step-label {
    font-size: 10px;
    color: var(--text-muted);
}

.path-arrow {
    color: var(--text-muted);
    font-size: 16px;
}

/* Addresses Tab */
.addresses-tab {
    padding: var(--spacing-md);
}

.addresses-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.address-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.address-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.chain-icon {
    font-size: 20px;
}

.chain-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.network-badge {
    font-size: 10px;
    padding: 2px 8px;
    background: rgba(0, 168, 255, 0.2);
    color: var(--primary-blue);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}

.address-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.address-text {
    flex: 1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
    background: rgba(0, 0, 0, 0.3);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.btn-copy {
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    color: var(--primary-blue);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--duration-fast);
}

.btn-copy:hover {
    background: rgba(0, 168, 255, 0.2);
}

.btn-copy.copied {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--status-success);
}

/* Linked Accounts Tab - Graph View */
.linked-tab {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.linked-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.linked-header .header-left h3 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-primary);
}

.linked-header .linked-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.header-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.view-toggle {
    display: flex;
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.view-toggle .toggle-btn {
    background: transparent;
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-toggle .toggle-btn.active {
    background: var(--primary-blue);
    color: var(--dark-bg);
}

.view-toggle .toggle-btn:hover:not(.active) {
    background: rgba(0, 168, 255, 0.1);
}

.add-account-btn {
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    color: var(--primary-blue);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-account-btn:hover {
    background: var(--primary-blue);
    color: var(--dark-bg);
}

.reset-btn {
    background: transparent;
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: rgba(255, 68, 68, 0.8);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reset-btn:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: #f44;
    color: #f44;
}

/* Graph Container */
.account-graph-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.account-graph-svg {
    display: block;
}

.graph-node:hover circle {
    filter: brightness(1.2);
}

.graph-legend {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.universal { background: #00a8ff; }
.legend-dot.personal { background: #00ff88; }
.legend-dot.sub { background: #ff6b35; }

/* List/Tree View */
.account-list-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.tree-node {
    margin-bottom: var(--spacing-xs);
}

.tree-node-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.tree-node-content:hover {
    background: rgba(0, 168, 255, 0.1);
}

.tree-node-content.selected {
    background: rgba(0, 168, 255, 0.2);
    border: 1px solid var(--primary-blue);
}

.node-icon {
    font-size: 1.2rem;
}

.node-label {
    font-weight: 500;
    color: var(--text-primary);
}

.node-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex: 1;
}

.node-kyc {
    font-size: 0.85rem;
}

/* Selected Node Details Panel */
.node-details-panel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
}

.details-header h4 {
    margin: 0;
    color: var(--primary-blue);
}

.details-header .close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.detail-value {
    color: var(--text-primary);
    font-size: 0.85rem;
}

.detail-value.kyc-verified { color: var(--status-success); }
.detail-value.kyc-pending { color: var(--status-warning); }
.detail-value.kyc-none { color: var(--text-muted); }

.account-type-badge {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(0, 168, 255, 0.2);
    text-transform: capitalize;
}

.detail-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.action-btn {
    flex: 1;
    padding: var(--spacing-sm);
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    color: var(--primary-blue);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.action-btn:hover {
    background: var(--primary-blue);
    color: var(--dark-bg);
}

.action-btn.secondary {
    border-color: rgba(0, 168, 255, 0.3);
    color: var(--text-secondary);
}

.action-btn.danger {
    width: 100%;
    margin-top: var(--spacing-sm);
    background: rgba(255, 68, 68, 0.1);
    border-color: #f44;
    color: #f44;
}

.action-btn.danger:hover {
    background: #f44;
    color: white;
}

/* Modal readonly field */
.readonly-field {
    display: block;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
}

/* Account Selector in Panel Header */
.account-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.account-selector label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.account-selector select {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300a8ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: calc(var(--spacing-md) + 16px);
    max-width: 300px;
}

.account-selector select:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 8px rgba(0, 168, 255, 0.3);
    outline: none;
}

.access-warning {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 170, 0, 0.15);
    border: 1px solid rgba(255, 170, 0, 0.3);
    border-radius: var(--radius-sm);
    color: var(--status-warning);
    font-size: 0.8rem;
}

/* Contextual Tab Styles */
.contextual .access-status {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    text-align: center;
}

.contextual .access-status.granted {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: var(--status-success);
}

.contextual .access-status.denied {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    color: var(--status-error);
}

/* TSS Tab Contextual */
.tss-tab.contextual .tss-diagram {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.tss-tab.contextual .threshold-display {
    margin-bottom: var(--spacing-sm);
}

.tss-tab.contextual .threshold-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary-blue);
    text-shadow: 0 0 20px rgba(0, 168, 255, 0.5);
}

.tss-tab.contextual .threshold-desc {
    color: var(--text-muted);
    margin: 0;
}

.tss-tab.contextual .parties-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.tss-tab.contextual .party-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.tss-tab.contextual .party-card.is-you {
    border-color: var(--status-success);
    background: rgba(0, 255, 136, 0.05);
}

.tss-tab.contextual .party-icon {
    font-size: 1.5rem;
}

.tss-tab.contextual .party-info {
    flex: 1;
}

.tss-tab.contextual .party-label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
}

.tss-tab.contextual .party-id {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
}

.tss-tab.contextual .you-badge {
    background: var(--status-success);
    color: var(--dark-bg);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
}

.tss-tab.contextual .tss-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.tss-tab.contextual .tss-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Addresses Tab Contextual */
.addresses-tab.contextual .addresses-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.addresses-tab.contextual .address-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.addresses-tab.contextual .chain-info {
    min-width: 100px;
}

.addresses-tab.contextual .chain-name {
    display: block;
    color: var(--text-accent);
    font-weight: 500;
}

.addresses-tab.contextual .network-name {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.addresses-tab.contextual .address-value {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.addresses-tab.contextual .copy-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.addresses-tab.contextual .copy-btn:hover {
    opacity: 1;
}

/* Action button primary variant */
.action-btn.primary {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--dark-bg);
}

.action-btn.primary:hover {
    filter: brightness(1.1);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-content {
    background: var(--modal-bg);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), var(--shadow-glow-blue);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.modal-header .close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-tabs {
    display: flex;
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
}

.modal-tab {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.modal-tab.active {
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-blue);
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-body .form-group {
    margin-bottom: var(--spacing-md);
}

.modal-body .form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.modal-body .form-group input,
.modal-body .form-group select,
.modal-body .form-group textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal-body .form-group input:focus,
.modal-body .form-group select:focus,
.modal-body .form-group textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 8px rgba(0, 168, 255, 0.3);
}

.modal-body .form-group input::placeholder {
    color: var(--text-muted);
}

.modal-body .form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300a8ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: calc(var(--spacing-md) + 16px);
}

.modal-body .form-group select option {
    background: var(--dark-bg);
    color: var(--text-primary);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid rgba(0, 168, 255, 0.2);
}

.btn-secondary {
    background: transparent;
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-secondary:hover {
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--dark-bg);
    font-weight: 500;
    cursor: pointer;
}

.btn-primary:hover {
    filter: brightness(1.1);
}

/* Legacy - keep for backwards compat */
.linked-account-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.account-info {
    flex: 1;
}

.account-email {
    font-size: 13px;
    color: var(--text-primary);
    display: block;
}

.account-id {
    font-size: 11px;
    color: var(--text-muted);
}

.kyc-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.kyc-verified {
    background: rgba(0, 255, 136, 0.2);
    color: var(--status-success);
}

.kyc-pending {
    background: rgba(255, 170, 0, 0.2);
    color: var(--status-warning);
}

.kyc-none {
    background: rgba(107, 124, 147, 0.2);
    color: var(--text-muted);
}

.linked-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* Documents Tab */
.documents-tab {
    padding: var(--spacing-md);
}

.document-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.doc-icon {
    font-size: 24px;
}

.doc-info {
    flex: 1;
}

.doc-type {
    font-size: 13px;
    color: var(--text-primary);
    display: block;
}

.doc-filename {
    font-size: 11px;
    color: var(--text-muted);
}

.doc-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.doc-verified .doc-status {
    background: rgba(0, 255, 136, 0.2);
    color: var(--status-success);
}

.doc-pending .doc-status {
    background: rgba(255, 170, 0, 0.2);
    color: var(--status-warning);
}

.doc-rejected .doc-status {
    background: rgba(255, 23, 68, 0.2);
    color: var(--status-error);
}

.doc-date {
    font-size: 11px;
    color: var(--text-muted);
}

.required-docs {
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.required-docs h4 {
    font-size: 13px;
    color: var(--text-accent);
    margin-bottom: var(--spacing-sm);
}

.required-docs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.required-docs li {
    font-size: 12px;
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.required-docs li::before {
    content: '☐';
    color: var(--text-muted);
}

.doc-required {
    color: var(--text-primary);
}

.doc-optional {
    color: var(--text-muted);
}

.doc-optional::after {
    content: ' (optional)';
    font-size: 10px;
    color: var(--text-muted);
}

/* ============================================================================
   EXPORT & INDEPENDENCE TAB
   ============================================================================ */

.export-independence-tab {
    padding: var(--spacing-md);
}

.export-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.export-section {
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.export-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.section-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

/* Account Status Section */
.account-status-section .status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.status-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.status-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.status-value {
    font-size: 13px;
    color: var(--text-primary);
}

.account-type-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-sm);
    color: var(--text-accent);
    font-size: 11px;
}

/* Independence Action */
.independence-action {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.independence-btn {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast);
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.3);
}

.independence-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 23, 68, 0.5);
}

.independence-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
}

/* Export Cards */
.export-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.export-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    transition: all var(--duration-fast);
}

.export-card:hover {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.05);
}

.export-card-icon {
    font-size: 28px;
    margin-bottom: var(--spacing-sm);
}

.export-card h4 {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.export-card p {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
}

.export-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.export-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow-blue);
}

.export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Exported Data Section */
.exported-data-section {
    border-color: var(--status-success);
    background: rgba(0, 255, 136, 0.03);
}

.exported-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.countdown-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: rgba(255, 170, 0, 0.15);
    border: 1px solid var(--status-warning);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
}

.countdown-icon {
    font-size: 14px;
}

.countdown-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--status-warning);
}

.exported-content {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Seed Phrase Display */
.seed-phrase-display {
    text-align: center;
}

.seed-words {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.seed-word {
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.word-num {
    font-size: 10px;
    color: var(--text-muted);
    min-width: 20px;
}

.word-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text-primary);
}

.derivation-path {
    font-size: 11px;
    color: var(--text-muted);
}

.derivation-path code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text-secondary);
}

/* Private Keys Display */
.private-keys-display {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.key-entry {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
}

.key-header {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.key-chain {
    background: var(--primary-blue);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
}

.key-network {
    color: var(--text-muted);
    font-size: 11px;
}

.key-address, .key-private {
    font-size: 11px;
    margin-bottom: var(--spacing-xs);
}

.addr-label, .priv-label {
    color: var(--text-muted);
}

.key-address code, .key-private code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    word-break: break-all;
}

.private-key {
    color: var(--status-warning);
}

/* Hardware Instructions */
.hardware-instructions-display h4 {
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.instructions-list {
    list-style: none;
    counter-reset: instruction;
    padding: 0;
}

.instructions-list li {
    counter-increment: instruction;
    padding: var(--spacing-sm) 0;
    padding-left: 30px;
    position: relative;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.instructions-list li:last-child {
    border-bottom: none;
}

.instructions-list li::before {
    content: counter(instruction);
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
}

/* TSS Shares Display */
.tss-shares-display .tss-info {
    font-size: 12px;
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.share-entry {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

.share-index {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 60px;
}

.share-data {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    word-break: break-all;
}

/* Exported Actions */
.exported-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.copy-btn, .done-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.copy-btn {
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid var(--primary-blue);
    color: var(--text-accent);
}

.copy-btn:hover {
    background: rgba(0, 168, 255, 0.2);
}

.done-btn {
    background: linear-gradient(135deg, var(--status-success), #00cc66);
    border: none;
    color: white;
}

.done-btn:hover {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

/* Export Warning */
.export-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.3);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--status-warning);
}

.warning-icon {
    font-size: 14px;
}

/* Security Notice Section */
.security-notice-section {
    border-color: var(--status-warning);
    background: rgba(255, 170, 0, 0.03);
}

.security-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.security-list li {
    font-size: 12px;
    color: var(--text-secondary);
    padding: var(--spacing-sm) 0;
    padding-left: 24px;
    position: relative;
}

.security-list li::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: var(--status-warning);
}

/* Export History Section */
.export-history-section {
    border-color: rgba(0, 168, 255, 0.1);
}

.empty-history {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
    font-size: 12px;
}

.history-list {
    max-height: 200px;
    overflow-y: auto;
}

.history-entry {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
    font-size: 12px;
}

.history-entry:last-child {
    border-bottom: none;
}

.entry-date {
    color: var(--text-muted);
    min-width: 120px;
}

.entry-type {
    color: var(--text-primary);
    flex: 1;
}

.entry-method {
    color: var(--text-muted);
}

/* Independence Modal */
.independence-modal {
    max-width: 500px;
}

.independence-intro {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.independence-effects {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.independence-effects h4 {
    font-size: 12px;
    color: var(--status-success);
    margin-bottom: var(--spacing-sm);
}

.independence-effects ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.independence-effects li {
    font-size: 12px;
    color: var(--text-secondary);
    padding: var(--spacing-xs) 0;
}

.independence-options {
    margin-bottom: var(--spacing-lg);
}

.option-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.option-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-blue);
}

.confirmation-input {
    margin-bottom: var(--spacing-md);
}

.confirmation-input label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.confirmation-input strong {
    color: var(--text-accent);
}

.confirmation-input input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2px;
}

.confirmation-input input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 10px rgba(0, 168, 255, 0.2);
}

.btn-independence {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-dark));
}

.btn-independence:hover:not(:disabled) {
    box-shadow: var(--shadow-glow-red);
}

.btn-independence:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive for export cards */
@media (max-width: 600px) {
    .export-cards {
        grid-template-columns: 1fr;
    }
    
    .seed-words {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .account-status-section .status-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   CONTRACT MANAGEMENT PANEL
   ============================================================================ */

.contract-management-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contract-management-panel .header-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Toolbar */
.contracts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.filter-group {
    display: flex;
    gap: var(--spacing-sm);
}

.filter-group select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    padding: 6px 10px;
    cursor: pointer;
}

.filter-group select:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.search-box input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    padding: 8px 12px;
    width: 200px;
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.create-contract-btn {
    background: linear-gradient(135deg, var(--status-success), #00cc66);
    color: white;
    border: none;
    padding: 8px 16px;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
    white-space: nowrap;
}

.create-contract-btn:hover {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
    transform: translateY(-1px);
}

/* Contracts content area */
.contracts-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

/* Contract list */
.contracts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Contract card */
.contract-card {
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.contract-card:hover {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.06);
}

.contract-card.selected {
    border-color: var(--primary-blue);
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.2);
}

.contract-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.contract-type-icon {
    font-size: 24px;
    min-width: 32px;
    text-align: center;
}

.contract-info {
    flex: 1;
}

.contract-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.contract-type-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contract-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
}

.contract-status.status-draft {
    background: rgba(128, 128, 128, 0.2);
    color: #888;
}

.contract-status.status-pending {
    background: rgba(255, 170, 0, 0.15);
    color: var(--status-warning);
}

.contract-status.status-active {
    background: rgba(0, 255, 136, 0.15);
    color: var(--status-success);
}

.contract-status.status-paused {
    background: rgba(255, 170, 0, 0.15);
    color: var(--status-warning);
}

.contract-status.status-completed {
    background: rgba(0, 168, 255, 0.15);
    color: var(--primary-blue);
}

.contract-status.status-cancelled {
    background: rgba(255, 23, 68, 0.15);
    color: var(--accent-red);
}

.contract-card-body {
    margin-bottom: var(--spacing-sm);
}

.contract-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

.contract-meta {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meta-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.meta-value {
    font-size: 12px;
    color: var(--text-primary);
}

.meta-value.value-usd {
    color: var(--status-success);
    font-weight: 600;
}

.contract-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.contract-address code {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
}

.contract-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.contract-actions .action-btn {
    padding: 4px 10px;
    font-size: 10px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: 'Orbitron', monospace;
    font-weight: 500;
}

.action-btn.action-primary {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: white;
}

.action-btn.action-secondary {
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    color: var(--text-accent);
}

.action-btn.action-success {
    background: linear-gradient(135deg, var(--status-success), #00cc66);
    color: white;
}

.action-btn.action-warning {
    background: rgba(255, 170, 0, 0.2);
    border: 1px solid var(--status-warning);
    color: var(--status-warning);
}

.action-btn.action-danger {
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid rgba(255, 23, 68, 0.3);
    color: var(--accent-red);
}

.action-btn:hover {
    transform: translateY(-1px);
}

/* Contracts summary */
.contracts-summary {
    display: flex;
    justify-content: space-around;
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.summary-stat .stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-accent);
}

.summary-stat .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* Contract detail view */
.contract-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.detail-header {
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-accent);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    margin-bottom: var(--spacing-sm);
}

.back-btn:hover {
    text-decoration: underline;
}

.detail-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.detail-title .type-icon {
    font-size: 28px;
}

.detail-title h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.status-badge {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}

.detail-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.detail-actions .action-btn {
    padding: 8px 14px;
    font-size: 11px;
}

/* Detail tabs */
.detail-tabs {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast);
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 168, 255, 0.05);
}

.tab-btn.active {
    color: var(--text-accent);
    background: rgba(0, 168, 255, 0.1);
}

/* Detail content */
.detail-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.tab-content {
    max-width: 800px;
}

.tab-content h3 {
    font-size: 14px;
    color: var(--text-accent);
    margin-bottom: var(--spacing-md);
}

/* Info section */
.info-section {
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.info-section h3 {
    margin-top: 0;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item.full-width {
    grid-column: span 2;
}

.info-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.info-value {
    font-size: 13px;
    color: var(--text-primary);
}

.info-value.selectable {
    user-select: all;
    cursor: text;
}

.info-value.value-large {
    font-size: 20px;
    font-weight: 700;
    color: var(--status-success);
}

/* Parties tab */
.parties-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.parties-tab .party-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.party-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-accent);
    background: rgba(0, 168, 255, 0.1);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    min-width: 80px;
    text-align: center;
}

.party-info {
    flex: 1;
}

.party-label {
    font-size: 13px;
    color: var(--text-primary);
    display: block;
}

.party-address {
    font-size: 11px;
    color: var(--text-muted);
}

.party-account {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.linked-badge {
    font-size: 10px;
    color: var(--status-success);
}

.account-id {
    font-size: 11px;
    color: var(--text-muted);
}

/* Conditions tab */
.conditions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.condition-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.condition-card.satisfied {
    border-color: var(--status-success);
    background: rgba(0, 255, 136, 0.03);
}

.condition-status {
    font-size: 20px;
}

.condition-info {
    flex: 1;
}

.condition-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-accent);
    display: block;
}

.condition-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* History tab */
.events-timeline {
    position: relative;
    padding-left: 20px;
}

.events-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 168, 255, 0.2);
}

.event-item {
    position: relative;
    margin-bottom: var(--spacing-md);
}

.event-marker {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: var(--primary-blue);
    border-radius: 50%;
    border: 2px solid var(--dark-bg);
}

.event-content {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.event-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-accent);
    font-weight: 600;
}

.event-time {
    font-size: 10px;
    color: var(--text-muted);
}

.event-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}

.event-tx {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
}

.event-actor {
    font-size: 10px;
    color: var(--text-muted);
}

/* Security tab */
.security-score {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
}

.score-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(
        var(--status-success) calc(var(--score) * 3.6deg),
        rgba(0, 0, 0, 0.3) 0
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--dark-bg);
}

.score-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--status-success);
    position: relative;
    z-index: 1;
}

.score-max {
    font-size: 10px;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.score-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.patterns-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.pattern-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 11px;
}

.pattern-check {
    color: var(--status-success);
}

.pattern-name {
    color: var(--text-secondary);
}

/* Empty state in contract panel */
.contract-management-panel .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.contract-management-panel .empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.contract-management-panel .empty-state h3 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.contract-management-panel .empty-state p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.contract-management-panel .empty-state .empty-hint {
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--spacing-sm);
}

.empty-state.small {
    padding: var(--spacing-lg);
}

.empty-state.small p {
    font-size: 12px;
}

/* ============================================================================
   TRANSFER PANEL V2 - Redesigned
   ============================================================================ */

.transfer-panel-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--dark-bg);
}

/* Header with source selector */
.transfer-header {
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.transfer-header .header-title h2 {
    font-size: 18px;
    margin: 0 0 var(--spacing-sm) 0;
}

.source-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.source-selector .selector-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.source-dropdown {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
}

.source-dropdown:focus {
    outline: none;
    border-color: var(--primary-blue);
}

/* Progress indicator v2 */
.transfer-progress-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    gap: var(--spacing-xs);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.progress-step .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 168, 255, 0.1);
    border: 2px solid rgba(0, 168, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all var(--duration-fast);
}

.progress-step.active .step-number {
    background: rgba(0, 168, 255, 0.2);
    border-color: var(--primary-blue);
    color: var(--text-accent);
}

.progress-step.current .step-number {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.4);
}

.progress-step .step-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.progress-step.active .step-label {
    color: var(--text-secondary);
}

.progress-step.current .step-label {
    color: var(--text-accent);
}

.transfer-progress-v2 .step-connector {
    width: 20px;
    height: 2px;
    background: rgba(0, 168, 255, 0.2);
    margin-bottom: 20px;
}

.transfer-progress-v2 .step-connector.active {
    background: var(--primary-blue);
}

/* Content area */
.transfer-content-v2 {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.transfer-step {
    max-width: 500px;
    margin: 0 auto;
}

.transfer-step .step-title {
    font-size: 16px;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    text-align: center;
}

.transfer-step .step-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 var(--spacing-lg) 0;
    text-align: center;
}

/* Account cards */
.account-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.account-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast);
    text-align: left;
    width: 100%;
}

.account-card:hover {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.06);
}

.account-card.selected {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.2);
}

.account-icon {
    font-size: 24px;
}

.account-info {
    flex: 1;
}

.account-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.account-balances {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: 4px;
    flex-wrap: wrap;
}

.balance-chip {
    font-size: 10px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 3px;
}

.account-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--status-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--duration-fast);
}

.account-card.selected .account-check {
    opacity: 1;
}

/* Recipient search */
.recipient-search {
    margin-bottom: var(--spacing-md);
}

.recipient-search input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 10px 14px;
}

.recipient-search input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.recipient-search input::placeholder {
    color: var(--text-muted);
}

/* Recipient categories */
.recipient-categories {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: 4px;
}

.category-tab {
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast);
}

.category-tab:hover {
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.category-tab.active {
    background: rgba(0, 168, 255, 0.15);
    border-color: var(--primary-blue);
    color: var(--text-accent);
}

/* Address book list */
.address-book-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: var(--spacing-md);
}

.recipient-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
    text-align: left;
    width: 100%;
}

.recipient-row:hover {
    background: rgba(0, 168, 255, 0.05);
    border-color: rgba(0, 168, 255, 0.2);
}

.recipient-row.selected {
    background: rgba(0, 168, 255, 0.1);
    border-color: var(--primary-blue);
}

.recipient-icon {
    font-size: 18px;
    min-width: 24px;
    text-align: center;
}

.recipient-info {
    flex: 1;
    min-width: 0;
}

.recipient-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.own-account-badge {
    font-size: 9px;
    background: rgba(0, 255, 136, 0.15);
    color: var(--status-success);
    padding: 2px 6px;
    border-radius: 3px;
}

.recipient-details {
    display: flex;
    gap: var(--spacing-xs);
    font-size: 10px;
    color: var(--text-muted);
}

.recipient-chain {
    text-transform: uppercase;
    background: rgba(0, 168, 255, 0.1);
    padding: 1px 4px;
    border-radius: 2px;
}

.verified-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--status-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.add-recipient-btn {
    width: 100%;
    padding: var(--spacing-sm);
    background: rgba(0, 168, 255, 0.05);
    border: 1px dashed rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-accent);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-fast);
    margin-bottom: var(--spacing-md);
}

.add-recipient-btn:hover {
    background: rgba(0, 168, 255, 0.1);
    border-color: var(--primary-blue);
}

/* Asset selector */
.asset-selector {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.asset-chip {
    padding: 8px 16px;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.asset-chip:hover {
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.asset-chip.selected {
    background: rgba(0, 168, 255, 0.15);
    border-color: var(--primary-blue);
    color: var(--text-accent);
}

/* Amount input v2 */
.amount-input-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.amount-input-v2 .currency-symbol {
    font-size: 32px;
    color: var(--text-muted);
}

.amount-input-v2 .amount-field {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 42px;
    font-weight: 700;
    width: 200px;
    text-align: center;
}

.amount-input-v2 .amount-field:focus {
    outline: none;
}

.amount-input-v2 .amount-field::placeholder {
    color: var(--text-muted);
}

.balance-display {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

/* Quick amounts */
.quick-amounts {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.quick-amount {
    padding: 6px 14px;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.quick-amount:hover {
    border-color: var(--primary-blue);
    color: var(--text-accent);
}

.quick-amount.max {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.3);
    color: var(--status-success);
}

/* Memo input */
.memo-input {
    margin-bottom: var(--spacing-lg);
}

.memo-input label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.memo-input input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 10px 14px;
}

.memo-input input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

/* Routes list v2 */
.routes-list-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.route-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast);
    text-align: left;
    width: 100%;
}

.route-card:hover:not(:disabled) {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.06);
}

.route-card.selected {
    border-color: var(--primary-blue);
    background: rgba(0, 168, 255, 0.1);
}

.route-card.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.route-icon {
    font-size: 24px;
    min-width: 32px;
    text-align: center;
}

.route-info {
    flex: 1;
}

.route-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.route-description {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.route-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: 10px;
}

.route-fee {
    color: var(--status-success);
}

.route-time {
    color: var(--text-secondary);
}

.route-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--status-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--duration-fast);
}

.route-card.selected .route-check {
    opacity: 1;
}

/* Review card */
.review-card {
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.15);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.review-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.review-section:last-child {
    border-bottom: none;
}

.review-section.amount,
.review-section.total {
    padding: var(--spacing-md) 0;
}

.review-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.review-value {
    font-size: 13px;
    color: var(--text-primary);
    text-align: right;
}

.review-value.large {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-accent);
}

.review-subvalue {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.asset-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 4px;
}

.review-section.total {
    background: rgba(0, 168, 255, 0.05);
    margin: var(--spacing-sm) calc(-1 * var(--spacing-md));
    padding: var(--spacing-md);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ETA display */
.eta-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 168, 255, 0.05);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
}

.eta-icon {
    font-size: 16px;
}

.eta-text {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Processing step */
.transfer-step.processing {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.processing-animation {
    margin-bottom: var(--spacing-lg);
}

.processing-animation .spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(0, 168, 255, 0.2);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.processing-text {
    font-size: 12px;
    color: var(--text-muted);
    margin: var(--spacing-sm) 0 var(--spacing-lg);
}

.processing-steps {
    text-align: left;
    max-width: 250px;
    margin: 0 auto;
}

.proc-step {
    font-size: 12px;
    padding: var(--spacing-xs) 0;
    color: var(--text-muted);
}

.proc-step.done {
    color: var(--status-success);
}

.proc-step.active {
    color: var(--text-accent);
}

/* Complete step */
.transfer-step.complete {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.success-animation {
    margin-bottom: var(--spacing-lg);
}

.success-check {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--status-success), #00cc66);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto;
    animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.completion-summary {
    margin-bottom: var(--spacing-lg);
}

.summary-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-accent);
    margin: 0;
}

.summary-recipient {
    font-size: 14px;
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0 0;
}

.completion-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.view-tx-btn {
    padding: 10px 20px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-accent);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    cursor: pointer;
}

.new-transfer-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Step actions */
.step-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.back-btn {
    padding: 12px 24px;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.back-btn:hover {
    border-color: var(--primary-blue);
    color: var(--text-accent);
}

.next-btn {
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.next-btn:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.4);
}

.next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.confirm-btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--status-success), #00cc66);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.confirm-btn:hover {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

/* Empty recipients */
.empty-recipients {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-muted);
}

/* ============================================================================
   ROUTE BUILDER PANEL
   ============================================================================ */

.route-builder-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.builder-header {
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.builder-header h2 {
    font-size: 18px;
    margin: 0 0 var(--spacing-xs) 0;
}

.builder-header .header-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.builder-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Provider Catalog */
.provider-catalog {
    width: 280px;
    border-right: 1px solid rgba(0, 168, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.provider-catalog h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: var(--spacing-md);
    margin: 0;
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.provider-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.provider-card {
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-left: 3px solid var(--provider-color, var(--primary-blue));
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.provider-card.selected {
    border-color: var(--provider-color, var(--primary-blue));
    background: rgba(0, 168, 255, 0.06);
}

.provider-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background var(--duration-fast);
}

.provider-header:hover {
    background: rgba(0, 168, 255, 0.05);
}

.provider-icon {
    font-size: 20px;
}

.provider-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.provider-category {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
}

.hop-types {
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.hop-type-btn {
    width: 100%;
    padding: var(--spacing-sm);
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    margin-bottom: var(--spacing-xs);
    transition: all var(--duration-fast);
}

.hop-type-btn:hover {
    background: rgba(0, 168, 255, 0.1);
    border-color: var(--primary-blue);
}

.hop-type-btn:last-child {
    margin-bottom: 0;
}

.hop-type-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.hop-type-flow {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.hop-type-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 10px;
    color: var(--text-muted);
}

.hop-time {
    color: var(--text-secondary);
}

.hop-manual {
    color: var(--status-warning);
}

/* Route Canvas */
.route-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.canvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.route-meta-inputs {
    display: flex;
    gap: var(--spacing-sm);
    flex: 1;
}

.route-name-input,
.route-desc-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 8px 12px;
}

.route-name-input {
    width: 200px;
}

.route-desc-input {
    flex: 1;
}

.route-name-input:focus,
.route-desc-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.canvas-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-clear {
    padding: 8px 16px;
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid rgba(255, 23, 68, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent-red);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    cursor: pointer;
}

.btn-clear:hover {
    background: rgba(255, 23, 68, 0.2);
}

/* Route Hops */
.route-hops {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.empty-route {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
}

.empty-route .empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-route h4 {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.empty-route p {
    font-size: 12px;
    max-width: 300px;
}

.hop-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hop-card-wrapper.parallel {
    margin-left: 40px;
    position: relative;
}

.hop-card-wrapper.parallel::before {
    content: '⚡ Parallel';
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 9px;
    color: var(--status-warning);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hop-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 500px;
}

.hop-order {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.hop-content {
    flex: 1;
}

.hop-card .hop-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.hop-card .hop-provider {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-accent);
}

.hop-card .hop-type {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: 3px;
}

.hop-card .hop-automation {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
}

.hop-card .hop-flow {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.hop-card .hop-input,
.hop-card .hop-output {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.hop-card .amount-input {
    width: 80px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 4px 8px;
}

.hop-card .amount-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.hop-card .asset-label,
.hop-card .output-label {
    font-size: 11px;
    color: var(--text-muted);
}

.hop-card .hop-arrow {
    color: var(--primary-blue);
    font-size: 16px;
}

.hop-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hop-action {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    transition: all var(--duration-fast);
}

.hop-action.parallel {
    background: rgba(255, 170, 0, 0.1);
    color: var(--status-warning);
}

.hop-action.parallel.active {
    background: var(--status-warning);
    color: white;
}

.hop-action.remove {
    background: rgba(255, 23, 68, 0.1);
    color: var(--accent-red);
}

.hop-action.remove:hover {
    background: var(--accent-red);
    color: white;
}

.hop-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.hop-connector .connector-line {
    width: 2px;
    height: 20px;
    background: rgba(0, 168, 255, 0.3);
}

.hop-connector .connector-arrow {
    color: rgba(0, 168, 255, 0.5);
    font-size: 10px;
}

/* Route Summary */
.route-summary {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.route-summary .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.route-summary .summary-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.route-summary .summary-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-accent);
}

.route-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.btn-save {
    padding: 10px 24px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-accent);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    cursor: pointer;
}

.btn-save:hover {
    background: rgba(0, 168, 255, 0.2);
}

.btn-execute {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--status-success), #00cc66);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-execute:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.btn-execute:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   ADDRESS BOOK PANEL
   ============================================================================ */

.address-book-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.address-book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.address-book-header h2 {
    font-size: 18px;
    margin: 0;
}

.add-contact-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.add-contact-btn:hover {
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.4);
}

.address-book-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.search-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 1;
    max-width: 300px;
}

.search-box .search-icon {
    color: var(--text-muted);
}

.search-box .search-input {
    flex: 1;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 6px 10px;
}

.search-box .search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.category-filters {
    display: flex;
    gap: 4px;
}

.filter-btn {
    padding: 4px 8px;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.filter-btn:hover {
    background: rgba(0, 168, 255, 0.1);
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.address-book-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Contacts List */
.contacts-list {
    width: 300px;
    border-right: 1px solid rgba(0, 168, 255, 0.1);
    overflow-y: auto;
}

.empty-contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}

.empty-contacts .empty-icon {
    font-size: 36px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.05);
    cursor: pointer;
    transition: background var(--duration-fast);
}

.contact-card:hover {
    background: rgba(0, 168, 255, 0.05);
}

.contact-card.selected {
    background: rgba(0, 168, 255, 0.1);
    border-left: 3px solid var(--primary-blue);
}

.contact-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 255, 0.1);
    border-radius: 50%;
    font-size: 16px;
}

.contact-info {
    flex: 1;
    min-width: 0;
}

.contact-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.verified-badge {
    font-size: 10px;
    color: var(--status-success);
}

.verified-badge.large {
    font-size: 11px;
    background: rgba(0, 255, 136, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: var(--spacing-xs);
}

.contact-meta {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    gap: var(--spacing-sm);
}

.contact-trust {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.trust-score {
    font-size: 10px;
    color: var(--status-success);
    font-weight: 600;
}

.privacy-level {
    font-size: 12px;
}

/* Contact Detail */
.contact-detail {
    flex: 1;
    overflow-y: auto;
}

.no-contact-selected {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
}

.no-contact-selected .no-select-icon {
    font-size: 36px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.contact-detail-content {
    padding: var(--spacing-lg);
}

.detail-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.detail-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 255, 0.1);
    border-radius: 50%;
    font-size: 24px;
}

.detail-title h3 {
    font-size: 18px;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

.detail-category {
    font-size: 11px;
    color: var(--text-muted);
}

.detail-section {
    margin-bottom: var(--spacing-lg);
}

.detail-section h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 0 0 var(--spacing-sm) 0;
}

.security-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.security-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.security-value {
    font-size: 12px;
    color: var(--text-primary);
}

.trust-bar {
    width: 150px;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.trust-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--status-warning), var(--status-success));
    border-radius: 4px;
}

.trust-bar .trust-label {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: white;
    font-weight: 600;
}

.addresses-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.address-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 168, 255, 0.03);
    border-radius: var(--radius-sm);
}

.chain-icon {
    font-size: 14px;
}

.chain-name {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 70px;
}

.address-value {
    flex: 1;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.copy-btn {
    padding: 4px 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.5;
    transition: opacity var(--duration-fast);
}

.copy-btn:hover {
    opacity: 1;
}

.add-address-btn {
    margin-top: var(--spacing-sm);
    padding: 6px 12px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px dashed rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-accent);
    font-size: 11px;
    cursor: pointer;
}

.add-address-btn:hover {
    background: rgba(0, 168, 255, 0.15);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.tag {
    padding: 4px 8px;
    background: rgba(0, 168, 255, 0.1);
    border-radius: 3px;
    font-size: 10px;
    color: var(--text-accent);
}

.notes-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.detail-footer {
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
    margin-top: var(--spacing-lg);
}

.created-date {
    font-size: 10px;
    color: var(--text-muted);
}

.detail-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.action-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.action-btn.send {
    background: linear-gradient(135deg, var(--status-success), #00cc66);
    border: none;
    color: white;
}

.action-btn.send:hover {
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.action-btn.edit {
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    color: var(--text-accent);
}

.action-btn.edit:hover {
    background: rgba(0, 168, 255, 0.2);
}

.action-btn.delete {
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid rgba(255, 23, 68, 0.3);
    color: var(--accent-red);
}

.action-btn.delete:hover {
    background: rgba(255, 23, 68, 0.2);
}

/* Add Contact Modal */
.add-contact-modal {
    width: 500px;
    max-height: 80vh;
    background: var(--bg-card);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.form-group .hint {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}

.form-input,
.form-textarea {
    width: 100%;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 10px 12px;
}

.form-textarea {
    min-height: 80px;
    resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.category-selector,
.privacy-selector {
    display: grid;
    gap: var(--spacing-xs);
}

.category-selector {
    grid-template-columns: repeat(4, 1fr);
}

.privacy-selector {
    grid-template-columns: 1fr;
}

.category-option,
.privacy-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--spacing-sm);
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.category-option:hover,
.privacy-option:hover {
    background: rgba(0, 168, 255, 0.08);
}

.category-option.selected,
.privacy-option.selected {
    background: rgba(0, 168, 255, 0.15);
    border-color: var(--primary-blue);
}

.cat-icon {
    font-size: 16px;
}

.cat-label {
    font-size: 9px;
    color: var(--text-muted);
}

.privacy-option {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.privacy-icon {
    font-size: 20px;
}

.privacy-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.privacy-desc {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
}

.added-addresses {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.added-address {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius-sm);
}

.added-address .chain {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--status-success);
    font-weight: 600;
}

.added-address .addr {
    flex: 1;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.added-address .remove-addr {
    padding: 2px 6px;
    background: transparent;
    border: none;
    color: var(--accent-red);
    cursor: pointer;
    font-size: 10px;
}

.address-input-row {
    display: flex;
    gap: var(--spacing-xs);
}

.chain-select {
    width: 120px;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    padding: 8px;
}

.address-input {
    flex: 1;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 8px;
}

.address-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.validate-btn {
    padding: 8px 12px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-accent);
    font-size: 11px;
    cursor: pointer;
}

.validate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.btn-cancel {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    cursor: pointer;
}

.btn-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.btn-create {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.btn-create:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.4);
}

.btn-create:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   DATA INVENTORY PANEL
   ============================================================================ */

.data-inventory-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inventory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(0, 168, 255, 0.05));
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.header-title h2 {
    font-size: 18px;
    margin: 0;
    background: linear-gradient(135deg, #8B5CF6, var(--primary-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

.header-stats {
    display: flex;
    gap: var(--spacing-lg);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-item .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-accent);
}

.stat-item .stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.inventory-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.inventory-search .search-icon {
    color: var(--text-muted);
}

.inventory-search .search-input {
    flex: 1;
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    padding: 8px 12px;
}

.inventory-search .search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.inventory-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Category list */
.category-list {
    width: 260px;
    border-right: 1px solid rgba(0, 168, 255, 0.1);
    overflow-y: auto;
    padding: var(--spacing-sm);
}

.category-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.category-card:hover {
    background: rgba(0, 168, 255, 0.08);
    border-color: rgba(0, 168, 255, 0.2);
}

.category-card.selected {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
}

.category-card.add-new {
    border-style: dashed;
    opacity: 0.6;
}

.category-card.add-new:hover {
    opacity: 1;
}

.category-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 6px;
}

.category-info {
    flex: 1;
    min-width: 0;
}

.category-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.category-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 10px;
    color: var(--text-muted);
}

.category-status .status-badge {
    font-size: 12px;
}

.status-active { color: var(--status-success); }
.status-stale { color: var(--status-warning); }
.status-error { color: var(--accent-red); }
.status-syncing { color: var(--primary-blue); }
.status-new { color: #8B5CF6; }

/* Table detail */
.table-detail {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
}

.no-selection .no-select-icon {
    font-size: 36px;
    margin-bottom: var(--spacing-sm);
    opacity: 0.5;
}

.no-selection h4 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-secondary);
}

.no-selection p {
    font-size: 12px;
    margin: 0;
}

/* Category detail */
.category-detail,
.table-detail-view {
    max-width: 700px;
}

.detail-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.detail-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(0, 168, 255, 0.1));
    border-radius: 10px;
}

.detail-title h3 {
    font-size: 20px;
    margin: 0 0 4px 0;
}

.detail-title p {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.stat-chip {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 168, 255, 0.05);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-sm);
}

.stat-chip .chip-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-accent);
}

.stat-chip .chip-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.tables-header,
.section-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.tables-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.table-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 168, 255, 0.03);
    border: 1px solid rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.table-row:hover {
    background: rgba(0, 168, 255, 0.08);
    border-color: rgba(0, 168, 255, 0.2);
}

.table-type-icon {
    font-size: 16px;
}

.table-info {
    flex: 1;
    min-width: 0;
}

.table-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.table-desc {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.table-rows,
.table-size {
    font-size: 10px;
    color: var(--text-secondary);
}

.table-badge {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
}

.table-badge.embeddings {
    background: rgba(139, 92, 246, 0.2);
}

.table-badge.hypertable {
    background: rgba(0, 168, 255, 0.2);
}

/* Table detail view */
.back-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    margin-bottom: var(--spacing-md);
}

.back-btn:hover {
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.columns-list,
.indexes-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.column-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.column-name {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pk-badge {
    font-size: 10px;
}

.column-type {
    font-family: 'JetBrains Mono', monospace;
    color: #8B5CF6;
    min-width: 150px;
}

.column-nullable {
    font-size: 9px;
    color: var(--text-muted);
    min-width: 60px;
}

.column-desc {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

.index-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.index-icon {
    color: var(--status-warning);
}

.index-name {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.table-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.query-btn,
.export-btn {
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    cursor: pointer;
}

.query-btn {
    background: linear-gradient(135deg, #8B5CF6, var(--primary-blue));
    border: none;
    color: white;
}

.query-btn:hover {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.export-btn {
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    color: var(--text-accent);
}

.export-btn:hover {
    background: rgba(0, 168, 255, 0.2);
}

/* ============================================================================
   RSS READER PANEL
   ============================================================================ */

.rss-reader-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rss-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(0, 168, 255, 0.1), rgba(139, 92, 246, 0.05));
    border-bottom: 1px solid rgba(0, 168, 255, 0.2);
}

.rss-header .header-title h2 {
    font-family: 'Orbitron', monospace;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.rss-header .header-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

.rss-header .header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.rss-header .action-btn {
    padding: 8px 12px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rss-header .action-btn:hover {
    background: rgba(0, 168, 255, 0.2);
    color: var(--text-primary);
}

.rss-header .action-btn.active {
    background: rgba(0, 168, 255, 0.3);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.rss-toolbar {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rss-toolbar .search-box {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 0 var(--spacing-sm);
}

.rss-toolbar .search-icon {
    font-size: 14px;
    margin-right: var(--spacing-xs);
}

.rss-toolbar .search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 10px 0;
    font-size: 13px;
}

.rss-toolbar .search-input::placeholder {
    color: var(--text-muted);
}

.category-pills {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.category-pills .pill {
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-pills .pill:hover {
    background: rgba(0, 168, 255, 0.1);
    border-color: rgba(0, 168, 255, 0.3);
}

.category-pills .pill.active {
    background: var(--cat-color, var(--primary-blue));
    background: color-mix(in srgb, var(--cat-color, var(--primary-blue)) 20%, transparent);
    border-color: var(--cat-color, var(--primary-blue));
    color: var(--cat-color, var(--primary-blue));
}

.rss-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    min-height: 0;
    overflow: hidden;
}

.article-list {
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.empty-articles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
}

.empty-articles .empty-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.article-card {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.article-card:hover {
    background: rgba(0, 168, 255, 0.05);
}

.article-card.selected {
    background: rgba(0, 168, 255, 0.1);
    border-left: 3px solid var(--primary-blue);
}

.article-card.read .article-title {
    color: var(--text-muted);
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.article-category {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 500;
}

.article-time {
    font-size: 10px;
    color: var(--text-muted);
}

.article-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.article-source {
    font-size: 11px;
    color: var(--text-muted);
}

.article-tickers {
    display: flex;
    gap: 4px;
}

.ticker-badge {
    padding: 2px 6px;
    background: rgba(247, 147, 26, 0.2);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    color: #F7931A;
    font-family: 'JetBrains Mono', monospace;
}

.ticker-badge.large {
    padding: 4px 10px;
    font-size: 12px;
}

.bookmark-indicator {
    font-size: 12px;
}

.article-reader {
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
}

.no-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    padding: var(--spacing-lg);
}

.no-article .no-article-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

.no-article h4 {
    font-size: 16px;
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-secondary);
}

.no-article p {
    font-size: 12px;
    margin: 0;
}

.article-content {
    padding: var(--spacing-lg);
}

.content-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.content-category {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

.content-source {
    font-size: 12px;
    color: var(--text-muted);
}

.content-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.4;
}

.content-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content-time {
    font-size: 12px;
    color: var(--text-muted);
}

.content-tickers {
    display: flex;
    gap: var(--spacing-xs);
}

.content-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.content-body p {
    margin: 0 0 var(--spacing-md) 0;
}

.content-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.read-more-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.read-more-btn:hover {
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.4);
}

.bookmark-btn,
.share-btn {
    padding: 10px 16px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bookmark-btn:hover,
.share-btn:hover {
    background: rgba(0, 168, 255, 0.2);
    color: var(--text-primary);
}

/* Sources Panel */
.sources-panel {
    padding: var(--spacing-lg);
}

.sources-panel h3 {
    font-family: 'Orbitron', monospace;
    font-size: 16px;
    margin: 0 0 var(--spacing-xs) 0;
}

.sources-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 var(--spacing-lg) 0;
}

.sources-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.source-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.source-category {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.source-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.source-name {
    font-size: 13px;
    color: var(--text-primary);
}

.source-count {
    font-size: 10px;
    color: var(--text-muted);
}

.source-priority {
    font-size: 10px;
    padding: 4px 8px;
    background: rgba(0, 255, 136, 0.1);
    border-radius: var(--radius-sm);
    color: var(--status-success);
    text-transform: uppercase;
}

.sources-footer {
    margin-top: var(--spacing-lg);
}

.add-feed-btn {
    width: 100%;
    padding: 12px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px dashed rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-blue);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-feed-btn:hover {
    background: rgba(0, 168, 255, 0.2);
    border-style: solid;
}

/* ============================================================================
   WORKFLOW PROGRESS - Agent-driven workflow execution UI
   ============================================================================ */

.workflow-progress {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(0, 168, 255, 0.05) 100%);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    position: relative;
    overflow: hidden;
}

.workflow-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-red), var(--primary-blue));
    background-size: 200% 100%;
    animation: workflow-gradient 3s ease infinite;
}

@keyframes workflow-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.workflow-progress.state-completed::before {
    background: var(--status-success);
    animation: none;
}

.workflow-progress.state-failed::before {
    background: var(--status-error);
    animation: none;
}

.workflow-progress.state-compensating::before {
    background: var(--status-warning);
    animation: pulse 1s ease infinite;
}

/* Header */
.workflow-header {
    margin-bottom: var(--spacing-md);
}

.workflow-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.workflow-icon {
    font-size: 24px;
}

.workflow-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.workflow-pattern-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-weight: 500;
}

.badge-saga {
    background: rgba(255, 170, 0, 0.2);
    color: var(--status-warning);
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.badge-dag {
    background: rgba(0, 168, 255, 0.2);
    color: var(--primary-blue);
    border: 1px solid rgba(0, 168, 255, 0.3);
}

.badge-linear {
    background: rgba(0, 255, 136, 0.2);
    color: var(--status-success);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.workflow-description {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Progress Bar */
.workflow-progress-bar {
    margin-bottom: var(--spacing-md);
}

.progress-track {
    height: 8px;
    background: rgba(0, 168, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-xs);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue), var(--status-success));
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s ease infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

/* Steps List */
.workflow-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.workflow-step {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(0, 168, 255, 0.05);
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.workflow-step.step-current {
    background: rgba(0, 168, 255, 0.15);
    border-left-color: var(--primary-blue);
}

.workflow-step.step-completed {
    opacity: 0.8;
}

.workflow-step.step-completed .step-icon {
    color: var(--status-success);
}

.workflow-step.step-failed {
    background: rgba(255, 23, 68, 0.1);
    border-left-color: var(--status-error);
}

.workflow-step.step-failed .step-icon {
    color: var(--status-error);
}

.workflow-step.step-running .step-icon {
    color: var(--primary-blue);
    animation: pulse 1s ease infinite;
}

.workflow-step.step-auth {
    background: rgba(255, 170, 0, 0.1);
    border-left-color: var(--status-warning);
}

.step-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--text-muted);
}

.step-content {
    flex: 1;
    min-width: 0;
}

.step-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.step-description {
    font-size: 11px;
    color: var(--text-secondary);
}

.step-spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--primary-blue);
    margin-top: 4px;
}

.spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0, 168, 255, 0.3);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.step-panel-badge {
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(0, 168, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--primary-blue);
    flex-shrink: 0;
}

/* Auth Prompt */
.workflow-auth-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.3);
    border-radius: var(--radius-md);
    text-align: center;
}

.auth-icon {
    font-size: 32px;
}

.auth-message {
    font-size: 14px;
    color: var(--text-primary);
}

.btn-auth {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--status-warning), #ff8800);
    border: none;
    border-radius: var(--radius-sm);
    color: #000;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-auth:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 170, 0, 0.4);
}

/* Error State */
.workflow-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: rgba(255, 23, 68, 0.1);
    border: 1px solid rgba(255, 23, 68, 0.3);
    border-radius: var(--radius-md);
    text-align: center;
}

.error-icon {
    font-size: 32px;
}

.error-message {
    font-size: 13px;
    color: var(--text-primary);
}

.error-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-retry {
    padding: 8px 16px;
    background: rgba(0, 168, 255, 0.2);
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-blue);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-retry:hover {
    background: rgba(0, 168, 255, 0.3);
}

.btn-cancel {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    border-color: rgba(255, 23, 68, 0.5);
    color: var(--status-error);
}

/* Completion State */
.workflow-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius-md);
    text-align: center;
}

.complete-icon {
    font-size: 32px;
}

.complete-message {
    font-size: 14px;
    color: var(--status-success);
    font-weight: 500;
}

/* Running Footer */
.workflow-running-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(0, 168, 255, 0.1);
}

.running-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--primary-blue);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-blue);
    border-radius: 50%;
    animation: pulse-scale 1.5s ease infinite;
}

@keyframes pulse-scale {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.btn-cancel-running {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255, 23, 68, 0.3);
    border-radius: var(--radius-sm);
    color: var(--status-error);
    font-size: 11px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.btn-cancel-running:hover {
    opacity: 1;
    background: rgba(255, 23, 68, 0.1);
}

/* Compact Progress */
.workflow-progress-compact {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px 12px;
    background: rgba(0, 168, 255, 0.1);
    border: 1px solid rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.compact-icon {
    font-size: 14px;
}

.compact-name {
    color: var(--text-primary);
    font-weight: 500;
}

.compact-progress {
    color: var(--text-muted);
}

.compact-state {
    padding: 2px 6px;
    background: rgba(0, 168, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--primary-blue);
    font-size: 10px;
    text-transform: uppercase;
}