@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{
  --paper:#F2F0EB; --ink:#16110C; --card:#FFFFFF; --line:rgba(20,17,13,0.08);
  --tang:#1b936b; --tang2:#d8bb76; --grad:linear-gradient(135deg,#1b936b,#d8bb76);
  --green:#12B877; --cream:#e4f4ec; --muted:#8C857B; --text:#1A1510;
  --accent:#1b936b; --bg:#F2F0EB;
  --shadow:0 10px 26px rgba(20,17,13,0.06); --shadow-btn:0 14px 26px -8px rgba(255,106,44,0.55);
  --font-poppins:"Plus Jakarta Sans",sans-serif; --font-dm-sans:"Plus Jakarta Sans",sans-serif;
  --font-manrope:"Plus Jakarta Sans",sans-serif; --font-oufit:"Sora",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;border:none;outline:none;-webkit-tap-highlight-color:transparent;font-family:"Plus Jakarta Sans",sans-serif;}

button,.btn,a.button,input[type="button"],input[type="submit"]{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;}
button:active,.btn:active{transform:scale(.97);}

html,body{width:100%;height:100%;background:#F2F0EB;color:#1A1510;display:flex;align-items:center;justify-content:center;}

.dsp{font-family:"Sora",sans-serif;}
.num{font-family:"Sora",sans-serif;font-weight:700;letter-spacing:-.5px;font-feature-settings:"tnum";}

/* ===== 404 ===== */
.not-found-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#F2F0EB;}
.not-found-container h1{font-size:4.5rem;line-height:1;font-weight:800;color:#1b936b;font-family:"Sora",sans-serif;}
.not-found-container h3{font-size:1.2rem;font-weight:500;line-height:2;color:#8C857B;}
.not-found-container a{text-decoration:none;background:linear-gradient(135deg,#1b936b,#d8bb76);padding:12px 26px;border-radius:80px;color:#fff;margin:20px 0;font-weight:700;box-shadow:0 14px 26px -8px rgba(255,106,44,0.55);}

/* ===== App shell ===== */
.user-page{width:100%;max-width:440px;height:100%;background:#F2F0EB;overflow-x:hidden;overflow-y:auto;padding-bottom:120px;position:relative;}
.user-page::-webkit-scrollbar{width:0;}

nav{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;min-height:70px;background:transparent;}
nav h3{font-size:21px;font-weight:700;cursor:pointer;color:#16110C;font-family:"Sora",sans-serif;}
nav i{font-size:20px;cursor:pointer;color:#16110C;}

/* ===== Loaders ===== */
.item-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:12px;}
.item-loader p{font-size:13px;color:#8C857B;margin:0;}
.loader{width:38px;height:38px;border:4px solid #e4f4ec;border-top-color:#1b936b;border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== Inner page header ===== */
.page-bar{display:flex;align-items:center;gap:14px;padding:18px 22px;background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 6px 16px rgba(20,17,13,0.05);border-radius:0 0 22px 22px;min-height:66px;}
.back-btn{font-size:16px;cursor:pointer;color:#16110C;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:#e4f4ec;border-radius:14px;flex-shrink:0;}
.user-page .page-title{font-size:18px !important;font-weight:700;width:100%;color:#1A1510 !important;font-family:"Sora",sans-serif;}

/* ===== OTP ===== */
.otp-box{display:flex;gap:10px;justify-content:center;margin:0;}
.otp-input{width:46px !important;text-align:center;font-size:20px;font-weight:700;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:#1A1510;outline:none;margin:0 !important;padding:0 !important;aspect-ratio:1/1 !important;flex:1;transition:.2s;font-family:"Sora",sans-serif;box-shadow:0 6px 14px rgba(20,17,13,0.04);}
.otp-input:focus{border-color:#1b936b;box-shadow:0 0 0 4px #e4f4ec;}

/* ===== Floating chat icon ===== */
.chat-icon{position:fixed;right:20px;bottom:96px;z-index:60;width:56px;aspect-ratio:1/1;border-radius:18px;background:linear-gradient(135deg,#1b936b,#d8bb76);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 26px -8px rgba(255,106,44,0.55);}
.chat-icon i{color:#fff;font-size:18px;}

/* ===== Loader overlay ===== */
.page-loader{position:fixed;inset:0;background:rgba(242,240,235,0.8);display:none;align-items:center;justify-content:center;z-index:99999;}
.page-loader.show{display:flex;}
.spinner{width:42px;height:42px;border:4px solid #e4f4ec;border-top-color:#1b936b;border-radius:50%;animation:spin .8s linear infinite;}

/* ===== tejoracoin polish layer ===== */
body{background:radial-gradient(circle at 50% -10%,#fff8f1 0,#F2F0EB 42%,#ebe7e1 100%);}
.user-page{box-shadow:0 0 0 1px rgba(22,17,12,.04),0 24px 70px rgba(22,17,12,.12);}
a,button{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,opacity .18s ease;}
a:hover,button:hover{filter:brightness(1.02);}
.page-bar{backdrop-filter:blur(14px);background:rgba(255,255,255,.92);}
.page-bar .back-btn:hover{background:#ffdcca;transform:translateX(-2px);}
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
input:focus,select:focus,textarea:focus{border-color:#1b936b!important;box-shadow:0 0 0 4px rgba(255,106,44,.14)!important;}
.chat-icon:hover{transform:translateY(-3px);box-shadow:0 18px 30px -8px rgba(255,106,44,.65);}
@media (min-width:700px){body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 40%);}}

/* ===== tejoracoin premium midnight redesign ===== */
:root{
  --premium-bg:#081b16; --premium-surface:#102b23; --premium-surface-2:#17382e;
  --premium-line:rgba(148,163,184,.16); --premium-text:#f7f9ff; --premium-muted:#a0b8ae;
  --premium-cyan:#73e2b6; --premium-blue:#27aa7c; --premium-violet:#d8bb76;
  --premium-gradient:linear-gradient(135deg,#73e2b6 0%,#27aa7c 48%,#d8bb76 100%);
}
html,body{background:#081b16;color:var(--premium-text);}
body{background:radial-gradient(circle at 50% -12%,rgba(39,170,124,.28),transparent 34%),radial-gradient(circle at 100% 70%,rgba(216,187,118,.13),transparent 34%),#081b16;}
.user-page{background:linear-gradient(180deg,rgba(10,15,28,.98),#081b16 65%);box-shadow:0 0 0 1px rgba(148,163,184,.12),0 24px 80px rgba(0,0,0,.55);}
nav{padding:18px 22px 16px;background:rgba(7,11,22,.72);backdrop-filter:blur(18px);}
nav h3,.user-page nav h3{color:var(--premium-text)!important;font-size:22px;letter-spacing:-.7px;}
nav h3::after{content:" / PAYMENTS";font-size:9px;letter-spacing:1.5px;color:var(--premium-cyan);vertical-align:middle;margin-left:5px;}
nav i{color:var(--premium-cyan)!important;background:rgba(115,226,182,.1);border:1px solid rgba(115,226,182,.2);width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;}
.page-bar{background:rgba(16,23,39,.94);border-bottom:1px solid var(--premium-line);box-shadow:0 10px 24px rgba(0,0,0,.25);}
.user-page .page-title{color:var(--premium-text)!important;}
.back-btn{color:var(--premium-text);background:rgba(39,170,124,.14);}
.back-btn:hover{background:rgba(39,170,124,.26)!important;}
.chat-icon{background:var(--premium-gradient)!important;box-shadow:0 14px 32px rgba(115,226,182,.22);border:1px solid rgba(255,255,255,.2);}
.item-loader p,.label,.stat-box span{color:var(--premium-muted)!important;}
input,select,textarea{background:#0f1728!important;color:var(--premium-text)!important;border-color:var(--premium-line)!important;}
.loader,.spinner{border-color:rgba(115,226,182,.18);border-top-color:var(--premium-cyan);}

@media (min-width:700px){body:before{background:linear-gradient(120deg,rgba(115,226,182,.04),transparent 38%);}}

/* ===== Responsive viewport fit ===== */
html{width:100%;min-height:100%;overflow-x:hidden;background:#081b16;}
body{width:100%;min-height:100%;min-height:100dvh;overflow-x:hidden;display:flex;align-items:stretch;justify-content:center;}
.user-page{width:100%;max-width:440px;min-height:calc(100dvh - 12px);height:calc(100dvh - 12px);margin-top:12px;flex:0 1 440px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-x:none;padding-bottom:calc(76px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;}
@media (max-width:439px){
  body{display:block;}
  .user-page{width:100%;max-width:none;min-height:calc(100svh - 12px);min-height:calc(100dvh - 12px);height:calc(100svh - 12px);height:calc(100dvh - 12px);margin-top:12px;}
}
@media (min-width:440px){
  .user-page{border-left:1px solid rgba(148,163,184,.08);border-right:1px solid rgba(148,163,184,.08);}
}

/* ===== Mobile safe-area protection ===== */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
html,body{min-height:100%;}
body{min-height:100dvh;padding:0;}
body .user-page{
  min-height:100dvh;
  height:100dvh;
  margin-top:0;
  padding-top:var(--safe-top)!important;
  padding-right:var(--safe-right);
  padding-bottom:calc(120px + var(--safe-bottom))!important;
  padding-left:var(--safe-left);
}
body .user-page .page-bar{top:var(--safe-top);}
body .chat-icon{bottom:calc(96px + var(--safe-bottom));}

/* Tejoracoin emerald and brushed gold */
:root{--premium-bg:#081b16;--premium-surface:#102b23;--premium-text:#f4f8f1;--premium-cyan:#73e2b6;--premium-blue:#27aa7c;--premium-violet:#d8bb76;--premium-gradient:linear-gradient(130deg,#14583e,#27aa7c 65%,#d8bb76)}
body{background:radial-gradient(ellipse at top,#214735,#081b16 65%)!important}.user-page{background:#0b211a!important}nav h3::after{content:" / WALLET"!important;color:#d8bb76!important}.brand-mark{background:#d8bb76!important;color:#102b23!important}.brand-mark{font-size:0!important}.brand-mark:after{content:"T";font-size:20px}button:focus-visible,a:focus-visible{outline:2px solid #d8bb76!important;outline-offset:3px}.slider-container{margin-top:14px}