:root{
      --bg:#0d0f10; 
      --surface:#151718; 
      --text:#e8e8e8;
      --accent:#00fff0; 
      --accent2:#2EC4B6;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
        margin:0;
        background:var(--bg);
        color:var(--text);
        font-family:Poppins,system-ui,Arial,sans-serif
    }

    .topbar{
      position:sticky; 
      top:0; 
      z-index:5;
      display:flex; 
      align-items:center; 
      gap:10px;
      padding:12px 16px;
      background:rgba(8,10,11,.86);
      border-bottom:1px solid #111; 
      backdrop-filter: blur(8px);
    }

    .title{
        flex:1; 
        font-weight:700
    }

    .btn{
      display:inline-flex; 
      align-items:center; 
      gap:8px;
      padding:10px 14px; 
      border-radius:10px; 
      text-decoration:none;
      color:#041414; 
      background:var(--accent);
      border:1px solid var(--accent); 
      transition:.2s;
    }
    .btn.ghost{ 
        background:transparent; 
        color:var(--text);
        border-color:rgba(255,255,255,.12) 
    }
    .btn:hover{ 
        transform:translateY(-2px); 
        box-shadow:0 0 12px rgba(0,255,240,.35)
    }
    .viewer{
      height: calc(100% - 60px);
      display:grid; 
      place-items:center; 
      padding:16px;
    }
    .frame{
      width:min(1200px, 96vw); 
      height: min(85vh, 900px);
      border:1px solid #1b1f22; 
      border-radius:14px; 
      overflow:hidden;
      background:#0f1213; 
      box-shadow: 0 0 24px rgba(0,255,240,.10);
    }
    .empty{
        opacity:.8; 
        text-align:center; 
        max-width:720px; 
        line-height:1.7
    }

    .meta{
        color:#a9e9e3; 
        margin-left:4px
    }