:root {
    --pevi-ink: #15181b;
    --pevi-muted: #687078;
    --pevi-lime: #c7f34a;
    --pevi-lime-deep: #648400;
    --pevi-paper: #f8faf7;
    --pevi-line: #e4e7e1;
    --pevi-green: #087f5b;
    --pevi-shadow: 0 26px 70px rgba(15, 23, 42, .13);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--pevi-ink); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

/* Login */
.pevi-login-page {
    min-height: 100vh;
    padding: 16px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 12% 0%, rgba(199, 243, 74, .27), transparent 30rem),
        radial-gradient(circle at 100% 100%, rgba(125, 211, 252, .14), transparent 30rem),
        linear-gradient(145deg, #f1f5f9, #fff 52%, #f7fee7);
}

.login-card {
    width: min(100%, 430px);
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 30px;
    background: rgba(255, 255, 255, .91);
    box-shadow: var(--pevi-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.login-heading { margin-bottom: 25px; text-align: center; }
.login-lemon { margin-bottom: 10px; font-size: 3.3rem; filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .1)); }
.login-heading h1 { margin: 0; font-size: 2rem; font-weight: 950; letter-spacing: -.04em; }
.login-heading p { margin: 7px 0 0; color: var(--pevi-muted); font-size: .9rem; }

.login-alert { margin-bottom: 16px; padding: 13px 15px; border: 1px solid; border-radius: 16px; font-size: .84rem; line-height: 1.45; }
.login-alert-error { color: #b42318; border-color: #fecaca; background: #fff1f2; }
.login-alert-warning { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.login-form { display: grid; gap: 16px; }
.field-group label { display: block; margin: 0 0 6px; color: #374151; font-size: .84rem; font-weight: 850; }
.field-group input {
    width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid #d7dce0; border-radius: 16px;
    color: var(--pevi-ink); background: white; outline: 0; transition: border-color .18s ease, box-shadow .18s ease;
}
.field-group input:focus { border-color: #9cbe27; box-shadow: 0 0 0 4px rgba(199, 243, 74, .3); }
.login-button {
    min-height: 51px; margin-top: 2px; border: 0; border-radius: 16px; color: white; background: var(--pevi-ink);
    box-shadow: 0 12px 26px rgba(21, 24, 27, .18); font-weight: 900; cursor: pointer; transition: transform .18s ease, background .18s ease;
}
.login-button:hover { transform: translateY(-2px); background: #000; }

/* Selector general */
.pevi-home-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(190, 242, 100, .27), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(125, 211, 252, .20), transparent 28%),
        linear-gradient(145deg, #f8fafc 0%, #ffffff 48%, #f7fee7 100%);
}
.home-dot-grid { min-height: 100vh; background-image: radial-gradient(rgba(71, 85, 105, .13) 1px, transparent 1px); background-size: 18px 18px; }
.home-container { width: min(1120px, calc(100% - 32px)); margin-inline: auto; }
.home-header { padding-top: 24px; }
.home-topbar {
    padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    border: 1px solid rgba(255, 255, 255, .9); border-radius: 25px; background: rgba(255, 255, 255, .78);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}
.home-brand, .home-user-area, .app-card-top, .app-card-footer { display: flex; align-items: center; }
.home-brand { gap: 11px; }
.home-brand-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: #ecfccb; box-shadow: 0 5px 15px rgba(0,0,0,.07); font-size: 1.55rem; }
.home-brand-copy small { display: block; color: var(--pevi-lime-deep); font-size: .65rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.home-brand-copy strong { display: block; font-size: 1.15rem; font-weight: 950; line-height: 1.1; }
.home-user-area { gap: 11px; }
.home-user-copy { text-align: right; }
.home-user-copy small { display: block; color: #9ca3af; font-size: .69rem; }
.home-user-copy strong { display: block; color: #374151; font-size: .84rem; }
.home-logout { min-height: 43px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e5e7eb; border-radius: 15px; background: white; color: #4b5563; font-size: .82rem; font-weight: 850; transition: .18s ease; }
.home-logout:hover { color: #b42318; border-color: #fecaca; background: #fff1f2; }
.home-main { padding-block: 58px 45px; }
.home-intro { margin-bottom: 43px; }
.home-kicker { padding: 8px 13px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #d9f99d; border-radius: 999px; color: var(--pevi-lime-deep); background: white; box-shadow: 0 5px 15px rgba(15,23,42,.05); font-size: .7rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.home-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #84cc16; }
.home-intro h1 { margin: 20px 0 10px; font-size: clamp(2.45rem, 7vw, 4.35rem); line-height: 1; font-weight: 950; letter-spacing: -.055em; }
.home-intro p { max-width: 680px; margin: 0; color: var(--pevi-muted); font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.65; }
.home-app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-app-card {
    position: relative; overflow: hidden; min-height: 390px; padding: 34px; display: flex; flex-direction: column;
    border-radius: 31px; box-shadow: 0 18px 48px rgba(15,23,42,.12); transition: transform .24s ease, box-shadow .24s ease;
}
.home-app-card:hover { transform: translateY(-7px); box-shadow: 0 30px 75px rgba(15,23,42,.16); }
.home-app-card:focus-visible { outline: 4px solid rgba(163,230,53,.48); outline-offset: 4px; }
.finance-card { border: 1px solid #d1fae5; background: white; }
.card-orb { position: absolute; width: 250px; height: 250px; right: -65px; top: -82px; border-radius: 50%; background: #d1fae5; transition: transform .45s ease; }
.finance-card:hover .card-orb { transform: scale(1.12); }
.garage-card { color: white; border: 1px solid #fde68a; background: #111827; }
.garage-glow { position: absolute; inset: 0; opacity: .28; background: radial-gradient(circle at 82% 0%, #bef264, transparent 32%), linear-gradient(125deg, transparent 35%, rgba(255,255,255,.09)); }
.garage-watermark { position: absolute; right: -35px; bottom: 12px; opacity: .09; font-size: 8.5rem; transition: transform .45s ease; }
.garage-card:hover .garage-watermark { transform: rotate(3deg) scale(1.1); }
.tools-card { color: #17191b; border: 1px solid #fed7aa; background: linear-gradient(145deg,#fffaf2,#fff); }
.tools-glow { position: absolute; inset: 0; opacity: .6; background: radial-gradient(circle at 90% 0%, #fed7aa, transparent 34%), linear-gradient(135deg,transparent 45%,rgba(199,243,74,.13)); }
.tools-watermark { position: absolute; right: -25px; bottom: 4px; opacity: .075; font-size: 8rem; transition: transform .45s ease; }
.tools-card:hover .tools-watermark { transform: rotate(-3deg) scale(1.1); }
.app-card-top { position: relative; z-index: 1; justify-content: space-between; gap: 15px; }
.app-icon { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 25px; background: #d1fae5; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 25px rgba(0,0,0,.08); font-size: 2.5rem; }
.garage-card .app-icon { background: white; }
.tools-card .app-icon { background: #ffedd5; }
.app-label { padding: 7px 11px; border: 1px solid #d1fae5; border-radius: 999px; color: var(--pevi-green); background: #ecfdf5; font-size: .68rem; font-weight: 950; }
.garage-card .app-label { color: #111827; border-color: var(--pevi-lime); background: var(--pevi-lime); }
.tools-card .app-label { color: #8a4b08; border-color: #fed7aa; background: #fff7ed; }
.app-card-content { position: relative; z-index: 1; margin-top: auto; padding-top: 65px; }
.app-card-content h2 { margin: 0; font-size: clamp(2rem, 4vw, 2.55rem); font-weight: 950; letter-spacing: -.04em; }
.app-card-content p { max-width: 440px; margin: 11px 0 0; color: var(--pevi-muted); line-height: 1.62; }
.garage-card .app-card-content p { color: #cbd5e1; }
.tools-card .app-card-content p { color: var(--pevi-muted); }
.app-card-footer { justify-content: space-between; margin-top: 27px; padding-top: 20px; border-top: 1px solid #eef0ed; color: var(--pevi-green); font-size: .88rem; font-weight: 900; }
.garage-card .app-card-footer { color: var(--pevi-lime); border-color: rgba(255,255,255,.16); }
.tools-card .app-card-footer { color: #8a4b08; border-color: #f2e5d5; }
.app-arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--pevi-green); font-size: 1.2rem; transition: transform .2s ease; }
.garage-card .app-arrow { color: #111827; background: var(--pevi-lime); }
.tools-card .app-arrow { color: white; background: #a45712; }
.home-app-card:hover .app-arrow { transform: translateX(4px); }
.home-footer { margin-top: 38px; color: #9ca3af; text-align: center; font-size: .73rem; }

@media (max-width: 760px) {
    .home-header { padding-top: 11px; }
    .home-topbar { padding: 11px 12px; border-radius: 20px; }
    .home-user-copy { display: none; }
    .home-main { padding-block: 42px 35px; }
    .home-app-grid { grid-template-columns: 1fr; gap: 18px; }
    .home-app-card { min-height: 340px; padding: 25px; }
}

@media (max-width: 980px) and (min-width: 761px) {
    .home-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tools-card { grid-column: 1 / -1; min-height: 320px; }
}

@media (max-width: 440px) {
    .login-card { padding: 27px 22px; border-radius: 25px; }
    .home-container { width: min(100% - 20px, 1120px); }
    .home-brand-copy { display: none; }
    .logout-label { display: none; }
    .home-logout { width: 43px; padding: 0; justify-content: center; }
    .app-icon { width: 68px; height: 68px; border-radius: 21px; font-size: 2rem; }
}