.schmm-container {
max-width: 1400px;
margin: 2rem auto;
padding: 3rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #67499e 0%, #55328f 100%);
border-radius: 25px;
box-shadow: 
0 25px 50px rgba(87, 50, 143, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.schmm-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b9d, #ffd93d, #6bcf7f);
z-index: 1;
}
.schmm-header {
text-align: center;
margin-bottom: 3rem;
color: white;
position: relative;
z-index: 2;
}
.schmm-heading {
font-size: 3.5rem;
font-weight: 800;
margin: 0 0 1rem 0;
background: linear-gradient(45deg, #fff, #f0f4ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 8px rgba(0,0,0,0.2);
letter-spacing: -0.5px;
}
.schmm-subtitle {
font-size: 1.3rem;
opacity: 0.95;
margin: 0;
font-weight: 300;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 1rem 2rem;
border-radius: 50px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.schmm-controls {
background: rgba(255, 255, 255, 0.95);
padding: 2.5rem;
border-radius: 20px;
margin-bottom: 2rem;
box-shadow: 
0 15px 35px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
}
.schmm-controls::after {
content: '';
position: absolute;
bottom: -10px;
left: 5%;
right: 5%;
height: 10px;
background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
border-radius: 0 0 20px 20px;
}
.schmm-control-group {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.schmm-label {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: #55328f;
margin-bottom: 1.5rem;
text-align: center;
background: linear-gradient(45deg, #55328f, #67499e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.schmm-dropdown {
width: 100%;
padding: 18px 25px;
font-size: 1.2rem;
border: 2px solid #e2e8f0;
border-radius: 15px;
background: white;
color: #55328f;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2367499e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 24px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(87, 50, 143, 0.1);
}
.schmm-dropdown:hover {
border-color: #67499e;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(87, 50, 143, 0.15);
}
.schmm-dropdown:focus {
outline: none;
border-color: #55328f;
box-shadow: 
0 0 0 4px rgba(85, 50, 143, 0.1),
0 10px 30px rgba(87, 50, 143, 0.2);
transform: translateY(-3px);
}
.schmm-layout {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 2.5rem;
margin-bottom: 2rem;
}
.schmm-fields-column,
.schmm-preview-column {
display: flex;
flex-direction: column;
}
.schmm-fields-card {
background: linear-gradient(145deg, #ffffff, #f8f9ff);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 
0 20px 40px rgba(87, 50, 143, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.8);
position: relative;
overflow: hidden;
}
.schmm-fields-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #67499e, #55328f);
}
.schmm-preview-card {
background: linear-gradient(145deg, #ffffff, #ffffff);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 
0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.schmm-card-title {
font-size: 1.6rem;
font-weight: 700;
color: #55328f;
margin: 0 0 2rem 0;
padding-bottom: 1.5rem;
border-bottom: 3px solid;
border-image: linear-gradient(90deg, #67499e, #55328f) 1;
background: linear-gradient(45deg, #55328f, #67499e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.schmm-preview-card .schmm-card-title {
color: #fff;
border-image: linear-gradient(90deg, #ff6b9d, #ffd93d) 1;
background: linear-gradient(45deg, #000000, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.schmm-fields {
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.schmm-field-group {
animation: schmmSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: rgba(255, 255, 255, 0.7);
padding: 1.5rem;
border-radius: 15px;
border: 2px solid transparent;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.schmm-field-group:focus-within {
border-color: #67499e;
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(87, 50, 143, 0.1);
}
@keyframes schmmSlideIn {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.schmm-field-label {
display: block;
font-weight: 700;
color: #55328f;
margin-bottom: 0.8rem;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.schmm-field-label::before {
content: '▸';
color: #67499e;
font-size: 1.2rem;
}
.schmm-required {
color: #ff6b6b;
font-weight: 800;
}
.schmm-input {
width: 100%;
padding: 15px 20px;
border: 2px solid #e8ecf1;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: rgba(255, 255, 255, 0.9);
color: #55328f;
font-weight: 500;
}
.schmm-input::placeholder {
color: #a0a7b4;
font-weight: 400;
}
.schmm-input:hover {
border-color: #c0c7ff;
transform: translateY(-1px);
}
.schmm-input:focus {
outline: none;
border-color: #67499e;
box-shadow: 
0 0 0 4px rgba(103, 73, 158, 0.1),
0 8px 25px rgba(87, 50, 143, 0.15);
transform: translateY(-2px);
background: white;
}
.schmm-textarea {
min-height: 120px;
resize: vertical;
font-family: inherit;
line-height: 1.6;
}
.schmm-select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2367499e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: right 15px center;
background-repeat: no-repeat;
background-size: 18px;
}
.schmm-field-hint {
font-size: 0.85rem;
color: #718096;
margin-top: 0.8rem;
font-style: italic;
padding-left: 1.5rem;
position: relative;
}
.schmm-field-hint::before {
content: '💡';
position: absolute;
left: 0;
}
.schmm-preview {
flex: 1;
background: #1a1b26;
border-radius: 15px;
overflow: hidden;
border: 2px solid #2a2b3a;
position: relative;
}
.schmm-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(180deg, rgba(42, 43, 58, 0.8) 0%, transparent 100%);
z-index: 1;
}
.schmm-schema-output {
margin: 0;
padding: 2rem;
height: 100%;
overflow: auto;
font-size: 0.95rem;
line-height: 1.6;
position: relative;
z-index: 2;
}
.schmm-schema-output code {
background: none !important;
padding: 0 !important;
}
.schmm-actions {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
margin-top: 2.5rem;
}
.schmm-btn {
padding: 16px 20px;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
position: relative;
overflow: hidden;
}
.schmm-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.schmm-btn:hover::before {
left: 100%;
}
.schmm-btn-icon {
font-size: 1.3rem;
transition: transform 0.3s ease;
}
.schmm-btn:hover .schmm-btn-icon {
transform: scale(1.2);
}
.schmm-copy-btn {
background: linear-gradient(145deg, #67499e, #55328f);
color: white;
box-shadow: 0 5px 15px rgba(87, 50, 143, 0.3);
}
.schmm-copy-btn:hover {
background: linear-gradient(145deg, #55328f, #67499e);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(87, 50, 143, 0.4);
}
.schmm-insert-btn {
background: linear-gradient(145deg, #6bcf7f, #4caF50);
color: white;
box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}
.schmm-insert-btn:hover {
background: linear-gradient(145deg, #4caF50, #6bcf7f);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(76, 175, 80, 0.4);
}
.schmm-reset-btn {
background: linear-gradient(145deg, #55328f, #67499e);
color: white;
box-shadow: 0 5px 15px rgba(143, 34, 226, 0.3);
}
.schmm-reset-btn:hover {
background: linear-gradient(145deg, #b662df, #54076c);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(95, 21, 115, 0.4);
}
.schmm-footer {
text-align: center;
color: white;
opacity: 0.9;
font-size: 0.95rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.schmm-footer-text {
margin: 0;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 1rem 2rem;
border-radius: 50px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0.2);
} @media (max-width: 1200px) {
.schmm-layout {
grid-template-columns: 1fr;
gap: 1rem;
}
.schmm-container {
padding: 1rem;
margin: 1rem;
}
}
@media (max-width: 768px) {
.schmm-container {
padding: 1.5rem;
border-radius: 20px;
margin: 0.5rem;
}
.schmm-heading {
font-size: 2.5rem;
}
.schmm-controls,
.schmm-fields-card,
.schmm-preview-card {
padding: 0.9rem;
}
.schmm-actions {
grid-template-columns: 1fr;
gap: 1rem;
}
.schmm-btn {
width: 100%;
}
.schmm-dropdown {
padding: 15px 20px;
font-size: 1.1rem;
}
} .schmm-input:focus,
.schmm-select:focus,
.schmm-textarea:focus {
outline: none;
} .schmm-schema-output::-webkit-scrollbar {
width: 8px;
}
.schmm-schema-output::-webkit-scrollbar-track {
background: #1a1b26;
}
.schmm-schema-output::-webkit-scrollbar-thumb {
background: #67499e;
border-radius: 4px;
}
.schmm-schema-output::-webkit-scrollbar-thumb:hover {
background: #55328f;
} .schmm-loading {
position: relative;
}
.schmm-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 25px;
height: 25px;
border: 3px solid rgba(103, 73, 158, 0.3);
border-radius: 50%;
border-top-color: #67499e;
animation: schmmSpin 1s linear infinite;
transform: translate(-50%, -50%);
}
@keyframes schmmSpin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
} @keyframes schmmFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.schmm-fields-card:hover,
.schmm-preview-card:hover {
animation: schmmFloat 3s ease-in-out infinite;
}