.app-view { min-height: 100vh; }
.sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 24px 15px 18px; color: #d9e7e4; background: var(--sidebar); box-shadow: 8px 0 30px rgba(5,25,21,.08); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 26px; }
.sidebar-brand img { width: 38px; height: 38px; border-radius: 11px; }
.nav-list { display: grid; gap: 5px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 9px 12px; border-radius: 9px; color: #9fb8b3; background: transparent; text-align: left; text-decoration: none; font-size: .88rem; font-weight: 650; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.055); }
.nav-item.active { color: #fff; background: #185047; box-shadow: inset 3px 0 #6bc2b2; }
.nav-icon { display: grid; place-items: center; width: 21px; color: #72a9a0; font-size: 1.05rem; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-item.active .nav-icon { color: #8fe0d1; }
.nav-separator { height: 1px; margin: 9px 12px; background: rgba(255,255,255,.08); }
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { display: grid; place-items: center; width: 37px; height: 37px; flex: none; border-radius: 10px; color: #0d3c37; background: #8ed2c5; font-weight: 850; }
.sidebar-user-text { min-width: 0; flex: 1; }
.sidebar-user-text strong, .sidebar-user-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-text strong { color: #fff; font-size: .88rem; }
.sidebar-user-text small { margin-top: 2px; color: #75968f; font-size: .82rem; }
.sidebar .icon-button { border-color: rgba(255,255,255,.08); color: #9fb7b2; background: transparent; }
.main-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 25; top: 0; min-height: var(--topbar-height); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px clamp(22px, 3.2vw, 46px); border-bottom: 1px solid color-mix(in srgb, var(--line) 90%, transparent); background: color-mix(in srgb, var(--surface-soft) 93%, transparent); backdrop-filter: blur(16px); }
.topbar-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mobile-menu-button { display: none; }
.breadcrumb { display: block; color: var(--primary); font-size: .7rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.topbar h1 { margin: 4px 0 2px; font-size: 1.37rem; letter-spacing: -.035em; }
.topbar p { margin: 0; color: var(--text-soft); font-size: .82rem; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.page { padding: clamp(22px, 3.2vw, 46px); }
.page > * { animation: rise-in .34s cubic-bezier(.2,.8,.2,1) both; }
.page > *:nth-child(2) { animation-delay: .035s; }
.page > *:nth-child(3) { animation-delay: .07s; }
.page > *:nth-child(4) { animation-delay: .105s; }
.mobile-nav-backdrop { display: none; }
.bottom-nav { display: none; }

@keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  body { padding-bottom: 66px; }
  .sidebar { left: -270px; width: 250px; transition: left .2s ease; }
  .app-view.nav-open .sidebar { left: 0; }
  .mobile-nav-backdrop { position: fixed; z-index: 35; inset: 0; display: none; background: rgba(8,25,21,.45); backdrop-filter: blur(2px); }
  .app-view.nav-open .mobile-nav-backdrop { display: block; }
  .main-content { margin-left: 0; }
  .mobile-menu-button { display: inline-flex; }
  .topbar { min-height: 76px; padding: 13px 14px; }
  .topbar p, .breadcrumb { display: none; }
  .topbar h1 { margin: 0; font-size: 1.1rem; }
  .topbar-actions .secondary:not(#refreshButton) { display: none; }
  .topbar-actions #refreshButton { display: inline-flex; min-height:36px; padding:8px 10px; }
  .page { padding: 18px 13px 28px; }
  .bottom-nav { position: fixed; z-index: 30; inset: auto 0 0; height: 66px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px); box-shadow: 0 -7px 25px rgba(20,45,40,.08); }
  .bottom-nav a { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--text-muted); text-decoration: none; font-size: .7rem; font-weight: 750; }
  .bottom-nav a.active { color: var(--primary); }
  .bottom-nav svg { width: 18px; height: 18px; }
}

/* v200 spacing pass: keep topbar/page gutters aligned and reduce oversized whitespace. */
.topbar { padding-left: clamp(18px, 2.4vw, 34px); padding-right: clamp(18px, 2.4vw, 34px); }
.page { padding: 24px clamp(18px, 2.4vw, 34px) 36px; }
@media (max-width:760px) { .page { padding:16px 13px 26px; } }

/* Normal Tizori finalized sidebar logo + short-viewport behavior. */
.sidebar-brand { min-height:62px; padding-left:5px; padding-bottom:24px; gap:0 !important; }
.sidebar-brand img { width:176px !important; height:auto !important; max-width:100%; max-height:58px !important; object-fit:contain; object-position:left center; border-radius:0 !important; box-shadow:none !important; }
.sidebar { height:100dvh; max-height:100dvh; overflow:hidden; }
.sidebar-brand,.sidebar-footer { flex-shrink:0; }
.sidebar .nav-list { min-height:0; flex:1 1 0; align-content:start; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; }
@supports not (height:100dvh){.sidebar{height:100vh;max-height:100vh}}
@media (max-width:900px){.sidebar-brand img{width:165px !important;max-height:54px !important}}
@media (max-width:520px){.sidebar-brand img{width:154px !important;max-height:50px !important}}