:root{
 --bg:#f6f7fb;
 --card:#ffffff;
 --border:#e5e7eb;
 --text:#111827;
 --muted:#6b7280;
 --accent:#2563eb;
 --accent2:#1d4ed8;
}

*{box-sizing:border-box}
body{
 margin:0;
 font-family:Inter,system-ui,Arial;
 background:var(--bg);
 color:var(--text);
}

.topbar{
 background:#ffffff;
 border-bottom:1px solid var(--border);
 padding:14px 22px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.logo{
 font-weight:700;
 font-size:18px;
}

.nav a{
 margin-left:10px;
 text-decoration:none;
 padding:8px 14px;
 border-radius:8px;
 border:1px solid var(--border);
 color:var(--text);
 background:#fff;
}

.nav a:hover{
 background:#f1f5f9;
}

.container{
 max-width:1200px;
 margin:30px auto;
 padding:0 20px;
}

.card{
 background:var(--card);
 border:1px solid var(--border);
 border-radius:14px;
 padding:22px;
 box-shadow:0 2px 6px rgba(0,0,0,.04);
}

input,select,textarea{
 width:100%;
 padding:10px 12px;
 border-radius:8px;
 border:1px solid var(--border);
 background:#fff;
 color:var(--text);
}

input:focus,select:focus,textarea:focus{
 outline:none;
 border-color:var(--accent);
}

label{
 font-size:14px;
 margin-bottom:6px;
 display:block;
 color:var(--muted);
}

button{
 background:var(--accent);
 color:#fff;
 border:none;
 padding:10px 16px;
 border-radius:8px;
 cursor:pointer;
 font-weight:600;
}

button:hover{
 background:var(--accent2);
}


 .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr;}
}
@media (max-width:1000px){
 .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
 .grid{grid-template-columns:1fr;}
}


.tile{
 background:#fff;
 border:1px solid var(--border);
 border-radius:12px;
 padding:16px;
}

.tag{
 display:inline-block;
 background:#eef2ff;
 color:#3730a3;
 padding:3px 8px;
 border-radius:6px;
 font-size:12px;
 margin-right:4px;
}

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

.footer{
 text-align:center;
 margin:40px 0;
 color:#9ca3af;
 font-size:13px;
}

/* UI helpers */
.h1{font-size:22px;font-weight:800;margin:0 0 14px 0;}
.h2{font-size:18px;font-weight:800;margin:0 0 8px 0;}

.btn{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 text-decoration:none;
 padding:10px 14px;
 border-radius:10px;
 border:1px solid var(--border);
 background:#fff;
 color:var(--text);
 font-weight:600;
 cursor:pointer;
}
.btn:hover{background:#f1f5f9;}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.primary:hover{background:var(--accent2); border-color:var(--accent2);}

.toolbar{display:flex;flex-direction:column;gap:12px;}
.toolbar-main{display:flex;gap:10px;align-items:center;}
.toolbar-main .input{flex:1;}

.filters{
 border:1px solid var(--border);
 border-radius:12px;
 padding:10px 12px;
 background:#fff;
}
.filters > summary{
 list-style:none;
 cursor:pointer;
 font-weight:700;
 color:var(--text);
 display:flex;
 align-items:center;
 gap:10px;
}
.filters > summary::-webkit-details-marker{display:none;}
.filters > summary:after{
 content:"▾";
 margin-left:auto;
 color:var(--muted);
}
.filters[open] > summary:after{content:"▴";}
.filters-grid{
 margin-top:12px;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:12px 14px;
}
.filters-actions{
 display:flex;
 gap:10px;
 align-items:end;
}
@media (max-width: 840px){
 .toolbar-main{flex-direction:column; align-items:stretch;}
 .filters-grid{grid-template-columns:1fr;}
 .filters-actions{align-items:stretch;}
}

.badge{
 display:inline-flex;
 align-items:center;
 padding:3px 8px;
 border-radius:999px;
 font-size:12px;
 border:1px solid var(--border);
 background:#fff;
 color:var(--muted);
}
.badge.cat{background:#f8fafc;color:#334155;}
.tile-title{font-weight:800;font-size:16px;margin-bottom:6px;}
.tile-desc{color:var(--muted);font-size:13px;min-height:34px;margin-bottom:10px;}
.tile-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.tile-actions{display:flex;gap:8px;flex-wrap:wrap;}

.link{font-weight:700;font-size:18px;color:#111;text-decoration:none}
.link:hover{text-decoration:underline}


/* TILE IMPROVEMENTS */
.tile{
 min-height:190px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
}

.tile-title{
 font-size:22px;
 font-weight:700;
 margin-bottom:8px;
}

.tile-desc{
 font-size:14px;
 margin-bottom:18px;
 color:#555;
 max-width:90%;
}

.tile .btn{
 margin-top:auto;
}


/* TILE DESIGN */
.tile{
 min-height:190px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
}
.tile-title{
 font-size:22px;
 font-weight:700;
 margin-bottom:8px;
}
.tile-desc{
 font-size:14px;
 margin-bottom:18px;
 color:#555;
 max-width:90%;
}
.link{
 color:#111827;
 text-decoration:none;
}
.link:hover{ text-decoration:underline; }

/* PLUGIN DETAIL PAGE */
.plugin-head{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:22px;
}
.plugin-title{ font-size:28px; font-weight:700; }
.plugin-sub{ color:#666; margin-top:4px; }
.plugin-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:16px 30px;
 margin-bottom:30px;
}
.plugin-grid div{
 background:#fafafa;
 padding:12px 14px;
 border-radius:10px;
}
.plugin-grid span{
 display:block;
 font-size:12px;
 color:#666;
 margin-bottom:4px;
}
.section-title{
 font-size:18px;
 font-weight:700;
 margin:10px 0 14px;
}
.versions{
 width:100%;
 border-collapse:collapse;
 margin-bottom:24px;
}
.versions th{
 text-align:left;
 font-size:13px;
 color:#666;
 padding-bottom:8px;
 border-bottom:1px solid #eee;
}
.versions td{
 padding:10px 0;
 border-bottom:1px solid #f1f1f1;
}
.plugin-actions{
 display:flex;
 gap:10px;
 flex-wrap:wrap;
}