/* HuxOS apps: Messenger, HuxTV, Mail, Schedule, Explorer, Notepad,
   Display / System Properties, folders, Task Manager, Run, HuxDOS. */

/* ── Hux Messenger ──────────────────────────────────────────────── */
.msgr { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.msgr-top { flex: none; display: flex; gap: 10px; align-items: center; padding: 10px; background: linear-gradient(180deg, #e7f1ff, #c7dcf7); border-bottom: 1px solid #9fbbe0; }
.msgr-avatar { flex: none; width: 66px; height: 66px; padding: 2px; border: 1px solid #7aa1d6; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.msgr-avatar img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; display: block; pointer-events: none; }
.msgr-me { min-width: 0; }
.msgr-me b { font: bold 15px var(--ui-title); color: #0a246a; }
.msgr-status { color: #555; }
.msgr-status.on { color: #1a8a1a; font-weight: bold; }
.msgr-psm { margin-top: 2px; color: #555; font-style: italic; font-size: 11px; }
.msgr-hero { flex: none; padding: 12px 12px 10px; text-align: center; border-bottom: 1px solid #dde6f3; background: radial-gradient(ellipse at 50% 0%, #fffbe8, #fff 70%); }
.msgr-q { display: flex; align-items: center; justify-content: center; gap: 4px; font: bold 22px var(--ui-title); color: #0a246a; }
.msgr-q img { height: 40px; width: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) brightness(.2) sepia(1) hue-rotate(185deg) saturate(6); }
.msgr-q .qm { font-size: 30px; color: #e8a213; }
.ans-word { margin-top: 6px; font: bold 18px var(--ui-title); color: #333; display: flex; align-items: center; justify-content: center; gap: 6px; }
.is-live-ans .ans-word { color: #c4291a; }
.ans-rest { color: #444; margin-top: 2px; }
.ans-title { color: #555; font-style: italic; margin-top: 3px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #e2412a; box-shadow: 0 0 0 0 rgba(226, 65, 42, .6); animation: dot-pulse 1.4s infinite; display: inline-block; }
@keyframes dot-pulse { 70% { box-shadow: 0 0 0 8px rgba(226, 65, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 65, 42, 0); } }
.msgr-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.msgr-ctas .xbtn { min-width: 0; }
.msgr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 10px; }
.msgr-stats div { padding: 4px 2px; border: 1px solid #dde6f3; border-radius: 4px; background: #f6f9fe; }
.msgr-stats b { display: block; font-size: 14px; color: #0a246a; }
.msgr-stats span { font-size: 10px; color: #666; }
.msgr-list { flex: 1; min-height: 0; padding: 6px 4px; }
.mg-head { width: 100%; display: flex; align-items: center; gap: 4px; padding: 3px 4px; border: 0; background: none; color: #0a246a; font-weight: bold; text-align: left; }
.mg-head::before { content: "▾"; font-size: 10px; width: 10px; }
.mg.closed .mg-head::before { content: "▸"; }
.mg.closed .mg-body { display: none; }
.contact { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; text-decoration: none; color: #000; border: 1px solid transparent; border-radius: 3px; }
.contact:hover { background: #e8f0fc; border-color: #b9cff2; }
.contact .xi, .contact .xi-brand { width: 22px; height: 22px; --s: 22px; flex: none; }
.c-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff, #b5b5b5 45%, #7c7c7c); border: 1px solid #6c6c6c; }
.contact.on .c-dot { background: radial-gradient(circle at 35% 30%, #e6ffd6, #4fd13a 45%, #218a12); border-color: #1d6d14; }
.c-main { flex: 1; min-width: 0; }
.c-main b { font-weight: normal; }
.contact.on .c-main b { font-weight: bold; }
.c-main small { display: block; color: #777; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-n { color: #0a246a; font-size: 11px; white-space: nowrap; }
.msgr-socials { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 6px 4px 14px; }
.msgr-socials a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; border: 1px solid #c9d8ee; background: #f6f9fe; }
.msgr-socials a:hover { border-color: #7aa1d6; background: #e8f0fc; }
.msgr-socials .xi-brand { width: 20px; height: 20px; --s: 20px; }
.msgr-hint { padding: 6px 10px; color: #777; font-size: 11px; text-align: center; }
.msgr-ad { flex: none; display: flex; align-items: center; gap: 10px; height: 64px; padding: 6px 10px; border-top: 1px solid #c9d8ee; background: linear-gradient(90deg, #101820, #1d2c3a); color: #fff; text-decoration: none; overflow: hidden; position: relative; }
.msgr-ad .ad-tag { position: absolute; right: 4px; top: 2px; font-size: 9px; color: rgba(255, 255, 255, .55); }
.msgr-ad b { display: block; font: bold 13px var(--ui-title); }
.msgr-ad small { color: #cfe0f2; font-size: 11px; }
.msgr-ad .xi, .msgr-ad .xi-brand { width: 40px; height: 40px; --s: 40px; flex: none; }
.msgr-ad .ad-art { width: 52px; height: 52px; flex: none; border-radius: 4px; overflow: hidden; background: #fff; }
.msgr-ad.ad-collab { background: linear-gradient(90deg, #a2560f, #e7962f); }
.msgr-ad.ad-shop { background: linear-gradient(90deg, #1d3a1c, #3d7a2a); }

/* ── HuxTV ──────────────────────────────────────────────────────── */
.tv { flex: 1; min-height: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #2c3e57, #172231); color: #e6eef8; }
.tv .menubar { background: linear-gradient(180deg, #4b6488, #2f4463); border-color: #1b2738; color: #fff; }
.tv .mb-item:hover, .tv .mb-item.open { background: #8fb4e8; color: #000; }
.tv-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 250px; gap: 6px; padding: 6px; }
.tv-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.tv-screen { flex: 1; min-height: 160px; position: relative; display: grid; place-items: center; background: #000; border: 2px solid #0b1118; border-radius: 6px; box-shadow: inset 0 0 0 1px #3c5272; overflow: hidden; }
.tv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-screen.tall iframe { left: 50%; width: min(100%, calc((100% * 9 / 16) * 1)); aspect-ratio: 9 / 16; height: 100%; transform: translateX(-50%); }
.tv-idle { text-align: center; padding: 20px; color: #b9c9de; display: grid; gap: 10px; justify-items: center; }
.tv-idle .xi { width: 64px; height: 64px; opacity: .85; }
.tv-idle b { font: bold 16px var(--ui-title); color: #fff; }
.tv-viz { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, rgba(80, 160, 255, .35), transparent 50%), radial-gradient(circle at 70% 60%, rgba(255, 211, 110, .25), transparent 45%); animation: viz 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes viz { to { transform: scale(1.2) rotate(8deg); } }
.tv-info { flex: none; padding: 5px 8px; border-radius: 4px; background: #0b1118; border: 1px solid #3c5272; font-size: 11px; color: #9fd0ff; font-family: "Lucida Console", monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-controls { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 18px; background: linear-gradient(180deg, #d9e3f0, #8ea4c2 50%, #6c84a6); box-shadow: inset 0 1px #fff; }
.tv-cbtn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #36506f; background: radial-gradient(circle at 40% 30%, #fff, #b8c9de 60%, #8aa0bd); color: #1b2738; display: grid; place-items: center; font-size: 12px; padding: 0; }
.tv-cbtn.play { width: 38px; height: 38px; font-size: 15px; background: radial-gradient(circle at 40% 30%, #d6f6ff, #59a8e6 60%, #2a6fb8); color: #fff; }
.tv-cbtn:hover { filter: brightness(1.08); }
.tv-seek { flex: 1; height: 6px; border-radius: 3px; background: #31475f; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); position: relative; }
.tv-seek i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #6fd0ff, #ffd36e); }
.tv-controls .xbtn { min-width: 0; }
.tv-list { min-height: 0; display: flex; flex-direction: column; border-radius: 6px; background: #0e1722; border: 1px solid #3c5272; overflow: hidden; }
.tv-list h3 { flex: none; padding: 5px 8px; font: bold 11px var(--ui); background: linear-gradient(180deg, #4b6488, #2f4463); }
.tv-items { flex: 1; overflow: auto; padding: 4px; display: grid; gap: 3px; align-content: start; }
.tv-item { display: grid; grid-template-columns: 70px 1fr; gap: 6px; padding: 4px; border: 1px solid transparent; border-radius: 4px; background: none; color: #dbe7f5; text-align: left; align-items: center; }
.tv-item:hover { background: #1c2b3d; border-color: #3c5272; }
.tv-item.on { background: #2b4769; border-color: #6f9bd2; }
.tv-thumb { width: 70px; aspect-ratio: 16 / 9; border-radius: 3px; background: #22324a center / cover no-repeat; position: relative; overflow: hidden; }
.tv-thumb.tall { aspect-ratio: 16 / 9; background-size: cover; }
.tv-item .t { font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-item small { display: block; color: #8aa3c2; font-size: 10px; margin-top: 2px; }
.tv-item.live .tv-thumb { background: radial-gradient(circle, #ff6b55, #8f1a0b); display: grid; place-items: center; color: #fff; font: bold 11px var(--ui); }
.tv-empty { padding: 12px; color: #8aa3c2; font-size: 11px; line-height: 1.5; }

/* ── Hux Mail ───────────────────────────────────────────────────── */
.mail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mail-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: linear-gradient(180deg, #fff, #dfe8f7); border-bottom: 1px solid #a9bfdf; font: bold 16px var(--ui-title); color: #0a246a; }
.mail-bar .xi { width: 28px; height: 28px; }
.mail-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 180px 1fr; }
.mail-folders { border-right: 1px solid #aca899; background: #fff; overflow: auto; padding: 4px 0; }
.mf-title { padding: 3px 8px; background: var(--face); border-bottom: 1px solid #d0cfc1; font-weight: bold; margin-bottom: 4px; }
.mf { width: 100%; display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 18px; border: 0; background: none; text-align: left; white-space: nowrap; }
.mf .xi { width: 16px; height: 16px; flex: none; }
.mf.on { background: var(--sel); color: #fff; }
.mf b { color: #0a3fb0; }
.mf.on b { color: #fff; }
.mail-right { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(110px, 38%) 1fr; }
.mail-list { overflow: auto; background: #fff; border-bottom: 4px solid var(--face); }
.mail-list table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mail-list th { position: sticky; top: 0; padding: 2px 6px; text-align: left; font-weight: normal; background: linear-gradient(180deg, #fff, #ebeadb); border-right: 1px solid #c7c5b2; border-bottom: 1px solid #c7c5b2; }
.mail-list td { padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-list tr.msg { cursor: default; }
.mail-list tr.msg.unread td { font-weight: bold; }
.mail-list tr.msg.on td { background: var(--sel); color: #fff; }
.mail-list tr.msg:focus { outline: 1px dotted #000; outline-offset: -1px; }
.mail-read { min-height: 0; overflow: auto; background: #fff; }
.mr-head { padding: 6px 10px; background: linear-gradient(180deg, #f6f7f3, #e9e8dc); border-bottom: 1px solid #d0cfc1; font-size: 11px; line-height: 1.5; }
.mr-head b { display: inline-block; min-width: 54px; }
.mr-body { padding: 14px 16px 22px; font: 13px/1.6 Verdana, var(--ui); max-width: 640px; user-select: text; }
.mr-body h2 { font: bold 18px var(--ui-title); color: #0a246a; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.mr-body p { margin-bottom: 12px; }
.mr-sig { color: #777; font-style: italic; }
.alerts { display: grid; gap: 10px; max-width: 460px; }
.alerts .news-form { display: flex; gap: 6px; }
.alerts .news-form .xinput { flex: 1; }

/* ── Stream Schedule (date & time properties) ───────────────────── */
.sched-sheet .tabpanel { padding: 10px; }
.sched-top { display: grid; grid-template-columns: 1fr 150px; gap: 10px; }
.cal-head { display: flex; gap: 4px; margin-bottom: 6px; }
.cal-head .xselect, .cal-head .xinput { width: auto; }
.cal { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #7f9db9; font-size: 11px; }
.cal th { background: #4a7fd8; color: #fff; font-weight: normal; padding: 2px 0; }
.cal td { text-align: center; padding: 3px 0; border: 1px solid #f1f1f1; }
.cal td.today { background: var(--sel); color: #fff; }
.cal td.stream { background: #ffe9a8; font-weight: bold; box-shadow: inset 0 0 0 1px #e8a213; }
.cal td.stream.today { background: #e8a213; color: #fff; }
.cal td.other { color: #bbb; }
.clockface { width: 130px; height: 130px; display: block; margin: 4px auto; }
.dig { text-align: center; padding: 2px 4px; border: 1px solid #7f9db9; background: #fff; font-variant-numeric: tabular-nums; }
.nights { display: grid; gap: 4px; margin-top: 4px; }
.night { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; border: 1px solid #d0d0bf; border-radius: 3px; background: #fff; }
.night.next { border-color: #e8a213; background: #fff8e1; }
.night b { color: #0a246a; }
.night small { color: #666; }
.pill { display: inline-block; padding: 0 6px; border-radius: 8px; background: #e8a213; color: #fff; font-size: 10px; font-weight: bold; }
.cd-box { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.cd-time { font: bold 18px var(--ui-title); color: #0a246a; }
.tz-map { width: 100%; height: 120px; border: 1px solid #7f9db9; background: linear-gradient(180deg, #8ecbff, #3a8be8); position: relative; overflow: hidden; margin-top: 8px; }
.tz-map svg { width: 100%; height: 100%; }

/* ── Hux Explorer ───────────────────────────────────────────────── */
.ie { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ie-view { flex: 1; min-height: 0; background: #fff; position: relative; }
.ie-view iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.ie-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #555; }
.doc { padding: 22px clamp(16px, 4vw, 42px) 40px; max-width: 820px; font: 13px/1.65 Verdana, Tahoma, sans-serif; color: #111; }
.doc h1 { font: bold 24px/1.2 var(--ui-title); color: #0a246a; margin: 0 0 8px; }
.doc h2 { font: bold 16px/1.3 var(--ui-title); color: #0a246a; margin: 22px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #c6d3f7; }
.doc h3 { font-size: 13px; margin: 14px 0 4px; }
.doc p, .doc ul, .doc ol { margin: 0 0 10px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 4px; }
.doc .lede, .doc .meta { color: #555; }
.doc code { background: #f1f1ea; padding: 0 4px; border: 1px solid #ddd; border-radius: 2px; font-size: 12px; }
.doc .contact-card { margin: 14px 0; padding: 12px 14px; border: 1px solid #a9bfdf; border-radius: 6px; background: #f2f7ff; }
.doc .contact-card h2 { margin-top: 0; border: 0; }
.doc .btn-primary, .doc .btn { display: inline-block; margin-top: 4px; padding: 3px 12px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5); color: #000; text-decoration: none; }
.doc table { border-collapse: collapse; margin: 8px 0 14px; }
.doc th, .doc td { border: 1px solid #ccc; padding: 4px 8px; text-align: left; vertical-align: top; }
.doc :target { background: #fff8d6; outline: 4px solid #fff8d6; }

/* ── Notepad ────────────────────────────────────────────────────── */
.np { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.np textarea { flex: 1; min-height: 0; width: 100%; border: 0; border-top: 1px solid #aca899; padding: 4px 6px; resize: none; outline: 0; font: 13px/1.4 "Lucida Console", "Courier New", monospace; background: #fff; color: #000; user-select: text; -webkit-user-select: text; white-space: pre; overflow: auto; }
.np textarea.wrap { white-space: pre-wrap; }

/* ── property sheets (display, system) ──────────────────────────── */
.monitor { width: 184px; margin: 4px auto 12px; position: relative; }
.monitor .screen { height: 112px; border: 9px solid #d6d3c4; border-bottom-width: 14px; border-radius: 6px 6px 2px 2px; box-shadow: inset 0 0 0 1px #6b6b64, 0 0 0 1px #8a877a; overflow: hidden; background: #3a6ea5; }
.monitor::after { content: ""; display: block; width: 70px; height: 12px; margin: 0 auto; background: linear-gradient(180deg, #d6d3c4, #a9a693); border-radius: 0 0 6px 6px; }
.wp-thumb { width: 100%; height: 100%; position: relative; overflow: hidden; }
.listbox { border: 1px solid #7f9db9; background: #fff; height: 120px; overflow: auto; }
.listbox button { width: 100%; display: flex; align-items: center; gap: 6px; padding: 1px 4px; border: 0; background: none; text-align: left; }
.listbox button .xi { width: 16px; height: 16px; }
.listbox button[aria-selected="true"] { background: var(--sel); color: #fff; }
.listbox button:disabled { color: #9a9a9a; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.sys-top { display: flex; gap: 16px; align-items: flex-start; }
.sys-logo { width: 120px; flex: none; text-align: center; }
.sys-logo img { width: 100px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.sys-logo .huxos-word { font: italic bold 22px var(--ui-title); color: #0a246a; }
.sys-info p { margin-bottom: 10px; line-height: 1.5; }
.sys-info p b { display: block; }
.slider-fake { height: 22px; position: relative; }
.slider-fake::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border: 1px solid #9a9a9a; background: #fff; }
.slider-fake i { position: absolute; top: 2px; width: 10px; height: 18px; border: 1px solid #1c5180; border-radius: 2px; background: linear-gradient(180deg, #fff, #d4dbe6); }

/* ── Task Manager / Run / HuxDOS ────────────────────────────────── */
.tm { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tm .tabpanel { display: flex; flex-direction: column; gap: 6px; }
.lv { flex: 1; min-height: 120px; border: 1px solid #7f9db9; background: #fff; overflow: auto; }
.lv table { width: 100%; border-collapse: collapse; }
.lv th { position: sticky; top: 0; text-align: left; font-weight: normal; padding: 2px 6px; background: linear-gradient(180deg, #fff, #ebeadb); border-right: 1px solid #c7c5b2; border-bottom: 1px solid #c7c5b2; }
.lv td { padding: 1px 6px; white-space: nowrap; }
.lv td .xi { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.lv tr.on td { background: var(--sel); color: #fff; }
.graph { height: 110px; background: #000; border: 1px solid #555; position: relative; }
.graph canvas { width: 100%; height: 100%; display: block; }
.gbox { display: grid; grid-template-columns: 80px 1fr; gap: 8px; }
.meter { height: 110px; background: #000; border: 1px solid #555; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 4px; color: #3cff4f; font: 11px var(--ui); }
.meter i { width: 36px; background: repeating-linear-gradient(180deg, #3cff4f 0 2px, transparent 2px 4px); }
.run-body { padding: 12px; display: grid; gap: 10px; }
.run-body .row { flex-wrap: nowrap; }
.dos { flex: 1; min-height: 0; overflow: auto; padding: 4px 6px; background: #000; color: #c0c0c0; font: 14px/1.35 "Lucida Console", "Courier New", monospace; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; cursor: text; }
.dos .in { display: flex; }
.dos input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; padding: 0; caret-color: #c0c0c0; }
.dos a { color: #8fd3ff; }

/* folders: little helpers */
.member-orb { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: bold 20px var(--ui-title); background: radial-gradient(circle at 35% 30%, hsl(var(--h) 90% 80%), hsl(var(--h) 75% 50%) 55%, hsl(var(--h) 70% 30%)); box-shadow: 0 0 14px hsl(var(--h) 90% 60% / .55); }
.fv-empty .xbtn { margin-top: 10px; }
.fv-empty .yi { color: #6a35c9; }

/* pocket tweaks */
html.pocket .tv-main { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 1fr) minmax(160px, 40%); }
html.pocket .tv-screen { min-height: 200px; }
html.pocket .mail-main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
html.pocket .mail-folders { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #aca899; padding: 0; }
html.pocket .mf-title { display: none; }
html.pocket .mf { padding: 8px 10px; width: auto; }
html.pocket .mail-right { grid-template-rows: minmax(140px, 36%) 1fr; }
html.pocket .sched-top { grid-template-columns: 1fr; }
html.pocket .msgr-avatar { width: 58px; height: 58px; }
html.pocket .doc { font-size: 15px; }
html.pocket .dos { font-size: 13px; }

/* ── Work with Hux (compose) ────────────────────────────────────── */
.collab-app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.compose { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.compose-head { flex: none; padding: 6px 10px; background: var(--face); border-bottom: 1px solid #aca899; display: grid; gap: 4px; }
.ch-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px; }
.ch-row > span:last-child { padding: 2px 6px; background: #fff; border: 1px solid #7f9db9; min-height: 22px; }
.ch-l { text-align: right; color: #333; }
.compose-main { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.compose-fields { padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compose-fields .xtext { min-height: 160px; }
.compose-send { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.compose-side { padding: 12px 14px; background: var(--panel); color: #fff; display: grid; gap: 8px; align-content: start; }
.compose-side .eyebrow { font: bold 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #ffe9a8; }
.compose-side h1 { font: bold 20px var(--ui-title); text-shadow: 1px 1px 2px rgba(0, 0, 0, .3); }
.compose-side h2 { font: bold 12px var(--ui); margin-top: 4px; }
.compose-side .lead { line-height: 1.45; }
.reach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.reach li { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 4px 6px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: #000; }
.reach li i, .reach li svg { grid-row: span 2; width: 18px; height: 18px; color: var(--brand); }
.reach b { font-size: 14px; color: #0a246a; }
.reach span { font-size: 10px; color: #555; }
.offers { display: grid; gap: 6px; }
.offer { padding: 6px 8px 7px; border-radius: 4px; background: var(--panel-body); color: #000; display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; }
.offer .offer-ico { grid-row: span 2; font-size: 16px; }
.offer h3 { font: bold 11px var(--ui); color: var(--panel-ink); }
.offer .muted { color: #333; font-size: 11px; line-height: 1.4; }
.offer .yi { color: #6a35c9; }
html.pocket .compose-main { grid-template-columns: 1fr; }
html.pocket .form-row { grid-template-columns: 1fr; }

/* ── My Links ───────────────────────────────────────────────────── */
.links-scroll { flex: 1; min-height: 0; background: linear-gradient(180deg, #7ba2e7, #6375d6 50%, #4f63c8); }
.links { max-width: 520px; margin: 0 auto; padding: 18px 14px 26px; display: grid; gap: 14px; color: #fff; }
.lk-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.lk-avatar { display: block; width: 96px; height: 96px; padding: 3px; border-radius: 8px; background: #fff; box-shadow: 1px 2px 6px rgba(0, 0, 0, .35); }
.lk-avatar img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; display: block; }
.lk-head h1 { font: bold 26px var(--ui-title); text-shadow: 1px 2px 3px rgba(0, 0, 0, .35); }
.lk-head .glowtext { color: #ffd36e; }
.lk-head .muted { color: #e7eeff; }
.lk-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 14px; background: #ffffe1; color: #000; text-decoration: none; border: 1px solid #000; box-shadow: 1px 2px 3px rgba(0, 0, 0, .3); font-size: 12px; }
.lk-live.is-live { background: #ffe1db; border-color: #a01e0e; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #9a9a9a; flex: none; }
.dot.live { background: #e2412a; animation: dot-pulse 1.4s infinite; }
.lk-list { display: grid; gap: 8px; }
.lk { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px 6px 0 0; text-decoration: none; color: #0a246a;
  background: linear-gradient(90deg, #fff, #c6d3f7); border: 1px solid #fff; box-shadow: 1px 2px 4px rgba(0, 0, 0, .25); border-left: 5px solid var(--brand, #316ac5); }
.lk:hover { background: linear-gradient(90deg, #fff, #dfe8ff); }
.lk svg, .lk i { width: 26px; height: 26px; flex: none; color: var(--brand, #316ac5); }
.lk b { display: block; font: bold 14px var(--ui-title); }
.lk small { display: block; color: #333; font-size: 11px; }
.lk-hot { border-left-color: #e2412a; background: linear-gradient(90deg, #fffbe0, #ffe3a6); }
.lk-sec { display: grid; gap: 8px; }
.lk-sec h2 { font: bold 13px var(--ui); color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, .3); }
.lk-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.lk-plats a { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 6px; background: rgba(255, 255, 255, .95); color: #000; text-decoration: none; text-align: center; border: 1px solid #fff; position: relative; }
.lk-plats a svg { width: 24px; height: 24px; color: var(--brand); }
.lk-plats small { color: #555; font-size: 10px; }
.lk-plats a.is-live::after { content: "LIVE"; position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 6px; background: #e2412a; color: #fff; font: bold 9px/14px var(--ui); }
.lk-socials { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, .95); border: 1px solid #fff; }
.lk-socials svg { width: 20px; height: 20px; color: var(--brand); }
.lk-foot { text-align: center; color: #e7eeff; font-size: 11px; }
.lk-foot a { color: #fff; }
.lk-foot .yi { color: #fff3c4; }