:root {
            color-scheme: light;
            --ana: #0f172a;
            --vurgu: #fbbf24;
            --vurgu2: #f59e0b;
            --arka1: #0f172a;
            --arka2: #1e293b;
            --yazi: #f8fafc;
            --soluk: #94a3b8;
            --cam: rgba(30, 41, 59, .6);
            --cam2: rgba(15, 23, 42, .5);
            --cizgi: rgba(255, 255, 255, .1);
            --odak: rgba(251, 191, 36, .48);
            --hero1: #1e293b;
            --hero2: #0f172a;
            --heroYazi: #fff7df;
            --heroGlow1: rgba(251, 191, 36, .8);
            --heroGlow2: rgba(251, 191, 36, .1);
            --ico1: rgba(30, 64, 175, .35);
            --ico2: rgba(30, 64, 175, .12);
            --icoB: rgba(37, 99, 235, .35);
            --fonA: rgba(251, 191, 36, .16);
            --fonB: rgba(16, 185, 129, .12);
            --vurguMetin: #2b1b00;
            --vurguSoft1: rgba(251, 191, 36, .15);
            --vurguSoft2: rgba(251, 191, 36, .22);
            --vurguSoft3: rgba(251, 191, 36, .1);
            --vurguBorder: rgba(251, 191, 36, .85);
            --pinnedBg2: rgba(15, 23, 42, .92);
            --checkBg: rgba(15, 23, 42, .35);
            --checkBorder: rgba(251, 191, 36, .5);
            --menuPanel: #111827;
            --ok: #10b981;
            --uyari: #fbbf24;
            --hata: #ef4444;
            --sekme: 84px;
            --altGuvenlik: calc(var(--sekme) + 8px + env(safe-area-inset-bottom));
            --glassBg: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
            --glassBgStrong: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
            --glassStroke: rgba(255, 255, 255, .18);
            --glassShadow: 0 14px 36px rgba(2, 6, 23, .36);
            --glassGlow: 0 1px 0 rgba(255, 255, 255, .32) inset;
            --glassInset: inset 0 1px 0 rgba(255, 255, 255, .28)
        }

        body[data-theme="acik"] {
            color-scheme: light;
            --ana: #374151;
            --vurgu: #0ea5a4;
            --vurgu2: #0d9488;
            --arka1: #f9fafb;
            --arka2: #e5e7eb;
            --yazi: #1f2937;
            --soluk: #4b5563;
            --cam: rgba(255, 255, 255, .74);
            --cam2: rgba(255, 255, 255, .95);
            --cizgi: rgba(148, 163, 184, .33);
            --odak: rgba(14, 165, 164, .32);
            --hero1: #f3f4f6;
            --hero2: #e5e7eb;
            --heroYazi: #1f2937;
            --heroGlow1: rgba(148, 163, 184, .5);
            --heroGlow2: rgba(148, 163, 184, .1);
            --ico1: rgba(71, 85, 105, .22);
            --ico2: rgba(148, 163, 184, .14);
            --icoB: rgba(100, 116, 139, .35);
            --fonA: rgba(148, 163, 184, .18);
            --fonB: rgba(20, 184, 166, .12);
            --vurguMetin: #0f172a;
            --vurguSoft1: rgba(13, 148, 136, .16);
            --vurguSoft2: rgba(13, 148, 136, .24);
            --vurguSoft3: rgba(13, 148, 136, .08);
            --vurguBorder: rgba(13, 148, 136, .65);
            --pinnedBg2: rgba(226, 232, 240, .92);
            --checkBg: rgba(241, 245, 249, .9);
            --checkBorder: rgba(13, 148, 136, .45);
            --menuPanel: #ffffff;
            --glassBg: linear-gradient(150deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62));
            --glassBgStrong: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
            --glassStroke: rgba(255, 255, 255, .88);
            --glassShadow: 0 12px 30px rgba(148, 163, 184, .28);
            --glassGlow: 0 1px 0 rgba(255, 255, 255, .92) inset;
            --glassInset: inset 0 1px 0 rgba(255, 255, 255, .94)
        }

        body[data-theme="prometheus"],
        body[data-theme="okyanus"] {
            color-scheme: dark;
            --ana: #244855;
            --vurgu: #E64833;
            --vurgu2: #874F41;
            --arka1: #244855;
            --arka2: #874F41;
            --yazi: #FBE9D0;
            --soluk: #d5c3ab;
            --cam: rgba(36, 72, 85, .68);
            --cam2: rgba(135, 79, 65, .4);
            --cizgi: rgba(251, 233, 208, .2);
            --odak: rgba(230, 72, 51, .35);
            --hero1: #244855;
            --hero2: #90AEAD;
            --heroYazi: #FBE9D0;
            --heroGlow1: rgba(230, 72, 51, .5);
            --heroGlow2: rgba(144, 174, 173, .22);
            --ico1: rgba(230, 72, 51, .28);
            --ico2: rgba(144, 174, 173, .2);
            --icoB: rgba(251, 233, 208, .34);
            --fonA: rgba(230, 72, 51, .15);
            --fonB: rgba(144, 174, 173, .15);
            --vurguMetin: #1f120f;
            --vurguSoft1: rgba(230, 72, 51, .16);
            --vurguSoft2: rgba(230, 72, 51, .24);
            --vurguSoft3: rgba(144, 174, 173, .12);
            --vurguBorder: rgba(230, 72, 51, .7);
            --pinnedBg2: rgba(36, 72, 85, .94);
            --checkBg: rgba(36, 72, 85, .5);
            --checkBorder: rgba(230, 72, 51, .48);
            --menuPanel: #315866
        }

        body[data-theme="loket"],
        body[data-theme="zumrut"] {
            color-scheme: light;
            --ana: #E43D12;
            --vurgu: #E43D12;
            --vurgu2: #D6536D;
            --arka1: #EBE9E1;
            --arka2: #f4f0e7;
            --yazi: #5c2d22;
            --soluk: #865a4b;
            --cam: rgba(255, 255, 255, .82);
            --cam2: rgba(255, 255, 255, .96);
            --cizgi: rgba(228, 61, 18, .22);
            --odak: rgba(228, 61, 18, .28);
            --hero1: #fff4f2;
            --hero2: #FFE3EA;
            --heroYazi: #7a240f;
            --heroGlow1: rgba(228, 61, 18, .33);
            --heroGlow2: rgba(214, 83, 109, .22);
            --ico1: rgba(228, 61, 18, .18);
            --ico2: rgba(255, 162, 182, .24);
            --icoB: rgba(214, 83, 109, .33);
            --fonA: rgba(228, 61, 18, .08);
            --fonB: rgba(239, 177, 29, .12);
            --vurguMetin: #fff9f3;
            --vurguSoft1: rgba(228, 61, 18, .14);
            --vurguSoft2: rgba(228, 61, 18, .22);
            --vurguSoft3: rgba(239, 177, 29, .16);
            --vurguBorder: rgba(228, 61, 18, .5);
            --pinnedBg2: rgba(235, 233, 225, .98);
            --checkBg: rgba(255, 255, 255, .94);
            --checkBorder: rgba(228, 61, 18, .4);
            --menuPanel: #ffffff
        }

        body[data-theme="gece"] {
            color-scheme: dark;
            --ana: #1a1328;
            --vurgu: #f59e0b;
            --vurgu2: #d97706;
            --arka1: #1a1328;
            --arka2: #2a1f45;
            --yazi: #f8f5ff;
            --soluk: #b9afd3;
            --cam: rgba(37, 24, 63, .62);
            --cam2: rgba(26, 19, 40, .58);
            --cizgi: rgba(205, 190, 255, .2);
            --odak: rgba(245, 158, 11, .34);
            --hero1: #2a1f45;
            --hero2: #1a1328;
            --heroYazi: #fff7ea;
            --heroGlow1: rgba(245, 158, 11, .65);
            --heroGlow2: rgba(245, 158, 11, .08);
            --ico1: rgba(124, 58, 237, .25);
            --ico2: rgba(168, 85, 247, .12);
            --icoB: rgba(196, 181, 253, .32);
            --fonA: rgba(245, 158, 11, .16);
            --fonB: rgba(167, 139, 250, .12);
            --vurguMetin: #2c1700;
            --vurguSoft1: rgba(245, 158, 11, .14);
            --vurguSoft2: rgba(245, 158, 11, .24);
            --vurguSoft3: rgba(245, 158, 11, .08);
            --vurguBorder: rgba(245, 158, 11, .72);
            --pinnedBg2: rgba(31, 24, 49, .9);
            --checkBg: rgba(35, 24, 57, .45);
            --checkBorder: rgba(245, 158, 11, .45);
            --menuPanel: #211934
        }

        body[data-theme="yakut"] {
            color-scheme: dark;
            --ana: #231222;
            --vurgu: #f472b6;
            --vurgu2: #a855f7;
            --arka1: #231222;
            --arka2: #3b1b3b;
            --yazi: #fff2ff;
            --soluk: #d8b7de;
            --cam: rgba(59, 27, 59, .6);
            --cam2: rgba(35, 18, 34, .56);
            --cizgi: rgba(240, 201, 255, .23);
            --odak: rgba(244, 114, 182, .34);
            --hero1: #3b1b3b;
            --hero2: #231222;
            --heroYazi: #fff2ff;
            --heroGlow1: rgba(244, 114, 182, .52);
            --heroGlow2: rgba(168, 85, 247, .16);
            --ico1: rgba(244, 114, 182, .26);
            --ico2: rgba(168, 85, 247, .15);
            --icoB: rgba(216, 180, 254, .35);
            --fonA: rgba(244, 114, 182, .15);
            --fonB: rgba(168, 85, 247, .13);
            --vurguMetin: #2d093a;
            --vurguSoft1: rgba(244, 114, 182, .15);
            --vurguSoft2: rgba(244, 114, 182, .24);
            --vurguSoft3: rgba(168, 85, 247, .08);
            --vurguBorder: rgba(216, 180, 254, .74);
            --pinnedBg2: rgba(45, 22, 53, .92);
            --checkBg: rgba(35, 18, 34, .44);
            --checkBorder: rgba(244, 114, 182, .5);
            --menuPanel: #2b1631
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent
        }

        html,
        body {
            margin: 0;
            min-height: 100%;
            font-family: "Poppins", "Trebuchet MS", sans-serif;
            color: var(--yazi);
            background:
                radial-gradient(circle at 88% 10%, var(--fonA), transparent 36%),
                radial-gradient(circle at 14% 88%, var(--fonB), transparent 34%),
                linear-gradient(135deg, var(--arka1), var(--arka2))
        }

        body {
            display: flex;
            justify-content: center;
            padding: calc(env(safe-area-inset-top) + 1px) 12px var(--altGuvenlik);
            transition: background .45s ease, color .28s ease
        }

        button,
        .tab,
        .feedback-toggle {
            -webkit-touch-callout: none;
            user-select: none
        }

        .app {
            width: min(500px, 100%);
            min-height: auto
        }

        .hero {
            border-radius: 24px;
            padding: 19px;
            background: linear-gradient(135deg, var(--hero1), var(--hero2));
            color: var(--heroYazi);
            position: relative;
            overflow: hidden;
            border: 1px solid var(--glassStroke);
            box-shadow: var(--glassShadow), var(--glassGlow)
        }

        .hero:after {
            content: "";
            position: absolute;
            right: -35px;
            top: -30px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, var(--heroGlow1), var(--heroGlow2) 65%)
        }

        .hero h1 {
            margin: 0;
            font-size: 1.34rem;
            position: relative;
            z-index: 1
        }

        .hero p {
            margin: 8px 0 0;
            font-size: .9rem;
            line-height: 1.4;
            position: relative;
            z-index: 1
        }

        main {
            margin-top: 12px;
            position: relative
        }

        .panel-viewport {
            width: 100%;
            overflow: hidden;
            touch-action: pan-y pinch-zoom;
            user-select: none
        }

        .panel-track {
            display: flex;
            width: 100%;
            align-items: flex-start;
            will-change: transform;
            transform: translate3d(0, 0, 0)
        }

        main>.panel {
            display: none
        }

        .panel-track>.panel {
            display: grid;
            gap: 10px;
            flex: 0 0 100%;
            min-width: 100%;
            padding-bottom: 0
        }

        @media (max-width: 640px) {
            body {
                padding-top: calc(env(safe-area-inset-top) + 1px)
            }
        }

        @keyframes in {
            from {
                opacity: 0;
                transform: translateY(8px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .card {
            border: 1px solid var(--glassStroke);
            background: var(--glassBg);
            backdrop-filter: blur(16px) saturate(140%);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
            border-radius: 16px;
            padding: 12px;
            box-shadow: var(--glassShadow), var(--glassGlow);
            transition: border-color .26s ease, background .28s ease, color .25s ease, box-shadow .25s ease
        }

        .card h2,
        .card h3 {
            margin: 0 0 8px;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .ico {
            width: 24px;
            height: 24px;
            border-radius: 9px;
            display: grid;
            place-items: center;
            background: linear-gradient(140deg, var(--ico1), var(--ico2));
            border: 1px solid var(--icoB)
        }

        .ico svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .muted {
            color: var(--soluk);
            font-size: .82rem;
            line-height: 1.4;
            margin: 0
        }

        .cluster {
            display: grid;
            gap: 8px;
            grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .stack {
            display: grid;
            gap: 8px
        }

        .label-help {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px
        }

        .label-help label {
            margin-bottom: 0
        }

        .label-help .hintbtn {
            width: 28px;
            height: 28px;
            flex: 0 0 auto
        }

        label {
            display: block;
            font-size: .78rem;
            color: var(--soluk);
            margin-bottom: 4px
        }

        input,
        select,
        textarea,
        button {
            width: 100%;
            border: 1px solid var(--glassStroke);
            border-radius: 12px;
            background: var(--glassBgStrong);
            color: var(--yazi);
            font: inherit;
            padding: 9px 10px;
            box-shadow: var(--glassInset)
        }

        textarea {
            min-height: 98px;
            resize: vertical
        }

        button {
            cursor: pointer
        }

        input:focus,
        select:focus,
        textarea:focus,
        button:focus-visible {
            outline: 2px solid var(--odak);
            outline-offset: 1px
        }

        .btnp {
            border: none;
            color: var(--vurguMetin);
            font-weight: 700;
            background: linear-gradient(130deg, var(--vurgu), var(--vurgu2));
            box-shadow: 0 10px 22px var(--vurguSoft2), inset 0 1px 0 rgba(255, 255, 255, .22)
        }