/* o1o — رابط ورود و حساب (مستقل از قالب) */
:root{
  --o1o-accent:#0d9488;
  --o1o-surface:#ffffff;
  --o1o-surface-2:#f6f8f8;
  --o1o-ink:#16232b;
  --o1o-ink-soft:#5b6b73;
  --o1o-line:#e5eaea;
  --o1o-shadow:0 24px 60px rgba(15,30,40,.22);
  --o1o-radius:18px;
  --o1o-ease:cubic-bezier(.22,1,.36,1);
  --o1o-elastic:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --o1o-surface:#12201f;--o1o-surface-2:#0d1817;--o1o-ink:#e8f0ef;--o1o-ink-soft:#9fb0ad;
    --o1o-line:#22322f;--o1o-shadow:0 24px 60px rgba(0,0,0,.5);
  }
}

.o1o-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font:inherit;font-weight:700;font-size:1.02rem;line-height:1;cursor:pointer;
  padding:15px 20px;border-radius:999px;border:0;
  background:var(--o1o-accent);color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb,var(--o1o-accent) 40%,transparent);
  transition:transform .25s var(--o1o-elastic),filter .2s;
}
.o1o-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.o1o-btn:active{transform:translateY(0)}
.o1o-btn.is-loading{pointer-events:none;opacity:.7}
.o1o-btn--soft{background:color-mix(in srgb,var(--o1o-accent) 14%,transparent);color:var(--o1o-accent);box-shadow:none}
.o1o-link{display:block;margin:12px auto 0;background:none;border:0;color:var(--o1o-accent);font:inherit;font-size:.92rem;cursor:pointer;text-decoration:none;text-align:center}
.o1o-link:hover{text-decoration:underline}

/* ---------------- مودال ورود ---------------- */
.o1o-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}
.o1o-modal[hidden]{display:none}
.o1o-modal__backdrop{position:absolute;inset:0;background:rgba(10,20,25,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:o1o-fade .25s ease}
.o1o-modal__box{
  position:relative;width:100%;max-width:400px;background:var(--o1o-surface);color:var(--o1o-ink);
  border-radius:var(--o1o-radius);box-shadow:var(--o1o-shadow);padding:30px 28px;
  direction:rtl;text-align:right;animation:o1o-pop .35s var(--o1o-elastic);
}
.o1o-modal__x{position:absolute;inset-inline-start:14px;top:12px;width:34px;height:34px;border:0;background:var(--o1o-surface-2);color:var(--o1o-ink-soft);border-radius:50%;font-size:20px;cursor:pointer;line-height:1}
.o1o-modal__x:hover{color:var(--o1o-ink)}
.o1o-modal__head{text-align:center;margin-bottom:18px}
.o1o-modal__badge{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;background:color-mix(in srgb,var(--o1o-accent) 14%,transparent);color:var(--o1o-accent);margin-bottom:12px}
.o1o-modal__head h3{margin:0 0 4px;font-size:1.25rem;color:var(--o1o-ink)}
.o1o-modal__head p{margin:0;color:var(--o1o-ink-soft);font-size:.94rem}

.o1o-modal label{display:block;font-weight:600;font-size:.9rem;margin:0 0 8px;color:var(--o1o-ink)}
.o1o-modal input{
  width:100%;box-sizing:border-box;font:inherit;font-size:1.05rem;color:var(--o1o-ink);
  background:var(--o1o-surface-2);border:1.5px solid var(--o1o-line);border-radius:12px;
  padding:14px 15px;margin-bottom:16px;transition:border-color .2s,box-shadow .2s;
}
.o1o-modal input:focus{outline:none;border-color:var(--o1o-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--o1o-accent) 16%,transparent)}
.o1o-code{text-align:center;letter-spacing:.7em;font-size:1.5rem;font-weight:700;padding-inline-start:.7em!important}
.o1o-sent{font-size:.9rem;color:var(--o1o-ink-soft);text-align:center;margin:0 0 14px}
.o1o-msg{border-radius:12px;padding:12px 14px;font-size:.92rem;margin-bottom:14px;display:none}
.o1o-msg.show{display:block}
.o1o-msg.ok{background:color-mix(in srgb,#16a34a 14%,transparent);color:#16a34a}
.o1o-msg.err{background:color-mix(in srgb,#dc2626 12%,transparent);color:#dc2626}

/* ---------------- دکمهٔ هدر ---------------- */
.o1o-acct-menu-item .o1o-acct-link,.o1o-acct-inline .o1o-acct-link{display:inline-flex;align-items:center;gap:6px}

/* ---------------- نوار چسبان موبایل ---------------- */
.o1o-bar{display:none}
@media (max-width:782px){
  .o1o-bar{
    display:flex;position:fixed;inset-inline:0;bottom:0;z-index:9990;
    background:color-mix(in srgb,var(--o1o-surface) 88%,transparent);
    backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--o1o-line);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 28px rgba(15,30,40,.12);
  }
  .o1o-bar::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:linear-gradient(90deg,var(--o1o-accent),color-mix(in srgb,var(--o1o-accent) 40%,#f0b23c))}
  .o1o-bar__item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:0;cursor:pointer;font:inherit;font-size:.72rem;font-weight:600;
    color:var(--o1o-ink-soft);text-decoration:none;padding:8px 4px;border-radius:12px;
    transition:color .2s,background .2s,transform .2s var(--o1o-elastic);
  }
  .o1o-bar__item svg{width:24px;height:24px}
  .o1o-bar__item:hover,.o1o-bar__item:active{color:var(--o1o-accent);background:color-mix(in srgb,var(--o1o-accent) 10%,transparent);transform:translateY(-2px)}
  body{padding-bottom:70px!important}
}

/* ---------------- کشوی منو ---------------- */
.o1o-drawer{position:fixed;inset:0;z-index:99998}
.o1o-drawer[hidden]{display:none}
.o1o-drawer__backdrop{position:absolute;inset:0;background:rgba(10,20,25,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:o1o-fade .25s ease}
.o1o-drawer__panel{
  position:absolute;top:0;bottom:0;right:0;width:82%;max-width:340px;
  background:var(--o1o-surface);color:var(--o1o-ink);box-shadow:var(--o1o-shadow);
  display:flex;flex-direction:column;padding:18px;direction:rtl;
  animation:o1o-slide .35s var(--o1o-ease);overflow-y:auto;
}
.o1o-drawer__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--o1o-line);margin-bottom:12px}
.o1o-drawer__head strong{font-size:1.1rem}
.o1o-drawer__x{width:34px;height:34px;border:0;background:var(--o1o-surface-2);color:var(--o1o-ink-soft);border-radius:50%;font-size:20px;cursor:pointer}
.o1o-drawer__menu{list-style:none;margin:0;padding:0}
.o1o-drawer__menu li{margin:0}
.o1o-drawer__menu a{display:block;padding:13px 12px;border-radius:12px;color:var(--o1o-ink);text-decoration:none;font-weight:600;transition:background .2s,color .2s}
.o1o-drawer__menu a:hover{background:color-mix(in srgb,var(--o1o-accent) 10%,transparent);color:var(--o1o-accent)}
.o1o-drawer__menu .sub-menu{list-style:none;margin:0;padding:0 12px}
.o1o-drawer__menu .sub-menu a{font-weight:500;color:var(--o1o-ink-soft);padding:10px 12px}
.o1o-drawer__foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--o1o-line)}

@keyframes o1o-fade{from{opacity:0}to{opacity:1}}
@keyframes o1o-pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes o1o-slide{from{transform:translateX(100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .o1o-modal__box,.o1o-drawer__panel,.o1o-modal__backdrop,.o1o-drawer__backdrop,.o1o-btn,.o1o-bar__item{animation:none!important;transition:none!important}
}