body, html {width:100vw;height:100vh;margin:0;padding:0;overflow:hidden;font-family:Segoe UI,sans-serif;background:#181a1f;color:#e0e0e0;}
.bg {position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 50% 0%,#2b2f3a 0%,#181a1f 80%);pointer-events:none;}
.container {position:relative;z-index:1;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px 0;box-sizing:border-box;}
.header {text-align:center;margin-bottom:12px;}
.logo-title {
    font-size:2em;
    margin:0;
    background:linear-gradient(90deg,#6e9cff,#a0e1ff);
    background-clip: text;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.slogan {margin:4px 0 0;color:#a0a8b0;}
.card {background:rgba(24,26,31,0.9);border-radius:12px;box-shadow:0 4px 16px #00000088;padding:20px;width:90vw;max-width:480px;display:flex;flex-direction:column;box-sizing:border-box;}
.main-textarea {width:100%;height:120px;background:#23252a;color:#e0e0e0;border:1px solid #3a3d45;border-radius:8px;padding:8px;resize:vertical;margin-bottom:12px;box-sizing:border-box;}
.controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}
.controls label,
.controls select,
.controls input,
.controls .slider-value {
    width: 100%;
    box-sizing: border-box;
    color: #a0a8b0;
    margin: 0;
    background: #23252a;
    color: #e0e0e0;
    border: 1px solid #3a3d45;
    border-radius: 6px;
    padding: 4px 8px;
}
.btn-row {display:flex;gap:12px;justify-content:center;}
.action-btn {flex:1;background:linear-gradient(90deg,#6e9cff 0%,#a0e1ff 100%);color:#181a1f;border:none;border-radius:6px;padding:10px;font-weight:bold;cursor:pointer;box-shadow:0 2px 8px #00000055;transition:background .2s;}
.action-btn:hover {background:linear-gradient(90deg,#a0e1ff 0%,#6e9cff 100%);}
footer {margin-top:auto;padding:12px 0;text-align:center;color:#60666e;font-size:.9em;}
@media(max-width:600px){.card{width:95vw;padding:16px}.main-textarea{height:100px}}
/* Global reset and body styling */
body,
html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    background: #181a1f;
    color: #e0e0e0;
    box-sizing: border-box;
}

/* Background gradient layer */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(
        circle at 50% 0%,
        #2b2f3a 0%,
        #181a1f 80%
    );
    pointer-events: none;
}

/* Main container */
.container {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    box-sizing: border-box;
}

/* Header styling */
.header {
    text-align: center;
    margin-bottom: 12px;
}

.logo-title {
    font-size: 2em;
    margin: 0;
    background: linear-gradient(90deg, #6e9cff, #a0e1ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.slogan {
    margin: 4px 0 0;
    color: #a0a8b0;
}

/* Card (main tool panel) */
.card {
    background: rgba(24, 26, 31, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 16px #00000088;
    padding: 20px;
    width: 90vw;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Text area */
.main-textarea {
    width: 100%;
    height: 220px;
    min-height: 220px;
    background: #23252a;
    color: #e0e0e0;
    border: 1px solid #3a3d45;
    border-radius: 8px;
    padding: 8px;
    resize: vertical;
    margin-bottom: 12px;
    box-sizing: border-box;
}

/* Control panel (inputs, sliders, selects) */
.controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}

.controls label,
.controls select,
.controls input,
.controls .slider-value {
    width: 100%;
    box-sizing: border-box;
    background: #23252a;
    color: #e0e0e0;
    border: 1px solid #3a3d45;
    border-radius: 6px;
    padding: 4px 8px;
    margin: 0;
    font-size: 1em;
}

/* Button row */
.btn-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

/* Action buttons */
.action-btn {
    flex: 1;
    background: linear-gradient(90deg, #6e9cff 0%, #a0e1ff 100%);
    color: #181a1f;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px #00000055;
    transition: background 0.2s;
    outline: none;
}

.action-btn:hover {
    background: linear-gradient(90deg, #a0e1ff 0%, #6e9cff 100%);
}

/* Footer */
footer {
    margin-top: auto;
    padding: 12px 0;
    text-align: center;
    color: #60666e;
    font-size: 0.9em;
}

/* Responsive mobile adjustments */
@media (max-width: 600px) {
    .card {
        width: 95vw;
        padding: 16px;
    }
    .main-textarea {
        height: 100px;
    }
    .btn-row {
        flex-direction: column;
        gap: 8px;
        justify-content: center;
    }
}