/* =========================================================
PSYCHOSOMATIKA — ПОЛНЫЙ CSS
Высококонтрастные тёмная и светлая темы
Скругления 10px, контрастная строка поиска, адаптивность
========================================================= */
:root{
/* Тёмная тема (по умолчанию) */
--bg: #0A0B08;
--panel: #161812;
--panel-2: #202216;
--line: #4A4D3A;
--text: #FFFFFF;
--text-dim: #C0C5B3;
--text-faint: #8A8F7A;
--verdigris: #8FBF8F;
--verdigris-dim: #5A7A5A;
--rust: #D9704A;
--gold: #D4B54A;
--serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
--mono: 'Courier New', ui-monospace, Menlo, monospace;
--sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.light-theme{
/* Светлая тема */
--bg: #FFFFFF;
--panel: #F5F5F0;
--panel-2: #EFEFE8;
--line: #C0C4B8;
--text: #0B0E0A;
--text-dim: #3A4038;
--text-faint: #6B7268;
--verdigris: #2E5A48;
--verdigris-dim: #5F8C7A;
--rust: #B04020;
--gold: #8C6C20;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--bg); color:var(--text); font-family:var(--sans);}
body{
min-height:100vh;
background-image:
radial-gradient(circle at 15% 10%, rgba(127,160,122,0.04), transparent 40%),
radial-gradient(circle at 85% 90%, rgba(190,99,56,0.03), transparent 45%);
}
::selection{ background: var(--verdigris-dim); color:#fff; }
.frame{ max-width:1100px; margin:0 auto; padding:28px 20px 80px; }
/* ---- Header ---- */
header{
border-bottom: 1px solid var(--line);
padding-bottom:22px;
margin-bottom:22px;
display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
flex-wrap:wrap;
}
.title-block .kicker{
font-family:var(--mono); font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
color:var(--verdigris); margin-bottom:8px;
}
h1{
font-family:var(--serif); font-weight:400; font-size:44px; letter-spacing:0.01em;
color:var(--text);
}
.title-block .sub{
font-family:var(--serif); font-style:italic; color:var(--text-dim); font-size:15px; margin-top:6px;
}
.plate-number{
font-family:var(--mono); font-size:11px; color:var(--text-faint); text-align:right; line-height:1.7;
}
/* ---- Disclaimer ---- */
.margin-note{
border-left:2px solid var(--gold);
background:var(--panel);
padding:12px 16px;
font-size:13px;
color:var(--text-dim);
line-height:1.55;
margin-bottom:28px;
display:flex; gap:10px; align-items:flex-start;
border-radius:10px;
}
.margin-note b{ color:var(--gold); font-weight:600; }
.margin-note::before{
content:"※"; color:var(--gold); font-size:15px; line-height:1;
}
/* ---- Поиск ---- */
.search-row{ margin-bottom:26px; }
.search-box{
position:relative;
border: 2px solid var(--verdigris);
background: var(--panel);
border-radius: 10px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.search-box input{
flex:1;
background:transparent;
border:none;
color:var(--text);
font-family:var(--serif);
font-size:22px;
padding:10px 0;
outline:none;
}
.search-box input::placeholder{ color:var(--text-faint); font-style:italic; }
.search-box .hint{
font-family:var(--mono); font-size:10px; color:var(--text-faint); letter-spacing:0.1em;
white-space:nowrap;
}
.search-btn{
background: var(--verdigris);
color: #fff;
border: none;
padding: 8px 14px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
cursor: pointer;
border-radius: 8px;
transition: background 0.2s;
}
.search-btn:hover{ background: var(--verdigris-dim); }
/* ---- Layout: plate index + content ---- */
.layout{ display:grid; grid-template-columns:190px 1fr; gap:0; border-top:1px solid var(--line); }
@media (max-width:720px){ .layout{ grid-template-columns:1fr; } }
nav.plates{
border-right:1px solid var(--line);
padding-right:0;
}
@media (max-width:720px){ nav.plates{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:6px; } }
.plate-btn{
display:flex; align-items:baseline; gap:10px;
width:100%; text-align:left;
background:transparent; border:none; cursor:pointer;
padding:13px 14px 13px 6px;
border-bottom:1px solid var(--line);
color:var(--text-dim);
transition: background 0.15s, color 0.15s;
border-radius:10px;
}
.plate-btn:hover{ background:var(--panel); color:var(--text); }
.plate-btn.active{ background:var(--panel-2); color:var(--text); }
.plate-btn.active .num{ color:var(--rust); }
.plate-btn .num{
font-family:var(--mono); font-size:11px; color:var(--verdigris); flex-shrink:0; padding-top:2px;
}
.plate-btn .label{ font-family:var(--serif); font-size:15px; line-height:1.25; }
.plate-btn .count{ font-family:var(--mono); font-size:10px; color:var(--text-faint); margin-left:auto; padding-top:3px; }
main{ padding:4px 0 0 28px; min-height:420px; }
@media (max-width:720px){ main{ padding:20px 0 0 0; } }
.zone-heading{
font-family:var(--serif); font-size:19px; color:var(--verdigris); margin:18px 0 14px;
font-style:italic;
}
.symptom-grid{
display:flex; flex-wrap:wrap; gap:8px;
margin-bottom:8px;
}
.chip{
font-family:var(--mono); font-size:12.5px;
color:var(--text-dim);
background:var(--panel);
border:1px solid var(--line);
padding:8px 12px;
cursor:pointer;
transition: border-color 0.15s, color 0.15s;
border-radius:10px;
}
.chip:hover{ border-color:var(--verdigris-dim); color:var(--text); }
.chip.selected{ border-color:var(--rust); color:var(--text); background:var(--panel-2); }
.empty-state{ color:var(--text-faint); font-family:var(--serif); font-style:italic; font-size:15px; padding:30px 0; }
/* ---- Symptom card ---- */
.card{
margin-top:22px;
border-top:1px solid var(--line);
padding-top:20px;
animation: rise 0.25s ease;
border-radius:10px;
}
@keyframes rise{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.card h2{
font-family:var(--serif); font-weight:400; font-size:26px; color:var(--text); margin-bottom:4px;
}
.card .zone-tag{
font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
color:var(--verdigris); margin-bottom:18px; display:block;
}
.interpretations{ display:grid; gap:14px; margin-bottom:20px; }
.interp{
background:var(--panel);
border-left:2px solid var(--verdigris-dim);
padding:14px 16px;
border-radius:10px;
}
.interp .source{
font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
color:var(--gold); margin-bottom:7px;
}
.interp p{ font-size:14.5px; line-height:1.6; color:var(--text); }
.reflect{
border:1px dashed var(--line);
padding:16px 18px;
background: rgba(190,99,56,0.05);
border-radius:10px;
}
.reflect .label{
font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
color:var(--rust); margin-bottom:8px;
}
.reflect p{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--text); line-height:1.5; }
.recommendations{
margin-top:20px;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.recommendations h3{
grid-column:1/-1;
font-family:var(--serif); font-weight:400; font-size:19px;
color:var(--verdigris); margin-bottom:2px;
}
.rec{
background:var(--panel);
border:1px solid var(--line);
padding:12px 14px;
font-size:13.5px;
line-height:1.5;
color:var(--text);
border-radius:10px;
}
.rec::before{content:"→"; color:var(--gold); margin-right:8px;}
.medical-note{
margin-top:12px;
border-left:2px solid var(--rust);
background:rgba(190,99,56,.05);
padding:12px 14px;
font-size:12.5px;
line-height:1.5;
color:var(--text-dim);
border-radius:10px;
}
.medical-note b{color:var(--rust);}
.result-count{
font-family:var(--mono); font-size:10.5px; color:var(--text-faint);
margin-left:8px;
}
footer{
margin-top:60px; padding-top:16px; border-top:1px solid var(--line);
font-family:var(--mono); font-size:10.5px; color:var(--text-faint); letter-spacing:0.05em;
display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
@media (max-width:720px){
.recommendations{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
.card{ animation:none; }
}
/* ===== Стили для тестов, шкалы, дневника, дашборда ===== */
.v2-test,
.v21-test{
margin:0 0 28px;
border:1px solid var(--line);
background:linear-gradient(135deg, rgba(127,160,122,.07), rgba(190,99,56,.04));
padding:20px;
border-radius:10px;
}
.v2-test-top,
.v21-head{
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-start;
flex-wrap:wrap;
}
.v2-test h2,
.v21-test h2{
font-family:var(--serif);
font-weight:400;
font-size:24px;
margin-bottom:5px;
}
.v2-test .lead,
.v21-lead{
color:var(--text-dim);
font-size:13.5px;
line-height:1.55;
max-width:700px;
}
.v2-btn{
border:1px solid var(--verdigris-dim);
background:var(--panel-2);
color:var(--text);
padding:10px 14px;
cursor:pointer;
font-family:var(--mono);
font-size:11px;
letter-spacing:.06em;
border-radius:10px;
transition: background 0.2s, border-color 0.2s;
}
.v2-btn:hover{
border-color:var(--verdigris);
background:var(--panel);
}
.v2-test-body,
.v21-body{
display:none;
margin-top:18px;
border-top:1px solid var(--line);
padding-top:18px;
}
.v2-progress{
font-family:var(--mono);
font-size:10px;
color:var(--text-faint);
margin-bottom:14px;
}
.v2-question{
font-family:var(--serif);
font-size:19px;
line-height:1.4;
margin-bottom:13px;
}
.v2-options,
.v21-options{
display:grid;
gap:8px;
}
.v21-options{
grid-template-columns:1fr 1fr;
}
.v2-option{
display:flex;
gap:10px;
align-items:flex-start;
text-align:left;
width:100%;
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
padding:11px 13px;
cursor:pointer;
font-size:13px;
line-height:1.45;
border-radius:10px;
}
.v2-option:hover,
.v21-opt:hover{
border-color:var(--verdigris-dim);
}
.v2-option.selected,
.v21-opt.selected{
border-color:var(--rust);
background:var(--panel-2);
}
.v2-option .letter{
font-family:var(--mono);
color:var(--verdigris);
min-width:18px;
}
.v21-opt{
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
padding:12px 14px;
text-align:left;
cursor:pointer;
font-size:13px;
line-height:1.45;
border-radius:10px;
}
.v21-opt small{
display:block;
color:var(--text-faint);
margin-top:4px;
}
.v2-actions,
.v21-actions{
display:flex;
justify-content:space-between;
margin-top:14px;
gap:8px;
}
.v2-result,
.v21-result{
display:none;
margin-top:18px;
border-top:1px solid var(--line);
padding-top:18px;
}
.v2-result h3,
.v21-result h3{
font-family:var(--serif);
font-weight:400;
font-size:24px;
margin-bottom:8px;
}
.v2-note,
.v21-note{
color:var(--text-dim);
font-size:13px;
line-height:1.55;
margin-bottom:15px;
}
.v2-grid,
.v21-priority{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
@media(max-width:720px){
.v2-grid,
.v21-priority,
.v21-options{
grid-template-columns:1fr;
}
}
.v2-result-card,
.v21-card{
background:var(--panel);
border-left:2px solid var(--verdigris-dim);
padding:13px 15px;
border-radius:10px;
}
.v2-result-card h4,
.v21-card h4{
font-family:var(--serif);
font-weight:400;
font-size:18px;
margin-bottom:6px;
}
.v2-result-card p,
.v2-result-card li,
.v21-card p,
.v21-card li{
font-size:13px;
line-height:1.55;
color:var(--text-dim);
}
.v2-result-card ul,
.v21-card ul{
padding-left:18px;
margin-top:7px;
}
.v2-score{
font-family:var(--mono);
font-size:11px;
color:var(--gold);
margin-bottom:7px;
}
.v2-red{
border-left-color:var(--rust);
}
.v21-metrics{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-bottom:15px;
}
.v21-metric{
background:var(--panel);
padding:12px;
border-top:2px solid var(--verdigris-dim);
border-radius:10px;
}
.v21-metric b{
display:block;
font-family:var(--mono);
font-size:18px;
color:var(--text);
margin-bottom:4px;
}
.v21-metric span{
font-size:11px;
color:var(--text-faint);
}
.v21-plan{
margin-top:15px;
}
.v21-day{
border-top:1px solid var(--line);
padding:13px 0;
display:grid;
grid-template-columns:90px 1fr;
gap:14px;
border-radius:10px;
}
.v21-day strong{
font-family:var(--mono);
font-size:11px;
color:var(--gold);
}
.v21-day h5{
font-family:var(--serif);
font-size:17px;
font-weight:400;
margin-bottom:4px;
}
.v21-day p{
font-size:13px;
color:var(--text-dim);
line-height:1.55;
}
.v21-warning{
border-left-color:var(--rust);
margin-top:15px;
}
@media(max-width:720px){
.v21-metrics{
grid-template-columns:1fr 1fr;
}
.v21-day{
grid-template-columns:1fr;
gap:4px;
}
}
/* Шкала 0-10 */
.v22-scale{
margin:15px 0 4px;
}
.v22-scale-labels{
display:flex;
justify-content:space-between;
font-family:var(--mono);
font-size:10px;
color:var(--text-faint);
margin-bottom:7px;
}
.v22-scale-track{
display:grid;
grid-template-columns:repeat(11,1fr);
gap:5px;
}
.v22-scale-btn{
min-height:43px;
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
cursor:pointer;
font-family:var(--mono);
font-size:12px;
transition:.15s;
border-radius:10px;
}
.v22-scale-btn:hover{
border-color:var(--verdigris-dim);
transform:translateY(-1px);
}
.v22-scale-btn.selected{
border-color:var(--rust);
background:var(--panel-2);
box-shadow:inset 0 -3px 0 var(--rust);
}
.v22-scale-caption{
font-size:12px;
color:var(--text-dim);
margin-top:9px;
min-height:18px;
}
.v22-scale-bar{
height:8px;
background:linear-gradient(90deg,var(--verdigris-dim),var(--gold),var(--rust));
margin-top:11px;
position:relative;
border-radius:10px;
}
.v22-scale-marker{
position:absolute;
top:-4px;
width:2px;
height:16px;
background:var(--text);
left:0;
transition:left .15s;
}
.v22-history{
margin-top:16px;
padding-top:14px;
border-top:1px solid var(--line);
}
.v22-history-row{
display:grid;
grid-template-columns:72px 1fr 42px;
align-items:center;
gap:10px;
margin:8px 0;
}
.v22-history-day{
font-family:var(--mono);
font-size:10px;
color:var(--text-faint);
}
.v22-history-bar{
height:7px;
background:var(--line);
position:relative;
border-radius:10px;
}
.v22-history-fill{
height:100%;
background:var(--rust);
border-radius:10px;
}
.v22-history-value{
font-family:var(--mono);
font-size:11px;
text-align:right;
}
/* Дневник и корреляция */
.v23-tracker{
margin:18px 0 0;
padding-top:18px;
border-top:1px solid var(--line);
}
.v23-tracker-head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
flex-wrap:wrap;
}
.v23-tracker h4{
font-family:var(--serif);
font-weight:400;
font-size:22px;
margin-bottom:5px;
}
.v23-muted{
font-size:12px;
line-height:1.5;
color:var(--text-faint);
}
.v23-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:14px;
}
.v23-field{
background:var(--panel);
padding:13px;
border:1px solid var(--line);
border-radius:10px;
}
.v23-field label{
display:block;
font-family:var(--mono);
font-size:10px;
color:var(--text-faint);
letter-spacing:.08em;
margin-bottom:8px;
}
.v23-scale-row{
display:grid;
grid-template-columns:repeat(11,1fr);
gap:4px;
}
.v23-score-btn{
min-height:35px;
border:1px solid var(--line);
background:var(--panel-2);
color:var(--text);
font-family:var(--mono);
cursor:pointer;
border-radius:10px;
}
.v23-score-btn.selected{
border-color:var(--rust);
background:var(--panel);
box-shadow:inset 0 -3px 0 var(--rust);
}
.v23-checks{
display:grid;
gap:7px;
}
.v23-check{
display:flex;
gap:8px;
align-items:flex-start;
font-size:12px;
line-height:1.45;
color:var(--text-dim);
cursor:pointer;
}
.v23-check input{
margin-top:2px;
accent-color:var(--verdigris);
}
.v23-save{
margin-top:12px;
}
.v23-chart{
margin-top:18px;
background:var(--panel);
border:1px solid var(--line);
padding:14px;
border-radius:10px;
}
.v23-chart svg{
display:block;
width:100%;
height:auto;
}
.v23-chart-legend{
display:flex;
justify-content:space-between;
font:10px var(--mono);
color:var(--text-faint);
margin-top:5px;
}
.v23-corr{
margin-top:15px;
}
.v23-corr-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:9px;
}
.v23-corr-card{
border:1px solid var(--line);
background:var(--panel);
padding:11px 12px;
border-radius:10px;
}
.v23-corr-card b{
font-size:12px;
font-weight:500;
}
.v23-corr-card span{
display:block;
font:11px var(--mono);
color:var(--gold);
margin-top:4px;
}
.v23-entry-list{
margin-top:14px;
border-top:1px solid var(--line);
}
.v23-entry{
display:flex;
justify-content:space-between;
gap:10px;
padding:9px 0;
border-bottom:1px solid var(--line);
font-size:12px;
color:var(--text-dim);
border-radius:10px;
}
.v23-entry strong{
font-family:var(--mono);
color:var(--text);
}
/* Дашборд */
.v24-dashboard{
margin-top:16px;
padding-top:18px;
border-top:1px solid var(--line);
}
.v24-dashboard h4{
font-family:var(--serif);
font-size:23px;
font-weight:400;
margin-bottom:6px;
}
.v24-sub{
font-size:12px;
line-height:1.5;
color:var(--text-faint);
margin-bottom:14px;
}
.v24-metrics{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
}
.v24-metric{
background:var(--panel);
border:1px solid var(--line);
padding:12px;
border-radius:10px;
}
.v24-metric b{
display:block;
font:18px var(--mono);
margin-bottom:4px;
}
.v24-metric span{
font-size:10px;
color:var(--text-faint);
}
.v24-chart{
margin-top:12px;
background:var(--panel);
border:1px solid var(--line);
padding:12px;
border-radius:10px;
}
.v24-chart svg{
width:100%;
height:auto;
display:block;
}
.v24-insight,
.v24-next{
margin-top:12px;
padding:14px 16px;
background:var(--panel);
border-left:2px solid var(--verdigris-dim);
border-radius:10px;
}
.v24-insight h5,
.v24-next h5{
font-family:var(--serif);
font-size:19px;
font-weight:400;
margin-bottom:5px;
}
.v24-insight p,
.v24-next p{
font-size:13px;
line-height:1.55;
color:var(--text-dim);
}
.v24-practice{
margin-top:12px;
}
.v24-practice-row{
display:grid;
grid-template-columns:1fr 120px 70px;
gap:10px;
align-items:center;
padding:8px 0;
border-bottom:1px solid var(--line);
font-size:12px;
color:var(--text-dim);
border-radius:10px;
}
.v24-practice-row b{
font:11px var(--mono);
color:var(--gold);
}
.v24-practice-row span:last-child{
text-align:right;
font:11px var(--mono);
}
/* Мобильные стили */
@media(max-width:720px){
.v2-test,
.v21-test{
padding:17px;
}
.v21-test h2,
.v2-test h2{
font-size:25px;
}
.v21-q{
font-size:24px;
line-height:1.14;
}
.v21-options{
grid-template-columns:1fr;
}
.v21-actions{
position:sticky;
bottom:76px;
z-index:15;
margin:14px -3px -2px;
padding:8px 3px;
background:rgba(251,251,248,.92);
backdrop-filter:blur(12px);
}
.v21-actions .v2-btn{
width:100%;
min-height:46px;
}
.v21-note{
font-size:11px;
}
.v21-result{
margin-top:14px;
}
.v21-metrics,
.v24-metrics{
grid-template-columns:1fr 1fr;
}
.v21-metric,
.v24-metric{
padding:10px;
}
.v21-day{
grid-template-columns:1fr;
gap:5px;
}
.v21-day strong{
font-size:11px;
}
.v21-day span{
font-size:12px;
}
.v22-scale{
overflow:hidden;
}
.v22-scale-track{
grid-template-columns:repeat(11,minmax(0,1fr));
gap:3px;
}
.v22-scale-btn{
min-width:0;
width:100%;
min-height:43px;
padding:0;
border-radius:10px;
}
.v22-scale-labels{
font-size:9px;
}
.v23-tracker,
.v24-dashboard{
padding:15px;
border-radius:17px;
}
.v23-tracker h4,
.v24-dashboard h4{
font-size:22px;
}
.v23-form{
grid-template-columns:1fr;
}
.v23-field{
padding:12px;
}
.v23-scale-row{
grid-template-columns:repeat(11,minmax(0,1fr));
}
.v23-score-btn{
min-width:0;
padding:0;
}
.v23-chart,
.v24-chart{
padding:9px;
margin-top:10px;
}
.v23-entry{
font-size:11px;
}
.v24-practice-row{
grid-template-columns:1fr;
gap:3px;
}
.v24-practice-row span:last-child{
text-align:left;
}
.v24-insight,
.v24-next{
padding:12px;
}
.v24-insight h5,
.v24-next h5{
font-size:18px;
}
.search-box{
flex-wrap:wrap;
}
.search-box input{
font-size:18px;
}
.search-btn{
padding:6px 10px;
}
}