*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0d0d1a;
  --surface:#1a1a2e;
  --border:#3a2a5a;
  --primary:#7c3aed;
  --primary-hover:#9b5de5;
  --accent:#b388ff;
  --accent-light:#d4bfff;
  --text:#e0e0e0;
  --muted:#8888aa;
  --danger-bg:#2a1a2a;
  --danger-color:#ffb0b0;
  --success-bg:#1a2a1a;
  --success-color:#b0ffb0;
  --radius:16px;
  --radius-pill:30px;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI',Tahoma,sans-serif;
  line-height:1.5;
  padding-bottom:80px;
  min-height:100vh;
}

a{color:var(--accent);text-decoration:none;transition:.2s}
a:hover{color:var(--accent-light)}

.container{max-width:800px;margin:0 auto;padding:16px}

/* CARD */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  padding:20px;
  margin-bottom:20px;
}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--radius-pill);
  padding:10px 25px;font-weight:600;font-size:14px;
  cursor:pointer;transition:.2s;text-decoration:none;
}
.btn i{font-size:16px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);transform:scale(1.02);color:#fff}
.btn-outline-secondary{background:transparent;border:1px solid var(--border);color:#c0b0d0}
.btn-outline-secondary:hover{background:var(--border);border-color:var(--primary);color:#fff}
.btn-success{background:#2d7a4a;color:#fff}
.btn-success:hover{background:#3a9a5a;color:#fff}
.btn-danger{background:#7a2d2d;color:#fff}
.btn-danger:hover{background:#9a3a3a;color:#fff}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-sm i{font-size:13px}
.w-100{width:100%}

/* FORMS */
.form-label{display:block;margin-bottom:6px;color:var(--muted);font-size:13px}
.form-label i{margin-right:4px}
.form-control,.form-select{
  width:100%;background:#12121f;border:1px solid var(--border);
  color:var(--text);border-radius:var(--radius-pill);padding:12px 18px;
  font-size:14px;outline:none;transition:.2s;
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.3);color:#fff;
}
.form-select{appearance:none;cursor:pointer}

/* NAVBAR BOTTOM */
.navbar-bottom{
  background:#12121f;border-top:1px solid var(--border);
  display:flex;justify-content:space-around;
  padding:10px 0;position:fixed;bottom:0;left:0;right:0;z-index:1000;
}
.navbar-bottom a{
  color:var(--muted);text-align:center;flex:1;
  text-decoration:none;font-size:12px;transition:.3s;
}
.navbar-bottom a i{font-size:24px;display:block;margin-bottom:2px}
.navbar-bottom a.active{color:var(--accent)}
.navbar-bottom a:hover{color:var(--accent-light)}

/* USER BAR */
.user-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.user-bar .username{color:var(--accent);font-weight:bold}

/* LIST ITEMS */
.sub-item{
  background:var(--surface);border:1px solid #2a2a4a;
  border-radius:var(--radius);margin-bottom:10px;padding:16px;
}
.sub-item h6{color:var(--accent-light);margin-bottom:4px}
.sub-item .sub-url{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:8px}
.sub-item .sub-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.sub-item .sub-actions{display:flex;gap:8px;flex-wrap:wrap}

/* BADGE */
.badge{
  display:inline-block;background:var(--border);color:var(--text);
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;
}
.badge-public{background:#1a4a2a;color:#80ffb0}
.badge-private{background:#4a3a1a;color:#ffe080}

/* AUTH FORM */
.auth-form{max-width:400px;margin:40px auto}
.auth-form .card{padding:30px}
.auth-form h4{color:var(--accent-light)}

/* ALERTS */
.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px}
.alert i{margin-right:6px}
.alert-danger{background:var(--danger-bg);border:1px solid var(--primary);color:var(--danger-color)}
.alert-success{background:var(--success-bg);border:1px solid #4caf50;color:var(--success-color)}

/* PRE */
pre{
  background:var(--bg);border:1px solid var(--border);
  padding:15px;border-radius:var(--radius);color:var(--text);
  max-height:400px;overflow:auto;font-size:13px;
}

/* TOGGLE SWITCH */
.toggle-wrapper{display:flex;align-items:center;gap:12px}
.label-text{font-size:14px;font-weight:500;color:var(--muted);transition:.2s}
.label-text.active{color:var(--accent)}

.switch{position:relative;display:inline-block;width:50px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background-color:var(--border);transition:.3s;border-radius:34px;
}
.slider:before{
  position:absolute;content:"";height:20px;width:20px;
  left:4px;bottom:4px;background-color:#fff;transition:.3s;border-radius:50%;
}
input:checked+.slider{background-color:var(--primary)}
input:checked+.slider:before{transform:translateX(22px)}

/* UTILITIES */
.mb-3{margin-bottom:1rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}
.p-4{padding:1.5rem}
.d-flex{display:flex}
.gap-3{gap:1rem}
.align-items-center{align-items:center}
.text-center{text-align:center}

/* EMPTY STATE */
.empty-state{text-align:center;padding:40px 20px;color:var(--muted)}
.empty-state i{font-size:48px;margin-bottom:12px;display:block;color:var(--border)}
.empty-state a{color:var(--accent)}

/* LOADING */
.spinner{
  display:inline-block;width:20px;height:20px;
  border:2px solid var(--border);border-top-color:var(--primary);
  border-radius:50%;animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media(max-width:600px){
  .container{padding:12px}
  .card{padding:16px}
  .btn{padding:8px 16px;font-size:13px}
  .sub-item .sub-meta{flex-direction:column;align-items:flex-start}
}