:root { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #172321; background: #f7f7f2; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
main { width: min(100%, 700px); margin: 0 auto; padding: 28px 18px 40px; }
.hero { padding: 8px 6px 22px; }
.eyebrow { color: #58716a; font-size: 13px; letter-spacing: .12em; margin: 0 0 9px; }
h1 { margin: 0; font-size: clamp(28px, 8vw, 42px); letter-spacing: -.04em; }
.subtle { color: #61716d; margin: 12px 0 0; }
.role-panel, .card { background: #fff; border: 1px solid #e5e9e3; border-radius: 18px; box-shadow: 0 7px 20px rgba(31, 54, 47, .05); }
.role-panel { padding: 14px; margin-bottom: 16px; }
.role-panel p { font-size: 14px; margin: 0 0 12px; color: #49615a; }
.roles { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 2px; }
.avatar { flex: 0 0 auto; border: 0; color: #486259; background: transparent; font: inherit; font-size: 12px; display: grid; gap: 5px; justify-items: center; cursor: pointer; }
.avatar span { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: #8ba89d; border: 2px solid transparent; border-radius: 50%; font-size: 15px; }
.avatar img { width: 40px; height: 40px; border: 2px solid transparent; border-radius: 50%; object-fit: cover; background: #e8f2df; }
.avatar.active span { background: #254c40; border-color: #c5e1ce; }
.avatar.active img { border-color: #254c40; }
.danger { color: #b94a45; }
.grid { display: grid; gap: 12px; }
.dashboard-section { background: #fff; border: 1px solid #e5e9e3; border-radius: 18px; padding: 18px; margin: 12px 0; box-shadow: 0 7px 20px rgba(31, 54, 47, .05); }
.dashboard-section.featured { background: linear-gradient(135deg, #e8f5df, #fefbea); }.dashboard-section.aunt { background: #fbfaff; }
.section-heading { display: flex; align-items: center; gap: 10px; }.section-heading h2 { margin: 0; font-size: 19px; }
.list { display: grid; gap: 8px; margin-top: 14px; }.line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid #edf0eb; font-size: 14px; }.line:last-child { border-bottom: 0; }.line span { color: #61716d; }.line.done { opacity: .55; text-decoration: line-through; }
.compact-form { display: grid; grid-template-columns: 1fr 120px auto; gap: 7px; margin-top: 12px; }.compact-form input, .compact-form button, .diner-count input { min-width: 0; border: 1px solid #d9e1da; border-radius: 10px; padding: 9px; font: inherit; }.compact-form button, .primary { border: 0; background: #254c40; color: #fff; cursor: pointer; border-radius: 10px; padding: 9px 12px; font: inherit; }
.course-form { display: grid; grid-template-columns: 1fr 70px 80px 1fr 1fr auto; gap: 7px; margin-top: 12px; }.course-form input, .course-form button { min-width: 0; border: 1px solid #d9e1da; border-radius: 10px; padding: 9px; font: inherit; }.course-form button { border: 0; background: #254c40; color: #fff; cursor: pointer; }
.meal { margin-top: 16px; }.meal h3, .aunt h3 { font-size: 14px; margin: 0 0 8px; color: #49615a; }.dish-options, .shopping, .choice-summary { display: flex; flex-wrap: wrap; gap: 8px; }.dish { border: 1px solid #cbd9ca; background: #fff; color: #35574a; border-radius: 999px; padding: 8px 11px; font: inherit; font-size: 14px; cursor: pointer; }.dish.chosen { background: #254c40; color: #fff; border-color: #254c40; }.choice-summary { border-top: 1px dashed #bed2b8; margin-top: 16px; padding-top: 12px; color: #49615a; font-size: 13px; }.choice-summary span, .shopping span { background: #f2f5ef; border-radius: 8px; padding: 6px 8px; font-size: 13px; }.primary { margin-top: 15px; width: 100%; }.confirm-note { color: #49723a; font-size: 13px; }.hint { color: #65736e; font-size: 14px; line-height: 1.6; }.diner-count { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; color: #49615a; font-size: 14px; }.diner-count input { width: 70px; text-align: center; }
.voice-row { display: flex; gap: 8px; margin: 12px 0; }.voice-row select { flex: 1; min-width: 0; border: 1px solid #d9e1da; background: #fff; border-radius: 10px; padding: 9px; font: inherit; }.voice-row .voice-button { width: auto; margin: 0; }.voice-drafts { margin-top: 12px; }.mini { border: 0; border-radius: 8px; background: #254c40; color: #fff; padding: 5px 8px; font-size: 12px; cursor: pointer; }
.shopping .purchased { opacity: .6; text-decoration: line-through; }.shopping .mini { margin-left: 6px; }
.card { padding: 18px; min-height: 136px; }
.card.featured { background: linear-gradient(135deg, #e8f5df, #fefbea); }
.card h2 { margin: 13px 0 7px; font-size: 19px; }
.card p { margin: 0; color: #65736e; line-height: 1.6; font-size: 14px; }
.badge { display: inline-block; color: #35574a; background: #e2eee8; border-radius: 99px; padding: 4px 9px; font-size: 12px; }
.coral { color: #944b36; background: #fae8df; }.green { color: #466b2d; background: #dcebc8; }.purple { color: #635290; background: #ece7f8; }
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .compact-form { grid-template-columns: 1fr 1fr; }.compact-form input[name="title"] { grid-column: 1 / -1; } }
@media (max-width: 560px) { .course-form { grid-template-columns: 1fr 1fr; }.course-form input[name="child"], .course-form input[name="title"], .course-form button { grid-column: 1 / -1; } }
.daily-board{margin:20px auto;max-width:1180px;padding:28px;border-radius:28px;background:linear-gradient(135deg,#244e42,#376c59);color:#fff;box-shadow:0 14px 35px #26443622}.board-date,.board-tabs{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.board-date strong{font-size:1.25rem}.board-tabs{margin:22px 0}.board-tabs button{border:0;border-radius:999px;padding:11px 18px;background:#ffffff26;color:#fff}.board-tabs button.active{background:#fff;color:#244e42;font-weight:700}.board-content{min-height:170px;border-radius:20px;padding:22px;background:#ffffff16}.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.board-grid>div,.board-list p{margin:0;padding:14px;border-radius:14px;background:#ffffff18}.board-list{display:grid;gap:10px}.board-list h3{margin:10px 0 0}@media(max-width:640px){.board-grid{grid-template-columns:1fr}.daily-board{margin:12px;padding:18px}}