/* =========================
   Root Variables
========================= */

:root {

    --primary-green: #5F7F67;
    --dark-green: #405646;

    --gold: #C89B3C;

    --cream: #F8F4ED;
    --white: #FFFFFF;

    --light-gray: #F1F1F1;
    --border-gray: #D8D8D8;

    --text-dark: #333333;
    --text-light: #666666;

    --danger: #C0392B;
    --warning: #D68910;
    --success: #2E7D32;

    --shadow:
        0 4px 15px rgba(0,0,0,0.08);

}





/* =========================
   Reset
========================= */

* {

    box-sizing: border-box;
    margin: 0;
    padding: 0;

}


body {

    font-family:

        "Noto Sans TC",
        "Microsoft JhengHei",
        Arial,
        sans-serif;

    background:

        linear-gradient(
            135deg,
            #faf7f0,
            #f3efe5
        );

    color: var(--text-dark);

    min-height:100vh;

}





/* =========================
   Header
========================= */

.page-header {

    text-align:center;

    padding:

        35px
        20px;

    background:

        linear-gradient(
            135deg,
            var(--primary-green),
            var(--dark-green)
        );

    color:white;

    box-shadow:var(--shadow);

}


.page-header h1 {

    font-size:2rem;

    margin-bottom:10px;

}


.page-header p {

    font-size:1.1rem;

    opacity:0.9;

}





/* =========================
   Main Container
========================= */

.container {

    width:90%;

    max-width:1200px;

    margin:

        30px auto;

}





/* =========================
   Cards
========================= */

.card {

    background:

        var(--white);

    border-radius:16px;

    padding:25px;

    margin-bottom:25px;

    box-shadow:var(--shadow);

    border:

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

}


.card h2 {

    color:

        var(--dark-green);

    margin-bottom:20px;

    font-size:1.4rem;

}





/* =========================
   Input Layout
========================= */

.input-grid {

    display:grid;

    grid-template-columns:

        repeat(
            2,
            1fr
        );

    gap:20px;

}


.input-group {

    display:flex;

    flex-direction:column;

    gap:8px;

}


.input-group.full {

    grid-column:

        1 / -1;

}



label {

    font-weight:bold;

    color:

        var(--dark-green);

}



input,
textarea,
select {


    width:100%;

    padding:

        12px
        15px;

    border-radius:10px;

    border:

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

    font-size:1rem;

    outline:none;

    transition:.2s;

}


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


    border-color:

        var(--primary-green);

    box-shadow:

        0 0 0 3px
        rgba(95,127,103,.15);

}


textarea {

    resize:vertical;

    min-height:250px;

}





/* =========================
   Buttons
========================= */

button {


    border:none;

    padding:

        12px
        20px;

    border-radius:12px;

    background:

        var(--primary-green);

    color:white;

    font-size:1rem;

    cursor:pointer;

    transition:.2s;

    margin:

        5px;

}


button:hover {


    background:

        var(--dark-green);

    transform:

        translateY(-2px);

}


button:active {

    transform:none;

}





/* =========================
   Action Panel
========================= */

.action-panel {


    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-bottom:25px;

}





/* =========================
   Status Display
========================= */

#personStatus {


    background:

        var(--cream);

    padding:15px;

    border-radius:12px;

    line-height:1.8;

}



.status-success {

    color:

        var(--success);

}


.status-warning {

    color:

        var(--warning);

}


.status-error {

    color:

        var(--danger);

}





/* =========================
   Assignment Result
========================= */


.assignment-card {


    border-left:

        5px solid
        var(--gold);

    background:

        #fffaf0;

    padding:15px;

    border-radius:10px;

    margin-bottom:15px;

}


.assignment-card h3 {

    color:

        var(--dark-green);

    margin-bottom:10px;

}



.person-item {


    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:

        8px
        10px;

    border-bottom:

        1px solid
        #eee;

}





/* =========================
   Lock Status
========================= */


.locked {


    background:

        #fff3cd;

    border:

        1px solid
        #f0c36d;

}


.lock-icon {

    color:

        var(--gold);

}





/* =========================
   Dropdown Areas
========================= */


details {


    margin-top:15px;

    padding:10px;

    border-radius:10px;

    background:

        var(--cream);

}


summary {


    cursor:pointer;

    font-weight:bold;

}





/* =========================
   Message Preview
========================= */


#messagePreview {


    white-space:pre-line;

    background:

        #fafafa;

    border:

        1px dashed
        var(--border-gray);

    padding:20px;

    border-radius:12px;

    margin-top:20px;

    min-height:200px;

    line-height:1.8;

}





/* =========================
   Footer
========================= */


footer {


    text-align:center;

    padding:25px;

    color:

        var(--text-light);

}





/* =========================
   Responsive
========================= */


@media(max-width:768px){


    .input-grid {

        grid-template-columns:

            1fr;

    }


    .container {

        width:95%;

    }


    .page-header h1 {

        font-size:1.5rem;

    }


    button {

        width:100%;

    }


    .action-panel {

        flex-direction:column;

    }


}