/* Final visual and responsive layer. Keep this stylesheet last. */
:root { --ui-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html { font-size: clamp(15px, .22vw + 14px, 17px); }
body { font-family: var(--ui-font); line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button,input,select,textarea { font-family: inherit; }
button { font-size: .875rem; font-weight: 650; letter-spacing: -.01em; }
h1,h2,h3,.hero h1,.page-title h1,.section-head h2,.dialog-head h2,.card h3,.detail-card h1,.issue-card h3,.settings-card h2,.auth-intro h1 {
  font-family: var(--ui-font); font-weight: 760; letter-spacing: -.035em; line-height: 1.08;
}
.hero h1 { font-size: clamp(2.65rem,5.5vw,4.7rem); }
.page-title h1 { font-size: clamp(2.25rem,4vw,3.35rem); }
.section-head h2,.dialog-head h2 { font-size: clamp(1.55rem,2.5vw,2rem); }
.card h3,.issue-card h3 { font-size: 1.3rem; }
.primary { border-radius: 11px; }

@media (max-width:900px) {
  html { font-size: 16px; }
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  main { padding: 16px 12px 34px; }
  .topbar { display: flex !important; align-items: center; width: 100%; height: 60px; padding: 0 10px !important; gap: 8px; }
  .brand { display: flex !important; flex: 0 0 38px; width: 38px !important; }
  .brand > span { width: 38px; height: 38px; }
  .account-button:not([hidden]) {
    display: flex !important; align-items: center; justify-content: flex-end; flex: 0 1 auto;
    width: auto !important; max-width: calc(100vw - 66px) !important; height: 42px !important; min-height: 42px !important;
    margin: 0 0 0 auto !important; padding: 7px 11px !important; border: 1px solid #dbe4f4 !important;
    border-radius: 12px; background: #f3f6fc !important; font-size: .875rem !important; position: relative; z-index: 302;
  }
  .account-button::before { content: '●'; margin-right: 7px; color: #356ed8; font-size: .68rem; }
  .account-button #accountName { display: block !important; max-width: min(55vw,220px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-menu { z-index: 301; top: 56px; right: 8px; left: 8px; width: auto; max-height: calc(100dvh - 135px); overflow-y: auto; border-radius: 14px; }
  .account-menu button { min-height: 46px; padding: 11px 13px; font-size: .9rem; }

  #mainNav:not([hidden]),.touch-device #mainNav:not([hidden]) {
    display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
    padding: 5px 5px env(safe-area-inset-bottom) !important; gap: 3px !important;
  }
  #mainNav button,.touch-device #mainNav button {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    width: 100% !important; height: 58px !important; min-width: 0 !important; min-height: 0 !important;
    padding: 6px 2px 9px !important; border-radius: 10px !important;
    overflow: hidden !important; white-space: normal !important; overflow-wrap: anywhere;
    font-size: clamp(.57rem,2.5vw,.68rem) !important; font-weight: 700; line-height: 1.05 !important; text-align: center;
  }
  #mainNav button::before { content: attr(data-icon); display: block; font-size: 1.12rem; font-weight: 750; line-height: 1; }
  #mainNav button::after { content: none !important; }
  #mainNav button.active { transform: none !important; color: #245fc7; background: #eaf1ff; }

  .hero { min-height: 330px; padding: 27px 21px 135px; }
  .hero h1 { max-width: 330px; font-size: clamp(2.35rem,11vw,3.25rem); }
  .hero p:not(.eyebrow) { font-size: .9rem; line-height: 1.55; }
  .eyebrow { font-size: .62rem; letter-spacing: .14em; }
  .scan-button { width: 108px !important; height: 108px !important; min-height: 108px !important; font-size: .78rem; }

  .page-title,.section-head { flex-wrap: wrap; align-items: center; margin: 18px 1px 14px; }
  .page-title h1 { margin-top: 4px; font-size: clamp(2rem,9vw,2.6rem); }
  .page-title > .primary,.page-title .chat-head-actions .primary {
    width: auto !important; min-width: 0 !important; min-height: 42px; padding: 9px 12px !important;
    font-size: .78rem !important; line-height: 1.15;
  }
  .page-title .primary::after { content: none !important; }
  .chat-head-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .chat-head-actions button { min-height: 42px; padding: 8px 10px; font-size: .75rem; }

  button,input,select,textarea { min-height: 44px; }
  input,select,textarea { font-size: 16px !important; line-height: 1.3; }
  .toolbar { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .toolbar .search { grid-column: 1/-1; height: 48px; }
  .toolbar button,.toolbar select { height: 44px; min-height: 44px; font-size: .78rem !important; }
  .qr-search { width: 100%; max-width: none; height: 48px; }

  .stats span { font-size: clamp(.58rem,2.35vw,.68rem); }
  .card { padding: 16px; border-radius: 15px; }
  .card h3 { margin: 16px 0 6px; font-size: 1.25rem; }
  .mini-qr { width: 34px !important; height: 34px !important; min-height: 34px !important; }
  .detail-card h1 { font-size: clamp(1.85rem,8vw,2.35rem); }
  .detail-top > div:last-child,.actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .actions button,.detail-top > div:last-child button { width: 100%; min-width: 0; min-height: 44px; padding: 9px 7px; font-size: .8rem; white-space: normal; }
  .primary:not(.scan-button),button:not(.icon):not(.mini-qr):not(.password-eye) { overflow: hidden; text-overflow: ellipsis; }

  .chat-list-item { min-height: 62px; }
  .chat-compose { grid-template-columns: 44px minmax(0,1fr); }
  .chat-compose input[name="text"] { grid-column: 1/-1; }
  .chat-compose .primary { grid-column: 2; min-height: 44px; }
  .message-actions button { min-height: 34px; font-size: .7rem; }
  .issue-card h3 { font-size: 1.2rem; }
  .guide-grid p,.guide-roles p { font-size: .78rem; }

  dialog { padding: 17px; border-radius: 17px; }
  .dialog-head { top: -17px; margin: -17px -17px 15px; padding: 17px 17px 10px; }
  .dialog-head h2 { font-size: 1.65rem; }
  .dialog-head .icon { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
}

@media (max-width:390px) {
  main { padding-right: 9px; padding-left: 9px; }
  .page-title { align-items: flex-start; }
  .page-title h1 { font-size: 1.95rem; }
  .page-title > .primary { max-width: 132px; }
  .chat-head-actions { width: 100%; margin-left: 0; justify-content: stretch; }
  .chat-head-actions button { flex: 1; }
  .stats article,.stats article:last-child { padding: 13px 3px; }
  .stats b { font-size: 1.45rem; }
  .detail-top > div:last-child,.actions { grid-template-columns: 1fr; }
  .user-actions { grid-template-columns: 1fr !important; }
}

/* Phones: favor predictable one-column controls over compressed rows. */
@media (max-width:600px) {
  main { padding-inline: 10px; }
  .topbar { min-width: 0; }
  .account-button:not([hidden]) { min-width: 0 !important; max-width: calc(100vw - 64px) !important; }
  .account-button #accountName { max-width: calc(100vw - 125px); }

  .page-title { display: grid !important; grid-template-columns: minmax(0,1fr); width: 100%; gap: 10px; }
  .page-title > div { width: 100%; min-width: 0; }
  .page-title > .primary { width: 100% !important; max-width: none !important; }
  .page-title .chat-head-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; margin: 0; }
  .page-title .chat-head-actions button { width: 100%; min-width: 0; white-space: normal; }
  .page-title .chat-head-actions button:only-child { grid-column: 1/-1; }

  .toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  .toolbar > *,.toolbar .search,.toolbar select,.toolbar button { grid-column: 1 !important; width: 100% !important; }
  .section-head { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .section-head > div { min-width: 0; }

  .detail-top > div:last-child,.actions,.user-actions,.option-form { grid-template-columns: minmax(0,1fr) !important; }
  .detail-top > div:last-child button,.actions button,.user-actions button,.option-form button { width: 100% !important; max-width: none; }
  .issue-card { grid-template-columns: minmax(0,1fr) !important; }
  .issue-card select { width: 100%; }

  .chat-compose { grid-template-columns: 44px minmax(0,1fr) !important; }
  .chat-compose input[name="text"] { grid-column: 1/-1 !important; }
  .chat-compose .attach-button { grid-column: 1; }
  .chat-compose .primary { grid-column: 2 !important; width: 100%; }
  .message-actions { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .message-actions button { width: 100%; min-width: 0; }

  dialog .actions { display: grid !important; grid-template-columns: minmax(0,1fr) !important; }
  dialog .actions button { margin: 0; }
  .auth-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .auth-tabs button { min-width: 0; padding-inline: 5px; }
}

@media (max-width:340px) {
  #mainNav button,.touch-device #mainNav button { font-size: .53rem !important; padding-inline: 1px !important; }
  #mainNav button::before { font-size: 1rem; }
  .account-button #accountName { max-width: 62vw; }
}

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

/* Mobile fallback for browsers/PWA shells reporting a desktop-like viewport. */
.touch-device body { padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
.touch-device .topbar { display: flex !important; align-items: center !important; height: 60px !important; padding: 0 10px !important; gap: 8px !important; }
.touch-device .brand { flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; }
.touch-device .brand > div { display: none !important; }
.touch-device .account-button:not([hidden]) {
  display: flex !important; align-items: center !important; flex: 0 1 auto !important;
  width: auto !important; min-width: 0 !important; max-width: calc(100vw - 66px) !important;
  height: 42px !important; min-height: 42px !important; margin: 0 0 0 auto !important;
  padding: 7px 11px !important; position: relative !important; z-index: 302 !important;
}
.touch-device .account-button #accountName { max-width: calc(100vw - 130px) !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.touch-device #mainNav:not([hidden]) {
  display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important;
  position: fixed !important; z-index: 300 !important; top: auto !important; right: 0 !important;
  bottom: 0 !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important;
  height: calc(70px + env(safe-area-inset-bottom)) !important; margin: 0 !important;
  padding: 5px 5px env(safe-area-inset-bottom) !important; gap: 3px !important;
  background: #fffffff2 !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  box-shadow: 0 -8px 25px #152b6414 !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.touch-device #mainNav button {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important; height: 58px !important; min-height: 0 !important;
  margin: 0 !important; padding: 5px 1px 8px !important; overflow: hidden !important;
  font-size: clamp(.55rem,2.5vw,.68rem) !important; line-height: 1.05 !important; white-space: normal !important;
}

@media (hover:none) and (pointer:coarse) {
  #mainNav:not([hidden]) { position: fixed !important; inset: auto 0 0 !important; }
}