/* ===========================================================
   OriFall — account: login modal, profile page, settings
   =========================================================== */

/* ---------- header additions ---------- */
.nav-actions{display:flex;align-items:center;gap:10px;margin-left:8px}
.ava-mini{width:16px;height:16px;flex:none;border:2px solid var(--ink);background:var(--stone-dark);
  box-shadow:inset 3px 3px 0 var(--stone-mid);position:relative}
.ava-mini::before,.ava-mini::after{content:'';position:absolute;top:4px;width:3px;height:5px;background:var(--good)}
.ava-mini::before{left:2px}
.ava-mini::after{right:2px}
.btn.stone .ava-mini{background:var(--stone-darker)}

/* ---------- login modal ---------- */
.modal.modal-sm{width:min(470px,100%);position:relative}
.mx.solo{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;border:3px solid var(--ink);
  background:var(--stone);color:var(--ink);font-size:19px;font-weight:800;font-family:var(--font-head)}
.mx.solo:hover{background:var(--pink);color:#fff}
.login{padding:38px 34px 30px;text-align:center}
.lg-mark{width:52px;height:52px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--copper);border:var(--edge) solid var(--ink);
  box-shadow:inset 3px 3px 0 var(--copper-hi),inset -4px -4px 0 var(--copper-deep)}
.lg-mark i{width:7px;height:14px;background:var(--ink)}
.login h3{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:27px;text-shadow:3px 3px 0 var(--ink);margin-bottom:10px}
.lg-sub{color:var(--muted);font-size:14.5px;margin-bottom:26px}
.oauth{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.obtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--text);
  padding:15px 18px;background:var(--bg2);border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.06),inset -3px -3px 0 rgba(0,0,0,.4);
  transition:transform .08s steps(2),color .1s}
.obtn:hover{transform:translateY(-2px);color:var(--copper-hi)}
.obtn .oi{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;border:2px solid var(--ink)}
.obtn .oi.vk{background:#4A76A8}
.obtn .oi.ya{background:#FC3F1D}
.or{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:var(--muted);
  font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-head)}
.or::before,.or::after{content:'';flex:1;height:2px;background:rgba(255,255,255,.12)}
.field{display:block;text-align:left;margin-bottom:16px}
.field span{display:block;font-family:var(--font-head);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:11px;color:var(--muted);margin-bottom:7px}
.field input{width:100%;font-family:var(--font-body);font-size:15px;color:var(--text);
  padding:14px 15px;background:var(--ink);border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5);outline:none;transition:border-color .12s}
.field input:focus{border-color:var(--copper)}
#loginForm .btn{margin-top:8px}
.lg-create{display:inline-block;margin:18px 0 16px;font-family:var(--font-head);font-weight:700;
  font-size:14.5px;color:var(--copper);text-decoration:underline;text-underline-offset:3px}
.lg-create:hover{color:var(--copper-hi)}
.lg-terms{font-size:12px;color:var(--muted);line-height:1.5}
.lg-terms a{color:var(--copper);text-decoration:underline;text-underline-offset:2px}
.lg-terms a:hover{color:var(--copper-hi)}

/* ---------- profile page ---------- */
.acct{padding:44px 0 80px}
.acct-grid{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start}
.acct-side{display:flex;flex-direction:column;gap:18px}
.card{padding:26px;background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 3px, transparent 3px 6px),
    var(--stone-dark);
  border:var(--edge) solid var(--ink);
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.09), inset -4px -4px 0 rgba(0,0,0,.42), var(--shadow-hard)}
.card-t{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--cyan);margin-bottom:20px}

/* identity */
.ident{text-align:center}
.avatar{width:96px;height:96px;margin:0 auto 16px;background:var(--stone-darker);
  border:var(--edge) solid var(--ink);position:relative;
  box-shadow:inset 4px 4px 0 var(--stone-mid),inset -5px -5px 0 rgba(0,0,0,.4)}
.avatar::before,.avatar::after{content:'';position:absolute;top:34px;width:14px;height:22px;background:var(--good);
  border:2px solid var(--ink)}
.avatar::before{left:16px}
.avatar::after{right:16px}
.ident h1{font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:.02em;
  text-shadow:2px 2px 0 var(--ink);margin-bottom:10px}
.ident .hint{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:18px}
.rank{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--cyan-glow);margin-bottom:8px}
.rank i{width:14px;height:14px;background:var(--cyan-glow);border:2px solid var(--ink)}
.ident .till{font-size:13px;color:var(--text);margin-bottom:14px}
.ident .auto{font-size:12.5px;color:var(--muted);line-height:1.45;margin-bottom:20px}
.acct-side .btn{width:100%}
.side-btns{display:flex;flex-direction:column;gap:11px}

/* promo */
.promo-row{display:flex;flex-direction:column;gap:11px}
.promo-row input{width:100%;font-family:var(--font-body);font-size:14.5px;color:var(--text);
  padding:13px 14px;background:var(--ink);border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5);outline:none}
.promo-row input:focus{border-color:var(--copper)}
.promo-msg{font-size:12.5px;margin-top:4px;display:none}
.promo-msg.ok{display:block;color:var(--good)}
.promo-msg.err{display:block;color:var(--pink)}

/* goods */
.acct-main{display:flex;flex-direction:column;gap:22px}
.sub-line{padding-bottom:18px;margin-bottom:18px;border-bottom:2px solid rgba(255,255,255,.10)}
.sub-line b{display:block;font-family:var(--font-head);font-weight:700;font-size:15px;margin-bottom:5px}
.sub-line span{font-size:13.5px;color:var(--muted)}
.goods{display:flex;flex-direction:column;gap:14px}
.good{padding:20px;background:var(--bg2);border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.05),inset -3px -3px 0 rgba(0,0,0,.4)}
.good h3{font-family:var(--font-head);font-weight:700;font-size:16.5px;margin-bottom:7px}
.good .meta{font-size:13px;color:var(--muted);margin-bottom:15px}

/* payments history */
.hist{display:flex;flex-direction:column}
.hrow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;
  padding:18px 0;border-bottom:2px dashed rgba(255,255,255,.10)}
.hrow:last-child{border-bottom:none}
.hrow:first-child{padding-top:0}
.badge{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:10px;color:#fff;padding:5px 9px;background:#3E6EA8;border:2px solid var(--ink)}
.hrow h4{font-family:var(--font-head);font-weight:700;font-size:15px;margin-bottom:5px}
.hrow p{font-size:13px;color:var(--muted);line-height:1.5}
.hdate{font-size:12.5px;color:var(--muted);white-space:nowrap;font-family:var(--font-head)}

/* ---------- settings modal ---------- */
.modal.modal-lg{width:min(640px,100%)}
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:26px}
.set-block{margin-bottom:26px}
.set-t{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;color:var(--copper-hi);margin-bottom:12px}
.set-hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
.inline{display:flex;gap:9px}
.inline input{flex:1;min-width:0;font-family:var(--font-body);font-size:14px;color:var(--text);
  padding:12px 13px;background:var(--ink);border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5);outline:none}
.inline input:focus{border-color:var(--copper)}
.links{display:flex;flex-direction:column}
.link-row{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:2px dashed rgba(255,255,255,.10)}
.link-row:last-child{border-bottom:none}
.link-row .li{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;border:2px solid var(--ink);font-family:var(--font-head)}
.li.vk{background:#4A76A8}
.li.ya{background:#FC3F1D}
.li.mail{background:var(--copper)}
.li.boosty{background:#F15F2C}
.link-row .lt{flex:1}
.link-row .lt b{display:block;font-family:var(--font-head);font-weight:700;font-size:14px}
.link-row .lt span{font-size:12.5px;color:var(--muted)}
.link-row .lt span.on{color:var(--good)}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:14px}
.rowline .rv{font-size:13.5px;color:var(--muted)}
.danger{padding:20px;border:3px solid var(--pink-deep);background:rgba(224,80,122,.07)}
.danger .set-t{color:var(--pink)}
.danger p{font-size:13.5px;margin-bottom:16px;color:var(--text)}
.btn.danger-btn{--b:transparent;--bh:transparent;--bd:transparent;color:var(--pink);
  border-color:var(--pink-deep);box-shadow:4px 4px 0 rgba(0,0,0,.4)}
.btn.danger-btn:hover{background:rgba(224,80,122,.14)}

@media(max-width:900px){
  .acct-grid{grid-template-columns:1fr}
  .set-grid{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:620px){
  .login{padding:34px 22px 26px}
  .hrow{grid-template-columns:auto 1fr;row-gap:8px}
  .hdate{grid-column:2}
  .nav-actions{gap:7px}
}