/* ---------- fonts ---------- */
@font-face{
  font-family:'TahomaCustom';
  src:url('fonts/Tahoma Regular font.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html,body {
  height:100%; margin:0;
  font-family: 'TahomaCustom', Tahoma, sans-serif;
  color:#111;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* блокируем скролл страницы */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;         /* <-- главное */
}

/* на iOS иногда нужен фикс, чтобы исключить "резиновый" скролл */
body {
  position: relative;
  width: 100%;
}


body{ font-family:'TahomaCustom', Tahoma, sans-serif; }

/* background behind the monitor (visible!) */
#page-bg{
  position:fixed; inset:0; z-index:0;
  background:url('img/background.png') center/cover no-repeat;
}

/* centered wrapper + monitor */
/* wrapper: больше не flex, а “полотно” на весь экран */
#xp-wrapper{
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;     /* чтобы страница не “гуляла” */
}
/* xp-screen как был */
#xp-screen{
  width: 1280px;
  height: 720px;
  position: relative;
  overflow: hidden;

  background-image: url('img/bliss.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* stage: всегда в центре, scale не ломает центровку */
#xp-stage{
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: visible;    /* стикер может выходить наружу */
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--xp-scale, 1));
  will-change: transform;
}

/* layers */
.screen-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.hidden{ display:none !important; }

/* login */
#login-screen{ background:rgba(0,0,0,0.45); flex-direction: column;    /* подсказка под кнопкой */
  gap: 8px;}
#enter-btn{ width:130px; height:auto; cursor:pointer; user-select:none; }

/* loading — XP green bar */
#loading-screen{ background:rgba(0,0,0,0.55); }
.loader-card{
  width:420px; background:rgba(255,255,255,0.88); border:1px solid #d9d9d9;
  border-radius:10px; padding:24px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.loader-progress{ width:100%; height:18px; border:1px solid #2a7d2e; border-radius:4px; background:#eaf3ea; overflow:hidden; }
.loader-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,#1ca11c,#39bf39,#1ca11c);
  background-size:200% 100%; animation:stripe 2.2s linear infinite;
}
@keyframes stripe{ 0%{background-position:0 0} 100%{background-position:200% 0} }
.loader-sub{ margin-top:10px; font-size:12px; color:#333 }

/* desktop icons */
#desktop{ padding:24px; }
#icons{ position:absolute; left:24px; top:24px; display:flex; flex-direction:column; gap:18px; }
.icon{ width:96px; text-align:center; cursor:pointer; user-select:none; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
.icon img{ width:64px; height:64px; display:block; margin:0 auto 6px; pointer-events:none; }
.ic-label{ font-size:13px; }

:root{
  --win-header-h: 44px;  /* было 36px, делаем повыше */
}
@media (max-width: 820px) and (hover: none) and (pointer: coarse){
  :root{ --win-header-h: 50px; }  /* на телефоне ещё больше hit-area */
}

/* windows */
.window{
  width:560px; height:360px; background:#f7f7f7; border:4px solid #8aa7d8; position:absolute;
  box-shadow:0 10px 30px rgba(0,0,0,0.4); z-index:10; overflow:hidden;
}
.window-header{
  height: var(--win-header-h);
  background:linear-gradient(#2b5fb0,#1e4aa2);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; cursor:move;
}
.window-body{
  padding:12px;
  height: calc(100% - var(--win-header-h));
  overflow:auto; background:#fff; color:#111;
}




/* About: растягиваем только изображение в BODY, не трогая иконку закрытия */
#about-window .window-body{
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#about-window .window-body > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* About window: квадратное и больше по умолчанию */
#about-window.window {
  width: 700px;   /* ширина */
  height: 700px;  /* высота */
}





/* reel 9:16 */
.reel-frame{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.reel-frame iframe{ width:100%; height:100%; }

/* forms / notes */
.small-note{ font-size:12px; color:#666; margin-top:8px; }
.btn{ background:#e9ecef; color:#111; border:1px solid #cfd4da; padding:8px 12px; border-radius:6px; cursor:pointer }
.btn:hover{ filter:brightness(0.96) }
.btn.primary{ background:#1877f2; color:#fff; border:0 }
.btn.primary:hover{ filter:brightness(0.95) }

/* Freepack IG gate */
.ig-gate{ background:#ffffffcc; border:1px solid #e0e0e0; padding:12px; border-radius:8px; margin-bottom:10px; color:#111; }
.ig-gate-title{ font-weight:700; margin:0 0 6px }
.ck-wrap{ position:relative }
.ck-wrap.is-locked{ filter:grayscale(1) opacity(0.6); pointer-events:none }
.ck-wrap.is-locked::after{
  content:"Step 2 will unlock after clicking Follow";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#111; font-weight:700; background:rgba(255,255,255,0.6);
}
.pack-desc pre{
  background:#fff; color:#111; border:1px solid #ddd; border-radius:8px;
  padding:10px; margin-top:10px; white-space:pre-wrap; line-height:1.3;
}

/* gallery */
#gallery{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#gallery img{ width:120px; height:80px; object-fit:cover; cursor:pointer; border:2px solid #ddd; }

/* projects */
.proj-topbar{ display:flex; gap:8px; margin-bottom:10px }
#proj-search{ flex:1; padding:8px; border:1px solid #ccc; }
#proj-filter{ padding:8px; border:1px solid #ccc; }
#admin-panel .admin-row{ display:flex; gap:8px; margin-bottom:8px }
#proj-title{ flex:1; padding:8px; border:1px solid #ccc; }
#proj-body{ width:100%; padding:8px; border:1px solid #ccc; }
#projects-list .project{ border:1px dashed #bbb; padding:8px; margin-bottom:8px; background:#fff; }
#projects-list .project .meta{ font-size:12px; color:#666; margin:4px 0 6px }

.reactions{ display:flex; gap:8px; margin-top:6px; }
.reactions .react{
  border:1px solid #cfd4da;
  background:#fff;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:700;
  user-select:none;
}
.reactions .react .cnt{ margin-left:4px; font-weight:700; }
.reactions .react:active{ transform: translateY(1px); }

.reactions .react[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

.reactions .react.active{
  outline: 2px solid #1e4aa2;
  border-radius: 6px;
}


/* public board list inside Contact */
.public-scroll{
  max-height:220px; overflow:auto; padding-right:6px;
  background:#fafafa; border:1px solid #e8e8e8; border-radius:6px; padding:8px;
}
.pub-msg{ background:#fff; color:#111; border:1px solid #e2e2e2; border-radius:8px; padding:8px; margin:8px 0 }
.pub-msg .meta{ font-size:12px; color:#555; margin-bottom:4px }

/* taskbar */
#taskbar{
  position:absolute; left:0; right:0; bottom:0; height:46px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,#0b60d1,#2975e5);
  border-top:2px solid rgba(0,0,0,0.6); padding:6px 12px;
}
#taskbar-left{ display:flex; align-items:center; gap:8px; position:relative; }
#start-button { width:70px; height:30px; cursor:pointer; } /* шире на ~20% по горизонтали */
#start-menu{
  position:absolute; left:12px; bottom:52px; background:#fff; color:#111; padding:8px; border:1px solid #ccc;
  box-shadow:0 5px 20px rgba(0,0,0,0.3); min-width:200px; z-index:50;
}
.start-item{ display:block; padding:8px 10px; color:#111; text-decoration:none }
.start-item:hover{ background:#f0f0f0 }

/* center socials */
#taskbar-center{ display:flex; gap:12px; align-items:center; justify-content:center; flex:1 }
#taskbar-center .social img{ width:22px; height:22px; display:block; }

/* right time */
#taskbar-right{ display:flex; align-items:center; gap:12px; }
#taskbar-time{ color:#fff; font-weight:700; font-size:13px; }

#ad-sticky{
  position: absolute;
  right: 140px;
  bottom: -40px;              /* отрицательное значение = “висит” ниже рамки */
  transform: rotate(-2.5deg) scaleY(1.55);
  background:#fffda6;
  color:#111;
  border:1px solid #e0d86a;
  border-radius:4px;
  padding:10px 14px;
  font-weight:700;
  font-size:12px;
  line-height:1.15;
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
  z-index: 9999;              /* выше всего внутри stage */
  pointer-events:none;
}

#ad-sticky::before{
  content:"";
  position:absolute;
  top:-12px; left:18%;
  width:64px; height:18px;
  background:rgba(255,255,0,0.35);
  border:1px solid rgba(220,210,90,0.8);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transform:rotate(4deg);
  border-radius:3px;
}



/* Contact window: размер под форму CK */
#contact-window.window { width: 720px; height: 520px; }
#contact-ck-wrap { padding-right: 4px; }



#xp-screen{
  transform: none !important; /* чтобы никакие старые правила не мешали */
}


/* рилз: ограничение высоты, чтобы не ломал раскладку на телефонах */
@media (max-width: 820px) and (hover: none) and (pointer: coarse){
  #reel-window{ width:300px !important; height:520px !important; top:50px !important; right:12px !important; }
}

/* --- Mobile (узкие экраны) — переопределяем инлайновые размеры окон --- */
@media (max-width: 820px) and (hover: none) and (pointer: coarse){
  /* НЕ фиксируем left/top/width/height через !important,
     иначе jQuery UI не сможет двигать/ресайзить окна.
     Размер/позицию на мобилке выставляет JS (openWindow -> mobile-fit). */

  .window{
    max-width: 92vw;
    max-height: 82vh;
  }

  /* чтобы тапы по хедеру/хендлам не превращались в скролл */
  .window-header{ touch-action: none; }
  .ui-resizable-handle{ touch-action: none; }

  /* Reel: как и было — отключаем right, чтобы не конфликтовало */
  #reel-window{
    right: auto !important;
  }
}


/* --- toast notifications --- */
#toast-container{
  position:absolute;       /* внутри #xp-screen */
  top:12px; right:12px;
  display:flex; flex-direction:column; gap:8px;
  z-index:9999;
  pointer-events:none;     /* клики не блокируем */
}
.toast{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.96);
  border:1px solid #dcdcdc; border-radius:10px;
  padding:10px 12px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  animation:toastIn .18s ease-out;
  pointer-events:auto;     /* можно нажать/выделить текст */
}
.toast img{ width:20px; height:20px; display:block; }
@keyframes toastIn { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }


/* hint под Enter */
#enter-hint{
  margin-top: 10px;
  color: #fff;
  font-weight: 700;
  letter-spacing: .4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  opacity: .9;
  animation: hintPulse 1.4s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100% { transform: translateY(0); opacity: .75; }
  50%     { transform: translateY(2px); opacity: 1; }
}


/* Крупный крестик по умолчанию на всех окнах */
.win-close{
  width: 22px;            /* «картинка-иконка» */
  height: 22px;
  flex: 0 0 auto;         /* не ужимать и не растягивать */
  cursor: pointer;

  
  
}

/* На мобильных — ещё крупнее + увеличим кликабельную зону за счёт паддинга */
@media (max-width: 820px) and (hover: none) and (pointer: coarse){
  .win-close{
    width: 34px;          /* сам визуальный крестик */
    height: 34px;
    /* хит-зона больше */
  padding: 12px;  
  box-sizing: content-box; /* чтобы padding не уменьшал крестик */
  }
}

/* Убираем кнопку "Close" внутри окна Reels */
#reel-window .window-body button,
#reel-window .window-body .btn-close,
#reel-window .window-body input[type="button"][value="Close"] {
  display: none !important;
}

/* Beats: плеер на всю область окна */
#beat-window .window-body{
  padding: 0;           /* убираем внутренние отступы только в Beats */
  overflow: hidden;     /* без полос прокрутки вокруг iframe */
}
#beat-window .window-body iframe{
  display: block;       /* убирает возможный "просвет" как у inline-элемента */
  width: 100%;
  height: 100%;
  border: 0;
}




/* хедер всегда поверх body (важно для Android/iframe) */
.window-header{ position: relative; z-index: 2; }
.window-body{ position: relative; z-index: 1; }

/* большая прозрачная hit-area в правом верхнем углу хедера */
.win-close-hit{
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;   /* увеличенная зона тапа */
  height: 56px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: none;   /* не переводить тап в drag */
}

/* на телефонах — ещё больше */
@media (max-width: 820px) and (hover: none) and (pointer: coarse){
  .win-close-hit{ width: 72px; height: 72px; }
}

/* Mobile-only tweaks for photo preview window */
@media (max-width: 820px) and (hover: none) and (pointer: coarse){
  .window.photo-view{
    width: 92vw !important;
    height: 72vh !important;
    left: 4vw !important;
    top: 10vh !important;
  }
  #contact-window{ top: 6vh !important; }
  .window-body,
  .window-body iframe { height: 100% !important; }
  .window.photo-view .window-header{ position: relative; z-index: 3; }
  .window.photo-view .window-body{ position: relative; z-index: 1; padding-top: 12px; }
  .window.photo-view .window-body img{
    width: 100%; height: 100%; object-fit: contain; display: block;
    max-width: 100%; max-height: 100%;
  }
}

/* Размер окна Loops по умолчанию */
#loops-window.window { width: 420px; height: 480px; }

/* первая строка с двумя иконками в ряд */
#icons .icons-row{
  display:flex;
  gap:18px;           /* такой же, как между иконками по вертикали */
  margin-bottom:18px; /* чтобы следующий столбец не прилипал */
}

.project .proj-media{ margin:8px 0; }
.project .proj-media img{
  max-width:100%; height:auto; display:block;
  border:1px solid #e6e6e6; border-radius:8px;
}
.project .proj-media iframe, 
.project .proj-media video{
  width:100%; aspect-ratio:16/9; display:block; border:0;
  border-radius:8px;
}


.photo-item{
  position: relative;
  display: inline-block;
}
.photo-item img{
  width:120px; height:80px; object-fit:cover;
  cursor:pointer; border:2px solid #ddd;
}
.photo-item .photo-del{
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.6);
  color:#fff;
  border:0;
  border-radius:50%;
  width:22px; height:22px;
  cursor:pointer;
}


/* --- SEO footer --- */
#seo-footer{
  max-width: 1280px;
  margin: 18px auto 36px;
  padding: 0 12px;
  font-size: 14px;
  color: #222;
}
#seo-footer #seo-toggle{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #d5d5d5;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
#seo-footer.collapsed #seo-body{ display:none; }
#seo-footer #seo-body{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:18px;
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:12px;
  padding:16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
#seo-footer h1{ font-size:20px; margin:0 0 8px; }
#seo-footer h2{ font-size:16px; margin:0 0 6px; }
#seo-footer p{ margin:0 0 8px; line-height:1.45; }
#seo-footer ul{ margin:0; padding-left:18px; }
#seo-footer details{ margin-bottom:6px; }
@media (max-width: 900px) and (hover: none) and (pointer: coarse){
  #seo-footer #seo-body{ grid-template-columns: 1fr; }
}

/* SEO-блок: не влияет на макет и не виден юзерам, но индексируется ботами */
.seo-only{
  position: absolute;
  left: -9999px;     /* уводим за край */
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* ==== Theme (Day/Night) ==== */
/* по умолчанию у тебя стоит дневной фон в #xp-screen; переопределим классами */
#xp-screen.theme-day{
  background-image: url('img/bliss.jpg') !important;
  filter: none;
}
#xp-screen.theme-night{
  /* если положишь ночную картинку — раскомментируй следующую строку: */
  background-image: url('img/bliss_night.png') !important; 
  /* fallback: слегка затемняем дневную */
  /* filter: brightness(0.78) saturate(0.95) contrast(1.02); */
}

/* немного меняем оттенок хедера окон и таскбара ночью */
#xp-screen.theme-night .window-header{
  background: linear-gradient(#1f3f7c,#17326a);
}
#xp-screen.theme-night #taskbar{
  background: linear-gradient(180deg,#0a4aa6,#1c62c7);
}



/* ==== Idle micro-motion для иконок ==== */
#xp-screen.idle #icons .icon{
  animation: iconFloat 5.5s ease-in-out infinite alternate;
}
#xp-screen.idle #icons .icon:nth-child(2){ animation-delay:.3s; }
#xp-screen.idle #icons .icon:nth-child(3){ animation-delay:.6s; }
#xp-screen.idle #icons .icon:nth-child(4){ animation-delay:.9s; }
#xp-screen.idle #icons .icon:nth-child(5){ animation-delay:1.2s; }
#xp-screen.idle #icons .icon:nth-child(6){ animation-delay:1.5s; }
#xp-screen.idle #icons .icon:nth-child(7){ animation-delay:1.8s; }

@keyframes iconFloat{
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-2.5px); }
}


/* == MailerLite: общий вид и ширина в окнах == */
.window-body .ml-embedded { width: 100%; }

/* убираем серый бокс MailerLite, делаем как у тебя */
.ml-form-embedContainer .ml-form-embedWrapper{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* шрифт и кнопка — как у тебя на сайте */
.ml-embedded *{ font-family: inherit; }
.ml-form-embedContainer button[type="submit"],
.ml-form-embedContainer .ml-form-embedSubmit button{
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
}

/* чтобы форма не была “узкой” и расправлялась */
.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
  max-width: 100% !important;
  width: 100% !important;
}

/* --- MailerLite: состояние после ресета формы --- */
.miqo-ml-reset .ml-form-successContainer,
.miqo-ml-reset .ml-form-successContent,
.miqo-ml-reset .ml-form-successBody,
.miqo-ml-reset .ml-form-successMessage{
  display: none !important;  /* всегда спрятать success, пока не снимем класс */
}

.miqo-ml-reset .ml-form-embedWrapper,
.miqo-ml-reset .ml-form-embedBody,
.miqo-ml-reset .ml-form-contentBody,
.miqo-ml-reset form.ml-block-form{
  display: block !important; /* форма видима */
}



/* ==== Draw / Gallery ==== */

/* тулбар компактный и ровный */
.draw-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:10px;
}
.draw-toolbar .tool{ display:flex; align-items:center; gap:6px; }
.draw-toolbar .tool span{ font-weight:700; }
.draw-toolbar .tool-range{ min-width:220px; }
.draw-toolbar .author{
  flex:1 1 220px; max-width:320px; padding:8px;
  border:1px solid #ccc; border-radius:6px;
}
.draw-toolbar .actions{ display:flex; gap:8px; margin-left:auto; }






/* грид галереи шире */
.draw-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

#draw-gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid #e6e6e6; border-radius:10px; display:block;
}
/* Draw: круг-курсор поверх канваса */
#draw-canvas-wrap{ position: relative; }
#draw-canvas, #draw-canvas-wrap{ cursor: none; }
#brush-ghost{
  position: absolute;
  pointer-events: none;
  border: 2px solid rgba(0,0,0,.55);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  display: none;
}

/* Gallery: крестик удаления для админа */
#draw-gallery .card{ position:relative; background:#fff; border:1px solid #eee; border-radius:10px; padding:6px; }
#draw-gallery .card .card-del{
  position:absolute; top:6px; right:6px;
  background: rgba(0,0,0,.65); color:#fff; border:0;
  border-radius:50%; width:22px; height:22px; line-height:22px; text-align:center;
  font-weight:700; cursor:pointer;
}

#draw-gallery .meta{ font-size:12px; color:#666; margin-top:6px; text-align:center; }

/* кнопка удаления (только когда есть права — её покажет JS) */
#draw-gallery .thumb-wrap{ position:relative; }

#draw-gallery .card-del:hover{ background:rgba(0,0,0,.82); }

/* окна побольше по умолчанию: правила на всякий случай */
#draw-window.window { width: 980px; height: 700px; }
#gallery-window.window { width: 960px; height: 680px; }

/* мобильные — холст адаптивный */
@media (max-width: 820px) and (hover: none) and (pointer: coarse){
  #draw-window.window, #gallery-window.window{
    width: 92vw !important;
    height: 80vh !important;
    left: 4vw !important; top: 8vh !important;
  }
  #draw-canvas{ width:100% !important; height:auto !important; }
}









/* clamp draw/gallery windows inside the monitor */
#draw-window, #gallery-window{
  max-width: calc(100% - 40px);
  max-height: calc(100% - 80px);
}
#draw-window .window-body, #gallery-window .window-body{
  max-height: calc(100% - var(--win-header-h));
}


#store-window .product[data-active="false"] { display:none !important; }



/* фикс размеров иконок, чтобы все были одинаковые */
.icon{ width:96px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.icon img{ width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 6px; }

/* безопасный нижний отступ, чтобы иконки не наезжали на таскбар */
:root{ --taskbar-h: 44px; }
#desktop{ padding-bottom: calc(var(--taskbar-h) + 10px); }


/* Desktop icons: без видимого скролла, просто занимают колонку и не наезжают на таскбар */
#icons{
  position:absolute; left:24px; top:24px;
  display:flex; flex-direction:column; gap:12px;
  padding-bottom: calc(var(--taskbar-h) + 8px);
  overflow: visible;          /* <-- вместо auto */
  max-height: none;           /* <-- снимаем ограничение */
}


.ic-label{ font-size:13px; line-height:1.1; word-break:break-word; }


/* Projects: нормальное отображение длинного текста */
#projects-list .project .text {
  white-space: pre-wrap;      /* сохраняет переносы строк из текста */
  word-wrap: break-word;      /* старый синтаксис, для надёжности */
  overflow-wrap: anywhere;    /* ломает очень длинные "слова"/ссылки */
  max-width: 100%;
  box-sizing: border-box;
}

#projects-list .project {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Projects: чтобы Markdown-код-блоки не вылезали за рамки */
#projects-list .project pre {
  white-space: pre-wrap;      /* переносим строки внутри <pre> */
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-family: inherit;       /* убираем “консольный” шрифт, если не нужен */
  font-size: 14px;            /* можно подогнать под основной */
  margin: 8px 0;
}

#projects-list .project code {
  white-space: inherit;       /* чтобы одиночные `code` тоже не ломали вёрстку */
}

/* ===== Projects inline edit ===== */
.project .proj-view.hidden { display:none !important; }
.project .proj-editbox.hidden { display:none !important; }

.project .proj-editbox{
  margin-top:8px;
  border:1px solid #e6e6e6;
  border-radius:10px;
  padding:10px;
  background:#fafafa;
}
.project .proj-editbox input,
.project .proj-editbox textarea,
.project .proj-editbox select{
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:8px;
  font-family: inherit;
  font-size:14px;
}
.project .proj-editbox .row{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.project .proj-editbox .row > *{ flex:1; }

/* ===========================
   CRT / VHS THEME (default OFF)
   включается классом: #xp-screen.crt-on
   =========================== */

#crt-vhs{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:60;
  opacity:0;                 /* OFF по умолчанию */
  transition: opacity .18s ease;
}



/* ON */
#xp-screen.crt-on #crt-vhs{ opacity:1; }

/* --- "пузатый" экран: не border-radius, а ощущение стекла --- */
#xp-screen.crt-on{
  transform-style: preserve-3d;
  /* слегка "линза": не увеличиваем экран, а даём глубину */
  transform: perspective(1400px) rotateX(0.9deg) rotateY(-0.7deg);
  transform-origin:center center;

  /* VHS не зеленим: тёплый/холодный баланс + контраст */
  filter: saturate(1.08)
    contrast(1.06)
    brightness(1.02);

}

/* псевдо-bleed через drop-shadow: циан + зелёный */
#xp-screen.crt-on #xp-desktop{
  filter:
    drop-shadow(0.6px 0 rgba(120,220,255,0.22))
    drop-shadow(-0.6px 0 rgba(120,255,180,0.16));
}

#vhs-glass{
  position:absolute;
  inset:0;
  pointer-events:none;

  /* 1) виньетка + 2) лёгкий bloom + 3) фосфорная сетка */
  background:
    /* vignette */
    radial-gradient(ellipse at center,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.55) 100%
    ),

    /* subtle glow haze */
    radial-gradient(ellipse at 50% 45%,
      rgba(120,180,255,0.10) 0%,
      rgba(0,0,0,0.00) 60%
    ),

    /* phosphor dots/grid */
    radial-gradient(circle,
      rgba(255,255,255,0.16) 0.55px,
      rgba(0,0,0,0.00) 0.75px
    );

  background-size:
    100% 100%,
    100% 100%,
    3px 3px;                 /* размер “точек” как на CRT */
  background-position:
    0 0,
    0 0,
    0 0;

  mix-blend-mode: overlay;
  opacity: 0.55;             /* 0.45–0.7 */
  filter: contrast(1.05) brightness(1.02);
  transform: translateZ(0);
}



/* виньетка по эллипсу (края уходят назад → круглее) */
#vhs-vignette{
  position:absolute; inset:0;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.00) 55%,
    rgba(0,0,0,0.25) 78%,
    rgba(0,0,0,0.55) 92%
  );
  mix-blend-mode: multiply;
  z-index:3;
}

#vhs-scanlines{
  position:absolute;
  inset:0;
  /* тонкие линии + лёгкая "пульсация" между ними */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.00) 0px,
    rgba(0,0,0,0.00) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.00) 4px
  );
  opacity: 0.55;           /* 0.45–0.7 */
  transform: translateZ(0);
  will-change: transform;
}











@keyframes vhsFlicker{
  0%,100% { opacity:1; }
  10% { opacity:.84; }
  11% { opacity:1; }
  32% { opacity:.9; }
  33% { opacity:1; }
  72% { opacity:.86; }
  73% { opacity:1; }
}
@keyframes vhsChroma{
  0% { transform: translateX(-1.2px); }
  100% { transform: translateX(1.2px); }
}

@keyframes scanRoll{
  0%   { transform: translateY(0); }
  100% { transform: translateY(4px); }
}












/* ===========================
   CRT/VHS на ОКНА (сильнее + "пузатость" как у экрана)
   =========================== */

/* база: чуть сильнее тон/контраст, и перспектива */
#xp-screen.crt-on .window{
  

  /* “скругление” краёв без border-radius: мягкая внутренняя тень */
  box-shadow:
    0 10px 30px rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 -18px 40px rgba(0,0,0,0.18),
    inset 0 18px 36px rgba(255,255,255,0.06);
}

/* важно: чтобы псевдо-слои были поверх контента окна */
/* #xp-screen.crt-on .window{ position:absolute; } */



/* CRT overlay INSIDE window (works with iframe) */
.crt-window-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:5;
  display:none 
}

#xp-screen.crt-on .crt-window-layer{
  opacity:1;
}

/* glass + vignette */
.crt-window-layer::before{
  content:"";
  position:absolute;
  inset:-3%;
  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(255,255,255,0.20) 0%,
      rgba(255,255,255,0.10) 28%,
      rgba(0,0,0,0) 62%
    ),
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,0.32) 76%,
      rgba(0,0,0,0.62) 92%
    );
  mix-blend-mode: screen;
}

/* scanlines + noise + chroma */
.crt-window-layer::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 1px,
      rgba(0,0,0,0.18) 2px
    ),
    repeating-radial-gradient(
      circle at 30% 35%,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0) 3px
    ),
    linear-gradient(
      90deg,
      rgba(255,0,80,0.12),
    rgba(0,0,0,0.00),
    rgba(80,120,255,0.14)
    );
  mix-blend-mode: overlay;
  animation:
    vhsNoise .35s steps(2,end) infinite,
    vhsFlicker 1.6s infinite,
    
}



/* чтобы ::after работал, окно должно быть position:relative */
.window{ position:absolute; } /* у тебя уже так, но на всякий */


.window-body{
  position:relative;
  z-index:1;
}

.crt-window-layer{
  z-index:2;
}

/* === HARD OVERRIDE: CRT layer must be above any jQuery UI z-index === */
#xp-screen{ isolation:isolate; }

#crt-vhs{
  z-index: 2147483647 !important; /* максимальный int, выше уже некуда */
}

/* если ты добавлял локальные crt-window-layer — оставляем выключенными */
.crt-window-layer{ display:none !important; }

#xp-wrapper{
  overflow: visible; /* на всякий, чтобы ничего не резалось */
}



/* xp-screen остаётся “клиппером” для CRT/скругления */
#xp-screen{
  overflow: hidden;
}