/* ===== TOKENS ===== */
:root{
  --brand:#c8102e;
  --btn-hover:#d51030;
  --bg:#ffffff; --bg-elev:#f7f7f7; --card:#ffffff;
  --text:#181818; --muted:#666; --border:#e5e5e5;
  --link:#c8102e; --link-hover:#f11337;
  --container: 1200px;
}
html[data-theme="dark"]{
  --bg:#323232; --bg-elev:#232323; --card:#3b3b3b;
  --text:#f3f3f3; --muted:#bdbdbd; --border:#4a4a4a;--btn-hover:#d51030;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;background:var(--bg);color:var(--text);}
a{color:var(--link);text-decoration:none} a:hover{color:var(--link-hover)}
.container{max-width:var(--container);width:92%;margin:0 auto}
/* icons */
svg.icon{inline-size:22px; block-size:22px; display:inline-block; vertical-align:-0.2em; color:inherit}
svg.icon *[fill]{fill:currentColor!important} svg.icon *[stroke]{stroke:currentColor!important}

/* header */
.site-header{background:var(--bg-elev); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10}
.header-bar{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; min-height:64px; padding:8px 0;}
.brand .brand-logo--dark{display:none}
html[data-theme="dark"] .brand .brand-logo--light{display:none}
html[data-theme="dark"] .brand .brand-logo--dark{display:inline-block}
.brand img{height:40px; width:auto; display:block}
.header-actions{display:flex; gap:10px; align-items:center}
.btn{appearance:none; border:1px solid var(--border); background:var(--card); padding:8px 12px; border-radius:10px; cursor:pointer; display: flex
; align-items: center; gap: 5px; justify-content: center; color:var(--text)}
.btn:hover{background:var(--bg-elev)}
.btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn-primary:hover{background:var(--btn-hover); color:#fff;}
.spacer{min-width:1px}

/* lang dropdown */
.lang-switch{position:relative; display:inline-flex; align-items:center}
.lang-switch .lang-current{display:flex; align-items:center; gap:6px; height:40px}
.lang-switch .lang-list{position:absolute; right:0; top:100%; transform:translateY(6px);
  background:var(--card); border:1px solid var(--border); border-radius:10px; list-style:none; margin:0; padding:6px; min-width:120px; display:none; z-index:1000;}
.lang-switch:hover .lang-list{display:block}
.lang-switch .lang-list a{display:block; padding:8px 10px; border-radius:8px; color:var(--text)}
.lang-switch .lang-list li.is-current a{background:var(--bg-elev); font-weight:600}
.lang-switch::after{content:""; position:absolute; left:-6px; right:-6px; top:100%; height:12px}

/* main */
.site-main{padding:24px 0}
.h-title{margin:0 0 6px; font-size:clamp(22px,3vw,36px)}
.muted{color:var(--muted)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:16px}
.card{display:flex; gap:12px; align-items:center; border:1px solid var(--border); background:var(--card); border-radius:12px; padding:12px}
.card:hover{background:var(--bg-elev)}
.card-ico{width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--bg-elev); border:1px solid var(--border)}
.card-title{font-weight:700}
.card-sub{color:var(--muted); font-size:14px}

/* list */
.crumbs{font-size:14px; color:var(--muted); margin-bottom:10px}
.list{list-style:none; padding:0; margin:12px 0; display:grid; gap:6px}
.row{display:flex; width: 100%; justify-content:space-between; align-items:center; border:1px solid var(--border); background:var(--card); border-radius:10px; padding:8px 10px}
.row:hover{background:var(--bg-elev)}

/* locked */
.locked{border:1px solid var(--border); background:var(--card); border-radius:12px; padding:24px; text-align:center}
.locked-ico{margin-bottom:8px}

/* footer */
.site-footer{border-top:1px solid var(--border); padding:10px 0; color:var(--muted)}

/* Theme toggle icons (показываем одну) */
html[data-theme="dark"]  .theme-toggle .icon-sun  { display: none !important; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none !important; }
/* фолбэк по системной теме, если data-theme ещё не установлен */
@media (prefers-color-scheme: dark){
  html:not([data-theme]) .theme-toggle .icon-sun  { display: none !important; }
}
@media (prefers-color-scheme: light){
  html:not([data-theme]) .theme-toggle .icon-moon { display: none !important; }
}
/* Прячем текст "Home" в хлебных крошках, оставляем только иконку */
.crumbs .home-text { display: none; }

/* Sticky footer */
html, body { height: 100%; }
body { min-height: 100svh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }
.site-footer { margin-top: auto; }

.file-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  cursor:pointer;
}
.btn-icon:hover { background: var(--bg-elev); }
/* НЕ даём строкам растягивать контейнер */
.file-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.file-row > .row{ flex:1 1 auto; min-width:0; max-width:100%; color: var(--text);}

/* плашка-ссылка */
.row{
  display:flex; align-items:center; gap:10px;
  justify-content:space-between; width:100%; min-width:0;
}

/* левая часть с иконкой и именем */
.row .left{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }

/* имя = база (с троеточием) + расширение (всегда видно) */
.name{ display:flex; min-width:0; }
.name-base{
  min-width:0; max-width:100%;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.name-ext{
  flex:0 0 auto; margin-left:4px; white-space:nowrap;
}

/* размер и кнопка — фиксированные, не сжимаем */
.row .right, .btn-icon{ flex:0 0 auto; }

/* УДАЛИТЬ/закомментировать, чтобы размер был виден и на мобиле */
/*
@media (max-width: 480px){
  .row .right{ display:none; }
}
*/
@media (max-width: 480px){
.pc { display:none; }
}

.i-large {inline-size:48px; block-size:48px; inline-size: 22px; block-size: 22px;display: inline-block;vertical-align: -0.2em;color: inherit; width: 48px; height: 48px;}