:root {
 --bg-body: #f5f6f8;
 --bg-white: #ffffff;
 --bg-topbar: #3d4556;
 --bg-footer: #3d4556;
 --bg-friend-box: #343b4b;
 --text-main: #334155;
 --text-sub: #475569;
 --text-desc: #94a3b8;
 --color-primary: #3b82f6;
 --color-success: #10b981;
 --max-width: 1450px;
}
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 background-color: var(--bg-body);
 color: var(--text-main);
 line-height: 1.5;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 /* background-image: url(https://www.moyudh.com/zb_users/upload/2026/07/20260726221727178507544711840.webp); */
}
a {
 text-decoration: none;
 color: inherit;
}
button {
 border: none;
 background: none;
 cursor: pointer;
 outline: none;
}
::-webkit-scrollbar {
 width: 6px;
 height: 6px;
}
::-webkit-scrollbar-thumb {
 background: #cbd5e1;
 border-radius: 3px;
}
.container {
 width: 100%;
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 0 16px;
}
.top-bar {
 background-color: var(--bg-topbar);
 color: #b8c4d8;
 font-size: 11px;
 padding: 8px 0;
 letter-spacing: 0.5px;
}
.top-bar .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.direct-switch {
 display: flex;
 align-items: center;
 gap: 6px;
 cursor: pointer;
 user-select: none;
}
.direct-switch span {
 font-size: 11px;
 color: #b8c4d8;
 transition: color 0.3s;
}
.direct-switch:hover span {
 color: #fff;
}
.switch-track {
 position: relative;
 width: 28px;
 height: 14px;
 border-radius: 10px;
 background-color: #64748b;
 transition: 0.3s;
}
.switch-track.active {
 background-color: var(--color-success);
}
.switch-dot {
 position: absolute;
 top: 2px;
 left: 2px;
 width: 10px;
 height: 10px;
 background-color: #fff;
 border-radius: 50%;
 transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.switch-track.active .switch-dot {
 transform: translateX(14px);
}
.site-header {
 background: var(--bg-white);
 padding: 25px 0 15px 0;
 border-bottom: 1px dashed #e2e8f0; 
 margin-bottom: 20px;
}
.header-inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
}
.logo-area {
 display: flex;
 align-items: center;
 gap: 10px;
 order: 1;
}
.logo-icon {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #fbd38d;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}
.logo-icon img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.logo-area {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 order: 1;
 text-decoration: none;
 color: inherit;
}
.logo-img {
 height: 40px; 
 width: auto;
 max-width: 240px;
 object-fit: contain;
 display: block;
}
.logo-fallback {
 font-size: 22px;
 font-weight: 700;
 color: #1e293b;
 margin: 0;
 line-height: 1.2;
 letter-spacing: 0.5px;
}
@media (max-width: 640px) {
 .logo-img { height: 32px; max-width: 160px; }
 .logo-fallback { font-size: 18px; }
}

 
.header-nav {
 display: flex;
 flex-direction: row; 
 flex-wrap: nowrap;
 gap: 14px;
 align-items: center;
 order: 2;
 flex-shrink: 0;
}
.nav-item {
 display: flex;
 flex-direction: column; 
 align-items: center;
 gap: 2px;
 white-space: nowrap;
}
.nav-item img {
 width: 22px; 
 height: 22px;
 object-fit: contain;
}
.nav-item span {
 font-size: 12px;
 font-weight: 500;
 color: var(--text-sub);
 letter-spacing: 0.3px;
}
.header-search {
 order: 3;
 width: 100%;
 margin-top: 16px;
}
#search-box-pill {
 display: flex;
 align-items: center;
 width: 100%;
 height: 44px;
 background: var(--bg-white);
 border: 2px solid #e5e7eb;
 border-radius: 12px;
 padding: 0 10px;
 transition: 0.3s;
 box-shadow: 0 2px 8px rgba(0,0,0,0.02);
 position: relative;
}
#search-box-pill:focus-within {
 border-color: var(--color-primary);
}
.search-btn-icon {
 width: 38px;
 height: 38px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #999;
 cursor: pointer;
}
.search-btn-icon img{
 margin-right: 5px;
}
.search-btn-icon:hover {
 color: var(--color-primary);
}
#main-search {
 flex: 1;
 height: 100%;
 border: none;
 background: transparent;
 font-size: 14px;
 font-weight: 500;
 outline: none;
 padding: 0 8px;
}
.search-engine-selector {
 height: 100%;
 display: flex;
 align-items: center;
}
.engine-dropdown {
 position: absolute;
 top: 48px;
 left: 0;
 width: 100%;
 background: var(--bg-white);
 border: 2px solid #e5e7eb;
 border-radius: 12px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.08);
 padding: 8px;
 list-style: none;
 display: none;
 grid-template-columns: repeat(6, 1fr);
 gap: 6px;
 z-index: 100;
}
.engine-dropdown.show {
 display: grid;
}
.engine-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 6px;
 padding: 8px 4px;
 cursor: pointer;
 border-radius: 8px;
 font-size: 12px;
 color: var(--text-main);
 transition: 0.2s;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: clip;
}
.engine-item:hover {
 background: #f3f4f6;
}
.engine-item img {
 width: 20px;
 height: 20px;
 object-fit: contain;
 flex-shrink: 0;
}
.recommend-board {
 display: block;
 margin-top: 14px;
}
.recommend-row {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
 margin-bottom: 14px;
}
.recommend-item {
 border-radius: 8px;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: 0.2s;
}
.recommend-item img {
 width: 100%;
 height: auto;
 object-fit: cover;
 display: block;
}
.recommend-placeholder {
 height: 55px;
 background-color: #f8fafc;
 border: 1px dashed #cbd5e1;
 color: #94a3b8;
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 0.5px;
}
.main-content {
 flex-grow: 1;
 padding-top: 20px;
 padding-bottom: 20px;
}
.category-section {
 margin-bottom: 5px;
}
.category-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 12px;
 padding: 0 4px;
}
.category-title {
 font-size: 14.5px;
 font-weight: 600;
 color: #4b5563;
 line-height: 1;
 letter-spacing: 0.3px;
}
.category-desc {
 font-size: 11px;
 color: var(--text-desc);
 margin-bottom: 1px;
 letter-spacing: 0.2px;
}
.app-grid {
 display: grid;
 gap: 12px;
}
#content-top, #content-fav {
 grid-template-columns: repeat(2, 1fr); /* */
}
.tab-content-grid {
 grid-template-columns: repeat(2, 1fr); 
}
.app-card {
 display: flex;
 flex-direction: row; /* */
 align-items: center;
 justify-content: flex-start;
 gap: 10px; /* */
 background: var(--bg-white);
 border-radius: 8px; /* */
 padding: 8px 12px; /* */
 box-shadow: 0 1px 2px rgba(0,0,0,0.01);
 border: 1px solid rgba(0, 0, 0, 0.06); 
 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 cursor: pointer;
 min-width: 0;
 text-align: left;
}
.app-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 14px rgba(59, 130, 246, 0.08); /* */
 border-color: #bfdbfe; /* */
 background: #ffffff;
}
.app-card-icon {
 width: 26px; /* */
 height: 26px;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #f8fafc;
 border-radius: 6px; 
 border: 1px solid #f1f5f9;
 overflow: hidden;
}
.app-card-icon img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.app-card-icon span {
 font-size: 13px; 
 font-weight: 600;
 color: var(--color-primary);
}
.app-card-name {
 flex: 1;
 min-width: 0;
 display: block;
 font-size: 13px; 
 color: #1e293b;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 letter-spacing: 0.2px;
}
.tab-content-grid .app-card {
 flex-direction: row; 
 justify-content: flex-start;
 text-align: left;
 gap: 8px; 
 border-radius: 8px; 
 padding: 8px 10px; 
 position: relative; /* */
}
.tab-content-grid .app-card-icon {
 width: 28px; 
 height: 28px;
 border-radius: 6px; 
}
.tab-content-grid .app-card-icon span {
 font-size: 14px;
}
.tab-content-grid .app-card-info {
 display: flex;
 flex-direction: column;
 justify-content: center;
 flex: 1;
 min-width: 0;
 padding-right: 18px; /* */
}
.tab-content-grid .app-card-name {
 font-size: 13.5px; 
 font-weight: 600; 
 color: #1e293b;
 line-height: 1.2;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 padding: 0;
}
.tab-content-grid .app-card-desc {
 font-size: 11.5px; 
 color: #94a3b8;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 margin-top: 3px;
 font-weight: 400;
 line-height: 1.2;
}
.card-fly-wrapper {
 position: absolute;
 right: 12px;
 top: 14px;
 color: #cbd5e1;
 font-size: 12.5px;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 opacity: 0.5; 
 pointer-events: auto; 
 cursor: pointer; 
 z-index: 10; 
 padding: 8px; 
 margin-top: -8px; 
 margin-right: -8px;
}
.card-fly-wrapper i {
 display: block;
 transform: rotate(45deg); 
}
.tab-content-grid .app-card:hover .card-fly-wrapper {
 color: var(--color-primary); 
 transform: translateX(4px); 
 opacity: 1; 
}
.app-card-more {
 display: flex;
 flex-direction: row; 
 align-items: center;
 justify-content: flex-start; 
 gap: 8px;
 background: var(--bg-white); /* */
 border-radius: 8px;
 padding: 8px 10px;
 border: 1px solid rgba(0, 0, 0, 0.06); /* */
 box-shadow: 0 1px 2px rgba(0,0,0,0.01);
 transition: all 0.2s ease;
 cursor: pointer;
 text-decoration: none;
 min-width: 0;
 height: 100%; 
 box-sizing: border-box;
}
.app-card-more:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
 border-color: #cbd5e1; 
 background: var(--bg-white);
}
.app-card-more .app-card-icon {
 width: 28px; 
 height: 28px;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #f8fafc;
 border-radius: 6px; 
 border: 1px solid #f1f5f9;
 box-shadow: none;
}
.app-card-more .app-card-icon i {
 font-size: 14px;
 color: var(--color-primary); /* */
 transition: 0.2s;
}
.app-card-more .more-text {
 font-size: 13.5px;
 font-weight: 600; 
 color: #1e293b;
 transition: 0.2s;
 flex: 1; 
}
.app-card-more .more-arrow {
 font-size: 11px;
 color: #94a3b8;
 transition: 0.2s;
 margin-left: auto; 
}
.app-card-more:hover .more-text,
.app-card-more:hover .more-arrow {
 color: var(--color-primary);
}
.app-card-top-buy {
 display: flex;
 flex-direction: row; /* */
 align-items: center;
 justify-content: center;
 gap: 8px; 
 border-radius: 8px; 
 padding: 8px 12px; 
 border: 1px dashed rgba(52, 211, 153, 0.4);
 background: rgba(52, 211, 153, 0.02);
 cursor: pointer;
 transition: 0.2s;
 text-align: center;
}
.app-card-top-buy:hover {
 background: rgba(52, 211, 153, 0.08);
 border-color: rgba(52, 211, 153, 0.6);
}
.app-card-top-buy .app-card-icon {
 background: transparent;
 border: none;
 color: #6ee7b7;
 font-size: 16px; 
}
.app-card-top-buy .app-card-name {
 color: #34d399;
 font-weight: 500;
 flex: none;
 font-size: 13.5px; 
 padding: 0;
}
.app-card-dashed {
 display: flex;
 flex-direction: row; /* */
 align-items: center;
 justify-content: center;
 gap: 8px; 
 background: transparent;
 border-radius: 8px; 
 padding: 8px 12px; 
 border: 1px dashed #cbd5e1;
 color: #94a3b8;
 font-size: 13.5px; 
 font-weight: 500;
 cursor: pointer;
 transition: 0.2s;
 text-align: center;
}
.app-card-dashed:hover {
 border-color: var(--color-primary);
 color: var(--color-primary);
 background: #f8fafc;
}
.sidebar-widget-card {
 background: var(--bg-white) !important;
 border-radius: 8px !important;
 padding: 16px !important;
 box-shadow: 0 1px 2px rgba(0,0,0,0.01) !important;
 border: 1px solid #e2e8f0 !important;
 transition: all 0.2s ease !important;
}
.sidebar-widget-card:hover {
 box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
 border-color: #cbd5e1 !important;
 transform: translateY(-2px) !important;
}
.site-footer {
 background: var(--bg-footer);
 padding: 16px 0 24px 0;
 color: #a0aec0;
 font-size: 11.5px;
 position: relative;
 margin-top: 20px;
}
.friend-links-container {
 margin-bottom: 16px;
}
.friend-links-box {
 background: var(--bg-friend-box);
 border-radius: 8px;
 padding: 10px 15px;
 display: flex;
 flex-wrap: wrap;
 gap: 6px 12px;
 line-height: 1.4;
}
.links{font-size: 16px;padding: 10px 0 10px 0;}
.friend-links-box li.link-item {
 list-style: none;
 list-style-type: none;
 display: inline-block;
}
.friend-links-box li.link-item::marker {
 content: "";
}
.friend-links-box a {
 font-size: 11px;
 color: #e5e7eb;
 font-weight: 500;
 transition: color 0.2s;
}
.friend-links-box a:hover {
 color: #fff;
}
.footer-meta {
 display: flex !important;
 flex-direction: column;
 align-items: center;
 gap: 10px;
 line-height: 1.6;
 color: #9ca3af;
 letter-spacing: 0.5px;
 width: 100% !important;
}
.footer-links {
 text-align: center;
}
.footer-copyright {
 text-align: center;
}
.footer-meta a {
 margin: 0 4px;
 transition: color 0.2s;
}
.footer-meta a:hover {
 color: #fff;
 text-decoration: underline;
}
@media (min-width: 640px) {
 .app-grid {
 gap: 12px;
 }
 
 /* */
 #content-top, #content-fav {
 grid-template-columns: repeat(3, 1fr); 
 }
 /* */
 .tab-content-grid {
 grid-template-columns: repeat(3, 1fr); 
 }
}
@media (min-width: 768px) {
 .container {
 padding: 0 24px;
 }

 .header-inner {
 flex-wrap: nowrap;
 }

 .header-search {
 order: 2;
 flex: 1;
 max-width: 480px;
 margin: 0 24px;
 }

 .header-nav {
 order: 3;
 }

 /* */
 #content-top, #content-fav {
 grid-template-columns: repeat(4, 1fr); 
 }
 /* */
 .tab-content-grid {
 grid-template-columns: repeat(4, 1fr); 
 }

 .recommend-row {
 grid-template-columns: repeat(4, 1fr);
 }

 .main-content {
 padding-top: 20px;
 }

 .footer-meta {
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 }
}
@media (min-width: 1024px) {
 /* */
 
 /* */
 #content-top, #content-fav {
 grid-template-columns: repeat(8, 1fr); 
 }
 
 /* */
 .tab-content-grid {
 grid-template-columns: repeat(6, 1fr); 
 }
}
.pagination {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 16px;
 margin-top: 32px;
 margin-bottom: 10px;
}
.page-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 8px 16px;
 background: var(--bg-white);
 border: 1px solid #e5e7eb;
 border-radius: 8px;
 font-size: 13.5px;
 color: var(--text-sub);
 transition: 0.2s;
 cursor: pointer;
 text-decoration: none;
}
.page-btn:hover:not(.disabled) {
 border-color: var(--color-primary);
 color: var(--color-primary);
 background: #eff6ff;
}
.page-btn.disabled {
 background: #f8fafc;
 color: #cbd5e1;
 cursor: not-allowed;
 border-color: #f1f5f9;
}
.page-info {
 font-size: 13px;
 color: var(--text-desc);
 font-weight: 500;
}
.video-search-results {
 position: absolute;
 top: 100%;
 left: 0;
 width: 100%;
 margin-top: 8px;
 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
 z-index: 1000;
 max-height: 420px;
 overflow-y: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
}
.video-search-results::-webkit-scrollbar {
 display: none;
}
.vs-item {
 display: flex;
 gap: 12px;
 padding: 12px 16px;
 border-bottom: 1px solid #f1f5f9;
 cursor: pointer;
 transition: 0.2s;
 text-decoration: none;
 color: inherit;
 align-items: center;
}
.vs-item:last-child {
 border-bottom: none;
}
.vs-item:hover {
 background: #f8fafc;
}
.vs-item:hover .vs-title {
 color: var(--color-primary);
}
.vs-item:hover .fa-play {
 color: var(--color-primary) !important;
}
.vs-pic {
 width: 45px;
 height: 60px;
 border-radius: 6px;
 object-fit: cover;
 background: #e2e8f0;
 flex-shrink: 0;
}
.vs-info {
 display: flex;
 flex-direction: column;
 justify-content: center;
 min-width: 0;
 flex: 1;
}
.vs-title {
 font-size: 14.5px;
 font-weight: 600;
 color: #1e293b;
 margin: 0 0 4px 0;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 transition: color 0.2s;
}
.vs-desc {
 font-size: 12px;
 color: #64748b;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.vs-loading, .vs-empty {
 padding: 30px 20px;
 text-align: center;
 color: #94a3b8;
 font-size: 13.5px;
}
.btn-locked {
 background: #fef2f2 !important;
 color: #ef4444 !important;
 border-color: #fecaca !important;
 box-shadow: 0 2px 4px rgba(239, 68, 68, 0.05) !important;
}
.btn-locked:hover {
 background: #fee2e2 !important;
 border-color: #fca5a5 !important;
}
.unlock-modal-card {
 text-align: left;
 width: 320px !important;
 max-width: 90vw;
 padding: 24px 20px !important;
 border-radius: 16px;
 display: grid;
 grid-template-columns: 100px 1fr;
 grid-template-areas: "header header" "qr desc" "qr input";
 gap: 12px 16px;
 align-items: center;
}
.unlock-header {
 grid-area: header;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 margin-bottom: 4px;
}
.unlock-title {
 font-size: 16px;
 color: #1e293b;
 font-weight: 600;
 margin: 0;
 text-align: center;
 width: 100%;
}
.unlock-title i {
 margin-right: 6px;
 color: var(--color-primary);
}
.unlock-close-btn {
 display: none !important;
}
.unlock-qr-container {
 grid-area: qr;
 width: 100px;
 height: 100px;
 margin: 0;
 padding: 6px;
 background: #f8fafc;
 border: 1px solid #e2e8f0;
 border-radius: 10px;
 box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.unlock-qr-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 6px;
}
.unlock-desc {
 grid-area: desc;
 font-size: 12px;
 color: #64748b;
 margin: 0;
 line-height: 1.5;
 text-align: left;
 align-self: end;
}
.unlock-highlight {
 color: #0f172a;
 font-weight: 600;
 background: #f1f5f9;
 padding: 2px 4px;
 border-radius: 4px;
 margin: 0 2px;
}
.unlock-input-group {
 grid-area: input;
 display: flex;
 flex-direction: column;
 gap: 8px;
 width: 100%;
 margin: 0;
 align-self: start;
}
.unlock-input {
 width: 100% !important;
 height: 32px !important;
 text-align: center !important;
 padding: 0 10px !important;
 font-size: 13px !important;
 font-weight: 500;
 letter-spacing: 1px;
 margin-bottom: 0 !important;
 color: #334155;
 background: #f8fafc;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 outline: none;
 transition: 0.2s;
}
.unlock-input:focus {
 border-color: var(--color-primary);
 background: #fff;
 box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.unlock-submit-btn {
 width: 100%;
 height: 32px;
 padding: 0;
 background: var(--color-primary);
 color: #fff;
 border: none;
 border-radius: 8px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: 0.2s;
}
.unlock-submit-btn:hover {
 background: #2563eb;
 transform: translateY(-1px);
 box-shadow: 0 4px 10px rgba(59,130,246,0.2);
}
.hero-tabs-header {
 display: flex;
 align-items: center;
 margin-bottom: 12px;
 padding: 0 4px;
 gap: 16px;
}
.hero-tab-btn {
 font-size: 14px;
 font-weight: 500;
 color: #94a3b8;
 cursor: pointer;
 transition: 0.2s;
 line-height: 1;
 user-select: none;
}
.hero-tab-btn:hover {
 color: #64748b;
}
.hero-tab-btn.active {
 font-size: 14.5px;
 font-weight: 600;
 color: #4b5563;
 letter-spacing: 0.3px;
}
.hero-tab-actions {
 margin-left: auto;
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 11px;
}
.hero-action-btn {
 cursor: pointer;
 transition: 0.2s;
 display: none;
 align-items: center;
 gap: 4px;
 color: var(--text-sub);
}
.hero-action-btn:hover {
 color: var(--color-primary);
}
.custom-modal-card {
 max-width: 320px;
 padding: 32px 24px;
 text-align: center;
}
.fav-item-card {
 position: relative;
}
.fav-delete-btn {
 position: absolute;
 top: -6px;
 right: -6px;
 width: 22px;
 height: 22px;
 background: #ffffff;
 border-radius: 50%;
 color: #ef4444;
 font-size: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 z-index: 10;
 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 transition: 0.2s;
 border: 1px solid #fee2e2;
}
.fav-delete-btn:hover {
 transform: scale(1.1);
 background: #fef2f2;
 color: #dc2626;
}
@keyframes jiggle {
 0% { transform: rotate(-1deg); }
 50% { transform: rotate(1.5deg); }
 100% { transform: rotate(-1deg); }
}
.fav-edit-mode .fav-item-card {
 animation: jiggle 0.3s infinite;
}
.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(15, 23, 42, 0.3);
 backdrop-filter: blur(3px);
 z-index: 3000;
 display: none;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
 cursor: pointer;
}
.modal-overlay.active {
 display: flex;
 opacity: 1;
}
.modal-card {
 background: #ffffff;
 border-radius: 16px;
 box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
 border: 1px solid rgba(255,255,255,0.8);
 transform: translateY(10px) scale(0.98);
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 cursor: default;
}
.modal-overlay.active .modal-card {
 transform: translateY(0) scale(1);
}
.modal-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 16px;
}
.modal-header h3 {
 font-size: 15px;
 font-weight: 600;
 margin: 0;
 color: var(--text-main);
 letter-spacing: 0.5px;
}
.modal-close {
 background: #f8fafc;
 border: none;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 color: #94a3b8;
 cursor: pointer;
 transition: 0.3s;
}
.modal-close:hover {
 background: #f1f5f9;
 color: var(--text-sub);
 transform: rotate(90deg);
}
.submit-main .form-input, .submit-main .form-textarea-inner {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 box-sizing: border-box;
 max-width: 100%;
}
.submit-main {
 padding-top: 15px;
 padding-bottom: 40px;
 flex-grow: 1;
 width: 100%;
 box-sizing: border-box;
 overflow-x: hidden;
}
.submit-layout {
 display: flex;
 gap: 20px;
 align-items: flex-start;
}
.submit-form-area {
 flex: 1;
 min-width: 0;
 background: var(--bg-white);
 border-radius: 12px;
 padding: 24px 30px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 border: none;
 box-sizing: border-box;
 width: 100%;
}
.submit-sidebar {
 width: 320px;
 flex-shrink: 0;
 background: var(--bg-white);
 border-radius: 12px;
 padding: 20px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 border: none;
 position: sticky;
 top: 20px;
 box-sizing: border-box;
}
.submit-header {
 margin-bottom: 24px;
 border-bottom: 1px solid #f1f5f9;
 padding-bottom: 14px;
}
.submit-header h2 {
 font-size: 18px;
 color: #1e293b;
 margin-bottom: 4px;
 font-weight: 600;
}
.submit-header p {
 font-size: 12.5px;
 color: #94a3b8;
}
.submit-form-area .form-group {
 margin-bottom: 20px;
 width: 100%;
 box-sizing: border-box;
}
.submit-form-area .form-label {
 display: block;
 font-size: 13.5px;
 font-weight: 600;
 color: #334155;
 margin-bottom: 8px;
}
.submit-form-area .form-label span.req {
 color: #f43f5e;
 margin-left: 2px;
 font-weight: normal;
}
.submit-form-area .input-wrapper {
 display: flex;
 gap: 10px;
 width: 100%;
 box-sizing: border-box;
 align-items: center;
}
.submit-form-area .form-input {
 flex: 1;
 min-width: 0;
 display: block;
 width: 100%;
 height: 42px;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 padding: 0 14px;
 font-size: 13.5px;
 outline: none;
 transition: all 0.2s ease;
 background: #f8fafc;
 color: #1e293b;
 font-family: inherit;
 box-sizing: border-box;
}
.submit-form-area .form-input:focus {
 border-color: var(--color-primary);
 background: #fff;
 box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}
.submit-form-area .form-input::placeholder {
 color: #cbd5e1;
 font-weight: 400;
}
.submit-form-area .btn-action {
 height: 42px;
 padding: 0 16px;
 background: #f1f5f9;
 color: #475569;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 transition: 0.2s;
 white-space: nowrap;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 flex-shrink: 0;
 box-sizing: border-box;
}
.submit-form-area .btn-action:hover {
 background: #e2e8f0;
 color: #1e293b;
 border-color: #cbd5e1;
}
.submit-form-area .btn-action:disabled {
 color: #94a3b8;
 cursor: not-allowed;
}
.submit-form-area #captcha-img {
 width: 120px;
 height: 42px;
 border-radius: 8px;
 cursor: pointer;
 border: 1px solid #e2e8f0;
 object-fit: cover;
 flex-shrink: 0;
 background: #fff;
 box-sizing: border-box;
}
.submit-form-area .textarea-container {
 position: relative;
 width: 100%;
 border: 1px solid #e2e8f0;
 border-radius: 8px;
 background: #f8fafc;
 transition: all 0.2s ease;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 box-sizing: border-box;
}
.submit-form-area .textarea-container:focus-within {
 border-color: var(--color-primary);
 background: #fff;
 box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}
.submit-form-area .form-textarea-inner {
 width: 100%;
 border: none;
 background: transparent;
 padding: 12px 12px 40px 12px;
 font-size: 13.5px;
 outline: none;
 resize: vertical;
 height: 140px;
 line-height: 1.6;
 font-family: inherit;
 color: #1e293b;
 box-sizing: border-box;
}
.submit-form-area .form-textarea-inner::placeholder {
 color: #cbd5e1;
 font-weight: 400;
}
.submit-form-area .btn-ai-inner {
 position: absolute;
 right: 8px;
 bottom: 8px;
 height: 28px;
 padding: 0 10px;
 background: #eff6ff;
 color: var(--color-primary);
 border: 1px solid #bfdbfe;
 border-radius: 6px;
 font-size: 12px;
 font-weight: 500;
 cursor: pointer;
 transition: 0.2s;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 z-index: 10;
}
.submit-form-area .btn-ai-inner:hover {
 background: #dbeafe;
 color: #1d4ed8;
 border-color: #93c5fd;
}
.submit-form-area .btn-ai-inner:disabled {
 background: #f8fafc;
 color: #cbd5e1;
 border-color: transparent;
 cursor: not-allowed;
}
.submit-form-area .btn-submit {
 width: 100%;
 height: 46px;
 background: #eff6ff;
 color: #3b82f6;
 border: none;
 border-radius: 8px;
 font-size: 14.5px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
 margin-top: 5px;
 letter-spacing: 1px;
 box-sizing: border-box;
}
.submit-form-area .btn-submit:hover {
 background: #dbeafe;
 color: #2563eb;
 transform: translateY(-1px);
 box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
}
.submit-sidebar .rule-list {
 list-style: none;
 padding: 0;
 margin: 0;
}
.submit-sidebar .rule-list li {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 margin-bottom: 14px;
 font-size: 12.5px;
 color: #475569;
 line-height: 1.6;
}
.submit-sidebar .rule-list li i {
 margin-top: 3px;
 color: var(--color-primary);
 font-size: 13px;
}
.submit-sidebar .rule-list li strong {
 color: #1e293b;
 display: block;
 margin-bottom: 1px;
}
.auth-modal-card {
 width: 90%;
 max-width: 320px;
 padding: 24px 20px;
 background: #fff;
 border-radius: 12px;
 box-sizing: border-box;
 text-align: left;
 margin: auto;
}
.auth-tabs-wrap {
 display: flex;
 gap: 16px;
 border-bottom: 1px solid #f1f5f9;
 margin-bottom: 16px;
 padding-bottom: 6px;
}
.auth-tab {
 font-size: 15px;
 font-weight: bold;
 cursor: pointer;
 padding-bottom: 8px;
 transition: 0.2s;
 border-bottom: 2px solid transparent;
 margin-bottom: -7px;
}
.auth-tab.active {
 color: var(--color-primary);
 border-bottom-color: var(--color-primary);
}
.auth-tab.inactive {
 color: #94a3b8;
}
.auth-desc-text {
 font-size: 12px;
 color: #64748b;
 margin: 0 0 16px 0;
 text-align: left;
 line-height: 1.5;
}
.auth-inputs {
 display: flex;
 flex-direction: column;
 gap: 12px;
 margin-bottom: 16px;
}
.auth-input-row {
 display: flex;
 gap: 10px;
 align-items: center;
 height: 40px;
 width: 100%;
}
.auth-input-box {
 flex: 1;
 min-width: 0;
 width: 100%;
 height: 40px;
 border-radius: 6px;
 font-size: 13px;
 padding: 0 12px;
 border: 1px solid #e2e8f0;
 outline: none;
 background: #ffffff;
 color: #1e293b;
 transition: 0.2s ease;
 box-sizing: border-box;
 margin: 0;
 line-height: normal;
 font-family: inherit;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}
.auth-input-box::placeholder {
 color: #cbd5e1;
 font-weight: 400;
}
.auth-input-box:focus {
 border-color: var(--color-primary);
 box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.auth-right-box {
 width: 100px;
 height: 40px;
 border-radius: 6px;
 border: 1px solid #e2e8f0;
 box-sizing: border-box;
 flex-shrink: 0;
 margin: 0;
 padding: 0;
}
.auth-captcha-img {
 display: block;
 object-fit: cover;
 cursor: pointer;
 background: #f8fafc;
}
.auth-btn-code {
 background: #f8fafc;
 font-size: 12px;
 color: #475569;
 font-weight: bold;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: 0.2s;
 -webkit-appearance: none;
 appearance: none;
}
.auth-btn-code:hover:not(:disabled) {
 background: #f1f5f9;
 color: var(--color-primary);
}
.auth-btn-submit {
 width: 100%;
 height: 40px;
 background: var(--color-primary);
 color: #fff;
 border: none;
 border-radius: 6px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 transition: 0.2s ease;
 letter-spacing: 0.5px;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 6px;
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 -webkit-appearance: none;
 appearance: none;
}
.auth-btn-submit:hover:not(:disabled) {
 background: #2563eb;
}
.auth-tip {
 margin-top: 14px;
 font-size: 11px;
 color: #94a3b8;
 text-align: center;
 line-height: 1.4;
}
@media (max-width: 860px) {
 .submit-layout {
 flex-direction: column;
 align-items: stretch;
 gap: 20px;
 }

 .submit-sidebar {
 width: 100% !important;
 margin-top: 0;
 position: static;
 }

 .submit-form-area {
 width: 100% !important;
 padding: 24px 20px;
 }
}
@media (max-width: 640px) {
 .submit-form-area {
 padding: 20px 16px;
 border-radius: 12px;
 }

 .submit-main {
 padding-top: 10px;
 }

 .submit-form-area .url-input-wrapper {
 display: flex !important;
 flex-direction: row !important;
 gap: 8px !important;
 width: 100% !important;
 align-items: center !important;
 }

 .submit-form-area .url-input-wrapper .form-input {
 flex: 1 !important;
 width: 0 !important;
 min-width: 0 !important;
 display: block !important;
 margin: 0 !important;
 }

 .submit-form-area .url-input-wrapper .btn-action {
 flex-shrink: 0 !important;
 width: 90px !important;
 padding: 0 !important;
 justify-content: center !important;
 font-size: 12px !important;
 display: inline-flex !important;
 margin: 0 !important;
 }

 .submit-form-area .captcha-input-wrapper {
 display: flex !important;
 flex-direction: row !important;
 gap: 8px !important;
 width: 100% !important;
 align-items: center !important;
 }

 .submit-form-area .captcha-input-wrapper .form-input {
 flex: 1 !important;
 width: 0 !important;
 min-width: 0 !important;
 margin: 0 !important;
 }

 .submit-form-area #captcha-img {
 flex-shrink: 0 !important;
 width: 90px !important;
 height: 42px !important;
 border: 1px solid #e2e8f0 !important;
 border-radius: 8px !important;
 display: block !important;
 }

 .category-desc {
 display: none;
 }

 .hero-tabs-header .hero-tab-actions > span {
 display: none;
 }
}
.sidebar-widget-card {
 background: var(--bg-white) !important;
 border-radius: 8px !important; 
 padding: 16px 12px !important; /* */
 box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
 border: 1px solid #e5e7eb !important;
}
.sidebar-widget-card:hover {
 transform: none !important; 
 box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important; 
 border-color: #e5e7eb !important;
}
.sidebar-widget-card .widget-title {
 font-size: 14.5px !important; 
 font-weight: 600 !important;
 color: #4b5563 !important; 
 margin: 0 0 12px 0 !important;
 padding: 0 0 12px 0 !important; /* */
 border-bottom: 1px dashed #e2e8f0 !important; /* */
 display: flex;
 align-items: center;
 gap: 8px;
 letter-spacing: 0.3px;
}
.sidebar-widget-card .widget-content {
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
}
.sidebar-latest-wrap {
 position: relative;
 width: 100%;
}
.sidebar-latest-wrap .bg-watermark {
 display: none; /* */
}
.sidebar-latest-list {
 display: flex;
 flex-direction: column;
 gap: 4px;
}
.sidebar-latest-item {
 display: flex;
 align-items: center;
 gap: 10px;
 text-decoration: none;
 padding: 8px 10px;
 border-radius: 8px; /* */
 background: transparent;
 transition: background-color 0.2s ease; /* */
}
.sidebar-latest-item:hover {
 background: #f8fafc; /* */
}
.sl-icon {
 width: 28px;
 height: 28px;
 flex-shrink: 0;
 border-radius: 6px;
 background: #f8fafc;
 border: 1px solid #f1f5f9;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 13px;
 color: var(--color-primary);
 font-weight: 600;
 overflow: hidden;
}
.sidebar-latest-item:hover .sl-icon {
 background: #ffffff;
}
.sl-icon img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.sl-name {
 font-size: 13.5px;
 color: #1e293b;
 font-weight: 600;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 flex: 1;
 transition: color 0.2s;
}
.sidebar-latest-item:hover .sl-name {
 color: var(--color-primary);
}
.sl-meta {
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: flex-end;
}
.sl-time-text {
 font-size: 11.5px;
 color: #94a3b8;
 font-weight: 500;
 font-family: monospace;
}
.sl-badge-new {
 font-size: 0 !important; /* */
 background: transparent !important;
 border: none !important;
 padding: 0 !important;
 box-shadow: none !important;
 animation: none !important;
}
.sl-badge-new::after {
 content: "今天"; /* */
 font-size: 11.5px;
 color: #94a3b8;
 font-weight: 500;
 font-family: monospace;
}
.sl-empty {
 color: #94a3b8;
 font-size: 12px;
 text-align: center;
 padding: 20px 0;
}
.site-card {
 border: none !important;
 box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
@media screen and (max-width: 768px) {
 input[type="text"], 
 input[type="password"], 
 input[type="url"], 
 input[type="number"], 
 input[type="email"], 
 input[type="search"], 
 textarea, 
 select {
 font-size: 16px !important;
 }
}
.related-section {
 border: none !important; /* */
 box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; /* */
}
+.ad-bar-wrapper {
 margin-top: 0px; 
 margin-bottom: -8px; 
 display: flex; 
 align-items: center; 
 gap: 25px; 
 width: 100%; 
 overflow-x: auto; 
 scrollbar-width: none; 
 -ms-overflow-style: none;
 padding-bottom: 2px;
 padding-left: 4px; 
}
.ad-bar-wrapper::-webkit-scrollbar {
 display: none;
}
.ad-tag-item {
 font-size: 12.5px; 
 color: #475569; 
 text-decoration: none; 
 display: inline-flex; 
 align-items: center; 
 gap: 6px; 
 white-space: nowrap; 
 transition: 0.2s;
 flex-shrink: 0;
}
.ad-tag-item:hover {
 color: var(--color-primary);
}
.ad-text-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 17px; 
 height: 17px;
 border-radius: 50%;
 color: #ffffff;
 font-size: 10px; 
 font-weight: 600;
 flex-shrink: 0;
 transition: 0.2s;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.ad-tag-item:hover .ad-text-icon {
 transform: scale(1.1); 
 box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.ad-tag-placeholder {
 display: inline-flex; 
 align-items: center; 
 gap: 4px;
 font-size: 11.5px; 
 color: #cbd5e1; 
 background: transparent;
 border: 1px dashed #e2e8f0; 
 border-radius: 4px; 
 padding: 2px 6px 2px 3px;
 cursor: pointer; 
 white-space: nowrap; 
 flex-shrink: 0; 
 transition: 0.2s;
}
.ad-tag-placeholder:hover {
 color: var(--color-primary); 
 border-color: #bfdbfe; 
 background: #eff6ff;
}
.ad-tag-placeholder .ad-text-icon { 
 background: transparent; 
 border: 1px dashed #cbd5e1; 
 color: #94a3b8; 
 box-shadow: none; 
 width: 16px; 
 height: 16px; 
 font-size: 14px; 
 font-weight: normal; 
 margin-left: 2px;
}
.ad-tag-placeholder:hover .ad-text-icon {
 border-color: #bfdbfe; 
 color: var(--color-primary);
}
.ad-buy-btn {
 font-size: 11.5px; 
 color: #ef4444; 
 background: #fef2f2; 
 padding: 3px 8px; 
 border-radius: 4px; 
 cursor: pointer; 
 white-space: nowrap; 
 flex-shrink: 0; 
 transition: 0.2s;
 font-weight: 500; 
 border: none; 
 margin-left: auto;
}
.ad-buy-btn:hover {
 color: #dc2626; 
 background: #fee2e2; 
 transform: translateY(-1px);
}
.ad-modal-overlay {
 position: fixed; 
 inset: 0; 
 background: rgba(0,0,0,0.6); 
 backdrop-filter: blur(4px); 
 display: none; 
 align-items: center; 
 justify-content: center; 
 z-index: 9999; 
 opacity: 0; 
 transition: 0.3s; 
 cursor: pointer;
}
.ad-modal-overlay.show {
 display: flex; 
 opacity: 1;
}
.ad-modal-box {
 background: #fff; 
 width: 90%; 
 max-width: 340px; 
 border-radius: 16px; 
 box-shadow: 0 20px 40px rgba(0,0,0,0.2); 
 overflow: hidden; 
 transform: translateY(20px); 
 transition: 0.3s; 
 cursor: default;
}
.ad-modal-overlay.show .ad-modal-box {
 transform: translateY(0);
}
.ad-modal-header {
 padding: 14px 20px; 
 text-align: center; 
 border-bottom: 1px solid #f1f5f9;
}
.ad-modal-header h3 {
 margin: 0; 
 font-size: 16px; 
 color: #1e293b; 
 font-weight: bold;
}
.ad-modal-body {
 padding: 20px;
}
.ad-form-row {
 margin-bottom: 14px;
}
.ad-form-row label {
 display: block; 
 font-size: 12.5px; 
 color: #64748b; 
 margin-bottom: 6px;
}
.ad-form-row input[type="text"], 
.ad-form-row input[type="url"] {
 width: 100%; 
 padding: 10px 12px; 
 border: 1px solid #cbd5e1; 
 border-radius: 8px; 
 font-size: 13.5px; 
 outline: none; 
 transition: 0.2s;
}
.ad-form-row input:focus {
 border-color: var(--color-primary); 
 box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.pkg-box {
 display: flex; 
 gap: 10px;
}
.pkg-label {
 flex: 1; 
 border: 1px solid #cbd5e1; 
 border-radius: 8px; 
 padding: 8px; 
 text-align: center; 
 cursor: pointer; 
 position: relative; 
 transition: 0.2s;
}
.pkg-label input {
 position: absolute; 
 opacity: 0;
}
.pkg-label .p-name {
 display: block; 
 font-size: 13.5px; 
 font-weight: bold; 
 color: #334155; 
 margin-bottom: 2px;
}
.pkg-label .p-desc {
 display: block; 
 font-size: 11px; 
 color: #94a3b8;
}
.pkg-label:has(input:checked) {
 border-color: var(--color-primary); 
 background: #eff6ff; 
 box-shadow: 0 0 0 1px var(--color-primary);
}
.pkg-label:has(input:checked) .p-name {
 color: var(--color-primary);
}
.ad-submit-btn {
 width: 100%; 
 padding: 12px; 
 background: var(--color-primary); 
 color: #fff; 
 border: none; 
 border-radius: 8px; 
 font-size: 15px; 
 font-weight: bold; 
 transition: 0.2s; 
 cursor: pointer;
}
.ad-submit-btn:disabled {
 background: #94a3b8; 
 cursor: not-allowed;
}
.ad-color-0 { background-color: #60a5fa; }
.ad-color-1 { background-color: #34d399; }
.ad-color-2 { background-color: #fb7185; }
.ad-color-3 { background-color: #a78bfa; }
.ad-color-4 { background-color: #fb923c; }
.ad-color-5 { background-color: #2dd4bf; }
.ad-color-6 { background-color: #f472b6; }
.ad-color-7 { background-color: #38bdf8; }
.ad-color-8 { background-color: #818cf8; }
.ad-color-9 { background-color: #e879f9; }
.ad-color-10 { background-color: #facc15; }
.ad-color-11 { background-color: #4ade80; }
.ad-color-12 { background-color: #22d3ee; }
.ad-color-13 { background-color: #8b5cf6; }
.ad-color-14 { background-color: #f43f5e; }
.ad-color-15 { background-color: #14b8a6; }
.ad-color-16 { background-color: #0ea5e9; }
.ad-color-17 { background-color: #6366f1; }
.ad-color-18 { background-color: #ec4899; }
.ad-color-19 { background-color: #f97316; }
.ad-price-summary {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 margin: 15px 0;
}
.ad-total-price {
 color: #ef4444;
 font-size: 22px;
 font-weight: 700;
 line-height: 1;
}
.ad-price-note {
 color: #94a3b8;
 font-size: 11px;
 line-height: 1.4;
 text-align: right;
}
.ad-warning,
.ad-payment-note {
 color: #ef4444;
}
.ad-pay-view {
 text-align: center;
}
.ad-qr-code-container {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 180px;
 height: 180px;
 margin: 0 auto 15px;
 padding: 10px;
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 background: #f8fafc;
}
.ad-qr-code-container img {
 max-width: 100%;
}
.ad-payment-spinner {
 color: #cbd5e1;
}
.ad-payment-status {
 margin-bottom: 8px;
 color: #64748b;
 font-size: 13px;
}
.ad-payment-status-icon {
 color: #10b981;
}
.ad-payment-note {
 margin: 0;
 font-size: 11.5px;
}
.ad-reset-button {
 margin-top: 15px;
 padding: 6px 12px;
 border: 0;
 background: #f1f5f9;
}
.is-hidden,
.visually-hidden {
 display: none;
}
.top-bar-status {
 color: #b8c4d8;
 font-size: 10.5px;
}
.header-search {
 position: relative;
}
.engine-caret {
 margin-left: 4px;
 color: #9ca3af;
 font-size: 12px;
}
.search-submit {
 padding: 0 10px;
}
.push-ads-container {
 padding-top: 10px;
}
.home-featured-section {
 margin-bottom: 20px;
}
.self-top-action {
 display: flex;
 align-items: center;
 gap: 4px;
 color: #64748b;
 font-size: 12px;
 font-weight: 500;
 text-decoration: none;
 cursor: pointer;
 transition: color 0.2s;
}
.self-top-action:hover,
.profile-active {
 color: var(--color-primary);
}
.self-top-action i {
 font-size: 13px;
}
.profile-name {
 font-weight: 600;
}
.grid-empty {
 grid-column: 1 / -1;
 padding: 20px 0;
 color: #94a3b8;
 font-size: 13px;
 text-align: center;
}
.grid-empty--muted {
 color: #cbd5e1;
}
.app-lock-icon {
 margin-left: 4px;
 color: #cbd5e1;
 font-size: 11px;
}
.app-lock-icon--small {
 font-size: 10px;
}
.category-description {
 color: var(--text-desc);
 font-size: 11px;
}
.widget-icon--primary {
 color: var(--color-primary);
}
.widget-icon--warning {
 color: #f59e0b;
}
.widget-icon--danger {
 color: #ef4444;
}
.duration-options {
 display: flex;
 gap: 8px;
 margin-top: 4px;
}
.duration-label {
 flex: 1;
 padding: 12px 5px;
 border: 1px solid #cbd5e1;
 border-radius: 8px;
 background: #f8fafc;
 text-align: center;
 cursor: pointer;
 transition: 0.2s;
}
.duration-label.active {
 border-color: #10b981;
 background: rgba(16, 185, 129, 0.1);
}
.duration-label .dur-title {
 margin-bottom: 4px;
 color: #1e293b;
 font-size: 14px;
 font-weight: 700;
}
.duration-label .dur-price {
 color: #10b981;
 font-size: 12px;
 font-weight: 700;
}
.auth-tabs-wrap--centered {
 justify-content: center;
 margin-bottom: 0;
 border: 0;
}
.auth-tab--static {
 border: 0;
 cursor: default;
}
.auth-desc-text--centered {
 margin-bottom: 20px;
 text-align: center;
}
.auth-btn-submit--success {
 background: #10b981;
}
.auth-btn-submit--secondary {
 background: #f1f5f9;
 color: #475569;
}
.top-buy-pay-view {
 text-align: center;
}
.top-qr-code-container {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 160px;
 height: 160px;
 margin: 0 auto 15px;
 padding: 8px;
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 background: #f8fafc;
}
.top-qr-code-container img,
.top-qr-code-container canvas {
 max-width: 100%;
 border-radius: 6px;
}
.payment-spinner {
 color: #cbd5e1;
}
.payment-status {
 margin-bottom: 8px;
 color: #64748b;
 font-size: 13px;
}
.payment-status-icon {
 color: #10b981;
}
.payment-note {
 margin: 0;
 color: #ef4444;
 font-size: 11px;
}
.toast {
 visibility: hidden;
 position: fixed;
 z-index: 4000;
 bottom: 40px;
 left: 50%;
 padding: 8px 16px;
 transform: translateX(-50%);
 border-radius: 30px;
 opacity: 0;
 background: rgba(30, 41, 59, 0.9);
 color: #fff;
 font-size: 12.5px;
 text-align: center;
 transition: 0.3s;
}
.home-layout-wrapper {
 display: flex;
 align-items: flex-start;
 gap: 24px;
}
.sidebar-widget-card .widget-content {
 position: relative;
 z-index: 1;
 color: #475569;
 font-size: 13.5px;
 line-height: 1.7;
 word-break: break-all;
}
.sidebar-widget-card .widget-content img,
.sidebar-widget-card .widget-content iframe {
 display: block;
 max-width: 100%;
 border-radius: 8px;
}

/* */

/* */
.category-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 10px 0 0 0;
 border-top: 1px dashed #e2e8f0;
 margin-top: 20px;
}
.category-list {
 display: flex;
 align-items: center;
 gap: 2px;
 flex-wrap: wrap;
 list-style: none;
 padding: 0;
 margin: 0;
}
.category-list a {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 7px 13px;
 border-radius: 8px;
 font-size: 14px;
 color: var(--text-sub);
 text-decoration: none;
 transition: background .2s, color .2s;
}
.category-list a:hover {
 background: #f1f5f9;
 color: var(--color-primary);
}
/* 当前页高亮（顶导由 header.php 的 {php} 块给 li 加 .active） */
.category-list li.active > a,
.category-list li.active > a:hover {
 background: var(--color-primary) !important;
 color: #fff !important;
 border-color: var(--color-primary) !important;
}
.category-list li.active > a .cat-emoji { filter: brightness(0) invert(1); }
.cat-emoji { font-size: 16px; line-height: 1; vertical-align: middle; display: inline-block; }
.category-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.action-btn {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 padding: 7px 13px;
 border-radius: 8px;
 font-size: 13px;
 color: var(--text-sub);
 background: #f8fafc;
 border: 1px solid #eef2f7;
 cursor: pointer;
 transition: .2s;
}
.action-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.action-follow { color: var(--color-primary); }

/* */
.subtab-section { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.subtab-title {
 font-size: 18px;
 font-weight: 700;
 color: var(--text-main);
 display: flex;
 align-items: center;
 gap: 6px;
}
.subtab-title::before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--color-primary);
 box-shadow: 0 0 8px 0px rgb(59 130 246);
 margin-right: 5px;
}
.subtab-group {display: flex;gap: 4px;padding: 4px;background: #e0e3e7ad;border-radius: 999px;}
.subtab-item {
 padding: 6px 15px; border-radius: 999px; font-size: 13px;
 color: var(--text-sub); background: transparent; border: none; cursor: pointer; transition: .2s;
}
.subtab-item:hover { color: var(--color-primary); }
.subtab-item.active {background: var(--color-primary);color: #fff;box-shadow: 0 2px 6px rgb(177 195 225 / 85%);}
.subtab-panel { }
.subtab-panel[hidden] { display: none; }
.empty-tip { padding: 24px; text-align: center; color: var(--text-desc); font-size: 13px; }
/* 一级 grid 模式空态容器：脱离 .app-grid(Grid) 拉伸，让 text-align:center 真正生效 */
.zn-empty-center { display: block; text-align: center; padding: 28px 0; }

/* 网格模式：小灰字标题（未配二级 ID 时呈现） */
.category-section-simple { margin-top: 10px; margin-bottom: 10px; padding: 0; }
.subtab-title-simple {
 font-size: 14.5px;
 font-weight: 600;
 color: #64748b;
 margin-bottom: 12px;
 padding: 0 4px;
}

/* 整宽大标题（"网址卡片"等区块级标题） */
.home-section-title {
 font-size: 18px;
 font-weight: 700;
 color: var(--text-main, #1f2937);
 margin: 16px 0 14px 4px;
 display: flex;
 align-items: center;
}
.home-section-title::before {
 content: "";
 width: 8px; height: 8px;
 border-radius: 50%;
 background: var(--color-primary, #3b82f6);
 box-shadow: 0 0 8px 0px rgba(59, 130, 246, .6);
 margin-right: 10px;
}
@media (max-width: 640px) {
 .subtab-section { flex-wrap: wrap; gap: 10px; }
 .subtab-title { font-size: 15px; }
 .subtab-group { margin-left: 0; }
 .subtab-item { padding: 5px 12px; }
 .empty-tip { padding: 16px; }
}

/* */
.resource-grid-top { margin-bottom: 16px; }
@media (max-width: 1200px) {
 .resource-grid-top .game-grid { grid-template-columns: repeat(6, 1fr) !important; }
}
@media (max-width: 768px) {
 .resource-grid-top .game-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* */
.home-main { display: flex; align-items: flex-start; gap: 16px; }
.left-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
 .home-main { flex-direction: column; }
 .left-content { gap: 16px; width:100%}
 .sidebar-right { width: 100%; position: static; }
 .zn-sb { width: 100% !important; }
}

/* v1.1.34 侧栏：两块独立白卡（banner+数字 / tab+列表），白底圆角 */
.zn-sb {
 width: 270px; flex-shrink: 0; display: flex; flex-direction: column;
 gap: 16px; position: sticky; top: 16px; align-self: flex-start;
}
.zn-sb-card {
 background: #ffffff;
 border-radius: 14px;
 box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
 overflow: hidden;
}
/* ===== 卡片 A：banner + 头像 + 标题 + 副标题 + 4 数字 ===== */
.zn-sb-profile { padding: 0; }
.zn-sb-banner {
 position: relative;
 height: 100px;
 background: linear-gradient(135deg, #6ec1e4 0%, #9fd5e8 35%, #2e8b6a 100%) center/cover no-repeat;
 border-radius: 14px 14px 0 0;
}
.zn-sb-avatar {
 position: absolute;
 left: 50%;
 bottom: -36px;
 transform: translateX(-50%);
 width: 72px;
 height: 72px;
 border-radius: 50%;
 background: #ffffff;
 padding: 4px;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: center;
}
.zn-sb-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 border-radius: 50%;
}
.zn-sb-body { padding: 44px 6px 18px 6px; }
.zn-sb-title {
 text-align: center;
 font-size: 18px;
 font-weight: 700;
 color: #1f2937;
 line-height: 1.3;
}
.zn-sb-subtitle {
 text-align: center;
 font-size: 12px;
 color: #9ca3af;
 margin-top: 6px;
 line-height: 1.5;
 word-break: break-all;
}
.zn-sb-stats {
 display: flex;
 justify-content: space-between;
 margin-top: 18px;
 padding-top: 14px;
 border-top: 1px solid #f1f5f9;
}
.zn-sb-stat { flex: 1; text-align: center; }
.zn-sb-num {
 font-size: 18px;
 font-weight: 700;
 color: #1f2937;
 line-height: 1.2;
 font-family: 'Helvetica Neue', Arial, sans-serif;
 letter-spacing: -.3px;
}
.zn-sb-label {
 font-size: 11px;
 color: #9ca3af;
 margin-top: 4px;
}
/* ===== 卡片 B：tab + 列表 ===== */
.zn-sb-list { padding: 14px 14px 16px 14px; }
.zn-sb-tabs {
 display: flex;
 gap: 18px;
 border-bottom: 1px solid #f1f5f9;
 margin-bottom: 12px;
}
.zn-sb-tab {
 background: none;
 border: none;
 padding: 8px 2px 10px 2px;
 cursor: pointer;
 font-size: 14.5px;
 font-weight: 600;
 color: #9ca3af;
 position: relative;
 transition: color .2s;
 font-family: inherit;
 letter-spacing: .3px;
}
.zn-sb-tab:hover { color: #374151; }
.zn-sb-tab.active { color: #2563eb; font-weight: 700; }
.zn-sb-tab.active::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: -1px;
 transform: translateX(-50%);
 width: 24px;
 height: 2px;
 background: linear-gradient(90deg,#2563eb,#60a5fa);
 border-radius: 2px;
}
.zn-sb-panel { display: flex; flex-direction: column; gap: 4px; }
.zn-sb-panel[hidden] { display: none; }
.zn-sb-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 5px 12px 5px 8px;
 background: #ffffff;
 border: 0;
 border-radius: 8px;
 font-size: 13.5px;
 color: #1f2937;
 text-decoration: none;
 font-weight: 500;
 transition: background .15s, transform .15s;
}
.zn-sb-item + .zn-sb-item { margin-top: 4px; }
.zn-sb-item:hover {
 background: #f1f5fe;
 transform: translateX(2px);
}
.zn-sb-item:hover .zn-sb-name { color: #2563eb; }
.zn-sb-favicon {
 flex-shrink: 0;
 width: 26px;
 height: 26px;
 border-radius: 8px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 background: #f1f5f9;
 border: 1px solid #e2e8f0;
 position: relative;
}
.zn-sb-favicon img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 7px;
 display: block;
}
.zn-sb-favicon .lc-favicon {
 width: 100%;
 height: 100%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 7px;
 font-size: 14px;
 font-weight: 700;
 letter-spacing: -.5px;
 line-height: 1;
}
.zn-sb-favicon .lc-favicon-img { background: #ffffff; padding: 0; }
.zn-sb-favicon .lc-favicon-img img { border: 0; }
.zn-sb-favicon .lc-favicon-letter {
 background: #f8fafc;
}
.zn-sb-name {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 transition: color .2s;
 letter-spacing: -.2px;
}
.zn-sb-date {
 flex-shrink: 0;
 font-size: 12px;
 color: #94a3b8;
 font-family: 'Helvetica Neue', Arial, sans-serif;
 letter-spacing: -.2px;
 padding-left: 4px;
}
.zn-sb-item:hover .zn-sb-date { color: #64748b; }

/* ===== v1.7.23 侧栏列表：序号角标 + 斑马纹 ===== */
.zn-sb-panel { counter-reset: znrank; }
.zn-sb-item { counter-increment: znrank; }
.zn-sb-item::before {
 content: counter(znrank);
 flex-shrink: 0;
 width: 20px;
 height: 20px;
 border-radius: 6px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 font-weight: 700;
 line-height: 1;
 color: #94a3b8;
 background: #f1f5f9;
 font-family: 'Helvetica Neue', Arial, sans-serif;
 letter-spacing: 0;
}
.zn-sb-item:nth-child(1)::before { color: #fff; background: #f43f3f; }
.zn-sb-item:nth-child(2)::before { color: #fff; background: #ff7a1a; }
.zn-sb-item:nth-child(3)::before { color: #fff; background: #ffb02e; }
/* 斑马纹：奇数行浅底 */
.zn-sb-item:nth-child(odd) { background: #f8faff; }
.zn-sb-item:nth-child(odd):hover { background: #f1f5fe; }

/* ===== v1.7.26 侧栏福利社卡片（复刻摸鱼导航版式） ===== */
.zn-sb-fuli {
 padding: 14px;
 border-radius: 14px;
 box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
 background: linear-gradient(to right bottom, #f9ecc4 0%, #eadfab 100%);
}
.zn-fuli-inner {
 background: #ffffff;
 border-radius: 16px;
 padding: 8px 10px 10px;
}
.zn-fuli-head {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 padding: 14px 8px 10px;
}
.zn-fuli-title {
 font-size: 18px;
 font-weight: 600;
 color: #1f2937;
 letter-spacing: .3px;
}
.zn-fuli-badge {
 font-size: 12px;
 font-weight: 500;
 color: #fff2a2;
 background: #283593;
 border-radius: 5px;
 padding: 3px 7px;
 line-height: 16px;
 letter-spacing: .3px;
}
.zn-fuli-list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
}
.zn-fuli-item a {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px;
 border-radius: 8px;
 transition: background .15s;
 text-decoration: none;
 color: #1f2937;
}
.zn-fuli-item a:hover { background: #f5f6f8; }
.zn-fuli-ico {
 flex: none;
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 font-style: normal;
 line-height: 1;
}
.zn-fuli-ico img {
 width: 28px;
 height: 28px;
 object-fit: contain;
 border-radius: 6px;
 display: block;
}
.zn-fuli-txt {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.zn-fuli-name {
 font-size: 14px;
 font-weight: 600;
 color: #1f2937;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.zn-fuli-desc {
 font-style: normal;
 font-size: 12px;
 color: #9aa1ad;
 margin: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.zn-fuli-arrow {
 flex: none;
 width: 14px;
 height: 14px;
 color: #c0c4cc;
 position: relative;
}
.zn-fuli-arrow::before {
 content: '';
 position: absolute;
 top: 2px;
 left: 4px;
 width: 8px;
 height: 8px;
 border-top: 2px solid #c0c4cc;
 border-right: 2px solid #c0c4cc;
 transform: rotate(45deg);
}

/* ===== v1.7.22 侧栏新增：我要投稿 / 快捷工具 / 广告位（对标同行风格，沿用全站蓝色主色） ===== */
.zn-sb-sec-title {
 font-size: 15px;
 font-weight: 700;
 color: #1f2937;
 letter-spacing: .3px;
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 12px;
}
.zn-sb-sec-title::before {
 content: "";
 width: 4px;
 height: 14px;
 border-radius: 2px;
 background: linear-gradient(180deg, #2563eb, #60a5fa);
}
/* --- v1.7.44 投稿 / 留言 卡片 --- */
.zn-sb-say { padding: 14px 16px 16px; }
.zn-say-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 height: 42px;
 border-radius: 10px;
 margin-top: 10px;
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 1px;
 text-decoration: none;
 transition: transform .15s, box-shadow .15s, filter .15s;
}
.zn-say-btn svg { width: 17px; height: 17px; }
.zn-say-btn:hover { transform: translateY(-1px); }
.zn-say-btn:active { transform: translateY(0); }
.zn-say-primary {
 color: #fff;
 background: linear-gradient(135deg, #34d399, #10b981);
 box-shadow: 0 4px 10px rgba(16, 185, 129, .25);
}
.zn-say-primary:hover { filter: brightness(1.05); box-shadow: 0 6px 14px rgba(16, 185, 129, .32); }
.zn-say-ghost {
 color: #059669;
 background: #ecfdf5;
 box-shadow: inset 0 0 0 1px #a7f3d0;
 width: 100%;
}
.zn-say-ghost:hover { background: #d1fae5; }
/* --- 广告位 --- */
.zn-sb-ad { padding: 10px; }
.zn-sb-ad a { display: block; }
.zn-sb-ad img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: 8px;
}

/* ===== v1.1.25 整体移动端布局（不破坏现有 768+/1024+ 桌面布局） ===== */

/* 顶条 顶栏 小屏处理 */
@media (max-width: 640px) {
 .top-bar { padding: 6px 0; }
 .top-bar .container > div {
 font-size: 11.5px;
 line-height: 1.4;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
}

/* 头部 site-header 移动端 padding 调整 + logo 缩 */
@media (max-width: 640px) {
 .site-header { padding: 16px 0 10px 0; margin-bottom: 14px; }
 .logo-icon { width: 36px; height: 36px; }
 .logo-text h1 { font-size: 18px; }
 .logo-text p { font-size: 11px; }
}

/* 头部导航 <768：保持原 order 行为，但 search 100% 已自动换行 */
@media (max-width: 768px) {
 .header-search { margin-top: 14px; }
 #search-box-pill { height: 40px; }
}

/* <640 导航再压一压：nav-item 文字缩，只显图标也行（这里给中间档：缩字号 + 限制字数） */
@media (max-width: 640px) {
 .header-nav { gap: 10px; order: 4; width: 100%; justify-content: center; margin-top: 8px; }
 .nav-item img { width: 22px; height: 22px; }
 .nav-item span { font-size: 11px; }
}

/* 分类条 cat-bar <640 padding 缩、字号缩 */
@media (max-width: 640px) {
 .category-bar { padding-top: 8px; margin-top: 12px; gap: 10px; flex-wrap: wrap; }
 .category-list { gap: 1px; }
 .category-list a { padding: 6px 10px; font-size: 13px; }
 .cat-emoji { font-size: 14px; }
 .category-actions { gap: 6px; }
 .action-btn { padding: 6px 10px; font-size: 12px; }
}

/* 板块标题 home-section-title 移动端字号 */
@media (max-width: 640px) {
 .home-section-title { font-size: 15px; margin: 12px 0 10px 4px; }
}

/* 友链 / footer-meta 小屏竖排 */
@media (max-width: 640px) {
 .footer-meta {
 flex-direction: column !important;
 align-items: center !important;
 text-align: center;
 gap: 10px;
 }
 .footer-links {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 4px 10px;
 font-size: 12.5px;
 }
 .footer-links a { margin: 0 !important; padding: 2px 0; }
 .footer-copyright { font-size: 12px; }
 .friend-links-box { padding: 14px 12px; }
}

/* 最新/热门 右侧卡 移动端 */
@media (max-width: 640px) {
 .latest-collect { padding: 10px 12px; }
 .latest-collect-header { font-size: 14px; gap: 14px; margin-bottom: 8px; }
 .lc-tab { font-size: 14px; }
 .latest-collect-list li a { padding: 7px 8px; font-size: 13px; gap: 8px; }
 .lc-favicon { width: 22px; height: 22px; font-size: 11px; }
 .lc-date { font-size: 11px; }
}

/* 详情页 hero nd-hero 移动端纵向 + hero-thumb 居中 */
@media (max-width: 768px) {
 .nd-hero { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; }
 .nd-thumb { width: 100%; max-width: 220px; margin: 0 auto; height: 140px; }
 .nd-thumb img { height: 100%; }
 .nd-head { text-align: center; }
 .nd-meta { justify-content: center; }
 .nd-visit { display: block; margin: 12px auto 0; width: max-content; }
}
@media (max-width: 640px) {
 .nd-hero { padding: 12px 10px; }
 .nd-title { font-size: 18px; }
 .nd-sec-title { font-size: 15px; }
 .nd-section { padding: 12px 14px; }
}

.app-grid.game-grid,
.subtab-panel.game-grid,
.zn-cat-grid {
 grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
 gap: 10px;
}
@media (max-width: 640px) {
 .app-grid.game-grid,
 .subtab-panel.game-grid,
 .zn-cat-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 8px !important;
 }
 .app-grid.game-grid .styled-button,
 .subtab-panel.game-grid .styled-button,
 .zn-cat-grid .styled-button {
 padding: 8px 6px !important;
 font-size: 11.5px !important;
 }
 .app-grid.game-grid .styled-button:hover,
 .subtab-panel.game-grid .styled-button:hover,
 .zn-cat-grid .styled-button:hover {
 transform: none !important;
 }
 .app-grid.game-grid .zn-card-ico,
 .subtab-panel.game-grid .zn-card-ico,
 .zn-cat-grid .zn-card-ico {
 width: 20px !important;
 height: 20px !important;
 }
 .app-grid.game-grid .zn-card-ico img,
 .subtab-panel.game-grid .zn-card-ico img,
 .zn-cat-grid .zn-card-ico img {
 width: 16px !important;
 height: 16px !important;
 }
}

@media (max-width: 768px) {
 .container { padding: 0 12px; }
 .zn-site-header { padding: 8px 0 !important; }
}
@media (max-width: 480px) {
 .zn-nav-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
 .zn-nav-tabs::-webkit-scrollbar { display: none; }
}

html, body { overflow-x: hidden; }

@media (min-width: 992px) {
 .home.sidebar_right .sidebar:not(.col-12) .sidebar-inner {
 border-radius: 0 18px 18px 0;
 padding: 15px;
 background: #b1b8c6;
 border-left: 1px solid #a4aab6;
 }

 .sidebar_right .sidebar:not(.col-12) {
 margin-left: -280px;
 width: 280px;
 }

 .sidebar_right .content-layout {
 margin-right: calc(280px + 30px);
 }

 .archive.sidebar_right .content-layout {
 margin-right: calc(250px + 30px);
 }

 .archive.sidebar_right .sidebar:not(.col-12) {
 margin-left: -260px;
 width: 260px;
 }

 .zn-card-wrap:hover .zn-card-ico {
 animation: jumps 1.2s ease 1;
 }
}

@keyframes jumps {
 0% {
 transform: translate(0);
 }
 10% {
 transform: translateY(8px) scaleX(1.2) scaleY(0.8);
 }
 30% {
 transform: translateY(-5px) scaleX(1) scaleY(1) rotate(5deg);
 }
 50% {
 transform: translateY(3px) scale(1) rotate(0);
 }
 55% {
 transform: translateY(0) scaleX(1.1) scaleY(0.9) rotate(0);
 }
 70% {
 transform: translateY(-5px) scaleX(1) scaleY(1) rotate(-2deg);
 }
 80% {
 transform: translateY(0) scaleX(1) scaleY(1) rotate(0);
 }
 85% {
 transform: translateY(0) scaleX(1.05) scaleY(0.95) rotate(0);
 }
 to {
 transform: translateY(0) scaleX(1) scaleY(1);
 }
}

.zn-list-page {
 max-width: 1400px;
 margin: 10px auto 28px;
 padding: 0 16px;
}

.zn-cat-tabs {
 background: transparent;
 border: 0;
 border-radius: 0;
 padding: 25px 0 6px 0;
 margin: 0 0 12px 0;
 box-shadow: none;
}
.zn-cat-tab-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
.zn-cat-tab-item {}
.zn-cat-tab-item > a {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 padding: 9px 18px;
 border-radius: 6px;
 background: transparent;
 color: #475569;
 font-size: 14.5px;
 line-height: 1.2;
 text-decoration: none;
 border: 0;
 transition: background .18s ease, color .18s ease;
}
.zn-cat-tab-item > a:hover {
 background: #eef2f6;
 color: #1f2937;
}

.zn-cat-tab-item.active > a,
.zn-cat-tab-item.active > a:hover {
 background: var(--color-primary, #2563eb) !important;
 color: #fff !important;
 border: 0 !important;
 font-weight: 500;
 box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}
.zn-cat-tab-name { white-space: nowrap; }

@media (max-width: 640px) {
 .zn-cat-tabs { padding: 2px 0 4px 0; margin: 0 0 10px 0; }
 .zn-cat-tab-item > a { padding: 7px 13px; font-size: 13px; }
 .zn-list-page { margin: 8px auto 20px; padding: 0 12px; }
}

/* ============================================================
 * 分类页新版布局（v1.7.19.1）
 * ============================================================ */
.zn-cat-page{
 max-width:1400px;margin:0 auto 40px;padding:0 16px;
}
.zn-cat-hero{
 position:relative;overflow:hidden;
 min-height:240px;border-radius:18px;margin:4px 0 0;
 display:flex;align-items:flex-end;
 background-color:#475569;
 background-image:var(--zn-banner-img,linear-gradient(135deg,#6366f1 0%,#8b5cf6 35%,#ec4899 100%));
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 background-image: url(/zb_users/upload/2026/09/20260923114240179013496078396.jpg);
}
/* 底部渐暗遮罩，保证左下角文字可读 */
.zn-cat-hero::before{
 content:"";position:absolute;inset:0;
 background: linear-gradient(180deg, rgb(24 34 56 / 85%) 35%, rgb(15 23 42) 100%);
 pointer-events:none;
}
.zn-cat-hero-inner{
 position:relative;z-index:1;padding:26px 30px;width:100%;
}
.zn-cat-hero-title{
 font-size:32px;font-weight:800;color:#fff;letter-spacing:-.02em;margin:0 0 6px;
 text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.zn-cat-hero-count{
 font-size:13.5px;color:rgba(255,255,255,.85);margin:0 0 6px;
 display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.zn-cat-hero-desc{
 font-size:13px;color:rgba(255,255,255,.75);margin:0;line-height:1.6;
 max-width:640px;
}
.zn-cat-subnav{
 background:#fff;border-radius:14px;padding:10px 14px;margin:0 0 12px;
 box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.12);
}
.zn-cat-subnav-list{display:flex;flex-wrap:wrap;gap:10px}
.zn-cat-subnav-item{
 display:inline-flex;align-items:center;
 height:34px;padding:0 16px;border-radius:6px;
 background:#f8fafc;color:#475569;border:1px solid #e2e8f0;
 font-size:13.5px;font-weight:500;text-decoration:none;
 transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.zn-cat-subnav-item:hover{background:#f1f5f9;color:var(--color-primary);border-color:#bfdbfe}
.zn-cat-subnav-item.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:0 4px 12px rgba(37,99,235,.25)}
.zn-cat-subnav-item.active:hover{background:#2563eb;color:#fff;border-color:#2563eb}

@media (max-width:768px){
 .zn-cat-hero{min-height:130px;border-radius:14px;margin:0 0 10px}
 .zn-cat-hero-inner{padding:18px 16px}
 .zn-cat-hero-title{font-size:21px;margin:0 0 4px}
 .zn-cat-hero-count{font-size:12px;margin:0 0 3px}
 .zn-cat-hero-desc{font-size:12px;line-height:1.5}
 /* 一级 tab：单行横向滑动，整齐不换行 */
 .zn-cat-tabs{padding:2px 0 4px 0;margin:0 0 10px 0}
 .zn-cat-tab-list{
 flex-wrap:nowrap;
 overflow-x:auto;
 -webkit-overflow-scrolling:touch;
 scrollbar-width:none;
 padding-bottom:2px;
 }
 .zn-cat-tab-list::-webkit-scrollbar{display:none}
 .zn-cat-tab-item{flex:none}
 .zn-cat-tab-item > a{padding:7px 13px;font-size:13px;white-space:nowrap}
 /* 二级条：同样单行横向滑动 */
 .zn-cat-subnav{padding:8px 10px;border-radius:12px;margin:0 0 10px}
 .zn-cat-subnav-list{
 flex-wrap:nowrap;
 overflow-x:auto;
 -webkit-overflow-scrolling:touch;
 scrollbar-width:none;
 }
 .zn-cat-subnav-list::-webkit-scrollbar{display:none}
 .zn-cat-subnav-item{flex:none;height:30px;padding:0 13px;font-size:12.5px;white-space:nowrap}
}

.zn-hdr-actions { display: none; }

/* ============================================================
 * v1.7.21 单页导航按钮条（公告/提交收录等内页，hero 下方横排）
 * 按钮来自后台"自定义底栏链接"勾选"内页启用"的项
 * ============================================================ */
.zn-rail-page { max-width: 1040px; margin: 0 auto 20px; }
.zn-page-rail {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 background: #fff;
 border: 1px solid #eef1f5;
 border-radius: 14px;
 padding: 10px;
 margin: 0 0 20px;
 box-shadow: 0 6px 24px -12px rgba(15, 23, 42, .12);
}
.zn-rail-btn {
 flex: 1 1 0;
 min-width: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 46px;
 padding: 0 14px;
 background: #fff;
 border: 1px solid #eef1f5;
 border-radius: 10px;
 font-size: 13.5px;
 font-weight: 500;
 color: #475569;
 text-align: center;
 text-decoration: none;
 white-space: nowrap;
 transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.zn-rail-btn:hover {
 color: #3b82f6;
 border-color: #bfdbfe;
 background: #f5f9ff;
}
.zn-rail-btn.active {
 background: #3b82f6;
 color: #fff;
 border-color: #3b82f6;
 font-weight: 600;
 box-shadow: 0 6px 16px -6px rgba(59, 130, 246, .5);
}
/* 手机端：按钮一排一个（圆角保留）；三个内页统一左右 12px 边距 */
@media (max-width: 768px) {
 .zn-rail-page { padding-left: 12px; padding-right: 12px; }
 .zn-page-rail { gap: 8px; padding: 8px; margin-bottom: 14px; }
 .zn-rail-btn { flex: 1 1 100%; height: 42px; font-size: 13px; }
}

@media (max-width: 640px) {
 
 .top-bar { display: none; }

 
 .site-header {
 padding: 14px 0 10px 0;
 margin-bottom: 14px;
 }
 .header-inner {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 0;
 }
 .logo-area {
 order: 1;
 justify-content: center;
 flex: 0 1 auto;
 max-width: 100%;
 padding: 10px 0 15px 0;
 }
 .logo-text p { display: none; }
 .logo-icon { width: 34px; height: 34px; }
 .logo-text h1 { font-size: 17px; }

 
 .header-search {
 order: 3;
 flex: 0 0 100%;
 margin: 12px 0 0 0;
 max-width: 100%;
 width: 100%;
 }
 #search-box-pill { height: 40px; }

 .header-nav.zn-hdr-nav {
 order: 4;
 flex: 0 0 100%;
 display: flex !important;
 justify-content: space-around;
 gap: 6px;
 margin-top: 12px;
 flex-wrap: wrap;
 }
 .header-nav.zn-hdr-nav .nav-item {
 flex: 1 1 0;
 min-width: 0;
 text-align: center;
 }
 .header-nav.zn-hdr-nav .nav-item img { width: 24px; height: 24px; }
 .header-nav.zn-hdr-nav .nav-item span { font-size: 12px; }

 
 .category-bar {
 flex-wrap: nowrap;
 gap: 10px;
 }
 .category-list {
 flex-wrap: nowrap;
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 flex: 1 1 auto;
 min-width: 0;
 scrollbar-width: thin;
 }
 .category-list::-webkit-scrollbar { height: 2px; }
 .category-list::-webkit-scrollbar-thumb {
 background: #e2e8f0; border-radius: 1px;
 }
 .category-list a { white-space: nowrap; flex-shrink: 0; }
 .category-actions { flex-shrink: 0; }
}

.zn-to-top {
 position: fixed;
 right: 22px;
 bottom: 175px;
 width: 48px;
 height: 48px;
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.95);
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
 border: 0;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 1px;
 color: #475569;
 font-family: inherit;
 z-index: 9999;
 opacity: 0;
 visibility: hidden;
 transform: translateY(10px);
 transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .15s ease;
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 padding: 0;
 line-height: 1;
}
.zn-to-top.zn-to-top-show {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
/* v1.7.62 手机端滑动页面时隐藏 TOP，停下恢复（电脑端不隐藏） */
@media (max-width: 767px) {
 .zn-to-top.zn-to-top-hide {
 opacity: 0 !important;
 visibility: hidden !important;
 pointer-events: none;
 }
}
.zn-to-top:hover {
 background: #f1f5f9;
 color: #1e293b;
}
.zn-to-top:active {
 background: #e2e8f0;
}
.zn-to-top-arrow {
 width: 0;
 height: 0;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 11px solid currentColor;
 display: block;
}
.zn-to-top-text {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.5px;
 margin-top: 1px;
}
@media (max-width: 640px) {
 .zn-to-top {
 right: 14px;
 bottom: 160px;
 width: 44px;
 height: 44px;
 border-radius: 11px;
 }
}

.zn-card-hit-wrap { position: relative; display: block; }
.zn-card-hit {
 position: absolute;
 
 bottom: calc(100% + 6px);
 left: 50%;
 transform: translateX(-50%) translateY(3px);
 background: rgba(15,23,42,.92);
 color: #fff;
 font-size: 11px;
 padding: 3px 9px;
 border-radius: 999px;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 pointer-events: none;
 opacity: 0;
 transition: opacity .18s ease, transform .18s ease;
 backdrop-filter: blur(6px);
 z-index: 10;
 white-space: nowrap;
 box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.zn-card-hit i { font-size: 10px; opacity: .85; }

.zn-card-hit .hit-num { font-weight: 700; color: #ef4444; }
.zn-card-hit-wrap:hover .zn-card-hit,
.zn-card-hit-wrap:focus-within .zn-card-hit {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
}

.header-nav.zn-hdr-nav {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap; 
 gap: 16px; 
 align-items: center;
 justify-content: flex-end;
}

.nav-item {
 display: flex !important;
 flex-direction: column !important;
 align-items: center;
 gap: 4px; 
 text-decoration: none;
 color: #333;
 font-size: 12px;
}

.nav-item img {
 width: 28px;
 height: 28px;
 object-fit: contain;
}

@media (max-width: 991px) {
 .ctrld {
 display: none !important;
 }
}
.ctrld {
 text-align: center;
 padding: 22px 0;
 font-size: 14px;
 font-weight: 700;
 position: relative;
}
.ctrld-main {
 position: relative;
 z-index: 2;
 max-width: 1400px;
 margin: 0 auto;
 background: #fff;
 border-radius: 10px;
 padding: 20px 0;
}
.ctrld-pc {
 display: inline-block;
}
.ctrld-pc span:first-child {
 margin-left: 15px;
}
.ctrld-pc span {
 position: relative;
 color: #030405;
 border: 1px solid silver;
 border-radius: 3px;
 height: 3em;
 width: 3em;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 background-image: linear-gradient(#f5f5f5, #fff);
 margin: auto;
}
.ctrld-pc em {
 padding: 0 5px;
}
.ctrld-pc span:last-child {
 margin-right: 15px;
}
.ctrld-pc span::before {
 content: '';
 box-sizing: content-box;
 position: absolute;
 border: 2px solid rgba(240,240,240,0.9);
 border-top: 1px solid rgba(240,240,240,0.9);
 border-bottom: 7px solid rgba(240,240,240,0.9);
 border-radius: 3px;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: rgba(255,255,255,0.1);
}
.ctrld-main>span a {
 color: #283593;
 margin: 0 5px;
}
.ctrld::after {
 content: '';
 position: absolute;
 width: 100%;
 text-align: center;
 z-index: -1;
 height: 100%;
 left: 0%;
 bottom: 0;
}

.content-item-head-left .icon {
 width: 24px;
 height: 24px;
 vertical-align: middle;
}

/* ===== v1.7.43 福利社弹窗（同行 yinghe-window 结构，无 tab） ===== */
.yinghe-window {
 display: none;
 align-items: center;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100vh;
 z-index: 999999;
 pointer-events: none;
 background-color: rgba(0, 0, 0, .38);
 opacity: 0
}
.yinghe-window.open {
 display: flex;
 opacity: 1;
 pointer-events: auto
}
.yinghe-window-body {
 margin: 0 auto;
 padding: 10px;
 width: 330px
}
.yinghe-window-bg {
 background: #283593;
 padding: 20px 10px 10px;
 border-radius: 18px
}
.yinghe-window-main {
 background: #fff;
 padding: 30px;
 border-radius: 10px
}
.yinghe-window-title {
 font-size: 20px;
 color: #ffc920;
 text-align: center;
 padding: 0 0 15px;
 font-weight: 700
}
.yinghe-window-pane {
 display: none
}
.yinghe-window-pane.active {
 display: block
}
.yinghe-window-img {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 10px
}
.yinghe-window-img img {
 width: 100%
}
.yinghe-window-content {
 line-height: 1.7;
 margin: 20px -30px -30px;
 padding: 20px 25px;
 border-top: 1px dashed #283593;
 font-size: 13px;
 position: relative;
 color: rgba(0, 0, 0, .85);
 text-align: left
}
.yinghe-window-content:after,
.yinghe-window-content:before {
 content: '';
 position: absolute;
 height: 16px;
 width: 8px
}
.yinghe-window-content:after {
 right: 0;
 top: -8px;
 background: #283593;
 border-radius: 50px 0 0 50px;
 box-shadow: inset 1px 0px 1px 1px #2c346d
}
.yinghe-window-content:before {
 left: 0;
 top: -8px;
 background: #283593;
 border-radius: 0 50px 50px 0;
 box-shadow: inset -1px 0px 1px 1px #2c346d
}
.highlight-01 {
 position: relative;
 z-index: 1
}
.highlight-01::after {
 content: '';
 position: absolute;
 left: 0;
 width: 100%;
 z-index: -1;
 opacity: .7
}
.yinghe-window .highlight-01::after {
 background: #95ff88;
 bottom: 0;
 height: 10px
}
.btn-o {
 position: relative;
 z-index: 1;
 display: inline-block;
 border-radius: 6px;
 height: 40px;
 line-height: 40px;
 width: 100%;
 text-align: center;
 font-size: 14px;
 font-weight: 700;
 color: #283593;
 text-decoration: none
}
.btn-o::after {
 border: 1px solid #283593;
 z-index: -1;
 border-radius: 10px;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 content: "";
 transform-origin: 0 0;
 pointer-events: none
}
.btn-o.green {
 color: #fff !important
}
.btn-o.green::after {
 border-color: #07C160 !important;
 background-color: #07C160 !important
}
.yinghe-window-content .btn-o {
 margin: 10px 0 5px;
 display: none
}
@media (max-width: 767px) {
 .yinghe-window-body { width: 80%; }
 .yinghe-window-bg { padding: 10px; margin-top: -50px; }
 .yinghe-window-main { padding: 20px; }
 .yinghe-window-content { font-size: 12px; margin: 20px -20px -20px; padding: 20px; }
 .yinghe-window-content .btn-o { display: block; margin: 5px 0 0; height: 33px; line-height: 33px; font-size: 13px; }
 .yinghe-window-title { font-size: 18px; padding: 6px 0 12px; }
 .yinghe-window .highlight-01::after { height: 7px; }
}

/* ===== v1.7.28 侧栏手机自适应（今天新增的四块 + 福利社） ===== */
@media (max-width: 640px) {
 .zn-sb { gap: 12px; }
 .zn-sb-fuli { padding: 10px; }
 .zn-fuli-inner { padding: 6px 8px 8px; }
 .zn-fuli-head { padding: 10px 6px 8px; }
 .zn-fuli-title { font-size: 16px; }
 .zn-fuli-item a { padding: 9px 6px; }
 .zn-sb-ad { padding: 8px; }
}

/* ===== v1.7.54 在线留言弹窗（绿色主题；v1.7.54 去掉 backdrop-filter——滚动时每帧重算整页模糊导致卡顿） ===== */
.zn-msg-mask {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.38);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 999999;
 padding: 16px;
}
.zn-msg-mask[hidden] { display: none; }
.zn-msg-pop {
 width: 100%;
 max-width: 480px;
 background: #fff;
 border-radius: 16px;
 box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
 overflow: hidden;
 max-height: calc(100vh - 32px);
 overflow-y: auto;
 overscroll-behavior: contain;
 animation: znMsgIn .22s ease;
}
@keyframes znMsgIn {
 from { opacity: 0; transform: translateY(14px) scale(.98); }
 to { opacity: 1; transform: none; }
}
.zn-msg-head {
 position: relative;
 padding: 22px 24px 18px;
 background: linear-gradient(135deg, #059669, #34d399);
 color: #fff;
}
.zn-msg-head::after {
 content: "";
 position: absolute;
 left: 0; right: 0; bottom: -1px;
 height: 14px;
 background: #fff;
 border-radius: 16px 16px 0 0;
}
.zn-msg-title {
 margin: 0;
 font-size: 20px;
 font-weight: 700;
 letter-spacing: 1px;
}
.zn-msg-desc {
 margin: 6px 0 0;
 font-size: 13px;
 line-height: 1.6;
 color: rgba(255, 255, 255, 0.85);
}
.zn-msg-close {
 position: absolute;
 top: 14px;
 right: 14px;
 width: 30px;
 height: 30px;
 border: none;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.18);
 color: #fff;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background .15s;
}
.zn-msg-close:hover { background: rgba(255, 255, 255, 0.32); }
.zn-msg-close svg { width: 14px; height: 14px; }
.zn-msg-body { padding: 6px 24px 4px; }
.zn-msg-item { margin-bottom: 16px; }
.zn-msg-item:last-child { margin-bottom: 0; }
.zn-msg-label {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 14px;
 font-weight: 600;
 color: #1e293b;
 margin-bottom: 7px;
}
.zn-msg-label::before {
 content: "";
 width: 4px;
 height: 13px;
 border-radius: 2px;
 background: linear-gradient(180deg, #059669, #34d399);
}
.zn-msg-req { color: #ef4444; }
.zn-msg-input,
.zn-msg-textarea {
 width: 100%;
 box-sizing: border-box;
 border: 1px solid #d6ece1;
 border-radius: 10px;
 padding: 11px 14px;
 font-size: 14px;
 font-family: inherit;
 background: #f7fdfa;
 color: #0f172a;
 outline: none;
 transition: border-color .15s, box-shadow .15s, background .15s;
}
.zn-msg-input:focus,
.zn-msg-textarea:focus {
 border-color: #10b981;
 background: #fff;
 box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.zn-msg-textarea {
 min-height: 120px;
 resize: vertical;
 line-height: 1.6;
}
.zn-msg-tip { margin-top: 6px; font-size: 12px; color: #94a3b8; }
.zn-msg-foot {
 display: flex;
 gap: 12px;
 padding: 16px 24px 22px;
}
.zn-msg-btn {
 flex: 1;
 height: 44px;
 border: none;
 border-radius: 10px;
 font-size: 15px;
 font-weight: 600;
 letter-spacing: 1px;
 cursor: pointer;
 transition: filter .15s, transform .15s, box-shadow .15s;
}
.zn-msg-btn:active { transform: translateY(1px); }
.zn-msg-btn-cancel { background: #eef2f9; color: #475569; }
.zn-msg-btn-cancel:hover { background: #e2e8f0; }
.zn-msg-btn-ok {
 color: #fff;
 background: linear-gradient(135deg, #10b981, #34d399);
 box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.zn-msg-btn-ok:hover { filter: brightness(1.06); }
.zn-msg-btn-ok:disabled { background: #6ee7b7; box-shadow: none; cursor: not-allowed; }
@media (max-width: 640px) {
 .zn-msg-head { padding: 18px 18px 14px; }
 .zn-msg-title { font-size: 18px; }
 .zn-msg-desc { font-size: 12px; }
 .zn-msg-body { padding: 4px 18px 2px; }
 .zn-msg-foot { padding: 12px 18px 18px; gap: 10px; }
 .zn-msg-btn { height: 42px; font-size: 14px; }
 .zn-msg-input, .zn-msg-textarea { padding: 10px 12px; font-size: 13px; }
 .zn-msg-textarea { min-height: 100px; }
}