/* Personal cloud tools. Native dialogs retain focus and escape semantics. */
.sidebar { overflow-y: auto; overscroll-behavior: contain; }
.sidebar > .nav-item, .sidebar-bottom, .sidebar-brand-row { flex-shrink: 0; }
.device-section { margin-top: 18px; padding-top: 16px; }
.device-list { max-height: min(18vh, 160px); }
.auth-product-links,
.product-section-heading,
.product-pagination,
.product-confirm-actions,
.product-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-product-links { margin-top: 16px; }
.nav-label,
.product-chip {
  display: inline-flex;
  border-radius: 20px;
  padding: 4px 9px;
  color: #08685f;
  background: #e6f4ef;
  font-size: 11px;
  font-weight: 700;
}
.nav-label { margin-left: auto; }
.composer-footnote .text-button { min-height: 30px; margin-left: 8px; }
.product-dialog {
  width: min(960px, calc(100vw - 48px));
  max-height: min(850px, calc(100dvh - 56px));
  padding: 0;
  border: 1px solid #e0e7e2;
  border-radius: 22px;
  background: #fcfdfa;
  color: #203e36;
  box-shadow: 0 24px 80px #123f3430;
  overflow: hidden;
}
.product-dialog[open] { display: flex; flex-direction: column; }
.product-dialog::backdrop,
.product-confirm::backdrop { background: #12372e66; backdrop-filter: blur(3px); }
.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 30px 18px;
}
.product-header h2 { margin: 8px 0 5px; font-size: 25px; letter-spacing: -.6px; }
.product-header p { margin: 0; font-size: 13px; color: #60746c; line-height: 1.7; }
.product-header .icon-button { flex-shrink: 0; }
.product-tabs {
  display: flex;
  gap: 6px;
  padding: 0 24px 14px;
  border-bottom: 1px solid #e4ebe4;
  overflow-x: auto;
  flex-shrink: 0;
}
.product-tabs button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #52695e;
  padding: 0 16px;
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.product-tabs button[aria-current="page"] { background: #e5f2ec; color: #086c61; font-weight: 700; }
.product-tabs button:hover { background: #edf4ee; }
.product-scroll { overflow-y: auto; min-height: 180px; padding: 24px 30px 30px; overscroll-behavior: contain; }
.product-panel { min-width: 0; }
.product-panel h3 { font-size: 16px; margin: 10px 0 16px; }
.product-panel .button { min-height: 44px; font-size: 13px; text-decoration: none; }
.product-description,
.product-fine-print { color: #5c7067; font-size: 13px; line-height: 1.8; }
.product-fine-print { font-size: 12px; }
.product-feedback {
  color: #075f53;
  background: #e6f4ec;
  border: 1px solid #badbcb;
  padding: 13px 16px;
  border-radius: 10px;
  line-height: 1.7;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 4px 12px #fcfdfa;
}
.product-loading { padding: 18px; color: #647970; font-size: 13px; }
.product-note { padding: 16px 18px; border: 1px solid #e1e9dc; border-radius: 12px; background: #f3f6ed; color: #4b6354; line-height: 1.8; font-size: 13px; }
.product-note p { margin: 5px 0 0; }
.product-section-heading { margin: 15px 0; }
.product-section-heading h3,
.product-section-heading p { margin: 0; }
.library-search-form { display: flex; gap: 10px; margin-bottom: 18px; }
.product-dialog input,
.product-dialog select,
.product-confirm input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cedbd2;
  border-radius: 9px;
  color: #233f34;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.product-dialog input::placeholder { color: #718277; }
.library-search-form input { flex: 1; }
.library-search-form select { width: 112px; flex-shrink: 0; }
.library-search-form .button { flex-shrink: 0; }
.library-list,
.orders-list { display: flex; flex-direction: column; gap: 10px; }
.product-item {
  padding: 17px 18px;
  border: 1px solid #e1e8df;
  border-radius: 12px;
  background: #fff;
  min-width: 0;
}
.product-item-title { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; margin: 0 0 6px; }
.product-item-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; margin: 0 0 10px; max-height: 220px; overflow-y: auto; }
.product-item-meta { font-size: 12px; color: #63786b; line-height: 1.8; overflow-wrap: anywhere; margin: 0; }
.product-item-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; gap: 6px; }
.product-item-actions .button { padding: 8px 13px; }
.product-item-actions a { color: #08756a; }
.product-item-actions .text-button { padding: 8px 10px; min-height: 44px; }
.product-empty { text-align: center; padding: 42px 20px; color: #62776a; line-height: 1.9; font-size: 14px; border: 1px dashed #d6e1d5; border-radius: 12px; }
.product-pagination { justify-content: center; margin-top: 22px; font-size: 12px; color: #62776a; }
.usage-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.usage-card { padding: 20px; border: 1px solid #dbe6db; border-radius: 14px; background: #fff; }
.usage-card h4 { margin: 0 0 12px; font-size: 13px; color: #526a5b; font-weight: 500; }
.usage-card strong { display: block; font-size: 22px; color: #214c3b; letter-spacing: -.5px; }
.usage-card p { color: #64776b; font-size: 12px; margin: 8px 0 0; }
.usage-card progress { display: block; width: 100%; height: 7px; margin-top: 16px; accent-color: #087f73; }
.subscription-summary { display: flex; gap: 15px; align-items: center; justify-content: space-between; padding: 18px 0; }
.subscription-summary strong { font-size: 16px; }
.subscription-summary p { color: #5b7064; font-size: 12px; margin: 6px 0 0; }
.plan-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 28px; }
.plan-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid #cadfd0; background: #f1f7f1; border-radius: 14px; }
.plan-card h4 { margin: 0; font-size: 17px; }
.plan-price { font-size: 28px; font-weight: 700; margin: 14px 0; color: #16573e; }
.plan-card ul { padding-left: 20px; margin: 0 0 18px; color: #4e6756; font-size: 13px; line-height: 2; }
.plan-card .button { margin-top: auto; }
.product-divider { margin: 30px 0; height: 1px; background: #e0e8dd; }
.product-form { margin: 20px 0; }
.product-form .field { margin-bottom: 16px; }
.product-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-danger { margin-top: 24px; padding: 18px; border: 1px solid #ebd3ca; border-radius: 12px; }
.account-danger summary { color: #a04432; cursor: pointer; font-size: 13px; min-height: 30px; }
.account-danger p { color: #6a584d; font-size: 13px; line-height: 1.8; }
.nearby-hero { text-align: center; max-width: 580px; margin: 3px auto 22px; }
.nearby-symbol { display: flex; width: 70px; height: 70px; align-items: center; justify-content: center; margin: 0 auto 18px; border-radius: 23px; color: #08766b; background: #e3f0e7; }
.nearby-symbol svg { width: 33px; height: 33px; }
.nearby-hero h3 { font-size: 23px; margin: 18px 0 12px; letter-spacing: -.5px; }
.nearby-hero p { font-size: 14px; color: #587061; line-height: 1.9; }
.nearby-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 25px 0; }
.nearby-steps > div { background: #f0f5ee; padding: 16px; border-radius: 12px; }
.nearby-steps span { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 50%; background: #d9eade; color: #186341; font-weight: 700; font-size: 12px; }
.nearby-steps p { font-size: 13px; line-height: 1.8; color: #526b59; margin: 10px 0 0; }
.nearby-install { margin: 24px 0; border-top: 1px solid #dde7da; padding-top: 18px; }
.nearby-install summary { font-size: 13px; font-weight: 650; cursor: pointer; min-height: 30px; }
.nearby-install p { font-size: 13px; color: #5a7061; line-height: 1.8; }
.product-confirm { width: min(460px, calc(100vw - 32px)); padding: 26px; border: 1px solid #dbe6d9; border-radius: 18px; color: #274234; background: #fcfdfa; }
.product-confirm h2 { font-size: 20px; margin-top: 0; }
.product-confirm p { font-size: 13px; line-height: 1.9; color: #5b6e61; overflow-wrap: anywhere; }
.product-confirm .field { margin: 17px 0; }
.product-confirm-actions { justify-content: flex-end; margin-top: 22px; }
.message-tools { display: flex; gap: 8px; margin-top: 5px; }
.message-tools button { border: 0; background: transparent; color: #5d7568; min-height: 32px; padding: 4px 6px; font-size: 11px; cursor: pointer; }
.message-tools button:hover { color: #087f73; }
.message-status { color: #61796b; font-size: 10px; margin-top: 5px; }
@media (max-width: 767px) {
  .product-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .product-header { padding: 20px 18px 14px; }
  .product-header h2 { font-size: 22px; }
  .product-tabs { padding: 0 12px 10px; gap: 3px; }
  .product-tabs button { padding: 0 12px; }
  .product-scroll { padding: 18px 16px 24px; }
  .usage-cards, .plan-list, .product-field-row, .nearby-steps { grid-template-columns: 1fr; }
  .usage-cards { gap: 10px; }
  .usage-card { padding: 16px; }
  .usage-card strong { font-size: 20px; }
  .library-search-form { flex-wrap: wrap; gap: 8px; }
  .library-search-form input { flex-basis: 100%; }
  .library-search-form select { flex: 1; }
  .library-search-form .button { flex: 1; }
  .product-item { padding: 15px; }
  .product-item-actions { justify-content: flex-start; }
  .subscription-summary { align-items: flex-start; flex-direction: column; }
  .product-section-heading { gap: 8px; }
  .nearby-steps > div { display: flex; gap: 12px; align-items: center; }
  .nearby-steps span { flex-shrink: 0; }
  .nearby-steps p { margin: 0; }
  .nearby-hero h3 { font-size: 20px; }
  .product-confirm { padding: 22px; }
  .message-tools button { min-height: 44px; }
  .composer-footnote .text-button { display: block; margin: 0 auto; }
}