/* ═══════════════════════════════════════════════════════════════════
   NPolls — the account page.

   my_account.php wraps itself in .container-page.account-wrap, and
   neither class existed in any stylesheet, so the page had no measure
   and no padding: everything ran flush to the left edge of the viewport.
   The KPI tiles, timeline and comment cards were unstyled too, which is
   why they read as stacked bare text.

   The page also referenced --spacing-*, --accent1, --muted and --border
   from the old stylesheet in inline style attributes. Those are aliased
   at the bottom rather than edited out of 1,000 lines of PHP.
   ═══════════════════════════════════════════════════════════════════ */

.container-page, .account-wrap{
  max-width:var(--page); margin:0 auto; padding:34px 24px 72px;
}
/* Both classes sit on the same element, so the padding must not double. */
.container-page.account-wrap{ padding:34px 24px 72px; }

/* The submit spinner was a FontAwesome glyph, so it showed nothing while
   the form was in flight. Drawn in CSS instead. */
.np-spin{
  display:inline-block; width:14px; height:14px; vertical-align:-2px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:npSpin .7s linear infinite;
}
@keyframes npSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .np-spin{ animation-duration:2s } }

/* ── Header ─────────────────────────────────────────────────────── */
.acct-header{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:28px 30px; margin:0 0 20px; border-radius:var(--r-3);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.acct-header::before{
  content:""; position:absolute; width:380px; height:380px; right:-120px; top:-190px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--c1), transparent 65%);
  opacity:.16; filter:blur(64px);
}
.acct-header > *{ position:relative; z-index:1; }

.profile{ display:flex; align-items:center; gap:18px; min-width:0; }

/* The avatar sat at the page origin with its ring bleeding off-screen. */
.avatar{
  position:relative; flex-shrink:0;
  width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:27px;
  color:var(--on-cta); background:var(--grad-cta);
  box-shadow:var(--glow-a), inset 0 2px 4px rgba(255,255,255,.28);
}
.avatar .progress-ring{
  position:absolute; inset:0; width:72px; height:72px;
  transform:rotate(-90deg); pointer-events:none;
}
.avatar .progress-ring circle{
  fill:none; stroke:var(--c3); stroke-width:2; opacity:.6;
  r:34px; cx:36px; cy:36px;
  stroke-dasharray:214; stroke-dashoffset:64; stroke-linecap:round;
}
.header-meta{ min-width:0; }
.header-meta h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(21px,2.4vw,30px); margin:0; line-height:1.1;
}
.header-meta small{ display:block; margin-top:5px; font-size:12.5px; color:var(--txt-2); }

.header-actions{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

/* ── Buttons ────────────────────────────────────────────────────── */
.container-page .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:100px; cursor:pointer;
  font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--txt); background:var(--glass-2);
  border:1px solid var(--edge); text-decoration:none; white-space:nowrap;
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--spring),
             background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.container-page .btn:hover{ border-color:var(--edge-2); transform:translateY(-2px); background:var(--glass); }
.container-page .btn .i{ width:16px; height:16px; }
.container-page .btn.primary{
  background:var(--grad-cta); color:var(--on-cta); border-color:transparent;
  box-shadow:var(--glow-a);
}
.container-page .btn.primary:hover{ box-shadow:0 14px 36px -12px var(--c1); }
.container-page .btn.danger{ color:var(--c4); border-color:rgba(255,90,110,.28); }
.container-page .btn.danger:hover{ background:rgba(255,90,110,.10); border-color:var(--c4); }
.container-page .btn.ghost{ background:transparent; }
.container-page .btn.sm{ padding:7px 13px; font-size:12.5px; }
.container-page .btn.sm .i{ width:14px; height:14px; }

/* ── KPI tiles ──────────────────────────────────────────────────── */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin:0 0 22px;
}
.kpi{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  padding:20px 22px; border-radius:var(--r-2);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color var(--mid) var(--ease), transform var(--mid) var(--spring);
}
.kpi:hover{ border-color:var(--edge-2); transform:translateY(-3px); }
.kpi > div{ min-width:0; flex:1; }
.kpi-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--c1);
}
.kpi-icon .i{ width:19px; height:19px; }
.kpi-num{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(22px,2.4vw,30px); line-height:1; font-variant-numeric:tabular-nums;
}
.kpi-label{
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-2); margin-top:6px;
}
.kpi-trend{
  flex-shrink:0; align-self:flex-start;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.kpi-trend.up  { color:var(--ok); background:rgba(var(--ok-rgb),.12); border:1px solid rgba(var(--ok-rgb),.24); }
.kpi-trend.down{ color:var(--c4); background:rgba(255,90,110,.10); border:1px solid rgba(255,90,110,.22); }

/* ── Filter toolbar ─────────────────────────────────────────────────
   The three selects were full-viewport-width blocks stacked down the
   page. They belong on one row with the search. */
.toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; margin:0 0 20px; border-radius:100px;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(16px);
}
.toolbar .filters{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding:0; border:0; background:none; backdrop-filter:none; margin:0;
}
.toolbar select,
.toolbar input[type="search"]{
  appearance:none; -webkit-appearance:none;
  font-family:var(--body); font-size:13px; font-weight:500; color:var(--txt);
  background:var(--glass-2); border:1px solid var(--edge);
  border-radius:100px; padding:9px 34px 9px 15px; cursor:pointer;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  /* The arrow is drawn inline so the control needs no extra markup. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C88A6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}
.toolbar input[type="search"]{
  background-image:none; padding:9px 16px; cursor:text; min-width:190px; width:auto;
}
.toolbar select:focus, .toolbar input[type="search"]:focus{
  outline:0; border-color:transparent; box-shadow:0 0 0 1.5px var(--c1);
}
.toolbar select option{ background:var(--bg-2); color:var(--txt); }

/* ── Section panel ──────────────────────────────────────────────── */
.container-page .grid{
  display:grid; grid-template-columns:1fr; gap:20px;
}
.container-page .section{
  border-radius:var(--r-2); overflow:hidden;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.container-page .section > h2{
  display:flex; align-items:center; gap:11px;
  margin:0; padding:18px 24px;
  font-family:var(--display); font-weight:700; font-size:16.5px; letter-spacing:-.01em;
  border-bottom:1px solid var(--edge);
}
.container-page .section > h2 .i{ width:18px; height:18px; color:var(--c1); }
.container-page .section > .body{ padding:20px 24px 24px; }

/* ── Timeline ───────────────────────────────────────────────────── */
.timeline{ display:grid; gap:10px; }
.time-item{
  position:relative; padding:15px 18px 15px 34px; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.time-item:hover{ border-color:var(--edge-2); transform:translateX(3px); }
/* The rail and its node, so a list of votes reads as a sequence. */
.time-item::before{
  content:""; position:absolute; left:15px; top:20px;
  width:7px; height:7px; border-radius:50%;
  background:var(--c1); box-shadow:0 0 0 3px rgba(var(--c1-rgb),.16);
}
.time-item::after{
  content:""; position:absolute; left:18px; top:30px; bottom:-11px; width:1px;
  background:var(--edge);
}
.time-item:last-child::after{ display:none; }
.item-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.poll-link{
  font-weight:600; font-size:14.5px; color:var(--txt); text-decoration:none;
  transition:color var(--fast) var(--ease);
}
.poll-link:hover{ color:var(--c3); }
.container-page .meta{ font-size:12px; color:var(--txt-3); font-variant-numeric:tabular-nums; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badges{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.container-page .badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--txt-2);
}
.container-page .badge .i{ width:12px; height:12px; }
.badge.option-badge{ color:var(--c1); border-color:rgba(var(--c1-rgb),.30); background:rgba(var(--c1-rgb),.10); }
.badge.tech  { color:var(--c3); border-color:rgba(var(--c3-rgb),.30); background:rgba(var(--c3-rgb),.10); }
.badge.anime { color:var(--c5-lite); border-color:rgba(var(--c5-rgb),.34); background:rgba(var(--c5-rgb),.14); }
.badge.gaming{ color:var(--ok); border-color:rgba(var(--ok-rgb),.28); background:rgba(var(--ok-rgb),.10); }
.badge-dot::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--c3);
}

/* ── Comment cards ──────────────────────────────────────────────── */
.comments-stack{ display:grid; gap:12px; }
.comment-card{
  padding:17px 19px; border-radius:var(--r-2);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease);
}
.comment-card:hover{ border-color:var(--edge-2); }
.comment-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:11px;
}
.comment-body{
  font-size:14px; line-height:1.6; color:var(--txt-2);
  padding:12px 15px; border-radius:var(--r);
  background:var(--glass-2); border-left:2px solid var(--c1);
}
/* Long comments are clamped until the Show more button unclamps them. */
.comment-body[data-clip]{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.comment-body[data-clip].open{ display:block; -webkit-line-clamp:none; }
.comment-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* ── Empty state ────────────────────────────────────────────────── */
.container-page .empty{
  text-align:center; padding:56px 20px; color:var(--txt-2);
  display:grid; gap:16px; justify-items:center;
}
.container-page .empty p{ margin:0; }

/* ── Settings form ──────────────────────────────────────────────── */
.notif-form{ display:grid; gap:12px; max-width:56rem; }
.notif-form label{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-size:14px; color:var(--txt-2); cursor:pointer;
  padding:12px 15px; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.notif-form label:hover{ border-color:var(--edge-2); color:var(--txt); }
.notif-form input[type="checkbox"]{ width:17px; height:17px; accent-color:var(--c1); cursor:pointer; flex-shrink:0; }
.notif-form input[type="number"]{
  font-family:var(--body); font-size:14px; color:var(--txt);
  background:var(--glass); border:1px solid var(--edge);
  border-radius:9px; padding:5px 8px;
}
.notif-form h3{ font-family:var(--display); font-size:15.5px; margin:0; }

/* ── Pagination ─────────────────────────────────────────────────── */
.container-page .pagination{
  display:flex; gap:6px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:24px;
}
.container-page .pagination a,
.container-page .pagination span{
  min-width:36px; height:36px; padding:0 11px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600; text-decoration:none;
  color:var(--txt-2); background:var(--glass-2); border:1px solid var(--edge);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.container-page .pagination a:hover{ color:var(--txt); border-color:var(--edge-2); }
.container-page .pagination .active{
  color:var(--on-cta); background:var(--grad-cta); border-color:transparent;
}
.container-page .pagination .i{ width:15px; height:15px; }

/* ── Back to top ────────────────────────────────────────────────── */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  color:var(--on-cta); background:var(--grad-cta); border:0;
  box-shadow:var(--glow-a);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--spring), visibility var(--mid);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top .i{ width:19px; height:19px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:760px){
  .container-page{ padding:22px 16px 60px; }
  .acct-header{ padding:22px 20px; }
  .header-actions{ width:100%; }
  .toolbar{ border-radius:var(--r-2); }
  .toolbar input[type="search"]{ min-width:0; flex:1; }
  .container-page .section > h2{ padding:15px 18px; font-size:15px; }
  .container-page .section > .body{ padding:16px 18px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .kpi:hover, .time-item:hover, .container-page .btn:hover{ transform:none; }
}

/* ── Legacy variable aliases ────────────────────────────────────────
   my_account.php carries ~8 inline style attributes referencing tokens
   from the stylesheet that was removed. An undefined custom property
   resolves to nothing, so `background:var(--accent1)` silently painted
   no background at all. Aliasing costs six lines; rewriting the inline
   styles means editing a thousand lines of PHP. */
:root{
  --accent1: var(--c1);
  --accent2: var(--c3);
  --muted:   var(--txt-2);
  --border:  var(--edge);
  --spacing-xs: 8px;
  --spacing-sm: 14px;
  --spacing-md: 22px;
  --spacing-lg: 32px;
}

/* Once a member uploads a photo, the dashboard avatar shows it instead
   of the initial. */
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }