:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #050505; color: #fff; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #bd83ef; outline-offset: 3px; }
[hidden] { display: none !important; }

.share-page { width: 100%; max-width: 640px; min-height: 100svh; margin: 0 auto; background: #050505; }
.share-header { height: 50px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: #151515; }
.share-brand { display: inline-flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; font-size: 17px; white-space: nowrap; }
.share-brand img { width: 22px; height: 22px; object-fit: contain; }
.share-brand strong { font-size: 17px; letter-spacing: -.03em; }
.template-button { border: 1px solid #ffffff16; border-radius: 7px; padding: 7px 12px; background: #28282a; color: #e8e7e9; font-size: 12px; font-weight: 600; white-space: nowrap; }
.template-button:hover { background: #3a3a3d; }
.template-button:disabled { opacity: .4; cursor: default; }
.media-frame { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: #232326; display: grid; place-items: center; }
.media-frame > img, .media-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-frame > video { z-index: 1; }
.media-unavailable { color: #96969b; font-size: 14px; }
.poster-label { position: absolute; z-index: 2; bottom: 10px; right: 10px; padding: 5px 7px; border-radius: 4px; background: #0009; color: #ddd; font-size: 9px; letter-spacing: .08em; }
.video-details { width: 100%; padding: 12px 12px 96px; }
.creator-row { display: flex; align-items: center; gap: 8px; }
.creator-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(130deg,#fca45d,#d94baa 55%,#6651e8); font-size: 18px; font-weight: 700; }
.creator-row strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.video-details p { margin: 8px 0 0; color: #c3c3c6; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.open-app-button { position: fixed; bottom: max(40px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 148px; min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; background: linear-gradient(90deg, #ffa052 0%, #e046a4 46%, #6851eb 100%); color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
.sparkle { font-size: 24px; line-height: 1; }
.mock-preview { position: fixed; z-index: 10; left: 12px; bottom: max(8px, env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; font-size: 10px; color: #aaa; }
.mock-preview span { letter-spacing: .1em; }
.mock-preview a { color: #ccc; }