/* =====================================================================================================================
   owns.ai  —  THE PORTAL  (user.owns.ai)

   The sign-in and workspace chooser that the Android app's web view opens. One glass card on the owns.ai ocean palette
   (aqua -> ocean -> deep blue on cool slate), both themes, built for a phone first: safe-area insets, 16px inputs (no
   iOS zoom), 52px tap targets, nothing that needs hover.

   Coded By Darko G.
   ===================================================================================================================== */

:root,
[data-theme="dark"] {
    --bg: #0B1220;
    --surface: rgba(17, 26, 44, .78);
    --surface-solid: #111A2C;
    --surface-2: #16213A;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .14);
    --line-accent: rgba(0, 212, 170, .24);
    --text: #F1F5F9;
    --text-2: #CBD5E1;
    --muted: #94A3B8;
    --faint: #64748B;
    --brand: #38BDF8;
    --ink: #5EEAD4;
    --danger: #F87171;
    --success: #34D399;
    --warning: #FBBF24;
    --grad: linear-gradient(135deg, #00D4AA 0%, #009BDB 50%, #0063D2 100%);
    --grad-text: linear-gradient(100deg, #2EE6C0 0%, #38B6F0 45%, #60A5FA 100%);
    --input: rgba(255, 255, 255, .04);
    --shadow: 0 30px 80px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04) inset;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
    color-scheme: dark;
}
[data-theme="light"] {
    --bg: #F4FBFD;
    --surface: rgba(255, 255, 255, .82);
    --surface-solid: #FFFFFF;
    --surface-2: #F8FAFC;
    --border: rgba(15, 23, 42, .08);
    --border-strong: rgba(15, 23, 42, .14);
    --line-accent: rgba(0, 99, 210, .16);
    --text: #0F172A;
    --text-2: #334155;
    --muted: #64748B;
    --faint: #94A3B8;
    --brand: #0063D2;
    --ink: #0063D2;
    --danger: #DC2626;
    --success: #059669;
    --warning: #B45309;
    --grad-text: linear-gradient(100deg, #00B894 0%, #009BDB 45%, #0063D2 100%);
    --input: #FFFFFF;
    --shadow: 0 24px 60px -18px rgba(0, 99, 210, .22), 0 0 0 1px rgba(255, 255, 255, .9) inset;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; min-height: 100%; min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--font); font-size: 16px; line-height: 1.55;
       color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden;
       padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
[data-theme="light"] body { background: var(--bg) linear-gradient(180deg, #F0FDFA 0%, #F0F9FF 50%, #EFF6FF 100%) fixed; }
a { color: var(--brand); text-decoration: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(0, 155, 219, .55); outline-offset: 3px; border-radius: 10px; }

/* ---- ambience: three slow orbs and a faint grid that fades out ------------------------------------------------------- */
.pt-orbs { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.pt-orbs span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; animation: pt-float 22s ease-in-out infinite alternate; }
.pt-orbs span:nth-child(1) { width: 460px; height: 460px; top: -160px; right: -140px; background: linear-gradient(135deg, #00D4AA, #0063D2); }
.pt-orbs span:nth-child(2) { width: 400px; height: 400px; bottom: -160px; left: -140px; background: linear-gradient(135deg, #60A5FA, #00D4AA); animation-duration: 26s; }
.pt-orbs span:nth-child(3) { width: 260px; height: 260px; top: 42%; left: 50%; background: linear-gradient(135deg, #009BDB, #00D4AA); opacity: .16; animation-duration: 30s; }
[data-theme="light"] .pt-orbs span { opacity: .45; }
[data-theme="light"] .pt-orbs span:nth-child(3) { opacity: .2; }
@keyframes pt-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.1); } }
.pt-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
           background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 44px 44px;
           -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 35%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 35%, #000 20%, transparent 75%); }

/* ---- top bar and footer ------------------------------------------------------------------------------------------------ */
.pt-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.pt-logo img { display: block; height: 22px; width: auto; }
.pt-logo-light, [data-theme="light"] .pt-logo-dark { display: none !important; }
[data-theme="light"] .pt-logo-light { display: block !important; }
.pt-icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center;
               backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: transform .2s, border-color .2s; }
.pt-icon-btn:active { transform: scale(.92); }
.pt-icon-btn i.is-spinning { animation: pt-spin-in .5s cubic-bezier(.4, 0, .2, 1); }
@keyframes pt-spin-in { from { opacity: 0; transform: rotate(-90deg) scale(.5); } }
.pt-foot { padding: 18px 20px 22px; text-align: center; font-size: .8rem; color: var(--faint); }
.pt-foot i { margin-right: 4px; }

/* ---- the card ------------------------------------------------------------------------------------------------------------ */
.pt-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 16px 24px; }
.pt-card { position: relative; width: 100%; max-width: 440px; padding: 34px 30px 30px; border-radius: 28px; isolation: isolate;
           background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(150deg, rgba(0, 212, 170, .55), rgba(255, 255, 255, .04) 35%, rgba(255, 255, 255, .03) 65%, rgba(0, 99, 210, .5)) border-box;
           border: 1px solid transparent; box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
           animation: pt-rise .6s var(--ease) both; }
@keyframes pt-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.pt-view { animation: pt-fade .35s var(--ease) both; }
@keyframes pt-fade { from { opacity: 0; transform: translateY(8px); } }

.pt-mark { width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 18px; display: grid; place-items: center; color: #fff; font-size: 1.5rem; background: var(--grad);
           box-shadow: 0 16px 36px -14px rgba(0, 99, 210, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pt-kicker { display: block; text-align: center; font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.pt-card h1 { margin: 0 0 6px; text-align: center; font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.pt-card h1 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-lead { margin: 0 0 24px; text-align: center; color: var(--muted); font-size: .95rem; }

/* ---- fields ----------------------------------------------------------------------------------------------------------------- */
.pt-field { position: relative; margin-bottom: 14px; }
.pt-field > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; transition: color .2s; }
.pt-input { width: 100%; height: 54px; padding: 0 16px 0 46px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--input); color: var(--text);
            font-size: 16px; outline: none; transition: border-color .2s, box-shadow .3s var(--ease); -webkit-appearance: none; appearance: none; }
.pt-input::placeholder { color: var(--faint); }
.pt-input:focus { border-color: rgba(0, 155, 219, .7); box-shadow: 0 0 0 4px rgba(0, 155, 219, .14), 0 0 28px -6px rgba(0, 155, 219, .55); }
.pt-field:focus-within > i { color: var(--brand); }
.pt-input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: inset 0 0 0 40px var(--surface-solid); caret-color: var(--text); }
.pt-field .pt-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
.pt-field .pt-eye + .pt-input, .pt-input.has-eye { padding-right: 52px; }
.pt-row { display: flex; justify-content: flex-end; margin: -4px 0 18px; }
.pt-link { background: none; border: 0; padding: 6px 2px; color: var(--brand); font-weight: 600; font-size: .9rem; cursor: pointer; }

/* ---- buttons ---------------------------------------------------------------------------------------------------------------- */
.pt-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 0; border-radius: 999px; overflow: hidden; isolation: isolate;
          font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; cursor: pointer; transition: transform .25s var(--ease), box-shadow .3s, opacity .2s; }
.pt-btn:active { transform: scale(.97); }
.pt-btn-primary { color: #fff; background: var(--grad); background-size: 200% 200%; animation: pt-shift 8s ease infinite;
                  box-shadow: 0 12px 32px -10px rgba(0, 99, 210, .65), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pt-btn-primary::before { content: ""; position: absolute; inset: 0; left: -100%; width: 100%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: pt-sheen 3.2s infinite; }
@keyframes pt-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pt-sheen { 0% { left: -100%; } 60%, 100% { left: 100%; } }
.pt-btn-ghost { color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); margin-top: 10px; }
.pt-btn[disabled] { opacity: .65; pointer-events: none; }
.pt-btn.is-busy { color: transparent; }
.pt-btn.is-busy::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); border-right-color: transparent; animation: pt-spin .7s linear infinite; }
.pt-btn-ghost.is-busy::after { border-color: var(--text); border-right-color: transparent; }

/* ---- messages ----------------------------------------------------------------------------------------------------------------- */
.pt-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px; border-radius: 14px; font-size: .9rem; line-height: 1.45; animation: pt-fade .3s var(--ease); }
.pt-alert i { margin-top: 3px; }
.pt-alert-error { background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); color: var(--text); }
.pt-alert-error i { color: var(--danger); }
.pt-alert-info { background: rgba(0, 155, 219, .1); border: 1px solid var(--line-accent); color: var(--text); }
.pt-alert-info i { color: var(--brand); }
.pt-note { margin: 20px 0 0; text-align: center; font-size: .85rem; color: var(--muted); }
.pt-note a { font-weight: 600; }

/* ---- the chooser --------------------------------------------------------------------------------------------------------------- */
.pt-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.pt-ws { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 14px; border-radius: 18px; text-align: left; cursor: pointer;
         background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: transform .25s var(--ease), border-color .25s, box-shadow .3s; }
.pt-ws:hover, .pt-ws:focus-visible { border-color: var(--line-accent); box-shadow: 0 12px 30px -16px rgba(0, 155, 219, .6); }
.pt-ws:active { transform: scale(.98); }
.pt-ws-logo { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; overflow: hidden; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
              background: var(--ws, #009BDB); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 20px -10px var(--ws, #009BDB); }
.pt-ws-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.pt-ws-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-ws-txt b { font-family: var(--font-display); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-ws-txt small { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-ws-go { color: var(--faint); transition: transform .25s var(--ease), color .2s; }
.pt-ws:hover .pt-ws-go { color: var(--brand); transform: translateX(3px); }

.pt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 16px; }

.pt-boot { display: grid; place-items: center; min-height: 260px; }
.pt-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--brand); animation: pt-spin .8s linear infinite; }
@keyframes pt-spin { to { transform: rotate(360deg); } }
.pt-noscript { position: fixed; inset: auto 16px 16px; padding: 14px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--border-strong); text-align: center; }

@media (max-width: 480px) {
    .pt-card { padding: 28px 20px 22px; border-radius: 24px; }
    .pt-card h1 { font-size: 1.45rem; }
    .pt-top { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}