/* MORNINGSTAR EXCHANGE - sistèm design pataje.
   Se menm lang vizyèl ak dashboard.html ak admin.html (nwa + lò, font Inter, kat "glass",
   tiles ikòn, navigasyon anba). Paj ki pa gen CSS pa yo yo (settings, p2p, kyc, index, privacy) chaje l. */

:root{
  --gold:#D4AF37;--gold-hi:#F1C40F;--bg:#090a0f;
  --panel:rgba(18,20,29,.78);--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);
  --muted:#9ca3af;--ok:#34d399;--warn:#fbbf24;--bad:#f87171;
}
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(212,175,55,.35);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:.5rem}

/* ---------- Mak + antèt ---------- */
.brand-mark{width:2.1rem;height:2.1rem;border-radius:.65rem;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,rgba(212,175,55,.25),rgba(212,175,55,.05));
  border:1px solid rgba(212,175,55,.35);color:var(--gold-hi);font-size:.95rem}
.brand-mark.lg{width:3.5rem;height:3.5rem;border-radius:1rem;font-size:1.5rem;box-shadow:0 8px 24px rgba(212,175,55,.12)}
.brand-name{font-size:.8rem;font-weight:800;letter-spacing:.14em;line-height:1.1}
.brand-sub{display:block;font-size:.62rem;color:var(--muted);letter-spacing:.08em;font-weight:500;margin-top:2px;text-transform:uppercase}

.topbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.topbar .grow{flex:1;min-width:0}
.t-title{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.t-sub{font-size:.7rem;color:var(--muted);margin-top:.12rem}
.iconbtn{width:2.25rem;height:2.25rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  color:#d1d5db;font-size:.85rem;background:var(--panel);border:1px solid var(--line);transition:.15s;flex-shrink:0;text-decoration:none}
.iconbtn:hover{color:#fff;border-color:rgba(212,175,55,.45)}

.avatar{width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;flex-shrink:0;
  font-weight:800;font-size:1.05rem;color:#000;
  background:linear-gradient(135deg,#FFD700,#D4AF37 50%,#B8860B);box-shadow:0 6px 18px rgba(212,175,55,.25)}

/* ---------- Kat ---------- */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(38,33,20,.95),rgba(14,15,22,.98) 60%);
  border:1px solid rgba(212,175,55,.32);box-shadow:0 16px 40px rgba(0,0,0,.55)}
.hero::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.22),transparent 70%);pointer-events:none}
.hero>*{position:relative}
.group{background:var(--panel);border:1px solid var(--line);border-radius:1rem;overflow:hidden}
.item{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem}
.item:last-child{border-bottom:0}
.ico{width:2.2rem;height:2.2rem;border-radius:.7rem;display:grid;place-items:center;flex-shrink:0;
  color:var(--gold);font-size:.85rem;
  background:linear-gradient(160deg,rgba(40,38,30,.95),rgba(16,17,24,.95));border:1px solid rgba(212,175,55,.25)}
.sec{display:flex;align-items:center;gap:.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);font-weight:700;margin:1.5rem 0 .6rem}
.sec i{color:var(--gold);font-size:.75rem;width:1rem;text-align:center}

/* ---------- Estati / bann konfyans ---------- */
.pill.ok{background:rgba(16,185,129,.15);color:var(--ok)}
.pill.warn{background:rgba(245,158,11,.15);color:var(--warn)}
.pill.mute{background:rgba(255,255,255,.08);color:var(--muted)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.trust>div{text-align:center;padding:.75rem .4rem;border-radius:.9rem;background:rgba(18,20,29,.6);
  border:1px solid var(--line);font-size:.68rem;color:#aab1bf;line-height:1.3}
.trust i{display:block;color:var(--gold);font-size:1rem;margin-bottom:.4rem}
.valueprop{display:flex;gap:.85rem;align-items:flex-start}
.valueprop .ico{margin-top:.1rem}
.valueprop b{display:block;font-size:.9rem;color:#f3f4f6;margin-bottom:.1rem}
.valueprop span{font-size:.8rem;color:var(--muted);line-height:1.45}

/* ---------- Endikatè etap (KYC) ---------- */
.stepper{display:flex;align-items:center;gap:.4rem;margin-bottom:1.5rem}
.stepper .st{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:.7rem;font-weight:600;color:#6b7280}
.stepper .st b{width:1.55rem;height:1.55rem;border-radius:999px;display:grid;place-items:center;flex-shrink:0;
  font-size:.7rem;border:1px solid var(--line2);background:rgba(10,11,16,.8);color:var(--muted)}
.stepper .st span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper .st.on{color:var(--gold-hi)}
.stepper .st.on b{border-color:var(--gold);background:rgba(212,175,55,.15);color:var(--gold-hi)}
.stepper .st.done{color:#d1d5db}
.stepper .st.done b{background:var(--gold);border-color:var(--gold);color:#000}
.stepper .bar{flex:1 1 0;height:1px;min-width:.75rem;background:var(--line2)}

/* ---------- Navigasyon anba (menm look ak dashboard) ---------- */
.bnav{position:fixed;left:1rem;right:1rem;max-width:28rem;margin:0 auto;z-index:40;
  bottom:calc(.75rem + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);
  border-radius:1rem;background:rgba(14,15,22,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(212,175,55,.2);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.bnav a{color:#6b7280;font-size:.62rem;font-weight:600;display:flex;flex-direction:column;align-items:center;
  gap:.2rem;padding:.55rem 0;text-decoration:none;transition:color .15s}
.bnav a i{font-size:1.05rem}
.bnav a:hover{color:#d1d5db}
.bnav a.on{color:var(--gold-hi)}
.has-bnav{padding-bottom:6.5rem !important}

/* ---------- Animasyon ---------- */
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fadeup{animation:fadeup .35s ease both}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.skeleton{border-radius:.6rem;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);
  background-size:400px 100%;animation:shimmer 1.3s linear infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}