/* ==========================================================
   AES-128 WEB SIMULATOR
   style.css
   Bagian 2A
   Foundation • Theme • Layout • Form
========================================================== */

/* ===========================
   RESET
=========================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    min-height:100vh;

    background:#07111f;

    color:#f8fafc;

    overflow-x:hidden;

    position:relative;

}

/* ===========================
   VARIABLES
=========================== */

:root{

    --primary:#3b82f6;
    --primary-hover:#2563eb;

    --secondary:#8b5cf6;

    --success:#10b981;

    --danger:#ef4444;

    --warning:#f59e0b;

    --cyan:#06b6d4;

    --orange:#fb923c;

    --text:#f8fafc;

    --text-soft:#cbd5e1;

    --border:rgba(255,255,255,.10);

    --glass:rgba(255,255,255,.06);

    --glass2:rgba(255,255,255,.03);

    --shadow:
        0 18px 40px rgba(0,0,0,.30);

    --radius:18px;

    --transition:.30s ease;

}

/* ===========================
   BACKGROUND
=========================== */

.background{

    position:fixed;

    inset:0;

    z-index:-2;

    background:
        radial-gradient(circle at top left,#2563eb 0%,transparent 35%),
        radial-gradient(circle at bottom right,#8b5cf6 0%,transparent 35%),
        linear-gradient(140deg,#07111f,#081828,#061018);

}

.background::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:45px 45px;

    opacity:.18;

}

/* ===========================
   MAIN
=========================== */

main{

    width:min(1450px,94%);

    margin:auto;

    padding:40px 0 80px;

}

/* ===========================
   HEADER
=========================== */

header{

    width:100%;

    padding:40px 0 20px;

    display:flex;

    justify-content:center;

}

.header-left {
    width: min(1450px, 94%);
    text-align: center; /* Ini yang membuat judul dan paragraf ke tengah */
}

.header-left h1{

    font-size:2.3rem;

    font-weight:800;

    letter-spacing:.5px;

    color:white;

}

.header-left p{

    margin-top:10px;

    color:var(--text-soft);

    line-height:1.7;

    font-size:1rem;

}

/* ===========================
   CARD
=========================== */

.card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:var(--radius);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

    padding:28px;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-3px);

}

.card h2{

    margin-bottom:22px;

    font-size:1.35rem;

    font-weight:700;

}

.card h3{

    font-size:1.05rem;

    margin-bottom:18px;

}

/* ===========================
   INPUT SECTION
=========================== */

.input-card{

    margin-bottom:28px;

}

.grid-two{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-bottom:22px;

}

.grid-three{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

    margin-bottom:30px;

}

/* ===========================
   LABEL
=========================== */

label{

    display:block;

    margin-bottom:8px;

    font-size:.94rem;

    font-weight:600;

    color:white;

}

/* ===========================
   INPUT
=========================== */

input,
textarea,
select{

    width:100%;

    border:none;

    outline:none;

    border-radius:14px;

    padding:15px 16px;

    background:rgba(255,255,255,.05);

    color:white;

    border:1px solid rgba(255,255,255,.08);

    transition:var(--transition);

    font-size:.95rem;

    font-family:inherit;

}

textarea{

    resize:vertical;

    min-height:140px;

}

textarea#outputHex{

    min-height:120px;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:

        0 0 0 4px rgba(59,130,246,.18);

}
/* Mengatasi masalah dropdown transparan agar teks terbaca */
select {
    appearance: none; /* Menghapus gaya default browser */
    -webkit-appearance: none;
    background-color: #2d2d44; /* Warna solid agar teks putih terbaca */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.65rem;
}

/* Memastikan opsi di dalam dropdown juga terbaca */
select option {
    background-color: #1e1e2e;
    color: white;
}
/* ===========================
   PLACEHOLDER
=========================== */

input::placeholder,
textarea::placeholder{

    color:#94a3b8;

}

/* ===========================
   SMALL INFO
=========================== */

small{

    display:block;

    margin-top:7px;

    color:#94a3b8;

    font-size:.82rem;

    line-height:1.5;

}

/* ===========================
   OUTPUT
=========================== */

.output-area{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ===========================
   WORKSPACE
=========================== */

.workspace{

    display:grid;

    grid-template-columns:

        270px

        1fr;

    gap:24px;

    margin-top:30px;

}

/* ===========================
   CONTENT
=========================== */

.content{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* ===========================
   PROCESS CARD
=========================== */

.process-card{

    overflow:hidden;

}

.section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:20px;

}

.section-content{

    width:100%;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1100px){

    .workspace{

        grid-template-columns:1fr;

    }

}

@media(max-width:850px){

    .grid-two{

        grid-template-columns:1fr;

    }

    .grid-three{

        grid-template-columns:1fr;

    }

}

@media(max-width:600px){

    header{

        padding-top:25px;

    }

    .header-left h1{

        font-size:1.8rem;

    }

    .card{

        padding:20px;

    }

    main{

        width:95%;

    }

}
/* ==========================================================
   AES-128 WEB SIMULATOR
   style.css
   Bagian 2B
   Button • Sidebar • Navigation • Round Card
   Collapse • Output • Scrollbar
========================================================== */


/* ===========================
   BUTTON GROUP
=========================== */

.button-group{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    align-items:center;

}

.button-group button,
#copyBtn,
.toggle{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

    font-weight:600;

    border-radius:14px;

    transition:all .30s ease;

}


/* ===========================
   MAIN BUTTON
=========================== */

.button-group button{

    min-width:170px;

    padding:15px 22px;

    color:#fff;

    font-size:.95rem;

    letter-spacing:.3px;

}

#encryptBtn{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

}

#encryptBtn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 25px rgba(37,99,235,.35);

}

#decryptBtn{

    background:linear-gradient(
        135deg,
        #10b981,
        #34d399
    );

}

#decryptBtn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 25px rgba(16,185,129,.35);

}

#resetBtn{

    background:linear-gradient(
        135deg,
        #ef4444,
        #f87171
    );

}

#resetBtn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 25px rgba(239,68,68,.35);

}


/* ===========================
   COPY BUTTON
=========================== */

#copyBtn{

    align-self:flex-start;

    background:linear-gradient(
        135deg,
        #7c3aed,
        #8b5cf6
    );

    color:white;

    padding:13px 24px;

}

#copyBtn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(139,92,246,.35);

}


/* ===========================
   SIDEBAR
=========================== */

.sidebar{

    position:sticky;

    top:25px;

    height:fit-content;

}

.sidebar h3{

    margin-bottom:18px;

    color:white;

}


/* ===========================
   NAVIGATION
=========================== */

#roundNavigation{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:10px;

}

#roundNavigation li{

    padding:13px 16px;

    border-radius:12px;

    cursor:pointer;

    color:#dbeafe;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.05);

    transition:.25s;

    font-size:.93rem;

}

#roundNavigation li:hover{

    background:#2563eb;

    color:white;

    transform:translateX(5px);

}

#roundNavigation li.active{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:white;

    font-weight:700;

}


/* ===========================
   PROCESS CARD
=========================== */

.process-card{

    transition:.3s;

}

.process-card+.process-card{

    margin-top:24px;

}

.process-card:hover{

    border-color:

        rgba(59,130,246,.35);

}


/* ===========================
   SECTION TITLE
=========================== */

.section-title{

    padding-bottom:16px;

    border-bottom:

        1px solid rgba(255,255,255,.08);

}

.section-title h2{

    margin:0;

}


/* ===========================
   COLLAPSE BUTTON
=========================== */

.toggle{

    padding:11px 18px;

    background:

        rgba(255,255,255,.08);

    color:white;

}

.toggle:hover{

    background:#2563eb;

}


/* ===========================
   COLLAPSIBLE
=========================== */

.section-content{

    overflow:hidden;

    transition:

        max-height .35s ease,

        opacity .30s ease,

        padding .30s ease;

    max-height:10000px;

    opacity:1;

}

.section-content.hidden{

    max-height:0;

    opacity:0;

    padding-top:0;

    padding-bottom:0;

    overflow:hidden;

}


/* ===========================
   OUTPUT
=========================== */

#outputHex{

    font-family:

        Consolas,

        monospace;

    font-size:15px;

    line-height:1.8;

    letter-spacing:.6px;

}


/* ===========================
   AES PROCESS CONTAINER
=========================== */

#keyExpansionContent,
#initialRoundContent,
#roundContainer,
#decryptContainer{

    display:flex;

    flex-direction:column;

    gap:26px;

}


/* ===========================
   ROUND BOX
=========================== */

.round-box{

    border-radius:16px;

    border:

        1px solid rgba(255,255,255,.08);

    background:

        rgba(255,255,255,.03);

    overflow:hidden;

}

.round-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 20px;

    background:

        rgba(59,130,246,.12);

    border-bottom:

        1px solid rgba(255,255,255,.06);

}

.round-header h3{

    margin:0;

    font-size:1rem;

}

.round-body{

    padding:22px;

}


/* ===========================
   STEP TITLE
=========================== */

.step-title{

    margin-bottom:12px;

    font-weight:700;

    color:#bfdbfe;

}

.step-description{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:16px;

}


/* ===========================
   BADGE
=========================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    background:#2563eb;

    color:white;

    font-size:.75rem;

    font-weight:700;

}


/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-track{

    background:#08131f;

}

::-webkit-scrollbar-thumb{

    background:#3b82f6;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#60a5fa;

}


/* Firefox */

*{

    scrollbar-width:thin;

    scrollbar-color:#3b82f6 #08131f;

}


/* ===========================
   SMOOTH TRANSITION
=========================== */

button,
input,
textarea,
select,
.card,
.round-box,
li{

    transition:

        all .25s ease;

}


/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:1000px){

    .sidebar{

        position:relative;

        top:0;

    }

}

@media(max-width:700px){

    .button-group{

        flex-direction:column;

        align-items:stretch;

    }

    .button-group button{

        width:100%;

    }

    #copyBtn{

        width:100%;

    }

    .round-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

}
/* ==========================================================
   AES-128 WEB SIMULATOR
   style.css
   Bagian 2C
   State Matrix • AES Colors • Highlight
========================================================== */


/* =====================================================
   STATE MATRIX
===================================================== */

.state-wrapper{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin:18px 0 30px;

}

.state-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}

.state-title h4{

    margin:0;

    font-size:1rem;

    font-weight:700;

    color:#ffffff;

}

.state-description{

    color:#94a3b8;

    font-size:.90rem;

    line-height:1.7;

}


/* =====================================================
   MATRIX TABLE
===================================================== */

.matrix{

    width:100%;

    max-width:520px;

    border-collapse:separate;

    border-spacing:8px;

    margin-top:12px;

}

.matrix tr{

    height:65px;

}

.matrix td{

    width:65px;

    height:65px;

    text-align:center;

    vertical-align:middle;

    border-radius:14px;

    font-family:

        Consolas,

        monospace;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    transition:.30s;

    border:1px solid rgba(255,255,255,.08);

    user-select:text;

}


/* =====================================================
   DEFAULT MATRIX
===================================================== */

.matrix-default td{

    background:

        rgba(255,255,255,.04);

    color:#ffffff;

}

.matrix-default td:hover{

    transform:scale(1.05);

    border-color:#3b82f6;

}


/* =====================================================
   SUBBYTES
===================================================== */

.matrix-subbytes td{

    background:

        rgba(59,130,246,.18);

    color:#dbeafe;

}

.matrix-subbytes td:hover{

    background:#2563eb;

    color:white;

}


/* =====================================================
   SHIFTROWS
===================================================== */

.matrix-shiftrows td{

    background:

        rgba(139,92,246,.18);

    color:#ede9fe;

}

.matrix-shiftrows td:hover{

    background:#8b5cf6;

    color:white;

}


/* =====================================================
   MIXCOLUMNS
===================================================== */

.matrix-mixcolumns td{

    background:

        rgba(16,185,129,.18);

    color:#d1fae5;

}

.matrix-mixcolumns td:hover{

    background:#10b981;

    color:white;

}


/* =====================================================
   ADD ROUND KEY
===================================================== */

.matrix-addroundkey td{

    background:

        rgba(245,158,11,.18);

    color:#fef3c7;

}

.matrix-addroundkey td:hover{

    background:#f59e0b;

    color:#111827;

}


/* =====================================================
   INV SUBBYTES
===================================================== */

.matrix-invsubbytes td{

    background:

        rgba(239,68,68,.18);

    color:#fee2e2;

}

.matrix-invsubbytes td:hover{

    background:#ef4444;

}


/* =====================================================
   INV SHIFTROWS
===================================================== */

.matrix-invshiftrows td{

    background:

        rgba(6,182,212,.18);

    color:#cffafe;

}

.matrix-invshiftrows td:hover{

    background:#06b6d4;

}


/* =====================================================
   INV MIXCOLUMNS
===================================================== */

.matrix-invmixcolumns td{

    background:

        rgba(251,146,60,.18);

    color:#ffedd5;

}

.matrix-invmixcolumns td:hover{

    background:#fb923c;

}


/* =====================================================
   ROUND KEY
===================================================== */

.matrix-roundkey td{

    background:

        rgba(168,85,247,.18);

    color:#f3e8ff;

}

.matrix-roundkey td:hover{

    background:#a855f7;

}


/* =====================================================
   CIPHERTEXT
===================================================== */

.matrix-result td{

    background:

        linear-gradient(
            135deg,
            #2563eb,
            #8b5cf6
        );

    color:white;

    font-weight:800;

}


/* =====================================================
   HIGHLIGHT CHANGED VALUE
===================================================== */

.changed{

    animation:

        changedFlash .8s ease;

    border:

        2px solid #22c55e !important;

    box-shadow:

        0 0 18px rgba(34,197,94,.45);

}

@keyframes changedFlash{

    0%{

        transform:scale(.8);

        opacity:.3;

    }

    60%{

        transform:scale(1.12);

        opacity:1;

    }

    100%{

        transform:scale(1);

    }

}


/* =====================================================
   CURRENT CELL
===================================================== */

.current-cell{

    outline:

        2px solid #ffffff;

    outline-offset:2px;

}


/* =====================================================
   WORD TABLE (KEY EXPANSION)
===================================================== */

.word-table{

    width:100%;

    border-collapse:collapse;

    margin-top:18px;

    overflow:hidden;

    border-radius:16px;

}

.word-table th{

    background:#1e3a8a;

    color:white;

    padding:14px;

    text-align:center;

    font-size:.90rem;

}

.word-table td{

    padding:13px;

    text-align:center;

    font-family:Consolas,monospace;

    border:

        1px solid rgba(255,255,255,.06);

}

.word-table tr:nth-child(even){

    background:

        rgba(255,255,255,.03);

}


/* =====================================================
   ROUND KEY CARD
===================================================== */

.roundkey-card{

    margin-top:18px;

    border-radius:16px;

    overflow:hidden;

    border:

        1px solid rgba(255,255,255,.08);

}

.roundkey-header{

    background:#2563eb;

    color:white;

    padding:14px 18px;

    font-weight:700;

}

.roundkey-body{

    padding:20px;

}


/* =====================================================
   STEP DIVIDER
===================================================== */

.step-divider{

    height:1px;

    margin:30px 0;

    background:

        linear-gradient(

            to right,

            transparent,

            rgba(255,255,255,.20),

            transparent

        );

}


/* =====================================================
   LEGEND
===================================================== */

.legend{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:25px 0;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.85rem;

    color:#cbd5e1;

}

.legend-color{

    width:18px;

    height:18px;

    border-radius:5px;

}

.legend-subbytes{

    background:#2563eb;

}

.legend-shiftrows{

    background:#8b5cf6;

}

.legend-mixcolumns{

    background:#10b981;

}

.legend-addroundkey{

    background:#f59e0b;

}

.legend-inv{

    background:#ef4444;

}


/* =====================================================
   HEX LABEL
===================================================== */

.hex-label{

    display:inline-block;

    padding:6px 10px;

    border-radius:8px;

    background:

        rgba(255,255,255,.06);

    font-family:Consolas,monospace;

    color:#dbeafe;

    font-size:.82rem;

}


/* =====================================================
   RESPONSIVE MATRIX
===================================================== */

@media(max-width:900px){

    .matrix{

        max-width:100%;

        border-spacing:5px;

    }

    .matrix td{

        width:52px;

        height:52px;

        font-size:13px;

    }

}

@media(max-width:600px){

    .matrix td{

        width:44px;

        height:44px;

        font-size:11px;

    }

    .legend{

        flex-direction:column;

    }

}
/* ==========================================================
   AES-128 WEB SIMULATOR
   style.css
   Bagian 2D
   Loader • Toast • Animation • Utilities
   Responsive • Print
========================================================== */


/* =====================================================
   LOADING OVERLAY
===================================================== */

#loadingOverlay{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:22px;

    background:rgba(5,10,20,.82);

    backdrop-filter:blur(8px);

    z-index:99999;

}

#loadingOverlay.active{

    display:flex;

}

.loader{

    width:72px;

    height:72px;

    border-radius:50%;

    border:7px solid rgba(255,255,255,.10);

    border-top-color:#3b82f6;

    animation:loaderSpin .9s linear infinite;

}

#loadingOverlay p{

    color:#fff;

    font-size:1rem;

    font-weight:600;

    letter-spacing:.5px;

}


/* =====================================================
   TOAST
===================================================== */

#toast{

    position:fixed;

    right:28px;

    bottom:28px;

    min-width:260px;

    max-width:380px;

    padding:16px 20px;

    border-radius:14px;

    background:#111827;

    color:#fff;

    font-size:.92rem;

    font-weight:500;

    box-shadow:0 18px 45px rgba(0,0,0,.35);

    transform:translateY(120px);

    opacity:0;

    transition:.35s ease;

    z-index:99999;

    border-left:5px solid #3b82f6;

}

#toast.show{

    opacity:1;

    transform:translateY(0);

}

#toast.success{

    border-left-color:#10b981;

}

#toast.error{

    border-left-color:#ef4444;

}

#toast.warning{

    border-left-color:#f59e0b;

}


/* =====================================================
   BREADCRUMB
===================================================== */

.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:22px;

}

.breadcrumb span{

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    color:#cbd5e1;

    font-size:.82rem;

}

.breadcrumb .active{

    background:#2563eb;

    color:#fff;

}


/* =====================================================
   ROUND INDICATOR
===================================================== */

.round-indicator{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.round-dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#334155;

}

.round-dot.active{

    background:#3b82f6;

    box-shadow:0 0 14px rgba(59,130,246,.6);

}


/* =====================================================
   INFO PANEL
===================================================== */

.info-box{

    padding:18px;

    border-radius:16px;

    margin-top:20px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

}

.info-box h4{

    margin-bottom:12px;

}

.info-box p{

    color:#cbd5e1;

    line-height:1.8;

}


/* =====================================================
   ANIMATION
===================================================== */

.fade-in{

    animation:fadeIn .45s ease;

}

.slide-up{

    animation:slideUp .45s ease;

}

.zoom-in{

    animation:zoomIn .35s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes slideUp{

    from{

        transform:translateY(22px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}

@keyframes zoomIn{

    from{

        transform:scale(.95);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}


/* =====================================================
   TABLE ANIMATION
===================================================== */

.matrix td{

    animation:matrixAppear .35s ease;

}

@keyframes matrixAppear{

    from{

        transform:scale(.85);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}


/* =====================================================
   UTILITY
===================================================== */

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.flex{

    display:flex;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.w-100{

    width:100%;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px){

    .workspace{

        grid-template-columns:1fr;

    }

    .sidebar{

        order:-1;

    }

    #roundNavigation{

        display:grid;

        grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

    }

}

@media(max-width:768px){

    header{

        text-align:center;

    }

    .header-left h1{

        font-size:1.9rem;

    }

    .button-group{

        flex-direction:column;

    }

    .button-group button{

        width:100%;

    }

    .section-title{

        flex-direction:column;

        align-items:flex-start;

    }

    #toast{

        left:20px;

        right:20px;

        max-width:none;

        min-width:unset;

    }

}

@media(max-width:600px){

    body{

        font-size:14px;

    }

    .card{

        padding:18px;

    }

    textarea{

        min-height:120px;

    }

    #roundNavigation{

        grid-template-columns:1fr;

    }

    .legend{

        flex-direction:column;

        align-items:flex-start;

    }

    .loader{

        width:60px;

        height:60px;

    }

}


/* =====================================================
   PRINT MODE
===================================================== */

@media print{

    body{

        background:#ffffff !important;

        color:#000000 !important;

    }

    .background,

    .sidebar,

    .button-group,

    #copyBtn,

    .toggle,

    #loadingOverlay,

    #toast{

        display:none !important;

    }

    .card{

        box-shadow:none !important;

        border:1px solid #999;

        background:#ffffff !important;

        color:#000000 !important;

        break-inside:avoid;

        page-break-inside:avoid;

    }

    .matrix td{

        border:1px solid #333;

        color:#000;

        background:#fff !important;

    }

    h1,h2,h3,h4{

        color:#000 !important;

    }

}
html {
    scroll-behavior: smooth;
}

.workspace {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 24px;
    margin-top: 30px;
}
section {
    scroll-margin-top: 80px;
}
html, body {
    height: 100%;
}
section {
    scroll-margin-top: 100px;
}
/* =====================================================
   END OF STYLE.CSS
========================================================== */