.planner-action, .planner-tab { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 14px; border:1px solid #263d42 !important; border-radius:12px; background:#17252a; color:#d6e6e1; font-size:12px; font-weight:700; cursor:pointer; transition:background .18s, border-color .18s, color .18s; }
    .planner-action:hover, .planner-tab:hover { background:#193b33; border-color:#287b62 !important; color:#fff; }
    .planner-action:focus-visible, .planner-tab:focus-visible, .planner-action--upload:focus-within { outline:2px solid #34d399; outline-offset:2px; }
    .planner-action .icon, .planner-tab .icon { width:16px; height:16px; flex:none; color:#6ee7b7; }
    .planner-action--gold { background:#312918; color:#fcd88b; border-color:#715a28 !important; }
    .planner-action--gold .icon { color:#fbbf24; }
    .planner-action--danger { background:#2d1e22; color:#fca5a5; border-color:#61343a !important; }
    .planner-action--danger .icon { color:#f87171; }
    .planner-action--upload { position:relative; overflow:hidden; }
    .planner-file-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
    .planner-summary { background:linear-gradient(110deg, #1b3834 0%, #1b3030 60%, #1b292b 100%); border-color:#37685c; box-shadow:inset 0 1px 0 rgba(167,243,208,.08), 0 8px 22px rgba(0,0,0,.16); }
    .planner-summary > div { border-color:#31564e; }
    .planner-summary > div > div { border-color:#263f3d; }
    .planner-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
    .planner-tab { min-width:0; min-height:44px; font-size:13px; background:#111f23; }
    .planner-tab[aria-pressed="true"] { background:#087d5d; border-color:#169e76 !important; color:#fff; }
    .planner-tab[aria-pressed="true"] .icon { color:#d1fae5; }
    .planner-tab__count { padding:2px 7px; border-radius:999px; background:rgba(0,0,0,.2); font-size:11px; font-variant-numeric:tabular-nums; }
    @media (max-width:420px) { .planner-tab { padding:0 5px; gap:4px; font-size:11px; } }

    /* Светлая тема для планировщика круток */
    html[data-theme="light"] .planner-action,
    html[data-theme="light"] .planner-tab {
      background: #ffffff;
      border-color: #cbd5e1 !important;
      color: #334155;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    html[data-theme="light"] .planner-action:hover,
    html[data-theme="light"] .planner-tab:hover {
      background: #f1f5f9;
      border-color: #10b981 !important;
      color: #059669;
    }
    html[data-theme="light"] .planner-action .icon,
    html[data-theme="light"] .planner-tab .icon {
      color: #059669;
    }
    html[data-theme="light"] .planner-tab[aria-pressed="true"] {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      border-color: #047857 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
    }
    html[data-theme="light"] .planner-tab[aria-pressed="true"] .icon {
      color: #ffffff !important;
    }
    html[data-theme="light"] .planner-tab__count {
      background: rgba(0, 0, 0, 0.16) !important;
      color: #ffffff !important;
    }
    html[data-theme="light"] .planner-action--gold {
      background: #fef3c7;
      color: #b45309;
      border-color: #fcd34d !important;
    }
    html[data-theme="light"] .planner-action--gold .icon {
      color: #d97706;
    }
    html[data-theme="light"] .planner-action--danger {
      background: #fee2e2;
      color: #b91c1c;
      border-color: #fca5a5 !important;
    }
    html[data-theme="light"] .planner-action--danger .icon {
      color: #dc2626;
    }
    html[data-theme="light"] .planner-summary {
      background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%, #f8fafc 100%) !important;
      border: 1px solid rgba(16, 185, 129, 0.35) !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.08) !important;
    }
    html[data-theme="light"] .planner-summary > div {
      border-color: rgba(16, 185, 129, 0.18) !important;
    }
    html[data-theme="light"] .planner-summary > div > div {
      border-color: rgba(16, 185, 129, 0.14) !important;
    }