* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

}



.container {

    display: flex;

    flex-direction: column;

    height: 100vh;

}



header {

    background-color: #333;

    color: #fff;

    padding: 1rem;

    text-align: center;

}



main {

    display: flex;

    flex: 1;

    overflow: hidden;

}



.input-section {

    flex: 2;

    padding: 1rem;

    display: flex;

    flex-direction: column;

}



.input-section textarea {

    flex: 1;

    padding: 0.5rem;

    font-size: 1rem;

    resize: none;

}



.char-counter {

    text-align: right;

    margin-top: 0.5rem;

    font-size: 0.9rem;

    color: #555;

}



.sidebar {

    flex: 1;

    background-color: #fff;

    padding: 1rem;

    border-left: 1px solid #ccc;

    overflow-y: auto;

}



.sidebar-section {

    margin-bottom: 1.5rem;

}



.sidebar-section label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: bold;

}



.sidebar-section input[type="text"],

.sidebar-section input[type="number"],

.sidebar-section select {

    width: 100%;

    padding: 0.5rem;

    font-size: 1rem;

}



.sidebar-section input[type="checkbox"] {

    transform: scale(1.5);

}



.sidebar-section button {

    padding: 0.5rem 1rem;

    font-size: 1rem;

    margin-right: 0.5rem;

}



.output-section {

    flex: 3;

    padding: 1rem;

    display: flex;

    flex-direction: column;

    overflow-y: auto;

}



#outputContainer {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.output-segment {

    background-color: #fff;

    padding: 0.5rem;

    margin-bottom: 0.5rem;

    border: 1px solid #ccc;

    position: relative;

}



.output-segment textarea {

    width: 100%;

    height: 100px;

    resize: none;

    padding: 0.5rem;

    font-size: 1rem;

}



.copy-button {

    position: absolute;

    top: 0.5rem;

    right: 0.5rem;

    padding: 0.3rem 0.6rem;

    font-size: 0.9rem;

    cursor: pointer;

}



.export-section {

    margin-top: 1rem;

    text-align: right;

}



.export-section button {

    padding: 0.5rem 1rem;

    font-size: 1rem;

    margin-left: 0.5rem;

}



@media (max-width: 768px) {

    main {

        flex-direction: column;

    }

    .sidebar {

        border-left: none;

        border-top: 1px solid #ccc;

    }

}