:root {
            color-scheme: light;
            --ether-base: #f4faff;
            --ether-accent: #3b82f6;
            --ether-cyan: #06b6d4;
            --glass-bg: rgba(255, 255, 255, 0.22);
            --glass-border: rgba(255, 255, 255, 0.7);
            --glass-shadow: 0 28px 70px rgba(59, 130, 246, 0.18);
            --glass-radius: 58px;
        }
        body {
            background-color: var(--ether-base);
            color: #1E293B;
            overflow: hidden;
            overscroll-behavior: none;
            letter-spacing: 0.015em;
        }
        @media print {
            body * {
                visibility: hidden;
            }
            #print-area, #print-area * {
                visibility: visible;
            }
            #print-area {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                padding: 24px;
                background: #fff;
                color: #000;
                font-size: 12px;
                line-height: 1.5;
            }
        }
        .app-shell {
            height: 100svh;
            min-height: 100svh;
        }
        @supports (height: 100dvh) {
            .app-shell {
                height: 100dvh;
                min-height: 100dvh;
            }
        }
        .bg-mesh {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: radial-gradient(circle at 15% 20%, rgba(59, 130, 246, 0.25), transparent 52%),
                        radial-gradient(circle at 80% 25%, rgba(6, 182, 212, 0.25), transparent 55%),
                        radial-gradient(circle at 60% 80%, rgba(59, 130, 246, 0.18), transparent 60%);
            z-index: 0; pointer-events: none; overflow: hidden;
        }
        .bg-mesh::before,
        .bg-mesh::after {
            content: "";
            position: absolute;
            width: 50vw;
            height: 50vw;
            border-radius: 50%;
            filter: blur(90px);
            opacity: 0.6;
            animation: drift 20s ease-in-out infinite;
        }
        .bg-mesh::before {
            background: radial-gradient(circle, rgba(59,130,246,0.35), transparent 65%);
            top: -15%;
            left: -10%;
        }
        .bg-mesh::after {
            background: radial-gradient(circle, rgba(6,182,212,0.32), transparent 65%);
            bottom: -20%;
            right: -10%;
            animation-delay: 5s;
        }
        .ether-particles {
            position: fixed; inset: 0; pointer-events: none; z-index: 0;
            background-image:
                radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 2px),
                radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 2px),
                radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 2px);
            background-size: 160px 160px, 220px 220px, 320px 320px;
            background-position: 0 0, 40px 80px, 120px 160px;
            animation: particle-float 26s linear infinite;
            opacity: 0.6;
            filter: blur(0.2px);
        }
        .ether-fog {
            position: fixed; inset: -10%; pointer-events: none; z-index: 0;
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 60%),
                        radial-gradient(circle at 70% 70%, rgba(255,255,255,0.5), transparent 65%);
            filter: blur(60px);
            opacity: 0.5;
            animation: fog-drift 18s ease-in-out infinite;
        }
        .glass-panel {
            position: relative;
            background: var(--glass-bg);
            backdrop-filter: blur(70px) saturate(180%);
            -webkit-backdrop-filter: blur(70px) saturate(180%);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
            border-radius: var(--glass-radius);
            overflow: hidden;
        }
        .glass-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(255,255,255,0.75), transparent 45%),
                linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);
            background-size: auto, 36px 36px, 36px 36px;
            background-position: 0 0, -1px -1px, -1px -1px;
            opacity: 0.38;
            pointer-events: none;
        }
        .glass-panel::after {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1px;
            border-radius: inherit;
            background: conic-gradient(
                from 120deg,
                transparent 0deg,
                rgba(59,130,246,0.7) 60deg,
                transparent 140deg,
                transparent 200deg,
                rgba(6,182,212,0.6) 260deg,
                transparent 340deg
            );
            opacity: 0;
            filter: blur(0.5px);
            transition: opacity 0.3s ease;
            pointer-events: none;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: beam-scan 4s linear infinite;
        }
        .glass-panel:hover::after {
            opacity: 0.75;
        }
        .glass-warning {
            background: linear-gradient(135deg, rgba(255,251,235,0.9), rgba(254,243,199,0.35));
            border-color: rgba(251, 191, 36, 0.45);
            box-shadow: 0 0 40px rgba(251, 191, 36, 0.18);
        }
        .view-section {
            display: none; opacity: 0; transform: scale(0.98) translateY(10px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            flex-direction: column; overflow-y: auto; overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }
        .view-section.active { opacity: 1; transform: scale(1) translateY(0); }
        .view-section.block-display { display: flex; }
        #view-result { overflow: hidden; }
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #94A3B8; border-radius: 2px; }
        .btn-primary {
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            color: #fff;
            font-weight: 600;
            transition: all 0.2s;
            border-radius: 44px;
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);
            border: 1px solid rgba(255,255,255,0.5);
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 36px rgba(59, 130, 246, 0.45);
        }
        .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        input, textarea, select {
            background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.3));
            border: none;
            color: #1E293B;
            transition: all 0.2s;
            border-radius: 32px;
            box-shadow:
                inset 0 0 0 1px rgba(255,255,255,0.45),
                inset 0 12px 24px rgba(255,255,255,0.35);
        }
        @media (max-width: 640px) {
            .view-section {
                padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
            }
        }
        input:focus, textarea:focus, select:focus {
            outline: none;
            background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
            box-shadow:
                0 0 0 2px rgba(6,182,212,0.35),
                0 0 24px rgba(59,130,246,0.18),
                inset 0 14px 28px rgba(255,255,255,0.5);
        }
        input::placeholder, textarea::placeholder {
            color: rgba(100, 116, 139, 0.8);
        }
        .custom-checkbox {
            appearance: none; background-color: rgba(255,255,255,0.6); margin: 0;
            width: 1.1rem; height: 1.1rem; min-width: 1.1rem; border: 1px solid rgba(59,130,246,0.35); border-radius: 0.35rem;
            display: grid; place-content: center; cursor: pointer;
        }
        .custom-checkbox::before {
            content: ""; width: 0.6rem; height: 0.6rem; transform: scale(0);
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em #F8FBFF; transform-origin: center; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }
        .custom-checkbox:checked::before { transform: scale(1); }
        .custom-checkbox:checked { background-color: #3B82F6; border-color: #3B82F6; }
        .loader {
            position: fixed; inset: 0; background: rgba(248,251,255,0.8); z-index: 200;
            display: none; align-items: center; justify-content: center; flex-direction: column;
        }
        .loader.active { display: flex; }
        .float-soft {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-6px); }
        }
        @keyframes drift {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(6%, -4%); }
        }
        @keyframes particle-float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0); }
        }
        @keyframes fog-drift {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(-20px, 15px); }
        }
        @keyframes gentle-sway {
            0%, 100% { transform: translateY(0) rotate(-1deg); }
            50% { transform: translateY(8px) rotate(1deg); }
        }
        @keyframes beam-scan {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .ether-avatar {
            position: fixed;
            top: 18vh;
            right: min(6vw, 60px);
            z-index: 1;
            width: clamp(120px, 18vw, 220px);
            height: clamp(120px, 18vw, 220px);
            pointer-events: none;
            animation: gentle-sway 9s ease-in-out infinite;
        }
        .avatar-core {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background:
                radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(6,182,212,0.25) 45%, rgba(59,130,246,0.18) 65%, transparent 72%),
                radial-gradient(circle at 70% 70%, rgba(59,130,246,0.18), transparent 65%);
            box-shadow: 0 0 80px rgba(59,130,246,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(30,58,138,0.7);
            backdrop-filter: blur(20px);
            position: relative;
        }
        .avatar-core::after {
            content: "";
            position: absolute;
            inset: 18%;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.55);
            box-shadow: 0 0 18px rgba(59,130,246,0.25);
            opacity: 0.7;
        }
        #loader.active ~ .ether-avatar .avatar-core {
            box-shadow: 0 0 110px rgba(59,130,246,0.55);
            color: rgba(59,130,246,0.95);
        }
        .app-shell {
            background: linear-gradient(160deg, rgba(255,255,255,0.75), rgba(255,255,255,0.25));
            backdrop-filter: blur(50px) saturate(200%);
            -webkit-backdrop-filter: blur(50px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 30px 80px rgba(59, 130, 246, 0.2);
        }
        .soft-divider {
            background: linear-gradient(90deg, rgba(59,130,246,0.2), rgba(255,255,255,0));
            height: 1px;
            width: 100%;
        }
        i svg { stroke-width: 1.6; }
        .text-gray-400 { color: #64748B !important; }
        .text-gray-500 { color: #475569 !important; }
        .text-gray-300 { color: #334155 !important; }
        .text-gray-200 { color: #1E293B !important; }
        .text-blue-400 { color: #3B82F6 !important; }
        .text-blue-300 { color: #0EA5E9 !important; }
        .text-blue-200 { color: #38BDF8 !important; }