:root{
  --bg:#ffffff;
  --text:#111827;   /* slate-900 */
  --muted:#6b7280;  /* slate-500 */
  --border:#d1d5db; /* gray-300 - đậm hơn */
  --sky:#38bdf8;    /* skyblue */
  --sky-strong:#0ea5e9;
  --card:#f8fafc;   /* slate-50 */
}

/* Dark theme variables */
.dark{
  --bg:#0b1220;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#334155;
  --card:#0f172a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Calibri,"Helvetica Neue",Arial; color:var(--text); background:var(--bg)}
/* Floating theme toggle */
.theme-toggle{position:fixed; right:16px; bottom:16px; z-index:9999; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:10px 12px; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.theme-toggle:hover{border-color:var(--sky); box-shadow:0 0 0 3px rgba(56,189,248,.25)}


/* ===== Welcome ===== */
.welcome{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--text); position:relative}
.welcome-content{display:flex; flex-direction:column; align-items:center; text-align:center; gap:30px; max-width:600px; width:100%; padding:40px}
.welcome-content .brand{font-size:1.5rem; margin-bottom:2rem; display:flex; align-items:center; gap:8px; color:#38bdf8; text-shadow:0 0 10px rgba(56,189,248,0.5)}
.welcome-content .brand .dot{width:10px;height:10px;border-radius:999px;background:#38bdf8;box-shadow:0 0 12px #38bdf8}
.welcome-content h1{font-size:3rem; margin:0; font-weight:700; line-height:1.2; color:var(--text); text-shadow:0 0 8px rgba(56,189,248,0.25); text-wrap:balance; word-break:keep-all}
.welcome-content p{font-size:1.2rem; margin-bottom:2rem; color:var(--text); line-height:1.4}
.welcome-content .btn{margin:20px 0; padding:16px 32px; font-size:1.1rem; border:1px solid var(--border); background:var(--card); color:var(--text); text-shadow:none; box-shadow:none}
.welcome-content .btn:hover{box-shadow:0 0 15px rgba(56,189,248,0.4); transform:translateY(-1px)}
.contact-info{margin-top:40px; font-size:0.9rem; color:#6b7280}
.contact-info a{color:#38bdf8; text-decoration:none; font-weight:600; text-shadow:0 0 8px #38bdf8}
.contact-info a:hover{text-decoration:underline; text-shadow:0 0 12px #38bdf8}

/* ===== Login Form Inline ===== */
.login-form{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; z-index:10}
.dark .login-form{background:rgba(15,23,42,0.85)}
.login-content{background:var(--card); padding:40px; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); border:1px solid var(--border); max-width:400px; width:90%}
.login-content .brand{font-size:1.2rem; margin-bottom:1rem; display:flex; align-items:center; gap:8px; color:var(--sky); text-shadow:0 0 10px rgba(56,189,248,0.5)}
.login-content h2{font-size:1.8rem; margin-bottom:0.5rem; color:var(--sky); text-shadow:0 0 10px rgba(56,189,248,0.5)}
.login-content p{margin-bottom:1.5rem; color:var(--text)}

/* Align login buttons: Turn Back left, Login right; add slight top space */
.login-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; width:100%}

/* ===== Common UI ===== */
.btn{border:1px solid var(--border); background:var(--card); padding:12px 20px; border-radius:12px; font-weight:700; cursor:pointer; transition:all .15s ease; color:var(--text)}
.btn:hover{box-shadow:0 0 0 2px rgba(56,189,248,.35); border-color:var(--sky); transform:translateY(-1px)}
.btn.primary{background:var(--card)}
.btn.primary.icon-left{display:inline-flex; align-items:center; gap:8px; text-decoration:none}
.btn.primary.icon-left svg{width:16px; height:16px}
.app-actions .btn{ text-decoration:none }
.btn.min{padding:7px 10px; border-radius:10px; font-size:12px}
.row{display:flex; gap:16px; flex-wrap:wrap}
.muted{color:var(--muted); font-size:12px}
.hidden{display:none !important}

/* ===== Overlay / Modal ===== */
.overlay{position:fixed; inset:0; display:grid; place-items:center; background:rgba(2,6,23,.5); backdrop-filter:blur(4px); z-index:20}
.modal{width:min(440px,92vw); background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 10px 40px rgba(2,132,199,.25)}
.modal h2{margin:0 0 6px 0}
.modal p{margin:0 0 14px 0; color:var(--muted)}
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.field input, .field textarea{padding:12px 14px; border:1px solid var(--border); border-radius:12px; outline:none}
.field input:focus, .field textarea:focus{border-color:var(--sky); box-shadow:0 0 0 3px rgba(56,189,248,.25)}
.error{color:#dc2626; font-size:13px; margin-top:6px}

/* ===== App Layout ===== */
.app{display:flex; height:100vh; overflow:hidden}
.sidebar{width:260px; border-right:1px solid var(--border); padding:16px; display:flex; flex-direction:column; gap:14px; background:var(--bg); position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto; transition:width 0.3s ease, padding 0.3s ease}
.sidebar.collapsed{width:70px; padding:16px 8px}
.sidebar.collapsed .tab-text,
.sidebar.collapsed .brand-text,
.sidebar.collapsed small,
.sidebar.collapsed .muted{display:none}
.sidebar.collapsed .tab-icon{font-size:20px}
.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg)}
.sidebar.collapsed .sidebar-header{flex-direction:column; gap:12px}
.sidebar.collapsed .brand{gap:0}
.sidebar-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px}
.sidebar-toggle{background:transparent; border:none; cursor:pointer; color:var(--muted); font-size:16px; padding:6px 8px; border-radius:8px; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.sidebar-toggle:hover{color:var(--sky); background:var(--card)}
.brand{font-weight:800; font-size:20px; display:flex; align-items:center; gap:10px}
.brand .dot{width:10px;height:10px;border-radius:999px;background:var(--sky);box-shadow:0 0 12px var(--sky)}
.tab{padding:10px 12px; border:1px solid var(--border); border-radius:12px; cursor:pointer; background:var(--card); font-weight:600; transition:all .18s ease; display:flex; align-items:center; justify-content:flex-start; gap:10px; color:var(--text)}
.tab-icon{font-size:16px; flex-shrink:0}
.tab-text{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left}
.sidebar.collapsed .tab{justify-content:center; padding:10px}
/* spacing between tabs is controlled by sidebar gap */
.tab small{color:var(--muted); font-weight:500; margin-left:auto}
.tab:hover{transform:translateY(-1px); box-shadow:0 0 0 2px rgba(56,189,248,.25), 0 8px 18px rgba(2,132,199,.12)}
.tab.active{border-color:var(--sky); box-shadow:0 0 0 2px rgba(56,189,248,.35), 0 10px 22px rgba(2,132,199,.16)}
.main{flex:1; display:flex; flex-direction:column; min-width:0; overflow-y:auto}
.topbar{display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:10}
.menu-toggle{display:none; background:none; border:none; font-size:20px; cursor:pointer; padding:8px; margin-right:10px; color:var(--text)}
.menu-toggle:hover{color:var(--sky)}
.search{flex:1; display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:14px; padding:10px 12px; background:var(--card); border-color:var(--sky); box-shadow:0 0 0 2px rgba(56,189,248,.25), 0 0 14px rgba(56,189,248,.18)}
.dark .search{border-color:var(--sky); box-shadow:0 0 0 2px rgba(56,189,248,.25), 0 0 14px rgba(56,189,248,.18)}
.search:focus-within{border-color:var(--sky); box-shadow:0 0 0 3px rgba(56,189,248,.25), 0 0 18px rgba(56,189,248,.20)}
.search input{border:none; outline:none; flex:1; font-size:14px; background:transparent; color:var(--text)}
.search input::placeholder{color:var(--muted)}
.search .clear{border:none; background:transparent; cursor:pointer; color:var(--text)}

/* Sign Out: neon only on hover/focus */
#logoutBtn{border-color:var(--border) !important; box-shadow:none}
#logoutBtn:hover, #logoutBtn:focus-visible{border-color:var(--sky) !important; box-shadow:0 0 0 3px rgba(56,189,248,.25), 0 0 18px rgba(56,189,248,.20)}

/* Persistent neon for buttons in dark mode */
.dark .welcome-content .btn,
.dark .login-content .btn.primary{border-color:var(--sky); box-shadow:0 0 0 2px rgba(56,189,248,.25), 0 0 14px rgba(56,189,248,.18)}

/* Light mode: show neon on hover/focus for login and welcome buttons */
.welcome-content .btn:focus-visible,
.login-content .btn.primary:focus-visible,
.welcome-content .btn:hover,
.login-content .btn.primary:hover{box-shadow:0 0 0 3px rgba(56,189,248,.25), 0 0 18px rgba(56,189,248,.20); border-color:var(--sky)}

/* Content container defaults to grid, but can switch to block for special tabs */
.content{flex:1; padding:20px; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; align-content:start}
.content.stack{display:block}  /* use full width for inner layouts (Application/Key/About) */
.content.about{display:block}

/* ===== Cards ===== */
.card{border:1px solid var(--border); border-radius:16px; background:var(--card); padding:14px; display:flex; flex-direction:column; gap:10px}
.card h3{margin:0; font-size:16px}

/* ===== Key list layout (vertical) ===== */
.key-item{border:1px dashed var(--border); border-radius:12px; padding:12px; background:var(--card); margin-bottom:12px}

/* ===== Application grid (4 columns desktop) ===== */
.app-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px}
.app-card{border:1px solid var(--border); border-radius:16px; background:var(--card); padding:14px; display:flex; flex-direction:column; gap:10px}
.app-card h3{margin:0; font-size:16px}
.app-actions{display:flex; gap:8px; align-items:center}
.bulkbar{display:flex; align-items:center; gap:12px}

/* ===== Search results grouping ===== */
.group{margin-bottom:20px}
.group h4{margin:0 0 10px 0; font-size:14px; color:var(--text)}

/* ===== Responsive ===== */
@media (max-width: 1280px){ 
  .app-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .card{font-size:14px}
  .card h3{font-size:16px}
  .card p{font-size:13px}
}

@media (max-width: 1024px){ 
  .app-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .content{padding:20px}
  .card{font-size:13px; padding:12px}
  .card h3{font-size:15px}
  .card p{font-size:12px}
  .search input{font-size:13px}
  
  /* Welcome responsive */
  .welcome-content{gap:30px; padding:30px}
  .welcome-content h1{font-size:2.5rem}
  .welcome-content .brand{font-size:1.3rem}
}
@media (max-width: 860px){ /* mobile-friendly sidebar */
  .app{flex-direction:column; height:100vh}
  .sidebar{width:280px; border-right:none; border-bottom:1px solid var(--border); position:fixed; top:0; left:0; z-index:1000; display:flex; flex-direction:column; gap:14px; padding:20px; background:var(--bg); box-shadow:0 2px 10px rgba(0,0,0,0.1); transform:translateX(-100%); transition:transform 0.3s ease; height:100vh; overflow-y:auto}
  .sidebar .brand{margin-bottom:10px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-toggle{display:none} /* Hide collapse button on mobile, use menu-toggle instead */
  .tab{flex:0 0 auto; white-space:nowrap; padding:12px 16px; font-size:16px; width:100%; justify-content:flex-start}
  .topbar{position:sticky; top:0; background:var(--bg); z-index:999; padding:12px 15px; display:flex; align-items:center; gap:10px}
  .content{padding:15px; font-size:14px}
  .menu-toggle{display:block; background:none; border:none; font-size:24px; cursor:pointer; padding:8px; margin-right:10px; color:var(--text); flex-shrink:0}
  
  /* Content responsive scaling */
  .card{width:100%; margin-bottom:15px; padding:15px; font-size:14px}
  .card h3{font-size:16px; margin-bottom:8px}
  .card p{font-size:13px; line-height:1.4}
  .card .btn{font-size:13px; padding:8px 12px}
  .group h4{font-size:13px; margin-bottom:8px}
  .group .card{width:100%; margin-bottom:10px}
  
  /* Search responsive */
  .search{width:100%; margin-bottom:10px}
  .search input{font-size:14px; padding:8px 12px}
  .search svg{width:16px; height:16px}
  
  /* Topbar responsive */
  .topbar .btn{font-size:12px; padding:6px 10px}
  .bulkbar{font-size:12px}
  .bulkbar .btn{font-size:11px; padding:5px 8px}
  
  /* Welcome responsive */
  .welcome-content{gap:25px; padding:20px}
  .welcome-content h1{font-size:2.2rem}
  .welcome-content p{font-size:1.1rem}
  .welcome-content .brand{font-size:1.2rem}
  .welcome-content .btn{padding:14px 28px; font-size:1rem}
  
  /* Login form responsive */
  .login-content{padding:30px; max-width:350px}
  .login-content h2{font-size:1.5rem}
  .login-content .brand{font-size:1.1rem}
}

@media (max-width: 480px){ /* very small mobile */
  .content{padding:10px; font-size:13px}
  .card{padding:12px; margin-bottom:12px; font-size:13px}
  .card h3{font-size:15px; margin-bottom:6px}
  .card p{font-size:12px; line-height:1.3}
  .card .btn{font-size:12px; padding:6px 10px}
  .search input{font-size:13px; padding:6px 10px}
  .topbar{padding:8px 10px}
  .topbar .btn{font-size:11px; padding:5px 8px}
  .sidebar{width:260px; padding:15px}
  .tab{font-size:15px; padding:10px 14px}
  
  /* Welcome responsive */
  .welcome-content{gap:20px; padding:20px}
  .welcome-content h1{font-size:2rem}
  .welcome-content p{font-size:1rem}
  .welcome-content .brand{font-size:1.1rem}
  .welcome-content .btn{padding:12px 24px; font-size:0.95rem}
  
  /* Login form responsive */
  .login-content{padding:25px; max-width:320px}
  .login-content h2{font-size:1.3rem}
  .login-content .brand{font-size:1rem}
}

@media (min-width: 861px){
  .menu-toggle{display:none}
  .sidebar{transform:translateX(0) !important}
}
@media (max-width: 640px){ 
  .app-grid{grid-template-columns:1fr}
}

/* ===== About full-width ===== */
.about-hero{padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--card)}
.about-hero h2{margin:0 0 8px 0; font-size:24px}
.about-hero p{margin:6px 0; color:#334155}
.about-hero ul{margin:10px 0 0 18px}


.contact-info{margin-top:30px; color:var(--muted); font-size:14px}
.contact-info a{color:var(--sky); text-decoration:none; font-weight:600}
.contact-info a:hover{text-decoration:underline}

/* ===== Tab buttons in modals ===== */
.tab-btn{padding:8px 16px; border:none; background:transparent; cursor:pointer; font-weight:600; color:var(--muted); transition:all .2s ease; border-bottom:2px solid transparent; font-size:14px}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--sky); border-bottom-color:var(--sky)}
.tab-content{margin-top:10px}

/* ===== Loading Screen ===== */
.loading-screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  z-index:9999;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}
.loading-screen.fade-out{
  opacity:0;
  visibility:hidden;
}
.loading-spinner{
  width:50px;
  height:50px;
  border:4px solid var(--border);
  border-top-color:var(--sky);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
.loading-text{
  margin-top:20px;
  font-size:16px;
  color:var(--muted);
  font-weight:600;
}

/* ===== Custom Scrollbar for Sidebar ===== */
.sidebar{
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.sidebar::-webkit-scrollbar{
  width:6px;
}
.sidebar::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:3px;
}
.sidebar::-webkit-scrollbar-thumb:hover{
  background:var(--muted);
}

/* ===== Better About Ankzres ===== */
.about-hero{
  padding:32px;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(135deg, var(--card) 0%, var(--bg) 100%);
  box-shadow:0 4px 24px rgba(0,0,0,0.06);
  transition:all 0.3s ease;
}
.about-hero:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
}
.about-hero h2{
  margin:0 0 16px 0;
  font-size:28px;
  color:var(--sky);
  display:flex;
  align-items:center;
  gap:12px;
}
.about-hero h2::before{
  content:'📦';
  font-size:32px;
}
.about-hero p{
  margin:12px 0;
  color:var(--text);
  line-height:1.6;
  font-size:15px;
}
.about-hero ul{
  margin:16px 0 0 24px;
  padding:0;
  list-style:none;
}
.about-hero ul li{
  margin:8px 0;
  padding-left:24px;
  position:relative;
  color:var(--text);
  line-height:1.6;
}
.about-hero ul li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--sky);
  font-weight:bold;
  font-size:18px;
}