/* درون — درِ ورود: /join، /join/key، /join/hello، /login، /username، /logout
   دو ستون روی لپ‌تاپ (هنر و فرم)، یک ستون روی گوشی. هر دو تم. فقط متغیرهای app.css. */

.auth main#view{min-height:calc(100vh - 62px)}

.au{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);min-height:calc(100vh - 62px)}
.au-main{padding:56px clamp(20px,5vw,64px) 80px;max-width:560px;width:100%}

/* ——— ستونِ هنر: قفسه‌ی کتاب، برگ‌های افتان، نشانِ درون ——— */
.au-art{position:relative;overflow:hidden;border-inline-end:1px solid var(--hair);
  background:radial-gradient(120% 90% at 70% 10%,color-mix(in srgb,var(--accent) 14%,var(--bg-2)) 0%,var(--bg) 70%)}
.au-glow{position:absolute;inset:18% 12% auto auto;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 28%,transparent),transparent 65%);filter:blur(30px);opacity:.8}
.au-books{position:absolute;inset-inline-start:14%;bottom:18%;display:flex;align-items:flex-end;gap:7px}
.au-books i{display:block;width:28px;border-radius:4px 4px 2px 2px;background:var(--c,#7a2e2b);
  box-shadow:inset -4px 0 0 rgba(0,0,0,.18),0 10px 24px rgba(0,0,0,.25);transform-origin:bottom center;
  animation:au-rise .9s cubic-bezier(.2,.8,.2,1) both}
.au-books i:nth-child(1){height:150px;--c:#7a2e2b;animation-delay:.05s}
.au-books i:nth-child(2){height:186px;--c:#2f4858;width:34px;animation-delay:.12s}
.au-books i:nth-child(3){height:132px;--c:#7a5c2e;animation-delay:.19s}
.au-books i:nth-child(4){height:170px;--c:#4a5d3a;width:24px;transform:rotate(-7deg);animation-delay:.26s}
.au-books i:nth-child(5){height:120px;--c:#5c3a53;animation-delay:.33s}
.au-books::after{content:"";position:absolute;inset-inline:-30px;bottom:-10px;height:10px;border-radius:3px;background:var(--hair-2)}
@keyframes au-rise{from{transform:translateY(30px) scaleY(.7);opacity:0}to{opacity:1}}

.au-leaf{position:absolute;color:var(--accent);opacity:.85;animation:au-fall 9s linear infinite}
.au-leaf svg{width:26px;height:26px}
.au-leaf.l1{inset-inline-start:30%;top:-40px;animation-delay:0s}
.au-leaf.l2{inset-inline-start:58%;top:-40px;animation-delay:3s;color:#c8643a}
.au-leaf.l3{inset-inline-start:76%;top:-40px;animation-delay:6s;color:#b8a04a}
@keyframes au-fall{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  10%{opacity:.9}
  50%{transform:translate(-40px,45vh) rotate(160deg)}
  100%{transform:translate(20px,92vh) rotate(340deg);opacity:0}}
.au-mark{position:absolute;inset-inline-start:14%;top:14%;width:150px;color:var(--fg);opacity:.95}
.au-mark svg{width:100%;height:auto;display:block}

@media (prefers-reduced-motion:reduce){ .au-leaf,.au-books i{animation:none} .au-leaf{display:none} }

/* ——— متن ——— */
.au-kick{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:8px}
.au-h{font-size:clamp(30px,4.4vw,42px);margin-bottom:12px}
.au-lead{color:var(--sub);font-size:16px;margin-bottom:26px;text-align:justify;text-align-last:right}
.au-lead b{color:var(--fg)}

.au-perks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px}
.au-perks li{padding:12px 14px;border:1px solid var(--hair);border-radius:var(--r);background:var(--bg-2)}
.au-perks b{display:block;font-size:14px}
.au-perks span{display:block;font-size:12.5px;color:var(--faint);line-height:1.6}

/* ——— فرم ——— */
.au-form{display:flex;flex-direction:column;gap:16px}
/* تله‌ی بات: آدم نمی‌بیندش، بات پرش می‌کند (همان .btrapِ barg.css، چون آن فایل این‌جا بار نمی‌شود) */
.auth .btrap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.au-f{display:block;min-width:0}
.au-f > span:first-child{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.au-f > span:first-child i,.au-int legend i{font-style:normal;font-weight:500;color:var(--faint);font-size:12px;margin-inline-start:6px}
.au-f input,.au-f textarea{width:100%;padding:13px 14px;background:var(--bg);border:1px solid var(--hair-2);
  border-radius:12px;font-size:16px;color:var(--fg);transition:border-color .16s,box-shadow .16s}
.au-f textarea{resize:vertical;min-height:4.2em;line-height:1.8}
.au-f input:focus,.au-f textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.au-f.is-bad input,.au-f.is-bad textarea{border-color:var(--bad)}
.au-hint{display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:7px;line-height:1.7}
.au-hint.ok{color:var(--ok)}
.au-hint.bad{color:var(--bad)}
.au-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.au-note{font-size:12.5px;color:var(--faint);margin-top:-6px;line-height:1.75}

/* @نامِ کاربری: نشانه‌ی @ داخلِ خانه، همیشه چپ‌به‌راست */
.au-at{position:relative;display:block}
.au-at > i{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--faint);pointer-events:none}
.au-at input{padding-inline-start:32px}

.au-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;min-height:44px}
.au-check input{flex:none;width:19px;height:19px;margin-top:3px;accent-color:var(--accent)}
.au-check a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.au-check.is-bad span{color:var(--bad)}

.au-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;
  border-radius:14px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:16px;
  box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 55%,#000);transition:transform .12s,box-shadow .12s,filter .16s;width:100%}
.au-btn:hover{filter:brightness(1.05)}
.au-btn:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.au-btn:disabled{opacity:.6;pointer-events:none}
.au-btn.ghost{background:none;color:var(--fg);border:1px solid var(--hair-2);box-shadow:none}
.au-btn.ghost:hover{background:var(--bg-2)}
.au-btn.danger{background:var(--bad);color:#141416;box-shadow:0 5px 0 color-mix(in srgb,var(--bad) 55%,#000)}
.au-acts{display:flex;gap:10px}
.au-acts .au-btn{flex:1}
.au-mini{padding:8px 14px;border-radius:10px;border:1px solid var(--hair-2);font-size:13.5px;white-space:nowrap}
.au-mini:hover{background:var(--bg-2)}

.au-err{padding:12px 15px;border-radius:12px;font-size:14px;line-height:1.75;color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent);margin-bottom:16px}
.au-alt{margin-top:22px;font-size:14.5px;color:var(--sub);text-align:center}
.au-alt a{color:var(--accent);font-weight:600}
.au-help{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--faint);line-height:1.85}
.au-help a{color:var(--accent)}

/* ——— کلیدِ چهارکلمه‌ای: ورود ——— */
.au-keyin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.au-ki{position:relative;min-width:0}
.au-ki-n{position:absolute;top:-8px;inset-inline-start:10px;padding:0 6px;font-size:11px;color:var(--faint);background:var(--bg);border-radius:6px;z-index:1}
.au-ki input{text-align:center;padding-inline:6px}
.au-ki .bsug{position:absolute;top:calc(100% + 4px);inset-inline:0;z-index:20;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--hair-2);border-radius:12px;padding:4px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.au-ki .bsug button{padding:9px 10px;border-radius:9px;text-align:center;font-size:14.5px}
.au-ki .bsug button:hover,.au-ki .bsug button:focus{background:var(--hair)}
@media (max-width:520px){ .au-keyin{grid-template-columns:1fr 1fr;row-gap:16px} }

/* ——— کلیدِ چهارکلمه‌ای: نمایش ——— */
.au-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.au-key span{position:relative;display:flex;align-items:center;justify-content:center;min-height:72px;padding:16px 8px 12px;
  border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--hair-2));
  background:color-mix(in srgb,var(--accent) 8%,var(--bg-2));font-size:20px;font-weight:600;
  animation:au-pop .5s cubic-bezier(.2,.9,.3,1.3) both}
.au-key span:nth-child(2){animation-delay:.08s}.au-key span:nth-child(3){animation-delay:.16s}.au-key span:nth-child(4){animation-delay:.24s}
.au-key i{position:absolute;top:6px;inset-inline-start:10px;font-style:normal;font-size:11px;color:var(--faint);font-weight:500}
@keyframes au-pop{from{transform:scale(.8) translateY(8px);opacity:0}to{opacity:1}}
@media (max-width:520px){ .au-key{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:reduce){ .au-key span{animation:none} }

.au-more{margin:18px 0 22px;border:1px solid var(--hair);border-radius:var(--r);padding:14px 16px}
.au-more summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--sub)}
.au-more[open] summary{color:var(--fg);margin-bottom:10px}
.au-more p{font-size:13.5px;color:var(--faint);line-height:1.85;margin-bottom:10px}
.au-copy{display:flex;gap:8px}
.au-copy input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--hair-2);background:var(--bg);font-size:13px;color:var(--sub)}
.au-confirm{margin-top:6px}

/* ——— آشنایی: آواتار و علاقه‌ها ——— */
.au-av,.au-int{border:0;min-width:0}
.au-av legend,.au-int legend{font-size:13.5px;font-weight:600;margin-bottom:10px}
.au-av-shapes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.au-av-o{position:relative;cursor:pointer;border-radius:50%}
.au-av-o input,.au-av-c input,.au-chip input{position:absolute;opacity:0;width:1px;height:1px}
.au-av-o .av-g{transition:transform .15s,box-shadow .15s}
.au-av-o input:checked + .av-g{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent);transform:scale(1.06)}
.au-av-o input:focus-visible + .av-g{outline:2px solid var(--accent);outline-offset:4px}
.au-av-colors{display:flex;flex-wrap:wrap;gap:8px}
.au-av-c{cursor:pointer}
.au-av-c i{display:block;width:30px;height:30px;border-radius:50%;background:var(--c);transition:transform .15s}
.au-av-c input:checked + i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--fg);transform:scale(1.08)}
.au-av-c input:focus-visible + i{outline:2px solid var(--accent);outline-offset:4px}

.av-g{display:inline-grid;place-items:center;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--avc,#e3b062) 22%,var(--bg-2));color:var(--avc,#e3b062);
  border:1px solid color-mix(in srgb,var(--avc,#e3b062) 45%,transparent)}
.av-g b{font-weight:600;line-height:1}

.au-chips{display:flex;flex-wrap:wrap;gap:8px}
.au-chip{cursor:pointer}
.au-chip span{display:inline-block;padding:8px 14px;border-radius:99px;border:1px solid var(--hair-2);font-size:13.5px;color:var(--sub);transition:.15s}
.au-chip input:checked + span{border-color:var(--accent);color:var(--fg);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.au-chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* ——— رمزِ دومِ پنل ——— */
.au-steps{display:flex;flex-direction:column;gap:12px;padding-inline-start:20px;margin-bottom:22px;font-size:14.5px;line-height:1.85}
.au-steps li::marker{color:var(--accent);font-weight:600}
.au-steps .au-mini{display:inline-block;margin-top:6px}
.au-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.au-codes code{display:block;padding:10px;border-radius:10px;border:1px dashed var(--hair-2);text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:.06em;background:var(--bg-2)}

/* ——— صفحه‌های حریمِ خصوصی و قوانین ——— */
.doc{max-width:720px;padding-block:48px 80px}
.doc-tabs{display:flex;gap:6px;margin-bottom:28px}
.doc-tabs a{padding:7px 15px;border-radius:99px;font-size:14px;color:var(--sub);border:1px solid var(--hair)}
.doc-tabs a.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.doc h1{font-size:clamp(28px,4vw,38px);margin-bottom:12px}
.doc h2{font-size:19px;margin:30px 0 10px}
.doc-lead{color:var(--sub);font-size:17px}
.doc p,.doc li{text-align:justify;text-align-last:right;color:var(--fg)}
.doc ul{padding-inline-start:20px;display:flex;flex-direction:column;gap:8px}
.doc li::marker{color:var(--accent)}
.doc li b{font-weight:600}
.doc-date{margin-top:36px;font-size:13px;color:var(--faint)}

/* ——— گوشی: ستونِ هنر به یک نوارِ کوتاه بالای فرم تبدیل می‌شود ——— */
@media (max-width:900px){
  .au{grid-template-columns:1fr}
  .au-art{height:150px;border-inline-end:0;border-bottom:1px solid var(--hair)}
  .au-books{bottom:0;inset-inline-start:auto;inset-inline-end:8%;transform:scale(.55);transform-origin:bottom left}
  .au-mark{top:auto;bottom:28px;inset-inline-start:var(--gut);width:96px}
  .au-glow{inset:-30% -10% auto auto}
  .au-main{margin-inline:auto;padding-top:30px}
}
@media (max-width:520px){
  .au-perks{grid-template-columns:1fr}
  .au-row{grid-template-columns:1fr}
  .au-acts{flex-direction:column}
}