.app-page { display: grid; gap: var(--ic-space-8); }
.app-page-head { display: flex; align-items: end; justify-content: space-between; gap: var(--ic-space-6); }
.app-eyebrow { margin: 0 0 var(--ic-space-2); color: var(--ic-blue-700); font-size: var(--ic-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .app-eyebrow { letter-spacing: 0; }
.app-page h1 { margin: 0; color: var(--ic-navy-950); font-size: var(--ic-title-lg); line-height: 1.08; }
.app-lead { max-width: 68ch; margin: var(--ic-space-3) 0 0; color: var(--ic-asphalt-650); font-size: var(--ic-text-md); line-height: 1.65; }
.app-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ic-space-3); }
.app-field { display: grid; gap: var(--ic-space-2); min-width: min(100%, 13rem); color: var(--ic-asphalt-650); font-size: var(--ic-text-xs); font-weight: 750; }
.app-field select, .app-field input { min-height: 46px; padding: 0 var(--ic-space-4); border: 1px solid var(--ic-concrete-300); border-radius: var(--ic-radius-sm); background: var(--ic-white); color: var(--ic-asphalt-950); }
.app-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: var(--ic-space-2); padding: 0 var(--ic-space-5); border: 1px solid var(--ic-concrete-300); border-radius: var(--ic-radius-sm); background: var(--ic-white); color: var(--ic-navy-950); text-decoration: none; font-weight: 750; cursor: pointer; }
.app-button.primary { border-color: var(--ic-blue-600); background: var(--ic-blue-600); color: var(--ic-white); }
.app-button.danger { border-color: var(--ic-danger-border); color: var(--ic-danger); background: var(--ic-danger-bg); }
.app-feedback { min-height: 1.25rem; color: var(--ic-asphalt-650); font-size: var(--ic-text-sm); }
.app-feedback.error { color: var(--ic-danger); }
.app-panel { padding: var(--ic-space-6); border: 1px solid var(--ic-concrete-200); border-radius: var(--ic-radius-lg); background: var(--ic-white); box-shadow: var(--ic-shadow-card); }
.app-panel-head { display: flex; justify-content: space-between; align-items: start; gap: var(--ic-space-4); margin-bottom: var(--ic-space-5); }
.app-panel h2 { margin: 0; color: var(--ic-navy-950); font-size: var(--ic-title-sm); }
.app-panel-help { margin: var(--ic-space-2) 0 0; color: var(--ic-asphalt-650); font-size: var(--ic-text-sm); line-height: 1.55; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ic-space-5); }
.app-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--ic-space-4); }
.app-service-card { display: flex; flex-direction: column; min-width: 0; padding: var(--ic-space-6); border: 1px solid var(--ic-concrete-200); border-radius: var(--ic-radius-lg); background: var(--ic-white); box-shadow: var(--ic-shadow-card); }
.app-service-card.selected { border-color: var(--ic-blue-500); box-shadow: var(--ic-focus-ring), var(--ic-shadow-card); }
.app-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--ic-space-3); }
.app-status { display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: .2rem .65rem; border-radius: var(--ic-radius-pill); background: var(--ic-success-bg); color: var(--ic-success); font-size: var(--ic-text-xs); font-weight: 800; }
.app-status::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: currentColor; }
.app-status.beta { background: var(--ic-warning-bg); color: var(--ic-warning); }
.app-service-card h2, .app-service-card h3 { margin: var(--ic-space-5) 0 var(--ic-space-3); color: var(--ic-navy-950); font-size: var(--ic-title-sm); }
.app-service-card p { margin: 0; color: var(--ic-asphalt-650); line-height: 1.6; }
.app-card-meta { display: flex; flex-wrap: wrap; gap: var(--ic-space-2); margin: var(--ic-space-5) 0; }
.app-chip { display: inline-flex; align-items: center; min-height: 30px; padding: .2rem .65rem; border-radius: var(--ic-radius-pill); background: var(--ic-cloud-100); color: var(--ic-asphalt-650); font-size: var(--ic-text-xs); font-weight: 700; }
.app-card-actions { display: flex; flex-wrap: wrap; gap: var(--ic-space-2); margin-top: auto; padding-top: var(--ic-space-5); }
.app-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ic-space-3); }
.app-kpi { min-width: 0; padding: var(--ic-space-5); border: 1px solid var(--ic-concrete-200); border-radius: var(--ic-radius-md); background: var(--ic-white); }
.app-kpi span { display: block; color: var(--ic-asphalt-550); font-size: var(--ic-text-xs); font-weight: 700; }
.app-kpi strong { display: block; margin-top: var(--ic-space-2); color: var(--ic-navy-950); font-size: 1.65rem; line-height: 1; }
.app-list { display: grid; gap: var(--ic-space-2); }
.app-list-row { display: grid; grid-template-columns: minmax(10rem, 1.5fr) minmax(8rem, 1fr) minmax(10rem, 1fr); gap: var(--ic-space-4); align-items: center; min-height: 58px; padding: var(--ic-space-3) var(--ic-space-4); border: 1px solid var(--ic-concrete-200); border-radius: var(--ic-radius-sm); }
.app-list-row strong { color: var(--ic-navy-950); }
.app-list-row small { color: var(--ic-asphalt-550); }
.app-list-row time { color: var(--ic-asphalt-650); font-size: var(--ic-text-sm); }
.app-level { justify-self: start; display: inline-flex; min-height: 28px; align-items: center; padding: .15rem .6rem; border-radius: var(--ic-radius-pill); background: var(--ic-success-bg); color: var(--ic-success); font-size: var(--ic-text-xs); font-weight: 800; }
.app-level.urgent, .app-level.emergency { background: var(--ic-danger-bg); color: var(--ic-danger); }
.app-level.cleanup { background: var(--ic-warning-bg); color: var(--ic-warning); }
.app-profile-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: var(--ic-space-5); }
.app-detail-list { margin: 0; }
.app-detail-row { display: grid; grid-template-columns: minmax(8rem, .6fr) minmax(0, 1.4fr); gap: var(--ic-space-4); padding: var(--ic-space-4) 0; border-bottom: 1px solid var(--ic-concrete-200); }
.app-detail-row:last-child { border-bottom: 0; }
.app-detail-row dt { color: var(--ic-asphalt-550); }
.app-detail-row dd { margin: 0; overflow-wrap: anywhere; color: var(--ic-navy-950); font-weight: 700; }
.app-form { display: grid; gap: var(--ic-space-4); }
.app-form .app-field { width: 100%; }
.app-form .app-field input { width: 100%; }
.app-muted { color: var(--ic-asphalt-550); font-size: var(--ic-text-sm); line-height: 1.6; }
.app-chart { min-height: 15rem; display: grid; align-items: end; grid-auto-flow: column; grid-auto-columns: minmax(2rem, 1fr); gap: var(--ic-space-2); padding-top: var(--ic-space-5); overflow-x: auto; }
.app-bar { min-width: 2rem; display: grid; align-content: end; justify-items: center; gap: var(--ic-space-2); color: var(--ic-asphalt-550); font-size: .68rem; }
.app-bar span { width: 100%; min-height: 3px; border-radius: .35rem .35rem 0 0; background: var(--ic-blue-600); }
[hidden] { display: none !important; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(18rem, .85fr) minmax(0, 1.15fr); background: var(--ic-white); }
.login-panel { display: grid; align-content: center; padding: clamp(1.5rem, 5vw, 5rem); }
.login-card { width: min(100%, 28rem); margin-inline: auto; }
.login-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--ic-space-4); margin-bottom: var(--ic-space-12); }
.login-brand .ic-logo-mark { background: var(--ic-navy-950); }
.login-brand-actions { display: flex; gap: var(--ic-space-2); }
.login-card h1 { margin: 0; color: var(--ic-navy-950); font-size: var(--ic-title-lg); }
.login-card > p { margin: var(--ic-space-3) 0 var(--ic-space-8); color: var(--ic-asphalt-650); line-height: 1.6; }
.login-separator { display: flex; align-items: center; gap: var(--ic-space-3); margin: var(--ic-space-5) 0; color: var(--ic-asphalt-450); font-size: var(--ic-text-xs); }
.login-separator::before, .login-separator::after { content: ""; flex: 1; height: 1px; background: var(--ic-concrete-200); }
.login-google { width: 100%; }
.login-aside { display: grid; align-content: end; min-height: 100vh; padding: clamp(2rem, 6vw, 6rem); background: linear-gradient(145deg, var(--ic-navy-950), var(--ic-blue-800)); color: var(--ic-white); }
.login-aside p { max-width: 30ch; margin: 0; color: rgb(255 255 255 / 72%); font-size: var(--ic-title-md); line-height: 1.35; }
@media (max-width: 799px) { .login-page { grid-template-columns: 1fr; } .login-aside { display: none; } .login-panel { min-height: 100vh; } }
@media (max-width: 899px) {
  .app-grid, .app-profile-grid { grid-template-columns: 1fr; }
  .app-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .app-page { gap: var(--ic-space-6); }
  .app-page-head { display: grid; align-items: start; }
  .app-toolbar, .app-field, .app-toolbar .app-button { width: 100%; }
  .app-panel, .app-service-card { padding: var(--ic-space-4); }
  .app-kpis { grid-template-columns: 1fr 1fr; }
  .app-list-row { grid-template-columns: 1fr; gap: var(--ic-space-2); }
  .app-detail-row { grid-template-columns: 1fr; gap: var(--ic-space-2); }
}
@media (max-width: 359px) { .app-kpis { grid-template-columns: 1fr; } }