/* صفحه حساب پلاسما (account.plusmaco.ir): بی طرف ، بدون هیچ بخش یا داده برنامه ها.
   رنگ ها از هویت پلاسما: سرمه ای #10293F و نارنجی #F28A1E ؛ روشن و تیره ، راست به چپ ، گوشی. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --navy: #10293F;
  --orange: #F28A1E;
  --bg: #F2F5F9;
  --card: #FFFFFF;
  --line: rgba(16, 41, 63, .14);
  --text: #10293F;
  --muted: #55657A;
  --field: #FFFFFF;
  --plate: #FFFFFF;
  --bad-bg: #FDECEC; --bad: #A4262C;
  --ok-bg: #E5F6EE; --ok: #0B6A4A;
  --grid: rgba(16, 41, 63, .05);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1B2C;
  --card: #12293F;
  --line: rgba(220, 230, 245, .16);
  --text: #EEF2F8;
  --muted: #A8B6CC;
  --field: #0B1B2C;
  --plate: rgba(255, 255, 255, .95);
  --bad-bg: #3A1A1E; --bad: #FFB4B4;
  --ok-bg: #12382C; --ok: #8FE3BF;
  --grid: rgba(220, 230, 245, .04);
}
:root[data-theme="dark"] .th-light, :root:not([data-theme="dark"]) .th-dark { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 16px; line-height: 1.9; color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
}
img { max-width: 100%; height: auto; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; padding: 8px 14px; border-radius: 10px; background: var(--navy); color: #fff; z-index: 5; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.top { max-width: 560px; margin: 0 auto; padding: 22px 20px 0; display: flex; align-items: center; justify-content: space-between; }
.brand img { display: block; height: 40px; width: auto; }
.theme-btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.theme-btn .ic { width: 20px; height: 20px; }
:root[data-theme="dark"] .theme-btn .ic-moon, :root:not([data-theme="dark"]) .theme-btn .ic-sun { display: none; }

.wrap { max-width: 560px; margin: 0 auto; padding: 22px 20px 48px; }
.card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 34px 34px 30px; box-shadow: 0 30px 60px -44px rgba(16, 41, 63, .55); }
.card-edge { position: absolute; inset-inline: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--orange), #F7B25C 55%, var(--navy)); }

.ctx { margin-bottom: 18px; padding: 14px 16px; border-radius: 20px; border: 1px dashed var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ctx-plate { flex: none; padding: 8px 14px; border-radius: 14px; background: var(--plate); border: 1px solid rgba(16, 41, 63, .1); display: flex; align-items: center; }
.ctx-plate img { display: block; height: 26px; width: auto; }
/* پلاک لوگو در هر دو پوسته سفید است ، پس همیشه نسخه روشن لوگو روی آن می آید */
:root[data-theme="dark"] .ctx-plate .th-light, :root[data-theme="dark"] .app-plate .th-light { display: block !important; }
:root[data-theme="dark"] .ctx-plate .th-dark, :root[data-theme="dark"] .app-plate .th-dark { display: none !important; }
.ctx-text { margin: 0; flex: 1 1 160px; font-weight: 800; line-height: 1.8; }

.title { margin: 0; font-size: clamp(24px, 5vw, 30px); font-weight: 900; line-height: 1.5; }
.title::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--orange); }
.lead { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; }
.sub { margin: 26px 0 10px; font-size: 17px; font-weight: 900; }

.msg, .note { margin-top: 16px; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.9; }
.msg { background: var(--bad-bg); color: var(--bad); border-inline-start: 4px solid currentColor; }
.note { background: var(--ok-bg); color: var(--ok); border-inline-start: 4px solid currentColor; }

.view { margin-top: 20px; }
.wait { display: flex; align-items: center; gap: 12px; color: var(--muted); min-height: 80px; }
.wait p { margin: 0; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--orange); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.tab { padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--navy); color: #FFFFFF; }
:root[data-theme="dark"] .tab[aria-selected="true"] { background: var(--orange); color: #10293F; }

.form { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14.5px; font-weight: 800; }
.field input { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--field); color: var(--text); font-size: 17px; }
.field input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 138, 30, .25); }
.field input[dir="ltr"] { text-align: left; }
.code-input { letter-spacing: 10px; font-weight: 900; font-size: 24px !important; text-align: center !important; }
.hint { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.9; }

.btn { min-height: 52px; border: 0; border-radius: 999px; padding: 8px 10px 8px 22px; font-weight: 900; font-size: 16.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; }
.btn.primary { background: var(--navy); color: #FFFFFF; position: relative; }
.btn.primary span { flex: 1; text-align: center; padding-inline-start: 36px; }
.btn-dot { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); position: relative; }
/* پیکان رو به چپ (جهت پیشروی در متن راست به چپ) */
.btn-dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-left: 2.5px solid #10293F; border-bottom: 2.5px solid #10293F; transform: rotate(45deg); translate: 2px 0; }
.btn.primary:hover, .btn.primary:focus-visible { background: #0A1B2B; }
:root[data-theme="dark"] .btn.primary { background: #1D3F5E; }
:root[data-theme="dark"] .btn.primary:hover { background: #255077; }
.btn.ghost { margin-top: 22px; width: 100%; padding: 8px 22px; background: transparent; border: 1.5px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--orange); }
.btn[disabled] { opacity: .6; cursor: progress; }
.link { align-self: center; border: 0; background: none; padding: 4px 8px; color: var(--muted); font-weight: 700; font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link:hover { color: var(--orange); }
.link[disabled] { text-decoration: none; cursor: default; opacity: .8; }

.who { margin: 0; display: grid; gap: 10px; }
.who > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); }
.who dt { color: var(--muted); font-size: 14.5px; font-weight: 700; }
.who dd { margin: 0; font-weight: 900; font-size: 17px; }

.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg); color: inherit; text-decoration: none; }
.app:hover, .app:focus-visible { border-color: var(--orange); }
.app-plate { flex: none; min-width: 148px; padding: 8px 12px; border-radius: 12px; background: var(--plate); border: 1px solid rgba(16, 41, 63, .1); display: flex; justify-content: center; }
.app-plate img { display: block; height: 24px; width: auto; }
.app-text { flex: 1 1 150px; font-size: 14.5px; font-weight: 700; color: var(--muted); }

.foot { margin: 18px 0 0; text-align: center; font-size: 14.5px; }
.foot a { color: var(--muted); font-weight: 700; text-underline-offset: 4px; }
.foot a:hover { color: var(--orange); }

@media (max-width: 520px) {
  .top { padding: 16px 14px 0; }
  .brand img { height: 34px; }
  .wrap { padding: 16px 14px 36px; }
  .card { padding: 26px 18px 22px; border-radius: 22px; }
  .app-plate { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }