/* Dashboard components, shared by the admin dashboard and the member dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 1rem; }
.kpi { position: relative; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--a); border-radius: 14px; padding: .95rem 1rem; }
.kpi.t-green { border-top-color: #22c55e; } .kpi.t-orange { border-top-color: #f59e0b; } .kpi.t-blue { border-top-color: var(--s); } .kpi.t-gold { border-top-color: var(--a); }
.kpi-i { font-size: 1.3rem; line-height: 1; }
.kpi-n { font-family: var(--head); font-size: 2.1rem; line-height: 1.1; color: #fff; margin-top: .35rem; word-break: break-word; }
.kpi-l { font-size: .78rem; color: var(--ink); opacity: .85; }
.kpi-s { font-size: .68rem; color: var(--muted); margin-top: .15rem; }

.qa { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; align-items: center; }
.btn-mini { display: inline-flex; align-items: center; gap: .3rem; background: var(--bg); border: 1px solid var(--line); color: var(--ink) !important; border-radius: 8px; padding: .38rem .7rem; font-size: .76rem; font-weight: 600; cursor: pointer; }
.btn-mini:hover { border-color: var(--muted); background: var(--bg2); }
.btn-mini.b-green { border-color: rgba(34,197,94,.6); color: #86efac !important; } .btn-mini.b-red { border-color: rgba(239,68,68,.6); color: #fca5a5 !important; }
.btn-gold-s { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--a), var(--a2)); color: var(--bg) !important; border: 0; border-radius: 8px; padding: .42rem .9rem; font-size: .8rem; font-weight: 800; cursor: pointer; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.panel-h { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .8rem; }
.panel-h h2 { font-size: 1.25rem; margin: 0; color: #fff; text-transform: uppercase; }
.panel-sub { font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.panel-sub2 { font-size: .74rem; color: var(--muted); margin: -.4rem 0 .7rem; }
.dot-g { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
.empty { color: var(--muted); text-align: center; padding: 1.2rem .5rem; font-size: .85rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid2 .panel, .grid3 .panel { margin-bottom: 0; } .grid2, .grid3 { margin-bottom: 1rem; }

.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tg { display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; margin: 0; cursor: pointer; font-size: .8rem; font-weight: 600; }
.tg-l { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; } .tg-l i { font-style: normal; }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch b { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: background .2s; }
.switch b::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + b { background: #22c55e; } .switch input:checked + b::after { transform: translateX(18px); }
.switch input:disabled + b { opacity: .5; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: .9rem; font-size: .72rem; color: var(--muted); }

.chart { width: 100%; display: block; }
.hbar { display: grid; grid-template-columns: 90px 1fr auto; gap: .6rem; align-items: center; margin-bottom: .55rem; font-size: .8rem; }
.hbar div { background: var(--bg); border-radius: 99px; height: 9px; overflow: hidden; } .hbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--a2), var(--a)); border-radius: 99px; } .hbar b { color: var(--a); font-weight: 600; }

.dtable { margin: 0; font-size: .82rem; } .dtable td, .dtable th { padding: .55rem .6rem; vertical-align: middle; }
.pill { display: inline-block; font-size: .66rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.p-green { background: rgba(34,197,94,.16); color: #6ee7a0; } .p-gold { background: color-mix(in srgb, var(--a) 18%, transparent); color: var(--a); }
.p-gray { background: var(--bg); color: var(--muted); border: 1px solid var(--line); } .p-blue { background: color-mix(in srgb, var(--s) 30%, transparent); color: #cfdcff; } .p-red { background: rgba(239,68,68,.16); color: #fca5a5; }
.sys, .act { list-style: none; padding: 0; margin: 0 0 .6rem; font-size: .82rem; } .sys li, .act li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.act li { justify-content: flex-start; } .act small { margin-left: auto; color: var(--muted); }

/* ---- Member dashboard */
.mhello { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--s) 25%, var(--card)), var(--card)); border: 1px solid var(--line); border-radius: 20px; padding: 1.3rem; margin-bottom: 1rem; }
.mavatar { width: 58px; height: 58px; border-radius: 50%; background: var(--a); color: var(--bg); display: grid; place-items: center; font-family: var(--head); font-size: 2rem; flex: none; }
.mhello h1 { font-size: 2rem; margin: 0; color: #fff; line-height: 1; text-transform: uppercase; } .mhello p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }
.vipstate { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem; margin-bottom: 1rem; }
.vipstate.on { border-color: color-mix(in srgb, var(--a) 55%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--a) 9%, var(--card)), var(--card)); }
.vipstate h2 { font-size: 1.6rem; color: #fff; margin: 0 0 .2rem; text-transform: uppercase; }
.vbar { height: 9px; background: var(--bg); border-radius: 99px; overflow: hidden; margin: .8rem 0 .4rem; } .vbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--a2), var(--a)); border-radius: 99px; }
.mtips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.mtip { display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; color: var(--ink) !important; }
.mtip:hover { border-color: var(--muted); } .mtip small { color: var(--muted); display: block; margin-top: .15rem; }