:root{
  --bg:#f3f6fb; --fg:#1b1f2a; --muted:#6c7a91; --accent:#1e6df1; --accent-2:#e1e8ff;
  --card:#fff; --border:#e7ebf3; --shadow:0 2px 14px rgba(19,28,45,.06);
  --axis:#cbd5e1; --grid:#eef2f7;
  --page-width:960px; --sidebar-width:220px; --page-gap:16px;
  --type-maturity:#1e6df1;
  --type-call:#c25a00;
  --type-put:#c25a00;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
button,
input,
select,
textarea{
  font-family: inherit;
}
.page{
  position:relative;
  min-height:100vh;
  padding:14px 18px 32px;
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
}
.container{
  width:min(100%, var(--page-width));
  max-width:var(--page-width);
  flex:1 1 720px;
  min-width:320px;
}
.header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.header h1{font-size:18px;margin:0;letter-spacing:-0.01em;font-weight:700}

.toolbar{
  background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
  padding:12px;margin-bottom:12px;
}
.toolbar .search{margin-bottom:10px}
.toolbar input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#f8faff;color:var(--fg);
  outline:none;
}
.toolbar input:focus{border-color:var(--accent)}
.toolbar .toolbar-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--accent);color:#fff;cursor:pointer;
  font-weight:600;
}
.btn.btn-secondary{background:#fff;color:var(--fg)}
.btn:active{transform:translateY(0.5px)}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

.chart-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px;
  min-height:420px;
}
.chart-wrap{position:relative}
.chart{
  position:relative;
  height:64vh;min-height:440px;
  border-radius:12px;
  background:#f7f9ff;
  overflow:hidden;
}
.chart::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("logo-watermark.png") center center no-repeat;
  background-size:cover;
  opacity:1;
  mix-blend-mode:multiply;
  filter:saturate(1.2);
  pointer-events:none;
  z-index:0;
}
.chart::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none;
  opacity:0.03;
  z-index:2;
}
/* чтобы водяной знак был виден под графиком, но сетка и точки — сверху */
.chart svg{position:relative; z-index:1;}
.tooltip{position:absolute;pointer-events:none;background:#111827;color:#fff;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:10}
.empty{color:#9ca3af;text-align:center;padding:28px 0}
.footer{margin-top:10px;color:var(--muted);font-size:12px}

/* SVG */
svg{width:100%;height:100%}
.axis path,.axis line{stroke:var(--axis);stroke-width:1.1}
.axis text{fill:#506079;font-size:11px;font-weight:600}
.axis-label{fill:#506079;font-size:12px;font-weight:700}
.grid line{stroke:#d3dbe8;stroke-width:1.1;stroke-dasharray:2 2;opacity:1}
.point{cursor:pointer;fill:var(--type-maturity);stroke:#fff;stroke-width:1;filter:drop-shadow(0 2px 6px rgba(30,109,241,0.25))}
.point.type-call{fill:var(--type-call);filter:drop-shadow(0 2px 6px rgba(194,90,0,0.25))}
.point.type-put{fill:var(--type-put);filter:drop-shadow(0 2px 6px rgba(194,90,0,0.25))}
.label{font-size:10px;fill:#4b5563;user-select:none;font-weight:600}
.label.dim,.point.dim{opacity:.25}
/* Внутренняя область графика — для clipPath (визуально не видно, только для отсечения) */
svg .plot-area{fill:transparent}

/* Плавающая панель фильтров справа от контейнера */
.filters-panel{
  position:sticky;
  top:14px;
  flex:0 0 clamp(260px, 32vw, 380px);
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:linear-gradient(160deg, rgba(255,255,255,0.96), rgba(247,251,255,0.9));
  border:1px solid rgba(226,234,247,0.9);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(21,39,71,0.14);
  padding:14px;
  max-height: calc(100vh - 32px);
  overflow:auto;
}
.filters-panel::-webkit-scrollbar{ width:6px; }
.filters-panel::-webkit-scrollbar-thumb{ background:#cfd8e6; border-radius:999px; }
.filters-panel::-webkit-scrollbar-track{ background:transparent; }
.filters-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.filters-title-block{display:flex;flex-direction:column;gap:3px}
.filters-title{font-weight:700;font-size:14px;margin-bottom:0}
.filters-subtitle{font-size:11px;line-height:1.35;color:var(--muted)}
.filter-section{display:flex;flex-direction:column;gap:8px}
.filter-section__title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7a8699;
  padding:0 2px;
}
.filters-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}
.filters-panel .filter{background:rgba(248,250,255,0.8);border:1px solid rgba(231,235,243,0.9);border-radius:12px;padding:10px 10px 8px}
.filters-panel .filter .label{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.filters-panel .filter--compact{
  padding:8px;
  border-radius:11px;
  background:rgba(250,252,255,0.92);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset;
}
.filters-panel .filter--compact .label{
  margin-bottom:5px;
  font-size:11px;
  color:#5c6c82;
  letter-spacing:.01em;
}
.filters-panel .filter--wide{grid-column:1 / -1}
.filters-panel .label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.filters-panel .label-row .label{margin-bottom:0}
.filters-panel .btn-small{padding:6px 10px;font-size:12px;border-radius:8px}
.rating-panel{
  margin-top:8px;
  padding:8px;
  border:1px dashed rgba(231,235,243,0.9);
  border-radius:12px;
  background:rgba(248,250,255,0.9);
}
.rating-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rating-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}
.rating-mode-item{display:flex;align-items:center;gap:6px;font-size:12px}
.rating-actions{display:flex;gap:6px;flex-wrap:wrap}
.rating-matrix{border:1px solid rgba(231,235,243,0.9);border-radius:12px;background:#fff;overflow:hidden}
.rating-table-wrap{max-height:200px;overflow:auto}
.rating-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.rating-table th,.rating-table td{padding:4px 6px;text-align:center;border-bottom:1px dashed rgba(231,235,243,0.9)}
.rating-table th{position:sticky;top:0;background:#f7f9ff;z-index:1;font-weight:700}
.rating-table tr:last-child td{border-bottom:0}
.rating-table .grade-cell{text-align:left;font-weight:700;white-space:nowrap}
.rating-table .row-cell{width:36px}
.agency-head{display:flex;flex-direction:column;align-items:center;gap:4px}
.mini-check{position:relative;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}
.mini-check input{width:14px;height:14px;margin:0;accent-color:var(--accent)}
.mini-check.indeterminate input{accent-color:#94a3b8}
.rating-option{display:inline-flex;align-items:center;justify-content:center}
.rating-option input{width:14px;height:14px;accent-color:var(--accent)}
.switch{position:relative;display:inline-block;width:28px;height:14px}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#cfd7e6;border-radius:999px;transition:.2s}
.switch .slider::before{content:"";position:absolute;width:10px;height:10px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:#22c55e}
.switch input:checked + .slider::before{transform:translateX(14px)}
.switch.indeterminate .slider{background:#94a3b8}
.filters-panel .unit-select{
  padding:5px 24px 5px 8px;
  font-size:11px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#f8faff;
  color:var(--fg);
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7a8699 50%),
    linear-gradient(135deg, #7a8699 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.filters-panel .range{display:flex;align-items:center;gap:8px}
.filters-panel .range .sep{color:var(--muted)}
.filters-panel input[type="number"]{
  width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--border);
  background:#f8faff;color:var(--fg);outline:none;
  box-shadow: inset 0 1px 0 #fff;
  min-width:0;
}
.filters-panel input[type="number"]:focus{border-color:var(--accent); box-shadow:0 0 0 2px rgba(30,109,241,0.08)}
.filters-panel .filter-date{
  width:100%;
  min-width:0;
  padding:8px 10px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#f8faff;
  color:var(--fg);
  outline:none;
}
.filters-panel .filter-date:focus{border-color:var(--accent); box-shadow:0 0 0 2px rgba(30,109,241,0.08)}
.filter-toggle-group{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.filter-toggle-group label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(220,228,241,0.95);
  background:#fff;
  color:#344055;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
}
.filter-toggle-group input{
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--accent);
}
.filters-actions{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
/* убираем стрелки у number в фильтрах */
.filters-panel input[type=number]::-webkit-outer-spin-button,
.filters-panel input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.filters-panel input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

/* легенда типов */
.legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  padding:10px 4px 2px;
  color:var(--muted);
  font-size:12px;
}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-dot{
  width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
}
.legend-dot.maturity{background:var(--type-maturity)}
.legend-dot.call{background:var(--type-call)}
.legend-dot.put{background:var(--type-put)}

@media (max-width: 1640px){
  .page{padding:12px 14px 24px}
  .chart{height:60vh;min-height:380px}
}
@media (max-width: 1100px){
  .page{flex-direction:column;}
  .filters-panel{
    position:static;
    width:100%;
    max-width:100%;
    flex:1 1 auto;
    margin-top:10px;
  }
}
@media (max-width: 720px){
  .page{padding:10px 12px 22px}
  .toolbar{padding:10px}
  .header h1{font-size:17px}
  .actions{width:100%;justify-content:flex-start}
  .btn{flex:1}
  .filters-grid{grid-template-columns:1fr}
  .filters-actions{flex-direction:column}
  .filters-actions .btn{width:100%}
  .rating-toolbar{flex-direction:column;align-items:flex-start}
  .rating-table-wrap{max-height:180px}
  .rating-table th,.rating-table td{padding:4px}
  .rating-table .grade-cell{font-size:10.5px}
}