:root { --brand:#2878e5; --brand-dark:#175fc4; --page:#eef3f9; --text:#243044; --muted:#68758a; --line:#dfe7f1; --danger:#c73a3a; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--text); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; min-height:62px; padding:0 max(18px,calc((100% - 1160px)/2)); background:linear-gradient(135deg,#4b9bf4,var(--brand-dark)); color:#fff; box-shadow:0 4px 18px rgba(20,69,133,.18); }
.topbar>div { display:flex; align-items:center; gap:14px; }
.brand { color:inherit; font-size:25px; font-weight:800; font-style:italic; text-decoration:none; letter-spacing:-1px; }
.dashboard { width:min(1160px,calc(100% - 28px)); margin:24px auto 60px; }
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.summary-grid article,.panel,.login-card { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 5px 22px rgba(31,61,99,.06); }
.summary-grid article { display:flex; flex-direction:column; min-height:145px; padding:22px; }
.summary-grid span { color:var(--muted); }
.summary-grid strong { margin:8px 0 2px; color:var(--brand-dark); font-size:34px; line-height:1.1; }
.summary-grid strong.date-value { font-size:26px; }
.summary-grid strong.status-value { font-size:24px; }
.summary-grid strong.ok { color:#168253; }
.summary-grid strong.warn { color:#bd7120; }
.summary-grid small { margin-top:auto; color:var(--muted); overflow-wrap:anywhere; }
.panel { margin-bottom:18px; padding:22px; }
.action-panel,.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
h1,h2,p { margin-top:0; }
h2 { margin-bottom:4px; font-size:20px; }
.panel p,.login-card p { margin-bottom:0; color:var(--muted); }
.primary,.secondary,.ghost { min-height:42px; padding:9px 17px; border-radius:10px; border:0; font-weight:650; }
.primary { background:var(--brand); color:#fff; }
.primary:hover { background:var(--brand-dark); }
.secondary { border:1px solid #bed5f2; background:#f3f8ff; color:var(--brand-dark); }
.panel-heading > a.secondary { display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.ghost { background:rgba(255,255,255,.14); color:#fff; }
.message-stack { position:fixed; z-index:1000; top:82px; right:22px; display:grid; width:min(420px,calc(100vw - 32px)); gap:10px; pointer-events:none; }
.login-page .message-stack { top:22px; }
.notice { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) 28px; align-items:center; gap:10px; min-height:62px; padding:13px 12px 16px; overflow:hidden; border:1px solid; border-radius:13px; background:#fff; box-shadow:0 14px 40px rgba(23,49,82,.18); pointer-events:auto; animation:notice-enter .24s ease-out both; }
.notice.success { border-color:#a7dfc3; color:#11683f; }
.notice.error { border-color:#efb9b9; color:#9f2929; }
.notice.info { border-color:#aacbed; color:#165891; }
.notice.warning { border-color:#edd093; color:#855911; }
.notice-icon { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:currentColor; color:#fff; font-size:16px; font-weight:800; }
.notice-text { color:inherit; font-size:15px; font-weight:650; line-height:1.55; overflow-wrap:anywhere; }
.notice-close { display:grid; width:28px; height:28px; min-height:0; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:currentColor; font-size:22px; line-height:1; opacity:.65; }
.notice-close:hover { background:rgba(25,63,105,.08); opacity:1; }
.notice-progress { position:absolute; right:0; bottom:0; left:0; height:3px; background:currentColor; opacity:.45; transform-origin:left; animation:notice-progress 15s linear forwards; }
.notice.is-leaving { animation:notice-leave .24s ease-in forwards; }
@keyframes notice-enter { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes notice-leave { to { opacity:0; transform:translateY(-8px) scale(.98); } }
@keyframes notice-progress { to { transform:scaleX(0); } }
label { display:flex; flex-direction:column; gap:6px; color:#536177; font-size:13px; font-weight:600; }
input,textarea,select { width:100%; border:1px solid #ccd7e5; border-radius:9px; background:#fff; color:var(--text); padding:9px 11px; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(40,120,229,.13); }
textarea { resize:vertical; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; line-height:1.65; }
.news-table { margin-top:20px; }
.news-row { display:grid; grid-template-columns:34px minmax(180px,1.5fr) minmax(220px,2fr) 110px 165px 58px; align-items:end; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.row-number { align-self:center; color:#8a96a8; text-align:center; font-weight:700; }
.remove-news { min-height:40px; border:0; background:transparent; color:var(--danger); }
.save-button { margin-top:16px; }
.settings-form,.password-form { display:grid; gap:16px; margin-top:18px; }
.field-grid,.password-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.password-form .primary { align-self:end; }
.login-page { display:grid; min-height:100vh; place-items:center; padding:22px; background:linear-gradient(145deg,#eaf2fc,#f7faff); }
.login-card { width:min(100%,400px); padding:34px; }
.login-card .brand { display:inline-block; margin-bottom:22px; color:var(--brand); font-size:32px; }
.login-card h1 { margin-bottom:5px; }
.login-card form { display:grid; gap:17px; margin-top:25px; }
.captcha-row { display:grid; grid-template-columns:minmax(100px,1fr) 180px; gap:10px; align-items:center; margin-top:7px; }
.captcha-row img { display:block; width:180px; height:56px; border:1px solid #cbd8e8; border-radius:9px; background:#edf5ff; }
.captcha-input { min-width:0; height:56px; font-size:22px; font-weight:750; letter-spacing:5px; text-align:center; text-transform:uppercase; }
.captcha-refresh { grid-column:2; justify-self:end; min-height:auto; padding:2px 0; border:0; background:transparent; color:var(--brand-dark); font-size:14px; font-weight:650; }
.login-security-note { margin-top:-7px; color:var(--muted); line-height:1.5; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #ffc230; outline-offset:2px; }
.topbar nav { display:flex; gap:4px; margin-left:8px; }
.topbar nav a { padding:7px 11px; border-radius:8px; color:#fff; text-decoration:none; font-size:14px; }
.topbar nav a:hover { background:rgba(255,255,255,.14); }
.topbar nav a.active { background:#fff; color:var(--brand-dark); box-shadow:0 2px 8px rgba(15,65,130,.14); }
.placement-guide { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.placement-guide span { display:flex; gap:7px; align-items:center; padding:7px 10px; border-radius:9px; background:#f2f6fb; color:#536177; font-size:13px; }
.placement-guide span.ad-slot { background:#fff4dd; color:#865910; }
.placement-guide b { color:var(--brand-dark); }
.ad-card { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:13px; background:#fbfdff; }
.ad-card.new-ad { border-style:dashed; background:#f7fbff; }
.ad-card-heading,.ad-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.ad-card-heading h3 { margin:0; font-size:17px; }
.ad-card-heading code { color:var(--muted); font-size:12px; }
.switch-line,.check-line { flex-direction:row; align-items:center; gap:7px; }
.ad-switches { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; }
.switch-line input,.check-line input { width:auto; }
.ad-preview { display:block; width:100%; max-height:170px; margin-top:14px; border-radius:9px; object-fit:cover; }
.ad-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.ad-form-grid .span-2 { grid-column:span 2; }
.ad-form-grid small { color:var(--muted); font-weight:400; }
.ad-card fieldset { display:flex; gap:18px; margin:16px 0; padding:12px 14px; border:1px solid var(--line); border-radius:9px; }
.ad-card legend { padding:0 5px; color:var(--muted); font-size:13px; font-weight:600; }
.ad-actions { justify-content:flex-start; }
.danger-button { min-height:42px; padding:9px 17px; border:1px solid #efc5c5; border-radius:10px; background:#fff5f5; color:var(--danger); font-weight:650; }
.empty-state { display:flex; flex-direction:column; align-items:center; padding:42px 20px 34px; border:1px dashed #c7d8eb; border-radius:13px; background:#f8fbff; text-align:center; }
.empty-state strong { font-size:20px; }
.empty-state p { margin:6px 0 20px; }
.empty-state a.primary { display:inline-flex; align-items:center; text-decoration:none; }
.slot-summary { display:grid; gap:2px; margin-top:14px; padding:12px 14px; border:1px solid #dbe8f6; border-radius:10px; background:#f4f9ff; }
.slot-summary span,.slot-summary small { color:var(--muted); }
.slot-summary strong { color:var(--brand-dark); }
.slot-summary small { overflow-wrap:anywhere; }
.promotion-preview { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border:1px dashed #c7d8eb; border-radius:10px; background:#fff; }
.promotion-preview img { width:44px; height:44px; border-radius:9px; object-fit:contain; }
.promotion-preview-text { font-size:16px; }
.promotion-preview-text.is-bold { font-weight:800; }
.promotion-preview-text.color-red { color:#df2c2c; }
.promotion-preview-text.color-orange { color:#e26713; }
.promotion-preview-text.color-blue { color:#176ed0; }
.promotion-preview-text.color-green { color:#168253; }
.promotion-preview b { padding:2px 6px; border-radius:5px; background:#f04444; color:#fff; font-size:12px; }
.check-option { flex-direction:row; align-items:center; align-self:end; min-height:42px; padding:9px 11px; border:1px solid #ccd7e5; border-radius:9px; background:#fff; }
.check-option input { width:auto; }
.button-editor { margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.button-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.button-editor-heading h4 { margin:0 0 2px; font-size:16px; }
.button-editor-heading p { font-size:13px; }
.button-list { margin-top:12px; }
.announcement-button-row { display:grid; grid-template-columns:28px minmax(130px,1fr) minmax(220px,2fr) 130px 130px 54px; align-items:end; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.button-number { align-self:center; color:#8a96a8; text-align:center; font-weight:700; }
.remove-announcement-button { min-height:40px; border:0; background:transparent; color:var(--danger); }
.site-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.site-actions a { display:inline-flex; align-items:center; text-decoration:none; }
.panel-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.panel-actions form { margin:0; }
.panel-actions a { display:inline-flex; align-items:center; text-decoration:none; }
.site-meta { display:flex; justify-content:space-between; gap:12px; margin-top:15px; color:var(--muted); font-size:13px; }
.site-meta a { color:var(--brand-dark); }
.portability-panel code { padding:2px 6px; border-radius:5px; background:#eef4fb; color:var(--brand-dark); }
.security-status { padding:6px 11px; border-radius:999px; font-size:13px; }
.security-status.enabled { background:#e8f8f0; color:#137347; }
.security-status.required { background:#fff1e2; color:#a45b13; }
.totp-setup { margin-top:20px; padding:20px; border:1px solid #cfe0f4; border-radius:13px; background:#f7fbff; }
.totp-setup h3,.security-form h3,.recovery-box h3 { margin:0 0 7px; }
.totp-setup ol { margin:14px 0; padding-left:22px; color:#536177; }
.totp-setup li { margin:7px 0; }
.setup-key { margin:16px 0; padding:15px; border:1px dashed #8bb6e9; border-radius:10px; background:#fff; color:#164f94; font:700 20px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:1px; overflow-wrap:anywhere; user-select:all; }
.security-form { display:grid; gap:14px; margin-top:18px; }
.security-form p { margin:-2px 0 4px; }
.security-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }
.security-grid .security-form { margin:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fbfdff; }
.recovery-box { margin-top:20px; padding:18px; border:1px solid #f1cf82; border-radius:12px; background:#fff9e9; }
.recovery-box p { margin-bottom:14px; }
.recovery-codes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.recovery-codes code { padding:9px 11px; border-radius:7px; background:#fff; color:#6d4a00; font-size:16px; font-weight:700; text-align:center; user-select:all; }
@media (max-width:900px) { .summary-grid { grid-template-columns:1fr; } .summary-grid article { min-height:110px; } .news-row { grid-template-columns:30px 1fr 1fr; } .news-row label:nth-of-type(1),.news-row label:nth-of-type(2) { grid-column:span 1; } .news-row label:nth-of-type(3),.news-row label:nth-of-type(4) { grid-column:span 1; } }
@media (max-width:900px) { .announcement-button-row { grid-template-columns:28px 1fr 1fr; } .announcement-button-row label:nth-of-type(3),.announcement-button-row label:nth-of-type(4),.announcement-button-row .remove-announcement-button { grid-column:2 / -1; } }
@media (max-width:620px) { .dashboard { width:min(100% - 16px,1160px); margin-top:12px; } .panel { padding:16px; border-radius:13px; } .action-panel,.panel-heading,.button-editor-heading { align-items:flex-start; flex-direction:column; } .news-row { grid-template-columns:28px 1fr; } .news-row label { grid-column:2!important; } .remove-news { grid-column:2; justify-self:start; } .field-grid,.password-form,.ad-form-grid,.security-grid { grid-template-columns:1fr; } .ad-form-grid .span-2 { grid-column:span 1; } .topbar nav { display:none; } .ad-card-heading { align-items:flex-start; flex-direction:column; } .announcement-button-row { grid-template-columns:25px 1fr; } .announcement-button-row label,.announcement-button-row .remove-announcement-button { grid-column:2!important; } .site-meta { flex-direction:column; } .recovery-codes { grid-template-columns:1fr; } .setup-key { font-size:17px; } .captcha-row { grid-template-columns:1fr; } .captcha-row img { width:100%; } .captcha-refresh { grid-column:1; } }
@media (max-width:620px) { .message-stack,.login-page .message-stack { top:12px; right:12px; width:calc(100vw - 24px); } }
@media (prefers-reduced-motion:reduce) { .notice,.notice.is-leaving { animation:none; } }