@charset "UTF-8";
/*=============== GOOGLE FONTS ===============*/
/* Loaded via a conditional in instead of @import —
@import blocks CSS parsing on a second network round-trip; a fetches in
parallel with this stylesheet and is skipped entirely during silent session checks. */
/*=============== VARIABLES CSS ===============*/
:root {
--first-color: hsl(248, 90%, 66%);
--second-color: hsl(258, 85%, 58%);
--title-color: hsl(0, 0%, 100%);
--text-color: hsl(230, 20%, 94%);
--text-muted: hsl(230, 15%, 80%);
--body-color: hsl(240, 45%, 12%);
--body-font: "Poppins", sans-serif;
--h2-font-size: 1.25rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
--font-medium: 500;
--font-semi-bold: 600;
--glass-bg: hsla(230, 45%, 96%, 0.08);
--glass-bg-strong: hsla(230, 45%, 96%, 0.14);
--glass-bg-hover: hsla(230, 45%, 96%, 0.20);
--glass-border: hsla(230, 60%, 96%, 0.20);
--glass-blur: 22px;
--glass-shadow: 0 8px 32px hsla(250, 60%, 5%, 0.35);
--danger-color: hsl(4, 90%, 68%);
--success-color: hsl(150, 70%, 55%);
}
@media screen and (min-width: 1024px) {
:root {
--h2-font-size: 1.75rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
* { box-sizing: border-box; padding: 0; margin: 0; }
html { scroll-behavior: smooth; width: 100%; overflow-x: hidden; }
body {
background-color: var(--body-color);
font-family: var(--body-font);
color: var(--text-color);
min-height: 100vh;
width: 100%;
overflow-x: hidden;
position: relative;
}
/*=============== DISABLE LONG-PRESS / TEXT-SELECT CALLOUT ===============*/
/* Right-click is already blocked in JS (main.js). This stops the mobile
long-press menu (copy/select/save-image) from popping up too, while
still letting people select/copy text inside actual form fields. */
html, body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
input, textarea, [contenteditable="true"] {
-webkit-touch-callout: default;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
img, a, button {
-webkit-touch-callout: none;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: hsl(224, 45%, 14%); /* solid dark blue */
}
input, button {
font-family: var(--body-font);
border: none;
outline: none;
color: inherit;
}
button { cursor: pointer; background: none; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
/*=============== GLASS PRIMITIVE ===============*/
.glass, .glass-card, .dash-card, .oauth-scope-card, .crop-overlay-inner,
.edit-pass-box, .dashboard-nav, .app-loader .shimmer-card,
.dob-hint {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
/* Steps live INSIDE an already-blurred .glass-card. Giving them their own
backdrop-filter stacks a second blur on top of the first and compounds
the translucent fill into a near-opaque white/foggy block — this is why
the step content used to render as a solid white box instead of glass.
No backdrop-filter here; a soft tint + hairline border is enough since
the real glass blur already comes from the parent card. */
.step-wrapper .step {
background: hsla(0, 0%, 100%, 0.03);
border: 1px solid var(--glass-border);
border-radius: 1rem;
padding: 1rem 1.1rem;
}
html[data-theme="light"] .step-wrapper .step {
background: hsla(0, 0%, 100%, 0.25);
}
/*=============== SHIMMER LOADER ===============*/
.app-loader {
position: fixed; inset: 0; display: grid; place-items: center;
background: transparent; z-index: 999; transition: opacity .4s ease;
}
.shimmer-card {
width: min(90vw, 340px); padding: 2rem; border-radius: 1.25rem;
box-shadow: var(--glass-shadow);
display: grid; justify-items: center; row-gap: .9rem;
}
.shimmer-circle { width: 64px; height: 64px; border-radius: 50%; }
.shimmer-line { height: 14px; border-radius: 8px; align-self: flex-start; width: 100%; }
.shimmer { position: relative; overflow: hidden; background: hsla(230, 40%, 90%, 0.18); }
.shimmer::after {
content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, hsla(0,0%,100%,.35), transparent);
animation: shimmer-sweep 1.4s infinite;
}
@keyframes shimmer-sweep { 100% { transform: translateX(100%); } }
/*=============== LAYOUT ===============*/
/* The hero image is a fixed, full-viewport backdrop — it always fills the
entire screen edge to edge, on every breakpoint, with no colored gutter
showing on the sides. The glass card floats on top of it and is
positioned per breakpoint below (centered on mobile, docked right on
tablet/desktop). */
.login__inputs { display: grid; }
.login__content {
position: relative;
min-height: 100vh;
min-height: 100dvh; /* accounts for mobile browser chrome so the card doesn't sit pinned to the top */
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.login__img {
position: fixed; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: .85;
z-index: 0;
}
html[data-theme="light"] .login__img { opacity: 1; }
.auth-card-stack {
position: relative;
z-index: 1;
width: min(92vw, 420px);
margin: 1.5rem 0.75rem;
display: flex;
flex-direction: column;
align-items: flex-end; /* legal links sit at the card's right edge */
}
.glass-card {
position: relative;
z-index: 1;
width: 100%;
padding: 2rem;
border-radius: 1.25rem;
overflow: hidden auto;
max-height: 92dvh;
box-shadow: var(--glass-shadow);
animation: card-rise .5s cubic-bezier(.22,1,.36,1);
}
.glass-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(150deg, hsla(0,0%,100%,.10), transparent 40%);
}
.login__form, .oauth-form { display: grid; row-gap: 1.25rem; position: relative; z-index: 1; }
.oauth-form { row-gap: .85rem; }
@keyframes card-rise {
from { opacity: 0; transform: translateY(18px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-left {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
/*=============== LEGAL LINKS (just below the glass card, outside it) ===============*/
.legal-links-row {
margin-top: 1rem;
padding-bottom: env(safe-area-inset-bottom, 0px);
display: flex;
align-items: center;
gap: .5rem;
}
.legal-link-btn {
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: #000;
transition: color .2s ease;
}
.legal-link-btn:hover { color: #000; text-decoration: underline; }
.legal-link-sep { color: #000; font-size: var(--smaller-font-size); }
/*=============== CONNECTING STATE ===============*/
.connecting-state { display: none; text-align: center; row-gap: .75rem; justify-items: center; padding-top: 1.75rem; padding-bottom: 1rem; }
.connecting-state.is-visible { display: grid; }
.connecting-spinner {
width: 34px; height: 34px; border-radius: 50%;
border: 3px solid hsla(248, 90%, 66%, .25);
border-top-color: var(--first-color);
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/*=============== TYPOGRAPHY ===============*/
.login__title { color: var(--title-color); font-size: var(--h2-font-size); margin-bottom: 0.25rem; font-weight: var(--font-semi-bold); }
.login__title span {
background: linear-gradient(135deg, var(--first-color), hsl(199, 90%, 62%));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.login__description { font-size: var(--small-font-size); color: var(--text-muted); }
/*=============== INPUTS ===============*/
.login__inputs { row-gap: 0.75rem; }
.login__label { display: block; color: var(--title-color); font-size: var(--small-font-size); font-weight: var(--font-semi-bold); margin-bottom: 0.25rem; }
.login__label.step-gap { margin-top: 1rem; }
.login__input {
width: 100%; padding: 14px 12px; border-radius: 10px;
border: 1.5px solid var(--glass-border);
background-color: hsla(230, 45%, 96%, 0.06);
color: var(--title-color);
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.login__input::placeholder { color: var(--text-muted); }
.login__input:focus, .login__input:valid {
border-color: var(--first-color);
background-color: hsla(230, 45%, 96%, 0.10);
box-shadow: 0 0 0 3px hsla(248, 90%, 66%, .18);
}
.login__box { position: relative; }
.login__box .login__input { padding-right: 36px; }
.login__eye {
width: max-content; height: max-content; position: absolute;
right: 0.75rem; top: 0; bottom: 0; margin: auto 0;
font-size: 1.25rem; cursor: pointer; color: var(--text-muted); transition: color .2s;
}
.login__eye:hover { color: var(--first-color); }
.login__check { display: flex; column-gap: 0.5rem; align-items: center; }
/*=============== BUTTONS ===============*/
.login__buttons { display: flex; gap: 0.75rem; }
.login__button {
width: 100%; padding: 14px 2rem; border-radius: 10px;
background: linear-gradient(135deg, var(--first-color), var(--second-color));
color: #fff; font-size: var(--small-font-size); font-weight: var(--font-semi-bold);
box-shadow: 0 8px 24px hsla(250, 80%, 45%, 0.35);
text-align: center;
transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease;
}
.login__button:hover { transform: translateY(-1px); box-shadow: 0 10px 28px hsla(250, 80%, 45%, 0.45); }
.login__button:active { transform: scale(.98); }
.login__button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.login__button-ghost {
background: var(--glass-bg); border: 1.5px solid var(--glass-border); color: var(--title-color); box-shadow: none;
}
.login__button-ghost:hover { background: var(--glass-bg-hover); }
.login__forgot {
font-size: var(--smaller-font-size); font-weight: var(--font-semi-bold);
color: var(--first-color); background: none; border: none; padding: 0; cursor: pointer;
}
.text-btn {
font-size: var(--smaller-font-size); font-weight: var(--font-semi-bold);
color: var(--first-color); text-align: center; padding: .5rem; width: 100%;
}
.text-btn-logout {
display: block; text-align: center; font-size: var(--smaller-font-size);
font-weight: var(--font-semi-bold); color: var(--danger-color); padding: .6rem; border-radius: 10px;
transition: background .2s;
}
.text-btn-logout:hover { background: hsla(4, 90%, 68%, .1); }
/*=============== ERROR / STATUS ===============*/
.form-error { font-size: var(--smaller-font-size); color: var(--danger-color); display: none; }
.form-error:not(:empty) { display: block; }
.form-status { font-size: var(--smaller-font-size); color: var(--success-color); display: none; }
.form-status:not(:empty) { display: block; }
/*=============== SIGNUP STEP WIZARD ===============*/
.step-indicator { display: flex; justify-content: center; column-gap: .5rem; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: hsla(230, 30%, 90%, .25); transition: background .3s, transform .3s, box-shadow .3s; }
.step-dot.active { background: var(--first-color); transform: scale(1.3); box-shadow: 0 0 10px hsla(248, 90%, 66%, .7); }
.step-wrapper { position: relative; min-height: 96px; }
.step { display: none; animation: fade-in .3s ease; }
.step.active { display: block; }
.optional-tag { color: var(--text-muted); font-weight: var(--font-medium); font-size: var(--smaller-font-size); }
.dob-hint {
display: inline-flex; align-items: center; gap: .4rem;
margin-top: .75rem; font-size: var(--smaller-font-size); font-weight: var(--font-medium);
color: hsl(205, 95%, 72%); border-radius: 10px; padding: .5rem .7rem;
border-bottom: 2px solid hsl(205, 95%, 62%); transition: background .2s;
}
.dob-hint:hover { background: hsla(205, 95%, 62%, .1); }
.pic-picker { display: grid; justify-items: center; row-gap: .5rem; padding-block: .5rem; }
.pic-circle {
width: 96px; height: 96px; border-radius: 50%;
border: 2px dashed var(--first-color);
display: grid; place-items: center; position: relative; overflow: hidden;
color: var(--first-color); background: var(--glass-bg); cursor: pointer;
transition: transform .2s, background .2s;
}
.pic-circle:hover { transform: scale(1.03); background: var(--glass-bg-hover); }
.pic-circle img { width: 100%; height: 100%; object-fit: cover; }
.pic-circle.small { width: 56px; height: 56px; flex-shrink: 0; }
.pic-hint { font-size: var(--smaller-font-size); color: var(--text-muted); }
/*=============== OAUTH CONSENT SCREEN ===============*/
.oauth-connect-visual { position: relative; display: flex; align-items: center; justify-content: space-between; height: 52px; margin-inline: 1rem; margin-top: 1.5rem; margin-bottom: -.15rem; }
.oauth-node {
width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
box-shadow: 0 6px 20px hsla(250, 60%, 5%, .4); z-index: 2; overflow: hidden;
}
.oauth-node--app img { width: 100%; height: 100%; object-fit: cover; }
.oauth-node--suloro img { width: 68%; height: 68%; object-fit: contain; }
.oauth-connect-curve { position: absolute; left: 24px; right: 24px; top: 0; height: 52px; width: calc(100% - 48px); }
.oauth-curve-path { fill: none; stroke: hsla(248, 90%, 70%, .45); stroke-width: 2; stroke-dasharray: 4 6; }
.oauth-curve-file path { fill: var(--first-color); stroke: var(--first-color); }
.oauth-curve-file { filter: drop-shadow(0 0 4px hsla(248,90%,66%,.7)); }
.oauth-scope-heading { text-align: center; }
.oauth-scope-list { display: grid; row-gap: .45rem; }
.oauth-scope-card {
display: none; align-items: center; column-gap: .75rem;
padding: .55rem .8rem; border-radius: .9rem;
font-size: var(--small-font-size); color: var(--title-color); font-weight: var(--font-medium);
opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease, background .2s;
}
.oauth-scope-card:hover { background: var(--glass-bg-hover); }
.oauth-scope-card.animated-entry { opacity: 1; transform: translateY(0); }
.oauth-scope-card i {
font-size: 1rem; color: var(--first-color);
width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
border-radius: 9px; background: hsla(248, 90%, 66%, .12);
}
.oauth-scope-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.oauth-legal-notice { font-size: var(--smaller-font-size); text-align: center; line-height: 1.5; color: var(--text-muted); }
.oauth-legal-notice a { color: var(--first-color); font-weight: var(--font-semi-bold); }
/*=============== DASHBOARD SHELL ===============*/
.dashboard-layout { display: none; min-height: 100vh; }
@media (min-width: 0px) {
.dashboard-layout { flex-direction: row; }
}
/* Left nav rail — glass, present on ALL screen sizes */
.dashboard-nav {
position: fixed; left: 0; top: 0; bottom: 0; z-index: 20;
width: 76px;
display: flex; flex-direction: column; align-items: center;
padding: 1.25rem 0;
border-radius: 0 1.75rem 1.75rem 0;
box-shadow: var(--glass-shadow);
animation: fade-in-left .5s cubic-bezier(.22,1,.36,1);
}
.dash-nav-brand {
display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
gap: .6rem; margin-bottom: 2.25rem; flex-shrink: 0; width: 100%;
}
.dash-nav-logo-box {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
}
.dash-nav-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.dash-nav-brand-text {
display: none;
font-weight: var(--font-semi-bold); color: var(--title-color);
font-size: .95rem; letter-spacing: .01em; text-align: left;
}
.dash-nav-items { display: flex; flex-direction: column; gap: .4rem; width: 100%; align-items: center; flex: 1; }
.nav-item {
position: relative;
display: flex; align-items: center; justify-content: center; gap: .65rem;
width: 48px; height: 48px; border-radius: 14px;
font-size: var(--smaller-font-size); font-weight: var(--font-semi-bold);
color: var(--text-muted);
transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.nav-item i { font-size: 1.25rem; }
.nav-item span { display: none; }
.nav-item:hover { background: var(--glass-bg-hover); color: var(--title-color); transform: translateY(-1px); }
.nav-item.active {
background: linear-gradient(135deg, hsla(248,90%,66%,.38), hsla(258,85%,58%,.26));
color: #fff;
box-shadow: 0 0 0 1px hsla(248,90%,72%,.45), 0 8px 22px hsla(250,80%,45%,.32), 0 0 18px hsla(248,90%,66%,.25);
}
.dash-logout {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 14px;
color: var(--danger-color); transition: background .2s ease, transform .2s ease;
}
.dash-logout i { font-size: 1.25rem; }
.dash-logout span { display: none; }
.dash-logout:hover { background: hsla(4, 90%, 68%, .12); transform: translateY(-1px); }
.main-panel {
flex: 1;
margin-left: 76px;
padding: 1.75rem 1.1rem 3rem;
width: 100%;
}
.main-inner { display: none; }
.main-inner.active {
display: grid; row-gap: 1.1rem; animation: fade-in .4s cubic-bezier(.22,1,.36,1);
max-width: 640px;
margin-inline: auto;
width: 100%;
}
/*----- Premium profile hero card ----- */
.profile-hero {
display: grid; justify-items: center; text-align: center; row-gap: .35rem;
padding: 2rem 1.5rem 1.6rem;
}
.dash-avatar-wrap { display: flex; justify-content: center; }
.dash-avatar-ring {
width: 112px; height: 112px; border-radius: 50%; padding: 4px;
background: linear-gradient(135deg, var(--first-color), hsl(199, 90%, 62%), var(--second-color));
box-shadow: 0 14px 34px hsla(250, 70%, 25%, .38), 0 0 0 0 hsla(248, 90%, 66%, .35);
transition: transform .3s ease;
animation: avatar-glow 3.2s ease-in-out infinite;
}
.dash-avatar-ring:hover { transform: scale(1.03); }
@keyframes avatar-glow {
0%, 100% { box-shadow: 0 14px 34px hsla(250, 70%, 25%, .38), 0 0 0 0 hsla(248, 90%, 66%, .35); }
50% { box-shadow: 0 14px 34px hsla(250, 70%, 25%, .38), 0 0 0 8px hsla(248, 90%, 66%, 0); }
}
.dash-avatar-img {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
border: 3px solid var(--body-color);
display: block;
}
.dash-name { display: block; margin-top: 1rem; letter-spacing: -.01em; }
.profile-hero-email {
display: flex; align-items: center; gap: .5rem; justify-content: center;
font-weight: var(--font-medium); font-size: var(--small-font-size); color: var(--text-muted);
margin-top: .15rem;
}
.profile-hero-email i { color: var(--first-color); font-size: 1rem; }
.dash-card {
border-radius: 1.35rem; padding: 1.25rem 1.4rem;
box-shadow: var(--glass-shadow);
animation: fade-in .5s cubic-bezier(.22,1,.36,1) both;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
position: relative;
overflow: hidden;
}
.dash-card::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(150deg, hsla(0,0%,100%,.08), transparent 45%);
}
.dash-card:hover { background: var(--glass-bg-hover); box-shadow: 0 14px 36px hsla(250, 60%, 15%, .18); }
.main-inner .dash-card:nth-of-type(1) { animation-delay: .05s; }
.main-inner .dash-card:nth-of-type(2) { animation-delay: .12s; }
.main-inner .dash-card:nth-of-type(3) { animation-delay: .19s; }
.main-inner .dash-card:nth-of-type(4) { animation-delay: .26s; }
.detail-row { display: flex; align-items: center; justify-content: space-between; padding-block: .75rem; border-bottom: 1px solid var(--glass-border); }
.detail-row:first-child { padding-top: .1rem; }
.detail-row:last-child { border-bottom: none; padding-bottom: .1rem; }
.detail-label { display: flex; align-items: center; gap: .55rem; font-size: var(--small-font-size); color: var(--text-muted); font-weight: var(--font-medium); }
.detail-label i {
color: var(--first-color); font-size: 1.05rem;
width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
background: hsla(248, 90%, 66%, .12); flex-shrink: 0;
}
.detail-value { font-size: var(--small-font-size); font-weight: var(--font-semi-bold); color: var(--title-color); text-align: right; }
.account-safety-card { display: flex; align-items: center; gap: 1rem; cursor: pointer; }
.account-safety-icon {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
display: grid; place-items: center; font-size: 1.3rem;
background: hsla(150, 70%, 55%, .15); color: var(--success-color);
}
.account-safety-text { flex: 1; min-width: 0; }
.account-safety-arrow { font-size: 1.3rem; color: var(--text-muted); flex-shrink: 0; transition: transform .2s ease, color .2s ease; }
.account-safety-card:hover .account-safety-arrow { transform: translateX(3px); color: var(--title-color); }
.section-title { color: var(--title-color); font-size: var(--h2-font-size); margin-bottom: .35rem; font-weight: var(--font-semi-bold); letter-spacing: -.01em; }
.security-pic-card, .security-item { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.security-item-title { font-weight: var(--font-semi-bold); color: var(--title-color); font-size: var(--small-font-size); }
.security-item-sub { font-size: var(--smaller-font-size); margin-top: .2rem; color: var(--text-muted); line-height: 1.45; }
.small-btn { width: auto; padding: .6rem 1.2rem; white-space: nowrap; }
.security-pic-card .pic-circle { color: var(--first-color); font-size: 1.2rem; }
.security-pic-card { justify-content: flex-start; }
.security-pic-card > div:last-child { flex: 1; min-width: 0; }
.edit-pass-box {
display: grid; border-radius: 1.35rem; padding: 1.25rem 1.4rem;
box-shadow: var(--glass-shadow); animation: fade-in .35s ease;
}
.edit-pass-box > * { margin-top: .6rem; }
.edit-pass-box > *:first-child { margin-top: 0; }
/*=============== CROP OVERLAY (glass, not white) ===============*/
.crop-overlay-wrapper {
position: fixed; inset: 0; background: hsla(240, 55%, 6%, .55);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center; z-index: 60; padding: 1rem;
}
.crop-overlay-wrapper.visible { display: flex; animation: fade-in .25s ease; }
.crop-overlay-inner {
border-radius: 1.4rem; padding: 1.75rem;
width: min(92vw, 360px); display: grid; row-gap: 1rem; text-align: center;
box-shadow: var(--glass-shadow);
}
.crop-overlay-inner h3 { color: var(--title-color); font-size: var(--h2-font-size); font-weight: var(--font-semi-bold); }
.crop-viewport {
width: 260px; height: 260px; border-radius: 50%; overflow: hidden;
margin-inline: auto; position: relative; background: hsla(240,55%,8%,.6);
border: 1px solid var(--glass-border); touch-action: none; cursor: grab;
}
.crop-viewport img {
position: absolute; top: 50%; left: 50%;
min-width: 100%; min-height: 100%; max-width: none;
transform: translate(-50%, -50%);
user-select: none; -webkit-user-drag: none;
}
.crop-actions { display: flex; gap: .75rem; }
#crop-zoom { width: 100%; accent-color: var(--first-color); }
/*=============== BREAKPOINTS ===============*/
@media screen and (max-width: 360px) {
.login__buttons { flex-direction: column; }
}
/*----- TABLET / DESKTOP: full-bleed hero, glass card docked to the right -----
"Tablet" is intentionally folded into this desktop-style layout rather than
getting its own in-between treatment. This block is gated behind
`html:not(.device-mobile)` — see the device-detection script in index.html —
so a phone with the browser's "Desktop site" toggle on (which reports a
wide window width) still gets the true mobile layout instead of this one. */
@media screen and (min-width: 768px) {
html:not(.device-mobile) .auth-card-stack {
width: 420px;
}
}
@media screen and (min-width: 1200px) {
html:not(.device-mobile) .auth-card-stack {
width: 460px;
}
html:not(.device-mobile) .glass-card {
row-gap: 2rem;
padding: 3rem;
border-radius: 1.5rem;
}
html:not(.device-mobile) .login__description,
html:not(.device-mobile) .login__label,
html:not(.device-mobile) .login__button { font-size: var(--normal-font-size); }
html:not(.device-mobile) .login__inputs { row-gap: 1.25rem; }
html:not(.device-mobile) .login__input { padding: 1rem; font-size: var(--small-font-size); }
html:not(.device-mobile) .login__button { padding-block: 1rem; }
}
/* Real mobile device, even if the window is reporting a desktop-sized width
(e.g. "Request Desktop Site" on a phone browser) — force the centered
mobile card layout regardless of the width-based rules above. Note:
visibility (display:none/block/grid) of #main-card is controlled by JS
(auth.js) to switch between the auth screen and the dashboard, so it is
intentionally NOT touched here — only the card's own position/size is. */
html.device-mobile .auth-card-stack {
position: relative !important; right: auto !important; top: auto !important;
transform: none !important; width: min(92vw, 420px) !important; margin: 1.5rem 0.75rem !important;
}
html.device-mobile .dashboard-nav {
left: .75rem !important; right: .75rem !important; top: auto !important; bottom: .75rem !important;
width: auto !important; height: 64px !important; flex-direction: row !important;
align-items: center !important; justify-content: space-around !important;
padding: 0 .5rem !important; border-radius: 1.4rem !important;
}
html.device-mobile .dash-nav-brand { display: none !important; }
html.device-mobile .dash-nav-items { flex-direction: row !important; justify-content: space-around !important; gap: 0 !important; flex: 1 !important; height: 100% !important; }
html.device-mobile .nav-item { width: 48px !important; height: 48px !important; padding-inline: 0 !important; }
html.device-mobile .nav-item span, html.device-mobile .dash-logout span { display: none !important; }
html.device-mobile .dash-logout { width: 44px !important; height: 44px !important; padding-inline: 0 !important; justify-content: center !important; }
html.device-mobile .theme-toggle--nav { position: static !important; width: 44px !important; height: 44px !important; padding-inline: 0 !important; }
html.device-mobile .main-panel { margin-left: 0 !important; padding: 1.5rem 1rem 6rem !important; max-width: 100% !important; }
/*----- MOBILE DASHBOARD: bottom tab bar, thumb-reachable, own layout -----
Gated the same way as the auth card: real phones always get this, and
"Desktop site" mode on a phone (html.device-mobile) forces it too even
past 768px, via the !important overrides above. */
@media screen and (max-width: 767px) {
html:not(.device-mobile) .dashboard-nav {
left: .75rem; right: .75rem; top: auto; bottom: .75rem;
width: auto; height: 64px;
flex-direction: row; align-items: center; justify-content: space-around;
padding: 0 .5rem; border-radius: 1.4rem;
}
html:not(.device-mobile) .dash-nav-brand { display: none; }
html:not(.device-mobile) .dash-nav-items { flex-direction: row; justify-content: space-around; gap: 0; flex: 1; height: 100%; }
html:not(.device-mobile) .nav-item { width: 48px; height: 48px; }
html:not(.device-mobile) .dash-logout { width: 44px; height: 44px; }
html:not(.device-mobile) .theme-toggle--nav { position: static; width: 44px; height: 44px; }
html:not(.device-mobile) .main-panel { margin-left: 0; padding: 1.5rem 1rem 6rem; max-width: 100%; }
.dash-avatar-img { width: 84px; height: 84px; }
}
/*----- TABLET / DESKTOP: side rail, spread-out multi-column dashboard ----- */
@media screen and (min-width: 768px) {
html:not(.device-mobile) .dashboard-nav { width: 240px; align-items: stretch; padding: 1.75rem 1.1rem; }
html:not(.device-mobile) .dash-nav-brand { width: 100%; align-items: center; justify-content: flex-start; }
html:not(.device-mobile) .dash-nav-brand-text { display: block; }
html:not(.device-mobile) .nav-item { width: 100%; justify-content: flex-start; padding-inline: .9rem; }
html:not(.device-mobile) .nav-item span { display: inline; }
html:not(.device-mobile) .dash-logout {
width: 100%; flex-direction: column; height: auto; gap: .3rem; padding-block: .55rem;
}
html:not(.device-mobile) .dash-logout span { display: inline; font-size: var(--smaller-font-size); margin-left: 0; }
html:not(.device-mobile) .theme-toggle--nav { width: 48px; padding-inline: 0; margin-left: .9rem; }
html:not(.device-mobile) .main-panel { margin-left: 240px; padding: 2.75rem 2.5rem 3rem; }
/* Dashboard stays a single vertical column (like a Google Account page)
even on wide screens — main-panel fills the full remaining width next
to the sidebar, and .main-inner centers itself inside it, so the card
sits in the middle of the free space instead of hugging the sidebar. */
html:not(.device-mobile) .main-inner.active { max-width: 680px; }
}
/*=============== SCROLLBAR (premium touch) ===============*/
.glass-card::-webkit-scrollbar, .main-panel::-webkit-scrollbar { width: 6px; }
.glass-card::-webkit-scrollbar-thumb { background: hsla(248,90%,70%,.4); border-radius: 4px; }
/*=============== ACCESSIBILITY / MOTION ===============*/
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/*=============== LIGHT THEME ===============*/
html[data-theme="light"] {
--title-color: hsl(240, 25%, 7%);
--text-color: hsl(240, 15%, 16%);
--text-muted: hsl(240, 8%, 38%);
--body-color: hsl(220, 45%, 95%);
--glass-bg: hsla(0, 0%, 100%, 0.55);
--glass-bg-strong: hsla(0, 0%, 100%, 0.75);
--glass-bg-hover: hsla(0, 0%, 100%, 0.85);
--glass-border: hsla(244, 30%, 60%, 0.25);
--glass-shadow: 0 8px 28px hsla(230, 40%, 40%, 0.14);
}
html[data-theme="light"] body::before {
background: hsl(210, 60%, 94%); /* solid light blue */
}
html[data-theme="light"] .login__input {
background-color: hsla(0, 0%, 100%, 0.55);
border-color: hsla(244, 30%, 60%, 0.3);
}
html[data-theme="light"] .login__input:focus,
html[data-theme="light"] .login__input:valid {
background-color: hsla(0, 0%, 100%, 0.85);
}
html[data-theme="light"] .login__img { opacity: 1; }
html[data-theme="light"] .shimmer { background: hsla(244, 20%, 70%, 0.25); }
html[data-theme="light"] .crop-overlay-wrapper { background: hsla(230, 30%, 30%, .35); }
html[data-theme="light"] .crop-viewport { background: hsla(230, 20%, 88%, .8); }
html[data-theme="light"] .oauth-node { background: hsla(0,0%,100%,.85); }
/*=============== THEME TOGGLE BUTTON ===============*/
.theme-toggle {
position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
background: var(--glass-bg); border: 1px solid var(--glass-border);
color: var(--title-color); font-size: 1.05rem;
transition: background .2s, transform .2s;
}
.theme-toggle:hover { background: var(--glass-bg-hover); transform: rotate(15deg); }
.theme-icon-sun, .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="light"] .theme-icon-moon { display: block; }
.theme-toggle--nav {
position: static;
width: 48px; height: 48px; border-radius: 14px;
background: transparent; border: none;
justify-content: center; gap: .6rem;
color: var(--text-muted);
}
.theme-toggle--nav:hover { background: var(--glass-bg-hover); color: var(--title-color); transform: none; }