/* DuyLe v4: unified first-viewport hub, accessible two-theme appearance, clear app logos. */
:root{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
.theme-toggle{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:69px;height:37px;padding:0 10px;background:#f2f3fb;border:1px solid #e2e6f2;border-radius:11px;color:#5b6481;cursor:pointer;font-size:11px;font-weight:850;white-space:nowrap;flex-shrink:0;transition:background .18s,color .18s,border-color .18s}
.theme-toggle:hover{border-color:#aca7ee;background:#eeecff;color:#6256d6}
.theme-toggle .theme-icon{font-size:19px;line-height:1;display:inline-grid;place-items:center;width:19px;height:19px}
.theme-toggle:focus-visible{outline:3px solid #8c81f6;outline-offset:2px}
.login-language{display:flex;align-items:center;gap:8px;z-index:3}

/* Featured hub is the first content after the navigation. Both collections are still
   driven by the original serviceList / linkList IDs and original data APIs. */
.quick-hub-section{position:relative;padding:48px 0 56px;background:linear-gradient(148deg,#f4f3ff 0%,#f9fbff 58%,#f5f9ff 100%);border-bottom:1px solid #e8eafa;scroll-margin-top:76px}
.quick-hub-section:before{content:"";position:absolute;pointer-events:none;inset:0;background:radial-gradient(circle at 8% 0%,rgba(134,115,251,.10),transparent 40%)}
.quick-hub-section .container{position:relative}
.hub-heading{display:flex;gap:22px;align-items:end;justify-content:space-between;margin-bottom:25px}
.hub-kicker{display:inline-flex;align-items:center;gap:9px;color:#705cd9;letter-spacing:.16em;font-size:10px;font-weight:900;margin-bottom:11px}
.hub-kicker-dot{width:7px;height:7px;border-radius:100%;background:#7a69ef;box-shadow:0 0 0 4px #e9e4ff}
.hub-heading h2{font-size:clamp(26px,3.1vw,38px);font-weight:900;margin:0 0 10px;letter-spacing:-.047em}
.hub-heading p{font-size:13px;color:#7b87a0;margin:0;line-height:1.7}
.hub-heading-pill{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:10px;letter-spacing:.13em;white-space:nowrap;color:#6558df;background:white;padding:11px 13px;border-radius:99px;border:1px solid #e6e1ff}
.hub-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:18px;align-items:stretch}
.hub-panel{min-width:0;background:#fff;border:1px solid #e8ebf5;border-radius:22px;padding:21px;box-shadow:0 12px 35px rgba(55,64,115,.06)}
.hub-panel-title{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.hub-title-icon{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:13px;background:#f0edff;color:#7060e9;font-size:21px;font-weight:900}
.hub-title-icon.community-icon{background:#e9f6ff;color:#1b95cb}
.hub-panel-title h3{font-size:15px;letter-spacing:-.02em;margin:0 0 4px;font-weight:900}
.hub-panel-title p{font-size:11px;color:#909bb0;margin:0}
.hub-service-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.hub-service-list>.empty{grid-column:1/-1}
.hub-service-list .service-card{min-height:82px;padding:13px;gap:11px;border-radius:14px;box-shadow:none;background:#fbfcff;border-color:#e9edf5;min-width:0}
.hub-service-list .service-card.featured{background:#f7f5ff;border-color:#eae4ff}
.hub-service-list .service-icon{width:43px;height:43px;border-radius:12px;font-size:11px;font-weight:900;flex:0 0 43px}
.hub-service-list .service-icon.cert{font-size:25px}
.hub-service-list .service-copy strong{font-size:11.5px;color:#27324b}
.hub-service-list .service-copy span{font-size:10px;line-height:1.4}
.hub-service-list .go{font-size:19px}
.hub-link-list{display:flex;flex-direction:column;gap:10px}
.hub-link-list .link-row{display:flex;align-items:center;gap:11px;min-height:69px;padding:10px 11px;border:1px solid #e9edf5;border-radius:14px;background:#fbfcff;transition:transform .2s,border-color .2s,box-shadow .2s}
.hub-link-list .link-row:last-child{border-bottom:1px solid #e9edf5}
.hub-link-list .link-row:hover,.hub-service-list .service-card:hover{transform:translateY(-1px);border-color:#b8b1f5;box-shadow:0 5px 20px #332e6710}
.hub-link-list .ico{width:43px;height:43px;flex:0 0 43px;border-radius:12px;font-size:21px;background:#e8f5ff}
.hub-link-list .ico svg{width:25px;height:25px;fill:#229ed9}
.hub-link-list .link-copy strong{font-size:12px}
.hub-link-list .link-copy span{font-size:10px}
.hub-link-list .go{font-size:20px}
.hero-section{background:radial-gradient(ellipse at 85% 35%,#eeeaff 0,transparent 40%),linear-gradient(180deg,#fff,#fbfbff)}
.hero-grid{min-height:440px;padding-top:58px;padding-bottom:60px}

/* Logo fix: source files were proprietary CgBI PNGs; now normalized standard PNGs.
   Use source-size-aware display (no fabricated HD detail). */
.visual-app img{width:53px;height:53px;flex:0 0 53px;object-fit:contain;border-radius:15px;box-shadow:0 4px 11px #222c4a22;border:1px solid #dbe0ec;background:#fff}
.badge{width:57px;height:57px;flex:0 0 57px;border-radius:16px;background:#fff;border:1px solid #dde3ed;box-shadow:0 4px 13px #25355415;overflow:visible}
.badge img{display:block;width:100%;height:100%;object-fit:contain;border-radius:15px}
.tab img{width:28px;height:28px;object-fit:contain;border:1px solid #e0e4ef;border-radius:8px;background:#fff}
.logo-tile{border:1px solid #aea6fd;box-shadow:0 4px 17px #6658ef2d;font-weight:950;text-shadow:0 1px 2px #26256d66}
.site-logo,.footer-brand{white-space:nowrap}
/* Extra real estate for the mobile appearance toggle. */
@media(max-width:960px){.hub-layout{grid-template-columns:1fr 1fr}.hub-service-list{grid-template-columns:1fr}}
@media(max-width:760px){.quick-hub-section{padding:31px 0 39px}.hub-heading{margin-bottom:18px;align-items:start}.hub-heading-pill{display:none}.hub-layout{grid-template-columns:1fr;gap:13px}.hub-service-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-panel{padding:17px}.hub-panel-title{margin-bottom:13px}.hub-link-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.hub-link-list .link-row{min-width:0}.hub-link-list .link-copy{min-width:0}.hub-link-list .link-copy span{overflow-wrap:anywhere}}
@media(max-width:530px){.site-nav{gap:6px}.site-nav-cta{gap:5px}.site-logo{font-size:12px;gap:6px}.site-logo small{font-size:8px;letter-spacing:.08em}.site-nav .logo-tile{height:38px;width:38px;border-radius:12px;font-size:17px}.theme-toggle{width:38px;min-width:38px;padding:0}.theme-toggle .theme-label{display:none}.hub-heading h2{font-size:25px}.hub-heading p{font-size:12px}.hub-service-list{grid-template-columns:1fr}.hub-link-list{grid-template-columns:1fr}.hub-panel-title h3{font-size:14px}.hub-link-list .link-row{min-height:61px}.hub-service-list .service-card{min-height:75px}.badge{width:49px;height:49px;flex:0 0 49px}.badge img{border-radius:13px}.login-language .theme-toggle{width:36px;min-width:36px}.admin-header-right .theme-toggle{width:36px;min-width:36px}}

/* Dark palette: complete public + admin coverage, including forms and overlays. */
html[data-theme="dark"]{--ink:#e3e9fa;--heading:#f3f6ff;--muted:#a2afca;--muted-deep:#b8c1d7;--primary:#9b8cff;--primary-dark:#7a6bf0;--primary-soft:#272341;--blue:#75afff;--bg:#0c1324;--white:#151f32;--stroke:#2d3851;--shadow:0 16px 45px #00000023}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3{color:var(--heading)}
html[data-theme="dark"] .site-header{background:#101a2cf2;border-bottom-color:#2d3851}
html[data-theme="dark"] .site-navlinks{color:#adb9d2}
html[data-theme="dark"] .site-logo small{color:#96a4c3}
html[data-theme="dark"] .nav-admin,html[data-theme="dark"] .mobile-menu,html[data-theme="dark"] .surface,html[data-theme="dark"] .hub-panel,html[data-theme="dark"] .links-card{background:#151e31;color:#e9edfa;border-color:#2b3650}
html[data-theme="dark"] .nav-admin:hover,html[data-theme="dark"] .mobile-menu a:hover{background:#232a42}
html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .lang-switch{background:#222d43;border-color:#37425d;color:#e4e9f7}
html[data-theme="dark"] .theme-toggle:hover{background:#35335d;border-color:#7e72db}
html[data-theme="dark"] .lang-switch button{color:#b2bed6}
html[data-theme="dark"] .lang-switch button.selected{background:#423b78;color:#fff;box-shadow:none}
html[data-theme="dark"] .menu-toggle,html[data-theme="dark"] .admin-menu-toggle{background:#26304b;color:#c2b9ff}
html[data-theme="dark"] .quick-hub-section{background:linear-gradient(148deg,#171b36,#0c1527 65%,#10182b);border-bottom-color:#2d3550}
html[data-theme="dark"] .quick-hub-section:before{background:radial-gradient(circle at 8% 0%,#5542b32a,transparent 43%)}
html[data-theme="dark"] .hub-heading p,html[data-theme="dark"] .hub-panel-title p{color:#abb7d0}
html[data-theme="dark"] .hub-kicker{color:#b3a7ff}
html[data-theme="dark"] .hub-heading-pill{background:#282847;color:#cec6ff;border-color:#47426b}
html[data-theme="dark"] .hub-panel-title h3{color:#f3f6ff}
html[data-theme="dark"] .hub-title-icon{background:#342b57;color:#c2b7ff}
html[data-theme="dark"] .hub-title-icon.community-icon{background:#18374a;color:#72c9ff}
html[data-theme="dark"] .hub-service-list .service-card,html[data-theme="dark"] .hub-link-list .link-row{background:#1b2740;border-color:#344159;color:#e4eafa}
html[data-theme="dark"] .hub-service-list .service-card.featured{background:#2b2748;border-color:#4a416b}
html[data-theme="dark"] .hub-link-list .link-row:last-child{border-bottom-color:#344159}
html[data-theme="dark"] .hub-service-list .service-copy strong,html[data-theme="dark"] .link-copy strong,html[data-theme="dark"] .install-copy strong,html[data-theme="dark"] .service-copy strong{color:#eff3ff}
html[data-theme="dark"] .hub-service-list .service-copy span,html[data-theme="dark"] .link-copy span,html[data-theme="dark"] .install-copy span,html[data-theme="dark"] .service-copy span{color:#aab7cf}
html[data-theme="dark"] .hub-link-list .ico{background:#243b59!important}
html[data-theme="dark"] .hub-link-list .ico svg{fill:#5cbdff}
html[data-theme="dark"] .hero-section{background:radial-gradient(ellipse at 84% 32%,#252147 0,transparent 44%),linear-gradient(180deg,#101b2c,#101728);border-bottom-color:#26314b}
html[data-theme="dark"] .eyebrow{background:#2a2548;color:#c3b8ff;border-color:#423963}
html[data-theme="dark"] .eyebrow-dot{box-shadow:0 0 0 4px #37315a}
html[data-theme="dark"] .hero-description,html[data-theme="dark"] .section-heading p,html[data-theme="dark"] .links-intro p{color:#b1bcd4}
html[data-theme="dark"] .hero-person{border-color:#364059}
html[data-theme="dark"] .hero-person small,html[data-theme="dark"] .visual-app small{color:#b0bcd5}
html[data-theme="dark"] .hero-person>img{border-color:#283651;box-shadow:0 0 0 1px #45536e}
html[data-theme="dark"] .hero-person-status{background:#173d39;color:#60d6bd}
html[data-theme="dark"] .hero-orb-a{background:radial-gradient(circle,#322b61,#1d2244 51%,transparent 70%)}
html[data-theme="dark"] .hero-orb-b{border-color:#514677}
html[data-theme="dark"] .visual-panel{background:#171e32;border-color:#37415c;box-shadow:0 30px 80px #0005}
html[data-theme="dark"] .visual-panel-title,html[data-theme="dark"] .visual-bottom{color:#9daac5}
html[data-theme="dark"] .visual-app,html[data-theme="dark"] .install-card{background:#1e2a42;border-color:#32405b}
html[data-theme="dark"] .floating-note{background:#222b46;color:#e3e9ff;border-color:#3d4569}
html[data-theme="dark"] .btn-white,html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .btn-light{background:#242e47;color:#e8edfc;border-color:#3a4662}
html[data-theme="dark"] .btn-white:hover,html[data-theme="dark"] .btn-ghost:hover,html[data-theme="dark"] .btn-light:hover{background:#323d59}
html[data-theme="dark"] .btn-primary{color:#fff;background:#7060e7}
html[data-theme="dark"] .kicker{color:#a79cff}
html[data-theme="dark"] .section-counter{background:#30274e;color:#d0c7ff}
html[data-theme="dark"] .tabs{background:#222c42}
html[data-theme="dark"] .tab{color:#b1bbd1}
html[data-theme="dark"] .tab.active{background:#373357;color:#c7bdff}
html[data-theme="dark"] .tab-count{background:#3a465b;color:#bac6e3}
html[data-theme="dark"] .tab.active .tab-count{background:#4d4075;color:#e5dfff}
html[data-theme="dark"] .search-field{background:#101a2c;border-color:#35425d;color:#b8c7df}
html[data-theme="dark"] .search-field input{color:#f0f4fd}
html[data-theme="dark"] .search-field input::placeholder{color:#8b9bb6}
html[data-theme="dark"] .search-field:focus-within{border-color:#867af0;box-shadow:0 0 0 3px #4e42984d}
html[data-theme="dark"] .install-btn{background:#403766;color:#d8ceff}
html[data-theme="dark"] .install-btn:hover{background:#7869df;color:#fff}
html[data-theme="dark"] .badge{background:#f4f6fc;border-color:#536078}
html[data-theme="dark"] .catalog-foot{background:#222d43;color:#b5c3dc}
html[data-theme="dark"] .empty{background:#1b273c;border-color:#4d5975;color:#aab8d0}
html[data-theme="dark"] .service-icon{background:#183951;color:#76bcff}
html[data-theme="dark"] .service-icon.cert{background:#342b57;color:#c3b5ff}
html[data-theme="dark"] .service-card{background:#1a263b;border-color:#3a4660}
html[data-theme="dark"] .site-footer{background:#10192b;border-top-color:#2d3851}
html[data-theme="dark"] .footer-inner p{color:#a1adc7}
html[data-theme="dark"] .dns-notice-card{background:#1a263b;border:1px solid #34415b}
html[data-theme="dark"] .dns-notice-card p{color:#b7c3d9}
/* Admin: navigation, analytics, editors and authenticated shell. */
html[data-theme="dark"] .admin-sidebar,html[data-theme="dark"] .admin-header,html[data-theme="dark"] .panel-card,html[data-theme="dark"] .metric-card,html[data-theme="dark"] .tip-card{background:#151e31;border-color:#2e3a55}
html[data-theme="dark"] .sidebar-brand,html[data-theme="dark"] .admin-footer{border-color:#2e3a55}
html[data-theme="dark"] .sidebar-label{color:#8f9fbe}
html[data-theme="dark"] .side-link{color:#b9c4da}
html[data-theme="dark"] .side-link.active{background:#302b50;color:#c8bcff}
html[data-theme="dark"] .side-link:hover{background:#252e47}
html[data-theme="dark"] .sidebar-bottom{border-color:#2e3a55}
html[data-theme="dark"] .sidebar-site-link{background:#1b2943;border-color:#34415d;color:#dadff6}
html[data-theme="dark"] .sidebar-version,html[data-theme="dark"] .admin-footer{color:#a0aec9}
html[data-theme="dark"] .dashboard-heading p,html[data-theme="dark"] .panel-card-head p{color:#adb9d1}
html[data-theme="dark"] .admin-breadcrumb{color:#8d9dba}
html[data-theme="dark"] .admin-breadcrumb b{color:#e0e6f7}
html[data-theme="dark"] .live-indicator{background:#222e46;color:#bac5dd}
html[data-theme="dark"] .header-site-btn{color:#b8adff}
html[data-theme="dark"] .today-pill{background:#253047;color:#c1cbe0}
html[data-theme="dark"] .metric-card .metric-label,html[data-theme="dark"] .metric-foot{color:#aebbd3}
html[data-theme="dark"] .metric-number{color:#f5f7ff}
html[data-theme="dark"] .quick-action,html[data-theme="dark"] .admin-item,html[data-theme="dark"] .stat-row{background:#1c2940;border-color:#34415a;color:#ebeffb}
html[data-theme="dark"] .quick-action:hover,html[data-theme="dark"] .admin-item:hover{background:#23314d;border-color:#6860a7}
html[data-theme="dark"] .quick-action strong,html[data-theme="dark"] .admin-item strong{color:#edf1ff}
html[data-theme="dark"] .quick-action small,html[data-theme="dark"] .admin-item span,html[data-theme="dark"] .status-text{color:#b2c0d8}
html[data-theme="dark"] .field label{color:#c6cfe3}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{background:#101b2d;color:#f0f3ff;border-color:#38445e}
html[data-theme="dark"] .field input::placeholder,html[data-theme="dark"] .field textarea::placeholder{color:#8e9cb7}
html[data-theme="dark"] .field select option{background:#18233a;color:#f3f6ff}
html[data-theme="dark"] .form-status{background:#1b403b;color:#77e4c7}
html[data-theme="dark"] .notice{background:#242740;border-color:#3e4361;color:#bfc8e2}
html[data-theme="dark"] .optional-details{background:#1b2840;border-color:#3b4762}
html[data-theme="dark"] .optional-details summary{color:#c6baff}
html[data-theme="dark"] .compact-check{background:#1a283e;border-color:#36415b;color:#d6dded}
html[data-theme="dark"] .tip-card p{color:#b0bed6}
html[data-theme="dark"] .tip-card h3{color:#f1f4fc}
html[data-theme="dark"] .text-action{color:#beb2ff}
html[data-theme="dark"] .login-screen,html[data-theme="dark"] .login-column{background:#0e1728}
html[data-theme="dark"] .login-box>p:not(.form-error),html[data-theme="dark"] .login-back{color:#b5c1d8}
html[data-theme="dark"] .login-symbol{background:#342c56;color:#c2b6ff}
html[data-theme="dark"] .login-visual{background:linear-gradient(155deg,#302b63,#162a54)}
html[data-theme="dark"] .login-visual h2{color:#fff}
html[data-theme="dark"] .login-visual p{color:#d4dbf9}
html[data-theme="dark"] .toast{background:#303a5b;color:#fff}
@media(prefers-reduced-motion:reduce){.theme-toggle,.hub-link-list .link-row,.hub-service-list .service-card{transition:none}}
/* Slightly stronger secondary-text contrast in the first-access area. */
html:not([data-theme="dark"]) .hub-heading p{color:#64738e}
html:not([data-theme="dark"]) .hub-panel-title p{color:#667791}
html:not([data-theme="dark"]) .hub-service-list .service-copy span,html:not([data-theme="dark"]) .hub-link-list .link-copy span{color:#6c7d99}


/* v5 refinements: header logo, cleaner hero and richer service/community icons */
.logo-media{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#11182d,#1c2943);border:1px solid #d6dcf6;box-shadow:0 8px 20px rgba(54,71,120,.16)}
.logo-media img{width:100%;height:100%;object-fit:cover;display:block}
.footer-brand{display:inline-flex;align-items:center;gap:11px;font-weight:800}
.footer-logo{width:36px;height:36px;border-radius:12px}
.site-logo .logo-media{box-shadow:0 10px 22px rgba(83,95,164,.18)}
.hub-title-icon svg,.service-icon svg,.hub-link-list .ico svg{width:22px;height:22px;display:block;fill:currentColor}
.hub-title-icon{font-size:0}
.service-icon{display:grid;place-items:center;padding:0;color:#5b64e8;background:#eef2ff}
.service-icon.cert{color:#7a55f0;background:linear-gradient(135deg,#f2edff,#ebe6ff)}
.service-icon.dns{color:#2e83d6;background:linear-gradient(135deg,#e9f5ff,#e1efff)}
.hub-link-list .ico{display:grid;place-items:center;overflow:hidden}
.hub-link-list .ico img{width:100%;height:100%;object-fit:cover;display:block}
.hub-link-list .ico.ico-admin{padding:0;background:linear-gradient(135deg,#ece8ff,#e6f1ff)!important}
.hub-link-list .ico.ico-admin img{border-radius:12px}
.hub-link-list .ico.ico-chat svg{fill:#1d7be0}
.hub-link-list .ico.ico-telegram svg{fill:#229ed9}
@media(max-width:530px){.site-nav .logo-media{height:38px;width:38px;border-radius:12px}.footer-logo{width:34px;height:34px}}
html[data-theme="dark"] .logo-media{background:linear-gradient(135deg,#141d30,#1d2a47);border-color:#35425d;box-shadow:0 12px 24px rgba(0,0,0,.25)}
html[data-theme="dark"] .service-icon{background:#183951;color:#76bcff}
html[data-theme="dark"] .service-icon.cert{background:#342b57;color:#c3b5ff}
html[data-theme="dark"] .service-icon.dns{background:#123349;color:#78c0ff}
html[data-theme="dark"] .hub-title-icon svg{fill:currentColor}

/* v6: remove the redundant middle iOS Hub mockup; bring the real app catalog forward. */
.main-section{padding-top:42px}
@media(max-width:760px){.main-section{padding-top:32px}}
@media(max-width:530px){.main-section{padding-top:27px}}

/* Comfortable footer spacing after removing the old middle showcase. */
.main-section{padding-bottom:70px}
@media(max-width:760px){.main-section{padding-bottom:52px}}