:root{

    /* ===== COLORS ===== */

    --color-bg:#f3f2f1;
    --color-surface:#ffffff;

    --color-text:#323130;
    --color-text-secondary:#666666;

    --color-primary:#048a37;
    --color-primary-hover:#2fbe66;
    --color-primary-focus:rgba(4, 138, 55, 0.15);

    --color-border:#c8c6c4;
    --color-border-card:#e1dfdd;

    --color-icon:#666666;

    /* ===== RADIUS ===== */

    --radius-input:10px;
    --radius-card:18px;

    /* ===== SPACING ===== */

    --space-page:40px;
    --space-page-mobile:20px;

    --space-card:24px;
    --space-card-gap:20px;

    --space-grid-row:18px;
    --space-grid-column:24px;

    --space-field-top:18px;

    --space-input-y:10px;
    --space-input-x:12px;
    --space-select-right:42px;

    /* ===== SIZE ===== */

    --form-width:1000px;

    --font-size-label:14px;
    --font-size-input:14px;
    --font-size-button:15px;
    --font-size-h3:18px;

    --textarea-min-height:90px;

    /* ===== EFFECT ===== */

    --shadow-card:0 1px 3px rgba(0,0,0,.05);

}

/* ================================= */

*{
    box-sizing:border-box;
}

body{

    margin:0;
    padding:var(--space-page);

    background:var(--color-bg);

    color:var(--color-text);

    font-family:"Segoe UI",Tahoma,sans-serif;

}

form{

    max-width:var(--form-width);
    margin:auto;

}

.pageTitle{
    text-align:center;
    margin-top:0;
    margin-bottom:20px;

    font-weight:600;

}

.card{

    background:var(--color-surface);

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

    border-radius:var(--radius-card);

    padding:var(--space-card);

    margin-bottom:var(--space-card-gap);

    box-shadow:var(--shadow-card);

}

h2{

    margin-top:0;
    margin-bottom:20px;

    font-weight:600;

}

h3{

    margin-top:0;
    margin-bottom:20px;

    color:var(--color-primary);

    font-size:var(--font-size-h3);

}

.grid{

    display:grid;

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

    gap:var(--space-grid-row) var(--space-grid-column);

}

.field{

    display:flex;

    flex-direction:column;

}

.field.full,
.grid.full{

    margin-top:var(--space-field-top);

}

label{

    margin-bottom:6px;

    font-size:var(--font-size-label);

    font-weight:600;

}

input,
select,
textarea{

    width:100%;

    padding:
        var(--space-input-y)
        var(--space-input-x);

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

    border-radius:var(--radius-input);

    background:var(--color-surface);

    color:var(--color-text);

    font-size:var(--font-size-input);

    font-family:inherit;

}

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

    outline:none;

    border-color:var(--color-primary);

    box-shadow:0 0 0 2px var(--color-primary-focus);

}

select{

    appearance:none;
    -webkit-appearance:none;

    padding-right:var(--space-select-right);

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6 6-6' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 14px center;

}

textarea{

    resize:vertical;

    min-height:var(--textarea-min-height);

}

.actions{

    text-align:right;

}

button{

    background:var(--color-primary);

    color:#ffffff;

    border:none;

    border-radius:var(--radius-input);

    padding:12px 24px;

    font-size:var(--font-size-button);

    cursor:pointer;

    transition:background .2s ease;

}

button:hover{

    background:var(--color-primary-hover);

}

.date-field{

    position:relative;

}

.date-field::after{

    content:"";

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    width:18px;

    height:18px;

    pointer-events:none;

    background-repeat:no-repeat;

    background-size:18px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");

}

input[type="date"]::-webkit-calendar-picker-indicator{

    color:transparent;

    background:none;

}

@media(max-width:700px){

    .grid{

        grid-template-columns:1fr;

    }

    body{

        padding:var(--space-page-mobile);

    }

}