*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei",Arial,sans-serif;background:#f3f7f4;color:#222}a{color:inherit;text-decoration:none}img{max-width:100%}.container{width:1180px;max-width:calc(100% - 24px);margin:0 auto}.muted{color:#8a9b8d}.topbar{background:#eef7ef;border-bottom:1px solid #d7ead9;font-size:13px;color:#4b6250}.topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}.top-links a{margin-left:18px}.header{padding:24px 0 18px;background:linear-gradient(180deg,#fff 0%,#f4fbf5 100%)}.header-inner{display:flex;align-items:center;gap:24px}.logo{display:flex;align-items:center;gap:10px;min-width:210px}.logo-mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#1fb15a,#0b8f3f);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800;box-shadow:0 8px 18px rgba(31,177,90,.24)}.logo-text strong{display:block;font-size:26px;color:#149447;letter-spacing:.5px}.logo-text span{font-size:12px;color:#78917d}.search-wrap{flex:1;max-width:700px}.search-box{display:flex;height:48px;border:2px solid #17a652;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 5px 14px rgba(23,166,82,.12)}.search-box select{width:110px;border:0;border-right:1px solid #dcebdd;padding:0 10px;outline:none;background:#f8fcf9;color:#31563b}.search-box input{flex:1;border:0;padding:0 16px;font-size:16px;outline:none}.search-box button{width:112px;border:0;background:#17a652;color:#fff;font-size:17px;font-weight:700;cursor:pointer}.region-switch{min-width:210px;background:#fff;border:1px solid #dcebdd;border-radius:10px;padding:9px 10px}.region-switch label{display:block;font-size:12px;color:#78917d;margin-bottom:4px}.region-switch select{width:100%;border:0;outline:none;color:#31563b}.main-nav{background:#18a957;border-bottom:3px solid #0e8f43}.main-nav-inner{display:flex;align-items:center;overflow-x:auto}.main-nav a{color:#fff;padding:13px 22px;font-size:15px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.18)}.main-nav a:hover,.main-nav a.active{background:#0f9345}.layout{display:grid;grid-template-columns:210px 1fr;gap:14px;padding:14px 0 28px}.side-card,.content-card{background:#fff;border:1px solid #dcebdd;border-radius:8px;overflow:hidden;margin-bottom:14px}.side-title,.section-title{min-height:42px;display:flex;align-items:center;padding:10px 14px;background:#f2faf3;border-bottom:1px solid #dcebdd;color:#168348;font-weight:700}.quick-list{padding:8px 10px}.quick-list a{display:flex;align-items:center;justify-content:space-between;padding:9px 8px;border-radius:6px;font-size:14px;color:#374d3c}.quick-list a:hover{background:#eff8f1;color:#129447}.quick-list small{color:#98a89c}.hot-sites{padding:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.site-card-wrap{position:relative}.fav-btn{position:absolute;right:6px;top:6px;z-index:2;border:0;background:rgba(255,255,255,.9);color:#e59b00;border-radius:50%;width:26px;height:26px;cursor:pointer}.site-item{min-height:94px;border:1px solid #e4eee5;border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .2s ease;background:#fff;padding:10px}.site-item:hover{transform:translateY(-2px);border-color:#18a957;box-shadow:0 8px 18px rgba(20,145,70,.10)}.site-icon,.site-fallback{width:30px;height:30px;border-radius:8px;margin-bottom:7px}.site-icon{object-fit:cover}.site-fallback,.mini-fallback{background:#17a652;color:#fff;display:grid;place-items:center;font-weight:700}.site-item strong{font-size:16px;margin-bottom:5px;color:#24352a}.site-item span{font-size:12px;color:#829487}.category-grid{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.category-body{padding:12px 14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px;font-size:14px}.category-link-wrap{display:flex;align-items:center;gap:5px;min-width:0}.fav-mini{border:0;background:#f3f8f4;color:#d99b00;border-radius:50%;width:22px;height:22px;cursor:pointer;flex:none}.category-link{display:flex;align-items:center;gap:7px;color:#35483a;padding:5px 0;min-width:0}.category-link:hover{color:#119146;text-decoration:underline}.category-link img,.category-link i{width:18px;height:18px;border-radius:5px;object-fit:cover;flex:none;font-size:12px;font-style:normal;background:#17a652;color:#fff;display:grid;place-items:center}.category-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.announce-list{padding:12px 14px;color:#485b4d;line-height:1.8}.friend-links{padding:12px 14px;display:flex;flex-wrap:wrap;gap:12px 20px;font-size:14px}.friend-links a{color:#37523d}.friend-links a:hover{color:#129447;text-decoration:underline}.ad-bar{padding:10px 0}.ad-item{margin:8px 0;text-align:center}.ad-item img{border-radius:8px;max-height:110px;object-fit:cover}.side-ad{padding-bottom:8px}.side-ad .ad-item{padding:8px}.side-ad img{width:100%}.empty,.empty-inline{color:#7c8d80;font-size:14px;padding:8px 0}.footer{padding:24px 0 36px;text-align:center;color:#7f927f;font-size:13px}

/* Admin */
.admin-page{background:#eef6ef}.admin-shell{width:1180px;max-width:calc(100% - 24px);margin:24px auto 50px}.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.admin-head h1{margin:0 0 6px;color:#128544}.admin-head p{margin:0;color:#718273}.admin-user{font-size:13px;color:#65766a;margin-right:10px}.admin-card{background:#fff;border:1px solid #dcebdd;border-radius:10px;padding:18px;margin-bottom:14px}.admin-card h2{margin:0 0 14px;color:#1a7d43;font-size:18px}.admin-grid{display:grid;grid-template-columns:360px 1fr;gap:14px}.full-span{grid-column:1/-1}.login-card{max-width:420px}.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.admin-tabs a{background:#fff;border:1px solid #dcebdd;border-radius:20px;padding:8px 12px;color:#176d3a}label{display:block;margin:10px 0 6px;color:#435546;font-size:14px}.input{width:100%;min-height:40px;border:1px solid #cfded1;border-radius:8px;padding:8px 10px;outline:none;font-size:14px;background:#fff}.textarea{min-height:90px;resize:vertical}.input:focus{border-color:#17a652;box-shadow:0 0 0 3px rgba(23,166,82,.12)}.btn{display:inline-block;border:0;border-radius:8px;padding:10px 14px;cursor:pointer;font-size:14px;margin-top:10px}.btn.primary{background:#17a652;color:#fff}.btn.secondary{background:#e6f2e8;color:#137b3d}.btn.danger{background:#fbe8e8;color:#b72121}.alert{padding:12px 14px;border-radius:8px;margin-bottom:14px}.alert.success{background:#e9f8ed;color:#137b3d;border:1px solid #bfe9c9}.alert.error{background:#fff0f0;color:#b72222;border:1px solid #f2c7c7}.form-row{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.checkbox{display:flex;align-items:center;gap:7px;margin-bottom:9px}.manage-category{border:1px solid #e4eee5;border-radius:10px;margin-bottom:12px;overflow:hidden}.manage-category-title{background:#f4faf5;padding:10px 12px;display:flex;justify-content:space-between;align-items:center}.manage-category-title em{font-weight:400;color:#c56b00}.manage-sites{padding:10px 12px}.manage-site,.simple-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed #e0ebe2}.manage-site:last-child,.simple-row:last-child{border-bottom:0}.manage-site-main{display:flex;align-items:center;gap:10px;min-width:0}.manage-site-main img,.mini-fallback{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:none}.manage-site-main p,.simple-row p{margin:4px 0 0;color:#7d8d80;font-size:12px;word-break:break-all}.link-danger{border:0;background:none;color:#c52b2b;cursor:pointer;padding:4px}.inline-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end}.row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.code-block{background:#f6faf7;border:1px solid #dcebdd;border-radius:8px;padding:12px;overflow:auto}.tips-text{color:#6b7d70;font-size:13px}code{background:#f2f6f3;padding:2px 5px;border-radius:4px}
@media(max-width:980px){.header-inner{flex-wrap:wrap}.region-switch{width:100%}.layout,.admin-grid{grid-template-columns:1fr}.hot-sites{grid-template-columns:repeat(3,1fr)}.category-grid{grid-template-columns:1fr}}@media(max-width:560px){.top-links{display:none}.hot-sites{grid-template-columns:repeat(2,1fr)}.category-body{grid-template-columns:repeat(2,1fr)}.admin-head{align-items:flex-start;flex-direction:column;gap:10px}.search-box select{width:86px}.search-box button{width:82px}}


/* Per-country theme override */
body {
  background: var(--theme-page-bg, #f3f7f4);
  color: var(--theme-text, #222222);
}

.topbar {
  background: var(--theme-topbar-bg, #eef7ef);
}

.logo-mark {
  background: linear-gradient(135deg, var(--theme-accent, #1fb15a), var(--theme-primary-dark, #0f9345));
}

.logo-text strong,
.side-title,
.section-title,
.admin-head h1,
.admin-card h2 {
  color: var(--theme-primary-dark, #0f9345);
}

.search-box {
  border-color: var(--theme-primary, #17a652);
}

.search-box button,
.main-nav,
.btn.primary,
.site-fallback,
.mini-fallback,
.category-link img,
.category-link i {
  background: var(--theme-primary, #17a652);
}

.search-box button:hover,
.main-nav a:hover,
.main-nav a.active {
  background: var(--theme-primary-dark, #0f9345);
}

.main-nav {
  border-bottom-color: var(--theme-primary-dark, #0f9345);
}

.main-nav a {
  color: var(--theme-nav-text, #ffffff);
}

.site-item:hover,
.input:focus {
  border-color: var(--theme-primary, #17a652);
}

.content-card,
.side-card,
.admin-card,
.site-item {
  background: var(--theme-card-bg, #ffffff);
}

.fav-btn,
.fav-mini {
  color: var(--theme-accent, #f59e0b);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 16px;
}

.color-input {
  padding: 4px;
  height: 42px;
}







/* Desktop: single-row hidden horizontal scroll, drag with mouse */
@media (min-width: 981px) {
  .main-nav {
        overflow: hidden !important;
    }

    .main-nav-shell {
        overflow: hidden !important;
    }

  .main-nav-inner {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;

    /* Firefox 隐藏滚动条 */
    scrollbar-width: none !important;

    /* IE / Edge 旧版隐藏滚动条 */
    -ms-overflow-style: none !important;

    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav-inner.dragging {
    cursor: grabbing;
  }

  .main-nav-inner::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .main-nav-inner a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .nav-more-btn,
  .nav-more-menu {
    display: none !important;
  }
}

/* Mobile: keep original horizontal sliding navigation */
@media (max-width: 980px) {
  .main-nav-shell {
    display: block !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  .main-nav-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav-inner a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .nav-more-btn,
  .nav-more-menu {
    display: none !important;
  }
}


.admin-tabs a.active {
  background: var(--theme-primary, #17a652);
  color: #fff;
  border-color: var(--theme-primary, #17a652);
}

code {
  background: #f2f6f3;
  padding: 2px 6px;
  border-radius: 4px;
}


.link-action {
  border: 0;
  background: none;
  color: #176d3a;
  cursor: pointer;
  padding: 4px;
}

.link-action:hover {
  text-decoration: underline;
}



.user-manage-row {
  align-items: flex-start;
}

.user-manage-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 320px;
}

.inline-password-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini-input {
  width: 170px;
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}

@media(max-width:760px) {
  .user-manage-row {
    align-items: stretch;
    flex-direction: column;
  }

  .user-manage-actions {
    justify-content: flex-start;
    min-width: 0;
  }

  .inline-password-form {
    width: 100%;
    flex-wrap: wrap;
  }

  .mini-input {
    width: 100%;
  }
}


/* Mobile topbar login/register fix */
@media (max-width: 980px) {
  .topbar-inner {
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .topbar-detected {
    display: none !important;
  }

  .top-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  .top-links a {
    margin-left: 0 !important;
  }

  .top-links a:not(.user-account-link) {
    display: none !important;
  }

  .user-account-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: var(--theme-primary, #17a652) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
  }
}


.logo-mark-image {
  padding: 0;
  overflow: hidden;
  background: transparent !important;
}

.logo-mark-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-preview {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #dcebdd;
  background: #f8fcf9;
  margin: 6px 0 8px;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Topbar weather/date replaces detected country text */
.topbar-weather {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  color: inherit;
}

.weather-date-main {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-fallback-note {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile: show weather/date on the left, login/register on the right */
@media (max-width: 980px) {
  .topbar-inner {
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .topbar-weather {
    display: flex !important;
    min-width: 0 !important;
    max-width: calc(100% - 118px) !important;
    flex: 1 1 auto !important;
    font-size: 12px !important;
  }

  .weather-date-main {
    max-width: 100% !important;
  }

  .top-links {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 420px) {
  .topbar-weather {
    max-width: calc(100% - 96px) !important;
  }

  .weather-fallback-note {
    display: none !important;
  }
}


/* Navigation background image */
body {
  background-image: var(--theme-background-image, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: rgba(255, 255, 255, 0.12);
}

.background-preview {
  width: 160px;
  height: 90px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dcebdd;
  background: #f8fcf9;
  margin: 6px 0 8px;
}

.background-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-card,
.side-card,
.admin-card {
  backdrop-filter: blur(0.5px);
}

@media(max-width: 980px) {
  body {
    background-attachment: scroll;
  }
}


.front-user-navs {
  width: 100%;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #dcebdd;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-nav-link {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eff8f1;
  color: #0f9345;
  font-size: 13px;
  text-decoration: none;
}

.mini-nav-link:hover {
  background: #dff3e6;
}

.log-table-wrap {
  overflow-x: auto;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 13px;
}

.log-table th,
.log-table td {
  text-align: left;
  border-bottom: 1px solid #e5efe7;
  padding: 8px;
  vertical-align: top;
}

.log-table th {
  background: #f4faf5;
  color: #0f9345;
}

.admin-review-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff3cd;
  color: #8a5a00;
  border-bottom: 1px solid #ffe08a;
  padding: 8px 14px;
  text-align: center;
  font-weight: 700;
}

/* Admin list search and pagination */
.list-filter-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}

.list-filter-form .input[type="search"] {
  flex: 1 1 280px;
  min-width: 220px;
}

.small-select {
  max-width: 150px;
}

.pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.pagination a {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #dcebdd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #176d3a;
  text-decoration: none;
  background: #fff;
}

.pagination a.active,
.pagination a:hover {
  background: var(--theme-primary, #17a652);
  border-color: var(--theme-primary, #17a652);
  color: #fff;
}


.captcha-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.captcha-row .input {
  flex: 1 1 auto;
}

.captcha-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px dashed var(--theme-primary, #17a652);
  background: #f4fbf6;
  color: var(--theme-primary-dark, #0f9345);
  font-weight: 800;
  letter-spacing: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

@media(max-width: 560px) {
  .captcha-row {
    flex-direction: column;
    align-items: stretch;
  }

  .captcha-code {
    width: 100%;
  }
}


.auth-subform {
  border: 1px solid #e1efe4;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
  background: #fbfefb;
}

.auth-subform h3 {
  margin: 0 0 8px;
  color: var(--theme-primary-dark, #0f9345);
  font-size: 16px;
}


.auth-card {
  max-width: 560px;
}

.auth-panel {
  display: none;
}

.auth-panel.active {
  display: block;
}

.auth-switch-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #dbeadc;
}

.auth-switch-links button {
  border: 0;
  background: transparent;
  color: var(--theme-primary, #17a652);
  cursor: pointer;
  padding: 3px 0;
  font-weight: 700;
}

.auth-switch-links button:hover {
  text-decoration: underline;
}

.auth-main-btn {
  margin-top: 12px;
}

.captcha-image {
  width: 142px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px dashed var(--theme-primary, #17a652);
  background: #f4fbf6;
  cursor: pointer;
  object-fit: contain;
}

.captcha-image:hover {
  box-shadow: 0 0 0 2px rgba(23, 166, 82, 0.12);
}

@media(max-width: 560px) {
  .captcha-image {
    width: 100%;
  }
}


/* Auth panel strict hidden state */
.auth-panel[hidden] {
  display: none !important;
}

.auth-panel:not(.active) {
  display: none !important;
}

.auth-panel.active {
  display: block !important;
}


#authAjaxMessage {
  margin: 0 0 14px;
}

.js-send-email-code[disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* Floating refresh / back-to-top actions: force fixed and visible on desktop + mobile */
.floating-page-actions,
.floating-page-actions.visible,
#floatingPageActions {
  position: fixed !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(76px, calc(76px + env(safe-area-inset-bottom))) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  contain: none !important;
  isolation: isolate !important;
}

.floating-page-actions::before,
.floating-page-actions::after,
#floatingPageActions::before,
#floatingPageActions::after {
  content: none !important;
  display: none !important;
}

.floating-page-actions[hidden],
#floatingPageActions[hidden] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.floating-action-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #9ca3af !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  touch-action: manipulation !important;
}

.floating-action-btn:hover,
.floating-action-btn:focus-visible {
  color: var(--primary, #17a652) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18) !important;
  outline: none !important;
}

.floating-action-btn svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: block !important;
}

@media (max-width: 768px) {
  .floating-page-actions,
  .floating-page-actions.visible,
  #floatingPageActions {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(68px, calc(68px + env(safe-area-inset-bottom))) !important;
    gap: 10px !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .floating-action-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  .floating-action-btn svg {
    width: 21px !important;
    height: 21px !important;
  }
}

@media print {
  .floating-page-actions,
  #floatingPageActions {
    display: none !important;
  }
}

/* v25: stable parent/child navigation + mobile horizontal swipe */
html { scroll-behavior: smooth; }
.content-card[id] { scroll-margin-top: 62px; }
.quick-list .quick-child { font-size: 13px; color: #667b6b; }
.child-of-label { color: #78917d; font-weight: 500; }
.category-grid .child-of-label { display: none; }
.parent-category-card .section-title,
.child-category-card .section-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main-nav {
  position: relative;
  overflow: visible;
}
.main-nav-shell {
  position: relative;
  overflow: visible;
}
.main-nav-inner {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow: visible;
  white-space: nowrap;
}
.main-nav-inner > a,
.main-nav-inner > .nav-dropdown {
  flex: 0 0 auto;
}
.main-nav-inner > .nav-dropdown {
  position: relative;
  display: block;
}
.main-nav .nav-parent {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-arrow {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  text-align: center;
  font-size: 10px;
  opacity: .9;
  transition: transform .18s ease;
}
.nav-dropdown.is-open > .nav-parent > .nav-arrow {
  transform: rotate(180deg);
}

/* Desktop submenu: classic cascading menu, not clipped by the nav bar. */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10000;
  min-width: 180px;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 6px 0;
  margin: 0;
  background: #fff;
  border: 1px solid #dcebdd;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px rgba(15,80,38,.18);
  white-space: nowrap;
}
.main-nav .nav-dropdown:hover > .nav-dropdown-menu,
.main-nav .nav-dropdown:focus-within > .nav-dropdown-menu,
.main-nav .nav-dropdown.is-open > .nav-dropdown-menu {
  display: block;
}
.main-nav .nav-dropdown-menu > a,
.main-nav .nav-dropdown-menu > .nav-dropdown > .nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 180px;
  min-height: 40px;
  padding: 10px 16px;
  line-height: 20px;
  color: #31563b;
  background: #fff;
  border: 0;
  border-right: 0;
  white-space: nowrap;
}
.main-nav .nav-dropdown-menu > a:hover,
.main-nav .nav-dropdown-menu > .nav-dropdown > .nav-parent:hover {
  color: #fff;
  background: var(--theme-primary, #17a652);
}
.main-nav .nav-dropdown-menu .nav-dropdown {
  position: relative;
  display: block;
  width: 100%;
}
.main-nav .nav-dropdown-menu .nav-dropdown > .nav-dropdown-menu {
  top: -7px;
  left: 100%;
  border-radius: 8px;
}
.main-nav .nav-dropdown-menu .nav-dropdown.submenu-open-left > .nav-dropdown-menu {
  left: auto;
  right: 100%;
}
.main-nav-inner > .nav-dropdown.submenu-align-right > .nav-dropdown-menu {
  left: auto;
  right: 0;
}

/* The mobile submenu is rendered in a separate panel. This avoids the CSS
   overflow conflict between a horizontally scrollable nav and dropdowns. */
.mobile-subnav-panel {
  display: none;
}

@media (min-width: 981px) {
  .main-nav,
  .main-nav-shell {
    overflow: visible !important;
  }
  .main-nav-inner {
    overflow: visible !important;
    cursor: default !important;
    user-select: auto !important;
  }
}

@media (max-width: 980px) {
  .main-nav {
    overflow: visible !important;
  }
  .main-nav-shell {
    display: block !important;
    overflow: hidden !important;
  }
  .main-nav-inner {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-behavior: smooth;
  }
  .main-nav-inner::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .main-nav-inner > a,
  .main-nav-inner > .nav-dropdown {
    flex: 0 0 auto !important;
    min-width: max-content;
  }
  .main-nav-inner > .nav-dropdown > .nav-parent {
    height: 100%;
  }
  /* Never try to draw desktop dropdowns inside the horizontal scroller. */
  .main-nav .main-nav-inner .nav-dropdown-menu {
    display: none !important;
  }
  .main-nav a {
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-subnav-panel[hidden] {
    display: none !important;
  }
  .mobile-subnav-panel:not([hidden]) {
    display: block !important;
    background: #fff;
    border-bottom: 1px solid #dcebdd;
    box-shadow: 0 10px 22px rgba(15,80,38,.14);
  }
  .mobile-subnav-inner {
    padding-top: 8px;
    padding-bottom: 10px;
  }
  .mobile-subnav-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid #dcebdd;
    border-radius: 8px 8px 0 0;
    background: #f3faf4;
  }
  .main-nav .mobile-subnav-root-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    color: var(--theme-primary-dark, #0f9345);
    background: transparent;
    border: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .main-nav .mobile-subnav-root-link:hover,
  .main-nav .mobile-subnav-root-link:active {
    color: var(--theme-primary-dark, #0f9345);
    background: transparent;
  }
  .mobile-subnav-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin: 0;
    border: 0;
    border-left: 1px solid #dcebdd;
    background: transparent;
    color: #59705f;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-subnav-body {
    border: 1px solid #dcebdd;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #fff;
    max-height: min(58vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-subnav-node {
    border-top: 1px solid #edf3ee;
  }
  .mobile-subnav-node:first-child {
    border-top: 0;
  }
  .mobile-subnav-row {
    display: flex;
    align-items: stretch;
    min-height: 44px;
    padding-left: calc(var(--nav-depth, 0) * 16px);
    background: #fff;
  }
  .main-nav .mobile-subnav-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #31563b;
    background: #fff;
    border: 0;
    white-space: normal;
    word-break: break-word;
  }
  .main-nav .mobile-subnav-link:hover,
  .main-nav .mobile-subnav-link:active {
    color: var(--theme-primary-dark, #0f9345);
    background: #f3faf4;
  }
  .mobile-subnav-toggle {
    flex: 0 0 auto;
    width: 46px;
    border: 0;
    border-left: 1px solid #edf3ee;
    background: #fff;
    color: #607765;
    font-size: 14px;
    cursor: pointer;
  }
  .mobile-subnav-toggle::before {
    content: '›';
    display: inline-block;
    transition: transform .18s ease;
  }
  .mobile-subnav-node.is-expanded > .mobile-subnav-row .mobile-subnav-toggle::before {
    transform: rotate(90deg);
  }
  .mobile-subnav-children {
    display: none;
    background: #f8fbf8;
  }
  .mobile-subnav-node.is-expanded > .mobile-subnav-children {
    display: block;
  }
}


/* v28: normalize category favicons + keep level 1 visible while child branches start collapsed */
.category-link img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  object-fit: contain;
  background: transparent !important;
  color: inherit;
  display: block;
}

/* Only the letter fallback gets the theme-colored tile. */
.category-link i {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 5px;
  object-fit: initial;
  background: var(--theme-primary, #17a652);
  color: #fff;
  display: grid;
  place-items: center;
}

.quick-categories-card {
  overflow: hidden;
}
.quick-categories-title {
  justify-content: flex-start;
}
.quick-tree {
  padding: 8px 10px;
}
.quick-node {
  min-width: 0;
}
.quick-row {
  display: flex;
  align-items: center;
  min-width: 0;
  border-radius: 6px;
}
.quick-row:hover {
  background: #eff8f1;
}
.quick-category-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 4px 9px calc(8px + (var(--quick-depth, 0) * 16px)) !important;
  border-radius: 6px;
  color: #374d3c;
}
.quick-category-link:hover {
  background: transparent !important;
  color: #129447;
}
.quick-category-link .quick-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-category-link small {
  flex: 0 0 auto;
  color: #98a89c;
}
.quick-node-toggle {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0 3px 0 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #77917d;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.quick-node-toggle:hover,
.quick-node-toggle:focus-visible {
  background: rgba(23, 166, 82, .10);
  color: var(--theme-primary, #17a652);
}
.quick-node-toggle:focus-visible {
  outline: 2px solid var(--theme-primary, #17a652);
  outline-offset: -2px;
}
.quick-node-toggle span {
  font-size: 21px;
  line-height: 1;
  transition: transform .18s ease;
}
.quick-node.is-expanded > .quick-row .quick-node-toggle span {
  transform: rotate(90deg);
}
.quick-children[hidden] {
  display: none !important;
}
.quick-children {
  display: block;
}
.quick-depth-1 > .quick-row .quick-category-link,
.quick-depth-2 > .quick-row .quick-category-link,
.quick-depth-3 > .quick-row .quick-category-link {
  color: #667b6b;
  font-size: 13px;
}

/* Match the compact favorite star with the clean look used by the cards above. */
.category-link-wrap .fav-mini {
  background: transparent;
}
.category-link-wrap .fav-mini:hover,
.category-link-wrap .fav-mini:focus-visible {
  background: rgba(23, 166, 82, .08);
}


/* v30: edit an existing URL icon directly from either management list. */
.site-icon-upload {
  flex: 0 0 64px;
  width: 64px;
  text-align: center;
}
.site-icon-picker {
  display: block;
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}
.site-icon-picker .site-icon-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, .6);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
}
.site-icon-picker:hover .site-icon-overlay,
.site-icon-picker:focus-within .site-icon-overlay { opacity: 1; }
.site-icon-picker:focus-within { outline: 2px solid var(--theme-primary, #17a652); }
.site-icon-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  padding: 0;
  border: 0;
}
.site-icon-upload-button { padding: 4px 0 0; font-size: 12px; white-space: nowrap; }
.manage-site[id], #categoryContent { scroll-margin-top: 62px; }

/* Desktop only: keep both edges aligned with the main content container. */
@media (min-width: 981px) {
  .main-nav-inner {
    width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .main-nav-inner > .nav-dropdown > .nav-dropdown-menu {
    position: fixed;
  }
  .main-nav-inner > .nav-dropdown.desktop-menu-offscreen > .nav-dropdown-menu {
    display: none !important;
  }
}


/* v31: render every site in wrapping rows, reserve at least four CJK characters. */
.category-body {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
  height: auto;
  max-height: none;
  align-content: start;
}
.category-link-wrap { min-width: 0; }
.category-link {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
.category-link > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}