*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-bg: #0f172a;--color-surface: #1e293b;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--color-border: #334155;--color-success: #22c55e;--color-warning: #f59e0b;--color-error: #ef4444;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}html,body,#root{height:100%;background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.app-layout{display:flex;flex-direction:column;height:100%;padding-top:var(--safe-top)}.app-main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.25rem;padding-left:calc(1.25rem + var(--safe-left));padding-right:calc(1.25rem + var(--safe-right))}.app-nav{display:flex;border-top:1px solid var(--color-border);background:var(--color-surface);padding-bottom:var(--safe-bottom)}.nav-link{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 8px;text-decoration:none;color:var(--color-text-muted);font-size:.7rem;transition:color .2s;-webkit-tap-highlight-color:transparent}.nav-link.active{color:var(--color-primary)}.nav-icon{width:22px;height:22px}.nav-label{font-weight:500}.offline-banner{background:var(--color-warning);color:#000;text-align:center;padding:6px 1rem;font-size:.8rem;font-weight:600}.update-prompt{position:fixed;bottom:calc(70px + var(--safe-bottom) + 12px);left:1rem;right:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;z-index:100;box-shadow:0 4px 24px #0006}.update-prompt p{font-size:.875rem}.update-prompt-actions{display:flex;gap:.5rem;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;border-radius:8px;border:none;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s;-webkit-tap-highlight-color:transparent}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark)}.btn-ghost{background:transparent;color:var(--color-text-muted)}.btn-full{width:100%;padding:1rem;font-size:1rem}.card{background:var(--color-surface);border-radius:12px;padding:1.25rem;border:1px solid var(--color-border)}.card+.card{margin-top:.75rem}.card h2{font-size:1.05rem;margin-bottom:.5rem}.card p{color:var(--color-text-muted);font-size:.875rem;line-height:1.5}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.card-header h2{margin-bottom:0}.page-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.page-header .page-title{margin-bottom:0}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.status-badge.online{background:#22c55e26;color:var(--color-success)}.status-badge.offline{background:#f59e0b26;color:var(--color-warning)}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.fetch-info{color:var(--color-text-muted);font-size:.75rem;margin-bottom:.75rem}.data-list{list-style:none}.data-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1rem}.data-item+.data-item{margin-top:.5rem}.data-item h3{font-size:.95rem;margin-bottom:.25rem;text-transform:capitalize}.data-item p{color:var(--color-text-muted);font-size:.8rem;line-height:1.4}.error-text{color:var(--color-error)!important}.loading{text-align:center;padding:2rem;color:var(--color-text-muted)}.spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto .75rem}@keyframes spin{to{transform:rotate(360deg)}}.install-page{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:2rem;gap:1.25rem}.install-hero-icon{width:80px;height:80px;color:var(--color-primary)}.install-page h1{font-size:1.5rem}.install-page>p{color:var(--color-text-muted);line-height:1.5;max-width:320px}.install-steps{text-align:left;width:100%}.install-steps ol{padding-left:1.25rem}.install-steps li{color:var(--color-text-muted);padding:.375rem 0;line-height:1.4;font-size:.875rem}.install-note{margin-top:.75rem;font-size:.8rem!important}