:root{
  --bg:#faf9f5;
  --surface:#ffffff;
  --surface-2:#f1efe7;
  --border:#e3e0d3;
  --text:#1e211d;
  --text-dim:#6c7066;
  --accent:#0f6e5d;
  --accent-soft:#e3f1ec;
  --action:#1da56e;
  --action-hover:#178f5f;
  --action-text:#ffffff;
  --tg:#229ed9;
  --tg-soft:#e4f2fa;
  --sms:#7a5cc4;
  --sms-soft:#eee9fa;
  --danger:#c0392b;
  --danger-soft:#fbe9e7;
  --focus:#0f6e5d;
  --shadow: 0 1px 2px rgba(30,33,29,0.04), 0 8px 24px -12px rgba(30,33,29,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181a;
    --surface:#1c2124;
    --surface-2:#242a2c;
    --border:#323a3d;
    --text:#edefec;
    --text-dim:#9aa29e;
    --accent:#4fd1ae;
    --accent-soft:#1c332e;
    --action:#22c17e;
    --action-hover:#38d690;
    --action-text:#0b1210;
    --tg:#5cc4ee;
    --tg-soft:#17303c;
    --sms:#b39cf0;
    --sms-soft:#272040;
    --danger:#ff6b5c;
    --danger-soft:#3a1f1c;
    --focus:#4fd1ae;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 28px -12px rgba(0,0,0,0.55);
  }
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.app{
  direction:rtl;
  max-width:460px;
  margin:0 auto;
  padding:20px 16px calc(48px + env(safe-area-inset-bottom));
  min-height:100vh;
}

header.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.top-actions{ display:flex; gap:6px; flex:none; }
.title-block h1{
  font-size:1.45rem;
  font-weight:800;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.title-block h1 svg{flex:none}
.title-block p{
  margin:0;
  color:var(--text-dim);
  font-size:0.9rem;
  line-height:1.6;
}

button.icon-btn{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-dim);
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:none;
  transition:background .15s,color .15s,border-color .15s;
}
button.icon-btn:hover{ color:var(--accent); border-color:var(--accent); }
#installBtn{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

section.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:18px;
  margin-top:16px;
}

.field{ margin-bottom:14px; }
.field:last-child{ margin-bottom:0; }
label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  color:var(--text-dim);
  margin-bottom:6px;
}
.label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.label-row label{ margin-bottom:6px; }
.link-btn{
  background:none;
  border:none;
  padding:0;
  color:var(--accent);
  font-family:inherit;
  font-size:0.78rem;
  font-weight:700;
  cursor:pointer;
}
.link-btn:hover{ text-decoration:underline; }

input[type="text"],input[type="tel"],textarea,select{
  width:100%;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-family:inherit;
  font-size:1rem;
  line-height:1.5;
}
textarea{ min-height:110px; resize:vertical; }
select{
  cursor:pointer;
  font-weight:600;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);
  background-position:14px calc(50% - 2px),19px calc(50% - 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-left:34px;
}
input[type="tel"]{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:1.15rem;
  letter-spacing:0.5px;
  font-variant-numeric:tabular-nums;
  direction:ltr;
  text-align:right;
}
.mono-input{
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:0.88rem;
}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--focus);
  outline-offset:1px;
  border-color:var(--focus);
}

.feedback{
  min-height:18px;
  font-size:0.82rem;
  margin-top:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  direction:ltr;
  text-align:right;
}
.feedback.ok{ color:var(--accent); }
.feedback.err{ color:var(--danger); }
.feedback.muted{ color:var(--text-dim); }
/* متن‌های فارسیِ راهنما با فونت عادی و راست‌چین */
.feedback.err,.feedback.muted{
  font-family:inherit;
  direction:rtl;
  text-align:right;
  letter-spacing:normal;
}

/* وضعیت لینک */
.link-chip{
  background:var(--accent-soft);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  margin:14px 0;
}
.switch{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:0.85rem;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
}
.switch input{
  width:18px;
  height:18px;
  accent-color:var(--accent);
  flex:none;
  margin:0;
}
.link-value{
  margin-top:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.74rem;
  color:var(--text-dim);
  word-break:break-all;
  text-align:left;
}
.link-value.empty{ font-family:inherit; text-align:right; direction:rtl; }

.btn-primary{
  width:100%;
  background:var(--action);
  color:var(--action-text);
  border:none;
  border-radius:12px;
  padding:15px 16px;
  font-family:inherit;
  font-size:1.05rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background .15s,transform .1s;
}
.btn-primary:hover{ background:var(--action-hover); }
.btn-primary:active{ transform:scale(0.99); }
.btn-primary:disabled{
  background:var(--surface-2);
  color:var(--text-dim);
  cursor:not-allowed;
}

.row-secondary{ display:flex; gap:10px; margin-top:12px; }

.btn-alt{
  flex:1;
  border-radius:11px;
  padding:12px 8px;
  font-family:inherit;
  font-size:0.9rem;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1.5px solid transparent;
  transition:filter .15s,transform .1s;
}
.btn-alt:active{ transform:scale(0.98); }
.btn-alt.tg{ background:var(--tg-soft); color:var(--tg); border-color:var(--tg); }
.btn-alt.sms{ background:var(--sms-soft); color:var(--sms); border-color:var(--sms); }
.btn-alt.share{ background:var(--surface-2); color:var(--text-dim); border-color:var(--border); }
.btn-alt:hover{ filter:brightness(0.97); }
.btn-alt:disabled{ opacity:.45; cursor:not-allowed; }

.btn-ghost{
  flex:1;
  background:transparent;
  border:1.5px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:10px;
  font-family:inherit;
  font-size:0.88rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.btn-ghost.small{ flex:none; padding:8px 12px; font-size:0.8rem; }

.fallback-link{
  display:block;
  margin-top:8px;
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  font-size:0.82rem;
}

#qrPanel{ margin-top:14px; text-align:center; }
#qrCard{
  display:inline-block;
  background:#fff;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
}
#qrCode{ line-height:0; }
.qr-caption{
  margin:10px auto 0;
  max-width:280px;
  color:var(--text-dim);
  font-size:0.85rem;
  line-height:1.6;
}

/* دکمه‌های ورود به صفحه‌های جدا */
.panel-links{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.panel-link{
  width:100%;
  text-align:right;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  color:var(--text);
  font-family:inherit;
  font-size:0.9rem;
  font-weight:700;
  cursor:pointer;
  position:relative;
  transition:border-color .15s,color .15s;
}
.panel-link::after{
  content:"‹";
  position:absolute;
  inset-inline-start:16px;
  top:50%;
  transform:translateY(-52%);
  color:var(--text-dim);
  font-size:1.3rem;
  line-height:1;
}
.panel-link:hover{ border-color:var(--accent); color:var(--accent); }

/* صفحه‌های جدا (تنظیمات، پیام‌ها، راهنما) */
.screen{
  position:fixed;
  inset:0;
  z-index:60;
  background:var(--bg);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:screenIn .18s ease-out;
}
@keyframes screenIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
.screen-inner{
  max-width:460px;
  margin:0 auto;
  padding:0 16px calc(40px + env(safe-area-inset-bottom));
}
.screen-header{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--bg);
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 0 12px;
  border-bottom:1px solid var(--border);
}
.screen-header h2{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
}
.screen .card{ margin-top:14px; }
body.screen-open{ overflow:hidden; }

.hint{
  font-size:0.78rem;
  color:var(--text-dim);
  margin:6px 0 0;
  line-height:1.65;
}
.hint:empty{ display:none; }
code{
  font-family:'JetBrains Mono',monospace;
  font-size:0.85em;
  background:var(--surface-2);
  padding:1px 5px;
  border-radius:5px;
  direction:ltr;
  display:inline-block;
}

.save-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.btn-save{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:9px;
  padding:10px 18px;
  font-family:inherit;
  font-weight:700;
  font-size:0.85rem;
  cursor:pointer;
}
.btn-save:hover{ filter:brightness(1.08); }

.setup-banner{
  background:var(--accent-soft);
  border:1px solid var(--accent);
  color:var(--text);
  border-radius:12px;
  padding:14px;
  font-size:0.85rem;
  line-height:1.8;
  margin-top:16px;
}
.setup-banner strong{ color:var(--accent); }

/* لیست پیام‌ها */
.sub-title{
  font-size:0.92rem;
  font-weight:700;
  margin:0 0 10px;
  color:var(--text);
}
.msg-list{ list-style:none; margin:0; padding:0; }
.msg-list li{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:8px;
  background:var(--surface-2);
}
.msg-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.msg-title{ font-weight:700; font-size:0.9rem; }
.msg-badge{
  font-size:0.68rem;
  font-weight:700;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:20px;
  padding:2px 8px;
}
.msg-body{
  margin:6px 0 0;
  font-size:0.78rem;
  color:var(--text-dim);
  line-height:1.6;
  white-space:pre-wrap;
  max-height:3.4em;
  overflow:hidden;
}
.msg-actions{ display:flex; gap:6px; flex:none; }
.mini-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:7px;
  padding:4px 9px;
  font-family:inherit;
  font-size:0.74rem;
  font-weight:600;
  cursor:pointer;
}
.mini-btn:hover{ border-color:var(--accent); color:var(--accent); }
.mini-btn.del:hover{ border-color:var(--danger); color:var(--danger); }
.mini-btn.armed{
  background:var(--danger-soft);
  border-color:var(--danger);
  color:var(--danger);
  font-weight:800;
  animation:armedPulse .9s ease-in-out infinite alternate;
}
@keyframes armedPulse{
  from{ box-shadow:0 0 0 0 transparent; }
  to{ box-shadow:0 0 0 3px var(--danger-soft); }
}
.divider{ height:1px; background:var(--border); margin:16px 0; }

.help p{ font-size:0.85rem; line-height:1.85; margin:0 0 8px; }
.help-list{ margin:4px 0 8px; padding-inline-start:20px; font-size:0.85rem; line-height:1.9; }

/* Toast */
.toast{
  position:fixed;
  inset-inline:16px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  max-width:428px;
  margin:0 auto;
  background:var(--text);
  color:var(--bg);
  border-radius:12px;
  padding:12px 16px;
  font-size:0.86rem;
  font-weight:600;
  line-height:1.6;
  text-align:center;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  z-index:80;
}
.toast.show{ opacity:1; transform:translateY(0); }

[hidden]{ display:none !important; }

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