/* 与 webrtc-file-transfer 的 Tailwind 默认颜色、间距和组件样式保持一致。 */
:root {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #111827;
  background: #f9fafb;
  line-height: 1.5;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a, input, .dropzone { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .5; }
[hidden] { display: none !important; }
h1, p { margin: 0; }
.site-header { border-bottom: 1px solid #e5e7eb; background: #fff; }
.header-inner { max-width: 768px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 18px; font-weight: 600; white-space: nowrap; }
nav { display: flex; align-items: center; gap: 8px; }
.nav-active { padding: 8px 16px; border-radius: 8px; background: #2563eb; color: white; font-size: 14px; font-weight: 500; box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000001a; }
.header-note { margin-left: 8px; border-left: 1px solid #e5e7eb; padding-left: 12px; font-size: 12px; color: #6b7280; white-space: nowrap; }
#home { max-width: 768px; margin: 0 auto; padding: 32px 16px; }
#home > * + * { margin-top: 24px; }
.card { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 20px; box-shadow: 0 1px 2px #0000000d; }
.tabs { display: flex; gap: 8px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #0000000d; }
.tabs button { flex: 1; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: #4b5563; transition: background .15s, color .15s; }
.tabs button:hover { background: #f3f4f6; }
.tabs [aria-selected="true"] { color: #fff; background: #2563eb; box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000001a; }
.tabs [aria-selected="true"]:hover { background: #1d4ed8; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-label { margin-bottom: 4px; font-size: 12px; color: #6b7280; }
.setting-value { font-size: 14px; font-weight: 500; }
.hint { margin-top: 8px; font-size: 12px; color: #9ca3af; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #d1d5db; border-radius: 16px; background: #fff; padding: 64px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover { border-color: #60a5fa; }
.dropzone.drag { border-color: #3b82f6; background: #eff6ff; }
.dropzone[aria-disabled="true"] { cursor: wait; opacity: .6; }
.upload-icon { font-size: 36px; line-height: 40px; }
.dropzone strong { margin-top: 12px; font-size: 14px; font-weight: 500; }
.dropzone > span:last-child { margin-top: 4px; font-size: 12px; color: #9ca3af; }
.sr-only, #file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#upload-panel:focus-within .dropzone { outline: 2px solid #2563eb; outline-offset: 3px; }
#link-panel h1 { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.link-fields { display: flex; gap: 12px; }
input[type="url"] { flex: 1; min-width: 0; width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; background: white; padding: 8px 12px; font-size: 14px; }
input::placeholder { color: #9ca3af; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s; }
.primary { background: #2563eb; border: 1px solid transparent; color: #fff; }
.primary:hover { background: #1d4ed8; }
.secondary { background: #fff; border: 1px solid #e5e7eb; }
.secondary:hover { background: #f9fafb; }
#status { font-size: 14px; color: #2563eb; overflow-wrap: anywhere; }
#status.error { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.formats, .privacy { text-align: center; font-size: 12px; color: #9ca3af; }
#home > .privacy { margin-top: 8px; }
footer { margin: 0 auto; max-width: 768px; padding: 0 16px 24px; color: #9ca3af; text-align: center; font-size: 12px; }
footer a:hover { color: #2563eb; text-decoration: underline; }
#viewer { max-width: 1152px; padding: 32px 16px; margin: 0 auto; }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.file-details { min-width: 0; }
.viewer-toolbar h1 { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.viewer-toolbar p { margin-top: 4px; font-size: 12px; color: #6b7280; }
.viewer-actions { display: flex; gap: 8px; flex-shrink: 0; }
.viewer-actions .primary, .viewer-actions .secondary { padding: 6px 12px; font-size: 12px; }
iframe { display: block; width: 100%; height: calc(100vh - 250px); min-height: 400px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
#viewer-error { padding: 16px; margin-bottom: 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; color: #dc2626; font-size: 14px; }
#media-panel { width: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center; background: #111827; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
#video-player { display: block; width: 100%; max-height: calc(100vh - 250px); min-height: 280px; }
#audio-player { width: min(600px,90%); margin: 60px 0; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
@media (max-width: 639px) {
  .header-note { display: none; }
  .link-fields { flex-direction: column; }
  .viewer-toolbar { align-items: flex-start; flex-direction: column; gap: 16px; }
  .viewer-actions { width: 100%; }
  #viewer { padding-top: 24px; }
  iframe { height: calc(100vh - 290px); }
  #media-panel { min-height: 230px; }
  #video-player { min-height: 200px; max-height: calc(100vh - 290px); }
}