/* style/dev.css */

:root {
 --bg1: linear-gradient(135deg, #0f172a 0%, #0b1220 40%, #071024 100%);
 --glass: rgba(255, 255, 255, 0.06);
 --accent: linear-gradient(90deg, #7c3aed, #06b6d4);
 --text: #e6eef8;
 --muted: #9fb3c8;
 --card-radius: 16px;
 font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

body {
 margin: 0;
 min-height: 100%;
 color: var(--text);
 background: var(--bg1);
 padding: 70px 16px 32px; /* отступ сверху под шапку */
 display: flex;
 justify-content: center;
 align-items: flex-start;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

/* Topbar */
.topbar {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 60px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 20px;
 background: rgba(15, 23, 42, 0.8);
 backdrop-filter: blur(8px);
 border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 z-index: 1000;
}
.topbar .logo {
 font-weight: 700;
 font-size: 20px;
 background: var(--accent);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}
.burger {
 width: 28px;
 height: 22px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 cursor: pointer;
}
.burger span {
 height: 3px;
 border-radius: 2px;
 background: var(--text);
 transition: 0.3s;
}

/* Sidebar */
.sidebar {
 position: fixed;
 top: 0;
 right: -260px;
 width: 240px;
 height: 100%;
 background: rgba(15, 23, 42, 0.95);
 backdrop-filter: blur(10px);
 transition: right 0.3s ease;
 padding: 80px 20px;
 z-index: 999;
}
.sidebar.open { right: 0; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin-bottom: 16px; }
.sidebar a {
 color: var(--text);
 text-decoration: none;
 font-size: 16px;
 transition: color 0.2s;
}
.sidebar a:hover { color: #06b6d4; }

/* Layout */
.site-wrap {
 width: 1100px;
 max-width: 100%;
 display: grid;
 grid-template-columns: 360px 1fr;
 grid-gap: 28px;
 align-items: start;
}

/* Cards */
.card {
 background: var(--glass);
 border-radius: var(--card-radius);
 padding: 18px;
 backdrop-filter: blur(6px);
 border: 1px solid rgba(255, 255, 255, 0.03);
 box-shadow: 0 6px 24px rgba(2, 6, 23, 0.6);
}

/* QR */
.qr-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
}
.qr-placeholder {
 width: 260px;
 height: 260px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.qr-img {
 width: 220px;
 height: 220px;
 border-radius: 22px;
 padding: 12px;
 background: linear-gradient(135deg, #3b82f6, #06b6d4);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
 object-fit: contain;
}

.qr-footer {
 width: 100%;
 display: flex;
 justify-content: space-between;
 font-size: 12px;
 color: var(--muted);
}

/* Branding */
.brand {
 font-weight: 700;
 font-size: 44px;
 letter-spacing: 1px;
 background: var(--accent);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}
.subtitle {
 font-size: 13px;
 color: var(--muted);
 margin-top: -6px;
}

/* Buttons */
.btn-open,
.pill {
 cursor: pointer;
 border: 1px solid rgba(255, 255, 255, 0.04);
 border-radius: 12px;
 font-size: 13px;
 color: var(--muted);
}
.btn-open {
 margin-top: 6px;
 padding: 10px 14px;
 background: linear-gradient(90deg, rgba(124, 58, 237, 0.18), rgba(6, 182, 212, 0.12));
}
.pill {
 padding: 8px 12px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.03);
 margin: 4px 0;
}

/* Sections */
.about h3 {
 margin: 0 0 8px;
 font-size: 18px;
}
.about p {
 margin: 0;
 color: var(--muted);
 line-height: 1.45;
}

.stack-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.chip {
 padding: 8px 10px;
 border-radius: 0px;
 background: rgba(255, 255, 255, 0.02);
 font-size: 13px;
 color: var(--muted);
 border: 1px solid rgba(255, 255, 255, 0.02);
}


/* Menu */
.u-custom-menu .u-nav-link {
 color: var(--text);
 text-decoration: none;
 transition: color 0.2s;
}
.u-custom-menu .u-nav-link:hover { color: #06b6d4; }

/* Light theme */
body.light {
 --bg1: linear-gradient(135deg, #f7fbff 0%, #eef7ff 40%, #eef7fb 100%);
 --text: #081028;
 --muted: #385063;
 --glass: rgba(4, 8, 20, 0.04);
}

/* Responsive */
@media (max-width: 900px) {
.site-wrap { grid-template-columns: 1fr; }
}