/* Global design tokens */
:root{
  --brand-primary:#3b82f6;
  --brand-indigo:#6366f1;
  --brand-secondary:#06b6d4;
  --brand-danger:#ef4444;
  --brand-info:#0ea5e9;
  --radius-lg:28px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-lg:0 20px 50px -12px rgba(2,6,23,.7),0 6px 18px -6px rgba(2,6,23,.55);
  --shadow-md:0 12px 36px -10px rgba(2,6,23,.55),0 4px 12px -4px rgba(2,6,23,.45);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
  --glass-blur: 10px;
}

body{margin:0;font-family:'Inter',Arial,sans-serif;min-height:100vh;color:var(--c-text,#e6eefc);background:linear-gradient(180deg,#071029 0%, #0b1430 50%, #0e1736 100%);
  --c-bg:#071029;--c-bg-alt:#081229;--c-bg-soft:#0f2140;--c-bg-soft2:#0b1a35;--c-border:#0d233e;--c-border-soft:#162a46;--c-text:#e6eefc;--c-text-soft:#9fb3d6;--c-text-strong:#ffffff;--c-accent:var(--brand-primary);--c-accent2:var(--brand-secondary);--c-danger:var(--brand-danger);--shadow-elev:var(--shadow-lg);--radius-panel:18px;transition:background .4s,color .3s}
body.light{--c-bg:#f1f5f9;--c-bg-alt:#ffffff;--c-bg-soft:#f1f5f9;--c-bg-soft2:#eef2f7;--c-border:#d9e2ec;--c-border-soft:#e2e8f0;--c-text:#0f1b2e;--c-text-soft:#5b616e;--c-text-strong:#0f1b2e;--c-accent:var(--brand-primary);--c-accent2:var(--brand-secondary);--c-danger:#dc2626;--c-bg-grad1:#ffffff;--c-bg-grad2:#eef3f8;color:var(--c-text);background:linear-gradient(135deg,var(--c-bg-grad1),var(--c-bg-grad2));}
body.light ::selection{background:#4f5dff33}
body.light .app-header{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-color:var(--c-border);box-shadow:0 4px 18px -6px rgba(15,23,42,.18)}
body.light .panel,body.light .dash-card,body.light .notif-rules,body.light .table-wrap,body.light .interval-history-table{background:var(--c-bg-alt);border-color:var(--c-border);box-shadow:0 12px 36px -10px rgba(15,23,42,.08),0 4px 12px -4px rgba(15,23,42,.06)}
body.light .panel:before,body.light .dash-card:before,body.light .notif-rules:before{background:radial-gradient(circle at 85% 20%,#4f5dff14,transparent 60%),radial-gradient(circle at 12% 85%,#0ea5e914,transparent 60%)}
body.light .panel-head h2,body.light .panel-head h3,body.light .dash-card h3,body.light .notif-rules-head h4{filter:drop-shadow(0 1px 1px #ffffff80)}
body.light .objects-table th,body.light .compact-table th{background:var(--c-bg-alt);color:var(--c-text-soft);border-bottom-color:var(--c-border)}
body.light .objects-table td,body.light .compact-table td{color:var(--c-text);border-bottom-color:var(--c-border-soft)}
body.light .objects-table tbody tr:hover,body.light .compact-table tbody tr:hover{background:var(--c-bg-soft)}
body.light .objects-table tbody tr.due{background:#ffecec}
body.light .objects-table tbody tr.near{background:#fff7e6}
body.light .badge.gray{background:#e2e8f0;color:#475569}
body.light .badge.green{background:#dcfce7;color:#065f46}
body.light .badge.red{background:#fee2e2;color:#b91c1c}
body.light .badge.orange{background:#fdecc7;color:#92400e}
body.light .mini-btn.outline,body.light .ghost-btn,body.light .user-tag,body.light .tpl-chip,body.light .mini-select,body.light .mini-input{background:var(--c-bg-soft);border-color:var(--c-border-soft);color:var(--c-text)}
body.light .ghost-btn:hover,body.light .user-tag:hover,body.light .tpl-chip:hover,body.light .mini-btn.outline:hover,body.light .mini-select:hover,body.light .mini-input:hover{background:#e3eaf2}
body.light .mini-btn.outline{color:var(--c-text);box-shadow:none}
body.light .mini-btn.outline:hover{filter:none}
body.light .mini-btn.compact,body.light .mini-btn:not(.outline){box-shadow:0 4px 14px -4px #4f5dff55,0 2px 6px -2px #0ea5e955}
body.light .empty{color:var(--c-text-soft)}
body.light .interval-history-table thead th{background:var(--c-bg-soft);border-bottom-color:var(--c-border)}
body.light .interval-history-table tbody tr:nth-child(even){background:var(--c-bg-soft2)}
body.light .interval-history-table tbody tr:hover{background:var(--c-bg-soft)}
body.light .interval-history-table td{border-bottom-color:var(--c-border-soft)}
body.light .suggest-box{background:#ffffff;border-color:var(--c-border-soft)}
body.light .suggest-box div{color:var(--c-text)}
body.light .suggest-box div:hover{background:#f1f5f9 !important;color:var(--c-text-strong)}
body.light #profile-modal .modal-content,body.light #notif-modal .modal-content,body.light #service-modal .modal-content,body.light #expense-modal .modal-content,body.light #interval-modal .modal-content,body.light #refill-modal .modal-content{background:var(--c-bg-alt);color:var(--c-text);border-color:var(--c-border)}
body.light .channel-extra .field input,body.light .channel-extra .field textarea{background:#fff;border:1px solid var(--c-border-soft);color:var(--c-text)}
body.light .tpl-chip{border-color:var(--c-border-soft)}
body.light .tpl-chip:active{background:#dde5ee}
body.light .mini-select:focus,body.light .mini-input:focus{box-shadow:0 0 0 2px #4f5dff40,0 2px 4px -2px #00000020 inset;border-color:#4f5dff}
body.light .table-wrap{border-color:var(--c-border)}
body.light .primary-btn{box-shadow:0 8px 24px -6px #4f5dff55,0 2px 4px -1px #0ea5e955}
body.light .primary-btn:hover{filter:brightness(1.05)}
body.light .theme-toggle{background:var(--c-bg-soft);color:var(--c-text)}
body.light .theme-toggle:hover{background:#e3eaf2}

/* Theme toggle button */
.theme-toggle{background:#1e293b;color:#e2e8f0;border:1px solid #334155;padding:10px 14px;border-radius:12px;cursor:pointer;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.25s;box-shadow:0 2px 4px -2px #00000080}
.theme-toggle:hover{background:#334155}
.theme-toggle:active{transform:translateY(1px)}
.hidden{display:none !important}

/* Auth */
/* Цветовое усиление для связи и статуса объектов */
.auth-container,.app{transition:opacity .55s cubic-bezier(.22,.9,.28,1),transform .6s cubic-bezier(.22,.9,.28,1),filter .6s;will-change:opacity,transform,filter}
.auth-container.fade-out{opacity:0;transform:translateY(-24px) scale(.96);filter:blur(8px)}
.app.pre-enter{opacity:0;transform:translateY(32px) scale(.96);filter:blur(6px)}
.app.enter{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.app.exit{opacity:0;transform:translateY(24px) scale(.96);filter:blur(8px);transition:opacity .55s cubic-bezier(.22,.9,.28,1),transform .6s cubic-bezier(.22,.9,.28,1),filter .6s}
@media (prefers-reduced-motion:reduce){.auth-container,.app{transition:none}.auth-container.fade-out{opacity:0}.app.pre-enter{opacity:0;transform:none;filter:none}.app.enter{opacity:1}}
.conn-badge.off { background:#1e293b; color:#64748b; border:1px solid #334155; }
.status-badge.in { background:#0f766e; }
.status-badge.active { background:#334155; }
.status-badge.in::before { content:'●'; margin-right:4px; color:#22d3ee; }
.status-badge.active::before { content:'●'; margin-right:4px; color:#94a3b8; }
/* Autocomplete suggestions */
.suggest-box { box-shadow:0 6px 18px -4px rgba(15,23,42,0.6),0 2px 4px -1px rgba(0,0,0,0.4); max-height:220px; overflow-y:auto; font-size:13px; }
.suggest-box div { color:#f1f5f9; }
.suggest-box div:hover { background:#1e293b !important; }
.suggest-box::-webkit-scrollbar { width:8px; }
.suggest-box::-webkit-scrollbar-track { background:#0f172a; }
.suggest-box::-webkit-scrollbar-thumb { background:#334155; border-radius:4px; }
.auth-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px}
.auth-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);padding:34px 36px 40px;border-radius:20px;width:100%;max-width:420px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.auth-animate{opacity:0;transform:translateY(18px) scale(.96);animation:authEnter .6s cubic-bezier(.22,.9,.28,1) .1s forwards}
@keyframes authEnter{0%{opacity:0;transform:translateY(24px) scale(.94);filter:blur(6px)}60%{opacity:1;transform:translateY(-4px) scale(1.01);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.auth-animate{animation:none;opacity:1;transform:none;filter:none}}
.auth-card .auth-theme-toggle{position:absolute;top:14px;right:14px;background:#0f172a;border:1px solid #334155;padding:8px 10px;border-radius:12px;font-size:16px;line-height:1;color:#e2e8f0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.25s}
.auth-card .auth-theme-toggle:hover{background:#1e293b}
body.light .auth-card{background:#ffffffee;border:1px solid #e2e8f0;box-shadow:0 20px 60px -18px rgba(15,23,42,.15),0 6px 20px -6px rgba(15,23,42,.12)}
body.light .auth-card:before{background:radial-gradient(circle at 20% 20%,#4f5dff26,transparent 60%),radial-gradient(circle at 85% 75%,#0ea5e926,transparent 55%)}
body.light .auth-card .auth-theme-toggle{background:#f1f5f9;border-color:#d9e2ec;color:#0f1b2e}
body.light .auth-card .auth-theme-toggle:hover{background:#e2e8f0}
.auth-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,#6366f180,transparent 60%),radial-gradient(circle at 85% 75%,#06b6d480,transparent 55%);pointer-events:none}
.auth-brand{text-align:center;position:relative;z-index:2}
.logo-circle{width:110px;height:110px;border-radius:32px;background:linear-gradient(135deg,#ffffff,#e2e8f0);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 8px 26px -8px #00000060,0 2px 6px -2px #00000050;position:relative;overflow:hidden;border:2px solid #cbd5e1}
.logo-circle.compact{background:transparent;border:none;box-shadow:none;width:100px;height:100px;margin:0 auto 16px;padding:0}
.logo-circle.compact img{width:100px;height:100px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.logo-circle:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#6366f11f,transparent 65%),radial-gradient(circle at 75% 70%,#06b6d41c,transparent 65%);pointer-events:none}
.logo-circle img{width:82px;height:82px;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));}
/* Лого анимация */
@keyframes logoPopFade {
  0% {transform:scale(.4) rotate(-12deg);opacity:0;filter:blur(6px) brightness(1.6);}
  60% {transform:scale(1.05) rotate(2deg);opacity:1;filter:blur(0) brightness(1.05);}
  100% {transform:scale(1) rotate(0);opacity:1;filter:blur(0) brightness(1);}
}
@keyframes logoPulseRing {
  0% {box-shadow:0 0 0 0 rgba(99,102,241,.55),0 0 0 0 rgba(6,182,212,.45);}
  70% {box-shadow:0 0 0 18px rgba(99,102,241,0),0 0 0 30px rgba(6,182,212,0);}
  100% {box-shadow:0 0 0 0 rgba(99,102,241,0),0 0 0 0 rgba(6,182,212,0);}
}
.logo-circle {animation:logoPulseRing 3.4s ease-out 1.2s infinite;}
.logo-anim {animation:logoPopFade .9s cubic-bezier(.65,.05,.36,1) .1s both;}
@media (prefers-reduced-motion:reduce){
  .logo-circle,.logo-anim{animation:none!important}
}
.auth-brand h1{margin:0;font-size:30px;background:linear-gradient(90deg,#6366f1,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;letter-spacing:.5px}
.subtitle{margin:4px 0 0;font-size:14px;color:#94a3b8;font-weight:500}
.tagline{margin:6px 0 0;font-size:12px;color:#64748b;font-weight:500;letter-spacing:.3px}
.login-form{display:flex;flex-direction:column;gap:16px;margin-top:28px;position:relative;z-index:2}
.login-form label{display:flex;flex-direction:column;font-size:13px;font-weight:500;color:#e2e8f0;gap:6px;text-align:center}
.login-form input{background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:14px 14px;border-radius:14px;font-size:15px;font-family:inherit;outline:none;transition:.2s;border-bottom:1px solid #334155}
.login-form input:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133}
body.light .login-form label{color:#334155}
body.light .login-form input{background:#ffffff;border:1px solid #d9e2ec;color:#0f1b2e;box-shadow:0 1px 2px rgba(0,0,0,.04)}
body.light .login-form input:focus{border-color:#4f5dff;box-shadow:0 0 0 2px #4f5dff33}
.primary-btn{background:linear-gradient(90deg,#6366f1,#06b6d4);border:0;color:#fff;padding:14px 20px;border-radius:14px;cursor:pointer;font-weight:600;font-size:15px;letter-spacing:.3px;box-shadow:0 8px 24px -6px #6366f1aa,0 2px 4px -1px #00000080;transition:.18s}
.primary-btn:hover{filter:brightness(1.07)}
.primary-btn:active{transform:translateY(1px)}
.full{width:100%}
.form-error{color:#fca5a5;font-size:13px;min-height:18px;margin-top:4px;font-weight:500}

/* App */
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:#0f172a;border-bottom:1px solid #1e293b;box-shadow:0 4px 16px -6px #00000080;position:sticky;top:0;z-index:10}
.app-tabs{display:flex;gap:6px;margin:0 28px;flex:1;max-width:520px}
.tab-btn{background:#1e293b;border:1px solid #334155;color:#cbd5e1;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.3px;transition:.18s;display:flex;align-items:center;gap:6px}
.tab-btn{line-height:1.1}
.tab-btn:hover span.emoji{transform:scale(1.12)}
.tab-btn span.emoji{transition:.25s}
.tab-btn:hover{background:#334155}
.tab-btn.active{background:linear-gradient(90deg,#6366f1,#06b6d4);border-color:#6366f1;color:#fff;box-shadow:0 4px 14px -4px #6366f1aa}
.tab-view{opacity:1;transform:translateY(0);transition:opacity .28s ease,transform .32s cubic-bezier(.22,.9,.28,1);will-change:opacity,transform}
.tab-view.hidden{display:block;opacity:0;pointer-events:none;transform:translateY(8px)}
/* Light theme tabs overrides */
body.light .tab-btn{background:var(--c-bg-soft);border:1px solid var(--c-border-soft);color:var(--c-text-soft)}
body.light .tab-btn:hover{background:#e3eaf2;color:var(--c-text)}
body.light .tab-btn.active{background:linear-gradient(90deg,#4f5dff,#0ea5e9);border-color:#4f5dff;color:#fff;box-shadow:0 4px 14px -4px #4f5dff66}

/* Dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:40px}
.dash-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid var(--glass-border);border-radius:18px;padding:18px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow-md);backdrop-filter:blur(var(--glass-blur));transition:transform .28s cubic-bezier(.22,.9,.28,1),box-shadow .28s}
.dash-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,var(--brand-indigo)12,transparent 60%),radial-gradient(circle at 12% 85%,#06b6d412,transparent 60%);pointer-events:none}
.dash-card:hover{transform:translateY(-6px);box-shadow:0 30px 80px -20px rgba(2,6,23,.66)}
.dash-card h3{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:.3px;font-family:'Manrope','Inter',sans-serif;display:flex;align-items:center;gap:10px;color:var(--c-text-soft);}
.dash-card h3 .ico{display:inline-flex;width:36px;height:36px;border-radius:12px;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-secondary));color:white;box-shadow:0 6px 18px -8px rgba(99,102,241,.5)}
.dash-card.wide{grid-column:span 2}
.big-num{font-size:38px;font-weight:800;background:linear-gradient(90deg,#6366f1,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:1px;font-family:'Manrope','Inter',sans-serif;line-height:1.05}
.stat-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--c-text-soft,#cbd5e1);font-weight:500;font-family:'Inter',sans-serif;transition:color .3s}
.stat-list li{display:flex;justify-content:space-between;align-items:center;gap:12px}
.stat-list li span.val{color:var(--c-text-strong,#ffffff);font-weight:700;font-family:'Manrope','Inter',sans-serif;font-size:13.5px;letter-spacing:.3px;transition:color .3s}
.stat-list li.negative span.val{color:#f87171}
.stat-list li.positive span.val{color:#34d399}
/* compact variant for dashboard fuel block */
.stat-list.compact{gap:4px;font-size:12px}
.stat-list.compact li{gap:8px}
.stat-list.compact li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%}
.stat-list.compact li span.val{font-size:13px;font-variant-numeric:tabular-nums}
.dash-card#stat-fuel .stat-list li{align-items:baseline}
/* Выровнять строки заправок в две колонки: текст слева, сумма справа */
.dash-card#stat-fuel #chart-fuel .stat-list.compact li{
  display:grid;
  grid-template-columns: 1fr minmax(90px,auto);
  column-gap:8px;
  align-items:baseline;
}
.dash-card#stat-fuel .stat-list li span.val{
  width:auto;min-width:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.dash-card#stat-fuel #chart-fuel .stat-list.compact li span:first-child{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none
}
.dash-card#stat-fuel #chart-fuel .stat-list.compact li span.val{max-width:none}
.dash-card#stat-fuel #stats-fuel-list li span.val{width:auto;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-chart{height:80px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--c-text-soft);transition:color .3s}
.mini-chart svg{width:100%;height:100%;display:block}
.mini-chart .spark{width:100%;height:40px}
/* Inline row action buttons (instead of floating ⋯ menu) */
.actions-cell{ display:flex; justify-content:flex-end; align-items:center; gap:8px; white-space:nowrap; }
.objects-table td.actions-cell{ white-space:nowrap; }
.mini-btn.tiny{ padding:6px 10px; font-size:12px; line-height:1; border-radius:8px; }
.mini-btn.tiny.outline{ padding:6px 10px; }
.mini-btn.tiny.danger{ padding:6px 10px; }
.actions-cell .mini-btn{ box-shadow:none; }
.actions-cell .mini-btn:hover{ filter:none; }
/* removed legacy mini-chart bar styling */
.dash-card .mini-chart:after{content:"";position:absolute;right:10px;bottom:10px;width:64px;height:28px;background:linear-gradient(180deg,rgba(59,130,246,.18),rgba(6,182,212,.08));filter:blur(10px);opacity:.35;border-radius:8px}
.app-logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#6366f1,#06b6d4);font-weight:700;font-size:18px;color:#fff;letter-spacing:.5px;margin-right:12px;box-shadow:0 4px 14px -4px #06b6d4aa}
.app-logo img{animation:logoPopFade .8s cubic-bezier(.65,.05,.36,1) .05s both}
.app-left{display:flex;align-items:center}
.app-title{font-size:21px;font-weight:700;letter-spacing:.6px;font-family:'Manrope','Inter',sans-serif;background:linear-gradient(90deg,var(--c-accent,#6366f1),var(--c-accent2,#06b6d4));-webkit-background-clip:text;background-clip:text;color:var(--c-accent,#6366f1);color:transparent}
.app-slogan{font-size:12px;font-weight:500;color:#94a3b8;margin-left:8px;letter-spacing:.4px;opacity:.9}
/* Light theme header title/slogan */
body.light .app-title{color:transparent}
body.light .app-slogan{color:var(--c-text-soft);opacity:.85}
.user-tag{background:#1e293b;color:#e2e8f0;padding:8px 14px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:.18s}
.user-tag:hover{background:#334155}
.ghost-btn{background:#1e293b;color:#e2e8f0;border:1px solid #334155;padding:10px 16px;border-radius:12px;font-weight:500;cursor:pointer;font-family:inherit;font-size:14px;transition:.18s}
.ghost-btn:hover{background:#334155}
.ghost-btn:active{transform:translateY(1px)}

.app-main{padding:40px 50px;max-width:1680px;margin:0 auto}
.layout{display:grid;grid-template-columns:260px 1fr;gap:24px;max-width:1680px;margin:0 auto;padding:24px 24px 40px}
.sidebar{position:sticky;top:76px;align-self:start;height:max-content;background:var(--c-bg,#0f172a);border:1px solid var(--c-border,#1e293b);border-radius:20px;padding:16px;box-shadow:0 12px 36px -10px #00000060,0 4px 12px -4px #00000040}
.sidebar .app-tabs{flex-direction:column;gap:8px;max-width:none;margin:0}
.sidebar .tab-btn{justify-content:flex-start;width:100%;padding:10px 12px;font-size:14px}
.sidebar .tab-btn.active{box-shadow:none}
.sidebar .tab-btn:not(.active){background:transparent}
.sidebar .tab-btn:hover{background:var(--c-bg-soft,#1e293b)}
.sidebar{position:sticky;top:76px;align-self:start;height:max-content;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid var(--glass-border);border-radius:18px;padding:12px;box-shadow:var(--shadow-md);backdrop-filter:blur(var(--glass-blur))}
.sidebar .app-tabs{flex-direction:column;gap:10px;max-width:none;margin:0}
.sidebar .tab-btn{justify-content:flex-start;width:100%;padding:12px 14px;font-size:14px;border-radius:12px;background:transparent;color:var(--c-text-soft);display:flex;align-items:center;gap:12px;border:1px solid transparent}
.sidebar .tab-btn .tab-ico{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:transparent}
.sidebar .tab-btn.active{background:linear-gradient(90deg,var(--brand-indigo),var(--brand-secondary));color:#fff;box-shadow:0 8px 26px -12px rgba(59,130,246,.35);transform:translateX(2px)}
.sidebar .tab-btn:not(.active):hover{background:rgba(255,255,255,0.02);color:var(--c-text-strong)}
@media (max-width:980px){
  .layout{grid-template-columns:1fr;padding:16px}
  .sidebar{position:static;order:2}
  .app-main{padding:16px}
}
.panel{background:#0f172a;border:1px solid #1e293b;border-radius:28px;padding:28px 30px 34px;box-shadow:0 16px 48px -12px #00000080,0 4px 16px -6px #00000040;position:relative;overflow:hidden}
.panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 15%,#6366f11f,transparent 55%),radial-gradient(circle at 8% 85%,#06b6d41a,transparent 55%);pointer-events:none}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:8px}
.panel-head h2{margin:0;font-size:25px;font-weight:700;letter-spacing:.6px;font-family:'Manrope','Inter',sans-serif;position:relative;background:linear-gradient(90deg,var(--c-accent,#6366f1),var(--c-accent2,#06b6d4));background-size:200% 100%;background-position:0 50%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .8s ease,filter .3s}
.panel-head h3{margin:0;font-size:20px;font-weight:700;letter-spacing:.6px;font-family:'Manrope','Inter',sans-serif;position:relative;background:linear-gradient(90deg,var(--c-accent,#6366f1),var(--c-accent2,#06b6d4));background-size:200% 100%;background-position:0 50%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .8s ease,filter .3s}
.panel-actions{display:flex;gap:12px}
.panel-head .panel-actions.wrap{flex-basis:100%;margin-top:4px;justify-content:flex-start}
.panel-actions.cost-filters{gap:8px;row-gap:10px;align-items:stretch}
.panel-actions.cost-filters .mini-select,.panel-actions.cost-filters .mini-input{min-width:130px;border-radius:14px;padding:9px 14px;font-size:12.5px}
.panel-actions.cost-filters button{border-radius:14px}
.panel-actions.cost-filters .mini-btn.primary{background:linear-gradient(90deg,#4f5dff,#0ea5e9);box-shadow:0 4px 14px -4px #4f5dff66,0 2px 6px -2px #0ea5e955}
.panel-actions.cost-filters .mini-btn.primary:hover{filter:brightness(1.07)}
.panel-actions.cost-filters .ghost-btn.subtle{background:rgba(255,255,255,0.04);border:1px dashed #334155;color:#94a3b8;padding:8px 16px;font-weight:600}
.panel-actions.cost-filters .ghost-btn.subtle:hover{background:#1e293b;color:#cbd5e1}
body.light .panel-actions.cost-filters .ghost-btn.subtle{background:var(--c-bg-soft);border-color:var(--c-border-soft);color:var(--c-text-soft)}
body.light .panel-actions.cost-filters .ghost-btn.subtle:hover{background:#e3eaf2;color:var(--c-text)}
@media (max-width:980px){
  .panel-actions.cost-filters{flex-direction:row;flex-wrap:wrap}
  .panel-actions.cost-filters .mini-select,.panel-actions.cost-filters .mini-input{flex:1 1 140px}
}

/* Panel head responsiveness: keep actions from overlapping titles */
@media (max-width:1100px){
  #tab-refills .panel-head, #tab-costs .panel-head{align-items:flex-start}
  #tab-refills .panel-head .panel-actions, #tab-costs .panel-head .panel-actions{flex-basis:100%;margin-top:6px}
}

.table-wrap{overflow-x:visible;overflow-y:auto;border:1px solid var(--glass-border);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.objects-table{width:100%;border-collapse:collapse;font-size:14px;min-width:780px;background:transparent}
.objects-table th{position:sticky;top:0;background:transparent;color:#94a3b8;font-weight:600;text-align:left;padding:14px 18px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--c-border-soft)}
.objects-table th .th-help{margin-left:4px;font-size:11px;opacity:.65;cursor:help;filter:grayscale(1)}
.objects-table th .th-help:hover{opacity:1;filter:none}
.objects-table td{padding:14px 18px;border-bottom:1px solid var(--c-border-soft);color:var(--c-text);font-weight:500}
.objects-table tbody tr{transition:background-color .22s,transform .18s}
.objects-table tbody tr:hover{background:linear-gradient(90deg, rgba(59,130,246,0.03), rgba(6,182,212,0.02));transform:translateY(-2px)}
.objects-table tbody tr:nth-child(even){background:transparent}
.objects-table tbody tr:nth-child(odd){background:rgba(255,255,255,0.01)}
.objects-table tbody tr:last-child td{border-bottom:0}
.objects-table tbody tr.due{box-shadow:inset 4px 0 0 #ef4444;background:#1f1214}
.objects-table tbody tr.near{box-shadow:inset 4px 0 0 #f59e0b;background:#1b160c}
.objects-table tbody tr.due:hover{background:#2a1719}
.objects-table tbody tr.near:hover{background:#241d10}
/* Light due/near adjustments */
body.light .objects-table tbody tr.due{background:#ffe5e5}
body.light .objects-table tbody tr.near{background:#fff1d9}
body.light .objects-table tbody tr.due:hover{background:#ffd6d6}
body.light .objects-table tbody tr.near:hover{background:#ffe7ba}
.badge.orange{background:#7c4a0b;color:#fbbf24}
.badge.red{background:#7f1d1d;color:#fca5a5}
/* numeric cell helper */
.objects-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ===== Refills table layout tuning ===== */
#tab-refills .objects-table{ table-layout:fixed; }
#tab-refills .objects-table th,
#tab-refills .objects-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Column widths: Объект | Дата | Водитель | Вид | Объем | Цена/л | Сумма | Место | Действия */
#tab-refills .objects-table th:nth-child(1),
#tab-refills .objects-table td:nth-child(1){ width:240px; }
#tab-refills .objects-table th:nth-child(2),
#tab-refills .objects-table td:nth-child(2){ width:120px; }
#tab-refills .objects-table th:nth-child(3),
#tab-refills .objects-table td:nth-child(3){ width:110px; }
#tab-refills .objects-table th:nth-child(4),
#tab-refills .objects-table td:nth-child(4){ width:80px; }
#tab-refills .objects-table th:nth-child(5),
#tab-refills .objects-table td:nth-child(5){ width:120px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-refills .objects-table th:nth-child(6),
#tab-refills .objects-table td:nth-child(6){ width:120px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-refills .objects-table th:nth-child(7),
#tab-refills .objects-table td:nth-child(7){ width:130px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-refills .objects-table th:nth-child(8),
#tab-refills .objects-table td:nth-child(8){ width:auto; }
#tab-refills .objects-table th:nth-child(9),
#tab-refills .objects-table td:nth-child(9){ width:120px; text-align:right; }
#tab-refills .objects-table td.actions-cell{ justify-content:flex-end; gap:8px; }

/* ===== Services table layout tuning ===== */
#tab-service .objects-table{ table-layout:fixed; }
#tab-service .objects-table th,
#tab-service .objects-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-service .objects-table th:nth-child(1),
#tab-service .objects-table td:nth-child(1){ width:220px; }
#tab-service .objects-table th:nth-child(2),
#tab-service .objects-table td:nth-child(2){ width:auto; }
#tab-service .objects-table th:nth-child(3),
#tab-service .objects-table td:nth-child(3){ width:200px; }
#tab-service .objects-table th:nth-child(4),
#tab-service .objects-table td:nth-child(4){ width:110px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-service .objects-table th:nth-child(5),
#tab-service .objects-table td:nth-child(5){ width:110px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-service .objects-table th:nth-child(6),
#tab-service .objects-table td:nth-child(6){ width:130px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-service .objects-table th:nth-child(7),
#tab-service .objects-table td:nth-child(7){ width:120px; }
#tab-service .objects-table th:nth-child(8),
#tab-service .objects-table td:nth-child(8){ width:120px; text-align:right; }
#tab-service .objects-table td.actions-cell{ justify-content:flex-end; gap:8px; }

/* ===== Expenses table layout tuning ===== */
#tab-expenses .objects-table{ table-layout:fixed; }
#tab-expenses .objects-table th,
#tab-expenses .objects-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-expenses .objects-table th:nth-child(1),
#tab-expenses .objects-table td:nth-child(1){ width:160px; }
#tab-expenses .objects-table th:nth-child(2),
#tab-expenses .objects-table td:nth-child(2){ width:340px; }
#tab-expenses .objects-table th:nth-child(3),
#tab-expenses .objects-table td:nth-child(3){ width:220px; }
#tab-expenses .objects-table th:nth-child(4),
#tab-expenses .objects-table td:nth-child(4){ width:150px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-expenses .objects-table th:nth-child(5),
#tab-expenses .objects-table td:nth-child(5){ width:140px; }
#tab-expenses .objects-table th:nth-child(6),
#tab-expenses .objects-table td:nth-child(6){ width:140px; text-align:right; }
#tab-expenses .objects-table td.actions-cell{ justify-content:flex-end; gap:8px; }

/* ===== Intervals table layout tuning ===== */
#tab-intervals .objects-table{ table-layout:fixed; }
#tab-intervals .objects-table th,
#tab-intervals .objects-table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-intervals .objects-table th:nth-child(1),
#tab-intervals .objects-table td:nth-child(1){ width:240px; }
#tab-intervals .objects-table th:nth-child(2),
#tab-intervals .objects-table td:nth-child(2){ width:140px; }
#tab-intervals .objects-table th:nth-child(3),
#tab-intervals .objects-table td:nth-child(3){ width:150px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-intervals .objects-table th:nth-child(4),
#tab-intervals .objects-table td:nth-child(4){ width:170px; text-align:right; font-variant-numeric:tabular-nums; }
#tab-intervals .objects-table th:nth-child(5),
#tab-intervals .objects-table td:nth-child(5){ width:280px; }
#tab-intervals .objects-table th:nth-child(6),
#tab-intervals .objects-table td:nth-child(6){ width:180px; text-align:right; }
#tab-intervals .objects-table td.actions-cell{ justify-content:flex-end; gap:8px; }

/* Compact variant for report tables */
.objects-table.compact th{font-size:11px;padding:10px 14px}
.objects-table.compact td{font-size:13px;padding:10px 14px}

/* Refills table sizing tweak */
#tab-refills .objects-table{font-size:15px}
#tab-refills .objects-table th{font-size:13px}
#tab-refills .objects-table td{padding:16px 18px}

/* Costs table sizing tweak */
#tab-costs .objects-table{font-size:15px}
#tab-costs .objects-table th{font-size:13px}
#tab-costs .objects-table td{padding:14px 18px}

.badge{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;letter-spacing:.4px}
.badge.green{background:#065f46;color:#6ee7b7}
.badge.gray{background:#334155;color:#cbd5e1}
tr.notif-row.selected{outline:2px solid var(--accent,#6366f1);background:rgba(99,102,241,0.12)}
body.light tr.notif-row.selected{background:rgba(99,102,241,0.18)}
.mini-btn{background:linear-gradient(90deg,#6366f1,#06b6d4);border:0;color:#fff;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px -4px #6366f1aa;transition:.18s}
.mini-btn:hover{filter:brightness(1.08)}
.mini-btn:active{transform:translateY(1px)}
.mini-btn.outline{background:#1e293b;color:#e2e8f0;box-shadow:none;border:1px solid #334155}
.mini-btn.outline:hover{background:#334155;filter:none}
.mini-btn.outline:active{transform:translateY(1px)}
.mini-btn.compact{padding:8px 14px;font-size:12px;line-height:1}
/* Danger button variants */
.mini-btn.danger{background:linear-gradient(90deg,#b91c1c,#dc2626);box-shadow:0 4px 14px -4px #dc262666}
.mini-btn.danger:hover{filter:brightness(1.07)}
.mini-btn.danger:active{transform:translateY(1px)}
.mini-btn.danger.outline{background:transparent;color:#fca5a5;border:1px solid #ef4444;box-shadow:none}
.mini-btn.danger.outline:hover{background:#7f1d1d;color:#fff}
body.light .mini-btn.danger{background:linear-gradient(90deg,#dc2626,#f97316);color:#fff;box-shadow:0 4px 14px -4px #dc262655}
body.light .mini-btn.danger:hover{filter:brightness(1.05)}
body.light .mini-btn.danger.outline{color:#b91c1c;border-color:#dc2626}
body.light .mini-btn.danger.outline:hover{background:#fee2e2;color:#b91c1c}
.profile-tabs{display:flex;gap:8px;margin:0 0 16px}
.profile-tabs [data-active]{filter:brightness(1.15);box-shadow:0 0 0 2px #6366f166}
.profile-view{animation:fadeProf .25s ease}
@keyframes fadeProf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Unified small filter controls (refills filters: object + date range) */
.mini-select,.mini-input{background:#1e293b;border:1px solid #334155;color:#e2e8f0;padding:10px 14px;border-radius:12px;font-size:13px;font-family:inherit;font-weight:500;letter-spacing:.2px;line-height:1.1;appearance:none;outline:none;transition:.18s;min-width:140px;box-shadow:0 2px 4px -2px #00000060 inset}
.mini-select:focus,.mini-input:focus{border-color:#6366f1;box-shadow:0 0 0 2px #6366f133,0 2px 4px -2px #00000060 inset}
.mini-input::-webkit-calendar-picker-indicator{filter:invert(.8);opacity:.8;cursor:pointer}
.panel-actions .mini-select,.panel-actions .mini-input{align-self:stretch;display:flex}
.panel-actions .mini-chk{align-self:stretch;display:inline-flex}
.mini-select:hover,.mini-input:hover{background:#253247}
.mini-select:disabled,.mini-input:disabled{opacity:.5;cursor:not-allowed}

/* Compact checkbox control to align with mini inputs/selects */
.mini-chk{display:inline-flex;align-items:center;gap:8px;background:#1e293b;border:1px solid #334155;color:#e2e8f0;padding:9px 12px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.1;user-select:none;cursor:pointer;transition:.18s}
.mini-chk input{appearance:auto;accent-color:#6366f1;width:16px;height:16px}
.mini-chk:hover{background:#253247}
body.light .mini-chk{background:var(--c-bg-soft);border-color:var(--c-border-soft);color:var(--c-text)}
body.light .mini-chk:hover{background:#e3eaf2}

@media (max-width:720px){
  .panel-actions{flex-wrap:wrap}
  .panel-actions .mini-select,.panel-actions .mini-input{flex:1 1 140px}
}

/* Fuel price input block */

.empty{padding:40px;text-align:center;color:#64748b;font-size:14px;font-weight:500}

/* Loading indicators */
.loading{display:flex;align-items:center;gap:10px;color:#94a3b8;font-weight:600;margin:8px 0}
.spinner{width:16px;height:16px;border:2px solid #94a3b844;border-top-color:#06b6d4;border-radius:50%;animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast notifications */
.toast-container{position:fixed;right:16px;bottom:16px;z-index:1100;display:flex;flex-direction:column;gap:10px}
.toast{background:#0f172a;color:#e2e8f0;border:1px solid #334155;padding:12px 14px;border-radius:12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;min-width:240px;max-width:380px;opacity:0;transform:translateY(8px);animation:toastIn .22s ease forwards}
.toast.success{border-color:#14532d;background:#052e2b;color:#ccfbf1}
.toast.info{border-color:#1e3a8a;background:#0b2746}
.toast .spinner{width:14px;height:14px;border-width:2px;border-top-color:#4f46e5}
@keyframes toastIn{to{opacity:1;transform:translateY(0)}}
.toast.out{animation:toastOut .2s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(8px)}}

/* Interval history table tweaks */
.interval-history-table{font-size:13px;background:#0f172a;border:1px solid #1e293b;border-radius:14px;overflow:hidden}
.interval-history-table thead th{background:#132338;border-bottom:1px solid #1e293b}
.interval-history-table td,.interval-history-table th{padding:10px 14px}
.interval-history-table tbody tr{background:#0f172a;transition:.15s}
.interval-history-table tbody tr:nth-child(even){background:#16263b}
.interval-history-table tbody tr:hover{background:#1e314b}
.interval-history-table td{border-bottom:1px solid #1e293b}
.interval-history-table tbody tr:last-child td{border-bottom:none}
.interval-history-table td:last-child{font-family:"JetBrains Mono",monospace;font-size:12px;color:#94a3b8;white-space:nowrap}

/* Scrollbar styling (webkit) */
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-track{background:#0f172a}
.table-wrap::-webkit-scrollbar-thumb{background:#334155;border-radius:20px}

/* Modal (Новый сервис) — осветлённая тема для лучшей читаемости */
.modal {position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;}
.modal.hidden {display:none;}
.modal-content {background:var(--c-bg-alt);color:var(--c-text);padding:24px 26px 22px;border-radius:20px;min-width:440px;max-width:760px;width:100%;box-shadow:0 24px 64px -16px rgba(0,0,0,.35),0 4px 16px -4px rgba(0,0,0,.25);position:relative;overflow:hidden;border:1px solid var(--c-border);}
.modal-content:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,#6366f11a,transparent 60%),radial-gradient(circle at 10% 85%,#06b6d41a,transparent 60%);pointer-events:none}
.modal-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}
.modal-head h3 {margin:0;font-size:18px;font-weight:700;letter-spacing:.2px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.close-modal {background:transparent;border:none;color:var(--c-text-soft);font-size:26px;cursor:pointer;line-height:1;padding:4px 6px;border-radius:8px;transition:.18s;}
.close-modal:hover {color:var(--c-text);background:var(--c-bg-soft);}
.service-form {max-height:70vh;overflow:auto;padding-right:4px;}
.service-form::-webkit-scrollbar{width:8px}
.service-form::-webkit-scrollbar-track{background:transparent}
.service-form::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.service-form label {display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:16px;font-weight:600;color:var(--c-text);letter-spacing:.3px;}
.service-form input, .service-form textarea, .service-form select {background:var(--c-bg-soft);border:1px solid var(--c-border);color:var(--c-text);padding:12px 14px;border-radius:14px;font:inherit;font-size:14px;box-shadow:0 1px 2px rgba(0,0,0,.06) inset;transition:.18s;}
.service-form input:focus, .service-form textarea:focus, .service-form select:focus {outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px #6366f133,0 1px 2px rgba(0,0,0,.08) inset;}
.service-form textarea {resize:vertical;min-height:90px;}
.two-cols {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;}
.actions-row {display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap;}
/* Кнопки внутри модалки (локальные вариации) */
.modal-content .primary-btn {background:linear-gradient(90deg,#6366f1,#06b6d4);border:none;color:#fff;padding:13px 22px;border-radius:14px;cursor:pointer;font-weight:600;font-size:14px;letter-spacing:.3px;box-shadow:0 10px 28px -10px #6366f1b0,0 4px 10px -4px rgba(0,0,0,.25);transition:.18s;}
.modal-content .primary-btn:hover {filter:brightness(1.07);}
.modal-content .primary-btn:active {transform:translateY(1px);}
.modal-content .ghost-btn {background:var(--c-bg-soft);border:1px solid var(--c-border);color:var(--c-text);padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;cursor:pointer;transition:.18s;}
.modal-content .ghost-btn:hover {background:#1e293b;}
.modal-content .ghost-btn:active {transform:translateY(1px);}
.modal-content .mini-btn {background:linear-gradient(90deg,#6366f1,#06b6d4);color:#fff;border:none;padding:8px 16px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px -6px #6366f199;}
.modal-content .mini-btn:hover {filter:brightness(1.08);}
.modal-content .mini-btn:active {transform:translateY(1px);}
.service-form ::placeholder{color:#94a3b8;font-weight:400}
.service-form select {cursor:pointer;}
.service-form small.desc {font-weight:500;color:#64748b;font-size:12px;line-height:1.3}
.service-form .field-inline {display:flex;gap:12px;align-items:center}
.service-form .field-inline > * {flex:1}
@media (max-width:640px){
  .modal-content{padding:20px 18px 18px;min-width:auto;border-radius:18px}
  .modal-head h3{font-size:20px}
  .two-cols{gap:14px}
}

/* Light theme overrides for modals */
body.light .modal-content{background:#ffffff;color:#0f172a;border-color:#e2e8f0}
body.light .service-form label{color:#334155}
body.light .service-form input, body.light .service-form textarea, body.light .service-form select{background:#ffffff;border:1px solid #cbd5e1;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.04)}
body.light .service-form input:focus, body.light .service-form textarea:focus, body.light .service-form select:focus{border-color:#4f5dff;box-shadow:0 0 0 2px #4f5dff33}
body.light .close-modal:hover{color:#0f172a;background:#e2e8f0}

/* Smooth profile modal animation */
#profile-modal{opacity:0;pointer-events:none;transition:opacity .28s ease;}
#profile-modal .modal-content{transform:scale(.96) translateY(12px);opacity:0;transition:transform .34s cubic-bezier(.22,.9,.28,1),opacity .3s ease;}
#profile-modal.open{opacity:1;pointer-events:auto;}
#profile-modal.open .modal-content{transform:scale(1) translateY(0);opacity:1;}
#profile-modal.closing{opacity:0;pointer-events:none;}
#profile-modal.closing .modal-content{transform:scale(.94) translateY(20px);opacity:0;transition:transform .28s ease,opacity .24s ease;}

/* Channel specific dynamic fields */
.channel-extra{margin:6px 0 14px;display:flex;flex-wrap:wrap;gap:18px}

/* Utility helpers added to centralize previous inline styles */
.app-logo img{width:32px;height:32px;object-fit:contain}
.panel-actions.wrap{flex-wrap:wrap;gap:6px;display:flex;align-items:center}
.panel-actions.wrap .mini-select.wide{min-width:160px}
.mt-sm{margin-top:12px}
.mb-xs{margin-bottom:6px}
.mb-sm{margin-bottom:12px}
.strong{font-weight:600}
.hstack{display:flex;align-items:center}
.gap-8{gap:8px}
.hidden{display:none}
.tall-select{height:120px}
.svc-percent{display:block;font-size:11px;color:#94a3b8;font-weight:500;margin-top:2px}
.empty-cell{text-align:center;color:#64748b}
.field.full{flex:1 1 100%}
.modal-center-text{ text-align:center;color:var(--muted,#94a3b8) }
.mt-xs{margin-top:8px}
.muted{color:#64748b;opacity:.9}

/* seg widths using css var */
.seg{height:8px;border-radius:4px;display:inline-block}
.seg.planned{background:var(--planned,#e2e8f0);width:var(--seg-w,0)}
.seg.current{background:var(--current,#60a5fa);width:var(--seg-w,0)}
.seg.done{background:var(--done,#10b981);width:var(--seg-w,0)}

/* Notification preview box styles */
.notif-test-body{white-space:pre-wrap;font-family:var(--mono,monospace);background:var(--c-bg-soft);padding:12px;border-radius:8px;max-height:320px;overflow:auto;color:var(--c-text)}
.channel-extra .field{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;min-width:200px}
.channel-extra .field input,.channel-extra .field textarea{background:#fff;border:1px solid #cbd5e1;color:#0f172a;padding:10px 12px;border-radius:12px;font:inherit;font-size:14px}

/* Modal dark / glass variant used across the app */
.modal {position:fixed;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.5));backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}
.modal.hidden{display:none}
.modal-content{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--c-text);padding:20px 22px;border-radius:14px;min-width:420px;max-width:900px;width:100%;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur))}
.modal-content:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,#6366f11a,transparent 60%),radial-gradient(circle at 10% 85%,#06b6d41a,transparent 60%);pointer-events:none}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-head h3{margin:0;font-size:18px;font-weight:700;letter-spacing:.2px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.close-modal{background:transparent;border:none;color:var(--c-text-soft);font-size:22px;cursor:pointer;line-height:1;padding:6px;border-radius:8px}
.close-modal:hover{color:var(--c-text)}

/* Modal sizes - use classes on .modal-content: modal-sm/modal-md/modal-lg/modal-xl */
.modal-sm{max-width:420px}
.modal-md{max-width:640px}
.modal-lg{max-width:900px}
.modal-xl{max-width:1100px}

/* Header actions: consistent placement of buttons at the right of modal header */
.modal-head .actions{display:flex;gap:8px;align-items:center}
.modal-head .actions .primary-btn{padding:10px 16px;border-radius:12px}
.modal-head .actions .ghost-btn{padding:8px 12px;border-radius:12px}

/* Compact modal header variant for tight spacing */
.modal-head.compact{margin-bottom:10px}
.modal-head.compact h3{font-size:16px}

/* Modal actions row (used inside modal body) */
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.modal-center-text{text-align:center;color:var(--c-text-soft)}

/* Sync status */
.sync-status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:transparent;color:var(--c-text-soft);border:1px solid transparent}
.sync-dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--brand-indigo),var(--brand-secondary));box-shadow:0 0 8px rgba(99,102,241,.6);display:inline-block;animation:syncPulse 2s infinite}
.sync-ts{font-size:13px;color:var(--c-text-soft)}
@keyframes syncPulse{0%{transform:scale(.9);opacity:.9}50%{transform:scale(1.12);opacity:1}100%{transform:scale(.9);opacity:.9}}

/* Skeletons */
.skeleton{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:8px;min-height:12px;animation:shimmer 1.6s linear infinite;background-size:400px 100%}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}

/* Empty illustration placeholder */
.empty.illustrated{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px}
.empty.illustrated svg{width:160px;height:120px;opacity:.85}

/* Accessibility focus outlines */
.tab-btn:focus,.mini-btn:focus,.ghost-btn:focus,.primary-btn:focus{outline:3px solid rgba(99,102,241,0.16);outline-offset:2px}

.channel-extra .field label{font-size:12px;font-weight:600;letter-spacing:.3px;color:#334155}

@media (max-width:900px){
  .app-main{padding:28px 24px}
  .panel{padding:24px 22px 30px;border-radius:24px}
  .panel-head h2{font-size:20px}
}

@media (max-width:640px){
  .auth-card{padding:34px 30px 40px;border-radius:24px}
  .app-main{padding:24px 18px}
  .panel{padding:22px 18px 28px;border-radius:22px}
  .objects-table{min-width:640px}
}

/* -------- Profile notifications (rules) -------- */
.notif-rules{background:#0f172a;border:1px solid #1e293b;border-radius:20px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.55),0 4px 10px -4px rgba(0,0,0,.4);position:relative;overflow:hidden}
.notif-rules:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,#6366f112,transparent 60%),radial-gradient(circle at 12% 85%,#06b6d412,transparent 60%);pointer-events:none}
.notif-rules-head{display:flex;align-items:center;justify-content:space-between}
.notif-rules-head h4{margin:0;font-size:15px;font-weight:600;letter-spacing:.4px;font-family:'Manrope','Inter',sans-serif;display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,var(--c-accent,#6366f1),var(--c-accent2,#06b6d4));background-size:200% 100%;background-position:0 50%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .8s ease,filter .3s}
/* Hover sweep */
.panel:hover .panel-head h2,.panel:hover .panel-head h3,.dash-card:hover h3,.notif-rules:hover .notif-rules-head h4{background-position:100% 50%}
/* Disable gradient effect inside dashboard overview */
#tab-dashboard .dash-card h3{background:none;background-image:none;color:var(--c-text-strong,#f1f5f9);-webkit-background-clip:initial;background-clip:initial;transition:color .3s}
#tab-dashboard .dash-card:hover h3{background:none;background-image:none;color:var(--c-text-strong,#f1f5f9)}
body.light #tab-dashboard .dash-card h3{color:var(--c-text-strong)}
/* Add icon bubble before titles using data-ico attribute */
.dash-card h3::before{content:attr(data-ico);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--brand-indigo),var(--brand-secondary));color:#fff;box-shadow:0 6px 16px -8px rgba(99,102,241,.6);margin-right:10px;font-size:16px}
.notif-rules-body{background:#0b1424;border:1px solid #1e293b;border-radius:14px;overflow:hidden;position:relative}
.compact-table{width:100%;border-collapse:collapse;font-size:13px;min-width:420px}
.compact-table thead{background:#132034}
.compact-table th{padding:10px 14px;font-size:11px;letter-spacing:.55px;text-transform:uppercase;font-weight:600;color:#94a3b8;text-align:left;border-bottom:1px solid #1e293b}
.compact-table td{padding:10px 14px;color:#e2e8f0;font-weight:500;border-bottom:1px solid #1e293b}
.compact-table tbody tr{transition:.15s}
.compact-table tbody tr:hover{background:#16263d}
.compact-table tbody tr:last-child td{border-bottom:0}
.compact-table td:last-child{text-align:right;width:56px}
.compact-table button.icon-btn{background:transparent;border:none;color:#64748b;cursor:pointer;padding:4px 6px;font-size:15px;line-height:1;border-radius:8px;transition:.18s}
.compact-table button.icon-btn:hover{color:#e2e8f0;background:#1e293b}
.notif-rules .empty{padding:18px;text-align:center;font-size:13px;color:#64748b;font-weight:500}

@media (max-width:640px){
  .notif-rules{padding:16px 16px;border-radius:18px}
  .notif-rules-body{border-radius:12px}
  .compact-table th,.compact-table td{padding:9px 10px}
}

/* Template hint chips */
.tpl-hints{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}
.tpl-chip{background:#1e293b;border:1px solid #334155;color:#e2e8f0;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:500;cursor:pointer;line-height:1;display:inline-flex;align-items:center;gap:4px;transition:.16s}
.tpl-chip:hover{background:#334155}
.tpl-chip:active{transform:translateY(1px)}