:root{
	--bg:#ffffff;
	--panel:#f6f7f9;
	--card:#ffffff;
	--text:#0f172a;
	--muted:#475569;
	--border:#e2e8f0;
	--link:#2563eb;
	--shadow: 0 10px 25px rgba(2, 6, 23, 0.06);
	--radius: 14px;
	--container: 1200px;
	--gap: 18px;
}

html[data-theme="dark"]{
	--bg:#0a0a0a;
	--panel:#121212;
	--card:#121212;
	--text:#eaeaea;
	--muted:#a8a8a8;
	--border:#242424;
	--link:#8ab4ff;
	--shadow: 0 10px 25px rgba(0,0,0,0.55);
}

*{box-sizing:border-box}
body{
	margin:0;
	font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial;
	background:var(--bg);
	color:var(--text);
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.container{
	max-width:var(--container);
	margin:0 auto;
	padding:0 16px;
}

/* =========================
   HEADER (2 rows)
========================= */
.header{
	background:var(--bg);
	position:sticky;
	top:0;
	z-index:50;
	border-bottom:1px solid var(--border);
}

.header__top{padding:14px 0}
.header__bottom{
	background:var(--panel);
	border-top:1px solid var(--border);
}

.header__inner{
	display:flex;
	gap:14px;
	align-items:center;
}

/* ===== Logo ===== */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

/* ИКОНКА (EF) — это плашка */
.logo__mark{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;

  font-weight:900;
  letter-spacing:.5px;

  background: linear-gradient(
    135deg,
    #2563eb,
    #22c55e,
    #06b6d4
  );
  color:#fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.35);
}

/* ТЕКСТ (ErrorFixer) — градиентный текст */
.logo__text{
  font-weight:800;
  letter-spacing:.3px;

  background: linear-gradient(
    120deg,
    #2563eb,
    #22c55e,
    #06b6d4,
    #2563eb
  );
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  animation: logoFlow 6s ease infinite;
}

/* hover — чуть живее */
.logo:hover .logo__text{
  animation-duration:3s;
}

@keyframes logoFlow{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.search{
	flex:1;
	display:flex;
	gap:10px;
	align-items:center;
	min-width:240px;
}
.search__input{
	width:100%;
	border:1px solid var(--border);
	background:var(--card);
	color:var(--text);
	border-radius:12px;
	padding:10px 12px;
	outline:none;
}
.search__input:focus{border-color:rgba(59,130,246,.6)}

.btn{
	border:1px solid var(--border);
	background:var(--card);
	color:var(--text);
	border-radius:12px;
	padding:10px 12px;
	cursor:pointer;
	box-shadow:var(--shadow);
}
.btn--ghost{background:transparent; box-shadow:none}
.btn--small{padding:8px 10px; border-radius:10px}

.userbar{display:flex; align-items:center; gap:10px; white-space:nowrap}

/* NAV */
.nav{
	display:flex;
	gap:14px;
	padding:10px 0;
	overflow:auto;
}
.nav__link{color:var(--muted); white-space:nowrap}
.nav__link:hover{color:var(--text); text-decoration:none}

/* =========================
   LAYOUT
========================= */
.layout{padding:18px 0}
.grid{
	display:grid;
	grid-template-columns: 1fr 340px;
	gap:var(--gap);
	align-items:start;
}
@media (max-width: 1024px){
	.grid{grid-template-columns:1fr}
}

/* =========================
   CARDS
========================= */
.card{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:16px;
	margin-bottom:14px;
}
.card__title{margin:0; font-size:22px; line-height:1.25}
.card__header{margin-bottom:10px}
.card__body{color:var(--text)}
.card__footer{margin-top:12px; display:flex; justify-content:flex-end}

.meta{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:8px;
	color:var(--muted);
	font-size:13px;
}
.meta__dot{opacity:.6}

/* =========================
   SIDEBAR / WIDGETS
========================= */
.sidebar .widget{margin-bottom:14px}
.widget{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
}
.widget__title{
	padding:12px 14px;
	border-bottom:1px solid var(--border);
	font-weight:700;
}
.widget__body{padding:12px 14px}

.list{margin:0; padding-left:18px}
.list li{margin:8px 0}
.hint{margin-top:10px; font-size:12px; color:var(--muted)}

/* =========================
   CONTENT (prose)
========================= */
.prose h2,.prose h3{margin-top:18px}
.prose code{
	background:var(--panel);
	padding:2px 6px;
	border-radius:8px;
	border:1px solid var(--border)
}
.prose pre{
	background:var(--panel);
	padding:12px;
	border-radius:12px;
	border:1px solid var(--border);
	overflow:auto
}

/* =========================
   FOOTER
========================= */
.footer{
	margin-top:20px;
	border-top:1px solid var(--border);
	background:var(--panel);
}
.footer__inner{
	display:flex;
	gap:18px;
	justify-content:space-between;
	padding:18px 0;
}
.footer__title{font-weight:800}
.footer__text{color:var(--muted); font-size:13px; max-width:520px}
.footer__link{color:var(--muted); margin-left:12px}
.footer__link:hover{color:var(--text); text-decoration:none}

/* =========================
   CATEGORY MENU
========================= */
.catmenu{margin:0; padding:0; list-style:none}
.catmenu li{margin:8px 0}
.catmenu a{color:var(--text)}
.catmenu a:hover{text-decoration:underline}
.catmenu--sub{margin-top:8px; margin-left:14px; padding-left:12px; border-left:1px solid var(--border)}

/* =========================
   USER DROPDOWN (used by login.tpl)
========================= */
.userdrop{position:relative}
.userdrop__btn{
	display:flex; align-items:center; gap:10px;
	padding:8px 10px;
	border:1px solid var(--border);
	border-radius:12px;
	background:var(--card);
	color:var(--text);
}
.userdrop__btn:hover{text-decoration:none}
.userdrop__name{font-weight:600; font-size:14px}
.userdrop__chev{opacity:.7; font-size:12px}

.ava{width:28px; height:28px; display:grid; place-items:center}
.ava__img{
	width:28px; height:28px;
	border-radius:999px;
	border:1px solid var(--border);
	object-fit:cover;
	background:var(--panel);
}
.userdrop{
  position:relative;
}

.userdrop__menu{
  display:none;
}

.userdrop:hover .userdrop__menu,
.userdrop:focus-within .userdrop__menu{
  display:block;
}

/* Невидимый мостик между кнопкой и меню */
.userdrop__menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;     /* высота мостика */
  height:10px;
}
.userdrop__menu{
	position:absolute;
	right:0;
  top:100%;
  margin-top:8px; /* можно 6-8px */
	min-width:240px;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:14px;
	box-shadow:var(--shadow);
	padding:8px;
	display:none;
	z-index:100001;
}
.userdrop:hover .userdrop__menu{display:block}

.userdrop__item{
	display:block;
	padding:10px 12px;
	border-radius:12px;
	color:var(--text);
}
.userdrop__item:hover{background:var(--panel); text-decoration:none}
.userdrop__item--danger{color:#ef4444}

/* =========================
   MOBILE
========================= */
@media (max-width: 1024px){
	.search{display:none} /* потом сделаем бургер/поиск */
	.nav{padding:8px 0}
}
.profile{
	display:flex;
	gap:20px;
	align-items:flex-start;
}

.profile__ava img{
	width:96px;
	height:96px;
	border-radius:999px;
	border:1px solid var(--border);
	object-fit:cover;
	background:var(--panel);
}

.profile__list{
	margin:0;
	padding:0;
	list-style:none;
}
.profile__list li{
	margin:6px 0;
	color:var(--text);
}

.profile__actions{
	margin-top:12px;
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.status{
	font-weight:600;
}
.status--online{color:#16a34a}
.status--offline{color:#64748b}

@media (max-width: 640px){
	.profile{
		flex-direction:column;
		align-items:center;
		text-align:center;
	}
	.profile__actions{justify-content:center}
}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.formgrid{grid-template-columns:1fr}}
.formrow{display:flex;flex-direction:column;gap:8px}
.formrow--full{grid-column:1 / -1}
.label{font-weight:700;font-size:14px}
.input,.textarea,.select select{
	border:1px solid var(--border);
	background:var(--card);
	color:var(--text);
	border-radius:12px;
	padding:10px 12px;
	outline:none;
}
.textarea{resize:vertical}
.input:focus,.textarea:focus,.select select:focus{border-color:rgba(59,130,246,.6)}
.check{display:flex;align-items:center;gap:10px;color:var(--muted);margin:6px 0}
.muted{color:var(--muted)}
.form_submit{margin-top:14px;display:flex;justify-content:flex-end}

.avatarbox{
	display:flex;gap:14px;align-items:center;
	padding:12px;border:1px solid var(--border);
	border-radius:var(--radius);background:var(--panel);
}
.avatarbox__img img{
	width:64px;height:64px;border-radius:999px;
	border:1px solid var(--border);
	object-fit:cover;background:var(--card);
}
.xfields{width:100%;border-collapse:collapse}
.xfields td{padding:8px 0;border-bottom:1px solid var(--border)}
.xfields tr:last-child td{border-bottom:0}
/* Tabs без JS */
.utabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.utabs a{
	display:inline-flex;align-items:center;gap:8px;
	padding:10px 12px;
	border:1px solid var(--border);
	border-radius:12px;
	background:var(--panel);
	color:var(--muted);
	text-decoration:none;
}
.utabs a:hover{color:var(--text)}
.utabs a.is-active{
	background:var(--card);
	color:var(--text);
	box-shadow:var(--shadow);
}

.utab{display:none}
#u_profile{display:block} /* по умолчанию */
.utab:target{display:block}
:target ~ #u_profile{display:none}

.uhead{display:flex;gap:16px;align-items:center}
.uhead__ava{
	width:84px;height:84px;border-radius:18px;
	border:1px solid var(--border);
	overflow:hidden;background:var(--panel);
	flex:0 0 auto;
}
.uhead__ava img{width:100%;height:100%;object-fit:cover;display:block}
.uhead__main{min-width:0;flex:1}
.uhead__name{margin:0;font-size:22px;line-height:1.2}
.uhead__right{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.kv{
	display:grid;
	grid-template-columns: 220px 1fr;
	gap:10px 14px;
	padding:14px;
	border:1px solid var(--border);
	border-radius:var(--radius);
	background:var(--panel);
}
@media (max-width:720px){.kv{grid-template-columns:1fr}}
.kv__k{color:var(--muted)}
.kv__v{color:var(--text)}
.divider{height:1px;background:var(--border);margin:14px 0}

.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.formgrid{grid-template-columns:1fr}}
.formrow{display:flex;flex-direction:column;gap:8px}
.formrow--full{grid-column:1 / -1}
.label{font-weight:700;font-size:14px}
.input,.textarea, .wide{
	border:1px solid var(--border);
	background:var(--card);
	color:var(--text);
	border-radius:12px;
	padding:10px 12px;
	outline:none;
	width:100%;
}
.textarea{resize:vertical}
.input:focus,.textarea:focus,.wide:focus{border-color:rgba(59,130,246,.6)}
.check{display:flex;align-items:center;gap:10px;color:var(--muted)}
.xfields{width:100%;border-collapse:collapse}
.xfields td{padding:8px 0;border-bottom:1px solid var(--border)}
.xfields tr:last-child td{border-bottom:0}
.form_submit{margin-top:14px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.status{padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:12px}
.status--online{color:#16a34a}
.status--offline{color:var(--muted)}
/* ===== Metrics (profile) ===== */
.metrics{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:12px;
	margin:14px 0;
}
@media (max-width: 720px){
	.metrics{grid-template-columns:1fr}
}

.metric{
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	border-radius:16px;
	border:1px solid var(--border);
	background:linear-gradient(180deg, var(--card), var(--panel));
	box-shadow:var(--shadow);
}

.metric__icon{
	width:42px;height:42px;
	border-radius:14px;
	display:grid;
	place-items:center;
	border:1px solid var(--border);
	background:var(--card);
	flex:0 0 auto;
}
.metric__icon i{
	font-size:18px;
}

.metric__body{
	display:flex;
	flex-direction:column;
	line-height:1.1;
	min-width:0;
}
.metric__label{
	color:var(--muted);
	font-size:13px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.metric__value{
	font-weight:900;
	font-size:22px;
	letter-spacing:.2px;
	margin-top:4px;
}

/* Акценты (красиво и не кислотно) */
.metric--pub .metric__icon{
	background:rgba(37,99,235,.10);
	border-color:rgba(37,99,235,.20);
}
.metric--pub .metric__icon i{ color:#2563eb; }
.metric--pub .metric__value{ color:#1d4ed8; }

.metric--com .metric__icon{
	background:rgba(245,158,11,.12);
	border-color:rgba(245,158,11,.20);
}
.metric--com .metric__icon i{ color:#f59e0b; }
.metric--com .metric__value{ color:#b45309; }

/* Dark mode мягче */
html[data-theme="dark"] .metric{
	background:linear-gradient(180deg, #121212, #0f0f0f);
}
html[data-theme="dark"] .metric--pub .metric__icon{
	background:rgba(138,180,255,.14);
	border-color:rgba(138,180,255,.22);
}
html[data-theme="dark"] .metric--pub .metric__value{ color:#8ab4ff; }

html[data-theme="dark"] .metric--com .metric__icon{
	background:rgba(245,158,11,.16);
	border-color:rgba(245,158,11,.22);
}
html[data-theme="dark"] .metric--com .metric__value{ color:#fbbf24; }
.metrics{
	list-style:none;
}
.metrics *{
	list-style:none;
}
.metric__value{
	display:flex;
	align-items:baseline;
	gap:0;
	white-space:nowrap;
	line-height:1;
}

.metric__value *{
	margin:0 !important;
	padding:0 !important;
	line-height:1 !important;
}

.metric__value br{display:none}
.metric__value img{display:none} /* если вдруг прилетает картинка/иконка */
/* ===== AddNews ===== */
.an-grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:14px 16px;
}
@media (max-width: 920px){
	.an-grid{grid-template-columns:1fr}
}
.an-row{display:flex; flex-direction:column; gap:8px}
.an-row--full{grid-column:1 / -1}

.an-label{font-weight:800; font-size:14px}
.an-input{
	border:1px solid var(--border);
	background:var(--card);
	color:var(--text);
	border-radius:12px;
	padding:10px 12px;
	outline:none;
}
.an-input:focus{border-color:rgba(59,130,246,.6)}
.an-control{
	border:1px solid var(--border);
	background:var(--card);
	border-radius:12px;
	padding:10px 12px;
}
.an-seo{display:grid; gap:10px}
.an-row2{display:grid; grid-template-columns:160px 1fr; gap:12px; align-items:center}
@media (max-width: 720px){.an-row2{grid-template-columns:1fr}}

.an-label2{color:var(--muted); font-size:13px}
.an-actions{
	display:flex;
	gap:10px;
	justify-content:flex-end;
	flex-wrap:wrap;
}
/* ===== Links: make titles not-blue ===== */
.card__title a,
.story-title a,
.full-title a{
  color: var(--text);
  text-decoration: none;
}
.card__title a:hover,
.story-title a:hover,
.full-title a:hover{
  color: var(--link);
  text-decoration: underline;
}
/* ===== Buttons ===== */
.btn{
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--link);
  border-color: rgba(37,99,235,.35);
  color: #fff;
  box-shadow: 0 10px 25px rgba(37,99,235,.18);
}
.btn--primary:hover{
  text-decoration:none;
  filter: brightness(.95);
}

.btn--soft{
  background: var(--panel);
  box-shadow: none;
}
html[data-theme="dark"] .logo__mark{
  filter: brightness(1.05);
}
.card{ padding:18px; }
.card__title{ font-size:24px; }
.card__body{ margin-top:10px; }
/* ===== Shortstory card ===== */
.s-row{ display:flex; gap:16px; align-items:stretch; }
@media (max-width: 720px){ .s-row{flex-direction:column;} }

.s-media{
  position:relative;
  flex:0 0 260px;
  max-width:260px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-decoration:none;
}
@media (max-width: 720px){ .s-media{max-width:100%; flex-basis:auto;} }

.s-thumb{
  width:100%;
  height:100%;
  min-height:170px;
  object-fit:cover;
  display:block;
  /* “немного обтекает прозрачностью” */
  filter: saturate(1.05) contrast(1.02);
  opacity:.92;
  transition: opacity .2s ease, transform .25s ease;
}
.s-media:hover .s-thumb{ opacity:1; transform: scale(1.02); }

.s-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.25));
  pointer-events:none;
}

.s-media--empty{
  display:grid;
  place-items:center;
  color: var(--muted);
  min-height:170px;
}
.s-media--empty i{ font-size:26px; opacity:.55; }

.s-cat{
  position:absolute;
  left:10px; top:10px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  color:#0f172a;
  font-size:12px;
  font-weight:800;
  z-index:2;
}
html[data-theme="dark"] .s-cat{
  background: rgba(18,18,18,.75);
  border-color: rgba(255,255,255,.10);
  color: var(--text);
}

.s-main{ flex:1; min-width:0; }

.s-head{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
.s-title{ margin:0; font-size:24px; line-height:1.2; }
.s-title a{ color: var(--text); }
.s-title a:hover{ color: var(--link); }

.s-actions{ display:flex; gap:10px; align-items:center; }
.s-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  text-decoration:none;
}
.s-ico a{ color: inherit; text-decoration:none; }
.s-ico:hover{ filter: brightness(.98); }

.s-ico--admin{ opacity:.9; }
.s-ico--admin:hover{ opacity:1; }

.s-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  color: var(--muted);
  font-size:13px;
  align-items:center;
}
.s-meta__item i{ margin-right:6px; opacity:.85; }
.s-meta__dot{ opacity:.6; }

.s-badge{
  margin-left:6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--panel);
  font-weight:800;
  font-size:12px;
  color: var(--text);
}
.s-badge--new{ border-color: rgba(34,197,94,.30); }
.s-badge--upd{ border-color: rgba(245,158,11,.30); }

.s-excerpt{ margin-top:10px; }

.s-editnote{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(148,163,184,.6);
  background: rgba(148,163,184,.08);
  color: var(--muted);
  font-size:13px;
}
html[data-theme="dark"] .s-editnote{
  border-color: rgba(148,163,184,.22);
  background: rgba(148,163,184,.06);
}
.s-editnote i{ margin-right:8px; }
.s-editnote__dot{ margin:0 8px; opacity:.6; }
.s-editnote__reason{ color: var(--text); }

.s-foot{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
/* ===== Favorites: hide default DLE gif, use our icon ===== */
.s-fav{ position:relative; display:inline-flex; }

.s-fav a img{ display:none !important; }         /* прячем plus_fav.gif */
.s-fav a{ width:0; height:0; overflow:hidden; }  /* прячем пустые ссылки визуально */
.s-fav span[data-favorites-add],
.s-fav span[data-favorites-del]{ display:none !important; }

.s-ico--fav{
  background: var(--panel);
}
.s-ico--fav i{ font-size:16px; }
/* ===== DLE dropdown menu (dropmenudiv) ===== */
#dropmenudiv{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 220px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

/* links inside menu */
#dropmenudiv a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

/* hover */
#dropmenudiv a:hover{
  background: var(--panel);
}

/* separators if DLE ever inserts <hr> */
#dropmenudiv hr{
  border:0;
  height:1px;
  background: var(--border);
  margin:6px 4px;
}

/* optional: make "delete" look dangerous (matches your last link order) */
#dropmenudiv a:last-child{
  color: #ef4444;
}
#dropmenudiv a:last-child:hover{
  background: rgba(239,68,68,.10);
}

/* make it look good in dark too */
html[data-theme="dark"] #dropmenudiv{
  box-shadow: var(--shadow);
}
/* Hide "Quick edit" in DLE admin dropdown */
#dropmenudiv a:nth-child(1){
  display:none !important;
}

/* ===== Search with icon ===== */
.search__field{
  position:relative;
  width:100%;
}

.search__icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:var(--muted);
  pointer-events:none;
}

.search__input{
  padding-left:36px; /* место под лупу */
}