:root {
     --bg: #1e40af;
     --surface: #ffffff;
     --primary: #3b82f6;
     --primary-hover: #2563eb;
     --border: #cbd5e1;
     --text: #0f172a;
     --muted: #64748b;
     --radius-lg: 18px;
     --radius-md: 14px;
     --radius-sm: 10px;
     --shadow: 0 25px 60px rgba(0, 0, 0, .18);
     --transition: .25s ease;
 }
 /* RESET */
 
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 30px;
     font-family: system-ui, Segoe UI, sans-serif;
     color: var(--text);
     background: var(--bg);
 }
 /* APP LAYOUT */
 
 .app {
     width: 100%;
     max-width: 520px;
 }
 /*   MAIN TOOL CARD */
 
 .tool {
     background: var(--surface);
     padding: 40px;
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
     gap: 22px;
     animation: fadeIn .4s ease;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(15px)
     }
     to {
         opacity: 1;
         transform: translateY(0)
     }
 }
 /* HEADER */
 
 .tool__title {
     font-size: 26px;
     font-weight: 700;
 }
 
 .tool__subtitle {
     font-size: 14px;
     margin-top: 6px;
     color: var(--muted);
 }
 /* UPLOAD BOX */
 
 .upload {
     border: 2px dashed var(--border);
     border-radius: var(--radius-md);
     padding: 45px 20px;
     text-align: center;
     cursor: pointer;
     background: #f8fafc;
     transition: var(--transition);
 }
 
 .upload:hover {
     border-color: var(--primary);
     background: #eff6ff;
 }
 
 .upload input {
     display: none;
 }
 
 .upload__title {
     font-size: 18px;
     font-weight: 600;
 }
 
 .upload__note {
     font-size: 13px;
     color: var(--muted);
 }
 /* SETTINGS PANEL */
 
 .settings {
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: 14px 18px;
     background: #f9fafb;
 }
 
 .settings__toggle {
     cursor: pointer;
     font-weight: 600;
     font-size: 14px;
 }
 
 .settings__grid {
     margin-top: 18px;
     display: grid;
     gap: 16px;
 }
 /* FORM FIELDS */
 
 .field label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 6px;
 }
 
 select {
     width: 100%;
     padding: 12px;
     border-radius: var(--radius-sm);
     border: 1px solid var(--border);
     font-size: 14px;
     outline: none;
     background: white;
     transition: var(--transition);
 }
 
 select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
 }
 /* ======================================================
   BUTTON
====================================================== */
 
 .btn {
     padding: 16px;
     border: none;
     border-radius: var(--radius-md);
     font-size: 16px;
     font-weight: 600;
     color: white;
     background: var(--primary);
     cursor: pointer;
     transition: var(--transition);
 }
 
 .btn:hover {
     background: var(--primary-hover);
     transform: translateY(-1px);
 }
 
 .btn:active {
     transform: scale(.98);
 }
 /* ======================================================
   PREVIEW + RESULT BOXES
====================================================== */
 
 .preview,
 .result {
     border: 1px dashed var(--border);
     border-radius: var(--radius-sm);
     padding: 18px;
     background: #f8fafc;
     text-align: center;
 }
 
 .preview__text,
 .result__text {
     font-size: 14px;
     color: var(--muted);
 }
 /* RESPONSIVE */
 
 @media(max-width:480px) {
     .tool {
         padding: 26px;
     }
     .tool__title {
         font-size: 22px;
     }
     .upload {
         padding: 35px 15px;
     }
 }