* { margin:0; padding:0; box-sizing:border-box; }
html, body { margin:0; padding:0; height:100vh; overflow:hidden; }
body {
  font-family:'Inter','Noto Kufi Arabic',system-ui,sans-serif;
  background:#0a0a0f; color:#e0e0e0; display:flex; flex-direction:column;
}
body::before {
  content:''; position:fixed; top:0; left:0; width:100%; height:100%;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(120,40,200,.08) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(0,150,255,.06) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 80%,rgba(255,50,50,.05) 0%,transparent 50%);
  z-index:0; pointer-events:none;
}

/* TOP BAR */
.top-bar {
  flex-shrink:0; z-index:100; background:#0a0a0f;
  padding:0; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:stretch;
  box-shadow:0 2px 16px rgba(0,0,0,.5);
}
.top-bar-left {
  display:flex; align-items:center; gap:8px; padding:6px 14px;
  flex-shrink:0; white-space:nowrap;
}
.sh-title {
  font-size:.95rem; font-weight:700;
  background:linear-gradient(135deg,#ff4d4d,#ff8c42,#ffcc00);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.live-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,0,0,.15); border:1px solid rgba(255,0,0,.3);
  padding:2px 7px; border-radius:12px; font-size:.55rem; font-weight:600; color:#ff4d4d;
}
.live-badge::before { content:''; width:6px; height:6px; background:#ff3333; border-radius:50%; box-shadow:0 0 6px rgba(255,50,50,.6); }

/* TICKER (inline in top bar) */
.fullscreen-btn {
  display:flex; align-items:center; justify-content:center;
  width:32px; flex-shrink:0; background:rgba(255,255,255,.04);
  border:none; border-left:1px solid rgba(255,255,255,.06);
  color:#777; cursor:pointer; transition:all .2s;
}
.fullscreen-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.fullscreen-btn svg { width:14px; height:14px; }

.tk { flex:1; min-width:0; overflow:hidden; display:flex; align-items:stretch; }
.tk-h { display:flex; align-items:center; background:linear-gradient(90deg,#cc0000,#990000); color:#fff; flex:1; min-width:0; }
.tk-l {
  padding:4px 10px; font-weight:700; font-size:.6rem; text-transform:uppercase;
  white-space:nowrap; background:rgba(0,0,0,.2); display:flex; align-items:center; gap:4px;
}
.tk-l::before { content:''; width:5px; height:5px; background:#fff; border-radius:50%; }
.tk-t { flex:1; overflow:hidden; padding:4px 0; }
.tk-c { display:flex; gap:36px; white-space:nowrap; }
.tk-i { font-size:.65rem; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:5px; flex-shrink:0; }
.tk-i .sd { width:4px; height:4px; border-radius:50%; flex-shrink:0; }
.tk-i a { color:rgba(255,255,255,.9); text-decoration:none; }
.tk-i a:hover { color:#fff; text-decoration:underline; }

/* DASHBOARD — infinite canvas container */
.dashboard {
  flex:1; overflow-x:auto; overflow-y:hidden; padding:8px 14px 14px; position:relative; z-index:1;
  cursor:default;
  scrollbar-width:auto; scrollbar-color:rgba(255,255,255,.12) transparent;
}
.dashboard.panning { cursor:grabbing; }
.dashboard::-webkit-scrollbar { height:16px; }
.dashboard::-webkit-scrollbar-track { background:rgba(255,255,255,.03); border-radius:8px; margin:0 4px; }
.dashboard::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.12); border-radius:8px; min-width:40px;
  border:3px solid transparent; background-clip:padding-box;
}
.dashboard::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.25); }
.dashboard::-webkit-scrollbar-thumb:active { background:rgba(100,180,255,.45); }

/* FREEFORM GRID — extends beyond viewport for horizontal pan */
.muuri-grid {
  position:relative;
  min-width:3000px;
  height:100%;
}
.muuri-item {
  position:absolute;
  display:block;
  z-index:1;
  padding:5px;
  height: calc(100vh - 80px);
}
.muuri-item.widget-dragging {
  z-index:100;
  opacity:.9;
}
.muuri-item.widget-dragging .card {
  box-shadow:0 8px 30px rgba(0,0,0,.6);
  border-color:rgba(100,180,255,.4);
  transform:scale(1.02);
}
/* Default widget widths (px) — overridden by inline style when user resizes */
.muuri-item.w-1 { width:400px; }
.muuri-item.w-half { width:600px; }
.muuri-item.w-2 { width:800px; }
.muuri-item.w-full { width:1200px; }
@media(max-width:960px){
  .muuri-item.w-1,
  .muuri-item.w-half,
  .muuri-item.w-2,
  .muuri-item.w-full { width:100vw; }
}
/* Widget content layout */
.muuri-item .card { display:flex; flex-direction:column; margin-bottom:0; height:100%; max-height:100%; }
.muuri-item .card .card-body {
  overflow-y:auto; overflow-x:hidden; flex:1; min-height:0;
  touch-action:pan-y; overscroll-behavior-y:contain;
  scrollbar-width:auto;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}
/* Card bodies that stack children (tabs + feed) or hold a flex:1 fill child
   (the IPTV iframe, the map) need to be flex columns so the child fills the
   widget height instead of collapsing to its natural size. */
#body-card-news, #body-card-reddit,
#body-card-iptv, #body-card-map { display:flex; flex-direction:column; }
.muuri-item .card .card-body::-webkit-scrollbar { width:16px; }
.muuri-item .card .card-body::-webkit-scrollbar-track { background:rgba(255,255,255,.03); border-radius:8px; margin:4px 0; }
.muuri-item .card .card-body::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.12); border-radius:8px; min-height:44px;
  border:3px solid transparent; background-clip:padding-box;
}
.muuri-item .card .card-body::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.25); }
.muuri-item .card .card-body::-webkit-scrollbar-thumb:active { background:rgba(100,180,255,.45); }
@media(pointer:coarse){
  .muuri-item .card .card-body::-webkit-scrollbar { width:20px; }
  .muuri-item .card .card-body::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.18); min-height:56px;
    border:4px solid transparent; background-clip:padding-box;
  }
}
/* Collapsed cards shrink to header only */
.muuri-item .card:has(.card-body.collapsed) .card-body { height:0 !important; }
/* Widget resize handle */
.widget-resize-handle {
  height:10px; cursor:ns-resize; background:transparent;
  position:absolute; bottom:-5px; left:0; right:0; z-index:40;
  transition:background .15s;
  touch-action:none;
}
.widget-resize-handle::before {
  content:''; position:absolute; left:0; right:0;
  top:-8px; bottom:-8px;
}
.widget-resize-handle::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:40px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.12); transition:background .15s, width .15s;
}
.widget-resize-handle:hover::after,
.widget-resize-handle.dragging::after {
  background:rgba(100,180,255,.5); width:60px;
}
.widget-resize-handle:hover,
.widget-resize-handle.dragging {
  background:rgba(100,180,255,.08);
}
@media(pointer:coarse){
  .widget-resize-handle { height:16px; bottom:-8px; }
  .widget-resize-handle::before { top:-14px; bottom:-14px; }
  .widget-resize-handle::after { width:70px; height:5px; }
}
/* Hide resize handle on collapsed cards */
.card:has(.card-body.collapsed) ~ .widget-resize-handle { display:none; }
.muuri-item:has(.card-body.collapsed) .widget-resize-handle { display:none; }
/* Right-edge resize handle */
.widget-resize-right {
  width:6px; cursor:ew-resize; background:transparent;
  position:absolute; top:0; right:0; bottom:0; z-index:25;
  transition:background .15s; touch-action:none;
}
.widget-resize-right::after {
  content:''; position:absolute; right:1px; top:50%; transform:translateY(-50%);
  width:2px; height:30px; border-radius:2px;
  background:rgba(255,255,255,.08); transition:background .15s, height .15s;
}
.widget-resize-right:hover::after,
.widget-resize-right.dragging::after {
  background:rgba(100,180,255,.5); height:50px;
}
.widget-resize-right:hover,
.widget-resize-right.dragging {
  background:rgba(100,180,255,.06);
}
@media(pointer:coarse){
  .widget-resize-right { width:20px; }
  .widget-resize-right::after { height:50px; width:4px; }
}
.card:has(.card-body.collapsed) .widget-resize-right { display:none; }
/* Corner resize handle */
.widget-resize-corner {
  width:14px; height:14px; cursor:nwse-resize;
  position:absolute; bottom:0; right:0; z-index:30;
  background:transparent; touch-action:none;
}
.widget-resize-corner::after {
  content:''; position:absolute; bottom:3px; right:3px;
  width:8px; height:8px; border-right:2px solid rgba(255,255,255,.1);
  border-bottom:2px solid rgba(255,255,255,.1);
  transition:border-color .15s;
}
.widget-resize-corner:hover::after,
.widget-resize-corner.dragging::after {
  border-color:rgba(100,180,255,.5);
}
@media(pointer:coarse){
  .widget-resize-corner { width:32px; height:32px; }
  .widget-resize-corner::after { width:12px; height:12px; bottom:6px; right:6px; }
}
.card:has(.card-body.collapsed) .widget-resize-corner { display:none; }
/* Ensure muuri-item-content is the positioning context */
.muuri-item-content { position:relative; width:100%; height:100%; }


/* CARD */
.card {
  background:#131318; border:1px solid #1e1e28;
  border-radius:10px; overflow:clip; margin-bottom:0;
  position:relative;
  transition:box-shadow .25s, border-color .25s;
}
.card:hover { border-color:rgba(255,255,255,.1); box-shadow:0 4px 24px rgba(0,0,0,.5); }
.card.pinned { position:sticky; top:0; z-index:50; border-color:rgba(255,180,0,.3); box-shadow:0 4px 16px rgba(0,0,0,.4); }
.card.dragging { opacity:.5; border-color:rgba(255,80,80,.3); }
.card.drag-over { border-color:rgba(255,140,66,.5); box-shadow:0 0 20px rgba(255,140,66,.15); }
.card.widget-long-press {
  border-color: rgba(100, 180, 255, 0.8) !important;
  box-shadow: 0 0 16px rgba(100, 180, 255, 0.4) !important;
  transform: scale(1.02);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  z-index: 60;
}
.card-head {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 10px;
  background:#0e0e13; border-bottom:1px solid #1e1e28;
  cursor:grab; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.card-head:active { cursor:grabbing; }
.card-head-row {
  display:flex; align-items:center; gap:6px; width:100%;
}
.card-head-status {
  display:flex; align-items:center; width:100%;
  font-size:.5rem; color:#555; padding-top:2px; margin-top:2px;
  border-top:1px solid rgba(255,255,255,.04);
}
.card-icon { display:flex; align-items:center; color:#888; }
.card-icon svg { width:14px; height:14px; }
.card-title { font-size:.7rem; font-weight:700; color:#ccc; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-btn svg { width:12px; height:12px; }
.lucide-inline { display:inline-flex; align-items:center; vertical-align:middle; }
.lucide-inline svg { width:1em; height:1em; }
.top-bar-btn svg { width:14px; height:14px; }
.sh-title svg { width:16px; height:16px; stroke:currentColor; }
.sh-title { display:inline-flex; align-items:center; gap:4px; }
.card-btn {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#aaa;
  width:22px; height:22px; min-width:22px; min-height:22px; border-radius:5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; transition:all .2s; font-family:inherit;
  flex-shrink:0;
}
.card-btn.pin-active { background:rgba(255,180,0,.15); border-color:rgba(255,180,0,.3); color:#ffb400; }
.card-btn:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); box-shadow:0 0 6px rgba(255,255,255,.08); }
.card-btn:focus-visible, .top-bar-btn:focus-visible, .modal-action-btn:focus-visible, .modal-close:focus-visible { outline:2px solid rgba(100,180,255,.5); outline-offset:2px; }
.card-body {
  transition:max-height .3s ease, padding .3s ease;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
.card-body.collapsed { max-height:0 !important; padding:0 !important; visibility:hidden; overflow:hidden !important; }

/* When card-body is collapsed, shrink the Muuri item */
.muuri-item .card {
  position:relative;
  z-index:1;
}
.card:has(.card-body.collapsed) {
  flex:0 0 auto !important;
  z-index:10;
}
.card:has(.card-body.collapsed) .card-body {
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden;
}
.card:has(.card-body.collapsed) .card-head {
  border-bottom:none;
}
.card:has(.card-body.collapsed) .card-head-status {
  display:none !important;
}

/* Zoom input in card header */
.zoom-indicator {
  display:inline-flex; align-items:center; gap:2px; margin-left:auto;
  font-size:.55rem; color:#888;
  background:rgba(255,255,255,.06); border-radius:5px; padding:2px 3px;
  min-width:22px; min-height:22px;
}
.zoom-indicator input {
  width:36px; background:transparent; border:none; outline:none;
  color:#aaa; font-size:.55rem; font-family:inherit; text-align:center;
  padding:0;
}
.zoom-indicator input:focus { color:#fff; }
.zoom-indicator span { color:#666; }

/* Push collapse button to far right */
.card-head-row .card-btn:last-of-type { margin-left:4px; }

/* VIDEOS */
.sg { display:flex; flex-wrap:wrap; gap:12px; padding:8px; align-content:flex-start; }
.sc { flex:0 0 calc(33.33% - 8px); min-width:180px; }
@media(max-width:640px){.sc{flex:0 0 100%;}}
/* Stream drag-to-reorder */
.sl { cursor:grab; -webkit-user-select:none; user-select:none; }
.sl:active { cursor:grabbing; }
.sc.stream-dragging { opacity:.4; border-color:rgba(100,180,255,.4); }
.sc.stream-drag-over { border-color:rgba(100,180,255,.6); box-shadow:0 0 12px rgba(100,180,255,.2); }
.sc.stream-drag-over-left { border-left:3px solid rgba(100,180,255,.7); }
.sc.stream-drag-over-right { border-right:3px solid rgba(100,180,255,.7); }
.sc { background:#111116; border:1px solid #2a2a3a; border-radius:8px; overflow:hidden; min-width:0; transition:border-color .15s, box-shadow .15s, opacity .15s; }
.sl {
  display:flex; align-items:center; justify-content:space-between;
  padding:3px 8px; font-size:.6rem; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0; min-height:24px;
}
.sl .cn { display:flex; align-items:center; gap:5px; flex:1; min-width:0; }
.sl .cd { width:5px; height:5px; border-radius:2px; }
.sl .cd.a { background:#ff8f00; }
.sl .cd.j { background:#d4a800; }
.sl .cd.s { background:#c8102e; }
.sl .cd.b { background:#bb1919; }
.sl .ld { display:inline-flex; align-items:center; gap:3px; color:#ff4d4d; font-size:.55rem; flex-shrink:0; }
.sl .ld::before { content:''; width:4px; height:4px; background:#ff4d4d; border-radius:50%; animation:pulse 3.5s ease-in-out infinite; }
.sl .stream-btns { display:flex; align-items:center; gap:3px; margin-left:auto; }
.sl .stream-toggle {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#aaa;
  width:22px; height:22px; min-width:22px; min-height:22px; border-radius:5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; transition:all .2s; font-family:inherit;
  flex-shrink:0;
}
.sl .stream-toggle:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); }
.sl .stream-expand {
  background:rgba(100,180,255,.06); border:1px solid rgba(100,180,255,.2); color:#5aa8e0;
  width:22px; height:22px; min-width:22px; min-height:22px; border-radius:5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; transition:all .2s; font-family:inherit;
  flex-shrink:0;
}
.sl .stream-expand:hover { background:rgba(100,180,255,.18); color:#7cc4ff; border-color:rgba(100,180,255,.45); box-shadow:0 0 6px rgba(100,180,255,.15); }
.sc.sc-expanded .stream-expand { background:rgba(100,180,255,.2); border-color:rgba(100,180,255,.5); color:#7cc4ff; }

/* FOCUS (expanded) layout — fills the widget, everything fits, no scroll.
   The focused tile is a 2x2 block docked top-left; the OTHER tiles shrink
   fluidly to share the remaining space. The grid takes the card body's full
   height (height:100%) and grid-auto-rows:1fr divides it evenly across however
   many rows the streams need, so the whole set fits inside the widget. */
.sg.has-expanded {
  display:grid !important; padding:8px;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:1fr;
  gap:8px;
  height:100%; min-height:0; overflow:hidden;
}
.sg.has-expanded::after { display:none; }
/* in focus mode every tile fills its grid cell (drop the intrinsic 16:9 box) */
.sg.has-expanded .sc {
  margin:0; width:auto; min-width:0; min-height:0;
  display:flex; flex-direction:column; overflow:hidden;
}
.sg.has-expanded .sc .sl { flex-shrink:0; }
.sg.has-expanded .sc .vw {
  flex:1; min-height:0; padding-bottom:0; position:relative; overflow:hidden;
}
.sg.has-expanded .sc .vw iframe { position:absolute; inset:0; width:100%; height:100%; }
.sc.sc-expanded { grid-column:1 / span 2; grid-row:1 / span 2; }
/* narrow widgets / phones: stack and let it scroll rather than crush everything */
@media(max-width:640px){
  .sg.has-expanded { grid-template-columns:1fr; grid-auto-rows:auto; height:auto; overflow:visible; }
  .sg.has-expanded .sc .vw { flex:none; padding-bottom:56.25%; }
  .sc.sc-expanded { grid-column:1; grid-row:auto; }
}

.vw { position:relative; width:100%; padding-bottom:56.25%; overflow:hidden; }
.vw.stream-collapsed { display:none; }
.vw iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* Stream drag-resize handles */
.sc { position:relative; }
.stream-drag-corner {
  width:14px; height:14px; cursor:nwse-resize;
  position:absolute; bottom:0; right:0; z-index:30;
  background:transparent; touch-action:none;
}
.stream-drag-corner::after {
  content:''; position:absolute; bottom:3px; right:3px;
  width:8px; height:8px; border-right:2px solid rgba(255,255,255,.1);
  border-bottom:2px solid rgba(255,255,255,.1);
  transition:border-color .15s;
}
.stream-drag-corner:hover::after,
.stream-drag-corner.dragging::after { border-color:rgba(100,180,255,.5); }
.stream-drag-bottom {
  height:6px; cursor:ns-resize; background:transparent;
  position:absolute; bottom:0; left:0; right:14px; z-index:25;
  touch-action:none;
}
.stream-drag-bottom::after {
  content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  width:30px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.08); transition:background .15s, width .15s;
}
.stream-drag-bottom:hover::after,
.stream-drag-bottom.dragging::after { background:rgba(100,180,255,.5); width:50px; }
.stream-drag-right {
  width:6px; cursor:ew-resize; background:transparent;
  position:absolute; top:0; right:0; bottom:14px; z-index:25;
  touch-action:none;
}
.stream-drag-right::after {
  content:''; position:absolute; right:1px; top:50%; transform:translateY(-50%);
  width:2px; height:20px; border-radius:2px;
  background:rgba(255,255,255,.08); transition:background .15s, height .15s;
}
.stream-drag-right:hover::after,
.stream-drag-right.dragging::after { background:rgba(100,180,255,.5); height:35px; }
@media(pointer:coarse){
  .stream-drag-corner { width:28px; height:28px; }
  .stream-drag-corner::after { width:12px; height:12px; bottom:5px; right:5px; }
  .stream-drag-bottom { height:14px; right:28px; }
  .stream-drag-bottom::after { height:3px; width:50px; }
  .stream-drag-right { width:14px; bottom:28px; }
  .stream-drag-right::after { width:3px; height:34px; }
}
/* When stream has custom height via drag, disable aspect-ratio padding */
.vw.custom-height { padding-bottom:0 !important; }
.vw.custom-height iframe { position:relative; width:100%; height:100%; }

/* STREAM LAYOUT ENGINE (Pretext-inspired) */
.sg.engine-active {
  position:relative !important;
  display:block !important;
  overflow-y:hidden !important;
  padding:0 !important;
  flex:1 1 0 !important;
  min-height:0 !important;
}
.sg.engine-active .sc {
  position:absolute !important;
  flex:none !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:6px;
  transition: transform 0.4s cubic-bezier(0.25,0.1,0.25,1),
              width 0.4s cubic-bezier(0.25,0.1,0.25,1),
              height 0.4s cubic-bezier(0.25,0.1,0.25,1),
              opacity 0.3s ease;
  will-change:transform,width,height;
}
.sg.engine-active .sc .sl { flex-shrink:0 !important; }
.sg.engine-active .sc .vw {
  flex:1 1 0 !important;
  padding-bottom:0 !important;
  position:relative !important;
  min-height:0 !important;
  height:auto !important;
}
.sg.engine-active .sc .vw iframe {
  position:absolute !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important;
}
.sg.engine-active .sc .vw.custom-height {
  padding-bottom:0 !important;
  height:auto !important;
}
.sg.engine-active .sc .vw.stream-collapsed {
  display:none !important;
  flex:0 !important;
}
/* Hide drag-resize handles in engine mode */
.sg.engine-active .stream-drag-corner,
.sg.engine-active .stream-drag-bottom,
.sg.engine-active .stream-drag-right { display:none !important; }
/* Engine toggle button active state */
.card-btn.grid-lock-active {
  background:rgba(100,180,255,.2) !important;
  border-color:rgba(100,180,255,.5) !important;
  color:#7cc4ff !important;
}

/* Lazy-load placeholders */
.stream-placeholder {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#111116; color:#555; cursor:pointer; gap:8px;
  transition:background .2s, color .2s;
}
.stream-placeholder:hover { background:#1a1a22; color:#bbb; }
.stream-placeholder .sp-icon { font-size:1.6rem; opacity:.5; }
.stream-placeholder .sp-label { font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; }
.map-placeholder {
  width:100%; height:clamp(250px, 50vh, 550px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#111116; color:#555; cursor:pointer; gap:8px; border:none;
  transition:background .2s, color .2s;
}
.map-placeholder:hover { background:#1a1a22; color:#bbb; }
.map-placeholder .sp-icon { font-size:1.6rem; opacity:.5; }
.map-placeholder .sp-label { font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; }

/* LIVEUAMAP */
.map-frame { width:100%; flex:1; min-height:250px; border:none; touch-action:auto; pointer-events:auto; }
#body-card-map { overflow:hidden; touch-action:auto; }
#body-card-map .map-frame { position:relative; z-index:5; }

/* TOP BAR BUTTONS */
.top-bar-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:8px; font-size:.6rem; font-weight:600;
  border:1px solid rgba(255,200,0,.3); background:rgba(255,200,0,.08); color:#ffd700;
  cursor:pointer; font-family:inherit; transition:all .2s; text-decoration:none;
}
.top-bar-btn:hover { background:rgba(255,200,0,.18); border-color:rgba(255,200,0,.5); box-shadow:0 0 12px rgba(255,200,0,.1); }
.top-bar-btn.alerts-btn { border-color:rgba(100,180,255,.3); background:rgba(100,180,255,.08); color:#7cc4ff; }
.top-bar-btn.alerts-btn:hover { background:rgba(100,180,255,.18); border-color:rgba(100,180,255,.5); box-shadow:0 0 12px rgba(100,180,255,.1); }
.top-bar-btn.layout-btn { border-color:rgba(160,130,255,.3); background:rgba(160,130,255,.08); color:#b89fff; }
.top-bar-btn.layout-btn:hover { background:rgba(160,130,255,.18); border-color:rgba(160,130,255,.5); box-shadow:0 0 12px rgba(160,130,255,.1); }

/* NEWS — scaled up for 50% zoom */
.nt {
  display:flex; overflow-x:auto; border-bottom:1px solid #1e1e28;
  background:#0c0c11; scrollbar-width:none;
}
.nt::-webkit-scrollbar { display:none; }
.nb {
  padding:10px 16px; font-size:1.1rem; font-weight:600; color:#777;
  border:none; background:none; cursor:pointer; transition:all .2s;
  position:relative; font-family:inherit; white-space:nowrap; flex-shrink:0;
}
.nb:hover { color:#ccc; }
.nb.active { color:#fff; }
.nb.active::after {
  content:''; position:absolute; bottom:0; left:6px; right:6px; height:3px;
  border-radius:2px 2px 0 0; background:linear-gradient(90deg,#ff4d4d,#ff8c42);
}
.nb .tc { font-size:.9rem; background:rgba(255,255,255,.08); padding:2px 5px; border-radius:4px; margin-left:3px; color:#999; }
.nb.active .tc { background:rgba(255,80,80,.2); color:#ff8c42; }
.nb .td { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.nf {
  padding:10px; display:flex; flex-direction:column;
  gap:8px; flex:1; min-height:0; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
.nf::-webkit-scrollbar { width:4px; }
.nf::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }
.nc {
  display:flex; gap:10px; padding:10px; background:#16161c;
  border:1px solid #1e1e28; border-radius:8px;
  transition:all .2s; cursor:pointer; text-decoration:none; color:inherit;
}
.nc:hover { border-color:#2a2a38; background:#1a1a22; transform:translateY(-1px); }
.nc-t { width:90px; height:65px; border-radius:6px; object-fit:cover; flex-shrink:0; background:rgba(255,255,255,.05); }
.nc-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.nc-h {
  font-size:1.2rem; font-weight:600; line-height:1.35; color:#e0e0e0;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.nc-m { display:flex; align-items:center; gap:6px; font-size:1rem; color:#777; flex-wrap:wrap; }
.nc-s { padding:2px 5px; border-radius:4px; font-weight:600; font-size:.9rem; text-transform:uppercase; }
.fresh { font-size:.85rem; background:rgba(0,200,80,.15); color:#4caf50; padding:2px 5px; border-radius:3px; font-weight:700; }
.hgcc-blurb { font-size:.95rem; line-height:1.4; color:#9a9aa8; margin:4px 0 6px; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hgcc-tag { font-size:.85rem; color:#888; background:rgba(255,255,255,.05); padding:2px 6px; border-radius:4px; font-weight:500; }
.nl { padding:24px; text-align:center; color:#666; font-size:1.2rem; grid-column:1/-1; }
.nl .sp {
  width:20px; height:20px; border:2px solid rgba(255,255,255,.1);
  border-top-color:#ff4d4d; border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 8px;
}
@keyframes spin { to{transform:rotate(360deg)} }
.nr {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-top:1px solid rgba(255,255,255,.06); font-size:1rem; color:#555;
}
.rb {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:#aaa; padding:4px 10px; border-radius:5px; font-size:1rem;
  cursor:pointer; transition:all .2s; font-family:inherit;
}
.rb:hover { background:rgba(255,255,255,.1); color:#fff; }

/* REDDIT PULSE — scaled up for 50% zoom */
.r-tabs { display:flex; gap:6px; flex-wrap:wrap; padding:8px 12px; }
.r-tab {
  padding:5px 12px; font-size:1rem; font-weight:600; color:#888;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:6px; cursor:pointer; transition:all .2s; font-family:inherit;
}
.r-tab:hover { background:rgba(255,255,255,.08); color:#ccc; }
.r-tab.active { background:rgba(255,69,0,.12); border-color:rgba(255,69,0,.3); color:#ff4500; }
#r-feed {
  flex:1; min-height:0; overflow-y:auto; padding:6px 12px 10px; display:flex; flex-direction:column; gap:7px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
#r-feed::-webkit-scrollbar { width:4px; }
#r-feed::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }
.r-post {
  display:block; text-decoration:none; color:inherit;
  padding:10px 12px; background:#16161c;
  border:1px solid #1e1e28; border-radius:8px;
  transition:all .2s;
}
.r-post:hover { background:#1a1a22; border-color:#2a2a38; transform:translateY(-1px); }
.r-post-title {
  font-size:1.15rem; font-weight:600; color:#e0e0e0; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.r-post-meta {
  display:flex; align-items:center; gap:8px; margin-top:4px;
  font-size:.95rem; color:#666;
}
.r-post-sub {
  padding:2px 6px; border-radius:4px; font-weight:600;
  background:rgba(255,69,0,.12); color:#ff6030;
}
.r-post-score { color:#ff4500; font-weight:600; }
.r-post-comments { color:#888; }
.r-post-thumb {
  width:100%; height:100px; object-fit:cover; border-radius:6px; margin-bottom:5px;
}
.r-loading { text-align:center; color:#555; font-size:1.1rem; padding:20px; }

/* GLOBAL MARKETS (TradingView) */
#body-card-markets { display:flex; flex-direction:column; overflow-y:auto; flex:1; min-height:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent; }
#body-card-markets::-webkit-scrollbar { width:5px; }
#body-card-markets::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:5px; }
.market-widget-container { width:100%; height:420px; flex-shrink:0; position:relative; }
.market-widget-container iframe { width:100%; height:100%; border:none; }
/* Ticker Tape */
.market-ticker-tape { width:100%; height:46px; overflow:hidden; flex-shrink:0; border-bottom:1px solid #1e1e28; }
.market-ticker-tape iframe { width:100%; height:100%; border:none; }
/* Section labels */
.market-section-label {
  padding:8px 14px 4px; font-size:.75rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.45); flex-shrink:0;
  border-top:1px solid #1e1e28;
}
/* Heatmap */
.market-heatmap-container { width:100%; min-height:500px; position:relative; flex-shrink:0; }
.market-heatmap-container iframe { width:100%; height:100%; border:none; }

/* Live header: pulsing dot, last-updated time, manual refresh */
.market-header {
  display:flex; align-items:center; gap:10px;
  padding:6px 12px; flex-shrink:0;
  position:sticky; top:0; z-index:3;
  background:#0d0d12; border-bottom:1px solid #1e1e28;
}
.market-live {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#46d369;
}
.market-live-dot {
  width:7px; height:7px; border-radius:50%; background:#46d369;
  animation:marketPulse 2s infinite;
}
@keyframes marketPulse {
  0% { box-shadow:0 0 0 0 rgba(70,211,105,.5); }
  70% { box-shadow:0 0 0 6px rgba(70,211,105,0); }
  100% { box-shadow:0 0 0 0 rgba(70,211,105,0); }
}
.market-updated { font-size:.6rem; color:#888; }
.market-refresh {
  margin-left:auto; width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid #2a2a36; color:#aaa; border-radius:6px; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.market-refresh:hover { color:#fff; border-color:#3a3a4a; }
.market-refresh svg { width:14px; height:14px; }
.market-refresh.spinning svg { animation:marketSpin .8s linear; }
@keyframes marketSpin { to { transform:rotate(360deg); } }

/* Widget sections (fixed heights so the card scrolls cleanly through them) */
.market-content { display:flex; flex-direction:column; flex-shrink:0; }
.market-section { width:100%; flex-shrink:0; position:relative; }
.market-section iframe { width:100%; height:100%; border:none; }
.market-h-cal { height:360px; }
.market-h-forex { height:340px; }
/* Top Stories feed (custom, popup-opening links) */
.market-news-feed {
  height:380px; overflow-y:auto; padding:6px 8px;
  display:flex; flex-direction:column; gap:6px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.08) transparent;
}
.market-news-feed::-webkit-scrollbar { width:5px; }
.market-news-feed::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:5px; }
.market-news-feed .nl { color:#777; font-size:.8rem; text-align:center; padding:16px; }

.market-placeholder {
  width:100%; height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#111116; color:#555; cursor:pointer; gap:8px; border:none;
  transition:background .2s, color .2s;
}
.market-placeholder:hover { background:#1a1a22; color:#bbb; }
.market-placeholder .sp-icon { font-size:1.6rem; opacity:.5; }
.market-placeholder .sp-label { font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; }

/* MOBILE OPTIMIZATION */
@media(max-width:768px){
  html { overflow-x:hidden; }
  html, body { height:auto; overflow:auto; }
  body { overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom, 0px); }

  /* ── Infinite vertical canvas: cards stack, page scrolls down ── */
  .dashboard { padding:0; overflow:visible; overflow-x:hidden; }
  .muuri-grid {
    position:static;
    min-width:unset;
    min-height:unset;
    display:flex;
    flex-direction:column;
  }
  .muuri-item {
    position:static !important;
    transform:none !important;
    padding:4px;
    width:100vw !important;
    max-width:100vw;
    /* Each card fills the viewport so one card is visible at a time */
    height:calc(100svh - 64px);
    height:calc(100vh - 64px); /* fallback for browsers without svh */
  }
  .muuri-item .card { height:100%; max-height:100%; }
  .muuri-item .card .card-body { max-height:none; flex:1; overscroll-behavior-y:auto; }
  /* Disable sticky hover glow on touch */
  .card:hover { border-color:#1e1e28; box-shadow:none; }

  /* ── Top bar: icon-only buttons (keep visible, hide text) ── */
  .live-badge { display:none; }
  .top-bar-btn { display:inline-flex !important; font-size:0; padding:5px 8px; gap:0; }
  .top-bar-btn svg { width:16px; height:16px; }
  #kw-badge { font-size:.6rem !important; }

  /* ── Ticker ── */
  .tk-l { display:none; }
  .tk-i { font-size:.55rem; }

  /* ── Stream grid ── */
  .sg {
    display:grid !important;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    align-items:start;
    gap:10px;
    padding:8px 8px 16px;
    height:auto !important;
  }
  /* JS desktop layout writes inline position/size on tiles — neutralize on mobile
     so every stream is a full-width 16:9 tile with usable YouTube controls */
  .sc { position:static !important; float:none !important; left:auto !important; top:auto !important;
        width:auto !important; height:auto !important; opacity:1 !important; pointer-events:auto !important; }
  .vw { height:auto !important; }
  .vw iframe { pointer-events:auto !important; }
  .sc.sc-expanded { float:none; width:100%; margin-right:0; }
  .sg.has-expanded .sc:not(.sc-expanded) { width:100%; display:block; }
  .sl { padding:6px 8px; }
  .sl .cn { font-size:.68rem; }
  .map-frame { min-height:150px; width:100%; }

  /* ── News ── */
  .nc-t { width:60px; height:45px; }
  .nc-h { font-size:.9rem; }
  .nc-m { font-size:.8rem; }
  .nb { padding:8px 10px; font-size:.95rem; }
  .nf { padding:6px; overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* ── Reddit ── */
  .r-tabs { padding:6px 8px; gap:4px; }
  .r-tab { padding:4px 8px; font-size:.9rem; }
  .r-post { padding:8px 10px; }
  .r-post-title { font-size:1rem; }
  .r-post-meta { font-size:.85rem; }
  #r-feed { overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* ── Touch-friendly button sizes ── */
  .card-btn,
  .sl .stream-toggle,
  .sl .stream-expand { width:28px; height:28px; min-width:28px; min-height:28px; }
  .zoom-indicator { min-width:28px; min-height:28px; }
  .card-title { font-size:.65rem; }
  .nb .tc { font-size:.8rem; }
}

@media(max-width:480px){
  .sh-title { font-size:.8rem; }
  .sg { grid-template-columns:1fr; }
  .card-btn,
  .sl .stream-toggle,
  .sl .stream-expand { width:32px; height:32px; min-width:32px; min-height:32px; }
  .zoom-indicator { min-width:32px; min-height:32px; }
}

/* ============================================================
   KEYWORD ALERTS & LAYOUT MODALS
   ============================================================ */

/* Modal overlay */
.modal-overlay {
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;
  background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal-box {
  background:#131318; border:1px solid #2a2a3a; border-radius:12px;
  width:min(480px, 100%); max-height:80vh; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.85);
}
.modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #1e1e28;
  font-size:.8rem; font-weight:700; color:#ccc; flex-shrink:0;
}
.modal-close {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#777; width:24px; height:24px; border-radius:5px; cursor:pointer;
  font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.modal-close:hover { background:rgba(255,80,80,.15); border-color:rgba(255,80,80,.3); color:#ff6666; }
.modal-body { padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.modal-hint { font-size:.7rem; color:#666; line-height:1.5; }
.modal-divider { border:none; border-top:1px solid #1e1e28; margin:2px 0; }
.modal-notif-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:.7rem; color:#666; padding:6px 10px;
  background:rgba(255,255,255,.03); border-radius:6px; border:1px solid #1e1e28;
}

/* Keyword list */
#kw-list { display:flex; flex-direction:column; gap:6px; }
.kw-item {
  display:flex; align-items:center; justify-content:space-between;
  background:#1a1a22; border:1px solid #2a2a38; border-radius:6px;
  padding:7px 10px; font-size:.75rem; color:#ccc;
}
.kw-item-text { display:flex; align-items:center; gap:6px; }
.kw-item-dot { width:6px; height:6px; border-radius:50%; background:#7cc4ff; flex-shrink:0; }
.kw-remove {
  background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.2); color:#ff6666;
  width:20px; height:20px; border-radius:4px; cursor:pointer; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.kw-remove:hover { background:rgba(255,80,80,.2); }
.kw-empty { font-size:.72rem; color:#555; text-align:center; padding:14px 0; font-style:italic; }

/* Add row (shared by keyword and layout) */
.kw-add-row { display:flex; gap:8px; }
.modal-input {
  flex:1; background:#0e0e13; border:1px solid #2a2a3a; border-radius:6px;
  color:#e0e0e0; padding:7px 10px; font-size:.75rem; font-family:inherit; outline:none;
  transition:border-color .2s;
}
.modal-input:focus { border-color:rgba(100,180,255,.4); }
.modal-input[readonly] { color:#aaa; cursor:text; }
.modal-btn, .modal-action-btn {
  background:rgba(100,180,255,.1); border:1px solid rgba(100,180,255,.3); color:#7cc4ff;
  padding:7px 14px; border-radius:6px; cursor:pointer; font-size:.75rem;
  font-family:inherit; transition:all .2s; white-space:nowrap; flex-shrink:0;
  display:inline-flex; align-items:center; gap:5px;
}
.modal-btn:hover, .modal-action-btn:hover { background:rgba(100,180,255,.2); border-color:rgba(100,180,255,.5); }
.modal-btn.danger { background:rgba(255,80,80,.08); border-color:rgba(255,80,80,.25); color:#ff6666; }
.modal-btn.danger:hover { background:rgba(255,80,80,.18); }
.modal-btn.full { width:100%; justify-content:center; padding:10px 14px; }

/* Keyword badge on alert button */
.kw-badge {
  background:rgba(255,80,80,.2); border:1px solid rgba(255,80,80,.35); color:#ff7070;
  padding:1px 5px; border-radius:4px; font-size:.55rem; font-weight:700; margin-left:2px;
}

/* Alert banners container (bottom-right) */
.alert-container {
  position:fixed; bottom:20px; right:20px; z-index:900;
  display:flex; flex-direction:column-reverse; gap:8px;
  max-width:380px; pointer-events:none;
}
.kw-alert {
  background:#151520; border:1px solid rgba(255,200,60,.35);
  border-radius:9px; padding:10px 12px;
  box-shadow:0 6px 24px rgba(0,0,0,.7);
  animation:alertSlideIn .3s cubic-bezier(0.2,0,0,1);
  pointer-events:auto;
}
@keyframes alertSlideIn { from{transform:translateX(110%);opacity:0} to{transform:none;opacity:1} }
.kw-alert-inner { display:flex; align-items:flex-start; gap:8px; }
.kw-alert-kw {
  background:rgba(255,200,60,.12); border:1px solid rgba(255,200,60,.3); color:#ffd54f;
  padding:2px 6px; border-radius:4px; font-size:.6rem; font-weight:700;
  flex-shrink:0; margin-top:1px; white-space:nowrap;
}
.kw-alert-title {
  flex:1; font-size:.72rem; color:#e0e0e0; text-decoration:none; line-height:1.4;
}
.kw-alert-title:hover { color:#fff; text-decoration:underline; }
.kw-alert-dismiss {
  background:none; border:none; color:#555; cursor:pointer;
  font-size:1rem; line-height:1; flex-shrink:0; padding:0 2px;
  transition:color .15s;
}
.kw-alert-dismiss:hover { color:#ccc; }

/* Layout share result */
#layout-share-result { display:flex; flex-direction:column; gap:8px; }
.layout-copy-row { display:flex; gap:8px; }
.layout-success { font-size:.7rem; color:#4caf50; }

/* IPTV widget */
.iptv-wrap { flex:1; display:flex; min-height:0; position:relative; }
.iptv-wrap iframe {
  flex:1; width:100%; height:100%; border:0; border-radius:8px;
  background:#000;
}
.iptv-offline {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:#888; text-align:center; padding:20px;
}
.iptv-offline .sp-icon { font-size:2rem; }
.iptv-offline .sp-icon svg { width:34px; height:34px; color:#8b94a7; }
.iptv-offline .sp-label { font-size:.9rem; font-weight:600; color:#aaa; }
.iptv-hint { font-size:.72rem; color:#666; }
.iptv-hint code {
  background:#0d0d15; border:1px solid #2a2a3a; border-radius:4px;
  padding:1px 5px; color:#b89fff; font-size:.7rem;
}

/* ============================================================
   TV MODE — 10-foot remote-friendly layout for the whole dashboard
   ============================================================ */
body.tv-mode .dashboard { overflow:auto; cursor:default; }
body.tv-mode .muuri-grid {
  position:static !important; min-width:unset !important; min-height:unset !important;
  display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px 0 80px;
}
body.tv-mode .muuri-item {
  position:static !important; transform:none !important;
  left:auto !important; top:auto !important;
  width:min(1500px, 94vw) !important; max-width:94vw;
  height:80vh; padding:0;
}
body.tv-mode .muuri-item .card { height:100%; max-height:100%; }
body.tv-mode .muuri-item .card .card-body { flex:1; }
/* enlarge text for 10-foot viewing (Tizen/webOS browsers are Chromium → zoom works) */
body.tv-mode .card-title { font-size:1.4rem; }
body.tv-mode .card-head { padding-top:10px; padding-bottom:10px; }
body.tv-mode .nf, body.tv-mode #r-feed, body.tv-mode #hgcc-feed,
body.tv-mode .card-body .sg { zoom:1.25; }
/* hide desktop-only affordances */
body.tv-mode .widget-resize-handle,
body.tv-mode #grid-lock-btn { display:none !important; }

/* focus ring on the highlighted widget */
body.tv-mode .muuri-item.tv-focus .card {
  outline:5px solid #4f8cff;
  outline-offset:-2px;
  box-shadow:0 0 0 8px rgba(79,140,255,.35), 0 12px 40px rgba(0,0,0,.6);
}

/* a widget zoomed to fullscreen */
body.tv-zoomed .muuri-item:not(.tv-zoom) { display:none !important; }
body.tv-mode .muuri-item.tv-zoom {
  position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100vw !important; height:100vh !important; max-width:none; z-index:60; padding:0;
}
body.tv-mode .muuri-item.tv-zoom .card { border-radius:0; }
body.tv-mode .muuri-item.tv-zoom .card-body { zoom:1.35; }
body.tv-mode .muuri-item.tv-zoom[data-card-id="card-iptv"] .card-body,
body.tv-mode .muuri-item.tv-zoom[data-card-id="card-streams"] .card-body { zoom:1; }

/* The IPTV app is an iframe with no intrinsic height, so in TV mode its widget
   collapses shorter than the others. Give it the full viewport and force the
   whole flex chain (card -> body -> wrap -> iframe) to fill it. */
body.tv-mode .muuri-item[data-card-id="card-iptv"] { height:100vh !important; }
body.tv-mode .muuri-item[data-card-id="card-iptv"] .muuri-item-content,
body.tv-mode .muuri-item[data-card-id="card-iptv"] .card { height:100% !important; max-height:100% !important; min-height:0 !important; }
body.tv-mode .muuri-item[data-card-id="card-iptv"] .card-body,
body.tv-mode .muuri-item[data-card-id="card-iptv"] .iptv-wrap { flex:1 1 auto !important; min-height:0 !important; display:flex !important; }
body.tv-mode .muuri-item[data-card-id="card-iptv"] .iptv-wrap iframe { flex:1 1 auto !important; height:100% !important; width:100% !important; min-height:0 !important; border:0 !important; }

/* TV remote hint bar */
#tv-hint {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  display:flex; gap:24px; align-items:center; padding:12px 26px;
  background:rgba(15,18,26,.95); border:1px solid #2a3346; border-radius:999px;
  box-shadow:0 10px 36px rgba(0,0,0,.6); font-size:15px; color:#e6e9ef;
  z-index:80; opacity:0; pointer-events:none; white-space:nowrap;
  transition:opacity .25s, transform .25s;
}
#tv-hint.show { opacity:1; transform:translateX(-50%) translateY(0); }
#tv-hint b { color:#4f8cff; }
.top-bar-btn.tv-on { background:rgba(79,140,255,.22); border-color:#4f8cff; color:#fff; }

/* ============================================================
   PRODUCTION POLISH — micro-interactions & accessibility layer
   ============================================================ */
.card { transition:border-color .18s ease, box-shadow .18s ease; }
.card:hover { border-color:rgba(120,160,255,.18); box-shadow:0 10px 32px rgba(0,0,0,.45); }
.card-btn, .top-bar-btn, .modal-action-btn, .stream-toggle, .stream-expand {
  transition:background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease;
}
.top-bar-btn:active, .card-btn:active, .modal-action-btn:active { transform:scale(.96); }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline:2px solid rgba(100,160,255,.7); outline-offset:2px; border-radius:4px;
}
::selection { background:rgba(100,160,255,.35); }
.modal-box { box-shadow:0 24px 80px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   MOBILE TOUCH RAIL + STREAM MUTE CONTROLS
   ============================================================ */
.sl .stream-mute {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; min-width:24px; flex-shrink:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:5px; color:#bbb; cursor:pointer; padding:0;
  transition:background .14s, color .14s, border-color .14s;
}
.sl .stream-mute svg { width:13px; height:13px; }
.sl .stream-mute:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); }
.sl .stream-mute.is-live-audio { color:#6ef0a8; border-color:rgba(110,240,168,.4); background:rgba(110,240,168,.1); }
@media(pointer:coarse){
  .sl .stream-mute, .sl .stream-toggle, .sl .stream-expand {
    width:34px; height:34px; min-width:34px; min-height:34px;
  }
  .sl .stream-mute svg { width:17px; height:17px; }
}
@media(max-width:768px) and (orientation:landscape){
  .sg { grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:768px){
  #touch-rail {
    position:fixed; top:52px; right:0; bottom:14px; width:30px;
    z-index:200; display:none; opacity:.45; transition:opacity .25s;
    touch-action:none;
  }
  #touch-rail.active { opacity:1; }
  #touch-rail::before {
    content:''; position:absolute; top:0; bottom:0; right:12px; width:5px;
    border-radius:4px; background:rgba(255,255,255,.08);
  }
  #touch-rail-thumb {
    position:absolute; right:5px; width:19px; min-height:52px;
    border-radius:10px;
    background:linear-gradient(180deg, #5a8dee, #7c64f0);
    box-shadow:0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.25);
  }
}