* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; margin: 0; padding: 0; background: #f0f2f5; color: #333; font-size: 14px; }

.layout { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: #1a1a2e; color: #fff; flex-shrink: 0; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; }
.sidebar-brand { padding: 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-brand h2 { margin: 0 0 4px; font-size: 16px; color: #fff; }
.sidebar-brand p { margin: 0; font-size: 11px; color: rgba(255,255,255,0.5); }
.sidebar-nav { padding: 12px 0; }
.nav-group { margin-bottom: 8px; }
.nav-group-title { padding: 8px 16px 4px; font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: rgba(255,255,255,0.7); cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s; font-size: 13px; text-decoration: none; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: rgba(0,161,214,0.15); color: #fff; border-left-color: #00a1d6; }
.nav-section-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 12px 16px; }

.main { flex: 1; margin-left: 220px; padding: 24px 28px; overflow-x: hidden; min-height: 100vh; }

.msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; white-space: pre-wrap; }
.msg.ok { background: #e8f8f0; color: #1aa97e; border: 1px solid #bef0dd; }
.msg.err { background: #fff0f0; color: #e74c3c; border: 1px solid #ffd4d4; }
.msg.warn { background: #fff8e8; color: #d48806; border: 1px solid #ffe9ba; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.card h2 { margin: 0 0 14px; font-size: 15px; color: #1a1a2e; display: flex; align-items: center; gap: 8px; }
.stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; font-size: 13px; }
.stat-row:last-child { border-bottom: none; }
.stat-row .label { color: #888; }
.stat-row .val { color: #333; font-weight: 500; }
.stat-row .val.ok { color: #23cfa7; }
.stat-row .val.err { color: #ff6b6b; }
.stat-row .val.warn { color: #ffa502; }

.panel { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-bottom: 20px; }
.panel-title { font-size: 17px; color: #1a1a2e; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #f0f2f5; display: flex; align-items: center; gap: 8px; }
.panel-title .tag { font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: normal; }

.btn { display: inline-block; padding: 8px 18px; background: #00a1d6; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; transition: background 0.2s; text-decoration: none; }
.btn:hover { background: #008ebf; }
.btn.danger { background: #ff6b6b; }
.btn.danger:hover { background: #e85555; }
.btn.warn { background: #ffa502; }
.btn.warn:hover { background: #e89200; }
.btn.secondary { background: #6c757d; }
.btn.secondary:hover { background: #5a6268; }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 4px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

input[type=text], input[type=number], textarea, select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; outline: none; transition: border 0.2s; font-family: inherit; background: #fff; }
input:focus, textarea:focus, select:focus { border-color: #00a1d6; }
textarea { resize: vertical; min-height: 60px; }
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.form-row label.lbl { min-width: 90px; color: #666; font-size: 13px; }
.hint { color: #888; font-size: 12px; line-height: 1.6; }
.hint code { background: #f0f0f0; padding: 1px 6px; border-radius: 3px; color: #c7254e; font-size: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #f0f2f5; }
th { background: #fafbfc; color: #666; font-weight: 500; font-size: 12px; }
tr:hover td { background: #fafbfc; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.badge.on { background: #e8f8f0; color: #23cfa7; }
.badge.off { background: #f0f0f0; color: #999; }
.badge.yes { background: #e7f3ff; color: #00a1d6; }
.badge.no { background: #f0f0f0; color: #999; }
.badge.warn { background: #fff8e8; color: #ffa502; }

.empty { padding: 40px; text-align: center; color: #aaa; }

.theme-bili .panel-title { color: #00a1d6; }
.theme-bili .tag { background: #e7f3ff; color: #00a1d6; }
.theme-bili .btn { background: #00a1d6; }
.theme-bili .btn:hover { background: #008ebf; }
.theme-bili .badge.yes { background: #e7f3ff; color: #00a1d6; }
.theme-bili input:focus, .theme-bili textarea:focus { border-color: #00a1d6; }

.theme-douyin .panel-title { color: #fe2c55; }
.theme-douyin .tag { background: #fff0f3; color: #fe2c55; }
.theme-douyin .btn { background: #fe2c55; }
.theme-douyin .btn:hover { background: #e72450; }
.theme-douyin .badge.yes { background: #fff0f3; color: #fe2c55; }
.theme-douyin input:focus, .theme-douyin textarea:focus { border-color: #fe2c55; }

.theme-kuaishou .panel-title { color: #ff8000; }
.theme-kuaishou .tag { background: #fff4e6; color: #ff8000; }
.theme-kuaishou .btn { background: #ff8000; }
.theme-kuaishou .btn:hover { background: #e67300; }
.theme-kuaishou .badge.yes { background: #fff4e6; color: #ff8000; }
.theme-kuaishou input:focus, .theme-kuaishou textarea:focus { border-color: #ff8000; }

.cookie-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.cookie-status.ok { background: #e8f8f0; color: #1aa97e; }
.cookie-status.warn { background: #fff8e8; color: #d48806; }
.cookie-status.err { background: #fff0f0; color: #e74c3c; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center; }
.stat-card .num { font-size: 32px; font-weight: bold; line-height: 1.2; }
.stat-card .lbl { color: #888; font-size: 13px; margin-top: 4px; }
.stat-card.bili .num { color: #00a1d6; }
.stat-card.douyin .num { color: #fe2c55; }
.stat-card.kuaishou .num { color: #ff8000; }
.stat-card.system .num { color: #23cfa7; }

.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.link-card { padding: 16px; background: #fafbfc; border: 1px solid #eee; border-radius: 8px; text-decoration: none; color: inherit; transition: all 0.2s; text-align: center; }
.link-card:hover { border-color: #00a1d6; background: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,161,214,0.15); }
.link-card .t { font-weight: 500; color: #00a1d6; margin-bottom: 6px; font-size: 14px; }
.link-card .d { color: #888; font-size: 12px; }

.log-preview {
    margin: 10px 0 0;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 6px;
    font-family: Consolas, Monaco, monospace;
    font-size: 11px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: #555;
}

.footer { text-align: center; color: #aaa; padding: 30px 20px; font-size: 12px; }
.footer a { color: #00a1d6; text-decoration: none; }
.footer-sep { margin: 0 8px; color: #ddd; }

.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.action-card { background: #fafbfc; padding: 18px; border-radius: 10px; border: 1px solid #eee; }
.action-card .title { font-weight: 500; color: #333; margin-bottom: 10px; font-size: 14px; }

.cookie-section { background: #fafbfc; padding: 16px; border-radius: 8px; border: 1px solid #eee; }
.cookie-section h4 { margin: 0 0 10px; font-size: 14px; color: #555; }

.info-banner { background: #e7f3ff; border: 1px solid #b3d9ff; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: #0066cc; }
.info-banner.warn { background: #fff8e8; border-color: #ffe9ba; color: #8a6d3b; }
.info-banner.danger { background: #fff0f3; border-color: #ffd4de; color: #c41e3a; }

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }