:root {
--bg: #0a0a0f;
--bg2: #111118;
--bg3: #1a1a24;
--bg4: #22222e;
--border: #2a2a3a;
--border2: #3a3a4f;
--accent: #6c63ff;
--accent2: #8b83ff;
--accent3: #4ade80;
--accent4: #f59e0b;
--red: #ef4444;
--text: #e8e8f0;
--text2: #9999b0;
--text3: #55556a;
--font-mono: 'JetBrains Mono', monospace;
--font-ui: 'Syne', sans-serif;
--term-font-size: 14px;
--glow: 0 0 24px rgba(108, 99, 255, 0.25);
--radius: 8px;
--robot-color-head: #555555;
--robot-color-body: #3c3c3c;
--robot-color-accent: #6c63ff;
}

/* Настройки выделения текста */
::selection {
background-color: #ffffff;
color: #000000;
}
::-moz-selection {
background-color: #ffffff;
color: #000000;
}
img::selection {
background-color: rgba(255, 255, 255, 0.4);
}
img::-moz-selection {
background-color: rgba(255, 255, 255, 0.4);
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
height: 100%;
overflow: hidden;
}

body {
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
display: flex;
flex-direction: column;
transition: background 0.3s ease, color 0.3s ease;
position: relative;
}

body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 55% 45% at 15% 8%, rgba(108, 99, 255, 0.14), transparent 55%),
radial-gradient(ellipse 45% 35% at 88% 92%, rgba(74, 222, 128, 0.07), transparent 50%),
radial-gradient(ellipse 30% 25% at 50% 50%, rgba(157, 143, 255, 0.04), transparent 60%);
animation: meshDrift 14s ease-in-out infinite alternate;
}

#top-loader, #auth-screen, #file-protocol-banner {
position: relative;
z-index: 1;
}

#app {
position: relative;
z-index: auto;
}

/* SVG иконки */
.ico {
display: inline-block;
width: 1.15em;
height: 1.15em;
vertical-align: -0.15em;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s;
}

.ico-fill {
fill: currentColor;
stroke: none;
}

.ico-sm {
width: 1em;
height: 1em;
}

.ico-lg {
width: 1.5rem;
height: 1.5rem;
}

.nb-icon, .bn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}

.nb-icon .ico, .bn-icon .ico {
width: 1.15rem;
height: 1.15rem;
}

.top-btn-round .ico {
width: 1.05rem;
height: 1.05rem;
}

.settings-nav-btn .ico {
width: 0.95rem;
height: 0.95rem;
margin-right: 0.35rem;
vertical-align: -0.2em;
}

.cm-item .ico {
width: 1rem;
height: 1rem;
margin-right: 0.35rem;
}

.topbar-title .ico {
margin-right: 0.35rem;
vertical-align: -0.2em;
width: 1.05rem;
height: 1.05rem;
}

.nav-btn.active .ico, .bn-btn.active .ico {
animation: iconPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes iconPop {
0% { transform: scale(0.6) rotate(-8deg); opacity: 0.5; }
60% { transform: scale(1.12) rotate(2deg); }
100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes meshDrift {
0% { opacity: 0.85; transform: scale(1); }
100% { opacity: 1; transform: scale(1.04) translate(1%, -1%); }
}

@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}

@keyframes floatSoft {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}

/* --- АНИМАЦИИ --- */
@keyframes fadeInSlideUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}

@keyframes pulseGlow {
0% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(108, 99, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); }
}

@keyframes robotFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

@keyframes geminiGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

#top-loader {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: var(--accent);
z-index: 10001;
transition: width 0.4s ease;
width: 0;
pointer-events: none;
}

/* Круглые верхние кнопки */
.top-btn-round {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bg3);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
color: var(--text2);
font-size: 1.1rem;
}

.top-btn-round:hover {
border-color: var(--accent);
color: var(--text);
transform: scale(1.05);
}

.top-btn-ai {
background: linear-gradient(135deg, #6c63ff, #8b83ff);
color: white;
border: none;
}

.top-btn-ai:hover {
box-shadow: 0 0 15px rgba(108, 99, 255, 0.4);
}

/* Окно авторизации */
#auth-screen {
position: fixed;
inset: 0;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
flex-direction: column;
gap: 0;
overflow: hidden;
transition: opacity 0.4s ease;
}

.auth-top-links {
position: absolute;
top: 1.5rem;
right: 2rem;
display: flex;
gap: 1.5rem;
z-index: 10;
font-family: var(--font-mono);
font-size: 0.8rem;
}

.auth-top-link {
color: var(--text2);
text-decoration: none;
transition: color 0.2s;
}

.auth-top-link:hover {
color: var(--accent);
}

#auth-screen::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108, 99, 255, 0.09) 0%, transparent 70%);
pointer-events: none;
}

.auth-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
z-index: 2;
animation: fadeInSlideUp 0.6s ease forwards;
}

.cloud-svg-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}

.cloud-svg {
filter: drop-shadow(0 0 32px rgba(108, 99, 255, 0.4));
animation: cloudFloat 4s ease-in-out infinite;
}

@keyframes cloudFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.cloud-code-label {
position: absolute;
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.05em;
text-shadow: 0 0 16px rgba(108, 99, 255, 0.8);
animation: cloudFloat 4s ease-in-out infinite;
animation-delay: 0.2s;
}

.auth-glow-ring {
position: absolute;
width: 160px;
height: 80px;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(108, 99, 255, 0.2);
filter: blur(2px);
animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.08); opacity: 1; }
}

.auth-particles {
position: absolute;
inset: -60px;
pointer-events: none;
}

.ap {
position: absolute;
width: 2px;
height: 2px;
border-radius: 50%;
background: var(--accent);
animation: apFloat linear infinite;
opacity: 0;
}

@keyframes apFloat {
0% { opacity: 0; transform: translateY(0) scale(0); }
20% { opacity: 0.8; }
80% { opacity: 0.5; }
100% { opacity: 0; transform: translateY(-120px) scale(1.5); }
}

.auth-wrap {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
z-index: 2;
animation: fadeInSlideUp 0.6s 0.1s ease backwards;
}

.auth-brand {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text);
text-align: center;
margin-bottom: 0.3rem;
}

.auth-brand span {
color: var(--accent);
}

.auth-tagline {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--text3);
text-align: center;
margin-bottom: 1.5rem;
}

.auth-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.75rem 1.5rem;
width: 340px;
display: flex;
flex-direction: column;
gap: 0.85rem;
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
transition: all 0.3s ease;
}

.auth-consent-box {
background: var(--bg3);
padding: 0.8rem;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 0.72rem;
font-family: var(--font-mono);
color: var(--text2);
margin-bottom: 0.5rem;
display: flex;
gap: 0.6rem;
align-items: flex-start;
text-align: left;
transition: all 0.2s;
}

.auth-consent-box:hover {
border-color: var(--border2);
}

.auth-consent-box input {
margin-top: 0.2rem;
cursor: pointer;
}

.auth-consent-box a {
color: var(--accent);
text-decoration: none;
}

.auth-consent-box a:hover {
text-decoration: underline;
}

.auth-social-row {
display: flex;
flex-direction: column;
gap: 0.55rem;
}

.auth-social-btn {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.7rem 1rem;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text);
font-family: var(--font-ui);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-social-btn:hover {
background: var(--bg4);
border-color: var(--border2);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.auth-social-btn:active {
transform: scale(0.98) translateY(0);
}

.auth-social-btn .asb-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}

.auth-social-btn .asb-text {
flex: 1;
text-align: left;
}

.auth-social-btn .asb-badge {
font-size: 0.65rem;
font-family: var(--font-mono);
color: var(--text3);
opacity: 0.7;
}

.auth-divider {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text3);
font-size: 0.72rem;
font-family: var(--font-mono);
}

.auth-divider::before, .auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}

.auth-email-panel {
display: flex;
flex-direction: column;
gap: 0.7rem;
overflow: hidden;
max-height: 0;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
opacity: 0;
}

.auth-email-panel.open {
max-height: 280px;
opacity: 1;
}

.auth-label {
font-size: 0.72rem;
color: var(--text2);
font-family: var(--font-mono);
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}

.auth-input {
width: 100%;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.65rem 0.9rem;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.87rem;
outline: none;
transition: all 0.2s;
}

.auth-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.auth-btn {
width: 100%;
padding: 0.75rem;
background: var(--accent);
border: none;
border-radius: 8px;
color: #fff;
font-family: var(--font-ui);
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(108, 99, 255, 0.4);
}

.auth-btn:active {
transform: scale(0.98) translateY(0);
}

.auth-switch {
text-align: center;
font-size: 0.78rem;
color: var(--text2);
font-family: var(--font-mono);
}

.auth-switch a {
color: var(--accent2);
cursor: pointer;
text-decoration: none;
transition: color 0.2s;
}

.auth-switch a:hover {
text-decoration: underline;
color: var(--accent);
}

.auth-error {
background: rgba(239, 68, 68, 0.13);
border: 1px solid rgba(239, 68, 68, 0.33);
border-radius: 8px;
padding: 0.55rem 0.85rem;
color: #ef9999;
font-size: 0.8rem;
font-family: var(--font-mono);
display: none;
animation: fadeInScale 0.2s;
}

.auth-anon-note {
text-align: center;
font-size: 0.7rem;
color: var(--text3);
font-family: var(--font-mono);
line-height: 1.5;
}

.auth-anon-note a {
color: var(--accent2);
cursor: pointer;
text-decoration: none;
}

.auth-anon-note a:hover {
text-decoration: underline;
}

#app {
display: flex;
height: 100vh;
opacity: 0;
animation: fadeInScale 0.4s ease forwards;
}

#sidebar {
width: 220px;
min-width: 220px;
background: var(--bg2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 1rem 0;
overflow-y: auto;
transition: width 0.3s ease, min-width 0.3s ease, background 0.3s, backdrop-filter 0.3s;
}

.sidebar-logo {
padding: 0.5rem 1.25rem 1.25rem;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.02em;
}

.sidebar-logo span {
color: var(--accent);
}

.sidebar-section {
padding: 0.25rem 0.75rem;
font-size: 0.65rem;
color: var(--text3);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 0.5rem;
margin-bottom: 0.2rem;
transition: opacity 0.3s;
}

.nav-btn {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 1rem;
margin: 0.1rem 0.5rem;
border-radius: 10px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
color: var(--text2);
border: none;
background: none;
width: calc(100% - 1rem);
text-align: left;
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
font-family: var(--font-ui);
}

.nav-btn:hover {
background: var(--bg3);
color: var(--text);
transform: translateX(4px);
}

.nav-btn.active {
background: linear-gradient(90deg, rgba(124, 108, 255, 0.18), transparent);
color: var(--accent2);
border: 1px solid rgba(124, 108, 255, 0.25);
transform: translateX(4px);
box-shadow: var(--glow);
}

.nav-btn .nb-icon {
font-size: 1rem;
width: 1.35rem;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}

#nb-ai-chat:hover {
background: linear-gradient(-45deg, #6c63ff, #4ade80, #8b83ff, #f59e0b);
background-size: 400% 400%;
animation: geminiGradient 3s ease infinite, aiButtonShapeChange 0.5s forwards;
color: #fff;
border-color: transparent;
}

@keyframes aiButtonShapeChange {
0% { border-radius: 8px; }
25% { border-radius: 20px 4px 8px 4px; }
50% { border-radius: 4px 20px 4px 20px; }
75% { border-radius: 8px 4px 20px 4px; }
100% { border-radius: 20px 4px 20px 4px; }
}

#nb-ai-chat {
transition: all 0.5s ease-in-out, background-position 3s ease infinite;
}

.nav-btn .nb-badge {
margin-left: auto;
background: var(--accent);
color: #fff;
font-size: 0.6rem;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-family: var(--font-mono);
}

.sidebar-spacer {
flex: 1;
}

.sidebar-user {
padding: 0.75rem 1rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.75rem;
}

.ai-chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
scroll-behavior: smooth;
}

.ai-msg {
max-width: 85%;
padding: 0.75rem 1rem;
border-radius: 12px;
font-size: var(--term-font-size);
line-height: 1.5;
font-family: var(--font-mono);
animation: fadeInSlideUp 0.3s ease;
}

.ai-msg.user {
align-self: flex-end;
background: var(--accent);
color: #fff;
border-bottom-right-radius: 2px;
}

.ai-msg.bot {
align-self: flex-start;
background: var(--bg3);
color: var(--text);
border-bottom-left-radius: 2px;
border: 1px solid var(--border);
overflow-x: auto;
}

.user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: #fff;
flex-shrink: 0;
transition: transform 0.2s;
}

.user-avatar:hover {
transform: scale(1.1) rotate(5deg);
}

.ai-msg pre {
position: relative;
padding: 0.75rem 1rem;
border-radius: 8px;
background: var(--bg4);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
white-space: pre-wrap;
word-break: break-word;
border: 1px solid var(--border2);
}

.ai-msg pre code {
display: block;
overflow-x: auto;
padding-right: 40px;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.4;
}

.ai-msg pre .copy-code-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: var(--bg2);
color: var(--text2);
border: 1px solid var(--border);
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.72rem;
font-family: var(--font-mono);
cursor: pointer;
transition: all 0.2s;
z-index: 1;
}

.ai-msg pre .copy-code-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}

.ai-msg pre .apply-code-btn {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
background: var(--accent3);
color: var(--bg);
border: 1px solid var(--accent3);
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.72rem;
font-family: var(--font-mono);
cursor: pointer;
transition: all 0.2s;
z-index: 1;
}

.ai-msg pre .apply-code-btn:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}

.user-info {
flex: 1;
overflow: hidden;
transition: opacity 0.3s;
}

.user-email {
font-size: 0.72rem;
color: var(--text2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--font-mono);
}

#main {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}

.page {
display: none;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100%;
}

.page.active {
display: flex;
animation: fadeInSlideUp 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.topbar {
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 1rem;
background: var(--bg2);
transition: all 0.3s;
}

.topbar-title {
font-size: 1rem;
font-weight: 700;
}

.topbar-sub {
font-size: 0.78rem;
color: var(--text2);
font-family: var(--font-mono);
margin-left: 0.5rem;
}

.topbar-spacer {
flex: 1;
}

.btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border-radius: 7px;
border: none;
cursor: pointer;
font-family: var(--font-ui);
font-size: 0.82rem;
font-weight: 600;
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-primary {
background: var(--accent);
color: #fff;
}

.btn-primary:hover {
background: var(--accent2);
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--accent)66;
}

.btn-primary:active {
transform: translateY(1px);
box-shadow: none;
}

.btn-ghost {
background: var(--bg3);
color: var(--text2);
border: 1px solid var(--border);
}

.btn-ghost:hover {
color: var(--text);
border-color: var(--border2);
background: var(--bg4);
}

.btn-danger {
background: rgba(239, 68, 68, 0.13);
color: #ef6666;
border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
background: rgba(239, 68, 68, 0.2);
transform: translateY(-1px);
}

.btn-success {
background: rgba(74, 222, 128, 0.13);
color: #4ade80;
border: 1px solid rgba(74, 222, 128, 0.2);
}

.btn-success:hover {
background: rgba(74, 222, 128, 0.25);
transform: translateY(-1px);
}

.page-inner {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
transition: padding 0.3s;
}

.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}

.project-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
animation: fadeInSlideUp 0.4s backwards;
}

.project-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, transparent, rgba(124, 108, 255, 0.35), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s;
pointer-events: none;
}

.project-card:hover::before {
opacity: 1;
}

.project-card:nth-child(1) { animation-delay: 0.05s; }
.project-card:nth-child(2) { animation-delay: 0.1s; }
.project-card:nth-child(3) { animation-delay: 0.15s; }
.project-card:nth-child(4) { animation-delay: 0.2s; }
.project-card:nth-child(n+5) { animation-delay: 0.25s; }

.project-card:hover {
border-color: rgba(108, 99, 255, 0.33);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(108, 99, 255, 0.15);
}

.project-banner {
height: 100px;
background: var(--bg3);
position: relative;
overflow: hidden;
}

.project-banner img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}

.project-card:hover .project-banner img {
transform: scale(1.05);
}

.project-banner-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: linear-gradient(135deg, var(--bg3), var(--bg4));
}

.project-avatar {
width: 48px;
height: 48px;
border-radius: 10px;
border: 3px solid var(--bg2);
position: absolute;
bottom: -20px;
left: 1rem;
overflow: hidden;
background: var(--bg3);
transition: transform 0.3s;
}

.project-card:hover .project-avatar {
transform: scale(1.1);
}

.project-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.project-avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
background: linear-gradient(135deg, rgba(108, 99, 255, 0.2), rgba(139, 131, 255, 0.2));
}

.project-card-actions {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
gap: 0.4rem;
opacity: 0;
transition: opacity 0.2s;
}

.project-card:hover .project-card-actions {
opacity: 1;
}

.pc-action-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(0,0,0,0.6);
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(4px);
}

.pc-action-btn .ico {
width: 0.95rem;
height: 0.95rem;
stroke: #fff;
}

.pc-action-btn:hover {
background: var(--accent);
transform: scale(1.08);
}

.empty-state-icon .ico {
width: 3rem;
height: 3rem;
opacity: 0.35;
animation: floatSoft 3s ease-in-out infinite;
}

#file-protocol-banner {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10002;
background: linear-gradient(90deg, rgba(245, 158, 11, 0.13), rgba(239, 68, 68, 0.13));
border-bottom: 1px solid rgba(245, 158, 11, 0.3);
padding: 0.55rem 1rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--text);
text-align: center;
backdrop-filter: blur(8px);
}

#file-protocol-banner.visible {
display: block;
}

.project-body {
padding: 1.5rem 0.9rem 0.9rem;
}

.project-name {
font-weight: 700;
font-size: 0.95rem;
margin-top: 0.4rem;
transition: color 0.2s;
}

.project-card:hover .project-name {
color: var(--accent2);
}

.project-desc {
font-size: 0.78rem;
color: var(--text2);
margin-top: 0.3rem;
font-family: var(--font-mono);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.project-meta {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
}

.project-status {
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
font-family: var(--font-mono);
font-weight: 600;
text-transform: uppercase;
}

.status-live {
background: rgba(74, 222, 128, 0.13);
color: #4ade80;
border: 1px solid rgba(74, 222, 128, 0.2);
}

.status-stopped {
background: rgba(239, 68, 68, 0.13);
color: #ef6666;
border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-draft {
background: var(--bg4);
color: var(--text2);
border: 1px solid var(--border);
}

.project-link {
font-size: 0.7rem;
color: var(--accent2);
font-family: var(--font-mono);
text-decoration: none;
margin-left: auto;
transition: color 0.2s;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}

.project-link:hover {
text-decoration: underline;
color: var(--accent);
}

.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
height: 300px;
color: var(--text3);
font-family: var(--font-mono);
animation: fadeInScale 0.4s;
}

.empty-state-icon {
font-size: 3rem;
opacity: 0.3;
}

.empty-state-text {
font-size: 0.85rem;
}

/* Модальные окна */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
display: none;
transition: opacity 0.3s;
}

.modal-overlay.open {
display: flex;
animation: fadeInScale 0.2s forwards;
}

.modal {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
width: 520px;
max-width: 95vw;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.75rem;
}

.modal-title {
font-size: 1rem;
font-weight: 700;
flex: 1;
}

.modal-close {
background: none;
border: none;
color: var(--text3);
font-size: 1.2rem;
cursor: pointer;
padding: 0.25rem;
transition: color 0.2s, transform 0.2s;
}

.modal-close:hover {
color: var(--red);
transform: rotate(90deg);
}

.modal-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}

.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}

.form-label {
font-size: 0.75rem;
color: var(--text2);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.07em;
}

.form-label span {
color: var(--text3);
font-weight: 400;
}

.form-input, .form-textarea, .form-select {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.65rem 0.9rem;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.88rem;
outline: none;
transition: all 0.2s;
width: 100%;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.form-textarea {
resize: vertical;
min-height: 80px;
}

.form-select {
cursor: pointer;
}

.file-upload {
border: 2px dashed var(--border);
border-radius: 8px;
padding: 1.25rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
background: var(--bg3);
}

.file-upload:hover {
border-color: rgba(108, 99, 255, 0.4);
background: var(--bg4);
}

.file-upload input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}

.file-upload-text {
font-size: 0.82rem;
color: var(--text2);
font-family: var(--font-mono);
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}

.file-upload-formats {
font-size: 0.72rem;
color: var(--text3);
margin-top: 0.25rem;
}

.file-preview {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 6px;
margin-top: 0.5rem;
display: none;
animation: fadeInScale 0.3s;
}

.modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
display: flex;
gap: 0.75rem;
justify-content: flex-end;
}

/* Контекстное меню */
#custom-context-menu {
position: fixed;
z-index: 10000;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px;
min-width: 180px;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
display: none;
flex-direction: column;
gap: 2px;
}

.cm-item {
padding: 8px 12px;
border-radius: 5px;
font-size: 0.85rem;
cursor: pointer;
color: var(--text2);
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s;
}

.cm-item:hover {
background: var(--bg3);
color: var(--text);
}

#page-editor {
flex-direction: row;
}

.editor-layout {
display: flex;
flex: 1;
overflow: hidden;
height: 100%;
}

.file-tree {
width: 220px;
min-width: 220px;
background: var(--bg2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}

.file-tree-header {
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
font-weight: 700;
}

.file-tree-header-spacer {
flex: 1;
}

.file-tree-body {
flex: 1;
overflow-y: auto;
padding: 0.5rem;
}

.tree-item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.5rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.8rem;
font-family: var(--font-mono);
color: var(--text2);
transition: all 0.15s;
position: relative;
}

.tree-item:hover {
background: var(--bg3);
color: var(--text);
padding-left: 0.7rem;
}

.tree-item.active-file {
background: rgba(108, 99, 255, 0.11);
color: var(--accent2);
padding-left: 0.7rem;
border-left: 3px solid var(--accent);
}

.tree-item .tree-icon {
font-size: 0.85rem;
width: 1rem;
text-align: center;
flex-shrink: 0;
}

.tree-item .tree-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.tree-item .tree-actions {
display: none;
gap: 0.2rem;
flex-shrink: 0;
animation: fadeInScale 0.2s;
}

.tree-item:hover .tree-actions {
display: flex;
}

.tree-action-btn {
background: none;
border: none;
color: var(--text3);
cursor: pointer;
font-size: 0.8rem;
padding: 0.1rem 0.2rem;
border-radius: 3px;
transition: color 0.15s, transform 0.15s;
}

.tree-action-btn:hover {
color: var(--red);
transform: scale(1.1);
}

.tree-folder {
margin-left: 0.75rem;
}

.tree-folder-item {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.5rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.8rem;
font-family: var(--font-mono);
color: var(--text2);
transition: all 0.15s;
}

.tree-folder-item:hover {
background: var(--bg3);
color: var(--text);
padding-left: 0.7rem;
}

.tree-folder-item.active-file {
background: rgba(108, 99, 255, 0.11);
color: var(--accent2);
}

.tree-add-btns {
display: flex;
gap: 0.4rem;
padding: 0.5rem;
}

.tree-add-btn {
flex: 1;
padding: 0.35rem 0.5rem;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text2);
font-size: 0.72rem;
font-family: var(--font-mono);
cursor: text;
text-align: center;
transition: all 0.2s;
}

.tree-add-btn:hover {
border-color: rgba(108, 99, 255, 0.3);
color: var(--accent2);
background: var(--bg4);
}

.code-editor-area {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg);
}

.editor-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
background: var(--bg2);
overflow-x: auto;
flex-shrink: 0;
}

.editor-tab {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1rem;
font-size: 0.78rem;
font-family: var(--font-mono);
color: var(--text2);
cursor: pointer;
border-right: 1px solid var(--border);
white-space: nowrap;
transition: all 0.2s;
background: transparent;
border-bottom: 2px solid transparent;
}

.editor-tab:hover {
color: var(--text);
background: var(--bg3);
}

.editor-tab.active {
color: var(--accent2);
background: var(--bg);
border-bottom-color: var(--accent);
}

.editor-tab .tab-close {
margin-left: 0.3rem;
opacity: 0.5;
font-size: 0.75rem;
transition: opacity 0.2s, color 0.2s;
}

.editor-tab:hover .tab-close {
opacity: 1;
color: var(--red);
}

.code-area-wrap {
flex: 1;
display: flex;
overflow: hidden;
}

.code-area {
flex: 1;
background: var(--bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.7;
padding: 1rem 1.2rem;
border: none;
outline: none;
resize: none;
overflow-y: auto;
white-space: pre;
tab-size: 2;
transition: background 0.3s, color 0.3s;
}

.code-area::placeholder {
color: var(--text3);
}

.preview-panel {
width: 420px;
min-width: 300px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
background: var(--bg2);
transition: width 0.3s;
}

.preview-bar {
padding: 0.55rem 1rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 600;
background: var(--bg2);
}

.preview-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent3);
animation: pulseGlow 2s infinite;
}

.preview-bar-spacer {
flex: 1;
}

.preview-url {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--text2);
background: var(--bg3);
padding: 0.2rem 0.6rem;
border-radius: 4px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.preview-frame {
flex: 1;
border: none;
background: #fff;
transition: opacity 0.3s;
}

.preview-btn {
background: none;
border: none;
color: var(--text2);
cursor: pointer;
font-size: 0.85rem;
padding: 0.2rem 0.4rem;
border-radius: 4px;
transition: all 0.2s;
}

.preview-btn:hover {
color: var(--text);
background: var(--bg3);
transform: rotate(45deg);
}

.console-layout {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: var(--font-mono);
}

.console-output {
flex: 1;
overflow-y: auto;
padding: 1rem 1.2rem;
font-size: var(--term-font-size);
line-height: 1.8;
color: var(--accent3);
scroll-behavior: smooth;
}

.console-line {
display: flex;
gap: 0.75rem;
align-items: flex-start;
animation: fadeInSlideUp 0.2s;
}

.console-line.error .cl-text { color: var(--red); }
.console-line.warn .cl-text { color: var(--accent4); }
.console-line.info .cl-text { color: var(--accent2); }
.console-line.system .cl-text { color: var(--text3); }

.cl-time {
color: var(--text3);
flex-shrink: 0;
font-size: 0.85em;
}

.cl-prefix {
flex-shrink: 0;
}

.cl-text {
flex: 1;
word-break: break-all;
}

.console-input-row {
display: flex;
align-items: center;
padding: 0.75rem 1.2rem;
border-top: 1px solid var(--border);
gap: 0.75rem;
background: var(--bg2);
}

.console-prompt {
color: var(--accent2);
font-size: var(--term-font-size);
flex-shrink: 0;
}

.console-input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--text);
font-family: var(--font-mono);
font-size: var(--term-font-size);
}

.console-input::placeholder {
color: var(--text3);
}

/* Настройки */
.settings-grid {
display: grid;
grid-template-columns: 200px 1fr;
flex: 1;
overflow: hidden;
}

.settings-nav {
border-right: 1px solid var(--border);
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
background: var(--bg2);
}

.settings-nav-btn {
padding: 0.55rem 0.85rem;
border-radius: 7px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
background: none;
border: none;
color: var(--text2);
text-align: left;
font-family: var(--font-ui);
transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
width: 100%;
}

.settings-nav-btn:hover {
background: var(--bg3);
color: var(--text);
padding-left: 1.2rem;
}

.settings-nav-btn.active {
background: rgba(108, 99, 255, 0.11);
color: var(--accent2);
padding-left: 1.2rem;
border-left: 3px solid var(--accent);
}

.settings-content {
overflow-y: auto;
padding: 1.5rem 2rem;
scroll-behavior: smooth;
}

.settings-section-title {
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
animation: fadeInSlideUp 0.3s;
}

.settings-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1.25rem;
margin-bottom: 1rem;
transition: all 0.3s;
animation: fadeInSlideUp 0.4s backwards;
}

.settings-card:hover {
border-color: var(--border2);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.settings-card-title {
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 0.75rem;
}

.settings-row {
display: flex;
align-items: center;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
transition: background 0.2s;
}

.settings-row:hover {
background: rgba(255, 255, 255, 0.015);
}

.settings-row:last-child {
border-bottom: none;
}

.settings-row-label {
flex: 1;
font-size: 0.85rem;
}

.settings-row-sub {
font-size: 0.75rem;
color: var(--text2);
font-family: var(--font-mono);
margin-top: 0.15rem;
}

.toggle {
position: relative;
width: 42px;
height: 24px;
flex-shrink: 0;
}

.toggle input {
opacity: 0;
width: 0;
height: 0;
}

.toggle-slider {
position: absolute;
inset: 0;
background: var(--bg4);
border-radius: 24px;
cursor: pointer;
transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
border: 1px solid var(--border2);
}

.toggle input:checked + .toggle-slider {
background: var(--accent);
border-color: var(--accent);
}

.toggle-slider::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
left: 2px;
top: 2px;
background: #fff;
border-radius: 50%;
transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle input:checked + .toggle-slider::before {
transform: translateX(18px);
}

.theme-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}

.theme-card {
border: 2px solid var(--border);
border-radius: 8px;
padding: 0.75rem;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
text-align: center;
font-size: 0.78rem;
font-family: var(--font-mono);
background: var(--bg3);
}

.theme-card:hover {
border-color: rgba(108, 99, 255, 0.3);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.theme-card.selected {
border-color: var(--accent);
background: var(--bg2);
box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}

.theme-swatch {
width: 100%;
height: 40px;
border-radius: 5px;
margin-bottom: 0.5rem;
transition: transform 0.3s;
}

.theme-card:hover .theme-swatch {
transform: scale(1.05);
}

.font-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.font-option {
padding: 0.65rem 1rem;
border: 1px solid var(--border);
border-radius: 7px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
}

.font-option:hover {
border-color: rgba(108, 99, 255, 0.3);
transform: translateX(4px);
}

.font-option.selected {
border-color: var(--accent);
background: rgba(108, 99, 255, 0.08);
}

.font-name {
font-weight: 600;
flex: 1;
}

.font-sample {
color: var(--text2);
font-size: 0.8rem;
}

.cf-embed {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}

.cf-frame {
flex: 1;
border: none;
width: 100%;
}

.sites-table {
width: 100%;
border-collapse: collapse;
}

.sites-table th {
text-align: left;
padding: 0.6rem 1rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text3);
font-family: var(--font-mono);
border-bottom: 1px solid var(--border);
}

.sites-table td {
padding: 0.7rem 1rem;
font-size: 0.83rem;
border-bottom: 1px solid rgba(255,255,255,0.03);
vertical-align: middle;
transition: background 0.2s;
}

.sites-table tr:hover td {
background: rgba(255,255,255,0.01);
}

/* Уведомления */
#notif-area {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.notif {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.7rem 1rem;
font-size: 0.82rem;
font-family: var(--font-mono);
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 240px;
max-width: 320px;
animation: slideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

.notif.success { border-color: rgba(74, 222, 128, 0.25); border-left: 4px solid #4ade80; }
.notif.error { border-color: rgba(239, 68, 68, 0.25); border-left: 4px solid #ef4444; }
.notif.info { border-color: rgba(108, 99, 255, 0.25); border-left: 4px solid var(--accent); }

@keyframes slideIn {
from { transform: translateX(120%); opacity: 0; }
to { transform: none; opacity: 1; }
}

@keyframes fadeOut {
to { opacity: 0; transform: translateX(120%); }
}

.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--border2);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
background: var(--border2);
border-radius: 4px;
transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}

.input-dialog {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
display: none;
transition: opacity 0.3s;
}

.input-dialog.open {
display: flex;
animation: fadeInScale 0.2s forwards;
}

.input-dialog-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
width: 320px;
display: flex;
flex-direction: column;
gap: 1rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.input-dialog-title {
font-size: 0.95rem;
font-weight: 700;
}

.input-dialog-btns {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}

.resize-handle {
width: 4px;
cursor: col-resize;
background: var(--border);
transition: background 0.2s;
flex-shrink: 0;
}

.resize-handle:hover {
background: var(--accent);
}

.dash-console-header {
padding: 0.65rem 1.2rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--bg2);
font-size: 0.82rem;
font-weight: 700;
}

.dash-console-header .dc-project-select {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.3rem .6rem;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.78rem;
outline: none;
transition: border-color 0.2s;
}

.dash-console-header .dc-project-select:focus {
border-color: var(--accent);
}

code {
font-family: var(--font-mono);
}

#public-viewer {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 10000;
display: none;
flex-direction: column;
animation: fadeInScale 0.3s forwards;
}

#public-viewer iframe {
flex: 1;
border: none;
width: 100%;
height: 100%;
background: #fff;
}

.pv-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
color: var(--text);
font-family: var(--font-mono);
text-align: center;
padding: 2rem;
}

.nav-btn-2 {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 1rem;
margin: 0.1rem 0.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
color: #fff;
border: none;
background: #0084ff;
width: calc(100% - 1rem);
text-align: left;
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-btn-2:hover {
background: #0068c9;
color: #fff;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(0, 104, 201, 0.3);
}

/* Эффект матового стекла (glassmorphism) */
body.glassmorphism .topbar,
body.glassmorphism #sidebar,
body.glassmorphism .settings-card,
body.glassmorphism .auth-card,
body.glassmorphism .modal,
body.glassmorphism .input-dialog-card {
background: rgba(17, 17, 24, 0.5) !important;
backdrop-filter: blur(16px) !important;
border-color: rgba(255, 255, 255, 0.05) !important;
}

body.glassmorphism .project-card {
background: rgba(17, 17, 24, 0.4) !important;
backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
АДАПТИВНОСТЬ И МОБИЛЬНОЕ МЕНЮ
========================================================================== */

@keyframes cloudEntry {
0% { opacity: 0; transform: scale(0.95) translateY(30px); filter: blur(8px); }
100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

#app.entered {
animation: cloudEntry 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(17, 17, 24, 0.85);
backdrop-filter: blur(16px);
border-top: 1px solid var(--border);
z-index: 9000;
padding: 0.5rem 1rem;
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
justify-content: space-between;
align-items: center;
}

.bn-btn {
background: none;
border: none;
color: var(--text2);
font-family: var(--font-ui);
font-size: 0.65rem;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
flex: 1;
}

.bn-btn:hover { color: var(--text); }
.bn-btn.active { color: var(--accent); transform: translateY(-3px); }
.bn-btn.active .ico { filter: drop-shadow(0 0 6px rgba(108, 99, 255, 0.6)); }
.bn-btn .bn-icon { font-size: 1.15rem; }

.mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--text);
font-size: 1.5rem;
cursor: pointer;
padding: 0.2rem;
}

.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(5px);
z-index: 9400;
opacity: 0;
transition: opacity 0.3s ease;
}

.sidebar-overlay.open {
opacity: 1;
display: block;
}

/* МЕДИА-ЗАПРОСЫ ДЛЯ ТЕЛЕФОНОВ И ПЛАНШЕТОВ */
@media (max-width: 768px) {
html, body {
overflow: hidden;
-webkit-text-size-adjust: 100%;
}
}

.bottom-nav {
display: flex;
}

.mobile-menu-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}

#app {
width: 100%;
height: 100vh;
height: 100dvh;
position: relative;
}

#sidebar {
position: fixed;
left: -100%;
top: 0;
bottom: 0;
z-index: 9500;
width: min(280px, 85vw);
min-width: unset;
box-shadow: 20px 0 50px rgba(0,0,0,0.6);
transition: left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
padding-bottom: env(safe-area-inset-bottom);
background: var(--bg2);
}

#sidebar.open {
left: 0;
}

#main {
width: 100%;
min-width: 0;
padding-top: 52px;
padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

/* Верхний заголовок навигации */
#global-header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
padding: 0.5rem 0.75rem !important;
padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
justify-content: flex-start;
gap: 0.5rem !important;
background: rgba(17, 17, 24, 0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
z-index: 8500;
}

#global-header .top-btn-round {
display: none;
}

#global-header .mobile-menu-btn {
margin-right: auto;
font-size: 1.35rem;
}

/* Шапки внутренних разделов */
.topbar {
flex-wrap: wrap;
gap: 0.35rem 0.75rem;
padding: 0.65rem 1rem;
padding-right: 3.5rem;
}

.topbar-title {
font-size: 0.92rem;
}

.topbar-sub {
font-size: 0.68rem;
margin-left: 0;
width: 100%;
order: 3;
opacity: 0.85;
}

.topbar .btn {
font-size: 0.78rem;
padding: 0.45rem 0.75rem;
}

.page-inner {
padding: 1rem;
-webkit-overflow-scrolling: touch;
}

/* Проекты */
.projects-grid {
grid-template-columns: 1fr;
gap: 0.85rem;
}

.project-card:hover {
transform: none;
}

.project-card-actions {
opacity: 1;
}

.pc-action-btn {
width: 36px;
height: 36px;
}

.project-body {
padding: 1.35rem 0.85rem 0.85rem;
}

.project-meta {
flex-wrap: wrap;
gap: 0.4rem;
}

.project-link {
margin-left: 0;
width: 100%;
margin-top: 0.25rem;
}

/* Оптимизация инпутов под сенсорное нажатие */
.form-input, .form-textarea, .form-select, .auth-input, .console-input {
font-size: 16px;
min-height: 44px;
}

.form-textarea {
min-height: 100px;
}

.btn {
min-height: 44px;
padding: 0.55rem 1rem;
}

.auth-btn, .auth-social-btn {
min-height: 46px;
}

/* Авторизация */
#auth-screen {
padding: 1rem;
padding-top: calc(1rem + env(safe-area-inset-top));
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
overflow-y: auto;
justify-content: flex-start;
}

.auth-top-links {
position: static;
justify-content: center;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
}

.auth-wrap {
padding: 0 0.25rem;
}

.auth-hero {
margin-bottom: 1rem;
transform: scale(0.85);
}

.auth-card {
width: 100%;
max-width: 400px;
padding: 1.35rem 1.15rem;
border-radius: 14px;
}

.auth-brand {
font-size: 1.2rem;
}

.auth-tagline {
font-size: 0.7rem;
margin-bottom: 1.1rem;
}

/* Настройки */
.settings-grid {
grid-template-columns: 1fr;
overflow-y: auto;
display: flex;
flex-direction: column;
}

.settings-nav {
border-right: none;
border-bottom: 1px solid var(--border);
flex-direction: row;
overflow-x: auto;
padding: 0.5rem 0.75rem;
flex-shrink: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}

.settings-nav::-webkit-scrollbar {
display: none;
}

.settings-nav-btn {
white-space: nowrap;
width: auto;
flex-shrink: 0;
border-left: none !important;
border-bottom: 3px solid transparent;
padding: 0.5rem 0.75rem;
font-size: 0.78rem;
}

.settings-nav-btn:hover {
padding-left: 0.75rem;
}

.settings-nav-btn.active {
border-bottom: 3px solid var(--accent);
padding-left: 0.75rem;
border-left: none !important;
}

.settings-content {
padding: 1rem;
}

.settings-card {
padding: 1rem;
}

.settings-row {
flex-wrap: wrap;
gap: 0.5rem;
align-items: flex-start;
}

.settings-row .btn, .settings-row .form-select {
width: 100%;
max-width: 100%;
}

.theme-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}

/* Редактор кода */
#page-editor {
flex-direction: column;
}

.editor-layout {
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.file-tree {
width: 100%;
min-width: unset;
max-height: 140px;
border-right: none;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}

.code-editor-area {
min-height: 220px;
flex: 1;
}

.code-area {
font-size: 0.8rem;
padding: 0.75rem;
line-height: 1.6;
}

.editor-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.editor-tab {
padding: 0.5rem 0.75rem;
font-size: 0.72rem;
}

.preview-panel {
width: 100%;
min-width: unset;
height: 200px;
max-height: 35vh;
border-left: none;
border-top: 1px solid var(--border);
flex-shrink: 0;
}

.preview-url {
display: none;
}

.resize-handle {
display: none;
}

/* Консоли и ИИ чат */
.console-output {
padding: 0.75rem;
font-size: 0.82rem;
line-height: 1.65;
}

.console-input-row {
padding: 0.65rem 0.75rem;
gap: 0.5rem;
}

.console-prompt {
font-size: 0.78rem;
}

.dash-console-header {
flex-wrap: wrap;
padding: 0.6rem 0.75rem;
gap: 0.5rem;
}

.dash-console-header .dc-project-select {
width: 100%;
min-height: 40px;
}

.ai-chat-messages {
padding: 0.75rem;
}

.ai-msg {
max-width: 92%;
font-size: 0.82rem;
padding: 0.65rem 0.85rem;
}

/* Таблицы */
.sites-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.sites-table th, .sites-table td {
padding: 0.55rem 0.65rem;
font-size: 0.75rem;
white-space: nowrap;
}

/* Диалоги и Модальные окна */
.modal-overlay {
padding: 0.75rem;
align-items: flex-end;
}

.modal {
width: 100% !important;
max-width: 100%;
max-height: 92vh;
border-radius: 16px 16px 0 0;
margin-bottom: 0;
}

.modal-header {
padding: 1rem 1.15rem;
}

.modal-body {
padding: 1rem 1.15rem;
}

.modal-footer {
flex-wrap: wrap;
padding: 0.85rem 1.15rem;
padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
}

.modal-footer .btn {
flex: 1;
justify-content: center;
min-width: calc(50% - 0.4rem);
}

.input-dialog {
align-items: flex-end;
padding: 0.75rem;
}

.input-dialog-card {
width: 100%;
max-width: 100%;
border-radius: 14px 14px 0 0;
padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* Позиционирование уведомлений над TabBar */
#notif-area {
top: auto;
bottom: calc(72px + env(safe-area-inset-bottom));
left: 0.75rem;
right: 0.75rem;
align-items: stretch;
}

.notif {
min-width: unset;
max-width: 100%;
width: 100%;
font-size: 0.78rem;
}

.bottom-nav {
padding-left: 0.5rem;
padding-right: 0.5rem;
gap: 0.15rem;
}

.bn-btn {
font-size: 0.58rem;
gap: 0.2rem;
min-height: 48px;
padding: 0.25rem 0.15rem;
}

.bn-btn .bn-icon {
font-size: 1.15rem;
}

#custom-context-menu {
min-width: 160px;
}

.cm-item {
padding: 12px 14px;
min-height: 44px;
}

.cf-embed {
min-height: 300px;
}

/* Отключение hover-трансформаций для тач-устройств */
.nav-btn:hover { transform: none; }
.theme-card:hover { transform: none; }

/* Сверхмалые мобильные экраны */
@media (max-width: 480px) {
.auth-hero {
transform: scale(0.75);
margin-bottom: 0.5rem;
}

.auth-card {
padding: 1.15rem 1rem;
gap: 0.7rem;
}

.auth-consent-box {
font-size: 0.68rem;
}

.topbar-title {
font-size: 0.85rem;
}

.topbar-sub {
font-size: 0.62rem;
}

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

.theme-swatch {
height: 32px;
}

.preview-panel {
height: 160px;
max-height: 28vh;
}

.file-tree {
max-height: 120px;
}

.bn-btn {
font-size: 0.52rem;
}

.bn-btn .bn-icon {
font-size: 1.05rem;
}

.project-banner {
height: 85px;
}

.project-avatar {
width: 42px;
height: 42px;
bottom: -18px;
}

.modal-footer .btn {
min-width: 100%;
}

.input-dialog-btns {
flex-direction: column-reverse;
}

.input-dialog-btns .btn {
width: 100%;
justify-content: center;
}
}

/* Ландшафтный (альбомный) режим для мобильных устройств */
@media (max-width: 768px) and (orientation: landscape) {
#auth-screen {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
}

.auth-hero {
transform: scale(0.65);
margin-bottom: 0;
}

.auth-wrap {
width: auto;
flex: 1;
min-width: 280px;
max-width: 380px;
}

.editor-layout {
flex-direction: row;
flex-wrap: wrap;
}

.file-tree {
width: 180px;
max-height: none;
height: auto;
border-right: 1px solid var(--border);
border-bottom: none;
}

.code-editor-area {
flex: 1;
min-width: 200px;
min-height: 0;
}

.preview-panel {
width: 100%;
height: 140px;
max-height: none;
border-top: 1px solid var(--border);
}
}