:root {
    --primary: #11a683;
    --warn: #f39c12;
    --danger: #e74c3c;
    --light: #f8f9fa;
}

body { font-family: 'Segoe UI', sans-serif; background: #eef2f3; margin: 0; }
.navbar { background: white; padding: 1rem 5%; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.logo { font-size: 1.5rem; font-weight: 800; }
.logo span { color: var(--primary); }

.container { max-width: 1100px; margin: 30px auto; padding: 0 20px; }

.main-layout { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 25px; 
}

/* Mobile Responsive */
@media (max-width: 850px) {
    .main-layout { grid-template-columns: 1fr; }
}

.editor-container { background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow: hidden; }
textarea { 
    width: 100%; height: 350px; padding: 25px; border: none; outline: none; 
    font-size: 1.1rem; resize: none; box-sizing: border-box; line-height: 1.6;
}

.stats-bar { padding: 15px 25px; background: var(--light); display: flex; justify-content: space-between; align-items: center; }

button { 
    background: var(--primary); color: white; border: none; 
    padding: 12px 25px; border-radius: 6px; font-weight: bold; cursor: pointer; 
}

/* Result Panel */
.result-panel { background: white; border-radius: 12px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); height: fit-content; }
.header-status { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 15px; }
#statusDot { width: 12px; height: 12px; border-radius: 50%; }

.check-item { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #f9f9f9; }
.check-item i { font-size: 1.2rem; }
.text-success { color: var(--primary); }
.text-danger { color: var(--danger); }

.hidden { display: none; }