/* ekoreva Dashboard — Complete Rebuild
   AMOLED · Custom Emoji Pack · Motion-Driven · Satoshi */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,900&display=swap');

/* ── AMOLED Design Tokens ───────────────────── */
:root {
  --black:   #000000;
  --s1:      #080808;
  --s2:      #0F0F0F;
  --s3:      #181818;
  --glass:   rgba(255,255,255,.04);
  --glass2:  rgba(255,255,255,.07);

  --indigo:  #6A7BFF;
  --ig:      rgba(106,123,255,.25);
  --id:      rgba(106,123,255,.10);
  --lav:     #A88CFF;
  --amber:   #FFB86B;
  --green:   #4ADE80;
  --red:     #F87171;
  --yellow:  #FBBF24;

  --t1: #FFFFFF;
  --t2: #8899AA;
  --t3: #505A68;
  --bd: rgba(255,255,255,.07);
  --bd2:rgba(255,255,255,.12);

  --sb: 220px;
  --r:  14px;
  --r2: 10px;

  /* Emoji font stack — consistent cross-platform */
  --emoji: "Apple Color Emoji","Noto Color Emoji","Twemoji Mozilla","Segoe UI Emoji",sans-serif;
}

/* ── Reset ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:'Satoshi',system-ui,sans-serif;
  background:var(--black); color:var(--t1);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--indigo)}

/* ── Auth Gate ───────────────────────────────── */
#auth-gate{
  display:flex;align-items:center;justify-content:center;
  height:100vh;background:var(--black);
}
.gate-inner{text-align:center}
.gate-logo{
  font-size:36px;font-weight:900;letter-spacing:-.04em;
  color:var(--t1);margin-bottom:10px;
}
.gate-msg{font-size:14px;color:var(--t3)}
.gate-back{display:inline-block;margin-top:16px;font-size:12px;color:var(--t3);text-decoration:none}
.gate-back:hover{color:var(--t1)}

/* ── Layout ──────────────────────────────────── */
#app{display:flex;height:100vh;overflow:hidden;position:relative}

/* Ambient glow */
#app::before{
  content:'';position:fixed;top:-100px;left:50%;
  transform:translateX(-50%);
  width:600px;height:400px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse,rgba(106,123,255,.07) 0%,transparent 70%);
}

/* ── Sidebar ─────────────────────────────────── */
#sidebar{
  width:var(--sb);flex-shrink:0;
  background:var(--s1);
  border-right:1px solid var(--bd);
  display:flex;flex-direction:column;
  overflow-y:auto;position:relative;z-index:1;
}
.sb-brand{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 16px 14px;border-bottom:1px solid var(--bd);
}
.sb-logo{
  font-size:17px;font-weight:900;letter-spacing:-.03em;
  display:flex;align-items:center;gap:7px;
}
.sb-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--indigo);
  box-shadow:0 0 10px var(--indigo);
  animation:pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{transform:scale(1);box-shadow:0 0 10px var(--indigo)}
  50%{transform:scale(.75);box-shadow:0 0 5px var(--indigo)}
}
#sidebar-close{background:none;border:none;color:var(--t3);cursor:pointer;font-size:16px;padding:4px}
.sb-user{
  padding:12px 16px;border-bottom:1px solid var(--bd);
}
.sb-handle{font-size:13px;font-weight:600;color:var(--t1)}
.sb-plan{
  display:inline-block;margin-top:4px;
  padding:2px 10px;border-radius:999px;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--id);border:1px solid rgba(106,123,255,.2);color:var(--indigo);
}

/* Nav groups */
.sb-nav{padding:10px 0 20px;flex:1}
.nav-group{margin-bottom:4px}
.nav-group-label{
  font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3);
  padding:10px 16px 4px;
}
.nb{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:9px 16px;
  background:none;border:none;
  font-size:13px;font-weight:500;color:var(--t2);
  cursor:pointer;text-align:left;
  transition:all 140ms;white-space:nowrap;
  border-radius:0;position:relative;
}
.nb:hover{color:var(--t1);background:var(--glass)}
.nb.active{color:var(--indigo);background:var(--id)}
.nb.active::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;
  width:2px;background:var(--indigo);
  border-radius:0 2px 2px 0;
  box-shadow:0 0 8px var(--indigo);
}
.nb-emoji{
  font-size:16px;line-height:1;flex-shrink:0;
  font-family:var(--emoji);
}
.nb-text{flex:1}

/* ── Main ────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;position:relative;z-index:1}
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 24px;border-bottom:1px solid var(--bd);
  background:rgba(0,0,0,.8);backdrop-filter:blur(24px);
  position:sticky;top:0;z-index:10;flex-shrink:0;
}
#hamburger{background:none;border:none;color:var(--t2);font-size:20px;cursor:pointer;display:none}
.topbar-title{font-size:15px;font-weight:700;flex:1}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-handle{font-size:12px;color:var(--t3)}

/* ── Panels ──────────────────────────────────── */
.panels{flex:1;overflow:hidden;position:relative}
.panel{
  display:none;height:100%;overflow-y:auto;
  padding:28px 28px 80px;
}
.panel.active{
  display:block;
  animation:panel-enter .3s cubic-bezier(.16,1,.3,1);
}
@keyframes panel-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Panel Hero ──────────────────────────────── */
.panel-hero{
  display:flex;align-items:center;gap:14px;
  margin-bottom:24px;
}
.ph-emoji{
  font-size:36px;font-family:var(--emoji);
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;
  background:var(--glass);border:1px solid var(--bd2);
  border-radius:16px;flex-shrink:0;
}
.ph-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
.ph-sub{font-size:13px;color:var(--t2)}

/* ── Overview Greeting ───────────────────────── */
.greeting-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;
}
.greeting-h1{
  font-size:28px;font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 20%,var(--indigo));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.greeting-sub{font-size:13px;color:var(--t2);margin-top:4px}
.greeting-streak{
  display:flex;align-items:center;gap:6px;
  background:var(--glass);border:1px solid var(--bd2);
  border-radius:999px;padding:8px 16px;
}
.streak-fire{font-size:20px;font-family:var(--emoji)}
.streak-num{font-size:22px;font-weight:900;color:var(--amber)}
.streak-label{font-size:11px;color:var(--t3)}

/* ── Stats Row ───────────────────────────────── */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;margin-bottom:20px;
}
.sc{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r);padding:18px 14px;
  text-align:center;cursor:default;
  transition:all 200ms cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
}
.sc::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--indigo) 50%,transparent);
  opacity:0;transition:opacity 200ms;
}
.sc:hover{border-color:var(--bd2);transform:translateY(-2px)}
.sc:hover::after{opacity:.5}
.sc.accent{background:var(--id);border-color:rgba(106,123,255,.2)}
.sc.accent .sc-val{color:var(--indigo)}
.sc-emoji{font-size:22px;font-family:var(--emoji);margin-bottom:8px;display:block}
.sc-val{
  font-size:30px;font-weight:900;letter-spacing:-.03em;
  color:var(--t1);line-height:1;
  background:linear-gradient(135deg,#fff 30%,var(--indigo));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sc-key{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-top:5px}
.sc-badge{
  display:inline-block;margin-top:6px;
  font-size:10px;color:var(--indigo);font-weight:700;
}

/* ── Feed Grid ───────────────────────────────── */
.feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feed-col{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r);padding:18px;
  position:relative;overflow:hidden;
}
.feed-col::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 50%,transparent);
}
.feed-header{
  font-size:12px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px;display:flex;align-items:center;gap:6px;
}
.feed-emoji{font-family:var(--emoji)}
.feed-body{font-size:13px;color:var(--t2)}

/* ── Cards ───────────────────────────────────── */
.card{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r);padding:20px;margin-bottom:14px;
  position:relative;overflow:hidden;
  transition:border-color 200ms,transform 200ms;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 50%,transparent);
}
.card:hover{border-color:var(--bd2)}
.card-label{
  font-size:11px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px;
}
.card-label-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.count-badge{
  font-size:12px;font-weight:700;
  background:var(--id);color:var(--indigo);
  padding:2px 10px;border-radius:999px;
  border:1px solid rgba(106,123,255,.2);
}

/* ── Persona Score ───────────────────────────── */
.score-showcase{
  text-align:center;padding:32px 0 20px;
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r);margin-bottom:14px;
}
.score-giant{
  font-size:96px;font-weight:900;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(135deg,#fff 30%,var(--indigo));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.score-note{font-size:14px;color:var(--t2);margin-top:8px}
.muted-p{font-size:13px;color:var(--t3);line-height:1.6}

/* ── Buttons ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--r2);
  font-size:13px;font-weight:600;cursor:pointer;
  border:none;font-family:inherit;
  transition:all 150ms cubic-bezier(.16,1,.3,1);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
.btn-primary{
  background:var(--indigo);color:#fff;
  box-shadow:0 0 20px rgba(106,123,255,.3);
}
.btn-primary:hover{
  background:#7A8BFF;transform:translateY(-1px);
  box-shadow:0 4px 24px rgba(106,123,255,.45);
}
.btn-outline{
  background:var(--glass);color:var(--t2);
  border:1px solid var(--bd2);
}
.btn-outline:hover{color:var(--t1);border-color:rgba(106,123,255,.3)}
.btn-sm{
  padding:6px 12px;font-size:12px;border-radius:8px;
  background:var(--glass);color:var(--t2);border:1px solid var(--bd2);
  cursor:pointer;font-family:inherit;transition:all 150ms;
}
.btn-sm:hover{color:var(--t1);border-color:var(--bd2)}
.btn-danger{background:rgba(248,113,113,.1);border:1px solid var(--red);color:var(--red)}

/* ── Forms ───────────────────────────────────── */
.text-input,.search-box{
  width:100%;background:var(--glass);
  border:1px solid var(--bd2);border-radius:var(--r2);
  color:var(--t1);padding:10px 14px;
  font-size:13px;outline:none;font-family:inherit;
  transition:border-color 150ms;
}
.text-input:focus,.search-box:focus{
  border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(106,123,255,.12);
}
.text-input::placeholder,.search-box::placeholder{color:var(--t3)}
.search-box{margin-bottom:14px}
.text-area{
  width:100%;background:var(--glass);
  border:1px solid var(--bd2);border-radius:var(--r2);
  color:var(--t1);padding:10px 14px;
  font-size:13px;outline:none;
  min-height:80px;resize:vertical;font-family:inherit;
  transition:border-color 150ms;margin-top:8px;
}
.text-area:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(106,123,255,.12)}
.form-row{margin-bottom:8px}

/* ── Item Lists ──────────────────────────────── */
.item-list{display:flex;flex-direction:column;gap:10px}
.tweet-card{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r2);padding:14px;cursor:pointer;
  transition:all 180ms cubic-bezier(.16,1,.3,1);
  border-left:2px solid transparent;
}
.tweet-card:hover{
  border-color:rgba(106,123,255,.2);
  border-left-color:var(--indigo);
  background:var(--glass2);
  transform:translateX(3px);
}
.tweet-author{font-size:11px;color:var(--t3);margin-bottom:4px}
.tweet-text{font-size:13px;color:var(--t1);line-height:1.5;margin-bottom:8px}
.tweet-meta{display:flex;justify-content:space-between;align-items:center}
.tweet-stats{font-size:11px;color:var(--t3)}
.tweet-link{font-size:11px;color:var(--indigo);text-decoration:none;transition:color 150ms}
.tweet-link:hover{color:var(--lav)}
.opp-score{
  font-size:10px;font-weight:700;color:var(--green);
  margin-top:6px;display:flex;align-items:center;gap:4px;
}

/* ── Voice Traits ────────────────────────────── */
.trait-row{margin-bottom:12px}
.trait-header{display:flex;justify-content:space-between;margin-bottom:4px;font-size:12px}
.trait-label{color:var(--t2);font-weight:500}
.trait-value{color:var(--indigo);font-weight:700}
.trait-bar{background:var(--s3);border-radius:3px;height:3px;overflow:hidden}
.trait-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--indigo),var(--lav));
  transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.trait-desc{font-size:11px;color:var(--t3);margin-top:3px}

/* ── Memory / CRM / Template Cards ───────────── */
.memory-card{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r2);padding:12px;
  transition:border-color 150ms;
}
.memory-card:hover{border-color:var(--bd2)}
.memory-tweet{
  font-size:11px;color:var(--t3);margin-bottom:5px;
  border-left:2px solid var(--s3);padding-left:8px;
}
.memory-reply{font-size:13px;color:var(--t1);font-style:italic}
.memory-date{font-size:10px;color:var(--t3);margin-top:5px}

.crm-card{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r2);padding:12px;transition:all 150ms;
}
.crm-card:hover{border-color:var(--bd2)}
.crm-handle{font-weight:700;color:var(--t1)}
.crm-stats{font-size:11px;color:var(--t3);margin-top:3px}

.template-card{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r2);padding:14px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  transition:border-color 150ms;
}
.template-card:hover{border-color:var(--bd2)}
.template-label{
  font-size:10px;color:var(--indigo);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;
}
.template-text{font-size:13px;color:var(--t1);line-height:1.5}
.template-uses{font-size:10px;color:var(--t3);margin-top:4px}

/* ── Generated Posts ─────────────────────────── */
.gen-post{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r2);padding:14px;margin-bottom:10px;
  transition:border-color 200ms;
}
.gen-post:hover{border-color:var(--bd2)}
.gen-post-text{font-size:14px;color:var(--t1);line-height:1.6;margin-bottom:8px}
.copy-btn{
  background:none;border:none;color:var(--indigo);
  font-size:11px;font-weight:600;cursor:pointer;
  padding:4px 10px;border-radius:6px;transition:background 150ms;
}
.copy-btn:hover{background:var(--id)}

/* ── Affiliate ───────────────────────────────── */
.ref-link-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--s2);border:1px solid var(--bd2);
  border-radius:var(--r2);padding:12px 14px;
}
.ref-link-text{font-size:12px;color:var(--indigo);font-family:monospace;word-break:break-all}
.commission-row{
  display:flex;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--bd);font-size:12px;
}
.commission-row:last-child{border-bottom:none}
.status-chip{padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700}
.held{background:rgba(251,191,36,.1);color:var(--yellow)}
.pending{background:rgba(96,165,250,.1);color:#60A5FA}
.paid{background:rgba(74,222,128,.1);color:var(--green)}

/* ── People Cards ────────────────────────────── */
.person-card{
  background:var(--glass);border:1px solid var(--bd);
  border-radius:var(--r2);padding:14px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  transition:all 150ms;
}
.person-card:hover{border-color:rgba(106,123,255,.2)}
.person-name{font-weight:700;color:var(--t1)}
.person-followers{font-size:11px;color:var(--t3);margin-top:2px}
.person-tweet{font-size:11px;color:var(--t2);margin-top:4px;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Badge Strip ─────────────────────────────── */
.badge-strip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.badge{
  padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--id);color:var(--indigo);
  border:1px solid rgba(106,123,255,.2);
}

/* ── Scroll Reveal ───────────────────────────── */
.rev{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.rev.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}

/* ── Responsive ──────────────────────────────── */
@media(max-width:768px){
  #sidebar{position:fixed;left:-100%;z-index:1000;transition:left 200ms;height:100vh}
  #sidebar.open{left:0}
  #hamburger{display:block}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .feed-grid{grid-template-columns:1fr}
  .panel{padding:16px 16px 60px}
}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}