:root {
      --bg:          #070809;
      --surface:     #101318;
      --panel:       rgba(255,255,255,0.052);
      --panel-mid:   rgba(255,255,255,0.074);
      --panel-hover: rgba(255,255,255,0.092);
      --panel-solid: #14171c;
      --line:        rgba(255,255,255,0.105);
      --line-hi:     rgba(239,249,35,0.32);
      --line-strong: rgba(255,255,255,0.18);
      --text:        #f5f7fb;
      --text-dim:    #cbd3df;
      --dim:         #b8c2d0;
      --muted:       #9ba6b5;
      --accent:      #eff923;
      --accent-dim:  rgba(239,249,35,0.10);
      --accent-glow: rgba(239,249,35,0.28);
      --red:         #ef4444;
      --green:       #22c55e;
      --cyan:        #00bcd4;
      --orange:      #ff9f43;
      --gold:        #ffd700;
      --silver:      #c0c8d4;
      --bronze:      #cd7f32;
      --am:          #e8354a;
      --eu:          #4da3ff;
      --apac:        #22c55e;
      --asia:        #f5c518;
      --r:           6px;
      --r-sm:        3px;
      --ease:        cubic-bezier(.4,0,.2,1);
      --fd: 'Barlow Condensed', sans-serif;
      --fb: 'Barlow', sans-serif;
      --fm: 'JetBrains Mono', monospace;
      --topbar-h:    72px;
    }

    *, *::before, *::after { box-sizing:border-box; }
    body {
      margin:0;
      height:100vh;
      background:
        radial-gradient(ellipse at 18% 0%, rgba(239,249,35,0.045), transparent 34%),
        linear-gradient(180deg, #0b0c0e 0%, var(--bg) 48%, #040405 100%);
      color:var(--text);
      font-family:var(--fb);
      font-size:14px;
      line-height:1.5;
      overflow:hidden;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:geometricPrecision;
    }
    body::after {
      content:'';
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:9999;
      opacity:0.025;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    a { color:inherit; text-decoration:none; }
    button, input, select { font:inherit; }

    .topbar {
      position:sticky;
      top:0;
      z-index:200;
      height:var(--topbar-h);
      display:flex;
      align-items:center;
      gap:28px;
      padding:0 36px;
      border-bottom:1px solid var(--line);
      background:#06080b;
      overflow:hidden;
    }
    @keyframes shimmer { 0%{background-position:-100% 0} 100%{background-position:200% 0} }
    .topbar::after {
      content:'';
      position:absolute;
      right:0;
      bottom:0;
      left:0;
      height:1px;
      background:linear-gradient(90deg, transparent, var(--accent), transparent);
      background-size:200% 100%;
      animation:shimmer 5s ease-in-out infinite;
      opacity:0.35;
    }
    .brand {
      display:flex;
      align-items:center;
      gap:8px;
      font-family:var(--fd);
      font-size:34px;
      line-height:1;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:0;
      word-spacing:-0.08em;
      color:var(--text);
      flex-shrink:0;
      text-decoration:none;
      white-space:nowrap;
      padding-right:26px;
      border-right:1px solid rgba(255,255,255,0.08);
    }
    .brand-wordmark { color:inherit; text-shadow:none; }
    .brand .brand-initial { color:var(--accent); }
    .nav-primary {
      display:flex;
      gap:0;
      flex:1;
      overflow-x:auto;
      scrollbar-width:none;
      min-width:0;
      align-items:center;
    }
    .nav-primary::-webkit-scrollbar { display:none; }
    .nav-primary a {
      display:flex;
      align-items:center;
      height:var(--topbar-h);
      padding:0 20px;
      color:rgba(255,255,255,0.58);
      font-family:var(--fd);
      font-size:14px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:0.14em;
      white-space:nowrap;
      text-decoration:none;
      transition:color .16s var(--ease);
    }
    .nav-primary a:hover { color:var(--text); }
    .nav-primary a.active { color:var(--accent); }

    .app {
      height:calc(100vh - var(--topbar-h));
      display:grid;
      grid-template-columns:252px minmax(0, 1fr);
      min-height:0;
      transition:grid-template-columns .18s var(--ease);
    }
    .app.panel-collapsed {
      grid-template-columns:36px minmax(0, 1fr);
    }

    .control-panel {
      border-right:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(20,23,28,0.96), rgba(9,10,12,0.98)),
        var(--surface);
      box-shadow:inset -1px 0 0 rgba(239,249,35,0.035);
      min-height:0;
      overflow:auto;
      padding:12px;
      scrollbar-width:thin;
      scrollbar-color:rgba(239,249,35,0.25) rgba(255,255,255,0.04);
    }
    .control-panel::-webkit-scrollbar { width:4px; }
    .control-panel::-webkit-scrollbar-track { background:rgba(255,255,255,0.04); }
    .control-panel::-webkit-scrollbar-thumb { background:rgba(239,249,35,0.25); border-radius:999px; }
    .panel-toggle {
      width:100%;
      min-height:34px;
      display:grid;
      place-items:center;
      margin-bottom:10px;
      border:1px solid var(--line);
      border-radius:var(--r);
      background:var(--panel);
      color:var(--text);
      cursor:pointer;
      font-family:var(--fd);
      font-size:14px;
      font-weight:900;
    }
    .panel-toggle:hover {
      color:var(--accent);
      border-color:rgba(239,249,35,0.45);
    }    .app.panel-collapsed .control-panel {
      overflow:hidden;
      padding:8px 5px;
    }
    .app.panel-collapsed .panel-section {
      display:none;
    }
    .app.panel-collapsed .panel-toggle {
      min-height:36px;
      margin-bottom:0;
    }    .app.panel-collapsed .wall-shell {
      padding:8px 10px;
    }
    .panel-section {
      border:1px solid var(--line);
      border-radius:var(--r);
      background:linear-gradient(180deg, rgba(255,255,255,0.064), rgba(255,255,255,0.032));
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
      padding:11px;
      margin-bottom:10px;
    }
    .section-title {
      display:flex;
      align-items:center;
      gap:8px;
      margin:0 0 10px;
      color:#d7deea;
      font-family:var(--fd);
      font-size:10.5px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }
    .section-title::before {
      content:'';
      flex-shrink:0;
      width:3px;
      height:13px;
      background:var(--accent);
      border-radius:2px;
      box-shadow:0 0 8px rgba(239,249,35,0.55);
    }
    .form-grid { display:grid; gap:7px; }
    .field label {
      display:block;
      margin-bottom:4px;
      color:#b9c3d1;
      font-family:var(--fd);
      font-size:9.5px;
      font-weight:800;
      letter-spacing:.07em;
      text-transform:uppercase;
    }
    .field input,
    .field select {
      width:100%;
      min-height:30px;
      border:1px solid var(--line);
      border-radius:4px;
      background:#0b0d11;
      color:var(--text);
      padding:0 9px;
      outline:none;
      font-size:12px;
      font-weight:600;
    }
    .field input:focus,
    .field select:focus { border-color:rgba(239,249,35,0.45); }

    .btn-row { display:flex; gap:6px; flex-wrap:wrap; }
    .view-mode-row {
      display:grid;
      grid-template-columns:.78fr .88fr 1.34fr;
      gap:4px;
      width:100%;
    }
    .btn {
      border:1px solid var(--line);
      border-radius:4px;
      background:var(--panel-mid);
      color:var(--text-dim);
      min-height:30px;
      padding:0 10px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-family:var(--fd);
      font-size:10.5px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.06em;
    }
    .view-mode-row .btn {
      min-width:0;
      padding:0 3px;
      font-size:8.8px;
      letter-spacing:.015em;
      line-height:1;
      white-space:nowrap;
      overflow:hidden;
    }
    .btn:hover { color:var(--text); border-color:var(--line-hi); background:var(--panel-hover); }
    .btn.primary {
      color:#080900;
      border-color:var(--accent);
      background:var(--accent);
    }
    .btn.active {
      color:var(--accent);
      border-color:rgba(239,249,35,0.38);
      background:var(--accent-dim);
    }
    .btn.full {
      width:100%;
      margin-top:9px;
    }

    .channel-list {
      display:grid;
      gap:6px;
    }
    .focus-layout-section {
      display:none;
    }
    .mode-focus .focus-layout-section {
      display:block;
    }
    /* Add Channel form swap: wall slot vs focus slot picker per mode */
    .field-focus-slot { display:none; }
    .mode-focus .field-wall-slot { display:none; }
    .mode-focus .field-focus-slot { display:block; }
    .focus-layout-list {
      display:grid;
      gap:7px;
    }
    .focus-layout-item {
      display:grid;
      grid-template-columns:minmax(0,1fr) 112px;
      gap:8px;
      align-items:center;
      border:1px solid var(--line);
      border-radius:4px;
      padding:6px;
      background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.036));
    }
    .focus-layout-item.hidden-slot {
      opacity:.62;
    }
    .focus-layout-name {
      color:var(--text);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .focus-layout-meta {
      margin-top:3px;
      color:var(--dim);
      font-family:var(--fd);
      font-size:9.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.055em;
    }
    .focus-layout-item select {
      width:100%;
      min-height:30px;
      border:1px solid var(--line);
      border-radius:4px;
      background:#0b0d11;
      color:var(--text);
      padding:0 8px;
      outline:none;
      font-size:11px;
      font-weight:700;
    }
    .focus-layout-item select:focus {
      border-color:rgba(239,249,35,0.45);
    }
    .channel-item {
      display:grid;
      grid-template-columns:1fr auto;
      gap:6px;
      align-items:center;
      border:1px solid var(--line);
      border-radius:4px;
      padding:4px;
      background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.036));
      transition:border-color .18s var(--ease), background .18s var(--ease);
    }
    .channel-item:hover { border-color:var(--line-hi); background:var(--panel-hover); }
    .channel-name {
      color:var(--text);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .channel-meta {
      margin-top:3px;
      color:var(--dim);
      font-family:var(--fd);
      font-size:9.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.055em;
    }
    .panel-section > .channel-meta {
      margin-top:-2px;
      color:var(--text-dim);
      font-family:var(--fb);
      font-size:11.5px;
      font-weight:600;
      line-height:1.35;
      text-transform:none;
      letter-spacing:0;
    }
    .icon-btn {
      width:24px;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--line);
      border-radius:4px;
      background:var(--panel);
      color:var(--dim);
      cursor:pointer;
      font-size:12px;
      transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
    }
    .icon-btn:hover { color:var(--red); border-color:rgba(239,68,68,0.45); background:rgba(239,68,68,0.08); }

    .wall-shell {
      min-width:0;
      min-height:0;
      height:100%;
      overflow:hidden;
      padding:8px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      background:
        linear-gradient(90deg, rgba(239,249,35,0.035), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.026), transparent 30%);
      box-shadow:inset 1px 0 0 rgba(255,255,255,0.035);
    }

    .wall-stage {
      position:relative;
      display:grid;
      grid-template-columns:repeat(3, minmax(220px, 1fr));
      grid-template-rows:minmax(96px, 0.28fr) minmax(260px, 1fr) minmax(96px, 0.28fr);
      grid-template-areas:
        "main main top-right"
        "main main center-right"
        "bottom bottom bottom-right";
      gap:6px;
      flex:0 0 auto;
      width:100%;
      max-width:none;
      margin:0 auto;
      padding:4px;
      border:1px solid rgba(255,255,255,0.09);
      border-radius:8px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        rgba(6,7,9,0.9);
      min-height:0;
      align-self:center;
      overflow:hidden;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,0.34), 0 18px 40px rgba(0,0,0,0.24);
    }

    .stream-card,
    .empty-slot {
      position:relative;
      min-width:0;
      min-height:0;
      border:1px solid rgba(255,255,255,0.13);
      border-radius:var(--r);
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
        #030405;
      transition:transform .22s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
    }
    .stream-card {
      cursor:default;
      box-shadow:0 12px 28px rgba(0,0,0,0.28);
    }
    .stream-card:hover { border-color:var(--line-hi); box-shadow:0 16px 34px rgba(0,0,0,0.34); }
    .stream-card.is-main {
      cursor:default;
      border-color:rgba(239,249,35,0.48);
      box-shadow:0 0 0 1px rgba(239,249,35,0.08), 0 16px 38px rgba(0,0,0,0.45);
    }

    .player-wrap {
      position:absolute;
      inset:0;
      background:#000;
    }
    .player-wrap iframe,
    .player-placeholder {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }
    .swap-hitbox {
      display:none;
    }
    .swap-action {
      position:absolute;
      top:8px;
      right:8px;
      z-index:5;
      border:1px solid rgba(239,249,35,0.48);
      border-radius:3px;
      padding:5px 8px;
      background:rgba(239,249,35,0.94);
      color:#080900;
      cursor:pointer;
      font-family:var(--fd);
      font-size:9px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.06em;
      box-shadow:0 8px 18px rgba(0,0,0,0.34);
    }
    .stream-card.is-main .swap-action {
      display:none;
    }
    .swap-action:hover {
      filter:brightness(1.08);
    }

    .empty-slot {
      display:grid;
      place-items:center;
      color:#c0cad8;
      border-color:rgba(255,255,255,0.17);
      border-style:dashed;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.072), rgba(255,255,255,0.026)),
        #0a0d11;
      font-family:var(--fd);
      font-size:10.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.065em;
    }

    .mode-focus .wall-stage {
      grid-template-columns:repeat(2, minmax(0, 1fr));
      grid-template-rows:repeat(2, minmax(0, 1fr));
      grid-template-areas:
        "main top-right"
        "center-right bottom-right";
      gap:8px;
      padding:6px;
    }
    .wall-shell.mode-focus {
      padding:8px;
    }
    .mode-fullscreen {
      padding:12px;
      background:#020203;
    }
    .mode-fullscreen .wall-stage {
      max-width:none;
      min-height:0;
      grid-template-rows:minmax(96px, 0.22fr) minmax(0, 1fr) minmax(96px, 0.22fr);
    }

    .toast {
      position:fixed;
      right:22px;
      bottom:22px;
      z-index:9999;
      border:1px solid rgba(239,249,35,0.4);
      border-radius:4px;
      background:rgba(12,14,18,0.96);
      color:var(--text);
      padding:10px 14px;
      font-family:var(--fd);
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.07em;
      opacity:0;
      transform:translateY(8px);
      transition:opacity .22s var(--ease), transform .22s var(--ease);
      pointer-events:none;
    }
    .toast.visible { opacity:1; transform:translateY(0); }

    @media (max-width:980px) {
      body { overflow:auto; }
      .app {
        height:auto;
        grid-template-columns:1fr;
      }
      .app.panel-collapsed {
        grid-template-columns:1fr;
      }
      .control-panel {
        border-right:0;
        border-bottom:1px solid var(--line);
      }
      .app.panel-collapsed .control-panel {
        overflow:auto;
        padding:12px;
      }
      .app.panel-collapsed .panel-section {
        display:block;
      }      .wall-shell { overflow:visible; }
      .topbar {
        height:auto;
        min-height:72px;
        padding:12px 20px;
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
      }
      .brand { margin-right:0; }
      .nav-primary {
        width:100%;
        overflow-x:auto;
      }
      .app { height:auto; }
      .wall-stage,
      .mode-focus .wall-stage {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-template-rows:minmax(300px, 52vw);
        grid-auto-rows:minmax(132px, 30vw);
        grid-template-areas:
          "main main"
          "top-right center-right"
          "bottom-right bottom";
        min-height:0;
      }
    }