:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #0b0d12;
	--muted: #5b6472;
	--accent: #2f6df6;
	--border: #e4e7ec;
	--danger: #b42318;
	--radius: 10px;
	--space: 1rem;
	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b0d12;
		--fg: #f4f6fa;
		--muted: #9aa4b2;
		--accent: #6f9bff;
		--border: #232833;
		--danger: #ff9a8f;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.shell {
	max-width: 42rem;
	margin: 0 auto;
	padding: calc(var(--space) * 3) var(--space);
}

h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	letter-spacing: -0.02em;
}

.lede {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.hint {
	margin: 0;
	color: var(--muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn-secondary {
	background: transparent;
	color: var(--fg);
	border-color: var(--border);
}

.card {
	padding: var(--space);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
}

.input,
.select,
.textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--fg);
	font: inherit;
}

.field {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.35rem;
	margin-bottom: var(--space);
}

.field > label {
	font-size: 0.875rem;
	color: var(--muted);
}

/*
 * 390px-safe, like .grid below. A grid with no column list gets one implicit
 * auto column, and an auto column is never narrower than its widest item's
 * min-content width. One nowrap scrolling strip (days, time slots) anywhere
 * inside an item therefore widened the whole column past the screen: the page
 * scrolled sideways instead of the strip scrolling on its own. minmax(0, 1fr)
 * caps the column at the container; the min-width rule keeps a child from
 * bringing the same floor back if an app redefines the columns. :where() adds
 * no specificity, so a min-width the app sets on a child still wins.
 */
.stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space);
}

:where(.field, .stack, .list) > * {
	min-width: 0;
}

.row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/*
 * 390px-safe. An unclamped minmax track overflows a 390px viewport once the
 * shell padding is subtracted, and nothing in the pipeline ever looked at a
 * phone-width layout, so every generated app inherited the horizontal scroll.
 * min() clamps the track to the container instead.
 */
.grid {
	display: grid;
	gap: var(--space);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td {
	padding: 0.6rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

.table th {
	font-size: 0.8125rem;
	color: var(--muted);
	font-weight: 600;
}

.empty {
	padding: calc(var(--space) * 2);
	text-align: center;
	color: var(--muted);
}

.empty-title {
	margin: 0 0 0.25rem;
	color: var(--fg);
	font-weight: 600;
}

/* Loading. Every fetch has one; without a primitive each app invented its own. */
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: calc(var(--space) * 1.5);
	color: var(--muted);
}

.spinner {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--border);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: fab-spin 0.7s linear infinite;
}

@keyframes fab-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Placeholder for content whose shape is known before its data arrives. */
.skeleton {
	display: block;
	height: 1rem;
	border-radius: calc(var(--radius) / 2);
	background: linear-gradient(90deg, var(--border), transparent, var(--border));
	background-size: 200% 100%;
	animation: fab-shimmer 1.2s linear infinite;
}

@keyframes fab-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* Error strip: a failure the user can see and retry, never a silent no-op. */
.alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--border);
	border-left: 3px solid var(--muted);
	border-radius: var(--radius);
}

.alert-error {
	border-left-color: var(--danger);
	color: var(--danger);
}

.badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.8125rem;
	color: var(--muted);
}

/*
 * The scaffold had exactly one @media rule (prefers-color-scheme) and no width
 * breakpoint at all, so the shell was a 42rem column at every size.
 * Mobile-first stays the default; these only widen it.
 */
@media (min-width: 48rem) {
	.shell {
		max-width: 52rem;
		padding: calc(var(--space) * 3) calc(var(--space) * 1.5);
	}
}

@media (min-width: 64rem) {
	.shell {
		max-width: 64rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spinner,
	.skeleton {
		animation: none;
	}
}

:root{color-scheme:light;--bg:#fff;--fg:#0f2a3d;--muted:#6b8193;--accent:#38b6f5;--border:#e3f1fa;--radius:18px;--font:"Outfit",system-ui,sans-serif}
.app{min-height:100vh;background:linear-gradient(180deg,#f1faff,#fff 40%)}
.top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.8rem 1.2rem;background:#fff;border-bottom:1px solid var(--border)}
.logo{font-weight:700;font-size:1.6rem;color:var(--accent);letter-spacing:-.03em}
.tabs,.seg{display:flex;gap:.25rem;background:#eef8fe;padding:.25rem;border-radius:999px}
.tabs button,.seg button{border:0;background:none;padding:.45rem .9rem;border-radius:999px;font:inherit;color:var(--muted);cursor:pointer}
.tabs button.on,.seg button.on{background:#fff;color:var(--fg);box-shadow:0 2px 8px #38b6f522}
.seg{margin-bottom:1rem}.seg button{flex:1}
.subbar{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;padding:.5rem 1rem;font-size:.9rem}
.subbar.ok{background:#e6f6fe;color:#0b6c9c}.subbar.ko{background:#fdecec;color:var(--danger)}
.link{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit}
.wide{max-width:72rem!important}
.btn-primary{background:var(--accent);border-radius:999px;justify-content:center}
.btn-ghost{background:#fff;color:var(--fg);border-color:var(--border);border-radius:999px}
.sm{font-size:.85rem}.muted{color:var(--muted)}.mono{font-family:monospace}
.between{justify-content:space-between}.center{justify-content:center}.gap{gap:.75rem}.grow{flex:1;min-width:0}.wrap{flex-wrap:wrap}.center-t{text-align:center;margin:auto}
.card{box-shadow:0 8px 30px #38b6f514;background:#fff}
.auth{min-height:100vh;display:grid;gap:2rem;align-items:center;padding:2rem 1rem;max-width:68rem;margin:auto;background:#fff}
@media(min-width:48rem){.auth{grid-template-columns:1.2fr 1fr}}
.auth-hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1}.auth-card{padding:1.5rem}
.avatar{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;flex:none}
.discover{display:grid;gap:1.2rem;max-width:24rem;margin:auto}
.swipe{padding:0;overflow:hidden;transition:transform .28s,opacity .28s}
.out-left{transform:translateX(-120%) rotate(-12deg);opacity:0}.out-right{transform:translateX(120%) rotate(12deg);opacity:0}
.swipe-img{height:20rem;display:grid;place-items:center;font-size:6rem;color:#fff;font-weight:700}
.swipe-body{padding:1.2rem}.swipe-body h2{margin:0}
.round{width:3.6rem;height:3.6rem;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:1.4rem;cursor:pointer;box-shadow:0 6px 18px #38b6f522}
.round.like{background:var(--accent);color:#fff}.round.sm{width:2.6rem;height:2.6rem;font-size:1rem}.round.rec{background:var(--danger);color:#fff}
.msgs{display:grid;gap:1rem}@media(min-width:48rem){.msgs{grid-template-columns:16rem 1fr}}
.convs{display:flex;flex-direction:column;gap:.3rem}
.conv{display:flex;align-items:center;gap:.6rem;border:0;background:none;padding:.5rem;border-radius:12px;font:inherit;cursor:pointer;text-align:left}
.conv.on{background:#eef8fe}
.thread{display:flex;flex-direction:column;gap:.8rem;min-height:28rem}
.thread-head{border-bottom:1px solid var(--border);padding-bottom:.6rem}
.bubbles{flex:1;display:flex;flex-direction:column;gap:.5rem;overflow:auto}
.bubble{max-width:75%;padding:.55rem .9rem;border-radius:18px;background:#f1f6f9}
.bubble.me{align-self:flex-end;background:var(--accent);color:#fff}
.bubble audio{max-width:100%}
.call{position:relative;min-height:30rem;border-radius:var(--radius);background:linear-gradient(160deg,#bfe9ff,#38b6f5);color:#fff;display:grid;place-items:center;padding:1rem}
.call-remote{text-align:center;display:grid;justify-items:center}
.call-self{position:absolute;right:1rem;top:1rem;width:8rem;border-radius:12px;background:#000}
.call-err{background:#fff3;padding:.5rem;border-radius:12px}
.round.end{background:var(--danger);color:#fff}
.renew{max-width:34rem;margin:auto;display:grid;gap:.8rem;text-align:center}
.lock{font-size:2.5rem}.steps{text-align:left}.om{color:#ff7900}
.alert.ok{border-left-color:var(--accent);color:#0b6c9c}
.st-pending{color:#b26b00}.st-approved{color:#0b8a4f}.st-rejected{color:var(--danger)}
.pay{align-items:flex-start}
body { background: linear-gradient(180deg, #bfe6fb 0%, #e6f5fd 45%, #f4fbff 100%) fixed; }
.app { padding-bottom: 96px; }
.avatar { position: relative; border-radius: 50%; overflow: visible; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar .dot { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.discover { max-width: 400px; margin: 0 auto; display: grid; gap: 18px; }
.swipe { position: relative; height: min(68vh, 560px); border-radius: 32px; overflow: hidden; box-shadow: 0 20px 50px rgba(30,110,170,.25);
  transition: transform .28s, opacity .28s; padding: 0; }
.swipe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(120,190,235,0) 40%, rgba(90,170,225,.85) 100%); }
.swipe-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swipe-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; z-index: 1; }
.swipe-body h2 { font-size: 3.2rem; font-weight: 800; margin: 8px 0 4px; letter-spacing: -.02em; line-height: 1; }
.swipe-body sup { font-size: 1.3rem; font-weight: 500; margin-left: 6px; vertical-align: top; }
.swipe-body p { font-size: .9rem; margin: 6px 0 12px; opacity: .95; }
.glass { display: inline-flex; gap: 4px; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: .78rem; color: #fff;
  background: rgba(255,255,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.likes { position: absolute; top: 18px; left: 18px; z-index: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.match { position: fixed; inset: 0; z-index: 50; background: linear-gradient(180deg, #a9dcf8, #e8f7fd); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px; color: #1b2b4b; }
.match-x { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #555; }
.match-pics { position: relative; width: 300px; max-width: 90vw; height: 300px; }
.match-pics img { position: absolute; width: 58%; height: 78%; object-fit: cover; border-radius: 22px; box-shadow: 0 14px 30px rgba(0,60,110,.2); }
.mp1 { left: 0; top: 0; transform: rotate(-8deg); } .mp2 { right: 0; bottom: 0; transform: rotate(6deg); }
.match-heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: #fff;
  color: #3aa0e8; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,60,110,.2); }
.match h2 { font-size: 2.2rem; font-weight: 800; margin: 24px 0 6px; }
.match p { color: #4a5a78; margin: 0 0 28px; }
.match-chat { width: 76px; height: 76px; border-radius: 50%; border: 0; background: #fff; color: #1b2b4b; display: grid; place-items: center;
  box-shadow: 0 10px 24px rgba(0,60,110,.15); }
.chats { max-width: 480px; margin: 0 auto; }
.chats-head { display: flex; justify-content: space-between; align-items: center; }
.chats-head h1 { font-size: 1.9rem; font-weight: 800; color: #1b2b4b; margin: 0; }
.search { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.3rem; color: #1b2b4b; }
.stories { display: flex; gap: 12px; overflow-x: auto; padding: 16px 0; }
.story { border: 0; background: none; padding: 0; }
.story .avatar img { border: 3px solid #fff; }
.chat-panel { background: rgba(255,255,255,.92); border-radius: 28px; padding: 14px 10px; }
.sec { font-size: .72rem; color: #8a97ad; padding: 4px 10px 6px; }
.chat-row { width: 100%; display: flex; gap: 12px; align-items: center; border: 0; background: none; padding: 10px; border-radius: 16px; text-align: left; }
.chat-row:hover { background: #f0f8fe; }
.cr-txt { flex: 1; min-width: 0; display: grid; }
.cr-txt b { color: #1b2b4b; } .cr-txt small { color: #7a879c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread { width: 20px; height: 20px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: .7rem; display: grid; place-items: center; }
.tabbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 56px; padding: 12px 34px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; box-shadow: 0 8px 24px rgba(30,110,170,.15); }
.tabbar button { position: relative; border: 0; background: none; color: #9fb3c8; padding: 4px; }
.tabbar button.on { color: #1b2b4b; }
.tab-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; }
.row.two { display: flex; gap: 10px; }
.row.two > .field { flex: 1 1 0; min-width: 0; }
textarea.input { resize: vertical; font: inherit; }

.call-btns { flex-wrap: nowrap; }
.bubble.media { padding: 4px; max-width: 75%; }
.att-img { display: block; width: 100%; max-width: 260px; max-height: 320px; border-radius: 14px; object-fit: cover; background: #eaf6ff; }
.att-doc { display: flex; gap: 10px; align-items: center; padding: 8px 10px; color: inherit; text-decoration: none; }
.att-doc span:first-child { font-size: 26px; }
.att-doc b { display: block; word-break: break-all; font-size: 14px; }
.att-doc small { opacity: .75; font-size: 12px; }
.composer .input { min-width: 0; }

.tabbar.four { gap: 34px; padding: 12px 28px; }
.bell { position: relative; border: 0; background: rgba(255,255,255,.8); width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 4px 12px rgba(30,110,170,.12); }
.bell i { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: #3b82f6; color: #fff;
  font-size: .68rem; font-style: normal; display: grid; place-items: center; padding: 0 4px; }
.admin-entry { display: block; text-align: center; color: #6b8193; font-size: .85rem; margin-top: .5rem; text-decoration: none; }
.admin-entry:hover { color: #1b8cd0; }
.account, .feed { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 90px; }
.acc-head { display: flex; gap: 1rem; align-items: flex-start; }
.acc-head h2 { margin: 0; }
.acc-head p { margin: .2rem 0; }
.acc-av { width: 60px; height: 60px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #8fd6ff, #38b6f5); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; }
.acc-bio { color: #34506a; overflow-wrap: anywhere; }
.av-ph { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, #8fd6ff, #38b6f5); border: 3px solid #fff; box-sizing: border-box; }
.swipe-ph { display: grid; place-items: center; font-size: 8rem; font-weight: 700; color: #ffffffcc;
  background: linear-gradient(160deg, #bfe9ff, #38b6f5 70%, #1b6fa8); }
.mp-ph { display: grid; place-items: center; font-size: 4rem; font-weight: 700; color: #fff; background: linear-gradient(160deg, #8fd6ff, #38b6f5); }
.profile-card { padding: 0; overflow: hidden; }
.profile-cover { height: 260px; background: linear-gradient(160deg, #e6f6fe, #bfe9ff); display: grid; place-items: center; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-av.big { width: 110px; height: 110px; font-size: 2.4rem; }
.profile-info { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.profile-info h2 { margin: 0; }
.profile-info h2 sup { font-size: .55em; color: var(--muted); margin-left: .3rem; font-weight: 500; }
.profile-info p { margin: 0; }
.profile-info .btn { margin-top: .5rem; align-self: flex-start; }
.tag { background: #eef8fe; color: #0b6c9c; border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; }
.photo-pick { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.photo-prev { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #8fd6ff, #38b6f5); color: #fff; font-size: 2.2rem; font-weight: 700; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.profile-edit h2 { margin: 0; scroll-margin-top: 80px; }
.sub-card { display: flex; flex-direction: column; gap: .25rem; }
.sub-card.ok { background: #e6f6fe; color: #0b6c9c; }
.sub-card.ko { background: #fdecec; color: var(--danger); }
.notif { display: flex; flex-direction: column; gap: .2rem; }
.notif.new { border-left: 3px solid #38b6f5; padding-left: .7rem; }
.info-card p { white-space: pre-wrap; color: #34506a; }
.pay-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.seg.big { margin-bottom: 0; }
.composer-card { gap: .7rem; }
.composer-card .seg { margin-bottom: 0; flex-wrap: wrap; border-radius: 18px; }
.post { display: flex; flex-direction: column; gap: .45rem; }
.post h3 { margin: 0; }
.post.featured { border: 2px solid #38b6f5; }
.post-kind { font-size: .78rem; color: #1b8cd0; font-weight: 600; }
.post-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; }
.post-link { color: #1b8cd0; font-weight: 600; }
.post-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #34506a; }
.post-price { font-weight: 700; color: #0b6c9c; }
.post-acts { flex-wrap: wrap; }
.adm .ok-t { color: #86efac; }
.adm .ko-t { color: #fca5a5; }
.pay-card { display: flex; flex-direction: column; }
.seg.big button { padding: .5rem .5rem; white-space: nowrap; }
.reel-head { color: #0b6c9c; }

/* Likes and comments */
.react-bar { display: flex; gap: .4rem; border-top: 1px solid var(--border); padding-top: .5rem; flex-wrap: wrap; }
.react { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 0; border-radius: 12px;
	background: #f4fbff; color: #34506a; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; }
.react:hover { background: #e6f6fe; }
.react:active { transform: scale(.97); }
.react.liked { color: #e0245e; background: #fff0f4; }
.react.on { background: #e6f6fe; color: #0b6c9c; }
.react .heart { font-size: 1.15rem; line-height: 1; }
@media (max-width: 360px) { .react-l { display: none; } }
.comments { gap: .6rem; padding-top: .3rem; }
.comment { display: flex; gap: .55rem; align-items: flex-start; }
.c-av { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: #e6f6fe; color: #0b6c9c;
	display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.c-bubble { background: #f4fbff; border-radius: 14px; padding: .45rem .7rem; min-width: 0; flex: 1; }
.c-bubble p { margin: .1rem 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #34506a; }
.c-del { border: 0; background: none; color: #e0245e; font: inherit; cursor: pointer; margin-left: .5rem; padding: 0; }

/* Reels */
.reels { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.reel { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: .5rem; }
.reel-frame { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 78vh; border-radius: 22px; overflow: hidden; background: #0f2a3d;
	box-shadow: 0 10px 30px #38b6f533; }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.reel-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: #ffffffd9;
	color: #38b6f5; font-size: 1.8rem; cursor: pointer; padding-left: 6px; }
.reel-sound { position: absolute; top: .7rem; right: .7rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #0006; color: #fff;
	font-size: 1.1rem; cursor: pointer; }
.reel-side { position: absolute; right: .6rem; bottom: 6.5rem; display: flex; flex-direction: column; gap: .8rem; }
.reel-btn { width: 52px; min-height: 52px; border: 0; border-radius: 16px; background: #0005; color: #fff; display: flex; flex-direction: column;
	align-items: center; justify-content: center; cursor: pointer; font: inherit; padding: .3rem 0; }
.reel-btn span { font-size: 1.4rem; line-height: 1; }
.reel-btn small { font-weight: 700; font-size: .8rem; }
.reel-btn.liked span { color: #ff4d7d; }
.reel-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 4.5rem 1rem 1rem; color: #fff;
	background: linear-gradient(180deg, transparent, #000b); }
.reel-info p { margin: .2rem 0; overflow-wrap: anywhere; }
.reel-info small { opacity: .85; }
.reel-comments { width: 100%; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}