:root{--bg: #f7f8fa;--surface: #ffffff;--surface-alt: #f2f4f7;--border: #eaecf0;--border-strong: #ccd3dc;--text: #101828;--muted: #525c6b;--subtle: #6b7484;--accent: #2f56d9;--accent-hover: #2545b8;--accent-weak: #eef1fd;--warning: #b54708;--warning-weak: #fffaeb;--warning-border: #fedf89;--success: #067647;--success-weak: #ecfdf3;--radius-sm: 6px;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--pill: 999px;--shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);--shadow-md: 0 4px 10px -2px rgb(16 24 40 / 10%), 0 2px 4px -2px rgb(16 24 40 / 5%);--shadow-lg: 0 14px 28px -6px rgb(16 24 40 / 12%), 0 4px 8px -4px rgb(16 24 40 / 6%);--ease: .15s cubic-bezier(.4, 0, .2, 1);color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Helvetica Neue,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic UI,Meiryo,sans-serif;font-size:14px;line-height:1.6;letter-spacing:.01em;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2{font-feature-settings:"palt" 1;line-height:1.45}button{font:inherit;color:inherit;letter-spacing:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}.icon{flex:none;display:block}.shell{display:flex;flex-direction:column;height:100%}.shell-bar{position:relative;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:40px;padding:5px 14px;background:var(--surface-alt);border-bottom:1px solid var(--border);font-size:13px}.spacer{flex:1}.plan-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}.plan-chip{display:inline-flex;align-items:center;gap:4px;border-radius:var(--pill);padding:2px 10px;font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--border-strong);white-space:nowrap}.plan-chip-premium{color:var(--success);background:var(--success-weak);border-color:transparent}.plan-note{color:var(--muted)}.account{position:relative;display:flex;align-items:center}.account-button{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:300px;padding:3px 7px 3px 3px;border:1px solid transparent;border-radius:var(--pill);background:none;cursor:pointer;transition:background-color var(--ease),border-color var(--ease)}.account-button:hover,.account-button[aria-expanded=true]{background:var(--surface);border-color:var(--border-strong)}.avatar{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--pill);background:linear-gradient(140deg,#4c72ef,var(--accent));color:#fff;font-size:12px;font-weight:700;letter-spacing:0}.account-email{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.account-caret{display:grid;place-items:center;flex:none;color:var(--subtle);transition:transform var(--ease)}.account-caret-open{transform:rotate(180deg)}.account-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:80;min-width:196px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:var(--radius);background:none;color:var(--text);font-size:13px;text-align:left;white-space:nowrap;cursor:pointer;transition:background-color var(--ease)}.menu-item+.menu-item{margin-top:1px}.menu-item:hover{background:var(--surface-alt)}.menu-item .icon{color:var(--subtle)}.bar-skeleton{display:block;border-radius:var(--pill);background:linear-gradient(90deg,var(--surface-alt) 0%,#e3e7ed 50%,var(--surface-alt) 100%);background-size:200% 100%;animation:bar-skeleton 1.4s ease-in-out infinite}.bar-skeleton-plan{width:210px;height:18px}.bar-skeleton-account{width:134px;height:26px}@keyframes bar-skeleton{0%{background-position:100% 0}to{background-position:-100% 0}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:4px 13px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-xs);transition:background-color var(--ease),border-color var(--ease),box-shadow var(--ease),color var(--ease)}.btn:hover:not(:disabled){background:var(--surface-alt)}.btn:active:not(:disabled){box-shadow:none}.btn:disabled{cursor:default;opacity:.5;box-shadow:none}.btn-primary{color:#fff;background:var(--accent);border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}.btn-ghost:hover:not(:disabled){color:var(--text)}.btn-google{padding-left:11px;font-weight:600;background:var(--surface);border-color:var(--border-strong);color:var(--text)}.bar-link{color:var(--muted);white-space:nowrap}.link-button{padding:0;border:0;background:none;color:var(--accent);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.banner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 14px;color:var(--warning);background:var(--warning-weak);border-bottom:1px solid var(--warning-border);font-size:13px}.banner-success{color:var(--success);background:var(--success-weak);border-bottom-color:#abefc6}.banner-success span{display:inline-flex;align-items:center;gap:6px}.icon-close{margin-left:auto;padding:0 6px;border:0;border-radius:var(--radius-sm);background:none;color:inherit;font-size:18px;line-height:1.4;cursor:pointer;transition:background-color var(--ease)}.icon-close:hover{background:#1018280f}.editor-frame{flex:1;width:100%;min-height:0;border:0;display:block}.backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#10182873}.backdrop-raised{z-index:110}.dialog{width:min(460px,100%);padding:24px 26px 20px;background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);line-height:1.75}.dialog-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}.dialog-head-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--accent-weak);color:var(--accent)}.dialog-head h2{margin:0}.dialog h2{margin:0 0 10px;font-size:18px;font-weight:650;letter-spacing:-.005em}.dialog p{margin:0 0 10px}.dialog-note{color:var(--muted);font-size:12px}.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}.upsell{margin:16px 0 0!important;padding-top:12px;border-top:1px solid var(--border);font-size:13px;text-align:center}.countdown{height:6px;margin:8px 0 4px;border-radius:var(--pill);background:var(--accent-weak);overflow:hidden}.countdown-fill{height:100%;border-radius:var(--pill);background:var(--accent);transition:width 1s linear}.plan-benefits{margin:0 0 14px;padding:0;list-style:none}.plan-benefits li{display:flex;align-items:flex-start;gap:9px;margin-bottom:6px;font-size:13px;line-height:1.7}.plan-benefits .icon{margin-top:6px;color:var(--success)}.plan-current{padding:10px 14px;border-radius:var(--radius-lg);background:var(--surface-alt);font-size:13px}.plan-current-premium{color:var(--success);background:var(--success-weak)}.plan-login-note{margin:12px 0 0!important;font-size:12px;color:var(--muted)}.watching-bar{position:fixed;left:50%;bottom:16px;z-index:90;display:flex;align-items:center;gap:12px;padding:6px 8px 6px 18px;transform:translate(-50%);background:var(--surface);border:1px solid var(--border);border-radius:var(--pill);box-shadow:var(--shadow-lg);font-size:13px;white-space:nowrap}