@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@600;700;800&display=swap');

:root {
  --bg:      #050507;
  --bg2:     #0c0c10;
  --bg3:     #12121a;
  --bg4:     #1a1a26;
  --bg5:     #22223a;
  --border:  rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.12);
  --accent:  #f97316;
  --accent2: #fb923c;
  --accentd: #c2410c;
  --green:   #34d399;
  --red:     #f87171;
  --orange:  #fbbf24;
  --blue:    #60a5fa;
  --text:    #f0f0ff;
  --text2:   #9090b0;
  --text3:   #55556a;
  --r:       14px;
  --rs:      9px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;flex-direction:column;
  font-size:15px;line-height:1.6;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(249,115,22,0.08), transparent),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(251,146,60,0.04), transparent);
}

body,p,h1,h2,h3,h4,h5,span,li,td,th{cursor:default!important;user-select:none!important;-webkit-user-select:none!important;}
a,button{cursor:pointer!important;}
input,textarea,select{cursor:text!important;user-select:text!important;-webkit-user-select:text!important;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px;}

/* NAVBAR */
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;height:60px;
  background:rgba(5,5,7,0.9);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;
}
.logo{
  font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:800;
  color:var(--text);text-decoration:none;letter-spacing:-0.5px;
  display:flex;align-items:center;gap:0.6rem;
}
.logo-icon{
  width:30px;height:30px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.logo span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav-links{display:flex;align-items:center;gap:0.3rem;}
.nav-links a{color:var(--text2);text-decoration:none;font-size:0.875rem;font-weight:500;padding:0.4rem 0.85rem;border-radius:var(--rs);transition:all .15s;}
.nav-links a:hover{color:var(--text);background:var(--bg4);}
.nav-admin{color:var(--orange)!important;}
.nav-balance{background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.18);padding:0.35rem 0.9rem;border-radius:20px;font-size:0.82rem;font-weight:600;color:var(--green)!important;}

/* MAIN */
.main-content{flex:1;padding:2rem;max-width:1100px;margin:0 auto;width:100%;}

/* ALERTS */
.alert{padding:0.85rem 1.1rem;border-radius:var(--rs);margin-bottom:1.5rem;font-size:0.875rem;font-weight:500;border:1px solid transparent;}
.alert-success{background:rgba(52,211,153,0.08);border-color:rgba(52,211,153,0.2);color:var(--green);}
.alert-error  {background:rgba(248,113,113,0.08);border-color:rgba(248,113,113,0.2);color:var(--red);}
.alert-warning{background:rgba(251,191,36,0.08);border-color:rgba(251,191,36,0.2);color:var(--orange);}
.alert-info   {background:rgba(249,115,22,0.08);border-color:rgba(249,115,22,0.2);color:var(--accent2);}

/* CARD */
.card{background:rgba(12,12,16,0.85);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(249,115,22,0.03) 0%,transparent 60%);pointer-events:none;}
.card-title{font-family:'Space Grotesk',sans-serif;font-size:0.95rem;font-weight:700;margin-bottom:1.25rem;color:var(--text);display:flex;align-items:center;gap:0.5rem;}

/* FORMS */
.form-group{margin-bottom:1rem;}
.form-group label{display:block;margin-bottom:0.4rem;font-size:0.8rem;color:var(--text2);font-weight:500;}
.form-group input,.form-group textarea,.form-group select{
  width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);
  color:var(--text);padding:0.7rem 1rem;font-size:0.875rem;font-family:'Inter',monospace;
  transition:border-color .2s,box-shadow .2s;outline:none;
  user-select:text!important;-webkit-user-select:text!important;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,0.1);}
.form-group input.mono{font-family:'Courier New',monospace;letter-spacing:0.5px;}
.form-group .hint{font-size:0.75rem;color:var(--text3);margin-top:0.3rem;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.6rem 1.3rem;border-radius:var(--rs);font-size:0.875rem;font-weight:600;font-family:inherit;cursor:pointer!important;border:none;transition:all .18s;text-decoration:none;white-space:nowrap;position:relative;z-index:5;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accentd));color:white;box-shadow:0 4px 15px rgba(249,115,22,0.25);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(249,115,22,0.35);}
.btn-success{background:linear-gradient(135deg,#34d399,#059669);color:white;box-shadow:0 4px 15px rgba(52,211,153,0.2);}
.btn-success:hover{transform:translateY(-1px);}
.btn-danger{background:linear-gradient(135deg,#f87171,#dc2626);color:white;}
.btn-danger:hover{transform:translateY(-1px);}
.btn-ghost{background:var(--bg3);color:var(--text2);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--border2);background:var(--bg4);}
.btn-blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;}
.btn-sm{padding:0.32rem 0.75rem;font-size:0.78rem;border-radius:7px;}
.btn-full{width:100%;}
.btn-lg{padding:0.8rem 1.8rem;font-size:1rem;}

/* TABLES */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:0.875rem;}
th{text-align:left;padding:0.65rem 1rem;border-bottom:1px solid var(--border);color:var(--text3);font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;}
td{padding:0.8rem 1rem;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--text);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,0.015);}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:0.2rem;padding:0.2rem 0.6rem;border-radius:20px;font-size:0.72rem;font-weight:700;letter-spacing:0.3px;}
.badge-mtk    {background:rgba(52,211,153,0.12);color:var(--green);border:1px solid rgba(52,211,153,0.25);}
.badge-qc     {background:rgba(96,165,250,0.12);color:var(--blue);border:1px solid rgba(96,165,250,0.25);}
.badge-seri17 {background:rgba(251,191,36,0.12);color:var(--orange);border:1px solid rgba(251,191,36,0.25);}
.badge-pending   {background:rgba(251,191,36,0.1);color:var(--orange);border:1px solid rgba(251,191,36,0.2);}
.badge-processing{background:rgba(249,115,22,0.1);color:var(--accent2);border:1px solid rgba(249,115,22,0.2);}
.badge-completed {background:rgba(52,211,153,0.1);color:var(--green);border:1px solid rgba(52,211,153,0.2);}
.badge-cancelled {background:rgba(248,113,113,0.1);color:var(--red);border:1px solid rgba(248,113,113,0.2);}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}

/* AUTH */
.auth-wrap{max-width:420px;margin:3rem auto;}
.auth-wrap .card{padding:2.2rem;}
.auth-logo-icon{width:52px;height:52px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 1rem;box-shadow:0 8px 24px rgba(249,115,22,0.3);}
.auth-title{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;text-align:center;margin-bottom:0.3rem;}
.auth-sub{color:var(--text2);font-size:0.875rem;margin-bottom:1.8rem;text-align:center;}
.auth-footer{text-align:center;margin-top:1.2rem;font-size:0.85rem;color:var(--text2);}
.auth-footer a{color:var(--accent2);text-decoration:none;font-weight:500;}

/* STATS */
.stat-card{background:rgba(12,12,16,0.85);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem 1.4rem;position:relative;overflow:hidden;transition:border-color .2s,transform .2s;}
.stat-card:hover{border-color:rgba(249,115,22,0.3);transform:translateY(-2px);}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s;pointer-events:none;}
.stat-card:hover::after{opacity:1;}
.stat-label{font-size:0.72rem;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:0.4rem;}
.stat-value{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:800;color:var(--text);}
.stat-value.green{color:var(--green);}
.stat-value.orange{color:var(--orange);}
.stat-value.blue{color:var(--blue);}

/* PAGE HEADER */
.page-header{margin-bottom:1.8rem;}
.page-header h1{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.3px;}
.page-header p{color:var(--text2);margin-top:0.3rem;font-size:0.875rem;}

/* FOOTER */
.footer{text-align:center;padding:1.5rem;border-top:1px solid var(--border);color:var(--text3);font-size:0.78rem;}

/* STEP INDICATOR */
.step-indicator{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem;}
.step-badge{display:inline-flex;align-items:center;gap:0.3rem;padding:0.3rem 0.75rem;border-radius:20px;font-size:0.78rem;font-weight:700;}
.step-badge.active{background:rgba(249,115,22,0.15);color:var(--accent2);border:1px solid rgba(249,115,22,0.3);}
.step-badge.done{background:rgba(52,211,153,0.12);color:var(--green);border:1px solid rgba(52,211,153,0.2);}
.step-badge.waiting{background:var(--bg3);color:var(--text3);border:1px solid var(--border);}
.step-arrow{color:var(--text3);font-size:0.75rem;}

/* PRICING CARDS */
.price-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:0.9rem 1rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;transition:border-color .15s;}
.price-card:hover{border-color:var(--border2);}
.price-card:last-child{margin-bottom:0;}

/* CONFIRM TABLE */
.confirm-table{width:100%;border-collapse:collapse;font-size:0.875rem;}
.confirm-table td{padding:0.6rem 0.8rem;border-bottom:1px solid rgba(255,255,255,0.04);}
.confirm-table td:first-child{color:var(--text3);width:40%;}
.confirm-table td:last-child{font-weight:600;font-family:'Courier New',monospace;}
.confirm-table tr:last-child td{border-bottom:none;}
.confirm-table .price-row td{background:rgba(249,115,22,0.06);color:var(--accent2)!important;font-size:1rem;}

/* INFO BOX */
.info-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:0.85rem 1rem;font-size:0.83rem;color:var(--text2);line-height:1.7;}

/* ADMIN */
.admin-layout{display:flex;min-height:calc(100vh - 60px);margin:-2rem;}
.admin-sidebar{width:210px;background:rgba(8,8,12,0.98);border-right:1px solid var(--border);padding:1.2rem 0.6rem;display:flex;flex-direction:column;gap:0.1rem;flex-shrink:0;}
.sidebar-section{padding:0.5rem 0.85rem 0.25rem;font-size:0.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-top:0.6rem;}
.sidebar-link{display:flex;align-items:center;gap:0.6rem;padding:0.52rem 0.85rem;border-radius:var(--rs);color:var(--text2);text-decoration:none;font-size:0.855rem;font-weight:500;transition:all .15s;}
.sidebar-link:hover{background:var(--bg4);color:var(--text);}
.sidebar-link.active{background:rgba(249,115,22,0.1);color:var(--accent2);font-weight:600;border:1px solid rgba(249,115,22,0.15);}
.admin-body{flex:1;padding:2rem;overflow-y:auto;min-width:0;}
.notif-badge{margin-left:auto;background:var(--red);color:white;font-size:0.65rem;font-weight:700;padding:0.1rem 0.45rem;border-radius:10px;min-width:18px;text-align:center;}

/* ORDER STEPS */
.order-steps{display:flex;align-items:center;padding:0.5rem 0;}
.step-item{display:flex;flex-direction:column;align-items:center;gap:0.35rem;flex:1;}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.82rem;font-weight:700;border:2px solid var(--bg5);background:var(--bg4);color:var(--text3);transition:all .3s;}
.step-circle.done  {background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 0 12px rgba(249,115,22,0.35);}
.step-circle.finish{background:var(--green);border-color:var(--green);color:white;box-shadow:0 0 12px rgba(52,211,153,0.35);}
.step-label{font-size:0.65rem;color:var(--text3);text-align:center;line-height:1.3;}
.step-label.done{color:var(--text2);}
.step-label.finish{color:var(--green);font-weight:600;}
.step-line{flex:1;height:2px;background:var(--bg5);margin-bottom:1.5rem;transition:background .3s;}
.step-line.done{background:var(--accent);}
.step-line.finish{background:var(--green);}

/* WHATSAPP FLOAT */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:9999;width:52px;height:52px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.35);transition:transform .2s;cursor:pointer!important;}
.wa-float:hover{transform:scale(1.1);}

@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .navbar{padding:0 1rem;}
  .main-content{padding:1rem;}
  .admin-layout{flex-direction:column;margin:-1rem;}
  .admin-sidebar{width:100%;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--border);padding:0.5rem;}
  .admin-body{padding:1rem;}
}