.container {
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
 }

 /* App Bar */
 .app-bar {
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
     background: white;
     border-bottom: 1px solid #f0f0f0;
 }

 .app-title {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
     font-size: 18px;
     color: #333;
 }

 .icon-btn {
     color: #5f6368;
     cursor: pointer;
     transition: color 0.2s;
 }

 .icon-btn:hover {
     color: #333;
 }

 /* Main Scrollable Content */
 .app-scroll-content {
     flex: 1;
     padding: 20px;
     overflow-y: auto;
 }

 /* Status Card */
 .status-card {
     background: white;
     border-radius: 20px;
     padding: 40px 20px;
     text-align: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
     margin-bottom: 30px;
     border: 1px solid #eee;
 }

 .status-label {
     color: #666;
     font-size: 14px;
     margin-bottom: 5px;
 }

 .status-value {
     font-size: 24px;
     color: #2c3e50;
     margin-bottom: 30px;
     font-weight: 500;
 }

 .status-icon-circle {
     width: 100px;
     height: 100px;
     background: #f1f3f5;
     border-radius: 50%;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .status-icon-circle span {
     font-size: 48px;
     color: #495057;
 }

 /* Recent Brews Section */
 .section-title {
     font-size: 18px;
     color: #333;
     margin-bottom: 15px;
     font-weight: 500;
 }

 .recent-brews-list {
     display: flex;
     gap: 15px;
     overflow-x: auto;
     padding-bottom: 10px;
     /* Hide scrollbar */
     scrollbar-width: none;
 }

 .recent-brews-list::-webkit-scrollbar {
     display: none;
 }

 .brew-card {
     min-width: 140px;
     background: white;
     border-radius: 15px;
     padding: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     border: 1px solid #eee;
     cursor: pointer;
     transition: transform 0.1s;
 }

 .brew-card:active {
     transform: scale(0.95);
 }

 .brew-image {
     width: 100%;
     height: 100px;
     background-color: #ddd;
     border-radius: 10px;
     margin-bottom: 10px;
     overflow: hidden;
     position: relative;
 }

 .brew-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Placeholder graphic if images fail or for simple shapes */
 .placeholder-art {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #888;
     font-size: 12px;
 }

 .brew-name {
     font-weight: 500;
     color: #333;
     font-size: 14px;
     margin-bottom: 5px;
 }

 .brew-time {
     font-size: 12px;
     color: #999;
 }

 /* Bottom Navigation */
 .bottom-nav {
     height: 70px;
     background: white;
     border-top: 1px solid #eee;
     display: flex;
     justify-content: space-around;
     align-items: center;
 }

 .nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     color: #999;
     font-size: 10px;
     gap: 4px;
     cursor: pointer;
     width: 60px;
 }

 .nav-item.active {
     color: #2c3e50;
 }

 .nav-item span.material-icons {
     font-size: 24px;
 }