:root{
--primary:#5B1025;
--primary-dark:#3b0a18;
--gold:#D4AF37;
--bg:#f5f7fb;
--card:#fff;
--text:#1f2937;
--muted:#6b7280;
--border:#e8ecf2;
--success:#16a34a;
--danger:#dc2626;
--radius:18px;
--shadow:0 15px 35px rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{text-decoration:none;color:inherit}
.dtms-wrapper{

position:relative;

min-height:100vh;

}
.dtms-sidebar{

width:280px;

background:linear-gradient(180deg,var(--primary),#2d0a16);

color:#fff;

padding:24px;

position:fixed;

left:0;
top:0;
bottom:0;

overflow-y:auto;

z-index:99999;

}
.dtms-logo{font-size:26px;font-weight:700;color:var(--gold);margin-bottom:6px}
.dtms-tag{font-size:13px;opacity:.8;margin-bottom:30px}
.dtms-menu a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;margin-bottom:8px;transition:.25s}
.dtms-menu a:hover,.dtms-menu a.active{background:rgba(212,175,55,.18);color:#fff;transform:translateX(4px)}
.dtms-main{

margin-left:280px;

flex:1;

padding:28px;

position:relative;

z-index:1;

}
.dtms-header{background:#fff;border-radius:18px;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);margin-bottom:24px}
.dtms-title h1{font-size:28px}
.dtms-sub{color:var(--muted);font-size:14px}
.dtms-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

margin-bottom:30px;

}

@media(max-width:1200px){

.dtms-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.dtms-grid{

grid-template-columns:1fr;

gap:18px;

}

}
.stat-card{

min-height:240px;

display:flex;

flex-direction:column;

justify-content:space-between;

}
.dtms-card{background:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow);transition:.25s}
.dtms-card:hover{transform:translateY(-4px)}
.kpi{

font-size:30px;

font-weight:700;

color:var(--primary);

margin-top:8px;

word-break:break-word;

overflow-wrap:anywhere;

line-height:1.2;

}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;background:#f7ecd0;color:#8b6914;font-weight:700;font-size:12px}
button,.btn{background:var(--primary);color:#fff;border:none;border-radius:12px;padding:12px 18px;cursor:pointer}
button:hover,.btn:hover{background:var(--primary-dark)}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
th{background:var(--primary);color:#fff;text-align:left;padding:14px}
td{padding:14px;border-bottom:1px solid var(--border)}
@media(max-width:991px){
.dtms-sidebar{transform:translateX(-100%);transition:.3s}
.dtms-sidebar.open{transform:translateX(0)}
.dtms-main{margin-left:0;padding:18px}
.dtms-header{padding:16px}
}
/* ===========================
   HERO DASHBOARD
=========================== */

.dtms-dashboard{

display:flex;
flex-direction:column;
gap:25px;

}

.dtms-hero{

display:flex;
justify-content:space-between;
align-items:center;

padding:50px;

border-radius:28px;

background:
linear-gradient(135deg,#4B1020,#7A1737,#A12A52);

color:#fff;

position:relative;

overflow:hidden;

box-shadow:
0 25px 60px rgba(91,16,37,.25);

min-height:320px;

}

.dtms-hero-left{

width:60%;
z-index:2;

}

.dtms-hero-right{

width:40%;

display:flex;
justify-content:center;
align-items:center;

z-index:2;

}

.dtms-hero::before{

content:"";

position:absolute;

width:420px;
height:420px;

right:-120px;
top:-100px;

background:

radial-gradient(

rgba(255,215,120,.18),

transparent 70%

);

border-radius:50%;

}

.dtms-hero::after{

content:"";

position:absolute;

left:-120px;
bottom:-120px;

width:320px;
height:320px;

background:

radial-gradient(

rgba(255,255,255,.08),

transparent 70%

);

border-radius:50%;

}

.dtms-hero h1{

font-size:46px;

font-weight:800;

margin:20px 0;

line-height:1.2;

}

.dtms-hero p{

font-size:18px;

line-height:32px;

max-width:620px;

opacity:.95;

margin-bottom:30px;

}
.hero-item{

display:inline-flex;

flex-direction:column;

justify-content:center;

background:rgba(255,255,255,.12);

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,.15);

border-radius:18px;

padding:18px 24px;

min-width:190px;

margin-right:16px;

transition:.30s;

}

.hero-item:hover{

transform:translateY(-6px);

background:rgba(255,255,255,.18);

box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.hero-number{

font-size:24px;

font-weight:800;

margin-bottom:6px;

}

.hero-item small{

font-size:13px;

opacity:.85;

letter-spacing:.5px;

text-transform:uppercase;

}

.dtms-hero .badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

background:rgba(255,255,255,.15);

color:#fff;

border:1px solid rgba(255,255,255,.18);

font-size:13px;

font-weight:700;

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

}

.dtms-hero-right img{

max-width:320px;

filter:drop-shadow(0 30px 45px rgba(0,0,0,.35));

animation:heroFloat 5s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@media(max-width:991px){

.dtms-hero{

flex-direction:column;

text-align:center;

padding:35px 25px;

}

.dtms-hero-left{

width:100%;

}

.dtms-hero-right{

width:100%;

margin-top:30px;

}

.dtms-hero h1{

font-size:34px;

}

.dtms-hero p{

font-size:16px;

line-height:28px;

margin:auto auto 25px;

}

.hero-item{

display:block;

width:100%;

margin:12px 0;

}

.dtms-hero-right img{

max-width:220px;

}

}
@media(max-width:768px){

.dtms-grid{

grid-template-columns:1fr;

}

}
.dtms-toggle{

display:none;

width:46px;

height:46px;

border:none;

border-radius:12px;

background:#5B1025;

color:#fff;

font-size:22px;

cursor:pointer;

margin-right:15px;

}

@media(max-width:991px){

.dtms-sidebar{

left:0;
top:0;
bottom:0;

transform:translateX(-100%);

transition:transform .35s ease;

z-index:99999;

}

.dtms-sidebar.open{

transform:translateX(0);

}

.dtms-main{

margin-left:0;

padding:18px;

position:relative;

z-index:1;

}

.dtms-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

background:#fff;

border-radius:18px;

padding:18px 24px;

box-shadow:var(--shadow);

margin-bottom:24px;

position:relative;

z-index:100;

}

}
@media(max-width:991px){

.dtms-header{

padding:14px 16px;

}

.dtms-title h1{

font-size:22px;

}

.dtms-toggle{

display:flex!important;

align-items:center;

justify-content:center;

flex-shrink:0;

position:relative;

z-index:999999;

}

}
.dtms-overlay{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background:rgba(0,0,0,.45);

backdrop-filter:blur(2px);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:99998;

}

.dtms-overlay.show{

opacity:1;

visibility:visible;

}
.dtms-overlay{
    pointer-events:none;
}

.dtms-overlay.show{
    pointer-events:auto;
}
/*=========================================
  KPI ENTERPRISE
=========================================*/

.stat-card{

position:relative;

overflow:hidden;

border-radius:22px;

padding:28px;

background:#fff;

transition:.30s;

box-shadow:
0 15px 40px rgba(15,23,42,.08);

border:1px solid #eef2f7;

}

.stat-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 55px rgba(91,16,37,.18);

}

.stat-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:5px;

background:
linear-gradient(
90deg,
#5B1025,
#D4AF37
);

}

.stat-icon{

width:64px;
height:64px;

border-radius:18px;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;

background:
linear-gradient(
135deg,
rgba(91,16,37,.08),
rgba(212,175,55,.20)
);

margin-bottom:20px;

}

.stat-title{

font-size:14px;

font-weight:600;

color:#6b7280;

margin-bottom:10px;

text-transform:uppercase;

letter-spacing:.8px;

}

.stat-value{

font-size:clamp(28px,2vw,38px);

font-weight:800;

color:#5B1025;

line-height:1.1;

margin-bottom:10px;

word-break:break-word;

}
.currency{

font-size:.55em;

margin-right:4px;

font-weight:700;

opacity:.9;

vertical-align:top;

}
.stat-footer{

font-size:14px;

color:#7b8794;

line-height:22px;

}

@media(max-width:768px){

.stat-card{

padding:22px;

}

.stat-icon{

width:56px;
height:56px;

font-size:24px;

}

.stat-value{

font-size:30px;

}

.stat-title{

font-size:13px;

}

.stat-footer{

font-size:13px;

}

}
.reward-progress{

width:100%;

height:10px;

background:#eceff3;

border-radius:20px;

overflow:hidden;

margin:18px 0;

}

.reward-progress-bar{

height:100%;

background:linear-gradient(
90deg,
#5B1025,
#D4AF37
);

border-radius:20px;

transition:width .5s ease;

}
/*==================================================
CAREER PANEL
==================================================*/

.career-panel{

display:grid;

grid-template-columns:1.4fr .9fr;

gap:30px;

margin-top:30px;

margin-bottom:30px;

}

.career-left,
.career-right{

background:#fff;

border-radius:24px;

padding:30px;

box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.career-title{

font-size:24px;

font-weight:800;

color:#5B1025;

margin-bottom:35px;

}

.career-timeline{

position:relative;

}

.career-item{

display:flex;

align-items:center;

gap:20px;

}

.career-line{

width:3px;

height:45px;

background:#E5E7EB;

margin-left:17px;

margin-top:4px;

margin-bottom:4px;

}

.career-dot{

width:36px;

height:36px;

border-radius:50%;

background:#5B1025;

box-shadow:0 0 0 8px rgba(91,16,37,.08);

flex-shrink:0;

}

.career-dot.gold{

background:#D4AF37;

box-shadow:0 0 0 8px rgba(212,175,55,.15);

}

.career-dot.green{

background:#16A34A;

box-shadow:0 0 0 8px rgba(22,163,74,.15);

}

.career-content h3{

margin:0;

font-size:20px;

font-weight:800;

color:#111827;

}

.career-content small{

display:block;

margin-top:4px;

font-size:14px;

color:#6B7280;

}

.career-item.active h3{

color:#5B1025;

}

.career-box{

background:#FAFBFD;

border:1px solid #EEF2F7;

border-radius:20px;

padding:24px;

margin-bottom:20px;

}

.career-box:last-child{

margin-bottom:0;

}

.career-box-title{

font-size:18px;

font-weight:700;

margin-bottom:18px;

color:#5B1025;

}

.career-progress{

height:14px;

background:#ECEFF4;

border-radius:30px;

overflow:hidden;

margin-bottom:15px;

}

.career-progress-bar{

height:100%;

background:linear-gradient(90deg,#5B1025,#D4AF37);

border-radius:30px;

transition:.4s;

}

.career-progress-text{

font-size:15px;

font-weight:700;

color:#374151;

}

.career-bonus{

list-style:none;

padding:0;

margin:0;

}

.career-bonus li{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

border-bottom:1px solid #ECECEC;

}

.career-bonus li:last-child{

border-bottom:none;

}

.career-bonus strong{

font-size:15px;

}

.career-bonus span{

font-weight:800;

color:#5B1025;

font-size:16px;

}

@media(max-width:991px){

.career-panel{

grid-template-columns:1fr;

}

.career-left,
.career-right{

padding:22px;

}

.career-title{

font-size:20px;

margin-bottom:25px;

}

.career-content h3{

font-size:18px;

}

}
.career-status{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

padding:15px 18px;

background:#F8FAFC;

border-radius:16px;

border:1px solid #EEF2F7;

}

.career-status span{

background:linear-gradient(135deg,#5B1025,#7D1838);

color:#fff;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

letter-spacing:.5px;

}
/*=========================================
REWARD HERO
=========================================*/

.reward-panel{

margin-top:30px;

padding:35px;

border-radius:28px;

background:
linear-gradient(
135deg,
#5B1025 0%,
#7B1838 55%,
#A3264B 100%
);

color:#fff;

position:relative;

overflow:hidden;

box-shadow:
0 25px 60px rgba(91,16,37,.22);

}

.reward-panel::before{

content:"";

position:absolute;

right:-120px;
top:-120px;

width:320px;
height:320px;

border-radius:50%;

background:

radial-gradient(

rgba(255,255,255,.12),

transparent 70%

);

}

.reward-panel::after{

content:"";

position:absolute;

left:-120px;
bottom:-120px;

width:260px;
height:260px;

border-radius:50%;

background:

radial-gradient(

rgba(212,175,55,.20),

transparent 70%

);

}

.reward-header{

position:relative;

z-index:2;

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

gap:25px;

}

.reward-header h2{

font-size:32px;

font-weight:800;

margin-bottom:10px;

}

.reward-header p{

font-size:16px;

opacity:.92;

line-height:28px;

max-width:620px;

}

.reward-price{

background:rgba(255,255,255,.15);

backdrop-filter:blur(12px);

padding:18px 28px;

border-radius:18px;

font-size:30px;

font-weight:800;

border:1px solid rgba(255,255,255,.18);

white-space:nowrap;

}

.reward-big-progress{

position:relative;

z-index:2;

height:20px;

border-radius:50px;

background:rgba(255,255,255,.18);

overflow:hidden;

margin-bottom:25px;

}

.reward-big-bar{

height:100%;

border-radius:50px;

background:

linear-gradient(
90deg,
#FFD54F,
#FFF3B0
);

transition:width .6s ease;

}

.reward-info{

position:relative;

z-index:2;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:600;

gap:20px;

}

.reward-info strong{

font-size:22px;

color:#FFD54F;

}
@media(max-width:768px){

.reward-panel{

padding:24px;

}

.reward-header{

flex-direction:column;

align-items:flex-start;

}

.reward-header h2{

font-size:24px;

}

.reward-header p{

font-size:15px;

line-height:25px;

}

.reward-price{

font-size:24px;

width:100%;

text-align:center;

}

.reward-info{

flex-direction:column;

align-items:flex-start;

font-size:16px;

gap:10px;

}

}
/*=========================================
REWARD ACHIEVEMENT
=========================================*/

.reward-achievement{

display:flex;

flex-direction:column;

align-items:flex-end;

gap:8px;

position:relative;

z-index:2;

}

.reward-badge{

background:#FFD54F;

color:#5B1025;

padding:8px 16px;

border-radius:999px;

font-size:12px;

font-weight:800;

letter-spacing:1px;

}

.reward-achievement small{

opacity:.85;

font-size:13px;

}

.reward-status{

margin-top:28px;

position:relative;

z-index:2;

}

.reward-status span{

display:inline-block;

padding:12px 18px;

border-radius:14px;

font-weight:700;

font-size:14px;

}

.reward-normal{

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.18);

}

.reward-warning{

background:#FFD54F;

color:#5B1025;

}

.reward-success{

background:#16A34A;

color:#fff;

}

@media(max-width:768px){

.reward-achievement{

align-items:flex-start;

margin-top:20px;

}

.reward-status{

margin-top:20px;

}

}
/*=========================================
QUICK ACTION
=========================================*/

.quick-action-panel{

margin-top:35px;

}

.section-title{

font-size:24px;

font-weight:800;

color:#5B1025;

margin-bottom:22px;

}

.quick-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

}

.quick-card{

display:block;

background:#fff;

padding:28px;

border-radius:22px;

text-align:center;

border:1px solid #EEF2F7;

box-shadow:0 15px 40px rgba(0,0,0,.06);

transition:.30s;

}

.quick-card:hover{

transform:translateY(-8px);

box-shadow:0 22px 50px rgba(91,16,37,.15);

}

.quick-icon{

width:70px;

height:70px;

margin:auto;

margin-bottom:18px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

font-size:32px;

background:linear-gradient(
135deg,
rgba(91,16,37,.08),
rgba(212,175,55,.20)
);

}

.quick-title{

font-size:18px;

font-weight:700;

color:#111827;

margin-bottom:8px;

}

.quick-desc{

font-size:14px;

color:#6B7280;

line-height:22px;

}

@media(max-width:1200px){

.quick-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.quick-grid{

grid-template-columns:1fr;

}

}
/*=========================================
ACTIVITY & INSIGHT
=========================================*/

.dashboard-bottom{

display:grid;

grid-template-columns:1.4fr .9fr;

gap:24px;

margin-top:35px;

margin-bottom:40px;

}

.activity-card,
.insight-card{

background:#fff;

border-radius:24px;

padding:30px;

box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.activity-card h2,
.insight-card h2{

font-size:24px;

font-weight:800;

color:#5B1025;

margin-bottom:25px;

}

.activity-list{

list-style:none;

margin:0;

padding:0;

}

.activity-list li{

display:flex;

align-items:center;

gap:15px;

padding:16px 0;

border-bottom:1px solid #EEF2F7;

font-size:15px;

}

.activity-list li:last-child{

border-bottom:none;

}

.activity-list small{

margin-left:auto;

color:#9CA3AF;

font-size:13px;

}

.activity-dot{

width:14px;

height:14px;

border-radius:50%;

flex-shrink:0;

}

.activity-dot.success{

background:#16A34A;

}

.activity-dot.gold{

background:#D4AF37;

}

.activity-dot.blue{

background:#2563EB;

}

.activity-dot.maroon{

background:#5B1025;

}

.insight-item{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:18px;

margin-bottom:10px;

font-size:16px;

}

.mini-progress{

height:10px;

background:#ECEFF4;

border-radius:30px;

overflow:hidden;

margin-bottom:20px;

}

.mini-progress div{

height:100%;

background:linear-gradient(90deg,#5B1025,#D4AF37);

border-radius:30px;

}

.insight-message{

margin-top:20px;

padding:18px;

background:#F8FAFC;

border-radius:16px;

line-height:28px;

font-size:15px;

border-left:5px solid #D4AF37;

}

@media(max-width:991px){

.dashboard-bottom{

grid-template-columns:1fr;

}

}
/*==================================================
DTMS DELIMA TOUR OVERRIDE v1
Copy di PALING BAWAH style.css
==================================================*/

:root{

--primary:#0E8A46;
--primary-dark:#066837;

--gold:#F7941D;

--bg:#F5FBF6;

--card:#FFFFFF;

--text:#183153;

--muted:#6B7280;

--border:#E6F1E9;

--success:#13A354;

--danger:#E53935;

--shadow:0 16px 40px rgba(0,0,0,.08);

}

/*==========================
BODY
==========================*/

body{

background:var(--bg)!important;

}

/*==========================
SIDEBAR
==========================*/

.dtms-sidebar{

background:

linear-gradient(
180deg,
#0E8A46,
#066837
)!important;

}

.dtms-logo{

color:#fff!important;

}

.dtms-tag{

color:rgba(255,255,255,.82)!important;

}

.dtms-menu a{

color:#fff!important;

}

.dtms-menu a.active,
.dtms-menu a:hover{

background:

rgba(255,255,255,.18)!important;

backdrop-filter:blur(8px);

}

/*==========================
HEADER
==========================*/

.dtms-header{

border-top:5px solid #F7941D;

}

/*==========================
BADGE
==========================*/

.badge{

background:#FFF4E4!important;

color:#C96D00!important;

}

/*==========================
CARD
==========================*/

.dtms-card,
.stat-card,
.quick-card,
.activity-card,
.insight-card,
.career-left,
.career-right{

background:#fff!important;

border:1px solid #E7EFEA!important;

}

/*==========================
TITLE
==========================*/

.section-title,
.career-title,
.activity-card h2,
.insight-card h2,
.reward-header h2{

color:#0E8A46!important;

}
/*==================================================
DTMS DELIMA TOUR OVERRIDE v2
==================================================*/

/* HERO */

.dtms-hero{

background:
linear-gradient(
135deg,
#0E8A46 0%,
#14A44D 100%
)!important;

box-shadow:
0 20px 50px rgba(14,138,70,.20);

}

.dtms-hero h1,
.dtms-hero p{

color:#fff!important;

}

.dtms-hero .badge{

background:#F7941D!important;

color:#fff!important;

}

.hero-item{

background:rgba(255,255,255,.15)!important;

border:1px solid rgba(255,255,255,.18);

backdrop-filter:blur(8px);

}

/* KPI */

.stat-card::before{

background:
linear-gradient(
90deg,
#0E8A46,
#F7941D
)!important;

}

.stat-value{

color:#0E8A46!important;

}

.stat-icon{

background:
linear-gradient(
135deg,
rgba(14,138,70,.10),
rgba(247,148,29,.20)
)!important;

}

/* CAREER */

.career-progress-bar{

background:
linear-gradient(
90deg,
#0E8A46,
#F7941D
)!important;

}

.career-dot{

background:#0E8A46!important;

}

.career-dot.gold{

background:#F7941D!important;

}

.career-dot.green{

background:#13A354!important;

}

.career-status span{

background:
linear-gradient(
135deg,
#0E8A46,
#13A354
)!important;

}

/* REWARD */

.reward-panel{

background:
linear-gradient(
135deg,
#0E8A46,
#14A44D
)!important;

}

.reward-price{

background:
rgba(255,255,255,.15)!important;

border:1px solid rgba(255,255,255,.20);

color:#fff!important;

}

.reward-badge{

background:#F7941D!important;

color:#fff!important;

}

.reward-big-bar{

background:
linear-gradient(
90deg,
#FFD54F,
#F7941D
)!important;

}

.reward-status{

color:#fff;

}

/* QUICK ACTION */

.quick-card{

transition:.30s;

}

.quick-card:hover{

transform:translateY(-8px);

border-color:#0E8A46!important;

box-shadow:
0 20px 45px rgba(14,138,70,.18);

}

.quick-icon{

background:
linear-gradient(
135deg,
#0E8A46,
#13A354
)!important;

color:#fff;

}

/* BUTTON */

button,
.btn{

background:#0E8A46!important;

}

button:hover,
.btn:hover{

background:#066837!important;

}

/* LINK */

a:hover{

color:#0E8A46;

}

/* PROGRESS */

.reward-progress-bar,
.mini-progress div{

background:
linear-gradient(
90deg,
#0E8A46,
#F7941D
)!important;

}

/* TABLE */

th{

background:#0E8A46!important;

}

/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#0E8A46;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#F2F7F3;

}
/*=========================================
PREMIUM SILVER SCROLLBAR
=========================================*/

/* Chrome, Edge, Opera */

::-webkit-scrollbar{

width:12px;
height:12px;

}

::-webkit-scrollbar-track{

background:#ECECEC;

border-radius:20px;

}

::-webkit-scrollbar-thumb{

background:
linear-gradient(
180deg,
#F8F8F8 0%,
#D9D9D9 25%,
#BDBDBD 50%,
#D9D9D9 75%,
#F8F8F8 100%
);

border-radius:20px;

border:2px solid #ECECEC;

box-shadow:
inset 0 0 3px rgba(255,255,255,.8),
0 0 4px rgba(0,0,0,.12);

}

::-webkit-scrollbar-thumb:hover{

background:
linear-gradient(
180deg,
#FFFFFF,
#CFCFCF,
#AFAFAF,
#CFCFCF,
#FFFFFF
);

}

::-webkit-scrollbar-corner{

background:#ECECEC;

}

/* Firefox */

*{

scrollbar-width:thin;

scrollbar-color:#BDBDBD #ECECEC;

}
/*=========================================
TEXT OVERRIDE DELIMA
=========================================*/

/* Reward Hero */

.reward-panel h2,
.reward-panel h3,
.reward-panel p,
.reward-panel strong,
.reward-panel span,
.reward-panel small{

color:#FFFFFF !important;

}

/* Reward Price */

.reward-price{

color:#FFFFFF !important;

font-weight:800;

}

/* Progress Reward */

.reward-info{

color:#FFFFFF !important;

}

.reward-info strong{

color:#FFD54F !important;

}

/* Sidebar Reward Target */

.dtms-sidebar .dtms-card{

background:rgba(255,255,255,.15)!important;

border:1px solid rgba(255,255,255,.18)!important;

backdrop-filter:blur(10px);

}

.dtms-sidebar .dtms-card div{

color:#FFFFFF!important;

}

.dtms-sidebar .dtms-card div:first-child{

color:#FFD54F!important;

font-weight:700;

}
/*=========================================
SIDEBAR PREMIUM CARD
=========================================*/

.dtms-sidebar .dtms-card{

background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
rgba(255,255,255,.08)
)!important;

border:1px solid rgba(255,255,255,.20)!important;

backdrop-filter:blur(12px);

border-radius:20px;

padding:20px;

box-shadow:none!important;

}

.dtms-sidebar .dtms-card:hover{

background:
linear-gradient(
135deg,
rgba(255,255,255,.22),
rgba(255,255,255,.12)
)!important;

}

.dtms-sidebar .dtms-card div{

color:#fff!important;

}

.dtms-sidebar .dtms-card div:first-child{

color:#FFD54F!important;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:10px;

}

.dtms-sidebar .dtms-card div:nth-child(2){

font-size:34px;

font-weight:800;

line-height:1;

margin-bottom:12px;

color:#fff!important;

}

.dtms-sidebar .dtms-card div:last-child{

font-size:14px;

line-height:22px;

opacity:.95;

}
/*=========================================
SIDEBAR PROGRESS
=========================================*/

.sidebar-progress{

height:8px;

background:rgba(255,255,255,.20);

border-radius:20px;

overflow:hidden;

margin:15px 0;

}

.sidebar-progress-bar{

height:100%;

background:
linear-gradient(
90deg,
#FFD54F,
#F7941D
);

border-radius:20px;

}
/*==================================================
REFERRAL CENTER
==================================================*/

.referral-panel{

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

margin:30px 0;

padding:26px 30px;

background:#fff;

border-radius:24px;

border:1px solid #E8F1EB;

box-shadow:0 18px 45px rgba(0,0,0,.06);

}

.referral-left{

flex:1;

min-width:0;

}

.referral-title{

font-size:22px;

font-weight:800;

color:#0E8A46;

margin-bottom:15px;

}

.referral-url{

padding:16px 18px;

background:#F7FAF8;

border:2px dashed #C8DCCD;

border-radius:16px;

font-size:15px;

font-weight:600;

color:#374151;

word-break:break-all;

}

.referral-right{

display:flex;

gap:12px;

flex-wrap:wrap;

justify-content:flex-end;

}

.btn-copy,
.btn-wa,
.btn-qr{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

padding:14px 20px;

border:none;

border-radius:14px;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:.25s;

text-decoration:none;

}

.btn-copy{

background:#0E8A46;

color:#fff;

}

.btn-copy:hover{

background:#066837;

transform:translateY(-2px);

}

.btn-wa{

background:#25D366;

color:#fff;

}

.btn-wa:hover{

background:#1EBE5A;

transform:translateY(-2px);

}

.btn-qr{

background:#F7941D;

color:#fff;

}

.btn-qr:hover{

background:#E78610;

transform:translateY(-2px);

}

@media(max-width:991px){

.referral-panel{

flex-direction:column;

align-items:stretch;

padding:22px;

}

.referral-right{

justify-content:stretch;

}

.btn-copy,
.btn-wa,
.btn-qr{

width:100%;

}

}
/*=========================================
POSTER BUTTON
=========================================*/

.btn-poster{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:2px;

background:linear-gradient(
135deg,
#F7941D,
#FFB74D
);

color:#fff;

}

.btn-poster small{

font-size:11px;

opacity:.85;

font-weight:600;

}

.btn-poster:disabled{

opacity:.85;

cursor:not-allowed;

}
/* ======================================================
   DTMS FOOTER
====================================================== */

.dtms-footer{

    margin-top:40px;

    padding:18px 25px;

    background:#fff;

    border-top:1px solid #e5e7eb;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    color:#64748b;

    font-size:13px;

}

.dtms-footer strong{

    color:#7a1f1f;

    display:block;

    font-size:15px;

}

.dtms-footer span{

    display:block;

    margin-top:3px;

}

@media(max-width:768px){

.dtms-footer{

    text-align:center;

    justify-content:center;

}

}
.dtms-logout{

    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:8px;

    color:#fff;
    text-decoration:none;

    background:rgba(255,255,255,.10);

}

.dtms-logout:hover{

    background:rgba(255,255,255,.18);

}
/* =========================================
REGISTER
=========================================*/

.dtms-register-wrapper{

display:flex;

justify-content:center;

align-items:center;

padding:60px 20px;

background:#f5f7fb;

min-height:100vh;

}

.dtms-register-card{

width:100%;

max-width:520px;

background:#fff;

border-radius:24px;

padding:40px;

box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.dtms-register-logo{

text-align:center;

margin-bottom:20px;

}

.dtms-register-logo img{

max-width:220px;

height:auto;

}

.dtms-register-card h2{

text-align:center;

margin-bottom:10px;

font-size:28px;

color:#0E8A46;

}

.dtms-subtitle{

text-align:center;

color:#64748b;

margin-bottom:30px;

line-height:1.6;

}

.dtms-register-card label{

display:block;

margin-top:18px;

margin-bottom:8px;

font-weight:600;

}

.dtms-register-card input{

width:100%;

padding:14px 16px;

border:1px solid #dbe3eb;

border-radius:12px;

font-size:15px;

box-sizing:border-box;

}

.dtms-register-card input:focus{

outline:none;

border-color:#0E8A46;

box-shadow:0 0 0 3px rgba(14,138,70,.12);

}

.dtms-register-card button{

width:100%;

margin-top:30px;

padding:16px;

background:#0E8A46;

color:#fff;

border:none;

border-radius:14px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.dtms-register-card button:hover{

transform:translateY(-2px);

background:#0a7138;

}

.dtms-login-link{

margin-top:25px;

text-align:center;

font-size:14px;

color:#64748b;

}

.dtms-login-link a{

color:#0E8A46;

font-weight:700;

text-decoration:none;

}
/* ==========================================
LOGIN ALERT
==========================================*/

.dtms-success{

background:#ECFDF3;

border:1px solid #A7F3D0;

color:#166534;

padding:14px 16px;

border-radius:12px;

margin-bottom:20px;

font-size:14px;

}

.dtms-error{

background:#FEF2F2;

border:1px solid #FECACA;

color:#B91C1C;

padding:14px 16px;

border-radius:12px;

margin-bottom:20px;

font-size:14px;

}
.dtms-notice{padding:12px 16px;margin:12px 0;border-radius:8px;font-weight:600}.dtms-success{background:#e9f8ef;color:#0a7a3b;border:1px solid #b8e6c8}