:root{
    --ink:#1B2A26;
    --ink-soft:#24372F;
    --ink-softer:#2E443B;
    --parchment:#F3ECDD;
    --parchment-dim:#E8DEC7;
    --parchment-dimmer:#DCCFAF;
    --gold:#C9A227;
    --gold-soft:#E0C674;
    --soprano:#D98C92;
    --alto:#CF8A47;
    --tenor:#6E9887;
    --bass:#3D5A6C;
    --danger:#B3473C;
    --success:#5C8A5C;
    --text-on-ink:#F3ECDD;
    --text-on-parchment:#1B2A26;
    --muted:#6B6155;
    --radius:10px;
    --shadow:0 2px 10px rgba(27,42,38,0.08);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--parchment);
    color:var(--text-on-parchment);
    font-family:'Work Sans', sans-serif;
    min-height:100vh;
    line-height:1.5;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  .mono{font-family:'JetBrains Mono', monospace;}
  button{
    font-family:'Work Sans', sans-serif;
    cursor:pointer;
    border:none;
    background:none;
  }
  a{color:inherit;}
  input,select,textarea{
    font-family:'Work Sans', sans-serif;
    font-size:0.95rem;
    border:1px solid var(--parchment-dimmer);
    background:#fff;
    border-radius:6px;
    padding:0.55rem 0.7rem;
    color:var(--text-on-parchment);
    width:100%;
  }
  input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
  label{
    display:block;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--muted);
    margin-bottom:0.3rem;
    font-weight:600;
  }
  .field{margin-bottom:0.9rem;}
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.4rem;
    padding:0.6rem 1.1rem;
    border-radius:7px;
    font-weight:600;
    font-size:0.92rem;
    transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  }
  .btn-primary{background:var(--ink); color:var(--text-on-ink);}
  .btn-primary:hover{background:var(--ink-soft); transform:translateY(-1px);}
  .btn-gold{background:var(--gold); color:var(--ink);}
  .btn-gold:hover{background:var(--gold-soft); transform:translateY(-1px);}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--parchment-dimmer);}
  .btn-ghost:hover{background:var(--parchment-dim);}
  .btn-danger{background:transparent; color:var(--danger); border:1px solid rgba(179,71,60,0.3);}
  .btn-danger:hover{background:rgba(179,71,60,0.08);}
  .btn-sm{padding:0.4rem 0.75rem; font-size:0.82rem;}
  .btn:disabled{opacity:0.5; cursor:not-allowed; transform:none;}

  /* ---------- Loading ---------- */
  .loading-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--ink); color:var(--text-on-ink); flex-direction:column; gap:1rem;
  }
  .loading-stave{width:140px; height:60px;}

  /* ---------- Login ---------- */
  .login-wrap{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.1fr 1fr;
  }
  @media (max-width:860px){
    .login-wrap{grid-template-columns:1fr;}
    .login-hero{min-height:240px;}
  }
  .login-hero{
    background:var(--ink);
    color:var(--text-on-ink);
    padding:3rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .login-hero .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--gold-soft);
    margin-bottom:0.9rem;
  }
  .login-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; max-width:9.5ch;}
  .login-hero p{max-width:34ch; color:var(--parchment-dim); margin-top:1rem; font-size:1.02rem;}
  .stave{position:absolute; left:0; right:0; opacity:0.5;}
  .stave-note{
    animation:bob 5s ease-in-out infinite;
  }
  @keyframes bob{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
  }
  @media (prefers-reduced-motion: reduce){
    .stave-note{animation:none;}
  }
  .login-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2.5rem 1.5rem;
  }
  .login-card{width:100%; max-width:380px;}
  .login-tabs{
    display:flex;
    border:1px solid var(--parchment-dimmer);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:1.6rem;
  }
  .login-tab{
    flex:1;
    padding:0.65rem;
    text-align:center;
    font-weight:600;
    font-size:0.9rem;
    background:#fff;
    color:var(--muted);
  }
  .login-tab.active{background:var(--ink); color:var(--text-on-ink);}
  .login-card h2{font-size:1.4rem; margin-bottom:0.3rem;}
  .login-sub{color:var(--muted); font-size:0.88rem; margin-bottom:1.4rem;}
  .password-input-wrap{position:relative;}
  .password-input-wrap input{padding-right:2.8rem;}
  .password-toggle{
    position:absolute;
    top:50%;
    right:0.45rem;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:2rem;
    height:2rem;
    padding:0;
    border-radius:5px;
    color:var(--muted);
  }
  .password-toggle:hover{color:var(--ink); background:var(--parchment);}
  .password-toggle svg{width:1.2rem; height:1.2rem;}
  .password-toggle .eye-hide{display:none;}
  .password-toggle[aria-pressed="true"] .eye-show{display:none;}
  .password-toggle[aria-pressed="true"] .eye-hide{display:block;}
  .error-banner{
    background:rgba(179,71,60,0.1);
    border:1px solid rgba(179,71,60,0.3);
    color:var(--danger);
    padding:0.6rem 0.8rem;
    border-radius:7px;
    font-size:0.85rem;
    margin-bottom:1rem;
  }

  /* ---------- App shell ---------- */
  .app-header{
    background:var(--ink);
    color:var(--text-on-ink);
    padding:1.1rem 1.6rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0.8rem;
  }
  .app-header .brand{display:flex; align-items:baseline; gap:0.6rem;}
  .app-header .brand h1{font-size:1.3rem; color:var(--text-on-ink);}
  .app-header .brand .tag{font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--gold-soft); text-transform:uppercase; letter-spacing:0.08em;}
  .header-right{display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap;}
  .who{font-size:0.88rem; color:var(--parchment-dim);}
  .who b{color:var(--text-on-ink);}

  .container{max-width:980px; margin:0 auto; padding:1.8rem 1.6rem 4rem;}

  .tabs{display:flex; gap:0.4rem; margin-bottom:1.6rem; border-bottom:1px solid var(--parchment-dimmer); flex-wrap:wrap;}
  .tab-btn{
    padding:0.6rem 1rem;
    font-weight:600;
    font-size:0.92rem;
    color:var(--muted);
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
  }
  .tab-btn.active{color:var(--ink); border-bottom-color:var(--gold);}

  .section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; flex-wrap:wrap; gap:0.7rem;}
  .section-head h2{font-size:1.5rem;}

  .card{
    background:#fff;
    border:1px solid var(--parchment-dimmer);
    border-radius:var(--radius);
    padding:1.3rem;
    margin-bottom:1rem;
    box-shadow:var(--shadow);
  }
  .empty-state{
    text-align:center;
    padding:3rem 1.5rem;
    color:var(--muted);
    border:1px dashed var(--parchment-dimmer);
    border-radius:var(--radius);
  }
  .empty-state h3{color:var(--text-on-parchment); margin-bottom:0.4rem;}

  /* chips */
  .chip{
    display:inline-flex;
    align-items:center;
    font-size:0.78rem;
    font-weight:600;
    padding:0.22rem 0.6rem;
    border-radius:99px;
    background:var(--parchment-dim);
    color:var(--ink);
    white-space:nowrap;
  }
  .chip-dot{width:8px; height:8px; border-radius:50%; background:var(--chip-color, var(--gold)); margin-right:0.4rem; flex-shrink:0;}
  .voice-filter-row{display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.4rem;}
  .voice-filter-btn{
    display:inline-flex; align-items:center; gap:0.4rem;
    padding:0.4rem 0.8rem; border-radius:99px;
    border:1px solid var(--parchment-dimmer);
    background:#fff; font-size:0.85rem; font-weight:600; color:var(--muted);
  }
  .voice-filter-btn.active{border-color:var(--ink); background:var(--ink); color:var(--text-on-ink);}
  .voice-filter-btn.active .chip-dot{outline:2px solid rgba(255,255,255,0.5);}

  /* rating bar */
  .rating-bar{display:flex; align-items:center; gap:0.6rem;}
  .rating-track{flex:1; height:7px; background:var(--parchment-dim); border-radius:4px; overflow:hidden;}
  .rating-fill{height:100%; background:linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius:4px;}
  .rating-num{font-family:'JetBrains Mono', monospace; font-size:0.85rem; font-weight:500; white-space:nowrap;}
  .rating-bar.empty .rating-track{background:var(--parchment-dim);}
  .rating-empty-label{font-size:0.82rem; color:var(--muted); font-style:italic;}

  .avg-badge{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--ink); color:var(--text-on-ink);
    border-radius:50%;
    width:88px; height:88px;
    border:3px solid var(--gold);
    flex-shrink:0;
  }
  .avg-badge .num{font-family:'Fraunces', serif; font-size:1.7rem; font-weight:700; line-height:1;}
  .avg-badge .lbl{font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-soft); margin-top:0.15rem;}
  .rank-badge{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--badge-bg); color:var(--badge-text);
    border-radius:99px; padding:0.22rem 0.6rem;
    font-size:0.74rem; font-weight:700; white-space:nowrap;
    margin-left:0.45rem;
  }
  .rank-badge.compact{margin:0.25rem 0 0; font-size:0.7rem;}
  .member-score{min-width:160px; text-align:right; display:flex; align-items:center; justify-content:flex-end; gap:0.35rem; flex-wrap:wrap;}

  .member-hero{display:flex; align-items:center; gap:1.2rem; margin-bottom:1.8rem; flex-wrap:wrap;}
  .member-hero h2{font-size:1.6rem; margin-bottom:0.2rem;}

  /* song card (member view) */
  .song-card{margin-bottom:1.1rem;}
  .song-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:0.9rem;}
  .song-title{font-size:1.15rem;}
  .deadline-badge{font-family:'JetBrains Mono', monospace; font-size:0.76rem; padding:0.25rem 0.55rem; border-radius:5px; white-space:nowrap;}
  .deadline-badge.overdue{background:rgba(179,71,60,0.12); color:var(--danger);}
  .deadline-badge.today{background:rgba(201,162,39,0.18); color:#8a6c14;}
  .deadline-badge.soon{background:rgba(201,162,39,0.12); color:#8a6c14;}
  .deadline-badge.future{background:var(--parchment-dim); color:var(--muted);}
  .deadline-badge.muted{background:var(--parchment-dim); color:var(--muted);}

  .track-links{display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.9rem;}
  .track-link{
    display:inline-flex; align-items:center; gap:0.45rem;
    padding:0.45rem 0.75rem; border-radius:7px;
    background:var(--ink); color:var(--text-on-ink);
    font-size:0.85rem; font-weight:600; text-decoration:none;
  }
  .track-link:hover{background:var(--ink-soft);}
  .track-link.disabled{background:var(--parchment-dim); color:var(--muted); pointer-events:none;}
  .upload-form{
    background:var(--parchment);
    border:1px solid var(--parchment-dimmer);
    border-radius:8px;
    padding:0.85rem;
    margin-top:0.9rem;
  }
  .upload-actions{display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap;}
  .submission-player{display:grid; gap:0.35rem; min-width:180px;}
  .submission-player audio{width:220px; max-width:100%;}

  .notes-block{
    background:var(--parchment);
    border-left:3px solid var(--gold);
    padding:0.7rem 0.9rem;
    border-radius:0 6px 6px 0;
    font-size:0.9rem;
    margin-top:0.7rem;
    font-style:italic;
    color:var(--ink-soft);
  }

  /* admin lists */
  .list-row{
    display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap;
    padding:0.85rem 0; border-bottom:1px solid var(--parchment-dim);
  }
  .list-row:last-child{border-bottom:none;}
  .list-row .grow{flex:1; min-width:160px;}
  .list-row .name{font-weight:600;}
  .list-row .sub{font-size:0.8rem; color:var(--muted);}
  .row-actions{display:flex; gap:0.4rem;}

  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0.9rem 1rem;}
  @media (max-width:600px){.form-grid{grid-template-columns:1fr;}}
  .form-actions{display:flex; gap:0.6rem; margin-top:0.4rem;}

  .url-field-label{display:flex; align-items:center; gap:0.4rem; margin-bottom:0.3rem;}

  table{width:100%; border-collapse:collapse;}
  .rate-table th{text-align:left; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); padding:0 0.5rem 0.5rem; font-weight:600;}
  .rate-table td{padding:0.6rem 0.5rem; border-top:1px solid var(--parchment-dim); vertical-align:top;}
  .rate-table input[type=number]{width:96px;}
  .rate-table textarea{min-height:42px; resize:vertical;}
  .field-error{color:var(--danger); font-size:0.8rem; margin-top:0.35rem;}

  .toast{
    position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--text-on-ink);
    padding:0.65rem 1.1rem; border-radius:8px; font-size:0.85rem;
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
    z-index:50; display:flex; align-items:center; gap:0.5rem;
    border:1px solid var(--gold);
  }

  .stack-sm > * + *{margin-top:0.6rem;}
  .muted-text{color:var(--muted); font-size:0.88rem;}
  .small-link{font-size:0.82rem; text-decoration:underline; color:var(--text-on-ink); opacity:0.85;}
  .small-link:hover{opacity:1;}
  .inline-form{background:var(--parchment); border:1px solid var(--parchment-dimmer); border-radius:8px; padding:1rem; margin-bottom:1rem;}


/* Added for the Laravel version: anchors reused as nav tabs / filter buttons */
.hidden{ display:none !important; }
.tab-btn{ text-decoration:none; }
.voice-filter-btn{ text-decoration:none; }