:root{--pp-blue-50:#ECF8FE;--pp-blue-100:#D2EEFC;--pp-blue-200:#A6DDF9;--pp-blue-300:#6FC8F4;--pp-blue-400:#2EAFEC;--pp-blue-500:#0A95E0;--pp-blue-600:#0879C2;--pp-blue-700:#0A619C;--pp-blue-800:#0E5180;--pp-blue-900:#0F4368;--pp-blue-950:#082A44;--pp-cyan-400:#18C6F5;--pp-cyan-500:#00BEF0;--pp-white:#FFFFFF;--pp-gray-50:#F6F8FB;--pp-gray-100:#EEF2F7;--pp-gray-200:#E1E7EF;--pp-gray-300:#CBD4E0;--pp-gray-400:#9AA7B8;--pp-gray-500:#6B7889;--pp-gray-600:#4E5A6B;--pp-gray-700:#3A4452;--pp-gray-800:#28303B;--pp-gray-900:#181E27;--pp-gray-950:#0E131A;--color-brand:#0A95E0;--color-brand-hover:#0879C2;--color-brand-active:#0A619C;--color-brand-subtle:#ECF8FE;--color-accent:#00BEF0;--text-strong:var(--pp-gray-900);--text-body:var(--pp-gray-700);--text-on-brand:#FFFFFF;--text-brand:var(--pp-blue-600);--surface-page:var(--pp-gray-50);--surface-card:#FFFFFF;--surface-sunken:var(--pp-gray-100);--surface-brand-subtle:var(--pp-blue-50);--border-subtle:var(--pp-gray-200);--border-default:var(--pp-gray-300);--border-strong:var(--pp-gray-400);--border-focus:var(--pp-blue-500);--status-neutral-fg:var(--pp-gray-600);--status-neutral-bg:var(--pp-gray-100);--status-neutral-dot:var(--pp-gray-400);--status-progress-fg:#0879C2;--status-progress-bg:#ECF8FE;--status-progress-dot:#0A95E0;--status-success-fg:#128040;--status-success-bg:#E9F8EF;--status-success-dot:#16A34A;--status-attention-fg:#B45309;--status-attention-bg:#FDF0E3;--status-attention-dot:#EA7B0C;--status-error-fg:#C13438;--status-error-bg:#FDECEC;--status-error-dot:#E5484D;--radius-sm:6px;--radius:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--shadow-xs:0 1px 2px rgba(15,67,104,.06);--shadow-sm:0 1px 2px rgba(15,67,104,.06), 0 2px 6px rgba(15,67,104,.06);--shadow-md:0 2px 4px rgba(15,67,104,.06), 0 6px 16px rgba(15,67,104,.08);--shadow-lg:0 8px 24px rgba(15,67,104,.1), 0 2px 6px rgba(15,67,104,.06);--shadow-xl:0 16px 48px rgba(15,67,104,.14), 0 4px 12px rgba(15,67,104,.08);--ring-focus:0 0 0 3px rgba(10,149,224,.3);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--font-display:"Poppins","Segoe UI",system-ui,sans-serif;--font-body:"Manrope","Segoe UI",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;--ease-out:cubic-bezier(.22,1,.36,1);--transition:all .18s cubic-bezier(.22,1,.36,1);--bg:var(--surface-page);--surface:var(--surface-card);--card:var(--surface-card);--card-2:var(--surface-card);--text:var(--text-strong);--text-muted:var(--pp-gray-500);--text-subtle:var(--pp-gray-400);--border:var(--border-subtle);--border-bright:var(--border-default);--accent:var(--color-accent);--blue:var(--color-brand);--green:var(--status-success-dot);--orange:var(--status-attention-dot);--pink:#DB2777;--purple:#7C3AED;--teal:#0D9488;--grad-brand:linear-gradient(135deg,#0A95E0 0%,#00BEF0 100%);--grad-blue:linear-gradient(135deg,#0A619C 0%,#0A95E0 100%);--grad-green:linear-gradient(135deg,#128040 0%,#16A34A 100%);--grad-purple:linear-gradient(135deg,#6D28D9 0%,#7C3AED 100%);--grad-orange:linear-gradient(135deg,#C2410C 0%,#EA7B0C 100%);--glow-blue:var(--shadow-md);--glow-green:var(--shadow-md);--glow-purple:var(--shadow-md);--glow-pink:var(--shadow-md);--sidebar-w:260px}:root{color-scheme:light}:root[data-theme=dark]{color-scheme:dark;--pp-gray-50:#1C232E;--pp-gray-100:#222A36;--pp-gray-200:#2C3643;--pp-gray-300:#3A4452;--surface-page:#0E131A;--surface-card:#161C25;--surface-sunken:#222A36;--surface-brand-subtle:#0F2C44;--color-brand-subtle:#12344C;--text-strong:#F4F7FB;--text-body:#C9D3E0;--text-muted:#93A0B1;--text-subtle:#6E7B8C;--text-brand:#5BBDF2;--text-on-brand:#FFFFFF;--border-subtle:#262F3B;--border-default:#333E4C;--border-strong:#46525F;--status-neutral-fg:#AEB9C7;--status-neutral-bg:#222A36;--status-neutral-dot:#6B7889;--status-progress-fg:#6FC8F4;--status-progress-bg:#0F2C44;--status-progress-dot:#2EAFEC;--status-success-fg:#5FD08A;--status-success-bg:#10271B;--status-success-dot:#22C55E;--status-attention-fg:#F0A85C;--status-attention-bg:#2B1F11;--status-attention-dot:#F59E0B;--status-error-fg:#F0888B;--status-error-bg:#2B1416;--status-error-dot:#EF4444;--shadow-xs:0 1px 2px rgba(0,0,0,.4);--shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);--shadow-md:0 2px 4px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.35);--shadow-lg:0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);--shadow-xl:0 16px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4)}:root[data-theme=dark] .top-bar{background:#161c25d9}:root[data-theme=dark] .badge.purple{background:#241b3b;color:#c4b5fd}:root[data-theme=dark] .error-box{border-color:#532727}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.5;color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{height:100%}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-strong);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0}a{color:var(--text-brand);text-decoration:none}a:hover{text-decoration:underline}code,.font-mono{font-family:var(--font-mono)}:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--pp-gray-300);border-radius:99px;border:3px solid var(--surface-page)}::-webkit-scrollbar-thumb:hover{background:var(--pp-gray-400)}.app-shell{display:flex;height:100vh;overflow:hidden;background:var(--surface-page)}.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--color-brand);color:#fff;padding:8px 14px;border-radius:var(--radius);font-size:.875rem;font-weight:600}.skip-link:focus{left:8px;text-decoration:none}.sidebar{width:var(--sidebar-w);background:var(--surface-card);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.sidebar-logo{display:flex;align-items:center;gap:11px;padding:20px 20px 16px}.sidebar-logo-icon{width:40px;height:40px;flex-shrink:0;object-fit:contain;transform:scale(1.25)}.sidebar-logo-text{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--text-strong);letter-spacing:-.02em}.sidebar-logo-sub{font-size:.75rem;color:var(--text-muted);margin-top:1px}.sidebar-section{padding:6px 12px;display:flex;flex-direction:column;gap:2px}.sidebar-section-label{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle);padding:8px 12px 6px}.nav-item{display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;border-radius:var(--radius);color:var(--text-body);font-size:.875rem;font-weight:500;transition:var(--transition);position:relative}.nav-item:hover{background:var(--pp-gray-50);color:var(--text-strong);text-decoration:none}.nav-item.active{background:var(--color-brand-subtle);color:var(--text-brand);font-weight:600}.nav-icon{display:inline-flex;width:18px;justify-content:center;font-size:15px}.nav-pending-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--status-attention-dot);flex:none}.sidebar-footer{margin-top:auto;padding:16px;border-top:1px solid var(--border-subtle)}.status-dot{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--text-muted)}.status-dot-green{width:7px;height:7px;border-radius:50%;background:var(--status-success-dot);flex:none;box-shadow:0 0 0 3px #16a34a24}.theme-toggle{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 12px;margin-bottom:12px;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius);color:var(--text-body);font-family:var(--font-body);font-size:.8125rem;font-weight:600;text-align:left;transition:var(--transition)}.theme-toggle:hover{background:var(--pp-gray-50);border-color:var(--border-default);color:var(--text-strong)}.theme-toggle .theme-toggle-icon{display:inline-flex;width:18px;justify-content:center;font-size:15px}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.top-bar{height:60px;flex:none;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:16px;padding:0 24px}.top-bar-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text-muted);min-width:0}.top-bar-breadcrumb a{color:var(--text-muted)}.top-bar-breadcrumb a:hover{color:var(--text-body);text-decoration:none}.top-bar-sep{color:var(--text-subtle);display:flex}.page-body{flex:1;overflow-y:auto;padding:24px 32px}.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}button{font-family:inherit;cursor:pointer}.primary,.secondary,.ghost,.danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;font-family:var(--font-body);font-size:.875rem;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;border-radius:var(--radius);white-space:nowrap;transition:var(--transition)}.primary:focus-visible,.secondary:focus-visible,.ghost:focus-visible,.danger:focus-visible{box-shadow:var(--ring-focus)}.primary{background:var(--color-brand);color:#fff;box-shadow:var(--shadow-xs)}.primary:hover{background:var(--color-brand-hover)}.primary:active{background:var(--color-brand-active);transform:translateY(1px)}.secondary{background:var(--surface-card);color:var(--text-body);border-color:var(--border-default);box-shadow:var(--shadow-xs)}.secondary:hover{background:var(--pp-gray-50);border-color:var(--border-strong)}.secondary:active{background:var(--pp-gray-100);transform:translateY(1px)}.ghost{background:transparent;color:var(--text-body)}.ghost:hover{background:var(--pp-gray-100)}.danger{background:var(--status-error-dot);color:#fff;box-shadow:var(--shadow-xs)}.danger:hover{background:var(--status-error-fg)}.primary:disabled,.secondary:disabled,.ghost:disabled,.danger:disabled,.primary[aria-disabled=true],.secondary[aria-disabled=true]{opacity:.5;pointer-events:none}input,select,textarea{font-family:var(--font-body);font-size:.875rem;color:var(--text-strong);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius);padding:9px 12px;transition:var(--transition);width:100%}input::placeholder,textarea::placeholder{color:var(--text-subtle)}input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus)}input:disabled,select:disabled,textarea:disabled{background:var(--pp-gray-100);color:var(--text-subtle);cursor:not-allowed}select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7889' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}.field{display:flex;flex-direction:column;gap:6px}.field label,.field .label{font-size:.75rem;font-weight:600;color:var(--text-body);letter-spacing:-.01em}.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.section-title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--text-strong)}.empty{text-align:center;color:var(--text-muted)}.empty p{margin:6px 0}.card.empty{padding:40px 24px}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.kpi-card{position:relative;overflow:hidden;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px;display:flex;flex-direction:column;gap:10px;transition:var(--transition)}.kpi-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.kpi-card-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;opacity:.12;filter:blur(26px);pointer-events:none}.kpi-label{font-size:.875rem;color:var(--text-muted);font-weight:500}.kpi-value{font-family:var(--font-display);font-size:2.25rem;font-weight:700;color:var(--text-strong);letter-spacing:-.03em;line-height:1}.kpi-sub{font-size:.75rem;color:var(--text-subtle)}.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}.badge.active{background:var(--status-success-bg);color:var(--status-success-fg)}.badge.info{background:var(--status-progress-bg);color:var(--status-progress-fg)}.badge.pending{background:var(--status-attention-bg);color:var(--status-attention-fg)}.badge.inactive{background:var(--status-error-bg);color:var(--status-error-fg)}.badge.purple{background:#f1ecfd;color:#6d28d9}.badge.glow{box-shadow:none}.status-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;background:var(--status-neutral-bg);color:var(--status-neutral-fg)}.tenant-selector{height:38px;min-width:200px;padding:0 32px 0 12px;font-size:.875rem;font-weight:600;color:var(--text-strong);background-color:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius)}.tenant-selector:hover{border-color:var(--border-strong);background-color:var(--pp-gray-50)}.tenant-selector-error{font-size:.8125rem;color:var(--status-error-fg);font-weight:600}.conn-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-subtle)}.conn-row:last-child{border-bottom:none}.conn-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--pp-gray-300)}.conn-dot.green{background:var(--status-success-dot);box-shadow:0 0 0 3px #16a34a24}.conn-dot.red{background:var(--status-error-dot);box-shadow:0 0 0 3px #e5484d24}.conn-dot.gray{background:var(--pp-gray-300)}.conn-info{flex:1;min-width:0}.conn-name{font-size:.875rem;font-weight:600;color:var(--text-strong)}.conn-status{font-size:.75rem;color:var(--text-muted);margin-top:2px}.error-box{background:var(--status-error-bg);border:1px solid #F6C9C9;color:var(--status-error-fg);border-radius:var(--radius);padding:14px 16px;font-size:.875rem}.error-box .ghost{color:var(--status-error-fg);text-decoration:underline}.error-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--surface-page)}.error-screen-card{max-width:480px;width:100%;text-align:center;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:40px 32px}.error-screen-icon{width:60px;height:60px;margin:0 auto 20px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--status-attention-bg);color:var(--status-attention-fg)}.error-screen-stack{margin-top:20px;text-align:left;font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);background:var(--pp-gray-50);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:12px;max-height:200px;overflow:auto;white-space:pre-wrap}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#28303b8c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:100%;max-width:440px;background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden}.modal-header{padding:20px 24px 0}.modal-header h2,.modal-header h3{font-size:1.125rem}.modal-body{padding:14px 24px;font-size:.875rem;color:var(--text-body)}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;background:var(--pp-gray-50);border-top:1px solid var(--border-subtle)}.toast-stack{position:fixed;bottom:24px;right:24px;z-index:300;display:flex;flex-direction:column;gap:12px}.toast{display:flex;align-items:flex-start;gap:12px;width:380px;max-width:calc(100vw - 48px);padding:14px 16px;background:var(--surface-card);border:1px solid var(--border-subtle);border-left:3px solid var(--text-subtle);border-radius:var(--radius);box-shadow:var(--shadow-lg);animation:toast-in .22s var(--ease-out)}.toast-icon{flex:none;font-size:18px;line-height:1.2}.toast-message{flex:1;font-size:.875rem;color:var(--text-strong)}.toast-close{margin-left:auto;background:none;border:none;color:var(--text-subtle);font-size:16px;line-height:1;padding:2px 4px;border-radius:4px}.toast-close:hover{color:var(--text-body);background:var(--pp-gray-100)}.toast-success{border-left-color:var(--status-success-dot)}.toast-error{border-left-color:var(--status-error-dot)}.toast-warning{border-left-color:var(--status-attention-dot)}.toast-info{border-left-color:var(--status-progress-dot)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.skeleton{background:var(--pp-gray-100);border-radius:var(--radius-sm)}.skeleton-shimmer{background:linear-gradient(90deg,var(--pp-gray-100) 25%,var(--pp-gray-200) 37%,var(--pp-gray-100) 63%);background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}.spinner{display:inline-block;width:16px;height:16px;flex:none;border:2px solid rgba(10,149,224,.25);border-top-color:var(--color-brand);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}