* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

:root {
--background: #07090f;
--panel: #0d111b;
--panel-light: #121827;
--border: rgba(255, 255, 255, 0.08);

--primary: #7c5cff;
--secondary: #00e5ff;

--text: #f5f7ff;
--muted: #8c95aa;

--success: #00e5a0;

}

html {
scroll-behavior: smooth;
}

body {
min-height: 100vh;

background:
    radial-gradient(
        circle at 15% 20%,
        rgba(124, 92, 255, 0.12),
        transparent 35%
    ),
    radial-gradient(
        circle at 85% 70%,
        rgba(0, 229, 255, 0.08),
        transparent 35%
    ),
    var(--background);

color: var(--text);

font-family: "Inter", sans-serif;

overflow-x: hidden;

}

/* =========================
BACKGROUND
========================= */

.background-glow {
position: fixed;

width: 350px;
height: 350px;

border-radius: 50%;

filter: blur(120px);

pointer-events: none;

opacity: 0.15;

}

.glow-one {
background: #7c5cff;

top: -150px;
left: -100px;

}

.glow-two {
background: #00e5ff;

right: -100px;
bottom: -150px;

}

/* =========================
APP
========================= */

.app {
min-height: 100vh;

display: flex;

position: relative;

z-index: 1;

}

/* =========================
SIDEBAR
========================= */

.sidebar {
width: 250px;

min-height: 100vh;

padding: 30px 20px;

border-right: 1px solid var(--border);

background: rgba(8, 11, 18, 0.75);

backdrop-filter: blur(20px);

display: flex;

flex-direction: column;

}

/* BRAND */

.brand {
display: flex;

align-items: center;

gap: 12px;

margin-bottom: 50px;

}

.brand-icon {
width: 45px;
height: 45px;

display: grid;

place-items: center;

border-radius: 14px;

background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

font-size: 20px;

box-shadow:
    0 0 30px rgba(124, 92, 255, 0.25);

}

.brand h1 {
font-size: 18px;

font-weight: 800;

}

.brand span {
display: block;

margin-top: 3px;

color: var(--muted);

font-size: 10px;

letter-spacing: 1px;

}

/* NAVIGATION */

.navigation {
display: flex;

flex-direction: column;

gap: 8px;

}

.nav-item {
text-decoration: none;

color: var(--muted);

padding: 13px 14px;

border-radius: 12px;

display: flex;

align-items: center;

gap: 12px;

font-size: 14px;

transition: 0.25s ease;

}

.nav-item:hover {
color: white;

background: rgba(255, 255, 255, 0.05);

}

.nav-item.active {
color: white;

background:
    linear-gradient(
        135deg,
        rgba(124, 92, 255, 0.22),
        rgba(0, 229, 255, 0.06)
    );

border: 1px solid rgba(124, 92, 255, 0.2);

}

/* SIDEBAR BOTTOM */

.sidebar-bottom {
margin-top: auto;
}

.security-status {
padding: 14px;

border-radius: 14px;

background: rgba(0, 229, 160, 0.05);

border: 1px solid rgba(0, 229, 160, 0.1);

display: flex;

align-items: center;

gap: 10px;

}

.status-dot {
width: 9px;
height: 9px;

border-radius: 50%;

background: var(--success);

box-shadow:
    0 0 12px var(--success);

}

.security-status strong {
display: block;

font-size: 12px;

}

.security-status span {
display: block;

margin-top: 3px;

color: var(--success);

font-size: 10px;

}

/* =========================
MAIN CONTENT
========================= */

.main-content {
width: 100%;

max-width: 1250px;

margin: auto;

padding: 35px 45px;

}

/* TOP BAR */

.topbar {
display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 40px;

}

.small-title {
color: var(--secondary);

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;

margin-bottom: 7px;

}

.topbar h2 {
font-size: 26px;
}

.settings-button {
width: 42px;
height: 42px;

border-radius: 12px;

border: 1px solid var(--border);

background: var(--panel);

color: white;

cursor: pointer;

font-size: 18px;

transition: 0.25s ease;

}

.settings-button:hover {
border-color: var(--primary);

transform: rotate(20deg);

}

/* =========================
GENERATOR
========================= */

.generator-section,
.vault-section {
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.035),
rgba(255, 255, 255, 0.01)
);

border: 1px solid var(--border);

border-radius: 24px;

padding: 30px;

margin-bottom: 25px;

backdrop-filter: blur(15px);

}

.section-label {
color: var(--secondary);

font-size: 10px;

font-weight: 800;

letter-spacing: 2px;

}

.section-heading h3 {
margin-top: 8px;

font-size: 24px;

}

.section-heading p {
color: var(--muted);

font-size: 13px;

margin-top: 7px;

line-height: 1.6;

}

/* PASSWORD DISPLAY */

.password-box {
margin-top: 25px;

display: flex;

gap: 10px;

}

.password-display {
flex: 1;

min-height: 65px;

padding: 18px;

display: flex;

align-items: center;

border-radius: 14px;

border: 1px solid rgba(124, 92, 255, 0.2);

background: #080b13;

overflow: hidden;

}

.password-display span {
font-family: monospace;

font-size: 16px;

color: #dce3ff;

word-break: break-all;

}

.copy-button {
width: 65px;

border: 1px solid var(--border);

border-radius: 14px;

background: var(--panel-light);

color: white;

cursor: pointer;

font-size: 20px;

transition: 0.25s ease;

}

.copy-button:hover {
background: var(--primary);

transform: translateY(-2px);

}

/* STRENGTH */

.strength-container {
margin-top: 18px;
}

.strength-header {
display: flex;

justify-content: space-between;

margin-bottom: 8px;

font-size: 12px;

color: var(--muted);

}

.strength-header strong {
color: var(--success);
}

.strength-bar {
width: 100%;

height: 7px;

background: #080b12;

border-radius: 10px;

overflow: hidden;

}

.strength-progress {
width: 0%;

height: 100%;

border-radius: inherit;

background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

transition: 0.4s ease;

}

/* OPTIONS */

.generator-options {
margin-top: 25px;
}

.option-header {
display: flex;

justify-content: space-between;

color: var(--muted);

font-size: 12px;

margin-bottom: 10px;

}

.option-header strong {
color: white;
}

/* RANGE */

input[type="range"] {
width: 100%;

accent-color: var(--primary);

cursor: pointer;

}

/* CHECKBOXES */

.checkbox-grid {
display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 10px;

margin-top: 20px;

}

.check-option {
padding: 12px;

border-radius: 10px;

background: rgba(255, 255, 255, 0.025);

border: 1px solid var(--border);

color: var(--muted);

font-size: 12px;

cursor: pointer;

}

.check-option input {
margin-right: 8px;

accent-color: var(--primary);

}

/* GENERATE BUTTON */

.generate-button {
width: 100%;

margin-top: 25px;

padding: 16px;

border: none;

border-radius: 13px;

background:
    linear-gradient(
        135deg,
        var(--primary),
        #5b8cff
    );

color: white;

font-size: 14px;

font-weight: 700;

cursor: pointer;

box-shadow:
    0 10px 30px rgba(124, 92, 255, 0.2);

transition: 0.25s ease;

}

.generate-button:hover {
transform: translateY(-2px);

box-shadow:
    0 15px 40px rgba(124, 92, 255, 0.3);

}

/* CRACK TIME */

.crack-time {
margin-top: 18px;

padding: 16px;

border-radius: 14px;

display: flex;

align-items: center;

gap: 14px;

background: rgba(0, 229, 160, 0.035);

border: 1px solid rgba(0, 229, 160, 0.1);

}

.crack-icon {
width: 40px;
height: 40px;

display: grid;

place-items: center;

border-radius: 10px;

background: rgba(0, 229, 160, 0.08);

}

.crack-time span {
display: block;

color: var(--muted);

font-size: 10px;

margin-bottom: 4px;

}

.crack-time strong {
font-size: 14px;

color: var(--success);

}

/* =========================
VAULT
========================= */

.vault-heading {
display: flex;

justify-content: space-between;

gap: 20px;

align-items: flex-start;

}

.add-button,
.empty-add-button {
padding: 11px 16px;

border: 1px solid rgba(124, 92, 255, 0.3);

border-radius: 10px;

background: rgba(124, 92, 255, 0.1);

color: white;

cursor: pointer;

transition: 0.25s ease;

}

.add-button:hover,
.empty-add-button:hover {
background: var(--primary);

transform: translateY(-2px);

}

/* SEARCH */

.search-box {
margin-top: 25px;

display: flex;

align-items: center;

gap: 10px;

padding: 14px 16px;

background: #080b13;

border: 1px solid var(--border);

border-radius: 12px;

}

.search-box span {
color: var(--muted);
}

.search-box input {
width: 100%;

background: transparent;

border: none;

outline: none;

color: white;

font-size: 13px;

}

.search-box input::placeholder {
color: #555e72;
}

/* EMPTY VAULT */

.empty-vault {
margin-top: 20px;

padding: 45px 20px;

text-align: center;

border: 1px dashed rgba(255, 255, 255, 0.1);

border-radius: 16px;

}

.empty-icon {
font-size: 40px;

margin-bottom: 12px;

}

.empty-vault h4 {
font-size: 16px;
}

.empty-vault p {
max-width: 400px;

margin: 8px auto 18px;

color: var(--muted);

font-size: 12px;

line-height: 1.6;

}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 850px) {

.sidebar {
    width: 75px;

    padding: 25px 10px;
}

.brand div:last-child,
.nav-item span:last-child,
.security-status div:last-child {
    display: none;
}

.brand {
    justify-content: center;
}

.nav-item {
    justify-content: center;
}

.security-status {
    justify-content: center;
}

.main-content {
    padding: 25px;
}

}

@media (max-width: 600px) {

.sidebar {
    display: none;
}

.main-content {
    padding: 20px 15px;
}

.topbar h2 {
    font-size: 21px;
}

.generator-section,
.vault-section {
    padding: 20px;

    border-radius: 18px;
}

.section-heading h3 {
    font-size: 20px;
}

.password-display {
    min-height: 60px;
}

.password-display span {
    font-size: 13px;
}

.checkbox-grid {
    grid-template-columns: 1fr;
}

.vault-heading {
    flex-direction: column;
}

.add-button {
    width: 100%;
}

}

/* =========================================
PHASE 3 — PASSWORD INTELLIGENCE
========================================= */

.security-intelligence {
margin-top: 20px;

padding: 20px;

border-radius: 16px;

background:
    linear-gradient(
        145deg,
        rgba(124, 92, 255, 0.07),
        rgba(0, 229, 255, 0.025)
    );

border: 1px solid rgba(124, 92, 255, 0.12);

}

/* HEADER */

.intelligence-header {
display: flex;

justify-content: space-between;

align-items: center;

}

.intelligence-header h4 {
margin-top: 5px;

font-size: 16px;

}

/* SCORE */

.security-score {
display: flex;

align-items: baseline;

gap: 3px;

padding: 9px 12px;

border-radius: 10px;

background: rgba(0, 229, 160, 0.06);

border: 1px solid rgba(0, 229, 160, 0.1);

}

.security-score span {
color: var(--muted);

font-size: 10px;

}

.security-score strong {
color: var(--success);

font-size: 20px;

}

.security-score small {
color: var(--muted);

font-size: 9px;

}

/* STATS */

.security-stats {
display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 12px;

margin-top: 18px;

}

.security-stat {
display: flex;

align-items: center;

gap: 12px;

padding: 14px;

border-radius: 12px;

background:
    rgba(255, 255, 255, 0.025);

border: 1px solid var(--border);

}

.stat-icon {
width: 35px;
height: 35px;

display: grid;

place-items: center;

border-radius: 9px;

background:
    rgba(124, 92, 255, 0.1);

}

.security-stat > div span {
display: block;

color: var(--muted);

font-size: 9px;

margin-bottom: 4px;

}

.security-stat > div strong {
display: block;

color: white;

font-size: 12px;

}

/* SECURITY CHECKS */

.security-checks {
margin-top: 18px;
}

.security-checks h5 {
margin-bottom: 10px;

font-size: 11px;

color: var(--muted);

text-transform: uppercase;

letter-spacing: 1px;

}

.security-check {
display: flex;

align-items: center;

gap: 10px;

padding: 9px 0;

color: var(--muted);

font-size: 11px;

border-bottom:
    1px solid rgba(255, 255, 255, 0.04);

}

.security-check:last-child {
border-bottom: none;
}

.security-check span {
width: 20px;
height: 20px;

display: grid;

place-items: center;

border-radius: 50%;

background:
    rgba(255, 255, 255, 0.05);

color: var(--muted);

font-size: 10px;

flex-shrink: 0;

}

.security-check.pass {
color: #b7ffe8;
}

.security-check.pass span {
color: var(--success);

background:
    rgba(0, 229, 160, 0.1);

}

.security-check.fail span {
color: #ff7d9c;

background:
    rgba(255, 70, 110, 0.08);

}

/* RECOMMENDATION */

.security-recommendation {
display: flex;

align-items: flex-start;

gap: 10px;

margin-top: 16px;

padding: 13px;

border-radius: 11px;

background:
    rgba(0, 229, 255, 0.035);

border:
    1px solid rgba(0, 229, 255, 0.08);

color: var(--muted);

font-size: 11px;

line-height: 1.6;

}

.security-recommendation span {
font-size: 16px;
}

/* MOBILE */

@media (max-width: 600px) {

.security-stats {
    grid-template-columns: 1fr;
}

.intelligence-header {
    align-items: flex-start;
    gap: 15px;
}

}

/* =========================================
PHASE 4 — PASSWORD VAULT
========================================= */

/* PASSWORD LIST */

.password-list {
display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 14px;

margin-top: 20px;

}

/* PASSWORD CARD */

.password-card {
position: relative;

padding: 18px;

border-radius: 16px;

background:
    rgba(255, 255, 255, 0.025);

border:
    1px solid var(--border);

transition: 0.25s ease;

animation:
    cardAppear 0.35s ease;

}

.password-card:hover {
transform:
translateY(-3px);

border-color:
    rgba(124, 92, 255, 0.25);

box-shadow:
    0 15px 40px
    rgba(0, 0, 0, 0.2);

}

/* CARD TOP */

.password-card-top {
display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 16px;

}

/* SERVICE */

.service-info {
display: flex;

align-items: center;

gap: 10px;

}

.service-icon {
width: 40px;
height: 40px;

display: grid;

place-items: center;

border-radius: 11px;

background:
    linear-gradient(
        135deg,
        rgba(124, 92, 255, 0.15),
        rgba(0, 229, 255, 0.08)
    );

border:
    1px solid
    rgba(124, 92, 255, 0.15);

font-size: 18px;

}

.service-info h4 {
font-size: 13px;

margin-bottom: 3px;

}

.service-info span {
color: var(--muted);

font-size: 9px;

}

/* CARD ACTIONS */

.card-actions {
display: flex;

gap: 5px;

}

.card-action {
width: 30px;
height: 30px;

display: grid;

place-items: center;

border: 1px solid var(--border);

border-radius: 8px;

background:
    rgba(255, 255, 255, 0.025);

color: var(--muted);

cursor: pointer;

transition: 0.2s ease;

}

.card-action:hover {
color: white;

background:
    rgba(124, 92, 255, 0.15);

border-color:
    rgba(124, 92, 255, 0.3);

}

/* CARD DETAILS */

.card-details {
display: flex;

flex-direction: column;

gap: 10px;

}

.detail-row {
padding: 10px;

border-radius: 9px;

background:
    rgba(0, 0, 0, 0.15);

}

.detail-row > span {
display: block;

color: var(--muted);

font-size: 8px;

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 5px;

}

.detail-value {
display: flex;

justify-content: space-between;

align-items: center;

gap: 10px;

color: #dce3ff;

font-size: 11px;

word-break: break-all;

}

.password-value {
font-family: monospace;

letter-spacing: 1px;

}

/* COPY BUTTON */

.inline-copy {
flex-shrink: 0;

border: none;

background: transparent;

color: var(--muted);

cursor: pointer;

font-size: 13px;

padding: 3px;

}

.inline-copy:hover {
color: var(--secondary);
}

/* CARD DATE */

.card-date {
margin-top: 12px;

color: #586175;

font-size: 8px;

}

/* EMPTY VAULT */

.empty-vault {
grid-column: 1 / -1;
}

/* =========================================
MODAL
========================================= */

.modal-overlay {
position: fixed;

inset: 0;

z-index: 1000;

display: none;

align-items: center;

justify-content: center;

padding: 20px;

background:
    rgba(0, 0, 0, 0.75);

backdrop-filter:
    blur(10px);

}

.modal-overlay.show {
display: flex;

animation:
    modalFade 0.25s ease;

}

/* MODAL */

.password-modal {
position: relative;

width: 100%;

max-width: 500px;

max-height: 90vh;

overflow-y: auto;

padding: 28px;

border-radius: 20px;

background:
    #0d111b;

border:
    1px solid
    rgba(124, 92, 255, 0.2);

box-shadow:
    0 30px 100px
    rgba(0, 0, 0, 0.5);

animation:
    modalSlide 0.3s ease;

}

/* CLOSE */

.close-modal {
position: absolute;

top: 18px;

right: 18px;

width: 32px;
height: 32px;

border: 1px solid var(--border);

border-radius: 9px;

background:
    rgba(255, 255, 255, 0.03);

color: var(--muted);

cursor: pointer;

font-size: 20px;

line-height: 1;

}

.close-modal:hover {
color: white;

background:
    rgba(255, 255, 255, 0.08);

}

/* MODAL HEADER */

.modal-header {
display: flex;

align-items: center;

gap: 12px;

margin-bottom: 25px;

}

.modal-icon {
width: 45px;
height: 45px;

display: grid;

place-items: center;

border-radius: 13px;

background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

font-size: 20px;

}

.modal-header h3 {
margin-top: 4px;

font-size: 19px;

}

/* FORM */

.form-group {
margin-bottom: 16px;
}

.form-group label {
display: block;

margin-bottom: 7px;

color: #aab2c5;

font-size: 11px;

font-weight: 600;

}

.form-group input,
.form-group textarea {
width: 100%;

border: 1px solid var(--border);

border-radius: 10px;

outline: none;

background:
    #080b13;

color: white;

font-family: inherit;

font-size: 12px;

transition: 0.2s ease;

}

.form-group input {
height: 45px;

padding: 0 13px;

}

.form-group textarea {
min-height: 80px;

padding: 12px;

resize: vertical;

}

.form-group input:focus,
.form-group textarea:focus {
border-color:
rgba(124, 92, 255, 0.5);

box-shadow:
    0 0 0 3px
    rgba(124, 92, 255, 0.08);

}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #4e5669;
}

/* PASSWORD INPUT */

.password-input {
position: relative;
}

.password-input input {
padding-right: 50px;
}

.password-input button {
position: absolute;

top: 50%;

right: 8px;

transform:
    translateY(-50%);

width: 35px;
height: 35px;

border: none;

border-radius: 8px;

background:
    transparent;

color: var(--muted);

cursor: pointer;

}

.password-input button:hover {
color: white;

background:
    rgba(255, 255, 255, 0.05);

}

/* SAVE */

.save-password-button {
width: 100%;

height: 48px;

margin-top: 5px;

border: none;

border-radius: 11px;

background:
    linear-gradient(
        135deg,
        var(--primary),
        #5b8cff
    );

color: white;

font-size: 12px;

font-weight: 700;

cursor: pointer;

transition: 0.25s ease;

}

.save-password-button:hover {
transform:
translateY(-2px);

box-shadow:
    0 10px 30px
    rgba(124, 92, 255, 0.25);

}

/* =========================================
ANIMATIONS
========================================= */

@keyframes cardAppear {

from {
    opacity: 0;

    transform:
        translateY(10px);
}

to {
    opacity: 1;

    transform:
        translateY(0);
}

}

@keyframes modalFade {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

@keyframes modalSlide {

from {
    opacity: 0;

    transform:
        translateY(20px)
        scale(0.98);
}

to {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

}

/* =========================================
MOBILE
========================================= */

@media (max-width: 750px) {

.password-list {
    grid-template-columns: 1fr;
}

}

@media (max-width: 600px) {

.password-modal {
    padding: 22px;

    border-radius: 17px;
}

}


/* =========================================
   PHASE 5 — VAULT LOCK SCREEN
========================================= */
.vault-lock-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 30%,rgba(124,92,255,.12),transparent 35%),rgba(4,6,12,.96);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);transition:opacity .4s ease}
.vault-lock-card{position:relative;width:100%;max-width:430px;padding:40px 34px;text-align:center;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;animation:vaultCardAppear .6s ease}
.vault-lock-card::before{content:"";position:absolute;width:220px;height:220px;top:-120px;left:50%;transform:translateX(-50%);background:rgba(124,92,255,.18);filter:blur(70px);pointer-events:none}
.vault-lock-icon{position:relative;width:75px;height:75px;margin:0 auto 22px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(0,229,255,.10));border:1px solid rgba(124,92,255,.25);font-size:32px;box-shadow:0 0 40px rgba(124,92,255,.12);animation:lockPulse 3s ease-in-out infinite}
.vault-lock-card .section-label{display:inline-block;margin-bottom:8px}
.vault-lock-card h1{position:relative;margin:0 0 10px;color:#fff;font-size:30px;font-weight:800;letter-spacing:-.8px}
.vault-lock-description{max-width:320px;margin:0 auto 28px;color:#7e879b;font-size:12px;line-height:1.7}
.master-password-group{text-align:left;margin-bottom:16px}
.master-password-group label{display:block;margin-bottom:8px;color:#aeb6c9;font-size:11px;font-weight:600}
.master-password-input{position:relative}
.master-password-input input{width:100%;height:50px;padding:0 50px 0 15px;border:1px solid rgba(255,255,255,.08);border-radius:12px;outline:none;background:rgba(0,0,0,.25);color:#fff;font-family:inherit;font-size:12px;transition:border-color .2s ease,box-shadow .2s ease}
.master-password-input input::placeholder{color:#4d566a}
.master-password-input input:focus{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 4px rgba(124,92,255,.08)}
.master-password-input button{position:absolute;top:50%;right:8px;width:35px;height:35px;transform:translateY(-50%);border:none;border-radius:9px;background:transparent;color:#737d92;cursor:pointer;font-size:15px;transition:.2s ease}
.master-password-input button:hover{color:#fff;background:rgba(255,255,255,.06)}
.unlock-vault-button{width:100%;height:50px;margin-top:4px;border:none;border-radius:12px;background:linear-gradient(135deg,#7c5cff,#5b8cff);color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(124,92,255,.20);transition:transform .2s ease,box-shadow .2s ease}
.unlock-vault-button:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(124,92,255,.30)}
.unlock-vault-button:active{transform:translateY(0)}
.vault-security-status{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;color:#5f687b;font-size:9px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#35d98b;box-shadow:0 0 10px rgba(53,217,139,.7);animation:statusPulse 2s ease-in-out infinite}
@keyframes vaultCardAppear{from{opacity:0;transform:translateY(25px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes lockPulse{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(124,92,255,.12)}50%{transform:scale(1.04);box-shadow:0 0 55px rgba(124,92,255,.22)}}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:600px){.vault-lock-screen{padding:15px}.vault-lock-card{padding:32px 22px;border-radius:20px}.vault-lock-card h1{font-size:26px}.vault-lock-icon{width:68px;height:68px;font-size:28px}}

/* =========================================
   PHASE 6 — SESSION SECURITY
========================================= */

.lock-vault-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:11px;
    background:rgba(255,255,255,.045);
    color:#dfe5f2;
    font:600 11px/1 inherit;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.lock-vault-button:hover{
    transform:translateY(-1px);
    background:rgba(255,92,117,.09);
    border-color:rgba(255,92,117,.25);
    box-shadow:0 8px 25px rgba(0,0,0,.18);
}

.lock-vault-button:active{
    transform:translateY(0);
}

.vault-session-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
    color:#687287;
    font-size:9px;
    white-space:nowrap;
}

.session-status-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#35d98b;
    box-shadow:0 0 9px rgba(53,217,139,.65);
}

.vault-session-status.warning .session-status-dot{
    background:#ffb347;
    box-shadow:0 0 9px rgba(255,179,71,.65);
}

.auto-lock-overlay{
    position:fixed;
    inset:0;
    z-index:10001;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(2,4,10,.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.auto-lock-overlay[hidden]{
    display:none;
}

.auto-lock-card{
    width:min(100%,390px);
    padding:30px;
    text-align:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    box-shadow:0 30px 90px rgba(0,0,0,.55);
    animation:autoLockAppear .3s ease;
}

.auto-lock-icon{
    width:62px;
    height:62px;
    margin:0 auto 18px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:rgba(255,179,71,.09);
    border:1px solid rgba(255,179,71,.18);
    font-size:27px;
}

.auto-lock-card h3{
    margin:5px 0 9px;
    color:#fff;
    font-size:23px;
}

.auto-lock-card p{
    margin:0 auto 15px;
    max-width:290px;
    color:#7e879b;
    font-size:11px;
    line-height:1.7;
}

.auto-lock-countdown{
    width:55px;
    height:55px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(255,179,71,.28);
    color:#ffca75;
    font-size:19px;
    font-weight:800;
}

.auto-lock-actions{
    display:flex;
    gap:10px;
}

.auto-lock-actions button{
    flex:1;
    min-height:44px;
    border-radius:11px;
    font:700 10px/1 inherit;
    cursor:pointer;
    transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.stay-unlocked-button{
    border:1px solid rgba(124,92,255,.25);
    background:rgba(124,92,255,.13);
    color:#dcd6ff;
}

.lock-now-button{
    border:1px solid rgba(255,92,117,.22);
    background:rgba(255,92,117,.08);
    color:#ff9aaa;
}

.auto-lock-actions button:hover{
    transform:translateY(-1px);
}

@keyframes autoLockAppear{
    from{opacity:0;transform:translateY(12px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:600px){
    .lock-vault-button span{
        display:none;
    }

    .lock-vault-button{
        width:40px;
        padding:0;
    }

    .vault-session-status{
        display:none;
    }

    .auto-lock-card{
        padding:25px 20px;
    }

    .auto-lock-actions{
        flex-direction:column;
    }
}

/* =========================================
   PHASE 8 — PART 2
   INSTALL APP BUTTON
========================================= */

.install-app-button {

    display: none;

    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 16px;

    border: 1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.06);

    color: inherit;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.install-app-button:hover {

    transform: translateY(-2px);

    background:
        rgba(255, 255, 255, 0.1);

    border-color:
        rgba(255, 255, 255, 0.25);

}


.install-app-button:active {

    transform:
        translateY(0);

}


@media (max-width: 700px) {

    .install-app-button {

        width: 100%;

    }

}

/* =========================================
   PHASE 8 — PART 3
   MOBILE INSTALL CARD
========================================= */

.mobile-install-card {

    display: flex;

    align-items: center;

    gap: 18px;

    margin: 18px 0;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

}


.mobile-install-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.07);

    font-size: 24px;

}


.mobile-install-content h3 {

    margin: 4px 0 5px;

}


.mobile-install-content p {

    margin: 0 0 13px;

    opacity: 0.7;

}


.mobile-install-button {

    border: 0;

    border-radius: 10px;

    padding: 10px 15px;

    background: #111;

    color: #fff;

    cursor: pointer;

    font: inherit;

    font-weight: 700;

}


.mobile-install-button:hover {

    opacity: 0.8;

}


@media (max-width: 600px) {

    .mobile-install-card {

        align-items: flex-start;

    }

}


@media (max-width: 420px) {

    .mobile-install-card {

        flex-direction: column;

    }

    .mobile-install-button {

        width: 100%;

    }

}

/* =========================================
   PHASE 8 — PART 4
   BLACK & WHITE THEME
========================================= */

:root {

    --bg-color: #000;
    --text-color: #fff;
    --card-color: #111;
    --border-color: #292929;
    --muted-color: #aaa;

}


/* LIGHT THEME */

body.light-theme {

    --bg-color: #fff;
    --text-color: #000;
    --card-color: #f3f3f3;
    --border-color: #d6d6d6;
    --muted-color: #555;

}


/* Apply theme variables */

body {

    background-color: var(--bg-color);

    color: var(--text-color);

}


/* Theme button */

.theme-toggle-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 10px 15px;

    border: 1px solid var(--border-color);

    border-radius: 11px;

    background: var(--card-color);

    color: var(--text-color);

    cursor: pointer;

    font: inherit;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        background 0.2s ease;

}


.theme-toggle-button:hover {

    transform: translateY(-2px);

}


/* Cards that should follow the theme */

.vault-account-details,
.security-dashboard,
.security-score-card,
.security-stat-card,
.security-checks,
.security-recommendations,
.mobile-install-card {

    color: var(--text-color);

}


/* Mobile */

@media (max-width: 600px) {

    .theme-toggle-button {

        width: 100%;

    }

}
/* =========================================================
   VAULTFORGE PHASE 8 — FINAL UI / THEME / SETTINGS PATCH
   This block intentionally comes last so it overrides older
   Phase 8 snippets and keeps one consistent visual system.
========================================================= */

:root {
    --vf-bg: #07090f;
    --vf-surface: rgba(15, 18, 28, .86);
    --vf-surface-2: #101522;
    --vf-input: #0a0d14;
    --vf-border: rgba(255,255,255,.09);
    --vf-text: #f5f7ff;
    --vf-muted: #8f98aa;
    --vf-soft: rgba(255,255,255,.05);
    --vf-accent: #b9b9b9;
    --vf-accent-strong: #ffffff;
    --vf-shadow: rgba(0,0,0,.42);
    --vf-success: #35d98b;
    --vf-warning: #ffb347;
    --vf-danger: #ff5c75;
}

html.light-theme,
body.light-theme {
    --vf-bg: #f4f5f7;
    --vf-surface: rgba(255,255,255,.94);
    --vf-surface-2: #ffffff;
    --vf-input: #f8f9fb;
    --vf-border: #dfe2e7;
    --vf-text: #15171b;
    --vf-muted: #656b75;
    --vf-soft: rgba(0,0,0,.045);
    --vf-accent: #44484f;
    --vf-accent-strong: #111318;
    --vf-shadow: rgba(30,35,45,.12);
}

html, body {
    background: var(--vf-bg);
    color: var(--vf-text);
}

body {
    background:
        radial-gradient(circle at 10% 10%, rgba(130,130,130,.09), transparent 32%),
        radial-gradient(circle at 90% 85%, rgba(130,130,130,.07), transparent 34%),
        var(--vf-bg);
    transition: background .3s ease, color .3s ease;
}

html.light-theme body,
body.light-theme {
    background:
        radial-gradient(circle at 10% 10%, rgba(0,0,0,.035), transparent 32%),
        radial-gradient(circle at 90% 85%, rgba(0,0,0,.025), transparent 34%),
        var(--vf-bg);
}

.sidebar {
    background: var(--vf-surface);
    border-color: var(--vf-border);
}

.main-content { color: var(--vf-text); }

.topbar {
    position: relative;
    gap: 18px;
    align-items: center;
}

.topbar-title { min-width: 0; }

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.topbar-action {
    min-height: 40px;
    border: 1px solid var(--vf-border);
    border-radius: 11px;
    background: var(--vf-surface);
    color: var(--vf-text);
    box-shadow: 0 8px 24px var(--vf-shadow);
}

.topbar-action:hover {
    border-color: #888;
    background: var(--vf-soft);
}

.install-app-button,
.theme-toggle-button,
.lock-vault-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    font: 700 11px/1 inherit;
    cursor: pointer;
}

.settings-button {
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer;
    font-size: 17px;
}

.generator-section,
.vault-section,
.security-dashboard {
    background: var(--vf-surface);
    border-color: var(--vf-border);
    box-shadow: 0 18px 50px var(--vf-shadow);
}

.password-display,
.strength-bar,
.password-input input,
.form-group input,
.form-group textarea,
.search-box {
    background: var(--vf-input);
    color: var(--vf-text);
    border-color: var(--vf-border);
}

.password-display span,
.copy-button,
.add-button,
.save-password-button,
.close-modal,
.password-card,
.security-stat,
.security-recommendation {
    color: var(--vf-text);
}

.copy-button {
    background: var(--vf-surface-2);
    border-color: var(--vf-border);
}

.nav-item { color: var(--vf-muted); }
.nav-item:hover { color: var(--vf-text); background: var(--vf-soft); }
.nav-item.active { color: var(--vf-text); background: var(--vf-soft); border-color: var(--vf-border); }

.section-heading p,
.section-heading h3,
.security-checks h5,
.password-card small,
.password-card p {
    color: var(--vf-muted);
}

/* Lock screen follows the same monochrome system */
.vault-lock-screen {
    background:
        radial-gradient(circle at 50% 20%, rgba(130,130,130,.13), transparent 35%),
        color-mix(in srgb, var(--vf-bg) 94%, #000);
}

.vault-lock-card {
    background: var(--vf-surface);
    border-color: var(--vf-border);
    box-shadow: 0 30px 100px var(--vf-shadow);
}

.vault-lock-card h1 { color: var(--vf-text); }
.vault-lock-description { color: var(--vf-muted); }
.master-password-group label { color: var(--vf-muted); }

.master-password-input input {
    background: var(--vf-input);
    color: var(--vf-text);
    border-color: var(--vf-border);
}

.master-password-input input::placeholder { color: var(--vf-muted); }
.master-password-input button { color: var(--vf-muted); }
.master-password-input button:hover { color: var(--vf-text); background: var(--vf-soft); }

.unlock-vault-button {
    background: linear-gradient(135deg, #181b20, #555b64);
    color: #fff;
}

html.light-theme .unlock-vault-button,
body.light-theme .unlock-vault-button {
    background: linear-gradient(135deg, #111318, #555b64);
    color: #fff;
}

/* Security dashboard */
.security-dashboard {
    margin: 0 0 25px;
    padding: 30px;
    border-radius: 24px;
    backdrop-filter: blur(15px);
}

.security-dashboard-header,
.security-score-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.security-dashboard-header { margin-bottom: 20px; }
.security-dashboard-header h3 { margin-top: 8px; font-size: 24px; }
.security-dashboard-header p { margin-top: 7px; color: var(--vf-muted); font-size: 13px; }

.security-dashboard-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--vf-soft);
    border: 1px solid var(--vf-border);
    font-size: 24px;
}

.security-score-card {
    justify-content: flex-start;
    padding: 20px;
    border: 1px solid var(--vf-border);
    border-radius: 18px;
    background: var(--vf-soft);
}

.security-score-ring {
    --score: 0%;
    width: 108px;
    height: 108px;
    flex: 0 0 108px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#111 var(--score), var(--vf-border) 0);
    transition: background .5s ease;
}

.security-score-ring-inner {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: var(--vf-surface-2);
}

.security-score-ring-inner strong { font-size: 27px; line-height: 1; }
.security-score-ring-inner span { margin-top: 3px; color: var(--vf-muted); font-size: 10px; }

.security-score-label,
.settings-group-title {
    color: var(--vf-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.security-score-copy h4 { margin: 6px 0; font-size: 20px; }
.security-score-copy p { max-width: 540px; color: var(--vf-muted); font-size: 12px; line-height: 1.6; }

.security-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
}

.security-stat-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--vf-border);
    border-radius: 15px;
    background: var(--vf-soft);
}

.security-stat-card > span { font-size: 18px; }
.security-stat-card small { display:block; color:var(--vf-muted); font-size:9px; }
.security-stat-card strong { display:block; margin-top:3px; font-size:18px; }

.security-check-list { display:grid; gap:8px; margin-top:12px; }

.security-check-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 15px;
    border:1px solid var(--vf-border);
    border-radius:14px;
    background:var(--vf-soft);
}

.security-check-item > span { font-size:17px; }
.security-check-item strong { font-size:11px; }
.security-check-item p { margin-top:3px; color:var(--vf-muted); font-size:10px; }

.security-recommendation-card {
    display:flex;
    gap:12px;
    margin-top:12px;
    padding:15px;
    border:1px solid var(--vf-border);
    border-radius:14px;
    background:var(--vf-soft);
}

.security-recommendation-card > span { font-size:19px; }
.security-recommendation-card small { color:var(--vf-muted); font-size:9px; letter-spacing:1.5px; }
.security-recommendation-card h4 { margin:4px 0; font-size:12px; }
.security-recommendation-card p { color:var(--vf-muted); font-size:10px; line-height:1.5; }

/* Settings drawer */
.settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(4px);
}
.settings-backdrop[hidden] { display:none; }

.settings-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10021;
    width: min(390px, 94vw);
    height: 100dvh;
    padding: 28px 22px;
    overflow-y: auto;
    background: var(--vf-surface-2);
    color: var(--vf-text);
    border-left: 1px solid var(--vf-border);
    box-shadow: -25px 0 70px var(--vf-shadow);
    transform: translateX(105%);
    transition: transform .28s ease;
}
.settings-drawer.open { transform:translateX(0); }

.settings-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    margin-bottom:25px;
}
.settings-header h3 { margin-top:5px; font-size:24px; }

.settings-close {
    width:38px;
    height:38px;
    border:1px solid var(--vf-border);
    border-radius:11px;
    background:var(--vf-soft);
    color:var(--vf-text);
    cursor:pointer;
    font-size:22px;
}

.settings-group { margin-bottom:25px; }
.settings-group-title { display:block; margin:0 4px 8px; }

.settings-row {
    width:100%;
    display:grid;
    grid-template-columns:38px 1fr 18px;
    align-items:center;
    gap:11px;
    padding:13px 11px;
    margin-bottom:7px;
    text-align:left;
    border:1px solid var(--vf-border);
    border-radius:13px;
    background:var(--vf-soft);
    color:var(--vf-text);
    cursor:pointer;
}
.settings-row:hover { background:color-mix(in srgb, var(--vf-soft) 75%, var(--vf-text)); }
.settings-row-icon {
    width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--vf-surface);
}
.settings-row strong { display:block; font-size:11px; }
.settings-row small { display:block; margin-top:3px; color:var(--vf-muted); font-size:9px; }
.settings-row b { color:var(--vf-muted); font-size:18px; }

.settings-about {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:30px;
    padding:14px;
    border:1px solid var(--vf-border);
    border-radius:14px;
    background:var(--vf-soft);
}
.settings-about-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--vf-soft); }
.settings-about strong { display:block; font-size:11px; }
.settings-about small { display:block; margin-top:3px; color:var(--vf-muted); font-size:9px; }

/* Install help */
.install-help-overlay {
    position:fixed;
    inset:0;
    z-index:10030;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(0,0,0,.52);
    backdrop-filter:blur(10px);
}
.install-help-overlay[hidden] { display:none; }

.install-help-card {
    position:relative;
    width:min(430px,100%);
    padding:30px;
    border:1px solid var(--vf-border);
    border-radius:22px;
    background:var(--vf-surface-2);
    color:var(--vf-text);
    box-shadow:0 30px 90px var(--vf-shadow);
}
.install-help-icon {
    width:58px;height:58px;display:grid;place-items:center;border-radius:16px;
    margin-bottom:17px;background:var(--vf-soft);font-size:25px;
}
.install-help-card h3 { margin:7px 0; font-size:22px; }
.install-help-card > p { color:var(--vf-muted); font-size:11px; line-height:1.7; }

.install-help-steps { display:grid; gap:8px; margin:18px 0; }
.install-help-steps div { display:flex; gap:10px; align-items:center; padding:10px; border:1px solid var(--vf-border); border-radius:11px; background:var(--vf-soft); }
.install-help-steps b { width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--vf-text);color:var(--vf-bg);font-size:10px; }
.install-help-steps span { color:var(--vf-muted); font-size:10px; line-height:1.4; }
.install-help-done { width:100%; height:44px; border:0; border-radius:11px; background:var(--vf-text); color:var(--vf-bg); font-weight:800; cursor:pointer; }

/* Light theme: explicit component overrides */
html.light-theme .background-glow,
body.light-theme .background-glow { opacity:.035; }

html.light-theme .brand-icon,
body.light-theme .brand-icon {
    background: linear-gradient(135deg,#1b1d21,#73777e);
    box-shadow:none;
}
html.light-theme .small-title,
body.light-theme .small-title,
html.light-theme .section-label,
body.light-theme .section-label { color:#555a62; }

html.light-theme .generate-button,
body.light-theme .generate-button,
html.light-theme .add-button,
body.light-theme .add-button,
html.light-theme .save-password-button,
body.light-theme .save-password-button {
    background:linear-gradient(135deg,#16181c,#5d6269);
    color:#fff;
}

html.light-theme .password-display,
body.light-theme .password-display {
    background:#fafafa;
}
html.light-theme .password-display span,
body.light-theme .password-display span { color:#16181c; }

html.light-theme input[type="range"],
body.light-theme input[type="range"] { accent-color:#222; }

html.light-theme .security-score-ring,
body.light-theme .security-score-ring {
    background: conic-gradient(#17191d var(--score), #dfe2e7 0);
}

html.light-theme .mobile-install-button,
body.light-theme .mobile-install-button {
    background:#17191d;
    color:#fff;
}

html.light-theme .auto-lock-overlay,
body.light-theme .auto-lock-overlay { background:rgba(255,255,255,.72); }
html.light-theme .auto-lock-card,
body.light-theme .auto-lock-card { background:#fff; border-color:#dfe2e7; box-shadow:0 30px 90px rgba(30,35,45,.18); }
html.light-theme .auto-lock-card h3,
body.light-theme .auto-lock-card h3 { color:#17191d; }
html.light-theme .auto-lock-card p,
body.light-theme .auto-lock-card p { color:#656b75; }

@media (max-width: 900px) {
    .sidebar { width:210px; }
    .main-content { padding:28px 25px; }
    .security-stat-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 700px) {
    .sidebar {
        width:100%;
        min-height:auto;
        padding:12px 14px;
        border-right:0;
        border-bottom:1px solid var(--vf-border);
    }
    .app { display:block; }
    .brand { margin-bottom:10px; }
    .navigation { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
    .nav-item { justify-content:center; padding:10px 6px; font-size:11px; }
    .sidebar-bottom { display:none; }
    .main-content { padding:20px 14px 35px; }
    .topbar { align-items:flex-start; }
    .topbar-actions { max-width:180px; }
    .topbar-action span { display:none; }
    .install-app-button, .theme-toggle-button, .lock-vault-button { width:40px; padding:0; }
    .security-dashboard { padding:20px; }
    .security-score-card { align-items:flex-start; }
}

@media (max-width: 480px) {
    .topbar h2 { font-size:20px; }
    .small-title { font-size:8px; }
    .topbar-actions { gap:5px; max-width:150px; }
    .security-stat-grid { grid-template-columns:1fr 1fr; }
    .security-dashboard-header h3 { font-size:20px; }
    .security-score-ring { width:88px;height:88px;flex-basis:88px; }
    .security-score-ring-inner { width:68px;height:68px; }
    .security-score-ring-inner strong { font-size:22px; }
}

/* =========================================
   SIMPLE PREMIUM FOOTER
========================================= */

.site-footer {

    width: 100%;

    margin-top: 40px;

    padding: 22px 20px 15px;

    text-align: center;

    border-top:
        1px solid var(--border-color);

    color: var(--muted-color);

    font-size: 12px;

}


.footer-main {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

}


.footer-brand {

    color: var(--text-color);

    font-weight: 800;

}


.footer-main strong {

    color: var(--text-color);

}


.footer-separator {

    opacity: 0.45;

}


.winets-link {

    color: var(--text-color);

    font-weight: 700;

    text-decoration: none;

    transition:
        opacity 0.2s ease;

}


.winets-link:hover {

    opacity: 0.6;

    text-decoration: underline;

}


.footer-tagline {

    margin: 8px 0;

    font-size: 11px;

    opacity: 0.7;

}


.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding-top: 10px;

    margin-top: 10px;

    border-top:
        1px solid
        var(--border-color);

    font-size: 10px;

    opacity: 0.6;

}


@media (max-width: 600px) {

    .site-footer {

        padding:
            20px 12px 14px;

    }


    .footer-main {

        flex-direction: column;

        gap: 5px;

    }


    .footer-separator {

        display: none;

    }


    .footer-tagline {

        max-width: 280px;

        margin:
            8px auto;

    }

}

/* =========================================
   PHASE 8 — PART 5
   COMPACT NAVIGATION DRAWER
========================================= */

.nav-menu-button {

    position: fixed;

    top: 22px;
    right: 22px;

    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border-color);

    border-radius: 14px;

    background: var(--card-color);

    color: var(--text-color);

    font-size: 20px;

    cursor: pointer;

    z-index: 1000;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.15);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.nav-menu-button:hover {

    transform:
        translateY(-2px);

}


/* OVERLAY */

.nav-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.35);

    backdrop-filter:
        blur(3px);

    opacity: 0;

    visibility: hidden;

    z-index: 1001;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.nav-overlay.show {

    opacity: 1;

    visibility: visible;

}


/* DRAWER */

.navigation-drawer {

    position: fixed;

    top: 0;
    right: 0;

    width: 300px;
    max-width: 85vw;

    height: 100vh;

    padding: 25px 18px;

    background: var(--card-color);

    color: var(--text-color);

    border-left:
        1px solid var(--border-color);

    box-shadow:
        -15px 0 45px
        rgba(0, 0, 0, 0.18);

    z-index: 1002;

    transform:
        translateX(105%);

    transition:
        transform 0.3s ease;

    overflow-y: auto;
}


.navigation-drawer.open {

    transform:
        translateX(0);

}


/* DRAWER HEADER */

.drawer-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 20px;

    border-bottom:
        1px solid var(--border-color);
}


.drawer-label {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    opacity: 0.5;
}


.drawer-header h3 {

    margin: 5px 0 0;

    font-size: 20px;

}


.close-nav-button {

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 10px;

    background:
        rgba(127, 127, 127, 0.1);

    color: var(--text-color);

    font-size: 22px;

    cursor: pointer;
}


/* NAVIGATION */

.drawer-navigation {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 20px;
}


.drawer-nav-item {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 13px 14px;

    border: 1px solid transparent;

    border-radius: 12px;

    background: transparent;

    color: var(--text-color);

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.drawer-nav-item span:first-child {

    width: 25px;

    text-align: center;

    font-size: 17px;

}


.drawer-nav-item:hover {

    background:
        rgba(127, 127, 127, 0.1);

    border-color:
        var(--border-color);

    transform:
        translateX(-2px);

}


/* FOOTER */

.drawer-footer {

    margin-top: 30px;

    padding-top: 15px;

    border-top:
        1px solid var(--border-color);

    font-size: 10px;

    opacity: 0.55;

}


/* MOBILE */

@media (max-width: 600px) {

    .nav-menu-button {

        top: 15px;
        right: 15px;

        width: 44px;
        height: 44px;

    }


    .navigation-drawer {

        width: 285px;

    }

}

/* =========================================================
   FINAL MODERN LAYOUT — NO PERMANENT SIDEBAR
========================================================= */
.sidebar{display:none!important;}
.app{display:block!important;width:100%!important;min-height:100vh!important;}
.main-content{width:100%!important;max-width:1180px!important;margin:0 auto!important;padding:112px 28px 38px!important;box-sizing:border-box!important;}

/* Floating brand: small, clean, never blocks the content. */
.vf-brand{position:fixed;top:18px;left:20px;z-index:2000;display:flex;align-items:center;gap:9px;padding:5px 11px 5px 5px;border:1px solid var(--vf-border);border-radius:15px;background:color-mix(in srgb,var(--vf-surface) 86%,transparent);backdrop-filter:blur(18px);box-shadow:0 10px 30px var(--vf-shadow);}
.vf-brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#171d31,#0d1220);border:1px solid rgba(255,255,255,.08);font-size:17px;}
.vf-brand-copy strong{display:block;font-size:15px;line-height:1.05;font-weight:800;color:var(--vf-text);}
.vf-brand-copy span{display:block;margin-top:3px;font-size:8px;letter-spacing:1px;color:var(--vf-muted);}

/* Menu button is separate so it can never cover the logo. */
.vf-menu{position:fixed!important;top:18px!important;right:22px!important;left:auto!important;z-index:2010!important;width:44px!important;height:44px!important;display:grid!important;place-items:center!important;padding:0!important;border:1px solid var(--vf-border)!important;border-radius:13px!important;background:var(--vf-surface)!important;color:var(--vf-text)!important;font-size:19px!important;line-height:1!important;cursor:pointer!important;box-shadow:0 10px 28px var(--vf-shadow)!important;transition:transform .2s ease,border-color .2s ease!important;}
.vf-menu:hover{transform:translateY(-2px);border-color:#7c5cff!important;}

/* Drawer only appears when requested. */
.vf-overlay{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.38);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;}
.vf-overlay.show{opacity:1;visibility:visible;}
.vf-drawer{position:fixed!important;top:0!important;left:0!important;width:min(300px,86vw)!important;height:100vh!important;z-index:2200!important;box-sizing:border-box!important;padding:24px 18px!important;background:var(--vf-surface)!important;color:var(--vf-text)!important;border-right:1px solid var(--vf-border)!important;box-shadow:18px 0 55px var(--vf-shadow)!important;transform:translateX(-110%)!important;transition:transform .3s ease!important;overflow-y:auto!important;}
.vf-drawer.open{transform:translateX(0)!important;}
.vf-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--vf-border);}
.vf-drawer-head small{font-size:8px;letter-spacing:2px;color:var(--vf-muted);}
.vf-drawer-head h3{margin:5px 0 0;color:var(--vf-text);}
.vf-drawer-head button{width:34px;height:34px;border:1px solid var(--vf-border);border-radius:10px;background:var(--vf-soft);color:var(--vf-text);font-size:22px;cursor:pointer;}
.vf-drawer-nav{display:grid;gap:7px;margin-top:20px;}
.vf-drawer-nav .drawer-nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--vf-text);font:inherit;text-align:left;cursor:pointer;transition:.2s ease;}
.vf-drawer-nav .drawer-nav-item:hover{background:var(--vf-soft);border-color:var(--vf-border);transform:translateX(2px);}

/* Header spacing: title and action buttons have their own lanes. */
.topbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:20px!important;align-items:center!important;margin-bottom:34px!important;}
.topbar-title{min-width:0!important;}
.topbar-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;max-width:none!important;}
.topbar-action{flex:0 0 auto!important;white-space:nowrap!important;}

@media(max-width:820px){
  .main-content{padding:104px 20px 34px!important;}
  .topbar{grid-template-columns:1fr!important;gap:14px!important;}
  .topbar-actions{justify-content:flex-start!important;}
}
@media(max-width:520px){
  .vf-brand{top:11px;left:11px;padding:4px 9px 4px 4px;border-radius:13px;}
  .vf-brand-mark{width:34px;height:34px;border-radius:10px;font-size:16px;}
  .vf-brand-copy strong{font-size:13px;}
  .vf-brand-copy span{font-size:7px;}
  .vf-menu{top:11px!important;right:11px!important;width:40px!important;height:40px!important;border-radius:12px!important;}
  .main-content{padding:88px 13px 28px!important;}
  .topbar-actions{gap:6px!important;}
  .topbar-action{min-height:38px!important;}
}


/* =========================================
   FINAL INSTALL BUTTONS
========================================= */

.install-app-button,
.mobile-install-button {
    white-space: nowrap;
}

.mobile-install-button {
    border-color: rgba(0, 229, 255, 0.16);
}

.mobile-install-button:hover {
    border-color: rgba(0, 229, 255, 0.45);
}

@media (max-width: 760px) {
    .topbar-actions {
        gap: 6px !important;
    }

    .install-app-button,
    .mobile-install-button {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (max-width: 560px) {
    .install-app-button span,
    .mobile-install-button span {
        display: none;
    }

    .install-app-button,
    .mobile-install-button {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
}