@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Sora:wght@300;400;500;600;700&display=swap');
:root {
  --bg: #0b0f14;
  --bg-deep: #0b0f14;
  --card: rgba(255, 255, 255, 0.03);
  --glass: rgba(255, 255, 255, 0.02);
  --glass-hover: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --primary: #f59e0b;
  --primary-hover: #d97706;
  --accent: #0ea5e9;
  --accent-2: #2bb3ff;
  --text: #f8fafc;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --muted: #94a3b8;
  --danger: #ef4444;
  --success: #22c55e;
  --radius: 20px;
  --bg-body: #0b0f14;
  --bg-card: rgba(255, 255, 255, 0.06);
  --bg-sidebar: rgba(8, 10, 14, 0.75);
  --bg-1: #0b0f14;
  --bg-2: #0a0d12;
  --ink: #e5e7eb;
}

/* LOGIN */
body.page-login{
        margin: 0;
        font-family: 'Sora', sans-serif;
        color: var(--text);
        min-height: 100vh;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 78%, rgba(255, 88, 20, 0.26), transparent 18%),
          radial-gradient(circle at 50% 44%, rgba(255, 122, 33, 0.12), transparent 24%),
          linear-gradient(180deg, #040405 0%, #100707 32%, #1a0c0a 62%, #050505 100%);
      }
      body.page-login *{ box-sizing: border-box; }
      body.page-login .inferno-stage{
        position: fixed;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
      }
      body.page-login .inferno-stage::before{
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 26%, rgba(0,0,0,0.42) 100%),
          radial-gradient(circle at 50% 92%, rgba(255, 133, 45, 0.12), transparent 30%);
      }
      body.page-login .inferno-stage::after{
        content: "";
        position: absolute;
        left: -6%;
        right: -6%;
        bottom: -2vh;
        height: 24vh;
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 137, 44, 0.12), transparent 24%),
          linear-gradient(180deg, rgba(18,10,8,0) 0%, rgba(10,8,8,0.86) 32%, #040404 100%);
        clip-path: ellipse(62% 88% at 50% 100%);
      }
      body.page-login .ash{
        position: absolute;
        inset: 0;
        opacity: .42;
        animation: drift-smoke 16s linear infinite;
      }
      body.page-login .ash::before,
      body.page-login .ash::after{
        content: "";
        position: absolute;
        inset: auto;
        width: 34vmax;
        height: 34vmax;
        border-radius: 50%;
        filter: blur(84px);
        background: radial-gradient(circle, rgba(255, 118, 26, 0.12) 0%, rgba(61, 17, 9, 0.11) 44%, transparent 74%);
      }
      body.page-login .ash-a::before{ top: -10vmax; left: -6vmax; }
      body.page-login .ash-a::after{ right: -8vmax; top: 10vmax; animation: pulse-haze 9s ease-in-out infinite; }
      body.page-login .ash-b{ animation-duration: 20s; animation-direction: reverse; opacity: .28; }
      body.page-login .ash-b::before{ right: 2vmax; top: -14vmax; }
      body.page-login .ash-b::after{ left: 10vmax; bottom: 14vmax; }
      body.page-login .portal-backglow{
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(62vw, 760px);
        aspect-ratio: 1 / 1;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 133, 22, 0.5) 0%, rgba(255, 80, 18, 0.24) 32%, rgba(44, 7, 4, 0.08) 58%, transparent 74%);
        filter: blur(34px);
        animation: gate-breathe 4.2s ease-in-out infinite;
      }
      body.page-login .portal-frame{
        position: absolute;
        left: 50%;
        bottom: 18vh;
        width: min(46vw, 520px);
        min-width: 290px;
        aspect-ratio: 0.9 / 1;
        transform: translateX(-50%);
        display: grid;
        place-items: end center;
      }
      body.page-login .portal-arch{
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 46% 46% 4% 4% / 18% 18% 3% 3%;
        background:
          linear-gradient(180deg, #4c433f 0%, #2e2828 22%, #191617 66%, #0a0a0b 100%);
        box-shadow:
          0 0 0 2px rgba(255, 187, 120, 0.1),
          0 34px 80px rgba(0, 0, 0, 0.58),
          inset 0 10px 18px rgba(255,255,255,0.08),
          inset 0 -26px 34px rgba(0, 0, 0, 0.48);
        overflow: hidden;
      }
      body.page-login .portal-arch::before{
        content: "";
        position: absolute;
        inset: 5% 11% 3%;
        border-radius: 44% 44% 2% 2% / 14% 14% 2% 2%;
        background:
          linear-gradient(180deg, rgba(255,255,255,0.08), transparent 16%),
          linear-gradient(90deg, rgba(0,0,0,0.48) 0 4%, transparent 4% 96%, rgba(0,0,0,0.48) 96% 100%);
        box-shadow: inset 0 0 0 2px rgba(255, 170, 105, 0.16);
      }
      body.page-login .portal-lintel{
        position: absolute;
        top: 10%;
        left: 16%;
        right: 16%;
        height: 9%;
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(130, 117, 109, 0.96) 0%, rgba(70, 63, 59, 0.98) 48%, rgba(19, 17, 18, 1) 100%);
        box-shadow: inset 0 2px 3px rgba(255,255,255,0.1);
      }
      body.page-login .portal-fire{
        position: absolute;
        inset: 15% 17% 8%;
        border-radius: 42% 42% 2% 2% / 13% 13% 2% 2%;
        background:
          radial-gradient(circle at 50% 22%, rgba(255, 245, 195, 0.82) 0%, rgba(255, 174, 60, 0.72) 14%, rgba(255, 88, 25, 0.9) 34%, rgba(128, 16, 4, 0.9) 64%, rgba(19, 3, 2, 1) 100%);
        filter: saturate(1.22);
        animation: inferno-roll 2.8s ease-in-out infinite;
      }
      body.page-login .portal-fire::before{
        content: "";
        position: absolute;
        inset: 10% 18% 0;
        background:
          radial-gradient(circle at 50% 100%, rgba(255, 247, 216, 0.7), rgba(255, 165, 58, 0.54) 18%, rgba(255, 82, 18, 0) 46%);
        animation: core-flicker 1.6s linear infinite;
      }
      body.page-login .portal-door{
        position: absolute;
        top: 18%;
        bottom: 8%;
        width: 31%;
        border-radius: 22px 22px 10px 10px;
        background:
          linear-gradient(180deg, rgba(122, 104, 92, 0.98) 0%, rgba(76, 61, 55, 0.98) 18%, rgba(41, 31, 31, 1) 62%, rgba(13, 12, 13, 1) 100%);
        box-shadow:
          inset 0 0 0 2px rgba(238, 199, 159, 0.08),
          inset 0 0 0 12px rgba(22, 16, 16, 0.72),
          inset 0 0 28px rgba(0,0,0,0.38),
          0 16px 26px rgba(0,0,0,0.28);
      }
      body.page-login .portal-door::before{
        content: "";
        position: absolute;
        inset: 14% 18%;
        border-radius: 12px;
        background:
          linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0) 18%),
          repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 8px, rgba(0,0,0,0.04) 8px 16px),
          linear-gradient(180deg, rgba(56, 43, 39, 0.64), rgba(13, 11, 12, 0.2));
        box-shadow: inset 0 0 0 1px rgba(255, 173, 118, 0.08);
      }
      body.page-login .portal-door-left{
        left: 18%;
        transform: perspective(900px) rotateY(26deg);
        transform-origin: left center;
      }
      body.page-login .portal-door-right{
        right: 18%;
        transform: perspective(900px) rotateY(-26deg);
        transform-origin: right center;
      }
      body.page-login .portal-seam{
        position: absolute;
        top: 18%;
        bottom: 8%;
        left: 50%;
        width: 10px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(243, 198, 145, 0.24) 0%, rgba(255, 112, 46, 0.34) 38%, rgba(24, 5, 5, 0.8) 100%);
        filter: blur(.2px);
      }
      body.page-login .portal-floorglow{
        position: absolute;
        left: 26%;
        right: 26%;
        bottom: 8%;
        height: 12%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 184, 74, 0.7) 0%, rgba(255, 85, 28, 0.44) 34%, rgba(0,0,0,0) 72%);
        filter: blur(10px);
      }
      body.page-login .portal-runes{
        position: absolute;
        top: 6%;
        left: 50%;
        display: flex;
        gap: 16px;
        transform: translateX(-50%);
      }
      body.page-login .portal-runes span{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffd18a;
        box-shadow: 0 0 12px rgba(255, 178, 92, 0.9);
        animation: rune-pulse 2.4s ease-in-out infinite;
      }
      body.page-login .portal-runes span:nth-child(2){ animation-delay: -.4s; }
      body.page-login .portal-runes span:nth-child(3){ animation-delay: -.8s; }
      body.page-login .portal-runes span:nth-child(4){ animation-delay: -1.2s; }
      body.page-login .portal-embers{
        position: absolute;
        inset: 0;
      }
      body.page-login .portal-embers span{
        position: absolute;
        bottom: 12%;
        width: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 246, 202, 0.92) 0%, rgba(255, 154, 67, 0.95) 44%, rgba(255, 96, 34, 0) 76%);
        filter: blur(.3px);
        animation: ember-rise 4.2s linear infinite;
      }
      body.page-login .portal-embers span:nth-child(1){ left: 24%; animation-delay: -.8s; }
      body.page-login .portal-embers span:nth-child(2){ left: 34%; animation-delay: -2.2s; width: 7px; }
      body.page-login .portal-embers span:nth-child(3){ left: 42%; animation-delay: -1.2s; width: 8px; }
      body.page-login .portal-embers span:nth-child(4){ left: 56%; animation-delay: -.2s; width: 6px; }
      body.page-login .portal-embers span:nth-child(5){ left: 64%; animation-delay: -3.3s; }
      body.page-login .portal-embers span:nth-child(6){ left: 74%; animation-delay: -2.8s; width: 7px; }
      body.page-login .portal-embers span:nth-child(7){ left: 50%; animation-delay: -1.7s; width: 9px; }
      body.page-login .portal-steps{
        position: absolute;
        left: 50%;
        bottom: 0;
        width: min(74vw, 900px);
        height: 23vh;
        transform: translateX(-50%);
        background:
          linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(8,7,9,0.26) 24%, rgba(4,4,5,0.9) 100%);
        clip-path: polygon(18% 100%, 28% 70%, 38% 70%, 44% 44%, 56% 44%, 62% 70%, 72% 70%, 82% 100%);
      }
      body.page-login .login-shell{
        position: relative;
        min-height: 100vh;
        padding: 28px 18px 22px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        z-index: 1;
      }
      body.page-login .login-copy{
        max-width: 700px;
        padding-top: 3vh;
        text-align: center;
        animation: login-rise .9s ease-out both;
      }
      body.page-login .eyebrow{
        display: inline-block;
        align-items: center;
        padding: 8px 14px;
        border: 1px solid rgba(255, 155, 79, 0.32);
        border-radius: 999px;
        color: #ffba7a;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        background: rgba(38, 12, 9, 0.56);
        box-shadow: inset 0 0 18px rgba(255, 120, 48, 0.08);
      }
      body.page-login h1{
        margin: 16px 0 12px;
        font-family: 'Fraunces', serif;
        font-size: clamp(42px, 7vw, 78px);
        line-height: .96;
        color: #fff2dc;
        text-shadow: 0 0 18px rgba(255, 117, 44, 0.24), 0 14px 38px rgba(0, 0, 0, 0.7);
      }
      body.page-login .subtitle{
        margin: 0;
        max-width: 46ch;
        color: #d8c0b5;
        font-size: 15px;
        line-height: 1.6;
      }
      body.page-login .login-panel{
        position: relative;
        width: min(100%, 420px);
        margin-bottom: 2vh;
        padding: 24px;
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(22, 13, 13, 0.86) 0%, rgba(10, 8, 10, 0.94) 100%);
        border: 1px solid rgba(255, 154, 79, 0.16);
        box-shadow:
          0 22px 50px rgba(0, 0, 0, 0.5),
          inset 0 1px 0 rgba(255,255,255,0.05),
          inset 0 0 28px rgba(255, 95, 28, 0.06);
        backdrop-filter: blur(12px);
        animation: login-rise 1.05s ease-out both;
      }
      body.page-login .panel-glow{
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 162, 91, 0.16), rgba(255, 98, 36, 0.03) 38%, rgba(255,255,255,0.02) 68%, rgba(255, 176, 93, 0.12) 100%);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        padding: 1px;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }
      body.page-login .login-form{
        position: relative;
        z-index: 1;
        display: grid;
        gap: 10px;
      }
      body.page-login .login-form label{
        color: #f2d5bc;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      body.page-login input{
        width: 100%;
        min-height: 50px;
        padding: 14px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(12, 10, 11, 0.72);
        color: #fff8f2;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      }
      body.page-login input::placeholder{ color: #8f7b74; }
      body.page-login input:focus{
        border-color: rgba(255, 156, 72, 0.68);
        box-shadow: 0 0 0 4px rgba(255, 111, 36, 0.14);
        transform: translateY(-1px);
      }
      body.page-login button{
        width: 100%;
        min-height: 52px;
        margin-top: 10px;
        border: 0;
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(255, 230, 182, 0.18), rgba(255,255,255,0) 24%),
          linear-gradient(135deg, #ff7a2f 0%, #ff521f 46%, #ffbe55 100%);
        color: #2f0d05;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .04em;
        cursor: pointer;
        box-shadow: 0 18px 34px rgba(255, 83, 23, 0.24);
        transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
      }
      body.page-login button:hover{
        transform: translateY(-2px);
        box-shadow: 0 24px 46px rgba(255, 83, 23, 0.34);
        filter: brightness(1.04);
      }
      body.page-login .error{
        position: relative;
        z-index: 1;
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(239, 68, 68, 0.22);
        background: rgba(71, 13, 13, 0.42);
        color: #ffb4b4;
        font-size: 13px;
        line-height: 1.45;
      }
      @keyframes drift-smoke{
        0%{ transform: translate3d(0, 0, 0) scale(1); }
        50%{ transform: translate3d(1.6%, -1.2%, 0) scale(1.04); }
        100%{ transform: translate3d(0, 0, 0) scale(1); }
      }
      @keyframes pulse-haze{
        0%, 100%{ transform: scale(1); opacity: .7; }
        50%{ transform: scale(1.08); opacity: 1; }
      }
      @keyframes gate-breathe{
        0%, 100%{ transform: translate(-50%, -50%) scale(1); opacity: .8; }
        50%{ transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
      }
      @keyframes inferno-roll{
        0%, 100%{ transform: scale(1) translateY(0); filter: saturate(1.12); }
        50%{ transform: scale(1.04) translateY(-1.5%); filter: saturate(1.24); }
      }
      @keyframes ember-rise{
        0%{ transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
        12%{ opacity: .95; }
        100%{ transform: translate3d(24px, -220px, 0) scale(.18); opacity: 0; }
      }
      @keyframes core-flicker{
        0%, 100%{ opacity: .7; }
        35%{ opacity: .94; }
        58%{ opacity: .52; }
        82%{ opacity: .86; }
      }
      @keyframes login-rise{
        from{ opacity: 0; transform: translateY(18px); }
        to{ opacity: 1; transform: translateY(0); }
      }
      @keyframes rune-pulse{
        0%, 100%{ opacity: .56; transform: scale(.88); }
        50%{ opacity: 1; transform: scale(1.15); }
      }
      @media (max-width: 640px){
        body.page-login .portal-frame{
          width: min(78vw, 360px);
          min-width: 230px;
          bottom: 26vh;
        }
        body.page-login .portal-backglow{
          width: min(100vw, 560px);
          top: 48%;
        }
        body.page-login .portal-steps{ width: min(100vw, 700px); height: 18vh; }
        body.page-login .login-shell{
          padding: 18px 14px 16px;
          gap: 16px;
        }
        body.page-login h1{ font-size: clamp(34px, 14vw, 56px); }
        body.page-login .subtitle{ font-size: 14px; line-height: 1.55; }
        body.page-login .login-panel{ padding: 18px; border-radius: 18px; }
        body.page-login input,
        body.page-login button{ min-height: 48px; }
      }
/* ADMIN */
body.page-admin .tabs{ display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
      body.page-admin .tab{
        padding: 12px 0;
        color: var(--text-muted);
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        border-bottom: 2px solid transparent;
        transition: 0.2s;
        display: flex; align-items: center; gap: 8px;
        cursor: pointer;
        margin-bottom: -1px;
      }
      body.page-admin *{ box-sizing: border-box; }
      body.page-admin{
        margin: 0;
        font-family: 'Sora', sans-serif;
        background-color: var(--bg-deep);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
        background-size: 200% 200%;
        animation: bg-pulse 20s ease infinite;
        color: var(--text);
        min-height: 100vh;
        display: flex;
      }
      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      
      body.page-admin ::-webkit-scrollbar{ width: 6px; height: 6px; }
      body.page-admin ::-webkit-scrollbar-track{ background: transparent; }
      body.page-admin ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
      body.page-admin ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
      
      body.page-admin .tab:hover{ color: var(--text); }
      body.page-admin .tab.active{ color: var(--primary); border-bottom-color: var(--primary); }
      body.page-admin .badge{ background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 10px; font-size: 11px; }
      body.page-admin .tab.active .badge{ background: var(--primary); color: white; }
      
      
      body.page-admin .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
      body.page-admin .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
      body.page-admin .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
      body.page-admin .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
      body.page-admin .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
      
      body.page-admin .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      body.page-admin .header{ margin-bottom: 48px; }
      body.page-admin .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
      
      body.page-admin .grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
      body.page-admin .panel{ background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; backdrop-filter: blur(10px); }
      body.page-admin h3{ margin: 0 0 20px; font-size: 18px; font-weight: 600; color: white; }
      body.page-admin table{ width: 100%; border-collapse: collapse; font-size: 14px; }
      body.page-admin th, body.page-admin td{ padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--border); }
      body.page-admin th{ color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
      body.page-admin .success{ color: var(--success); }
      body.page-admin .fail{ color: var(--danger); }
      body.page-admin .ban-item{ display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0,0,0,0.3); border-radius: 8px; margin-bottom: 8px; }
      body.page-admin button{ background: none; border: none; cursor: pointer; color: var(--danger); font-size: 16px; }
      body.page-admin .btn-primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: 0.3s; }
      body.page-admin .btn-primary:hover{ transform: scale(1.02); box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
      body.page-admin input{ background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: white; padding: 10px 16px; border-radius: 12px; outline: none; width: 100%; transition: 0.2s; }
      body.page-admin input:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
      body.page-admin .full-width{ grid-column: 1 / -1; }
      body.page-admin .login-box{ max-width: 400px; margin: 100px auto; text-align: center; }
      body.page-admin .login-box input{ width: 100%; margin-bottom: 10px; padding: 12px; }
      body.page-admin .login-box button{ width: 100%; background: var(--primary); color: white; padding: 12px; border-radius: 6px; font-weight: bold; }
      body.page-admin .alert{ padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
      body.page-admin .alert-error{ background: rgba(239, 68, 68, 0.1); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
      body.page-admin .alert-success{ background: rgba(34, 197, 94, 0.1); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.2); }
      body.page-admin .stat-row{ display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
      body.page-admin .stat-val{ font-weight: 600; color: white; }
      @media (max-width: 900px){ body.page-admin .grid{ grid-template-columns: 1fr; } }
      @media (max-width: 768px){ body.page-admin{ flex-direction: column; } body.page-admin .sidebar{ width: 100%; padding: 16px; } body.page-admin .main{ padding: 20px; } }
      
      
      body.page-admin .input-sm{ padding: 6px 10px; font-size: 13px; border-radius: 8px; width: 100%; background: rgba(0,0,0,0.2); border: 1px solid var(--border); color: white; }
      body.page-admin .input-sm:focus{ border-color: var(--primary); }
      body.page-admin .btn-icon{ padding: 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
      body.page-admin .btn-icon.save{ background: rgba(34, 197, 94, 0.1); color: var(--success); border-color: rgba(34, 197, 94, 0.2); }
      body.page-admin .btn-icon.save:hover{ background: rgba(34, 197, 94, 0.2); }
      body.page-admin .btn-icon.delete{ background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: rgba(239, 68, 68, 0.2); }
      body.page-admin .btn-icon.delete:hover{ background: rgba(239, 68, 68, 0.2); }
      body.page-admin select.input-sm{ appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a1a1aa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 10px; padding-right: 24px; }
/* CLIP_EDITOR */
body.page-clip-editor *{ box-sizing: border-box; }
      body.page-clip-editor{
        margin: 0;
        font-family: 'Sora', sans-serif;
        color: var(--text);
        background: var(--bg);
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      
      body.page-clip-editor header{
        padding: 0 20px;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--card);
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      body.page-clip-editor .brand{ font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; }
      body.page-clip-editor .close-btn{ color: var(--text-muted); text-decoration: none; font-size: 24px; padding: 10px; transition: color 0.2s; }
      body.page-clip-editor .close-btn:hover{ color: var(--text); }
      
      body.page-clip-editor .main-area{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      
      body.page-clip-editor .player-container{
        flex: 1;
        background: #000;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0;
      }
      body.page-clip-editor video{ width: 100%; height: 100%; object-fit: contain; max-height: 100%; }
      
      body.page-clip-editor .editor-panel{
        background: var(--card);
        border-top: 1px solid var(--border);
        padding: 20px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      
      
      body.page-clip-editor .slider-container{ padding: 0 10px; margin-bottom: 10px; }
      body.page-clip-editor .noUi-target{ background: #3f3f46; border: none; box-shadow: none; height: 10px; }
      body.page-clip-editor .noUi-connect{ background: var(--primary); }
      body.page-clip-editor .noUi-handle{ 
        background: #fff; border: none; box-shadow: 0 0 5px rgba(0,0,0,0.5); 
        width: 18px; height: 18px; border-radius: 50%; top: -4px; cursor: grab;
      }
      body.page-clip-editor .noUi-handle:active{ cursor: grabbing; }
      body.page-clip-editor .noUi-handle::before, body.page-clip-editor .noUi-handle::after{ display: none; }
      
      body.page-clip-editor .controls-grid{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 20px;
        align-items: center;
      }
      
      body.page-clip-editor .time-controls{ display: flex; gap: 10px; align-items: center; }
      body.page-clip-editor .time-label{ font-family: monospace; font-size: 14px; color: var(--text-muted); width: 60px; text-align: center; }
      body.page-clip-editor .btn-icon{
        background: #27272a; border: 1px solid #3f3f46; color: var(--text);
        width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
        display: flex; align-items: center; justify-content: center; font-size: 14px;
        transition: 0.2s;
      }
      body.page-clip-editor .btn-icon:hover{ background: #3f3f46; }
      
      body.page-clip-editor .main-controls{ display: flex; gap: 10px; justify-content: center; }
      body.page-clip-editor .btn-main{
        background: #27272a; border: 1px solid #3f3f46; color: var(--text);
        padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;
        display: flex; align-items: center; gap: 8px; transition: 0.2s;
      }
      body.page-clip-editor .btn-main:hover{ background: #3f3f46; }
      body.page-clip-editor .btn-primary{ background: var(--primary); border-color: var(--primary); color: #fff; }
      body.page-clip-editor .btn-primary:hover{ background: #9146ff; }
      
      body.page-clip-editor .meta-row{ display: flex; gap: 10px; }
      body.page-clip-editor input[type="text"]{
        flex: 1;
        background: #0e0e10; border: 1px solid #3f3f46; color: var(--text);
        padding: 10px; border-radius: 6px; outline: none; transition: border-color 0.2s;
      }
      body.page-clip-editor input[type="text"]:focus{ border-color: var(--primary); }
      
      body.page-clip-editor .msg{ padding: 10px; border-radius: 6px; margin-bottom: 10px; font-size: 14px; text-align: center; }
      body.page-clip-editor .msg.error{ background: rgba(255, 82, 82, 0.1); color: #ff8b8b; border: 1px solid rgba(255, 82, 82, 0.2); }
      body.page-clip-editor .msg.success{ background: rgba(34, 197, 94, 0.1); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.2); }
      
      @media (max-width: 768px){
        body.page-clip-editor .controls-grid{ grid-template-columns: 1fr; gap: 15px; }
        body.page-clip-editor .time-controls{ justify-content: center; }
        body.page-clip-editor .editor-panel{ padding: 15px; }
      }
/* DISCORD_TOOL */
body.page-discord-tool *{ box-sizing: border-box; }
      body.page-discord-tool{
        margin: 0;
        font-family: 'Sora', sans-serif;
        color: var(--text-main);
        background: var(--bg-body);
        min-height: 100vh;
        display: flex;
      }
      body.page-discord-tool .sidebar{ width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px; flex-shrink: 0; }
      body.page-discord-tool .brand{ font-size: 20px; font-weight: 700; color: white; margin-bottom: 40px; display: flex; align-items: center; gap: 10px; }
      body.page-discord-tool .nav-item{ display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--text-muted); text-decoration: none; border-radius: 12px; margin-bottom: 4px; transition: 0.2s; font-weight: 500; }
      body.page-discord-tool .nav-item:hover, body.page-discord-tool .nav-item.active{ background: var(--bg-card); color: white; }
      body.page-discord-tool .nav-item.active{ color: var(--primary); }
      body.page-discord-tool .main{ flex: 1; padding: 40px; overflow-y: auto; }
      body.page-discord-tool .header{ margin-bottom: 30px; }
      body.page-discord-tool .page-title{ font-size: 28px; font-weight: 700; margin: 0; }
      body.page-discord-tool .panel{ background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
      body.page-discord-tool input{ width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: #000; color: var(--text-main); outline: none; transition: border-color 0.2s; margin-bottom: 16px; }
      body.page-discord-tool input:focus{ border-color: var(--primary); }
      body.page-discord-tool select{ width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: #000; color: var(--text-main); outline: none; margin-bottom: 16px; appearance: none; }
      body.page-discord-tool button{ width: 100%; padding: 12px; border: 0; border-radius: 12px; background: var(--primary); color: white; font-weight: 600; cursor: pointer; transition: background 0.2s; }
      body.page-discord-tool button:hover{ background: var(--primary-hover); }
      body.page-discord-tool .btn-danger{ background: var(--danger); }
      body.page-discord-tool .btn-danger:hover{ background: #dc2626; }
      
      body.page-discord-tool .profile-card{ display: flex; align-items: center; gap: 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
      body.page-discord-tool .avatar{ width: 80px; height: 80px; border-radius: 50%; background: #000; object-fit: cover; }
      body.page-discord-tool .info{ flex: 1; }
      body.page-discord-tool .username{ font-size: 20px; font-weight: 700; color: white; }
      body.page-discord-tool .discriminator{ color: var(--text-muted); font-size: 16px; }
      body.page-discord-tool .detail{ font-size: 14px; color: var(--text-muted); margin-top: 4px; }
      
      body.page-discord-tool .grid-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
      body.page-discord-tool .grid-item{ background: rgba(0,0,0,0.2); padding: 12px; border-radius: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); }
      body.page-discord-tool .item-icon{ width: 40px; height: 40px; border-radius: 12px; background: #000; object-fit: cover; }
      body.page-discord-tool .item-name{ font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      
      body.page-discord-tool .error{ color: var(--danger); margin-top: 16px; padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; }
      body.page-discord-tool .success{ color: var(--success); margin-top: 16px; padding: 12px; background: rgba(34, 197, 94, 0.1); border-radius: 8px; }
      
      body.page-discord-tool .tabs{ display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
      body.page-discord-tool .tab{ padding: 8px 16px; cursor: pointer; color: var(--text-muted); font-weight: 600; border-radius: 8px; }
      body.page-discord-tool .tab.active{ background: var(--bg-card); color: white; }
      
      body.page-discord-tool .token-list{ margin-top: 20px; }
      body.page-discord-tool .token-item{ display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border); }
      @media (max-width: 768px){ body.page-discord-tool{ flex-direction: column; } body.page-discord-tool .sidebar{ width: 100%; padding: 16px; } body.page-discord-tool .main{ padding: 20px; } }
      
      body.page-discord-tool .script-box{ background: #000; padding: 12px; border-radius: 8px; font-family: monospace; font-size: 12px; color: var(--success); word-break: break-all; margin-top: 10px; cursor: pointer; border: 1px solid var(--border); position: relative; }
      body.page-discord-tool .script-box:hover{ border-color: var(--primary); }
      body.page-discord-tool .script-box::after{ content: 'Klicken zum Kopieren'; position: absolute; top: 0; right: 0; background: var(--primary); color: white; padding: 2px 6px; font-size: 10px; border-bottom-left-radius: 8px; }
      
      body.page-discord-tool .chat-input{ display: flex; gap: 10px; margin-top: 10px; }
      body.page-discord-tool .chat-input input{ margin-bottom: 0; }
/* INDEX */
body.page-index *{ box-sizing: border-box; }
      body.page-index{
        margin: 0;
        font-family: 'Sora', sans-serif;
        background-color: var(--bg-deep);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
        background-size: 200% 200%;
        animation: bg-pulse 20s ease infinite;
        color: var(--text);
        min-height: 100vh;
        display: flex;
        overflow: hidden;
      }
      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      
      body.page-index ::-webkit-scrollbar{ width: 6px; height: 6px; }
      body.page-index ::-webkit-scrollbar-track{ background: transparent; }
      body.page-index ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
      body.page-index ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
      
      body.page-index a{ text-decoration: none; color: inherit; transition: 0.2s; }
      
      
body.page-index .sidebar{ width: 280px; background: var(--bg-sidebar); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
      body.page-index .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
      body.page-index .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
      body.page-index .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
      body.page-index .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
      
      body.page-index .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
body.page-index .header{ margin-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
body.page-index .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
body.page-index .page-subtitle{ margin-top: 8px; color: var(--text-muted); font-size: 14px; max-width: 640px; line-height: 1.5; }

      
      body.page-index .stats-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 40px;
      }
body.page-index .stat-card{
        background: var(--glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 28px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        backdrop-filter: blur(12px);
        min-height: 180px;
        position: relative;
        overflow: hidden;
      }
body.page-index .stat-card::before{
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(14, 165, 233, 0.12));
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
      }
body.page-index .stat-card > *{ position: relative; z-index: 1; }
body.page-index .stat-card:hover{
        transform: translateY(-6px);
        border-color: rgba(245, 158, 11, 0.35);
        box-shadow: 0 26px 50px -18px rgba(245, 158, 11, 0.28);
      }
body.page-index .stat-card:hover::before{ opacity: 1; }
      body.page-index .stat-head{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
      body.page-index .stat-label{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
      body.page-index .stat-icon{ font-size: 20px; opacity: 0.5; }
      body.page-index .stat-value{ font-size: 24px; font-weight: 700; color: white; line-height: 1.1; }
      body.page-index .stat-sub{ font-size: 13px; color: var(--text-muted); margin-top: 6px; }
      
      body.page-index .progress-track{
        height: 6px;
        background: rgba(0,0,0,0.3);
        border-radius: 3px;
        margin-top: 16px;
        overflow: hidden;
      }
      body.page-index .progress-fill{ height: 100%; border-radius: 3px; transition: width 0.5s ease; }

      
      body.page-index .res-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
      body.page-index .res-label{ width: 40px; color: var(--text-muted); font-weight: 600; }
      body.page-index .res-bar{ flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
      body.page-index .res-fill{ height: 100%; background: var(--primary); transition: width 0.5s; }
      body.page-index .res-val{ width: 50px; text-align: right; font-family: monospace; color: white; font-size: 12px; }
      
      
      body.page-index .live-input-group{ display: flex; gap: 8px; margin-top: auto; }
      body.page-index .live-input-group input{ flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: white; padding: 10px; border-radius: 8px; width: 100%; outline:none; transition:0.2s; }
      body.page-index .live-input-group input:focus{ border-color: var(--primary); }
      body.page-index .live-input-group button{ background: var(--primary); color: white; border: none; border-radius: 8px; width: 40px; cursor: pointer; font-size: 16px; display:flex; align-items:center; justify-content:center; transition:0.2s; }
      body.page-index .live-input-group button:hover{ background: var(--accent); }

      
      body.page-index .mgmt-section{
        background: var(--glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 40px;
        overflow: hidden;
        backdrop-filter: blur(10px);
        scroll-margin-top: 20px;
      }
      body.page-index .mgmt-header{
        padding: 24px 32px;
        background: rgba(255,255,255,0.02);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
      }
      body.page-index .mgmt-title{ font-family: 'Fraunces', serif; font-size: 18px; font-weight: 600; color: white; display: flex; align-items: center; gap: 12px; }
      body.page-index .mgmt-body{ padding: 32px; }
      
      body.page-index .mgmt-controls{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; }
      
      body.page-index .channel-input-group{
        display: flex;
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 6px;
        transition: border-color 0.2s;
        flex: 1;
        max-width: 600px;
      }
      body.page-index .channel-input-group:focus-within{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
      body.page-index .channel-input-group input{
        border: none;
        background: transparent;
        padding: 10px 16px;
        outline: none;
        color: white;
        width: 100%;
        font-size: 16px;
      }
      body.page-index .channel-input-group button{
        border: none;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        padding: 8px 24px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s;
        white-space: nowrap;
      }
      body.page-index .channel-input-group button{ position: relative; overflow: hidden; }
      body.page-index .channel-input-group button::after{
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
      }
      body.page-index .channel-input-group button:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
      body.page-index .channel-input-group button:hover::after{ left: 100%; }
      
      body.page-index .btn-restart{
        background: rgba(255,255,255,0.05);
        color: var(--text-muted);
        border: 1px solid var(--border);
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: 0.2s;
        font-size: 14px;
      }
      body.page-index .btn-restart:hover{ background: rgba(255,255,255,0.1); color: white; }
      
      body.page-index .channel-grid{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
      body.page-index .channel-chip{
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        padding: 8px 12px 8px 16px;
        border-radius: 100px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        transition: 0.2s;
      }
      body.page-index .channel-chip:hover{
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      }
      body.page-index .channel-chip button{
        background: transparent;
        border: none;
        color: var(--muted);
        cursor: pointer;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;
        font-size: 16px;
        width: 24px; height: 24px;
      }
      body.page-index .channel-chip button:hover{
        background: rgba(255, 82, 82, 0.2);
        color: var(--danger);
      }

      
      body.page-index .grid-title{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; color: white; }
      body.page-index .live-pulse{ width: 10px; height: 10px; background: var(--danger); border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); animation: pulse-red 2s infinite; }
      
      body.page-index .streamer-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 24px;
      }
      
      body.page-index .card{
        background: var(--glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(10px);
      }
      body.page-index .card:hover{
        transform: translateY(-10px);
        box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.3);
      }
      
      body.page-index .card-header{
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
      }
      
      body.page-index .avatar{
        width: 56px;
        height: 56px;
        border-radius: 18px;
        background: linear-gradient(135deg, #3d4554, #2b303b);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 700;
        color: var(--text-muted);
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        position: relative;
        overflow: hidden;
      }
      body.page-index .avatar.online{ background: linear-gradient(135deg, var(--success), #27ae60); color: #fff; }
      body.page-index .avatar.recording{ background: linear-gradient(135deg, var(--danger), #c0392b); color: #fff; }
      body.page-index .avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
      
      body.page-index .card-meta{ flex: 1; min-width: 0; }
      body.page-index .streamer-name{ font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; }
      body.page-index .status-badge{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 12px;
        background: rgba(0,0,0,0.4);
        color: var(--text-muted);
      }
      body.page-index .status-badge.live{ background: rgba(255, 82, 82, 0.15); color: var(--danger); }
      body.page-index .status-badge.online{ background: rgba(46, 204, 113, 0.15); color: var(--success); }
      
      body.page-index .card-stats{
        padding: 0 24px 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      body.page-index .stat-box{
        background: rgba(0,0,0,0.2);
        padding: 12px;
        border-radius: 12px;
        text-align: center;
      }
      body.page-index .stat-box-label{ font-size: 10px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }
      body.page-index .stat-box-val{ font-size: 14px; font-weight: 600; color: white; }
      
      body.page-index .card-actions{
        margin-top: auto;
        padding: 16px 24px;
        border-top: 1px solid var(--border);
        background: rgba(0,0,0,0.1);
        display: flex;
        gap: 10px;
      }
      body.page-index .action-btn{
        flex: 1;
        text-align: center;
        padding: 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        background: rgba(255,255,255,0.05);
        transition: 0.2s;
      }
      body.page-index .action-btn:hover{ background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-2px); }
      body.page-index .action-btn.primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; position: relative; overflow: hidden; }
      body.page-index .action-btn.primary::after{
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
      }
      body.page-index .action-btn.primary:hover{ box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
      body.page-index .action-btn.primary:hover::after{ left: 100%; }
      
      body.page-index .empty-state{
        text-align: center;
        padding: 60px;
        color: var(--text-muted);
        background: var(--glass);
        border-radius: 20px;
        border: 1px dashed var(--border);
      }

      @keyframes pulse-red{ 0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); } }
      @media (max-width: 768px){ body.page-index{ flex-direction: column; overflow: auto; } body.page-index .sidebar{ width: 100%; padding: 16px; } body.page-index .main{ padding: 20px; overflow: visible; } }
/* CHANNELS */
body.page-channels *{ box-sizing: border-box; }
      body.page-channels{
        margin: 0;
        font-family: 'Sora', sans-serif;
        background-color: var(--bg-deep);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
        background-size: 200% 200%;
        animation: bg-pulse 20s ease infinite;
        color: var(--text);
        min-height: 100vh;
        display: flex;
      }
      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      
      body.page-channels ::-webkit-scrollbar{ width: 6px; height: 6px; }
      body.page-channels ::-webkit-scrollbar-track{ background: transparent; }
      body.page-channels ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
      body.page-channels ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
      
      body.page-channels a{ text-decoration: none; color: inherit; transition: 0.2s; }
      
      
      body.page-channels .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
      body.page-channels .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
      body.page-channels .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
      body.page-channels .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
      body.page-channels .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
      
      body.page-channels .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      body.page-channels .header{ margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; }
      body.page-channels .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }

      
      body.page-channels .mgmt-section{
        background: var(--glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 40px;
        overflow: hidden;
        backdrop-filter: blur(10px);
      }
      body.page-channels .mgmt-body{ padding: 32px; }
      
      body.page-channels .mgmt-controls{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; }
      
      body.page-channels .channel-input-group{
        display: flex;
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 6px;
        transition: border-color 0.2s;
        flex: 1;
        max-width: 600px;
      }
      body.page-channels .channel-input-group:focus-within{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
      body.page-channels .channel-input-group input{
        border: none;
        background: transparent;
        padding: 10px 16px;
        outline: none;
        color: white;
        width: 100%;
        font-size: 16px;
      }
      body.page-channels .channel-input-group button{
        border: none;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        padding: 8px 24px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s;
        white-space: nowrap;
      }
      body.page-channels .channel-input-group button{ position: relative; overflow: hidden; }
      body.page-channels .channel-input-group button::after{
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
      }
      body.page-channels .channel-input-group button:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
      body.page-channels .channel-input-group button:hover::after{ left: 100%; }
      
      body.page-channels .btn-restart{
        background: rgba(255,255,255,0.05);
        color: var(--text-muted);
        border: 1px solid var(--border);
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: 0.2s;
        font-size: 14px;
      }
      body.page-channels .btn-restart:hover{ background: rgba(255,255,255,0.1); color: white; }
      
      body.page-channels .channel-grid{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
      body.page-channels .channel-chip{
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        padding: 8px 12px 8px 16px;
        border-radius: 100px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        transition: 0.2s;
      }
      body.page-channels .channel-chip:hover{
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      }
      body.page-channels .channel-chip button{
        background: transparent;
        border: none;
        color: var(--muted);
        cursor: pointer;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s;
        font-size: 16px;
        width: 24px; height: 24px;
      }
      body.page-channels .channel-chip button:hover{
        background: rgba(255, 82, 82, 0.2);
        color: var(--danger);
      }
      @media (max-width: 768px){ body.page-channels{ flex-direction: column; overflow: auto; } body.page-channels .sidebar{ width: 100%; padding: 16px; } body.page-channels .main{ padding: 20px; overflow: visible; } }
/* STREAMER */
body.page-streamer *{ box-sizing: border-box; }
      body.page-streamer{
        margin: 0;
        font-family: 'Sora', sans-serif;
        background-color: var(--bg-deep);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
        background-size: 200% 200%;
        animation: bg-pulse 20s ease infinite;
        color: var(--text);
        min-height: 100vh;
        display: flex;
      }
      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      
      body.page-streamer ::-webkit-scrollbar{ width: 6px; height: 6px; }
      body.page-streamer ::-webkit-scrollbar-track{ background: transparent; }
      body.page-streamer ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
      body.page-streamer ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
      
      
      body.page-streamer .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
      body.page-streamer .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
      body.page-streamer .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
      body.page-streamer .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
      body.page-streamer .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
      
      body.page-streamer .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      body.page-streamer .header{ margin-bottom: 48px; display: flex; justify-content: space-between; align-items: center; }
      body.page-streamer .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
      
      
      body.page-streamer .video-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
      }
      body.page-streamer .video-card{
        background: var(--glass);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(10px);
      }
      body.page-streamer .video-card:hover{
        transform: translateY(-10px);
        box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
        border-color: rgba(245, 158, 11, 0.3);
      }
      body.page-streamer .thumb-wrap{
        aspect-ratio: 16/9;
        background: #000;
        position: relative;
      }
      body.page-streamer .thumb-img{ width: 100%; height: 100%; object-fit: cover; }
      body.page-streamer .duration-badge{
        position: absolute;
        bottom: 8px; right: 8px;
        background: rgba(0,0,0,0.8);
        color: #fff;
        font-size: 11px;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
      }
      body.page-streamer .card-body{ padding: 20px; flex: 1; display: flex; flex-direction: column; }
      body.page-streamer .video-title{
        font-weight: 600; font-size: 16px; margin-bottom: 8px; color: white;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4;
      }
      body.page-streamer .video-meta{ font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
      body.page-streamer .card-actions{
        margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
      }
      body.page-streamer button{
        background: none; border: none; cursor: pointer; color: var(--text-muted);
      }
      body.page-streamer form{ margin: 0; }
      body.page-streamer .tag{
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.14);
        color: var(--muted);
      }
      body.page-streamer .clip{ border-color: var(--primary); color: var(--primary); }
      body.page-streamer .empty-badge{ position: absolute; top: 8px; left: 8px; background: rgba(255,82,82,0.9); color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; }
      body.page-streamer .row{ display: flex; align-items: center; gap: 8px; }
      body.page-streamer .muted{ color: var(--text-muted); font-size: 13px; white-space: nowrap; }
      body.page-streamer .btn-icon{
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,0.05);
        color: var(--text-muted);
        font-size: 12px;
        cursor: pointer;
        transition: 0.2s;
      }
      body.page-streamer .btn-icon:hover{ background: rgba(255,255,255,0.1); color: #fff; transform: scale(1.1); }
      body.page-streamer .btn-icon.share{
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,0.05);
        color: var(--text-muted);
        font-size: 12px;
        cursor: pointer;
      }
      body.page-streamer .btn-icon.download{
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,0.05);
        color: var(--text-muted);
      }
      body.page-streamer .panel{ margin-bottom: 32px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(10px); }
      body.page-streamer .share-box{
        margin-bottom: 20px;
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--glass);
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      body.page-streamer .share-box input{
        flex: 1;
        min-width: 240px;
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        color: white;
        padding: 8px;
        border-radius: 6px;
      }
      
      body.page-streamer .btn-action{
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 13px;
        transition: 0.3s;
      }
      body.page-streamer .btn-action:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
      body.page-streamer .btn-action{ position: relative; overflow: hidden; }
      body.page-streamer .btn-action::after{
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
      }
      body.page-streamer .btn-action:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
      body.page-streamer .btn-action:hover::after{ left: 100%; }
      
      body.page-streamer select, body.page-streamer input[name="q"]{
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        color: #fff;
        padding: 8px 12px;
        border-radius: 8px;
        outline: none;
      }
      
      
      body.page-streamer .tabs{ display: inline-flex; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 24px; }
      body.page-streamer .tab{ padding: 8px 20px; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 8px; transition: 0.2s; display: flex; align-items: center; gap: 8px; cursor: pointer; }
      body.page-streamer .tab:hover{ color: var(--text); background: rgba(255,255,255,0.05); }
      body.page-streamer .tab.active{ background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
      body.page-streamer .badge{ background: rgba(255,255,255,0.15); padding: 2px 8px; border-radius: 6px; font-size: 11px; }
      body.page-streamer .tab.active .badge{ background: rgba(255,255,255,0.2); color: white; }
/* VOD */
body.page-vod *{ box-sizing: border-box; }
      body.page-vod{
        margin: 0;
        font-family: 'Sora', sans-serif;
        background-color: var(--bg-deep);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
        background-size: 200% 200%;
        animation: bg-pulse 20s ease infinite;
        color: var(--text);
        height: 100vh;
        display: flex;
        overflow: hidden;
      }
      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      
      body.page-vod ::-webkit-scrollbar{ width: 6px; height: 6px; }
      body.page-vod ::-webkit-scrollbar-track{ background: transparent; }
      body.page-vod ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
      body.page-vod ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
      
      
      body.page-vod .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
      body.page-vod .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
      body.page-vod .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
      body.page-vod .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
      body.page-vod .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }

      body.page-vod .main{ flex: 1; display: flex; flex-direction: column; overflow: hidden; animation: fade-in 0.5s ease-out; }
      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      body.page-vod header{ padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
      body.page-vod .page-title{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }

      body.page-vod .content{ flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; padding: 20px; min-height: 0; }
      body.page-vod .content.solo{ grid-template-columns: 1fr; }
      
      body.page-vod .main-col{ display: flex; flex-direction: column; gap: 16px; min-height: 0; }
      
      body.page-vod .player-wrapper{ flex: 1; min-height: 0; display: flex; flex-direction: column; background: #000; border-radius: 12px; position: relative; box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
      body.page-vod video{ width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
      
      body.page-vod .chat-panel{
        height: 100%;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--glass);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      body.page-vod .chat-header{
        padding: 16px;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-muted);
      }
      body.page-vod .chat-list{
        padding: 16px;
        flex: 1;
        overflow-y: auto;
      }
      body.page-vod .chat-line{ display: grid; grid-template-columns: 44px auto; gap: 8px; align-items: baseline; }
      body.page-vod .chat-time{ color: var(--text-muted); font-size: 11px; }
      body.page-vod .chat-user{ color: var(--primary); font-weight: 700; margin-right: 6px; }
      body.page-vod .chat-msg{ color: #fff; }
      body.page-vod .chat-text{ display: inline; }
      body.page-vod .chat-toggle{
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: rgba(255,255,255,0.05);
        color: var(--text-muted);
        font-size: 11px;
        cursor: pointer;
      }
      @media (max-width: 960px){
        body.page-vod{ height: auto; overflow: auto; display: block; }
        body.page-vod .content{ display: flex; flex-direction: column; height: auto; }
        body.page-vod .player-wrapper{ height: auto; aspect-ratio: 16/9; }
        body.page-vod .chat-panel{ height: 400px; }
      }
      
      body.page-vod .controls-panel{ flex-shrink: 0; padding: 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(10px); }
      
      body.page-vod .row{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
      body.page-vod input{
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: rgba(0,0,0,0.3);
        color: white;
      }
      body.page-vod button{
        padding: 10px 20px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
        position: relative; overflow: hidden;
      }
      body.page-vod button::after{
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
      }
      body.page-vod button:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
      body.page-vod button:hover::after{ left: 100%; }
      body.page-vod .note{ color: var(--text-muted); font-size: 12px; margin-top: 8px; }
      body.page-vod .error{ color: #ff8b8b; font-size: 13px; margin-top: 8px; }
      body.page-vod .quick{ border-radius: 999px; background: rgba(99, 102, 241, 0.1); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.2); font-weight: 600; }
      body.page-vod .dl-card{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,0.3); border-radius: 12px; text-align: center; padding: 20px; }
/* HLS */
body.page-hls *{ box-sizing: border-box; }
      body.page-hls{
        margin: 0;
        font-family: 'Fraunces', serif;
        color: var(--ink);
        background:
          radial-gradient(900px 400px at 10% -10%, rgba(255,138,61,0.18), transparent 60%),
          radial-gradient(700px 500px at 110% 0%, rgba(43,179,255,0.16), transparent 60%),
          linear-gradient(180deg, var(--bg-1), var(--bg-2));
        min-height: 100vh;
      }
      body.page-hls header{ padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; }
      body.page-hls a{ color: var(--accent-2); text-decoration: none; }
      body.page-hls .content{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 0 28px 28px; }
      body.page-hls .player{ padding: 0; }
      body.page-hls video{ width: 100%; max-height: 80vh; background: #000; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
      body.page-hls .chat-panel{
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(255,255,255,0.03);
        display: flex;
        flex-direction: column;
        min-height: 240px;
        max-height: 80vh;
      }
      body.page-hls .chat-header{
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--muted);
      }
      body.page-hls .chat-list{
        padding: 10px 12px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
      }
      body.page-hls .chat-line{ display: flex; gap: 8px; align-items: baseline; }
      body.page-hls .chat-time{ color: var(--muted); font-size: 11px; min-width: 44px; }
      body.page-hls .chat-user{ color: var(--accent-2); font-weight: 600; }
      body.page-hls .chat-msg{ color: var(--ink); }
      body.page-hls .chat-toggle{
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(43,179,255,0.35);
        background: rgba(43,179,255,0.18);
        color: var(--accent-2);
        font-size: 11px;
        cursor: pointer;
      }
      @media (max-width: 960px){
        body.page-hls .content{ grid-template-columns: 1fr; }
        body.page-hls .chat-panel{ max-height: 320px; }
      }
      body.page-hls .note{ padding: 0 28px 16px; color: var(--muted); }
      body.page-hls button{
        padding: 10px 14px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(90deg, var(--accent), #ffb05a);
        color: #141414;
        font-weight: 700;
        cursor: pointer;
      }
/* LIVE */
body.page-live *{ box-sizing: border-box; }
      body.page-live{
        margin: 0;
        font-family: 'Fraunces', serif;
        color: var(--ink);
        background:
          radial-gradient(900px 400px at 10% -10%, rgba(255,138,61,0.18), transparent 60%),
          radial-gradient(700px 500px at 110% 0%, rgba(43,179,255,0.16), transparent 60%),
          linear-gradient(180deg, var(--bg-1), var(--bg-2));
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      body.page-live header{ padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.05); }
      body.page-live a{ color: var(--accent-2); text-decoration: none; }
      body.page-live .content{ flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; padding: 20px; min-height: 0; }
      
      body.page-live .main-col{ display: flex; flex-direction: column; gap: 16px; min-height: 0; }
      
      body.page-live .player-wrapper{ flex: 1; min-height: 0; display: flex; flex-direction: column; background: #000; border-radius: 12px; position: relative; box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
      body.page-live video{ width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
      
      body.page-live .note{ color: var(--muted); font-size: 13px; }
      body.page-live .badge{ color: #ff8b8b; font-weight: 600; }
      
      body.page-live .controls-panel{ flex-shrink: 0; padding: 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
      body.page-live .controls-panel h3{ margin: 0 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
      
      body.page-live .row{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
      body.page-live input{
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.1);
        background: #0f1218;
        color: var(--ink);
      }
      body.page-live button{
        padding: 8px 12px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(90deg, var(--accent), #ffb05a);
        color: #141414;
        font-weight: 700;
        cursor: pointer;
      }
      body.page-live .status{ color: var(--muted); font-size: 12px; margin-bottom: 8px; }
      
      body.page-live .chat-panel{
        height: 100%;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(15, 18, 24, 0.92);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      body.page-live .chat-header{
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--muted);
      }
      body.page-live .chat-list{
        padding: 10px;
        flex: 1;
        overflow-y: auto;
      }
      body.page-live .chat-line{ display: grid; grid-template-columns: 44px auto; gap: 8px; align-items: baseline; }
      body.page-live .chat-time{ color: var(--muted); font-size: 11px; }
      body.page-live .chat-user{ color: #ff9d4a; font-weight: 700; margin-right: 6px; }
      body.page-live .chat-msg{ color: var(--ink); }
      body.page-live .chat-toggle{
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(43,179,255,0.35);
        background: rgba(43,179,255,0.18);
        color: var(--accent-2);
        font-size: 11px;
        cursor: pointer;
      }
      body.page-live .hls-link{
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.14);
        color: var(--muted);
        font-size: 12px;
      }
      @media (max-width: 1000px){
        
        html.page-live, body.page-live{ height: 100%; overflow: hidden; }
        body.page-live{ display: flex; flex-direction: column; }
        body.page-live header{ padding: 8px 12px; flex-shrink: 0; background: #000; border-bottom: 1px solid rgba(255,255,255,0.1); }
        
        body.page-live .content{ display: flex; flex-direction: column; height: 100%; padding: 0; gap: 0; overflow: hidden; }
        
        body.page-live .main-col{ flex: 2; min-height: 0; background: #000; gap: 0; justify-content: center; }
        body.page-live .player-wrapper{ height: 100%; width: 100%; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
        body.page-live video{ border-radius: 0; }
        body.page-live .controls-panel{ display: none; }
        
        body.page-live .chat-panel{ flex: 1; min-height: 0; border-radius: 0; border: none; border-top: 1px solid rgba(255,255,255,0.1); }
        body.page-live .chat-header{ padding: 8px 12px; font-size: 11px; }
        body.page-live .chat-list{ padding: 8px 12px; font-size: 12px; }
        
        @media (orientation: landscape){
            body.page-live .content{ flex-direction: row; }
            body.page-live .main-col{ flex: 3; }
            body.page-live .chat-panel{ flex: 1; border-top: none; border-left: 1px solid rgba(255,255,255,0.1); }
            body.page-live header{ padding: 4px 12px; }
        }
      }
      body.page-live .viewer-badge{
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 82, 82, 0.35);
        background: rgba(255, 82, 82, 0.18);
        color: #ff8b8b;
        font-size: 12px;
        cursor: pointer;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      body.page-live .viewer-panel{
        margin-top: 16px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        padding: 20px;
        display: none;
      }
      body.page-live .viewer-panel.open{ display: block; animation: rise 300ms ease-out; }
      body.page-live .chart-wrap{ position: relative; height: 200px; width: 100%; margin-bottom: 16px; }
      body.page-live .stat-row{ display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 4px; }
      body.page-live .stat-val{ font-weight: bold; color: var(--accent); }
/* FILES */
body.page-files *{ box-sizing: border-box; }
      body.page-files{
        margin: 0;
        font-family: 'Sora', sans-serif;
        background-color: var(--bg-deep);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
        background-size: 200% 200%;
        animation: bg-pulse 20s ease infinite;
        color: var(--text);
        min-height: 100vh;
        display: flex;
      }
      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      
      body.page-files ::-webkit-scrollbar{ width: 6px; height: 6px; }
      body.page-files ::-webkit-scrollbar-track{ background: transparent; }
      body.page-files ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
      body.page-files ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
      
      
      body.page-files .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
      body.page-files .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
      body.page-files .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
      body.page-files .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
      body.page-files .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
      
      body.page-files .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      body.page-files .header{ margin-bottom: 48px; }
      body.page-files .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }

      
      body.page-files .upload-section{
        background: var(--glass);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 40px;
        backdrop-filter: blur(10px);
      }
      body.page-files .upload-title{ font-size: 18px; font-weight: 600; margin-bottom: 16px; color: white; }
      
      body.page-files .upload-dropzone{
        border: 2px dashed var(--border);
        border-radius: 8px;
        padding: 40px;
        text-align: center;
        background: rgba(0,0,0,0.1);
        transition: 0.2s;
        cursor: pointer;
        position: relative;
      }
      body.page-files .upload-dropzone:hover{ border-color: var(--primary); background: rgba(88, 166, 255, 0.05); }
      body.page-files .upload-dropzone input[type="file"]{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
      body.page-files .upload-icon{ font-size: 32px; color: var(--text-muted); margin-bottom: 10px; display: block; }
      body.page-files .upload-text{ color: var(--text-muted); font-size: 14px; }
      body.page-files .file-selected{ color: var(--success); font-weight: 500; margin-top: 10px; display: none; }

      body.page-files .upload-meta{ display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; margin-top: 16px; }
      body.page-files .input-field{
        background: rgba(0,0,0,0.3);
        border: 1px solid var(--border);
        color: white;
        padding: 10px 12px;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        transition: 0.2s;
      }
      body.page-files .input-field:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
      
      body.page-files .btn{
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 14px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
      }
      body.page-files .btn-primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; position: relative; overflow: hidden; }
      body.page-files .btn-primary::after{
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s;
      }
      body.page-files .btn-primary:hover{ transform: scale(1.05); box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
      body.page-files .btn-primary:hover::after{ left: 100%; }
      
      
      body.page-files .files-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
      
      body.page-files .file-card{
        background: var(--glass);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 20px;
        transition: 0.2s;
        display: flex;
        flex-direction: column;
        position: relative;
        backdrop-filter: blur(10px);
      }
      body.page-files .file-card:hover{
        transform: translateY(-6px); border-color: rgba(245, 158, 11, 0.3);
        box-shadow: 0 20px 40px -10px rgba(245, 158, 11, 0.15);
      }
      
      body.page-files .file-header{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
      body.page-files .file-icon{ font-size: 24px; background: rgba(255,255,255,0.05); padding: 10px; border-radius: 8px; }
      body.page-files .file-size{ font-size: 12px; color: var(--text-muted); font-family: monospace; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 4px; height: fit-content; }
      
      body.page-files .file-info{ flex: 1; margin-bottom: 16px; }
      body.page-files .file-name{ font-size: 16px; font-weight: 600; color: white; margin-bottom: 4px; word-break: break-all; }
      body.page-files .file-desc{ font-size: 13px; color: var(--text-muted); line-height: 1.5; }
      
      body.page-files .file-actions{ display: flex; gap: 8px; margin-top: auto; border-top: 1px solid var(--border); padding-top: 16px; }
      body.page-files .btn-sm{ padding: 6px 12px; font-size: 12px; border-radius: 6px; background: rgba(255,255,255,0.05); color: white; border: 1px solid var(--border); }
      body.page-files .btn-sm:hover{ background: var(--border); }
      body.page-files .btn-icon{ padding: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
      body.page-files .btn-icon:hover{ background: rgba(255,255,255,0.1); color: white; transform: scale(1.1); }
      body.page-files .btn-icon.danger:hover{ color: var(--danger); background: rgba(248, 81, 73, 0.1); }
      
      body.page-files .edit-form{ display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
      body.page-files .file-card.editing .edit-form{ display: block; }
      body.page-files .file-card.editing .file-info{ display: none; }
      
      body.page-files .share-box{
        margin-top: 10px;
        background: rgba(56, 139, 253, 0.1);
        border: 1px solid rgba(56, 139, 253, 0.4);
        border-radius: 6px;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      body.page-files .share-url{
        background: transparent;
        border: none;
        color: var(--primary);
        font-size: 12px;
        flex: 1;
        outline: none;
        font-family: monospace;
      }
      
      body.page-files .empty-state{
        text-align: center;
        padding: 60px;
        color: var(--text-muted);
        grid-column: 1 / -1;
      }
      @media (max-width: 768px){
        body.page-files{ flex-direction: column; }
        body.page-files .sidebar{ width: 100%; padding: 12px; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; align-items: center; justify-content: space-between; flex-shrink: 0; }
        body.page-files .brand{ margin-bottom: 0; font-size: 18px; }
        body.page-files nav{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 0; }
        body.page-files .nav-item{ margin-bottom: 0; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
        body.page-files .nav-item[style*="margin-top:auto"]{ margin-top: 0 !important; }
        body.page-files .main{ padding: 16px; }
        body.page-files .files-grid{ grid-template-columns: 1fr; }
      }
/* MOBILE_INDEX */
body.page-mobile-index{ margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#0b0d11; color:#fff; padding-bottom:80px; -webkit-tap-highlight-color: transparent; }
body.page-mobile-index .header{ padding:16px; background:#18181b; border-bottom:1px solid #27272a; font-weight:800; font-size:20px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; }
body.page-mobile-index .section{ padding:16px; }
body.page-mobile-index .section-title{ font-size:13px; color:#a1a1aa; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }
body.page-mobile-index .card{ background:#1f1f23; padding:16px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:#fff; border:1px solid #27272a; transition:0.2s; }
body.page-mobile-index .card:active{ transform:scale(0.98); background:#27272a; }
body.page-mobile-index .live-card{ border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.05); }
body.page-mobile-index .badge{ background:#27272a; padding:4px 8px; border-radius:6px; font-size:12px; color:#a1a1aa; }
body.page-mobile-index .live-badge{ background:#ef4444; color:white; padding:4px 8px; border-radius:6px; font-size:12px; font-weight:bold; box-shadow:0 0 10px rgba(239,68,68,0.4); }
body.page-mobile-index .nav{ position:fixed; bottom:0; left:0; right:0; height:60px; background:rgba(24,24,27,0.95); backdrop-filter:blur(10px); border-top:1px solid #27272a; display:flex; justify-content:space-around; align-items:center; z-index:20; padding-bottom:env(safe-area-inset-bottom); }
body.page-mobile-index .nav a{ color:#71717a; text-decoration:none; font-size:10px; display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; padding:8px 0; }
body.page-mobile-index .nav a.active{ color:#f59e0b; }
body.page-mobile-index .nav-icon{ font-size:20px; }
/* MOBILE_STREAMER */
body.page-mobile-streamer{ margin:0; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#0b0d11; color:#fff; padding-bottom:80px; }
body.page-mobile-streamer .header{ padding:12px 16px; background:#18181b; border-bottom:1px solid #27272a; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:100; }
body.page-mobile-streamer .back-btn{ font-size:24px; text-decoration:none; color:#fff; padding:4px; }
body.page-mobile-streamer .page-title{ font-weight:800; font-size:18px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.page-mobile-streamer .controls{ padding:16px; background:#121214; border-bottom:1px solid #27272a; }
body.page-mobile-streamer .btn-row{ display:flex; gap:8px; margin-bottom:12px; overflow-x:auto; padding-bottom:4px; }
body.page-mobile-streamer .btn{ background:#27272a; color:#fff; border:1px solid #3f3f46; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none; cursor:pointer; display:flex; align-items:center; gap:6px; }
body.page-mobile-streamer .btn-primary{ background:#f59e0b; border-color:#d97706; }
body.page-mobile-streamer .btn-danger{ background:rgba(239,68,68,0.2); color:#fca5a5; border-color:rgba(239,68,68,0.4); }
body.page-mobile-streamer .search-row{ display:flex; gap:8px; }
body.page-mobile-streamer .search-input{ flex:1; background:#000; border:1px solid #3f3f46; padding:8px 12px; border-radius:8px; color:#fff; outline:none; }
body.page-mobile-streamer .tabs{ display:flex; padding:12px 16px; gap:10px; overflow-x:auto; border-bottom:1px solid #27272a; }
body.page-mobile-streamer .tab{ padding:8px 16px; background:#1f1f23; border-radius:20px; color:#a1a1aa; text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; border:1px solid #27272a; display:flex; align-items:center; gap:6px; }
body.page-mobile-streamer .tab.active{ background:#f59e0b; color:white; border-color:#f59e0b; }
body.page-mobile-streamer .badge{ background:rgba(255,255,255,0.2); padding:2px 6px; border-radius:4px; font-size:10px; }
body.page-mobile-streamer .list{ padding:16px; display:grid; gap:16px; }
body.page-mobile-streamer .video-card{ background:#18181b; border-radius:12px; overflow:hidden; border:1px solid #27272a; }
body.page-mobile-streamer .thumb-area{ position:relative; aspect-ratio:16/9; display:block; }
body.page-mobile-streamer .thumb{ width:100%; height:100%; object-fit:cover; }
body.page-mobile-streamer .dur{ position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,0.8); padding:2px 6px; border-radius:4px; font-size:11px; font-weight:600; }
body.page-mobile-streamer .meta{ padding:12px; }
body.page-mobile-streamer .title{ font-weight:600; font-size:14px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#fff; text-decoration:none; }
body.page-mobile-streamer .info{ font-size:12px; color:#a1a1aa; margin-bottom:12px; }
body.page-mobile-streamer .actions{ display:flex; gap:8px; border-top:1px solid #27272a; padding-top:12px; }
body.page-mobile-streamer .act-btn{ flex:1; text-align:center; padding:6px; background:#27272a; border-radius:6px; font-size:12px; color:#a1a1aa; text-decoration:none; border:1px solid #3f3f46; }
body.page-mobile-streamer .pagination{ display:flex; justify-content:center; gap:16px; padding:20px; align-items:center; }
body.page-mobile-streamer .empty{ text-align:center; padding:40px; color:#52525b; }
/* MOBILE_PLAYER */
body.page-mobile-player{ margin:0; background:#000; color:#fff; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; font-family:-apple-system, sans-serif; }


body.page-mobile-player .video-container{ flex: 2; position:relative; background:#000; display:flex; align-items:center; justify-content:center; min-height:0; }
body.page-mobile-player .chat-container{ flex: 1; background:#0e0e10; border-top:1px solid #333; display:flex; flex-direction:column; min-height:0; }

body.page-mobile-player video{ width:100%; height:100%; object-fit:contain; }

body.page-mobile-player .overlay-header{ position:absolute; top:0; left:0; right:0; padding:10px; background:linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); z-index:10; display:flex; justify-content:space-between; pointer-events:none; }
body.page-mobile-player .back-btn{ pointer-events:auto; color:white; text-decoration:none; font-size:24px; text-shadow:0 1px 3px rgba(0,0,0,0.8); padding:5px; }
body.page-mobile-player .title{ font-size:12px; color:rgba(255,255,255,0.8); text-shadow:0 1px 2px black; pointer-events:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }

body.page-mobile-player .chat-list{ flex:1; overflow-y:auto; padding:10px 10px 40px 10px; font-size:13px; line-height:1.4; }
body.page-mobile-player .chat-line{ margin-bottom:4px; word-wrap:break-word; }
body.page-mobile-player .u{ font-weight:700; color:#a970ff; margin-right:4px; }
body.page-mobile-player .m{ color:#efeff1; }
body.page-mobile-player .t{ color:#555; font-size:10px; margin-right:4px; }

@media (orientation: landscape){
  body.page-mobile-player{ flex-direction: row; }
  body.page-mobile-player .video-container{ flex: 3; }
  body.page-mobile-player .chat-container{ flex: 1; border-top:none; border-left:1px solid #333; }
}
/* CHAT_EXPORT */
body.page-chat-export{ background: #0e0e10; color: #efeff1; font-family: 'Segoe UI', Helvetica, Arial, sans-serif; padding: 40px; margin: 0; }
  body.page-chat-export .container{ max-width: 800px; margin: 0 auto; }
  body.page-chat-export h1{ color: #fff; border-bottom: 1px solid #333; padding-bottom: 20px; }
  body.page-chat-export .vod-group{ margin-bottom: 40px; background: #18181b; border-radius: 8px; overflow: hidden; border: 1px solid #333; }
  body.page-chat-export .vod-header{ background: #1f1f23; padding: 15px 20px; font-weight: bold; color: #a970ff; border-bottom: 1px solid #333; display: flex; justify-content: space-between; }
  body.page-chat-export .chat-list{ padding: 10px 0; }
  body.page-chat-export .chat-line{ padding: 4px 20px; display: flex; gap: 10px; line-height: 1.5; font-size: 14px; }
  body.page-chat-export .chat-line:hover{ background: #1f1f23; }
  body.page-chat-export .time{ color: #adadb8; font-family: monospace; font-size: 12px; min-width: 60px; }
  body.page-chat-export .user{ font-weight: 700; color: #efeff1; }
  body.page-chat-export .msg{ color: #efeff1; word-break: break-word; }
  body.page-chat-export .footer{ margin-top: 50px; color: #555; font-size: 12px; text-align: center; }
/* SEARCH */
body.page-search *{ box-sizing: border-box; }
      body.page-search{
        margin: 0;
        font-family: 'Sora', sans-serif;
        background-color: var(--bg-deep);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.1), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(14, 165, 233, 0.1), transparent 25%);
        background-size: 200% 200%;
        animation: bg-pulse 20s ease infinite;
        color: var(--text);
        min-height: 100vh;
        display: flex;
      }
      @keyframes bg-pulse{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
      
      body.page-search ::-webkit-scrollbar{ width: 6px; height: 6px; }
      body.page-search ::-webkit-scrollbar-track{ background: transparent; }
      body.page-search ::-webkit-scrollbar-thumb{ background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
      body.page-search ::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.2); }
      
      body.page-search a{ text-decoration: none; color: inherit; transition: 0.2s; }
      
      body.page-search .sidebar{ width: 280px; background: rgba(3,3,5,0.6); backdrop-filter: blur(12px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 32px; flex-shrink: 0; }
      body.page-search .brand{ font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: white; margin-bottom: 48px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
      body.page-search .nav-item{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--text-muted); text-decoration: none; border-radius: 14px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 500; }
      body.page-search .nav-item:hover{ background: var(--glass-hover); color: white; transform: translateX(4px); }
      body.page-search .nav-item.active{ background: rgba(245, 158, 11, 0.15); color: white; border: 1px solid rgba(245, 158, 11, 0.2); }
      
      body.page-search .main{ flex: 1; padding: 40px 60px; overflow-y: auto; animation: fade-in 0.5s ease-out; }
      @keyframes fade-in{ from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      body.page-search .header{ margin-bottom: 48px; }
      body.page-search .page-title{ font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
      
      body.page-search .panel{ background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(10px); margin-bottom: 24px; }
      
      body.page-search input{ background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: white; padding: 12px 16px; border-radius: 12px; outline: none; width: 100%; transition: 0.2s; font-size: 16px; }
      body.page-search input:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
      
      body.page-search button{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 12px 24px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; border: none; transition: 0.3s; margin-top: 16px; }
      body.page-search button:hover{ transform: scale(1.02); box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
      
      body.page-search table{ width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 20px; }
      body.page-search th, body.page-search td{ padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--border); }
      body.page-search th{ color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
      body.page-search tr:hover{ background: rgba(255,255,255,0.02); }
      
      body.page-search .link-btn{ color: var(--accent); font-weight: 600; }
      body.page-search .link-btn:hover{ text-decoration: underline; }
      
      @media (max-width: 768px){ body.page-search{ flex-direction: column; } body.page-search .sidebar{ width: 100%; padding: 16px; } body.page-search .main{ padding: 20px; } }

@keyframes spin { 100% { transform: rotate(360deg); } }

/* APP REDESIGN 2026 */
:root {
  --sr-bg: #070808;
  --sr-bg-soft: #0d1010;
  --sr-surface: rgba(18, 22, 22, 0.94);
  --sr-surface-2: rgba(24, 29, 29, 0.92);
  --sr-line: rgba(226, 232, 240, 0.12);
  --sr-line-strong: rgba(226, 232, 240, 0.2);
  --sr-text: #f3f4f0;
  --sr-text-2: #c8d1cc;
  --sr-muted: #8f9c96;
  --sr-warm: #f28c28;
  --sr-warm-2: #ffb15f;
  --sr-cyan: #49c7c0;
  --sr-green: #5bd39a;
  --sr-red: #ff6b5f;
  --sr-radius: 8px;
  --sr-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  --primary: var(--sr-warm);
  --primary-hover: #d96f19;
  --accent: var(--sr-cyan);
  --text: var(--sr-text);
  --text-main: var(--sr-text);
  --text-muted: var(--sr-muted);
  --border: var(--sr-line);
  --card: var(--sr-surface);
  --glass: var(--sr-surface);
  --glass-hover: rgba(255, 255, 255, 0.06);
  --radius: var(--sr-radius);
}

body:is(.page-index,.page-channels,.page-streamer,.page-vod,.page-live,.page-admin,.page-files,.page-search,.page-discord-tool,.page-hls) {
  background:
    linear-gradient(135deg, rgba(242, 140, 40, 0.06), transparent 26%),
    linear-gradient(215deg, rgba(73, 199, 192, 0.055), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 42px),
    linear-gradient(180deg, #070808 0%, #0a0d0d 42%, #070808 100%) !important;
  color: var(--sr-text) !important;
  font-family: 'Sora', sans-serif !important;
  min-height: 100vh;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .sidebar {
  width: 252px !important;
  padding: 18px 14px !important;
  background: linear-gradient(180deg, rgba(10, 12, 12, 0.98), rgba(10, 12, 12, 0.9)) !important;
  border-right: 1px solid var(--sr-line) !important;
  box-shadow: 18px 0 42px rgba(0, 0, 0, 0.22);
  backdrop-filter: none !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .brand {
  margin: 0 0 22px !important;
  padding: 10px 10px 18px !important;
  border-bottom: 1px solid var(--sr-line);
  color: var(--sr-text) !important;
  font-family: 'Fraunces', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item {
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: var(--sr-text-2) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transform: none !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item:hover {
  color: var(--sr-text) !important;
  background: rgba(255,255,255,0.055) !important;
  border-color: var(--sr-line) !important;
  transform: none !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item.active {
  color: #11100d !important;
  background: linear-gradient(135deg, var(--sr-warm), var(--sr-warm-2)) !important;
  border-color: rgba(255, 207, 151, 0.35) !important;
  box-shadow: 0 12px 24px rgba(242, 140, 40, 0.16);
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .main {
  padding: 28px 34px !important;
  background: transparent !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .header {
  margin: 0 0 22px !important;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--sr-line);
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .page-title {
  color: var(--sr-text) !important;
  font-family: 'Fraunces', serif !important;
  font-size: 34px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .page-subtitle,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .muted {
  color: var(--sr-muted) !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
body.page-index .stat-card,
body.page-index .card,
body.page-streamer .panel,
body.page-streamer .video-card,
body.page-files .upload-section,
body.page-files .file-card,
body.page-live .controls-panel,
body.page-live .chat-panel,
body.page-vod .controls-panel,
body.page-vod .chat-panel,
body.page-discord-tool .profile-card,
body.page-discord-tool .grid-item,
body.page-discord-tool .token-item {
  background: linear-gradient(180deg, rgba(22, 27, 27, 0.96), rgba(14, 17, 17, 0.96)) !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: none !important;
}

body:is(.page-index,.page-channels,.page-admin,.page-files,.page-search,.page-discord-tool) .panel,
body.page-files .upload-section {
  padding: 22px !important;
}

body.page-index .stats-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 26px !important;
}

body.page-index .stat-card {
  min-height: 150px !important;
  padding: 18px !important;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body.page-index .stat-card:hover,
body.page-index .card:hover,
body.page-streamer .video-card:hover,
body.page-files .file-card:hover {
  border-color: rgba(242, 140, 40, 0.38) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34) !important;
}

body.page-index .stat-head,
body.page-index .card-header {
  gap: 12px;
}

body.page-index .stat-label,
body.page-index .stat-sub,
body.page-index .stat-box-label,
body.page-streamer .video-meta,
body.page-files .file-desc,
body.page-files .upload-text {
  color: var(--sr-muted) !important;
}

body.page-index .stat-value,
body.page-index .stat-box-val,
body.page-streamer .video-title,
body.page-files .file-name {
  color: var(--sr-text) !important;
}

body.page-index .streamer-grid,
body.page-streamer .video-grid,
body.page-files .files-grid,
body.page-discord-tool .grid-list {
  gap: 16px !important;
}

body.page-index .card,
body.page-streamer .video-card,
body.page-files .file-card {
  overflow: hidden;
}

body.page-index .avatar,
body.page-index .avatar img,
body.page-discord-tool .item-icon,
body.page-files .file-icon {
  border-radius: 8px !important;
}

body.page-index .avatar {
  background: linear-gradient(135deg, rgba(242, 140, 40, 0.28), rgba(73, 199, 192, 0.2)) !important;
}

body.page-index .status-badge,
body.page-streamer .status-badge,
body.page-index .badge,
body.page-streamer .badge,
body.page-files .file-size {
  border-radius: 999px !important;
  border: 1px solid var(--sr-line) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--sr-text-2) !important;
}

body.page-index .status-badge.live,
body.page-streamer .status-badge.live,
body.page-mobile-index .live-badge {
  background: rgba(255, 107, 95, 0.18) !important;
  border-color: rgba(255, 107, 95, 0.36) !important;
  color: #ffb6ad !important;
}

body.page-index .status-badge.online,
body.page-streamer .status-badge.online {
  background: rgba(91, 211, 154, 0.14) !important;
  border-color: rgba(91, 211, 154, 0.28) !important;
  color: #9df0c3 !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) input,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) select,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) textarea,
body.page-files .input-field {
  min-height: 40px !important;
  border-radius: 8px !important;
  border: 1px solid var(--sr-line) !important;
  background: rgba(5, 7, 7, 0.78) !important;
  color: var(--sr-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) input:focus,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) select:focus,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) textarea:focus,
body.page-files .input-field:focus {
  border-color: rgba(73, 199, 192, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(73, 199, 192, 0.12) !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-action,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-primary {
  border-radius: 8px !important;
  border: 1px solid var(--sr-line) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--sr-text) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) button:hover,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn:hover,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-action:hover,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--sr-line-strong) !important;
  transform: translateY(-1px) !important;
}

body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .btn-primary,
body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .action-btn.primary,
body.page-files .btn-primary {
  background: linear-gradient(135deg, var(--sr-warm), var(--sr-warm-2)) !important;
  border-color: rgba(255, 207, 151, 0.36) !important;
  color: #15100a !important;
  font-weight: 800 !important;
}

body.page-streamer .tabs,
body.page-admin .tabs,
body.page-discord-tool .tabs {
  gap: 6px !important;
  padding: 4px !important;
  border: 1px solid var(--sr-line) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.035) !important;
  width: fit-content;
}

body.page-streamer .tab,
body.page-admin .tab,
body.page-discord-tool .tab {
  border-radius: 6px !important;
  border: 0 !important;
  padding: 9px 13px !important;
  color: var(--sr-muted) !important;
  margin: 0 !important;
}

body.page-streamer .tab.active,
body.page-admin .tab.active,
body.page-discord-tool .tab.active {
  background: var(--sr-surface-2) !important;
  color: var(--sr-text) !important;
}

body.page-streamer .thumb-wrap {
  background: #020303 !important;
  border-bottom: 1px solid var(--sr-line);
}

body.page-streamer .thumb-img {
  filter: saturate(1.04) contrast(1.04);
}

body.page-streamer .duration-badge,
body.page-mobile-streamer .dur {
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.78) !important;
  border: 1px solid rgba(255,255,255,0.12);
}

body.page-streamer .card-body {
  padding: 14px !important;
}

body.page-vod,
body.page-live,
body.page-hls,
body.page-clip-editor {
  background:
    linear-gradient(180deg, #050606 0%, #0a0d0d 100%) !important;
  color: var(--sr-text) !important;
}

body.page-vod header,
body.page-live header,
body.page-clip-editor header {
  background: rgba(8, 10, 10, 0.96) !important;
  border-bottom: 1px solid var(--sr-line) !important;
}

body.page-vod .player-wrapper,
body.page-live .player-wrapper,
body.page-hls video,
body.page-clip-editor .player-container {
  border-radius: 8px !important;
  background: #000 !important;
  border: 1px solid var(--sr-line) !important;
  box-shadow: var(--sr-shadow) !important;
}

body.page-vod .chat-header,
body.page-live .chat-header {
  background: rgba(255,255,255,0.035) !important;
  border-bottom: 1px solid var(--sr-line) !important;
}

body.page-vod .chat-line,
body.page-live .chat-line {
  border-radius: 6px;
}

body.page-vod .chat-line:hover,
body.page-live .chat-line:hover {
  background: rgba(255,255,255,0.045);
}

body.page-admin table,
body.page-search table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

body.page-admin th,
body.page-search th {
  color: var(--sr-muted) !important;
  background: rgba(255,255,255,0.035);
  letter-spacing: 0 !important;
}

body.page-admin td,
body.page-admin th,
body.page-search td,
body.page-search th {
  border-bottom: 1px solid var(--sr-line) !important;
}

body.page-files .upload-dropzone {
  border-radius: 8px !important;
  border-color: var(--sr-line) !important;
  background: rgba(255,255,255,0.035) !important;
}

body.page-files .upload-dropzone:hover {
  border-color: rgba(73, 199, 192, 0.5) !important;
  background: rgba(73, 199, 192, 0.06) !important;
}

body.page-mobile-index,
body.page-mobile-streamer {
  background: #080a0a !important;
  color: var(--sr-text) !important;
  font-family: 'Sora', sans-serif !important;
}

body.page-mobile-index .header,
body.page-mobile-streamer .header,
body.page-mobile-streamer .controls,
body.page-mobile-index .nav {
  background: rgba(12, 15, 15, 0.96) !important;
  border-color: var(--sr-line) !important;
}

body.page-mobile-index .card,
body.page-mobile-streamer .video-card,
body.page-mobile-streamer .tab {
  background: var(--sr-surface) !important;
  border-color: var(--sr-line) !important;
  border-radius: 8px !important;
}

body.page-mobile-streamer .tab.active,
body.page-mobile-streamer .btn-primary,
body.page-mobile-index .nav a.active {
  color: var(--sr-warm-2) !important;
}

@media (max-width: 900px) {
  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) {
    flex-direction: column !important;
  }
  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .sidebar {
    width: 100% !important;
    padding: 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--sr-line) !important;
  }
  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .brand {
    padding: 4px 8px 10px !important;
    margin-bottom: 10px !important;
  }
  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) nav {
    flex-direction: row !important;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .nav-item {
    white-space: nowrap;
    min-height: 38px !important;
  }
  body:is(.page-index,.page-channels,.page-streamer,.page-admin,.page-files,.page-search,.page-discord-tool) .main {
    padding: 18px !important;
  }
  body.page-index .stats-grid {
    grid-template-columns: 1fr !important;
  }
}