*{box-sizing:border-box}
a,a:hover,a:focus,a:active{text-decoration:none !important}
body{margin:0;background:#eaf1fc;color:#082b68;font:15px Arial,Helvetica,sans-serif}
.qf-site{width:calc(100% - 100px);max-width:1200px;margin:8px auto}

/* Header: logo row + login strip */
.qf-header{display:block;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.qf-logo-row{height:76px;display:flex;align-items:center;padding:0 8px;background:linear-gradient(110deg,#eaf1fc,#eaf1fc);border:0px solid #c5ddff;border-bottom:0}
.qf-logo{display:flex;align-items:center;width:max-content;height:100%;text-decoration:none;border:0;background:transparent}
.qf-logo img{display:block;width:205px;height:auto;max-height:62px;object-fit:contain}
.qf-auth{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"links fields";align-items:center;gap:12px;width:100%;min-height:48px;padding:4px 8px 4px 16px;background:#edf5fd;border:1px solid #c5ddff;border-radius:0 0 7px 7px}
.qf-auth-links{grid-area:links;justify-self:start;white-space:nowrap;font-size:15px}
.qf-auth-links a{color:#007aff;text-decoration:none}
.qf-auth-fields{grid-area:fields;display:flex;align-items:center;gap:14px;margin:0}
.qf-auth-fields label{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px}
.qf-auth-fields input{width:130px;height:34px;border:1px solid #70adff;border-radius:5px;background:#fff;padding:5px 9px;font-size:15px}
.qf-auth-fields button,.qf-auth-logged button{height:34px;min-width:124px;padding:7px 24px;border:0;border-radius:5px;background:#078df5;color:#fff;font-weight:bold;font-size:15px;cursor:pointer}
.qf-auth-logged{display:none;grid-area:fields;align-items:center;gap:14px}
.qf-auth-logged .authorized{font-size:14px}
.qf-auth.qf-is-logged .qf-auth-fields,.qf-auth.qf-is-logged .qf-auth-links .show_notauthorized{display:none}
.qf-auth.qf-is-logged .qf-auth-logged{display:flex}

/* Main columns */
.qf-main-grid{display:grid;grid-template-columns:200px minmax(0,1.35fr) minmax(0,1fr) 190px;gap:9px;margin-top:9px;align-items:start}
.qf-panel{min-width:0;border:1px solid #c8dfff;border-radius:10px;background:rgba(255,255,255,.84);overflow:hidden;box-shadow:0 1px 3px rgba(25,83,155,.06)}
.qf-panel h2{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;background:#e2f2ff;color:#007bfa;font-size:18px;line-height:1.2}
.qf-panel h2 img{width:24px;height:24px;object-fit:contain}
.qf-panel h2.purple{background:#f2eaff;color:#6c35e9}
.qf-panel h2.gold{background:#fff4cf;color:#a76b00}
.qf-panel h2.pink{background:#ffebf7;color:#ed0b99}
.qf-panel h2.green{background:#e6fff4;color:#00a76b}
.qf-menu{padding:8px 10px}
.qf-menu a{display:flex;align-items:center;gap:12px;min-height:39px;padding:5px 9px;color:#07377e;text-decoration:none;border-radius:6px;font-size:16px}
.qf-menu a:hover{background:#d7edff}
.qf-menu a img{width:25px;height:25px;object-fit:contain}
.qf-menu hr{border:0;border-top:1px solid #c8dfff;margin:9px 5px}
.qf-gifts{align-self:start}
.qf-dev{display:flex;align-items:center;justify-content:center;min-height:110px;padding:20px;color:#7186a7;font-size:17px}
.qf-right-widgets{display:flex;flex-direction:column;gap:9px;min-width:0}
.qf-list{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
.qf-list a{color:#0752a5}
.qf-top .qf-dev{min-height:78px}
.qf-online-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px}
.qf-online-list a{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 8px;background:#f1f7ff;border-radius:5px;color:#0752a5}
.qf-online h2 img{object-fit:contain}

/* Right information panel: width comes from the grid column above */
.qf-info{width:100%;min-width:0;max-width:none;align-self:start;padding:16px 12px;background:#fff7f2;border-color:#f1ddd2;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.qf-info p{margin:0 0 18px}
.qf-info a{color:#0879dc}
.red{color:#e12639}

/* Gallery */
.qf-gallery{margin-top:9px}
.qf-gallery-track{display:flex;align-items:center;gap:10px;padding:8px 12px}
.qf-gallery-track>button{flex:0 0 30px;border:0;background:transparent;color:#0787ff;font-size:36px;line-height:1;cursor:pointer}
.qf-gallery-strip{display:flex;align-items:center;gap:10px;overflow-x:auto;scroll-behavior:smooth;flex:1;scrollbar-width:thin}
.qf-gallery-strip a{display:block;flex:0 0 220px;height:140px;overflow:hidden;border-radius:6px}
.qf-gallery-strip img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:6px;image-rendering:auto}
.qf-no-photos{padding:15px;color:#7186a7}

/* Footer aligned to the same centered site width */
.qf-footer{display:flex;justify-content:space-between;gap:15px;padding:10px 5px 18px;font-size:13px}
.qf-footer a{color:#0879dc}

@media(max-width:1250px){
 .qf-site{width:calc(100% - 48px)}
 .qf-main-grid{grid-template-columns:190px minmax(0,1.2fr) minmax(0,1fr) 180px}
}
@media(max-width:900px){
  .qf-site{width:calc(100% - 24px);max-width:100%;margin:8px auto}
  .qf-logo-row{height:64px;min-width:0;overflow:hidden}
  .qf-logo{max-width:100%;min-width:0}
  .qf-logo img{display:block;width:auto;max-width:100%;height:auto;max-height:48px;object-fit:contain}
  .qf-auth{min-width:0}
  .qf-main-grid{min-width:0}
  .qf-gallery-track{min-width:0;gap:5px;padding:8px 6px}
  .qf-gallery-track>button{flex:0 0 24px;font-size:30px}
  .qf-gallery-strip{min-width:0;gap:8px}
  .qf-gallery-strip a{flex:0 0 180px;height:130px}
  .qf-gallery-strip img{width:180px;height:130px;max-width:100%;object-fit:cover}
 .qf-site{width:calc(100% - 32px)}
 .qf-logo-row{height:70px}
 .qf-logo img{width:170px;max-height:54px}
 .qf-auth{grid-template-columns:1fr;grid-template-areas:"links" "fields";padding:8px 10px;gap:8px}
 .qf-auth-links{white-space:normal}
 .qf-auth-fields{justify-content:flex-start;flex-wrap:wrap}
 .qf-auth-logged{flex-wrap:wrap}
 .qf-main-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .qf-info{grid-column:auto;width:100%;max-width:190px;justify-self:start}
}
@media(max-width:650px){
  .qf-site{width:calc(100% - 16px);max-width:100%;margin:6px auto}
  .qf-logo-row{height:58px;padding:0 6px}
  .qf-logo img{max-height:44px;max-width:100%;width:auto}
  .qf-auth{grid-template-columns:minmax(0,1fr);grid-template-areas:"links" "fields";width:100%;min-width:0}
  .qf-auth-links{white-space:normal;overflow-wrap:anywhere}
  .qf-auth-fields{min-width:0;gap:8px}
  .qf-auth-fields label{min-width:0;flex:1 1 100%;white-space:normal}
  .qf-auth-fields input{width:100%;min-width:0;flex:1 1 120px}
  .qf-auth-fields button,.qf-auth-logged button{max-width:100%}
  .qf-auth-logged{min-width:0;flex-wrap:wrap}
  .qf-auth-logged .authorized{margin-left:0 !important;flex-wrap:wrap}
  .qf-main-grid{grid-template-columns:minmax(0,1fr);gap:8px}
  .qf-panel{min-width:0}
  .qf-info{grid-column:auto;width:100%;max-width:none;justify-self:stretch}
  .qf-gallery-strip a{flex:0 0 160px;height:120px}
  .qf-gallery-strip img{width:160px;height:120px}
  .qf-footer{overflow-wrap:anywhere}
 .qf-main-grid{grid-template-columns:minmax(0,1fr)}
 .qf-info{grid-column:auto;width:100%;max-width:190px;justify-self:start}
 .qf-footer{flex-direction:column}
}

/* Logged-in controls: nickname as a button, logout as a red button */
.qf-auth-logged a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.qf-auth-logged a:first-of-type {
    background: #078df5;
    border-color: #078df5;
    color: #fff;
}
.qf-auth-logged a:last-of-type {
    background: #e53945;
    border-color: #d92f3b;
    color: #fff;
}
.qf-auth-logged a:hover { filter: brightness(.95); }

/* Spacing between chat button, nickname and logout */
.qf-auth-logged {
    align-items: center;
    gap: 14px !important;
}
.qf-auth-logged .authorized {
    display: inline-flex !important;
    align-items: center;
    gap: 14px !important;
    margin-left: 24px !important;
}
.qf-auth-logged .authorized a {
    margin: 0 !important;
}

/* =====================================================
   LAST GIFTS WIDGET — единственный источник стилей
   Разметка и JavaScript находятся.
   ===================================================== */
#giftfeed, #giftfeed * { box-sizing: border-box; }
#giftfeed {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #102b5c;
  font: 14px Arial, Helvetica, sans-serif;
}
#giftfeed .gift-card {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #c8dfff;
  border-radius: 0;
  box-shadow: none;
}
#giftfeed .gift-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 18px 12px 15px;
}
#giftfeed .gift-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
#giftfeed .gift-user > a:first-child {
  display: block;
  width: 150px;
  max-width: 100%;
  margin: 0 auto;
  text-decoration: none;
}
#giftfeed .gift-avatar {
  display: block;
  width: 150px;
  height: 150px;
  max-width: 100%;
  margin: 0 auto;
  object-fit: cover;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  box-shadow: none !important;
  background: #f0f4fa;
}
#giftfeed .gift-nick {
  display: inline-block;
  max-width: 100%;
  margin-top: 7px;
  color: #858B95;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}
#giftfeed .gift-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  padding-top: 12px;
  text-align: center;
}
#giftfeed .gift-image {
  display: block;
  width: 100px;
  height: 100px;
  max-width: 100%;
  object-fit: contain;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}
#giftfeed .gift-arrow {
  display: block;
  width: 48px;
  height: 28px;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  pointer-events: none;
}
#giftfeed .gift-info {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 2px max-content;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  min-width: 0;
  min-height: 0;
  margin: 0 12px 12px;
  padding: 4px 10px;
  color: #102b5c;
  text-align: left;
  overflow-wrap: anywhere;
  background: #cce8ff;
  border: 1px solid #a8d7ff;
  border-top: 3px solid #60baff;
  border-radius: 7px;
}
#giftfeed .gift-info::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 16px;
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-bottom: 16px solid #60baff;
}
#giftfeed .gift-info::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 19px;
  width: 0;
  height: 0;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #cce8ff;
}
#giftfeed .gift-comment {
  display: contents;
  min-width: 0;
  font-style: normal;
}
#giftfeed .gift-comment-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  color: #2188ed;
}
#giftfeed .gift-comment-text {
  display: block;
  min-width: 0;
  color: #102b5c;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
#giftfeed .gift-separator {
  display: block;
  align-self: stretch;
  width: 2px;
  min-height: 30px;
  background: #9bcfff;
}
#giftfeed .gift-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  margin: 0;
  color: #102b5c;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
#giftfeed .gift-time strong { font-size: 14px; font-weight: 700; }
#giftfeed .gift-empty { padding: 18px 12px; color: #7186a7; text-align: center; }

@media (max-width: 700px) {
  #giftfeed .gift-row {
    grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
    gap: 5px;
    padding: 14px 8px;
  }
  #giftfeed .gift-avatar { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 150px; }
  #giftfeed .gift-image { width: 72px; height: 72px; }
  #giftfeed .gift-arrow { width: 402px; height: 254px; }
  #giftfeed .gift-nick { font-size: 14px; }
  #giftfeed .gift-info { grid-template-columns: 22px minmax(0, 1fr) 2px max-content; gap: 8px; width: calc(100% - 20px); margin: 0 10px 10px; padding: 4px 8px; }
  #giftfeed .gift-comment-icon { width: 20px; height: 20px; }
  #giftfeed .gift-comment-text { font-size: 13px; line-height: 1.2; }
  #giftfeed .gift-time { font-size: 11px; }
  #giftfeed .gift-time strong { font-size: 14px; }
}
@media(max-width:420px){
  .qf-site{width:calc(100% - 12px);max-width:100%;margin:5px auto}
  .qf-logo-row{height:54px;padding:0 5px}
  .qf-logo img{width:auto;max-width:100%;max-height:40px;height:auto}
  .qf-auth-fields label{flex-basis:100%}
  .qf-auth-fields input{width:100%;min-width:0}
  .qf-gallery-track{gap:3px;padding:6px 4px}
  .qf-gallery-track>button{flex-basis:20px;font-size:26px}
  .qf-gallery-strip a{flex:0 0 145px;height:110px}
  .qf-gallery-strip img{width:145px;height:110px}
}

@media (max-width: 420px) {
  #giftfeed .gift-row { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 3px; padding: 12px 5px; }
  #giftfeed .gift-image { width: 56px; height: 56px; }
  #giftfeed .gift-arrow { width: 36px; height: 21px; }
  #giftfeed .gift-nick { font-size: 12px; }
  #giftfeed .gift-info { grid-template-columns: 18px minmax(0, 1fr) 1px max-content; gap: 5px; width: calc(100% - 14px); margin: 0 7px 8px; padding: 4px 6px; }
  #giftfeed .gift-comment-icon { width: 18px; height: 18px; }
  #giftfeed .gift-comment-text { font-size: 12px; line-height: 1.2; }
  #giftfeed .gift-separator { display: block; width: 1px; min-height: 28px; }
  #giftfeed .gift-time { grid-column: auto; flex-direction: column; flex-wrap: nowrap; gap: 3px; padding-top: 0; border-top: 0; font-size: 10px; white-space: nowrap; }
  #giftfeed .gift-time strong { font-size: 12px; }
}

/* QFELL template layout: shared navigation, page content, and homepage-only widgets. */
.qf-main-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 9px;
  margin-top: 9px;
  align-items: start;
}
.qf-page-content {
  display: block;
  min-width: 0;
  grid-column: 2;
}
.qf-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 190px;
  gap: 9px;
  align-items: start;
}
.qf-home-layout > .qf-gifts { grid-column: 1; }
.qf-home-layout > .qf-right-widgets { grid-column: 2; }
.qf-home-layout > .qf-info { grid-column: 3; }
.qf-gallery { margin-top: 9px; }

/* Homepage widgets are included only by index.html, so they do not need
   body-class hiding rules. This also supports MPChat's actual homepage class. */
body:not([class="-body"]) .qf-main-grid {
  grid-template-columns: 200px minmax(0, 1fr);
}
body:not([class="-body"]) .qf-page-content {
  grid-column: 2 / -1;
}

@media (max-width: 1250px) {
  .qf-home-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 180px; }
  body:not([class="-body"]) .qf-main-grid { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .qf-home-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qf-home-layout > .qf-gifts { grid-column: 1; }
  .qf-home-layout > .qf-right-widgets { grid-column: 2; }
  .qf-home-layout > .qf-info { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 650px) {
  .qf-main-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qf-page-content { grid-column: 1; }
  body:not([class="-body"]) .qf-main-grid { grid-template-columns: minmax(0, 1fr); }
  body:not([class="-body"]) .qf-page-content { grid-column: 1; }
  .qf-home-layout { grid-template-columns: minmax(0, 1fr); }
  .qf-home-layout > .qf-gifts,
  .qf-home-layout > .qf-right-widgets,
  .qf-home-layout > .qf-info { grid-column: 1; }
}


/* Mobile layout safety overrides.
   Keep desktop rules unchanged; normalize the narrow-screen layout after
   the older duplicate media-query rules above. */
img { max-width: 100%; }

@media (max-width: 650px) {
  html, body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .qf-site {
    display: block;
    width: calc(100% - 12px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 5px auto !important;
  }

  .qf-header, .qf-main-grid, .qf-page-content, .qf-home-layout,
  .qf-panel, .qf-right-widgets, .qf-gallery, .qf-footer {
    min-width: 0;
    max-width: 100%;
  }

  .qf-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .qf-page-content {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .qf-home-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }

  .qf-home-layout > .qf-gifts,
  .qf-home-layout > .qf-right-widgets,
  .qf-home-layout > .qf-info {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100% !important;
    justify-self: stretch;
  }

  .qf-menu a img {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    flex: 0 0 25px;
    object-fit: contain;
  }

  .qf-panel h2 img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    flex: 0 0 24px;
    object-fit: contain;
  }

  .qf-logo-row { width: 100%; max-width: 100%; }
  .qf-logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 44px;
  }

  .qf-gallery-track, .qf-gallery-strip {
    min-width: 0;
    max-width: 100%;
  }
  .qf-gallery-strip { overflow-x: auto; }
  .qf-gallery-strip a {
    flex: 0 0 145px;
    width: 145px;
    height: 110px;
  }
  .qf-gallery-strip img {
    width: 145px;
    height: 110px;
    max-width: 100%;
    object-fit: cover;
  }

  .qf-footer {
    flex-direction: column;
    overflow-wrap: anywhere;
  }
}

.qf-pairday-panel > h2 { background:#ffe4ed !important; color:#d6336c !important; }
.qf-pairday-panel > h2 img { width:28px !important; height:28px !important; max-width:28px !important; object-fit:contain; vertical-align:middle; margin-right:7px; }
.qf-pairday-panel > .qf-dev { background:#fff0f5 !important; padding:0 !important; }

.qf-gifts-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qf-gifts-heading a {
  margin-left: auto;
  color: #0878f9;
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
  white-space: nowrap;
}

.qf-gifts-heading a:hover {
  text-decoration: underline;
}