/* Page layout only. All component appearances come from the unmodified GlassKit library. */
html { background-color: #ffffff; height: 100%; overflow: hidden; overscroll-behavior: none; }
body.glass-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  margin: 0;
  height: 100%;
  height: 100dvh;
  min-height: 0;
  background-color: #ffffff;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }
.app-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  height: 100%;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  scroll-padding-block: 24px;
}
body.has-cabinet .app-shell { padding-bottom: calc(70px + max(6px, env(safe-area-inset-bottom, 0px))); }
.app-header { margin-bottom: 32px; }
.app-avatar { margin-inline: auto; }
h1, h2, p { margin: 0; }
h2 { overflow-wrap: anywhere; }
p { margin-top: 8px; }

main { min-width: 0; }
@media (min-width: 768px) {
  .app-shell { padding-top: 40px; }
  .app-header { margin-bottom: 40px; }
}

.auth-navigation { display: flex; gap: 8px; }
.auth-navigation > button { flex: 1; min-width: 0; }

/* Prevent horizontal page panning while retaining pinch zoom and real scrolling. */
.app-shell { touch-action: pan-y pinch-zoom; }
.app-shell[data-scrollable="false"], .glass-tab-bar-dock { touch-action: pinch-zoom; }

/* Auth is a compact screen; reserve scrolling for genuinely short viewports. */
body:not(.has-cabinet) .app-header { margin-bottom: 20px; }
#auth { gap: 16px; }
#auth > .glass-card { padding: 20px; }
#password-login-form { gap: 12px; }
#auth .glass-btn--tertiary { min-height: 44px; padding-block: 10px; }
#auth .glass-input { font-size: 16px; }
@media (max-height: 700px) {
  body:not(.has-cabinet) .app-shell { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  body:not(.has-cabinet) .app-header { margin-bottom: 12px; }
  #auth { gap: 12px; }
}

/* The browser owns document scrolling so its toolbar can collapse naturally.
   Installed PWA keeps its fixed frame and inner scroll container. */
@media (display-mode: browser) {
  html { height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: auto; }
  body.glass-bg { position: static; height: auto; min-height: 100svh; overflow: visible; overscroll-behavior-y: auto; }
  .app-shell { height: auto; min-height: 100svh; overflow: visible; overscroll-behavior-y: auto; }
  .app-shell[data-scrollable="false"] { touch-action: pan-y pinch-zoom; }
  body.keyboard-open > .glass-tab-bar-dock { display: none; }
  body.has-cabinet.keyboard-open .app-shell { padding-bottom: 24px; }
}

/* One opaque canvas, including the safe areas around browser/system chrome. */
body.glass-bg { background: #ffffff; }
body.glass-bg::before, body.glass-bg::after { display: none; }
.orders-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.orders-heading h1 { min-width:0; }
.orders-heading button { width:auto; }
.order-caption { display:flex;justify-content:space-between;gap:12px;font-size:14px;flex-wrap:wrap; }
.order-money { display:grid;gap:10px;margin:0; }
.order-money > div { display:flex;justify-content:space-between;gap:16px; }
.order-money dd { margin:0;font-weight:600;white-space:nowrap; }
.order-description { white-space:pre-wrap;overflow-wrap:anywhere; }
.order-file { overflow-wrap:anywhere; }
#orders details summary { box-sizing:border-box;cursor:pointer;min-height:44px;padding-block:10px; }
#orders details > .gl-stack { margin-top:12px; }
#orders .order-description { margin:8px 0 0; }
#orders h2 { font-size:22px; }

/* Saved profile: compact details, explicit editing. */
.profile-card { position: relative; }
.profile-summary { text-align: center; display: grid; gap: 6px; }
.profile-summary h2 { font-size: 24px; line-height: 1.25; }
.profile-summary p, .profile-email { overflow-wrap: anywhere; }
.profile-edit { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f5f5f5; color: #5e6b73; cursor: pointer; }
.profile-edit:hover { background: #ededed; }
.profile-edit:focus-visible { outline: 2px solid #3485ff; outline-offset: 3px; }

/* Quiet typography and a compact, app-like header. */
.app-header { display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:30px; }
.brand-wordmark { font-family:ui-rounded,'Avenir Next','Trebuchet MS',sans-serif;font-size:29px;font-weight:800;letter-spacing:-1.6px;line-height:1.1; }
.brand-wordmark span { display:inline-block;color:#347dff;font-size:22px;margin-left:3px;vertical-align:top; }
.header-exit { display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#f5f6f8;color:#78828b;cursor:pointer;font-size:28px; }
.header-exit:focus-visible { outline:2px solid #347dff;outline-offset:3px; }
#profile > h1, .orders-heading h1 { text-align:left;font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1.2;text-shadow:none; }
#profile > h1 { padding-left:2px; }
#profile { gap:22px; }
#profile .glass-card { border-radius:26px; }
#profile .glass-card > h2 { font-size:23px;letter-spacing:-.5px; }
.home-greeting { padding:12px 2px 8px; }
.home-greeting > p { margin:0 0 10px;color:#84909a;font-size:14px; }
.home-greeting h1 { text-align:left;font-size:clamp(32px,9vw,42px);line-height:1.12;letter-spacing:-1.5px;text-shadow:none;overflow-wrap:anywhere; }
.greeting-dot { color:#347dff; }
.home-orders { padding:22px;border:1px solid #e9edf1;border-radius:26px;background:#fafbfd; }
.home-orders-heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.home-orders-heading h2 { font-size:18px;letter-spacing:-.4px; }
#active-orders-count { display:grid;place-items:center;min-width:30px;height:30px;border-radius:10px;background:#eaf1ff;color:#347dff;font-weight:700; }
#home-orders-status { font-size:14px;color:#78828b;line-height:1.5; }
.home-order { display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-top:18px;margin-top:18px;border-top:1px solid #e6eaf0; }
.home-order > div { flex:1;min-width:130px; }
.home-order-number { color:#87929b;font-size:12px; }
.home-order h3 { margin:5px 0 0;font-size:17px;overflow-wrap:anywhere; }
.home-order > p { width:100%;margin:0;font-size:13px;color:#78828b; }
.order-status-pill { padding:7px 10px;border-radius:10px;background:#edf2fa;color:#406388;font-size:12px; }
.file-dialog { box-sizing:border-box;width:calc(100% - 32px);max-width:420px;padding:24px;border:1px solid #e9edf1;border-radius:26px;background:white;color:#1c2d38; }
.file-dialog::backdrop { background:rgb(20 30 40 / 35%); }
.file-dialog form { display:flex;justify-content:flex-end;margin:-8px -8px 4px; }
.file-dialog p { overflow-wrap:anywhere;line-height:1.5;margin-bottom:16px; }
.file-dialog h2 { font-size:24px; }

.order-file { display: flex; flex-direction: column; gap: 14px; }
.order-file > strong { display: block; line-height: 1.45; }
.order-file > p { margin: 0; }

.install-card { padding:22px;border:1px solid #e5ebf4;border-radius:26px;background:#f8faff;display:grid;gap:14px; }
.install-card-heading { display:flex;align-items:center;gap:12px; }
.install-card-heading h2 { font-size:21px;letter-spacing:-.5px; }
.install-icon { display:grid;place-items:center;width:40px;height:44px;flex-shrink:0;color:#347dff; }
.install-icon svg { width:26px;height:30px; }
.install-card p { margin:0;color:#74808c;font-size:14px;line-height:1.5; }
.install-card .glass-btn { font-size:15px;min-height:46px;padding:12px 16px; }
.install-dialog { box-sizing:border-box;width:calc(100% - 32px);max-width:420px;max-height:calc(100dvh - 48px);overflow:auto;padding:24px;border:1px solid #e9edf1;border-radius:26px;background:#fff;color:#1c2d38; }
.install-dialog::backdrop { background:rgb(20 30 40 / 35%); }
.install-dialog > form:first-child { display:flex;justify-content:flex-end;margin:-10px -10px 4px; }
.install-dialog h2 { font-size:24px;letter-spacing:-.6px; }
.install-dialog ol { padding-left:22px;margin:20px 0; }
.install-dialog li { padding-left:4px;margin:14px 0;line-height:1.5; }
.install-dialog p { font-size:14px;color:#74808c;line-height:1.5;margin-bottom:18px; }
@media (display-mode:standalone) { #install-card { display:none; } }