:root{--font-system: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--space-1: 2px;--space-2: 4px;--space-3: 6px;--space-4: 8px;--space-5: 12px;--space-6: 16px;--space-8: 24px;--space-9: 32px;--space-11: 48px;--space-12: 64px;--space-xs: var(--space-2);--space-sm: var(--space-4);--space-md: var(--space-6);--space-lg: var(--space-8);--space-xl: var(--space-9);--space-2xl: var(--space-11);--space-3xl: var(--space-12);--radius-sm: 8px;--radius-md: 10px;--radius-card: 12px;--radius-lg: 16px;--radius-pill: 100px;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-out: cubic-bezier(.33, 1, .68, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--spring-bounce: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391, .472, .562, .66, .765, .878, 1, .968, .95, .942, .945, .955, .972, .992, 1, .993, .99, .992, .997, 1);--spring-gentle: linear(0, .11, .21, .31, .41, .51, .61, .71, .81, .91, .96, .98, .99, 1);--focus-ring-color: #b4befe;--focus-ring-width: 2px;--focus-ring-offset: 2px;--focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--surface-base, #1e1e2e), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);--grid-columns: 4;--grid-gutter: 16px;--grid-margin: 16px;--container-max: 1200px;--sat: env(safe-area-inset-top);--sab: env(safe-area-inset-bottom);--sal: env(safe-area-inset-left);--sar: env(safe-area-inset-right)}:root[data-theme=dark],:root:not([data-theme]){--ctp-rosewater: #f5e0dc;--ctp-flamingo: #f2cdcd;--ctp-pink: #f5c2e7;--ctp-mauve: #cba6f7;--ctp-red: #f38ba8;--ctp-peach: #fab387;--ctp-yellow: #f9e2af;--ctp-green: #a6e3a1;--ctp-teal: #94e2d5;--ctp-sky: #89dceb;--ctp-sapphire: #74c7ec;--ctp-blue: #89b4fa;--ctp-lavender: #b4befe;--ctp-text: #cdd6f4;--ctp-subtext1: #bac2de;--ctp-subtext0: #a6adc8;--ctp-overlay2: #9399b2;--ctp-overlay1: #7f849c;--ctp-overlay0: #6c7086;--ctp-surface2: #585b70;--ctp-surface1: #45475a;--ctp-surface0: #313244;--ctp-base: #1e1e2e;--ctp-mantle: #181825;--ctp-crust: #11111b;--ctp-border: #7f849c;--surface-base: #1e1e2e;--surface-raised: #313244;--surface-overlay: #45475a;--surface-elevated: #585b70;--bg-base: var(--surface-base);--bg-surface: var(--surface-raised);--bg-elevated: var(--surface-overlay);--bg-hover: var(--surface-elevated);--text-primary: #cdd6f4;--text-secondary: #bac2de;--text-tertiary: #a6adc8;--green: #a6e3a1;--green-soft: rgba(166, 227, 161, .15);--yellow: #f9e2af;--yellow-soft: rgba(249, 226, 175, .15);--red: #f38ba8;--red-soft: rgba(243, 139, 168, .15);--orange: #fab387;--divider: rgba(255, 255, 255, .06);--accent: #f9e2af;--accent-soft: rgba(249, 226, 175, .15);--text-on-accent: #1e1e2e;--shadow-card: 0 1px 3px rgba(0, 0, 0, .2), 0 4px 12px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .04);--shadow-elevated: 0 2px 6px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .06);--shadow-modal: 0 4px 16px rgba(0, 0, 0, .3), 0 16px 48px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);color-scheme:dark}:root[data-theme=light]{--ctp-latte-mauve: #8839ef;--ctp-latte-red: #d20f39;--ctp-latte-peach: #fe640b;--ctp-latte-yellow: #df8e1d;--ctp-latte-green: #40a02b;--ctp-latte-blue: #1e66f5;--ctp-latte-lavender: #7287fd;--ctp-latte-text: #4c4f69;--ctp-latte-subtext1: #5c5f77;--ctp-latte-subtext0: #6c6f85;--ctp-latte-overlay2: #7c7f93;--ctp-latte-surface0: #ccd0da;--ctp-latte-base: #eff1f5;--ctp-latte-mantle: #e6e9ef;--ctp-latte-crust: #dce0e8}:root[data-theme=light]{--surface-base: #EDE8E0;--surface-raised: #E0DBD3;--surface-overlay: #FFFFFF;--surface-elevated: #E5E0D8;--surface-container: #F2EDE5;--surface-container-high: #E0DBD3;--surface-container-low: #E8E3DB;--surface-container-highest: #E5E0D8;--surface-dim: #EDE8E0;--bg-base: var(--surface-base);--bg-surface: var(--surface-raised);--bg-elevated: var(--surface-overlay);--bg-hover: var(--surface-elevated);--text-primary: #3A3530;--text-secondary: #65605C;--text-tertiary: #5A5550;--primary: #3C6958;--primary-container: #4D8872;--on-primary: #FFFFFF;--primary-soft: rgba(60, 105, 88, .12);--secondary: #7E5A2C;--secondary-soft: rgba(126, 90, 44, .12);--tertiary: #924E3F;--tertiary-container: #CC9488;--tertiary-soft: rgba(146, 78, 63, .12);--green: #277744;--green-soft: #E3E6D5;--yellow: #8C6007;--yellow-soft: #F4E7CE;--red: #A84E33;--red-soft: #F2E1D3;--orange: #D4A574;--outline: #5A5550;--outline-variant: #D5D0C8;--divider: #D5D0C8;--border-subtle: color-mix(in srgb, var(--outline-variant) 10%, transparent);--inverse-surface: #3A3530;--accent: var(--primary);--accent-soft: var(--primary-soft);--text-on-accent: #FFFFFF;--shadow-card: 0px 0px 0px 1px rgba(0, 0, 0, .02), 0px 2px 6px rgba(0, 0, 0, .04), 0px 4px 8px rgba(0, 0, 0, .1);--shadow-elevated: 0px 0px 0px 1px rgba(0, 0, 0, .04), 0px 4px 12px rgba(0, 0, 0, .06), 0px 8px 24px rgba(0, 0, 0, .12);--shadow-modal: 0px 0px 0px 1px rgba(0, 0, 0, .04), 0px 8px 28px rgba(0, 0, 0, .08), 0px 20px 60px rgba(0, 0, 0, .16);--color-ocean: #2667C1;--color-plum: #865989;--city-chiangmai: #7A9E7E;--city-bangkok: #E6A855;--city-hoian: var(--color-ocean);--city-hanoi: var(--tertiary);--city-tokyo: #D4566A;--city-osaka: var(--secondary);--city-hakone: #8B7EB8;--red-accessible: #9B4A30;--amber-accessible: #7D5E37;--sand-accessible: #7A5C35;--sage-accessible: #3A6655;--plum-accessible: #7B4B7E;--ocean-light: #EAF0F9;--ocean-medium: #D5E1F4;--sage-light: #F0F4F1;--sage-medium: #D7E3D8;--terracotta-light: #F7ECE8;--terracotta-medium: #EDD5CE;--red-light: var(--terracotta-light);--sand-light: #F7F0E7;--sand-medium: #EEDCC8;--coral-light: #F9F0ED;--plum-light: #F4EFF4;--focus-ring-color: var(--primary);color-scheme:light}:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow);border-radius:inherit}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow);border-color:var(--focus-ring-color)}:focus:not(:focus-visible){outline:none;box-shadow:none}.focus-ring:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow)}.focus-ring-inset:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade-in{animation:fade-in var(--duration-normal) var(--ease-out) both}.animate-slide-up{animation:slide-up var(--duration-normal) var(--ease-out) both}.animate-slide-down{animation:slide-down var(--duration-normal) var(--ease-out) both}.stagger>:nth-child(1){animation-delay:0ms}.stagger>:nth-child(2){animation-delay:50ms}.stagger>:nth-child(3){animation-delay:.1s}.stagger>:nth-child(4){animation-delay:.15s}.stagger>:nth-child(5){animation-delay:.2s}.stagger>:nth-child(n+6){animation-delay:.25s}.press-down:active{transform:scale(.97)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--grid-margin)}@media (min-width: 640px){:root{--grid-columns: 8;--grid-gutter: 20px;--grid-margin: 24px}.sm\:col-span-2{grid-column:span 2}.sm\:col-span-4{grid-column:span 4}.sm\:col-span-6{grid-column:span 6}.sm\:col-span-8{grid-column:span 8}}@media (min-width: 1024px){:root{--grid-columns: 12;--grid-gutter: 24px;--grid-margin: 32px}.lg\:col-span-3{grid-column:span 3}.lg\:col-span-4{grid-column:span 4}.lg\:col-span-6{grid-column:span 6}.lg\:col-span-8{grid-column:span 8}.lg\:col-span-9{grid-column:span 9}.lg\:col-span-12{grid-column:span 12}}:root{--color-success: var(--green);--color-success-soft: var(--green-soft);--color-warning: var(--yellow);--color-warning-soft: var(--yellow-soft);--color-error: var(--red);--color-error-soft: var(--red-soft);--color-info: var(--ctp-blue);--color-info-soft: rgba(137, 180, 250, .12);--color-accent: var(--ctp-lavender);--accent-soft: rgba(180, 190, 254, .12);--text-on-accent: var(--ctp-base);--blue: var(--ctp-blue);--purple: var(--ctp-mauve);--text-muted: var(--ctp-subtext0);--tap-highlight: rgba(255, 255, 255, .05);--shadow-border: rgba(255, 255, 255, .08);--shadow-border-hover: rgba(255, 255, 255, .12);--shadow-border-medium: rgba(255, 255, 255, .14);--shadow-elevation: rgba(0, 0, 0, .3);--shadow-elevation-deep: rgba(0, 0, 0, .4);--shadow-inner-glow: rgba(255, 255, 255, .03);--shadow-inner-bright: rgba(255, 255, 255, .06);--shadow-separator: rgba(255, 255, 255, .06);--shadow-surface: 0 0 0 1px var(--shadow-border);--shadow-raised: 0 0 0 1px var(--shadow-border), 0 2px 4px var(--shadow-elevation), inset 0 1px 0 var(--shadow-inner-glow);--shadow-raised-hover: 0 0 0 1px var(--shadow-border-hover), 0 4px 12px var(--shadow-elevation-deep), inset 0 1px 0 var(--shadow-inner-bright);--brand-arlo: var(--ctp-base);--brand-brain: color-mix(in srgb, var(--ctp-blue) 8%, var(--ctp-mantle));--brand-recharge: color-mix(in srgb, var(--ctp-green) 8%, var(--ctp-mantle));--brand-receipts: color-mix(in srgb, var(--ctp-mauve) 8%, var(--ctp-mantle))}[data-theme=light]{--bg-base: var(--ctp-latte-base);--bg-surface: var(--ctp-latte-mantle);--bg-elevated: var(--ctp-latte-crust);--bg-hover: var(--ctp-latte-surface0);--text-primary: var(--ctp-latte-text);--text-secondary: var(--ctp-latte-subtext1);--text-tertiary: var(--ctp-latte-subtext0);--green: var(--ctp-latte-green);--green-soft: rgba(64, 160, 43, .12);--red: var(--ctp-latte-red);--red-soft: rgba(210, 15, 57, .12);--yellow: var(--ctp-latte-yellow);--yellow-soft: rgba(223, 142, 29, .12);--divider: var(--ctp-latte-surface0);--accent-soft: rgba(114, 135, 253, .08);--text-on-accent: var(--ctp-latte-base);--blue: var(--ctp-latte-blue);--purple: var(--ctp-latte-mauve);--text-muted: var(--ctp-latte-overlay2);--color-info: var(--ctp-latte-blue);--color-accent: var(--ctp-latte-lavender);--tap-highlight: rgba(0, 0, 0, .05);--shadow-border: rgba(0, 0, 0, .08);--shadow-border-hover: rgba(0, 0, 0, .14);--shadow-border-medium: rgba(0, 0, 0, .18);--shadow-elevation: rgba(0, 0, 0, .06);--shadow-elevation-deep: rgba(0, 0, 0, .1);--shadow-inner-glow: rgba(255, 255, 255, .5);--shadow-inner-bright: rgba(255, 255, 255, .7);--shadow-separator: rgba(0, 0, 0, .08);--brand-arlo: color-mix(in srgb, var(--ctp-latte-lavender) 7%, var(--ctp-latte-base));--brand-brain: color-mix(in srgb, var(--ctp-latte-blue) 7%, var(--ctp-latte-base));--brand-recharge: color-mix(in srgb, var(--ctp-latte-green) 10%, var(--ctp-latte-base));--brand-receipts: color-mix(in srgb, var(--ctp-latte-mauve) 8%, var(--ctp-latte-base))}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-system);font-feature-settings:"cv02","cv03","cv04","cv11";background:var(--bg-base);color:var(--text-primary);min-height:100vh;display:flex;align-items:center;justify-content:center;transition:background var(--duration-normal) var(--ease-out),color var(--duration-normal) var(--ease-out)}.container{max-width:480px;width:100%;padding:2rem}.header{margin-bottom:3rem}.header h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);letter-spacing:-.04em}.header p{color:var(--text-tertiary);font-size:.875rem;margin-top:.25rem;letter-spacing:-.01em}.header-row{display:flex;align-items:flex-start;justify-content:space-between}h2{letter-spacing:-.03em}.theme-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-surface);border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:1.125rem;flex-shrink:0;transition:background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);-webkit-tap-highlight-color:var(--tap-highlight);box-shadow:0 0 0 1px var(--shadow-border-medium)}.theme-toggle:hover{background:var(--bg-hover);box-shadow:0 0 0 1px var(--shadow-border-hover);color:var(--text-primary)}.theme-toggle:active{transform:scale(.92)}.apps{display:flex;flex-direction:column;gap:.75rem}.app-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;min-height:44px;background:var(--bg-surface);border:none;border-radius:var(--radius-card);text-decoration:none;color:inherit;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);-webkit-tap-highlight-color:var(--tap-highlight);box-shadow:var(--shadow-raised)}.app-card:hover{background:var(--bg-elevated);box-shadow:var(--shadow-raised-hover);transform:translateY(-1px)}.app-card:active{background:var(--bg-elevated);transform:scale(.98)}.app-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.app-icon.arlo{background:var(--brand-arlo)}.app-icon.brain{background:var(--brand-brain)}.app-icon.recharge{background:var(--brand-recharge)}.app-icon.receipts{background:var(--brand-receipts)}.app-info h2{font-size:.9375rem;font-weight:500;color:var(--text-primary);letter-spacing:-.02em}.app-info p{font-size:.8125rem;color:var(--text-tertiary);margin-top:.125rem}.app-url{font-size:.6875rem;color:var(--text-muted);margin-top:.25rem;font-family:var(--font-mono)}.app-status{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-shrink:0}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:background var(--duration-normal) var(--ease-out)}.status-dot.up{background:var(--green)}.status-dot.down{background:var(--red)}.status-ms{font-size:.6875rem;color:var(--text-tertiary);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}.app-card .arrow{color:var(--text-tertiary);font-size:1.125rem;transition:color var(--duration-fast) var(--ease-out)}.app-card:hover .arrow{color:var(--text-secondary)}.footer{margin-top:3rem;text-align:center;font-size:.75rem;color:var(--text-muted);line-height:1.6}.footer #greeting{color:var(--text-tertiary)}.activity-feed{display:flex;flex-direction:column;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-surface)}.activity-item{display:flex;align-items:flex-start;gap:.625rem;padding:.625rem .875rem;background:var(--bg-surface);border:none;text-decoration:none;color:inherit;transition:background var(--duration-fast) var(--ease-out);-webkit-tap-highlight-color:var(--tap-highlight);box-shadow:0 1px 0 0 var(--shadow-separator)}.activity-item:last-child{box-shadow:none}.activity-item:hover{background:var(--bg-elevated)}.activity-status{color:var(--green);font-size:.75rem;line-height:1.4;flex-shrink:0;margin-top:.0625rem}.activity-body{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}.activity-title{font-size:.8125rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-meta{display:flex;align-items:center;gap:.5rem;font-size:.6875rem}.activity-id{color:var(--text-tertiary);font-family:var(--font-mono)}.activity-time{color:var(--text-muted);font-variant-numeric:tabular-nums}.activity-loading,.activity-empty{padding:1rem .875rem;background:var(--bg-surface);border:none;border-radius:var(--radius-sm);text-align:center;font-size:.75rem;color:var(--text-muted);box-shadow:var(--shadow-surface)}.app-status-row{display:flex;align-items:center;gap:.5rem}.app-spark{width:60px;height:16px;flex-shrink:0}.app-spark svg{width:100%;height:100%;display:block}.app-spark .spark-area{fill:var(--green-soft)}.app-spark .spark-line{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.app-spark .spark-dot{fill:var(--green)}.uptime-pct{font-size:.625rem;color:var(--green);font-variant-numeric:tabular-nums;font-weight:500;text-align:right}.uptime-pct.warn{color:var(--yellow)}.uptime-pct.crit{color:var(--red)}.section-label{font-size:.6875rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2rem;margin-bottom:.75rem}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.metric-card{background:var(--bg-surface);border-radius:var(--radius-md);padding:.75rem;text-align:center;transition:box-shadow var(--duration-normal) var(--ease-out);box-shadow:var(--shadow-surface)}.metric-card .metric-icon{font-size:1rem;margin-bottom:.25rem}.metric-card .metric-value{font-size:1.25rem;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.2}.metric-card .metric-label{font-size:.625rem;color:var(--text-tertiary);margin-top:.125rem;text-transform:uppercase;letter-spacing:.04em}.metric-card .metric-detail{font-size:.625rem;color:var(--text-muted);margin-top:.25rem;font-variant-numeric:tabular-nums}.metric-bar{height:3px;background:var(--divider, var(--border-subtle));border-radius:2px;margin-top:.5rem;overflow:hidden}.metric-bar-fill{height:100%;border-radius:2px;transition:width var(--duration-slow) var(--ease-out),background var(--duration-normal) var(--ease-out);width:0%}.bar-green{background:var(--green)}.bar-yellow{background:var(--yellow)}.bar-red{background:var(--red)}.sparkline-wrap{margin-top:.375rem;height:20px;position:relative}.sparkline-wrap svg{width:100%;height:100%;display:block}.sparkline-wrap .spark-area{fill:var(--green-soft)}.sparkline-wrap .spark-line{fill:none;stroke:var(--green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.sparkline-wrap .spark-dot{fill:var(--green)}#pwa-install-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;padding:0 16px 16px;transform:translateY(120%);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}#pwa-install-banner.pwa-banner-visible{transform:translateY(0);pointer-events:auto}.pwa-banner-inner{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-surface);border-radius:var(--radius-lg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-raised),0 -4px 24px var(--shadow-elevation-deep)}.pwa-banner-icon{width:44px;height:44px;border-radius:10px;flex-shrink:0}.pwa-banner-text{flex:1;min-width:0}.pwa-banner-text strong{display:block;font-size:.875rem;color:var(--text-primary);font-weight:600}.pwa-banner-text span{display:block;font-size:.75rem;color:var(--text-secondary);margin-top:2px}.pwa-banner-text span b{color:var(--blue)}.pwa-banner-install{padding:8px 18px;background:var(--blue);color:var(--text-on-accent);border:none;border-radius:var(--radius-pill);font-size:.8125rem;font-weight:600;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:background var(--duration-fast)}.pwa-banner-install:active{background:var(--blue);filter:brightness(.85);transform:scale(.96)}.pwa-banner-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-tertiary);font-size:1.25rem;cursor:pointer;flex-shrink:0;border-radius:50%;-webkit-tap-highlight-color:transparent}.pwa-banner-close:hover{background:var(--divider);color:var(--text-secondary)}@media (max-width: 480px){.container{padding:1.5rem 1.25rem}.header{margin-bottom:2rem}.app-card{padding:.875rem 1rem}.app-card:hover{transform:none}.app-info p{font-size:.875rem}.footer{margin-top:2rem;font-size:.8125rem}.metrics{gap:.375rem}.metric-card{padding:.625rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}