.acc-layout { display:grid; grid-template-columns:1fr 240px; gap:var(--space-5); align-items:start; }
@media(max-width:768px) { .acc-layout { grid-template-columns:1fr; } }
.acc-sidebar { position:sticky; top:80px; }
.sess-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.sess-title { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-md); font-weight:var(--font-bold); margin-bottom:var(--space-1); }
.sess-desc { font-size:var(--text-xs); color:var(--text-secondary); line-height:1.7; max-width:56ch; }
.sess-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.sess-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius-md); }
.sess-row.is-current { border-inline-start:3px solid var(--accent); }
.sess-icon { display:inline-flex; flex-shrink:0; font-size:20px; color:var(--text-muted); }
.sess-main { flex:1; min-width:0; }
.sess-device { font-size:var(--text-sm); font-weight:var(--font-medium); overflow-wrap:anywhere; }
.sess-meta { display:flex; flex-wrap:wrap; gap:var(--space-3); font-size:var(--text-xs); color:var(--text-muted); }
.sess-badge { flex-shrink:0; }
.sess-badge-out { background:var(--bg-chip); color:var(--text-secondary); }
.sess-note { display:flex; align-items:flex-start; gap:var(--space-2); margin-bottom:var(--space-3); padding:var(--space-3) var(--space-4); font-size:var(--text-xs); line-height:1.7; color:var(--text-secondary); background:var(--bg-chip); border-radius:var(--radius-md); }
.sess-note .sb-icon { flex-shrink:0; margin-top:3px; color:var(--text-muted); }
.sess-empty { padding:var(--space-4); text-align:center; font-size:var(--text-sm); color:var(--text-muted); border:1px dashed var(--border-soft); border-radius:var(--radius-md); }
.acc-nav-item { display:flex; align-items:center; gap:var(--space-3); padding:8px var(--space-3); border-radius:var(--radius-md); font-size:var(--text-sm); font-weight:var(--font-medium); color:var(--text-secondary); text-decoration:none; transition: var(--tr-ui-fast); margin-bottom:2px; border:1px solid transparent; }
.acc-nav-item:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.acc-nav-item.active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
[data-theme="light"] .acc-nav-item.active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
.acc-nav-icon { width:30px; height:30px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.acc-sidebar .acc-profile { text-align:center; margin-bottom:var(--space-3); }
.acc-avatar { width:52px; height:52px; border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:var(--font-extrabold); color:#fff; margin:0 auto var(--space-3);
  background:var(--grad-brand); box-shadow:0 4px 14px color-mix(in srgb, var(--brand-a) 28%, transparent); }
.acc-name { font-size:var(--text-sm); font-weight:var(--font-bold); margin-bottom:2px; }
.acc-email { font-size:var(--text-xs); color:var(--text-muted); overflow-wrap:anywhere; }
.acc-sidebar .acc-sec-card { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-xl); text-decoration:none; color:inherit; transition:all .15s ease; margin-bottom:var(--space-3);
  background:color-mix(in srgb, var(--tone-purple) 8%, transparent); border:1px solid color-mix(in srgb, var(--tone-purple) 22%, transparent); }
.acc-sidebar .acc-sec-card:hover { background:color-mix(in srgb, var(--tone-purple) 14%, transparent); }
.acc-sec-icon { width:40px; height:40px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; background:color-mix(in srgb, var(--tone-purple) 18%, transparent); }
.acc-sec-body { flex:1; min-width:0; }
.acc-sec-title { font-size:var(--text-sm); font-weight:var(--font-bold); color:var(--text-primary); margin-bottom:2px; }
.acc-sec-desc { font-size:var(--text-xs); color:var(--text-muted); }
.acc-sec-arrow { font-size:14px; color:color-mix(in srgb, var(--tone-purple) 60%, transparent); }
.acc-sidebar .acc-nav-card { padding:var(--space-2); margin-bottom:var(--space-3); }
.acc-nav-head { font-size:var(--text-xs); font-weight:var(--font-bold); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; padding:var(--space-1) var(--space-3) var(--space-2); }

.field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.field-input,
.ssl-extra-input :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  width: 100%;
  padding: 10px var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast);
  outline: none;
}
.field-input:focus,
.ssl-extra-input :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  box-shadow: 0 0 0 3px var(--accent-border);
}
.field-input option {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  transition: var(--tr-ui-normal);
}
.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
}

.card-accent::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 2px;
  content: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.card-accent:hover::before { opacity: 1; }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: var(--tr-ui-normal);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0; height: 2px;
  content: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.stat-card:hover {
  border-color: var(--border-medium);
  transform: translateY(var(--lift));
  background: var(--bg-card-hover);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.stat-card:hover::before { opacity: 1; }

.stat-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: var(--space-4);
}

.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.icon-chip-sm { width: 32px; height: 32px; font-size: 15px; border-radius: var(--radius-sm); }
.icon-chip-md { width: 40px; height: 40px; font-size: 18px; }
.icon-chip-lg { width: 46px; height: 46px; font-size: 20px; }
.icon-chip-xl { width: 60px; height: 60px; font-size: 26px; border-radius: var(--radius-full); }

.icon-chip-blue, .icon-chip-cyan, .icon-chip-green, .icon-chip-orange,
.icon-chip-red, .icon-chip-purple, .icon-chip-pink, .icon-chip-gray {
  background: var(--bg-chip);
  color: var(--text-secondary);
}
.menu-icons-color .nav-icon.icon-chip-blue,
.menu-icons-color .nav-icon.icon-chip-cyan   { color: var(--tone-blue); }
.menu-icons-color .nav-icon.icon-chip-green  { color: var(--tone-green); }
.menu-icons-color .nav-icon.icon-chip-orange { color: var(--tone-orange); }
.menu-icons-color .nav-icon.icon-chip-red    { color: var(--tone-red); }
.menu-icons-color .nav-icon.icon-chip-purple { color: var(--tone-purple); }
.menu-icons-color .nav-icon.icon-chip-pink   { color: var(--tone-pink); }

.icon-chip-blue, .icon-chip-cyan { --tone: var(--tone-blue); }
.icon-chip-green  { --tone: var(--tone-green); }
.icon-chip-orange { --tone: var(--tone-orange); }
.icon-chip-red    { --tone: var(--tone-red); }
.icon-chip-purple { --tone: var(--tone-purple); }
.icon-chip-pink   { --tone: var(--tone-pink); }
[data-tone="service"], [data-tone="domain"], [data-tone="download"], [data-tone="help"], [data-tone="info"], [data-tone="blue"], [data-tone="cyan"] { --tone: var(--tone-blue); }
[data-tone="support"], [data-tone="ok"], [data-tone="ssl"], [data-tone="green"] { --tone: var(--tone-green); }
[data-tone="billing"], [data-tone="notice"], [data-tone="orange"] { --tone: var(--tone-orange); }
[data-tone="people"], [data-tone="security"], [data-tone="wallet"], [data-tone="purple"] { --tone: var(--tone-purple); }
[data-tone="message"], [data-tone="pink"] { --tone: var(--tone-pink); }
[data-tone="teal"] { --tone: var(--tone-teal); }
[data-tone="error"], [data-tone="red"] { --tone: var(--tone-red); }
[data-tone="muted"], [data-tone="gray"] { --tone: var(--tone-gray); }
:is(.icon-chip-blue, .icon-chip-cyan, .icon-chip-green, .icon-chip-orange, .icon-chip-red, .icon-chip-purple, .icon-chip-pink):not(.nav-icon),
:is(.stat-icon, .empty-state-icon, .icon-chip, .tbx-hub-icon)[data-tone] {
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) var(--tone-tint), transparent);
}
:is(.empty-state-icon, .modal-icon, .attn-hero-icon, .dd-hero-icon, .pm-hero-icon):has(> .sb-icon-fresh) {
  background: none;
  border-color: transparent;
}
.empty-state-icon:has(> .sb-icon-fresh) { font-size: 48px; }
.modal-icon:has(> .sb-icon-fresh) { font-size: 44px; }
:is(.attn-hero-icon, .dd-hero-icon, .pm-hero-icon):has(> .sb-icon-fresh) { font-size: 42px; }

.stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
  line-height: 1.2;
}
.stat-label {
  font-size: var(--text-ui);
  color: var(--text-secondary);
}
.stat-change {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  margin-top: var(--space-2);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.stat-change-up   { background: var(--success-bg); color: var(--on-success); }
.stat-change-warn { background: var(--warning-bg); color: var(--on-warning); }
.stat-change-down { background: var(--danger-bg);  color: var(--on-danger); }

.badge {
  display: inline-flex; align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  line-height: 1.6;
  white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--on-success); }
.badge-warning { background: var(--warning-bg); color: var(--on-warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--on-danger); }
.badge-info    { background: var(--info-bg);    color: var(--on-info); }
.badge-blue {
  background: var(--accent-soft);
  color: var(--tone-blue);
  border: 1px solid var(--accent-border);
}
.badge-new {
  background: rgba(16,185,129,0.15);
  color: var(--on-success);
  border: 1px solid rgba(16,185,129,0.2);
}
.badge-soon {
  background: var(--bg-card-hover);
  color: var(--text-muted);
}
.badge[data-tone] {
  background: color-mix(in srgb, var(--tone) var(--tone-tint), transparent);
  color: color-mix(in srgb, var(--tone) 80%, var(--text-primary));
}

.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-active  {
  background: var(--success);
}
.status-dot-breathe {
  background: var(--success);
}
.status-dot-warning { background: var(--warning); }
.status-dot-danger  { background: var(--danger); }
.status-dot-info    { background: var(--info); }
.status-dot-muted   { background: var(--text-muted); }
.status-dot[data-tone] { background: var(--tone); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-main);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  border: none; cursor: pointer;
  transition: var(--tr-ui-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-primary:hover {
  background: var(--grad-brand-hover);
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-2);
}
.btn-ghost {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
}
.btn-ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
  color: var(--text-primary);
}
.btn-soft {
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
}
.btn-soft:hover {
  border-color: var(--accent-text);
  transform: translateY(var(--lift));
}
.btn-danger {
  background: var(--danger-bg);
  color: var(--on-danger);
  border: 1px solid rgba(239,68,68,0.2);
}
.btn-danger:hover { background: rgba(239,68,68,0.2); }
.btn-warning {
  background: var(--warning);
  color: #000;
  box-shadow: var(--shadow-1);
}
.btn-warning:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-2);
}
.btn:disabled, .btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: grayscale(0.3);
}
.btn-sm {
  font-size: var(--text-xs);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
}
.btn-lg {
  font-size: var(--text-base);
  padding: 13px var(--space-6);
  border-radius: var(--radius-lg);
}

.progress { margin-top: var(--space-4); }
.progress-header {
  display: flex; justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.progress-track {
  height: 6px;
  background: var(--track-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  width: 0;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}
.progress-fill-warn {
  background: var(--warning);
}
.progress-fill-danger {
  background: var(--danger);
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: var(--tr-ui-normal);
}
.service-card:hover {
  border-color: var(--accent-border);
  background: var(--bg-card-hover);
  transform: translateY(var(--lift));
}
.service-card-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.service-type {
  font-size: var(--text-xs); font-weight: var(--font-medium);

  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--bg-chip);
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
}
.service-status {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
.service-name {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-1);
}
.service-domain {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  direction: ltr;
  text-align: right;
}
[dir="ltr"] .service-domain { text-align: left; }
.sib-ltr-start { direction: ltr; text-align: right; }
.sib-ltr-end   { direction: ltr; text-align: left; }
[dir="ltr"] .sib-ltr-start { text-align: left; }
[dir="ltr"] .sib-ltr-end   { text-align: right; }
[dir="ltr"] .sb-icon-dir { transform: scaleX(-1); }
.service-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}
.service-meta-item label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: block;
  margin-bottom: 3px;
}
.service-meta-item span {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.tool-name {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.invoice-row {
  display: flex; align-items: center;
  gap: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: var(--tr-ui-fast);
}
.invoice-row:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-medium);
}
.invoice-num {
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 72px; flex-shrink: 0;
  white-space: nowrap;
  direction: ltr;
}
.invoice-desc {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}
.invoice-date {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.invoice-amount {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  flex-shrink: 0;
}

.notif-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
.notif-item {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.notif-item:last-child { border-bottom: none; padding-bottom: 0; }
.notif-indicator {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.notif-indicator-cyan  {
  background: var(--accent);
  box-shadow: none;
}
.notif-indicator-orange { background: var(--warning); }
.notif-indicator-red    { background: var(--danger); }
.notif-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.65;
}
.notif-text strong { color: var(--text-primary); font-weight: var(--font-semibold); }
.notif-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 4px;
}

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--text-muted);
}
.empty-state-icon {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  font-size: 28px;
  margin-bottom: var(--space-4);
  background: var(--bg-chip);
  color: var(--accent-text);
}
.empty-state-text { font-size: var(--text-sm); line-height: 1.7; }

.divider {
  height: 1px;
  background: var(--border-soft);
  margin: var(--space-4) 0;
}

.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.main-content > .alert:first-child { margin-top: var(--space-5); }
.alert-warning, .alert-danger, .alert-info, .alert-success {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
}
.alert-warning { border-inline-start: 3px solid var(--warning); }
.alert-danger  { border-inline-start: 3px solid var(--danger); }
.alert-info    { border-inline-start: 3px solid var(--accent); }
.alert-success { border-inline-start: 3px solid var(--success); }
.alert strong, .alert b { color: var(--text-primary); }
.alert-warning > .sb-icon, .alert-warning > :first-child > .sb-icon:first-child { color: var(--on-warning); }
.alert-danger  > .sb-icon, .alert-danger  > :first-child > .sb-icon:first-child { color: var(--on-danger); }
.alert-info    > .sb-icon, .alert-info    > :first-child > .sb-icon:first-child { color: var(--accent-text); }
.alert-success > .sb-icon, .alert-success > :first-child > .sb-icon:first-child { color: var(--on-success); }

#modalAjax {
  position: fixed !important;
  top: 0 !important; inset-inline: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 10000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
#modalAjax.in {
  display: flex !important;
}
#modalAjax .modal-dialog {
  position: relative !important;
  margin: auto !important;
  width: 100% !important;
  max-width: 600px !important;
  z-index: 10001 !important;
}
#modalAjax .modal-content {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5) !important;
}
#modalAjax .modal-header {
  border-bottom: 1px solid var(--border-soft) !important;
  padding: var(--space-4) var(--space-5) !important;
  display: flex; align-items: center; justify-content: space-between;
}
#modalAjax .modal-title {
  font-weight: var(--font-bold) !important;
  font-size: var(--text-base) !important;
  color: var(--text-primary) !important;
}
#modalAjax .modal-body {
  padding: var(--space-5) !important;
  color: var(--text-secondary) !important;
}
#modalAjax .modal-footer {
  border-top: 1px solid var(--border-soft) !important;
  padding: var(--space-4) var(--space-5) !important;
  display: flex; justify-content: flex-end; gap: var(--space-3);
  align-items: center;
}
#modalAjax .close {
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--text-muted);
  line-height: 1; padding: 0;
}
#modalAjax .form-control,
#modalAjax .form-control:focus {
  background: var(--bg-card-hover) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
#modalAjax .form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-border) !important;
}
#modalAjax label,
#modalAjax p,
#modalAjax small,
#modalAjax .text-muted { color: var(--text-secondary) !important; }
#modalAjax h1,#modalAjax h2,#modalAjax h3,
#modalAjax h4,#modalAjax h5 { color: var(--text-primary) !important; }
#modalAjax .card,
#modalAjax .card-body {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-secondary) !important;
}
#modalAjax .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
}
#modalAjax .btn-default,
#modalAjax .btn-secondary,
#modalAjax .btn-outline-secondary {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
}
#modalAjax .btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
}
#modalAjax .alert-warning {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.3) !important;
  color: #fcd34d !important;
  border-radius: var(--radius-md) !important;
}
#modalAjax .alert-success {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.3) !important;
  color: var(--on-success) !important;
}
#modalAjax img { max-width: 100%; border-radius: var(--radius-md); }
#modalAjax .input-group-text {
  background: var(--bg-card) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-muted) !important;
}
#modalAjax .loader { color: var(--text-muted); }

#modalAjax .twofa-module { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); cursor: pointer; transition: var(--tr-ui-fast); }
#modalAjax .twofa-module:hover { border-color: var(--border-medium); }
#modalAjax .twofa-module:is(.active, :has(input:checked)) { border-color: var(--accent-border); background: var(--accent-soft); }
#modalAjax .twofa-module :is(.col-radio, .col-logo) { flex-shrink: 0; display: flex; }
#modalAjax .twofa-module input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
#modalAjax .twofa-module img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--radius-md); }
#modalAjax .twofa-module .col-description { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.7; }
#modalAjax .twofa-module .col-description strong { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
#modalAjax .twofa-module .col-description br { display: none; }
#modalAjax.twofa-setup .modal-body h3 { font-size: var(--text-base) !important; font-weight: var(--font-bold); margin-bottom: var(--space-2); }
#modalAjax.twofa-setup .modal-body p { line-height: 1.9; }
#modalAjax.twofa-setup .modal-body p > strong { display: inline-block; direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono, monospace); letter-spacing: 0.05em; color: var(--text-primary); background: var(--bg-chip); padding: 0 var(--space-2); border-radius: var(--radius-sm); user-select: all; overflow-wrap: anywhere; }
#modalAjax.twofa-setup .modal-body div[align="center"] > svg { display: block; width: 180px; height: 180px; margin: var(--space-3) auto; border-radius: var(--radius-md); }
#modalAjax.twofa-setup .modal-body .row { display: flex; gap: var(--space-2); margin: var(--space-3) 0 0; }
#modalAjax.twofa-setup .modal-body .row > [class*="col-"] { padding: 0; flex: 0 0 auto; max-width: none; width: auto; }
#modalAjax.twofa-setup .modal-body .row > .col-sm-8 { flex: 1 1 auto; min-width: 0; }
#modalAjax.twofa-setup .modal-body input[name="verifykey"] { direction: ltr; text-align: center; letter-spacing: 0.3em; font-size: var(--text-lg) !important; height: 44px; width: 100%; }
#modalAjax.twofa-setup .modal-body input[name="verifykey"]::placeholder { letter-spacing: normal; font-size: var(--text-sm); }
#modalAjax.twofa-setup .modal-body .row .btn { height: 44px; padding-inline: var(--space-5); }
#modalAjax.twofa-setup .modal-body form > br { display: none; }
#modalAjax.twofa-setup .activation-msg { margin: var(--space-2) 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: var(--radius-md); background: var(--success-bg); color: var(--on-success); text-align: center; font-weight: var(--font-bold); }
#modalAjax.twofa-setup .backup-code { margin: var(--space-3) auto; padding: var(--space-3); border: 1px dashed var(--border-medium); border-radius: var(--radius-md); background: var(--bg-chip); color: var(--text-primary); direction: ltr; text-align: center; font-family: var(--font-mono, monospace); font-size: var(--text-lg); letter-spacing: 0.1em; user-select: all; }

.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px) !important;
}
.modal-backdrop.in { opacity: 1 !important; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-modal) var(--ease-out);
}
.modal-overlay.open {
  opacity: 1; pointer-events: all; display: flex;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  transition: opacity var(--dur-modal) var(--ease-out);
}
.modal-box {
  width: 100%; max-width: 380px;
  text-align: center;
  animation: scaleIn 0.3s ease both;
}
.modal-icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  font-size: 26px;
  margin: 0 auto var(--space-4);
  background: rgba(245,158,11,0.12);
  color: var(--on-warning);
}
.modal-message {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.modal-actions {
  display: flex; gap: var(--space-3);
  justify-content: center;
}
.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.modal-kind-info  .modal-icon { background: var(--info-soft);  color: var(--on-info); }
.modal-kind-error .modal-icon { background: rgba(239,68,68,0.12);  color: var(--on-danger); }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.5);
  backdrop-filter: var(--glass-blur-sm);
}
.sidebar-overlay.active { display: block; }

.sb-icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.sib-expert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.sib-expert-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: var(--tr-ui-fast);
}
.sib-expert-card:hover {
  border-color: var(--accent-border);
  transform: translateY(var(--lift));
  box-shadow: none;
}
.sib-expert-card-icon {
  padding: var(--space-4) var(--space-5) 0;
  font-size: 28px;
  color: var(--accent-text);
}
.sib-expert-card-body {
  flex: 1;
  padding: var(--space-3) var(--space-5);
}
.sib-expert-card-name {
  font-size: var(--text-base) !important;
  font-weight: var(--font-bold) !important;
  margin: 0 0 var(--space-2) !important;
  color: var(--text-primary);
  font-family: var(--font-main) !important;
}
.sib-expert-card-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}
.sib-expert-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.sib-expert-card-price { display: flex; flex-direction: column; }
.sib-expert-price-value {
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  color: var(--accent-text);
}
.sib-expert-price-cycle {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.sib-expert-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.sib-expert-btn:hover { opacity: .85; color: #fff; }

.sib-banner-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.sib-banner-track {
  display: flex;
  direction: ltr;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.sib-banner-slide {
  min-width: 100%;
  flex-shrink: 0;
}
.sib-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  max-height: 280px;
}
.sib-banner-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.sib-banner-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .2s, border-color .2s;
}
.sib-banner-dot.active,
.sib-banner-dot:hover {
  background: #fff;
  border-color: #fff;
}
@media (max-width: 640px) {
  .sib-banner-img { max-height: 160px; }
}

.text-success { color: var(--on-success) !important; }
.text-warning { color: var(--on-warning) !important; }
.text-danger  { color: var(--on-danger) !important; }
.text-info    { color: var(--on-info) !important; }
.text-dark    { color: var(--text-primary) !important; }
.text-muted   { color: var(--text-muted) !important; }

.svc-renewal-countdown {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.svc-renewal-countdown.is-warn  { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.06); }
.svc-renewal-countdown.is-danger { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }
.svc-renewal-info { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.svc-renewal-num { font-size: 28px; font-weight: var(--font-extrabold); color: var(--on-success); }
.svc-renewal-countdown.is-warn .svc-renewal-num  { color: var(--on-warning); }
.svc-renewal-countdown.is-danger .svc-renewal-num { color: var(--on-danger); }
.svc-renewal-label { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.svc-renewal-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--border-soft); overflow: hidden; }
.svc-renewal-bar-fill { height: 100%; border-radius: 6px; transition: width 0.8s ease; }
.svc-renewal-bar-fill.is-ok     { background: var(--success); }
.svc-renewal-bar-fill.is-warn   { background: var(--warning); }
.svc-renewal-bar-fill.is-danger { background: var(--danger); }
.svc-renewal-bar-fill.is-pulse  { animation: anim-pulse 1.5s ease-in-out infinite; }

.attn-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--warning);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-5);
}
.attn-hero-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--on-warning);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.attn-hero-body { flex: 1; min-width: 180px; }
.attn-hero-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}
.attn-hero-value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.attn-hero-value small {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-inline-start: var(--space-1);
}
.attn-hero-meta {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--on-warning);
  margin-top: 2px;
}
.attn-hero-action { flex-shrink: 0; }
@media (max-width: 640px) {
  .attn-hero { padding: var(--space-4); gap: var(--space-3); }
  .attn-hero-action { width: 100%; }
  .attn-hero-action .btn { width: 100%; justify-content: center; }
}

.notif-dot.anim-pulse {
  animation-iteration-count: 6;
  animation-fill-mode: forwards;
}

.sib-captcha { margin: var(--space-4) 0; }
.sib-captcha-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.sib-captcha-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
}
.sib-captcha-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-latin);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.sib-captcha-img {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.sib-captcha-img:hover,
.sib-captcha-img:focus-visible { border-color: var(--accent); outline: none; }
.sib-captcha-img.is-themed { background: var(--bg-card); }
.sib-captcha-img img {
  display: block;
  width: 150px;
  height: 36px;
}
.sib-captcha-refresh {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.sib-captcha-refresh svg { width: 20px; height: 20px; }
.sib-captcha-img:hover .sib-captcha-refresh,
.sib-captcha-img:focus-visible .sib-captcha-refresh,
.sib-captcha-img.is-loading .sib-captcha-refresh { opacity: 1; }
.sib-captcha-img.is-loading .sib-captcha-refresh svg { animation: sibCaptchaSpin 0.8s linear infinite; }
@keyframes sibCaptchaSpin { to { transform: rotate(360deg); } }

.sib-captcha-recaptcha .recaptcha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 78px;
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-fast);
}
.sib-captcha-recaptcha .recaptcha-container.sib-captcha-missing {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
}
.sib-captcha-fail {
  font-size: var(--text-xs);
  color: var(--on-danger);
  margin-top: var(--space-2);
  text-align: center;
}

.sib-ai-wait {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--info-bg);
  border: 1px solid var(--accent-border);
  color: var(--text-primary);
}
.sib-ai-wait-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-chip); color: var(--accent-text);
}
.sib-ai-wait-icon .sb-icon { width: 20px; height: 20px; animation: sib-ai-twinkle 2.4s ease-in-out infinite; }
.sib-ai-wait-body { flex: 1; min-width: 0; }
.sib-ai-wait-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent-text); }
.sib-ai-wait-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 3px; line-height: 1.8; }
.sib-ai-wait-bar {
  position: relative; height: 4px; margin-top: var(--space-3);
  border-radius: var(--radius-full); overflow: hidden;
  background: var(--accent-soft);
}
.sib-ai-wait-bar span {
  position: absolute; top: 0; bottom: 0; width: 38%;
  border-radius: inherit;
  background: var(--accent);
  animation: sib-ai-slide 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.sib-ai-wait.is-long .sib-ai-wait-bar span { animation-duration: 4s; opacity: .55; }
@keyframes sib-ai-slide { 0% { inset-inline-start: 100%; } 100% { inset-inline-start: -40%; } }
@keyframes sib-ai-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .sib-ai-wait-bar span, .sib-ai-wait-icon .sb-icon { animation: none; } .sib-ai-wait-bar span { inset-inline-start: 31%; } }
.sib-ai-wait-center { text-align: start; margin: 0 auto var(--space-6); max-width: 520px; }
.sib-kb-reply { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--accent-border); display: flex; flex-direction: column; gap: var(--space-3); }
.sib-kb-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border-soft);
  color: inherit; text-decoration: none;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}
.sib-kb-card:hover, .sib-kb-card:focus-visible { border-color: var(--accent-border); transform: translateY(-1px); text-decoration: none; }
.sib-kb-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sib-kb-card-kicker { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--accent-text); }
.sib-kb-card-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); line-height: 1.6; }
.sib-kb-card-sum { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.7; }
.sib-kb-card-go { flex-shrink: 0; color: var(--text-muted); display: inline-flex; }
.sib-kb-vote { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.sib-kb-vote-q { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.sib-kb-vote-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.sib-kb-err { flex-basis: 100%; font-size: var(--text-xs); color: var(--on-danger); }
.sib-kb-state { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.sib-kb-state.is-ok { color: var(--on-success); }
@media (max-width: 575px) { .sib-kb-vote-btns { margin-inline-start: 0; width: 100%; } .sib-kb-vote-btns .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .sib-kb-card, .sib-kb-card:hover { transition: none; transform: none; } }
.sib-ai-wait.is-ready { background: var(--success-bg); border-color: rgba(16,185,129,0.3); }
.sib-ai-wait.is-ready .sib-ai-wait-icon { background: rgba(16,185,129,0.18); color: var(--on-success); }
.sib-ai-wait.is-ready .sib-ai-wait-icon .sb-icon { animation: none; }
.sib-ai-wait.is-ready .sib-ai-wait-title { color: var(--on-success); }
.sib-ai-wait.is-failed { background: var(--bg-card); border-color: var(--border-medium); }
.sib-ai-wait.is-failed .sib-ai-wait-icon { background: var(--bg-secondary, rgba(148,163,184,0.15)); color: var(--text-secondary); }
.sib-ai-wait.is-failed .sib-ai-wait-icon .sb-icon { animation: none; }
.sib-ai-wait.is-failed .sib-ai-wait-title { color: var(--text-primary); }

.flow-wrap { max-width: 680px; margin-inline: auto; }
.flow-back { margin-bottom: var(--space-4); }
.flow-head { margin-bottom: var(--space-5); }
.flow-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-1); }
.flow-sub { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; }
.flow-alert { margin-bottom: var(--space-4); }
.flow-errs { margin: 0; padding-inline-start: var(--space-4); }
.flow-meta { padding: var(--space-4); background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
.flow-label { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.flow-value { font-weight: var(--font-bold); overflow-wrap: anywhere; }
.flow-note { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.flow-rows { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); }
.flow-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.flow-row + .flow-row { border-top: 1px solid var(--border-soft); }
.flow-row > :first-child { color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
.flow-row > :last-child { font-weight: var(--font-semibold); white-space: nowrap; }
.flow-row.is-total { background: var(--bg-chip); }
.flow-row.is-total > * { color: var(--text-primary); font-weight: var(--font-bold); }
.flow-field { margin-bottom: var(--space-4); }
.flow-arrow { display: inline-flex; vertical-align: middle; color: var(--text-muted); }
[dir="ltr"] .flow-arrow { transform: scaleX(-1); }
.upgsum-promo { display: flex; gap: var(--space-2); }
.upgsum-promo .field-input { flex: 1; min-width: 0; }
.flow-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.flow-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.flow-choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); cursor: pointer; transition: var(--tr-ui-fast); }
.flow-choice:hover { border-color: var(--border-medium); }
.flow-choice:has(input:checked) { border-color: var(--accent-border); background: var(--accent-soft); }
.flow-choice input { accent-color: var(--accent); width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.flow-choice-title { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.flow-choice-desc { display: block; font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; line-height: 1.7; }
.flow-choice.is-danger input { accent-color: var(--danger); }
.flow-choice.is-danger:has(input:checked) { border-color: rgba(239,68,68,0.35); background: var(--danger-bg); }
.flow-choice.is-danger:has(input:checked) .flow-choice-title { color: var(--on-danger); }
.flow-card { margin-bottom: var(--space-4); }
.flow-hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.7; }
.flow-steps { display: flex; align-items: center; justify-content: center; padding: var(--space-4) 0; }
.flow-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.flow-step-dot { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--text-muted); }
.flow-step-label { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.flow-step.is-active .flow-step-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.flow-step.is-active .flow-step-label { color: var(--text-primary); font-weight: var(--font-semibold); }
.flow-step.is-done .flow-step-dot { background: var(--success-bg); border-color: var(--success); color: var(--on-success); }
.flow-step.is-done .flow-step-label { color: var(--on-success); }
.flow-step-line { flex: 1; min-width: 40px; height: 1px; background: var(--border-soft); margin-bottom: 20px; }
.flow-step-line.is-done { background: var(--success); }
.ssl-csr { font-family: monospace; font-size: var(--text-xs); line-height: 1.6; resize: vertical; }
.ssl-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); align-items: center; margin-top: var(--space-2); font-size: var(--text-sm); }
.flow-row > .ssl-copy { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; white-space: normal; overflow-wrap: anywhere; font-family: monospace; font-weight: var(--font-medium); }
.flow-row:has(> .ssl-copy) > :first-child { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) { .ssl-extra { grid-template-columns: 1fr; } }
.ub-intro { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-4); }
.ub-list { display: flex; flex-direction: column; gap: var(--space-2); }
.ub-row { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); font-size: var(--text-sm); }
.ub-name { font-weight: var(--font-semibold); }
.ub-label { display: block; font-size: var(--text-xs); color: var(--text-muted); }
.ub-tiers { grid-column: 1 / -1; }
.ub-tiers summary { cursor: pointer; font-size: var(--text-xs); color: var(--accent-text); width: max-content; }
.ub-tiers[open] summary { margin-bottom: var(--space-3); }
.ub-tiers .flow-rows { margin-bottom: var(--space-2); }
.ub-tiers-head > * { font-size: var(--text-xs); color: var(--text-muted) !important; font-weight: var(--font-medium) !important; }
.ub-tiers-info { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-2); }
@media (max-width: 640px) { .ub-row { grid-template-columns: 1fr 1fr; } .ub-name { grid-column: 1 / -1; } }
.dci-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); margin-bottom: var(--space-4); background: var(--bg-chip); border-radius: var(--radius-md); width: fit-content; max-width: 100%; }
.dci-tab { padding: 6px var(--space-4); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.dci-tab.is-active { background: var(--bg-card); color: var(--text-primary); font-weight: var(--font-semibold); }
.dci-choice { margin-bottom: var(--space-4); }
.dci-sel { margin-top: var(--space-2); }
.dci-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.dci-custom:disabled { opacity: .5; }
.dns-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, 2fr) 90px 36px; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.dns-row.is-head, .fwd-row.is-head { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.dns-na { text-align: center; color: var(--text-muted); }
.dns-row.is-cleared, .fwd-row.is-cleared { opacity: .45; }
.dns-note, .fwd-note { margin: var(--space-2) 0 var(--space-4); }
.fwd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr) 36px; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.fwd-at { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
@media (max-width: 640px) {
  .dns-row { grid-template-columns: 1fr 1fr; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); }
  .dns-row.is-head, .fwd-row.is-head { display: none; }
  .fwd-row { grid-template-columns: 1fr; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft); }
}
.pns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); align-items: start; }
.pns-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.pns-name { display: flex; align-items: center; gap: var(--space-2); }
.pns-name .field-input { flex: 1; min-width: 0; }
.pns-name span { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.ssl-list { padding: 0; overflow: hidden; }
.ssl-cols { --lt-cols: minmax(0, 1.4fr) minmax(0, 1.2fr) 120px 120px 170px; padding: var(--space-3) var(--space-5); }
.lt-head.ssl-cols { font-size: var(--text-xs); color: var(--text-muted); border-bottom: 1px solid var(--border-soft); }
.ssl-row { font-size: var(--text-sm); }
.ssl-row + .ssl-row { border-top: 1px solid var(--border-soft); }
.ssl-domain { font-weight: var(--font-semibold); margin-inline-end: var(--space-2); }
.ssl-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.tfb-staff { margin-bottom: var(--space-4); }
.tfb-legend { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-3); }
.tfb-scale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); }
.tfb-end { font-size: var(--text-xs); color: var(--text-muted); padding-inline: var(--space-1); }
.tfb-pill { position: relative; }
.tfb-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tfb-pill span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-secondary); transition: var(--tr-ui-fast); }
.tfb-pill:hover span { border-color: var(--border-medium); }
.tfb-pill input:checked + span { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); font-weight: var(--font-semibold); }
.tfb-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlc-cats { margin-bottom: var(--space-5); }
.dlc-cat { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; text-decoration: none; }
.dlc-cat-name { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-bold); }
.dlc-cat-desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.6; }
.dlc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dlc-item { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dlc-icon { width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0; background: var(--bg-chip); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.dlc-body { flex: 1; min-width: 200px; }
.dlc-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.dlc-desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.6; margin-top: 2px; }
.dlc-size { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.dl-search { display: flex; gap: var(--space-2); max-width: 520px; margin-top: var(--space-4); }
.dl-search .field-input { flex: 1; min-width: 0; }
.dl-search .btn { flex-shrink: 0; }
.pm-filter { margin-bottom: var(--space-4); }
.pm-filter-n { font-size: var(--text-xs); color: var(--text-muted); margin-inline-start: var(--space-1); }
.pm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.pm-card { display: flex; flex-direction: column; gap: var(--space-4); color: inherit; text-decoration: none; transition: var(--tr-ui-fast); }
.pm-card:hover, .pm-card:focus-visible { border-color: var(--accent-border); color: inherit; text-decoration: none; }
.pm-card[hidden] { display: none; }
.pm-card-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.pm-card-main { flex: 1; min-width: 0; }
.pm-card-title { font-weight: var(--font-bold); color: var(--text-primary); line-height: 1.6; overflow-wrap: anywhere; }
.pm-card-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.pm-card .progress { margin-top: 0; }
.pm-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-soft); font-size: var(--text-xs); color: var(--text-secondary); }
.pm-card-foot > span, .pm-due, .pm-hero-badges > span:not(.badge) { display: inline-flex; align-items: center; gap: var(--space-1); }
.pm-due.is-soon { color: var(--on-warning); }
.pm-due.is-late { color: var(--on-danger); }
.progress-fill.pm-fill-done { background: var(--success); }
.card.pm-hero, .card.pm-hero:hover { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; border-color: var(--accent-border); }
.pm-hero-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); flex-shrink: 0; background: var(--bg-chip); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--accent-text); }
.pm-hero-main { flex: 1; min-width: 0; }
.pm-hero-title { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--text-primary); overflow-wrap: anywhere; }
.pm-hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.stat-value.pm-stat-date { font-size: var(--text-lg); }
.pm-stat-bar { margin-top: var(--space-3); }
.pm-stat-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.pm-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pm-main, .pm-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pm-card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.pm-count { font-size: var(--text-xs); color: var(--text-muted); }
.pm-task-list { list-style: none; margin: 0; padding: 0; }
.pm-task { display: flex; gap: var(--space-3); padding: var(--space-3) 0; }
.pm-task + .pm-task { border-top: 1px solid var(--border-soft); }
.pm-task-check { width: 22px; height: 22px; margin-top: 2px; border-radius: var(--radius-full); border: 1.5px solid var(--border-medium); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pm-task.is-done .pm-task-check { background: var(--success-bg); border-color: var(--success); color: var(--on-success); }
.pm-task-body { flex: 1; min-width: 0; }
.pm-task-title { font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.7; overflow-wrap: anywhere; }
.pm-task.is-done .pm-task-title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-medium); }
.pm-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); }
.pm-tag { display: inline-flex; align-items: center; padding: 1px var(--space-2); border-radius: var(--radius-full); background: var(--bg-chip); }
.pm-tag.is-done { background: var(--success-bg); color: var(--on-success); }
.pm-tag.is-live { background: var(--accent-soft); color: var(--accent-text); }
.pm-time-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; font: inherit; color: var(--accent-text); cursor: pointer; }
.pm-times { margin: var(--space-3) 0 0; }
.pm-times[hidden] { display: none; }
.pm-times .flow-row { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
.pm-empty { font-size: var(--text-sm); color: var(--text-muted); }
.pm-add { display: flex; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.pm-add .field-input { flex: 1; min-width: 0; }
.pm-add .btn { flex-shrink: 0; }
.pm-links { display: flex; flex-direction: column; }
.pm-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-sm); color: inherit; text-decoration: none; }
.pm-link + .pm-link { border-top: 1px solid var(--border-soft); }
.pm-link:hover { color: inherit; text-decoration: none; }
.pm-link:hover .pm-link-title { color: var(--accent-text); }
.pm-link-main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pm-link-id { font-weight: var(--font-semibold); white-space: nowrap; }
.pm-link-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.pm-link-meta { flex-shrink: 0; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.pm-help { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.8; }
.pm-help-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.pm-upload { margin-top: var(--space-4); }
.pm-upload > summary { list-style: none; width: max-content; }
.pm-upload > summary::-webkit-details-marker { display: none; }
.pm-upload-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 991px) { .pm-layout { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
  .pm-list { grid-template-columns: 1fr; }
  .pm-add, .dl-search { flex-direction: column; }
}
.epp-box { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-medium); border-radius: var(--radius-lg); }
.epp-code { flex: 1; min-width: 0; direction: ltr; text-align: center; font-family: monospace; font-size: var(--text-lg); font-weight: var(--font-bold); letter-spacing: .08em; color: var(--text-primary); overflow-wrap: anywhere; background: none; }
.cxl-reason { min-height: 100px; resize: vertical; line-height: 1.7; }
.cxl-domain { margin-top: var(--space-3); }
.upg-grid { margin-bottom: var(--space-5); }
.upg-card { display: flex; flex-direction: column; gap: var(--space-3); }
.upg-group { font-size: var(--text-xs); color: var(--text-muted); }
.upg-name { font-size: var(--text-lg); font-weight: var(--font-bold); margin-top: calc(-1 * var(--space-2)); }
.upg-desc { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.8; overflow-wrap: anywhere; }
.upg-desc ul { margin: 0; padding-inline-start: var(--space-4); }
.upg-price { margin-top: auto; }
.upg-price-fixed { font-size: var(--text-md); font-weight: var(--font-bold); }
.upg-opts { margin-bottom: var(--space-5); padding: 0; }
.upg-opt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.upg-opt + .upg-opt { border-top: 1px solid var(--border-soft); }
.upg-opt.is-head { font-size: var(--text-xs); color: var(--text-muted); }
.upg-opt-name { font-weight: var(--font-semibold); }
.upg-opt-now { color: var(--text-secondary); }
.upg-qty { display: flex; align-items: center; gap: var(--space-2); }
.upg-qty .field-input { width: 90px; }
.bdm-cell { display: flex; align-items: center; gap: var(--space-2); }
.bdm-check { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; margin: 0; cursor: pointer; }
.bdm-bar { position: sticky; bottom: var(--space-4); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.bdm-bar[hidden] { display: none; }
.bdm-count { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.bdm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.bdm-domains { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bdm-domains li { padding: 2px var(--space-3); background: var(--bg-chip); border-radius: var(--radius-full); font-size: var(--text-sm); }
.bdm-ns { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 640px) {
  .bdm-actions { margin-inline-start: 0; }
}
.upg-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.upg-feats { list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
.upg-feats li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; color: var(--text-secondary); }
.upg-feats li + li { border-top: 1px solid var(--border-soft); }
.upg-feats li > :last-child { color: var(--text-primary); font-weight: var(--font-semibold); text-align: end; }
.upg-feats .upg-feat-yes { color: var(--on-success); }
.upg-feats .upg-feat-no { color: var(--text-muted); }
@media (max-width: 640px) {
  .upg-opt { grid-template-columns: 1fr; gap: var(--space-1); }
  .upg-opt.is-head { display: none; }
}
.state-wrap { max-width: 520px; margin: var(--space-8) auto; }
.state-card { text-align: center; }
.state-icon { display: inline-flex; font-size: 48px; margin-bottom: var(--space-4); color: var(--text-muted); }
.state-icon.is-danger { color: var(--on-danger); }
.state-icon.is-accent { color: var(--accent); }
.state-title { font-size: var(--text-xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.state-sub { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--space-5); overflow-wrap: anywhere; }
.state-card .flow-rows, .state-card .flow-meta { text-align: start; }
.state-card .flow-actions { justify-content: center; }
.state-perms { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.tfa-code { direction: ltr; font-family: monospace; font-size: var(--text-2xl); font-weight: var(--font-bold); letter-spacing: .15em; color: var(--on-warning); background: var(--warning-bg); border: 1px dashed var(--border-medium); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.sw-list { display: flex; flex-direction: column; gap: var(--space-2); }
.sw-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); color: var(--text-primary); font: inherit; text-align: start; cursor: pointer; transition: var(--tr-ui-fast); }
.sw-item:hover:not(:disabled) { border-color: var(--accent-border); background: var(--bg-card-hover); }
.sw-item:disabled { opacity: .55; cursor: not-allowed; }
.sw-item.is-current { border-color: var(--accent-border); background: var(--accent-soft); }
.sw-body { flex: 1; min-width: 0; }
.sw-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); }
.sw-email { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.sw-go { display: inline-flex; color: var(--text-muted); }
.invite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 880px; margin-inline: auto; }
.invite-card-title { font-size: var(--text-md); font-weight: var(--font-bold); margin-bottom: var(--space-4); }
.invite-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.invite-tos { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; cursor: pointer; }
.invite-tos input { accent-color: var(--accent); margin-top: 4px; flex-shrink: 0; }
.invite-grid .btn[type="submit"] { width: 100%; justify-content: center; }
@media (max-width: 768px) {
  .invite-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .invite-2col { grid-template-columns: 1fr; }
}
.perm-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-soft); }
.perm-head .flow-title { font-size: var(--text-base); margin-bottom: 0; }
.perm-email { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.perm-foot { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.idn-dob { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-2); }
.idn-msg { min-height: 1.2em; margin-top: 4px; font-size: var(--text-xs); color: var(--text-secondary); }
.idn-msg:empty { min-height: 0; margin-top: 0; }
.idn-msg.is-err { color: var(--on-danger); }
.idn-msg.is-ok { color: var(--on-success); }
.idn-req { color: var(--on-danger); }
.idn-hint { margin-top: 4px; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.7; }
.idn-nid-row[hidden] { display: none; }

.brand-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-extrabold); color: var(--text-primary); line-height: 1.3; }
.brand-name--wide { font-size: var(--text-lg); }
.brand-name--vertical { font-size: var(--text-2xl); text-align: center; white-space: normal; }
.brand-mono { width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-weight: var(--font-extrabold); font-size: var(--text-base); }
.w-hidden { display: none; }

.pass-strength { margin-top: var(--space-2); }
.pass-strength-track {
  height: 6px;
  background: var(--track-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.pass-strength-track > div {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: var(--border-medium);
  transition: width var(--dur-dropdown) var(--ease-out),
              background-color var(--dur-dropdown) var(--ease-out);
}
.pass-strength-text {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.pass-strength-text:empty { display: none; }
.pw-rules {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.pw-rules li { display: inline-flex; align-items: center; gap: var(--space-1); transition: color var(--transition-fast); }
.pw-rules li .sb-icon { font-size: 14px; flex-shrink: 0; opacity: 0.55; }
.pw-rules li.is-ok { color: var(--on-success); }
.pw-rules li.is-ok .sb-icon, .pw-rules li.is-bad .sb-icon { opacity: 1; }
.pw-rules li.is-bad { color: var(--on-danger); }
.pw-rules li[hidden] { display: none; }
input[data-min-length][aria-invalid="true"], input[data-pw-confirm][aria-invalid="true"] { border-color: var(--danger) !important; }
.pw-match { margin-top: var(--space-2); font-size: var(--text-xs); }
.pw-match.is-ok { color: var(--on-success); }
.pw-match.is-bad { color: var(--on-danger); }
.pw-match[hidden] { display: none; }

.bn-list { padding: 0; overflow: hidden; }
.bn-grid { display: grid; grid-template-columns: 64px minmax(0, 1fr) 110px 150px 110px 140px; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6); }
.bn-grid-head { padding-block: var(--space-3); border-bottom: 1px solid var(--border-soft); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); }
.bn-row { border-bottom: 1px solid var(--border-soft); transition: background var(--transition-fast); }
.bn-row:last-child { border-bottom: 0; }
.bn-row:hover { background: var(--bg-card-hover); }
.bn-row[hidden] { display: none; }
.bn-num { font-size: var(--text-xs); color: var(--text-muted); }
.bn-type { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.bn-type-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bn-type-label { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.bn-type-sub { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); font-size: var(--text-xs); }
.bn-type-sub a { color: var(--accent-text); }
.bn-type-sub a:hover { text-decoration: underline; }
.bn-date { font-size: var(--text-sm); color: var(--text-secondary); }
.bn-amount { font-weight: var(--font-bold); white-space: nowrap; }
.bn-amount.is-raise { color: var(--on-warning); }
.bn-amount.is-lower, .bn-amount.is-tocredit { color: var(--on-success); }
.bn-explain { margin-bottom: var(--space-5); }
.bn-explain-title { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-bold); margin-bottom: var(--space-3); }
.bn-explain-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-3); }
.bn-explain-list li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.8; color: var(--text-secondary); }
.bn-explain-list li strong { color: var(--text-primary); }
.bn-explain-list .icon-chip { flex-shrink: 0; }
.bn-explain-total { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-soft); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.9; }
.bn-explain-total .sb-icon { flex-shrink: 0; color: var(--on-success); }
.bn-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 1199px) and (min-width: 769px) {
  .bn-grid { grid-template-columns: 48px minmax(0, 1fr) 96px 130px 96px 110px; gap: var(--space-3); padding-inline: var(--space-4); }
}
.inv-toolbar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-inline-start: auto; }
.inv-bn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-text); color: var(--bg-card); font-size: var(--text-xs); font-weight: var(--font-bold); }
.inv-balance { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--on-warning); white-space: nowrap; }
.sbpay { display: flex; flex-direction: column; gap: var(--space-3); text-align: start; }
.sbpay-lead { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.8; }
.sbpay-hint { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.8; }
.sbpay-hint > svg { flex: none; margin-top: 4px; }
.sbpay-acc { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); overflow: hidden; container-type: inline-size; }
.sbpay-page .sbpay-acc + .sbpay-acc { margin-top: var(--space-3); }
.sbpay-acc-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-chip); font-size: var(--text-sm); }
.sbpay-acc-head > svg { flex: none; color: var(--accent-text); }
.sbpay-bank { font-weight: var(--font-bold); }
.sbpay-holder { margin-inline-start: auto; color: var(--text-secondary); text-align: end; }
.sbpay-acc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k c" "v v"; align-items: center; gap: 4px var(--space-2); padding: var(--space-2) var(--space-3); }
.sbpay-acc-row + .sbpay-acc-row { border-top: 1px solid var(--border-soft); }
.sbpay-acc-k { grid-area: k; font-size: var(--text-xs); color: var(--text-muted); }
.sbpay-acc-v { grid-area: v; justify-self: left; max-width: 100%; font-size: var(--text-base); font-size: min(var(--text-base), 5.8cqi); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbpay-copy { grid-area: c; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: var(--text-xs); }
.sbpay-cta { width: 100%; justify-content: center; padding: 12px; }
.sbpay-terms { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; margin: 0 0 var(--space-3); padding: 0; border: 0; }
.sbpay-terms > legend { width: 100%; padding: 0; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); }
.sbpay-term { position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 5px 12px; border: 1px solid var(--border-medium); border-radius: 999px; background: var(--bg-card); color: var(--text-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); line-height: 1.5; cursor: pointer; }
.sbpay-term:hover { border-color: var(--accent-border); }
.sbpay-term:has(input:checked) { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-text); }
.sbpay-term:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sbpay-term > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sbpay-term > .sb-icon { display: none; font-size: 14px; }
.sbpay-term:has(input:checked) > .sb-icon { display: block; }
.sbpay-term > span { min-width: 0; overflow-wrap: anywhere; }
.sbpay-state { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.8; }
.sbpay-state > svg { flex: none; margin-top: 3px; font-size: 18px; }
.sbpay-state strong { display: block; color: var(--text-primary); }
.sbpay-state span { color: var(--text-secondary); overflow-wrap: anywhere; }
.sbpay-state.is-wait { background: var(--warning-bg); }
.sbpay-state.is-wait > svg { color: var(--on-warning); }
.sbpay-state.is-bad { background: var(--danger-bg); }
.sbpay-state.is-bad > svg { color: var(--on-danger); }
.sbpay-step { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-weight: var(--font-bold); }
.sbpay-step-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-xs); }
.sbpay-drop { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-4); border: 1px dashed var(--border-medium); border-radius: var(--radius-md); text-align: center; color: var(--text-secondary); cursor: pointer; transition: var(--tr-ui-fast); }
.sbpay-drop:hover, .sbpay-drop:has(+ .sbpay-file-input:focus-visible) { border-color: var(--accent-border); background: var(--accent-soft); }
.sbpay-drop > svg { font-size: 28px; color: var(--accent-text); }
.sbpay-drop-name { font-weight: var(--font-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.sbpay-drop-hint { font-size: var(--text-xs); color: var(--text-muted); }
.sbpay-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.sbpay-modes { margin-bottom: var(--space-3); }
.sbpay-modes .dci-tab { display: inline-flex; align-items: center; gap: var(--space-2); }
.sbpay-panel > .flow-hint:first-child { margin: 0 0 var(--space-3); }
.sbpay-sms-box { margin-top: var(--space-2); }
.sbpay-sms-box > summary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--accent-text); cursor: pointer; list-style: none; }
.sbpay-sms-box > summary::-webkit-details-marker { display: none; }
.sbpay-sms-box[open] > summary { margin-bottom: var(--space-2); }
.sbpay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.sbpay-when { display: flex; gap: var(--space-2); }
.sbpay-when select { flex: 1.4; min-width: 0; }
.sbpay-when input { flex: 1; min-width: 0; }
.sbpay-mini { margin: var(--space-3) 0; }
.sbpay-hist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; font-size: var(--text-sm); }
.sbpay-hist + .sbpay-hist { border-top: 1px solid var(--border-soft); }
.sbpay-hist-amt { font-weight: var(--font-semibold); }
.sbpay-hist-when { margin-inline-start: auto; font-size: var(--text-xs); color: var(--text-muted); }
.sbpay-hist-reason { flex-basis: 100%; font-size: var(--text-xs); color: var(--on-danger); line-height: 1.8; }
.inv-review { display: block; width: fit-content; margin-top: 4px; }
@media (max-width: 600px) {
  .sbpay-grid { grid-template-columns: minmax(0, 1fr); }
}