/* ============================================
   TXR.asia — Mobile-First Crypto App
   Premium Indigo + Violet + Clean White
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ---------- TOKENS ---------- */
:root{
  --primary:#4F46E5;
  --primary-dark:#4338CA;
  --primary-light:#818CF8;
  --primary-50:rgba(79,70,229,.08);
  --primary-100:rgba(79,70,229,.15);
  --accent:#F59E0B;
  --accent-dark:#D97706;
  --accent-50:rgba(245,158,11,.1);
  
  /* Modern Clean Palette */
  --white:#fff;
  --bg:#F8FAFC;
  --card:#fff;
  --text:#0F172A;
  --text2:#475569;
  --muted:#94A3B8;
  
  --border:#E2E8F0;
  --border-lt:#F1F5F9;
  
  --green:#10B981;
  --green-bg:rgba(16,185,129,.1);
  --red:#EF4444;
  --red-bg:rgba(239,68,68,.1);
  --yellow:#F59E0B;
  --yellow-bg:rgba(245,158,11,.1);
  --blue:#3B82F6;
  --blue-bg:rgba(59,130,246,.1);
  
  /* Gradients */
  --grad:linear-gradient(135deg,#4F46E5 0%,#6366F1 50%,#8B5CF6 100%);
  --grad-purple:linear-gradient(135deg,#7C3AED,#6D28D9);
  
  /* NEW COOLER GIFT GRADIENT */
  --grad-gift: linear-gradient(135deg, #FF3D77 0%, #FF8A5C 100%); 
  
  /* Shadows - Refined for "Cleaner" look */
  --shadow-s:0 2px 5px rgba(15,23,42,.04);
  --shadow:0 8px 20px rgba(15,23,42,.06);
  --shadow-l:0 20px 40px rgba(15,23,42,.1);
  --shadow-orange:0 8px 24px rgba(79,70,229,.2);
  --shadow-gift: 0 8px 20px rgba(255, 61, 119, 0.35);
  
  --r:16px;--r-lg:24px;--r-sm:12px;--r-xs:8px;--r-full:999px;
  --ease:cubic-bezier(.4,0,.2,1);
  --app-w:420px;
  --hdr:56px;
  --nav:68px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#E2E8F0;
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::-webkit-scrollbar{width:0;height:0}

/* ========== APP SHELL (phone frame) ========== */
.app-shell{
  position:relative;
  width:100%;
  max-width:var(--app-w);
  min-height:100vh;
  margin:0 auto;
  background:var(--bg);
  display:flex;
  flex-direction:column;
}
/* Desktop: dark bg + phone centered */
@media(min-width:481px){
  body{
    background:linear-gradient(160deg,#0F172A 0%,#1E1B4B 50%,#312E81 100%);
  }
  .app-shell{
    box-shadow:0 0 60px rgba(0,0,0,.25);
    border-left:1px solid rgba(255,255,255,.04);
    border-right:1px solid rgba(255,255,255,.04);
  }
}

/* ========== TOP HEADER ========== */
.top-header{
  position:sticky;top:0;z-index:100;
  height:var(--hdr);
  background:rgba(255,255,255,.85);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid rgba(226, 232, 240, 0.6);
  flex-shrink:0;
}
.top-header-left{display:flex;align-items:center;gap:8px}
.top-header-left img{width:30px;height:30px;border-radius:8px;box-shadow:var(--shadow-s)}
.top-header-left h1{
  font-size:18px;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hdr-balance{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px 5px 8px;
  background:var(--primary-50);border-radius:var(--r-full);
  font-weight:700;font-size:13px;color:var(--primary);
  border: 1px solid rgba(79,70,229,0.1);
}
.hdr-balance img{width:18px;height:18px;border-radius:5px}

/* ========== PAGE BODY ========== */
.page-body{
  flex:1;
  padding:14px 16px calc(var(--nav) + 16px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ========== BOTTOM NAV ========== */
/* Footer CSS is fully inline in footer.php */

/* ========== AUTH PAGE ========== */
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--grad);position:relative;overflow:hidden;
}
.auth-page::before{
  content:'';position:absolute;width:420px;height:420px;border-radius:50%;
  background:rgba(255,255,255,.08);top:-160px;right:-160px;
}
.auth-container{width:100%;max-width:var(--app-w);padding:20px;position:relative;z-index:1}
.auth-card{
  background:var(--white);border-radius:28px;padding:40px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.15);animation:slideUp .5s var(--ease);
}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo img{width:72px;height:72px;border-radius:18px;box-shadow:var(--shadow);margin:0 auto}
.auth-logo h1{
  font-size:26px;font-weight:800;margin-top:12px;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.auth-logo p{color:var(--muted);font-size:13px;margin-top:4px}
.auth-tabs{
  display:flex;background:var(--bg);border-radius:var(--r-full);padding:4px;margin-bottom:24px;
}
.auth-tab{
  flex:1;padding:10px;text-align:center;border-radius:var(--r-full);
  cursor:pointer;font-weight:600;font-size:13px;color:var(--muted);
  border:none;background:none;font-family:inherit;transition:.2s var(--ease);
}
.auth-tab.active{background:var(--white);color:var(--primary);box-shadow:var(--shadow-s)}
.auth-form{display:none}.auth-form.active{display:block}
.auth-error,.auth-success{
  padding:12px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;
  margin-bottom:16px;display:none;
}
.auth-error{background:var(--red-bg);color:var(--red)}
.auth-success{background:var(--green-bg);color:var(--green)}

/* ========== FORMS ========== */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;text-transform:capitalize;letter-spacing:0}
.form-input{
  width:100%;padding:12px 16px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;background:var(--bg);color:var(--text);
  transition:.2s var(--ease);
}
.form-input:focus{outline:none;border-color:var(--primary);background:var(--white);box-shadow:0 0 0 4px var(--primary-50)}
.form-input::placeholder{color:var(--muted)}
textarea.form-input{resize:vertical}
select.form-input{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:none;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:.2s var(--ease);white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:var(--grad);color:#fff;width:100%;padding:14px;
  box-shadow:var(--shadow-orange);border-radius:var(--r-sm);letter-spacing:.3px;
}
.btn-primary:hover{box-shadow:0 12px 30px rgba(79,70,229,.35);filter:brightness(1.05)}
.btn-secondary{background:var(--white);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-s)}
.btn-accent{background:var(--grad-purple);color:#fff}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-sm{padding:8px 16px;font-size:12px}
.btn-xs{padding:6px 12px;font-size:11px;border-radius:var(--r-xs)}
.btn-danger{background:var(--red);color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-warning{background:var(--yellow);color:#fff}

/* ========== BALANCE HERO ========== */
.balance-hero{
  background:var(--grad);border-radius:var(--r-lg);
  padding:24px 20px 20px;color:#fff;
  position:relative;overflow:hidden;margin-bottom:16px;
  box-shadow:var(--shadow-orange);
}
.balance-hero::before{
  content:'';position:absolute;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.08);top:-80px;right:-40px;filter:blur(20px);
}
.balance-hero::after{
  content:'';position:absolute;width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.05);bottom:-40px;left:10%;filter:blur(10px);
}
.bh-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.bh-label{font-size:12px;font-weight:500;opacity:.9;text-transform:uppercase;letter-spacing:.5px}
.bh-badge{
  padding:4px 10px;background:rgba(255,255,255,.2);border-radius:var(--r-full);
  font-size:10px;font-weight:700;backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;gap:4px;
}
.bh-amount{
  font-size:36px;font-weight:800;line-height:1.2;position:relative;z-index:1;
  margin-top:6px;letter-spacing:-1px;
}
.bh-usd{font-size:13px;opacity:.8;position:relative;z-index:1;margin-top:2px;font-weight:500}
.bh-id{font-size:11px;opacity:.5;position:relative;z-index:1;margin-top:10px;font-family:monospace}

/* ========== QUICK ICONS ROW (UPDATED COOLER) ========== */
.quick-icons{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:0;margin-bottom:16px;
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-s);padding:16px 4px;
  border:1px solid rgba(255,255,255,.5);
}
.qi{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.qi-circle{
  width:46px;height:46px;border-radius:16px; /* Squircle */
  display:flex;align-items:center;justify-content:center;
  font-size:20px;transition:.2s var(--ease);
  box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Subtle depth */
}
.qi:active .qi-circle{transform:scale(.92)}

/* Updated Generic Icon Colors (Cleaner) */
.qi-circle.orange{background:rgba(79,70,229,.05); color:var(--primary); border: 1px solid var(--primary-50);}
.qi-circle.purple{background:rgba(245,158,11,.05); color:var(--accent-dark); border: 1px solid var(--accent-50);}
.qi-circle.green{background:var(--green-bg); color:var(--green);}
.qi-circle.blue{background:var(--blue-bg); color:var(--blue);}
.qi-circle.red{background:var(--red-bg); color:var(--red);}

/* --- NEW GIFT ICON SPECIFIC --- */
/* Use class "gift" on the qi-circle for the cooler gift icon */
.qi-circle.gift, .qi-circle.gift-icon {
  background: var(--grad-gift);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-gift);
  animation: pulse-gift 2.5s infinite;
}
.qi-circle.gift i, .qi-circle.gift-icon i {
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.qi span{font-size:11px;font-weight:600;color:var(--text2); letter-spacing: -0.2px;}

/* ========== MINING CARD ========== */
.mine-card{
  background:var(--white);border-radius:var(--r-lg);
  padding:20px;margin-bottom:16px;box-shadow:var(--shadow-s);
  position:relative;overflow:hidden;border:1px solid var(--border-lt);
}
.mine-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.mine-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mine-dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(16,185,129,.15);flex-shrink:0;
}
.mine-dot.cd{background:var(--muted);box-shadow:none}
.mine-top h3{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.mine-val{font-size:30px;font-weight:900;color:var(--text);line-height:1;letter-spacing:-1px}
.mine-sub{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;margin-bottom:16px}
.mine-bar-wrap{display:flex;align-items:center;gap:12px}
.mine-bar-inner{flex:1}
.mine-bar-labels{display:flex;justify-content:space-between;margin-bottom:6px}
.mine-bar-labels span{font-size:11px;color:var(--muted);font-weight:500}
.mine-bar{height:8px;background:var(--border-lt);border-radius:8px;overflow:hidden}
.mine-bar-fill{height:100%;border-radius:8px;background:var(--grad);transition:width 1s linear}
.mine-btn{
  padding:10px 24px;background:var(--grad);color:#fff;
  border:none;border-radius:var(--r-full);
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  box-shadow:var(--shadow-orange);white-space:nowrap;
  transition:.15s var(--ease);flex-shrink:0;
}
.mine-btn:active{transform:scale(.96)}
.mine-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:grayscale(1)}

/* ========== PROMO CARDS (Cleaner) ========== */
.promo{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;border-radius:var(--r-lg);margin-bottom:12px;
  background:var(--white);box-shadow:var(--shadow-s);
  transition:.25s var(--ease);-webkit-tap-highlight-color:transparent;
  border:1px solid transparent;
}
.promo:active{transform:scale(.98)}
/* Hover effect for cooler feel */
.promo:hover {box-shadow: var(--shadow);}

.promo-left{display:flex;align-items:center;gap:14px}
/* Promo Icon Cooler */
.promo-icon{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
  background:var(--bg);color:var(--primary);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
}

/* If the promo is a gift/referral, use this class */
.promo-icon.gift {
    background: var(--grad-gift);
    color: #fff;
    box-shadow: var(--shadow-gift);
}

.promo h4{font-size:14px;font-weight:700;color:var(--text)}
.promo p{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.promo-action{
  padding:8px 16px;border-radius:var(--r-full);background:var(--primary-50);color:var(--primary);
  font-size:11px;font-weight:700;border:none;cursor:pointer;flex-shrink:0;
}

.promo-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.promo-mini{
  display:flex;align-items:center;gap:12px;
  padding:16px 14px;border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-s);
  transition:.15s var(--ease);-webkit-tap-highlight-color:transparent;
}
.promo-mini:active{transform:scale(.97)}
.promo-mini .pm-icon{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
  background:var(--bg);color:var(--primary);
}
.promo-mini h4{font-size:13px;font-weight:700}
.promo-mini p{font-size:10px;color:var(--muted);font-weight:600}

/* ========== SECTION TITLE ========== */
.sec-title{font-size:15px;font-weight:800;margin:16px 0 12px;color:var(--text);letter-spacing:-.3px}

/* ========== CARDS ========== */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-s);overflow:hidden;margin-bottom:12px;border:1px solid var(--border-lt)}
.card-hd{
  padding:14px 18px;border-bottom:1px solid var(--border-lt);
  display:flex;align-items:center;justify-content:space-between;
}
.card-hd h3{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-bd{padding:16px 18px}
.card-ft{padding:12px 18px;border-top:1px solid var(--border-lt);background:var(--bg)}

/* ========== STATS ========== */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.stat{
  background:var(--white);border-radius:var(--r);padding:16px;
  box-shadow:var(--shadow-s);border:1px solid var(--border-lt);
}
.stat .s-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;
  background:var(--bg);color:var(--text2);
}
.stat h4{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.stat .s-val{font-size:22px;font-weight:800;line-height:1.2;color:var(--text)}
.stat .s-sub{font-size:10px;font-weight:700;margin-top:6px;padding:3px 8px;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:3px}
.s-sub.up{background:var(--green-bg);color:var(--green)}
.s-sub.down{background:var(--red-bg);color:var(--red)}

/* ========== ACTIVITY LIST ========== */
.act-list{display:flex;flex-direction:column}
.act-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--border-lt);
}
.act-item:last-child{border-bottom:none}
.act-left{display:flex;align-items:center;gap:12px}
.act-icon{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
  background:var(--bg);color:var(--text2);
}
.act-item h4{font-size:13px;font-weight:600;color:var(--text)}
.act-item .act-date{font-size:11px;color:var(--muted);margin-top:2px}
.act-right{text-align:right}
.act-right .act-amt{font-size:14px;font-weight:700;color:var(--text)}
.act-right .act-status{font-size:10px;font-weight:700;text-transform:uppercase;margin-top:2px;display:block}

/* ========== TABLES ========== */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);border:1px solid var(--border-lt)}
table{width:100%;border-collapse:collapse;background:var(--white)}
table th,table td{padding:12px 14px;text-align:left;font-size:12px;border-bottom:1px solid var(--border-lt)}
table th{font-weight:600;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:var(--bg)}
table tr:last-child td{border-bottom:none}
table tr:active td{background:var(--primary-50)}

/* ========== BADGES ========== */
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-full);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.badge-pending{background:var(--yellow-bg);color:var(--yellow)}
.badge-approved,.badge-success,.badge-open{background:var(--green-bg);color:var(--green)}
.badge-rejected,.badge-danger,.badge-closed{background:var(--red-bg);color:var(--red)}
.badge-replied{background:var(--primary-100);color:var(--primary)}
.badge-active{background:var(--primary-100);color:var(--primary)}

/* ========== REFERRAL ========== */
.ref-hero{
  background:var(--grad);border-radius:var(--r-lg);padding:26px 20px;
  color:#fff;text-align:center;margin-bottom:16px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-orange);
}
.ref-code{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.2);border-radius:var(--r-sm);
  padding:12px 16px;margin:16px auto 0;max-width:320px;
  backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);
}
.ref-code input{
  flex:1;background:transparent;border:none;color:#fff;
  font-size:16px;font-weight:800;letter-spacing:2px;text-align:center;outline:none;min-width:0;
}
.ref-code button{
  background:#fff;color:var(--primary);border:none;padding:8px 16px;
  border-radius:var(--r-xs);font-weight:700;cursor:pointer;font-size:12px;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* ========== GIFTCODE ========== */
.gc-input{display:flex;gap:10px}
.gc-input input{
  flex:1;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  font-family:inherit;min-width:0;background:var(--white);
}
.gc-input input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px var(--primary-50)}

/* ========== TICKETS / CHAT ========== */
.tk-list{display:flex;flex-direction:column;gap:10px}
.tk-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-radius:var(--r-sm);
  background:var(--white);box-shadow:var(--shadow-s);
  transition:.15s var(--ease);-webkit-tap-highlight-color:transparent;border:1px solid var(--border-lt);
}
.tk-item:active{transform:scale(.98)}
.chat-msgs{max-height:420px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.chat-msg{max-width:85%;padding:12px 16px;border-radius:var(--r);font-size:13px;line-height:1.5;box-shadow:var(--shadow-s)}
.chat-msg.user{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.chat-msg.admin{align-self:flex-start;background:var(--white);color:var(--text);border-bottom-left-radius:4px}
.chat-msg .msg-time{font-size:10px;opacity:.7;margin-top:4px;display:block;font-weight:500}
.chat-msg .msg-who{font-size:10px;font-weight:700;opacity:.8;margin-bottom:2px}
.chat-in{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--border-lt);background:var(--white)}
.chat-in input{flex:1;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:13px;font-family:inherit;min-width:0}
.chat-in input:focus{outline:none;border-color:var(--primary)}

/* ========== TASK CARDS ========== */
.tasks-list{display:flex;flex-direction:column;gap:12px}
.task-card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow-s);overflow:hidden;transition:.15s var(--ease);border:1px solid var(--border-lt)}
.task-card:active{transform:scale(.98)}
.tc-top{padding:14px 16px 0;display:flex;align-items:flex-start;justify-content:space-between}
.tc-body{padding:10px 16px}
.tc-body h4{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--text)}
.tc-body p{font-size:12px;color:var(--text2);line-height:1.5}
.task-reward{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;background:var(--primary-50);border-radius:var(--r-full);
  font-size:11px;font-weight:700;color:var(--primary);white-space:nowrap;
}
.tc-foot{padding:12px 16px;border-top:1px solid var(--border-lt);display:flex;align-items:center;justify-content:space-between;background:var(--bg)}

/* ========== FILE UPLOAD ========== */
.file-up{
  border:2px dashed var(--border);border-radius:var(--r-sm);
  padding:24px;text-align:center;cursor:pointer;transition:.2s var(--ease);
  background:var(--bg);
}
.file-up:hover,.file-up.dragover{border-color:var(--primary);background:var(--primary-50)}
.file-up input{display:none}
.file-up i{font-size:32px;color:var(--muted);margin-bottom:8px}
.file-up p{font-size:12px;color:var(--text2);font-weight:500}
.file-preview{margin-top:12px}
.file-preview img{max-width:180px;border-radius:var(--r-sm);border:1px solid var(--border);box-shadow:var(--shadow-s)}

/* ========== MODAL (bottom sheet) ========== */
.modal-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center;z-index:1000;
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--white);border-radius:24px 24px 0 0;
  width:100%;max-width:var(--app-w);max-height:90vh;
  overflow-y:auto;box-shadow:var(--shadow-l);animation:sheetUp .35s var(--ease);
}
.modal-hd{
  padding:16px 20px;border-bottom:1px solid var(--border-lt);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--white);z-index:1;border-radius:24px 24px 0 0;
}
.modal-hd h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.modal-close{
  background:var(--bg);border:none;width:32px;height:32px;border-radius:50%;
  font-size:18px;cursor:pointer;color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.modal-close:hover{background:var(--border);color:var(--text)}
.modal-bd{padding:20px}
.modal-ft{padding:16px 20px;border-top:1px solid var(--border-lt);display:flex;gap:10px;justify-content:flex-end;background:var(--bg)}

/* ========== PROFILE ========== */
.prof-hd{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.prof-av{
  width:60px;height:60px;border-radius:18px;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#fff;font-weight:800;flex-shrink:0;box-shadow:var(--shadow-orange);
}
.prof-info h2{font-size:20px;font-weight:800;color:var(--text)}
.prof-info p{color:var(--muted);font-size:12px;font-weight:500;margin-top:2px}

/* ========== EMPTY ========== */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty i{font-size:40px;margin-bottom:12px;opacity:.5;display:block;color:var(--primary-light)}
.empty h3{font-size:15px;font-weight:700;color:var(--text2);margin-bottom:4px}
.empty p{font-size:12px}

/* ========== TOAST ========== */
.toast-container{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  width:calc(var(--app-w) - 32px);max-width:calc(100vw - 32px);
  z-index:9999;display:flex;flex-direction:column;gap:8px;
}
.toast{
  padding:12px 16px;border-radius:var(--r-sm);color:#fff;
  font-size:13px;font-weight:600;box-shadow:var(--shadow-l);
  animation:slideDown .35s var(--ease);display:flex;align-items:center;gap:8px;
}
.toast-success{background:var(--green)}
.toast-error{background:var(--red)}
.toast-warning{background:var(--yellow)}
.toast-info{background:var(--primary)}

/* ========== TABS ========== */
.tabs{
  display:flex;gap:4px;background:var(--border-lt);padding:4px;
  border-radius:var(--r-sm);margin-bottom:16px;box-shadow:inner 0 2px 4px rgba(0,0,0,.05);overflow-x:auto;
}
.tab-btn{
  padding:8px 18px;border:none;background:none;border-radius:var(--r-xs);
  font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;
  white-space:nowrap;font-family:inherit;transition:.15s var(--ease);flex:1;text-align:center;
}
.tab-btn.active{background:var(--white);color:var(--primary);box-shadow:var(--shadow-s)}
.tab-content{display:none}.tab-content.active{display:block}

/* ========== PAGINATION ========== */
.pag{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px}
.pag a,.pag span{padding:8px 12px;border-radius:var(--r-xs);font-size:12px;font-weight:600;color:var(--text2);background:var(--white);border:1px solid var(--border)}
.pag a:hover{background:var(--primary-50);color:var(--primary);border-color:var(--primary-light)}
.pag .active{background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow-orange)}

/* ========== TOGGLE ========== */
.toggle{position:relative;width:46px;height:26px;display:inline-block}
.toggle input{opacity:0;width:0;height:0}
.toggle-sl{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:var(--border);border-radius:26px;transition:.2s var(--ease);
}
.toggle-sl::before{
  content:'';position:absolute;width:20px;height:20px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:.2s var(--ease);box-shadow:var(--shadow-s);
}
.toggle input:checked+.toggle-sl{background:var(--primary)}
.toggle input:checked+.toggle-sl::before{transform:translateX(20px)}

/* ========== ANIMATIONS ========== */
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sheetUp{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.25)}50%{box-shadow:0 0 0 10px transparent}}
@keyframes pulse-gift{0%,100%{box-shadow:0 0 0 0 rgba(255,61,119,.3)}50%{box-shadow:0 0 0 6px rgba(255,61,119,0), 0 0 12px rgba(255,61,119,.2)}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:slideUp .45s var(--ease)}

.spinner{
  width:28px;height:28px;border:3px solid var(--border-lt);border-top-color:var(--primary);
  border-radius:50%;animation:spin .8s linear infinite;margin:16px auto;
}

/* ========== PAGE TITLE ========== */
.pg-title{
  font-size:18px;font-weight:800;margin-bottom:16px;
  display:flex;align-items:center;gap:10px;color:var(--text);letter-spacing:-.5px;
}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);font-weight:600;margin-bottom:12px;
}
.back-link:hover{color:var(--primary)}

/* ========== UTILITY ========== */
.flex{display:flex}.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}
.mb-6{margin-bottom:6px}.mb-8{margin-bottom:8px}.mb-10{margin-bottom:10px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.mt-10{margin-top:10px}.mt-14{margin-top:14px}
.tc{text-align:center}
.tmuted{color:var(--muted)}.tprimary{color:var(--primary)}.tgreen{color:var(--green)}.tred{color:var(--red)}.tyellow{color:var(--yellow)}.taccent{color:var(--accent)}
.tsm{font-size:12px}.txs{font-size:10px}
.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ========== ADMIN (wider shell) ========== */
.admin-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ========== OVERRIDE FIX ========== */
/* Footer overrides moved inline to footer.php */