*{box-sizing:border-box}body{color:#333;background:#f5f5f5;margin:0;font-family:Arial,sans-serif}.app{padding:20px}.topbar{justify-content:flex-end;max-width:1200px;margin:0 auto 12px;display:flex}.container{background:#fff;border-radius:8px;max-width:1200px;margin:0 auto;padding:20px;box-shadow:0 2px 4px #0000001a}.container.narrow{max-width:600px;padding:30px}h1{color:#333;margin-bottom:20px}h2{color:#333;margin:30px 0 10px;font-size:24px}.muted{color:#666}.center{text-align:center}.page-center{padding:60px 20px;font-size:1.1rem}.danger-text{color:#d32f2f}.btn{color:#fff;cursor:pointer;background:#007cba;border:none;border-radius:4px;margin-right:10px;padding:10px 20px;font-size:14px;text-decoration:none;display:inline-block}.btn:hover{background:#005a87}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.btn-secondary{background:#6c757d}.btn.btn-secondary:hover{background:#545b62}.btn.btn-primary{background:#007bff}.btn.danger{background:#dc3545}.btn.danger:hover{background:#c82333}.btn.btn-small{padding:4px 8px;font-size:12px}.btn.sync-btn{background:#28a745}.btn.refresh-webhook{background:#17a2b8;margin-right:0;padding:4px 8px;font-size:11px}.btn.refresh-webhook:hover{background:#117a8b}.actions{margin-bottom:30px}.chip{border-radius:4px;padding:4px 8px;font-size:12px;font-weight:700;display:inline-block}.chip.channel{color:#1976d2;background:#e3f2fd}.chip.playlist{color:#7b1fa2;background:#f3e5f5}.chip.target{color:#2e7d32;background:#e8f5e9;margin-left:6px;font-size:10px}.chip.members-only{color:#f57c00;background:#fff3e0;margin-left:4px}.chip.deleted{color:#c62828;background:#ffebee;margin-left:4px}.chip.not-found{color:#e65100;background:#fff3e0;margin-left:4px}.chip.dimension.active{color:#155724;background:#d4edda}.chip.dimension.inactive{color:#721c24;background:#f8d7da}.chip.dimension.overdue{color:#721c24;background:#f5c6cb}.chip.dimension.current{color:#0c5460;background:#d1ecf1}.chip.webhook{margin-right:4px}.chip.webhook.active{color:#155724;background:#d4edda}.chip.webhook.failed{color:#721c24;background:#f8d7da}.chip.webhook.not_subscribed{color:#666;background:#e7e7e7}.chip.webhook.pending{color:#856404;background:#fff3cd}.message-container{max-width:1200px;min-height:52px;margin:0 auto 20px}.message{border-radius:4px;padding:10px}.message.error{color:#721c24;background:#f8d7da;border:1px solid #f5c6cb}.message.success{color:#155724;background:#d4edda;border:1px solid #c3e6cb}.subs-header{align-items:center;margin-bottom:15px;display:flex}.subs-header h2{flex:1;margin:0}.table-head{color:#666;background:#f8f9fa;border-bottom:1px solid #ddd;padding:12px;font-size:12px;font-weight:700;display:flex}.col-title{flex:2}.col-type{width:220px}.col-dim{width:80px}.col-arrow{width:20px}.sortable-header{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable-header:after{content:"▼";color:#999;margin-left:4px;font-size:10px}.sortable-header[data-sort-active]:after{color:#007cba;font-weight:700}.sortable-header[data-sort-active=asc]:after{content:"▲"}.row-zippy{border-bottom:1px solid #eee}.row-zippy:last-child{border-bottom:none}.row-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:12px}.row-header:hover{background:#f8f9fa}.row-cells{align-items:center;width:100%;display:flex}.cell-title{flex:2;font-weight:500}.cell-type{width:220px}.cell-dim{width:80px}.cell-dim.muted{color:#999}.cell-arrow{text-align:center;width:20px}.row-arrow{color:#999;font-size:12px;transition:transform .2s}.row-header.collapsed .row-arrow{transform:rotate(-90deg)}.fetching-title{color:#6c757d;font-style:italic}.row-details{background:#f9f9f9;border-top:1px solid #eee;padding:0 12px 12px}.detail-item{margin-bottom:8px;padding-top:8px}.detail-label{color:#666;margin-right:8px;font-weight:700}.playlist-id{font-family:monospace;font-size:14px}.remove-row{margin-top:12px}.webhook-box{background:#f8f9fa;border-radius:4px;margin-top:12px;padding:10px}.webhook-title{margin-bottom:8px;font-weight:700}.webhook-row{align-items:center;gap:8px;margin-bottom:4px;display:flex}.webhook-meta{color:#666;margin-bottom:4px;font-size:11px}.via-webhook{color:#28a745;font-weight:700}.overrides{border-top:1px solid #eee;margin-top:12px;padding-top:12px}.overrides-row{gap:20px;margin-top:8px;display:flex}.override-label{color:#666;margin-bottom:2px;font-size:12px;display:block}.overrides select,.target-input{border:1px solid #ced4da;border-radius:4px;padding:4px 8px;font-size:12px}.target-row{align-items:center;gap:8px;margin-top:8px;display:flex}.target-input{width:300px;font-family:monospace}.reset-link{color:#dc3545;font-size:12px}.saved-note{color:#28a745;font-size:12px;font-weight:500}.sync-result{background:#f8f9fa;border-left:4px solid #28a745;border-radius:4px;margin:20px 0;padding:15px}.sync-result h3{color:#333;margin-top:0;font-size:18px}.json-display{color:#e2e8f0;white-space:pre-wrap;background:#2d3748;border-radius:4px;max-height:400px;padding:10px;font-family:Courier New,monospace;font-size:12px;overflow-y:auto}.spinner{vertical-align:middle;border:2px solid #f3f3f3;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.monitoring{background:#f8f9fa;border-left:4px solid #007cba;border-radius:8px;margin:30px 0;padding:20px}.monitoring h3{color:#333;margin-top:0;font-size:18px}.monitoring-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-top:15px;display:grid}.monitoring a{color:#007cba}.examples{background:#e9ecef;border-radius:4px;margin-bottom:20px;padding:15px}.examples h3{color:#495057;margin-top:0}.examples code{background:#f8f9fa;border-radius:2px;padding:2px 4px;font-family:monospace}.form-group{margin-bottom:20px}.form-group label{color:#555;margin-bottom:5px;font-weight:700;display:block}.form-group input[type=text],.form-group input:not([type]),.form-group select{border:1px solid #ddd;border-radius:4px;width:100%;padding:12px;font-size:16px}.form-group input:focus{border-color:#007cba;outline:none}.help-text{color:#666;margin-top:5px;font-size:13px}.settings-header{border-bottom:2px solid #007bff;margin-bottom:30px;padding-bottom:20px}.settings-header h1{margin:0}.settings-header a{color:#007bff;text-decoration:none}.section{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;margin-bottom:40px;padding:20px}.section h2{color:#495057;border-bottom:1px solid #dee2e6;margin-top:0;padding-bottom:10px}.current-value{background:#e9ecef;border-radius:4px;margin-bottom:10px;padding:8px;font-family:monospace;font-size:12px}.alert{border-radius:4px;margin-bottom:20px;padding:15px}.alert-success{color:#155724;background:#d4edda;border:1px solid #c3e6cb}.alert-error{color:#721c24;background:#f8d7da;border:1px solid #f5c6cb}