/* ========================================================
   Kheybar Khorramabad — Smart Club Management Dashboard
   ======================================================== */

:root{
  --bg:            #070b09;
  --bg-soft:       #0b1310;
  --panel:         rgba(16, 28, 22, 0.72);
  --panel-strong:  rgba(20, 34, 27, 0.9);
  --line:          rgba(0, 255, 163, 0.16);
  --line-strong:   rgba(0, 255, 163, 0.32);
  --accent:        #00ffa3;
  --accent-dim:    #00b377;
  --accent-blue:   #3aa0ff;
  --warn:          #ff9d4d;
  --danger:        #ff5d6c;
  --text:          #eafff5;
  --text-dim:      #7fa08f;
  --text-dimmer:   #557064;
  --radius:        18px;
  --radius-sm:     12px;
  --font: 'Vazirmatn', Tahoma, sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
section[id], main[id]{ scroll-margin-top: 86px; }

html,body{
  margin:0; padding:0;
  background: radial-gradient(circle at 15% 0%, #0d1a14 0%, var(--bg) 45%) fixed;
  color: var(--text);
  font-family: var(--font);
  font-size:15px;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    radial-gradient(rgba(0,255,163,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events:none;
  z-index:0;
  opacity:.4;
}

a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }

::selection{ background: var(--accent); color:#04140d; }

/* ===================== Layout ===================== */
.app{
  display:flex;
  min-height:100vh;
  position:relative;
  z-index:1;
}

.sidebar{
  width: 232px;
  flex: none;
  background: linear-gradient(180deg, #0b1712 0%, #060a08 100%);
  border-left: 1px solid var(--line);
  padding: 22px 14px;
  position: sticky;
  top:0; height:100vh;
  overflow-y:auto;
}

.brand{
  display:flex; align-items:center; gap:10px;
  padding: 4px 6px 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.brand__logo{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:#fff; border:1px solid var(--line-strong); }
.brand__text{ display:flex; flex-direction:column; line-height:1.4; }
.brand__text strong{ font-size:14px; }
.brand__text span{ font-size:11px; color: var(--text-dim); }

.nav{ display:flex; flex-direction:column; gap:2px; }
.nav__item{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--text-dim);
  transition: background .15s ease, color .15s ease;
}
.nav__icon{ width:18px; text-align:center; font-size:14px; opacity:.9; }
.nav__item:hover{ background: rgba(0,255,163,0.06); color: var(--text); }
.nav__item.is-active{
  background: linear-gradient(90deg, rgba(0,255,163,0.16), rgba(0,255,163,0.02));
  color: var(--accent);
  border: 1px solid var(--line-strong);
}

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* ===================== Topbar ===================== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(7,11,9,0.6);
  backdrop-filter: blur(6px);
  position: sticky; top:0; z-index:5;
}
.topbar__profile{ display:flex; align-items:center; gap:10px; flex:none; }
.avatar-round{
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(145deg, #123526, #06110c);
  border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color: var(--accent); font-weight:700;
}
.topbar__profile-text{ display:flex; flex-direction:column; line-height:1.3; }
.topbar__profile-text strong{ font-size:13px; }
.topbar__profile-text span{ font-size:11px; color: var(--text-dim); }

.topbar__title{
  flex:1; text-align:center;
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 800;
  display:flex; align-items:center; justify-content:center; gap:10px;
  color: var(--text);
}
.topbar__emblem{ width:30px; height:30px; border-radius:50%; object-fit:cover; background:#fff; border:1px solid var(--line-strong); }

.menu-toggle{
  display:none; flex:none;
  width:38px; height:38px; border-radius:10px;
  background: var(--panel); border:1px solid var(--line); color: var(--text);
  font-size:16px;
}
@media (max-width:760px){ .menu-toggle{ display:flex; align-items:center; justify-content:center; } }

.bell{
  flex:none; position:relative;
  width:38px; height:38px; border-radius:50%;
  background: var(--panel); border:1px solid var(--line);
  color: var(--text); font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.bell__dot{
  position:absolute; top:-3px; left:-3px;
  background: var(--danger); color:#fff; font-style:normal;
  font-size:10px; font-weight:700;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid var(--bg);
}

/* ===================== Grid ===================== */
.grid{
  flex:1;
  display:grid;
  grid-template-columns: 1.15fr 1.3fr 1fr 1fr;
  gap: 18px;
  padding: 20px 26px 40px;
  align-items:start;
}
.col{ display:flex; flex-direction:column; gap:18px; min-width:0; }

/* ===================== Card ===================== */
.card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);
}
.card__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 14px;
  gap:10px;
}
.card__head h2{
  font-size: 14.5px; margin:0; font-weight:700; color: var(--text);
}
.link-more{
  font-size:12px; color: var(--accent); flex:none; opacity:.9;
}
.link-more--block{ display:block; text-align:center; margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
.formation-tag{
  font-size:11px; color: var(--accent); border:1px solid var(--line-strong);
  padding:3px 10px; border-radius: 20px;
}

/* ===================== Key Players ===================== */
.players{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.player-chip{ text-align:center; display:flex; flex-direction:column; gap:4px; }
.player-chip__photo{
  position:relative; border-radius: 14px; overflow:hidden;
  border:1px solid var(--line-strong);
  aspect-ratio: 1/1;
}
.player-chip__photo img{ width:100%; height:100%; object-fit:cover; }
.jersey{
  position:absolute; top:6px; right:6px;
  background: rgba(4,10,8,.75); color: var(--accent);
  font-size:12px; font-weight:800;
  width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
}
.player-chip strong{ font-size:11.5px; margin-top:4px; }
.player-chip span{ font-size:10px; color: var(--text-dim); }

/* ===================== Performance ===================== */
.perf{ display:flex; align-items:center; gap:14px; }
.perf canvas{ flex:none; }
.perf__list{ flex:1; display:flex; flex-direction:column; gap:10px; font-size:12px; color: var(--text-dim); }
.perf__list li{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.perf__list .dot{ color: var(--accent); font-size:8px; margin-left:4px; }
.perf__list b{ color: var(--text); font-size:13px; }

/* ===================== Medical list ===================== */
.med-list{ display:flex; flex-direction:column; gap:10px; }
.med-list li{ display:flex; align-items:center; gap:10px; }
.med-list img{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); object-fit:cover; }
.med-list__text{ flex:1; display:flex; flex-direction:column; }
.med-list__text strong{ font-size:12.5px; }
.med-list__text span{ font-size:10.5px; color: var(--text-dim); }
.status{ width:10px; height:10px; border-radius:50%; flex:none; }
.status--ok{ background: var(--accent); box-shadow:0 0 8px var(--accent); }
.status--warn{ background: var(--warn); box-shadow:0 0 8px var(--warn); }

/* ===================== Training ===================== */
.training{ display:flex; align-items:center; gap:16px; }
.training__side{ flex:1; display:flex; flex-direction:column; gap:6px; }
.training__side p{ margin:0; font-size:11.5px; color: var(--text-dim); }
.training__side strong{ font-size:14px; }
.bars{ display:flex; align-items:flex-end; gap:6px; height:60px; margin-top:6px; }
.bars__col{
  flex:1; height: var(--h); min-height:4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  border-radius: 4px 4px 0 0;
  position:relative;
}
.bars__col span{
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  font-size:8px; color: var(--text-dimmer); white-space:nowrap;
}

/* Donut ring (conic-gradient) */
.donut{
  --val: 0;
  width:96px; height:96px; border-radius:50%; flex:none;
  background: conic-gradient(var(--accent) calc(var(--val)*1%), rgba(255,255,255,0.06) 0);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.donut::before{
  content:""; position:absolute; inset:10px;
  border-radius:50%; background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.donut__value{ position:relative; font-weight:800; font-size:16px; z-index:2; }
.donut--blue{ background: conic-gradient(var(--accent-blue) calc(var(--val)*1%), rgba(255,255,255,0.06) 0); }
.donut--blue .donut__value{ color: var(--accent-blue); }

/* ===================== Live match card ===================== */
.scoreboard{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.scoreboard__team{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; width:70px; }
.scoreboard__team img{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:#fff; border:1px solid var(--line-strong); }
.scoreboard__score{ text-align:center; }
.scoreboard__score strong{ font-size:26px; font-weight:800; display:block; letter-spacing:1px; }
.scoreboard__score span{ font-size:11px; color: var(--accent); }
.badge-generic{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(145deg,#301622,#160a10);
  border:1px solid rgba(255,93,108,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#ff96a2;
}
.badge-generic.sm{ width:32px; height:32px; font-size:11px; }

.pitch-canvas{
  width:100%; height:auto; border-radius: 12px;
  border:1px solid var(--line);
  margin-bottom:14px;
  background: #061a10;
}

.stat-bars__row{ display:flex; align-items:center; gap:10px; font-size:12px; }
.stat-bars__row > span{ width:32px; text-align:center; color: var(--text-dim); flex:none; }
.stat-bars__track{
  flex:1; height:6px; border-radius:6px; overflow:hidden;
  background: rgba(255,255,255,0.05);
  display:flex;
}
.stat-bars__track i{ display:block; height:100%; width: var(--w); background: var(--accent); }
.stat-bars__track i.alt{ background: rgba(255,93,108,0.55); }
.stat-bars__label{ text-align:center; font-size:10.5px; color: var(--text-dimmer); margin:2px 0 12px; }

.btn{
  border:none; border-radius: 10px; padding:11px 16px; font-size:12.5px; font-weight:700;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover{ opacity:.9; }
.btn:active{ transform: scale(.98); }
.btn--block{ width:100%; }
.btn--primary{ background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color:#04140d; }
.btn--ghost{ background: transparent; border:1px solid var(--line-strong); color: var(--accent); }

/* ===================== Formation pitch ===================== */
.formation-pitch{ width:100%; height:auto; margin-bottom:14px; }
.pitch-line{ fill:none; stroke: rgba(0,255,163,0.35); stroke-width:1.5; }
.pos circle{ fill:#0d2118; stroke: var(--accent); stroke-width:1.5; cursor:pointer; transition: fill .15s ease; }
.pos:hover circle{ fill: var(--accent); }
.pos:hover text{ fill:#04140d; }
.pos text{ fill: var(--accent); font-size:11px; font-weight:800; text-anchor:middle; font-family: var(--font); pointer-events:none; }

/* ===================== AI card ===================== */
.card--ai{ position:relative; overflow:hidden; }
.ai-box{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin-bottom:14px; }
.ai-orb{
  width:64px; height:64px; border-radius:50%; margin-bottom:6px;
  background: radial-gradient(circle at 35% 30%, #d9fff0, var(--accent) 40%, #01301f 100%);
  box-shadow: 0 0 30px 4px rgba(0,255,163,0.35);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 30px 4px rgba(0,255,163,0.35); }
  50%{ transform: scale(1.06); box-shadow: 0 0 42px 10px rgba(0,255,163,0.5); }
}
.ai-box p{ margin:0; font-size:12px; color: var(--text-dim); line-height:1.9; }
.ai-box strong{ color: var(--text); }

/* ===================== Finance ===================== */
.finance-top{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:16px; }
.donut__caption{ font-size:11.5px; color: var(--text-dim); margin:0; }
.finance-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.finance-list li{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color: var(--text-dim); border-bottom:1px dashed var(--line); padding-bottom:8px; }
.finance-list b{ color: var(--text); font-size:13px; font-weight:700; }
.finance-list small{ color: var(--text-dimmer); font-size:10px; font-weight:400; }
.finance-list .pos-num{ color: var(--accent); }

.section-sub{ font-size:11.5px; color: var(--text-dimmer); margin: 0 0 10px; }
.budget-bars{ display:flex; flex-direction:column; gap:10px; }
.budget-bars li{ display:flex; flex-direction:column; gap:5px; }
.budget-bars i{
  display:block; height:6px; border-radius:6px;
  width: var(--w);
  background: linear-gradient(90deg, var(--accent), var(--accent-blue));
}
.budget-bars div{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color: var(--text-dim); }
.budget-bars b{ color: var(--text); font-weight:600; }

/* ===================== Transfers ===================== */
.transfer-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.transfer-list li{ display:flex; align-items:center; gap:10px; }
.transfer-list__text{ flex:1; display:flex; flex-direction:column; }
.transfer-list__text strong{ font-size:12.5px; }
.transfer-list__text span{ font-size:10.5px; color: var(--text-dim); }
.transfer-list b{ font-size:12px; color: var(--accent); text-align:left; white-space:nowrap; }
.transfer-list small{ display:block; color: var(--text-dimmer); font-size:9px; font-weight:400; }

/* ===================== Full Squad Roster ===================== */
.squad{
  padding: 6px 26px 50px;
}
.squad__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.squad__head h2{ font-size:17px; margin:0; }
.squad__head span{ font-size:11.5px; color: var(--text-dim); }

.squad__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}
.squad__group{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
}
.squad__group h3{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; margin:0 0 12px; color: var(--accent);
}
.squad__dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow:0 0 6px var(--accent); }
.squad__list{ display:flex; flex-direction:column; gap:2px; }
.squad__list li{
  display:grid; grid-template-columns: 26px 1fr auto;
  align-items:center; gap:8px;
  padding:8px 4px;
  border-bottom:1px dashed rgba(0,255,163,0.08);
  font-size:12.5px;
}
.squad__list li:last-child{ border-bottom:none; }
.squad__num{
  width:24px; height:24px; border-radius:7px;
  background: rgba(0,255,163,0.08); border:1px solid var(--line-strong);
  color: var(--accent); font-weight:800; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.squad__name{ color: var(--text); }
.squad__age{ color: var(--text-dim); font-size:11px; white-space:nowrap; }

@media (max-width: 1080px){
  .squad__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .squad__grid{ grid-template-columns: 1fr; }
  .squad{ padding: 6px 16px 40px; }
}


@media (max-width: 1400px){
  .grid{ grid-template-columns: 1.1fr 1.2fr 1fr; }
  .col--4{ grid-column: 1 / -1; flex-direction: row; }
  .col--4 .card{ flex:1; }
}
@media (max-width: 1080px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .col--3{ grid-column: 1 / -1; flex-direction: row; }
  .col--3 .card{ flex:1; }
  .col--4{ flex-direction: column; }
}
@media (max-width: 760px){
  .sidebar{ position: fixed; right:0; top:0; transform: translateX(100%); transition: transform .2s ease; z-index:20; box-shadow: -10px 0 40px rgba(0,0,0,.5); }
  .sidebar.is-open{ transform: translateX(0); }
  .grid{ grid-template-columns: 1fr; padding: 16px; }
  .col--2, .col--3, .col--4{ flex-direction:column; grid-column:auto; }
  .topbar__title{ font-size:13px; }
  .topbar__emblem{ width:22px; height:22px; }
  .players{ grid-template-columns: repeat(3,1fr); }
}

@media (prefers-reduced-motion: reduce){
  .ai-orb{ animation:none; }
  *{ transition:none !important; }
}

/* ===================== Dedicated pages / sections ===================== */
.page-section{ padding: 8px 26px 10px; }
.page-section__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.page-section__head h2{ font-size:17px; margin:0; }
.page-section__head span{ font-size:11.5px; color: var(--text-dim); }

.cards-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
  align-items:start;
}

.note{ font-size:12.5px; color: var(--text-dim); line-height:2; margin:0; }
.note b{ color: var(--text); }

.bullet-list{ display:flex; flex-direction:column; gap:10px; }
.bullet-list li{
  font-size:12.5px; color: var(--text-dim); line-height:1.9;
  padding-right:16px; position:relative;
}
.bullet-list li::before{
  content:""; position:absolute; right:0; top:8px;
  width:6px; height:6px; border-radius:50%; background: var(--accent);
}

/* Pills (formation picker etc.) */
.pill-group{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pill{
  padding:8px 16px; border-radius:20px; border:1px solid var(--line-strong);
  font-size:12px; color: var(--text-dim); cursor:pointer; transition:.15s ease;
}
.pill:hover{ color: var(--text); }
.pill.is-active{ background: var(--accent); color:#04140d; border-color: var(--accent); font-weight:700; }

/* Rating bars */
.rating-list{ display:flex; flex-direction:column; gap:12px; }
.rating-list li{ display:grid; grid-template-columns: 90px 1fr 28px; align-items:center; gap:10px; font-size:12px; color: var(--text-dim); }
.rating-track{ height:6px; border-radius:6px; background: rgba(255,255,255,0.06); overflow:hidden; }
.rating-track i{ display:block; height:100%; width: var(--w); background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.rating-list b{ color: var(--text); font-size:12px; text-align:left; }

/* Fixtures / results */
.fixture-list{ display:flex; flex-direction:column; gap:2px; }
.fixture-list li{
  display:flex; align-items:center; gap:10px;
  padding:10px 2px; border-bottom:1px dashed var(--line);
  font-size:12.5px;
}
.fixture-list li:last-child{ border-bottom:none; }
.fixture-list__date{ flex:none; width:88px; color: var(--text-dim); font-size:11px; }
.fixture-list__vs{ flex:1; color: var(--text); }
.fixture-list__venue{ flex:none; font-size:10.5px; color: var(--text-dimmer); }

.badge-result{
  width:24px; height:24px; border-radius:7px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}
.badge-result.win{ background: rgba(0,255,163,0.14); color: var(--accent); border:1px solid var(--line-strong); }
.badge-result.draw{ background: rgba(255,157,77,0.14); color: var(--warn); border:1px solid rgba(255,157,77,0.4); }
.badge-result.loss{ background: rgba(255,93,108,0.14); color: var(--danger); border:1px solid rgba(255,93,108,0.4); }

/* Generic table */
.table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.table th, .table td{ padding:9px 6px; text-align:right; border-bottom:1px dashed rgba(0,255,163,0.1); }
.table th{ color: var(--text-dim); font-weight:600; font-size:11px; }
.table td{ color: var(--text); }
.table tbody tr:last-child td{ border-bottom:none; }

/* Timeline (live events) */
.timeline{ display:flex; flex-direction:column; gap:12px; }
.timeline li{ display:flex; align-items:center; gap:12px; font-size:12.5px; color: var(--text-dim); }
.timeline__min{
  flex:none; width:34px; height:24px; border-radius:7px;
  background: rgba(0,255,163,0.08); border:1px solid var(--line-strong);
  color: var(--accent); font-weight:700; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.timeline li span:last-child{ color: var(--text); }

/* Watchlist (scouting) */
.watchlist{ display:flex; flex-direction:column; gap:12px; }
.watchlist li{ display:flex; align-items:center; gap:10px; }
.rating{ margin-right:auto; color: var(--accent); font-weight:800; font-size:13px; flex:none; }

/* AI chat mock */
.chat-mock{ display:flex; flex-direction:column; gap:10px; }
.chat-mock .msg{ max-width:88%; padding:10px 14px; border-radius:14px; font-size:12.5px; line-height:1.8; }
.chat-mock .msg.ai{ background: rgba(0,255,163,0.07); border:1px solid var(--line); align-self:flex-start; color: var(--text); }
.chat-mock .msg.user{ background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06); align-self:flex-end; color: var(--text-dim); }

/* Reports list */
.report-list{ display:flex; flex-direction:column; gap:4px; }
.report-list li{ display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px dashed var(--line); }
.report-list li:last-child{ border-bottom:none; }
.report-list__icon{
  width:36px; height:36px; border-radius:10px; flex:none;
  background: rgba(0,255,163,0.08); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color: var(--accent); font-style:normal;
}
.report-list__text{ flex:1; display:flex; flex-direction:column; }
.report-list__text span{ font-size:10.5px; color: var(--text-dim); }
.btn-sm{ padding:7px 14px; font-size:11px; flex:none; }

/* Settings */
.settings-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color: var(--text-dim); margin-bottom:16px; }
.settings-form input[type="text"], .settings-form input[type="email"]{
  background: rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:9px;
  padding:11px 14px; color: var(--text); font-family: inherit; font-size:13px;
}
.settings-form input:focus{ outline:none; border-color: var(--line-strong); }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 2px; border-bottom:1px dashed var(--line); font-size:12.5px; color: var(--text-dim);
}
.toggle-row:last-child{ border-bottom:none; }

.switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .slider{
  position:absolute; inset:0; background: rgba(255,255,255,0.08);
  border:1px solid var(--line); border-radius:20px; cursor:pointer; transition:.2s ease;
}
.switch .slider::before{
  content:""; position:absolute; width:16px; height:16px; left:3px; top:2px;
  background: var(--text-dim); border-radius:50%; transition:.2s ease;
}
.switch input:checked + .slider{ background: rgba(0,255,163,0.22); border-color: var(--line-strong); }
.switch input:checked + .slider::before{ transform: translateX(-18px); background: var(--accent); }

@media (max-width: 760px){
  .page-section{ padding: 6px 16px 6px; }
}