/* ============================================================
   FRP Remove Service – Phoenix Tool Style
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:        #1a1a1a;
  --bg2:       #222222;
  --bg3:       #2a2a2a;
  --bg4:       #111111;
  --border:    #3a3a3a;
  --accent:    #00bcd4;
  --accent2:   #0097a7;
  --green:     #4caf50;
  --green2:    #00e676;
  --red:       #f44336;
  --orange:    #ff9800;
  --yellow:    #ffeb3b;
  --text:      #e0e0e0;
  --muted:     #888;
  --mono:      'Share Tech Mono', monospace;
  --head:      'Rajdhani', sans-serif;
  --radius:    4px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg4);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg4)}
::-webkit-scrollbar-thumb{background:#444;border-radius:3px}
a{color:var(--accent);text-decoration:none}
a:hover{color:#fff}

/* TOPBAR */
.topbar{background:linear-gradient(90deg,#0d0d0d 0%,#1a1a2e 50%,#0d0d0d 100%);border-bottom:2px solid var(--accent);height:48px;display:flex;align-items:center;padding:0 16px;gap:12px;position:sticky;top:0;z-index:200;box-shadow:0 2px 20px rgba(0,188,212,.2)}
.topbar-logo{font-family:var(--head);font-size:20px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 12px rgba(0,188,212,.5);white-space:nowrap;text-decoration:none}
.topbar-version{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid #333;padding:2px 8px;border-radius:3px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.topbar-user{font-family:var(--mono);font-size:12px;color:var(--text)}
.topbar-credits{background:rgba(255,235,59,.1);border:1px solid rgba(255,235,59,.3);color:var(--yellow);padding:3px 10px;border-radius:3px;font-size:12px;font-weight:700;font-family:var(--head);letter-spacing:1px}

/* BRAND TABS */
.brand-tabs{background:#161616;border-bottom:1px solid #333;display:flex;align-items:center;padding:0 16px;gap:4px;overflow-x:auto;height:58px;scrollbar-width:none}
.brand-tabs::-webkit-scrollbar{display:none}
.brand-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;height:46px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;padding:4px 8px;transition:all .2s;text-decoration:none;gap:2px}
.brand-tab:hover{border-color:var(--accent);background:rgba(0,188,212,.08)}
.brand-tab.active{border-color:var(--accent);background:rgba(0,188,212,.15)}
.brand-tab .brand-icon{font-size:22px;line-height:1}
.brand-tab .brand-name{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px;font-family:var(--head)}
.brand-tab.active .brand-name{color:var(--accent)}
.brand-sep{width:1px;height:32px;background:#333;margin:0 6px;flex-shrink:0}
.brand-tabs-right{margin-left:auto;display:flex;align-items:center;gap:4px;flex-shrink:0}
.brand-tabs-right a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 10px;border-radius:3px;border:1px solid #333;background:var(--bg3);text-decoration:none;transition:all .2s;min-width:60px}
.brand-tabs-right a:hover{border-color:var(--accent)}
.brand-tabs-right a .brand-icon{font-size:18px}
.brand-tabs-right a .brand-name{font-size:10px;color:var(--muted);font-family:var(--head);font-weight:700;letter-spacing:.5px}

/* APP LAYOUT */
.app-layout{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 108px)}

/* LEFT PANEL */
.left-panel{background:var(--bg2);border-right:1px solid #333;display:flex;flex-direction:column}
.usb-bar{padding:8px 10px;background:var(--bg4);border-bottom:1px solid #333;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);font-family:var(--mono)}
.usb-label{font-weight:700;letter-spacing:1px;color:var(--muted)}
.usb-select{flex:1;background:var(--bg3);border:1px solid #444;color:var(--text);padding:4px 6px;border-radius:3px;font-size:11px;font-family:var(--mono);outline:none}
.usb-btn{width:26px;height:26px;background:var(--bg3);border:1px solid #444;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:all .2s;flex-shrink:0}
.usb-btn:hover{border-color:var(--accent);color:var(--accent)}
.auto-toggle{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid #2a2a2a;font-size:11px;color:var(--muted);font-family:var(--mono)}
.toggle-dot{width:28px;height:14px;background:var(--green);border-radius:7px;position:relative;cursor:pointer;flex-shrink:0}
.toggle-dot::after{content:'';position:absolute;right:2px;top:2px;width:10px;height:10px;background:#fff;border-radius:50%}
.function-bar{padding:6px 10px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;gap:8px;background:rgba(0,188,212,.04)}
.function-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:1px;font-family:var(--head)}
.function-sep{color:#444}
.function-value{font-family:var(--head);font-size:14px;font-weight:700;color:var(--accent);letter-spacing:1px}
.device-log{flex:1;padding:10px;font-family:var(--mono);font-size:12px;overflow-y:auto;background:var(--bg2);line-height:2}
.log-line{display:flex;gap:6px}
.log-key{color:var(--muted);min-width:130px;flex-shrink:0}
.log-val{color:var(--green2)}
.log-val.cyan{color:var(--accent)}
.log-val.yellow{color:var(--yellow)}
.log-val.orange{color:var(--orange)}
.log-divider{border-top:1px dashed #2a2a2a;margin:4px 0}
.left-progress{height:20px;background:var(--bg4);border-top:1px solid #333;position:relative;overflow:hidden}
.left-progress-bar{height:100%;background:linear-gradient(90deg,#00bcd4,#00e676);transition:width .5s ease}
.progress-pct{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:10px;color:#fff;font-weight:700;z-index:1;text-shadow:0 0 4px rgba(0,0,0,.8)}

/* STATUS BAR */
.status-bar{background:var(--bg4);border-top:1px solid #333;padding:3px 12px;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted)}
.status-user{color:var(--text)}
.status-credits{color:var(--yellow);font-weight:700}

/* RIGHT PANEL */
.right-panel{background:var(--bg);display:flex;flex-direction:column}
.panel-tabs{display:flex;align-items:flex-end;gap:2px;padding:8px 12px 0;border-bottom:1px solid #333;background:var(--bg2)}
.panel-tab{padding:6px 20px;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);background:transparent;transition:all .2s;font-family:var(--head);letter-spacing:.5px;position:relative;top:1px}
.panel-tab:hover{color:var(--text);background:var(--bg3)}
.panel-tab.active{color:var(--accent);border-color:#444 #444 var(--bg);background:var(--bg)}
.sub-tabs{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #2a2a2a;flex-wrap:wrap}
.sub-tab{padding:4px 14px;border-radius:3px;border:1px solid #3a3a3a;background:var(--bg3);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--head);letter-spacing:.5px}
.sub-tab:hover{border-color:var(--accent);color:var(--text)}
.sub-tab.active{background:var(--accent);border-color:var(--accent);color:#000}
.panel-content{flex:1;padding:14px;overflow-y:auto}
.setting-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.setting-label{font-family:var(--head);font-size:14px;font-weight:700;color:var(--accent);min-width:110px;letter-spacing:1px}
.setting-select{flex:1;background:var(--bg3);border:1px solid #444;color:var(--text);padding:6px 10px;border-radius:3px;font-size:12px;font-family:var(--mono);outline:none;transition:border-color .2s}
.setting-select:focus{border-color:var(--accent)}
.setting-dots{width:30px;height:30px;background:var(--bg3);border:1px solid #444;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;flex-shrink:0}
.service-box{background:var(--bg2);border:1px solid #333;border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.service-box-title{background:linear-gradient(90deg,#1a1a2e,#222);padding:7px 14px;font-family:var(--head);font-size:13px;font-weight:700;color:var(--accent);border-bottom:1px solid #333;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.service-box-body{padding:12px}
.imei-row{display:flex;gap:8px;align-items:center}
.imei-input{flex:1;background:var(--bg4);border:1px solid #444;color:var(--accent);padding:7px 12px;border-radius:3px;font-family:var(--mono);font-size:14px;outline:none;letter-spacing:2px}
.imei-input:focus{border-color:var(--accent)}
.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.service-btn{background:linear-gradient(135deg,#1a1a2e,#222236);border:1px solid #333;border-radius:4px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none}
.service-btn:hover{border-color:var(--accent);background:linear-gradient(135deg,#1a2a3e,#1a3a4e);transform:translateY(-1px)}
.service-btn.active{border-color:var(--green);background:linear-gradient(135deg,#1a2e1a,#1a3a1a)}
.service-btn .svc-icon{font-size:20px}
.service-btn .svc-name{font-size:10px;font-weight:700;color:var(--muted);font-family:var(--head);letter-spacing:.5px;text-transform:uppercase}
.service-btn:hover .svc-name{color:var(--accent)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 16px;border-radius:3px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:var(--head);letter-spacing:1px;text-transform:uppercase;text-decoration:none}
.btn-cyan{background:linear-gradient(135deg,var(--accent2),var(--accent));border-color:var(--accent);color:#000}
.btn-cyan:hover{opacity:.9;transform:translateY(-1px)}
.btn-green{background:linear-gradient(135deg,#1b5e20,#2e7d32);border-color:#388e3c;color:#fff}
.btn-green:hover{background:linear-gradient(135deg,#2e7d32,#388e3c)}
.btn-red{background:linear-gradient(135deg,#b71c1c,#c62828);border-color:#d32f2f;color:#fff}
.btn-red:hover{opacity:.9}
.btn-ghost{background:var(--bg3);border-color:#444;color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-check{background:linear-gradient(135deg,#1a237e,#283593);border-color:#3949ab;color:#fff}
.btn-check:hover{background:linear-gradient(135deg,#283593,#3949ab)}
.btn-sm{padding:4px 10px;font-size:10px}
.btn-lg{padding:10px 28px;font-size:14px}
.btn-full{width:100%}

/* FORMS */
.form-group{margin-bottom:12px}
label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:700;letter-spacing:1px;font-family:var(--head);text-transform:uppercase}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;background:var(--bg4);border:1px solid #3a3a3a;color:var(--text);padding:8px 10px;border-radius:3px;font-size:13px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,188,212,.12)}

/* ALERTS */
.alert{padding:10px 14px;border-radius:3px;border-left:3px solid;margin-bottom:12px;font-size:13px;display:flex;align-items:flex-start;gap:8px}
.alert-info{background:rgba(0,188,212,.08);border-color:var(--accent);color:#80deea}
.alert-warning{background:rgba(255,152,0,.08);border-color:var(--orange);color:#ffcc80}
.alert-danger{background:rgba(244,67,54,.08);border-color:var(--red);color:#ef9a9a}
.alert-success{background:rgba(76,175,80,.08);border-color:var(--green);color:#a5d6a7}

/* TABLES */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:8px 12px;text-align:left;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #333;font-family:var(--head);background:var(--bg4)}
td{padding:10px 12px;border-bottom:1px solid #2a2a2a}
tr:hover td{background:rgba(0,188,212,.03)}
tr:last-child td{border-bottom:none}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:2px;font-size:10px;font-weight:700;font-family:var(--head);letter-spacing:.5px;text-transform:uppercase}
.badge-pending{background:rgba(136,136,136,.15);color:var(--muted);border:1px solid #444}
.badge-processing{background:rgba(33,150,243,.15);color:#64b5f6;border:1px solid #1565c0}
.badge-processed{background:rgba(76,175,80,.15);color:var(--green2);border:1px solid #2e7d32}
.badge-failed{background:rgba(244,67,54,.15);color:#ef5350;border:1px solid #c62828}
.badge-refunded{background:rgba(255,152,0,.15);color:#ffb74d;border:1px solid #e65100}

/* CARDS */
.card{background:var(--bg2);border:1px solid #333;border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.card-header{background:linear-gradient(90deg,#1a1a2e,#222);padding:10px 16px;border-bottom:1px solid #333;font-family:var(--head);font-size:14px;font-weight:700;color:var(--accent);letter-spacing:1px;display:flex;align-items:center;gap:8px}
.card-body{padding:16px}

/* STAT BOX */
.stat-box{background:var(--bg2);border:1px solid #333;border-top:2px solid var(--accent);border-radius:var(--radius);padding:14px;text-align:center}
.stat-val{font-size:26px;font-weight:700;font-family:var(--head);color:var(--accent)}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--head);letter-spacing:1px;text-transform:uppercase}

/* CREDIT PACKAGES */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pkg-card{background:var(--bg2);border:1px solid #333;border-radius:4px;padding:18px 12px;text-align:center;cursor:pointer;transition:all .2s}
.pkg-card:hover,.pkg-card.selected{border-color:var(--accent);background:rgba(0,188,212,.07);transform:translateY(-2px)}
.pkg-card.popular{border-color:var(--yellow)}
.pkg-credits{font-size:32px;font-weight:700;font-family:var(--head);color:var(--accent)}
.pkg-usd{font-size:13px;color:var(--muted);margin-top:3px}
.pkg-bonus{font-size:11px;color:var(--green2);margin-top:5px;font-weight:700;font-family:var(--head)}

/* AUTH */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a1a2e 0%,#0d0d0d 70%);padding:40px 20px}
.auth-card{width:100%;max-width:420px;background:var(--bg2);border:1px solid #333;border-radius:4px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(0,188,212,.1)}
.auth-header{background:linear-gradient(135deg,#0d0d1a,#1a1a2e);padding:28px 32px 20px;text-align:center;border-bottom:2px solid var(--accent)}
.auth-header h2{font-family:var(--head);font-size:24px;font-weight:700;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}
.auth-header p{font-size:13px;color:var(--muted)}
.auth-logo{font-size:40px;margin-bottom:8px}
.auth-body{padding:24px 32px}
.auth-footer{padding:14px 32px;text-align:center;font-size:13px;color:var(--muted);border-top:1px solid #2a2a2a;background:var(--bg4)}

/* MISC */
hr{border:none;border-top:1px solid #2a2a2a;margin:16px 0}
code{font-family:var(--mono);background:var(--bg4);padding:2px 6px;border-radius:2px;font-size:12px;color:var(--accent);border:1px solid #333}
.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.flash{transition:opacity .5s;position:fixed;top:110px;right:16px;z-index:999;max-width:340px;box-shadow:0 4px 20px rgba(0,0,0,.5)}

/* RESPONSIVE */
@media(max-width:768px){
  .app-layout{grid-template-columns:1fr}
  .left-panel{max-height:280px}
  .brand-tab .brand-name{display:none}
  .brand-tab{min-width:44px}
  .topbar-user{display:none}
}