:root { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #172033; background: #e9eef5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
.phone-shell { width: min(100%, 430px); min-height: min(780px, 100dvh); padding: 28px 20px 92px; background: #f7f9fc; box-shadow: 0 20px 60px #17203322; position: relative; overflow: hidden; }
.topbar, .section-heading, .status-card, .metrics { display: flex; align-items: center; justify-content: space-between; }
.eyebrow, .muted, .metric span { color: #7b879b; font-size: 12px; margin: 0 0 5px; }
h1, h2, p { margin: 0; } h1 { font-size: 28px; } h2 { font-size: 18px; }
button { border: 0; cursor: pointer; font: inherit; }
.icon-button { width: 40px; height: 40px; border-radius: 12px; background: #e6efff; color: #2874e8; font-size: 26px; }
.status-card { margin-top: 24px; padding: 16px; border-radius: 18px; background: #206be6; color: white; box-shadow: 0 10px 24px #206be633; }
.status-card .muted { color: #cfe0ff; } .status-card strong { display: block; font-size: 15px; }
.live-pill { border-radius: 99px; padding: 7px 10px; background: #ffffff22; font-size: 12px; } .live-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5df0a3; margin-right: 5px; }
.metrics { gap: 12px; margin-top: 16px; } .metric { flex: 1; background: white; border-radius: 16px; padding: 16px; } .metric strong { display: block; font-size: 25px; margin: 4px 0; } .metric em { color: #18a66a; font-size: 12px; font-style: normal; } .metric .warning { color: #e98d29; }
.section-heading { margin: 28px 0 12px; } .section-heading button { color: #2874e8; background: transparent; font-size: 13px; }
.data-list { display: grid; gap: 10px; } .data-item { background: white; border-radius: 15px; padding: 14px; display: flex; justify-content: space-between; align-items: center; } .data-title { font-weight: 600; font-size: 14px; } .data-meta { color: #8b96a8; font-size: 12px; margin-top: 5px; } .tag { padding: 5px 8px; border-radius: 8px; font-size: 11px; color: #18794e; background: #e5f8ed; } .tag.pending { color: #a85c05; background: #fff1dc; }
.video-panel { margin-top: 12px; } .video-cover { height: 180px; border-radius: 16px; background: #172033; color: white; display: grid; place-items: center; font-size: 52px; } .video-panel h2 { margin-top: 16px; } .video-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 18px 0; text-align: center; color: #8b96a8; font-size: 11px; } .video-stats b { display: block; color: #172033; font-size: 14px; } .script-card { background: white; border-radius: 15px; padding: 15px; margin-bottom: 10px; } .script-card h3 { margin: 0 0 8px; font-size: 16px; } .script-card p { margin: 0; color: #596579; font-size: 13px; line-height: 1.7; } .link-button { color: #2874e8; background: transparent; }
.bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; height: 76px; display: flex; justify-content: space-around; align-items: center; background: #ffffffee; border-top: 1px solid #e8edf5; } .nav-item { color: #9aa5b5; background: transparent; font-size: 12px; position: relative; } .nav-item span { display: block; font-size: 22px; margin-bottom: 3px; } .nav-item.active { color: #206be6; } .nav-item small { position: absolute; top: -2px; right: 1px; border-radius: 99px; background: #ef5b68; color: white; padding: 2px 5px; font-size: 9px; }
@media (min-width: 600px) { .phone-shell { border-radius: 28px; } }
.status-card, .data-item { cursor: pointer; } .collector-panel { margin-top: 24px; }
.topbar { justify-content: flex-start; gap: 12px; }
.topbar h1 { font-size: 24px; }
.back-button { flex: 0 0 48px; height: 44px; color: #206be6; background: transparent; }
.content-panel { margin-top: 24px; overflow-wrap: anywhere; }
.sample-note { color: #6c7687; font-size: 12px; margin-bottom: 20px; }
.content-panel h2 { font-size: 20px; line-height: 1.5; }
.content-panel h3 { font-size: 16px; margin: 24px 0 12px; }
.list-filters { display: grid; gap: 12px; margin-bottom: 16px; }
.list-filters label { display: grid; gap: 6px; font-size: 12px; color: #5a6575; }
.list-filters input, .list-filters select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #d9e0e9; border-radius: 6px; background: white; font: inherit; font-size: 14px; color: #172033; }
.result-list { margin-top: 12px; }
.list-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 16px 0; border-bottom: 1px solid #e2e7ef; background: transparent; color: #273342; font-size: 14px; }
.row-main { min-width: 0; }
.row-main strong { display: block; line-height: 1.6; }
.row-main small { display: block; color: #6c7687; line-height: 1.6; margin-top: 4px; }
.detail-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0; }
.detail-stats div { padding: 16px 0; border-bottom: 1px solid #e2e7ef; }
.detail-stats dt { color: #6c7687; font-size: 12px; }
.detail-stats dd { margin: 6px 0 0; font-size: 22px; font-weight: 600; }
.empty-state { padding: 32px 0; color: #6c7687; font-size: 14px; text-align: center; }
.media-unavailable { padding: 16px 0; color: #6c7687; font-size: 13px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #168369; margin: 12px 0 24px; }
.detail-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #e9eef5; border-radius: 6px; padding: 3px; }
.detail-tabs button { min-height: 40px; border-radius: 4px; background: transparent; color: #586678; }
.detail-tabs button[aria-pressed="true"] { background: white; color: #206be6; }
.script-text { font-size: 15px; line-height: 1.8; }
button:focus-visible { outline: 2px solid #206be6; outline-offset: 3px; }
.module-card:hover, button.list-row:hover { background: #edf3fc; }
.local-notice { font-size: 12px; color: #687584; margin: 0 0 20px; }
.profile { display: flex; gap: 16px; align-items: center; padding: 8px 0 24px; border-bottom: 1px solid #e2e7ef; }
.profile > div:last-child { min-width: 0; }
.profile-avatar { flex: 0 0 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: #e0f0eb; color: #227361; font-size: 22px; }
.profile p { color: #687584; font-size: 13px; margin: 4px 0 8px; }
.role-badge { display: inline-block; font-size: 12px; background: #e9eef5; color: #526278; padding: 4px 8px; border-radius: 4px; }
.role-badge.admin { background: #e0f0eb; color: #227361; }
.account-form, .report-filters { display: grid; gap: 18px; margin: 16px 0; }
.account-form label, .report-filters label { display: grid; gap: 8px; color: #526278; font-size: 13px; min-width: 0; }
.account-form input, .account-form textarea, .report-filters select { width: 100%; min-width: 0; max-width: 100%; border: 1px solid #cad3de; background: white; color: #172033; border-radius: 6px; font: inherit; font-size: 16px; padding: 12px; }
.account-form input, .report-filters select { min-height: 46px; }
.account-form textarea { resize: vertical; line-height: 1.6; }
.primary-button, .secondary-button { min-height: 46px; border-radius: 6px; padding: 10px 16px; line-height: 1.5; font-size: 14px; }
.primary-button { background: #206be6; color: white; }
.secondary-button { background: #e9eef5; color: #206be6; }
.account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.text-button { background: transparent; color: #206be6; padding: 12px 0; min-height: 44px; }
.logout-button, .form-feedback { color: #ad364c; }
.form-feedback { font-size: 13px; line-height: 1.6; margin: 0; }
.form-feedback:empty { display: none; }
button:disabled { opacity: .55; cursor: wait; }
.recipient-line { color: #227361; font-size: 13px; margin: 16px 0; }
.report-filters { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.report-group h3 { display: flex; justify-content: space-between; gap: 12px; }
.report-group h3 span { font-size: 12px; color: #687584; font-weight: normal; }
.submitted { color: #227361; font-weight: normal; font-size: 12px; }
.report-summary { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.report-text { white-space: pre-wrap; line-height: 1.8; font-size: 15px; margin-bottom: 24px; }
.collector-device { display:flex; justify-content:space-between; align-items:center; background:#fff; border-radius:15px; padding:15px; margin-bottom:14px; } .collector-device p { margin:5px 0 0; color:#8b96a8; font-size:12px; } .module-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .module-card { min-height:78px; background:#fff; border:0; border-radius:14px; text-align:left; padding:12px; color:#172033; } .module-card b { display:block; font-size:15px; } .module-card small { display:block; color:#8b96a8; font-size:10px; margin-top:6px; line-height:1.3; }