:root {
--primary: #8cd1b6;
--primary-dark: #7abea3;
--white: #ffffff;
--light-gray: #f5f5f5;
--dark-gray: #333333;
--border-radius: 12px;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}

body {
background-color: var(--light-gray);
color: var(--dark-gray);
min-height: 100vh;
display: flex;
flex-direction: column;
}

.container {
display: flex;
flex: 1;
padding: 2rem;
gap: 2rem;
max-width: 1600px;
margin: 0 auto;
width: 100%;
}

@media (max-width: 1024px) {
.container {
    flex-direction: column;
}
}

.input-panel, .output-panel {
flex: 1;
background-color: var(--white);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.panel-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}

.panel-icon {
width: 40px;
height: 40px;
background-color: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.panel-icon svg {
width: 24px;
height: 24px;
fill: var(--white);
}

h1 {
font-size: 1.8rem;
font-weight: 600;
color: var(--dark-gray);
}

h2 {
font-size: 1.4rem;
font-weight: 600;
color: var(--dark-gray);
}

.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

label {
font-size: 0.9rem;
font-weight: 500;
color: var(--dark-gray);
}

input[type="text"], 
select, 
textarea {
padding: 0.8rem 1rem;
border: 1px solid #e0e0e0;
border-radius: var(--border-radius);
font-size: 1rem;
transition: border-color 0.3s;
background-color: var(--white);
}

input[type="text"]:focus, 
select:focus, 
textarea:focus {
outline: none;
border-color: var(--primary);
}

textarea {
resize: vertical;
min-height: 150px;
}

.slider-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.slider-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.slider-value {
font-size: 0.9rem;
font-weight: 600;
color: var(--primary);
background-color: rgba(140, 209, 182, 0.1);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}

input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: #e0e0e0;
border-radius: 3px;
outline: none;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: var(--primary);
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
}

input[type="range"]::-webkit-slider-thumb:hover {
background: var(--primary-dark);
}

button {
background-color: var(--primary);
color: var(--white);
border: none;
border-radius: var(--border-radius);
padding: 1rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: var(--primary-dark);
}

.response-container {
flex: 1;
overflow-y: auto;
background-color: rgba(140, 209, 182, 0.05);
border-radius: var(--border-radius);
padding: 1.5rem;
white-space: pre-wrap;
line-height: 1.6;
}

.loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

.dot-typing {
position: relative;
left: -9999px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: var(--primary);
color: var(--primary);
box-shadow: 9984px 0 0 0 var(--primary), 9999px 0 0 0 var(--primary), 10014px 0 0 0 var(--primary);
animation: dot-typing 1.5s infinite linear;
}

@keyframes dot-typing {
0% {
    box-shadow: 9984px 0 0 0 var(--primary), 9999px 0 0 0 var(--primary), 10014px 0 0 0 var(--primary);
}
16.667% {
    box-shadow: 9984px -10px 0 0 var(--primary), 9999px 0 0 0 var(--primary), 10014px 0 0 0 var(--primary);
}
33.333% {
    box-shadow: 9984px 0 0 0 var(--primary), 9999px 0 0 0 var(--primary), 10014px 0 0 0 var(--primary);
}
50% {
    box-shadow: 9984px 0 0 0 var(--primary), 9999px -10px 0 0 var(--primary), 10014px 0 0 0 var(--primary);
}
66.667% {
    box-shadow: 9984px 0 0 0 var(--primary), 9999px 0 0 0 var(--primary), 10014px 0 0 0 var(--primary);
}
83.333% {
    box-shadow: 9984px 0 0 0 var(--primary), 9999px 0 0 0 var(--primary), 10014px -10px 0 0 var(--primary);
}
100% {
    box-shadow: 9984px 0 0 0 var(--primary), 9999px 0 0 0 var(--primary), 10014px 0 0 0 var(--primary);
}
}

.file-upload-container {
position: relative;
margin-bottom: 0.5rem;
}

.file-upload-label {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
border: 2px dashed #e0e0e0;
border-radius: var(--border-radius);
cursor: pointer;
transition: all 0.3s ease;
background-color: rgba(140, 209, 182, 0.05);
}

.file-upload-label:hover {
border-color: var(--primary);
background-color: rgba(140, 209, 182, 0.1);
}

.file-upload-label svg {
color: var(--primary);
}

.hidden-file-input {
position: absolute;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
z-index: -1;
}

.file-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}

.file-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background-color: rgba(140, 209, 182, 0.1);
border-radius: var(--border-radius);
font-size: 0.85rem;
}

.file-item svg {
color: var(--primary);
cursor: pointer;
transition: color 0.3s ease;
}

.file-item svg:hover {
color: var(--primary-dark);
}

.file-name {
flex-grow: 1;
max-width: calc(100% - 24px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.drag-over {
border-color: var(--primary);
background-color: rgba(140, 209, 182, 0.2);
}

.file-upload-disabled {
pointer-events: none;
opacity: 0.6;
}