/* ============================================================
   PHOTO CLOUD / SAYONARA — единая дизайн-система
   Самохостинг шрифтов, токены, стандартизованные компоненты
   ============================================================ */

/* ---- Fonts (self-hosted woff2) ---- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/orbitron-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/orbitron-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/orbitron-latin-900-normal.woff2') format('woff2')}

/* ---- Design tokens ---- */
:root{
  --bg:#0b0e11;
  --text:#e8eaed;
  --muted:#9aa0a6;
  --text-red:#ffb3b3;
  --red:#ff5a5a;
  --red-bright:#ff7d7d;
  --red-line:rgba(255,80,80,.28);
  --red-line-soft:rgba(255,80,80,.16);
  --surface:rgba(255,80,80,.05);
  /* single source of truth for the "glass" sheen — red-tinted, no gray */
  --glass-radial:radial-gradient(circle at 25% 25%, rgba(255,90,90,.20) 0%, rgba(255,60,60,.10) 20%, transparent 46%);
  --glass-linear:linear-gradient(145deg, rgba(255,110,110,.10) 0%, transparent 35%, transparent 65%, rgba(0,0,0,.10) 100%);
  --glass-border:1px solid rgba(255,90,90,.14);
  /* radii */
  --r1:10px; --r2:16px; --r3:24px; --r4:32px;
  /* standardized control sizes */
  --ctrl:42px;      /* primary buttons / inputs */
  --ctrl-sm:36px;   /* compact icon buttons */
  --gap:12px;
  --focus:0 0 0 3px rgba(255,80,80,.28);
  --font-ui:'Manrope',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --font-display:'Orbitron','Manrope',monospace;
}

/* ---- Base ---- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);font-weight:500}
a{color:var(--red-bright)}
::selection{background:var(--red);color:#190b0c}
input,button,select,textarea{font-family:inherit}

/* Accessible focus ring for keyboard users on all interactive controls */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--focus);border-radius:8px
}

/* ---- Language switcher (shared) ---- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:rgba(255,80,80,.08);border:1px solid var(--red-line-soft);flex-shrink:0}
.lang-switch button{appearance:none;border:none;background:transparent;color:var(--text-red);font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.06em;padding:6px 10px;min-height:30px;border-radius:8px;cursor:pointer;transition:all .2s ease;line-height:1}
.lang-switch button:hover{color:#fff;background:rgba(255,80,80,.18)}
.lang-switch button.active{background:var(--red);color:#190b0c;box-shadow:0 0 12px rgba(255,80,80,.55)}
@media (max-width:720px){ .lang-switch button{padding:6px 8px;min-height:32px} }

/* Persistent app chrome — same floating langs as the homepage, no glass bar */
.app-chrome{position:fixed;top:16px;left:16px;right:16px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.app-chrome-left{display:flex;align-items:center;gap:18px;min-width:0}
.app-chrome-right{margin-left:auto;pointer-events:auto}
.app-chrome .lang-switch,.app-chrome .chrome-text{pointer-events:auto}
.chrome-text{color:#ff8d8d;opacity:.34;font-family:var(--font-ui);font-weight:700;font-size:14px;letter-spacing:.14em;text-decoration:none;line-height:1;transition:opacity .35s ease,text-shadow .35s ease,color .35s ease}
.chrome-text:hover,.chrome-text:focus-visible{opacity:.88;color:#ffd0d0;text-shadow:0 0 10px rgba(255,80,80,.75)}
body.is-home .app-chrome-left{visibility:hidden}
@media (max-width:520px){.app-chrome{top:10px;left:10px;right:10px}.chrome-text{font-size:13px;letter-spacing:.1em}}

/* Header right cluster (legacy page bars, group title rows) */
.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:520px){ .header{flex-wrap:wrap;gap:10px} .header-right{gap:8px} }

/* Standardized controls — one size language across pages */
.Btn{
  height:var(--ctrl);min-height:var(--ctrl);border-radius:var(--r1);
  font-family:var(--font-ui)!important;font-weight:600!important;letter-spacing:.02em;
  padding:0 16px;width:auto!important;min-width:108px;box-sizing:border-box;
}
.Btn .text,.Btn p{
  font-family:var(--font-ui)!important;font-weight:600!important;font-size:13px!important;
  letter-spacing:.02em!important;margin:0!important;line-height:1!important;
  text-transform:none!important;color:rgb(255,176,176);
}
.header-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--ctrl-sm);padding:0 14px;border-radius:var(--r1);box-sizing:border-box;
  font-family:var(--font-ui)!important;font-weight:600!important;font-size:13px!important;
  letter-spacing:.02em!important;text-transform:none!important;text-shadow:none!important;
  color:rgb(255,176,176)!important;line-height:1;
}
.header-link:hover{color:#ffd6d6!important}
.card-icon-btn,.unified-btn{height:var(--ctrl-sm);min-height:var(--ctrl-sm);min-width:var(--ctrl-sm);border-radius:var(--r1)}
.select-glass,.pf-input,.gate input[type=text],.lock-form input{height:var(--ctrl);min-height:var(--ctrl);border-radius:var(--r1);font-family:var(--font-ui)}
.action-btn,.lock-btn{
  height:var(--ctrl);min-height:var(--ctrl);border-radius:var(--r1);
  font-family:var(--font-ui)!important;font-weight:600!important;font-size:13px!important;
  letter-spacing:.02em;text-transform:none;color:rgb(255,176,176);
}
.privacy-panel{border-radius:var(--r2)}
img,video{-webkit-user-drag:none;user-select:none}
.card,.thumb-wrap,.thumb{ -webkit-user-drag:none }
#createGroupBtn{min-height:var(--ctrl);height:auto;padding:10px 18px}

/* Select-mode: cards are for picking, not for copy/view */
body.select-mode .card .link-row{display:none!important}
body.select-mode .card .view-btn,
body.select-mode .card .copy-btn{pointer-events:none!important;display:none!important}
body.select-mode .card{cursor:pointer;user-select:none}
body.select-mode .card a{pointer-events:none}
body.select-mode .thumb-wrap input[type="checkbox"]{display:block!important}
.thumb-wrap input[type="checkbox"]{
  display:none;appearance:none;-webkit-appearance:none;
  width:20px;height:20px;margin:0;padding:0;
  position:absolute;top:8px;right:8px;z-index:8;
  border:2px solid rgba(255,150,150,.9);border-radius:6px;
  background:rgba(16,9,10,.78);cursor:pointer;box-shadow:0 0 8px rgba(255,60,60,.25);
}
.thumb-wrap input[type="checkbox"]:checked{
  background:#ff5a5a;border-color:#ff8d8d;
  box-shadow:0 0 10px rgba(255,80,80,.55);
}
.thumb-wrap input[type="checkbox"]:checked::after{
  content:'';display:block;width:5px;height:9px;margin:1px 0 0 6px;
  border:solid #190b0c;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.name-modal{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.14);align-items:flex-start;justify-content:flex-start;padding:0}
.name-modal.show{display:block}
.name-modal-card{width:min(360px,calc(100vw - 24px));background:#10090a;border:1px solid rgba(255,80,80,.45);border-radius:16px;padding:18px 18px 16px;box-shadow:0 12px 36px rgba(0,0,0,.45),0 0 28px rgba(255,50,50,.28);transform:scale(.92) translate3d(0,8px,0);opacity:0;transition:transform .16s cubic-bezier(.18,1.35,.28,1),opacity .12s ease}
.name-modal.show .name-modal-card{transform:none;opacity:1}
.name-modal-card p{margin:0 0 12px;font-family:var(--font-ui);font-weight:600;font-size:15px;color:#ffb3b3}
.name-modal-card input{width:100%;box-sizing:border-box;margin-bottom:14px;background:#0e1216;border:1px solid rgba(255,110,110,.28);border-radius:10px;color:#e8eaed;padding:10px 12px;min-height:42px;font-family:var(--font-ui);font-size:14px}
.name-modal-card input:focus{outline:none;border-color:rgba(255,120,120,.7);box-shadow:var(--focus)}
.name-modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.name-modal-actions .Btn{width:auto!important;min-width:108px;flex:1 1 auto}
.card.drag-pack{opacity:.38;transform:scale(.98);filter:saturate(.7)}
.drag-count-ghost{position:fixed;left:-999px;top:0}
.drag-preview{
  position:fixed;left:-999px;top:0;width:112px;height:84px;border-radius:12px;
  overflow:visible;pointer-events:none;z-index:4000;
  box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 0 1px rgba(255,90,90,.45);
}
.drag-preview img{width:112px;height:84px;object-fit:cover;border-radius:12px;display:block;background:#1a0d0e}
.drag-preview.is-stack::before,.drag-preview.is-stack::after{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:#2a1214;border:1px solid rgba(255,90,90,.35);z-index:-1;
}
.drag-preview.is-stack::before{transform:rotate(-7deg) translate(-4px,3px)}
.drag-preview.is-stack::after{transform:rotate(6deg) translate(5px,-2px)}
.drag-preview-badge{
  position:absolute;top:-8px;right:-8px;min-width:26px;height:26px;padding:0 7px;
  border-radius:999px;background:#ff5a5a;color:#190b0c;
  font:700 12px var(--font-ui);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px rgba(255,80,80,.7);
}
#dragHud{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;
  z-index:2600;padding:10px 16px;border-radius:999px;
  background:rgba(16,9,10,.94);border:1px solid rgba(255,90,90,.42);
  color:#ffd6d6;font:600 13px var(--font-ui);letter-spacing:.02em;
  box-shadow:0 10px 32px rgba(255,40,40,.22),0 0 0 1px rgba(255,80,80,.12);
  transition:opacity .18s ease,transform .22s cubic-bezier(.22,1,.36,1);
  max-width:min(92vw,440px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#dragHud.show{opacity:1;transform:translateX(-50%) translateY(0)}
#dragHud[data-mode="group"]{border-color:rgba(255,130,130,.85);box-shadow:0 10px 32px rgba(255,60,60,.38)}
#dragHud[data-mode="ungroup"]{border-color:rgba(255,160,120,.7)}
body.dragging{cursor:grabbing}
body.dragging .card,body.dragging .group-wrap,body.dragging .ungroup-wrap,body.dragging .between-drop{cursor:grabbing}
.drag-ghost{opacity:1!important;background:rgba(255,80,80,.06);border:2px dashed rgba(255,150,150,.8)!important;box-shadow:none!important;transform:none;min-height:132px}
.drag-ghost>*{opacity:0;visibility:hidden}
.drag-chosen{box-shadow:none}
.sortable-fallback.drag-fallback,.drag-fallback{
  opacity:1!important;pointer-events:none;z-index:4000;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  background:#10090a!important;
  overflow:hidden!important;
  animation:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  contain:layout paint;
  will-change:left,top;
}
.sortable-fallback.drag-fallback>*,.drag-fallback>*{opacity:1!important;visibility:visible!important}
.sortable-fallback .link-row,.sortable-fallback .card-progress-wrapper,.sortable-fallback .delete-badge,.sortable-fallback .ungroup-badge{display:none!important}
body.dragging .card{animation:none!important}
body.dragging .grid>.card{content-visibility:visible}
body.dragging-from-group .ungroup-wrap.drop-target,body.dragging-from-group .ungroup-wrap.drag-over{
  box-shadow:none!important;
}
body.dragging-from-group .between-drop.drop-target,body.dragging-from-group .between-drop.drag-over{
  box-shadow:none!important;
}
@keyframes cardLand{0%{transform:scale(.98)}100%{transform:scale(1)}}
.card.just-moved{animation:cardLand .28s cubic-bezier(.22,1,.36,1)}
.toast{animation:toastIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Red-tinted glass highlight instead of gray/white sheen */
.header,.control-panel,.group-wrap,.controls-wrapper,.grid-section.grouped,.card.viewer{
  box-shadow:0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,90,90,.16) !important;
}

/* Utility: keep any element's children clipped nicely */
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Shared SAYONARA rain (see /bg.js) ---- */
.sayonara-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.sayonara-bg .word{
  position:absolute;top:0;left:50%;
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--font-display);font-weight:700;letter-spacing:.08em;
  color:#ff4040;white-space:nowrap;line-height:1;
  will-change:transform;
  animation:sayoFloat linear infinite;
  text-shadow:0 0 14px rgba(255,40,40,.5);
}
.sayonara-bg .word--giant{font-size:clamp(48px,10vw,140px);opacity:.5;z-index:1}
.sayonara-bg .word--big{font-size:clamp(28px,6.5vw,88px);opacity:.32}
.sayonara-bg .word--far{font-size:clamp(16px,3vw,34px);opacity:.16}
@keyframes sayoFloat{from{transform:translate3d(0,110vh,0)}to{transform:translate3d(0,-130vh,0)}}
body.bg-paused .sayonara-bg .word{animation-play-state:paused}
body.dragging .sayonara-bg{opacity:.28}
@media (prefers-reduced-motion:reduce){
  .sayonara-bg .word{animation:none!important;transform:translate3d(0,18vh,0);opacity:.28}
}

/* Skip offscreen cabinet cards */
.grid>.card{content-visibility:auto;contain-intrinsic-size:auto 240px}

/* SPA page swap — chrome stays put, no view-transition flash */
html.spa-busy{cursor:progress}
#app-page{position:relative;z-index:1}

/* Custom dialogs */
#ui-host{position:fixed;inset:0;z-index:10050;pointer-events:none}
.ui-overlay{position:fixed;inset:0;padding:0;background:rgba(0,0,0,.14);opacity:0;pointer-events:auto;transition:opacity .12s ease}
.ui-overlay.show{opacity:1}
.ui-card{width:min(360px,calc(100vw - 24px));background:#10090a;border:1px solid rgba(255,80,80,.45);border-radius:16px;padding:18px 18px 16px;box-shadow:0 12px 36px rgba(0,0,0,.45),0 0 28px rgba(255,50,50,.28);transform:scale(.92) translate3d(0,8px,0);opacity:0;transition:transform .16s cubic-bezier(.18,1.35,.28,1),opacity .12s ease}
.ui-overlay.show .ui-card{transform:none;opacity:1}
.ui-title{margin:0 0 8px;font-family:var(--font-display);font-size:16px;font-weight:700;color:#ff7d7d;letter-spacing:.04em}
.ui-msg{margin:0 0 14px;font-family:var(--font-ui);font-weight:600;font-size:15px;color:#ffb3b3;line-height:1.45}
.ui-input{width:100%;box-sizing:border-box;margin:0 0 14px;background:#0e1216;border:1px solid rgba(255,110,110,.28);border-radius:10px;color:#e8eaed;padding:10px 12px;min-height:42px;font-family:var(--font-ui);font-size:14px}
.ui-input:focus{outline:none;border-color:rgba(255,120,120,.7);box-shadow:var(--focus)}
.ui-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.ui-actions .Btn{width:auto!important;min-width:108px;flex:1 1 auto}