/* Tasklio — Auth screens (login / register) */

.auth-body { height: 100vh; overflow: hidden; }

.auth-shell {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    height: 100%;
}

/* Left: form panel */
.auth-panel {
    display: flex; flex-direction: column;
    padding: 48px 56px;
    max-width: 560px; width: 100%;
    margin: 0 auto;
    justify-content: center;
    position: relative;
}
.auth-brand {
    position: absolute; top: 40px; left: 56px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 18px;
}
.auth-theme { position: absolute; top: 36px; right: 40px; }

.auth-head { margin-bottom: 28px; }
.auth-head h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.04em; }
.auth-head p { margin-top: 8px; color: var(--text-sub-600); }

.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-form .btn { height: 48px; margin-top: 4px; }

.auth-alt { margin-top: 24px; text-align: center; color: var(--text-sub-600); font-size: 14px; }
.auth-alt a { color: var(--text-strong-950); font-weight: 500; }
.auth-alt a:hover { color: var(--accent); }

.auth-forgot { align-self: flex-end; font-size: 13px; color: var(--text-sub-600); }
.auth-forgot:hover { color: var(--accent); }

/* Brand logo (image, theme-swapped) */
.auth-brand .lp-logo { height: 30px; width: auto; display: block; }
.auth-brand .lp-logo--light { display: none; }
[data-theme="light"] .auth-brand .lp-logo--dark { display: none; }
[data-theme="light"] .auth-brand .lp-logo--light { display: block; }

/* Right: animated brand panel */
.auth-aside {
    position: relative; overflow: hidden;
    background: linear-gradient(155deg, #2a1c6b 0%, #1a1147 46%, #0b0c14 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 56px; border-left: 1px solid var(--stroke-white-0);
}
.auth-aurora {
    position: absolute; inset: -30%; pointer-events: none; filter: blur(26px);
    background:
        radial-gradient(38% 38% at 22% 26%, #7c5cff66, transparent 70%),
        radial-gradient(34% 34% at 82% 30%, #4a2fd066, transparent 70%),
        radial-gradient(40% 40% at 60% 82%, #6c47ff55, transparent 70%);
    animation: authAurora 18s ease-in-out infinite alternate;
}
@keyframes authAurora {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(3%, -3%) scale(1.08); }
    100% { transform: translate(-3%, 2%) scale(1.03); }
}
.auth-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(72% 60% at 50% 38%, #000 40%, transparent 100%);
    mask-image: radial-gradient(72% 60% at 50% 38%, #000 40%, transparent 100%);
}

/* Login preview — the real app board (mirrors the product) */
.auth-stage { position: absolute; inset: 0; display: grid; place-content: center; align-content: center;
    padding-bottom: 20vh; pointer-events: none; }
.auth-dash { position: relative; width: min(96%, 850px); height: 486px; border-radius: 18px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 48px 98px rgba(0,0,0,.64);
    display: flex; background: var(--bg-white-0);
    animation: adFloat 9s ease-in-out infinite; }
@keyframes adFloat {
    0%,100% { transform: perspective(2000px) rotateY(-6deg) rotateX(2.5deg) translateY(0); }
    50%     { transform: perspective(2000px) rotateY(-3.5deg) rotateX(1.5deg) translateY(-10px); }
}
/* board pieces (mirror the landing hero .ha-* / the real app) */
.ha-rail { width: 50px; flex-shrink: 0; background: var(--bg-black); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; }
.ha-logo { display: grid; place-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); }
.ha-logo svg { width: 16px; height: 16px; }
.ha-rico { color: var(--icon-soft-400); } .ha-rico .ico { width: 18px; height: 18px; }
.ha-panel { width: 156px; flex-shrink: 0; background: var(--bg-white-0); border-right: 1px solid var(--stroke-soft-200); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.ha-panel-h { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; color: var(--text-strong-950); }
.ha-plus { color: var(--text-soft-400); }
.ha-search { height: 28px; border-radius: 7px; background: var(--bg-page); border: 1px solid var(--stroke-soft-200); }
.ha-gt { font-size: 11px; color: var(--text-soft-400); margin-top: 4px; }
.ha-proj { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-sub-600); padding: 6px; border-radius: 7px; }
.ha-proj.on { background: var(--bg-sub-300); color: var(--text-strong-950); }
.ha-proj.is-added { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s ease, opacity .4s ease, padding .4s ease; }
.ha-proj.is-added.show { max-height: 34px; opacity: 1; padding-top: 6px; padding-bottom: 6px; }
.ha-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ha-star { margin-left: auto; color: var(--accent); font-size: 11px; }
.ha-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-page); }
.ha-top { height: 44px; flex-shrink: 0; border-bottom: 1px solid var(--stroke-soft-200); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: var(--bg-white-0); }
.ha-crumb { font-size: 13px; font-weight: 600; color: var(--text-strong-950); }
.ha-me { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.ha-board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 12px; overflow: hidden; align-content: start; }
.ha-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ha-col-h { font-size: 12px; font-weight: 600; color: var(--text-sub-600); display: flex; gap: 6px; align-items: center; }
.ha-col-h span { background: var(--bg-sub-300); border-radius: var(--r-full); padding: 0 6px; font-size: 11px; }
.ha-card { background: var(--bg-white-0); border: 1px solid var(--stroke-soft-200); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 6px;
    transition: transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s, border-color .3s; }
.ha-card.grab { box-shadow: 0 18px 36px rgba(0,0,0,.5); border-color: var(--accent); position: relative; z-index: 5; }
.ha-card-top { display: flex; }
.ha-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-full); }
.t-red { background: var(--red-a10); color: var(--red-300); }
.t-sky { background: var(--sky-a10); color: var(--sky-500); }
.t-yellow { background: var(--yellow-a10); color: var(--yellow-400); }
.t-purple { background: #cac0ff1a; color: var(--purple-200); }
.ha-card-title { font-size: 12px; font-weight: 600; color: var(--text-strong-950); }
.ha-l { height: 6px; border-radius: 3px; background: var(--bg-sub-300); }
.ha-prog { height: 5px; border-radius: 3px; background: var(--bg-sub-300); overflow: hidden; }
.ha-prog span { display: block; height: 100%; background: var(--accent); }
.ha-card-foot { display: flex; }
.ha-av { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-sub-300); border: 2px solid var(--bg-white-0); margin-left: -6px; }
.ha-av:first-child { margin-left: 0; }
.ha-card-foot .ha-av:nth-child(1) { background: linear-gradient(135deg, #6c47ff, #ff97a0); }
.ha-card-foot .ha-av:nth-child(2) { background: linear-gradient(135deg, #47c2ff, #cac0ff); }
.ha-card-foot .ha-av:nth-child(3) { background: linear-gradient(135deg, #c2f5da, #dff589); }

/* Animated cursor */
.ad-cursor { position: absolute; top: 0; left: 0; z-index: 8; width: 18px; height: 18px; pointer-events: none;
    transform: translate(210px, 200px); transition: transform .9s cubic-bezier(.5,0,.25,1); }
.ad-cursor svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.ad-cursor::after { content: ""; position: absolute; left: -3px; top: -3px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #a48bff; opacity: 0; transform: scale(.3); }
.ad-cursor.is-click::after { animation: adClick .42s ease-out; }
.ad-cursor.is-click svg { animation: adPress .42s ease; }
@keyframes adClick { 0% { opacity: .85; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes adPress { 0%,100% { transform: scale(1); } 40% { transform: scale(.82); } }

.auth-aside-copy { position: relative; z-index: 2; }
.auth-quote { position: relative; font-size: 22px; line-height: 1.5; letter-spacing: -0.03em; max-width: 460px; color: #fff; }
.auth-quote-by { position: relative; margin-top: 16px; color: rgba(255,255,255,.7); }

@media (prefers-reduced-motion: reduce) { .auth-aurora, .auth-dash { animation: none; } }
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-panel { padding: 96px 24px 24px; }
    .auth-brand { left: 24px; }
}