/* Shared responsive layer. Loaded after each page's original styles. */
html { -webkit-text-size-adjust:100%; }
body { margin:0; }
.topbar { min-width:0; }
.app { min-width:0; max-width:100%; box-sizing:border-box; }
body:has(.topbar) .app { margin-top:68px; }
body:has(.admin-control) .app { margin-top:100px; }
body:has(.main-menu) .app { width:calc(100% - 300px); }
.admin-control { width:100%; box-sizing:border-box; }
.app > section { min-width:0; }
.app:has(> .text) { overflow-wrap:anywhere; }
.selector { flex-wrap:wrap; }
.project-info { min-width:0; overflow-wrap:anywhere; }
.statistic .graphs { margin-top:8px; }
.usage-chart-container { height:236px; }
.responsive-table { max-width:100%; overflow:auto; overscroll-behavior-x:contain; }
.responsive-table table { min-width:600px; }
.responsive-menu-toggle { display:none; }
.topbar .profile { overflow:visible; }
.topbar .profile > img { border-radius:50%; }
.popup-page { box-sizing:border-box; padding:16px; height:100vh; height:100dvh; overflow-y:auto; }
.popup-block { box-sizing:border-box; max-width:100%; max-height:calc(100dvh - 32px); overflow-y:auto; margin:0; flex-shrink:0; }
.popup-block.cardList { min-width:0; }
.popup-forms { box-sizing:border-box; width:280px; min-width:0; max-width:100%; }
.popup-buttons { flex-wrap:wrap; justify-content:center; }
.popup-description { overflow-wrap:anywhere; }
.notifications { max-width:calc(100vw - 20px); }
.notification { box-sizing:border-box; max-width:100%; }
@media (max-width:1100px) {
 .app:has(> .title), .app:has(> .create) { padding:40px 20px; box-sizing:border-box; }
 .app > .projects, .app > .title, .app > .create { width:100%; max-width:949px; box-sizing:border-box; }
 .create { position:relative; max-height:none; }
 .create .title { width:auto; }
 .projects { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .back-btn { position:static; margin-bottom:16px; flex-shrink:0; }
 .app:has(.profileDetails) { padding:24px; box-sizing:border-box; }
 .app:has(.profileDetails) > section { width:100%; max-width:860px; box-sizing:border-box; }
 .formInputs, .billingDetails { flex-wrap:wrap; gap:24px; }
 .main h1 { width:auto; max-width:880px; font-size:clamp(32px,5vw,60px); padding:0 20px; }
 .main p { width:auto; max-width:600px; padding:0 20px; }
 .tariff-list { flex-wrap:wrap; }
 .faq-item { box-sizing:border-box; width:100%; max-width:800px; }
 footer { flex-wrap:wrap; gap:32px; padding:32px 24px; }
 footer > div { max-width:100%; }
}
@media (max-width:960px) {
 .topbar { padding:0 16px; gap:12px; }
 .left-bar { font-size:22px; gap:12px; min-width:0; }
 .right-bar { gap:12px; }
 .main-menu { position:relative; top:auto; width:100%; height:auto; max-height:50dvh; overflow:auto; display:none; margin-top:0!important; }
 .main-menu.responsive-open { display:block; }
 .main-menu li:first-child { position:static; padding:12px 20px; }
 .main-menu ul { margin:0; padding:8px 0; }
 body:has(.main-menu) .app { margin-left:0; width:100%; box-sizing:border-box; }
 body:has(.main-menu) .main-menu { margin-top:68px!important; }
 body:has(.main-menu) .main-menu.responsive-open + .app { margin-top:0; }
 body:has(.admin-control) .main-menu { margin-top:100px!important; }
 .responsive-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border:1px solid #dce2e8; background:white; border-radius:8px; font-size:24px; cursor:pointer; }
 .formInputs { flex-wrap:wrap; }
 .profileDetails, .profileButtons, .projectDetails, .projectDetalis, .paymentActions { max-width:100%; box-sizing:border-box; }
 .center-bar { gap:16px; }
 .topbar:has(.center-bar) { height:auto; min-height:68px; flex-wrap:wrap; padding:12px 16px; }
 body:has(.center-bar) .app { margin-top:124px; }
 .topbar .center-bar { order:3; width:100%; justify-content:center; flex-wrap:wrap; }
 .topbar .right-bar a { padding:8px 10px; }
 .cardBox { grid-template-columns:repeat(2,minmax(0,1fr))!important; width:auto!important; }
}
@media (max-width:600px) {
 .app { max-height:none; }
 .login, .register, .error { box-sizing:border-box; width:calc(100% - 32px); max-width:380px; top:32px; max-height:none; padding-bottom:24px; }
 .app:has(> .text) { padding:24px 16px; }
 .app > .text { margin:0; }
 .app:has(> .text) h1 { font-size:30px; padding:16px 0; }
 .app:has(> .text) h3 { padding:0; }
 .app:has(> .text) ul { padding-left:24px; }
 .authButtons { gap:12px; flex-wrap:wrap; }
 .authButton { box-sizing:border-box; flex:1 1 130px; width:auto; }
 input, select, textarea { max-width:100%; box-sizing:border-box; font-size:16px; }
 .field { min-width:0; }
 .field input, .field textarea, .field select { width:100%; }
 .title { font-size:26px; flex-wrap:wrap; gap:16px; }
 .projects { grid-template-columns:minmax(0,1fr); }
 .project-block { min-width:0; }
 .project-photo { flex-shrink:0; }
 .project-name { overflow-wrap:anywhere; }
 .formInputs { flex-direction:column; gap:20px; margin:24px 16px; }
 .app:has(.profileDetails) .formInputs { margin:24px 0; }
 .projectLogo, .projectImage, .profileLogo { max-width:100%; }
 .logoPreview { max-width:100%; }
 .formButtons, .logoBackground, .logoIcon { flex-wrap:wrap; }
 .formButtons { gap:12px; }
 .filter { position:static!important; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
 .projectDetails, .projectDetalis, .profileDetails, .profileButtons, .paymentActions { width:100%; }
 .notif-header { flex-wrap:wrap; gap:12px; }
 .notif-header > div { display:flex; flex-wrap:wrap; gap:8px; }
 .tg-button { margin-left:0; }
 .balance, div#bankCardsBlock, .paymentMethods, .paymentMethots { box-sizing:border-box; width:100%; max-width:100%; }
 .billingDetails { flex-direction:column; gap:20px; }
 .statistic .tariffs { box-sizing:border-box; width:calc(100% - 32px); margin:16px; }
 .statistic > div:first-child { width:100%; }
 .statistic > div:last-child { padding:0 16px; }
 .statistic .count-stats h3 { flex-wrap:wrap; gap:8px; }
 .popup-block { padding:32px 16px 20px; border-radius:16px; }
 .popup-forms { margin:16px 0; width:100%; }
 .popup-title { font-size:24px; }
 .popup-btn:only-child { width:auto; max-width:100%; }
 .fieldSelect .options { box-sizing:border-box; width:100%; max-width:100%; }
 .main { min-height:440px; height:auto; gap:32px; padding:48px 0; }
 .main p { font-size:18px; }
 .tariffs, .faq { padding:24px 16px; }
 .faq-list { padding:0; }
 .faq .question { padding:16px 40px 16px 16px; font-size:17px; }
 .tariff-item { box-sizing:border-box; width:100%; max-width:380px; }
 .topbar:has(.center-bar) .left-bar { font-size:18px; }
 .topbar:has(.center-bar) .right-bar { font-size:12px; gap:6px; }
 .cardBox { grid-template-columns:minmax(0,1fr)!important; padding:16px!important; }
 .admin-control { box-sizing:border-box; padding:0 12px; font-size:12px; }
 .login .name, .register .name { position:static!important; width:auto!important; font-size:26px!important; margin-bottom:24px; }
}