*,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: #ffffff;
            color: #0f172a;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased
        }

        .container {
            max-width: 72rem;
            margin: 0 auto
        }

        /* ── Upload zone ── */
        .uz{position:relative;background:#f5f9ff;border:2px dashed #bfdbfe;border-radius:1.75rem;padding:2.75rem 2rem 1.875rem;text-align:center;cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s;overflow:hidden;display:flex;flex-direction:column;align-items:center}
        .uz:hover,.uz.drag-over{border-color:#6366f1;background:#eff6ff;box-shadow:0 0 0 5px rgba(99,102,241,.07)}
        .uz-cloud{width:3.625rem;height:3.625rem;margin-bottom:.9rem;flex-shrink:0}
        .uz-title{font-size:1.0625rem;font-weight:700;color:#0f172a;margin:0 0 .3rem}
        .uz-hint{font-size:.8125rem;color:#64748b;margin:0}
        .uz-deco{position:absolute;width:2.625rem;height:2.625rem;border-radius:.625rem;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.07)}
        .uz-deco-tl{top:1.125rem;left:1.125rem}
        .uz-deco-tr{top:1.125rem;right:1.125rem}
        .uz-deco-bl{bottom:1.375rem;left:1.125rem}
        .uz-deco-br{bottom:1.375rem;right:1.125rem}
        .uz-trust{display:flex;flex-wrap:wrap;gap:.375rem 1rem;justify-content:center;margin-top:1.375rem;font-size:.6875rem;font-weight:600;color:#94a3b8}
        .uz-trust span{display:inline-flex;align-items:center;gap:.275rem}
        @media(max-width:540px){.uz-deco{display:none}.uz{padding:2.25rem 1.25rem 1.375rem}}

        /* ── Editor layout ── */
        #editorSection {
            display: none
        }

        .editor-grid {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 1.5rem;
            align-items: start
        }

        @media(max-width:900px) {
            .editor-grid {
                grid-template-columns: 1fr
            }
        }

        /* ── Cards ── */
        .card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 1.25rem;
            padding: 1.75rem;
            box-shadow: 0 2px 10px rgba(15, 23, 42, .05)
        }

        .glass-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .9));
            border: 1px solid rgba(226, 232, 240, .8);
            border-radius: 1.5rem;
            padding: 2rem 1.5rem;
            text-align: center;
            box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
            transition: transform .3s, box-shadow .3s
        }

        .glass-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(99,102,241, .12)
        }

        .tool-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            padding: 1.25rem .875rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .625rem;
            text-decoration: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
            transition: transform .3s, box-shadow .3s, border-color .3s
        }

        .tool-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99,102,241, .15);
            border-color: #6366f1
        }

        /* ── Form fields ── */
        .field-group {
            margin-bottom: 1.25rem
        }

        .field-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .375rem
        }

        .field-label label {
            font-size: .8125rem;
            font-weight: 600;
            color: #374151
        }

        .char-counter {
            font-size: .7rem;
            color: #94a3b8;
            transition: color .2s
        }

        .char-counter.warn {
            color: #f59e0b
        }

        .char-counter.limit {
            color: #ef4444
        }

        .field-input {
            width: 100%;
            padding: .625rem .875rem;
            border: 1.5px solid #e2e8f0;
            border-radius: .625rem;
            font-size: .875rem;
            color: #0f172a;
            font-family: inherit;
            transition: border-color .2s, box-shadow .2s;
            background: #fff
        }

        .field-input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99,102,241, .1)
        }

        .field-input::placeholder {
            color: #cbd5e1
        }

        .field-helper {
            font-size: .7rem;
            color: #94a3b8;
            margin-top: .3rem;
            line-height: 1.4
        }

        .field-readonly {
            width: 100%;
            padding: .625rem .875rem;
            background: #f8fafc;
            border: 1.5px solid #f1f5f9;
            border-radius: .625rem;
            font-size: .875rem;
            color: #64748b;
            font-family: inherit
        }

        /* ── Buttons ── */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            font-weight: 600;
            font-size: .875rem;
            padding: .75rem 1.75rem;
            border-radius: 9999px;
            border: none;
            cursor: pointer;
            transition: transform .2s, box-shadow .2s, opacity .2s;
            font-family: inherit
        }

        .btn:active {
            transform: scale(.97)
        }

        .btn-primary {
            background: linear-gradient(135deg, #6366f1, #7c3aed);
            color: #fff;
            box-shadow: 0 4px 12px rgba(99,102,241, .3)
        }

        .btn-primary:hover {
            box-shadow: 0 6px 20px rgba(99,102,241, .4);
            transform: translateY(-1px)
        }

        .btn-primary:disabled {
            opacity: .6;
            cursor: not-allowed;
            transform: none
        }

        .btn-success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #fff;
            box-shadow: 0 4px 12px rgba(16, 185, 129, .3)
        }

        .btn-success:hover {
            box-shadow: 0 6px 20px rgba(16, 185, 129, .4);
            transform: translateY(-1px)
        }

        .btn-danger {
            background: #fff;
            color: #ef4444;
            border: 1.5px solid #fca5a5
        }

        .btn-danger:hover {
            background: #fef2f2;
            border-color: #ef4444
        }

        .btn-ghost {
            background: #f8fafc;
            color: #475569;
            border: 1.5px solid #e2e8f0
        }

        .btn-ghost:hover {
            background: #f1f5f9;
            color: #334155
        }

        .btn-sm {
            padding: .5rem 1rem;
            font-size: .8rem
        }

        .btn-icon {
            padding: .5rem;
            border-radius: .5rem
        }

        /* ── Info panel rows ── */
        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .6rem 0;
            border-bottom: 1px solid #f1f5f9;
            gap: .5rem
        }

        .info-row:last-child {
            border-bottom: none
        }

        .info-label {
            font-size: .78rem;
            color: #64748b;
            font-weight: 500;
            white-space: nowrap
        }

        .info-value {
            font-size: .8rem;
            color: #0f172a;
            font-weight: 600;
            text-align: right;
            word-break: break-all
        }

        /* ── Completeness ring ── */
        .score-ring {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.25rem 0 1rem
        }

        .score-ring svg {
            filter: drop-shadow(0 2px 8px rgba(99,102,241, .2))
        }

        .score-percent {
            font-size: 1.375rem;
            font-weight: 800;
            fill: url(#scoreGrad)
        }

        .score-label-text {
            font-size: .55rem;
            fill: #94a3b8;
            font-weight: 500
        }

        .score-field-list {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: .35rem;
            margin-top: .75rem
        }

        .score-field-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .775rem
        }

        .score-field-name {
            color: #64748b
        }

        .score-check {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.1rem;
            height: 1.1rem;
            border-radius: 50%;
            font-size: .6rem;
            font-weight: 700
        }

        .score-check.ok {
            background: #dcfce7;
            color: #16a34a
        }

        .score-check.miss {
            background: #f1f5f9;
            color: #94a3b8
        }

        /* ── Status badge ── */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: .375rem;
            padding: .25rem .75rem;
            border-radius: 9999px;
            font-size: .7rem;
            font-weight: 600
        }

        .badge-complete {
            background: #dcfce7;
            color: #15803d
        }

        .badge-partial {
            background: #fef9c3;
            color: #854d0e
        }

        .badge-missing {
            background: #fee2e2;
            color: #b91c1c
        }

        /* ── File bar ── */
        .file-bar {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: .875rem;
            margin-bottom: 1.25rem;
            box-shadow: 0 1px 4px rgba(15, 23, 42, .04)
        }

        .file-bar-icon {
            width: 2.5rem;
            height: 2.5rem;
            background: linear-gradient(135deg, #6366f1, #7c3aed);
            border-radius: .625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .file-bar-info {
            flex: 1;
            min-width: 0
        }

        .file-bar-name {
            font-weight: 700;
            font-size: .875rem;
            color: #0f172a;
            truncate;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
        }

        .file-bar-size {
            font-size: .75rem;
            color: #64748b
        }

        /* ── Keywords tags ── */
        .kw-convert-btn {
            font-size: .7rem;
            color: #3b82f6;
            background: none;
            border: 1px solid #bfdbfe;
            border-radius: .375rem;
            padding: .2rem .5rem;
            cursor: pointer;
            font-family: inherit;
            transition: background .2s
        }

        .kw-convert-btn:hover {
            background: #eff6ff
        }

        /* ── Toast ── */
        #toastContainer {
            position: fixed;
            top: 1.25rem;
            right: 1.25rem;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: .625rem;
            pointer-events: none
        }

        .toast {
            display: flex;
            align-items: center;
            gap: .75rem;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: .875rem;
            padding: .875rem 1.125rem;
            box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
            min-width: 260px;
            max-width: 360px;
            pointer-events: all;
            animation: toastIn .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
            font-size: .8125rem;
            font-weight: 500
        }

        .toast.out {
            animation: toastOut .25s ease forwards
        }

        .toast-icon {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .75rem;
            flex-shrink: 0
        }

        .toast.success .toast-icon {
            background: #dcfce7;
            color: #16a34a
        }

        .toast.error .toast-icon {
            background: #fee2e2;
            color: #b91c1c
        }

        .toast.info .toast-icon {
            background: #dbeafe;
            color: #1d4ed8
        }

        .toast-msg {
            flex: 1;
            color: #0f172a
        }

        /* ── Modal ── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, .5);
            backdrop-filter: blur(4px);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem
        }

        .modal-overlay.open {
            display: flex
        }

        .modal-card {
            background: #fff;
            border-radius: 1.25rem;
            padding: 2rem;
            max-width: 380px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(15, 23, 42, .2);
            animation: modalIn .25s cubic-bezier(.34, 1.56, .64, 1)
        }

        .modal-icon-wrap {
            width: 3.5rem;
            height: 3.5rem;
            background: #fef9c3;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem
        }

        /* ── Skeleton ── */
        .skeleton {
            background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: .5rem
        }

        /* ── Privacy card ── */
        .privacy-card {
            background: linear-gradient(135deg, #eff6ff, #f5f3ff);
            border: 1px solid rgba(99,102,241, .15);
            border-radius: 1.25rem;
            padding: 1.5rem;
            display: flex;
            align-items: flex-start;
            gap: 1rem
        }

        .privacy-icon {
            width: 2.75rem;
            height: 2.75rem;
            background: linear-gradient(135deg, #6366f1, #7c3aed);
            border-radius: .75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(99,102,241, .25)
        }

        /* ── How it works ── */
        .step-card {
            display: flex;
            gap: 1rem;
            align-items: flex-start
        }

        .step-number {
            width: 2.5rem;
            height: 2.5rem;
            background: linear-gradient(135deg, #6366f1, #7c3aed);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .9rem;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(99,102,241, .3)
        }

        /* ── Error state ── */
        .error-card {
            background: #fff;
            border: 1.5px solid #fca5a5;
            border-radius: 1.25rem;
            padding: 2rem;
            text-align: center;
            display: none
        }

        /* ── Action bar ── */
        .action-bar {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
            align-items: center;
            margin-top: 1.5rem
        }

        .action-bar-secondary {
            display: flex;
            flex-wrap: wrap;
            gap: .625rem;
            align-items: center;
            margin-top: .75rem
        }

        /* ── Grid helpers ── */
        .grid {
            display: grid;
            gap: 1rem
        }

        .g2 {
            grid-template-columns: repeat(2, 1fr)
        }

        .g3 {
            grid-template-columns: repeat(3, 1fr)
        }

        .g6 {
            grid-template-columns: repeat(6, 1fr)
        }

        @media(max-width:1024px) {
            .g3 {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:768px) {
            .g6 {
                grid-template-columns: repeat(3, 1fr)
            }

            .g2 {
                grid-template-columns: 1fr
            }

            .g3 {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:540px) {
            .g6 {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        /* ── Section spacing ── */
        .section {
            padding: 0 1.5rem 3.5rem
        }

        .section-sm {
            padding: 0 1.5rem 2rem
        }

        /* ── FAQ ── */
        .faq-item{background:#fff;border:1.5px solid #e8edf5;border-radius:1.125rem;margin-bottom:.75rem;overflow:hidden;transition:border-color .2s,box-shadow .2s}
        .faq-item:hover{border-color:#bfdbfe;box-shadow:0 4px 16px rgba(99,102,241,.08)}
        .faq-item.faq-open{border-color:#bfdbfe;box-shadow:0 2px 12px rgba(99,102,241,.1)}
        .faq-q{font-size:.9375rem;font-weight:700;color:#1e293b;cursor:pointer;display:flex;justify-content:space-between;align-items:start;gap:1rem;padding:1.25rem 1.5rem;width:100%;text-align:left;background:transparent;border:none;transition:background .15s}
        .faq-q:hover{background:#f8faff}
        .faq-a{font-size:.8875rem;color:#475569;line-height:1.78;display:none;padding:.125rem 1.5rem 1.25rem;border-top:1px solid #eff4ff;background:#f8faff}
        .faq-a.open{display:block}
        .faq-chevron{flex-shrink:0;transition:transform .25s;color:#94a3b8;margin-top:.1rem}
        .faq-chevron.open{transform:rotate(180deg);color:#3b82f6}

        /* ── Animations ── */
        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(24px)
            }

            to {
                opacity: 1;
                transform: translateX(0)
            }
        }

        @keyframes toastOut {
            to {
                opacity: 0;
                transform: translateX(24px)
            }
        }

        @keyframes modalIn {
            from {
                opacity: 0;
                transform: scale(.94)
            }

            to {
                opacity: 1;
                transform: scale(1)
            }
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0
            }

            100% {
                background-position: -200% 0
            }
        }

        @keyframes ping {

            75%,
            100% {
                transform: scale(2);
                opacity: 0
            }
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        @keyframes fadeSlideIn {
            from {
                opacity: 0;
                transform: translateY(12px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .fade-in {
            animation: fadeSlideIn .4s ease forwards
        }

        /* ── Scrollbar ── */
        ::-webkit-scrollbar {
            width: 6px
        }

        ::-webkit-scrollbar-track {
            background: #f8fafc
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px
        }

        /* ── Accessibility ── */
        :focus-visible {
            outline: 2px solid #3b82f6;
            outline-offset: 2px
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0
        }

        /* ── TL;DR ── */
        .tldr-box{background:#fafafe;border:1px solid #c7d2fe;border-radius:1.25rem;padding:1.5rem 1.75rem}
        .tldr-box li{margin-bottom:.5rem;font-size:.9rem;color:#334155;line-height:1.7}

        /* ── References ── */
        .ref-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}
        .ref-list li{background:#fff;border:1px solid #e8ecf0;border-radius:.875rem;padding:.875rem 1.125rem;font-size:.85rem;color:#475569;line-height:1.6}
        .ref-list a{color:#6366f1;font-weight:600;text-decoration:none}
        .ref-list a:hover{text-decoration:underline}