* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f5f7fb; color: #16202a; }
a { color: inherit; text-decoration: none; }
pre { margin: 0; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:20px 28px; background:#0f3d91; color:#fff; gap: 20px; }
.topbar h1 { margin:0; font-size:24px; }
.topbar p { margin:4px 0 0; opacity:.85; }
.topbar-actions { display:flex; align-items:center; gap:12px; flex-wrap: wrap; }
.top-nav { display:flex; gap:10px; flex-wrap:wrap; }
.top-nav a { padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.12); }
.user-chip { background: rgba(255,255,255,.15); padding:8px 12px; border-radius:999px; }
.page { padding: 24px; max-width: 1440px; margin: 0 auto; }
.card { background:#fff; border-radius:18px; padding:20px; box-shadow:0 8px 24px rgba(15,61,145,.08); margin-bottom:20px; }
.login-card { max-width: 480px; margin: 40px auto; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.form-grid.compact { grid-template-columns: 1fr; }
.form-grid .full { grid-column: 1 / -1; }
label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; }
input, select, textarea { width:100%; border:1px solid #d9e0ee; border-radius:12px; padding:12px; font-size:14px; background:#fff; }
select[multiple] { min-height: 132px; }
textarea { resize: vertical; }
.btn { border:0; border-radius:12px; padding:12px 16px; background:#0f62fe; color:#fff; font-weight:700; cursor:pointer; display:inline-block; text-align:center; }
.btn-secondary { background:#42526e; }
.btn-warning { background:#e67e22; }
.btn-small { padding:8px 10px; font-size:13px; }
.alert { background:#ffe5e5; color:#8b1e1e; padding:12px; border-radius:12px; margin-bottom:12px; }
.layout-two-cols { display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.layout-detail { display:grid; grid-template-columns: 360px 1fr; gap:20px; }
.content-stack { display:flex; flex-direction:column; gap:20px; }
.section-head, .detail-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:12px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding:12px; border-bottom:1px solid #eef2f8; text-align:left; vertical-align:top; font-size:14px; }
th { background:#f8faff; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#eef4ff; color:#0f3d91; font-size:12px; font-weight:700; }
.meta { display:grid; grid-template-columns: 1fr 1fr; gap:8px 12px; margin:0 0 16px; }
.meta-single { grid-template-columns: 160px 1fr; }
.meta dt { font-weight:700; color:#506176; }
.meta dd { margin:0; }
.meta-inline { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; color:#506176; font-size:12px; }
.meta-actions { margin-top: 10px; }
.timeline { display:flex; flex-direction:column; gap:12px; }
.message, .event { border:1px solid #e5ebf5; border-radius:14px; padding:14px; }
.message.inbound { background:#f8fbff; }
.message.outbound { background:#eef8f1; }
.event-system { background:#fffdf6; }
.event-task { background:#f7f4ff; }
.message-head { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:#5b6879; margin-bottom:8px; }
.message-body { white-space:pre-wrap; line-height:1.45; }
.code-block { background:#0e1726; color:#eef2ff; padding:16px; border-radius:14px; overflow:auto; font-size:13px; line-height:1.45; }
.inline-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.muted { color:#6b7785; }
.stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:14px; }
.stat-card { border:1px solid #e5ebf5; border-radius:14px; padding:14px; background:#fbfdff; }
.stat-title { font-size:13px; color:#506176; margin-top:4px; }
.stat-value { font-size:28px; font-weight:700; margin-top:8px; }
@media (max-width: 960px) { .layout-two-cols, .layout-detail, .form-grid { grid-template-columns: 1fr; } .topbar { flex-direction:column; align-items:flex-start; } }

.capture-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.capture-card { position:relative; min-height:110px; border:1px dashed #c8d5ef; border-radius:16px; padding:14px; background:#fbfdff; cursor:pointer; justify-content:space-between; }
.capture-card:hover { border-color:#0f62fe; background:#f5f9ff; }
.capture-card input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.capture-title { font-size:15px; font-weight:700; color:#123b86; }
.capture-desc { font-size:12px; color:#66758a; line-height:1.4; }
.selection-state { display:flex; justify-content:space-between; gap:12px; align-items:center; border:1px solid #e6edf8; border-radius:14px; padding:12px 14px; background:#fbfdff; }
.media-preview { border:1px solid #e6edf8; border-radius:16px; padding:14px; background:#fafcff; }
.preview-image, .message-image { display:block; max-width:100%; max-height:420px; border-radius:16px; }
.preview-video, .message-video { width:100%; max-width:520px; border-radius:16px; background:#000; }
.preview-audio, .message-audio { width:100%; max-width:420px; }
.preview-file { border:1px dashed #d4deef; border-radius:12px; padding:14px; background:#fff; font-weight:700; color:#42526e; }
.media-bubble { margin-bottom:10px; }
.doc-link { display:inline-flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #d7e1f2; border-radius:14px; background:#fff; color:#0f3d91; font-weight:700; }
@media (max-width: 960px) {
  .capture-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .capture-grid { grid-template-columns: 1fr; }
}
.notice { background:#e8fff1; color:#0c6b37; padding:12px; border-radius:12px; margin-bottom:12px; }
.quick-status-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 18px; }
.reply-box { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; border:1px solid #d9e6fb; border-radius:14px; padding:12px 14px; background:#f5f9ff; }
.reply-summary { color:#23364d; margin-top:4px; white-space:pre-wrap; }
.quoted-reply { border-left:4px solid #9ab7f5; padding:8px 10px; background:#f7faff; border-radius:10px; margin-bottom:10px; }
.quoted-tag { font-size:12px; font-weight:700; color:#4466aa; margin-bottom:4px; }
.quoted-text { font-size:13px; color:#42526e; white-space:pre-wrap; }
.reply-actions { margin-top:10px; }
.window-badge { padding:8px 12px; border-radius:999px; font-size:12px; font-weight:700; }
.window-open { background:#e7fff1; color:#0c6b37; }
.window-closed { background:#fff2e5; color:#a65100; }
@media (max-width: 960px) {
  .quick-status-grid { grid-template-columns:1fr; }
  .reply-box { flex-direction:column; }
}