/* ==========================================================================
   styles.css — Real Wins (FULL)  •  v14
   - Keeps your current look, adds your requested fixes
   - Clear selected tier highlight (wins & pains)
   - Distinct vivid colors per tier (wins vs pains)
   - Progress bar visuals (paired with JS fix)
   - True dark/light theme (text colors switch properly)
   - Responsive layout for phone & HD desktop
   - Polished chips, drawers, modals, analytics blocks
   ========================================================================== */

/* ===== Reset & Base ===== */
:root{
  --bg: #0b0f2a;
  --bg-soft: #0e1436;
  --bg-elev: #111947;
  --text: #e8eeff;
  --text-dim: #a9b3d1;
  --muted: #7e8bb5;
  --line: #1a2260;
  --shadow: 0 20px 60px rgba(0,0,0,.35);

  /* wins palette (tier) */
  --w-small-a: #64ffd9; --w-small-b: #24c4a1;
  --w-med-a:   #7ad2ff; --w-med-b:   #2ea5ff;
  --w-big-a:   #ffd166; --w-big-b:   #ff9f1a;
  --w-vb-a:    #e89cff; --w-vb-b:    #aa58ff;

  /* pains palette (tier) */
  --p-small-a: #ffd5db; --p-small-b: #ff99a8;
  --p-med-a:   #ffb1c1; --p-med-b:   #ff6b82;
  --p-big-a:   #ff9d7a; --p-big-b:   #ff4d2e;
  --p-vb-a:    #ff7adf; --p-vb-b:    #ff2ebd;

  /* general accents */
  --win-a: #33ffc0; --win-b: #00c3a6;
  --pain-a:#ff7aa2; --pain-b:#ff4273;

  --ok: #23d18b;
  --warn: #ffd166;
  --danger: #ff4d5e;

  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 10% -10%, #171e53 0%, transparent 60%) ,
              radial-gradient(900px 500px at 110% 10%, #1b245f 0%, transparent 60%) ,
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light theme overrides */
body.light{
  --bg: #f5f7ff;
  --bg-soft: #ffffff;
  --bg-elev: #ffffff;
  --text: #0b0f2a;
  --text-dim: #33406b;
  --muted: #4e5b8d;
  --line: #dfe6ff;
  --shadow: 0 20px 50px rgba(17, 22, 40, .12);

  /* keep vivid tiers the same but they’ll pop on white */
}

a{ color: inherit; }
img{ display:block; max-width:100%; }

/* Utilities */
.muted{ color: var(--text-dim); }
.small{ font-size:.9rem; opacity:.9; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; min-width:22px; padding:0 8px; border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.1);
  font-weight:700; font-size:.8rem;
}

/* ===== Top Bar ===== */
.topbar{
  display:grid;
    grid-template-columns: 1fr minmax(360px, 760px) auto;
  gap:18px;
  align-items:center;
  padding:18px clamp(14px, 2.5vw, 32px);
}
.brand{
  display:flex; align-items:center; gap:14px;
}
.avatar{
  width:56px; height:56px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor:pointer;
}
.who{ display:flex; flex-direction:column; gap:6px; }
.display-name{
  background: transparent;
  border:1px solid var(--line);
  color: var(--text);
  padding:10px 12px; border-radius:10px; font-weight:700;
  outline:none;
}
.level-title{ color: var(--text-dim); font-weight:700; }

/* Progress bar under name block */
/* Progress bar under name block (upgraded) */
.progress{
  position: relative;
  height: 16px;                   /* a bit taller */
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.18)),
    #0e1436;                      /* fallback */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}

/* On light theme, keep edges subtle */
body.light .progress{
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.06)),
    #ffffff;
  border-color: #dfe6ff;
}

/* Filled part */
.bar-fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;                       /* JS sets width% */
  background:
    linear-gradient(90deg, #1ce0a2, #17b0ff);
  transition: width .35s cubic-bezier(.4,.9,.2,1);

  box-shadow:
    inset 0 0 10px rgba(255,255,255,.10),
    0 6px 18px rgba(0,0,0,.25);
}

/* Moving stripes for a premium feel */
.bar-fill::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient( -45deg,
      rgba(255,255,255,.18) 25%,
      transparent 25%, transparent 50%,
      rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%,
      transparent 75%, transparent);
  background-size: 28px 28px;
  animation: progStripes 2.2s linear infinite;
  mix-blend-mode: soft-light;
  pointer-events:none;
}

@keyframes progStripes{
  from { background-position: 0 0;   }
  to   { background-position: 28px 0; }
}

/* Small % label on the right, fed by data-pct */
.progress::after{
  content: attr(data-pct);
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px; font-weight: 900; letter-spacing: .2px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body.light .progress::after{
  color: #0b0f2a;
  text-shadow: none;
}


/* Action buttons area */
.actions{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;
}

/* ===== Buttons / Inputs ===== */
.btn{
  --btn-bg: rgba(255,255,255,.08);
  --btn-br: rgba(255,255,255,.14);
  --btn-tx: var(--text);
  background: var(--btn-bg);
  border:1px solid var(--btn-br);
  color: var(--btn-tx);
  padding:10px 14px; border-radius:12px; font-weight:800;
  letter-spacing:.2px;
  cursor:pointer; transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: linear-gradient(90deg, var(--win-a), var(--win-b));
  border:none; color:#041226; box-shadow: 0 10px 26px rgba(20,220,170,.28);
}
.btn.danger{
  background: linear-gradient(90deg, var(--pain-a), var(--pain-b));
  border:none; color:#2a0816; box-shadow: 0 10px 26px rgba(255,66,115,.28);
}
.btn.soft{
  background: rgba(255,255,255,.06);
}
.btn.icon{
  padding:8px 10px; font-size:18px; line-height:1; border-radius:10px;
  background: rgba(255,255,255,.06);
}
.btn.ghost{
  background: transparent; border:1px dashed var(--line); color: var(--text-dim);
}
.btn.tiny{ padding:6px 8px; font-size:.85rem; border-radius:10px; }
.btn.accent{
  background: linear-gradient(90deg, #ff8aa8, #ff4d7d);
  color:#260611; border:none; box-shadow: 0 10px 26px rgba(255,77,125,.25);
}
.btn.dangerish{
  background: rgba(255,77,125,.12);
  border:1px solid rgba(255,77,125,.3);
  color:#ff88a6;
}

/* Inputs */
.in, .select, textarea{
  background: var(--bg-soft);
  color: var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.select{ padding:9px 10px; }
.switch{
  display:flex; align-items:center; gap:10px; cursor:pointer;
}
.switch input{ transform: translateY(1px); }

/* ===== Identity sticky ===== */
.identity-banner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background: linear-gradient(90deg, rgba(50,255,190,.12), rgba(0,200,200,.12));
  border:1px solid rgba(50,255,190,.25);
  margin: 0 clamp(14px, 2.5vw, 32px);
  padding:10px 12px; border-radius: 14px;
  backdrop-filter: blur(8px);
}
.id-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius:999px; font-weight:900;
  background:linear-gradient(90deg, var(--win-a), var(--win-b)); color:#041226;
}
.id-text{ font-weight:800; letter-spacing:.2px; }
.id-left{ display:flex; gap:10px; align-items:center; }
.id-right{ display:flex; gap:6px; }

/* ===== Badge strip ===== */
.badges-row{ padding: 12px clamp(14px, 2.5vw, 32px) 0; }
.badge-strip{ display:flex; flex-wrap:wrap; gap:8px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:.9rem;
  color:#041226;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg, #c1ffe9, #9ff6cf);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* ===== Shell / Cards ===== */
.shell{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  padding:18px clamp(14px, 2.5vw, 32px) 40px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card-hd{
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.card h2{ margin:0; }
.today{ display:flex; flex-direction:column; text-align:right; gap:4px; }

/* ===== Segments (tier selector) ===== */
.segments{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:8px; margin:10px 0 6px;
}
.seg{
  position:relative; isolation:isolate;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text); border-radius:12px; padding:10px 12px;
  font-weight:900; letter-spacing:.2px;
  cursor:pointer; transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease;
}
.seg .bubble{ float:right; margin-left:8px; }
.segments .seg:hover{ transform: translateY(-1px); }

/* Selected state + tier glows (WIN) */
.segments .seg[aria-selected="true"]{
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255,255,255,.35);
  box-shadow:
    0 8px 22px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.15) inset;
}
.segments .seg[aria-selected="true"]::after{
  content: "✓";
  position: absolute;
  top: 8px; right: 10px;
  font-weight: 900;
  font-size: clamp(12px, .95vw, 16px);
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  color: #0b0f2a;
  background: linear-gradient(90deg, #fff, #e6f7ff);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* win-tier glow */
.card.wins .segments .seg[data-tier="small"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--w-small-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}
.card.wins .segments .seg[data-tier="medium"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--w-med-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}
.card.wins .segments .seg[data-tier="big"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--w-big-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}
.card.wins .segments .seg[data-tier="veryBig"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--w-vb-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}

/* pain-tier glow */
.card.pains .segments .seg[data-ctier="small"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--p-small-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}
.card.pains .segments .seg[data-ctier="medium"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--p-med-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}
.card.pains .segments .seg[data-ctier="big"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--p-big-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}
.card.pains .segments .seg[data-ctier="veryBig"][aria-selected="true"]{
  box-shadow: 0 8px 24px color-mix(in srgb, var(--p-vb-b), transparent 55%),
              0 0 0 2px rgba(255,255,255,.18) inset;
}

/* Make the counter bubble invert when selected */
.segments .seg[aria-selected="true"] .bubble{
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.08);
  color: #0b0f2a;
}

/* labels under segments */
#selectedWinTierLabel strong,
#selectedPainTierLabel strong{
  font-weight: 900;
  background: linear-gradient(90deg, var(--win-a), var(--win-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card.pains #selectedPainTierLabel strong{
  background: linear-gradient(90deg, var(--pain-a), var(--pain-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== Panels & Chips ===== */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  padding:12px; margin-top:8px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:.9rem;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, color .15s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip:active{ transform: translateY(1px) scale(.98); opacity:.95; }

.inline-add{
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
}

/* ===== CTA Row ===== */
.cta-row{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
}

/* ===== Drawers ===== */
.drawer{
  position: fixed; inset: 0 0 0 auto; width:min(720px, 100%); background: rgba(0,0,0,.45);
  display:none; z-index:30; backdrop-filter: blur(2px);
}
.drawer-card{
  position:absolute; right:0; top:0; bottom:0;
  width:100%; max-width:720px;
  background: var(--bg-soft);
  border-left:1px solid var(--line);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.drawer-card.wide{ max-width:1020px; }
.drawer-hd{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px;
  border-bottom:1px solid var(--line);
}
.drawer-ft{
  border-top:1px solid var(--line);
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.queue-list{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.queue-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--line); border-radius:14px; padding:12px;
}
.queue-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.queue-tier{
  display:inline-flex; align-items:center; justify-content:center; height:26px;
  padding:0 10px; border-radius:999px; font-weight:900; color:#041226;
  background:linear-gradient(90deg, #c1ffe9, #9ff6cf);
}
.queue-tier.pain{
  background:linear-gradient(90deg, #ffd5db, #ffb3c2);
}
.queue-actions{ display:flex; gap:8px; }

/* ===== Modal ===== */
.modal{
  position: fixed; inset:0; display:none; place-items:center;
  background: rgba(0,0,0,.45);
  z-index:40;
}
.modal-card{
  width:min(560px, 92vw);
  background: var(--bg-soft);
  border:1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-card.reward .modal-hd{
  background: linear-gradient(90deg, var(--win-a), var(--win-b));
  color:#041226;
}
.modal-card.pain .modal-hd{
  background: linear-gradient(90deg, var(--pain-a), var(--pain-b));
  color:#2a0816;
}
.modal-hd{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-weight:900;
}
.modal-bd{ padding:18px 14px; }
.modal-ft{ padding:12px 14px; display:flex; gap:10px; justify-content:flex-end; }
.reward-text{ font-size:1.2rem; font-weight:800; }
.pain-text{ font-size:1.15rem; font-weight:800; }

/* ===== Analytics ===== */
.analytics-body{ padding: 12px 16px 18px; overflow:auto; }
details{ border:1px solid var(--line); border-radius:14px; margin-bottom:10px; background: rgba(255,255,255,.04); }
summary{
  list-style:none; padding:12px 14px; cursor:pointer; font-weight:900;
}
summary::-webkit-details-marker{ display:none; }
details > .row{ padding: 12px 14px; display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.panel .hint{ margin-bottom:8px; }
.week{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.week-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px; border:1px dashed var(--line); border-radius:10px;
}
.week-chip .day{ font-weight:800; color:var(--text-dim); }
.week-chip .count{ font-weight:900; font-size:1.05rem; }

.feed{ display:flex; flex-direction:column; gap:8px; }
.feed .item{
  background: rgba(255,255,255,.05); border:1px solid var(--line);
  padding:10px 12px; border-radius:12px;
}

/* Balance bar */
.balance{
  position:relative; height:16px; border-radius:999px; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  border:1px solid rgba(255,255,255,.12);
}
.balance-wins{
  position:absolute; left:0; top:0; bottom:0; width:50%;
  background: linear-gradient(90deg, var(--win-a), var(--win-b));
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}

/* Identity list in Analytics */
.identity-panel .chip{ background: rgba(50,255,190,.10); border-color: rgba(50,255,190,.28); }

/* ===== Editor ===== */
.editor-body{
  padding: 8px 16px 18px;
  display:grid; grid-template-columns: 1fr 1fr 320px; gap:14px;
}
.editor-body .col{ display:flex; flex-direction:column; gap:10px; }
.editor-body textarea{
  min-height:120px; resize:vertical;
}

/* ===== Backup ===== */
.backup-body{ padding: 10px 16px 18px; display:grid; gap:12px; }
.backup-body .row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.backup-body .row.mini{ grid-template-columns: auto 1fr; align-items:center; }

/* ===== Toast ===== */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background: rgba(15,20,50,.9); color: #cfeaff; border:1px solid rgba(255,255,255,.2);
  padding:10px 14px; border-radius:999px; z-index:55; box-shadow: var(--shadow);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .topbar{
    grid-template-columns: 1fr;
    gap:10px;
  }
  .actions{ justify-content:flex-start; }
  .shell{ grid-template-columns: 1fr; }
  details > .row{ grid-template-columns: 1fr; }
  .editor-body{ grid-template-columns: 1fr; }
  .backup-body .row{ grid-template-columns: 1fr; }
}

@media (min-width: 1400px){
  .shell{ grid-template-columns: 1fr 1fr; gap:22px; }
  .seg{ padding:14px 14px; font-size:1.02rem; }
  .chip{ padding:10px 14px; }
  .panel{ padding:14px; }
  .display-name{ font-size:1.05rem; }
}

@media (max-width: 520px){
  .display-name{ font-size:1rem; }
  .seg{ padding:10px; font-size:.98rem; }
  .chip{ padding:8px 10px; font-size:.9rem; }
  .today{ font-size:.95rem; }
  .badge{ padding:7px 10px; font-size:.85rem; }
  .inline-add .in{ flex:1 1 100%; }
}

/* ===== THEME SAFETY: visible text in light mode ===== */
body.light .display-name,
body.light .level-title,
body.light .muted,
body.light .chip,
body.light .btn,
body.light .seg,
body.light .panel,
body.light .badge,
body.light .queue-card,
body.light .drawer-card,
body.light .modal-card{
  color: var(--text);
}

/* ===== Vibrant tier color accents for chips (optional visual cue) ===== */
.card.wins .chips .chip[data-tier="small"]{
  border-color: color-mix(in srgb, var(--w-small-b), transparent 65%);
  background: color-mix(in srgb, var(--w-small-a), transparent 92%);
}
.card.wins .chips .chip[data-tier="medium"]{
  border-color: color-mix(in srgb, var(--w-med-b), transparent 65%);
  background: color-mix(in srgb, var(--w-med-a), transparent 92%);
}
.card.wins .chips .chip[data-tier="big"]{
  border-color: color-mix(in srgb, var(--w-big-b), transparent 65%);
  background: color-mix(in srgb, var(--w-big-a), transparent 92%);
}
.card.wins .chips .chip[data-tier="veryBig"]{
  border-color: color-mix(in srgb, var(--w-vb-b), transparent 65%);
  background: color-mix(in srgb, var(--w-vb-a), transparent 92%);
}

.card.pains .chips .chip{
  border-color: rgba(255,77,125,.35);
  background: rgba(255,77,125,.08);
}

/* ===== Minor polish ===== */
h2{ letter-spacing:.2px; }
h4{ margin:6px 0 8px; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.row.mini{ grid-template-columns: auto 1fr; align-items:center; }

/* Prevent long content overflow */
.queue-text, .reward-text, .pain-text{
  overflow-wrap:anywhere;
}

/* Ensure modals and drawers sit above everything */
.drawer, .modal{ backdrop-filter: blur(2px); }

/* Improve focus (keyboard) */
button:focus-visible, .in:focus-visible, .select:focus-visible, textarea:focus-visible{
  outline: 2px solid #33ffc0;
  outline-offset: 2px;
}
/* ===== Modal text visibility fix (dark & light) ===== */
.modal-bd,
.modal-bd p,
.reward-text,
.pain-text {
  color: var(--text) !important;
}
/* Keep colored headers; body text follows theme */

/* ===== END ===== */