:root{
  /* Теплая темная палитра */
  --bg:#1a1615;
  --bg-2:#221d1b;
  --panel:#26201e;
  --panel-2:#2d2624;
  --panel-3:#352c29;
  --text:#f4f0ec;
  --text-soft:#e3ded9;
  --muted:#a39791;
  --muted-2:#877c77;
  --line:#3a312e;
  --line-2:#4a3f3b;
  
  /* Умеренно-теплые акценты */
  --accent:#e2a76f;
  --accent-2:#f0c294;
  --accent-3:#c48850;
  
  --success:#52b788;
  --danger:#e07a7a;
  --warning:#e9c46a;

  /* Улучшенные многослойные тени для 3D-эффекта */
  --shadow-sm: 0 2px 4px rgba(0,0,0,.15), 0 6px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow: 0 4px 8px rgba(0,0,0,.2), 0 16px 32px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.08);
  --shadow-lg: 0 8px 16px rgba(0,0,0,.25), 0 24px 48px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.1);
  
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:10px;
  --content:1160px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --transition:200ms cubic-bezier(0.4, 0, 0.2, 1); /* Чуть более плавный переход для физичности */
}

*, *::before, *::after{
  box-sizing:border-box;
  min-width:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  min-height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(226,167,111,.06), transparent 30%),
    linear-gradient(180deg, #151110 0%, var(--bg) 100%);
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

img, iframe, video{
  display:block;
  max-width:100%;
  height:auto;
}

a, button, input, select, textarea{
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    opacity var(--transition);
}

a{
  color:var(--accent);
  text-decoration:none;
}

a:hover{
  color:var(--accent-2);
  text-decoration:underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(226,167,111,.25);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
}

.skip-link:focus{
  left:16px;
  top:16px;
  z-index:100;
  background:#fff;
  color:#000;
  padding:10px 12px;
  border-radius:10px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(26,22,21,.88);
  border-bottom:1px solid rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

.header-inner{
  max-width:var(--content);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.brand-block{
  min-width:0;
}

.brand{
  display:inline-block;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text);
}

.brand:hover{
  color:#fff;
  text-decoration:none;
}

.brand-sub{
  color:var(--muted);
  font-size:.84rem;
  margin-top:2px;
}

.top-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.top-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--muted);
  white-space:nowrap;
}

.top-nav a:hover,
.top-nav a:focus-visible{
  color:var(--text);
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.05);
  text-decoration:none;
  transform: translateY(-1px);
}

.page-shell{
  flex:1 0 auto;
  width:100%;
  max-width:var(--content);
  margin:0 auto;
  padding:24px 18px 36px;
}

/* Объемная панель за счет градиента и двойной тени */
.panel{
  margin-bottom:18px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(45,38,36,.95), rgba(38,32,30,.98));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.hero-panel h1,
.article-view h1,
.auth-panel h1,
.editor-panel h1{
  margin:0 0 10px;
  line-height:1.15;
  font-size:clamp(1.8rem, 3vw, 2.8rem);
  overflow-wrap:anywhere;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.notice{
  margin-bottom:16px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.notice.success{
  border-color:rgba(82,183,136,.3);
  background: rgba(82,183,136,.04);
  color:#d2ebd9;
}

.notice.error{
  border-color:rgba(224,122,122,.3);
  background: rgba(224,122,122,.04);
  color:#ffdad8;
}

.search-form{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.search-form input[type="text"]{
  flex:1 1 320px;
}

input[type="text"],
input[type="password"],
input[type="file"],
select,
textarea{
  width:100%;
  max-width:100%;
  padding:12px 14px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:#181312;
  color:var(--text);
  font:inherit;
  outline:none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder{
  color:var(--muted-2);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 3px rgba(226,167,111,.15);
}

textarea{
  min-height:320px;
  resize:vertical;
}

label{
  display:block;
}

label span{
  display:block;
  margin-bottom:8px;
  color:#ded4cc;
  font-size:.95rem;
}

.grid-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-bottom:14px;
}

.editor-label{
  display:block;
}

.editor-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Эффект приподнятых кнопок */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background: linear-gradient(180deg, #2a2220, #201918);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  text-align:center;
  box-shadow: 0 2px 4px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.03);
}

.btn:hover,
.btn:focus-visible{
  background: linear-gradient(180deg, #332927, #261f1d);
  border-color:#6e5c56;
  color:#fff;
  text-decoration:none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}

.btn:active{
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.btn.primary{
  border-color:#cf9359;
  background:linear-gradient(180deg, #e2a76f, #b37843);
  color:#21140a;
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
}

.btn.primary:hover,
.btn.primary:focus-visible{
  background:linear-gradient(180deg, #ecc196, #bf844f);
  border-color:#f0c294;
  color:#1a0e05;
  box-shadow: 0 4px 10px rgba(226,167,111,.2), 0 4px 12px rgba(0,0,0,.25);
}

.btn.primary:active{
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.meta{
  color:var(--muted);
  font-size:.86rem;
  line-height:1.45;
}

.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.section-head h1{
  margin:0;
  font-size:1.6rem;
  overflow-wrap:anywhere;
}

.list-item{
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.04);
}

.list-item:first-of-type{
  padding-top:0;
  border-top:0;
}

.list-item h3{
  margin:8px 0 8px;
  line-height:1.2;
  font-size:1.28rem;
  overflow-wrap:anywhere;
}

.list-item p{
  margin:8px 0 0;
  color:var(--text-soft);
  overflow-wrap:anywhere;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  max-width:100%;
  padding:0 10px;
  border:1px solid rgba(226,167,111,.15);
  border-radius:999px;
  background:rgba(226,167,111,.08);
  color:#f7e3d0;
  font-size:.8rem;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.chip.muted{
  border-color:rgba(255,255,255,.05);
  background:rgba(255,255,255,.03);
  color:#ccc2bc;
}

.chip.active{
  border-color:#e2a76f;
  background:#4e3927;
  color:#fff;
  box-shadow: 0 2px 6px rgba(226,167,111,.15);
}

.article-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px 18px;
  align-items:start;
  margin-bottom:18px;
}

.article-main{
  min-width:0;
}

.article-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  min-width:0;
}

.article-meta{
  color:#9c8f88;
  font-size:.81rem;
  line-height:1.35;
  text-align:right;
  white-space:nowrap;
  letter-spacing:.02em;
  font-family:var(--mono);
}

.article-body{
  width:100%;
  min-width:0;
  color:#f0eae4;
}

.article-body > *{
  max-width:100%;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6{
  margin:1.2em 0 .6em;
  line-height:1.22;
  color:#fbf9f7;
  overflow-wrap:anywhere;
}

.article-body h1{ font-size:2rem; }
.article-body h2{ font-size:1.6rem; }
.article-body h3{ font-size:1.3rem; }
.article-body h4{ font-size:1.15rem; }
.article-body h5{ font-size:1rem; }
.article-body h6{ font-size:.95rem; color:var(--muted); }

.article-body p{
  margin:0 0 1em;
  max-width:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  color:#f0eae4;
}

.article-body ul,
.article-body ol{
  margin:0 0 1em 1.35em;
  padding:0;
}

.article-body li{
  margin:0 0 .45em;
  color:#f0eae4;
  overflow-wrap:anywhere;
}

.article-body li:last-child{
  margin-bottom:0;
}

.article-body blockquote{
  margin:1em 0;
  padding:.9em 1em;
  border:1px solid rgba(255,255,255,.05);
  border-left:4px solid var(--accent);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  color:var(--text-soft);
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.1);
}

.article-body hr{
  margin:1.5em 0;
  border:0;
  border-top:1px solid rgba(255,255,255,.05);
}

.article-body a{
  word-break:break-word;
}

.article-body img,
.article-body video,
.article-body iframe{
  max-width:100%;
  height:auto;
  border-radius:12px;
  box-shadow: var(--shadow-sm);
}

.article-body pre{
  display:block;
  width:100%;
  max-width:100%;
  margin:18px 0;
  padding:14px 16px;
  overflow:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  white-space:pre;
  word-break:normal;
  overflow-wrap:normal;
  background:#14100f;
  color:#f4f0ec;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-sm), inset 0 2px 5px rgba(0,0,0,.4);
  font-family:var(--mono);
  font-size:.95rem;
  line-height:1.55;
  tab-size:4;
}

.article-body pre code{
  display:block;
  min-width:max-content;
  width:max-content;
  font:inherit;
  color:inherit;
  white-space:inherit;
  background:transparent;
  padding:0;
  border:0;
  border-radius:0;
}

.article-body :not(pre) > code{
  display:inline;
  padding:.12em .38em;
  border:1px solid rgba(255,255,255,.04);
  border-radius:8px;
  background:#1d1816;
  color:#fbdcb8;
  font-family:var(--mono);
  font-size:.95em;
  white-space:break-spaces;
  overflow-wrap:anywhere;
}

.article-body strong{
  color:#fff;
  font-weight:700;
}

.article-body em{
  font-style:italic;
}

.media-card{
  display:block;
  margin:18px 0;
  color:inherit;
  text-decoration:none;
}

.media-card:hover,
.media-card:focus-visible{
  text-decoration:none;
}

.media-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:640px;
  height:480px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#14100f;
  box-shadow:var(--shadow);
}

.media-image-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#14100f;
}

.media-video-frame video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

.media-play-badge{
  position:absolute;
  right:14px;
  bottom:14px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.media-caption{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  word-break:break-all;
}

.tag-link{
  white-space:nowrap;
}

.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.users-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
}

.users-table th,
.users-table td{
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:left;
  vertical-align:top;
}

.users-table thead th{
  border-top:0;
  color:#e3ded9;
}

.site-footer{
  width:100%;
  margin-top:auto;
  padding:18px 18px 28px;
  background:var(--panel);
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
  border-top: 1px solid var(--line);
}

.pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
  align-items:center;
}

.pagination-dots{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  padding:8px 10px;
  opacity:.7;
}

.preserve-space{
  white-space:pre-wrap;
  font-family:var(--mono);
  overflow-wrap:anywhere;
}

/* Медиа-запросы сохранены без изменений логики */
@media (max-width: 980px){
  .page-shell{ padding:20px 16px 30px; }
  .panel{ padding:18px; }
  .media-frame{ max-width:100%; height:auto; aspect-ratio:4 / 3; }
}

@media (max-width: 760px){
  body{ font-size:17px; }
  .header-inner{ padding:12px 14px; gap:12px; }
  .brand{ font-size:1.05rem; }
  .brand-sub{ font-size:.8rem; }
  .top-nav{ width:100%; gap:6px; }
  .top-nav a{ min-height:42px; padding:0 10px; font-size:.95rem; }
  .page-shell{ padding:16px 12px 24px; }
  .panel{ padding:14px; border-radius:14px; margin-bottom:14px; }
  .grid-form{ grid-template-columns:1fr; }
  .search-form{ align-items:stretch; }
  .search-form input[type="text"]{ flex:1 1 auto; }
  .article-head{ grid-template-columns:1fr; }
  .article-side{ align-items:flex-start; }
  .article-meta{ text-align:left; white-space:normal; font-size:.84rem; overflow-wrap:anywhere; }
  .article-body{ font-size:1rem; }
  .article-body h1{ font-size:1.65rem; }
  .article-body h2{ font-size:1.4rem; }
  .article-body h3{ font-size:1.2rem; }
  .article-body h4{ font-size:1.08rem; }
  .article-body p, .article-body li{ overflow-wrap:break-word; }
  .article-body pre{ margin:14px 0; padding:12px 12px; border-radius:12px; font-size:.88rem; line-height:1.5; }
  .article-body pre code{ min-width:max-content; }
  .article-body :not(pre) > code{ font-size:.92em; }
  .media-caption{ font-size:12px; word-break:break-word; }
  .users-table{ min-width:560px; }
  .btn{ width:100%; min-height:44px; }
  .editor-actions{ align-items:stretch; }
  .editor-actions .btn, .editor-actions button, .editor-actions a{ width:100%; }
}

@media (max-width: 480px){
  .header-inner{ padding:10px 12px; }
  .page-shell{ padding:14px 10px 20px; }
  .panel{ padding:12px; border-radius:12px; }
  .hero-panel h1, .article-view h1, .auth-panel h1, .editor-panel h1{ font-size:clamp(1.5rem, 7vw, 2rem); }
  .section-head h1{ font-size:1.35rem; }
  .list-item h3{ font-size:1.12rem; }
  .article-body h1{ font-size:1.5rem; }
  .article-body h2{ font-size:1.3rem; }
  .article-body h3{ font-size:1.15rem; }
  .article-body pre{ padding:10px 10px; font-size:.84rem; }
  .chip{ max-width:100%; }
  .users-table{ min-width:520px; }
  .site-footer{ padding:16px 12px 24px; }
}

.footer-timing {
    opacity: .75;
    font-size: 12px;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; transform: none !important; }
}