:root {
   --bg: #0d0f12;
   --surface: #161a1f;
   --border: #2a3038;
   --muted: #868fa0;
   --text: #e5e7eb;
   --accent: #f1ac18;
   --accent-hover: #ac832a;
   --error: #ef4444;
   --radius: 10px;
}

* {
   box-sizing: border-box;
}
body {
   margin: 0;
   min-height: 100vh;
   background: var(--bg);
   color: var(--text);
   font-family: "Outfit", system-ui, sans-serif;
   font-size: 15px;
   line-height: 1.5;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 1.5rem;
}

main {
   width: 100%;
   max-width: 800px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1.75rem;
}

.page-header {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
}
.page-header .logo {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   object-fit: contain;
}
h1 {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
}

.zone {
   border: 2px dashed var(--border);
   border-radius: var(--radius);
   padding: 1.5rem;
   text-align: center;
   margin-bottom: 1.5rem;
   transition: border-color 0.2s, background 0.2s;
   cursor: pointer;
}
.zone:hover,
.zone.dragover {
   border-color: var(--accent);
   background: rgba(34, 121, 197, 0.08);
}
.zone.has-file {
   border-style: solid;
}
.zone input {
   display: none;
}
.zone p {
   margin: 0;
   color: var(--muted);
}
.zone .filename {
   color: var(--accent);
   font-size: 0.9em;
}

.meta-block {
   width: 100%;
   margin-bottom: 1.5rem;
   padding: 0.85rem 1rem;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   font-size: 0.9em;
}
.meta-block.has-converted {
   background: rgba(34, 121, 197, 0.08);
}
.meta-converted {
   color: var(--accent);
}
.meta-title {
   color: var(--muted);
   font-size: 0.8em;
   margin-bottom: 0.6rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}
.meta-result-actions {
   margin-bottom: 0.75rem;
}
.meta-result-actions .btn {
   width: auto;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
}
.meta-result-actions .btn .btn-icon {
   width: 1.1em;
   height: 1.1em;
   flex-shrink: 0;
   vertical-align: middle;
}
.meta-result-actions .btn .btn-icon path {
   fill: currentColor;
}
.meta-table {
   width: 100%;
   border-collapse: collapse;
}
.meta-table th,
.meta-table td {
   padding: 0.5rem 0.75rem;
   text-align: left;
   border-bottom: 1px solid var(--border);
}
.meta-table th {
   color: var(--muted);
   font-weight: 400;
}
.meta-table tbody tr:last-child td {
   border-bottom: none;
}
.meta-format-cell {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.meta-format-text {
   flex: 1;
   min-width: 0;
}
.meta-download {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.35rem;
   margin: 0;
   border: 1px solid var(--border);
   border-radius: 6px;
   background: var(--surface);
   color: var(--accent);
   cursor: pointer;
   flex-shrink: 0;
}
.meta-download:hover {
   background: rgba(34, 121, 197, 0.15);
   border-color: var(--accent);
}
.meta-download .meta-download-icon {
   width: 1.5em;
   aspect-ratio: 1;
   flex-shrink: 0;
}
.meta-download .meta-download-icon path {
   fill: currentColor;
}
.btn-secondary {
   background: transparent;
   color: var(--accent);
   border: 1px solid var(--accent);
}
.btn-secondary:hover {
   background: rgba(34, 121, 197, 0.15);
}
.btn-secondary:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.drop-overlay {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: rgba(13, 15, 18, 0.92);
   border: 3px dashed var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s, visibility 0.15s;
   pointer-events: none;
}
.drop-overlay.active {
   opacity: 1;
   visibility: visible;
   pointer-events: all;
}
.drop-overlay span {
   font-size: 1.1rem;
   color: var(--accent);
}

.row {
   margin-bottom: 1rem;
}
.row:last-of-type {
   margin-bottom: 1.5rem;
}
label {
   display: block;
   margin-bottom: 0.35rem;
   font-size: 0.85em;
   color: var(--muted);
}
select,
input[type="number"],
input[type="range"] {
   width: 100%;
   padding: 1rem 0.75rem;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   color: var(--text);
   font-size: 0.95em;
}
select {
   appearance: none;
   background-color: var(--bg);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 0.75rem;
}
input[type="range"] {
   padding: 0;
   height: 6px;
   accent-color: var(--accent);
}
.range-val {
   font-size: 0.9em;
   color: var(--muted);
}

.btn {
   width: 100%;
   padding: 0.75rem 1rem;
   background: var(--accent);
   color: var(--bg);
   border: none;
   border-radius: 6px;
   font-weight: 600;
   font-size: 1em;
   cursor: pointer;
   transition: background 0.2s;
}
.btn:hover {
   background: var(--accent-hover);
}
.btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

.msg {
   margin-top: 1rem;
   padding: 0.6rem;
   border-radius: 6px;
   font-size: 0.9em;
   display: none;
}
.msg.error {
   background: rgba(239, 68, 68, 0.15);
   color: var(--error);
   display: block;
}
.msg.success {
   background: rgba(34, 121, 197, 0.15);
   color: var(--accent);
   display: block;
}

.hint {
   font-size: 0.8em;
   color: var(--muted);
   margin-top: 0.25rem;
}