:root {
     --bg: #0b1320;
     --card: #121a2b;
     --muted: #9bb0d1;
     --text: #e6eefc;
     --accent: #6aa5ff;
 }

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     background: var(--bg);
     color: var(--text);
 }

 .container {
     max-width: 980px;
     margin: 24px auto;
     padding: 0 16px;
 }

 .card {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     padding: 18px;
     box-shadow: 0 12px 30px rgba(0, 14, 40, .25) inset, 0 4px 18px rgba(0, 0, 0, .25);
 }

 h1 {
     font-size: 1.4rem;
     margin: 0 0 8px;
     letter-spacing: .3px;
 }

 p.sub {
     color: var(--muted);
     margin-top: 4px;
     margin-bottom: 14px;
 }

 .uploader {
     border: 1.5px dashed rgba(255, 255, 255, 0.25);
     border-radius: 14px;
     padding: 16px;
     display: grid;
     gap: 12px;
     place-items: center;
     text-align: center;
     background: rgba(255, 255, 255, 0.02);
 }

 .uploader.drag {
     outline: 2px solid var(--accent);
     background: rgba(106, 165, 255, 0.06);
 }

 .btn {
     appearance: none;
     border: 1px solid rgba(255, 255, 255, 0.18);
     background: rgba(255, 255, 255, 0.06);
     color: var(--text);
     padding: 10px 14px;
     border-radius: 12px;
     cursor: pointer;
     font-weight: 600;
 }

 .btn:hover {
     border-color: var(--accent);
 }

 input[type=file] {
     display: none;
 }

 .grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
 }

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

 textarea {
     width: 100%;
     min-height: 280px;
     background: #0a0f1a;
     color: var(--text);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 12px;
     padding: 12px;
     resize: vertical;
 }

 .row {
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap;
 }

 .muted {
     color: var(--muted);
     font-size: .95rem;
 }

 .score {
     font-size: 2.2rem;
     font-weight: 800;
     color: #b5d3ff;
 }

 .tips {
     display: grid;
     gap: 8px;
     margin: 8px 0 0;
     padding: 0;
     list-style: none;
 }

 .tip {
     padding: 10px 12px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.04);
 }

 progress {
     width: 100%;
     height: 12px;
 }

 .hidden {
     display: none;
 }

 .error {
     background: #3a0b0b;
     border: 1px solid #e17777;
     color: #ffdada;
     padding: 10px 12px;
     border-radius: 10px;
 }

 .footer {
     color: var(--muted);
     font-size: .9rem;
     margin-top: 8px;
 }