.account-saas-page { background:radial-gradient(circle at 8% 0%,#e8efdf 0,transparent 25rem),linear-gradient(180deg,#fbfaf5,#f3eee5); }
.account-google-shell { min-height:100svh; padding:2rem 1rem; }.account-auth-card { border-radius:1.3rem; }.account-auth-brand { justify-content:flex-start!important; margin-bottom:1.5rem!important; }.auth-visual { position:relative; width:8rem; height:3.2rem; display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.5rem auto 1.5rem; color:#718a5e; font-family:var(--font-names); font-size:1.9rem; }.auth-visual i { width:2.8rem; height:1px; background:#d1b477; }.auth-visual b { color:#be9855; font-family:var(--font-body); font-size:1.1rem; font-weight:400; }.account-google-shell h1 { text-align:center; }.account-google-shell .account-lead { max-width:31rem; margin-inline:auto; text-align:center; }.account-google-button { width:100%; margin-top:.6rem; }.account-auth-status { text-align:center; }.account-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem 1.25rem; margin:1.15rem 0 0; color:#88917f; font-family:var(--font-heading); font-size:.65rem; }.account-trust span::first-letter { color:#729362; }.account-contact-card { text-align:start; }.contact-svg { display:grid; place-items:center; width:2.3rem; height:2.3rem; flex:0 0 2.3rem; border-radius:50%; color:#fff; background:#25d366; }.contact-svg svg,.whatsapp-svg svg { width:1.35rem; height:1.35rem; fill:currentColor; }.config-note { color:#a36b5d; font-size:.68rem; }
.account-saas-shell { padding-top:clamp(1.4rem,4vw,3.5rem); }.account-dashboard-brand { margin-bottom:1.2rem; }.account-saas-header { align-items:flex-end; }.account-saas-header h1 { margin-top:.3rem; }.user-chip { display:flex; align-items:center; gap:.4rem; padding:.35rem .55rem .35rem .75rem; border:1px solid rgba(62,76,23,.12); border-radius:999px; color:#73806f; background:rgba(255,255,255,.65); font-family:var(--font-heading); font-size:.65rem; }.user-chip img,.user-chip b { display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; object-fit:cover; color:#fff; background:#859b72; font-size:.7rem; }.account-saas-header .account-header-actions { padding-top:0; }.saas-share-card { margin-bottom:1.1rem; }.saas-share-card[hidden],.activation-panel[hidden] { display:none; }.share-kicker { display:flex; align-items:center; gap:.4rem; }.live-dot { width:.45rem; height:.45rem; border-radius:50%; background:#70a45d; box-shadow:0 0 0 .25rem rgba(112,164,93,.14); }.share-actions { display:flex; align-items:center; gap:1rem; }.share-actions .primary-button { min-height:2.9rem; padding-inline:1.2rem; }.activation-panel { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(23rem,.85fr); align-items:center; gap:1.5rem; margin-bottom:1.1rem; padding:clamp(1.1rem,3vw,1.65rem); border:1px solid rgba(160,128,70,.2); border-radius:1rem; background:linear-gradient(115deg,#fffdf6,#f1eadb); box-shadow:0 .75rem 1.8rem rgba(95,80,43,.08); }.activation-copy { display:flex; align-items:flex-start; gap:.8rem; }.activation-icon { display:grid; place-items:center; width:2.6rem; height:2.6rem; flex:0 0 2.6rem; border-radius:.7rem; color:#fff; background:#c19b59; box-shadow:0 .4rem .8rem rgba(193,155,89,.2); }.activation-copy h2 { margin:.25rem 0 .35rem; color:#6d552f; font-family:var(--font-heading); font-size:1rem; }.activation-copy p { max-width:37rem; margin:0; color:#988d79; font-size:.86rem; line-height:1.8; }.activation-actions { display:grid; gap:.7rem; }.activation-actions form { display:grid; gap:.45rem; }.activation-actions label { color:#796543; font-family:var(--font-heading); font-size:.72rem; font-weight:700; }.key-input-row { display:grid; grid-template-columns:1fr auto; gap:.55rem; }.key-input-row input { min-height:3rem; direction:ltr; text-align:left; font-family:Arial,sans-serif; font-size:.8rem; }.key-input-row .primary-button { min-height:3rem; padding-inline:1rem; }.whatsapp-real { min-height:2.9rem; width:100%; background:#1a9950; }.whatsapp-real .whatsapp-svg { display:grid; place-items:center; }.whatsapp-real .whatsapp-svg svg { width:1.25rem; height:1.25rem; }.saas-layout { align-items:start; }.saas-editor-panel { padding:clamp(1rem,3vw,1.7rem); }.saas-editor-panel h2 { margin:.2rem 0 0; color:#4e623f; font-family:var(--font-heading); font-size:1.3rem; }.editor-intro { margin:.2rem 0 1.3rem; color:#939989; font-size:.84rem; }.editor-group { display:grid; gap:.65rem; padding:1rem 0; border-top:1px solid rgba(62,76,23,.1); }.editor-group:first-of-type { padding-top:0; border-top:0; }.editor-group h3 { margin:0 0 .15rem; color:#6e7e62; font-family:var(--font-heading); font-size:.85rem; }.editor-group select { width:100%; min-height:3.45rem; padding:0 1rem; border:1px solid rgba(62,76,23,.23); border-radius:.55rem; color:var(--ink); background:rgba(255,255,255,.72); font:inherit; }.guidance-panel ol { list-style:none; padding:0; }.guidance-panel li { position:relative; padding:.65rem .9rem .65rem 2rem; border-radius:.5rem; color:#9a9f92; font-size:.84rem; }.guidance-panel li::before { content:""; position:absolute; right:auto; left:.2rem; top:50%; width:.9rem; height:.9rem; transform:translateY(-50%); border:1px solid #c9cbbf; border-radius:50%; }.guidance-panel li.done { color:#5e7952; background:#f1f5ec; }.guidance-panel li.done::before { content:"✓"; display:grid; place-items:center; border-color:#81a36d; color:#fff; background:#81a36d; font-size:.6rem; }.guidance-note { margin:1rem 0 0; padding-top:.8rem; border-top:1px solid rgba(62,76,23,.1); color:#a19e91; font-size:.74rem; line-height:1.7; }
@media (max-width:900px) { .activation-panel { grid-template-columns:1fr; }.account-saas-header { align-items:flex-start; }.account-saas-header .account-header-actions { justify-content:flex-start; } }
@media (max-width:560px) { .share-actions { width:100%; flex-direction:column; align-items:stretch; gap:.55rem; }.share-actions .primary-button { width:100%; }.activation-panel { padding:1rem; }.key-input-row { grid-template-columns:1fr; }.key-input-row .primary-button { width:100%; }.account-saas-header .account-header-actions { flex-direction:column; align-items:flex-start; }.user-chip { max-width:100%; overflow:hidden; }.user-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }

/* Premium account experience: mobile-first layout */
.account-saas-page {
  --account-forest: #334f3d;
  --account-forest-dark: #22382d;
  --account-sage: #e8f0e5;
  --account-cream: #fcfaf5;
  --account-gold: #b28a50;
  --account-line: rgba(51, 79, 61, .14);
  min-width: 0;
  color: #334338;
  background:
    radial-gradient(circle at 100% 0%, rgba(221, 233, 213, .78), transparent 25rem),
    radial-gradient(circle at 0% 50%, rgba(243, 226, 202, .38), transparent 22rem),
    #f7f4ed;
}
.account-saas-shell {
  width: min(86rem, 100%);
  min-width: 0;
  padding: clamp(.75rem, 3vw, 2rem) clamp(.75rem, 4vw, 2.25rem) 4rem;
}
.account-saas-header {
  display: block;
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.account-topbar {
  position: sticky;
  top: .75rem;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: .7rem .8rem;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 .75rem 2rem rgba(48, 70, 52, .08);
  backdrop-filter: blur(18px);
}
.account-dashboard-brand {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  gap: .65rem;
  color: var(--account-forest-dark);
}
.account-dashboard-brand .brand-mark,
.account-auth-brand .brand-mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  overflow: hidden;
  border: 1px solid rgba(82, 107, 58, .18);
  border-radius: .85rem;
  background: #f5f4ec;
  box-shadow: 0 .3rem .8rem rgba(50, 76, 57, .08);
}
.account-dashboard-brand .brand-mark img,
.account-auth-brand .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.account-dashboard-brand > span:last-child {
  color: var(--account-forest-dark);
  font-size: .96rem;
}
.account-dashboard-brand small {
  color: #839184;
}
.account-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  min-width: 0;
  padding: 0;
}
.dashboard-home-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.35rem;
  padding: .45rem .7rem;
  border: 1px solid var(--account-line);
  border-radius: .7rem;
  color: #708070;
  background: rgba(255, 255, 255, .55);
  font-family: var(--font-heading);
  font-size: .66rem;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.dashboard-home-link > span:first-child {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--account-gold);
  font-size: .95rem;
  line-height: 1;
}
.dashboard-home-link:hover {
  color: var(--account-forest);
  border-color: rgba(51, 79, 61, .28);
  background: #fff;
}
.profile-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  padding: .3rem .35rem .3rem .7rem;
  border: 1px solid rgba(51, 79, 61, .13);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .35rem 1rem rgba(48, 70, 52, .08);
}
.profile-avatar-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
}
.profile-avatar {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg, #69866b, #c9a66e);
  box-shadow: 0 0 0 1px rgba(51, 79, 61, .2), 0 .35rem .8rem rgba(51, 79, 61, .16);
}
.profile-initial {
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-heading);
  font-size: .78rem;
  font-weight: 700;
}
.profile-status {
  position: absolute;
  right: -.02rem;
  bottom: .03rem;
  width: .68rem;
  height: .68rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #5fa35c;
  box-shadow: 0 0 0 .1rem rgba(95, 163, 92, .12);
}
.profile-copy {
  display: grid;
  min-width: 0;
  gap: .05rem;
  text-align: start;
}
.profile-copy strong,
.profile-copy small {
  overflow: hidden;
  max-width: 10rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-copy strong {
  color: #3b5341;
  font-family: var(--font-heading);
  font-size: .64rem;
}
.profile-copy small {
  color: #9aa49b;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: .59rem;
  text-align: start;
}
.profile-logout {
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  flex: 0 0 1.95rem;
  border-radius: 50%;
  color: #a26f67;
  background: #fbf1ed;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.profile-logout:hover {
  color: #8c483e;
  background: #f6e3dc;
  transform: translateY(-1px);
}
.account-hero-copy {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding: clamp(1.25rem, 4vw, 2.35rem);
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: 1.4rem;
  background:
    linear-gradient(120deg, rgba(232, 241, 226, .96), rgba(255, 253, 248, .88)),
    var(--account-cream);
  box-shadow: 0 1rem 2.25rem rgba(48, 70, 52, .08);
}
.account-hero-copy::after {
  content: "ز";
  position: absolute;
  inset-inline-start: 4%;
  bottom: -2.8rem;
  color: rgba(178, 138, 80, .12);
  font-family: var(--font-names);
  font-size: 12rem;
  line-height: 1;
  pointer-events: none;
}
.account-hero-copy > * {
  position: relative;
  z-index: 1;
}
.account-hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .55rem;
}
.eyebrow-mark {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  color: #fff;
  background: var(--account-gold);
  font-size: .58rem;
}
.account-hero-copy h1 {
  max-width: 38rem;
  margin: 0 0 .5rem;
  color: var(--account-forest-dark);
  font-size: clamp(1.4rem, 4vw, 2.35rem);
  line-height: 1.55;
}
.account-hero-copy > p:last-child {
  max-width: 39rem;
  margin: 0;
  color: #758477;
  font-size: clamp(.86rem, 2vw, 1rem);
}
.account-saas-page .share-card,
.account-saas-page .activation-panel,
.account-saas-page .account-panel {
  border-color: var(--account-line);
  box-shadow: 0 .75rem 1.8rem rgba(48, 70, 52, .07);
}
.account-saas-page .share-card {
  margin-bottom: 1rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .8);
}
.account-saas-page .share-card > div {
  min-width: 0;
}
.account-saas-page .share-card strong {
  color: var(--account-forest);
  font-size: clamp(.76rem, 2vw, .92rem);
}
.account-saas-page .share-card small {
  color: #8c998e;
  line-height: 1.7;
}
.account-saas-page .share-kicker {
  color: #67816c;
}
.account-saas-page .live-dot {
  background: #5eaa62;
}
.account-saas-page .share-actions {
  flex: 0 0 auto;
}
.account-saas-page .share-actions .primary-button,
.account-saas-page .key-input-row .primary-button {
  border: 0;
  color: #fff;
  background: var(--account-forest);
  box-shadow: 0 .45rem 1rem rgba(51, 79, 61, .18);
}
.account-saas-page .share-actions .primary-button:hover,
.account-saas-page .key-input-row .primary-button:hover {
  border-color: transparent;
  color: #fff;
  background: var(--account-forest-dark);
}
.account-saas-page .activation-panel {
  margin-bottom: 1rem;
  border-radius: 1.15rem;
  background: linear-gradient(115deg, #fffdf7, #f0eadc);
}
.account-saas-page .activation-copy h2 {
  color: #5d5038;
}
.account-saas-page .activation-copy p {
  color: #8d8779;
}
.account-saas-page .activation-actions label {
  color: #736247;
}
.account-saas-page .whatsapp-real {
  border-radius: .75rem;
}
.account-saas-page .account-layout {
  grid-template-columns: minmax(0, 1.42fr) minmax(18rem, .58fr);
  gap: 1rem;
}
.account-saas-page .account-panel {
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .82);
}
.account-saas-page .saas-editor-panel {
  padding: clamp(1rem, 3vw, 1.7rem);
}
.account-saas-page .panel-heading {
  align-items: center;
  margin-bottom: .6rem;
}
.account-saas-page .panel-heading h2 {
  color: var(--account-forest);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
}
.account-saas-page .editor-intro {
  margin: 0 0 1.25rem;
  color: #8b978d;
  line-height: 1.85;
}
.account-saas-page .editor-group {
  gap: .65rem;
  padding: 1.15rem 0;
  border-color: rgba(51, 79, 61, .1);
}
.account-saas-page .editor-group h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .1rem;
  color: #607965;
}
.account-saas-page .editor-group h3::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--account-gold);
  box-shadow: 0 0 0 .2rem rgba(178, 138, 80, .12);
}
.account-saas-page .account-form-grid {
  gap: .8rem;
}
.account-saas-page .account-form-grid > div {
  min-width: 0;
}
.account-saas-page .account-form input,
.account-saas-page .account-form textarea,
.account-saas-page .account-form select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(51, 79, 61, .18);
  border-radius: .72rem;
  color: #3b4c40;
  background: rgba(255, 255, 255, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.account-saas-page .account-form input:focus,
.account-saas-page .account-form textarea:focus,
.account-saas-page .account-form select:focus {
  outline: 0;
  border-color: rgba(74, 122, 83, .55);
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(103, 153, 107, .12);
}
.account-saas-page .account-form textarea {
  min-height: 7rem;
  resize: vertical;
  padding-block: .8rem;
}
.account-saas-page .editor-actions {
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(51, 79, 61, .1);
}
.account-saas-page .editor-actions .primary-button {
  min-height: 3.2rem;
  border: 0;
  color: #fff;
  background: var(--account-forest);
  box-shadow: 0 .55rem 1.2rem rgba(51, 79, 61, .18);
}
.account-saas-page .editor-actions .primary-button:hover {
  color: #fff;
  background: var(--account-forest-dark);
}
.account-saas-page .guidance-panel,
.account-saas-page .records-panel {
  position: sticky;
  top: 5.75rem;
}
.account-saas-page .records-panel {
  margin-top: 1rem;
}
.account-saas-page .guidance-panel h2,
.account-saas-page .records-panel h2 {
  color: var(--account-forest);
}
.account-saas-page .guidance-panel ol {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-saas-page .guidance-panel li {
  position: relative;
  padding-block: .7rem;
  padding-inline: .85rem 2.1rem;
  border-radius: .7rem;
  color: #9ba69d;
  font-size: .82rem;
}
.account-saas-page .guidance-panel li::before {
  right: .85rem;
  left: auto;
  width: 1rem;
  height: 1rem;
  border-color: #d1d9cf;
}
.account-saas-page .guidance-panel li.done {
  color: #5b8062;
  background: #f0f6ed;
}
.account-saas-page .guidance-panel li.done::before {
  border-color: #77a175;
  background: #77a175;
}
.account-saas-page .mini-stats div {
  border: 1px solid rgba(51, 79, 61, .08);
  background: #f3f6ef;
}
.account-saas-page .mini-stats strong {
  color: var(--account-forest);
}
.account-saas-page .guidance-note,
.account-saas-page .records-panel > p:last-child {
  color: #909b91;
}
.account-saas-page .save-indicator {
  color: #5a7e60;
  background: #edf5e9;
}
.account-saas-page .form-message.is-success {
  color: #34834b;
}
.account-auth-shell {
  padding: clamp(.75rem, 4vw, 2rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(221, 233, 213, .78), transparent 23rem),
    #f7f4ed;
}
.account-auth-card {
  padding: clamp(1.25rem, 5vw, 3.25rem);
  border-color: rgba(51, 79, 61, .15);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 1.5rem 4rem rgba(48, 70, 52, .12);
}
.account-auth-brand {
  margin-bottom: 1.2rem !important;
}
.account-auth-brand .brand-mark {
  width: 3rem;
  height: 3rem;
  flex-basis: 3rem;
}
.account-auth-brand > span:last-child {
  color: var(--account-forest-dark);
}
.account-auth-card .auth-visual {
  margin-top: .75rem;
}
.account-auth-card .google-button {
  border-radius: .85rem;
}
@media (max-width: 900px) {
  .account-saas-page .account-layout {
    grid-template-columns: 1fr;
  }
  .account-saas-page .account-side-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .account-saas-page .guidance-panel,
  .account-saas-page .records-panel {
    position: static;
    margin-top: 0;
  }
}
@media (max-width: 680px) {
  .account-saas-shell {
    padding: .65rem .7rem 2.5rem;
  }
  .account-topbar {
    top: .45rem;
    gap: .5rem;
    padding: .55rem;
    border-radius: 1rem;
  }
  .account-dashboard-brand {
    gap: .45rem;
  }
  .account-dashboard-brand .brand-mark {
    width: 2.35rem;
    height: 2.35rem;
    flex-basis: 2.35rem;
    border-radius: .7rem;
  }
  .account-dashboard-brand > span:last-child {
    font-size: .76rem;
  }
  .account-dashboard-brand small {
    font-size: .5rem;
  }
  .account-header-actions {
    gap: .4rem;
  }
  .dashboard-home-link {
    min-height: 2.3rem;
    padding: .4rem;
  }
  .dashboard-home-link > span:last-child {
    display: none;
  }
  .profile-card {
    padding: .18rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .profile-avatar-wrap {
    width: 2.5rem;
    height: 2.5rem;
    flex-basis: 2.5rem;
  }
  .profile-copy {
    display: none;
  }
  .profile-logout {
    width: 1.9rem;
    height: 1.9rem;
    flex-basis: 1.9rem;
  }
  .account-hero-copy {
    margin-top: .75rem;
    padding: 1.2rem 1rem 1.35rem;
    border-radius: 1.1rem;
  }
  .account-hero-copy h1 {
    font-size: 1.25rem;
    line-height: 1.7;
  }
  .account-hero-copy > p:last-child {
    font-size: .8rem;
  }
  .account-saas-page .share-card {
    align-items: stretch;
  }
  .account-saas-page .share-actions {
    width: 100%;
    align-items: stretch;
    gap: .55rem;
  }
  .account-saas-page .share-actions .secondary-link,
  .account-saas-page .share-actions .primary-button {
    width: 100%;
    text-align: center;
  }
  .account-saas-page .activation-panel {
    padding: 1rem;
  }
  .account-saas-page .key-input-row {
    grid-template-columns: 1fr;
  }
  .account-saas-page .key-input-row .primary-button {
    width: 100%;
  }
  .account-saas-page .account-side-column {
    grid-template-columns: 1fr;
  }
  .account-saas-page .panel-heading {
    align-items: flex-start;
  }
  .account-saas-page .save-indicator {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .account-saas-page .editor-actions {
    display: grid;
  }
  .account-saas-page .editor-actions .primary-button {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .account-dashboard-brand > span:last-child {
    display: none;
  }
  .account-topbar {
    justify-content: space-between;
  }
  .profile-status {
    width: .6rem;
    height: .6rem;
  }
  .account-auth-card {
    padding: 1.1rem;
  }
}

.account-event-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.25rem;
}
.account-event-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: min(100%, 14rem);
  padding: .65rem .85rem;
  border: 1px solid rgba(51, 79, 61, .12);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .68);
}
.account-event-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: .65rem;
  color: #fff;
  background: var(--account-forest);
  font-family: Arial, sans-serif;
  font-size: .9rem;
}
.account-event-item > span:last-child {
  display: grid;
  min-width: 0;
  gap: .08rem;
}
.account-event-item small {
  color: #859487;
  font-family: var(--font-heading);
  font-size: .62rem;
}
.account-event-item strong {
  overflow-wrap: anywhere;
  color: var(--account-forest-dark);
  font-family: var(--font-heading);
  font-size: .78rem;
}
@media (max-width: 680px) {
  .account-event-summary {
    flex-direction: column;
    gap: .5rem;
  }
  .account-event-item {
    width: 100%;
    min-width: 0;
  }
}

/* Functional dashboard modules */
.account-saas-page .music-control {
  display: grid;
  gap: .7rem;
}
.account-saas-page .music-upload-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: stretch;
}
.account-saas-page .music-file-picker {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 3rem;
  padding: .6rem .85rem;
  border: 1px dashed rgba(51, 79, 61, .3);
  border-radius: .72rem;
  color: var(--account-forest);
  background: #f7faf4;
  cursor: pointer;
}
.account-saas-page .music-file-picker span {
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 700;
}
.account-saas-page .music-file-picker small {
  overflow: hidden;
  color: #8a998e;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-saas-page #musicUpload {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: .55rem;
  border: 1px solid rgba(51, 79, 61, .15);
  border-radius: .72rem;
  color: #6f7d72;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: .68rem;
}
.account-saas-page .upload-button,
.account-saas-page .records-refresh {
  min-height: 3rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(51, 79, 61, .22);
  border-radius: .72rem;
  color: var(--account-forest);
  background: #edf5e9;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
}
.account-saas-page .upload-button:hover,
.account-saas-page .records-refresh:hover {
  color: #fff;
  border-color: var(--account-forest);
  background: var(--account-forest);
}
.account-saas-page .music-message {
  min-height: 1.2rem;
}
.account-records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.account-saas-page .detail-records-panel {
  min-width: 0;
}
.account-saas-page .detail-records-panel h2 {
  margin: .2rem 0 0;
  color: var(--account-forest);
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.account-saas-page .records-list {
  display: grid;
  gap: .55rem;
}
.account-saas-page .record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-width: 0;
  padding: .75rem .8rem;
  border: 1px solid rgba(51, 79, 61, .1);
  border-radius: .75rem;
  background: #f8faf6;
}
.account-saas-page .record-copy {
  display: grid;
  min-width: 0;
  gap: .1rem;
  text-align: start;
}
.account-saas-page .record-copy strong,
.account-saas-page .record-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-saas-page .record-copy strong {
  color: #415c48;
  font-family: var(--font-heading);
  font-size: .72rem;
}
.account-saas-page .record-copy small {
  color: #8a988e;
  line-height: 1.7;
}
.account-saas-page .record-wish .record-copy small {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.account-saas-page .record-item time {
  flex: 0 0 auto;
  color: #a0aaa1;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: .6rem;
}
.account-saas-page .records-empty {
  margin: .2rem 0 0;
  color: #98a49a;
  font-size: .8rem;
}

.account-saas-page .music-upload-controls {
  grid-template-columns: minmax(0, 1fr) auto;
}
.account-saas-page #musicUpload {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}