/* Общие токены и компоненты для экранов продукта «Верстак» в шести стилях.
   Стиль задаётся атрибутом body[data-skin]: verstak | archive | signal | album | svet | salon */
/* Шрифты на своём сервере (лицензия OFL): Inter, Unbounded, Caveat, JetBrains Mono. Подмножества: cyrillic, latin, latin-ext (₽). */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/files/caveat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/files/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/files/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/files/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/files/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/files/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/files/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/files/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/files/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/files/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/files/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/files/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,[data-skin=verstak]{--bg:#f1ede6;--paper:#fbf9f5;--ink:#1f1c18;--muted:#6f675c;--line:#d9d1c4;--accent:#c4502b;--accent2:#5b6b3f;--soft:#f4d9cc;--good:#2e9a5b;
  --r:18px;--rs:12px;--bw:1.5px;--fb:Inter,system-ui,sans-serif;--fh:Unbounded,Inter,sans-serif;--fm:"JetBrains Mono",monospace;--sh:0 10px 30px -18px rgba(0,0,0,.4)}
:root,[data-skin=verstak]{--accent-ink:#b0431f}
:root[data-theme="dark"]{--accent-ink:#e2754f}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--fb)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.k{font:500 11px/1.4 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

.__strip{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 16px;background:#111;color:#eee;font:600 12px Inter,sans-serif;position:relative;z-index:60}
.__strip a{color:#fff;text-decoration:none}

.top{display:flex;align-items:center;gap:16px;height:62px}
.brand{font:700 19px var(--fh);letter-spacing:-.02em;text-decoration:none}
.top nav{display:flex;gap:18px;margin-left:auto}
.top nav a{text-decoration:none;color:var(--muted);font-weight:500}
.crumbs{display:flex;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:6px 0 14px}
.crumbs a{text-decoration:none}
.crumbs span::before{content:"/";margin-right:6px;opacity:.5}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:var(--bw) solid var(--ink);background:transparent;border-radius:999px;padding:9px 16px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .12s,background .15s}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.sm{padding:5px 11px;font-size:13px}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,.skins button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.box{background:var(--paper);border:var(--bw) solid var(--line);border-radius:var(--r);padding:18px}
.chip{display:inline-flex;align-items:center;gap:6px;border:var(--bw) solid var(--line);background:var(--paper);border-radius:999px;padding:3px 10px;font-size:12px}
.ava{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 13px var(--fh);background:var(--soft);border:var(--bw) solid var(--ink)}
.ava.lg{width:64px;height:64px;font-size:20px}
.sh{display:flex;align-items:baseline;gap:12px;font:700 26px var(--fh);letter-spacing:-.02em;margin:0 0 16px}
.sh small{margin-left:auto;font:500 13px var(--fb);color:var(--muted);letter-spacing:0}
h1.title{font:700 clamp(28px,4.4vw,52px)/1.02 var(--fh);letter-spacing:-.03em;margin:4px 0 8px}
.stars{color:#e0a100;letter-spacing:2px}
.tag-ok{color:var(--good);font-weight:600}
input.f,select.f,textarea.f{width:100%;min-width:0;border:var(--bw) solid var(--line);border-radius:var(--rs);padding:9px 11px;background:var(--bg);color:var(--ink)}

/* текстуры-заглушки */
.wood{background:repeating-linear-gradient(97deg,#b98a5b 0 7px,#a87a4d 7px 11px,#c49a6c 11px 19px,#9e7045 19px 22px)}
.oak{background:repeating-linear-gradient(88deg,#d6b48a 0 5px,#c9a273 5px 8px,#dcbd95 8px 15px)}
.walnut{background:repeating-linear-gradient(93deg,#5b3a24 0 6px,#4a2e1b 6px 9px,#6b4429 9px 16px)}
.resin{background:linear-gradient(90deg,#9e7045 0 38%,#1d4e6b 38% 46%,#2f7aa0 46% 52%,#1d4e6b 52% 60%,#9e7045 60%)}
.slab{background:radial-gradient(ellipse 60% 120% at 50% 50%,transparent 58%,#4b3220 60% 66%,transparent 67%),repeating-linear-gradient(97deg,#8d6a46 0 7px,#7d5c3b 7px 11px,#96734d 11px 19px)}
.shavings{background:radial-gradient(ellipse 20% 8% at 30% 40%,#e9c99b 0 60%,transparent 61%),radial-gradient(ellipse 16% 6% at 65% 60%,#dfb986 0 60%,transparent 61%),radial-gradient(ellipse 18% 7% at 45% 75%,#f0d6ad 0 60%,transparent 61%),#7d5734}
.clay{background:radial-gradient(circle at 30% 35%,#e3b79a 0 18%,transparent 19%),radial-gradient(circle at 70% 60%,#d59876 0 22%,transparent 23%),#ecd7c6}
.metal{background:linear-gradient(135deg,#8f969c,#dfe3e6 35%,#7b8388 55%,#c9ced2)}
.linen{background:repeating-linear-gradient(0deg,#e7e0d3 0 2px,#ddd4c4 2px 4px),#e7e0d3}
.oil{background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.45),transparent 40%),repeating-linear-gradient(88deg,#b88a55 0 5px,#a97b47 5px 8px,#c29563 8px 15px)}
.wax{background:radial-gradient(circle at 60% 30%,rgba(255,255,255,.25),transparent 45%),repeating-linear-gradient(88deg,#c7a679 0 5px,#b9976a 5px 8px,#cfb086 8px 15px);filter:saturate(.8)}
.stain{background:radial-gradient(circle at 40% 55%,rgba(110,20,40,.55) 0 12%,transparent 13%),repeating-linear-gradient(88deg,#c7a679 0 5px,#b9976a 5px 8px,#cfb086 8px 15px)}

/* переключатель стилей */
.skins{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;display:flex;gap:4px;padding:6px;background:#111;border-radius:999px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);max-width:calc(100% - 24px);overflow-x:auto}
.skins span{color:#999;font:600 12px Inter,sans-serif;padding:8px 6px 8px 12px;white-space:nowrap}
.skins button{border:0;border-radius:999px;padding:8px 14px;background:transparent;color:#ddd;font:600 13px Inter,sans-serif;white-space:nowrap}
.skins button[aria-pressed="true"]{background:#fff;color:#111}
footer.foot{padding:50px 0 110px;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:900px){.top nav{display:none}}
@media (max-width:560px){.__strip span{display:none}.skins span{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- АРХИВ ---------- */
[data-skin=archive]{--bg:#f4f3ef;--paper:#fbfaf7;--ink:#141414;--muted:#77736b;--line:#d8d4cb;--accent:#2337ff;--accent2:#141414;--soft:#e8ecff;--good:#2e8b57;--r:0px;--rs:0px;--bw:1px;--fb:"Inter Tight",Inter,sans-serif;--fh:"Inter Tight",Inter,sans-serif;--fm:"IBM Plex Mono",monospace;--sh:none}
[data-skin=archive] .top{border-bottom:1px solid var(--ink)}
[data-skin=archive] .brand,[data-skin=archive] .sh,[data-skin=archive] h1.title{font-weight:800}
[data-skin=archive] h1.title{font-size:clamp(36px,6vw,84px);letter-spacing:-.05em;line-height:.9}
[data-skin=archive] h1.title::after{content:".";color:var(--accent)}
[data-skin=archive] .sh{font-size:34px;letter-spacing:-.04em;border-bottom:1px solid var(--ink);padding-bottom:6px}
[data-skin=archive] .btn{border-radius:0;font:500 12px "IBM Plex Mono";text-transform:uppercase}
[data-skin=archive] .chip{border-radius:0;font:500 11px "IBM Plex Mono";text-transform:uppercase}
[data-skin=archive] .ava{border-radius:0;background:#fffdf6}
[data-skin=archive] .ph{filter:grayscale(.7) contrast(1.05)}
[data-skin=archive] .stars{color:var(--accent)}

/* ---------- СИГНАЛ ---------- */
[data-skin=signal]{--bg:#0a0a0a;--paper:#111110;--ink:#e9e9e4;--muted:#7c7c76;--line:#2a2a28;--accent:#c6ff1a;--accent2:#c6ff1a;--soft:#1a1a17;--good:#c6ff1a;--r:0px;--rs:0px;--bw:1px;--fb:"JetBrains Mono",monospace;--fh:"JetBrains Mono",monospace;--fm:"JetBrains Mono",monospace;--sh:none}
[data-skin=signal] body{font-size:14px}
[data-skin=signal] .brand::after{content:"//SIGNAL";color:var(--accent)}
[data-skin=signal] .top{border-bottom:1px solid var(--ink)}
[data-skin=signal] .top nav a::before{content:"/";color:var(--accent)}
[data-skin=signal] h1.title{font:900 clamp(28px,5vw,64px)/.92 Unbounded;text-transform:uppercase;letter-spacing:-.04em;text-shadow:2px 0 #ff3b2f,-2px 0 var(--accent)}
[data-skin=signal] .sh{text-transform:uppercase;font-weight:800;font-size:20px}
[data-skin=signal] .sh::before{content:">";color:var(--accent)}
[data-skin=signal] .btn{border-radius:0;text-transform:uppercase;font-size:12px}
[data-skin=signal] .btn.primary{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:5px 5px 0 #ff3b2f}
[data-skin=signal] .btn[aria-pressed="true"]{background:#ff3b2f;border-color:#ff3b2f;color:#000}
[data-skin=signal] .chip{border-radius:0;text-transform:uppercase;font-size:11px;background:none}
[data-skin=signal] .ava{border-radius:0;border-color:var(--accent);background:#000;color:var(--accent)}
[data-skin=signal] .ph{filter:grayscale(1) contrast(1.3);position:relative}
[data-skin=signal] .ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 2px,transparent 2px 4px);pointer-events:none}
[data-skin=signal] .stars{color:var(--accent)}
[data-skin=signal] .crumbs span::before{content:"//"}

/* ---------- АЛЬБОМ ---------- */
[data-skin=album]{--bg:#f3ead7;--paper:#fffdf6;--ink:#2b2118;--muted:#7a5c44;--line:#2b2118;--accent:#d6336c;--accent2:#2f9e78;--soft:#ffd84d;--good:#2f9e78;--r:20px;--rs:14px;--bw:2.5px;--fb:Rubik,sans-serif;--fh:Rubik,sans-serif;--fm:Rubik,sans-serif;--sh:5px 5px 0 #2b2118}
[data-skin=album] body{background-image:linear-gradient(rgba(120,160,220,.16) 1px,transparent 1px);background-size:100% 30px}
[data-skin=album] .brand{font:20px "Rubik Mono One";background:#ffd84d;border:2.5px solid var(--ink);border-radius:999px;padding:4px 14px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
[data-skin=album] h1.title{font:700 clamp(40px,6vw,74px)/.95 Caveat,cursive;letter-spacing:0;transform:rotate(-1deg)}
[data-skin=album] .sh{font:700 42px Caveat,cursive}
[data-skin=album] .box{box-shadow:var(--sh)}
[data-skin=album] .btn{box-shadow:3px 3px 0 var(--ink);background:#fff}
[data-skin=album] .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
[data-skin=album] .btn.primary{background:#ff7eb6;color:var(--ink)}
[data-skin=album] .btn[aria-pressed="true"]{background:#ffd84d;color:var(--ink);border-color:var(--ink)}
[data-skin=album] .ava{background:#7fe0b5;font-family:"Rubik Mono One";box-shadow:2px 2px 0 var(--ink)}
[data-skin=album] .chip{background:#fff59a}

/* ---------- СВЕТ ---------- */
[data-skin=svet]{--bg:#efe7f3;--paper:rgba(255,255,255,.5);--ink:#1d1b26;--muted:#5d5a6b;--line:rgba(255,255,255,.8);--accent:#6b4cff;--accent2:#14b8a6;--soft:rgba(255,255,255,.7);--good:#0d9488;--r:28px;--rs:16px;--bw:1px;--fb:Manrope,sans-serif;--fh:Manrope,sans-serif;--fm:Manrope,sans-serif;--sh:0 20px 50px -24px rgba(60,40,90,.45)}
[data-skin=svet] body{background:radial-gradient(60vmax 60vmax at 10% 10%,#ffb59b,transparent 60%),radial-gradient(60vmax 60vmax at 90% 20%,#b9a4ff,transparent 60%),radial-gradient(60vmax 60vmax at 40% 100%,#9fe6d5,transparent 60%),radial-gradient(50vmax 50vmax at 85% 85%,#ffe39b,transparent 60%),#efe7f3;background-attachment:fixed}
[data-skin=svet] .box,[data-skin=svet] .chip{backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.9)}
[data-skin=svet] h1.title{font-weight:800;letter-spacing:-.045em;background:linear-gradient(90deg,#1d1b26,#6b4cff 70%,#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-skin=svet] .sh{font-weight:800}
[data-skin=svet] .btn{border:0;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,228,250,.9));box-shadow:0 6px 14px -6px rgba(60,40,90,.4),inset 0 1px 0 #fff}
[data-skin=svet] .btn.primary{background:linear-gradient(180deg,#8a70ff,#5a3cf0);color:#fff;box-shadow:0 10px 20px -8px #6b4cff}
[data-skin=svet] .btn[aria-pressed="true"]{background:linear-gradient(180deg,#2dd4bf,#0d9488);color:#fff}
[data-skin=svet] .ava{border:2px solid rgba(255,255,255,.8);background:radial-gradient(circle at 30% 25%,#fff,#c7b7ff 45%,#6b4cff);color:#fff}
[data-skin=svet] input.f,[data-skin=svet] select.f,[data-skin=svet] textarea.f{background:rgba(255,255,255,.7);border:0;box-shadow:inset 0 2px 5px rgba(60,40,90,.12)}

/* ---------- САЛОН ---------- */
[data-skin=salon]{--bg:#f3ead8;--paper:#faf4e6;--ink:#2a1c12;--muted:#7a6650;--line:#d8c9a8;--accent:#6e1e2b;--accent2:#1f4d3a;--soft:#f3e6cc;--good:#1f4d3a;--r:0px;--rs:0px;--bw:1px;--fb:"Cormorant Garamond",Georgia,serif;--fh:"Cormorant Garamond",Georgia,serif;--fm:Forum,serif;--sh:0 20px 40px -24px rgba(40,20,0,.5)}
[data-skin=salon] body{font-size:18px}
[data-skin=salon] .k{letter-spacing:.18em}
[data-skin=salon] .top{border-bottom:3px double var(--ink)}
[data-skin=salon] .brand{font:500 26px "Cormorant Garamond"}
[data-skin=salon] .brand::before{content:"Салон · "}
[data-skin=salon] h1.title{font:500 clamp(36px,5.6vw,72px)/1 "Cormorant Garamond";letter-spacing:0}
[data-skin=salon] .sh{font:500 38px "Cormorant Garamond";border-bottom:1px solid #b08d4a;padding-bottom:6px}
[data-skin=salon] .btn{border-radius:0;font:13px Forum;letter-spacing:.14em;text-transform:uppercase;border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--accent)}
[data-skin=salon] .btn.primary{background:var(--accent);color:var(--paper)}
[data-skin=salon] .btn[aria-pressed="true"]{background:var(--accent2);border-color:var(--accent2);color:var(--paper)}
[data-skin=salon] .chip{border-radius:0;border-color:#b08d4a;background:none;font:12px Forum;letter-spacing:.1em}
[data-skin=salon] .ava{border:0;color:transparent;background:radial-gradient(ellipse 34% 30% at 50% 40%,#f3e6cc 0 60%,transparent 61%),radial-gradient(ellipse 48% 30% at 50% 92%,#f3e6cc 0 70%,transparent 71%),var(--accent);box-shadow:0 0 0 2px var(--paper),0 0 0 3px #b08d4a;border-radius:50%}
[data-skin=salon] .stars{color:#b08d4a}
[data-skin=salon] .frame-gold{border:12px solid transparent;border-image:linear-gradient(135deg,#7a5a24,#e3c98c 25%,#a37c37 50%,#f0dca7 75%,#6d4f1d) 1;box-shadow:var(--sh),inset 0 0 0 3px #f6efe0}

/* ---- режим приложения ---- */
.__strip,.skins{display:none!important}