:root {
    --bg: #070a0f;
    --surface: #10151e;
    --surface-2: #151c27;
    --surface-3: #1d2735;
    --text: #f6f8fc;
    --muted: #9ba8bc;
    --border: #2a3546;
    --accent: #8a74ff;
    --accent-strong: #735bfa;
    --accent-soft: rgba(138,116,255,.15);
    --signal: #42c8ff;
    --success: #4fd6a1;
    --danger: #ff6175;
    --warning: #f7bd4f;
    --shadow: 0 14px 36px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.025) inset;
    --radius: 13px;
    --h1: clamp(1.95rem, 2.7vw, 2.85rem);
    --h2: clamp(1.38rem, 1.85vw, 1.76rem);
    --h3: clamp(1.06rem, 1.2vw, 1.22rem);
    --sidebar: 248px;
    color-scheme: dark;
}

html[data-theme="light"] {
    --bg: #f3f7fc;
    --surface: #ffffff;
    --surface-2: #f7f9fd;
    --surface-3: #eaf0fa;
    --text: #10192c;
    --muted: #64738a;
    --border: #d9e2ef;
    --accent: #3166e8;
    --accent-strong: #1f4fc6;
    --accent-soft: rgba(49,102,232,.105);
    --signal: #008ccf;
    --shadow: 0 18px 45px rgba(31,61,103,.09), 0 2px 8px rgba(31,61,103,.045), inset 0 1px rgba(255,255,255,.9);
    color-scheme: light;
}

html[data-theme="dark"] {
    --bg: #080b14;
    --surface: #111725;
    --surface-2: #171f30;
    --surface-3: #202a3d;
    --text: #f5f7ff;
    --muted: #9caac1;
    --border: #2a3650;
    --accent: #927cff;
    --accent-strong: #7960ff;
    --accent-soft: rgba(146,124,255,.15);
    --signal: #4bc8ff;
    --shadow: 0 24px 60px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
}

html[data-theme="hacker"] {
    --bg: #000400;
    --surface: #020a04;
    --surface-2: #041207;
    --surface-3: #08220d;
    --text: #c6ffd3;
    --muted: #62b879;
    --border: #17672d;
    --accent: #39ff6f;
    --accent-strong: #00e645;
    --accent-soft: rgba(57,255,111,.11);
    --signal: #eaff3d;
    --success: #39ff6f;
    --danger: #ff345f;
    --warning: #eaff3d;
    --shadow: 5px 5px 0 rgba(0,70,22,.28), 0 0 0 1px rgba(57,255,111,.03);
    --radius: 3px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; overflow-x:hidden; background: var(--bg); color: var(--text); font: 15px/1.52 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[data-theme="light"] body { background-image: radial-gradient(circle at 85% -5%, rgba(67,119,255,.12), transparent 29%), radial-gradient(circle at 18% 105%, rgba(0,178,213,.07), transparent 28%), linear-gradient(145deg,#fbfdff 0%,#f3f7fc 55%,#f7f9fd 100%); background-attachment:fixed; }
html[data-theme="dark"] body { background-image: radial-gradient(circle at 82% -12%, rgba(146,124,255,.2), transparent 32%), radial-gradient(circle at 30% 115%, rgba(75,200,255,.105), transparent 32%), linear-gradient(145deg,#080b14,#0c1120 48%,#090d18); background-attachment:fixed; }
html[data-theme="hacker"] body { font-family: "Cascadia Code", "Lucida Console", Consolas, monospace; background-image: linear-gradient(rgba(57,255,111,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,111,.018) 1px, transparent 1px); background-size: 100% 4px, 32px 32px; }
html[data-theme="hacker"] body::before { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.17) 3px 4px); opacity:.34; animation:scanShift 7s linear infinite; }
html[data-theme="hacker"] body::after { content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; box-shadow:inset 0 0 120px rgba(0,0,0,.9); background:radial-gradient(circle at 50% 45%,transparent 52%,rgba(0,20,5,.2)); animation:crtFlicker 5s steps(2,end) infinite; }
html[data-theme="hacker"] .main-shell::before { content:"01001 11010 00101 10110 01100 10011\A 10110 00101 11100 01011 10010 01101\A 00111 11001 01010 10101 00011 11100"; position:fixed; top:-70px; right:4vw; z-index:-1; white-space:pre; color:rgba(57,255,111,.055); font:700 clamp(1.2rem,3vw,3.2rem)/1.45 "Cascadia Code",monospace; letter-spacing:.22em; transform:skewY(-8deg); pointer-events:none; animation:matrixDrift 11s linear infinite; }
.matrix-rain { display:none; }
html[data-theme="hacker"] .matrix-rain { position:fixed; inset:0; z-index:0; display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); overflow:hidden; pointer-events:none; opacity:.38; mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.32) 68%,transparent); }
html[data-theme="hacker"] .matrix-rain i { justify-self:center; color:rgba(57,255,111,.42); font:500 .64rem/1 "Cascadia Code",monospace; letter-spacing:.15em; text-shadow:0 0 8px rgba(57,255,111,.4); writing-mode:vertical-rl; word-break:break-all; animation:matrixRain 9s linear infinite; }
html[data-theme="hacker"] .matrix-rain i:nth-child(2n) { animation-duration:12s; opacity:.48; }
html[data-theme="hacker"] .matrix-rain i:nth-child(3n) { animation-duration:7s; color:rgba(225,255,230,.5); }
html[data-theme="hacker"] .matrix-rain i:nth-child(4n) { animation-delay:-5s; }
html[data-theme="hacker"] .matrix-rain i:nth-child(5n) { animation-delay:-8s; }
html[data-theme="hacker"] .matrix-rain i:nth-child(7n) { animation-delay:-3s; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
input, textarea, select { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); padding: 11px 12px; outline: none; transition:border-color .14s ease,box-shadow .14s ease,background .14s ease; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select { background:#fff; box-shadow:0 1px 0 rgba(16,24,40,.02); }
html[data-theme="hacker"] input,html[data-theme="hacker"] textarea,html[data-theme="hacker"] select { border-radius:1px; border-color:#17672d; background:#010803; caret-color:var(--accent); }
textarea { resize: vertical; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: var(--h1); line-height: 1.06; letter-spacing: -.012em; overflow-wrap: anywhere; }
h2 { margin-bottom: 10px; font-size: var(--h2); line-height: 1.12; overflow-wrap: anywhere; }
h3 { margin-bottom: 6px; font-size: var(--h3); line-height: 1.2; overflow-wrap: anywhere; }
code { font-family: "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.lead { max-width: 760px; color: var(--muted); font-size: 1.03rem; }
.eyebrow { margin-bottom: 6px; color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar); flex-direction: column; padding: 22px 16px; border-right: 1px solid var(--border); background: var(--surface); overflow-y:auto; }
html[data-theme="light"] .sidebar { background:rgba(255,255,255,.84); box-shadow:12px 0 38px rgba(31,61,103,.055); backdrop-filter:blur(18px) saturate(145%); }
html[data-theme="dark"] .sidebar { background:linear-gradient(180deg,rgba(18,24,39,.97),rgba(10,14,25,.97)); box-shadow:16px 0 48px rgba(0,0,0,.22); backdrop-filter:blur(18px); }
html[data-theme="hacker"] .sidebar { background:linear-gradient(180deg,rgba(2,12,5,.98),rgba(0,5,1,.98)); box-shadow:8px 0 0 rgba(0,60,18,.22),0 0 40px rgba(57,255,111,.035); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 1.05rem; font-weight: 800; }
.brand.centered { justify-content: center; margin-bottom: 30px; }
.brand-mark { display: inline-grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; background: var(--accent); color: #fff; font-size: .82rem; box-shadow: 0 8px 24px var(--accent-soft); }
.brand-copy { display:grid; min-width:0; gap:0; }
.brand-copy b { font-size:1rem; letter-spacing:-.01em; }
.brand-copy small { color:var(--muted); font-size:.59rem; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
html[data-theme="hacker"] .brand-mark { color: #001b09; box-shadow: 0 0 22px rgba(44,255,114,.3); }
html[data-theme="hacker"] .brand-copy b { color:var(--accent); text-shadow:0 0 10px rgba(57,255,111,.42); }
.hacker-console { display:none; }
html[data-theme="hacker"] .hacker-console { display:grid; gap:3px; margin-top:22px; padding:10px; border:1px solid var(--border); background:#010702; color:var(--muted); font-size:.65rem; line-height:1.35; letter-spacing:.05em; box-shadow:inset 0 0 18px rgba(57,255,111,.04); }
html[data-theme="hacker"] .hacker-console b { color:var(--accent); font-weight:800; text-shadow:0 0 8px rgba(57,255,111,.65); }
html[data-theme="hacker"] .hacker-console i { display:inline-block; width:7px; height:11px; margin-left:5px; background:var(--accent); vertical-align:-2px; animation:cursorBlink .8s steps(1,end) infinite; }
.nav-list { display: grid; gap: 6px; margin-top: 30px; }
.nav-list a { position:relative; display:flex; min-height:44px; align-items:center; gap:11px; padding:10px 12px; border:1px solid transparent; border-radius:11px; color:var(--muted); font-weight:680; transition:color .15s ease,background .15s ease,border-color .15s ease,transform .15s ease; }
.nav-list svg { width:19px; height:19px; flex:0 0 19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-list a:hover { background: var(--accent-soft); color: var(--text); }
.nav-list a.active { border-color:color-mix(in srgb,var(--accent),transparent 72%); background:var(--accent-soft); color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
.nav-list a.active::after { content:""; position:absolute; right:10px; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent); }
html[data-theme="light"] .nav-list a:hover { box-shadow:inset 3px 0 var(--accent),0 8px 20px rgba(49,102,232,.075); }
html[data-theme="dark"] .nav-list a:hover { box-shadow:inset 3px 0 var(--accent),0 8px 24px rgba(0,0,0,.18); }
html[data-theme="hacker"] .nav-list a:hover { box-shadow:inset 3px 0 var(--accent); text-shadow:0 0 9px rgba(57,255,111,.55); }
.android-download { display:grid; gap:3px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); text-decoration:none; transition:transform .12s ease,border-color .12s ease,background .12s ease; }
.android-download:hover { transform:translateY(-1px); border-color:var(--accent); background:var(--accent-soft); }
.android-download span { font-weight:800; line-height:1.25; }
.android-download small { color:var(--muted); line-height:1.3; }
.sidebar-download { margin-top:14px; padding:11px 12px; border-radius:11px; }
.auth-download { width:min(100%,560px); margin:14px auto 0; padding:13px 15px; border-radius:12px; text-align:center; }
.sidebar-bottom { display: grid; gap: 8px; margin-top: auto; }
.user-chip { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); overflow-wrap:anywhere; }
.user-avatar { display:grid; width:36px; height:36px; place-items:center; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--signal)); color:#fff; font-size:.82rem; font-weight:850; box-shadow:0 7px 18px var(--accent-soft); }
.user-chip-copy { display:grid; min-width:0; gap:1px; }
.user-chip-copy strong { overflow:hidden; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.user-chip-copy small { color:var(--muted); font-size:.66rem; }
html[data-theme="hacker"] .user-avatar { border-radius:1px; background:var(--accent); color:#001b09; box-shadow:0 0 14px rgba(57,255,111,.3); }
.main-shell { position:relative; z-index:1; isolation:isolate; width: calc(100% - var(--sidebar)); min-height: 100vh; margin-left: var(--sidebar); padding: 34px clamp(20px, 3vw, 50px) 60px; }
.auth-page { display: grid; place-items: center; padding: 22px; }
.auth-shell { position:relative; z-index:1; width: 100%; max-width: 560px; }
.auth-card { padding: clamp(24px, 5vw, 42px); border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.auth-card.wide { max-width: 760px; margin-inline: auto; }
.mobile-menu { display: none; }
.mobile-menu > span { display:block; width:16px; height:2px; border-radius:2px; background:currentColor; }
.mobile-menu b { margin-left:4px; font-size:.76rem; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-header > div { min-width: 0; }
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: .9rem; }
.breadcrumbs a:hover { color: var(--accent); }
.meta-line { color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }

.button { display: inline-flex; min-height: 40px; max-width: 100%; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-weight: 750; line-height: 1.25; text-align: center; overflow-wrap: anywhere; transition:transform .12s ease,border-color .12s ease,background .12s ease; }
.button:active { transform:translateY(1px); }
html[data-theme="hacker"] .button { border-radius:1px; text-transform:uppercase; letter-spacing:.035em; }
.button.primary { background: var(--accent); color: #fff; }
html[data-theme="light"] .button.primary { background:linear-gradient(135deg,#3971f3,#2456d5); box-shadow:0 10px 22px rgba(49,102,232,.22),inset 0 1px rgba(255,255,255,.22); }
html[data-theme="dark"] .button.primary { background:linear-gradient(135deg,#9a86ff,#7156f3); box-shadow:0 10px 26px rgba(114,87,243,.25),inset 0 1px rgba(255,255,255,.16); }
html[data-theme="hacker"] .button.primary { color: #001b09; }
.button.primary:hover { background: var(--accent-strong); }
.button.secondary { border-color: var(--border); background: var(--surface-3); }
.button.ghost { border-color: var(--border); background: transparent; color: var(--muted); }
.button.danger { border-color: color-mix(in srgb, var(--danger), transparent 45%); background: color-mix(in srgb, var(--danger), transparent 86%); color: var(--danger); }
.button.small { min-height: 34px; padding: 6px 10px; font-size: .8rem; }
.button.full, .full { width: 100%; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: var(--surface-2); cursor: pointer; font-size: 1.4rem; }

.form-stack { display: grid; gap: 15px; }
.form-stack.compact { gap: 11px; }
.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; min-width: 0; gap: 6px; }
.field > span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.input-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.inline-form { display: flex; gap: 8px; }
.top-gap { margin-top: 16px; }
.warning-box { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning), transparent 55%); border-radius: 11px; background: color-mix(in srgb, var(--warning), transparent 90%); color: var(--text); font-size: .86rem; }
.form-divider { display: grid; gap: 3px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.form-divider span { color: var(--muted); font-size: .84rem; }

.notice { max-width: 980px; margin: 0 auto 20px; padding: 12px 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.notice.success { border-color: color-mix(in srgb, var(--success), transparent 55%); }
.notice.error { border-color: color-mix(in srgb, var(--danger), transparent 40%); color: var(--danger); }
.notice.info { border-color: color-mix(in srgb, var(--accent), transparent 50%); }

.dashboard-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:28px; margin-bottom:18px; padding:clamp(22px,3.4vw,38px); border:1px solid var(--border); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--surface),transparent 2%),color-mix(in srgb,var(--surface-2),transparent 6%)); box-shadow:var(--shadow); overflow:hidden; }
.dashboard-hero::before { content:""; position:absolute; width:340px; height:340px; top:-220px; right:6%; border-radius:50%; background:var(--accent); opacity:.13; filter:blur(2px); pointer-events:none; }
.dashboard-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 48%,color-mix(in srgb,var(--signal),transparent 94%)); pointer-events:none; }
.dashboard-hero > * { position:relative; z-index:1; }
.dashboard-hero-copy { min-width:0; }
.dashboard-hero h1 { margin-bottom:9px; }
.dashboard-hero p { max-width:700px; margin:0; color:var(--muted); font-size:.97rem; }
.vault-status { display:inline-flex; max-width:100%; align-items:center; gap:7px; margin-bottom:18px; padding:6px 10px; border:1px solid color-mix(in srgb,var(--success),transparent 58%); border-radius:99px; background:color-mix(in srgb,var(--success),transparent 91%); color:var(--success); font-size:.68rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }
.vault-status i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px color-mix(in srgb,var(--success),transparent 84%),0 0 11px var(--success); animation:statusPulse 2.2s ease-in-out infinite; }
.vault-status small { color:var(--muted); font-size:.61rem; font-weight:650; }
.dashboard-hero-actions { display:grid; min-width:190px; justify-items:stretch; gap:8px; }
.hero-add { min-height:48px; padding-inline:19px; }
.hero-add > span { font-size:1.2rem; font-weight:400; }
.hero-hint { max-width:220px; color:var(--muted); font-size:.67rem; line-height:1.35; text-align:center; }
html[data-theme="light"] .dashboard-hero { background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(242,247,255,.94)); box-shadow:0 24px 65px rgba(31,75,145,.1),inset 0 1px #fff; }
html[data-theme="dark"] .dashboard-hero { background:linear-gradient(135deg,rgba(21,29,47,.98),rgba(12,17,30,.98)); }
html[data-theme="hacker"] .dashboard-hero { border-radius:2px; border-color:color-mix(in srgb,var(--accent),transparent 38%); background:linear-gradient(135deg,rgba(1,12,4,.95),rgba(0,4,1,.98)); box-shadow:7px 7px 0 rgba(0,78,24,.24),inset 0 0 48px rgba(57,255,111,.025); }
html[data-theme="hacker"] .dashboard-hero::before { border-radius:0; background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(57,255,111,.09) 14px 15px); filter:none; animation:heroCodeShift 6s linear infinite; }
html[data-theme="hacker"] .vault-status { border-radius:1px; text-shadow:0 0 8px rgba(57,255,111,.38); }

.vault-overview { display:grid; grid-template-columns:repeat(2,minmax(160px,.7fr)) minmax(250px,1.2fr); gap:12px; margin-bottom:18px; }
.overview-card { display:flex; min-width:0; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb,var(--surface),transparent 2%); box-shadow:0 10px 28px rgba(0,0,0,.06); }
.overview-card > div { display:grid; min-width:0; gap:0; }
.overview-card strong { font-size:1.12rem; line-height:1.2; overflow-wrap:anywhere; }
.overview-card small { color:var(--muted); font-size:.7rem; }
.overview-icon { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:900; }
.keys-icon { background:color-mix(in srgb,var(--signal),transparent 87%); color:var(--signal); }
.pulse-icon i { width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 5px color-mix(in srgb,var(--success),transparent 86%); }
html[data-theme="hacker"] .overview-card { border-radius:1px; background:rgba(1,10,3,.88); }
html[data-theme="hacker"] .overview-icon { border-radius:1px; border:1px solid var(--border); box-shadow:inset 0 0 14px rgba(57,255,111,.06); }

.vault-toolbar { margin-bottom:16px; padding:18px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb,var(--surface),transparent 3%); box-shadow:0 12px 34px rgba(0,0,0,.055); }
.vault-toolbar-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:13px; }
.vault-toolbar-heading h2 { margin:0; font-size:1.3rem; }
.toolbar-count { display:grid; min-width:34px; height:34px; place-items:center; border-radius:11px; background:var(--accent-soft); color:var(--accent); font-weight:850; }
.search-input-wrap { position:relative; display:block; min-width:0; }
.search-input-wrap svg { position:absolute; left:13px; top:50%; width:19px; height:19px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.search-input-wrap input { min-height:46px; padding-left:42px; }
html[data-theme="hacker"] .vault-toolbar { border-radius:1px; background:rgba(1,10,3,.9); box-shadow:inset 0 0 34px rgba(57,255,111,.025); }
html[data-theme="hacker"] .toolbar-count { border-radius:1px; }

.search-bar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; margin-bottom:10px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.project-card { position:relative; display: flex; min-width: 0; min-height: 220px; flex-direction: column; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow:hidden; }
.project-card:hover { border-color: color-mix(in srgb, var(--accent), var(--border) 45%); transform: translateY(-1px); }
.project-card-link { color: inherit; text-decoration: none; cursor: pointer; }
.project-card-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent), transparent 35%); outline-offset: 3px; }
.project-card-link:hover h2,.project-card-link:focus-visible h2 { color: var(--accent); }
html[data-theme="light"] .project-card,html[data-theme="light"] .panel,html[data-theme="light"] .credential-card { border-color:#d7e1ef; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(249,251,255,.96)); }
html[data-theme="light"] .project-card:hover { box-shadow:0 24px 55px rgba(31,75,145,.14),0 2px 10px rgba(31,75,145,.07),inset 0 1px #fff; transform:translateY(-3px); }
html[data-theme="dark"] .project-card,html[data-theme="dark"] .panel,html[data-theme="dark"] .credential-card { background:linear-gradient(145deg,rgba(19,26,42,.98),rgba(13,18,31,.98)); }
html[data-theme="dark"] .project-card:hover,html[data-theme="dark"] .credential-card:hover { box-shadow:0 16px 42px rgba(0,0,0,.42),0 0 0 1px rgba(138,116,255,.08); }
html[data-theme="hacker"] .project-card,html[data-theme="hacker"] .panel,html[data-theme="hacker"] .credential-card,html[data-theme="hacker"] .dialog { border-width:1px; box-shadow:var(--shadow); }
html[data-theme="hacker"] .project-card::before { content:""; position:absolute; inset:-35% 0 auto; height:34%; z-index:0; background:linear-gradient(180deg,transparent,rgba(57,255,111,.075),transparent); transform:translateY(-100%); pointer-events:none; animation:cardScan 5.5s linear infinite; }
html[data-theme="hacker"] .project-card::after { content:"[ ENCRYPTED NODE ]"; position:absolute; right:10px; bottom:7px; color:rgba(57,255,111,.11); font-size:.58rem; letter-spacing:.12em; pointer-events:none; }
html[data-theme="hacker"] .project-card > * { position:relative; z-index:1; }
html[data-theme="hacker"] .project-card:hover,html[data-theme="hacker"] .credential-card:hover { transform:translate(-1px,-1px); border-color:var(--accent); box-shadow:7px 7px 0 rgba(0,92,27,.35),0 0 16px rgba(57,255,111,.1); }
html[data-theme="hacker"] h1,html[data-theme="hacker"] h2 { text-shadow:0 0 10px rgba(57,255,111,.19); }
html[data-theme="hacker"] h1 { animation:glitchTitle 6.8s steps(1,end) infinite; }
html[data-theme="hacker"] .brand-mark { animation:terminalPulse 2.8s steps(2,end) infinite; border-radius:2px; }
.project-card h2 { margin-top: 18px; font-size: 1.3rem; }
.project-card p { color: var(--muted); }
.project-card footer { margin-top: auto; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.project-open { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--accent); font-size: .8rem; font-weight: 750; }
.project-open span { font-size: 1rem; transition: transform .16s ease; }
.project-card-link:hover .project-open span,.project-card-link:focus-visible .project-open span { transform: translateX(3px); }
.project-url { margin-bottom: 10px; color: var(--accent); font-size: .84rem; overflow-wrap: anywhere; }
.credential-preview { display:grid; gap:7px; margin:12px 0 5px; padding:10px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface-2),transparent 4%); }
.credential-preview-title,.credential-preview-head { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:8px; }
.credential-preview-title { color:var(--muted); font-size:.67rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.credential-preview-title b { display:grid; min-width:22px; height:22px; place-items:center; border-radius:99px; background:var(--accent-soft); color:var(--accent); }
.credential-preview-item { display:grid; min-width:0; gap:5px; padding:8px; border:1px solid color-mix(in srgb,var(--border),transparent 25%); border-radius:8px; background:color-mix(in srgb,var(--surface),transparent 28%); }
.credential-preview-head strong { min-width:0; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.credential-preview-head span { flex:0 0 auto; color:var(--muted); font-size:.61rem; text-transform:uppercase; }
.credential-preview-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; }
.credential-preview-fields > span { display:grid; min-width:0; gap:1px; }
.credential-preview-fields small { color:var(--muted); font-size:.6rem; font-weight:700; text-transform:uppercase; }
.credential-preview-fields code { min-width:0; overflow:hidden; color:var(--text); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.masked-password { color:var(--accent) !important; letter-spacing:.055em; }
.credential-preview-more { color:var(--accent); font-size:.69rem; font-weight:750; text-align:center; }
html[data-theme="hacker"] .credential-preview { border-radius:1px; background:rgba(0,15,4,.72); box-shadow:inset 0 0 22px rgba(57,255,111,.035); }
html[data-theme="hacker"] .credential-preview-item { border-radius:1px; border-left:2px solid var(--accent); }
html[data-theme="hacker"] .masked-password { text-shadow:0 0 7px rgba(57,255,111,.58); animation:passwordPulse 2.4s steps(2,end) infinite; }
.card-top, .section-heading, .credential-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-icon, .type-icon { display: inline-grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 850; }
.project-icon { width: 38px; height: 38px; }
.type-icon { width: 42px; height: 42px; flex: 0 0 42px; font-size: .68rem; }
.badge { display: inline-flex; min-height: 28px; max-width: 100%; align-items: center; padding: 5px 9px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: .72rem; line-height: 1.2; overflow-wrap: anywhere; }
.badge.bad { color: var(--danger); }
.empty-state { grid-column: 1 / -1; padding: 38px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); text-align: center; }
.empty-state { display:grid; gap:6px; }
.empty-state strong { color:var(--text); font-size:1rem; }
.compact-empty { padding:24px; }
.search-feedback { display:flex; flex-wrap:wrap; gap:8px 14px; min-height:24px; margin:0; color:var(--muted); font-size:.78rem; }
.search-feedback strong { color:var(--text); }
.searching { color:var(--accent); }
.card-badges { display:flex; max-width:calc(100% - 48px); flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.badge.relevance { border-color:color-mix(in srgb,var(--accent),transparent 45%); background:var(--accent-soft); color:var(--accent); }
.match-list { display:grid; gap:6px; margin:4px 0 16px; padding:10px; border:1px solid color-mix(in srgb,var(--accent),transparent 68%); border-radius:9px; background:var(--accent-soft); }
.match-item { display:grid; min-width:0; gap:1px; }
.match-item span { color:var(--muted); font-size:.67rem; font-weight:750; letter-spacing:.035em; text-transform:uppercase; }
.match-item strong { min-width:0; font-size:.79rem; font-weight:650; overflow-wrap:anywhere; }
mark { padding:0 2px; border-radius:2px; background:color-mix(in srgb,var(--warning),transparent 24%); color:#181000; box-shadow:0 0 0 1px color-mix(in srgb,var(--warning),transparent 55%); }
html[data-theme="hacker"] mark { background:var(--signal); color:#061000; box-shadow:0 0 9px rgba(234,255,61,.35); }

.content-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px, 360px); align-items: start; gap: 22px; }
.content-main, .content-side { display: grid; min-width: 0; gap: 18px; }
.credentials-list { display: grid; gap: 14px; }
.credential-card, .panel { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
html[data-theme="light"] .search-bar input,html[data-theme="light"] .table-wrap,html[data-theme="light"] .dialog { box-shadow:0 12px 32px rgba(31,61,103,.065); }
html[data-theme="dark"] .search-bar input,html[data-theme="dark"] .table-wrap,html[data-theme="dark"] .dialog { box-shadow:0 16px 40px rgba(0,0,0,.22); }
.credential-title-wrap { display: flex; min-width: 0; align-items: flex-start; gap: 11px; }
.credential-title-wrap > div { min-width: 0; }
.type-label { color: var(--muted); font-size: .73rem; font-weight: 750; text-transform: uppercase; }
.credential-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.secret-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 16px 0; }
.secret-field { min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.secret-field > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .72rem; }
.secret-field > div { display: flex; min-width: 0; align-items: center; gap: 5px; }
.secret-field code { display: block; min-width: 0; flex: 1; }
.copy-icon { min-height: 28px; padding: 4px 7px; border: 0; border-radius: 7px; background: var(--surface-3); color: var(--muted); cursor: pointer; font-size: .68rem; }
.copy-icon.copied { background: var(--accent); color: #fff; }
.password-row { display: grid !important; grid-template-columns: minmax(0,1fr) auto auto; }
.secret-input { padding: 0; border: 0; background: transparent; box-shadow: none !important; font-family: "Cascadia Code", Consolas, monospace; }
.credential-notes { margin: 12px 0; padding: 11px 13px; border-left: 3px solid var(--accent); background: var(--accent-soft); overflow-wrap: anywhere; }
.credential-notes p { margin: 4px 0 0; }
.comments-panel { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
summary { cursor: pointer; overflow-wrap: anywhere; }
.comments-panel summary { color: var(--muted); font-weight: 750; }
.comments-panel summary span { display: inline-grid; min-width: 22px; height: 22px; margin-left: 4px; place-items: center; border-radius: 99px; background: var(--surface-3); font-size: .7rem; }

.chat-list { display: grid; gap: 11px; margin: 15px 0; }
.chat-message { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 9px; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 850; }
.chat-bubble { min-width: 0; padding: 10px 12px; border-radius: 4px 12px 12px; background: var(--surface-2); }
.chat-bubble p { margin: 4px 0 0; overflow-wrap: anywhere; }
.chat-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: .78rem; }
.chat-meta time { color: var(--muted); }
.comment-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; }

.timeline { display: grid; gap: 8px; margin-top: 14px; }
.timeline-item { padding: 9px 0; border-top: 1px solid var(--border); }
.timeline-item summary { display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 8px; list-style: none; }
.timeline-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.timeline-item small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.history-data { display: grid; gap: 6px; margin: 9px 0 0 18px; padding: 9px; border-radius: 8px; background: var(--surface-2); font-size: .78rem; overflow-wrap: anywhere; }
.history-data span { display: block; color: var(--muted); font-size: .68rem; }
.danger-zone { margin-top: 12px; }
.danger-text { color:var(--danger); }
.info-box { padding:12px 14px; border:1px solid color-mix(in srgb,var(--signal),transparent 58%); border-radius:10px; background:color-mix(in srgb,var(--signal),transparent 92%); color:var(--text); font-size:.85rem; }
.invite-link-panel { border-color:color-mix(in srgb,var(--accent),transparent 45%); }
.invite-link-box { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; margin:14px 0; }
.invite-link-box .field { min-width:0; }
.invite-link-box input { width:100%; min-width:0; font-family:"Cascadia Code",Consolas,monospace; font-size:.78rem; }
.invite-link-actions,.invitation-submit-actions { display:flex; flex-wrap:wrap; gap:9px; }
.invite-link-actions .button,.invitation-submit-actions .button { min-height:40px; }
.check-field { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; line-height:1.4; }
.check-field input { width:18px; height:18px; margin-top:1px; accent-color:var(--signal); }
.recovery-code-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.recovery-code-grid code { min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); text-align:center; letter-spacing:.08em; overflow-wrap:anywhere; }
.section-block { margin-bottom:18px; }
.inner-table { margin-top:14px; box-shadow:none; }
.status-pending { color:var(--warning); }
.status-accepted { color:var(--success); }
.status-revoked,.status-expired { color:var(--muted); }
.invite-card { max-width:780px; }
.invite-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:18px 0; }
.invite-summary > div { display:grid; min-width:0; gap:3px; padding:11px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); overflow-wrap:anywhere; }
.invite-summary span { color:var(--muted); font-size:.72rem; text-transform:uppercase; }

.dialog { width: min(600px, calc(100% - 24px)); max-height: calc(100vh - 30px); padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); overflow-y: auto; }
.dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(4px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.table-wrap { max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.table-sort { display:inline-flex; width:100%; align-items:center; justify-content:space-between; gap:7px; padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:800; text-align:left; text-transform:inherit; cursor:pointer; }
.table-sort:hover { color:var(--accent); }
.table-sort-indicator { color:var(--accent); font-size:.88rem; line-height:1; }
.table-controls { display:flex; flex-wrap:wrap; align-items:end; gap:9px; margin:0 0 10px; padding:10px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); }
.table-filter { display:grid; min-width:150px; gap:4px; }
.table-filter span { color:var(--muted); font-size:.69rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.table-filter select { min-height:36px; padding-block:6px; }
.table-result-count { margin-left:auto; align-self:center; color:var(--muted); font-size:.78rem; white-space:nowrap; }
.table-filter-empty td { padding:22px; color:var(--muted); text-align:center; }
.table-filter-empty[hidden], tr[hidden] { display:none; }
.audit-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; align-items:end; gap:12px; margin-bottom:16px; }
.audit-filter-actions { display:flex; gap:8px; }
.audit-summary { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 12px; color:var(--muted); font-size:.82rem; }
.audit-summary strong { color:var(--text); }
.audit-list { display:grid; gap:10px; }
.audit-entry { display:grid; gap:10px; padding:15px 17px; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-soft); }
.audit-entry.is-failure { border-left-color:var(--danger); }
.audit-entry-main { display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:12px; }
.audit-entry-main strong { font-size:.98rem; }
.audit-entry-main p { margin:5px 0 0; color:var(--muted); font-size:.82rem; overflow-wrap:anywhere; }
.audit-entry-meta { display:flex; flex-wrap:wrap; gap:7px 18px; color:var(--muted); font-size:.76rem; }
.audit-entry-meta b { color:var(--text); font-weight:700; }
.badge.good { color:var(--success); border-color:color-mix(in srgb,var(--success) 45%,var(--border)); }
.badge.bad { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,var(--border)); }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; }
.settings-grid > :first-child { grid-column: 1 / -1; }
.theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.theme-card { display: grid; min-width: 0; gap: 7px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-card small { min-height: 38px; color: var(--muted); overflow-wrap: anywhere; }
.theme-preview { height: 64px; border-radius: 8px; }
.theme-preview.light { background: radial-gradient(circle at 78% 10%,rgba(49,102,232,.2),transparent 28%),linear-gradient(135deg,#fff 52%,#edf3fb 52%); border: 1px solid #dce5f1; box-shadow:inset 0 1px #fff; }
.theme-preview.dark { background: radial-gradient(circle at 78% 12%,rgba(146,124,255,.45),transparent 30%),linear-gradient(135deg,#101626 55%,#202b45 55%); }
.theme-preview.hacker { background: repeating-linear-gradient(0deg,rgba(57,255,111,.08) 0 1px,transparent 1px 4px),linear-gradient(135deg,#010703 55%,#09220f 55%); border: 1px solid #2cff72; box-shadow: inset 0 0 20px rgba(44,255,114,.16); }

.backup-header { align-items:center; }
.backup-security-badge { display:inline-flex; max-width:100%; align-items:center; gap:8px; padding:8px 12px; border:1px solid color-mix(in srgb,var(--success),transparent 58%); border-radius:99px; background:color-mix(in srgb,var(--success),transparent 91%); color:var(--success); font-size:.72rem; font-weight:800; }
.backup-security-badge i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--success); box-shadow:0 0 10px var(--success); }
.backup-alert { display:grid; grid-template-columns:42px minmax(0,1fr); gap:13px; margin-bottom:18px; padding:15px 17px; border:1px solid color-mix(in srgb,var(--danger),transparent 48%); border-radius:14px; background:color-mix(in srgb,var(--danger),transparent 91%); }
.backup-alert-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:12px; background:var(--danger); color:#fff; font-size:1.1rem; font-weight:900; }
.backup-alert strong { display:block; margin-bottom:3px; }
.backup-alert p { margin:0; color:var(--muted); font-size:.82rem; }
.backup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; }
.backup-card { position:relative; display:grid; min-width:0; gap:5px; overflow:hidden; }
.backup-card::before { content:""; position:absolute; width:180px; height:180px; top:-115px; right:-65px; border-radius:50%; background:var(--accent); opacity:.09; }
.backup-card > * { position:relative; z-index:1; }
.backup-card-icon { display:grid; width:44px; height:44px; margin-bottom:10px; place-items:center; border-radius:13px; background:var(--accent-soft); color:var(--accent); font-size:1.35rem; font-weight:800; }
.import-card .backup-card-icon { background:color-mix(in srgb,var(--signal),transparent 87%); color:var(--signal); }
.backup-list { display:grid; gap:6px; margin:10px 0 18px; padding:0; list-style:none; color:var(--muted); font-size:.8rem; }
.backup-list li { position:relative; padding-left:19px; }
.backup-list li::before { content:"✓"; position:absolute; left:0; color:var(--success); font-weight:900; }
.backup-form { margin-top:auto; padding-top:16px; border-top:1px solid var(--border); }
.file-field input { min-height:48px; padding:8px; }
.file-field input::file-selector-button { min-height:30px; margin-right:9px; padding:5px 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface-3); color:var(--text); cursor:pointer; }
html[data-theme="hacker"] .backup-security-badge,html[data-theme="hacker"] .backup-alert,html[data-theme="hacker"] .backup-card-icon { border-radius:1px; }
html[data-theme="hacker"] .backup-card { box-shadow:7px 7px 0 rgba(0,78,24,.22),inset 0 0 35px rgba(57,255,111,.025); }
html[data-theme="hacker"] .backup-card::after { content:"EXPORT://DECRYPTED_PAYLOAD"; position:absolute; right:9px; bottom:7px; color:rgba(57,255,111,.1); font-size:.57rem; letter-spacing:.08em; }

@keyframes scanShift { from { transform:translateY(-4px); } to { transform:translateY(4px); } }
@keyframes crtFlicker { 0%,94%,100% { opacity:.92; } 95% { opacity:.72; } 96% { opacity:1; } }
@keyframes cursorBlink { 0%,48% { opacity:1; } 49%,100% { opacity:0; } }
@keyframes terminalPulse { 0%,88%,100% { filter:none; transform:translate(0); } 89% { filter:hue-rotate(25deg); transform:translateX(1px); } 91% { transform:translateX(-1px); } }
@keyframes matrixDrift { from { transform:translateY(-8%) skewY(-8deg); } to { transform:translateY(34vh) skewY(-8deg); } }
@keyframes cardScan { 0%,18% { transform:translateY(-100%); } 72%,100% { transform:translateY(460%); } }
@keyframes passwordPulse { 0%,84%,100% { opacity:1; } 86% { opacity:.58; } 88% { opacity:1; } }
@keyframes glitchTitle { 0%,88%,92%,100% { transform:none; text-shadow:0 0 10px rgba(57,255,111,.19); } 89% { transform:translateX(1px); text-shadow:-2px 0 #ff345f,2px 0 #39ff6f; } 90% { transform:translateX(-1px); text-shadow:2px 0 #eaff3d,-2px 0 #39ff6f; } 91% { transform:none; } }
@keyframes matrixRain { from { transform:translateY(-115vh); } to { transform:translateY(115vh); } }
@keyframes statusPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.68; transform:scale(.82); } }
@keyframes heroCodeShift { from { transform:translateX(-20px); } to { transform:translateX(20px); } }

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (max-width: 1180px) {
    .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .vault-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .overview-card.wide { grid-column:1 / -1; }
    .secret-grid { grid-template-columns: 1fr; }
    .content-grid { grid-template-columns: minmax(0,1fr) 320px; }
}

@media (max-width: 860px) {
    .sidebar { transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow); }
    .sidebar.open { transform: translateX(0); }
    .main-shell { width: 100%; margin-left: 0; padding-top: 70px; }
    .mobile-menu { position:fixed; top:14px; left:14px; z-index:40; display:grid; grid-template-columns:16px auto; align-items:center; gap:3px 8px; min-height:42px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface),transparent 5%); color:var(--text); box-shadow:var(--shadow); backdrop-filter:blur(14px); }
    .mobile-menu > span { grid-column:1; }
    .mobile-menu b { grid-column:2; grid-row:1 / span 3; }
    .dashboard-hero { grid-template-columns:1fr; align-items:start; }
    .dashboard-hero-actions { min-width:0; justify-items:start; }
    .hero-hint { max-width:none; text-align:left; }
    .content-grid, .settings-grid, .backup-grid { grid-template-columns: 1fr; }
    .settings-grid > :first-child { grid-column: auto; }
    .audit-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .audit-filter-actions { align-self:end; }
}

@media (max-width: 620px) {
    .invite-link-box { grid-template-columns:1fr; align-items:stretch; }
    .invite-link-actions,.invitation-submit-actions { display:grid; grid-template-columns:1fr; }
    .invite-link-actions .button,.invitation-submit-actions .button { width:100%; }
    .main-shell { padding-inline: 14px; }
    .page-header, .credential-head { flex-direction: column; }
    .header-actions, .credential-actions, .header-actions .button, .credential-actions .button { width: 100%; }
    .form-grid.two, .project-grid, .theme-grid { grid-template-columns: 1fr; }
    .invite-summary { grid-template-columns:1fr; }
    .dashboard-hero { gap:20px; padding:20px 17px; border-radius:15px; }
    .dashboard-hero-actions,.hero-add { width:100%; }
    .vault-status { flex-wrap:wrap; border-radius:12px; }
    .vault-status small { width:100%; padding-left:14px; }
    .vault-overview { grid-template-columns:1fr 1fr; gap:8px; }
    .overview-card { padding:11px; }
    .overview-card.wide { grid-column:1 / -1; }
    .vault-toolbar { padding:14px; border-radius:13px; }
    .search-bar { grid-template-columns:1fr 1fr; }
    .search-input-wrap { grid-column:1 / -1; }
    .search-bar input { grid-column:auto; }
    .comment-form { grid-template-columns: 1fr; }
    .comment-form .button { width: 100%; }
    .password-row { grid-template-columns: minmax(0,1fr) auto !important; }
    .password-row .copy-icon:last-child { grid-column: 1 / -1; }
    .input-action { grid-template-columns: 1fr; }
    .audit-filters { grid-template-columns:1fr; }
    .audit-filter-actions, .audit-filter-actions .button { width:100%; }
    .audit-entry-main { flex-direction:column; }
    .audit-entry-meta { display:grid; gap:5px; }
    .table-controls { display:grid; grid-template-columns:1fr 1fr; }
    .table-filter { min-width:0; }
    .table-result-count { margin-left:0; }
    .table-reset { width:100%; }
    .auth-page { padding: 12px; }
    .auth-card { padding: 22px 17px; }
    .recovery-code-grid { grid-template-columns:1fr; }
    .credential-preview-fields { grid-template-columns:1fr; }
    .backup-alert { grid-template-columns:1fr; }
    html[data-theme="hacker"] .matrix-rain { grid-template-columns:repeat(8,minmax(0,1fr)); }
    html[data-theme="hacker"] .matrix-rain i:nth-child(n+9) { display:none; }
}