/* Базовые сбросы и стили страницы */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      /* Ретро-фон: градиент сине-стальных тонов с мелкой полоской/сеткой Web 2.0 */
      background: linear-gradient(135deg, #446580 0%, #304e67 50%, #203a4f 100%);
      background-attachment: fixed;
      color: #222;
      padding: 15px 10px 40px;
      position: relative;
    }

    /* Фоновая микротекстура */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.03) 2px,
        transparent 2px,
        transparent 4px
      );
      pointer-events: none;
      z-index: 0;
    }

    /* Центральный контейнер портала */
    .portal-container {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin: 0 auto;
      background: #ffffff;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0,0,0,0.8);
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #7c98b3;
    }

    /* Верхний баннер */
    .header-banner {
      position: relative;
      width: 100%;
      height: 180px;
      background: #467198 url('../img/img1.jpg') center center / cover no-repeat;
      border-bottom: 2px solid #234b73;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
    }

    /* Верхняя синяя плашка заголовка поверх панорамы */
    .header-title-bar {
      background: linear-gradient(180deg, rgba(32, 69, 107, 0.95) 0%, rgba(56, 104, 153, 0.82) 60%, rgba(41, 79, 119, 0.35) 100%);
      padding: 6px 20px 10px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      backdrop-filter: blur(1px);
    }

    .header-title-bar h1 {
      font-family: 'Marck Script', 'Caveat', cursive;
      font-size: 34px;
      color: #ffffff;
      font-weight: 700;
      letter-spacing: 1px;
      text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8), 0 0 12px rgba(110, 185, 255, 0.6);
      line-height: 1.1;
    }

    .header-title-bar .subtitle {
      font-family: 'Marck Script', 'Caveat', cursive;
      font-size: 24px;
      color: #e5f1ff;
      font-style: italic;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.85);
    }

    /* Навигационная панель с градиентными вкладками */
    .glossy-navbar {
      background: linear-gradient(180deg, #d3e4f3 0%, #b8d2eb 48%, #93b7dd 50%, #a2c3e5 100%);
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #6b8ea9;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0 4px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.1);
    }

    .nav-tabs {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
    }

    .nav-tabs li a {
      display: block;
      padding: 6px 14px;
      font-size: 11px;
      font-weight: bold;
      color: #173859;
      text-decoration: none;
      border-right: 1px solid #7d9fb8;
      border-left: 1px solid #edf4fb;
      text-shadow: 0 1px 0 rgba(255,255,255,0.7);
      transition: background 0.15s ease, color 0.15s ease;
      cursor: pointer;
    }

    .nav-tabs li:first-child a {
      border-left: none;
    }

    .nav-tabs li a:hover,
    .nav-tabs li.active a {
      background: linear-gradient(180deg, #ffffff 0%, #e3effa 50%, #bdd7f0 100%);
      color: #0b2239;
    }

    /* Основная рабочая область */
    .portal-body {
      display: grid;
      grid-template-columns: 140px 1fr;
      min-height: 700px;
      background: #f4f8fc;
      background: linear-gradient(90deg, #ebf2f8 0%, #f6faff 140px, #ffffff 150px);
    }

    /* Левая колонка со стилизованными кнопками */
    .sidebar {
      padding: 16px 10px;
      border-right: 1px solid #cfdeeb;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .icon-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      width: 100%;
      cursor: pointer;
      group: relative;
    }

    .icon-box {
      width: 72px;
      height: 58px;
      border: 1px solid #7c93a8;
      border-radius: 4px;
      background: #ffffff;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.25), inset 0 0 3px rgba(0,0,0,0.15);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .icon-box svg, .icon-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .icon-button:hover .icon-box {
      transform: translateY(-2px);
      box-shadow: 3px 4px 8px rgba(0,0,0,0.35);
      border-color: #2b567d;
    }

    .icon-label {
      margin-top: 4px;
      font-family: 'Caveat', 'Marck Script', cursive, sans-serif;
      font-size: 15px;
      color: #1a3451;
      font-weight: 700;
      text-align: center;
      line-height: 1.1;
      text-shadow: 0 1px 0 rgba(255,255,255,0.8);
      transition: color 0.15s;
    }

    .icon-button:hover .icon-label {
      color: #034f84;
    }

    /* Правая колонка: новости и публикации */
    .main-content {
      padding: 15px 18px 25px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Карточки документов и новостей 2000-х */
    .doc-card {
      border: 1px solid #6b8ea9;
      background: #f8fbff;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      font-size: 11px;
    }

    .doc-header {
      background: linear-gradient(180deg, #446f97 0%, #2f567b 100%);
      color: #ffffff;
      padding: 4px 8px;
      font-weight: bold;
      font-size: 11px;
      letter-spacing: 0.3px;
      border-bottom: 1px solid #234563;
      text-shadow: 0 1px 1px rgba(0,0,0,0.4);
    }

    .doc-title {
      padding: 5px 8px 3px;
      font-weight: 800;
      color: #0a1b2d;
      font-size: 11px;
      line-height: 1.3;
      text-transform: uppercase;
      border-bottom: 1px solid #e1e9f0;
      background: #eaf1f8;
    }

    .doc-body {
      padding: 6px 8px 5px;
      color: #2a3d50;
      font-size: 10.5px;
      line-height: 1.4;
      font-weight: 600;
    }

    .doc-footer {
      padding: 3px 8px 5px;
      background: #f1f6fa;
      border-top: 1px solid #e6edf4;
    }

    .doc-footer a {
      color: #1e5287;
      text-decoration: underline;
      font-weight: bold;
      font-size: 10px;
    }

    .doc-footer a:hover {
      color: #b32d00;
    }

    /* Секция на месте ошибки Flash */
    .media-box-container {
      margin-top: 8px;
      border: 1px solid #c9d8e6;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      background: #fff;
    }

    .media-box-toggle {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      background: #e6eef5;
      padding: 4px 8px;
      border-bottom: 1px solid #cbdde9;
    }

    .mode-btn {
      font-size: 10px;
      background: #fff;
      border: 1px solid #9bb7ce;
      padding: 2px 7px;
      border-radius: 2px;
      cursor: pointer;
      color: #274866;
      font-weight: bold;
    }

    .mode-btn.active {
      background: #2b567d;
      color: #fff;
      border-color: #1b3d5b;
    }

    /* Окно Ruffle / Flash Error (точно как на скриншоте) */
    .flash-error-screen {
      background: linear-gradient(135deg, #ff4d36 0%, #ff6a39 60%, #fa7838 100%);
      color: #ffffff;
      padding: 30px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }

    .flash-error-screen h2 {
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 22px;
      letter-spacing: -0.5px;
    }

    .flash-error-screen p {
      font-size: 12px;
      line-height: 1.6;
      max-width: 440px;
      margin-bottom: 8px;
      opacity: 0.95;
    }

    .flash-links {
      margin-top: 35px;
      display: flex;
      gap: 40px;
    }

    .flash-links a {
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      text-decoration: underline;
      transition: opacity 0.2s;
    }

    .flash-links a:hover {
      opacity: 0.8;
    }

    /* Интерактивный ретро-баннер (альтернатива Flash-анимации) */
    .flash-restored-screen {
      display: none;
      background: #000;
      height: 250px;
      position: relative;
      overflow: hidden;
    }

    .slide-item {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: flex-end;
      padding: 16px;
    }

    .slide-item.active {
      opacity: 1;
    }

    .slide-caption {
      background: rgba(18, 41, 65, 0.85);
      border-left: 4px solid #f8af3c;
      color: #fff;
      padding: 8px 14px;
      font-size: 12px;
      border-radius: 0 4px 4px 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    /* Футер сайта */
    .portal-footer {
      background: linear-gradient(180deg, #f9fcff 0%, #edf3f9 100%);
      border-top: 1px solid #baccdb;
      padding: 14px 20px 20px;
      position: relative;
    }

    .footer-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    /* Герб муниципалитета */
    .crest-box {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .town-crest {
      width: 42px;
      height: 52px;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
    }

    .footer-links-row {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .copyright-cursive {
      font-family: 'Marck Script', 'Caveat', cursive;
      font-size: 17px;
      color: #2b3e50;
      font-weight: 700;
    }

    .footer-divider {
      color: #486a8a;
      font-size: 15px;
      font-weight: 300;
    }

    .footer-link {
      font-family: 'Marck Script', 'Caveat', cursive;
      font-size: 17px;
      color: #1e3955;
      text-decoration: none;
      font-weight: 700;
      transition: color 0.15s;
    }

    .footer-link:hover {
      color: #b83a00;
      text-decoration: underline;
    }

    /* Адаптивность для мобильных устройств */
    @media (max-width: 640px) {
      .portal-body {
        grid-template-columns: 1fr;
      }

      .sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid #cfdeeb;
      }

      .icon-button {
        width: 68px;
      }

      .header-title-bar {
        flex-direction: column;
        align-items: flex-start;
      }

      .header-title-bar h1 {
        font-size: 26px;
      }

      .flash-links {
        gap: 16px;
        flex-direction: column;
      }

      .footer-content {
        flex-direction: column;
        text-align: center;
      }
    }