/* =========================================================================
   welcome.css — Tailor Tracker first-launch welcome (language → 3 feature
   slides → sign in). Self-contained: every rule is scoped under #tt-welcome.
   Always light/cream so it matches the brand artwork in any app theme.
   ========================================================================= */
#tt-welcome{
  --wl-cream:#FDFAF3; --wl-cream2:#F5EDDC; --wl-line:#E8DFCB;
  --wl-ink:#0E1A33; --wl-muted:#5E6A80; --wl-soft:#8A93A5;
  --wl-gold:#D9921C; --wl-gold2:#F3C25E; --wl-gold-ink:#7A4B05;
  --wl-teal:#1E6B68; --wl-navy:#14283F;
  --wl-dir:ltr; --s:1;
  position:fixed; inset:0; z-index:9800; display:flex; align-items:center; justify-content:center;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--wl-ink);
  background:var(--wl-cream); -webkit-tap-highlight-color:transparent;
  opacity:0; transition:opacity .45s ease;
}
#tt-welcome.show{opacity:1}
#tt-welcome.leaving{opacity:0; pointer-events:none; transition:opacity .5s ease}
#tt-welcome *{box-sizing:border-box}
#tt-welcome button{font-family:inherit; cursor:pointer; -webkit-appearance:none; appearance:none}
#tt-welcome .wl-shell{
  position:relative; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(243,194,94,.28), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(30,107,104,.10), transparent 62%),
    var(--wl-cream);
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:560px){#tt-welcome{background:radial-gradient(80% 80% at 50% 0%, #2a3a55, #0c1424)}
#tt-welcome .wl-shell{width:430px; height:min(880px,94vh); border-radius:38px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06)}
}
#tt-welcome /* faint stitched curves in the background */
.wl-stitch{position:absolute; inset:0; pointer-events:none; opacity:.55}
#tt-welcome .wl-stitch path{fill:none; stroke:var(--wl-gold); stroke-width:1.4; stroke-dasharray:5 7; stroke-linecap:round; opacity:.45}
#tt-welcome /* ── top bar ── */
.wl-top{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:18px 22px 0; min-height:56px; direction:var(--wl-dir)}
#tt-welcome .wl-brand{display:flex; align-items:center; gap:10px; font-family:Fraunces,Georgia,"Times New Roman",serif; font-weight:700; font-size:21px; letter-spacing:-.01em}
#tt-welcome .wl-brand img{width:30px; height:30px; object-fit:contain}
#tt-welcome .wl-brand b{color:var(--wl-gold); font-weight:700}
#tt-welcome .wl-skip{background:none; border:0; color:var(--wl-muted); font-weight:600; font-size:14px; padding:10px 6px; opacity:1; transition:opacity .25s}
#tt-welcome .wl-skip[hidden]{display:block; visibility:hidden}
#tt-welcome /* ── track / panes ── */
.wl-viewport{position:relative; z-index:2; flex:1; min-height:0; overflow:hidden}
#tt-welcome .wl-track{display:flex; height:100%; direction:ltr; transition:transform .55s cubic-bezier(.22,.9,.28,1); will-change:transform}
#tt-welcome .wl-pane{flex:0 0 100%; height:100%; overflow-y:auto; overflow-x:hidden; padding:6px 24px 8px; display:flex; flex-direction:column; direction:var(--wl-dir); scrollbar-width:none}
#tt-welcome .wl-pane::-webkit-scrollbar{display:none}
#tt-welcome .wl-step{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--wl-gold); margin:14px 0 8px}
#tt-welcome .wl-h{font-family:Fraunces,Georgia,"Times New Roman",serif; font-weight:700; font-size:32px; line-height:1.08; letter-spacing:-.02em; margin:0; color:var(--wl-ink)}
#tt-welcome .wl-h em{font-style:normal; color:var(--wl-gold)}
#tt-welcome .wl-sub{margin:12px 0 0; font-size:15.5px; line-height:1.55; color:var(--wl-muted); max-width:330px}
html.rtl #tt-welcome .wl-h{letter-spacing:0; line-height:1.3}
html.rtl #tt-welcome .wl-step{letter-spacing:.04em}
#tt-welcome /* entrance choreography: children with .rv fade/slide in when pane is active */
.wl-pane .rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.9,.3,1); transition-delay:calc(var(--d,0) * 70ms)}
#tt-welcome .wl-pane.on .rv{opacity:1; transform:none}
#tt-welcome /* ── language list ── */
.wl-langs{display:flex; flex-direction:column; gap:12px; margin-top:22px}
#tt-welcome .wl-lang{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:start; padding:0 20px; min-height:66px; border-radius:20px;
  background:rgba(255,255,255,.7); border:1.5px solid var(--wl-line); color:var(--wl-ink); font-size:20px; font-weight:700;
  transition:border-color .2s, background .2s, transform .15s, box-shadow .2s; backdrop-filter:blur(6px)}
#tt-welcome .wl-lang .tx{display:block; text-align:left; unicode-bidi:isolate}
#tt-welcome .wl-lang small{display:block; font-size:12px; font-weight:500; color:var(--wl-soft); margin-top:2px}
#tt-welcome .wl-lang:active{transform:scale(.985)}
#tt-welcome .wl-lang .ck{width:30px; height:30px; border-radius:50%; border:2px solid #D6CCB6; display:flex; align-items:center; justify-content:center; flex:none; transition:.2s}
#tt-welcome .wl-lang .ck svg{width:16px; height:16px; stroke:#fff; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.4); transition:.25s cubic-bezier(.3,1.6,.5,1)}
#tt-welcome .wl-lang.sel{border-color:var(--wl-gold); background:linear-gradient(135deg,#FFF6E0,#FFFBF1); box-shadow:0 12px 26px -16px rgba(217,146,28,.7)}
#tt-welcome .wl-lang.sel .ck{background:linear-gradient(135deg,var(--wl-gold),var(--wl-gold2)); border-color:transparent}
#tt-welcome .wl-lang.sel .ck svg{opacity:1; transform:none}
#tt-welcome .wl-more{margin-top:14px; align-self:center; background:none; border:0; color:var(--wl-gold-ink); font-weight:700; font-size:14px; padding:8px 12px; display:flex; align-items:center; gap:6px}
#tt-welcome .wl-more svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s}
#tt-welcome .wl-more.open svg{transform:rotate(180deg)}
#tt-welcome .wl-langs-extra{display:none; flex-direction:column; gap:10px}
#tt-welcome .wl-langs-extra.open{display:flex}
#tt-welcome .wl-langs-extra .wl-lang{min-height:56px; font-size:17px}
#tt-welcome /* ── illustration stage ── */
.wl-stage{position:relative; width:100%; max-width:380px; aspect-ratio:1/1; margin:14px auto 4px; flex:none; direction:ltr}
#tt-welcome .wl-scene{position:absolute; left:0; top:0; width:360px; height:360px; transform-origin:0 0; transform:scale(var(--s))}
#tt-welcome .wl-scene > *{position:absolute}
#tt-welcome .wl-card{background:#FFFEFA; border-radius:20px; box-shadow:0 18px 34px -16px rgba(60,40,10,.32), 0 2px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(232,223,203,.8); direction:var(--wl-dir)}
#tt-welcome .wl-float{animation:wlFloat 6s ease-in-out infinite; animation-delay:var(--fd,0s)}
@keyframes wlFloat{50%{transform:translateY(-7px) rotate(var(--r,0deg))}
}
#tt-welcome .wl-scene .pop{opacity:0; transform:translateY(24px) scale(.94) rotate(var(--r,0deg)); transition:opacity .7s ease, transform .9s cubic-bezier(.2,1.1,.3,1); transition-delay:calc(var(--d,0) * 110ms + 150ms)}
#tt-welcome .wl-pane.on .wl-scene .pop{opacity:1; transform:rotate(var(--r,0deg))}
#tt-welcome .wl-pane.on .wl-scene .pop.fl{animation:wlFloat 6.5s ease-in-out infinite; animation-delay:calc(var(--d,0) * -1.3s)}
#tt-welcome /* paper pattern card */
.sc-paper{background:linear-gradient(160deg,#F7EEDB,#EFE2C6); border-radius:18px; border:1.5px dashed #CDB88C; box-shadow:0 14px 26px -16px rgba(80,55,10,.4)}
#tt-welcome .sc-paper svg{position:absolute; inset:0; width:100%; height:100%}
#tt-welcome .sc-paper .cap{position:absolute; left:12px; bottom:10px; font-family:Fraunces,Georgia,serif; font-weight:700; font-size:14px; color:var(--wl-ink); line-height:1.25}
#tt-welcome .sc-paper .cap small{display:block; font-family:Inter,sans-serif; font-weight:500; font-size:9.5px; color:var(--wl-muted)}
#tt-welcome /* calendar (navy) */
.sc-cal{background:linear-gradient(160deg,#1c3350,#12253b); border-radius:18px; box-shadow:0 18px 30px -14px rgba(10,20,40,.6); color:#cdd7e6; padding:12px 12px 10px}
#tt-welcome .sc-cal .mo{font-family:Fraunces,Georgia,serif; font-weight:700; font-size:14px; text-align:center; color:#fff; margin-bottom:6px}
#tt-welcome .sc-cal .g{display:grid; grid-template-columns:repeat(7,1fr); gap:3px 0; text-align:center; font-size:9.5px; font-weight:600}
#tt-welcome .sc-cal .g i{font-style:normal; opacity:.55; font-size:8.5px}
#tt-welcome .sc-cal .g b{font-weight:600; line-height:17px}
#tt-welcome .sc-cal .g b.hl{background:linear-gradient(135deg,var(--wl-gold),var(--wl-gold2)); color:#3a2400; border-radius:50%; width:17px; margin:0 auto; font-weight:800}
#tt-welcome /* order card */
.sc-order{padding:16px 16px 12px}
#tt-welcome .sc-order .hd{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
#tt-welcome .sc-order h4{margin:0; font-size:15.5px; font-weight:800; letter-spacing:-.01em}
#tt-welcome .sc-order .nm{font-size:13.5px; font-weight:700; margin-top:1px}
#tt-welcome .sc-order .ty{font-size:11.5px; color:var(--wl-muted); margin-top:1px}
#tt-welcome .wl-pill{display:inline-block; padding:5px 11px; border-radius:99px; background:linear-gradient(135deg,#F7D27C,#EDB43E); color:#4a2f00; font-size:10.5px; font-weight:800; white-space:nowrap}
#tt-welcome .stp{display:flex; margin:14px 0 6px; position:relative; direction:ltr}
#tt-welcome .stp .st{flex:1; display:flex; flex-direction:column; align-items:center; font-size:8.5px; font-weight:600; color:var(--wl-muted); text-align:center; position:relative; line-height:1.25}
#tt-welcome .stp .st u{text-decoration:none; width:22px; height:22px; border-radius:50%; background:#D5D8DF; display:flex; align-items:center; justify-content:center; margin-bottom:5px; position:relative; z-index:2}
#tt-welcome .stp .st.dn u{background:linear-gradient(135deg,var(--wl-gold),var(--wl-gold2))}
#tt-welcome .stp .st u svg{width:12px; height:12px; stroke:#fff; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .stp .st:not(:last-child):before{content:""; position:absolute; top:10px; left:50%; width:100%; height:2.5px; background:#D5D8DF; z-index:1}
#tt-welcome .stp .st.dn:not(:last-child):before{background:var(--wl-gold)}
#tt-welcome .stp .st.dn + .st:not(.dn):before{background:#D5D8DF}
#tt-welcome .stp .st small{font-size:8px; font-weight:500; color:var(--wl-soft)}
#tt-welcome .inf{margin-top:8px; border-radius:12px; background:#F7F4EC; padding:4px 12px}
#tt-welcome .inf div{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10.5px; padding:6px 0; border-bottom:1px solid #E9E2D0}
#tt-welcome .inf div:last-child{border:0}
#tt-welcome .inf span{color:var(--wl-muted); display:flex; align-items:center; gap:7px}
#tt-welcome .inf span svg{width:13px; height:13px; stroke:var(--wl-muted); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .inf b{font-weight:700; color:var(--wl-ink)}
#tt-welcome /* tag */
.sc-tag{background:linear-gradient(160deg,#FBF4E3,#F3E7CB); border-radius:16px; border:1.5px dashed #CFB98A; box-shadow:0 14px 26px -14px rgba(80,55,10,.45); padding:16px 12px 10px}
#tt-welcome .sc-tag .hole{position:absolute; top:-12px; left:50%; width:22px; height:22px; margin-left:-11px; border-radius:50%; border:3.5px solid var(--wl-gold); background:var(--wl-cream)}
#tt-welcome .sc-tag h5{margin:0; font-family:Fraunces,Georgia,serif; font-size:13px; font-weight:700}
#tt-welcome .sc-tag .s{font-size:9px; color:var(--wl-muted); margin-bottom:6px}
#tt-welcome .sc-tag .r{display:flex; justify-content:space-between; font-size:9.5px; padding:2.5px 0; font-weight:500}
#tt-welcome .sc-tag .due{margin-top:7px; padding-top:6px; border-top:1.5px dashed #CFB98A; font-size:9px; font-weight:800; letter-spacing:.04em; color:var(--wl-gold-ink); text-transform:uppercase}
#tt-welcome /* tape */
.sc-tape{height:40px; border-radius:6px; background:
  repeating-linear-gradient(90deg, rgba(60,35,0,.55) 0 1.2px, transparent 1.2px 8px) bottom/100% 9px no-repeat,
  repeating-linear-gradient(90deg, rgba(60,35,0,.4) 0 1px, transparent 1px 4px) bottom/100% 5px no-repeat,
  linear-gradient(180deg,#F8D77A,#E7A92F 55%,#CF8C16); box-shadow:0 12px 20px -10px rgba(90,55,0,.55), inset 0 1px 0 rgba(255,255,255,.55); overflow:hidden}
#tt-welcome .sc-tape span{position:absolute; top:6px; font-size:12px; font-weight:800; color:#5b3700; font-family:Fraunces,Georgia,serif}
#tt-welcome .sc-tape:after{content:""; position:absolute; right:0; top:0; bottom:0; width:16px; background:linear-gradient(90deg,#D9A93F,#9c6a14); border-radius:0 6px 6px 0}
#tt-welcome /* spool */
.sc-spool svg{display:block; width:100%; height:100%}
#tt-welcome /* fabric */
.sc-fab svg{display:block; width:100%; height:100%; filter:drop-shadow(0 12px 14px rgba(15,30,40,.3))}
#tt-welcome /* customer card (measure slide) */
.sc-prof{padding:14px}
#tt-welcome .sc-prof .top{display:flex; align-items:center; gap:12px}
#tt-welcome .sc-prof .av{width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#F9D98B,#F1B94A); display:flex; align-items:center; justify-content:center}
#tt-welcome .sc-prof .av svg{width:26px; height:26px; fill:#D18A12}
#tt-welcome .sc-prof h4{margin:0; font-size:13.5px; font-weight:800; white-space:nowrap}
#tt-welcome .sc-prof .id{font-size:11px; color:var(--wl-soft); margin-top:1px}
#tt-welcome .sc-prof .dots{margin-inline-start:auto; letter-spacing:2px; color:var(--wl-soft); font-weight:800}
#tt-welcome .sc-prof .rows{margin-top:12px; border-radius:14px; background:#F8F5EC; border:1px solid #EDE5D2}
#tt-welcome .sc-prof .rw{display:flex; align-items:center; gap:9px; padding:10px 11px; font-size:11.5px; font-weight:600; white-space:nowrap; border-bottom:1px solid #EDE5D2}
#tt-welcome .sc-prof .rw:last-child{border:0}
#tt-welcome .sc-prof .rw svg.i{width:18px; height:18px; stroke:var(--wl-muted); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
#tt-welcome .sc-prof .rw em{font-style:normal; margin-inline-start:auto; font-size:10px; font-weight:500; color:var(--wl-soft)}
#tt-welcome .sc-prof .rw svg.c{width:12px; height:12px; stroke:var(--wl-soft); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none}
html.rtl #tt-welcome .sc-prof .rw svg.c, html.rtl #tt-welcome .wl-btn svg.ar{transform:scaleX(-1)}
#tt-welcome .sc-note{padding:13px 14px}
#tt-welcome .sc-note .ni{width:30px; height:30px; border-radius:10px; background:#FCEFD0; display:flex; align-items:center; justify-content:center; margin-bottom:6px}
#tt-welcome .sc-note .ni svg{width:17px; height:17px; stroke:#C7810F; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .sc-note .r{display:flex; justify-content:space-between; gap:10px; font-size:11px; padding:5px 0; border-bottom:1px solid #EFE8D6}
#tt-welcome .sc-note .r:last-child{border:0}
#tt-welcome .sc-note .r span{color:var(--wl-muted)}
#tt-welcome .sc-note .r b{font-weight:700}
#tt-welcome .sc-badge{width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#2b8580,#14504f); box-shadow:0 14px 22px -10px rgba(10,60,58,.7); display:flex; align-items:center; justify-content:center}
#tt-welcome .sc-badge svg{width:34px; height:34px; stroke:#fff; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome /* dashboard slide cards */
.sc-stat{padding:12px 14px}
#tt-welcome .sc-stat .t{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; white-space:nowrap}
#tt-welcome .sc-stat .t svg{width:17px; height:17px; stroke:var(--wl-gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .sc-stat .big{font-size:30px; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-top:6px}
#tt-welcome .sc-stat .lb{font-size:11px; color:var(--wl-muted); margin-top:1px}
#tt-welcome .sc-stat .up{position:absolute; right:12px; top:34px; background:#E4F5EE; color:#1b8a62; border-radius:10px; padding:5px 9px; font-size:11.5px; font-weight:800; text-align:center; line-height:1.15}
#tt-welcome .sc-stat .up small{display:block; font-size:8.5px; font-weight:500; color:#4c9c82}
#tt-welcome .bars{display:flex; align-items:flex-end; gap:12px; height:70px; margin-top:12px; padding:0 4px; border-bottom:1.5px solid #ECE5D3}
#tt-welcome .bars i{flex:1; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#8FB9B3,#B9D6D1); transform-origin:bottom; transform:scaleY(0); transition:transform .9s cubic-bezier(.2,1,.3,1); transition-delay:calc(var(--d,0) * 120ms + 700ms)}
#tt-welcome .wl-pane.on .bars i{transform:scaleY(1)}
#tt-welcome .bars i:last-child{background:linear-gradient(180deg,#2c7a76,#1b5a58)}
#tt-welcome .bx{display:flex; gap:12px; padding:5px 4px 0; font-size:9.5px; color:var(--wl-soft); font-weight:600}
#tt-welcome .bx span{flex:1; text-align:center}
#tt-welcome .sc-bal{background:linear-gradient(135deg,#FFF3D9,#FDE8BC); padding:12px 14px}
#tt-welcome .sc-bal .t{color:#6b4a10}
#tt-welcome .sc-trend{background:linear-gradient(160deg,#173a4d,#0f2836); color:#fff; border-radius:18px; box-shadow:0 18px 30px -14px rgba(5,25,35,.7); padding:12px 14px}
#tt-welcome .sc-trend .t{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; white-space:nowrap}
#tt-welcome .sc-trend .t svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .sc-trend svg.ln{width:100%; height:48px; margin-top:8px; overflow:visible}
#tt-welcome .sc-trend svg.ln path{fill:none; stroke:var(--wl-gold2); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:200; stroke-dashoffset:200; transition:stroke-dashoffset 1.4s ease .9s}
#tt-welcome .wl-pane.on .sc-trend svg.ln path{stroke-dashoffset:0}
#tt-welcome .sc-trend .big{font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:2px}
#tt-welcome .sc-trend .lb{font-size:10.5px; color:rgba(255,255,255,.7)}
#tt-welcome /* ── footer controls ── */
.wl-foot{position:relative; z-index:3; padding:6px 22px 22px; display:flex; flex-direction:column; gap:16px; align-items:center; direction:var(--wl-dir)}
#tt-welcome .wl-dots{display:flex; gap:8px}
#tt-welcome .wl-dots i{width:8px; height:8px; border-radius:99px; background:#DCD2BC; transition:all .35s cubic-bezier(.3,1.3,.5,1)}
#tt-welcome .wl-dots i.on{width:26px; background:linear-gradient(90deg,var(--wl-gold),var(--wl-gold2))}
#tt-welcome .wl-actions{display:flex; gap:12px; width:100%}
#tt-welcome .wl-btn{flex:1; min-height:56px; border-radius:99px; border:1.5px solid transparent; font-size:16.5px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:9px; transition:transform .15s, box-shadow .25s, opacity .2s; position:relative; overflow:hidden}
#tt-welcome .wl-btn:active{transform:scale(.97)}
#tt-welcome .wl-btn > *{position:relative; z-index:1}
#tt-welcome .wl-btn svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .wl-btn.pri{flex:1.5; color:#2b1b00; background:linear-gradient(135deg,#E3A02A,#F5C865); box-shadow:0 16px 28px -14px rgba(217,146,28,.95), 0 1px 0 rgba(255,255,255,.55) inset}
#tt-welcome .wl-btn.pri:after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); animation:wlShine 3.6s ease-in-out infinite 1.2s}
@keyframes wlShine{60%,100%{transform:translateX(120%)}
}
#tt-welcome .wl-btn.sec{background:rgba(255,255,255,.75); color:var(--wl-ink); border-color:#E5C27A}
#tt-welcome .wl-btn.sec[hidden]{display:none}
#tt-welcome .wl-btn.dis{opacity:.55; pointer-events:none}
#tt-welcome .wl-skipfoot[hidden]{display:none}
#tt-welcome .wl-skipfoot{flex:1; background:none; border:0; color:var(--wl-muted); font-weight:600; font-size:14px; padding:12px 6px; text-decoration:underline; text-decoration-color:#D8C9A5; text-underline-offset:5px}
#tt-welcome /* ── auth pane ── */
.wl-auth{align-items:stretch; padding-top:0}
#tt-welcome .wl-auth .lg{display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:6px}
#tt-welcome .wl-tile{width:84px; height:84px; border-radius:26px; background:linear-gradient(145deg,#F6C95F,#E0982A); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 30px -14px rgba(217,146,28,.9), inset 0 1px 0 rgba(255,255,255,.6); position:relative}
#tt-welcome .wl-tile:before{content:""; position:absolute; inset:6px; border-radius:20px; border:1.5px dashed rgba(90,55,0,.45)}
#tt-welcome .wl-tile img{width:50px; height:50px; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(90,55,0,.35)); background:#12233a; border-radius:14px; padding:6px}
#tt-welcome .wl-auth h2{font-family:Fraunces,Georgia,serif; font-size:31px; font-weight:700; letter-spacing:-.02em; margin:14px 0 2px}
#tt-welcome .wl-auth .tg{font-size:14.5px; color:var(--wl-muted); margin:0}
#tt-welcome .wl-gbtn{margin-top:20px; width:100%; min-height:58px; border-radius:20px; background:#fff; border:1.5px solid var(--wl-line); font-size:16px; font-weight:700; color:var(--wl-ink); display:flex; align-items:center; justify-content:center; gap:12px; box-shadow:0 14px 26px -18px rgba(60,40,10,.5); transition:transform .15s}
#tt-welcome .wl-gbtn:active{transform:scale(.985)}
#tt-welcome .wl-gbtn svg{width:22px; height:22px}
#tt-welcome .wl-note{text-align:center; font-size:12px; color:var(--wl-soft); margin:10px 6px 0; line-height:1.5}
#tt-welcome .wl-or{display:flex; align-items:center; gap:14px; color:var(--wl-soft); font-size:13px; margin:14px 0}
#tt-welcome .wl-or:before, #tt-welcome .wl-or:after{content:""; flex:1; height:1px; background:var(--wl-line)}
#tt-welcome .wl-fld{position:relative; margin-bottom:12px}
#tt-welcome .wl-fld > svg.lead{position:absolute; top:50%; inset-inline-start:16px; width:20px; height:20px; transform:translateY(-50%); stroke:var(--wl-soft); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none}
#tt-welcome .wl-fld input{width:100%; height:56px; border-radius:18px; border:1.5px solid var(--wl-line); background:rgba(255,255,255,.8); padding-inline:50px 48px; font-size:16px; font-family:inherit; color:var(--wl-ink); outline:none; transition:border-color .2s, box-shadow .2s; direction:ltr; text-align:start}
html.rtl #tt-welcome .wl-fld input::placeholder{text-align:right}
#tt-welcome .wl-fld input:focus{border-color:var(--wl-gold); box-shadow:0 0 0 4px rgba(243,194,94,.28)}
#tt-welcome .wl-fld input::placeholder{color:#9AA3B3}
#tt-welcome .wl-fld .eye{position:absolute; top:50%; inset-inline-end:8px; transform:translateY(-50%); width:40px; height:40px; background:none; border:0; display:flex; align-items:center; justify-content:center}
#tt-welcome .wl-fld .eye svg{width:20px; height:20px; stroke:var(--wl-soft); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .wl-fld.err input{border-color:#D9534F; animation:wlShake .35s}
@keyframes wlShake{25%{transform:translateX(-5px)}
75%{transform:translateX(5px)}
}
#tt-welcome .wl-forgot{align-self:flex-end; background:none; border:0; color:var(--wl-navy); font-weight:700; font-size:13.5px; padding:2px 0 8px}
#tt-welcome .wl-msg{min-height:18px; font-size:13px; text-align:center; margin:0 0 8px; color:#C0392B; font-weight:600}
#tt-welcome .wl-msg.ok{color:#1b8a62}
#tt-welcome .wl-auth .wl-btn.pri{flex:none; width:100%}
#tt-welcome .wl-guest{margin-top:12px; width:100%; min-height:54px; border-radius:99px; background:transparent; border:1.5px solid #E5C27A; color:var(--wl-ink); font-size:16px; font-weight:700}
#tt-welcome .wl-guest:active{transform:scale(.98)}
#tt-welcome .wl-switch{text-align:center; margin:16px 0 6px; font-size:14px; color:var(--wl-muted)}
#tt-welcome .wl-switch button{background:none; border:0; color:var(--wl-gold); font-weight:800; font-size:14px; padding:4px 2px}
#tt-welcome .wl-spin{width:20px; height:20px; border-radius:50%; border:3px solid rgba(43,27,0,.25); border-top-color:#2b1b00; animation:wlSpin .7s linear infinite}
@keyframes wlSpin{to{transform:rotate(360deg)}
}
@media (max-height:700px){#tt-welcome .wl-h{font-size:27px}
#tt-welcome .wl-sub{font-size:14.5px; margin-top:8px}
#tt-welcome .wl-stage{max-width:300px}
#tt-welcome .wl-tile{width:68px; height:68px; border-radius:22px}
#tt-welcome .wl-tile img{width:40px; height:40px}
#tt-welcome .wl-auth h2{font-size:26px; margin-top:10px}
#tt-welcome .wl-lang{min-height:58px}
}
@media (prefers-reduced-motion:reduce){#tt-welcome *{animation:none !important; transition-duration:.01ms !important}
#tt-welcome .wl-pane .rv, #tt-welcome .wl-scene .pop{opacity:1 !important; transform:none !important}
#tt-welcome .bars i{transform:none !important}
#tt-welcome .sc-trend svg.ln path{stroke-dashoffset:0 !important}
}
#tt-welcome .wl-top .wl-brand{transition:opacity .3s}
#tt-welcome .wl-shell.auth .wl-brand{opacity:0}
#tt-welcome .wl-sub, #tt-welcome .wl-note, #tt-welcome .wl-sub *{color:var(--wl-muted)}

body.tt-wl-open #hamburger-menu, body.tt-wl-open #hamburger-overlay{visibility:hidden !important}

/* ── auth pane v2: Google + guest only ── */
#tt-welcome .wl-auth{justify-content:center; gap:0; padding-bottom:18px}
#tt-welcome .wl-auth .lg{margin-top:0}
#tt-welcome .wl-auth .wl-tile{width:92px; height:92px; border-radius:30px; animation:wlFloat 4.5s ease-in-out infinite}
#tt-welcome .wl-auth .wl-tile img{width:54px; height:54px}
#tt-welcome .wl-auth .hi{margin:20px 0 0; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--wl-gold)}
#tt-welcome .wl-auth h2{margin:4px 0 6px; font-size:34px}
#tt-welcome .wl-auth .tg{font-size:15px; max-width:260px; line-height:1.45}
#tt-welcome .wl-actions-auth{display:flex; flex-direction:column; margin-top:34px}
#tt-welcome .wl-actions-auth .wl-gbtn{margin-top:0; min-height:60px; border-radius:22px; box-shadow:0 16px 30px -18px rgba(60,40,10,.55), 0 1px 0 #fff inset}
#tt-welcome .wl-actions-auth .wl-or{margin:16px 0}
#tt-welcome .wl-actions-auth .wl-guest{margin-top:0; min-height:60px; border-radius:22px; display:flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(145deg,#F6C95F,#E8A93A); border:0; color:#2b1b00; box-shadow:0 16px 28px -16px rgba(217,146,28,.9), inset 0 1px 0 rgba(255,255,255,.55); transition:transform .15s}
#tt-welcome .wl-guest svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .wl-auth .wl-msg{min-height:20px; margin:12px 0 0}
#tt-welcome .wl-auth .wl-note{display:flex; align-items:center; justify-content:center; gap:7px; margin:10px 10px 0}
#tt-welcome .wl-auth .wl-note svg.lead{position:static; transform:none; width:15px; height:15px; flex:none; stroke:var(--wl-soft); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
#tt-welcome .wl-hint{text-align:center; font-size:12.5px; color:var(--wl-soft); margin:6px 10px 0}
#tt-welcome .wl-spin.dark{border-color:rgba(14,26,51,.18); border-top-color:var(--wl-ink)}
#tt-welcome .wl-gbtn.dis, #tt-welcome .wl-guest.dis{opacity:.6; pointer-events:none}
@keyframes wlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-height:700px){
  #tt-welcome .wl-auth .wl-tile{width:72px; height:72px; border-radius:24px}
  #tt-welcome .wl-auth .wl-tile img{width:42px; height:42px}
  #tt-welcome .wl-auth .hi{margin-top:12px}
  #tt-welcome .wl-auth h2{font-size:28px}
  #tt-welcome .wl-actions-auth{margin-top:22px}
  #tt-welcome .wl-actions-auth .wl-gbtn, #tt-welcome .wl-actions-auth .wl-guest{min-height:54px}
}