body{margin:0;padding:0;background:#050a18;color:#e2e8f0;font-family:'Segoe UI',sans-serif;}
#activation-screen,#waiting-screen{min-height:100vh;}
#dashboard{display:none;}
.header-glass{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(5,10,24,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(100,116,139,.15);}
.mode-card{background:rgba(15,23,42,.65);backdrop-filter:blur(10px);border:1px solid rgba(51,65,85,.5);border-radius:20px;padding:24px;transition:.3s;}
.mode-card:hover{border-color:rgba(100,116,139,.5);}

/* Terminal Styles */
#terminal, #terminal-m3{background:#020408;color:#22c55e;font-family:'Courier New',monospace;font-size:13px;height:220px;overflow-y:auto;padding:14px;border-radius:12px;border:1px solid rgba(34,197,94,.15);box-shadow:inset 0 0 15px rgba(0,0,0,.8);}
#terminal::-webkit-scrollbar, #terminal-m3::-webkit-scrollbar{width:4px;}
#terminal::-webkit-scrollbar-thumb, #terminal-m3::-webkit-scrollbar-thumb{background:#1e293b;border-radius:10px;}
.terminal-line{margin-bottom:4px;animation:fadeIn .15s;}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}}
@keyframes diagPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.4);}70%{box-shadow:0 0 0 12px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
@keyframes diagPulseYellow{0%{box-shadow:0 0 0 0 rgba(234,179,8,.4);}70%{box-shadow:0 0 0 12px rgba(234,179,8,0);}100%{box-shadow:0 0 0 0 rgba(234,179,8,0);}}
@keyframes diagPulseGreen{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4);}70%{box-shadow:0 0 0 12px rgba(16,185,129,0);}100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}}

/* Intruksi Box */
.intruksi-box{background:linear-gradient(135deg,rgba(59,130,246,.05),rgba(59,130,246,.01));border:1px solid rgba(59,130,246,.15);border-radius:12px;padding:14px;margin-bottom:18px;}
.intruksi-box.purple{background:linear-gradient(135deg,rgba(168,85,247,.05),rgba(168,85,247,.01));border-color:rgba(168,85,247,.15);}
.intruksi-box.red{background:linear-gradient(135deg,rgba(239,68,68,.05),rgba(239,68,68,.01));border-color:rgba(239,68,68,.15);} /* Tambahan */
.intruksi-step{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;color:#94a3b8;font-size:12px;line-height:1.4;}
.intruksi-step:last-child{margin-bottom:0;}
.step-num{min-width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.intruksi-box .step-num{background:rgba(59,130,246,.15);color:#60a5fa;}
.intruksi-box.purple .step-num{background:rgba(168,85,247,.15);color:#c084fc;}
.intruksi-box.red .step-num{background:rgba(239,68,68,.15);color:#f87171;} /* Tambahan */

/* Warning Banner (Mode 3) */
.warning-banner{display:flex;gap:12px;background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.02));border:1px solid rgba(239,68,68,.25);border-radius:12px;padding:14px;}

/* Flash Section Box (Mode 3) */
.flash-section-box{background:rgba(15,23,42,.4);border:1px solid rgba(239,68,68,.2);border-radius:16px;padding:18px;}

/* Diagnosis Card Styles */
.diag-card{border-radius:14px;padding:20px;border:1px solid;position:relative;overflow:hidden;}
.diag-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.diag-card.diag-error{background:linear-gradient(160deg,rgba(127,29,29,.25),rgba(15,23,42,.6));border-color:rgba(239,68,68,.3);animation:diagPulse 2s ease-out 1;}
.diag-card.diag-error::before{background:linear-gradient(90deg,#ef4444,#dc2626,#ef4444);}
.diag-card.diag-warning{background:linear-gradient(160deg,rgba(113,63,18,.25),rgba(15,23,42,.6));border-color:rgba(234,179,8,.3);animation:diagPulseYellow 2s ease-out 1;}
.diag-card.diag-warning::before{background:linear-gradient(90deg,#eab308,#ca8a04,#eab308);}
.diag-card.diag-success{background:linear-gradient(160deg,rgba(6,78,59,.25),rgba(15,23,42,.6));border-color:rgba(16,185,129,.3);animation:diagPulseGreen 2s ease-out 1;}
.diag-card.diag-success::before{background:linear-gradient(90deg,#10b981,#059669,#10b981);}
.diag-card.diag-info{background:linear-gradient(160deg,rgba(30,58,138,.25),rgba(15,23,42,.6));border-color:rgba(59,130,246,.3);}
.diag-card.diag-info::before{background:linear-gradient(90deg,#3b82f6,#2563eb,#3b82f6);}
.diag-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.diag-icon{font-size:28px;line-height:1;filter:drop-shadow(0 0 8px currentColor);}
.diag-title{font-size:15px;font-weight:800;letter-spacing:.02em;}
.diag-error .diag-title{color:#fca5a5;}.diag-warning .diag-title{color:#fde68a;}.diag-success .diag-title{color:#6ee7b7;}.diag-info .diag-title{color:#93c5fd;}
.diag-section{margin-bottom:14px;}.diag-section:last-child{margin-bottom:0;}
.diag-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.diag-error .diag-label{color:#f87171;}.diag-warning .diag-label{color:#fbbf24;}.diag-success .diag-label{color:#34d399;}.diag-info .diag-label{color:#60a5fa;}
.diag-value{font-size:15px;font-weight:700;line-height:1.4;}
.diag-error .diag-value{color:#fecaca;}.diag-warning .diag-value{color:#fef3c7;}.diag-success .diag-value{color:#d1fae5;}.diag-info .diag-value{color:#dbeafe;}
.diag-list{margin:0;padding:0 0 0 4px;list-style:none;}
.diag-list li{font-size:13px;line-height:1.6;padding-left:16px;position:relative;color:#cbd5e1;}
.diag-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;}
.diag-error .diag-list li::before{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.5);}
.diag-warning .diag-list li::before{background:#eab308;box-shadow:0 0 6px rgba(234,179,8,.5);}
.diag-success .diag-list li::before{background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.5);}
.diag-info .diag-list li::before{background:#3b82f6;box-shadow:0 0 6px rgba(59,130,246,.5);}
.diag-action-list li::before{border-radius:2px!important;width:6px!important;height:6px!important;}
.diag-action-list li{color:#e2e8f0;font-weight:500;}
.diag-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(148,163,184,.15),transparent);margin:14px 0;}

/* Category Selector */
.cat-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border-radius:10px;border:1px solid rgba(51,65,85,.5);background:rgba(15,23,42,.65);color:#64748b;font-weight:600;transition:.25s;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cat-btn:hover{border-color:rgba(148,163,184,.5);color:#e2e8f0;}
.cat-btn i{font-size:16px;margin-bottom:4px;}
.cat-btn span{font-size:9px;letter-spacing:0.02em;}
.cat-btn.active-tv {border-color:rgba(37,99,235,.7);background:rgba(37,99,235,.15);color:#60a5fa;box-shadow:0 0 12px rgba(37,99,235,.3);}
.cat-btn.active-ac {border-color:rgba(234,179,8,.7);background:rgba(234,179,8,.15);color:#fde047;box-shadow:0 0 12px rgba(234,179,8,.3);}
.cat-btn.active-kulkas {border-color:rgba(239,68,68,.7);background:rgba(239,68,68,.15);color:#fca5a5;box-shadow:0 0 12px rgba(239,68,68,.3);}
.cat-btn.active-mesin_cuci {border-color:rgba(34,197,94,.7);background:rgba(34,197,94,.15);color:#86efac;box-shadow:0 0 12px rgba(34,197,94,.3);}
.cat-btn.active-lainnya {border-color:rgba(139,92,246,.7);background:rgba(139,92,246,.15);color:#c4b5fd;box-shadow:0 0 12px rgba(139,92,246,.3);}

/* Mobile Tabs */
.tab-pill{color:#64748b; background:transparent; border:none; cursor:pointer;}
.tab-pill.active-yellow{background:linear-gradient(135deg,#eab308,#d97706)!important; color:#fff; box-shadow:0 4px 12px rgba(234,179,8,.3);}
.tab-pill.active-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)!important; color:#fff; box-shadow:0 4px 12px rgba(59,130,246,.3);}
.tab-pill.active-red{background:linear-gradient(135deg,#ef4444,#dc2626)!important; color:#fff; box-shadow:0 4px 12px rgba(239,68,68,.3);}

button{-webkit-tap-highlight-color:transparent;}
button:active{transform:scale(.98);}

/* Desktop: 3 kolom berjejer, tab disembunyikan */
@media(min-width:1024px){
  .mobile-tabs { 
    display: none !important; 
  }
  .mode-card { 
    display: block !important; 
  }
}
/* Smooth scrolling for activation screen */
#activation-screen {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; 
}