*{margin:0;padding:0;box-sizing:border-box}:root{--black-raw: #000000;--white-raw: #ffffff;--gray-100-raw: #f5f5f5;--gray-200-raw: #e5e5e5;--gray-300-raw: #d4d4d4;--gray-400-raw: #a3a3a3;--gray-500-raw: #737373;--gray-600-raw: #525252;--gray-700-raw: #404040;--gray-800-raw: #262626;--gray-900-raw: #171717;--md-surface-0: #121212;--md-surface-1: #1e1e1e;--md-surface-2: #232323;--md-surface-3: #272727;--md-surface-4: #2c2c2c;--md-surface-5: #303030;--md-on-surface: #e6e1e5;--md-on-surface-variant: #cac4d0;--md-outline: #938f99;--md-outline-variant: #49454f;--black: var(--md-on-surface);--white: var(--md-surface-0);--gray-100: var(--md-surface-2);--gray-200: var(--md-surface-3);--gray-300: var(--md-outline-variant);--gray-400: var(--md-outline);--gray-500: var(--md-on-surface-variant);--gray-600: var(--md-on-surface);--gray-700: var(--md-on-surface);--gray-800: var(--md-surface-4);--gray-900: var(--md-on-surface);--color-background: var(--md-surface-0);--color-surface: var(--md-surface-1);--color-surface-elevated: var(--md-surface-2);--color-surface-high: var(--md-surface-3);--color-surface-highest: var(--md-surface-4);--color-text-primary: var(--md-on-surface);--color-text-secondary: var(--md-on-surface-variant);--color-border: var(--md-outline);--color-shadow: rgba(0, 0, 0, .3);--focus-ring: var(--white-raw);--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;--space-20: 80px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--shadow-md: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);--shadow-xl: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);--box-shadow-button: 0 1px 3px rgba(0, 0, 0, .2);--box-shadow-card: 0 2px 8px rgba(0, 0, 0, .15);--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--text-5xl: 48px;--transition: .2s ease}html[data-theme=light]{--md-surface-0: #f8f8f5;--md-surface-1: #ffffff;--md-surface-2: #ffffff;--md-surface-3: #efefeb;--md-surface-4: #e5e5df;--md-surface-5: #deded8;--md-on-surface: #171713;--md-on-surface-variant: #4c4b46;--md-outline: #75746c;--md-outline-variant: #d2d1c9;--black: #171713;--white: #ffffff;--gray-100: #f3f3ef;--gray-200: #e7e7e1;--gray-300: #d2d1c9;--gray-400: #aaa99f;--gray-500: #696860;--gray-600: #3f3e39;--gray-700: #262520;--gray-800: #1d1c18;--gray-900: #11110e;--color-background: var(--md-surface-0);--color-surface: var(--md-surface-1);--color-surface-elevated: var(--md-surface-2);--color-surface-high: var(--md-surface-3);--color-surface-highest: var(--md-surface-4);--color-text-primary: var(--md-on-surface);--color-text-secondary: var(--md-on-surface-variant);--color-border: var(--md-outline-variant);--color-shadow: rgba(23, 23, 19, .12);--focus-ring: #171713;--shadow-sm: 0 1px 2px rgba(23, 23, 19, .08), 0 1px 1px rgba(23, 23, 19, .06);--shadow-md: 0 3px 8px rgba(23, 23, 19, .1);--shadow-lg: 0 10px 22px rgba(23, 23, 19, .14);--shadow-xl: 0 16px 36px rgba(23, 23, 19, .16)}html,body{height:100%;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--color-background);color:var(--color-text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease}#app{min-height:100vh;display:flex;flex-direction:column;--header-height: 72px}.app-header{background:var(--color-surface-elevated);border-bottom:2px solid var(--color-border);padding:var(--space-2) var(--space-4);position:sticky;top:0;z-index:100;height:var(--header-height);box-sizing:border-box;transition:background-color .3s ease,border-color .3s ease;box-shadow:var(--shadow-sm)}.header-content{max-width:800px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);height:100%}.brand{display:flex;align-items:center;gap:var(--space-4);min-width:0}.brand-logo{width:48px;height:48px;border-radius:var(--radius-md);object-fit:contain;border:2px solid var(--color-border);flex-shrink:0}.brand-info{min-width:0}.brand-title{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:var(--text-xl);font-weight:850;color:var(--color-text-primary);letter-spacing:0;line-height:1.08;overflow:hidden;text-overflow:ellipsis;text-wrap:balance}.brand-subtitle{font-size:var(--text-sm);color:var(--gray-600);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.theme-toggle{align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-primary);cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--space-2);min-height:42px;padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);transition:background-color .2s ease,border-color .2s ease,color .2s ease}.theme-toggle-track{align-items:center;background:var(--color-surface-high);border:1px solid var(--color-border);border-radius:var(--radius-full);display:inline-flex;height:30px;padding:3px;transition:background-color .2s ease,border-color .2s ease;width:54px}.theme-toggle-thumb{background:var(--color-text-primary);border-radius:var(--radius-full);display:block;height:22px;transform:translate(22px);transition:transform .2s ease,background-color .2s ease;width:22px}html[data-theme=light] .theme-toggle-thumb{transform:translate(0)}.theme-toggle-text{font-size:var(--text-sm);font-weight:750;min-width:34px;text-align:left}.main-content{flex:1}.toast{position:fixed;top:var(--space-6);left:50%;transform:translate(-50%);z-index:1000;max-width:400px;width:calc(100% - var(--space-8));background:var(--black);color:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden}.toast.error{background:var(--black)}.toast.warning{background:var(--gray-800)}.toast-content{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5)}.toast-icon{font-size:var(--text-xs);font-weight:900;flex-shrink:0}.toast-message{font-size:var(--text-sm);font-weight:500;flex:1}.toast-enter-active,.toast-leave-active{transition:all .3s ease}.toast-enter-from,.toast-leave-to{transform:translate(-50%) translateY(-100%);opacity:0}.error-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:9999;padding:var(--space-6);animation:errorModalFadeIn .3s ease}.error-content{background:var(--white);border:3px solid var(--black);border-radius:var(--radius-lg);padding:var(--space-8);max-width:500px;width:100%;text-align:center;position:relative;animation:errorContentSlideIn .3s ease}.error-icon{align-items:center;border:2px solid var(--black);border-radius:999px;display:inline-flex;font-size:var(--text-3xl);font-weight:900;height:56px;justify-content:center;margin-bottom:var(--space-6);width:56px}.error-title{font-size:var(--text-3xl);font-weight:800;color:var(--black);margin-bottom:var(--space-4);line-height:1.2}.error-message{font-size:var(--text-lg);color:var(--gray-700);margin-bottom:var(--space-6);line-height:1.5}.error-details{background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-6)}.error-details p{font-size:var(--text-sm);color:var(--gray-600);margin:0;line-height:1.4}.error-actions{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}.error-button{padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:var(--transition);border:2px solid transparent;min-height:48px;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.error-button-primary{background:var(--black);color:var(--white);border-color:var(--black)}.error-button-secondary{background:var(--white);color:var(--black);border-color:var(--black)}.error-button-text{background:transparent;color:var(--gray-600);border:none;font-size:var(--text-sm);min-height:40px}.error-timestamp{color:var(--gray-500);font-size:var(--text-xs);margin-top:var(--space-2)}@keyframes errorModalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes errorContentSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 640px){#app{--header-height: 62px}.brand{gap:var(--space-3)}.brand-logo{width:42px;height:42px}.brand-title{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:var(--text-base);line-height:1.08}.theme-toggle{min-height:38px;min-width:58px;padding-right:var(--space-2)}.theme-toggle-track{height:28px;width:50px}.theme-toggle-thumb{height:20px;transform:translate(20px);width:20px}html[data-theme=light] .theme-toggle-thumb{transform:translate(0)}.theme-toggle-text{display:none}.error-modal{padding:var(--space-4)}.error-content{padding:var(--space-6)}.error-icon{font-size:var(--text-2xl);height:48px;margin-bottom:var(--space-4);width:48px}.error-title{font-size:var(--text-2xl)}.error-message{font-size:var(--text-base)}.error-actions{gap:var(--space-2)}.error-button{padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}.theme-toggle{min-height:44px}.error-button{min-height:56px;padding:var(--space-4) var(--space-6);font-size:var(--text-base)}}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--focus-ring)!important;outline-offset:2px!important}