*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;width:100%;overflow:hidden}:root{--tide-start: #1B6050;--tide-end: #1A4060;--match-point: #F5C430;--game-on: #E84B30;--transition: .4s ease}[data-theme=surface]{--app-bg: linear-gradient(160deg, #A8D4CC 0%, #A8C0D8 100%);--blob-1: rgba(27, 96, 80, .4);--blob-2: rgba(26, 64, 96, .35);--blob-3: rgba(245, 196, 48, .15);--glass-bg: rgba(255, 255, 255, .52);--glass-border: rgba(255, 255, 255, .75);--header-bg: rgba(27, 96, 80, .62);--header-border: rgba(255, 255, 255, .2);--nav-bg: rgba(255, 255, 255, .52);--nav-border: rgba(255, 255, 255, .72);--accent: #1B6050;--accent-muted: rgba(27, 96, 80, .8);--accent-bg: rgba(27, 96, 80, .12);--accent-border: rgba(27, 96, 80, .25);--text-primary: #1A2E2A;--text-muted: rgba(26, 46, 42, .55);--text-on-header: #ffffff;--text-header-sub: rgba(255, 255, 255, .72);--badge-won-bg: rgba(27, 96, 80, .12);--badge-won-color: #1B6050;--badge-lost-bg: rgba(232, 75, 48, .1);--badge-lost-color: #E84B30;--badge-muted-bg: rgba(255, 255, 255, .35);--badge-muted-color: rgba(26, 46, 42, .55);--input-bg: rgba(255, 255, 255, .65);--input-border: rgba(255, 255, 255, .8);--input-text: #1A2E2A;--input-placeholder: rgba(26, 46, 42, .4);--divider: rgba(27, 96, 80, .12);--section-label: rgba(26, 46, 42, .55);--toggle-bg: rgba(255, 255, 255, .3);--toggle-active: rgba(255, 255, 255, .85);--toggle-text: rgba(26, 46, 42, .55);--toggle-active-text: #1A2E2A;--empty-icon-opacity: .35;--companion-icon-bg: rgba(27, 96, 80, .12);--companion-er-bg: rgba(232, 75, 48, .1);--pull-quote-color: #1B6050;--pull-quote-border: rgba(27, 96, 80, .4)}[data-theme=depth]{--app-bg: linear-gradient(160deg, #071A15 0%, #060F1E 100%);--blob-1: rgba(27, 96, 80, .5);--blob-2: rgba(26, 64, 96, .55);--blob-3: rgba(58, 192, 176, .1);--glass-bg: rgba(255, 255, 255, .07);--glass-border: rgba(255, 255, 255, .1);--header-bg: rgba(7, 26, 21, .74);--header-border: rgba(255, 255, 255, .07);--nav-bg: rgba(6, 15, 26, .68);--nav-border: rgba(255, 255, 255, .07);--accent: rgba(58, 192, 176, .9);--accent-muted: rgba(58, 192, 176, .7);--accent-bg: rgba(58, 192, 176, .12);--accent-border: rgba(58, 192, 176, .22);--text-primary: rgba(210, 235, 230, .92);--text-muted: rgba(160, 200, 192, .5);--text-on-header: rgba(210, 235, 230, .95);--text-header-sub: rgba(160, 200, 192, .62);--badge-won-bg: rgba(58, 192, 176, .12);--badge-won-color: rgba(58, 192, 176, .9);--badge-lost-bg: rgba(232, 75, 48, .1);--badge-lost-color: rgba(232, 75, 48, .8);--badge-muted-bg: rgba(255, 255, 255, .06);--badge-muted-color: rgba(160, 200, 192, .5);--input-bg: rgba(255, 255, 255, .06);--input-border: rgba(255, 255, 255, .12);--input-text: rgba(210, 235, 230, .9);--input-placeholder: rgba(160, 200, 192, .35);--divider: rgba(255, 255, 255, .07);--section-label: rgba(160, 200, 192, .5);--toggle-bg: rgba(255, 255, 255, .07);--toggle-active: rgba(255, 255, 255, .12);--toggle-text: rgba(160, 200, 192, .5);--toggle-active-text: rgba(210, 235, 230, .92);--empty-icon-opacity: .3;--companion-icon-bg: rgba(58, 192, 176, .1);--companion-er-bg: rgba(232, 75, 48, .1);--pull-quote-color: rgba(58, 192, 176, .85);--pull-quote-border: rgba(58, 192, 176, .3)}body{font-family:DM Sans,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;color:var(--text-primary);background:#0a1510;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-shell{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;position:relative;overflow:hidden;background:var(--app-bg);transition:background var(--transition);background-image:radial-gradient(ellipse 260px 260px at -5% 0%,var(--blob-1),transparent),radial-gradient(ellipse 220px 220px at 110% 80%,var(--blob-2),transparent),radial-gradient(ellipse 160px 160px at 85% 30%,var(--blob-3),transparent),var(--app-bg);box-shadow:0 0 60px #00000059}.app-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:80px;-webkit-overflow-scrolling:touch;background:transparent;position:relative;z-index:1}.page{min-height:100%;padding:0 0 24px}.header-curve{background:var(--header-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--header-border);padding-bottom:20px;border-radius:0 0 24px 24px;margin-bottom:-16px;transition:background var(--transition)}.page-header{padding:52px 20px 20px;color:var(--text-on-header)}.page-header .brand{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-header-sub);margin-bottom:4px}.page-header h1{font-size:26px;font-weight:700;line-height:1.2;color:var(--text-on-header)}.page-header .subtitle{font-size:14px;color:var(--text-header-sub);margin-top:4px;font-family:"DM Serif Display",Georgia,serif;font-style:italic}.card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;padding:18px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background var(--transition),border-color var(--transition);color:var(--text-primary)}.card+.card{margin-top:12px}.section{padding:20px 20px 0}.section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--section-label);margin-bottom:12px;transition:color var(--transition)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:15px;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:opacity .15s,transform .1s;padding:14px 24px;text-decoration:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.btn:active{transform:scale(.97);opacity:.9}.btn-primary{background:linear-gradient(120deg,var(--tide-start) 0%,var(--tide-end) 100%);border:1px solid rgba(255,255,255,.2);color:#fff;width:100%}.btn-secondary{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--accent);width:100%}.btn-danger{background:var(--game-on);color:#fff;width:100%}.pull-quote{font-family:"DM Serif Display",Georgia,serif;font-size:15px;font-style:italic;color:var(--pull-quote-color);border-left:3px solid var(--pull-quote-border);padding:8px 0 8px 14px;margin:4px 0;line-height:1.5;transition:color var(--transition)}.stats-row{display:flex;gap:10px}.stat-chip{flex:1;background:#ffffff26;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:10px 12px;text-align:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.stat-chip .value{font-size:22px;font-weight:700;line-height:1;color:var(--text-on-header)}.stat-chip .label{font-size:11px;color:var(--text-header-sub);margin-top:2px}.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:6px}.badge-won{background:var(--badge-won-bg);color:var(--badge-won-color)}.badge-lost{background:var(--badge-lost-bg);color:var(--badge-lost-color)}.badge-context{background:var(--badge-muted-bg);color:var(--badge-muted-color)}.empty-state{text-align:center;padding:40px 24px;color:var(--text-muted)}.empty-state .icon{font-size:40px;margin-bottom:12px;opacity:var(--empty-icon-opacity)}.empty-state p{font-size:15px;line-height:1.5}.companion-section-card{display:flex;align-items:center;gap:14px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;padding:16px 18px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;transition:transform .15s,background var(--transition);margin-bottom:10px;text-decoration:none;color:var(--text-primary)}.companion-section-card:active{transform:scale(.98)}.companion-icon{width:44px;height:44px;border-radius:11px;background:var(--companion-icon-bg);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:background var(--transition)}.companion-icon.emergency{background:var(--companion-er-bg)}.companion-section-card h3{font-size:15px;font-weight:600;margin-bottom:2px;color:var(--text-primary)}.companion-section-card p{font-size:13px;color:var(--text-muted);line-height:1.4}.companion-arrow{margin-left:auto;color:var(--text-muted);font-size:18px;flex-shrink:0}.search-bar{display:flex;align-items:center;gap:10px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:12px;padding:10px 14px;font-family:inherit;font-size:15px;color:var(--input-text);width:100%;outline:none;transition:border-color .15s;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.search-bar:focus{border-color:var(--accent)}.search-wrap{position:relative}.search-wrap .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;font-size:16px}.search-wrap input{padding-left:38px}.toggle-tabs{display:flex;background:var(--toggle-bg);border:1px solid var(--glass-border);border-radius:10px;padding:3px;gap:2px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background var(--transition)}.toggle-tab{flex:1;padding:8px;text-align:center;font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;transition:background .2s,color .2s;color:var(--toggle-text);border:none;background:transparent;font-family:inherit}.toggle-tab.active{background:var(--toggle-active);color:var(--toggle-active-text);box-shadow:0 1px 4px #0000001f}.divider{height:1px;background:var(--divider);margin:16px 0;transition:background var(--transition)}.form-input{width:100%;padding:12px 14px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;font-size:15px;font-family:inherit;color:var(--input-text);outline:none;box-sizing:border-box;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .15s,background var(--transition)}.form-input:focus{border-color:var(--accent)}.form-input::placeholder{color:var(--input-placeholder)}