:root{
  --bg:#111317; --surface:#1A1D22; --surface2:#21252B; --border:#2C3038; --border-light:#363B44;
  --text:#F3F2ED; --text-dim:#9AA0AA; --text-faint:#6B7078;
  --accent:#E8562E; --accent-dim:#5A2A1D; --brass:#D4A63A; --danger:#E5484D; --success:#5FBF77; --teal:#4FB6AE;
  --radius:12px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
#app{min-height:100vh;}
a{color:inherit;}
input,select,textarea,button{font-family:inherit;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

.input,select.input,textarea.input{
  width:100%; background:var(--bg); border:1px solid var(--border-light); border-radius:8px;
  padding:9px 11px; color:var(--text); font-size:13.5px; outline:none; box-sizing:border-box;
}
.input:focus{border-color:var(--accent);}
textarea.input{resize:vertical; min-height:70px;}
.field{display:block; margin-bottom:12px;}
.field-label{font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:5px; letter-spacing:.3px; text-transform:uppercase;}
.field-hint{font-size:11px; color:var(--text-faint); margin-top:4px;}

.btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-weight:600; font-size:13.5px;
  border-radius:8px; padding:9px 15px; border:1px solid transparent; background:var(--accent); color:#fff;
  transition:filter .15s; white-space:nowrap;
}
.btn:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.5; cursor:default;}
.btn-outline{background:transparent; border:1px solid var(--border-light); color:var(--text);}
.btn-ghost{background:transparent; color:var(--text-dim); border:1px solid transparent;}
.btn-subtle{background:var(--surface2); color:var(--text);}
.btn-danger{background:var(--danger);}
.btn-small{font-size:12.5px; padding:6px 10px;}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--surface2);}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
.empty{text-align:center; padding:40px 20px; color:var(--text-faint); font-size:13.5px;}

.row{display:flex; align-items:center;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}

.avatar{
  border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center;
  font-weight:800; flex-shrink:0; border:1.5px solid var(--text-dim);
}

/* Layout */
.shell{display:flex; min-height:100vh;}
.sidebar{
  width:220px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0; z-index:10;
}
.sidebar-brand{display:flex; align-items:center; gap:9px; padding:18px 18px 14px;}
.sidebar-logo{width:30px;height:30px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-nav{flex:1; padding:8px 10px; overflow-y:auto;}
.nav-item{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; margin-bottom:2px; font-size:13.5px; font-weight:500; color:var(--text-dim);}
.nav-item.active{background:var(--accent); color:#fff; font-weight:700;}
.sidebar-footer{padding:12px; border-top:1px solid var(--border);}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; border-bottom:1px solid var(--border);}
.view{padding:28px;}
.content{flex:1; min-width:0;}

.modal-overlay{position:fixed; inset:0; background:rgba(8,9,11,.72); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:14px; width:480px; max-width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:2;}
.modal-body{padding:20px;}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:200; background:var(--surface2); color:var(--text); border:1px solid var(--border-light); padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.4);}
.toast.error{background:var(--danger); border-color:var(--danger);}

.gif-thumb{width:44px; height:44px; border-radius:8px; object-fit:cover; background:var(--surface2); border:1px solid var(--border);}
.gif-preview{width:100%; max-width:220px; border-radius:10px; border:1px solid var(--border); background:var(--surface2);}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:100%; max-width:380px;}
.login-demo{margin-top:18px; font-size:11.5px; color:var(--text-faint); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px;}

/* Responsive */
@media (max-width: 820px){
  .shell{flex-direction:column;}
  .sidebar{width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto;}
  .sidebar-brand{padding:12px 14px;}
  .sidebar-nav{display:flex; flex:none; padding:6px 10px; gap:2px;}
  .nav-item{flex-direction:column; gap:3px; font-size:10.5px; padding:8px 10px; white-space:nowrap;}
  .sidebar-footer{display:none;}
  .view{padding:16px;}
  .topbar{padding:14px 16px;}
  .grid-2{grid-template-columns:1fr;}
}