/* KosBumul 4.7 — viewport-led layout, with small platform refinements.
   Load last. Device hints never alter access control or app state. */
@media screen {
  html { -webkit-text-size-adjust:100%; scroll-padding-bottom:100px; }
  .main,.topbar,.sidebar,.access-page,.access-card,.modal-form { min-width:0; }
  .top-actions,.heading-actions,.modal-actions { flex-wrap:wrap; }
  .btn,.text-button { white-space:normal; }
  .nav a span,.mobile-nav a span { min-width:0; overflow-wrap:anywhere; }
  .table-wrap { overscroll-behavior-x:contain; }
  dialog { scrollbar-gutter:stable; }
  .access-page { padding-top:max(24px,env(safe-area-inset-top,0px)); padding-bottom:max(28px,env(safe-area-inset-bottom,0px)); }
}

@media screen and (any-pointer:coarse) {
  .btn,.text-button,.filter-pill,.nav a,.role-switch button { min-height:48px; }
  .btn.icon { width:48px; }
  .month-field,.toolbar select,.search-box { min-height:48px; }
  .month-field input,.search-box input { min-height:46px; font-size:16px; }
  .toolbar select,.field input[type=file] { font-size:16px; }
}

@media screen and (min-width:768px) and (max-width:1199px) {
  .sidebar { display:flex; position:relative; inset:auto; width:auto; height:auto; margin:0 28px; padding:24px 0 20px; flex-direction:row; align-items:center; flex-wrap:wrap; gap:20px; overflow:visible; }
  .brand { padding:0; border:0; flex-direction:row; text-align:left; }
  .nav { display:flex; flex-direction:row; order:3; width:100%; justify-content:center; gap:5px; padding:5px; margin:0; border:1px solid var(--line); border-radius:12px; background:#121211; }
  .nav a { flex:1; flex-direction:row; justify-content:center; min-height:48px; padding:11px 10px; gap:8px; font-size:13px; border-radius:7px; }
  .side-bottom { margin:0 0 0 auto; padding:0; }
  .side-footer { flex-direction:row; text-align:left; padding:0; }
  .topbar { min-height:72px; margin-inline:28px; padding:16px 0; gap:16px; }
  .top-actions { margin-left:auto; gap:8px; }
  .main { max-width:none; margin:0 28px; padding:28px 0 max(40px,env(safe-area-inset-bottom,0px)); }
  .page-heading { flex-direction:column; align-items:flex-start; gap:24px; }
  .page-heading h1 { font-size:38px; }
  .heading-actions { justify-content:flex-start; max-width:100%; }
  .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .balance { grid-column:1/-1; min-height:224px; padding:30px; }
  .summary-grid .metric { min-height:158px; padding:20px; }
  .metric-value { font-size:clamp(23px,2.8vw,30px); }
  .metric-value.long-value { font-size:21px; }
  .balance-value { font-size:48px; }
  .balance-value.long-value { font-size:36px; }
  .overview-grid { grid-template-columns:minmax(0,1fr) minmax(0,.7fr); gap:18px; }
  .panel-head { padding:22px 22px 0; }
  .panel-head h2 { font-size:19px; }
  .chart-wrap { padding-inline:12px; }
  .chart-note { padding-inline:22px; }
  .settings-grid { grid-template-columns:minmax(0,1fr); }
  .settings-heading { flex-wrap:wrap; }
  .occupancy-stats { gap:14px; }
  .occupancy-stats article { padding:20px; gap:12px; }
  .toolbar .search-box { max-width:none; }
  th,td { padding-inline:18px; }
  dialog { width:620px; }
  .toast { bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
  .access-page { display:block; max-width:none; padding-inline:28px; }
  .access-header { grid-template-columns:minmax(0,1fr) auto; }
  .access-header-note { display:none; }
  .access-story { min-height:0; padding:56px 0 30px; }
  .access-story h1 { font-size:72px; }
  .access-story h1+p { font-size:17px; }
  .access-card { width:458px; max-width:100%; padding:24px; }
}

@media screen and (max-width:767px) {
  .sidebar,.crumb { display:none; }
  .main { width:auto; max-width:none; margin:0; padding:28px max(20px,env(safe-area-inset-right,0px)) calc(116px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px)); }
  .topbar { width:auto; margin:0; min-height:80px; padding:max(16px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 16px max(20px,env(safe-area-inset-left,0px)); gap:10px; flex-wrap:wrap; background:var(--bg); border-bottom:1px solid var(--line); }
  .mobile-brand { display:flex; flex:1 1 112px; gap:8px; min-width:0; }
  .mobile-brand>span:last-child { max-width:none; font-size:18px; font-weight:550; }
  .mobile-brand .brandmark { width:34px; height:34px; border-radius:50%; }
  .top-actions { margin-left:auto; gap:6px; }
  .top-actions .connection { display:none; }
  .top-actions .btn { min-height:44px; padding:10px 12px; font-size:12px; }
  .top-actions .sync-button { width:44px; padding:10px; }
  .sync-button>span { display:none; }
  .top-actions>.btn:last-child svg { display:none; }
  h1,.page-heading h1 { font-size:clamp(31px,7.9vw,42px); }
  .page-heading { flex-direction:column; align-items:flex-start; gap:22px; margin-bottom:24px; }
  .page-heading h1+p { font-size:13px; max-width:38ch; }
  .heading-actions { width:100%; max-width:none; gap:9px; justify-content:flex-start; align-items:stretch; }
  .heading-actions .btn { flex:1 1 160px; min-height:48px; font-size:13px; }
  .month-field { min-height:48px; flex:1 1 155px; }
  .month-field input { width:100%; min-width:0; font-size:16px; min-height:46px; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .balance { display:block; grid-column:1/-1; min-height:0; padding:25px 23px; border-radius:20px; }
  .balance-value { font-size:42px; margin:24px 0 16px; }
  .balance-value.long-value { font-size:30px; }
  .balance-label { font-size:13px; }
  .balance-footer { font-size:11px; }
  .balance-context { display:block; margin-top:22px; min-width:0; }
  .balance-symbol,.balance-context>p { display:none; }
  .balance-link { min-height:44px; font-size:12px; }
  .summary-grid .metric { padding:19px 16px; min-height:154px; border-radius:16px; }
  .metric-top { align-items:flex-start; font-size:12px; gap:5px; }
  .metric-icon { width:25px; height:25px; border-radius:6px; }
  .metric-icon svg { width:14px; height:14px; }
  .summary-grid .metric-value { font-size:clamp(22px,5.8vw,30px); margin:20px 0 10px; }
  .summary-grid .metric-value.long-value { font-size:20px; }
  .metric-foot { font-size:11px; }
  .summary-grid .metric.pending { grid-column:1/-1; min-height:0; }
  .summary-grid .metric.pending .metric-value { margin:9px 0 6px; }
  .deadline-card { padding:21px; gap:18px; }
  .deadline-leading { width:100%; }
  .deadline-leading h2 { font-size:23px; }
  .deadline-status,.deadline-link { margin-left:0; }
  .deadline-link { width:100%; }
  .overview-grid,.resident-grid,.settings-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .panel-head { padding:22px 21px 0; }
  .panel-head h2 { font-size:20px; }
  .chart-wrap { padding-inline:8px; }
  .chart text { font-size:19px; }
  .chart-note { padding-inline:21px; }
  .occupancy-stats { gap:9px; }
  .occupancy-stats article { display:block; padding:18px 13px; border-radius:10px; }
  .occupancy-stats strong { font-size:28px; }
  .occupancy-stats p { font-size:11px; }
  .occupancy-icon { width:32px; height:32px; margin-bottom:14px; }
  .payment-info>div:nth-child(2) { min-width:min(165px,100%); }
  .payment-info>.btn { margin-left:0; flex:1 1 170px; }
  .modal-actions .btn { flex:1 1 130px; min-height:48px; }
  .mobile-nav { display:grid; position:fixed; inset:auto 0 0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; background:#141413; border-top:1px solid #373732; padding:7px max(7px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px)); box-shadow:none; z-index:30; }
  .mobile-nav.admin-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .mobile-nav a { display:flex; flex-direction:column; justify-content:center; align-items:center; color:#b7b7af; min-height:61px; padding:6px 2px; font-size:10px; gap:6px; border-radius:7px; text-decoration:none; }
  .mobile-nav a span { text-align:center; line-height:1.4; }
  .mobile-nav a.active { background:#2e2018; color:#ffac8d; }
  .mobile-nav a:focus-visible { outline:2px solid #ff956e; outline-offset:-2px; }
  .toast { bottom:calc(104px + env(safe-area-inset-bottom,0px)); }
  .access-page { display:block; width:100%; max-width:none; padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px)); }
  .access-header { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .access-brand { font-size:24px; gap:8px; }
  .access-brand .brandmark { width:36px; height:36px; border-radius:50%; }
  .access-header-note,.access-nav>a { display:none; }
  .access-nav { gap:0; padding:0; border:0; background:transparent; }
  .access-nav button { min-height:44px; padding:9px 10px; font-size:12px; gap:5px; }
  .access-story { min-height:0; padding:43px 0 28px; gap:0; border-radius:0; }
  .access-story h1 { font-size:clamp(44px,11vw,64px); line-height:1.06; max-width:none; }
  .access-story h1+p { margin-top:21px; font-size:15px; line-height:1.75; max-width:none; }
  .access-kicker { font-size:11px; letter-spacing:.025em; }
  .access-orbit { width:680px; }
  .access-card { width:100%; max-width:458px; margin-inline:auto; padding:24px; border-radius:21px; }
  .access-card-heading { gap:13px; }
  .access-icon { display:grid; width:43px; height:43px; }
  .access-card h2 { font-size:26px; }
  .access-description { font-size:13px; }
  .access-help { font-size:12px; }
  .access-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; padding-top:26px; font-size:11px; }
  html[data-platform="ios"] .mobile-nav { inset:auto max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)); padding:5px; border:1px solid #494940; border-radius:18px; box-shadow:0 9px 30px #0008; }
  html[data-platform="ios"] .mobile-nav a { border-radius:12px; }
  html[data-platform="android"] .mobile-nav a.active { background:transparent; color:#ffac8d; }
  html[data-platform="android"] .mobile-nav a svg { box-sizing:content-box; padding:4px 12px; border-radius:999px; }
  html[data-platform="android"] .mobile-nav a.active svg { background:#4b2a1b; }
}

@media screen and (max-width:400px) {
  .access-card { padding:24px 16px; }
  .access-brand { font-size:22px; }
  .access-card h2 { font-size:24px; }
}
@media screen and (max-width:380px) {
  .access-page { padding-inline:max(10px,env(safe-area-inset-left,0px)) max(10px,env(safe-area-inset-right,0px)); }
  .access-card { padding:24px 8px; border:0; }
  .access-card .captcha-panel { margin-inline:-8px; }
  .access-story { padding-bottom:24px; }
  .main,.topbar { padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
  .mobile-brand>span:last-child { font-size:16px; }
  .metric-top { flex-wrap:wrap; }
  .metric-foot { overflow-wrap:anywhere; }
}
@media screen and (max-width:767px) and (min-height:640px) {
  html[data-platform="ios"] dialog { inset:auto 0 0; margin:0; width:100%; max-width:100%; max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px)); border-radius:20px 20px 0 0; border-bottom:0; }
}
@media screen and (prefers-reduced-motion:reduce) {
  .mobile-nav a,.nav a,.btn { transition:none; }
}
@media print {
  .main { padding:0; max-width:none; }
  .topbar,.sidebar,.mobile-nav,dialog,dialog::backdrop { display:none!important; }
  .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media screen and (min-width:768px) and (max-width:1199px){.overview-grid>.panel:first-child .panel-head{flex-direction:column;align-items:flex-start;gap:12px}}
@media screen and (max-width:767px){.progress-panel{display:grid;grid-template-columns:minmax(0,1fr) 120px;padding:23px 20px}.progress-panel .panel-head{padding:0}.progress-body{grid-column:2;grid-row:1/5;padding:0}.progress-ring{width:114px;height:114px}.progress-number b{font-size:27px}.progress-number span{font-size:10px}.progress-total{grid-column:1;grid-row:2;text-align:left;margin:14px 0 0}.progress-total span{font-size:11px}.progress-stats{grid-column:1;grid-row:3;justify-content:flex-start;text-align:left;margin:15px 0;gap:12px}.progress-stats b{font-size:15px}.progress-stats p{font-size:11px}.progress-stats>div+div{padding-left:12px}.progress-panel>.btn{grid-column:1/-1;grid-row:5;margin:6px 0 0;width:100%}.legend{flex-direction:column;font-size:11px;gap:7px}.bottom-note{flex-direction:column;gap:7px}.access-nav{padding:2px;border:1px solid #45413e;background:#211e1c;border-radius:30px}.access-nav button{padding-inline:13px}.access-footer{flex-direction:column;gap:7px;text-align:center}}
@media screen and (max-width:380px){.progress-panel{grid-template-columns:minmax(0,1fr) 94px;padding:21px 17px}.progress-ring{width:92px;height:92px}.progress-number b{font-size:23px}.progress-number span{font-size:9px}}