:root { --ink: #263d58; --blue: #2e5da8; --teal: #06a176; --teal-dark: #008866; --muted: #70849b; --line: #e3eaf1; --paper: #f4f7fa; --white: #fff; --danger: #c45555; --sans: 'Nunito Sans', sans-serif; }
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); margin: 0; min-width: 320px; }
button, input, textarea { font: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } .hidden { display: none !important; }
.auth-shell { align-items: center; display: flex; flex-direction: column; min-height: 100vh; padding: 3.5rem 1.25rem 1.25rem; }
.auth-card { background: var(--white); border-radius: 16px; box-shadow: 0 12px 25px rgba(39, 61, 88, .13); margin: auto; max-width: 430px; padding: 2.8rem 2.65rem 2.35rem; text-align: center; width: 100%; }
.system-logo { display: block; height: 4.4rem; margin: 0 auto .75rem; max-width: 6.3rem; object-fit: contain; width: auto; }
.company-name { color: #9baabd; font-size: .66rem; font-weight: 900; letter-spacing: .21em; margin: 0 0 .55rem; }
.auth-card h1 { color: var(--ink); font-size: 2rem; font-weight: 900; letter-spacing: -.07em; margin: 0 0 2.4rem; }
.auth-card h1 span, .brand > span span { color: var(--teal); }
.eyebrow, .stat-label { color: #91a1b4; font-size: .7rem; font-weight: 900; letter-spacing: .12em; margin: 0 0 .8rem; text-transform: uppercase; }
.auth-card h2 { font-size: 1.6rem; margin: 0 0 .3rem; }.muted { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }
.auth-card form { margin-top: 1.7rem; text-align: left; }.auth-card label, .modal-card label { color: #71849b; display: block; font-size: .72rem; font-weight: 900; margin-bottom: 1.15rem; text-align: left; text-transform: uppercase; }
input, textarea { background: #f7f9fb; border: 1px solid #e5ebf2; border-radius: 10px; color: var(--ink); display: block; font-size: .9rem; margin-top: .5rem; outline: none; padding: 1rem .9rem; transition: border .2s, box-shadow .2s; width: 100%; }
input::placeholder, textarea::placeholder { color: #a5b2c1; } input:focus, textarea:focus { border-color: #72cbb2; box-shadow: 0 0 0 3px rgba(6, 161, 118, .12); } textarea { min-height: 6rem; resize: vertical; }
.primary-button { align-items: center; background: var(--teal); border: 0; border-radius: 9px; box-shadow: 0 6px 12px rgba(6, 161, 118, .18); color: #fff; display: inline-flex; font-size: .88rem; font-weight: 900; gap: .7rem; justify-content: center; padding: 1rem 1.15rem; text-transform: uppercase; transition: background .2s, transform .2s; }.primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); }.primary-button span { font-size: 1.1rem; }.full-button { margin-top: .3rem; width: 100%; }
.switch-button { background: none; border: 0; color: var(--teal-dark); font-size: .8rem; font-weight: 800; margin-top: 1.35rem; }.security-note { color: #94a3b4; font-size: .72rem; line-height: 1.6; margin: 1.4rem 0 0; }.security-note span { color: var(--teal); font-size: .9rem; margin-right: .3rem; }.form-error { color: var(--danger); font-size: .76rem; min-height: 1rem; }
.site-footer { align-items: center; border-top: 1px solid var(--line); color: #647a93; display: flex; font-size: .72rem; justify-content: space-between; max-width: 1080px; padding: 1.35rem 1.25rem 0; width: 100%; }.site-footer nav { display: flex; gap: 1.8rem; text-transform: uppercase; }.site-footer a:hover { color: var(--teal); }
.app-shell { min-height: 100vh; }.topbar { align-items: center; background: var(--white); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: .9rem clamp(1.25rem, 6vw, 5rem); }.brand { align-items: center; display: flex; font-size: 1rem; font-weight: 900; gap: .55rem; }.brand img { height: 2rem; object-fit: contain; width: 2.5rem; }.brand > span { color: var(--ink); }.topbar-right { align-items: center; color: var(--muted); display: flex; font-size: .67rem; gap: 1.5rem; }.text-button { background: none; border: 0; color: var(--blue); font-size: .72rem; font-weight: 900; }
.dashboard { margin: 0 auto; max-width: 1050px; padding: clamp(2.5rem, 7vw, 5.5rem) 1.5rem; }.dashboard-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 3rem; }.dashboard-heading h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.06em; margin: 0 0 .35rem; }.dashboard-heading .muted { font-size: .9rem; }.stats { background: var(--white); border: 1px solid var(--line); border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 3rem; padding: 1.3rem; }.stats > div { border-right: 1px solid var(--line); padding: .15rem 1.5rem; }.stats > div:first-child { padding-left: 0; }.stats > div:last-child { border: 0; }.stat-label { display: block; margin-bottom: .6rem; }.stats strong { font-size: 1rem; }.security-good { align-items: center; display: flex; font-size: .8rem !important; font-weight: 700 !important; }.status-dot { background: var(--teal); border-radius: 50%; display: inline-block; height: .45rem; margin-right: .4rem; width: .45rem; }
.vault-toolbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; }.vault-toolbar h3 { font-size: 1.05rem; margin: 0; }.search-box { margin: 0; position: relative; width: 15rem; }.search-box span { color: var(--muted); font-size: 1.2rem; left: .7rem; position: absolute; top: .55rem; }.search-box input { margin: 0; padding: .65rem .7rem .65rem 2rem; }
.entries-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); }.entry-card { align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 1rem; min-width: 0; padding: 1rem; }.entry-icon { align-items: center; background: #e4f5ef; border-radius: 9px; color: var(--teal-dark); display: flex; flex: 0 0 2.4rem; font-weight: 900; height: 2.4rem; justify-content: center; }.entry-main { min-width: 0; }.entry-main h4 { font-size: .85rem; margin: 0 0 .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.entry-main p { color: var(--muted); font-size: .68rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.open-button { background: none; border: 0; color: var(--blue); font-size: .7rem; font-weight: 900; margin-left: auto; padding: .5rem 0 .5rem .8rem; }.open-button span { color: var(--teal); font-size: 1rem; margin-left: .25rem; }.empty-state { border: 1px dashed #ccd8e4; border-radius: 10px; grid-column: 1 / -1; padding: 4rem 1rem; text-align: center; }.empty-icon { align-items: center; background: #dff4ed; border-radius: 50%; color: var(--teal); display: flex; font-size: 1.4rem; height: 3rem; justify-content: center; margin: 0 auto 1rem; width: 3rem; }.empty-state h3 { margin: 0 0 .5rem; }.empty-state p { color: var(--muted); font-size: .8rem; }
.modal { align-items: center; display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 5; }.modal-backdrop { background: rgba(38, 61, 88, .56); inset: 0; position: absolute; }.modal-card { background: var(--white); border-radius: 14px; box-shadow: 0 14px 30px rgba(38, 61, 88, .2); max-height: 95vh; max-width: 34rem; overflow-y: auto; padding: 2rem; position: relative; width: 100%; }.modal-header { align-items: start; display: flex; justify-content: space-between; margin-bottom: 1.5rem; }.modal-card h3 { font-size: 1.8rem; margin: 0; }.icon-button { background: none; border: 0; color: var(--muted); font-size: 2rem; line-height: .7; }.password-input { align-items: center; display: flex; position: relative; }.password-input input { padding-right: 4rem; }.reveal-button { background: none; border: 0; color: var(--blue); font-size: .65rem; font-weight: 800; position: absolute; right: .8rem; }.optional { color: var(--muted); font-size: .6rem; font-weight: 500; text-transform: lowercase; }.form-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 1.5rem; }.danger-button { background: none; border: 0; color: var(--danger); font-size: .75rem; font-weight: 800; padding: 1rem 0; }.info-content { color: var(--muted); font-size: .92rem; line-height: 1.7; text-align: left; }.info-content p { margin: 0 0 1rem; }.contact-link { color: var(--teal-dark); font-weight: 800; }
@media (max-width: 700px) { .auth-shell { padding: 1.25rem .85rem .85rem; }.auth-card { margin: auto 0; padding: 2rem 1.35rem 1.5rem; }.site-footer { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1rem .25rem 0; }.site-footer nav { flex-wrap: wrap; gap: .8rem 1.2rem; }.topbar { padding: .75rem 1rem; }.topbar-right span { display: none; }.dashboard { padding: 2.3rem 1rem; }.dashboard-heading { align-items: stretch; flex-direction: column; gap: 1.5rem; }.dashboard-heading .primary-button { width: 100%; }.stats { gap: 0; grid-template-columns: 1fr; padding: .6rem 1rem; }.stats > div, .stats > div:first-child { border-bottom: 1px solid var(--line); border-right: 0; padding: .75rem 0; }.stats > div:last-child { border-bottom: 0; }.vault-toolbar { align-items: stretch; flex-direction: column; gap: .75rem; }.search-box { width: 100%; }.entries-grid { grid-template-columns: 1fr; }.modal-card { padding: 1.4rem; } }