/* MIXED CSS PACK */
/* Template: humclubdemusica/encoded/index.php */
/* Template mtime: 2026-05-20 17:55:32 */

/* ===== INLINE <style> BLOCK #1 ===== */
:root{
      --bg:#070b14;
      --card:#101827;
      --line:rgba(255,255,255,.14);
      --text:#f8fafc;
      --muted:#a9b4c8;
      --accent:#7c5cff;
      --accent2:#00d4ff;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      padding:24px;
      background:
        radial-gradient(circle at 15% 10%, rgba(124,92,255,.28), transparent 34%),
        radial-gradient(circle at 85% 90%, rgba(0,212,255,.16), transparent 32%),
        var(--bg);
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }
    .wrap{width:min(980px,100%);margin:0 auto;padding:32px 0}
    .card{
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
      border:1px solid var(--line);
      border-radius:26px;
      padding:28px;
      box-shadow:0 26px 90px rgba(0,0,0,.42);
      backdrop-filter:blur(14px);
    }
    .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
    h1{margin:0 0 8px;font-size:clamp(28px,5vw,44px);letter-spacing:-.045em;line-height:1}
    p{margin:0;color:var(--muted);line-height:1.55}
    form{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
    input{
      flex:1 1 220px;
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(255,255,255,.08);
      color:var(--text);
      padding:15px 16px;
      outline:none;
      font-size:16px;
    }
    button,.btn{
      border:0;
      border-radius:16px;
      padding:15px 18px;
      color:#fff;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      cursor:pointer;
      font-weight:900;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .logout{background:rgba(255,255,255,.08);border:1px solid var(--line)}
    .error{margin-top:14px;color:#ffd0d8;background:rgba(255,92,122,.12);border:1px solid rgba(255,92,122,.28);padding:12px 14px;border-radius:14px}
    .list{display:grid;gap:10px;margin-top:20px}
    .file{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      border:1px solid var(--line);
      background:rgba(255,255,255,.05);
      border-radius:16px;
      padding:12px 14px;
      color:var(--text);
      text-decoration:none;
    }
    .file:hover{border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.12)}
    .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .tag{color:var(--muted);font-size:13px;white-space:nowrap}
    .empty{margin-top:18px;border:1px dashed var(--line);border-radius:18px;padding:18px;color:var(--muted)}