:root { 
    --bg: #fafafa;   
    --main-color: #ff9a9e;
    --danger: #ff6b6b; 
    --color-white: #ffffff;
    --color-gray: #cccccc;
    --color-darkGray: #999999; 
    --color-lightGray: #dddddd;
    --color-whiteGray: #eeeeee;  
    --color-green: #4db6ac;    
    --color-blue:#64b5f6;
    --color-rgba005: rgba(0,0,0,0.05);   
    --color-rgba01: rgba(0,0,0,0.1);    
}
body { 
    margin: 0;
    padding: 0;
    font-family: sans-serif; 
    background: var(--bg);
}
h1{
    font-size: 1.5em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.17em;
}
body#login { 
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.login-card { 
    padding: 30px; 
    border-radius: 15px; 
    width: 300px; 
    text-align: center;
    box-shadow: 0 4px 12px var(--color-rgba01); 
    background: var(--color-white); 
}
.login-card input { 
    width: 100%; 
    padding: 12px; 
    margin: 10px 0; 
    border-radius: 8px; 
    box-sizing: border-box;
    border: 1px solid var(--color-gray); 
}
.login-card button { 
    width: 100%; 
    padding: 12px; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold;
    color: var(--color-white); 
    background: var(--main-color); 
}
header{
    display:flex; 
    justify-content:space-between;  
}
#registration header{
    padding: 10px;
    display: flex; 
    align-items: center;
    justify-content: space-between;
    position: fixed;
    box-sizing: border-box; 
    width: 100%; 
    top: 0;
    left :0;
    z-index: 1000; 
    box-shadow: 0 4px 15px var(--color-rgba005);
    background: var(--color-white); 
}
.status{
    font-weight:bold;
    text-align: center;
    color:var(--color-green);    
}
.container { 
    max-width: 800px; 
    padding: 10px;
    margin: 40px auto 0; 
}
.form-card { 
    padding: 20px; 
    margin-bottom: 30px;
    border-radius: 15px;
    border: 2px solid var(--main-color);
    background: var(--color-white); 
}
input, select, textarea { 
    width: 100%;
    padding: 10px; 
    margin: 5px 0 15px; 
    border-radius: 8px;
    box-sizing: border-box; 
    border: 1px solid var(--color-lightGray); 
}
.choice{
    width:80px !important;
}
.ing-row { 
    display: flex; 
    gap: 5px; 
    margin-bottom: 5px;
}
.btn-add { 
    border: none; 
    padding: 12px; 
    margin-bottom:15px;
    border-radius: 5px; 
    width: 100%; 
    cursor: pointer; 
    font-weight: bold; 
    background: var(--main-color);
    color: var(--color-white); 
}
.btn-del {
    border: none;
    padding: 5px 10px; 
    border-radius: 5px; 
    cursor: pointer; 
    background: var(--danger); 
    color: var(--color-white);
}
.btn-edit { 
    border: none; 
    padding: 8px 12px; 
    border-radius: 5px; 
    cursor: pointer; 
    margin-right: 5px; 
    background: var(--color-blue); 
    color: var(--color-white);
}
.tool-bar { 
    margin: 20px 0; 
    display: flex; 
    gap: 10px; 
}
.btn-dl { 
    text-decoration: none; 
    padding: 10px 15px; 
    border-radius: 10px; 
    font-size: 0.9rem; 
    font-weight: bold; 
    background: var(--color-green);
    color: var(--color-white);
}
#cancel-edit { 
    display: none; 
    background: var(--color-darkGray); 
    margin-top: 10px;
}
.recipe-list form{
    margin:0;   
}
.recipe-list { 
    padding: 15px;
    border-radius: 10px;
    background: var(--color-white); 
}
.recipe-item {
    padding: 10px 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid var(--color-whiteGray);
}
.menu{
    display: flex;
    justify-content: space-between; 
    list-style-type: none;
    margin: 0;
    padding: 0;
    min-width: 200px;
}