:root {--primary: #3b82f6;--secondary: #64748b;--success: #22c55e;--danger: #ef4444;--bg: #f9fafb;--card-bg: #fff;--border: #e5e7eb;--text: #222;--radius: 1.25rem;--shadow: 0 4px 24px rgba(0, 0, 0, 0.07);--mono: "Fira Mono", "Menlo", "Consolas", monospace} body, .css2logical-wrapper {background: var(--bg);font-family: 'Inter', 'Segoe UI', Arial, sans-serif;color: var(--text)} .css2logical-card {max-inline-size: 70vw;margin-block-start: 2.2rem;margin-inline-end: auto;margin-block-end: 2rem;margin-inline-start: auto;background: var(--card-bg);border-radius: var(--radius);box-shadow: var(--shadow);padding-block-start: 2.2rem;padding-inline-end: 2rem;padding-block-end: 2.2rem;padding-inline-start: 2rem;border: 1px solid var(--border)} .css2logical-title {text-align: center;margin-block-end: 0.5rem;font-weight: 600;font-size: 1.45rem;color: var(--primary);letter-spacing: .01em} .css2logical-wrapper h2 {text-align: center;font-size: 1.2rem} .css2logical-file-upload {border: 2px dashed var(--border);border-radius: var(--radius);padding-block-start: 1.1rem;padding-inline-end: 1.2rem;padding-block-end: 1.1rem;padding-inline-start: 1.2rem;margin-block-end: 1.2rem;background: #f5f8fd;text-align: center;cursor: pointer;transition: border-color .2s, background .2s;position: relative;overflow: hidden;display: flex;align-items: center;gap: 12px;justify-content: center} .css2logical-file-upload:hover, .css2logical-file-upload.dragover {border-color: var(--primary);background: #e8f0fe} .css2logical-file-input {position: absolute;inline-size: 100%;block-size: 100%;opacity: 0;inset-inline-start: 0;inset-block-start: 0;cursor: pointer} .css2logical-file-label {font-size: 1.04rem;color: var(--secondary)} .css2logical-file-link {color: var(--primary);text-decoration: underline dotted;cursor: pointer;transition: color .18s} .css2logical-file-link:hover {color: var(--danger)} .css2logical-file-upload .icon {font-size: 1.7rem;margin-inline-end: 8px;color: var(--primary)} .css2logical-label {display: block;font-size: 1rem;margin-block-end: .45rem;font-weight: 500} .css2logical-textarea {min-block-size: 100%;max-block-size: 100%;border-radius: .9rem;border: 1.5px solid var(--border);padding: 1.1rem;font-size: 1.05rem;resize: vertical;font-family: var(--mono);background: #f3f6fa;color: var(--text);outline: none;margin-block-end: 1.1rem;transition: border-color .18s;inline-size: -webkit-fill-available;inline-size: -moz-available} .css2logical-textarea:focus {border-color: var(--primary)} .css2logical-options {display: flex;gap: 1.3rem;margin-block-end: 1.3rem;align-items: center;justify-content: flex-start} .css2logical-switch {display: flex;align-items: center;gap: .55rem;cursor: pointer;font-size: .98rem;user-select: none;margin-block-end: 0} .css2logical-switch input {display: none} .css2logical-slider {inline-size: 38px;block-size: 22px;background: #dbeafe;border-radius: 999px;position: relative;transition: background .15s} .css2logical-slider::after {content: "";position: absolute;inset-inline-start: 3px;inset-block-start: 3px;inline-size: 16px;block-size: 16px;background: #fff;border-radius: 50%;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);transition: left .18s} .css2logical-switch input:checked+.css2logical-slider {background: var(--primary)} .css2logical-switch input:checked+.css2logical-slider::after {inset-inline-start: 19px} .css2logical-switch-label {margin-inline-start: 8px} .css2logical-actions {display: flex;gap: 0.85rem;margin-block-end: 1.25rem;align-items: center;flex-wrap: wrap} .css2logical-btn {border: none;background: var(--secondary);color: #fff;border-radius: 999px;padding-block-start: .52rem;padding-inline-end: 1.5rem;padding-block-end: .52rem;padding-inline-start: 1.5rem;font-size: 1.05rem;font-weight: 500;cursor: pointer;transition: background .16s, transform .13s;box-shadow: 0 1px 3px rgba(0, 0, 0, .03);outline: none;margin-block-end: 2px;position: relative} .css2logical-btn:hover {background: var(--primary);transform: translateY(-1.5px) scale(1.04)} .css2logical-btn.primary {background: var(--primary)} .css2logical-btn.primary:hover {background: var(--success)} .css2logical-output {inline-size: -webkit-fill-available;min-block-size: 100px;max-block-size: 320px;background: #161d2b;color: #fff;border-radius: .9rem;padding: 1.1rem;font-size: 1.03rem;font-family: var(--mono);border: 1px solid var(--border);overflow-inline: auto;margin-block-start: .5rem;margin-block-end: .8rem;letter-spacing: .01em} .hide {display: none} @media (max-width:468px) {.css2logical-card {max-inline-size: 100vw;margin: 0;border-radius: 0;padding: 1rem}} .main-bottom h3 {font-size: 1rem;text-align: center} .main-bottom table {border-collapse: collapse;min-inline-size: 340px;box-shadow: 0 4px 24px 0 #2222;border-radius: 12px;overflow: hidden;background: #fff;font-family: "Vazirmatn", "Segoe UI", Arial, sans-serif;margin-block-start: 0;margin-inline-end: auto;margin-block-end: 0;margin-inline-start: auto;text-align: center} .main-bottom th, .main-bottom td {padding-block-start: 0.8rem;padding-inline-end: 1.5rem;padding-block-end: 0.8rem;padding-inline-start: 1.5rem;border-block-end: 1px solid #eee;font-size: 1rem} .main-bottom th {background: #fafbff;color: #2d405f;font-weight: bold} .main-bottom tr:last-child td {border-block-end: none} .main-bottom tr:hover {background: #f5f6fc;transition: background 0.2s} @media (max-width: 600px) {.main-bottom table {min-inline-size: 220px;font-size: 0.93rem} .main-bottom th, .main-bottom td {padding: 0.6rem}} footer {text-align: center;margin-block-end: 2rem} .css2logical-loading {text-align: center;margin-block-start: 18px;color: #666;font-size: 1.12rem;letter-spacing: 0.02em} .css2logical-spinner {display: inline-block;inline-size: 1.2em;block-size: 1.2em;margin-inline-end: 0.4em;border: 3px solid #eee;border-block-start: 3px solid #2d81ff;border-radius: 50%;animation: spin 0.7s linear infinite;vertical-align: middle} @keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}