/* שומחת עלייך — שכבת מובייל בלבד. גרסת המחשב נשארת ללא שינוי. */
.mobile-bot-head { display: none; }
@media (max-width: 820px) {
  html { min-width: 0 !important; width: 100%; overflow-x: hidden; }
  body { width: 100%; overflow-x: hidden; background-attachment: scroll !important; padding-top: 70px; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  button, a, input { -webkit-tap-highlight-color: transparent; }

  .shell { display: block; min-height: 100svh; }
  .main { min-width: 0; }

  /* כותרת מותג קומפקטית + סטטוסים, ללא סרגל צד */
  .sidebar {
    position: fixed;               /* הלוגו צף בראש המסך. fixed ולא sticky — כי overflow-x:hidden שובר sticky */
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    width: 100%;
    height: auto;
    padding: 10px 15px 6px;
    background: rgba(247,228,236,.97);
    border: 0;
    box-shadow: 0 6px 16px rgba(126,84,153,.08);
    overflow: visible;
  }
  .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0;
    border: 0;
  }
  .brand img { width: 132px; max-height: 52px; object-fit: contain; margin: 0; }
  .brand strong, .brand small { display: none; }

  /* ניווט אפליקטיבי קבוע בתחתית */
  .nav {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 180;
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 0;
    padding: 6px 5px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255,250,252,.97);
    border: 0;
    border-top: 1px solid rgba(126,84,153,.22);
    box-shadow: 0 -8px 24px rgba(78,47,92,.10);
    backdrop-filter: blur(16px);
  }
  .nav-item {
    min-width: 0;
    min-height: 56px;
    padding: 5px 2px 3px;
    border: 0;
    background: transparent;
    color: var(--purple);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: center;
    font-size: 10px;
    line-height: 1.15;
    white-space: nowrap;
  }
  .nav-item .icon { width: auto; font-size: 20px; line-height: 1; }
  .nav-item:hover { background: transparent; transform: none; }
  .nav-item.active {
    color: var(--green);
    background: #fff6cf;
    border: 0;
    box-shadow: inset 0 3px 0 var(--yellow);
  }

  .sidebar-bottom { margin: 8px 0 0; }
  .sidebar-bottom .side-card { display: none; }
  /* סטטוסים — עיגולים צפים בפינה ימנית-תחתונה (מוסתרים בתוך דיון או בצ'אט הבוט) */
  .status-dock {
    position: fixed;
    left: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 170;
    width: auto; margin: 0; padding: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  .status-dock-head { display: none; }
  .status-bar { display: flex; flex-direction: column; gap: 12px; grid-template-columns: none; }
  .st-circle { width: auto; padding: 0; gap: 0; background: transparent; border: 0; box-shadow: none; }
  .st-circle:hover { background: transparent; border: 0; transform: none; }
  .st-circle .st-copy { display: none; }
  /* טבעת ירוקה סביב כל עיגול סטטוס זמין */
  .st-circle .st-ring, .st-circle .st-ring.has-img { width: 55px; height: 55px; padding: 2.5px; background: var(--green); box-shadow: 0 7px 20px rgba(74,45,88,.32); }
  .st-circle .st-emoji { font-size: 23px; }
  .st-circle .st-live { position: absolute; top: 1px; right: 1px; margin: 0; width: 13px; height: 13px; border: 2px solid #fff; box-shadow: none; }
  body.status-hidden .status-dock { display: none; }
  .st-circle { min-width: 0; padding: 7px; }
  .st-ring { width: 38px; height: 38px; }
  .st-label { font-size: 11.5px; }
  .st-note { font-size: 9.5px; }

  .topbar {
    position: static;              /* רק הלוגו צף; שורת הברכה נגללת רגיל מתחתיו */
    height: 58px;
    padding: 0 16px;
    background: rgba(247,228,236,.94);
    border-color: rgba(126,84,153,.15);
  }
  .greeting small { display: none; }
  .greeting strong { font-size: 15px; }
  .top-actions { gap: 7px; }
  .search-global { display: none; }
  .icon-btn { width: 38px; height: 38px; font-size: 16px; }
  body.chat-view .topbar { display: none; }

  .content { width: 100%; max-width: none; padding: 18px 15px 28px; }
  body.swipe-next .screen.active { animation: swipeNext .18s cubic-bezier(.22,.75,.25,1); }
  body.swipe-prev .screen.active { animation: swipePrev .18s cubic-bezier(.22,.75,.25,1); }
  @keyframes swipeNext { from { opacity:.82; transform:translateX(-12px); } to { opacity:1; transform:none; } }
  @keyframes swipePrev { from { opacity:.82; transform:translateX(12px); } to { opacity:1; transform:none; } }
  .page-head, #home .news-head { display: block; margin-bottom: 18px; }
  .page-head h1, #home .news-head h1 { font-size: 30px; line-height: 1.08; }
  .page-head p, #home .news-head p { font-size: 14px; line-height: 1.5; margin-top: 7px; }
  .page-head > .button, .page-head > .pill { margin-top: 13px; }
  .news-date { display: none; }
  .section-row { margin-top: 22px; }

  .chesed-launch { margin-bottom: 18px; border-radius: 3px; box-shadow: 5px 5px 0 rgba(126,84,153,.16); }
  .chesed-launch:hover { transform: none; box-shadow: 5px 5px 0 rgba(126,84,153,.16); }
  .chesed-launch img { aspect-ratio: 2.35/1; object-position: center; }
  .chesed-launch:after { background: linear-gradient(0deg,rgba(48,25,56,.72) 0,rgba(48,25,56,.08) 58%,transparent 78%); }
  .chesed-launch-copy { position: relative; inset: auto; max-width: none; width: auto; margin: 0 8px 8px; min-height: 49px; padding: 8px 10px; gap: 9px; box-shadow: 3px 3px 0 var(--yellow); }
  .chesed-launch-copy b { padding: 0 7px; font-size: 9px; }
  .chesed-launch-copy strong { font-size: 15px; }
  .chesed-launch-description { padding: 4px 12px 12px; font-size: 13px; }
  .chesed-launch:after { display: none; }
  .chesed-launch-copy small { font-size: 10.5px; }

  /* הבית — רצף אחד ללא חללים ריקים */
  .news-lead, #home .news-lead,
  .home-grid, .brand-row, .foundations,
  .cards-3, .news-grid, #home .news-grid,
  .task-panel, .shabbat-layout, .bot-layout {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .news-lead, #home .news-lead { gap: 16px; }
  #home .news-month, .news-month {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto !important;
    min-height: 0;
    padding: 21px 18px 23px;
    gap: 15px;
  }
  #home .news-month h2, .news-month h2 { font-size: 33px; max-width: none; }
  #home .nm-head.has-cover { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .nm-cover { min-height: 190px; transform: none; }
  .month-rhythm { width: 100%; padding: 15px 16px; box-shadow: 5px 5px 0 rgba(252,205,89,.7); }
  .month-rhythm-list { min-width: 0; }
  #home .news-shabbat, #home .news-card, .news-shabbat, .news-card { min-height: 0; }
  #home .news-grid { margin-top: 16px; }
  .brand-illustration { height: 132px; }
  .stage-ill { height: 150px; }

  /* ספרייה — רכבות צפופות בסגנון Netflix, עם יותר משני כרטיסים במסך */
  .library-tools { display: block; }
  .library-search { width: 100%; }
  .library-grid { grid-template-columns: minmax(0,1fr); }
  .rail { margin-bottom: 21px; }
  .rail-head { padding-left: 2px; padding-right: 2px; }
  .rail-track { gap: 10px; padding-bottom: 10px; }
  .rail-track > .lesson-card { flex: 0 0 clamp(136px, 43vw, 166px); }
  .rail-track .cover { height: 88px; }
  .rail-track .lesson-body { padding: 9px 10px 10px; }
  .rail-track .lesson-body h3 { font-size: 14px; line-height: 1.25; }
  .rail-track .lesson-meta { font-size: 10px; margin-top: 3px; }
  .rail-arrow { display: none; }
  .lib-monthbar { align-items: stretch; flex-direction: column; }
  .lib-mfilter { width: 100%; min-height: 44px; }

  /* הבמה של אמא */
  .shabbat-feature { min-height: 0; padding: 27px 21px 220px; }
  .shabbat-feature h2 { font-size: 34px; }
  .shabbat-feature p { font-size: 15px; }
  .shabbat-stage-art { width: calc(100% - 42px); height: 175px; left: 21px; bottom: 20px; }
  .shabbat-archive { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .shabbat-issue { min-height: 122px; padding: 15px; }

  /* קהילה — רשימת שיחות ומסך שיחה נפרד, כמו אפליקציית הודעות */
  #community { min-height: calc(100svh - 150px); }
  #community .page-head { position: relative; padding-left: 54px; }
  #community .page-head > .button {
    position: fixed;
    right: 18px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 155;
    width: 54px;
    height: 54px;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: transparent;
    background: var(--pink);
    border-radius: 50%;
    box-shadow: 0 7px 22px rgba(93,42,78,.28);
  }
  #community .page-head > .button:after { content: "+"; color: #fff; font: 800 28px/1 Heebo, sans-serif; }
  #community.mobile-chat-active .page-head { display: none; }
  #community.mobile-chat-active .page-head > .button { display: none; }
  .community-layout {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0 -15px -28px;
    background: #fff;
  }
  .threads {
    display: block;
    width: 100%;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .threads-head { padding: 15px 18px 11px; background: #fff; }
  .threads-head .new { display: none; }
  .thread {
    min-height: 76px;
    padding: 12px 16px;
    gap: 12px;
    background: #fff;
    border-bottom-color: #eee6f0;
  }
  .thread:hover, .thread.active { background: #fff9fc; }
  .thread-icon { width: 50px; height: 50px; border-radius: 50%; flex: none; }
  .thread h3 { font-size: 15px; line-height: 1.25; }
  .thread p { margin-top: 5px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
  .thread .time { max-width: 68px; margin-right: auto; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .community-layout > .chat {
    display: none;
    width: 100%;
    height: calc(100svh - 142px - env(safe-area-inset-bottom));
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f8f3f6;
  }
  .community-layout.mobile-chat-open > .threads { display: none; }
  .community-layout.mobile-chat-open > .chat { display: flex; }
  #community.mobile-chat-active { margin-top: -18px; }
  .chat-head {
    min-height: 66px;
    padding: 9px 12px;
    gap: 10px;
    position: sticky;
    top: 58px;
    z-index: 9;
    background: #fffafc;
    box-shadow: 0 3px 12px rgba(70,42,82,.07);
  }
  .mobile-chat-back {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--purple);
    display: grid;
    place-items: center;
    font-size: 25px;
    font-weight: 800;
    flex: none;
  }
  .chat-head .thread-icon { width: 43px; height: 43px; }
  .chat-head h3 { font-size: 15px; }
  .chat-head small { font-size: 10.5px; }
  .chat-head { flex-wrap: wrap; }
  .disc-manage { order: 5; width: 100%; gap: 6px; padding-top: 7px; border-top: 1px solid #eee5f0; }
  .disc-manage .dm-lbl { width: 100%; font-size: 10px; }
  .disc-manage .seg { flex: 1; min-width: 0; justify-content: stretch; }
  .disc-manage .seg-opt { flex: 1; padding: 6px 8px; font-size: 11px; white-space: nowrap; }
  .disc-manage .pin-toggle { padding: 7px 9px; font-size: 11px; }
  .community-layout .messages {
    padding: 18px 12px 22px;
    background-color: #f8f3f6;
    overflow-x: hidden;
  }
  .message { max-width: 88%; min-width: 0; }
  /* בועות ארוכות/קישורים בלי רווחים נשברות לשורה במקום לגלוש מעבר למסך */
  .community-layout .bubble, #bot .message .bubble { overflow-wrap: anywhere; word-break: break-word; }
  .bubble img, .bubble video { max-width: 100%; height: auto; }
  .community-layout .bubble { border-radius: 4px 15px 15px 15px; }
  .community-layout .message.me .bubble { background: #e7f1e9; border-color: #d4e6d8; border-radius: 15px 4px 15px 15px; }
  .composer { padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: #fff; }
  .composer .icon-btn { display: none; }
  .composer input { min-width: 0; }
  .send { width: 46px; min-width: 46px; padding: 0; border-radius: 50%; color: transparent; position: relative; }
  .send:after { content: "➤"; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; transform: rotate(180deg); }

  /* אמא־בוט — כניסה ישירה לשיחה, ללא אפשרויות מקדימות */
  #bot { min-height: 0; }
  #bot > .page-head { display: none; }
  #bot .bot-layout { display: block; margin: -18px -15px -28px; }
  #bot .bot-layout > aside { display: none; }
  #bot .bot-chat {
    height: calc(100svh - 142px - env(safe-area-inset-bottom));
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f8f3f6;
  }
  #bot .mobile-bot-head {
    min-height: 66px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    position: sticky;
    top: 58px;
    z-index: 9;
    background: #fffafc;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 3px 12px rgba(70,42,82,.07);
  }
  .mobile-bot-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: #fff;
    border: 3px solid var(--yellow);
    font-family: Heebo, sans-serif;
    font-size: 19px;
    font-weight: 900;
    flex: none;
  }
  .mobile-bot-head h2 { margin: 0; color: var(--purple); font-size: 16px; }
  .mobile-bot-head small { color: var(--green); font-size: 10.5px; font-weight: 800; }
  .mbh-profile { padding: 8px 10px; border-color: rgba(126,84,153,.22); background: #fff7da; box-shadow: 3px 3px 0 rgba(126,84,153,.18); font-size: 11.5px; }
  .profile-sheet-ov { z-index: 260; padding-top: max(24px,env(safe-area-inset-top)); }
  .profile-sheet { max-height: 82svh; padding: 9px 20px max(22px,env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: linear-gradient(180deg,#fff9df 0 7px,#fff 7px); box-shadow: 0 -15px 50px rgba(52,40,58,.28); }
  .ps-title { margin: 4px 38px 17px; font-size: 20px; line-height: 1.2; }
  .ps-close { width: 36px; height: 36px; background: #f4e8f7; font-weight: 800; }
  .profile-sheet #botProfileBody { padding-bottom: 7px; }
  .profile-sheet #botProfileBody input,
  .profile-sheet #botProfileBody textarea { min-height: 46px; border-radius: 4px !important; background: #fffdf8; }
  .profile-sheet #botProfileBody textarea { min-height: 72px; }
  .profile-sheet #botProfileBody>button { min-height: 48px; border-radius: 3px !important; margin-top: 17px !important; font-family: Heebo,Assistant,sans-serif; font-size: 15px; }
  #bot .bot-welcome { display: none; }
  #bot .messages {
    padding: 18px 12px 24px;
    background: radial-gradient(circle at 10px 10px,rgba(126,84,153,.10) 1px,transparent 1px),#f8f3f6;
    background-size: 20px 20px;
  }
  #bot .message { max-width: 88%; }
  #bot .message .bubble { background: #fff; border-radius: 4px 15px 15px 15px; }
  #bot .composer { margin-top: auto; }
  .msg-audio { width: min(248px,74vw); height: 42px; box-shadow: 2px 2px 0 rgba(126,84,153,.13); }

  /* מסכי שיחה בגובה מדויק: לוגו למעלה, ניווט למטה, וביניהם רק תוכן */
  body.chat-view { height: 100svh; overflow: hidden; overscroll-behavior: none; }
  body.chat-view .shell,
  body.chat-view .main,
  body.chat-view .content { height: 100%; min-height: 0; }
  body.chat-view .content { padding: 0 15px; overflow: hidden; }
  body.chat-view #bot.active,
  body.chat-view #bot .bot-layout,
  body.chat-view #bot .bot-chat { height: 100%; min-height: 0; }
  body.chat-view #bot .bot-layout { margin: 0 -15px; }
  body.chat-view #community:not(.mobile-chat-active) { height: 100%; min-height: 0; padding-top: 18px; padding-bottom: 28px; overflow-y: auto; overscroll-behavior-y: contain; }
  body.chat-view #community.mobile-chat-active,
  body.chat-view #community.mobile-chat-active .community-layout,
  body.chat-view #community.mobile-chat-active .community-layout > .chat { height: 100%; min-height: 0; margin-top: 0; }
  body.chat-view #community.mobile-chat-active .community-layout { margin-right: -15px; margin-left: -15px; margin-bottom: 0; }
  body.chat-view .chat-head,
  body.chat-view #bot .mobile-bot-head { top: 0; }

  /* מצב אורחת — חם, קומפקטי וללא עומס על מסך הטלפון */
  .guest-bar {
    min-height: 0;
    padding: 10px 13px;
    gap: 10px;
    justify-content: flex-start;
  }
  .guest-bar-mark { width: 35px; height: 35px; font-size: 16px; box-shadow: 3px 3px 0 var(--yellow); }
  .guest-bar-copy { min-width: 0; flex: 1; }
  .guest-bar-copy strong { font-size: 13px; }
  .guest-bar-copy span { font-size: 10.5px; line-height: 1.3; }
  .guest-bar .guest-join-link { margin: 0; padding: 8px 9px; font-size: 10.5px; box-shadow: 3px 3px 0 var(--purple); }
  .guest-bar .guest-native-note { max-width: 112px; font-size: 10px; line-height: 1.3; text-align: center; }
  .guest-lock { min-height: 360px; padding: 17px; box-shadow: 5px 5px 0 rgba(126,84,153,.2); }
  .guest-lock-community { min-height: calc(100svh - 285px); }
  .guest-lock-card { padding: 29px 19px 23px; box-shadow: 5px 5px 0 var(--purple); }
  .guest-lock .lk { width: 56px; height: 56px; margin-bottom: 13px; font-size: 25px; box-shadow: 4px 4px 0 var(--yellow); }
  .guest-lock-kicker { font-size: 10.5px; }
  .guest-lock h3 { font-size: 21px; }
  .guest-lock p { font-size: 13px; line-height: 1.55; }
  .guest-lock .guest-join-link { margin-top: 17px; padding: 10px 13px; font-size: 12px; }
  .guest-lock .guest-native-note { font-size: 12px; line-height: 1.4; }

  /* חלונות תוכן וסטורי */
  .lesson-modal { padding: 14px; align-items: center; }
  .lm-card { width: 100%; max-height: 84svh; border-radius: 16px; box-shadow: 0 16px 46px rgba(56,31,67,.34); }
  .lm-sizes { display: none; }
  .lm-body { padding: 20px 17px calc(22px + env(safe-area-inset-bottom)); }
  .lm-body h2 { font-size: 22px; }
  .sv-media { max-width: 100%; }
  .toast { left: 15px; right: 15px; bottom: calc(82px + env(safe-area-inset-bottom)); text-align: center; }
  .guest-lock-video { padding: 12px; }
  .guest-lock-video .guest-lock-card { padding: 21px 17px 19px; box-shadow: 5px 5px 0 var(--purple); }
  .guest-lock-video .lk { width: 49px; height: 49px; font-size: 21px; margin-bottom: 10px; }
  .guest-lock-video h3 { font-size: 20px; }
  .guest-lock-video p { font-size: 12.5px; line-height: 1.42; }
  .guest-lock-video .guest-join-link { margin-top: 13px; padding: 9px 13px; font-size: 12px; }
  .tour-card { width: min(300px,calc(100vw - 30px)); padding: 16px 17px; }
  .tour-card h4 { font-size: 18px; }
  .tour-card p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  body.swipe-next .screen.active,
  body.swipe-prev .screen.active { animation: none; }
}

@media (min-width: 821px) {
  .mobile-chat-back { display: none; }
}

@media (max-width: 390px) {
  .nav-item { font-size: 9px; }
  .nav-item .icon { font-size: 18px; }
  .content { padding-left: 12px; padding-right: 12px; }
  .status-bar { grid-template-columns: minmax(0,1fr); }
  .shabbat-archive { grid-template-columns: minmax(0,1fr); }
}

/* מסך הכניסה בטלפון */
@media (max-width: 700px) {
  .login {
    position: fixed;
    min-height: 100svh;
    inset: 0;
    padding: max(22px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));
    overflow-y: auto;
    align-items: safe center;
  }
  .login-card {
    width: 100%;
    max-width: 420px;
    min-height: 0;
    grid-template-columns: minmax(0,1fr);
    margin: 0 auto;
    box-shadow: 6px 6px 0 var(--purple);
  }
  .login-art { min-height: 0; padding: 24px 20px 21px; display: block; }
  .login-art>div { display: flex; flex-direction: column; align-items: center; gap: 13px; }
  .login-art .brand-logo { width: 152px; max-height: 80px; object-fit: contain; margin: 0; display: block; }
  .login-art h2 { font-size: 21px; line-height: 1.16; margin: 0; text-align: center; }
  .login-art p,
  .login-art small { display: none; }
  .login-form { padding: 27px 22px 29px; justify-content: flex-start; }
  .login-form .eyebrow { font-size: 12px; }
  .login-form h1 { font-size: 25px; line-height: 1.15; margin-top: 6px; }
  .login-form .sub { font-size: 13.5px; line-height: 1.45; margin: 9px 0 22px; }
  .login-form .label { font-size: 13px; margin-bottom: 8px; }
  .email,.tinput { height: 52px; min-height: 52px; font-size: 15px; padding: 0 15px; }
  .tinput { margin-bottom: 11px; }
  .login-form .error { min-height: 16px; margin-top: 8px; font-size: 12px; }
  .login-form .button { height: 52px; min-height: 52px; margin-top: 18px; font-size: 16px; box-shadow: 5px 5px 0 var(--purple); }
  .trial-sep { margin: 26px 0 12px; font-size: 12.5px; }
  .trial-card { padding: 18px 18px 19px; }
  .trial-card strong { font-size: 15px; }
  .trial-card p { font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
  .btn-outline { height: 48px; margin-top: 14px; font-size: 14px; }
  .back { margin-bottom: 14px; font-size: 13px; }
  .consent { gap: 8px; margin: 7px 0; font-size: 11.5px; line-height: 1.45; }
  .consent input { width: 17px; height: 17px; }
  #chooseView .sub { margin-bottom: 14px; }
  .member-login .label { margin-bottom: 7px; }
  .member-login .button { margin-top: 12px; }
  .g-alt { margin-top: 17px; padding-top: 13px; }
  .login-notice { margin-bottom: 12px; font-size: 12px; }
  .choice { min-height: 64px; margin-top: 0; padding: 13px 17px; border-radius: 4px; justify-content: center; }
  .choice + .choice { margin-top: 12px; }
  .choice-member { box-shadow: 5px 5px 0 var(--yellow); }
  .choice-trial { background: #fbf1f5; border-color: rgba(204,51,102,.25); box-shadow: 5px 5px 0 rgba(204,51,102,.18); }
  .choice-t { font-size: 17px; }
  .choice-s { margin-top: 2px; font-size: 12.5px; }
  .gbtn-wrap { min-height: 46px; margin: 3px 0; }
  .choose-google { margin-top: 1px; }
  .opt-or { margin: 16px 0 9px; }
}

@media (max-width: 370px), (max-height: 700px) and (max-width: 700px) {
  .login { padding-top: max(6px,env(safe-area-inset-top)); }
  .login-art { padding: 11px 14px 10px; }
  .login-art .brand-logo { width: 118px; height: 50px; }
  .login-art h2 { font-size: 17px; }
  .login-art>div { gap: 7px; }
  .login-form { padding: 18px 17px 20px; }
  .login-form h1 { font-size: 22px; }
  .login-form .sub { margin: 6px 0 13px; }
  .g-alt { margin-top: 11px; padding-top: 9px; }
  .choice { min-height: 61px; margin-top: 0; padding: 12px 14px; }
  .choice + .choice { margin-top: 9px; }
  .choice-t { font-size: 15px; }
  .choice-s { font-size: 11.5px; }
  .opt-or { margin: 10px 0 2px; }
  .trial-sep { margin-top: 11px; }
}