@charset "utf-8";
  :root{
      --main:#333333;      /* фирменный текст/кнопки */
      --main-900:#111111;  /* активные */
      --muted:#666666;
      --border:#E6E6E6;    /* рамки */
      --bg:#ffffff;        /* фон страницы */
      --bg-light:#f3f3f3;  /* светлые блоки */
      --pro:#0b57d0;
      --radius: 18px;
      --shadow: 0 6px 18px rgba(0,0,0,.06);
    }
    html,body{height:100%}
    body{
      font-family: Arial, Helvetica, sans-serif;
      color:var(--main);
      background:var(--bg);
    }

    /* оболочка — чтобы футер был прижат */
    .page{min-height:100vh; display:flex; flex-direction:column}
    main{flex:1 0 auto}
    footer{flex:0 0 auto}

    /* header */
    .site-header{
      border:1px solid var(--border);
      border-radius:24px;
      background:#fff;
      box-shadow:var(--shadow);
      padding:18px 22px;
    }
    .logo{
      font-weight:700; font-size:24px; cursor:pointer;
      transition: transform .14s;
    }
    .logo:hover{ transform: scale(1.02) }

    /* карточки */
    .card.feature{
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      transition: transform .18s, box-shadow .18s;
    }
    .card.feature:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(0,0,0,.08);
    }
    .feature .ico{
      width:56px; height:56px; border-radius:12px;
      display:grid; place-items:center;
      background:var(--bg-light); border:1px solid var(--border);
      margin:0 auto 12px;
    }
    .muted{color:var(--muted)}
    .badge-pro{
      background:#eaf2ff; color:var(--pro); font-weight:700; font-size:.72rem;
      padding:.15rem .5rem; border-radius:999px;
      position:absolute; top:.75rem; right:.75rem;
    }
    .btn-dark{
      background:var(--main); border-color:var(--main); font-weight:700;
    }
    .btn-dark:hover{ background:var(--main); filter:brightness(0.95) }
    .btn-outline-light{
      border-color:var(--border); color:#000; background:#fff; font-weight:700;
    }
    .btn-outline-light:hover{ background:#f8f9fa; }

    /* модалки (единый стиль) */
    .modal-content{
      border-radius:18px; border:1px solid var(--border);
      box-shadow: 0 14px 40px rgba(0,0,0,.18);
    }
    .modal-header{ border-bottom:1px solid var(--border) }
    .modal-footer{ border-top:1px solid var(--border) }

    /* медиа-бокс внутри превью */
    .media-box{
      border:1px solid var(--border); border-radius:12px; overflow:hidden;
      background:var(--bg-light);
    }
    .media-box img, .media-box video, .media-box audio{ width:100%; display:block }

    /* футер */
    footer{
      border-top:1px solid var(--border);
      color:#888; font-size:13px;
    }




/* CSS Document (? Если не используется можно удалить:) 
*{box-sizing:border-box;font-family:Arial, sans-serif}
body{background:#f6f7fb;color:#111;padding:20px}
.container{max-width:780px;margin:0 auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
h1{font-size:20px;margin-bottom:12px}
label{display:block;margin-top:12px;font-weight:600}
input[type=file], textarea, button{width:100%;padding:8px;margin-top:6px}
button{cursor:pointer;border:0;padding:10px 14px;border-radius:6px;background:#2d79f5;color:#fff;font-weight:700}
#progressBar{width:100%;height:12px;background:#eee;border-radius:6px;overflow:hidden}
#progressFill{width:0;height:100%;background:#2d79f5}
#progressPct{margin-top:6px;font-size:14px}
pre{background:#f1f1f1;padding:10px;border-radius:6px;overflow:auto}*/