:root {
            color-scheme: light dark;

            
            --color-bg: #ffffff;
            --color-fg: #0f172a;

            
            --elev-0: #ffffff;               
            --elev-1: rgba(255,255,255,0.95);
            --elev-2: rgba(255,255,255,0.98);

            --border: #e2e8f0;               
            --muted: #64748b;                
            --muted-2: #94a3b8;              
            --chip: #eef2ff;                 

            --brand: #5B7CFA;
            --brand-strong: #3E57B8;

            
            --header-bg: rgba(255,255,255,0.68);
            --header-border: rgba(226,232,240,0.8);
            --header-blur: 8px;

            
            --wm-svc: rgba(91,124,250,0.12);
            --wm-emoji-op: 0.14;

            
            --marquee-duration: 10s;
            --marquee-shift: 0px;
}

.maintenance-btn {
    background: none;
    color: #5B7CFA;
    border: none;
    padding: 0;
    border-radius: 0;
}
.maintenance-btn:hover {
    color: #4B68D9;
    text-decoration: none;
}
.maintenance-btn:active,
.maintenance-btn:focus-visible {
    background: none;
    color: #4B68D9;
    text-decoration: none;
}

        .dark :root {
            
            --color-bg: #0a0f1a;             
            --color-fg: #e7eaf0;             

            
            --elev-0: #0a0f1a;               
            --elev-1: rgba(24,34,54,0.96);   
            --elev-2: rgba(34,48,72,0.96);   

            --border: #1f2937;               
            --muted: #a3b2c5;                
            --muted-2: #cfd7e2;
            --chip: #1e2a3f;                 

            
            --header-bg: rgba(20,30,48,0.58);
            --header-border: rgba(34,48,72,0.65);

            
            --wm-svc: rgba(91,124,250,0.26);
            --wm-emoji-op: 0.28;

            
            --icon: #e6edf7;                 
        }
        :root { --icon: #64748b; }         

        
        html, body { height: 100%; }
        html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
        body {
            background: var(--color-bg);
            color: var(--color-fg);
            overscroll-behavior: none;
            min-height: 100dvh;
        }
        input, select, textarea { font-size: 16px; }

        * { -webkit-tap-highlight-color: transparent; }

        .line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .break-anywhere { overflow-wrap:anywhere; word-break:break-word; }

        .animate-in { animation: fadeSlideUp .22s ease-out both; }
        @keyframes fadeSlideUp { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

        
        header.sticky {
            -webkit-backdrop-filter: blur(var(--header-blur));
            backdrop-filter: blur(var(--header-blur));
            background-color: var(--header-bg);
            border-bottom: 1px solid var(--header-border);
            transform: translateZ(0);
            will-change: transform;
        }

        
        header.repaint {
            transform: translateZ(0.1px); 
            will-change: transform;
        }

        
        #appTitleWrap { position: relative; overflow: hidden; }
        #appTitle { white-space: nowrap; margin: 0; }
        #appTitleText { display: inline-block; will-change: transform; transform: translateX(0); }
        #appTitleWrap.scrolling #appTitleText { animation: title-marquee var(--marquee-duration) linear infinite; }
        @keyframes title-marquee {
            0%,10% { transform: translateX(0); }
            90%,100% { transform: translateX(var(--marquee-shift)); }
        }
        @media (prefers-reduced-motion: reduce) {
            #appTitleWrap.scrolling #appTitleText { animation: none; }
        }

        
        @media (hover: none) {
            button:hover, a:hover, [role="button"]:hover {
                background: inherit !important;
                color: inherit !important;
                box-shadow: none !important;
            }
        }
        .no-focus-outline:focus:not(:focus-visible) { outline: none !important; }
        .btn-pressable:active { transform: translateY(0.5px); filter: saturate(0.98) brightness(0.98); }

        
        .search-clear {
            position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
            width: 36px; height: 36px; display: none;
            align-items: center; justify-content: center;
            border-radius: 9999px; cursor: pointer; user-select: none;
        }
        .search-clear svg { width: 14px; height: 14px; pointer-events: none; display: block; color: var(--icon); }
        @media (hover: hover) and (pointer: fine) {
            .search-clear { display: flex; }
            .search-clear:hover { background: rgba(15, 23, 42, 0.06); }
            .dark .search-clear:hover { background: rgba(148,163,184,0.12); }
            .search-clear:active { transform: translateY(-50%) scale(0.98); }
        }
        .search-clear.is-empty { visibility: hidden; pointer-events: none; }

        
        .svc-card, .grp-card {
            background: var(--elev-1);
            border: 1px solid var(--border);
            border-radius: 14px;
            position: relative;
            overflow: hidden;
        }

        
        @media (hover: hover) and (pointer: fine) {
            .svc-card:hover, .grp-card:hover, .row-hover:hover {
                box-shadow: 0 10px 24px -16px rgba(0,0,0,.20);
                transform: translateY(-1px);
            }
            .svc-card .svc-chevron, .grp-card .grp-chevron { opacity: .9; transform: translateX(2px); }
        }
        .svc-card:active, .grp-card:active { transform: scale(0.997); }

        .svc-subtle { color: var(--muted); }
        .dark .svc-subtle { color: var(--muted-2); }

        
        .grp-inner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
        @media (hover:hover) and (pointer:fine) { .grp-inner { padding: 10px 14px; } }
        .grp-title { font-weight: 700; line-height: 1.25; color: var(--brand); font-size: 1.02rem; }
        @media (min-width: 768px) { .grp-title { font-size: 1rem; } }

        
        .wm, .svc-watermark, .grp-watermark, .sr-watermark { position: relative; overflow: hidden; }
        .wm::after, .svc-watermark::after, .grp-watermark::after, .sr-watermark::after {
            position: absolute; right: 10px; bottom: -4px; line-height: 1;
            pointer-events: none; user-select: none; content: "";
        }

        
        .svc-watermark::after {
            content: attr(data-mark);
            font-weight: 800;
            font-size: 44px;
            color: var(--wm-svc);
        }

        
        .grp-watermark::after, .sr-watermark::after {
            content: attr(data-emoji);
            font-size: 48px;
            opacity: var(--wm-emoji-op);
        }
        .dark .grp-watermark::after,
        .dark .sr-watermark::after {
            opacity: var(--wm-emoji-op);
            filter: brightness(1.22) saturate(1.18); 
        }
        .grp-watermark[data-emoji=""]::after, .sr-watermark[data-emoji=""]::after { content: ""; }

        
        .row-chevron, .grp-chevron {
            opacity: .7;
            transition: transform .15s ease, opacity .15s ease;
            flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
        }
        .row-chevron svg, .grp-chevron svg { color: var(--icon); }
        @media (hover:hover) and (pointer:fine) {
            .row-hover:hover .row-chevron,
            .row-hover:hover .grp-chevron { transform: translateX(2px); opacity: .95; }
        }

        
        

        
        .svc-chip {
            min-width: 24px; height: 24px;
            border-radius: 8px;
            background: var(--chip);
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 14px; line-height: 1;
        }

        
        #appTitleWrap { position: relative; overflow: hidden; }
        
        #appTitle.fade-swap { animation: titleSwap .18s ease-out; }
        @keyframes titleSwap { from { opacity:.25; transform: translateY(2px); } to { opacity:1; transform:none; } }

        
        #appTitle.loading::after {
            content:"";
            display:inline-block;
            vertical-align:middle;
            width: 6ch;               
            height: 0.9em;
            margin-left: .4ch;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(148,163,184,.18), rgba(255,255,255,.4), rgba(148,163,184,.18));
            animation: ttlSk 1.2s ease-in-out infinite;
        }
        @keyframes ttlSk { 0%{background-position:-150% 0} 100%{background-position:250% 0} }
        .dark #appTitle.loading::after {
            background: linear-gradient(90deg, rgba(71,85,105,.25), rgba(255,255,255,.15), rgba(71,85,105,.25));
        }