.mode-grid { grid-template-columns: repeat(4, 1fr); }

.clipboard-panel { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px; border: 1px solid #dce7f8; border-radius: 18px; background: #f7faff; }
.social-panel { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 16px; border: 1px solid #dce7f8; border-radius: 18px; background: #f7faff; }
.social-panel b { font-size: 14px; }
.social-panel p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.social-actions { display: flex; align-items: center; gap: 8px; }
.clipboard-panel b { font-size: 14px; }
.clipboard-panel p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.clipboard-panel textarea { grid-column: 1 / -1; min-height: 92px; resize: vertical; border: 1px solid #d6e0ed; border-radius: 12px; background: #fff; padding: 11px; color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.file-preview { flex: none; width: 48px; height: 48px; border-radius: 10px; background: #e8edf5; object-fit: cover; }
.file-more { padding: 10px 4px 2px; color: var(--muted); font-size: 12px; }
.send-actions { display: flex; align-items: center; gap: 9px; }
.send-actions .secondary { padding: 9px 13px; font-size: 12px; }
.transfer-progress { margin-top: 14px; padding: 12px 13px; border: 1px solid #d9e6fb; border-radius: 14px; background: #f8fbff; }
.header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.update-button { border: 1px solid #d5e1f7; border-radius: 99px; background: #f8fbff; color: #3564ac; padding: 8px 11px; font: inherit; font-size: 12px; font-weight: 700; }
.update-button:disabled { opacity: .7; }
.transfer-progress.compact { margin: 12px 0 0 43px; }
.progress-copy { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: #44536a; font-size: 12px; }
.progress-copy b { color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-copy span { flex: none; color: #697891; font-variant-numeric: tabular-nums; }
.progress-track { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #dce7f8; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #287bf4, #7d71ef); transition: width .18s ease; }
.text-preview { max-height: 82px; overflow: hidden; border-radius: 9px; background: #f1f5fa; padding: 10px 11px; color: #4e5d72; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.transfer-preview { margin-top: 11px; padding-left: 43px; }
.transfer-preview .file-preview { width: 100%; height: 190px; }
.transfer-preview video.file-preview { background: #172033; }
.received-preview-link { position: relative; display: block; overflow: hidden; border: 1px solid #b9d4fb; border-radius: 15px; background: #eef4fd; box-shadow: 0 10px 24px #4d7ec31c; color: inherit; cursor: grab; text-decoration: none; }
.received-preview-link:hover { border-color: #6da4f5; box-shadow: 0 13px 28px #4d7ec333; }
.received-preview-link:active { cursor: grabbing; }
.received-preview-link .file-preview { display: block; height: min(220px, 31vw); max-height: 220px; background: #eef2f7; object-fit: contain; }
.received-preview-link span { display: block; padding: 8px 11px; border-top: 1px solid #d8e6fa; color: #3866a8; font-size: 12px; font-weight: 650; text-align: center; }
.native-inbox-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.native-inbox { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #a8c8fa; background: #eaf3ff; color: #284d82; text-align: left; }
.native-inbox strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.native-inbox span { flex: none; color: #5273a0; font-size: 11px; }
.native-direct-drag { cursor: grab; }
.native-direct-drag:active { cursor: grabbing; }
.native-inbox-open { border: 0; border-radius: 10px; background: transparent; color: #3564ac; padding: 8px 5px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.native-inbox-open:hover { background: #eaf3ff; }
.transfer-top .accept { margin-left: auto; padding: 8px 14px; font-size: 12px; }
.select-row { display: flex; justify-content: space-between; align-items: center; margin: 13px 0 -2px 43px; color: var(--muted); font-size: 11px; }
.select-row label, .receive-file { cursor: pointer; }
.receive-file { display: block; }
.receive-file > input { position: absolute; opacity: 0; pointer-events: none; }
.receive-file .download { margin-left: 23px; }
.receive-file input:checked + .download { background: #e4efff; box-shadow: inset 0 0 0 1px #9fc2fb; }
.receive-file input:checked + .download::before { content: "✓"; margin-left: -23px; width: 15px; color: #287bf4; font-weight: 800; }
.receive-file .file-preview { width: 34px; height: 34px; border-radius: 8px; }
.receive-file .file-badge { width: 34px; height: 34px; border-radius: 8px; font-size: 10px; }
.download:active { cursor: grabbing; }
.download strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download span { text-align: right; }
.received-resource { background: #eaf3ff; box-shadow: inset 0 0 0 1px #a8c8fa; }

@media (max-width: 760px) { .mode-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .clipboard-panel, .social-panel { grid-template-columns: 1fr; } .clipboard-panel .secondary { justify-self: start; } .social-actions { justify-content: flex-start; } .send-row { gap: 12px; } .send-actions { flex: none; } .header-actions { gap: 6px; } .update-button { padding: 7px 9px; } .transfer-progress.compact { margin-left: 0; } .transfer-preview { padding-left: 0; } .received-preview-link .file-preview { height: 190px; } .native-inbox-actions { grid-template-columns: 1fr; } .native-inbox-open { justify-self: start; } .progress-copy { align-items: flex-start; flex-direction: column; gap: 3px; } }