:root {
    --primary-bg: #FEFBF6;
    --secondary-bg: #FFF3E0;
    --card-bg: #FFFFFF;
    --text-color: #4E342E;
    --accent-color: #FF7043;
    --accent-hover: #FF8A65;
    --delete-color: #E53935;
    --delete-hover: #C62828;
    --header-bg: #FFFFFF;
    --font-family-headings: 'Lora', serif;
    --font-family-body: 'Poppins', sans-serif;
    --border-radius: 12px;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font-family-body);background:var(--primary-bg);color:var(--text-color)}
body{display:flex;justify-content:center;align-items:center;padding:1rem}
#app-container{width:100%;max-width:900px;height:95%;max-height:900px;background:var(--primary-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--secondary-bg);background:var(--header-bg)}
header .logo h1{font-family:var(--font-family-headings);font-size:1.8rem;color:var(--accent-color)}
nav{display:flex;gap:.5rem}
.nav-button{padding:.5rem 1rem;font-size:1rem;font-weight:600;border:2px solid transparent;border-radius:20px;background:transparent;color:var(--text-color);cursor:pointer;transition:all .3s}
.nav-button.active{background:var(--secondary-bg);color:var(--accent-color)}
main{flex-grow:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;display:flex;flex-direction:column}
.view.active{opacity:1;visibility:visible}
#creation-view{padding:1rem}
#transcript{flex-grow:1;overflow-y:auto;padding:0 .5rem;margin-bottom:1rem;font-size:1.05rem;line-height:1.6}
#transcript p{margin-bottom:1rem;max-width:85%;padding:.75rem 1.25rem;border-radius:20px}
.user-message{margin-left:auto;background:var(--accent-color);color:#fff;border-bottom-right-radius:5px}
.assistant-message{margin-right:auto;background:var(--secondary-bg);border-bottom-left-radius:5px}
#transcript p.interim{opacity:.6}
#status{text-align:center;padding:.5rem;font-size:1rem;color:#888;min-height:2.5rem}
#creation-view footer{padding:.5rem;display:flex;justify-content:center;align-items:center}
#mic-button{width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;background:var(--accent-color);display:flex;justify-content:center;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:all .3s;color:#fff;font-size:22px}
#mic-button.recording{background:#E53935;animation:pulse 1.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,57,53,.7)}70%{box-shadow:0 0 0 20px rgba(229,57,53,0)}100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}}
#gallery-view{display:flex;flex-direction:column}
#recipe-grid{flex-grow:1;overflow-y:auto;padding:1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}
.recipe-card{background:var(--card-bg);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:1rem;cursor:pointer}
.small{color:#888;font-size:.9rem}