/* Dashboard account panel (docs.html). Colors follow the site theme variables
   (--a / --al / --ad / --ar), so this restyles with the theme picker. */
.db { --db-panel: rgba(15, 23, 42, .72); --db-panel2: rgba(30, 41, 59, .5); --db-line: #2a364d; --db-muted: #94a3b8; --db-good: #34d399; --db-gold: #fbbf24; margin-bottom: 1.5rem; }
.db *, .db *::before, .db *::after { box-sizing: border-box; }
.db button { font: inherit; color: inherit; cursor: pointer; }
.db svg.coin { width: 1em; height: 1em; vertical-align: -.16em; flex-shrink: 0; }
.db-num { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.db-hello { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.db-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--al), #38bdf8); display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; }
.db-hello .grow { flex: 1; min-width: 170px; }
.db-hello h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; }
.db-hello .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-tools { display: flex; gap: 8px; }
.db-sq { width: 36px; height: 36px; border: 1px solid var(--db-line); background: var(--db-panel); border-radius: 10px; display: grid; place-items: center; color: var(--db-muted); text-decoration: none; }
.db-sq:hover { color: #fff; border-color: var(--al); }

.db-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 14px; }
@media (min-width: 780px) { .db-grid { grid-template-columns: 1.1fr 1.1fr .9fr; } }
.db-card { background: var(--db-panel); border: 1px solid var(--db-line); border-radius: 16px; padding: 18px; }
.db-card h4 { margin: 0 0 14px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--db-muted); display: flex; align-items: center; gap: 8px; }
.db-card.coins { border-color: rgba(var(--ar), .4); background: radial-gradient(420px 200px at 100% -30%, rgba(245, 158, 11, .16), transparent 60%), radial-gradient(420px 220px at 0% 0%, rgba(var(--ar), .18), transparent 60%), var(--db-panel); }

.db-big { display: flex; align-items: center; gap: 10px; font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.db-big svg.coin { font-size: 2.2rem; filter: drop-shadow(0 4px 10px rgba(245, 158, 11, .35)); }
.db-sub { color: var(--db-muted); font-size: .8rem; margin: 8px 0 14px; }
.db-actions { display: flex; gap: 8px; }
.db-btn { flex: 1; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: .85rem; background: linear-gradient(135deg, var(--al), var(--ad)); color: #fff; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.db-btn:hover:not(:disabled) { filter: brightness(1.1); }
.db-btn:disabled { opacity: .5; cursor: not-allowed; }
.db-btn.ghost { background: transparent; border: 1px solid var(--db-line); color: #e2e8f0; flex: 0 0 auto; }

.db-ring-row { display: flex; align-items: center; gap: 16px; }
.db-ring { position: relative; width: 112px; height: 112px; flex-shrink: 0; }
.db-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.db-ring .t { stroke: var(--db-line); }
.db-ring .p { stroke: var(--al); transition: stroke-dashoffset .5s; }
.db-ring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.db-ring .mid b { font-size: 1.3rem; line-height: 1.1; }
.db-ring .mid span { font-size: .68rem; color: var(--db-muted); }
.db-left { font-size: 1.4rem; font-weight: 700; }
.db-note { color: var(--db-muted); font-size: .78rem; }

.db-mini { background: var(--db-panel2); border: 1px solid var(--db-line); border-radius: 12px; padding: 10px 12px; }
.db-mini + .db-mini { margin-top: 10px; }
.db-mini b { display: block; font-size: 1.05rem; }
.db-mini span { font-size: .75rem; color: var(--db-muted); }

.db-limit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.db-limit-head b { font-size: 1.5rem; font-weight: 800; }
.db-limit-head small { color: var(--db-muted); font-weight: 500; font-size: .8rem; }
.db-seg { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--db-line); margin: 14px 0 12px; }
.db-seg i { display: block; height: 100%; }
.db-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.db-lg { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; padding: 4px 10px; border-radius: 999px; background: var(--db-panel2); border: 1px solid var(--db-line); }
.db-lg i { width: 8px; height: 8px; border-radius: 50%; }
.db-lg b { font-family: 'JetBrains Mono', monospace; }

.db-pill { font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(var(--ar), .5); color: var(--al); letter-spacing: .04em; }
.db-pill.good { border-color: rgba(52, 211, 153, .5); color: var(--db-good); }
.db-trybtn { background: transparent; border: 1px solid rgba(251, 191, 36, .45); color: var(--db-gold); border-radius: 999px; padding: 3px 12px; font-size: .72rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .db-ring .p { transition: none; } }

/* =====================================================================
   Mockup styling: welcome header, overview cards, stat tiles, chart,
   side-by-side sections, terms + contact.
   ===================================================================== */
.dash-chips{top:76px}
main.dash .card{background:linear-gradient(180deg,var(--surface),transparent)!important;transition:border-color .25s,box-shadow .25s}
main.dash .card:hover{border-color:rgba(var(--ar),.3)!important}

/* Welcome header */
.db-hello{gap:16px;margin-bottom:20px}
.db-avatar{width:58px!important;height:58px!important;font-family:var(--font-h);font-size:1.3rem;box-shadow:0 10px 26px -10px rgba(var(--ar),.8)}
.db-hello h3{font-family:var(--font-h);font-size:1.6rem!important;letter-spacing:-.02em;line-height:1.15}
.db-sq{width:38px;height:38px;transition:all .15s}
.db-sq:hover{background:rgba(var(--ar),.2)}

/* Overview cards */
.db-grid{gap:16px}
.db-card{background:linear-gradient(180deg,var(--surface),transparent);border-color:var(--line);border-radius:20px;padding:22px;transition:border-color .25s,box-shadow .25s}
.db-card:hover{border-color:rgba(var(--ar),.3)}
.db-card h4{font-family:var(--font-h);font-size:1.02rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--txt);margin-bottom:16px}
.db-card.coins{border-radius:20px}
.db-big{font-family:var(--font-h)}
.db-num{font-family:var(--font-h)!important}
.db-ring{width:124px;height:124px}
.db-ring .mid b{font-family:var(--font-h);font-size:1.5rem}
.db-mini{border-radius:14px;background:rgba(var(--ar),.07);border-color:rgba(var(--ar),.2)}
.db-seg{height:12px;gap:2px}
.db-lg{border-radius:999px}
.db-btn{border-radius:12px;box-shadow:0 8px 20px -8px rgba(var(--ar),.7);transition:transform .15s,filter .15s}
.db-btn:hover:not(:disabled){transform:translateY(-1px)}

/* Account rows */
.info-row{padding:14px 0;border-bottom:1px solid var(--line)}
.info-row:last-of-type{border-bottom:0}

/* Stat tiles (site-wide + personal audit) */
#d-stats .rounded-xl.p-3,#auditSection .rounded-xl.p-3{padding:16px 18px!important;border-radius:16px!important;transition:transform .25s,box-shadow .25s}
#d-stats .rounded-xl.p-3:hover,#auditSection .rounded-xl.p-3:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(var(--ar),.6)}
#d-stats .text-xl,#auditSection .text-xl{font-family:var(--font-h);font-size:1.9rem;line-height:1.1;letter-spacing:-.02em;margin-top:4px}
#d-stats .text-lg,#auditSection .text-lg{font-family:var(--font-h);font-size:1.3rem}

/* Range toggle */
.dseg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.dseg button{padding:5px 14px;border-radius:999px;border:0;background:none;color:var(--mut);font:600 .76rem var(--font-b);cursor:pointer}
.dseg button.on{background:rgba(var(--ar),.25);color:var(--txt)}

/* Chart: taller, dashed baseline, hover tooltip */
.dchart,#auditChart{display:flex;align-items:flex-end;gap:4px;height:120px!important;margin:6px 0 4px;border-bottom:1px dashed rgba(var(--ar),.5)}
.dchart i{flex:1;position:relative;min-width:2px;min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--al),rgba(var(--ar),.35));transition:filter .15s}
.dchart i.zero{background:rgba(var(--ar),.25)}
.dchart i.top{background:linear-gradient(180deg,#fbbf24,#f59e0b)}
.dchart i.today{background:linear-gradient(180deg,var(--al),var(--a))}
.dchart i:hover{filter:brightness(1.25)}
.dchart i:hover::after{content:attr(data-t);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:8px;background:#0f172a;border:1px solid var(--line);font:600 .7rem var(--font-b);white-space:nowrap;z-index:5;color:var(--txt);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.dchart i:first-child:hover::after{left:0;transform:none}
.dchart i:last-child:hover::after{left:auto;right:0;transform:none}
.daxis{display:flex;justify-content:space-between;font-size:.7rem;color:var(--mut);margin-bottom:6px}

/* Progress bars in stat cards */
#d-stats .bg-gray-800,#auditSection .bg-gray-800{background:var(--surface)!important;height:6px!important}
#d-stats .h-1\.5,#auditSection .h-1\.5{height:6px!important;background:linear-gradient(90deg,var(--a),var(--al))!important}

/* Side-by-side sections */
.dash-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));margin-bottom:24px}
.dash-2>*{margin-bottom:0!important}
.dash-2 .card{height:100%}
.dbox-col{display:flex;flex-direction:column}
.dbox-title{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:700 1.1rem var(--font-h)}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rules li{display:flex;gap:14px;align-items:flex-start;color:var(--mut);font-size:.92rem;line-height:1.5}
.rules b{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:700 .78rem var(--font-h);background:rgba(var(--ar),.15);color:var(--al)}

/* Plans banner */
.plan-hot{border-color:rgba(var(--ar),.5)!important;box-shadow:0 20px 50px -28px rgba(var(--ar),.6)}
.plan-hot:hover{box-shadow:0 24px 56px -26px rgba(var(--ar),.8)}
.ip-item,.milestone-row{transition:background .15s}

@media(max-width:640px){#d-stats .text-xl,#auditSection .text-xl{font-size:1.6rem}}

/* =====================================================================
   Dashboard redesign v2 — glowing bordered cards, icon badges, a small
   usage ring, and a new Quick Actions strip. Everything below only
   restyles existing structure/classes (or adds the new .nd-* ones) —
   no element IDs, onclick handlers, or JS templates changed, so every
   render function keeps working exactly as before.
   ===================================================================== */

/* Every section card gets the same glowing-border language. Safe to
   redefine .card and .db-card here since dashboard.css only loads on
   docs.html — no other page is affected. */
.card{background:linear-gradient(180deg,var(--surface),transparent)!important;border:1.5px solid rgba(var(--ar),.3)!important;border-radius:22px!important;box-shadow:0 0 30px -20px rgba(var(--ar),.9);transition:transform .2s,box-shadow .2s,border-color .2s!important}
.card:hover{transform:translateY(-3px)!important;border-color:rgba(var(--ar),.55)!important;box-shadow:0 0 34px -14px rgba(var(--ar),1)!important}
.db-card{box-shadow:0 0 30px -20px rgba(var(--ar),.9);border-width:1.5px!important;border-color:rgba(var(--ar),.3)!important}
.db-card:hover{box-shadow:0 0 34px -14px rgba(var(--ar),1)}

/* Icon badges: every "<i> Heading" pattern (db-card h4, and the plain
   .card section headers) gets a small glowing circular badge instead of
   a bare glyph, matching the stat-tile icon language. */
.db-card h4 i:first-child,
.card .font-bold.text-base i:first-child,
.card h2 i:first-child,
.card h3.dbox-title i:first-child{
  width:30px;height:30px;border-radius:10px;display:inline-grid;place-items:center;
  background:rgba(var(--ar),.16);border:1px solid rgba(var(--ar),.3);color:var(--al);
  font-size:.9rem;margin-right:2px
}

/* Small usage ring — shrunk right down so it reads as a compact badge
   next to the day's numbers instead of a big standalone centerpiece. */
.db-ring{width:64px!important;height:64px!important}
.db-ring .mid b{font-size:.82rem!important}
.db-ring .mid span{font-size:.56rem!important}
.db-ring-row{gap:14px}

/* Quick Actions — new section, plain static links (no JS needed). */
.nd-qrow{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:16px;
  background:linear-gradient(180deg,var(--surface),transparent);border:1.5px solid rgba(var(--ar),.3);
  margin-bottom:10px;transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:0 0 24px -18px rgba(var(--ar),.9)}
.nd-qrow:hover{transform:translateX(3px);border-color:rgba(var(--ar),.6);box-shadow:0 0 26px -12px rgba(var(--ar),1)}
.nd-qrow .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--ar),.16);color:var(--al);font-size:1.05rem;flex-shrink:0}
.nd-qrow .main{flex:1;min-width:0}
.nd-qrow .main b{display:block;font-size:.92rem;font-family:var(--font-h)}
.nd-qrow .main span{display:block;font-size:.77rem;color:var(--mut);margin-top:1px}
.nd-qrow .arrow{color:var(--mut);font-size:1.2rem;flex-shrink:0;transition:color .15s}
.nd-qrow:hover .arrow{color:var(--al)}
.nd-sech{display:flex;align-items:center;gap:9px;margin:22px 2px 12px}
.nd-sech i{color:var(--al);font-size:1.05rem}
.nd-sech h2{font-size:1.05rem;font-family:var(--font-h);color:var(--al);margin:0}