html, body { margin:0; padding:0; background:#fff; font-family:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
.browser-mockup { border:0; border-radius:0; box-shadow:none; transform:none !important; }
.browser-toolbar { padding:12px 16px; gap:12px; }
.browser-address { min-width:0; font:600 13px Arial,sans-serif; padding:4px 8px; }
.browser-body { display:grid; grid-template-columns:150px minmax(0,1fr); height:auto; min-height:430px; }
.app-sidebar { display:flex; padding:20px 12px; width:auto; border-right:1px solid #e5e7eb; }
.sidebar-logo { margin-bottom:24px; }
.hotel-brand { font-size:18px; color:#f05f40; }
.hotel-brand span { display:block; font-size:12px; color:#64748b; }
.sidebar-nav { display:flex; flex-direction:column; gap:8px; }
.sidebar-link { padding:10px 8px; margin:0; gap:0; min-height:42px; }
.sidebar-link span { display:inline; font-size:14px; }
.app-main { min-width:0; padding:22px; overflow:visible; }
.app-title { font-size:20px; }
.app-header { margin-bottom:20px; }
.metrics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
.metric-card { padding:14px 10px; }
.metric-value { font-size:25px; }
.metric-label, .metric-change { font-size:13px; }
.rooms-container { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.room-item { height:52px; min-width:0; }
.room-number { font-size:14px; }
.chart-area { height:120px; }
.chart-svg { height:100%; width:100%; }
.chart-container { margin-bottom:16px; }
.demo-table-container { overflow-x:auto; }
.demo-table { font-size:14px; min-width:360px; }
.demo-table th, .demo-table td { padding:10px 8px; }
.guest-card { flex-wrap:wrap; padding:16px; }
.guest-info { min-width:150px; }
.guest-info h4 { font-size:16px; }
.guest-info p, .setting-info span, .report-stat span { font-size:14px; }
.setting-item { gap:14px; }
.feature-state { color:#14794b; background:#e8f7ed; padding:5px 8px; border-radius:6px; font-size:13px; }
.demo-note { margin:0; padding:12px 18px; font-size:13px; background:#f8fafc; color:#566273; border-top:1px solid #e5e7eb; }
.sidebar-link:focus-visible { outline:3px solid #172c47; outline-offset:2px; }
@media(max-width:600px) {
 .browser-body { grid-template-columns:1fr; min-height:0; }
 .app-sidebar { border-right:0; border-bottom:1px solid #e5e7eb; padding:12px; }
 .sidebar-logo { margin-bottom:10px; }
 .hotel-brand span { display:inline; margin-left:4px; }
 .sidebar-nav { flex-direction:row; flex-wrap:wrap; gap:5px; }
 .sidebar-link { min-height:40px; padding:8px 10px; }
 .app-main { padding:18px 12px; }
 .metrics-grid { gap:6px; }
 .metric-card { padding:12px 7px; }
 .metric-value { font-size:22px; }
 .metric-label { font-size:12px; }
 .setting-item { flex-wrap:wrap; }
 .browser-controls { display:none; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }