/* Author: Amar Agnihotri */
@layer components {
  .auth-layout { max-inline-size: 1040px; min-block-size: calc(100svh - 155px); margin-inline: auto; padding: clamp(30px, 7vw, 90px) 28px; display: grid; grid-template-columns: 1fr minmax(300px, 420px); align-items: center; gap: clamp(32px, 7vw, 92px); }
  .auth-intro h1 { font-size: clamp(2.2rem, 3.5vw, 3.2rem); line-height: 1.17; }
  .auth-intro .intro-copy { max-inline-size: 38ch; }
  .auth-feature { margin-block-start: 38px; padding-block-start: 22px; border-block-start: 1px solid var(--line); display: flex; align-items: start; gap: 14px; color: var(--muted); font-size: .9rem; max-inline-size: 39ch; }
  .auth-feature > span { color: var(--green); font-size: 1.5rem; }
  .auth-card { padding: 32px; }
  .auth-card h2 { margin-block-start: 14px; font-size: 1.7rem; }
  .auth-card .panel-description { margin-block-end: 18px; }
  .auth-card button[type="submit"] { margin-block-start: 24px; }
  .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; margin-block: 26px 20px; }
  .auth-divider::before, .auth-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }
  #google-signin { min-block-size: 44px; display: flex; justify-content: center; }
  .auth-setup { background: var(--pale-orange); border: 1px solid var(--line); border-radius: 8px; padding: 16px; font-size: .85rem; }
  .auth-setup h3 { font-size: 1.05rem; }
  .auth-setup p { margin-block: 10px; }
  .auth-setup code { display: block; overflow-wrap: anywhere; font-size: .9rem; }
  .account-nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .8rem; }
  .account-layout { max-inline-size: 900px; margin: auto; padding: 42px 28px; }
  .account-layout .panel { padding: 25px; margin-block: 24px; }
  .account-layout h2 { margin-block-end: 10px; }
  .key-form { display: flex; align-items: end; gap: 12px; margin-block: 20px; }
  .key-form > div { flex: 1; }
  .key-once { padding: 16px; background: var(--pale-green); border: 1px solid var(--line); border-radius: 8px; }
  .key-once textarea { margin-block: 10px; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
  .key-list { list-style: none; padding: 0; }
  .key-list li { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding-block: 16px; border-block-end: 1px solid var(--line); }
  .key-list strong, .key-list small { display: block; overflow-wrap: anywhere; }
  .key-list small { color: var(--muted); margin-block-start: 4px; }
}
@layer responsive {
  @media (width < 720px) { .auth-layout { grid-template-columns: 1fr; max-inline-size: 490px; gap: 28px; padding-block: 30px; } .auth-intro h1 { font-size: 2rem; } .auth-feature { display: none; } .auth-card { padding: 24px; } .account-nav { gap: 10px; } .key-form { flex-direction: column; align-items: stretch; } }
}