* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", "PingFang SC", sans-serif; background: #eef5ff; color: #23415f; }
a { color: inherit; text-decoration: none; }
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { padding: 24px 18px; background: linear-gradient(180deg, #173b70 0%, #0f2c55 100%); border-right: 1px solid #2b5a98; }
.brand { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: #f4fbff; letter-spacing: 0.5px; }
.nav { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.nav-link { padding: 12px 14px; border-radius: 14px; color: #cde2ff; }
.nav-link.active, .nav-link:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.sidebar-btn { width: 100%; }
.content { padding: 24px; }
.page-header h1 { margin: 0 0 18px; font-size: 28px; color: #173b70; }
.panel { background: #ffffff; border: 1px solid #d7e6fb; border-radius: 24px; padding: 20px; margin-bottom: 18px; box-shadow: 0 12px 30px rgba(28, 70, 130, 0.08); }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.panel-heading h2 { margin: 0 0 6px; color: #173b70; }
.panel-heading p { margin: 0; color: #5f81aa; line-height: 1.6; }
.feature-tag { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: #e8f2ff; color: #215fbf; border: 1px solid #b8d0ef; font-weight: 700; white-space: nowrap; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card { background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%); border: 1px solid #d7e6fb; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 24px rgba(28, 70, 130, 0.06); }
.stat-card span { color: #5f81aa; font-size: 13px; }
.stat-card strong { font-size: 28px; color: #173b70; }
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.cards-table { min-width: 1080px; }
.data-table th, .data-table td { padding: 12px 10px; border-bottom: 1px solid #e3edf9; text-align: left; vertical-align: top; }
.data-table th { color: #567da9; font-weight: 600; font-size: 13px; }
.nowrap { white-space: nowrap; }
.compact th, .compact td { padding-top: 10px; padding-bottom: 10px; }
.badge { display: inline-flex; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.active { background: rgba(59, 170, 114, 0.16); color: #2c8f5b; }
.badge.frozen { background: rgba(244, 183, 64, 0.18); color: #ae7b16; }
.badge.revoked { background: rgba(226, 90, 90, 0.16); color: #b64646; }
.toolbar { display: flex; gap: 12px; margin-bottom: 18px; align-items: end; flex-wrap: wrap; }
.toolbar-field { display: flex; flex-direction: column; gap: 7px; color: #40668f; font-size: 13px; min-width: 220px; flex: 1 1 260px; }
.toolbar-field .text-input { min-width: 0; }
.status-field { flex: 0 0 170px; min-width: 150px; }
.toolbar-actions { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.grow { flex: 1; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label, .field-label { display: flex; flex-direction: column; gap: 8px; color: #40668f; font-size: 14px; }
.text-input, .select-input { width: 100%; background: #f8fbff; border: 1px solid #cfe0f6; color: #23415f; border-radius: 16px; padding: 13px 14px; }
.text-input:focus, .select-input:focus { outline: none; border-color: #4383e8; box-shadow: 0 0 0 3px rgba(67, 131, 232, 0.15); }
.primary-btn, .ghost-btn, .warn-btn, .danger-btn { border: none; border-radius: 16px; padding: 13px 18px; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.primary-btn { background: linear-gradient(180deg, #3f86f5 0%, #2c6fd7 100%); color: #ffffff; }
.ghost-btn { background: #ffffff; border: 1px solid #9ec0f0; color: #2d69c7; }
.warn-btn { background: #fff4d8; color: #9f6c08; border: 1px solid #f1d38a; }
.danger-btn { background: #ffe6e6; color: #b64646; border: 1px solid #f0b5b5; }
.ghost-btn.disabled, .primary-btn.disabled { opacity: 0.45; pointer-events: none; }
.small-btn { padding: 9px 14px; border-radius: 12px; font-size: 13px; }
.radio-row, .checkbox-row, .status-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.custom-duration-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(120px, 180px) 1fr; gap: 12px; align-items: end; margin-top: 12px; }
.custom-duration-row label { min-width: 0; }
.field-help { margin: 0; color: #6987ad; font-size: 13px; line-height: 1.6; }
.action-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; }
.radio-pill span { display: inline-flex; padding: 10px 14px; border: 1px solid #b8d0ef; border-radius: 999px; color: #4470a0; background: #f8fbff; }
.radio-pill input:checked + span { background: #e8f2ff; color: #215fbf; border-color: #72a3ec; }
.table-link { color: #2d69c7; font-weight: 600; }
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.muted { color: #6987ad; }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.detail-grid div { background: #f8fbff; border: 1px solid #d7e6fb; border-radius: 16px; padding: 14px; }
.detail-grid span { display: block; color: #5f81aa; font-size: 12px; margin-bottom: 6px; }
.detail-grid strong { color: #173b70; font-size: 15px; }
.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #edf5ff 0%, #dcecff 100%); }
.login-card { width: min(460px, calc(100vw - 32px)); background: #ffffff; border: 1px solid #d7e6fb; border-radius: 26px; padding: 28px; box-shadow: 0 18px 40px rgba(28, 70, 130, 0.12); }
.login-card h1 { margin: 0 0 8px; color: #173b70; }
.login-card p { margin: 0 0 18px; color: #5f81aa; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.remember-row { display: flex; align-items: center; gap: 10px; color: #40668f; font-size: 14px; }
.remember-row input { accent-color: #4383e8; }
.alert { background: rgba(226, 90, 90, 0.12); border: 1px solid rgba(226, 90, 90, 0.28); color: #b64646; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.build-result { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; margin-bottom: 18px; }
.build-result.success { background: rgba(59, 170, 114, 0.12); border: 1px solid rgba(59, 170, 114, 0.28); color: #24734a; }
.build-result.failed { background: rgba(226, 90, 90, 0.12); border: 1px solid rgba(226, 90, 90, 0.28); color: #b64646; }
.build-result strong { font-size: 16px; }
.build-scope { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; margin-bottom: 16px; border: 1px solid rgba(47, 117, 181, 0.18); border-radius: 16px; background: rgba(47, 117, 181, 0.06); color: #335f8e; }
.build-scope span { padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(47, 117, 181, 0.16); font-weight: 700; }
.build-scope em { flex-basis: 100%; font-style: normal; color: #6f8195; font-size: 13px; }
.target-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.target-switch-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid #b8d0ef; background: #f8fbff; color: #2d69c7; font-weight: 700; }
.target-switch-link.active { background: #e8f2ff; border-color: #72a3ec; color: #173b70; box-shadow: 0 6px 16px rgba(45, 105, 199, 0.12); }
.build-meta { color: #5f81aa; font-size: 13px; line-height: 1.7; word-break: break-all; }
.build-loading { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; margin-bottom: 18px; border-radius: 16px; border: 1px solid rgba(47, 117, 181, 0.3); background: rgba(47, 117, 181, 0.1); color: #244f7a; }
.build-loading[hidden] { display: none; }
.primary-btn.is-loading, .primary-btn:disabled { opacity: 0.72; cursor: wait; }
.replacement-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.replacement-state { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.58); border: 1px solid rgba(0,0,0,0.08); }
.replacement-state span { font-size: 12px; opacity: 0.82; }
.replacement-state.ok strong { color: #24734a; }
.replacement-state.warn strong { color: #b88413; }
.warning-list { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 193, 7, 0.12); border: 1px solid rgba(255, 193, 7, 0.28); color: #8a6510; }
.warning-list p { margin: 0; }
.marquee-admin-panel { max-width: 920px; }
.marquee-textarea { resize: vertical; min-height: 108px; line-height: 1.65; }
.marquee-toggle-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #d7e6fb; border-radius: 16px; background: #f8fbff; color: #23415f; cursor: pointer; }
.marquee-toggle-row input { width: 20px; height: 20px; accent-color: #4383e8; }
.marquee-toggle-row span { display: flex; flex-direction: column; gap: 4px; }
.marquee-toggle-row small { color: #6987ad; }
.marquee-preview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 10px 14px; border-radius: 18px; color: #f8fafc; border: 1px solid rgba(73, 245, 255, 0.34); background: linear-gradient(105deg, #07111f 0%, #132338 52%, #171f2d 100%); box-shadow: 0 12px 28px rgba(7, 17, 31, 0.22); overflow: hidden; }
.marquee-preview-icon { color: #49f5ff; text-shadow: 0 0 12px rgba(73, 245, 255, 0.78); }
.marquee-preview div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.marquee-preview small { color: #ffc857; font-size: 10px; font-weight: 800; }
.marquee-preview strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.marquee-preview-close { color: #b8c4d6; font-size: 22px; }
.apk-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apk-status-grid strong { word-break: break-all; }
.base-apk-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.base-apk-primary { padding: 18px; border-radius: 18px; border: 1px solid #cfe0f6; background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%); box-shadow: 0 10px 24px rgba(28, 70, 130, 0.06); }
.base-apk-primary.ready { border-color: rgba(59, 170, 114, 0.36); background: linear-gradient(180deg, #f4fff9 0%, #eaf8f1 100%); }
.base-apk-primary.missing { border-color: rgba(226, 90, 90, 0.32); background: linear-gradient(180deg, #fff7f7 0%, #ffeded 100%); }
.base-apk-primary span, .base-apk-path-panel span { display: block; color: #5f81aa; font-size: 12px; margin-bottom: 6px; }
.base-apk-primary strong { display: block; color: #173b70; font-size: 22px; margin-bottom: 8px; }
.base-apk-primary p { margin: 0; color: #40668f; word-break: break-all; line-height: 1.55; }
.base-apk-path-panel { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.base-apk-path-panel div { padding: 13px 14px; border-radius: 14px; background: #f8fbff; border: 1px solid #d7e6fb; }
.base-apk-path-panel strong { display: block; color: #173b70; word-break: break-all; font-size: 14px; line-height: 1.55; }
.base-apk-backups { margin: 14px 0; }
.base-apk-backups > strong { display: block; color: #173b70; margin-bottom: 8px; }
.created-card-banner { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: linear-gradient(180deg, #eef6ff 0%, #e6f0ff 100%); border: 1px solid #c9ddfa; margin-bottom: 18px; }
.created-card-banner strong { display: block; margin-top: 6px; color: #173b70; font-size: 20px; letter-spacing: 1px; word-break: break-all; }
.created-cards-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 16px; margin-top: 8px; max-height: 260px; overflow: auto; }
.created-cards-list strong { margin-top: 0; font-size: 16px; }
.pagination { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.pagination-summary { color: #5f81aa; font-size: 14px; }
.pagination-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1120px) { .panel-row { grid-template-columns: 1fr; } .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .layout { grid-template-columns: 1fr; } .sidebar { border-right: none; border-bottom: 1px solid #2b5a98; } }
@media (max-width: 720px) { .form-grid, .detail-grid, .custom-duration-row, .replacement-grid, .base-apk-summary { grid-template-columns: 1fr; } .toolbar, .created-card-banner, .pagination { flex-direction: column; align-items: stretch; } .toolbar-field, .status-field, .toolbar-actions { width: 100%; flex-basis: auto; } .toolbar-actions .ghost-btn { flex: 1; } .pagination-actions { width: 100%; } .pagination-actions .ghost-btn { flex: 1; } }

/* Announcement rich editor */
.announcement-editor-field { display: grid; gap: 0; }
.announcement-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.announcement-editor-heading small { color: #6987ad; font-weight: 500; }
.announcement-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px; border: 1px solid #c9dcf5; border-bottom: 0; border-radius: 14px 14px 0 0; background: #edf5ff; }
.announcement-editor-toolbar button { min-height: 34px; padding: 6px 10px; border: 1px solid #c2d6ef; border-radius: 8px; color: #244a73; background: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.announcement-editor-toolbar button:hover { color: #0f5fc4; border-color: #76a9e8; background: #f7fbff; }
.announcement-editor-toolbar button:disabled { cursor: wait; opacity: 0.62; }
.announcement-rich-editor { min-height: 280px; max-height: 620px; overflow: auto; padding: 18px; border: 1px solid #c9dcf5; border-radius: 0 0 14px 14px; outline: none; background: #fff; color: #17334f; line-height: 1.75; }
.announcement-rich-editor:focus { border-color: #4383e8; box-shadow: 0 0 0 3px rgba(67, 131, 232, 0.12); }
.announcement-rich-editor:empty::before { content: attr(data-placeholder); color: #91a6bf; pointer-events: none; }
.announcement-rich-editor h2, .announcement-rich-editor h3 { color: #173b70; line-height: 1.35; }
.announcement-rich-editor blockquote { margin: 14px 0; padding: 10px 14px; border-left: 4px solid #4383e8; background: #f2f7ff; color: #43617f; }
.announcement-rich-editor img { display: block; max-width: 100%; height: auto; margin: 14px auto; border-radius: 10px; }
.announcement-upload-status { min-height: 22px; margin-top: 7px; font-size: 13px; }
.announcement-upload-status.loading { color: #376da9; }
.announcement-upload-status.success { color: #238451; }
.announcement-upload-status.error { color: #c43f3f; }
.marquee-preview { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.marquee-preview-arrow { color: #49f5ff; font-size: 24px; line-height: 1; }

@media (max-width: 720px) {
  .announcement-editor-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .announcement-editor-toolbar button { flex: 1 1 auto; }
  .announcement-rich-editor { min-height: 240px; padding: 14px; }
}

.build-scope { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; margin-bottom: 16px; border: 1px solid rgba(47, 117, 181, 0.18); border-radius: 16px; background: rgba(47, 117, 181, 0.06); color: #335f8e; }
.build-scope span { padding: 5px 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(47, 117, 181, 0.16); font-weight: 700; }
.build-scope em { flex-basis: 100%; font-style: normal; color: #6f8195; font-size: 13px; }
.apk-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apk-status-grid strong { word-break: break-all; }