/* Generated: 2026-01-28 */

:root{
  --bg: #f8eee5;
  --primary: #758680;
  --primaryHover: #8D9B96;
  --text: #758680;

  --muted: #6b7280;
  --border: rgba(0,0,0,.12);
  --shadow: 0 22px 50px rgba(15,23,42,.10);
  --radius: 22px;

  --ios-sep: rgba(60,60,67,.14);
  --ios-sep-2: rgba(60,60,67,.08);
  --ios-text: rgba(15,23,42,.88);
  --ios-muted: rgba(15,23,42,.55);
  --ios-placeholder: rgba(15,23,42,.35);
  --ios-blue: #007AFF;
  --ios-green: #34C759;
  --ios-red: #FF3B30;

  /* fonts (cepat & kompatibel) */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-heading: "Ubuntu", var(--font-ui);

  /* PATOKAN LEBAR TOMBOL */
  --btnW: 320px;

  /* PATOKAN FONT TOMBOL (SAMAKAN SEMUA) */
  --btnFontSize: 15px;
  --btnFontWeight: 600;
}


/* =========================
   Language Switcher (Index/Timeline/Auth)
   ========================= */
.sk-topbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}
.sk-lang-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  color: var(--text);
  font-weight:600;
  cursor:pointer;
}
.sk-lang-btn:active{ transform: scale(.98); }
.sk-lang-btn .sk-lang-code{ font-size:12px; opacity:.9; }

/* auth alignment */
.auth-brand{ position:relative; }
.auth-lang-btn{ margin-left:auto; }


.sk-sheet-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 9998;
}
.sk-sheet-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.sk-sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  transform: translateY(105%);
  transition: transform .22s ease;
  z-index: 9999;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
}
.sk-sheet.is-open{ transform: translateY(0); }

.sk-sheet-card{
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}
.sk-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.sk-sheet-title{
  font-weight:700;
  color: var(--text);
}
.sk-sheet-close{
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  padding: 6px 10px;
  cursor:pointer;
  color: rgba(0,0,0,.55);
}
.sk-sheet-list{ padding: 8px; }
.sk-sheet-item{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.8);
  color: var(--text);
  cursor:pointer;
}
.sk-sheet-item + .sk-sheet-item{ margin-top:8px; }
.sk-sheet-item.is-active{
  border-color: rgba(0,0,0,.18);
  background: rgba(0,0,0,.03);
}
.sk-sheet-item .muted{ opacity:.7; font-size:12px; }


/* ====== PUBLIC PRESET EDITOR (index) ====== */
.sk-inline-actions{
  margin-top:6px;
  display:flex;
  justify-content:flex-end;
}
.sk-inline-link{
  border:0;
  background:transparent;
  color: var(--primary);
  font-size:12px;
  padding:6px 8px;
  border-radius: 12px;
  cursor:pointer;
}
.sk-inline-link:hover{ background: rgba(0,0,0,.04); }
.sk-inline-link:active{ transform: scale(.98); }
.sk-inline-hint{
  font-size:11px;
  color: rgba(0,0,0,.45);
  margin-top:2px;
  text-align:right;
}
.sk-field-tools{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}
.sk-chip{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.sk-chip:active{ transform: scale(.98); }
.sk-textarea{
  width:100%;
  min-height: 170px;
  resize: vertical;
  border-radius: 14px;
  padding:12px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  font-size: 14px;
  line-height: 1.35;
}
.sk-preview{
  margin-top:10px;
  padding:12px;
  border-radius: 14px;
  border:1px dashed rgba(0,0,0,.18);
  background: rgba(255,255,255,.65);
  font-size: 13px;
  white-space: pre-wrap;
  color: rgba(0,0,0,.60);
}
.sk-sheet-actions{
  display:flex;
  gap:8px;
  padding: 10px;
  border-top:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
}
.sk-sheet-actions .btn{
  flex:1;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 600;
}


/* ====== UTILITIES (global) ====== */
.is-hidden{display:none;}
.u-fs-15{font-size:15px;}
.u-fs-10{font-size:10px;}
.btn-pill{border-radius:40px !important;}



    /* ====== GLOBAL ====== */
    html, body{ height: 100%; }
    html{ background: var(--bg) !important; }

    body{
      background: var(--bg) !important;
      color: var(--text);
      font-family: var(--font-ui);
      font-size: 14px;
      line-height: 1.45;
      -webkit-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* pastikan semua elemen ikut font UI */
    label, input, textarea, button, .btn, .form-control, .alert, .sk-section-title{
      font-family: var(--font-ui) !important;
    }

    /* heading pakai Ubuntu */
    .text-primary{ color: var(--primary) !important; }
    .sk-title{ font-family: var(--font-heading) !important; }

    /* ====== WRAPPER ====== */
    .sk-wrap{
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding:
        calc(22px + env(safe-area-inset-top))
        calc(14px + env(safe-area-inset-right))
        calc(54px + env(safe-area-inset-bottom))
        calc(14px + env(safe-area-inset-left));
    }

    .sk-card{
      width: 100%;
      max-width: 520px;
      padding: 16px 14px 14px;
    }

    /* ====== TITLE ====== */
    .sk-title{
      font-weight: 800;
      font-size: 32px;
      line-height: 1.15;
      margin: 12px 0 14px;
      letter-spacing: .2px;
      color: #c88f70 !important;
    }

    /* ====== PANEL ====== */
    .sk-panel{
      background: rgba(255,255,255,.55);
      border: 1px solid var(--ios-sep);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px 14px;
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      backdrop-filter: blur(18px) saturate(160%);
    }

    /* fallback jika browser tidak support blur */
    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
      .sk-panel{ background: rgba(255,255,255,.92); }
    }

    label{
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 8px;
      color: rgba(31,41,55,.9);
    }

    .form-control{
      height: 48px;
      border-radius: 14px;
      border: 1px solid var(--ios-sep);
      background: rgba(255,255,255,.92);
      box-shadow: none !important;
      padding: 10px 12px;
    }
    .form-control:focus{
      border-color: rgba(0,122,255,.55);
      box-shadow: 0 0 0 .22rem rgba(0,122,255,.18) !important;
    }

    /* ====== BUTTONS (KUNCI FONT & UKURAN) ====== */
    .btn{
      border-radius: 14px;

      /* font harus sama untuk semua tombol */
      font-size: var(--btnFontSize) !important;
      font-weight: var(--btnFontWeight) !important;
      letter-spacing: .05px;

      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;

      /* ukuran tombol sama (tap target iPhone) */
      height: 48px;
      padding: 0 16px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      line-height: 1;
      white-space: nowrap;

      transition: transform 120ms ease, filter 120ms ease, box-shadow 160ms ease;
    }
    @media (prefers-reduced-motion: reduce){
      .btn{ transition: none; }
    }
    .btn:active{
      transform: translateY(1px) scale(.99);
      filter: brightness(.98);
    }

    /* icon ikut ukuran teks tombol */
    .btn i{
      font-size: 1em;
      line-height: 1;
    }

    .btn-primary{
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: 0 14px 28px rgba(15,23,42,.10);
    }
    .btn-primary:hover{
      background: var(--primaryHover);
      border-color: var(--primaryHover);
    }

    /* Aksen iPhone-ish untuk tombol WA & Share (tanpa ubah fitur) */
    .btn-success{
      background: #25D366;
      border-color: #25D366;
      box-shadow: 0 14px 28px rgba(15,23,42,.10);
    }
    .btn-success:hover{ filter: brightness(.96); }

    .btn-info{
      background: var(--ios-blue);
      border-color: var(--ios-blue);
      color: #fff;
      box-shadow: 0 14px 28px rgba(15,23,42,.10);
    }
    .btn-info:hover{ filter: brightness(.96); color:#fff; }

    /* tombol utama “Buat Link” */
    #submit{
      width: 100%;
      max-width: var(--btnW);
      margin: 6px auto 0;
    }

    /* ====== RESULT AREA ====== */
    .sk-divider{
      margin: 14px 0;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.10);
    }

    .sk-section-title{
      font-weight: 700;
      font-size: 14px;
      color: rgba(31,41,55,.85);
      margin: 6px 0 8px;
    }

    #result{
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
    }

    /* ====== Copy / Test (lebar sama dengan submit) ====== */
    .sk-action-row{
      width: 100%;
      max-width: var(--btnW);
      margin: 12px auto 0;
      display: flex;
      gap: 10px;
    }
    .sk-action-row .btn{
      flex: 1 1 0;
      min-width: 0;
      box-shadow: 0 10px 18px rgba(0,0,0,.06);
    }

    /* ====== WA & Share (lebar sama dengan submit) ====== */
    .sk-main-actions{
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }
    .sk-main-actions .btn{
      width: 100%;
      max-width: var(--btnW);
      box-shadow: 0 10px 18px rgba(0,0,0,.06);
    }

/* ====== COPY TOAST (muncul di bawah result, di atas tombol) ====== */
.share{
  width: 100%;
  max-width: var(--btnW);
  margin: 10px auto 0;
  display: none;
}
.share.is-show{ display: block; }

.share .idb-toast{
  width: 100%;
  background: #d4edda;
  border: 1px solid rgba(0,0,0,.08);
  color: #1f2937;

  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);

  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  line-height: 1.25;
}

.share .idb-toast__msg{
  font-size: 13px;
}

.share .idb-toast__close{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.share .idb-toast__close span{
  font-size: 12px;
  line-height: 1;
}
.share .idb-toast__close:hover{
  background: rgba(255,255,255,.92);
}

@media (max-width: 380px){
  .share{ max-width: 100%; }
}

.wa-fallback{
  width: 100%;
  max-width: var(--btnW);
  margin: 10px auto 0;
  padding: 0;              /* <- biar tidak bulky */
  border: 0;               /* <- hilangkan border box */
  background: transparent; /* <- hilangkan panel */
  box-shadow: none;        /* <- hilangkan shadow */
}


.wa-fallback__title{
  font-weight: 700;
  font-size: 13px;
  color: rgba(31,41,55,.85);
  margin-bottom: 8px;
}

.wa-fallback__btn{
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 0;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: var(--btnFontSize);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.wa-fallback__btn:active{ filter: brightness(.95); }


    @media (min-width: 381px) and (max-width: 768px){
      .sk-card{ max-width: 540px; }
    }
  



/* ====== PUBLIC TEMPLATE EDITOR UX TUNING (index.php) ====== */
#tplSheet .sk-sheet-card{
  max-height: 75vh;             /* maksimal 3/4 layar */
  display: flex;
  flex-direction: column;
  overflow: visible;            /* supaya dropdown select tidak kepotong */
}
#tplSheet .sk-sheet-list{
  overflow: auto;               /* body bisa discroll */
  -webkit-overflow-scrolling: touch;
}
#tplSheet .sk-textarea{
  min-height: 140px;
  max-height: 240px;
}

/* ====== Textarea token highlight (mirror overlay) ====== */
#tplSheet .sk-hlwrap{
  position: relative;
  overflow: hidden; /* mirror digeser saat scroll */
}
#tplSheet .sk-tamirror{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-sizing: border-box;
  border: 1px solid transparent; /* samakan box-model dgn textarea agar wrap & caret sinkron */
}
#tplSheet .sk-tamirror-inner{

  padding: 12px;
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: break-word;
    word-break: break-word;
  color: rgba(0,0,0,.86);
}
#tplSheet .sk-tamirror-inner .sk-var{
  color: rgba(220,38,38,.95); /* merah */
  font-weight: 700;
}

/* textarea jadi "input layer" (teks transparan, caret tetap terlihat) */
#tplSheet textarea.sk-ta{
  position: relative;
  z-index: 2;
  background: transparent;
  color: transparent;
  caret-color: rgba(0,0,0,.88);

  /* samakan algoritma wrapping */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}
#tplSheet textarea.sk-ta::placeholder{

  color: rgba(0,0,0,.38);
}

/* ====== MOBILE SAFETY: nonaktifkan mirror overlay di perangkat touch ======
   iOS Safari sering punya rounding/layout berbeda antara <textarea> dan <div>,
   sehingga caret/selection terlihat "geser". Dengan mematikan mirror pada
   pointer coarse, caret selalu 100% sinkron. */
@media (hover: none) and (pointer: coarse){
  #tplSheet .sk-tamirror{ display: none !important; }
  #tplSheet textarea.sk-ta{
    background: rgba(255,255,255,.9) !important;
    color: rgba(0,0,0,.86) !important;
  }
}

#tplSheet select{
  height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.2;
}
#tplSheet .sk-preview{
  max-height: 140px;            /* preview tidak terlalu tinggi */
  overflow: auto;
}

#tplSheet .sk-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#tplSheet .sk-chips-vars{ margin-top:10px; }

#tplSheet .sk-chips-vars .sk-chip{
  border-color: var(--border);
  background: rgba(255,255,255,.85);
  color: rgba(0,0,0,.72);
  font-weight: 600;
}
#tplSheet .sk-chips-vars .sk-chip:hover{
  border-color: rgba(19,79,92,.25);
  background: rgba(19,79,92,.06);
  color: rgba(19,79,92,.95);
}
#tplSheet .sk-chips-vars .sk-chip:active{ transform: scale(.98); }

#tplSheet .sk-textarea:focus{
  border-color: rgba(19,79,92,.30);
  box-shadow: 0 0 0 3px rgba(19,79,92,.10);
  outline: none;
}


#tplSheet .sk-nb{
  margin-top:8px;
  font-size:12px;
  color: rgba(0,0,0,.58);
  line-height: 1.35;
}
#tplSheet .sk-nb code{
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(19,79,92,.08);
  border: 1px solid rgba(19,79,92,.16);
  color: rgba(19,79,92,.95);
}

#tplSheet .sk-hint{
  margin-top:8px;
  font-size:12px;
  color: rgba(0,0,0,.58);
}
#tplSheet .sk-hint.is-warn{
  color: rgba(200,60,60,.95);
  font-weight:600;
}

#tplSheet .sk-callout{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(140,82,255,.40);
  background: rgba(140,82,255,.08);
  color: rgba(0,0,0,.72);
  font-size:12px;
  line-height:1.35;
}
#tplSheet .sk-callout b{ font-weight:700; }
#tplSheet .sk-callout code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(140,82,255,.25);
  color: rgba(0,0,0,.78);
  white-space: nowrap;
}

#tplSheet .sk-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
#tplSheet .sk-section-title{
  font-weight:600;
  font-size:12px;
}
#tplSheet .sk-tag{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.03);
  color:rgba(0,0,0,.7);
  white-space:nowrap;
}
#tplSheet .sk-tag-edit{
  background:rgba(19,79,92,.10);
  border-color:rgba(19,79,92,.20);
  color:rgba(19,79,92,.95);
}
#tplSheet .sk-tag-preview{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.10);
  color:rgba(0,0,0,.72);
}



/* ===== Token Highlighter (contenteditable, NO mirror) ===== */
.sk-ce{
  white-space: pre-wrap;
  overflow: auto;
  color: rgba(0,0,0,.86); /* samakan dengan textarea/mirror */
}
.sk-ce:empty:before{
  content: attr(data-placeholder);
  color: #94a3b8;
}
.sk-tok{
  color: rgba(220,38,38,.95);
  font-weight: 700;
}
.sk-textarea.is-hidden{
  display: none !important;
}


/* ===================================================
   SweetAlert2 Toast — Modern & Responsive (iOS-like)
   Target: semua notif toast (Swal.mixin({toast:true}))
   =================================================== */

/* Pastikan toast selalu di atas overlay/komponen lain */
.swal2-container{ z-index: 10050; }

/* Gutter responsif: cukup besar supaya shadow tidak "kepotong" di desktop/tablet */
:root{
  --toast-gutter: clamp(16px, 3vw, 44px);
}

/* Posisi top-end/top-right: tambah safe-area + gutter */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right{
  box-sizing: border-box;
  max-width: 100vw;
  padding-top: calc(var(--toast-gutter) + env(safe-area-inset-top));
  padding-right: calc(var(--toast-gutter) + env(safe-area-inset-right));
  padding-left: var(--toast-gutter);
  overflow: visible !important; /* jangan clip shadow */
}

/* Mobile: toast jadi center biar rapih dan tidak nabrak tepi */
@media (max-width: 520px){
  .swal2-container.swal2-top-end,
  .swal2-container.swal2-top-right{
    left: 0 !important;
    right: 0 !important;
    justify-content: center;
    align-items: center !important;
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* Card toast iOS-ish */
.swal2-popup.swal2-toast{
  margin: 0 !important;
  width: min(92vw, 390px);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .10);

  /* background modern: solid fallback + blur bila support */
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  /* shadow lebih rapih (lebih kecil blur -> tidak mudah kepotong) */
  box-shadow:
    0 12px 28px rgba(15, 23, 42, .14),
    0 4px 12px rgba(15, 23, 42, .10);
}

/* Layout & typografi */
.swal2-popup.swal2-toast .swal2-icon{
  width: 32px;
  height: 32px;
  margin: 0 10px 0 0;
  flex: 0 0 32px;
}
.swal2-popup.swal2-toast .swal2-title,
.swal2-popup.swal2-toast .swal2-html-container{
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  color: rgba(15, 23, 42, .92);
  text-align: left;
}

/* Progress bar lebih tipis dan elegan */
.swal2-popup.swal2-toast .swal2-timer-progress-bar{
  height: 2px;
  opacity: .35;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .swal2-popup.swal2-toast{ transition: none !important; animation: none !important; }
}

/* ============================
   WA Chooser (Mobile) – iPhone premium sheet
   ============================ */
#waBackdrop{
  background: rgba(2, 6, 23, .42);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: opacity .20s ease;
}
#waSheet{
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
}
#waSheet .sk-sheet-card{
  max-width: 460px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 26px;
  box-shadow:
    0 28px 80px rgba(2, 6, 23, .28),
    0 10px 28px rgba(2, 6, 23, .18);
}
#waSheet .sk-sheet-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}
#waSheet .sk-sheet-title{
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .1px;
}
#waSheet .sk-sheet-close{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: rgba(15, 23, 42, .70);
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
#waSheet .sk-sheet-close:active{ transform: translateY(1px); }

#waSheet .sk-sheet-list{
  padding: 14px 14px 12px;
}
#waSheet .sk-btn{
  height: 52px;
  border-radius: 18px !important;
  font-weight: 800;
  font-size: 14px;
  box-shadow: none !important;
}
#waSheet #waPickOfficial,
#waSheet #waPickBusiness{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#waSheet #waPickOfficial i,
#waSheet #waPickBusiness i{
  font-size: 18px;
}
#waSheet label[for="waRemember"], 
#waSheet #waRemember{
  cursor:pointer;
}

@media (max-width: 420px){
  #waSheet .sk-sheet-card{ border-radius: 22px; }
  #waSheet .sk-btn{ height: 50px; border-radius: 16px !important; }
}

/* Respect reduce motion */
@media (prefers-reduced-motion: reduce){
  #waBackdrop, #waSheet{ transition:none !important; }
}