:root{
  --gap: 16px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(17,24,39,.12);
  --shadow-lg: 0 20px 60px rgba(17,24,39,.18);
  --chart-h: 280px;
}
@media (max-width: 900px){ :root{ --gap:14px; --chart-h: 240px; } }
@media (max-width: 560px){ :root{ --gap:12px; --chart-h: 200px; } }

:root[data-theme='light']{
  --bg:#f8fafc; --bg2:#ffffff; --card:#ffffff; --stroke:rgba(0,0,0,.08);
  --text:#1e293b; --muted:#64748b; --brand:#059669; --brand2:#10b981;
  --accent:#dc2626; --ok:#059669; --warn:#d97706; --ring:0 0 0 3px rgba(5,150,105,.15);
  --input-bg:#ffffff; --input-bg-hover:#f1f5f9; --menu-bg:#ffffff; --menu-text:#1e293b;
}
:root[data-theme='dark']{
  --bg:#0f172a; --bg2:#1e293b; --card:#334155; --stroke:rgba(255,255,255,.12);
  --text:#f1f5f9; --muted:#94a3b8; --brand:#10b981; --brand2:#34d399;
  --accent:#ef4444; --ok:#10b981; --warn:#f59e0b; --ring:0 0 0 3px rgba(16,185,129,.25);
  --input-bg:#475569; --input-bg-hover:#64748b; --menu-bg:#334155; --menu-text:#f1f5f9;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text);
  background:
    radial-gradient(1400px 700px at -20% -10%, rgba(67,97,238,.18), transparent),
    radial-gradient(900px 600px at 120% 10%, rgba(247,37,133,.12), transparent),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-size: 200% 200%, 180% 180%, auto;
  animation: bg-pan 24s ease-in-out infinite;
  min-height:100vh; transition: background .35s ease, color .2s ease;
}
@keyframes bg-pan{
  0%{ background-position: 0% 0%, 100% 0%, 0 0; }
  50%{ background-position: 100% 50%, 0% 50%, 0 0; }
  100%{ background-position: 0% 0%, 100% 0%, 0 0; }
}
@media (prefers-reduced-motion: reduce){ 
  body{ animation:none }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Оптимизация GPU для мобильных */
.chart-card, .modal, .btn, .card {
  will-change: transform;
  transform: translateZ(0);
}

/* Компактный режим */
.compact-mode {
  --gap: 8px;
  --radius: 12px;
  --shadow: 0 4px 15px rgba(17,24,39,.08);
}

.compact-mode .container {
  padding: 8px;
}

.compact-mode .chart-card {
  padding: 8px;
  margin-bottom: 8px;
}

.compact-mode .summary-card {
  padding: 8px;
}

.compact-mode .summary-title {
  font-size: 10px;
  margin-bottom: 4px;
}

.compact-mode .summary-num {
  font-size: clamp(16px,2.5vw,20px);
}

.compact-mode .btn {
  padding: 4px 8px;
  font-size: 11px;
  min-height: 28px;
}

.compact-mode .btn .icon {
  width: 12px;
  height: 12px;
}

.compact-mode .tabs-row {
  gap: 4px;
}

.compact-mode .tab {
  padding: 6px 10px;
  font-size: 12px;
}

.compact-mode header {
  padding: 8px 0;
  gap: 6px;
}

.compact-mode .header-actions {
  gap: 6px;
}

.compact-mode .search-wrap input {
  padding: 6px 10px;
  font-size: 12px;
}

/* Кнопка переключения компактного режима */
#compactToggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

#compactToggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

/* Оптимизация для мобильных устройств */
@media (max-width: 768px) {
  .container {
    padding: 8px;
  }
  
  header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .chart-card {
    margin-bottom: 12px;
  }
  
  #compactToggle {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}

.aurora{
  position:fixed; inset:-20% -10% -10% -10%; pointer-events:none; z-index:-2;
  filter: blur(60px) saturate(130%); opacity:.4;
  background:
    radial-gradient(35% 35% at 20% 20%, rgba(122,162,255,.25), transparent 60%),
    radial-gradient(35% 35% at 80% 30%, rgba(255,163,236,.22), transparent 60%),
    radial-gradient(30% 30% at 50% 80%, rgba(127,240,249,.25), transparent 60%);
  animation: auroraMove 26s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:.35; }
  50%{ transform:translate3d(0,-2%,0) rotate(7deg); opacity:.5; }
  100%{ transform:translate3d(-2%,1%,0) rotate(-4deg); opacity:.4; }
}

.container{max-width:1200px; margin:0 auto; padding: clamp(12px, 2.2vw, 24px)}

.blob{position:fixed; filter:blur(60px); opacity:.45; z-index:-1; mix-blend-mode:plus-lighter; animation:float 18s ease-in-out infinite}
.blob.one{width:360px; height:360px; left:-120px; top:-80px; background:#7ff0ff22;}
.blob.two{width:380px; height:380px; right:-140px; top:-60px; background:#f86aa422; animation-delay:-6s}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(20px)}}

/* ===== ХЕДЕР — НЕ липкий ===== */
header{
  position: relative;
  top: auto;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke); border-radius: clamp(10px,1.8vw,14px);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px clamp(10px,1.6vw,14px); margin-bottom:var(--gap); z-index:10;
}
.title-wrap{display:none}
h1{margin:0; font-weight:800; letter-spacing:-.3px; font-size: clamp(18px, 2.5vw, 28px)}
.title-edit{display:none}

.header-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.auth-status{font-weight:800; color:var(--muted); font-size: clamp(12px, 1.6vw, 14px)}

/* ===== ЕДИНАЯ СИСТЕМА КНОПОК ===== */
.btn{
  position:relative; overflow:hidden; padding:10px 16px; border-radius:12px; border:1px solid var(--stroke);
  background:var(--card); color:var(--text); cursor:pointer; font-weight:600; font-size: clamp(13px, 1.8vw, 15px);
  box-shadow:var(--shadow); transition:all .2s ease; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; user-select:none; white-space:nowrap; min-height:40px;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); background:var(--input-bg-hover)}
.btn:focus{outline:none; box-shadow:var(--shadow), var(--ring)}
.btn:active{transform:translateY(0); transition:transform .1s ease}

/* Типы кнопок */
.btn-primary{
  background:var(--brand); 
  color:#ffffff; border:1px solid transparent; font-weight:700;
  box-shadow:0 4px 14px rgba(5,150,105,.25);
}
.btn-primary:hover{
  background:var(--brand2); 
  box-shadow:0 6px 20px rgba(5,150,105,.35);
  transform:translateY(-2px);
}

.btn-danger{
  background:var(--accent); color:#ffffff; border:1px solid transparent; font-weight:700;
  box-shadow:0 4px 14px rgba(220,38,38,.25);
}
.btn-danger:hover{
  background:#b91c1c; 
  box-shadow:0 6px 20px rgba(220,38,38,.35);
  transform:translateY(-2px);
}

.btn-success{
  background:var(--ok); color:#ffffff; border:1px solid transparent; font-weight:700;
  box-shadow:0 4px 14px rgba(5,150,105,.25);
}
.btn-success:hover{
  background:var(--brand2); 
  box-shadow:0 6px 20px rgba(5,150,105,.35);
  transform:translateY(-2px);
}

.btn-warning{
  background:var(--warn); color:#ffffff; border:1px solid transparent; font-weight:700;
  box-shadow:0 4px 14px rgba(217,119,6,.25);
}
.btn-warning:hover{
  background:#b45309; 
  box-shadow:0 6px 20px rgba(217,119,6,.35);
  transform:translateY(-2px);
}

.btn-ghost{
  background:transparent; border:1px solid var(--stroke); font-weight:600;
}
.btn-ghost:hover{background:var(--input-bg-hover)}

.btn-sm{
  padding:6px 12px; font-size: clamp(11px, 1.6vw, 13px); min-height:32px;
}

.btn-lg{
  padding:14px 20px; font-size: clamp(15px, 2vw, 17px); min-height:48px;
}

/* Иконки в кнопках */
.btn-icon{
  width:16px; height:16px; flex-shrink:0; opacity:0.8;
}
.btn-sm .btn-icon{width:14px; height:14px}
.btn-lg .btn-icon{width:18px; height:18px}

/* Эффект ripple */
.btn::after{content:""; position:absolute; inset:0; background:radial-gradient(140px 140px at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.45), transparent 60%); opacity:0; transition:opacity .6s ease}
.btn.rippling::after{opacity:.8; transition:none}
.btn:disabled{opacity:.5; pointer-events:none; cursor:not-allowed}

/* ===== СИСТЕМА ИКОНОК ===== */
.icon{
  display:inline-block; width:16px; height:16px; flex-shrink:0;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:0.8; transition:opacity .2s ease;
}
.icon:hover{opacity:1}

/* SVG иконки */
.icon-refresh{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E")}
.icon-theme{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'/%3E%3C/svg%3E")}
.icon-help{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E")}
.icon-logout{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'/%3E%3C/svg%3E")}
.icon-add{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4v16m8-8H4'/%3E%3C/svg%3E")}
.icon-edit{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'/%3E%3C/svg%3E")}
.icon-delete{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'/%3E%3C/svg%3E")}
.icon-duplicate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z'/%3E%3C/svg%3E")}
.icon-save{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4'/%3E%3C/svg%3E")}
.icon-expenses{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1'/%3E%3C/svg%3E")}
.icon-compact{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z'/%3E%3C/svg%3E")}
.icon-close{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E")}
.icon-settings{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E")}

.search-wrap{min-width:200px; flex:1 1 260px; max-width:360px}
.search-wrap input{ width:100%; }

/* табы-плашки */
.tabs-row{
  display:flex; gap:8px; margin: 2px 0 var(--gap);
}
.tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1px solid var(--stroke); background:var(--card);
  font-weight:800; color:var(--text); text-decoration:none;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .22s ease, background .2s ease;
}
.tab:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.tab.active{ background: var(--brand); color:#ffffff; border: none; }

.portfolio-charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap); margin: 0 0 var(--gap)}
.chart-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease
}
.chart-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}

.portfolio-summary{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--gap); margin-bottom:var(--gap);}
.summary-card{position:relative; overflow:hidden; border:1px solid var(--stroke); border-radius:var(--radius); padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow:var(--shadow)}
.summary-title{font-size: clamp(11px,1.6vw,12px); color:var(--muted); text-transform:uppercase; letter-spacing:.25px; margin-bottom:6px}
.summary-num{font-size: clamp(20px,3vw,26px); font-weight:800}

/* Стили для плашки доходности */
.profit-positive {
  border-color: var(--ok) !important;
  background: linear-gradient(180deg, rgba(6,214,160,.1), rgba(6,214,160,.02)) !important;
}

.profit-negative {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, rgba(247,37,133,.1), rgba(247,37,133,.02)) !important;
}

.profit-positive .summary-num {
  color: var(--ok) !important;
}

.profit-negative .summary-num {
  color: var(--accent) !important;
}

.profit-percent {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.8;
}

.profit-positive .profit-percent {
  color: var(--ok);
}

.profit-negative .profit-percent {
  color: var(--accent);
}

.title-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 8px; }
@media (max-width:560px){
  .title-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .title-row .btn{ width:100%; }
}

.section{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:calc(var(--radius) + 2px); padding:14px; box-shadow:var(--shadow); margin-bottom:var(--gap)}
.section-header{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.section-toggle{
  display:flex; align-items:center; gap:8px; cursor:pointer; background:transparent; border:none; padding:6px 8px; border-radius:10px;
  font-size: clamp(16px, 2.4vw, 22px); font-weight:800; color:var(--text);
}
.section-toggle:hover{ background:rgba(255,255,255,.05) }
.chev{ display:inline-block; transition: transform .2s ease }
.section.open .chev{ transform: rotate(90deg) }
.section-meta{font-weight:800;color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.meta-badge{border:1px solid var(--stroke); border-radius:999px; padding:4px 8px; font-size:12px; background:rgba(255,255,255,.04) }

/* *** СЕКЦИЯ: быстрый аккордеон *** */
.section-body{
  overflow:hidden;
  display:block;
  height:0; opacity:0;
  content-visibility:auto;
  contain-intrinsic-size: 1px 600px;
  will-change: height, opacity;
}
.section.open .section-body{ height:auto; opacity:1 }

/* список позиций */
.assets-list{display:grid; grid-template-columns:1fr; gap:12px}
.asset-card{border:1px dashed var(--stroke); border-radius:14px; padding:12px; background:rgba(255,255,255,.06); transition:transform .15s ease, box-shadow .15s ease}
.asset-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.asset-header{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.asset-name{font-weight:800; font-size: clamp(14px, 2vw, 16px)}
.asset-actions{display:flex; gap:8px; flex-wrap:wrap}
.asset-actions .btn{padding:6px 10px; border-radius:10px}

.asset-details{
  color:var(--muted); font-size: clamp(12px,1.7vw,13px); margin-top:6px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px
}
@media (max-width: 900px){ .asset-details{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px){ .asset-details{ grid-template-columns:1fr; } }

/* формы */
select, input:not([type="checkbox"]):not([type="radio"]){
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:var(--input-bg);
  border:1px solid var(--stroke); color:var(--text); border-radius:12px; padding:12px 40px 12px 12px; font-weight:700;
  width:100%; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; font-size: clamp(14px,2.2vw,16px)
}
select:hover, input:not([type="checkbox"]):not([type="radio"]):hover{ background:var(--input-bg-hover); }
input{ padding-right:12px }
input::placeholder{ color:var(--muted); opacity:.9 }
.select-wrap{position:relative}
.select-wrap::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); font-weight:800; }
select option, select optgroup{ background-color:var(--menu-bg); color:var(--menu-text); }
input:focus, select:focus{ outline:none; box-shadow:var(--ring); border-color:transparent }
select::-ms-expand { display:none; }

/* Аккуратные чекбоксы */
input[type="checkbox"]{
  width:16px; height:16px; margin:0;
  accent-color: var(--brand);
  cursor:pointer;
  background:transparent; border:none; padding:0;
}
.checkbox-row{ display:flex; gap:10px; align-items:center; font-weight:700; color:var(--text); }
.checkbox-row *{ pointer-events:auto; }

.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.form-group{display:flex; flex-direction:column; gap:6px}
label{font-size: clamp(11px,1.6vw,12px); color:var(--muted); font-weight:700}

/* график внутри карточки: НЕ РЕНДЕРИМ, пока закрыто */
.chart-container{ display:none; border:1px solid var(--stroke); border-radius:12px; padding:8px; margin-top:10px; }
.chart-container.open{ display:block; }
.chart-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0}
.chart-tab{padding:6px 10px; border-radius:999px; background:rgba(5,150,105,.1); font-weight:800; cursor:pointer; user-select:none; font-size: clamp(12px,1.7vw,13px)}
.chart-tab.active{background:var(--brand); color:#ffffff}

/* canvas: высота только когда график открыт */
.chart-container canvas{ width:100% !important; height:0 !important; }
.chart-container.open canvas{ height:var(--chart-h) !important; }

.pnl-big{font-size: clamp(15px,2.2vw,18px); font-weight:900}

.flatpickr-calendar{font-family:Inter,system-ui; background:var(--card); border:1px solid var(--stroke); box-shadow:var(--shadow-lg)}
.flatpickr-months, .flatpickr-weekdays{background:rgba(255,255,255,.04); color:var(--text)}
.flatpickr-day{border-radius:10px}
.flatpickr-day.today{border-color:var(--brand)}
.flatpickr-day.selected{background:var(--brand); color:#ffffff; border-color:transparent}

mark{ background:rgba(16,185,129,.6); color:#ffffff; border-radius:4px; padding:0 .15em }

@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
.animate-in{animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both}

.skeleton{position:relative; overflow:hidden; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08)); background-size:200% 100%; animation:shine 1.2s linear infinite}
@keyframes shine{0%{background-position:200% 0} 100%{background-position:-200% 0}}

.toast-wrap{position:fixed; bottom:12px; right:12px; display:flex; flex-direction:column; gap:10px; z-index:2000}
.toast{min-width:220px; max-width:320px; padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--stroke); box-shadow:var(--shadow); display:flex; gap:8px; align-items:flex-start; animation:slideIn .25s ease both}
.toast.ok{border-left:4px solid var(--ok)} .toast.err{border-left:4px solid var(--accent)}
@keyframes slideIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

.zone-title{ margin:6px 0 8px; font-weight:800; font-size:12px; letter-spacing:.24px; color:var(--muted); text-transform:uppercase; }

/* секции-аккордеоны — чуть ярче */
.section{ background: linear-gradient(180deg, rgba(127,240,249,.08), rgba(67,97,238,.05)); border-radius: calc(var(--radius) + 2px); }
.section-header{ background: rgba(255,255,255,.04); border: 1px dashed var(--stroke); padding:10px 12px; border-radius:12px; }
.section.open .section-header{ border-style: solid; }
.section-header .chev{ transform-origin:center; width:1em; height:1em; font-weight:900; }

.portfolio-summary{ margin-bottom: calc(var(--gap) + 6px); }
.section + .section{ margin-top: calc(var(--gap) - 6px); }

/* FAB */
.fab{
  position:fixed; right:16px; bottom:16px; width:54px; height:54px; border-radius:999px;
  display:none; align-items:center; justify-content:center; font-weight:900; font-size:24px;
  background:var(--brand); color:#ffffff; border:none; box-shadow:var(--shadow-lg); z-index:3200;
}
@media (max-width:560px){ .fab{ display:flex; } }

/* MODALS */
.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.50); z-index:3000; padding:16px;
}
.modal--open{ display:flex; }
.modal__dialog{
  width:min(720px, 94vw); max-width:94vw; background:var(--card); border:1px solid var(--stroke);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:16px;
  max-height:92vh; overflow:auto;
}
.modal__header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.modal__close{ 
  border:1px solid var(--stroke); 
  background:var(--input-bg); 
  border-radius:10px; 
  padding:8px; 
  cursor:pointer; 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  transition:all 0.2s ease;
}
.modal__close:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#ffffff;
  transform:scale(1.05);
}
.modal__close .icon{
  width:16px;
  height:16px;
}
.modal__footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.readonly-box{ padding:12px; border:1px dashed var(--stroke); border-radius:12px; background:rgba(255,255,255,.04); }
.readonly-box ol{ margin:0 0 8px; padding-left:18px; }

/* зебра карточек */
:root[data-theme='light']{ --zebra-1: rgba(0,0,0,.028); --zebra-2: rgba(67,97,238,.06); }
:root[data-theme='dark']{ --zebra-1: rgba(255,255,255,.04); --zebra-2: rgba(127,240,249,.07); }
.assets-list > .asset-card{ background: var(--zebra-1); border:1px dashed var(--stroke); }
.assets-list > .asset-card:nth-child(even){ background: var(--zebra-2); }
.assets-list > .asset-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.assets-list .asset-card .asset-header{ border-bottom: 1px dashed var(--stroke); padding-bottom: 8px; margin-bottom: 8px; }

/* ===== Telegram WebApp адаптация (без липкости) ===== */
:root { --tg-topbar: 56px; }
html.tg-app body{ padding-top: 0; }
html.tg-app header{ position: relative !important; top: auto !important; margin-top: 0; z-index: 10; }
.toast-wrap{ bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right:  calc(12px + env(safe-area-inset-right, 0px)); }
body, button, .btn, input, select, canvas{ -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.tg-app .container{ padding-top: clamp(8px, 2vw, 16px); }

/* ===== Хедер: флекс/адаптив ===== */
header{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.header-actions{ flex:1 1 auto; min-width:220px; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.search-wrap{ order:0; flex:1 1 260px; max-width:480px; }

/* табы: горизонтальная прокрутка */
.tabs-row{ display:flex; gap:10px; overflow:auto; -webkit-overflow-scrolling:touch; padding:6px 0; }
.tabs-row .pill{ white-space:nowrap; padding:10px 14px; border-radius:999px; border:1px solid var(--stroke); background:var(--card); font-weight:800; user-select:none; }
.tabs-row .pill.active{ background:var(--brand); color:#ffffff; border:none; }

/* карточки-графики и секции — чуть меньше отступов на мобилках */
@media (max-width: 760px){
  .portfolio-charts{ gap:12px; }
  .chart-card{ padding:10px; }
  .section{ padding:12px; }
  .asset-actions .btn{ padding:6px 9px; }
}

/* ===== НУЛЕВОЕ СОСТОЯНИЕ + УТИЛИТЫ ===== */
.hidden{ display:none !important; }
.muted{ color: var(--muted); }
.empty-state{ border:1px dashed var(--stroke); border-radius: var(--radius); padding: 16px; background: rgba(255,255,255,.04); margin-bottom: var(--gap); }
.empty-card h3{ margin:0 0 6px; }
.empty-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.kbd{ display:inline-block; padding:2px 6px; border:1px solid var(--stroke); border-radius:8px; background:rgba(255,255,255,.06); font-weight:800; font-size:12px; }
.help-list{ margin:0; padding-left:18px; }
.help-list li{ margin:6px 0; }
.legend-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; }
.legend-dot.ok{ background:var(--ok); }
.legend-dot.off{ background:#888; }

/* ===== PERF MODE ===== */
html.no-fx body{ animation: none !important; }
html.no-fx .aurora, html.no-fx .blob{ display: none !important; }
html.no-fx header{ backdrop-filter: none !important; }
html.no-fx .chart-card, html.no-fx .section, html.no-fx .btn{ box-shadow: none !important; }
html.no-fx .skeleton{ animation: none !important; }
html.no-fx *{ transition: none !important; }

/* ===== FIX: стабильная высота графиков ===== */

/* столбиковые в карточках — фикс высота */
.chart-card canvas{
  width:100% !important;
  height:var(--chart-h) !important;
  display:block;
}

/* донат — квадратный, без «яйца» */
#chartByClass{
  width:100% !important;
  height:auto !important;
  max-height: var(--chart-h);
  aspect-ratio: 1 / 1;
  display:block;
}

/* графики внутри позиций (аккордеон): рендер только когда открыт */
.chart-container{
  display:none;
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:8px;
  margin-top:10px;
}
.chart-container.open{ display:block; }
.chart-container canvas{
  width:100% !important;
  height:0 !important;
  display:block;
}
.chart-container.open canvas{
  height:var(--chart-h) !important;
}