:root {
    --bg: var(--tg-theme-bg-color, #09090b);
    --text: var(--tg-theme-text-color, #fafafa);
    --muted: var(--tg-theme-hint-color, #a1a1aa);
    --border: rgba(128,128,128,0.15);
    --card: var(--tg-theme-secondary-bg-color, rgba(255,255,255,0.05));
    --primary: #3b82f6;
    --destructive: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
    --tab-height: 64px;
    --radius: 16px;
  }
  @media (prefers-color-scheme: light) {
    body:not(.tg-themed) { --bg: #ffffff; --text: #111111; --card: rgba(0,0,0,0.02); --border: rgba(0,0,0,0.1); --muted: #555555; }
  }
  
  * { box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, sans-serif; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); padding-bottom: calc(var(--tab-height) + 20px); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
  
  /* Layout & Cards */
  .hero { padding: 20px 20px 10px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: var(--bg); z-index: 50; color: var(--text); }
  .hero-status { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
  .dot.red { background: var(--destructive); box-shadow: 0 0 8px var(--destructive); }
  .dot.yellow { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
  .dot.gray { background: var(--muted); box-shadow: none; opacity: 0.7; }
  .icon-btn { background: none; border: none; color: var(--text); cursor: pointer; padding: 6px; border-radius: 50%; transition: background 0.2s; }
  .icon-btn:active { background: var(--border); }
  
  .page { display: none; padding: 0 16px; animation: fadeIn 0.2s ease-out; }
  .page.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

  .card { 
    background: var(--card); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: var(--radius); 
    padding: 16px; 
    margin-bottom: 16px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
  }
  .card-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
  
  
  
  
  /* Buttons */
  .btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: rgba(128,128,128,0.1); color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: 10px; transition: transform 0.15s, background 0.15s; }
  .btn:active { transform: scale(0.98); background: rgba(128,128,128,0.2); }
  .btn-primary { background: var(--primary); color: white; border: none; }
  .btn-destructive { background: rgba(239,68,68,0.1); color: var(--destructive); border: 1px solid rgba(239,68,68,0.2); }
  .btn-small { width: auto; padding: 6px 12px; font-size: 12px; border-radius: 8px; margin: 0; }
  
  .btn-fill-bg { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--destructive); z-index: 0; transition: width linear; opacity: 0.5; }
  .btn-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; pointer-events: none; }
  
  /* Forms */
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .form-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .form-group input, .form-group select { width: 100%; padding: 10px 12px; background: rgba(128,128,128,0.05); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s; font-variant-numeric: tabular-nums; }
  .form-group input:focus, .form-group select:focus { border-color: var(--primary); }
  
  /* Segmented Control */
  .segmented { display: flex; background: rgba(128,128,128,0.1); border-radius: 12px; margin-bottom: 16px; padding: 4px; }
  .seg-btn { flex: 1; padding: 8px; text-align: center; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--muted); border-radius: 8px; transition: 0.2s; }
  .seg-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

  /* Metrics */
  .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .metric-item { padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(128,128,128,0.05); display: flex; flex-direction: column; gap: 8px; }
  .metric-header { display: flex; justify-content: space-between; align-items: baseline; }
  .metric-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
  .metric-val { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  .progress-bg { height: 6px; background: rgba(128,128,128,0.2); border-radius: 4px; overflow: hidden; }
  .progress-fill { height: 100%; background: var(--success); transition: width 0.5s ease, background-color 0.5s ease; }
  .sparkline { height: 24px; width: 100%; }

  /* Lists & Terminal */
  .list-wrapper { overflow: hidden; border-bottom: 1px solid var(--border); position: relative; }
  .list-wrapper:last-child { border-bottom: none; }
  
  .list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; background: var(--card); position: relative; z-index: 2; transition: transform 0.2s ease-out; }
  .item-title { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; color: var(--text); font-variant-numeric: tabular-nums; }
  .item-sub { font-size: 12px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
  
  .delete-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; background: var(--destructive); display: flex; justify-content: flex-end; align-items: center; padding-right: 16px; z-index: 1; color: white; border-radius: 8px; margin: 4px 0; }
  
  .terminal { background: #000; color: #10b981; font-family: monospace; font-size: 11px; padding: 12px; border-radius: 12px; overflow-x: auto; min-height: 100px; line-height: 1.5; white-space: pre-wrap; }

  /* Skeletons */
  .skeleton { background: rgba(128,128,128,0.1); border-radius: 8px; position: relative; overflow: hidden; height: 44px; margin-bottom: 8px; }
  .skeleton::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); animation: shimmer 1.5s infinite; transform: translateX(-100%); }
  @keyframes shimmer { 100% { transform: translateX(100%); } }

  /* Tab Bar */
  .tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--tab-height); background: var(--bg); border-top: 1px solid var(--border); display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 100; }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 500; gap: 4px; transition: color 0.2s; }
  .tab.active { color: var(--primary); }
  @media (max-width: 380px) { .tab span { display: none; } }
  

  /* Modal */
  .modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:999; display:none; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(4px); }
  .modal-overlay.active { display:flex; }
  .modal { background:var(--bg); border:1px solid var(--border); border-radius:16px; width:100%; max-width:500px; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.5); }
  .modal-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px; }
  .modal-body { padding:12px 14px; overflow-y:auto; flex:0 1 auto; font-family:inherit; font-size:12px; white-space:normal; background:var(--bg); color:var(--text); word-break:break-word; max-height:75vh; }
  .modal-body pre { font-family:monospace; font-size:11px; white-space:pre-wrap; word-break:break-all; margin:0; }
  .modal-close { background:none; border:none; color:var(--muted); cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center; border-radius:4px; }
  .modal-close:hover { background:var(--card-border); color:var(--text); }

  /* Pull to refresh */
  #ptr { height: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; color: var(--muted); font-size: 12px; transition: height 0.2s; }

/* === Compact mode for Crisis Operations === */
.card.compact-card {
    padding: 10px 12px;
    margin-bottom: 8px;
}
.card.compact-card .card-title {
    font-size: 11px;
    margin-bottom: 8px;
}
.card.compact-card .btn {
    padding: 9px 10px;
    font-size: 13px;
    margin-bottom: 6px;
}
.card.compact-card .btn:last-child {
    margin-bottom: 0;
}
.card.compact-card .btn-small {
    padding: 5px 10px;
}
.danger-hint {
    font-size: 10px;
    color: var(--muted);
    margin: 2px 0 8px 0;
    line-height: 1.3;
}




/* ============================================================
   FORCED AGENT COLORS — !important + direct child + 4px
   ============================================================ */
#agents-list > .list-item:nth-child(1) {
  border-left: 4px solid #3b82f6 !important;
  padding-left: 12px !important;
}
#agents-list > .list-item:nth-child(2) {
  border-left: 4px solid #ef4444 !important;
  padding-left: 12px !important;
}
#agents-list > .list-item:nth-child(3) {
  border-left: 4px solid #10b981 !important;
  padding-left: 12px !important;
}
#agents-list > .list-item:nth-child(4) {
  border-left: 4px solid #a78bfa !important;
  padding-left: 12px !important;
}


/* ============================================================
   FORCED DANGER GRID — Kill IDE і Reboot в один ряд
   ============================================================ */
.card.cleanup-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
.card.cleanup-grid > .card-title,
.card.cleanup-grid > .danger-hint {
    grid-column: 1 / -1 !important;
}
.card.cleanup-grid > .btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 80px !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
    margin: 0 !important;
    font-size: 13px !important;
    text-align: center !important;
    overflow: hidden !important;
    position: relative !important;
}
.card.cleanup-grid > .btn .btn-fill-bg {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    z-index: 0 !important;
}
.card.cleanup-grid > .btn .btn-content {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}
.card.cleanup-grid > .btn > i,
.card.cleanup-grid > .btn > svg {
    position: relative;
    z-index: 1;
}


/* ============================================================
   btn-pair — дві кнопки в один ряд (для Danger Zone)
   ============================================================ */
.btn-pair {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}
.btn-pair > .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 80px !important;
    font-size: 13px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn-pair > .btn > i,
.btn-pair > .btn > .btn-content {
    position: relative !important;
    z-index: 1 !important;
}
.btn-pair > .btn .btn-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}
.btn-pair > .btn .btn-fill-bg {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    z-index: 0 !important;
}


/* ---------- Version line in header ---------- */
.ver-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.ver-line .dot { width: 6px; height: 6px; box-shadow: none; }




/* ============================================================
   Morning Digest — красива, але неактивна (coming soon)
   ============================================================ */
.card.banner {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 14%, var(--card)),
        color-mix(in srgb, #a78bfa 10%, var(--card))) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 15%, transparent) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: default !important;
}
.card.banner::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--primary) 25%, transparent),
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.card.banner > * {
    position: relative;
    z-index: 1;
}
.card.banner .card-title {
    color: var(--primary) !important;
    font-weight: 650 !important;
    margin-bottom: 10px !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.card.banner .card-title::after {
    content: "· СКОРО";
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    background: var(--field);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
    letter-spacing: 0.3px;
}
.card.banner [style*="font-weight:600"] {
    color: var(--text) !important;
    font-weight: 650 !important;
}
.card.banner [style*="font-size:12px"] {
    color: var(--muted) !important;
}
.card.banner svg[data-lucide="coffee"] {
    color: var(--primary) !important;
    width: 26px !important;
    height: 26px !important;
}

/* ---------- Holdable button mobile fix ---------- */
.holdable {
    touch-action: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

/* ---------- Toast Notification System ---------- */
.toast-container {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: calc(100% - 32px);
    max-width: 420px;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(24, 24, 27, 0.96);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    animation: toastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: all 0.2s ease;
}
.toast.toast-success { border-color: rgba(16, 185, 129, 0.5); }
.toast.toast-success .toast-icon { color: var(--success); }
.toast.toast-error { border-color: rgba(239, 68, 68, 0.5); }
.toast.toast-error .toast-icon { color: var(--destructive); }
.toast.toast-warning { border-color: rgba(245, 158, 11, 0.5); }
.toast.toast-warning .toast-icon { color: var(--warning); }
.toast.toast-info { border-color: rgba(59, 130, 246, 0.5); }
.toast.toast-info .toast-icon { color: var(--primary); }
.toast.toast-out {
    animation: toastSlideOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-12px) scale(0.96); }
}