:root{
 --bg:#f4f6fb;
 --card:#ffffff;
 --text:#222;
 --muted:#6b7280;
 --primary:#4f46e5;
 --success:#22c55e;
 --danger:#ef4444;
 --border:#e5e7eb;
}

body.dark{
 --bg:#020617;
 --card:#020617;
 --text:#e5e7eb;
 --muted:#94a3b8;
 --border:#1e293b;
}

*{
 box-sizing:border-box;
 font-family:Inter,system-ui,-apple-system;
}

body{
 margin:0;
 background:var(--bg);
 color:var(--text);
}

.container{
 max-width:1100px;
 margin:18px auto;
 padding:0 14px;
}

.card{
 background:var(--card);
 border-radius:18px;
 padding:20px;
 box-shadow:0 14px 40px rgba(0,0,0,.12);
}

h2{margin:0}

/* ===== FORM ===== */
input,button{
 width:100%;
 padding:12px 14px;
 border-radius:12px;
 border:1px solid var(--border);
 background:transparent;
 color:var(--text);
 font-size:15px;
}

form input{margin-bottom:12px}
form button{margin-top:6px}

button{
 background:var(--primary);
 color:#fff;
 border:none;
 cursor:pointer;
}

/* ===== TOPBAR ===== */
.topbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:14px;
}

/* ===== PROFILE ===== */
.profile{position:relative}

.avatar{
 width:38px;
 height:38px;
 border-radius:50%;
 border:1px solid var(--border);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:18px;
 cursor:pointer;
 background:transparent;
}

.menu{
 position:absolute;
 right:0;
 top:44px;
 background:var(--card);
 border:1px solid var(--border);
 border-radius:14px;
 min-width:170px;
 display:none;
 overflow:hidden;
 box-shadow:0 14px 40px rgba(0,0,0,.2);
 z-index:100;
}

.menu a{
 display:block;
 padding:11px 14px;
 text-decoration:none;
 color:var(--text);
 font-size:14px;
}

.menu a:hover{
 background:rgba(0,0,0,.05);
}

body.dark .menu a:hover{
 background:rgba(255,255,255,.08);
}

/* ===== TABLE ===== */
.table-wrap{overflow-x:auto}

table{
 width:100%;
 border-collapse:collapse;
 margin-top:16px;
 min-width:650px;
}

th,td{
 padding:12px;
 border-bottom:1px solid var(--border);
}

th{
 font-size:13px;
 color:var(--muted);
}

.badge{
 background:var(--primary);
 color:#fff;
 padding:4px 10px;
 border-radius:999px;
 font-size:12px;
}

/* ===== INLINE EDIT ===== */
.edit-url{
 width:100%;
 padding:9px 10px;
 border-radius:10px;
 font-size:14px;
}

/* ===== ACTION BUTTONS ===== */
.action-btns{
 display:flex;
 gap:6px;
 margin-top:6px;
}

.btn{
 width:32px;
 height:32px;
 border-radius:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:15px;
 border:none;
 cursor:pointer;
 padding:0;
}

.btn.save{background:#3b82f6}
.btn.copy{background:#22c55e}
.btn.del{background:#ef4444}

.btn:active{transform:scale(.92)}

/* ===== MODAL ===== */
.modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.45);
 display:none;
 align-items:center;
 justify-content:center;
 z-index:999;
}

.modal-box{
 background:var(--card);
 padding:20px;
 border-radius:18px;
 width:100%;
 max-width:360px;
 box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.modal-box input{margin-bottom:10px}

.modal-actions{
 display:flex;
 gap:10px;
 margin-top:10px;
}

.btn-cancel{background:#64748b}

/* ===== TOAST ===== */
#toast{
 position:fixed;
 top:18px;
 right:18px;
 z-index:9999;
 display:flex;
 flex-direction:column;
 gap:10px;
}

.toast{
 min-width:220px;
 max-width:300px;
 background:var(--card);
 color:var(--text);
 padding:12px 14px;
 border-radius:12px;
 box-shadow:0 12px 30px rgba(0,0,0,.25);
 display:flex;
 animation:slideIn .3s ease;
}

.toast.success{border-left:4px solid var(--success)}
.toast.error{border-left:4px solid var(--danger)}
.toast.info{border-left:4px solid #3b82f6}

@keyframes slideIn{
 from{opacity:0;transform:translateX(20px)}
 to{opacity:1}
}

@keyframes fadeOut{
 to{opacity:0;transform:translateX(20px)}
}

@media(max-width:640px){
 table{min-width:100%}
 th:nth-child(2),td:nth-child(2){display:none}
 #toast{
  top:auto;
  bottom:16px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
 }
}

/* ===== LOGIN TITLE ===== */
.login-title{
 width:100%;
 text-align:center;
 letter-spacing:2px;
 margin-bottom:16px;
 font-weight:600;
}