*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:'SF Mono','Monaco','Inconsolata','Fira Code','Droid Sans Mono',monospace;
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
    min-height:100vh;padding:40px 20px;color:#e4e4e7;line-height:1.6
}
.container{max-width:1000px;margin:0 auto}
.header{
    text-align:center;margin-bottom:50px;padding:40px;background:rgba(30,30,46,.95);
    border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)
}
.header h1{font-size:42px;color:#60a5fa;margin-bottom:12px;font-weight:700;letter-spacing:-.5px}
.header .subtitle{font-size:18px;color:#94a3b8;font-weight:400}
.nav-tabs{
    display:flex;gap:12px;margin-bottom:30px;background:rgba(30,30,46,.95);padding:20px;border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);flex-wrap:wrap
}
.nav-tab{
    flex:1;min-width:200px;padding:14px 24px;background:rgba(45,45,68,.6);border:2px solid transparent;border-radius:10px;
    cursor:pointer;transition:all .3s ease;text-align:center;font-weight:600;font-size:15px;color:#94a3b8;user-select:none
}
.nav-tab:hover{background:rgba(60,60,85,.8);border-color:rgba(96,165,250,.3);color:#cbd5e1}
.nav-tab.active{
    background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#fff;border-color:#3b82f6;
    box-shadow:0 4px 16px rgba(96,165,250,.4)
}
.section{
    display:none;background:rgba(30,30,46,.95);border-radius:16px;padding:40px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)
}
.section.active{display:block;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.section-title{
    font-size:28px;color:#60a5fa;margin-bottom:30px;font-weight:700;border-bottom:2px solid rgba(96,165,250,.3);padding-bottom:15px
}
.command-group{
    background:rgba(45,45,68,.6);border-radius:12px;padding:24px;margin-bottom:20px;border-left:4px solid #60a5fa;transition:all .3s ease
}
.command-group:hover{transform:translateX(4px);border-left-color:#3b82f6;box-shadow:0 8px 24px rgba(96,165,250,.15)}
.command-header{display:flex;align-items:center;margin-bottom:16px;gap:12px}
.command-icon{
    background:linear-gradient(135deg,#60a5fa,#3b82f6);color:#fff;width:36px;height:36px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0
}
.command-title{font-size:18px;font-weight:600;color:#f1f5f9;flex:1}
.command-badge{
    background:rgba(251,191,36,.2);color:#fbbf24;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;border:1px solid rgba(251,191,36,.3)
}
.command-badge.danger{background:rgba(239,68,68,.2);color:#ef4444;border-color:rgba(239,68,68,.3)}
.command-badge.success{background:rgba(34,197,94,.2);color:#22c55e;border-color:rgba(34,197,94,.3)}
.command-badge.info{background:rgba(59,130,246,.2);color:#3b82f6;border-color:rgba(59,130,246,.3)}
.command-description{color:#cbd5e1;margin-bottom:14px;font-size:14px}
.code-block{
    background:rgba(15,23,42,.8);border:1px solid rgba(71,85,105,.5);border-radius:8px;padding:14px 16px;margin:10px 0;
    font-family:'SF Mono',monospace;font-size:13px;color:#e2e8f0;overflow-x:auto;position:relative;line-height:1.5
}
.code-block:hover{border-color:rgba(96,165,250,.5)}
.code-block code{color:#a5f3fc;white-space:pre}
.code-comment{color:#64748b;font-style:italic}
.warning-box{
    background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:12px 16px;margin:10px 0;display:flex;align-items:start;gap:10px
}
.warning-icon{color:#ef4444;font-size:20px;font-weight:700;flex-shrink:0}
.warning-text{color:#fca5a5;font-size:13px}
.tips-section{
    background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(22,163,74,.1));border:1px solid rgba(34,197,94,.3);
    border-radius:12px;padding:24px;margin-top:30px
}
.tips-header{font-size:20px;font-weight:600;color:#22c55e;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.tips-list{list-style:none}
.tips-list li{padding:10px 0 10px 28px;position:relative;color:#cbd5e1;font-size:14px}
.tips-list li::before{content:'→';position:absolute;left:0;color:#22c55e;font-weight:700;font-size:18px}
.result-box{
    background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:8px;padding:16px;margin-top:30px;text-align:center
}
.result-title{color:#22c55e;font-weight:600;font-size:16px;margin-bottom:8px}
.result-text{color:#cbd5e1;font-size:14px}
.savings-badge{
    display:inline-block;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:8px 20px;border-radius:20px;
    font-size:14px;font-weight:600;margin-top:15px;box-shadow:0 4px 12px rgba(16,185,129,.3)
}
@media (max-width:768px){
    .container{padding:0}
    .header h1{font-size:28px}
    .nav-tabs{flex-direction:column}
    .nav-tab{min-width:auto}
    .section{padding:24px}
    .command-group{padding:18px}
    .code-block{font-size:12px;padding:12px}
}