/* SCH Cloud Service Common UI v1
   PHP 7.3.2 era friendly: plain CSS only.
*/
:root{
  --sch-bg:#f4f7fb;
  --sch-nav:#111827;
  --sch-text:#1f2937;
  --sch-muted:#64748b;
  --sch-border:#dbe3ec;
  --sch-blue:#2563eb;
  --sch-green:#059669;
  --sch-soft:#eff6ff;
}
html,body{background:var(--sch-bg)!important;color:var(--sch-text)}
body{font-family:"Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif!important}
.top,.service-top{background:var(--sch-nav)!important;color:#fff!important}
.topin,.service-topin{max-width:1120px!important;margin:auto!important;padding:13px 18px!important;display:flex!important;align-items:center!important;gap:18px!important}
.brand,.service-brand{font-size:18px!important;font-weight:900!important;color:#fff!important;text-decoration:none!important}
.nav,.service-nav{display:flex!important;align-items:center!important;gap:14px!important;margin-left:auto!important;flex-wrap:wrap!important}
.nav a,.nav span,.service-nav a,.service-nav span,.service-nav-button{color:#e5e7eb!important;font-size:15px!important;text-decoration:none!important}
.wrap,.service-shell{max-width:1120px!important;width:min(1120px,calc(100% - 36px))!important;margin:0 auto!important;padding:26px 0 60px!important}
.card,.panel{background:#fff!important;border:1px solid var(--sch-border)!important;border-radius:14px!important;box-shadow:0 8px 26px rgba(15,23,42,.04)!important}
.service-title,.service-intro h1{font-size:30px!important;line-height:1.25!important;margin:0 0 6px!important}
.service-desc,.service-intro p{color:var(--sch-muted)!important;line-height:1.65!important}
.search,.searchbar{display:flex!important;gap:10px!important;margin:18px 0 14px!important}
.search input,.searchbar input{flex:1!important;padding:12px 14px!important;border:1px solid #cbd5e1!important;border-radius:10px!important;font:inherit!important;background:#fff!important}
.search button,.searchbar button{background:var(--sch-nav)!important;color:#fff!important;border-radius:10px!important}
.quick-tags{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:10px 0 18px!important}
.tag-pill{display:inline-flex!important;align-items:center!important;padding:4px 10px!important;border-radius:999px!important;background:var(--sch-soft)!important;color:#1d4ed8!important;font-size:12px!important;font-weight:700!important;text-decoration:none!important}
.tag-pill.active{background:#1d4ed8!important;color:#fff!important}
.catalog-head{color:var(--sch-muted)!important;font-size:12px!important;font-weight:700!important}
.catalog-list{display:flex!important;flex-direction:column!important;gap:8px!important}
.catalog-row{background:#fff!important;border:1px solid #dfe7ef!important;border-radius:10px!important}
.catalog-title{font-size:17px!important;font-weight:800!important;line-height:1.35!important}
.catalog-desc,.catalog-meta,.meta,.muted{color:var(--sch-muted)!important}
.catalog-qr img{display:block!important;width:68px!important;height:68px!important;margin:auto!important}
.catalog-actions{display:flex!important;gap:6px!important;flex-wrap:wrap!important;justify-content:flex-end!important}
.catalog-empty,.catalog-empty-row{background:#fff!important;border:1px solid #dfe7ef!important;border-radius:10px!important;padding:22px 14px!important;color:var(--sch-muted)!important;box-shadow:0 8px 26px rgba(15,23,42,.04)!important}
.btn,button{border-radius:9px}
@media(max-width:980px){
  .catalog-actions{justify-content:flex-start!important}
}
@media(max-width:680px){
  .topin,.service-topin{align-items:flex-start!important}
  .nav,.service-nav{gap:10px!important}
  .wrap,.service-shell{width:min(100% - 24px,1120px)!important;padding:18px 0 40px!important}
}