/* ============================================================
   Credimatrix — Powered by Celebriffy Technologies
   Shared design system (dark / gold luxury theme)
   ============================================================ */

:root{
  --bg:#0a0a0c;
  --bg-2:#111114;
  --bg-3:#16161b;
  --panel:#1b1b21;
  --panel-2:#202028;
  --line:rgba(201,162,75,.22);
  --line-soft:rgba(255,255,255,.07);
  --txt:#f4f1ea;
  --txt-soft:#b9b3a7;
  --txt-mute:#7d776c;

  --gold-1:#f5e2a8;
  --gold-2:#d9b860;
  --gold-3:#c9a24b;
  --gold-4:#a9842f;
  --gold-grad:linear-gradient(135deg,#f7e6ad 0%,#d9b860 38%,#bf9a40 70%,#9c7a2c 100%);
  --gold-grad-soft:linear-gradient(135deg,rgba(217,184,96,.18),rgba(159,122,44,.06));

  --green:#3ecf8e;
  --red:#e5564b;
  --blue:#4c8dff;

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.8);
  --shadow-gold:0 10px 35px -12px rgba(217,184,96,.45);

  --maxw:1180px;
  --ff:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);color:var(--txt);
  background:
    radial-gradient(1100px 700px at 80% -10%,rgba(201,162,75,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 110%,rgba(201,162,75,.06),transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit}
::selection{background:rgba(217,184,96,.35);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(201,162,75,.35);border-radius:20px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- typography helpers ---------- */
.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.muted{color:var(--txt-soft)}
.mute{color:var(--txt-mute)}
.center{text-align:center}

/* ---------- brand wordmark ---------- */
.wordmark{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:.3px}
.wordmark .peg{width:1.6em;height:1.6em;flex:0 0 auto}
.wordmark .name{font-size:1.35rem}
.wordmark .name .credi{color:#fff}
.wordmark .name .max{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.powered{font-size:.62rem;letter-spacing:.22em;color:var(--txt-mute);text-transform:uppercase;font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.4rem;border-radius:999px;border:1px solid transparent;
  font-weight:700;font-size:.95rem;cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-gold{background:var(--gold-grad);color:#241c08;box-shadow:var(--shadow-gold)}
.btn-gold:hover{box-shadow:0 14px 40px -10px rgba(217,184,96,.65)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--gold-1)}
.btn-ghost:hover{background:rgba(201,162,75,.10)}
.btn-dark{background:var(--panel-2);border:1px solid var(--line-soft);color:var(--txt)}
.btn-dark:hover{border-color:var(--line)}
.btn-block{width:100%}
.btn-sm{padding:.55rem .9rem;font-size:.82rem}
.btn-danger{background:rgba(229,86,75,.14);border:1px solid rgba(229,86,75,.4);color:#ff8a80}
.btn-success{background:rgba(62,207,142,.14);border:1px solid rgba(62,207,142,.4);color:#7ef0bd}

/* ---------- cards / panels ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg-3));
  border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.gold-edge{border:1px solid var(--line)}
.pad{padding:1.1rem 1.15rem}
.pad-lg{padding:1.5rem}

.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:999px;
  font-size:.72rem;font-weight:700;border:1px solid var(--line);background:var(--gold-grad-soft);color:var(--gold-1)}
.chip.green{border-color:rgba(62,207,142,.5);background:rgba(62,207,142,.12);color:#7ef0bd}
.chip.red{border-color:rgba(229,86,75,.5);background:rgba(229,86,75,.12);color:#ff8a80}
.chip.blue{border-color:rgba(76,141,255,.5);background:rgba(76,141,255,.12);color:#9dc0ff}
.badge-verified{display:inline-flex;align-items:center;gap:.3rem;color:#7ef0bd;font-size:.72rem;font-weight:700}

/* ---------- form fields ---------- */
.field{margin-bottom:.85rem}
.field label{display:block;font-size:.78rem;color:var(--txt-soft);margin-bottom:.35rem;font-weight:600}
.input,.select,textarea.input{
  width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm);
  background:var(--bg-2);border:1px solid var(--line-soft);color:var(--txt);font-size:.95rem;outline:none;
  transition:.2s border,.2s box-shadow;
}
.input::placeholder{color:var(--txt-mute)}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--gold-3);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.input-icon{position:relative}
.input-icon .ico{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--gold-3)}
.input-icon .input{padding-left:2.6rem}

/* ---------- layout helpers ---------- */
.row{display:flex;gap:1rem}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between;align-items:center}
.center-x{align-items:center}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack>*+*{margin-top:1rem}
.hidden{display:none!important}

/* ---------- progress / meters ---------- */
.meter{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden;border:1px solid var(--line-soft)}
.meter > span{display:block;height:100%;background:var(--gold-grad)}

/* ---------- top bar (app) ---------- */
.appbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;background:rgba(12,12,14,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.icon-btn{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--panel-2);
  border:1px solid var(--line-soft);color:var(--txt);cursor:pointer;position:relative;transition:.2s}
.icon-btn:hover{border-color:var(--line)}
.dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* ---------- bottom nav (mobile) ---------- */
.bottomnav{position:sticky;bottom:0;z-index:40;display:flex;justify-content:space-around;
  padding:.5rem .3rem calc(.5rem + env(safe-area-inset-bottom));background:rgba(12,12,14,.92);
  backdrop-filter:blur(14px);border-top:1px solid var(--line-soft)}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.62rem;color:var(--txt-mute);
  padding:.35rem .6rem;border-radius:12px;font-weight:600;transition:.2s}
.bottomnav a svg{width:22px;height:22px}
.bottomnav a.active{color:var(--gold-1)}
.bottomnav a.active svg{filter:drop-shadow(0 0 6px rgba(217,184,96,.5))}

/* ---------- language toggle ---------- */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.72rem;font-weight:700}
.lang button{background:transparent;border:0;color:var(--txt-soft);padding:.3rem .6rem;cursor:pointer}
.lang button.on{background:var(--gold-grad);color:#241c08}

/* ---------- table ---------- */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;color:var(--txt-soft);font-weight:600;font-size:.78rem;padding:.7rem .6rem;border-bottom:1px solid var(--line-soft)}
.table td{padding:.75rem .6rem;border-bottom:1px solid var(--line-soft)}
.table tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- avatar ---------- */
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-3)}
.avatar.sm{width:34px;height:34px}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:200;display:flex;flex-direction:column;gap:.5rem;width:min(420px,92vw)}
.toast{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;box-shadow:var(--shadow);
  display:flex;gap:.6rem;align-items:flex-start;animation:toastIn .35s ease both}
.toast .t-ico{color:var(--gold-2);flex:0 0 auto;margin-top:1px}
.toast.ok .t-ico{color:var(--green)} .toast.err .t-ico{color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:1rem;animation:fade .25s both}
.modal{width:min(520px,96vw);max-height:90vh;overflow:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- donut ---------- */
.donut{--p:60;--size:118px;width:var(--size);height:var(--size);border-radius:50%;
  background:conic-gradient(var(--gold-3) calc(var(--p)*1%),var(--bg-2) 0);
  display:grid;place-items:center;position:relative}
.donut::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-soft)}
.donut .donut-c{position:relative;text-align:center;line-height:1.1}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;gap:.6rem;padding:1rem}
.bubble{max-width:80%;padding:.7rem .9rem;border-radius:16px;font-size:.92rem;line-height:1.4}
.bubble .who{font-weight:700;font-size:.78rem;margin-bottom:.15rem}
.bubble .time{font-size:.66rem;color:var(--txt-mute);text-align:right;margin-top:.25rem}
.bubble.them{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line-soft);border-bottom-left-radius:4px}
.bubble.me{align-self:flex-end;background:rgba(201,162,75,.10);border:1px solid var(--line);border-bottom-right-radius:4px}
.bubble.me .who{color:var(--gold-1)}

/* ---------- reveal animations ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}

/* ---------- generic page wrappers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.1rem}
.section-title{font-size:1.05rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin:.2rem 0 1rem}
.section-title small{display:block;text-transform:none;letter-spacing:0;color:var(--txt-soft);font-weight:500;font-size:.8rem;margin-top:.2rem}

/* phone-frame for app (desktop centering) */
.appshell{min-height:100vh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;
  border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);background:rgba(10,10,12,.4)}
.appmain{flex:1;padding:1rem 1rem 1.5rem;overflow:auto}
@media(min-width:1024px){
  .appshell{box-shadow:0 0 80px -20px rgba(0,0,0,.9)}
}

/* admin shell wider */
.adminshell{min-height:100vh;display:grid;grid-template-columns:240px 1fr}
.sidebar{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-right:1px solid var(--line-soft);
  padding:1.1rem .8rem;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .nav-i{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:12px;color:var(--txt-soft);
  font-weight:600;font-size:.9rem;cursor:pointer;margin-bottom:.2rem;transition:.2s}
.sidebar .nav-i svg{width:20px;height:20px}
.sidebar .nav-i:hover{background:rgba(255,255,255,.03);color:var(--txt)}
.sidebar .nav-i.active{background:var(--gold-grad-soft);color:var(--gold-1);border:1px solid var(--line)}
.admin-main{padding:1.3rem 1.6rem;overflow:auto}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi .card .big{font-size:1.7rem;font-weight:800}

.stat-up{color:var(--green);font-size:.78rem;font-weight:700}
.stat-down{color:var(--red);font-size:.78rem;font-weight:700}

@media(max-width:880px){
  .adminshell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:240px;z-index:120;transform:translateX(-105%);transition:.3s}
  .sidebar.open{transform:none}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .admin-main{padding:1rem}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .g3{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr}
}