/* AppVault Professional UI — clean, content-first, no gradients/3D/cartoon effects */
:root{
  --bg:#f7f7f5;
  --bg-soft:#f1f2f3;
  --surface:#ffffff;
  --surface-strong:#ffffff;
  --border:#dedfe2;
  --border-strong:#c7c9ce;
  --text:#15171a;
  --muted:#666b73;
  --accent:#111827;
  --accent-2:#111827;
  --success:#18794e;
  --danger:#b42318;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.04);
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;
  --max:1180px;
}

html{color-scheme:light!important;scroll-behavior:smooth}
body{
  margin:0!important;
  min-height:100vh;
  background:var(--bg)!important;
  background-image:none!important;
  color:var(--text)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{display:none!important}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.narrow{width:min(calc(100% - 40px),780px);margin-inline:auto}
.hidden{display:none!important}
.muted{color:var(--muted)!important}

/* Header */
.site-header{
  position:sticky!important;top:0;z-index:50;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:none!important;
  border-bottom:1px solid var(--border)!important;
  box-shadow:none!important;
}
.nav{min-height:66px!important;display:flex;align-items:center;gap:26px!important}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800!important;font-size:19px!important;letter-spacing:-.025em!important;color:#111!important}
.brand-mark{
  width:32px!important;height:32px!important;border-radius:9px!important;
  background:#111!important;background-image:none!important;box-shadow:none!important;
  position:relative;overflow:hidden
}
.brand-mark::before{
  content:"";position:absolute!important;width:14px!important;height:14px!important;left:7px!important;top:7px!important;
  border:2px solid #fff!important;border-radius:50%!important;background:transparent!important
}
.brand-mark::after{
  content:"";position:absolute!important;width:4px!important;height:4px!important;left:14px!important;top:14px!important;
  border:0!important;border-radius:50%!important;background:#fff!important
}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-links a{font-size:14px!important;font-weight:600!important;color:#555b64!important;padding:7px 0!important}
.nav-links a:hover,.nav-links a.active{color:#111!important}
.nav-actions{display:flex;align-items:center;gap:10px}
.menu-btn,.icon-btn{
  border:1px solid var(--border)!important;background:#fff!important;color:#111!important;border-radius:9px!important;
  box-shadow:none!important
}
.mobile-menu{background:#fff!important;border-top:1px solid var(--border)!important;padding:10px 0 16px!important}
.mobile-menu a{color:#3f444c!important;border-radius:8px!important;padding:11px 12px!important}
.mobile-menu a:hover,.mobile-menu a.active{background:#f3f4f6!important;color:#111!important}

/* Buttons */
.btn{
  min-height:44px!important;padding:0 17px!important;border-radius:9px!important;
  font-weight:700!important;font-size:14px!important;box-shadow:none!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease!important;
  transform:none!important
}
.btn:hover{transform:none!important}
.btn-primary{background:#111!important;background-image:none!important;color:#fff!important;border:1px solid #111!important;box-shadow:none!important}
.btn-primary:hover{background:#292929!important}
.btn-secondary{background:#fff!important;color:#1f2328!important;border:1px solid var(--border)!important}
.btn-secondary:hover{border-color:#b8bbc1!important;background:#fafafa!important}
.btn-danger{background:#fff!important;color:var(--danger)!important;border:1px solid #e8b4b0!important}
.btn-small{min-height:34px!important;padding:0 11px!important;border-radius:7px!important;font-size:12px!important}

/* Labels / headings */
.eyebrow{
  display:inline-flex!important;align-items:center!important;gap:0!important;
  font-size:12px!important;font-weight:750!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#70757d!important
}
.eyebrow::before{display:none!important}
.link-arrow{color:#30343a!important;font-weight:650!important;font-size:14px!important}
.link-arrow:hover{text-decoration:underline}

/* Home hero */
.hero{padding:78px 0 54px!important;overflow:visible!important;background:#fff!important;border-bottom:1px solid var(--border)!important}
.hero-grid{display:block!important;max-width:900px!important}
.hero-simple{max-width:850px}
.hero h1{
  max-width:800px!important;margin:14px 0 18px!important;
  font-size:clamp(42px,7vw,72px)!important;line-height:1.02!important;letter-spacing:-.055em!important;font-weight:800!important;color:#111!important
}
.hero h1 span{color:#111!important;background:none!important;-webkit-text-fill-color:initial!important}
.hero-copy{max-width:720px!important;color:#5e636b!important;font-size:clamp(17px,2vw,20px)!important;line-height:1.65!important}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px!important}
.hero-search{
  display:flex;align-items:center;gap:8px;max-width:680px;margin-top:28px;padding:6px;
  background:#fff;border:1px solid var(--border-strong);border-radius:12px
}
.hero-search input{flex:1;min-width:0;min-height:46px;border:0;outline:0;padding:0 12px;background:transparent;color:#111;font-size:15px}
.hero-search .btn{min-width:105px}
.hero-meta{display:flex;flex-wrap:wrap;gap:24px!important;margin-top:25px!important;color:#737880!important;font-size:13px!important}
.hero-meta b{color:#30343a!important;font-weight:700}
.vault-wrap,.vault-scene,.vault-glow,.vault-core,.orbit,.float-tile{display:none!important}

/* Sections */
.section{padding:64px 0!important}
.section-tight{padding:38px 0 66px!important}
.section+.section{border-top:1px solid #ececef}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px!important}
.section-head h2{margin:6px 0 0!important;font-size:clamp(27px,4vw,38px)!important;line-height:1.15!important;letter-spacing:-.035em!important;color:#111!important}
.section-head p{max-width:600px;color:var(--muted)!important;line-height:1.65!important;font-size:14px!important}

/* App cards — compact, store-like */
.apps-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
.app-card{
  position:relative!important;display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;
  column-gap:14px!important;row-gap:3px!important;min-width:0!important;padding:17px!important;
  border-radius:12px!important;background:#fff!important;background-image:none!important;border:1px solid var(--border)!important;
  box-shadow:none!important;overflow:hidden!important;transform:none!important;transform-style:flat!important;
  transition:border-color .15s ease,box-shadow .15s ease!important
}
.app-card::after{display:none!important}
.app-card:hover{transform:none!important;border-color:#b9bdc4!important;box-shadow:var(--shadow)!important}
.app-icon{grid-row:1/4;width:64px!important;height:64px!important;border-radius:14px!important;object-fit:cover!important;background:#eceef1!important;background-image:none!important;box-shadow:none!important;border:1px solid #e2e4e7}
.app-icon.fallback{display:grid!important;place-items:center!important;font-size:23px!important;font-weight:800!important;color:#555!important}
.app-card h3{grid-column:2;margin:0!important;font-size:16px!important;line-height:1.35!important;letter-spacing:-.015em!important;color:#17191c!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-card p{grid-column:2;margin:0!important;min-height:0!important;color:#6a6f77!important;font-size:12.5px!important;line-height:1.45!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.app-card-meta{grid-column:2;margin-top:7px!important;display:flex!important;justify-content:flex-start!important;gap:12px!important;color:#858a91!important;font-size:11px!important;white-space:nowrap;overflow:hidden}
.app-card-meta span{overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-flex!important;align-items:center!important;min-height:25px!important;padding:0 8px!important;border-radius:6px!important;background:#f1f2f4!important;border:1px solid #e1e3e6!important;color:#555b63!important;font-size:11px!important;font-weight:650!important}

/* Categories */
.category-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.category-card{padding:18px!important;min-height:145px!important;border-radius:12px!important;background:#fff!important;border:1px solid var(--border)!important;box-shadow:none!important;transition:border-color .15s ease,box-shadow .15s ease!important;transform:none!important}
.category-card:hover{transform:none!important;background:#fff!important;border-color:#b9bdc4!important;box-shadow:var(--shadow)!important}
.category-card .cat-icon{width:38px!important;height:38px!important;border-radius:9px!important;display:grid!important;place-items:center!important;background:#f0f1f3!important;color:#3f444b!important;font-size:17px!important}
.category-card h3{margin:14px 0 6px!important;font-size:16px!important;color:#17191c!important}
.category-card p{margin:0!important;color:#71767e!important;font-size:12.5px!important;line-height:1.45!important}
.category-card small{display:block!important;margin-top:10px!important;color:#8b9097!important;font-size:11px!important}

/* Page headers */
.page-hero{padding:52px 0 25px!important;background:#fff!important;border-bottom:1px solid #ececef!important}
.page-hero h1{margin:9px 0 10px!important;font-size:clamp(36px,6vw,58px)!important;line-height:1.05!important;letter-spacing:-.05em!important;color:#111!important}
.page-hero p{max-width:700px;color:#666b73!important;line-height:1.65!important;font-size:16px!important}

/* Search / forms */
.toolbar{display:grid!important;grid-template-columns:minmax(260px,1fr) 220px 190px!important;gap:10px!important;margin-bottom:22px!important}
.field,.search-field,textarea.field,select.field{
  width:100%!important;min-height:46px!important;border-radius:9px!important;border:1px solid var(--border-strong)!important;
  background:#fff!important;background-image:none!important;color:#181a1d!important;box-shadow:none!important;padding:0 13px!important;outline:none!important
}
textarea.field{min-height:130px!important;padding:12px 13px!important;resize:vertical}
.field:focus,.search-field:focus,textarea.field:focus,select.field:focus{border-color:#7c8189!important;box-shadow:0 0 0 3px rgba(17,24,39,.07)!important}
.field::placeholder,.search-field::placeholder{color:#a0a4aa!important}
.form-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.form-group{min-width:0}
.form-group.full{grid-column:1/-1}
.form-group label{display:block;margin-bottom:7px;color:#33373d!important;font-size:12px!important;font-weight:700!important}
.help{display:block;margin-top:6px;color:#838890!important;font-size:11px!important;line-height:1.45!important}

/* App detail */
.app-detail{display:grid!important;grid-template-columns:minmax(0,1.6fr) minmax(300px,.75fr)!important;gap:20px!important;align-items:start!important}
.detail-main{min-width:0}
.detail-side{position:sticky;top:88px}
.detail-card,.content-block,.info-card,.admin-panel,.stat-card,.login-card{
  background:#fff!important;background-image:none!important;border:1px solid var(--border)!important;border-radius:14px!important;box-shadow:none!important
}
.detail-card{padding:22px!important}
.app-heading{display:flex!important;align-items:center!important;gap:18px!important}
.app-heading .app-icon{width:84px!important;height:84px!important;border-radius:18px!important;flex:0 0 auto}
.app-heading h1{margin:6px 0 7px!important;font-size:clamp(27px,4vw,38px)!important;line-height:1.1!important;letter-spacing:-.035em!important;color:#111!important}
.app-heading p{margin:0;color:#666b73!important;line-height:1.5!important}
.content-block{padding:22px!important;margin-top:16px!important}
.content-block h2{margin:0 0 15px!important;font-size:20px!important;letter-spacing:-.02em!important;color:#17191c!important}
.prose{white-space:pre-line;color:#4f545b!important;line-height:1.75!important;font-size:14px!important}
.screenshot-strip{display:flex!important;gap:10px!important;overflow-x:auto!important;padding-bottom:6px!important;scroll-snap-type:x proximity}
.screenshot-strip img{height:390px!important;width:auto!important;max-width:none!important;border-radius:12px!important;border:1px solid var(--border)!important;scroll-snap-align:start}
.download-card{padding:20px!important}
.meta-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;border:1px solid #e4e5e7!important;border-radius:10px!important;overflow:hidden!important}
.meta-item{padding:12px!important;border-bottom:1px solid #e8e9eb!important;min-width:0}
.meta-item:nth-child(odd){border-right:1px solid #e8e9eb!important}
.meta-item:nth-last-child(-n+2){border-bottom:0!important}
.meta-item small{display:block;color:#858a91!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin-bottom:4px!important}
.meta-item b{display:block;color:#30343a!important;font-size:12px!important;overflow-wrap:anywhere!important}
.download-card .btn-primary{width:100%!important}
.download-note{color:#858a91!important;font-size:11px!important;line-height:1.5!important}
.ad-slot{min-height:0!important;background:transparent!important;border:0!important}

/* Editorial info cards */
.info-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
.info-card{padding:20px!important}
.info-card h3{margin:0 0 8px!important;font-size:16px!important;color:#1c1f23!important}
.info-card p{margin:0!important;color:#6e737b!important;font-size:13px!important;line-height:1.6!important}

/* Loading */
.empty-state{grid-column:1/-1;padding:32px!important;border:1px dashed #cfd1d5!important;border-radius:12px!important;background:#fff!important;color:#71767d!important;text-align:center!important}
.empty-state b{display:block;margin-bottom:6px;color:#33373c!important}
.skeleton{min-height:112px!important;border-radius:12px!important;background:#eceef0!important;background-image:none!important;animation:none!important}
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.reveal.in{opacity:1!important;transform:none!important}
.tilt{transform:none!important;transform-style:flat!important}

/* Footer */
.site-footer{margin-top:24px!important;padding:48px 0 24px!important;background:#fff!important;border-top:1px solid var(--border)!important;color:#25282d!important}
.footer-grid{display:grid!important;grid-template-columns:1.6fr repeat(3,1fr)!important;gap:36px!important}
.footer-brand p{max-width:390px;color:#747980!important;font-size:13px!important;line-height:1.65!important}
.footer-col h4{margin:0 0 12px!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:#777c83!important}
.footer-col a{display:block;margin:9px 0!important;color:#464b52!important;font-size:13px!important}
.footer-col a:hover{text-decoration:underline;color:#111!important}
.footer-bottom{display:flex!important;justify-content:space-between!important;gap:20px!important;margin-top:36px!important;padding-top:20px!important;border-top:1px solid #ececef!important;color:#92969d!important;font-size:11px!important}

/* Admin */
body[data-page="admin"]{background:#f4f5f6!important}
.login-wrap{min-height:100vh!important;display:grid!important;place-items:center!important;padding:24px!important;background:#f4f5f6!important}
.login-card{width:min(100%,420px)!important;padding:28px!important}
.login-card h1{margin:24px 0 8px!important;font-size:28px!important;letter-spacing:-.035em!important;color:#111!important}
.login-card p{color:#71767e!important;line-height:1.55!important}
.admin-shell{display:grid!important;grid-template-columns:230px minmax(0,1fr)!important;min-height:100vh!important;background:#f4f5f6!important}
.admin-side{position:sticky!important;top:0!important;height:100vh!important;padding:24px 18px!important;background:#fff!important;border-right:1px solid var(--border)!important}
.admin-nav{display:grid!important;gap:5px!important;margin-top:28px!important}
.admin-nav button{width:100%!important;text-align:left!important;padding:10px 11px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#5d626a!important;font-weight:650!important;cursor:pointer!important}
.admin-nav button:hover,.admin-nav button.active{background:#f0f1f3!important;color:#111!important}
.admin-main{min-width:0!important;padding:28px!important;max-width:1240px!important;width:100%!important;margin:0 auto!important}
.admin-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin-bottom:24px!important}
.admin-top h1{margin:5px 0 0!important;font-size:30px!important;letter-spacing:-.04em!important;color:#111!important}
.stats-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:12px!important;margin-bottom:16px!important}
.stat-card{padding:18px!important}
.stat-card small{display:block;color:#7d8289!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.05em!important}
.stat-card b{display:block;margin-top:6px;color:#16181b!important;font-size:27px!important;letter-spacing:-.04em!important}
.admin-panel{padding:20px!important;margin-bottom:16px!important;overflow:auto!important}
.admin-panel h2{margin:0 0 16px!important;font-size:20px!important;letter-spacing:-.025em!important;color:#17191c!important}
.admin-table{width:100%!important;border-collapse:collapse!important;min-width:620px!important}
.admin-table th{padding:10px 9px!important;text-align:left!important;color:#7e838a!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.05em!important;border-bottom:1px solid var(--border)!important}
.admin-table td{padding:12px 9px!important;color:#4f545b!important;font-size:12px!important;border-bottom:1px solid #ececef!important;vertical-align:middle!important}
.table-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
.progress{height:8px!important;border-radius:999px!important;background:#e8eaed!important;overflow:hidden!important}
.progress span{display:block;height:100%;background:#111!important;background-image:none!important}
.toast{position:fixed!important;right:18px!important;bottom:18px!important;z-index:100!important;padding:11px 14px!important;border-radius:9px!important;background:#111!important;color:#fff!important;box-shadow:var(--shadow)!important;font-size:13px!important;opacity:0!important;pointer-events:none!important;transform:translateY(8px)!important;transition:.18s ease!important}
.toast.show{opacity:1!important;transform:none!important}
.toast.error{background:#9f241b!important}
dialog{border:0!important;padding:0!important;border-radius:14px!important;background:transparent!important;max-width:min(760px,calc(100% - 24px))!important;width:100%!important}
dialog::backdrop{background:rgba(17,24,39,.32)!important}
.dialog-inner{padding:22px!important;background:#fff!important;border:1px solid var(--border)!important;border-radius:14px!important;color:#222!important}
.dialog-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:18px!important}
.dialog-head h2{margin:0!important;color:#111!important}

/* Strip every old gradient/glow/3D visual */
.hero *, .app-card, .category-card, .detail-card, .content-block, .info-card, .admin-panel, .stat-card, .login-card,
.btn-primary, .brand-mark, .field, .search-field, .site-header{background-image:none!important;text-shadow:none!important}
@keyframes sceneFloat{from{transform:none}to{transform:none}}
@keyframes orbitSpin{from{transform:none}to{transform:none}}

@media (max-width:980px){
  .apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .app-detail{grid-template-columns:1fr!important}
  .detail-side{position:static!important}
  .toolbar{grid-template-columns:1fr 1fr!important}
  .toolbar .search-field{grid-column:1/-1!important}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr!important}
  .footer-col:last-child{grid-column:2/4!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)!important}
}

@media (max-width:760px){
  .container,.narrow{width:min(calc(100% - 28px),var(--max))!important}
  .nav{min-height:60px!important}
  .nav-links,.nav-actions{display:none!important}
  .menu-btn{display:inline-flex!important;margin-left:auto!important}
  .hero{padding:50px 0 38px!important}
  .hero h1{font-size:clamp(38px,12vw,56px)!important}
  .hero-search{display:grid!important;grid-template-columns:1fr!important;padding:5px!important}
  .hero-search .btn{width:100%!important}
  .section{padding:46px 0!important}
  .section-head{align-items:start!important;flex-direction:column!important;gap:9px!important}
  .apps-grid{grid-template-columns:1fr!important;gap:10px!important}
  .app-card{grid-template-columns:58px minmax(0,1fr)!important;padding:14px!important}
  .app-icon{width:58px!important;height:58px!important;border-radius:13px!important}
  .category-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .category-card{min-height:132px!important;padding:15px!important}
  .toolbar{grid-template-columns:1fr!important}
  .toolbar .search-field{grid-column:auto!important}
  .form-grid{grid-template-columns:1fr!important}
  .form-group.full{grid-column:auto!important}
  .app-heading{align-items:flex-start!important}
  .app-heading .app-icon{width:74px!important;height:74px!important}
  .screenshot-strip img{height:320px!important}
  .info-grid{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:24px!important}
  .footer-brand{grid-column:1/-1!important}
  .footer-col:last-child{grid-column:auto!important}
  .footer-bottom{flex-direction:column!important;gap:6px!important}
  .admin-shell{display:block!important}
  .admin-side{position:static!important;height:auto!important;padding:14px!important;border-right:0!important;border-bottom:1px solid var(--border)!important}
  .admin-side .brand{margin-bottom:10px!important}
  .admin-nav{display:flex!important;overflow-x:auto!important;margin-top:8px!important;gap:4px!important}
  .admin-nav button{width:auto!important;white-space:nowrap!important}
  .admin-main{padding:18px 14px!important}
  .admin-top{align-items:flex-start!important}
  .admin-top h1{font-size:25px!important}
  .stats-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .admin-panel{padding:15px!important}
}

@media (max-width:430px){
  .category-grid{grid-template-columns:1fr!important}
  .meta-grid{grid-template-columns:1fr!important}
  .meta-item{border-right:0!important;border-bottom:1px solid #e8e9eb!important}
  .meta-item:last-child{border-bottom:0!important}
  .footer-grid{grid-template-columns:1fr!important}
  .stats-grid{grid-template-columns:1fr 1fr!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
