@font-face{font-family:"Ploni";src:url(/fonts/ploni-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ploni";src:url(/fonts/ploni-demibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Ploni";src:url(/fonts/ploni-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Ploni";src:url(/fonts/ploni-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* BDMF-inspired theme: deep indigo chrome, lime accent, lavender neutrals */
:root{
  --bg:#EFEDF7; --panel:#FFFFFF; --panel-2:#F5F3FB; --ink:#160B45; --muted:#615C80;
  --line:#E4E1F0; --line-2:#CBC6E0; --accent:#3D2AA8; --today:#E0533A; --sel:#160B45;
  --shadow:0 1px 2px rgba(22,11,69,.06),0 12px 32px rgba(22,11,69,.10);
  --brand:#170B4F; --brand-ink:#FFFFFF; --brand-or:#83D429; --brand-or-ink:#160B45;
  --radius:12px;
  --f-body:"Ploni","Rubik",Arial,sans-serif;
  --f-display:"Ploni","Rubik",Arial,sans-serif;
}
body{background:var(--bg)!important;color:var(--ink);font-family:var(--f-body)}

/* auth gate */
#auth-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px;
  background:#F6F5FB;font-family:var(--f-body);direction:rtl}
#auth-gate[hidden]{display:none}
.ag-card{background:#fff;color:#160B45;border-radius:20px;padding:36px 32px;width:min(420px,100%);text-align:center;border:1px solid #E4E1F0;box-shadow:0 20px 60px rgba(22,11,69,.08)}
.ag-card h1{font-size:24px;font-weight:700;margin:18px 0 6px}
.ag-card p{color:#615C80;margin:0 0 20px}
.ag-mark,.mark{font-weight:800;font-size:22px;letter-spacing:.02em}
.ag-mark b,.mark b{color:var(--accent);font-weight:800}
.ag-card .ag-mark b{color:#3D2AA8}
.ag-btn{font:inherit;font-weight:600;border:0;border-radius:999px;padding:12px 22px;background:#170B4F;color:#fff;cursor:pointer;width:100%}
.ag-btn:hover{background:#3D2AA8}
.ag-err{color:#C0392B!important;margin-top:12px!important}

/* OZ logo */
.mark{display:inline-flex;align-items:center}
.mark img{display:block;height:13px;width:auto}
.ag-mark img{height:18px;width:auto;margin:0 auto;display:block}

/* ---------- motion: quiet and functional ---------- */
:root{--ease:cubic-bezier(.25,.1,.25,1)}
@keyframes oz-fade-up{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes oz-pop{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes oz-fade{from{opacity:0}to{opacity:1}}
button,.btn,a.card,.ghost,.primary,.btn2,.edit,.logo-pick,.color-pick{transition:background-color .12s,border-color .12s,color .12s,box-shadow .15s,opacity .12s}
.ag-card{animation:oz-fade .25s ease both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- larger text: Ploni runs small, so scale it up everywhere ---------- */
body,#app,.panel,.modal,.toast,dialog,#auth-gate{font-size-adjust:ex-height .52}

/* ---------- motion v3: present but professional ---------- */
:root{--ease:cubic-bezier(.22,.8,.3,1)}
@keyframes oz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes oz-in-soft{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
button,.btn,a.card,.ghost,.primary,.btn2,.edit,.logo-pick,.color-pick,.chip,.mini{transition:transform .2s var(--ease),background-color .15s,border-color .15s,color .15s,box-shadow .25s var(--ease),opacity .15s}
button svg,.btn svg,.edit svg,.logo-pick svg{transition:transform .2s var(--ease)}
button:hover:not(:disabled) svg,.btn:hover:not(:disabled) svg,.edit:hover svg,.logo-pick:hover svg{transform:scale(1.14)}
button:active:not(:disabled),.btn:active:not(:disabled),.primary:active:not(:disabled){transform:scale(.97)}
.primary:hover:not(:disabled),.ag-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(23,11,79,.22)}
.ag-card{animation:oz-in-soft .45s var(--ease) both}

/* ---------- button language (shared) ----------
   primary action  = lime with indigo text
   secondary       = white, lavender outline
   destructive     = white, red outline, red fill on hover */
:root{--btn-primary:#83D429;--btn-primary-hover:#76C21F;--btn-primary-ink:#160B45}