:root{--accent:#2563eb;--accent-hover:#1d4ed8;--bg:#f8fafc;--muted:#6b7280;--border:#e5e7eb;--card:#fff;--text:#0f172a;--shadow:rgba(0,0,0,0.05);--header-height:61px;}
*{box-sizing:border-box;}
body{font-family:'Inter',sans-serif;margin:0;background:var(--bg);color:var(--text);line-height:1.6;}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:linear-gradient(90deg,#dbeafe,#eff6ff);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 4px var(--shadow);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;transition:transform .2s;}
.brand:hover{transform:scale(1.02);}
.brand img{width:40px;height:40px;border-radius:8px;object-fit:cover;}
#quickToolsBtn{background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;display:flex;align-items:center;gap:6px;cursor:pointer;transition:background .2s;}
#quickToolsBtn:hover{background:var(--accent-hover);}
main{max-width:950px;margin:20px auto;padding:0 14px;}
.card{background:var(--card);padding:20px;border-radius:12px;box-shadow:0 4px 12px var(--shadow);margin-bottom:16px;}
.card h5{margin:0 0 16px 0;font-size:1.2rem;color:var(--text);}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.info-item{display:flex;align-items:center;gap:10px;background:#f9fafb;border-radius:8px;padding:12px;cursor:pointer;transition:all .2s;border:1px solid transparent;}
.info-item:hover{background:#e0ecff;border-color:var(--accent);transform:translateY(-2px);}
.info-item i{color:var(--accent);font-size:1.2rem;}
.info-item strong{font-size:1rem;display:block;}
.info-sub{font-size:0.8rem;color:var(--muted);margin-top:2px;}
.search-wrapper{position:relative;margin-bottom:16px;}
.search-input{width:100%;border:2px solid var(--border);border-radius:8px;padding:12px 45px 12px 12px;font-size:1rem;transition:border .2s;}
.search-input:focus{outline:none;border-color:var(--accent);}
#clearSearch,#clearQuickSearch{position:absolute;top:50%;right:10px;transform:translateY(-50%);border:none;background:transparent;cursor:pointer;width:36px;height:36px;display:none;color:var(--muted);transition:color .2s;}
#clearSearch:hover,#clearQuickSearch:hover{color:var(--text);}
.file-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px;transition:all .2s;}
.file-row:hover{box-shadow:0 4px 12px var(--shadow);transform:translateX(4px);}
.file-row img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0;}
.file-title{flex:1;font-weight:600;min-width:0;}
.file-title a{text-decoration:none;color:var(--text);display:block;word-break:break-word;}
.file-title a:hover{color:var(--accent);text-decoration:underline;}
.empty-state{text-align:center;padding:40px 20px;color:var(--muted);}
.empty-state i{font-size:3rem;margin-bottom:10px;opacity:0.5;}
footer{text-align:center;color:var(--muted);font-size:0.9rem;margin:20px 0;padding:20px;}

/* MOBILE: Panel xuất hiện DƯỚI header */
#quickToolsPanel{
  position:fixed;
  top:calc(-100% - var(--header-height));
  right:0;
  width:100%;
  background:var(--card);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  transition:top .3s ease;
  padding:20px;
  z-index:50;
  border-radius:0 0 14px 14px;
  max-height:calc(85vh - var(--header-height));
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
#quickToolsPanel.active{
  top:var(--header-height);
}

#closeQuickTools{
  position:absolute;
  top:12px;
  right:12px;
  border:none;
  background:transparent;
  font-size:1.5rem;
  color:var(--muted);
  cursor:pointer;
  width:36px;
  height:36px;
  transition:color .2s;
  z-index:1;
}
#closeQuickTools:hover{color:var(--text);}

#quickToolsPanel h5{
  margin:0 0 16px 0;
  padding-right:30px;
  font-size:1.2rem;
  flex-shrink:0;
}

.quick-tools-scroll{
  flex:1;
  overflow-y:auto;
  padding-right:4px;
}

.quick-tools-scroll::-webkit-scrollbar{width:6px;}
.quick-tools-scroll::-webkit-scrollbar-track{background:transparent;}
.quick-tools-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.quick-tools-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted);}

.quick-category{
  font-size:0.85rem;
  font-weight:700;
  color:var(--accent);
  margin:16px 0 8px 0;
  padding:8px 12px;
  background:linear-gradient(90deg,#dbeafe,transparent);
  border-left:3px solid var(--accent);
  border-radius:4px;
  cursor:pointer;
  user-select:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:all .2s;
}
.quick-category:hover{
  background:linear-gradient(90deg,#bfdbfe,transparent);
}
.quick-category:first-child{
  margin-top:0;
}
.quick-category i.toggle-icon{
  transition:transform .3s;
  font-size:0.9rem;
}
.quick-category.collapsed i.toggle-icon{
  transform:rotate(-90deg);
}

.category-content{
  max-height:1000px;
  overflow:hidden;
  transition:max-height .3s ease, opacity .3s ease;
  opacity:1;
}
.category-content.collapsed{
  max-height:0;
  opacity:0;
}

.quick-btn{
  width:100%;
  text-align:left;
  background:#eff6ff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:8px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:all .2s;
}
.quick-btn:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  transform:translateX(4px);
}
.quick-btn i{
  width:20px;
  text-align:center;
}

.loading{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.6s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg);}}

/* DESKTOP: Sidebar từ bên phải, KHÔNG che header */
@media(min-width:601px){
  #quickToolsPanel{
    width:320px;
    height:calc(100vh - var(--header-height));
    top:var(--header-height);
    right:-320px;
    border-left:1px solid var(--border);
    box-shadow:-4px 0 12px rgba(0,0,0,0.1);
    border-radius:0;
    transition:right .3s;
    max-height:calc(100vh - var(--header-height));
  }
  #quickToolsPanel.active{
    right:0;
    top:var(--header-height);
  }
}

@media(max-width:600px){
  .info-grid{grid-template-columns:1fr;}
  .brand span{display:none;}
}