* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Inter', sans-serif;

    background: #050505;

    color: white;

    min-height: 100vh;

    overflow-x: hidden;

    position: relative;

}

body::before {

    content: '';

    position: fixed;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.015) 1px,
            transparent 1px
        );

    background-size: 40px 40px;

    z-index: -2;

    pointer-events: none;

}

.background {

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(124,58,237,.22),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(168,85,247,.18),
            transparent 30%
        ),
        radial-gradient(
            circle at center,
            rgba(91,33,182,.08),
            transparent 45%
        );

    z-index: -1;

    filter: blur(20px);

}

.wrapper {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 120px;

    padding: 60px;

}

.left {

    max-width: 600px;

}

.badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    border-radius: 999px;

    background: rgba(124,58,237,.12);

    border: 1px solid rgba(124,58,237,.35);

    color: #ddd6fe;

    margin-bottom: 35px;

    font-size: 14px;

    font-weight: 700;

    backdrop-filter: blur(16px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 30px rgba(124,58,237,.12);

}

.left h1 {

    font-size: 74px;

    line-height: .95;

    margin-bottom: 28px;

    font-weight: 900;

    letter-spacing: -3px;

    background: linear-gradient(
        180deg,
        #ffffff,
        #a1a1aa
    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.left p {

    font-size: 18px;

    color: #a1a1aa;

    line-height: 1.9;

    margin-bottom: 45px;

}

.features {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.feature {

    position: relative;

    padding: 22px 24px;

    border-radius: 22px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.06);

    color: #f4f4f5;

    font-weight: 600;

    backdrop-filter: blur(18px);

    overflow: hidden;

    transition: .3s;

}

.feature::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(124,58,237,.12),
        transparent
    );

    opacity: 0;

    transition: .3s;

}

.feature:hover {

    transform: translateY(-3px);

    border-color: rgba(124,58,237,.28);

}

.feature:hover::before {

    opacity: 1;

}

.right {

    width: 100%;

    max-width: 620px;

}

.card {

    position: relative;

    padding: 45px;

    border-radius: 36px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(24px);

    overflow: hidden;

    box-shadow:
        0 0 100px rgba(124,58,237,.15),
        inset 0 1px 0 rgba(255,255,255,.04);

}

.card::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(124,58,237,.08),
        transparent 35%
    );

    pointer-events: none;

}

form {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.mode-selector {

    display: flex;

    gap: 12px;

    margin-bottom: 10px;

}

.mode-button {

    flex: 1;

    height: 56px;

    border-radius: 18px;

    border: 1px solid rgba(255,255,255,.08);

    background: rgba(255,255,255,.03);

    color: #a1a1aa;

    font-weight: 700;

    font-size: 14px;

    cursor: pointer;

    transition: .3s;

}

.mode-button.active {

    background: linear-gradient(
        135deg,
        #7c3aed,
        #9333ea
    );

    color: white;

    border-color: transparent;

    box-shadow:
        0 15px 40px rgba(124,58,237,.35);

}

.upload-box {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 165px;

    border-radius: 28px;

    border: 2px dashed rgba(124,58,237,.35);

    background: rgba(124,58,237,.04);

    cursor: pointer;

    transition: .3s;

    overflow: hidden;

}

.upload-box::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(
        135deg,
        rgba(124,58,237,.10),
        transparent
    );

    opacity: 0;

    transition: .3s;

}

.upload-box:hover {

    border-color: #8b5cf6;

    transform: translateY(-3px);

    box-shadow:
        0 20px 50px rgba(124,58,237,.18);

}

.upload-box:hover::before {

    opacity: 1;

}

.upload-box input {

    position: absolute;

    inset: 0;

    opacity: 0;

    cursor: pointer;

}

.upload-content {

    text-align: center;

    padding: 30px;

    position: relative;

    z-index: 2;

}

.upload-title {

    font-size: 20px;

    font-weight: 800;

    color: white;

    margin-bottom: 12px;

}

.file-name {

    color: #a1a1aa;

    font-size: 14px;

    word-break: break-word;

    max-width: 260px;

    margin: 0 auto;

    line-height: 1.7;

}

.textbox-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 22px;

}

.textbox-grid textarea {

    width: 100%;

    height: 360px;

    resize: none;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 28px;

    background: rgba(255,255,255,.04);

    padding: 26px;

    color: white;

    font-size: 15px;

    line-height: 2;

    font-family: 'Inter', sans-serif;

    outline: none;

    transition: .3s;

    backdrop-filter: blur(18px);

}

.textbox-grid textarea:focus {

    border-color: rgba(124,58,237,.45);

    box-shadow:
        0 0 40px rgba(124,58,237,.18);

}

.textbox-grid textarea::placeholder {

    color: #71717a;

}

button {

    height: 64px;

    border: none;

    border-radius: 22px;

    background: linear-gradient(
        135deg,
        #7c3aed,
        #9333ea
    );

    color: white;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    transition: .3s;

    box-shadow:
        0 20px 45px rgba(124,58,237,.35);

}

button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 25px 60px rgba(124,58,237,.5);

}

.result-page {

    padding: 70px 35px;

}

.top-result {

    display: flex;

    justify-content: center;

    margin-bottom: 70px;

}

.result-card {

    width: 100%;

    max-width: 620px;

    padding: 60px;

    border-radius: 40px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(24px);

    text-align: center;

    box-shadow:
        0 0 120px rgba(124,58,237,.16);

}

.result-badge {

    display: inline-flex;

    padding: 12px 22px;

    border-radius: 999px;

    background: rgba(124,58,237,.12);

    border: 1px solid rgba(124,58,237,.35);

    color: #ddd6fe;

    margin-bottom: 40px;

    font-size: 14px;

    font-weight: 700;

}

.circle {

    width: 240px;

    height: 240px;

    margin: 0 auto 45px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 0 80px rgba(124,58,237,.45);

}

.circle-inner {

    width: 190px;

    height: 190px;

    border-radius: 50%;

    background: #09090b;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.06);

}

.circle-inner span {

    font-size: 58px;

    font-weight: 900;

}

.result-card h1 {

    font-size: 46px;

    margin-bottom: 22px;

    font-weight: 900;

}

.result-card p {

    color: #a1a1aa;

    line-height: 1.9;

    margin-bottom: 38px;

    font-size: 16px;

}

.result-card a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 60px;

    padding: 0 34px;

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        #7c3aed,
        #9333ea
    );

    color: white;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 20px 45px rgba(124,58,237,.35);

    transition: .3s;

}

.result-card a:hover {

    transform: translateY(-3px);

}

.documents-preview {

    max-width: 1700px;

    margin: 90px auto 0;

}

.documents-preview h2 {

    font-size: 42px;

    margin-bottom: 40px;

    font-weight: 900;

}

.documents-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 35px;

}

.document-viewer {

    border-radius: 34px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    overflow: hidden;

    backdrop-filter: blur(24px);

}

.viewer-header {

    padding: 24px 30px;

    border-bottom: 1px solid rgba(255,255,255,.06);

    font-size: 18px;

    font-weight: 800;

    color: #ddd6fe;

}

.viewer-content {

    height: 750px;

    overflow-y: auto;

    padding: 32px;

    line-height: 2;

    color: #d4d4d8;

    white-space: pre-wrap;

}

.viewer-content::-webkit-scrollbar {

    width: 10px;

}

.viewer-content::-webkit-scrollbar-thumb {

    background: rgba(124,58,237,.45);

    border-radius: 999px;

}

.score-human .circle {

    background: linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    box-shadow:
        0 0 80px rgba(34,197,94,.45);

}

.score-human .result-badge {

    background: rgba(34,197,94,.12);

    border: 1px solid rgba(34,197,94,.35);

    color: #86efac;

}

.score-mixed .circle {

    background: linear-gradient(
        135deg,
        #ca8a04,
        #eab308
    );

    box-shadow:
        0 0 80px rgba(234,179,8,.45);

}

.score-mixed .result-badge {

    background: rgba(234,179,8,.12);

    border: 1px solid rgba(234,179,8,.35);

    color: #fde047;

}

.score-ai .circle {

    background: linear-gradient(
        135deg,
        #7c3aed,
        #9333ea
    );

    box-shadow:
        0 0 80px rgba(124,58,237,.45);

}

.ai-analysis-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 35px;

    max-width: 1500px;

    margin: 70px auto 0;

}

.ai-panel {

    border-radius: 34px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.08);

    overflow: hidden;

    backdrop-filter: blur(24px);

}

.ai-panel-header {

    padding: 24px 30px;

    border-bottom: 1px solid rgba(255,255,255,.06);

    font-size: 18px;

    font-weight: 800;

    color: #ddd6fe;

}

.ai-panel-content {

    padding: 32px;

}

.ai-indicators {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}

.ai-indicator {

    padding: 14px 18px;

    border-radius: 16px;

    background: rgba(124,58,237,.12);

    border: 1px solid rgba(124,58,237,.35);

    color: #ddd6fe;

    font-size: 14px;

    font-weight: 700;

}

.confidence-box {

    margin-top: 28px;

    padding: 24px;

    border-radius: 22px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.06);

}

.confidence-title {

    font-size: 14px;

    color: #a1a1aa;

    margin-bottom: 10px;

}

.confidence-value {

    font-size: 28px;

    font-weight: 900;

}

.ai-preview {

    height: 700px;

    overflow-y: auto;

    line-height: 2.1;

    color: #d4d4d8;

    white-space: pre-wrap;

}

.ai-preview::-webkit-scrollbar {

    width: 10px;

}

.ai-preview::-webkit-scrollbar-thumb {

    background: rgba(124,58,237,.45);

    border-radius: 999px;

}

.highlight-ai {

    background: rgba(239,68,68,.18);

    color: #fca5a5;

    padding: 3px 7px;

    border-radius: 8px;

}

.highlight-human {

    background: rgba(34,197,94,.18);

    color: #86efac;

    padding: 3px 7px;

    border-radius: 8px;

}

.highlight-ai {

    background: rgba(239,68,68,.22);

    color: #fca5a5;

    padding: 3px 8px;

    border-radius: 8px;

    border: 1px solid rgba(239,68,68,.25);

    box-shadow:
        0 0 12px rgba(239,68,68,.18);

    font-weight: 600;

}

.highlight-human {

    background: rgba(34,197,94,.18);

    color: #86efac;

    padding: 3px 8px;

    border-radius: 8px;

    border: 1px solid rgba(34,197,94,.22);

    box-shadow:
        0 0 12px rgba(34,197,94,.12);

    font-weight: 600;

}

.results-dual-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:32px;

    margin-bottom:50px;

}

.score-spelling .circle{

    background:linear-gradient(
        135deg,
        #f59e0b,
        #f97316
    );

    box-shadow:
        0 0 80px rgba(249,115,22,.35);

}

.score-spelling .result-badge{

    background:rgba(249,115,22,.12);

    border:1px solid rgba(249,115,22,.35);

    color:#fdba74;

}

.highlight-spelling{

    background:rgba(249,115,22,.18);

    color:#fdba74;

    padding:3px 8px;

    border-radius:8px;

    border:1px solid rgba(249,115,22,.22);

    box-shadow:
        0 0 12px rgba(249,115,22,.12);

    font-weight:600;

}

.wrong-words-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

    margin-top:30px;

}

.wrong-word-card{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:24px;

    backdrop-filter:blur(18px);

    transition:.3s;

    overflow:hidden;

    position:relative;

}

.wrong-word-card::before{

    content:'';

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(249,115,22,.08),
        transparent
    );

    opacity:0;

    transition:.3s;

}

.wrong-word-card:hover{

    transform:translateY(-4px);

    border-color:rgba(249,115,22,.28);

}

.wrong-word-card:hover::before{

    opacity:1;

}

.wrong-word{

    font-size:18px;

    font-weight:800;

    color:#fb7185;

    margin-bottom:18px;

    line-height:1.6;

    position:relative;

    z-index:2;

}

.wrong-word-suggestions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    position:relative;

    z-index:2;

}

.wrong-word-suggestions span{

    padding:10px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:#e4e4e7;

    font-size:13px;

    font-weight:700;

}

.issues-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:24px;

    margin-top:30px;

}

.issue-card{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:26px;

    padding:26px;

    backdrop-filter:blur(18px);

}

.issue-message{

    font-size:17px;

    font-weight:800;

    color:#fff;

    margin-bottom:16px;

    line-height:1.6;

}

.issue-context{

    color:#a1a1aa;

    line-height:1.9;

    margin-bottom:18px;

}

.issue-fixes{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.issue-fixes span{

    padding:10px 14px;

    border-radius:999px;

    background:rgba(124,58,237,.12);

    border:1px solid rgba(124,58,237,.22);

    color:#ddd6fe;

    font-size:13px;

    font-weight:700;

}

@media (max-width:900px){

    .results-dual-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width: 1200px) {

    .wrapper {

        flex-direction: column;

        gap: 70px;

    }

    .left h1 {

        font-size: 58px;

    }

}

@media (max-width: 1000px) {

    .documents-grid,
    .ai-analysis-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 700px) {

    .wrapper {

        padding: 30px;

    }

    .card,
    .result-card {

        padding: 34px;

    }

    .left h1 {

        font-size: 46px;

        letter-spacing: -2px;

    }

    .circle {

        width: 190px;

        height: 190px;

    }

    .circle-inner {

        width: 150px;

        height: 150px;

    }

    .circle-inner span {

        font-size: 42px;

    }

}