:root{
      --bg-1: #070707;
      --bg-2: #0f0f0f;
      --panel: rgba(255,255,255,0.03);
      --glass: rgba(255,255,255,0.04);
      --muted: rgba(255,255,255,0.6);
      --accent: #6eff3a; /* neon green */
      --accent-2: #00ffb3;
      --radius: 14px;
      --max-w: 1200px;
      --elev: 18px;
    }

    :root[data-theme='light']{
      --bg-1: #f7f7f8;
      --bg-2: #ececec;
      --panel: rgba(0,0,0,0.04);
      --glass: rgba(255,255,255,0.7);
      --muted: rgba(0,0,0,0.6);
      --accent: #ff0066;
      --accent-2: #ff7a99;
    }

    /* Basic reset */
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;color:#eaeaea;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));}

    /* subtle grain using layered gradients */
    body::after{
      content:"";position:fixed;inset:0;pointer-events:none;opacity:0.035;background-image:linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,0.02) 1px, transparent 1px);background-size:10px 10px, 10px 10px;mix-blend-mode:overlay;
    }

    /* App container - centered */
    .app{max-width:var(--max-w);margin:28px auto;padding:20px;display:grid;grid-template-columns:320px 1fr 360px;grid-template-rows:auto 1fr;gap:18px;align-items:start}

    /* Header */
    header{grid-column:1/-1;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:14px}
    .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;color:#001a00;font-weight:800;font-family:'Playfair Display',serif}
    h1{margin:0;font-size:18px;letter-spacing:0.4px}
    .subtitle{font-size:12px;color:var(--muted)}

    /* Left column - small nav / info */
    .left{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.06));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
    .left h4{margin:0 0 8px 0}
    .mini-stats{display:flex;flex-direction:column;gap:8px}
    .stat{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

    /* Center column - characters grid */
    .chars-panel{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));border:1px solid rgba(255,255,255,0.02)}
    .chars-panel h3{margin-top:0;text-align:center;color:var(--muted)}
    .chars-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      padding-top:10px;
      /* center the grid cells so cards sit centered in each column */
      justify-items: center;
      align-items: start;
    }

    /* Card layout - centered content */
    .card{
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:center; /* center children horizontally */
      padding:14px;
      border-radius:12px;
      background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.08));
      border:1px solid rgba(255,255,255,0.02);
      transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s;
      position:relative;
      overflow:hidden;
      /* make cards a fixed max width and centered in their grid cell */
      width:100%;
      max-width:760px;
      margin:0 auto;
      text-align:center; /* center text fallback */
    }
    .card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(0,0,0,0.6)}

    /* Cover image container */
    .cover{
      width:200px;
      height:200px;
      border-radius:12px;
      flex:0 0 200px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.03);
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(255,255,255,0.01));
      padding:12px;
      margin:0; /* no auto here; grid already centers card */
    }
    .cover img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      display:block;
      margin:0 auto; /* ensure image itself centers inside the cover */
    }

    /* Info column - center content */
    .info{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:center; /* center children horizontally */
      justify-content:center;
      text-align:center; /* center text */
      min-width:0; /* prevent overflow */
    }
    .info .title{font-weight:700;color:#fff}
    .info .desc{color:var(--muted);font-size:13px}

    /* Controls centered */
    .controls{display:flex;align-items:center;gap:8px;justify-content:center}
    .btn-play{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#001b00;border:none;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,0.5)}
    .small-select{padding:6px;border-radius:8px;border:none;background:rgba(0,0,0,0.06);color:inherit}

    /* equalizer indicator */
    .eq{width:18px;height:16px;display:inline-grid;grid-auto-flow:column;gap:2px;align-items:end}
    .eq span{display:block;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-2));height:6px;border-radius:2px;opacity:0.9;transform-origin:bottom;transition:height .12s linear}

    /* Right column - player + settings */
    .player{position:sticky;top:24px;padding:16px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.02)}
    .player .now{display:flex;gap:12px;align-items:center}
    .now .thumb{width:84px;height:84px;border-radius:10px;overflow:hidden}
    .now .thumb img{width:100%;height:100%;object-fit:cover}
    .track-meta{flex:1}
    .track-meta h2{margin:0 0 6px 0;font-size:16px}
    .track-meta .sub{color:var(--muted);font-size:13px}

    .player .main-controls{display:flex;align-items:center;gap:8px;margin-top:10px}
    .control-big{padding:10px 14px;border-radius:12px;border:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#001b00;font-weight:800;cursor:pointer}
    .control-ghost{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted)}

    .progress-wrap{margin-top:12px}
    .progress{height:10px;background:rgba(255,255,255,0.03);border-radius:10px;overflow:hidden}
    .progress > div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 4px 18px rgba(0,0,0,0.6)}
    .time-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}

    /* Settings form inside player */
    .settings{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(255,255,255,0.03)}
    .settings label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
    .settings input[type='text'],.settings select,.settings input[type='color']{width:100%;padding:8px;border-radius:10px;border:none;background:rgba(0,0,0,0.04);color:inherit}
    .save-btn{margin-top:10px;width:100%;padding:10px;border-radius:12px;border:none;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#001b00;font-weight:800;cursor:pointer}

    footer{grid-column:1/-1;padding-top:8px;text-align:center;color:var(--muted);font-size:13px}

    /* responsive */
    @media (max-width:1100px){
      .app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;gap:14px}
      header{justify-content:center}
      .player{position:relative}
      .chars-grid{grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width:640px){
      .chars-grid{grid-template-columns:1fr}
      .card{flex-direction:column;align-items:center;text-align:center}
      .cover{width:100%;height:240px;flex:0 0 auto;padding:8px}
      .now .thumb{width:72px;height:72px}
      .info{width:100%}
    }

    /* Overrides to increase spacing and image sizes (kept but centered now) */
    .chars-grid{grid-template-columns:repeat(2,minmax(380px,1fr)) !important; gap:28px !important;}
    .card{gap:28px !important; padding:18px !important;}
    .cover{width:200px;height:200px;flex:0 0 200px;padding:12px;margin:0;}
    .cover img{max-width:100%;max-height:100%;object-fit:contain;display:block;margin:0 auto;}
    @media (max-width:1100px){ .chars-grid{grid-template-columns:repeat(2,minmax(300px,1fr))} }
    @media (max-width:640px){ .cover{height:240px;width:100%;padding:8px;margin:0} .card{gap:16px} }