:root{
    --bg0: rgba(10, 14, 22, 0.88);
    --glass: rgba(255,255,255,0.08);
    --glass2: rgba(255,255,255,0.06);
    --stroke: rgba(255,255,255,0.14);
    --stroke2: rgba(255,255,255,0.10);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.62);
    --muted2: rgba(255,255,255,0.45);
    --shadow: 0 22px 70px rgba(0,0,0,0.55);
    --shadow2: 0 10px 30px rgba(0,0,0,0.35);
    --r: 22px;
    --ray-window-grad-a: rgba(7,11,18,0.98);
    --ray-window-grad-b: rgba(10,14,24,0.96);
    --ray-window-grad-c: rgba(7,11,18,0.98);
    --ray-screen-bg: rgba(27, 45, 74, 0.997);
    --ray-eq-1: rgba(94,245,255,0.95);
    --ray-eq-2: rgba(73,130,255,0.95);
    --ray-eq-3: rgba(255,92,176,0.92);
  }
  
  *{ box-sizing:border-box; }
  html, body {
    height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0;
    background:
      radial-gradient(1200px 800px at 50% 0%, rgba(60,90,180,0.25), rgba(0,0,0,0.92)),
      linear-gradient(90deg, var(--ray-window-grad-a), var(--ray-window-grad-b) 50%, var(--ray-window-grad-c));
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--text);
  }

  .device{
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
      max(18px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }
  .device-frame{
    width: 420px;
    height: 760px;
    border-radius: 38px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
    border: 1px solid rgba(255, 255, 255, 0.428);
    box-shadow:
      0 40px 120px rgba(0,0,0,0.65),
      0 0 0 1px rgba(255,255,255,0.06) inset,
      -10px -10px 30px rgba(255,255,255,0.06),
      18px 22px 50px rgba(0,0,0,0.35);
    position: relative;
  }
  .device-frame:before{
    content:"";
    position:absolute;
    inset: 8px;
    border-radius: 30px;
    pointer-events:none;
    background: radial-gradient(500px 220px at 18% 10%, rgba(255,255,255,0.18), transparent 60%);
    opacity: .85;
  }

  .device-screen{
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 30px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ray-screen-bg) 72%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.37);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.05);
    position: relative;
  }

  .raydeo{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  .device-screen .raydeo{
    height: 100%;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }

  @media (max-width: 520px){
    .device{
      padding:
        max(10px, env(safe-area-inset-top))
        max(10px, env(safe-area-inset-right))
        max(10px, env(safe-area-inset-bottom))
        max(10px, env(safe-area-inset-left));
    }
    .device-frame{
      width: min(420px, calc(100vw - 20px));
      width: min(420px, calc(100svw - 20px));
      width: min(420px, calc(100dvw - 20px));
      height: min(760px, calc(100vh - 20px));
      height: min(760px, calc(100svh - 20px));
      height: min(760px, calc(100dvh - 20px));
      border-radius: 32px;
      padding: 5px;
    }
    .device-frame::before{
      inset: 6px;
      border-radius: 27px;
    }
    .device-screen{
      border-radius: 26px;
    }
    .device-screen .raydeo{
      padding: 10px;
    }
  }
  
  /* Ambient background */
  .ray-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .ray-noise{
    position:absolute; inset:-40px;
    /* background-image: url("assets/noise.png"); */
    background-size: 240px 240px;
    opacity: 0.10;
    filter: contrast(110%);
    animation: drift 10s linear infinite;
  }
  .ray-glow{
    position:absolute; inset:-100px;
    /* background-image: url("assets/glow.png"); */
    background-size: cover;
    background-position:center;
    opacity: 0.22;
    filter: blur(2px) saturate(120%);
    animation: breathe 5.5s ease-in-out infinite;
  }
  .ray-vignette{
    position:absolute; inset:0;
    background: radial-gradient(1200px 700px at 50% 10%, rgba(255,255,255,0.06), rgba(0,0,0,0.75));
  }
  
  /* Device */
  .device-screen::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;
    background:
      radial-gradient(420px 240px at 14% 10%, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 36%, transparent 68%),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, rgba(255,255,255,0.00) 2px 6px);
    opacity: 0.9;
  }
  .device-screen::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;
    background: radial-gradient(140% 120% at 50% 18%, transparent 42%, rgba(0,0,0,0.08) 74%, rgba(0,0,0,0.16) 100%);
  }
  
  /* Header */
  .top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-text{
    position:relative;
  }
  .brand-text::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom: -9px;
    height:1.5px;
    border-radius:999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(124,190,255,0.56) 24%, rgba(255,255,255,0.92) 52%, rgba(255,120,198,0.52) 80%, rgba(255,255,255,0.00));
    box-shadow: 0 0 12px rgba(132,195,255,0.18);
    opacity:0.9;
  }
  .logo{
    width:38px; height:38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .logo img{ width:46px; height:46px; opacity:0.92; }
  .brand-text .name-row{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .brand-text .name{
    font-weight:700;
    letter-spacing:0.6px;
    font-size: 15px;
    line-height: 1.1;
  }
  .brand-region{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    font-size: 11px;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.15px;
  }
  .brand-region-sep{
    color: rgba(255,255,255,0.42);
  }
  .brand-region #pillLocation{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand-eq{
    display:flex;
    align-items:flex-end;
    gap:3px;
    height:16px;
    padding-bottom: 1px;
  }
  .brand-eq .eq-bar{
    width:3px;
    height:100%;
    border-radius:999px;
    background: linear-gradient(180deg, var(--ray-eq-1), var(--ray-eq-2) 55%, var(--ray-eq-3));
    box-shadow: 0 0 10px rgba(94,245,255,0.24);
    opacity:0.48;
    transform-origin:center bottom;
    transform: scaleY(var(--eq-level, 0.16));
    transition: transform 72ms linear, opacity .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .brand-eq .eq-bar:nth-child(1){ --eq-level: 0.14; }
  .brand-eq .eq-bar:nth-child(2){ --eq-level: 0.2; }
  .brand-eq .eq-bar:nth-child(3){ --eq-level: 0.3; }
  .brand-eq .eq-bar:nth-child(4){ --eq-level: 0.18; }
  .brand-eq .eq-bar:nth-child(5){ --eq-level: 0.26; }
  .brand-eq .eq-bar:nth-child(6){ --eq-level: 0.17; }
  .brand-eq .eq-bar:nth-child(7){ --eq-level: 0.12; }
  html[data-raydeo-playback="playing"] .brand-eq .eq-bar{
    opacity:0.96;
    box-shadow: 0 0 12px rgba(94,245,255,0.26);
  }
  html[data-raydeo-eq-style="pulse"] .brand-eq .eq-bar{
    width:4px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(255,226,98,0.96), rgba(255,136,69,0.94) 56%, rgba(255,74,123,0.92));
    box-shadow: 0 0 12px rgba(255,170,82,0.28);
  }
  html[data-raydeo-eq-style="prism"] .brand-eq .eq-bar{
    background: linear-gradient(180deg, rgba(99,255,187,0.96), rgba(85,179,255,0.94) 52%, rgba(166,98,255,0.92));
    box-shadow: 0 0 12px rgba(102,214,255,0.26);
  }
  html[data-raydeo-eq-style="prism"] .brand-eq{
    gap:4px;
  }
  .brand-eq-wide{
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    gap: 8px;
    padding: 2px 6px 1px;
    justify-content: flex-start;
  }
  .brand-eq-wide .eq-bar{
    width: 5px;
    opacity: 1.94;
  }
  html[data-raydeo-bg-theme="midnight"]{
    --ray-window-grad-a: rgba(7,11,18,0.98);
    --ray-window-grad-b: rgba(10,14,24,0.96);
    --ray-window-grad-c: rgba(7,11,18,0.98);
    --ray-screen-bg: rgba(27, 45, 74, 0.997);
  }
  html[data-raydeo-bg-theme="emerald"]{
    --ray-window-grad-a: rgba(7,18,17,0.98);
    --ray-window-grad-b: rgba(8,28,24,0.96);
    --ray-window-grad-c: rgba(7,18,17,0.98);
    --ray-screen-bg: rgba(16, 67, 64, 0.96);
  }
  html[data-raydeo-bg-theme="plum"]{
    --ray-window-grad-a: rgba(20,10,26,0.98);
    --ray-window-grad-b: rgba(30,14,42,0.96);
    --ray-window-grad-c: rgba(20,10,26,0.98);
    --ray-screen-bg: rgba(60, 31, 92, 0.96);
  }
  html[data-raydeo-bg-theme="sunset"]{
    --ray-window-grad-a: rgba(25,12,16,0.98);
    --ray-window-grad-b: rgba(41,18,23,0.96);
    --ray-window-grad-c: rgba(25,12,16,0.98);
    --ray-screen-bg: rgba(90, 42, 58, 0.96);
  }
  .brand-text .tagline{
    font-size: 12px;
    color: rgba(255,255,255,0.82);
    margin-top: 2px;
    text-shadow: 0 1px 10px rgba(255,255,255,0.08);
  }
  .brand-text .tagline .brightel-t{
    color: rgba(255,72,72,0.96);
    text-shadow: 0 0 10px rgba(255,72,72,0.28);
  }
  .settings-icon-btn{
    width:38px; height:38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    cursor:pointer;
    transition: transform .15s ease, background .15s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 38px;
    line-height: 1;
  }
  .settings-icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.09); }
  
  /* Status pills */
  .status{ display:flex; align-items:center; gap:12px; margin-top:12.5px; }
  .pill{
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  .pill.subtle{
    color: rgba(255,255,255,0.50);
    border-color: rgba(255,255,255,0.08);
  }
  #pillMode{
    margin-left: auto;
  }
  
  /* Now playing card */
  .card{
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
    border: .5px solid rgba(255, 255, 255, 0.464);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    position:relative;
  }
  .card.now::after{
    content:"";
    position:absolute; inset:-1px;
    border-radius: 18px;
    pointer-events:none;
    background: radial-gradient(400px 180px at 20% 0%, rgba(255,255,255,0.10), transparent 60%);
    mix-blend-mode: screen;
    opacity:0.55;
  }
  .now-label{ font-size: 11px; color: var(--muted2); letter-spacing: 0.8px; text-transform: uppercase; }
  .now-title-row{
    margin-top:6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .now-station{ font-size: 16px; font-weight: 700; min-width:0; }
  .now-sub{ margin-top:3px; font-size: 12px; color: var(--muted); }
  .now-eq-row{
    margin-top:8px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .now-eq-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    font-size:11px;
    line-height:1;
    color: rgba(255,255,255,0.84);
    letter-spacing:0.2px;
  }
  .now-eq-badge[data-eq-state="active"]{
    border-color: rgba(110,222,255,0.32);
    background: linear-gradient(180deg, rgba(82,172,255,0.18), rgba(255,255,255,0.06));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 16px rgba(73,130,255,0.14);
    color: rgba(255,255,255,0.96);
  }
  .now-eq-badge[data-eq-state="selected"]{
    border-color: rgba(255,209,122,0.24);
    background: linear-gradient(180deg, rgba(255,192,97,0.10), rgba(255,255,255,0.05));
    color: rgba(255,233,191,0.92);
  }
  .now-eq-note{
    margin-top:6px;
    font-size:11px;
    line-height:1.35;
    color: rgba(255,221,164,0.88);
  }
  
  .controls{
    margin-top: 12px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .play-btn{
    width:42px; height:42px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
    color: var(--text);
    cursor:pointer;
    font-size: 18px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
  }
  .play-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.11); }
  .play-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  
  .vol{ flex:1; }
  .vol-label{ font-size: 11px; color: var(--muted2); margin-bottom: 6px; }
  input[type="range"]{ width:100%; }
  
  .star-btn{
    width:38px; height:38px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    cursor:pointer;
    font-size: 18px;
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
  }
  .star-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.09); }
  .star-btn:disabled{ opacity:0.45; cursor:not-allowed; }
  .star-btn-inline{
    width:34px;
    height:34px;
    flex:0 0 auto;
    border-radius: 12px;
    font-size: 17px;
  }
  
  /* Tabs */
  .tabs{
    margin-top: 12px;
    display:flex;
    gap:8px;
  }
  .tab{
    flex:1;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.11);
    color: rgba(255,255,255,0.74);
    cursor:pointer;
    font-size: 12px;
    transition: background .15s ease, transform .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  }
  .tab:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); }
  .tab.active{
    color: rgba(78, 228, 73, 0.98);
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.10));
    border-color: rgba(250, 138, 138, 0.22);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 8px 20px rgba(92, 174, 255, 0.14);
  }
  
  /* Panels */
  .panels{ margin-top: 10px; flex:1 1 auto; min-height:0; overflow:hidden; }
  .panel{ display:none; height:100%; min-height:0; overflow:auto; padding-right: 0; }
  .panel.active{ display:block; }
  #panel-about{
    overflow: hidden;
  }
  [data-raydeo="settings"]{
    height: 100%;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.24) transparent;
  }
  [data-raydeo="settings"] [data-settings-header]{
    margin-bottom: 14px;
  }
  [data-raydeo="settings"] [data-settings-kicker]{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(166,214,255,0.78);
  }
  [data-raydeo="settings"] [data-settings-heading]{
    margin-top: 4px;
    font-size: 18px;
    font-weight: 760;
    letter-spacing: 0.1px;
    color: rgba(255,255,255,0.95);
  }
  [data-raydeo="settings"] [data-settings-summary]{
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255,255,255,0.56);
  }
  [data-raydeo="settings"] [data-settings-group]{
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  [data-raydeo="settings"] [data-settings-group]:first-of-type{
    margin-top: 0;
  }
  [data-raydeo="settings"] [data-settings-title]{
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.80);
  }
  [data-raydeo="settings"] [data-setting-options],
  [data-raydeo="settings"] [data-setting-swatches]{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
  }
  [data-raydeo="settings"] [data-setting-swatches]{
    gap:12px;
    align-items:center;
  }
  [data-raydeo="settings"] [data-settings-note]{
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255,255,255,0.56);
  }
  [data-raydeo="settings"] #raydeoAudioEqNotice{
    color: rgba(255,226,181,0.92);
  }
  [data-raydeo="settings"] [data-eq-style-option],
  [data-raydeo="settings"] [data-audio-eq-option],
  [data-raydeo="settings"] [data-bg-theme-option]{
    -webkit-tap-highlight-color: transparent;
  }
  [data-raydeo="settings"] [data-eq-style-option]:hover,
  [data-raydeo="settings"] [data-audio-eq-option]:hover,
  [data-raydeo="settings"] [data-bg-theme-option]:hover{
    transform: translateY(-1px);
  }
  [data-raydeo="settings"] [data-bg-theme-option][data-selected="false"]:hover{
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(132,195,255,0.14) !important;
  }
  [data-raydeo="settings"]::-webkit-scrollbar{
    width: 8px;
  }
  [data-raydeo="settings"]::-webkit-scrollbar-thumb{
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
  }
  [data-raydeo="settings"]::-webkit-scrollbar-track{
    background: transparent;
  }
  
  .panel-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin: 6px 0 10px;
    color: rgba(255,255,255,0.88);
    font-weight: 650;
  }
  .hint{ font-size: 11px; color: var(--muted2); font-weight: 500; }
  .hint-row{ margin-top: 8px; }
  
  .searchbox{
    display:flex; gap:8px;
  }
  .searchbox input{
    flex:1;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: var(--text);
    outline:none;
  }
  .searchbox input::placeholder{ color: rgba(255,255,255,0.35); }
  
  .mini-btn{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    cursor:pointer;
    transition: transform .15s ease, background .15s ease;
  }
  .mini-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.09); }
  
  .list{ display:flex; flex-direction:column; gap:12px; padding-right: 20px; }
  .row{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    cursor:pointer;
    transition: transform .12s ease, background .12s ease;
  }
  .row:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); }
  .row.active{
    background: linear-gradient(180deg, rgba(108,188,255,0.12), rgba(255,255,255,0.06));
    border-color: rgba(132,195,255,0.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 18px rgba(92,174,255,0.10);
  }
  
  .row .left{
    width:34px; height:34px;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.88);
  }
  .row.active .left{
    background: linear-gradient(180deg, rgba(102,171,255,0.18), rgba(255,255,255,0.07));
    border-color: rgba(132,195,255,0.22);
    color: rgba(255,255,255,0.96);
  }
  .row .meta{ flex:1; min-width:0; }
  .row .t{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .row.active .t{ color: rgba(255,255,255,0.98); }
  .row .s{ font-size:11px; color: var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .row .right{
    width:34px; height:34px;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.80);
  }
  .row.active .right{
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
  }
  
  .divider{
    height:1px;
    background: rgba(255,255,255,0.10);
    margin: 12px 0;
  }
  
  .skeleton, .empty{
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--muted);
  }
  
  .about-card{
    height: 100%;
    min-height: 0;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
  }
  .about-title{ font-size: 18px; font-weight: 800; letter-spacing:0.4px; }
  .about-sub{ margin-top:4px; color: var(--muted); }
  
  .about-lines{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
  .line{ display:flex; align-items:center; gap:10px; color: rgba(255,255,255,0.78); }
  .dot{
    width:8px; height:8px; border-radius: 999px;
    background: rgba(255,255,255,0.75);
    box-shadow: 0 0 16px rgba(255,255,255,0.25);
  }

  .promise{
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.82);
    text-align:center;
    font-weight: 650;
    letter-spacing: 0.2px;
  }
  
  .danger-btn{
    margin-top: 12px;
    width:100%;
    padding: 11px 12px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.88);
    cursor:pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .danger-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(255,185,185,0.22);
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 26px rgba(0,0,0,0.14);
  }
  
  .foot{
    margin-top: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    text-align:center;
    flex: 0 0 auto;
  }
  .update-banner{
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background: linear-gradient(180deg, rgba(102,171,255,0.18), rgba(255,255,255,0.06));
    border: 1px solid rgba(132,195,255,0.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 18px rgba(92,174,255,0.10);
  }
  .update-banner-text{
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.15px;
  }
  .update-banner-btn{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.94);
    font-size: 11px;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .update-banner-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
  }
  
  /* Animations */
  @keyframes breathe{
    0%,100%{ transform: scale(1); opacity:0.22; }
    50%{ transform: scale(1.03); opacity:0.28; }
  }
  @keyframes drift{
    0%{ transform: translate3d(0,0,0); }
    100%{ transform: translate3d(40px, -30px, 0); }
  }