/* =========================
   Musikwunsch – App Styles (FINAL)
   ========================= */

:root{
  --bg:#0b0c10;
  --card:#12141a;
  --text:#f2f3f5;
  --muted:#99a1b3;
  --brand:#1db954;
  --radius:14px;

  --player-h:0px;
  --brand-h:0px;
  --footer-h:0px;

  --header-offset:0px;
  --search-h:72px;
  --suggest-start:0px;

  /* ✅ NEU: exakt das gleiche Padding wie .wrap (für identische Kanten) */
  --wrap-pad: clamp(16px,4vw,28px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  height:100dvh;
  color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* ✅ FIX: Background liegt auf html (damit wish-eta mit z-index:-1 sichtbar sein kann) */
html{ background:var(--bg); }
body{
  background:transparent; /* wichtig */
  overflow:hidden;
  overscroll-behavior:none;
}

/* ========== Layout Frame ========== */
.wrap{
  max-width:720px;
  margin:0 auto;

  /* ✅ vorher: clamp(16px,4vw,28px) -> jetzt identisch, nur über Variable */
  padding:var(--wrap-pad);

  padding-bottom:calc(var(--player-h) + var(--brand-h) + 14px + env(safe-area-inset-bottom));
}

/* ========== Card & Headline ========== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  padding:16px;
  margin-top:0;
}
h1{
  font-size:1.25rem;
  margin:0 0 15px;
  text-align:center;
}

/* Inline-Status */
.inline-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  justify-content:flex-start;
}
.ampel{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#e74c3c;
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 8px rgba(0,0,0,.25);
}
.inline-status .ampel{ width:12px; height:12px; }
.ampel.green{ background:#2ecc71; }
.ampel.orange{ background:#f39c12; }
.ampel.red{ background:#e74c3c; }
.inline-status .label{
  font-size:.9rem;
  color:var(--muted);
}

/* ========== Search Area ========== */
.search{
  position:sticky;
  top:var(--header-offset);
  background:var(--card);
  padding-bottom:0;
  z-index:120;
}
.input{
  display:flex;
  gap:10px;
  flex-direction:column;
  position:relative;
}
.input input{
  flex:1;
  border:1px solid #232734;
  background:#0f1116;
  color:#fff;
  border-radius:12px;
  padding:14px 14px;
  font-size:16px;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}
.input input:focus{
  box-shadow:0 0 0 2px rgba(29,185,84,.35);
}

/* Clear X im Suchfeld – brandgrün */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  width:18px; height:18px;
  margin-right:6px;
  cursor:pointer;
  background-color:var(--brand);
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7A 1 1 0 1 0 5.7 7.1L10.6 12l-4.9 4.9a1 1 0 1 0 1.4 1.4L12 13.4l4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4Z"/></svg>');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:100% 100%;
  transition: transform .08s ease;
}
input[type="search"]::-webkit-search-cancel-button:hover,
input[type="search"]::-webkit-search-cancel-button:active{
  background-color:var(--brand);
  transform: scale(0.95);
}

/* Buttons */
.btn{
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  transition:transform .06s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--outline{
  background:transparent;
  border:1px solid #2a824a;
  color:#9de3b3;
}
.btn--outline:hover{
  filter:brightness(1.05);
  background:#0f1511;
}
.btn.loading{ pointer-events:none; opacity:.9; }

/* Spinner im Button */
.btn.loading::after{
  content:"";
  display:inline-block;
  width:18px; height:18px;
  margin-left:8px;
  border:2px solid #ffffff;
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .8s linear infinite;
  vertical-align:-3px;
}

/* ========== Suggest-Dropdown ========== */
.suggest{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  background:#0f1116;
  border:1px solid #232734;
  border-radius:12px;
  overflow:auto;
  display:none;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
  z-index:130;
  pointer-events:auto;

  max-height:calc(100dvh - var(--suggest-start) - var(--footer-h) - env(safe-area-inset-bottom) - 6px);
  padding-bottom:0;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.suggest.show{ display:block; }

.sug-head{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--brand);
  padding:6px 10px;
  font-size:12px;
  color:#ffffff;
  letter-spacing:.02em;
}

.sug-item{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
}
.sug-item + .sug-item{ border-top:1px solid #1a1f2b; }
.sug-cover{
  width:40px; height:40px;
  border-radius:8px;
  object-fit:cover;
  background:#1d2130;
}
.sug-item > div{ min-width:0; }
.sug-title{
  font-size:.95rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ✅ FIX: Artist immer 1 Zeile mit ... (kein Höhenwachstum) */
.sug-artist{
  font-size:.82rem;
  color:#99a1b3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sug-wish{
  background:transparent;
  border:1px solid #2a824a;
  border-radius:10px;
  padding:8px 12px;
  color:#9de3b3;
  cursor:pointer;
  touch-action:pan-y;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sug-item.active, .sug-item:hover{ background:#121826; }

@media (max-width:599px){
  .sug-item{ grid-template-columns:40px 1fr; }
  .sug-wish{ display:none; }
}

/* Während Suggest offen: Panel ausblenden */
body.has-suggest #panel{ display:none !important; }

/* ========== Cooldown ========== */
.coolbar{
  margin-top:20px;
  min-height:26px;
  text-align:center;
}
.coolbar .pill{
  display:inline-block;
  border:1px solid #2a824a;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  white-space: pre-line;
}
.coolbar--free .pill{
  border-color:#1f3b2a;
  background:#0f1511;
  color:#c7f5d4;
  white-space: pre-line;
}
.coolbar--wait .pill{
  border-color:#3b1a1f;
  background:#19130e;
  color:#ffd08a;
  white-space: pre-line;
}

/* ========== Results Panel ========== */
.results-panel{
  margin-top:8px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  max-height:none;
  padding-bottom:0;
  background-color: var(--bg);
}
.results-panel.scroll{
  max-height:calc(98dvh - var(--footer-h) - var(--header-offset) - var(--search-h) - 150px);
}

/* ✅ NEU: Ergebnisse überdecken Wish-ETA (nur Layering, kein Layout) */
#panel{
  position:relative;
  z-index:125; /* > wish-eta, < suggest (130) */
}

.list{ display:grid; gap:10px; }

.item{
  display:grid;
  gap:10px;
  align-items:center;
  background:#0f1116;
  border:1px solid #232734;
  border-radius:12px;
  padding:8px;

  grid-template-columns:56px 1fr;
  grid-template-areas:
    "cover meta"
    "button button";
}
.cover{
  grid-area:cover;
  width:56px;
  height:56px;
  border-radius:10px;
  object-fit:cover;
  background:#1d2130;
}
.meta{
  grid-area:meta;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.title{ font-size:.98rem; line-height:1.2; }
.artist{ font-size:.85rem; color:#99a1b3; }

.wish{
  grid-area:button;
  background:var(--brand);
  border:none;
  color:#06270f;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  justify-self:stretch;
  transition:filter .2s ease, transform .06s ease;
}
.wish:hover{ filter:brightness(1.05); }
.wish:active{ transform:translateY(1px); }
.wish.loading{ pointer-events:none; opacity:.95; position:relative; }
.wish.loading::after{
  content:"";
  display:inline-block;
  width:14px; height:14px;
  margin-left:8px;
  border:2px solid #ffffff;
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .8s linear infinite;
  vertical-align:-2px;
}
.wish.error{ background:#e74c3c; color:#fff; }
.wish.success{ background:#1db954; color:#06270f; }

/* Einheitlich gesperrt (Suche + Vorschläge) */
.wish.blocked,
.sug-wish.blocked,
.sug-item.blocked{
  filter:grayscale(.25) brightness(.9);
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

@keyframes shake{
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-2px) }
  50%{ transform:translateX(2px) }
  75%{ transform:translateX(-2px) }
}
.wish.shake{ animation:shake .25s linear 1; }

@media (min-width:600px){
  .item{
    grid-template-columns:56px 1fr auto;
    grid-template-areas:"cover meta button";
  }
  .wish{ justify-self:auto; width:auto; }
}

/* Mehr laden */
.load-more{
  display:block;
  width:100%;
  max-width:220px;
  margin:12px auto 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #2a824a;
  background:transparent;
  color:#9de3b3;
  font-weight:700;
  cursor:pointer;
}
.load-more:hover{ filter:brightness(1.05); background:#0f1511; }
.load-more[hidden]{ display:none !important; }
.load-more:disabled{ opacity:.75; cursor:default; }

/* Toast */
.toast{
  position:fixed;
  text-align:center;
  width:85%;
  left:50%;
  top: 70%;
  transform:translate(-50%,-50%);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:9999;
  padding:10px 14px;
  backdrop-filter:saturate(120%) blur(6px);
  border:1px solid transparent;
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.toast__btn{
  width:100%;
  border:1px solid #232734;
  background:#b12121;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  cursor:pointer;
}
.toast__btn:active{ transform:translateY(1px); }

.toast__msg{
  text-align:center; color: #fff;
}
.toast--ok{ background:rgba(12,20,16,.92); border-color:#1f3b2a; color:#c7f5d4; }
.toast--err{ background:rgba(28,12,12,.92); border-color:#3b1a1f; color:#ffd3cf; }
.toast.show{ opacity:1; pointer-events:auto; }

/* ✅ FIX: muted darf NICHT global display:none sein */
.muted{
  color:#99a1b3;
  text-align:center;
  margin:15px 0;
}
.muted:empty{ display:none; }

/* Scrim für Suggest (unter Footer, über Card) */
.scrim{
  position:fixed;
  inset:0;
  display:none;
  background:transparent;
  z-index:115;          /* unter Suggest, über Card */
  pointer-events:auto;
}
body.has-suggest .scrim{ display:block; }

/* Scrollbar ausblenden */
.suggest, .results-panel{ scrollbar-width:none; -ms-overflow-style:none; }
.suggest::-webkit-scrollbar, .results-panel::-webkit-scrollbar{ width:0; height:0; }

@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .btn, .wish, .toast{ transition:none; }
  .btn.loading::after,
  .wish.loading::after{ animation:spin 1.6s linear infinite; }
  .wish.shake{ animation:none !important; }
}

/* =========================
   ✅ Wish-ETA Pro-Karte (HINTER ALLEM)
   -> beeinflusst Layout NICHT
   -> liegt unter Card/Panel/Suggest/Player/Brandfoot
   ========================= */

.wish-eta[hidden]{ display:none !important; }

.wish-eta{
  /* ✅ Card-Look identisch zu .card */
  background:var(--card);
  border:none;
  border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  padding:16px; /* wie .card */
  color:var(--text);

  position:fixed;
  left:50%;
  transform:translateX(-50%);

  /* ✅ EXAKT gleiche Außenkante wie .card:
     .card füllt die Wrap-Innenbreite (max 720 minus Wrap-Padding links/rechts) */
  width:min(
    calc(720px - (var(--wrap-pad) * 2)),
    calc(100vw - (var(--wrap-pad) * 2))
  );

  /* ✅ immer knapp unter der Suche */
  bottom:auto;
  top:calc(max(var(--suggest-start), 140px) + 73px);

  opacity:.92;
  pointer-events:none;
  z-index:-1;
  margin:0;
}

/* Wish-ETA: nur im Action-Fall (Resend-CTA sichtbar) klickbar */
.wish-eta.wish-eta--action{
  pointer-events:auto;
  z-index:25; /* über Cards, aber unter Suggest/Scrim */
}

/* "Nur einmal möglich" Hinweis als Meldung (kein Button-Look) */
.wish-eta-resend--note{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(157,227,179,.45);
  background:rgba(15,21,17,.6);
  color:var(--muted);
  font-size:12px;
  line-height:1.25;
  text-align:center;
  user-select:none;
  pointer-events:none;
}
.wish-eta__head{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  margin-bottom:16px;
}

.wish-eta__label{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

.wish-eta__state{
  font-size:16px;
  font-weight:700;
  text-align:right;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--brand);
}

.wish-eta__body{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px;
  align-items:center;
  background: var(--bg);
  padding: 12px;
  border-radius: 16px;
}

.wish-eta__cover{
  width:44px;
  height:44px;
  border-radius:10px;
  object-fit:cover;
  background:#1d2130;
}

.wish-eta__meta{ min-width:0; }

.wish-eta__title{
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: .94rem;
}

.wish-eta__artist{
  margin-top:2px;
  font-size:.85rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   Player Footer (Z-INDEX + Tab-Dock)
   ========================= */

.playerfoot{
  position:fixed;
  left:0; right:0;
  bottom:var(--brand-h);
  z-index:9999;
  background:rgba(18,20,26,.95);
  backdrop-filter:saturate(120%) blur(6px);
  border-top:1px solid #232734;
  padding:10px 14px 12px;
  margin-bottom:5px;
  overflow:visible;
}
.playerfoot .inner{
  max-width:720px;
  margin:0 auto;
  overflow:visible;
}

.now-wrap{
  position:relative; /* Anker für Tab */
  overflow:visible;
}

/* #now soll KEIN Anchor sein, damit Tab nicht "in" der Row sitzt */
#now{
  position:static !important;
  overflow:visible !important;
}

.now{
  display:none;
  align-items:center;
  gap:12px;
  margin:0;
  overflow:visible;
}
.now.show{ display:flex; }

.now .cover{
  width:44px; height:44px;
  border-radius:8px;
  object-fit:cover;
  background:#1d2130;
}
.now .meta{ flex:1; min-width:0; }
.now .title{
  font-size:.94rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.now .artist{
  font-size:.8rem;
  color:#9aa3b5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}
.now .progress{
  height:6px;
  background:#1a1f2b;
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
.now .bar{
  display:block;
  height:100%;
  background:var(--brand);
  width:0%;
}

.now-actions{
  display:flex;
  gap:8px;
  margin-left:8px;
}

.qa{
  border:1px solid #2a824a;
  background:#0f1511;
  color:#bff5cf;
  border-radius:10px;
  padding:8px 10px;
  font-weight:600;
}
.qa:active{ transform:translateY(1px); }

/* ===== Queue-Tab: sauber am oberen Rand angedockt (unten offen) ===== */
.qa--queue{
  position:absolute !important;
  right:0px;

  height:24px;
  width:50px;

  top:calc(-34px);

  display:grid;
  place-items:center;

  padding:0;
  margin:0 !important;
  transform:none !important;

  background:rgba(18,20,26,.98);
  border:1px solid #232734;
  border-bottom:none;
  border-radius:14px 14px 0 0;
  box-shadow:0 10px 20px rgba(0,0,0,.28);

  z-index:10050;
  user-select:none;
}

/* 1px „Naht“ kaschieren, damit es wie aus einem Guss wirkt */
.qa--queue::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height:1px;
  background:rgba(18,20,26,.98);
}

/* Altes Öhrchen sicher deaktiviert */
.qa--queue::before{
  content:none !important;
  display:none !important;
}

.qa--queue[aria-expanded="true"]{ filter:brightness(1.06); }

/* =========================
   Inline Queue Panel (unter Now)
   ========================= */
.queuepanel{
  margin-top:10px;
  background:rgba(18,20,26,.98);

  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(8px);
  transition:max-height .22s ease, opacity .18s ease, transform .18s ease;

  position:relative;
  z-index:10010;
}
.queuepanel.is-open{
  max-height:70vh;
  opacity:1;
  transform:translateY(0);
}

.queuepanel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px 5px 5px;
  border-top:1px solid #232734;
}
.queuepanel__title{ font-weight:800; letter-spacing:.01em; color: var(--brand); }
.queuepanel__meta{ font-size:12px; }
.queuepanel__note{
  padding:10px 12px 12px;
  border-top:1px solid #232734;
  margin:0;
  text-align:left;
}

.queue-list{
  max-height:55vh;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px;

  scrollbar-width:none;
  -ms-overflow-style:none;
}
.queue-list::-webkit-scrollbar{ width:0; height:0; }

.queue-item{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:10px;
  align-items:center;
  background:#0f1116;
  border:1px solid #232734;
  border-radius:12px;
  padding:8px 10px;
}
.queue-item + .queue-item{ margin-top:8px; }

.queue-cover{
  width:40px;
  height:40px;
  border-radius:10px;
  object-fit:cover;
  background:#1d2130;
}
.queue-meta{ min-width:0; }
.queue-title{
  font-size:.92rem;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queue-artist{
  font-size:.8rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:2px;
}
.queue-badge{
  border:1px solid #2a824a;
  background:#0f1511;
  color:#bff5cf;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.queue-item.is-mine .queue-badge{
  border-color:rgba(29,185,84,.55);
  box-shadow:0 0 0 2px rgba(29,185,84,.12);
}

/* Skeleton Loading */
.queue-skel{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:10px;
  align-items:center;
  background:#0f1116;
  border:1px solid #232734;
  border-radius:12px;
  padding:8px 10px;
}
.queue-skel + .queue-skel{ margin-top:8px; }

.skel-box{
  width:40px; height:40px;
  border-radius:10px;
  background:#1d2130;
  position:relative;
  overflow:hidden;
}
.skel-lines{ min-width:0; }
.skel-line{
  height:10px;
  border-radius:999px;
  background:#1d2130;
  position:relative;
  overflow:hidden;
}
.skel-line + .skel-line{ margin-top:8px; width:68%; }

@keyframes mw_shimmer{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(120%); }
}
.skel-box::after, .skel-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform:translateX(-120%);
  animation:mw_shimmer 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .queuepanel{ transition:none; }
  .skel-box::after, .skel-line::after{ animation:none; }
}

/* =========================
   Brand Footer (unter Player)
   ========================= */
.brandfoot{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:9998;
  background:#0b0c10;
  border-top:1px solid #232734;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
}
.brandfoot .inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  justify-content:center;
}
.brand-link{
  font-size:11px;
  color:#9db3ff;
  text-decoration:none;
  opacity:.95;
}
.brand-link strong{ font-weight:700; }
.brand-link:hover{ opacity:1; text-decoration:underline; }

/* --- Wish-ETA: CTA muss klickbar sein (nur im Action-Fall) --- */
.wish-eta.wish-eta--action{
  pointer-events: auto !important;
  z-index: 30 !important; /* klickbar über Cards */
}
.wish-eta.wish-eta--action .wish-eta__actions,
.wish-eta.wish-eta--action .wish-eta-resend{
  pointer-events: auto !important;
}

/* hidden muss gewinnen (falls Button im DOM bleibt) */
.wish-eta-resend[hidden]{ display:none !important; }

/* ✅ Wish-ETA Actions: Button/Note immer unter dem Inhalt, volle Breite (additiv) */
.wish-eta__actions{
  margin-top:10px;
  display:flex;
  flex-direction:row-reverse;
  gap:10px;
}
.wish-eta__actions .wish-eta-resend{
  width:100%;
}

.wish-eta-dismiss{
  border-color:#ff0000;
  background:rgba(255, 0, 0, 0.438);
  color:#fff;
}

/* Links nicht unterstreichen (auch mobil) */
a, a:visited {
  text-decoration: none;
}

/* optional: Unterstreichung nur bei Hover/Fokus (Desktop/Accessibility) */
a:hover, a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}