/*
   Modern, minimal theme for bestian.ru (static)

   Goals:
   - Use a modern, glassy style similar to ebosch.io
   - Keep compatibility with legacy article pages (table-based markup)
   - Provide responsive layouts without changing old HTML
*/

:root {
   --bg: #f6f7fb;
   --panel: rgba(255, 255, 255, 0.78);
   --panel-2: rgba(255, 255, 255, 0.62);
   --text: rgba(15, 23, 42, 0.95);
   --muted: rgba(51, 65, 85, 0.82);
   --border: rgba(15, 23, 42, 0.12);
   --shadow: 0 18px 55px rgba(15, 23, 42, 0.14);

   --a: #7c3aed;
   --b: #22d3ee;
   --c: #60a5fa;

   --radius: 18px;
}

* {
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   margin: 0;
   color: var(--text);
   background:
   radial-gradient(1200px 900px at 70% 10%, rgba(124, 58, 237, 0.10), transparent 60%),
   radial-gradient(1100px 800px at 20% 80%, rgba(34, 211, 238, 0.10), transparent 55%),
      var(--bg);
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
   line-height: 1.45;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: geometricPrecision;
}

img {
   border: none;
   max-width: 100%;
   height: auto;
}

/* Links */
a {
   color: rgba(37, 99, 235, 0.95);
   text-decoration: none;
   border-bottom: 1px solid rgba(37, 99, 235, 0.25);
}

a:hover {
   color: rgba(2, 132, 199, 0.95);
   border-bottom-color: rgba(2, 132, 199, 0.35);
}

/* Background helper for new pages */
.bg {
   position: fixed;
   inset: 0;
   pointer-events: none;
   background:
      radial-gradient(900px 520px at 58% 28%, rgba(124, 58, 237, 0.12), transparent 60%),
      radial-gradient(820px 520px at 30% 70%, rgba(34, 211, 238, 0.10), transparent 62%);
   opacity: 0.9;
}

.wrap {
   position: relative;
   width: min(1100px, calc(100% - 24px));
   margin: 18px auto 48px;
}

/* Masthead (logo banner + overlay nav) */
.masthead {
   margin: 0;
}

.masthead__frame {
   position: relative;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--panel-2);
   box-shadow: var(--shadow);
   backdrop-filter: blur(10px);
   overflow: hidden;
}

.masthead__home {
   display: block;
   border-bottom: 0;
}

.masthead__logo {
   display: block;
   width: 100%;
   height: auto;
}

.masthead__nav {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
   padding: 12px 12px;
   border-top: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.62);
   backdrop-filter: blur(12px);
}

.masthead__link {
   display: inline-flex;
   align-items: center;
   padding: 8px 12px;
   border: 1px solid rgba(15, 23, 42, 0.12);
   border-radius: 12px;
   background: rgba(248, 250, 252, 0.55);
   color: rgba(15, 23, 42, 0.86);
   border-bottom: 0;
}

.masthead__link:hover {
   background: rgba(248, 250, 252, 0.9);
   color: rgba(15, 23, 42, 0.96);
}

.masthead__link--active {
   background: rgba(124, 58, 237, 0.12);
   border-color: rgba(124, 58, 237, 0.28);
   color: rgba(15, 23, 42, 0.98);
}

/* New static nav */
.topnav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 12px 14px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--panel-2);
   box-shadow: var(--shadow);
   backdrop-filter: blur(10px);
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   border-bottom: 0;
}

.brand__logo {
   width: 40px;
   height: 40px;
   border-radius: 999px;
   border: 1px solid rgba(15, 23, 42, 0.12);
   background: rgba(248, 250, 252, 0.5);
}

.brand__text {
   color: rgba(15, 23, 42, 0.9);
   font-weight: 650;
   letter-spacing: -0.01em;
}

.topnav__links {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
}

.topnav__link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 10px;
   border: 1px solid rgba(15, 23, 42, 0.12);
   border-radius: 10px;
   background: rgba(248, 250, 252, 0.55);
   color: rgba(15, 23, 42, 0.72);
   border-bottom: 0;
}

.topnav__link:hover {
   background: rgba(248, 250, 252, 0.9);
   color: rgba(15, 23, 42, 0.92);
}

.topnav__link--active {
   background: rgba(124, 58, 237, 0.12);
   border-color: rgba(124, 58, 237, 0.28);
   color: rgba(15, 23, 42, 0.96);
}

main.content {
   margin-top: 16px;
}

.hero {
   padding: 22px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.62);
   box-shadow: var(--shadow);
   backdrop-filter: blur(10px);
}

.hero--small {
   padding: 18px 22px;
}

.hero__card {
   display: grid;
   gap: 12px;
}

.site-logo {
   display: block;
   width: min(520px, 100%);
   height: auto;
   opacity: 0.94;
   filter: drop-shadow(0 16px 35px rgba(15, 23, 42, 0.18));
}

.site-logo--small {
   width: min(420px, 100%);
   opacity: 0.9;
}

.badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
   border-radius: 999px;
   border: 1px solid rgba(15, 23, 42, 0.12);
   background: rgba(255, 255, 255, 0.62);
   width: fit-content;
}

.badge__dot {
   width: 10px;
   height: 10px;
   border-radius: 999px;
   background: linear-gradient(135deg, var(--b), var(--a));
   box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12);
}

.badge__text {
   font-size: 12px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: rgba(15, 23, 42, 0.68);
}

.hero__title {
   margin: 0;
   font-size: clamp(34px, 5.2vw, 56px);
   letter-spacing: -0.02em;
}

.hero__subtitle {
   margin: 0;
   font-size: clamp(16px, 2.2vw, 20px);
   color: rgba(51, 65, 85, 0.92);
}

.panel {
   margin-top: 16px;
   padding: 18px 20px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--panel);
   box-shadow: var(--shadow);
   backdrop-filter: blur(10px);
}

.section-title {
   margin: 0 0 10px;
   font-size: 16px;
   letter-spacing: 0.02em;
   text-transform: uppercase;
   color: rgba(51, 65, 85, 0.92);
}

.section-title--page {
   margin-bottom: 14px;
}

.muted {
   color: var(--muted);
}

.grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   margin-top: 8px;
}

@media (max-width: 720px) {
   .wrap {
      width: calc(100% - 18px);
   }

   .masthead__nav {
      justify-content: center;
      padding: 10px;
   }

   .topnav {
      flex-direction: column;
      align-items: stretch;
   }

   .topnav__links {
      justify-content: flex-start;
   }

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

.tile {
   display: block;
   padding: 14px 14px;
   border-radius: calc(var(--radius) - 4px);
   border: 1px solid rgba(15, 23, 42, 0.10);
   background: rgba(255, 255, 255, 0.68);
   border-bottom: 0;
}

.tile:hover {
   border-color: rgba(2, 132, 199, 0.28);
   background: rgba(255, 255, 255, 0.9);
}

.tile__title {
   color: rgba(15, 23, 42, 0.95);
   font-weight: 700;
   margin-bottom: 4px;
}

.tile__hint {
   color: rgba(51, 65, 85, 0.72);
   font-size: 13px;
}

.year {
   margin: 18px 0 10px;
   font-size: 18px;
   letter-spacing: -0.01em;
}

.link-list {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 10px;
}

.link-list a {
   display: inline-block;
   padding: 10px 12px;
   border-radius: 12px;
   border: 1px solid rgba(15, 23, 42, 0.10);
   background: rgba(255, 255, 255, 0.68);
   border-bottom: 0;
}

.link-list a:hover {
   background: rgba(255, 255, 255, 0.9);
}

.footer {
   margin-top: 16px;
   padding: 16px 4px;
   text-align: center;
   color: rgba(51, 65, 85, 0.72);
   font-size: 12px;
}

/*
   Legacy article pages
   (table.container + table.outertable + td classes)
*/

table {
   border-collapse: collapse;
}

table.container {
   width: min(980px, calc(100% - 24px)) !important;
   margin: 22px auto !important;
   background: transparent !important;
}

table.outertable {
   width: 100% !important;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid rgba(15, 23, 42, 0.10);
   background: rgba(255, 255, 255, 0.78);
   box-shadow: var(--shadow);
}

th.header {
   color: rgba(15, 23, 42, 0.92);
   font-size: 22px;
   font-weight: 750;
   padding: 14px 16px;
   text-align: left;
   background:
      radial-gradient(700px 220px at 40% 10%, rgba(124, 58, 237, 0.16), transparent 60%),
      radial-gradient(680px 240px at 70% 40%, rgba(34, 211, 238, 0.12), transparent 60%),
      rgba(248, 250, 252, 0.95);
}

td.secheader {
   background: rgba(248, 250, 252, 0.9);
   border-top: 1px solid rgba(15, 23, 42, 0.08);
   color: rgba(15, 23, 42, 0.86);
   font-size: 16px;
   font-weight: 700;
   padding: 10px 16px;
   text-align: left;
}

table.content {
   width: 100% !important;
}

td.pages_numbers {
   background: rgba(248, 250, 252, 0.9);
   border-top: 1px solid rgba(15, 23, 42, 0.10);
   border-left: 1px solid rgba(15, 23, 42, 0.10);
   border-right: 1px solid rgba(15, 23, 42, 0.10);
   color: rgba(15, 23, 42, 0.72);
   font-size: 13px;
   font-weight: 650;
   padding: 10px 12px;
   text-align: center;
}

td.pages_numbers a {
   display: inline-block;
   margin: 2px 4px;
   padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid rgba(15, 23, 42, 0.10);
   background: rgba(255, 255, 255, 0.72);
   border-bottom: 0;
}

td.pages_numbers a:hover {
   background: rgba(255, 255, 255, 0.95);
}

td.opis,
td.opis_brx {
   background: rgba(255, 255, 255, 0.78);
   border-left: 1px solid rgba(15, 23, 42, 0.10);
   border-right: 1px solid rgba(15, 23, 42, 0.10);
   color: rgba(15, 23, 42, 0.88);
   font-size: 14px;
   padding: 10px 14px;
   text-align: left;
}

td.opis_br {
   background: rgba(245, 158, 11, 0.18);
   color: rgba(15, 23, 42, 0.92);
   font-size: 12px;
   padding: 10px 14px;
   font-weight: 750;
   text-align: center;
}

td.content {
   background: rgba(248, 250, 252, 0.85);
   padding: 14px;
   vertical-align: middle;
   border-top: 1px solid rgba(15, 23, 42, 0.10);
   border-left: 1px solid rgba(15, 23, 42, 0.10);
   border-right: 1px solid rgba(15, 23, 42, 0.10);
}

td.content img {
   border-radius: 14px;
   box-shadow: 0 16px 46px rgba(15, 23, 42, 0.18);
}

td.thumbs,
td.navi,
td.desc,
td.footer {
   color: rgba(51, 65, 85, 0.86);
}

@media (prefers-reduced-motion: reduce) {
   * {
      scroll-behavior: auto !important;
      transition: none !important;
      animation: none !important;
   }
}