: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(4,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); }
.ghost { background:rgba(255,255,255,.14); color:#fff; }
.notice { margin-bottom:18px; padding:13px 15px; border-radius:11px; }
.notice.success { background:#eaf8f1; color:#11683f; }
.notice.error { background:#fff0f0; color:#9f2929; }
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; }
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); }
.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; }
.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; }
@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:620px) { .dashboard { width:min(100% - 16px,1160px); margin-top:12px; } .panel { padding:16px; border-radius:13px; } .action-panel,.panel-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 { grid-template-columns:1fr; } .ad-form-grid .span-2 { grid-column:span 1; } .topbar nav { display:none; } }