*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',sans-serif;background:#0a0a1a;color:#e0e0e0;min-height:100vh;display:flex}
body.with-sidebar{margin-left:280px;transition: margin-left 0.3s ease;}
body.sidebar-collapsed{margin-left:80px}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;width:280px;height:100vh;background:linear-gradient(180deg,rgba(20,20,40,0.95),rgba(10,10,25,0.98));border-right:1px solid rgba(108,92,231,0.2);padding:25px 0;overflow-y:auto;z-index:1000;box-shadow:2px 0 20px rgba(0,0,0,0.5);transition: width 0.3s ease;}
.sidebar.collapsed{width:80px}
.sidebar.collapsed .sidebar-title div, .sidebar.collapsed .sidebar-subtitle, .sidebar.collapsed .sidebar-menu li a span:not(:first-child), .sidebar.collapsed .sidebar-menu li a:not(span) {
    display: none;
}
.sidebar.collapsed .sidebar-menu li a {
    justify-content: center;
    padding: 14px 0;
}
.sidebar.collapsed .sidebar-header {
    padding: 0;
    display: flex;
    justify-content: center;
}
.sidebar.collapsed .sidebar-footer a span:last-child {
    display: none;
}
.sidebar.collapsed .sidebar-footer a {
    justify-content: center;
}

/* Toggle Button */
.sidebar-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1100;
    background: #6c5ce7;
    color: #fff;
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: left 0.3s ease;
}
body.with-sidebar .sidebar-toggle {
    left: 290px;
}
body.sidebar-collapsed .sidebar-toggle {
    left: 90px;
}
.sidebar-header{padding:0 20px 30px;border-bottom:1px solid rgba(108,92,231,0.2);margin-bottom:20px}
.sidebar-title{font-size:18px;font-weight:800;color:#6c5ce7;margin-bottom:5px;display:flex;align-items:center;gap:10px}
.sidebar-title span{font-size:24px}
.sidebar-subtitle{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:1px}
.sidebar-menu{list-style:none}
.sidebar-menu li{margin:0}
.sidebar-menu a{display:flex;align-items:center;gap:12px;padding:14px 20px;color:#b0b0d0;text-decoration:none;transition:all 0.3s;border-left:3px solid transparent;font-weight:500}
.sidebar-menu a:hover{background:rgba(108,92,231,0.1);color:#6c5ce7;border-left-color:#6c5ce7}
.sidebar-menu a.active{background:rgba(108,92,231,0.15);color:#6c5ce7;border-left-color:#6c5ce7;font-weight:700}
.sidebar-menu a span{font-size:18px;min-width:24px}
.sidebar-footer{position:absolute;bottom:0;left:0;right:0;padding:20px;border-top:1px solid rgba(108,92,231,0.2);background:rgba(10,10,25,0.5)}
.sidebar-footer a{display:flex;align-items:center;gap:10px;padding:10px 15px;color:#e74c3c;text-decoration:none;border-radius:8px;transition:all 0.3s;font-weight:600}
.sidebar-footer a:hover{background:rgba(231,76,60,0.1);color:#ff6b6b}

/* Main Content */
.main-content{flex:1;padding:30px;overflow-y:auto}
.main-content.full-width{margin-left:0}

/* Header */
.page-header{margin-bottom:30px}
.page-header h1{font-size:2em;color:#fff;margin-bottom:10px;display:flex;align-items:center;gap:15px}
.page-header h1 span{font-size:2.2em}
.page-header p{color:#888;font-size:14px}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:0}
.container-sm{max-width:550px;margin:0 auto;padding:0}
a{color:#6c5ce7;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:#fff}

/* Buttons */
.btn{display:inline-block;padding:14px 28px;border:none;border-radius:10px;cursor:pointer;font-size:16px;font-weight:700;text-align:center;transition:all 0.3s;width:100%;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#6c5ce7,#a855f7);color:#fff}
.btn-primary:hover{opacity:0.9;transform:translateY(-2px);text-decoration:none}
.btn-success{background:linear-gradient(135deg,#00b894,#00cec9);color:#fff}
.btn-success:hover{opacity:0.9;text-decoration:none}
.btn-danger{background:#e74c3c;color:#fff}
.btn-danger:hover{opacity:0.9;text-decoration:none}
.btn-secondary{background:#2d3436;color:#fff;border:2px solid #636e72}
.btn-secondary:hover{opacity:0.9;text-decoration:none}
.btn-outline{background:transparent;border:2px solid #6c5ce7;color:#6c5ce7}
.btn-outline:hover{background:#6c5ce7;color:#fff;text-decoration:none}

/* Cards */
.card{background:rgba(20,20,40,0.8);border:1px solid rgba(108,92,231,0.2);border-radius:16px;padding:30px;margin-bottom:20px;backdrop-filter:blur(10px)}
.card h2,.card h3{margin-bottom:20px;color:#fff}

/* Forms */
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;color:#b0b0d0;font-weight:600;font-size:14px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;background:rgba(15,15,35,0.9);border:1px solid rgba(108,92,231,0.3);border-radius:10px;color:#fff;font-size:15px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#6c5ce7;box-shadow:0 0 0 3px rgba(108,92,231,0.15)}

/* Alerts */
.alert{padding:14px 20px;border-radius:10px;margin-bottom:20px;font-weight:500}
.alert-error{background:rgba(231,76,60,0.15);border:1px solid #e74c3c;color:#e74c3c}
.alert-success{background:rgba(0,184,148,0.15);border:1px solid #00b894;color:#00b894}
.alert-warning{background:rgba(253,203,110,0.15);border:1px solid #fdcb6e;color:#fdcb6e}

/* Tables */
table{width:100%;border-collapse:collapse;margin-top:15px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(108,92,231,0.1)}
th{background:rgba(108,92,231,0.1);color:#6c5ce7;font-weight:700;font-size:13px;text-transform:uppercase}
.table-responsive{overflow-x:auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px;}
.table-responsive table{min-width:700px}

/* Badges */
.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}
.badge-success{background:rgba(0,184,148,0.2);color:#00b894}
.badge-warning{background:rgba(253,203,110,0.2);color:#fdcb6e}
.badge-danger{background:rgba(231,76,60,0.2);color:#e74c3c}

/* Grid */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
@media(max-width:768px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  body.with-sidebar{margin-left:0 !important}
  body{display:block}
  .sidebar{
    transform: translateX(-100%);
    width: 280px !important;
    height: 100vh;
    position: fixed;
    transition: transform 0.3s ease;
  }
  .sidebar.active {
    transform: translateX(0);
  }
  .sidebar-toggle {
    left: 20px !important;
    top: 15px;
    width: 45px;
    height: 45px;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  .sidebar-overlay.active {
    display: block;
  }
  .main-content{padding:15px; padding-top: 70px; margin-left: 0 !important;}
  .page-header h1{font-size:1.5em}
  .page-header h1 span{font-size:1.8em}
  .card{padding:20px; margin-bottom: 15px;}
  .form-group input,.form-group select,.form-group textarea{padding:14px 12px; font-size: 16px;}
  .btn{padding:12px 20px; font-size: 14px;}
  table{font-size:13px}
  th,td{padding:10px 8px}
  .table-responsive{overflow-x:auto; -webkit-overflow-scrolling: touch;}
  .table-responsive table{min-width:600px}
}

/* Switch */
.switch{position:relative;display:inline-block;width:50px;height:26px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#2d3436;border-radius:26px;transition:0.3s}
.switch .slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.3s}
.switch input:checked+.slider{background:#6c5ce7}
.switch input:checked+.slider:before{transform:translateX(24px)}

/* Hero */
.hero{text-align:center;padding:80px 20px;background:linear-gradient(135deg,rgba(108,92,231,0.1),rgba(168,85,247,0.05))}
.hero h1{font-size:3em;margin-bottom:15px;background:linear-gradient(135deg,#6c5ce7,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.2em;color:#b0b0d0;max-width:600px;margin:0 auto 30px}

/* Utilities */
.price{font-size:2.5em;font-weight:800;color:#6c5ce7;text-align:center;margin:20px 0}
.text-center{text-align:center}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.pix-box{background:rgba(15,15,35,0.9);border:2px solid rgba(108,92,231,0.3);border-radius:12px;padding:25px;text-align:center;margin-top:20px}
.pix-key{background:rgba(10,10,25,0.9);padding:15px;border-radius:8px;font-family:monospace;font-size:18px;color:#6c5ce7;margin:15px 0;word-break:break-all;border:1px solid rgba(108,92,231,0.3)}
.btn-copy{display:inline-block;padding:10px 30px;background:#6c5ce7;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:700;font-size:14px}
.payment-choice{display:flex;flex-direction:column;gap:16px;margin-top:30px}
.payment-choice .btn{padding:20px;font-size:18px}
.mp-methods{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.mp-methods .btn{display:flex;align-items:center;justify-content:center;gap:10px}

/* Mobile Optimizations */
@media(max-width:600px){
  body{font-size:14px}
  .page-header h1{font-size:1.3em; gap: 8px;}
  .page-header h1 span{font-size:1.5em}
  .card{padding:15px}
  .form-group{margin-bottom:14px}
  .form-group label{font-size:13px; margin-bottom: 4px;}
  .form-group input,.form-group select,.form-group textarea{padding:12px 10px; font-size: 16px; border-radius: 8px;}
  .btn{padding:12px 16px; font-size: 13px; border-radius: 8px;}
  .btn-primary, .btn-success, .btn-danger, .btn-secondary, .btn-outline{width:100%}
  table{font-size:12px}
  th,td{padding:8px 6px; font-size: 12px;}
  .grid-2, .grid-3{gap:12px}
  .hero{padding:40px 15px}
  .hero h1{font-size:2em}
  .hero p{font-size:1em}
  .price{font-size:2em}
  .pix-key{font-size:14px; padding: 12px;}
  .sidebar{width:250px}
  .sidebar-menu a{padding:12px 15px; gap: 8px;}
  .sidebar-menu a span{font-size:16px}
  .sidebar-title{font-size:16px}
  .sidebar-title span{font-size:20px}
  .main-content{padding:12px; padding-top: 65px;}
  .alert{padding:12px 15px; font-size: 13px;}
  .badge{padding:3px 10px; font-size: 11px;}
  .payment-choice .btn{padding:16px; font-size: 16px;}
  .container{padding:0}
  .container-sm{padding:0}
}

/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgba(108,92,231,0.05)}
::-webkit-scrollbar-thumb{background:rgba(108,92,231,0.3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(108,92,231,0.5)}