*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

:root {
  --bg: #f3f1fb;
  --surface: #ffffff;
  --surface-alt: #f6f4fd;
  --surface-raised: #ffffff;
  --line: #e5dff2;
  --control-bg: #f6f4fd;
  --control-border: #d5cbec;
  --control-border-strong: #b5a6dc;
  --focus-ring: rgba(124, 58, 237, 0.22);
  --text: #1b1330;
  --muted: #6a6285;
  --accent: #7c3aed;
  --accent-dark: #5b21b6;
  --accent-soft: rgba(124, 58, 237, 0.12);
  --accent-strong: #6d28d9;
  --danger: #dc2626;
  --success: #0f766e;
  --brand-accent-end: #6366f1;
  --code-bg: #1b1330;
  --code-text: #ffffff;
  --code-muted: rgba(255, 255, 255, 0.72);
  --section-gradient-start: #ffffff;
  --section-emphasis-bg: #f7f3fe;
  --edit-context-bg: #f4f1fe;
  --success-soft: rgba(15, 118, 110, 0.12);
  --success-tint: rgba(15, 118, 110, 0.06);
  --danger-soft: rgba(220, 38, 38, 0.12);
  --danger-tint: rgba(220, 38, 38, 0.07);
  --muted-soft: rgba(106, 98, 133, 0.14);
  --hover-soft: rgba(124, 58, 237, 0.07);
  --modal-backdrop: rgba(27, 19, 48, 0.46);
  --shadow: 0 12px 34px rgba(76, 29, 149, 0.12);
  --bg-glow-1: rgba(124, 58, 237, 0.1);
  --bg-glow-2: rgba(99, 102, 241, 0.08);
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 14px;
  --font-lg: 16px;
  --font-xl: 22px;
  --control-height: 38px;
  --control-height-sm: 32px;
  --table-cell-px: 10px;
  --table-cell-py: 8px;
  --table-font-size: 12px;
  --table-title-font-size: 13px;
  --table-header-font-size: 12px;
  --table-action-size: 32px;
  --table-action-icon-size: 15px;
  --table-dot-size: 8px;
  --table-pill-height: 24px;
  --radius: 10px;
  --radius-lg: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #120d1f;
  --surface: #1a1530;
  --surface-alt: #221b3b;
  --surface-raised: #281f45;
  --line: #372d54;
  --control-bg: #120d1f;
  --control-border: #463b67;
  --control-border-strong: #5b4f80;
  --focus-ring: rgba(167, 139, 250, 0.32);
  --text: #efeafb;
  --muted: #a89ec4;
  --accent: #a78bfa;
  --accent-dark: #c4b5fd;
  --accent-soft: rgba(167, 139, 250, 0.22);
  --accent-strong: #c4b5fd;
  --danger: #f87171;
  --success: #2dd4bf;
  --brand-accent-end: #818cf8;
  --code-bg: #0c0918;
  --code-text: #f8fafc;
  --code-muted: rgba(248, 250, 252, 0.7);
  --section-gradient-start: #1a1530;
  --section-emphasis-bg: #221a39;
  --edit-context-bg: #1d1736;
  --success-soft: rgba(45, 212, 191, 0.16);
  --success-tint: rgba(45, 212, 191, 0.08);
  --danger-soft: rgba(248, 113, 113, 0.18);
  --danger-tint: rgba(248, 113, 113, 0.1);
  --muted-soft: rgba(168, 158, 196, 0.14);
  --hover-soft: rgba(167, 139, 250, 0.1);
  --modal-backdrop: rgba(8, 5, 18, 0.7);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  --bg-glow-1: rgba(139, 92, 246, 0.16);
  --bg-glow-2: rgba(79, 70, 229, 0.12);
}

.icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  display: inline-block;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon-link { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2013a5%205%200%200%200%207%200l3-3a5%205%200%200%200-7-7l-1%201'/%3E%3Cpath%20d='M14%2011a5%205%200%200%200-7%200l-3%203a5%205%200%200%200%207%207l1-1'/%3E%3C/svg%3E"); }
.icon-activity { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012h4l3-8%204%2016%203-8h4'/%3E%3C/svg%3E"); }
.icon-file-code { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'/%3E%3Cpath%20d='M14%202v6h6M10%2013l-2%202%202%202M14%2017l2-2-2-2'/%3E%3C/svg%3E"); }
.icon-globe { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M2%2012h20M12%202a15%2015%200%200%201%200%2020M12%202a15%2015%200%200%200%200%2020'/%3E%3C/svg%3E"); }
.icon-calendar-check { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'/%3E%3Cpath%20d='M16%202v4M8%202v4M3%2010h18M8%2016l2%202%204-5'/%3E%3C/svg%3E"); }
.icon-users { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E"); }
.icon-sliders { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M2%2014h4M10%208h4M18%2016h4'/%3E%3C/svg%3E"); }
.icon-settings { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206Z'/%3E%3Cpath%20d='M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06A1.65%201.65%200%200%200%2015%2019.4a1.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%209%204.6a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51a1.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209c.28.31.7.49%201.51.49H21a2%202%200%201%201%200%204h-.09A1.65%201.65%200%200%200%2019.4%2015Z'/%3E%3C/svg%3E"); }
.icon-shield { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202l8%204v6c0%205-3.4%208.6-8%2010-4.6-1.4-8-5-8-10V6l8-4Z'/%3E%3C/svg%3E"); }
.icon-shield-check { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202l8%204v6c0%205-3.4%208.6-8%2010-4.6-1.4-8-5-8-10V6l8-4Z'/%3E%3Cpath%20d='M8.5%2012.5l2.2%202.2%204.8-5'/%3E%3C/svg%3E"); }
.icon-shield-x { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202l8%204v6c0%205-3.4%208.6-8%2010-4.6-1.4-8-5-8-10V6l8-4Z'/%3E%3Cpath%20d='M9%209l6%206M15%209l-6%206'/%3E%3C/svg%3E"); }
.icon-power { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202v10'/%3E%3Cpath%20d='M18.4%206.6a9%209%200%201%201-12.8%200'/%3E%3C/svg%3E"); }
.icon-log-out { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4M16%2017l5-5-5-5M21%2012H9'/%3E%3C/svg%3E"); }
.icon-refresh, .icon-rotate { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%200%201%2015.5-6.3L21%208'/%3E%3Cpath%20d='M21%203v5h-5'/%3E%3Cpath%20d='M21%2012a9%209%200%200%201-15.5%206.3L3%2016'/%3E%3Cpath%20d='M3%2021v-5h5'/%3E%3C/svg%3E"); }
.icon-copy { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='9'%20width='13'%20height='13'%20rx='2'/%3E%3Cpath%20d='M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1'/%3E%3C/svg%3E"); }
.icon-trash { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206h18M8%206V4h8v2M19%206l-1%2014H6L5%206M10%2011v6M14%2011v6'/%3E%3C/svg%3E"); }
.icon-x { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206L6%2018M6%206l12%2012'/%3E%3C/svg%3E"); }
.icon-check { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E"); }
.icon-plus { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14M5%2012h14'/%3E%3C/svg%3E"); }
.icon-shuffle { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%203h5v5M4%2020L21%203M21%2016v5h-5M15%2015l6%206M4%204l5%205'/%3E%3C/svg%3E"); }
.icon-wand { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%204l5%205L9%2020l-5-5L15%204ZM14%205l5%205M4%204v3M2.5%205.5h3M20%2017v3M18.5%2018.5h3'/%3E%3C/svg%3E"); }
.icon-eraser { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2020H7l-5-5L14%203l8%208-9%209M7%2020l-5-5M13%2020l-6-6'/%3E%3C/svg%3E"); }
.icon-network { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='2'%20width='6'%20height='6'%20rx='1'/%3E%3Crect%20x='3'%20y='16'%20width='6'%20height='6'%20rx='1'/%3E%3Crect%20x='15'%20y='16'%20width='6'%20height='6'%20rx='1'/%3E%3Cpath%20d='M12%208v4M6%2016v-2h12v2'/%3E%3C/svg%3E"); }
.icon-cloud { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.5%2019H7a5%205%200%201%201%201-9.9A7%207%200%200%201%2021%2012.5a3.5%203.5%200%200%201-3.5%206.5Z'/%3E%3C/svg%3E"); }
.icon-bot { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='8'%20width='14'%20height='10'%20rx='2'/%3E%3Cpath%20d='M12%208V4M8%2012h.01M16%2012h.01M9%2016h6M3%2013h2M19%2013h2'/%3E%3C/svg%3E"); }
.icon-sun { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202v2M12%2020v2M4.93%204.93l1.41%201.41M17.66%2017.66l1.41%201.41M2%2012h2M20%2012h2M4.93%2019.07l1.41-1.41M17.66%206.34l1.41-1.41'/%3E%3C/svg%3E"); }
.icon-moon { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012.8A8.5%208.5%200%201%201%2011.2%203a6.5%206.5%200%200%200%209.8%209.8Z'/%3E%3C/svg%3E"); }
.icon-theme-auto { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%203v18'/%3E%3Cpath%20d='M12%203a9%209%200%200%200%200%2018Z'%20fill='black'%20stroke='none'/%3E%3C/svg%3E"); }
.icon-facebook { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='black'%3E%3Cpath%20d='M14%208h3V4h-3c-3%200-5%202-5%205v3H6v4h3v8h4v-8h3l1-4h-4V9c0-.6.4-1%201-1Z'/%3E%3C/svg%3E"); }
.icon-search { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E"); }
.icon-music { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018V5l10-2v13M9%2018a3%203%200%201%201-3-3M19%2016a3%203%200%201%201-3-3'/%3E%3C/svg%3E"); }
.icon-mouse-pointer { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%203l7.5%2018%202.5-7%207-2.5L3%203Z'/%3E%3C/svg%3E"); }
.icon-message-circle { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2011.5a8.5%208.5%200%200%201-12.7%207.4L3%2021l2.1-5.2A8.5%208.5%200%201%201%2021%2011.5Z'/%3E%3C/svg%3E"); }
.icon-briefcase { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='7'%20width='18'%20height='13'%20rx='2'/%3E%3Cpath%20d='M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2M3%2012h18'/%3E%3C/svg%3E"); }
.icon-filter { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205h16l-6%207v5l-4%202v-7L4%205Z'/%3E%3C/svg%3E"); }
.icon-save { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202Z'/%3E%3Cpath%20d='M7%203v6h8M7%2021v-8h10v8'/%3E%3C/svg%3E"); }
.icon-eye { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207S2%2012%202%2012Z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E"); }
.icon-key { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='7.5'%20cy='14.5'%20r='4.5'/%3E%3Cpath%20d='M11%2011l9-9M17%205l2%202M14%208l2%202'/%3E%3C/svg%3E"); }
.icon-user-plus { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2M8%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208M19%208v6M16%2011h6'/%3E%3C/svg%3E"); }
.icon-download { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v12M7%2010l5%205%205-5M5%2021h14'/%3E%3C/svg%3E"); }
.icon-upload { --icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021V9M7%2014l5-5%205%205M5%2021h14M5%205h14'/%3E%3C/svg%3E"); }

html,
body {
  font-size: 15px;
  line-height: 1.45;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 680px at 12% -8%, var(--bg-glow-1), transparent 60%),
    radial-gradient(1000px 620px at 100% 0%, var(--bg-glow-2), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button,
input,
select,
textarea,
.field,
.panel-card,
.form-section,
.rule-composer-group,
.compact-table,
.modal-panel,
.detail-section {
  min-width: 0;
}

.auth-body {
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-shell {
  width: min(380px, 100%);
}

.auth-card,
.panel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.auth-card {
  padding: 22px;
}

.auth-brand,
.brand-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.auth-brand {
  margin-bottom: 18px;
}

.auth-brand h1,
.brand-row h1 {
  margin: 0;
  font-size: var(--font-lg);
  line-height: 1.05;
}

.muted {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--font-md);
}

.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent), var(--brand-accent-end));
  color: white;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow:
    0 6px 16px var(--accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.brand-mark::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px 1px rgba(255, 255, 255, 0.85);
  opacity: 0.92;
}

.version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--font-md);
  font-weight: 800;
}

.version code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  cursor: help;
}

.user-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field > span:not(.input-action-row):not(.file-input):not(.file-input-button):not(.file-input-name) {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.field-hint {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.field.choice-toggle {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  cursor: pointer;
}

.field.choice-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.field.choice-toggle > span {
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.field.choice-toggle > span strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--text);
}

.field.choice-toggle > span small {
  font-size: var(--font-xs);
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
}

.traffic-mode-field small {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 500;
  line-height: 1.35;
}

.tracker-mode-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, max-content);
  gap: 14px;
  align-items: start;
}

.tracker-target-field[hidden],
.split-destinations-summary[hidden] {
  display: none;
}

.split-destinations-summary {
  align-self: stretch;
  justify-content: start;
  min-width: 260px;
}

.split-destinations-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px;
  align-items: center;
}

.split-destinations-actions .btn {
  min-height: var(--control-height);
  height: var(--control-height);
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}

.split-destinations-summary small,
.split-destinations-panel > small {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 600;
  line-height: 1.35;
}

.split-destinations-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-alt));
}

.split-destinations-panel[hidden] {
  display: none;
}

.split-destinations-list {
  display: grid;
  gap: 8px;
}

.split-geo-warning {
  display: block;
  padding: 9px 11px;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.split-geo-warning[hidden] {
  display: none;
}

.split-destination-row {
  display: grid;
  grid-template-columns: 34px minmax(190px, 260px) minmax(340px, 1fr) 48px;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.split-destination-row--pending-delete {
  opacity: .62;
  border-color: color-mix(in srgb, var(--danger) 52%, var(--line));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.split-destination-index {
  align-self: center;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 900;
  text-align: center;
}

.split-destination-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
  align-content: start;
}

.split-destination-row .field {
  gap: 4px;
  min-width: 0;
}

.split-destination-meta .field {
  align-self: stretch;
}

.split-destination-row textarea {
  min-height: 124px;
  resize: vertical;
}

.split-destination-weight input {
  height: var(--control-height);
  text-align: center;
}

.split-destination-countries {
  min-width: 0;
}

.split-destination-geo-grid {
  gap: 5px;
}

.split-destination-countries small {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.25;
}

.split-destination-row .icon-button {
  align-self: start;
  width: 48px;
  height: 124px;
  min-height: 0;
  margin-top: 17px;
}

.field-error-text {
  color: var(--danger);
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.traffic-mode-switch {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.traffic-mode-option {
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  min-height: var(--control-height-sm);
  padding: 5px 10px;
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.traffic-mode-option:hover {
  color: var(--text);
  background: var(--hover-soft);
}

.traffic-mode-option.is-active {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
}

.traffic-mode-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 16px;
}

.field-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}

.field-counter.is-empty {
  color: var(--muted);
  background: var(--surface-alt);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  min-height: var(--control-height);
  padding: 8px 11px;
  outline: none;
  font-size: var(--font-md);
  line-height: 1.35;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select:not([multiple]) {
  height: var(--control-height);
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='m6%209%206%206%206-6'%20fill='none'%20stroke='%2366758d'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
}

select[multiple] {
  height: auto;
  background-image: none;
}

textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.35;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[data-root-param-readonly] {
  border-style: dashed;
  background: var(--surface-alt);
  color: var(--muted);
  cursor: not-allowed;
  caret-color: transparent;
}

input[data-root-param-readonly]:hover,
input[data-root-param-readonly]:focus {
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
}

input.has-error,
textarea.has-error,
select.has-error {
  border-color: var(--danger);
  background: var(--danger-tint);
}

input.has-error:focus,
textarea.has-error:focus,
select.has-error:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.code-editor {
  min-height: 360px;
  background: var(--code-bg);
  color: var(--code-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.btn {
  min-height: var(--control-height);
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-md);
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.btn:not(:disabled):hover {
  filter: brightness(1.06);
}

.btn:not(:disabled):active {
  transform: translateY(1px);
  filter: brightness(0.94);
}

.btn-block {
  width: 100%;
}

.btn.primary {
  background: var(--accent);
  color: white;
}

.btn.secondary,
.btn.ghost {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--line);
}

.btn.secondary:not(:disabled):hover,
.btn.ghost:not(:disabled):hover {
  border-color: var(--accent);
  background: var(--hover-soft);
  filter: none;
}

.btn.danger {
  background: var(--danger);
  color: white;
}

.btn.mini {
  min-height: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0 10px;
  gap: 6px;
  font-size: 13px;
}

.btn .icon,
.menu-item .icon,
.icon-button .icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-basis: 16px;
}

.btn.mini .icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex-basis: 14px;
}

.btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.icon-button {
  transition: transform 0.08s ease, background-color 0.12s ease, color 0.12s ease;
}

.icon-button:not(:disabled):active {
  transform: translateY(1px);
}

.btn:focus-visible,
.icon-button:focus-visible,
.nav-item:focus-visible,
.theme-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--font-md);
}

.auth-totp-row[hidden] {
  display: none;
}

.app-shell {
  min-height: 100vh;
  padding-left: 260px;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  padding: 18px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  z-index: 5;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.theme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 4px;
}

.theme-switch button {
  min-height: var(--control-height-sm);
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.theme-switch button.active,
html[data-theme-mode="light"] .theme-switch button[data-theme-choice="light"],
html[data-theme-mode="dark"] .theme-switch button[data-theme-choice="dark"],
html[data-theme-mode="auto"] .theme-switch button[data-theme-choice="auto"] {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.auth-theme-switch {
  margin-top: 14px;
}

.system-load-card {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 10px;
}

.system-load-head,
.system-load-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.system-load-head strong {
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.system-load-head span {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
}

.system-load-card.is-stale .system-load-head span {
  color: var(--danger);
}

.system-load-list {
  display: grid;
  gap: 7px;
}

.system-load-row {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.system-load-line span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.system-load-line strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 180ms ease;
}

.system-load-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.system-load-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}

.system-load-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
  transition: width 420ms ease, background-color 180ms ease;
}

.system-load-row[data-level="warn"] .system-load-bar span {
  background: var(--accent);
}

.system-load-row[data-level="danger"] .system-load-bar span {
  background: var(--danger);
}

.system-load-row[data-level="warn"] .system-load-line strong {
  color: var(--accent-strong);
}

.system-load-row[data-level="danger"] .system-load-line strong {
  color: var(--danger);
}

.system-load-row--network {
  padding-top: 2px;
  border-top: 1px dashed var(--line);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 6px;
}

.nav-item {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 9px 11px;
  cursor: pointer;
  font-size: var(--font-md);
  font-weight: 700;
}

.nav-item.active,
html[data-active-view="links"] .nav-item[data-view="links"],
html[data-active-view="logs"] .nav-item[data-view="logs"],
html[data-active-view="landing"] .nav-item[data-view="landing"],
html[data-active-view="domains"] .nav-item[data-view="domains"],
html[data-active-view="users"] .nav-item[data-view="users"],
html[data-active-view="presets"] .nav-item[data-view="presets"],
html[data-active-view="backups"] .nav-item[data-view="backups"],
html[data-active-view="settings"] .nav-item[data-view="settings"] {
  background: var(--surface-alt);
  border-color: var(--line);
  color: var(--text);
}

.nav-item:hover:not(.active) {
  background: var(--hover-soft);
  color: var(--text);
}

.nav-item .icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-basis: 18px;
}

.main-panel {
  min-width: 0;
  padding: 22px;
}

html[data-twz-boot="loading"] .main-panel {
  position: relative;
  min-height: min(560px, calc(100vh - 44px));
  visibility: visible;
}

html[data-twz-boot="loading"] .main-panel > * {
  visibility: hidden;
}

html[data-twz-boot="loading"] .main-panel::before {
  content: "Загрузка панели…";
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--font-lg);
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: var(--shadow);
}

html[data-twz-boot="loading"] .main-panel::after {
  content: "";
  position: absolute;
  top: calc(50% + 34px);
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: twzPanelSpinner 0.75s linear infinite;
}

@keyframes twzPanelSpinner {
  to {
    transform: rotate(360deg);
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.page-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

html:not([data-active-view="logs"]) .page-actions {
  display: none;
}

.logs-auto-toggle {
  display: none;
}

html[data-active-view="logs"] .logs-auto-toggle {
  display: inline-flex;
}

.page-header h2,
.panel-card h3,
.panel-card h4 {
  margin: 0;
}

.page-header h2 {
  font-size: var(--font-xl);
  line-height: 1.15;
}

.panel-card h3 {
  font-size: var(--font-lg);
}

.panel-card h4 {
  font-size: var(--font-md);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.folder-tabs {
  display: flex;
  gap: 4px;
  align-items: end;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.folder-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  max-width: none;
  min-width: max-content;
  min-height: var(--control-height);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.folder-tab:hover,
.folder-tab:focus-visible {
  background: var(--hover-soft);
  color: var(--text);
  outline: none;
}

.folder-tab.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 -3px 12px rgba(124, 58, 237, 0.18);
}

.folder-tab:disabled,
.folder-tab[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.folder-tab:disabled:hover,
.folder-tab:disabled:focus-visible,
.folder-tab[aria-disabled="true"]:hover,
.folder-tab[aria-disabled="true"]:focus-visible {
  background: transparent;
  color: var(--muted);
  outline: none;
}

.folder-tab .icon {
  width: 15px;
  height: 15px;
  min-width: 15px;
}

.folder-tab span:last-child {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.folder-panel {
  display: none;
}

.folder-panel.active {
  display: block;
}

.traffic-rule-conflicts {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-tint);
  color: var(--text);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: var(--font-sm);
  line-height: 1.4;
}

.traffic-rule-conflicts[hidden] {
  display: none;
}

.traffic-rule-conflicts strong {
  display: block;
  color: var(--danger);
  font-size: var(--font-md);
  margin-bottom: 4px;
}

.traffic-rule-conflicts ul {
  margin: 0;
  padding-left: 18px;
}

.traffic-rule-conflicts li {
  margin: 2px 0;
}

.traffic-rules-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  align-items: start;
}

.traffic-rule-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 0;
  align-self: start;
  transition: border-color 120ms ease;
}

.traffic-rule-card:hover {
  border-color: var(--control-border);
}

.traffic-rule-card[open] {
  border-color: var(--control-border-strong);
}

.traffic-rule-card summary {
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 8px;
  align-items: center;
  min-height: var(--control-height);
  padding: 10px 12px;
  font-weight: 800;
  font-size: var(--font-md);
  list-style: none;
  background: var(--surface);
  border-radius: var(--radius);
  transition: background 120ms ease;
}

.traffic-rule-title {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.traffic-rule-count {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.traffic-rule-card[data-rule-active="true"] .traffic-rule-count {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.traffic-rule-card summary:hover {
  background: var(--hover-soft);
}

.traffic-rule-card summary::-webkit-details-marker {
  display: none;
}

.traffic-rule-card summary::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.16s ease;
}

.traffic-rule-card[open] summary {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.traffic-rule-card[open] summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.traffic-rule-card summary small {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.25;
}

.traffic-rule-fields {
  display: grid;
  gap: 12px;
  margin-top: 0;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.choice-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.choice-chip {
  display: inline-flex;
  min-width: 0;
  position: relative;
}

.choice-chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice-chip span {
  min-height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.choice-chip:hover span {
  border-color: var(--control-border-strong);
  background: var(--hover-soft);
}

.choice-chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.choice-chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.choice-chip-grid--dense .choice-chip span {
  min-height: 28px;
  padding-inline: 8px;
  font-size: var(--font-xs);
}

.rule-composer {
  gap: 12px;
  padding: 12px;
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.rule-composer .form-section-head {
  align-items: center;
  min-height: 34px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.rule-composer .form-section-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.rule-composer .form-section-head h4::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
}

.rule-composer .form-section-head span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.rule-composer-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--control-border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--font-sm);
  line-height: 1.25;
}

.rule-composer-note-label {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rule-composer-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-composer-steps li {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: var(--font-sm);
  cursor: help;
}

.rule-composer-steps li + li::before {
  content: "→";
  margin-right: 4px;
  margin-left: -4px;
  color: var(--muted);
  font-weight: 700;
}

.rule-composer-steps strong {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 22px;
}

.rule-composer-step-name {
  font-weight: 700;
}

.rule-composer-step-source {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: 0;
}

.rule-composer-step-source::before {
  content: "·";
  margin-right: 6px;
  color: var(--control-border);
}

.rule-composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.rule-composer-group {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  min-width: 0;
  box-shadow: none;
}

.rule-composer-group--traffic {
  grid-column: 1 / -1;
}

.rule-composer-group--request {
  grid-column: 1 / -1;
}

.rule-composer-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.rule-composer-group-head h5 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.rule-composer-group-head h5::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
}

.rule-composer-group-head span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
  max-width: 42ch;
}

.rule-composer-group > .grid-2 {
  gap: 10px;
}

.rule-composer-group .preset-group {
  gap: 6px;
}

.rule-composer-group .preset-chip-row {
  padding-top: 0;
  gap: 6px;
}

.traffic-rule-fields .preset-chip-row.compact {
  padding-top: 0;
  gap: 6px;
}

.traffic-help-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 10px;
  border-left: 2px solid var(--line);
  background: transparent;
}

.traffic-help-grid span {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--font-xs);
  line-height: 1.4;
}

.traffic-help-grid strong {
  display: inline;
  color: var(--text);
  font-size: var(--font-xs);
  font-weight: 700;
  margin-right: 4px;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.panel-card {
  padding: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--section-gradient-start), var(--surface-alt));
}

.form-section.emphasis {
  border-color: rgba(124, 58, 237, 0.32);
  background: var(--section-emphasis-bg);
}

.preset-edit-context {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(10, 102, 194, 0.32);
  border-radius: 8px;
  background: var(--edit-context-bg);
}

.preset-edit-context[hidden] {
  display: none;
}

[data-preset-editor-mount] {
  display: grid;
  gap: 14px;
}

[data-link-form].is-editing-preset [data-link-public-section] {
  display: none;
}

.form-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.form-section-head h4 {
  margin: 0;
  font-size: var(--font-lg);
}

.form-section-head span,
.mapping-column-title {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.card-head,
.actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* When the heading column holds wrapping text, anchor the action button to the top
   so it doesn't visually collide with the second/third lines of helper copy. */
.card-head:has(> div) {
  align-items: flex-start;
}

.card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.card-head > div .muted {
  margin: 0;
}

.card-head.compact {
  margin-bottom: 0;
}

.card-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.toggle-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 800;
  cursor: pointer;
}

.toggle-control input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.actions-row {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.form-submit-row {
  margin-bottom: 0;
}

.editor-save-dock {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 20;
  width: min(360px, calc(100vw - 44px));
  display: flex;
  justify-content: stretch;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.editor-save-dock .btn {
  width: 100%;
}

[data-link-form],
[data-preset-form] {
  padding-bottom: 76px;
}

.form-submit-row .btn,
.stack-form > .btn:not(.btn-block) {
  align-self: flex-start;
  min-width: 136px;
}

.item-list {
  display: grid;
  gap: 10px;
}

.item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-alt);
}

.item.compact-item {
  padding: 8px 10px;
}

.prefix-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.prefix-item .item-title {
  display: contents;
}

.prefix-panel {
  gap: 12px;
}

.prefix-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.prefix-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.prefix-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}

.prefix-list .prefix-item {
  min-height: 42px;
  padding: 6px 7px 6px 10px;
  background: var(--surface-alt);
}

.prefix-list .prefix-item .mono {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prefix-list .prefix-item .chip {
  padding: 4px 8px;
  font-size: var(--font-xs);
}

.prefix-item .actions-row {
  margin: 0;
}

.item .actions-row {
  margin-top: 10px;
  margin-bottom: 0;
}

.prefix-item .actions-row {
  margin: 0;
}

.prefix-preview {
  display: grid;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 8px;
}

.prefix-preview[hidden] {
  display: none;
}

.prefix-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.prefix-preview-head strong {
  font-size: var(--font-sm);
  text-transform: uppercase;
  color: var(--muted);
}

.prefix-preview-head .muted {
  margin: 0;
  font-size: var(--font-sm);
}

.prefix-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}

.prefix-candidate {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.prefix-candidate-value {
  min-width: 0;
  height: var(--control-height-sm);
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 9px;
  cursor: pointer;
  font: inherit;
}

.prefix-candidate-value:hover,
.prefix-candidate-value:focus-visible {
  border-color: var(--accent);
  background: var(--hover-soft);
  outline: none;
}

.prefix-candidate-value .mono {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
}

.link-preview {
  width: 100%;
  display: grid;
  gap: 5px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--code-text);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}

.link-preview-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  overflow-wrap: anywhere;
}

.link-preview-meta {
  color: var(--code-muted);
  font-size: var(--font-sm);
}

.link-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.link-facts span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  padding: 3px 8px;
  font-size: var(--font-sm);
  font-weight: 700;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  word-break: break-all;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--font-sm);
  font-weight: 800;
}

.chip.warn {
  background: var(--danger-soft);
  color: var(--danger);
}

.chip.neutral {
  background: var(--muted-soft);
  color: var(--text);
}

.input-action-row,
.preset-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.preset-chip-row {
  padding-top: 2px;
}

.mapping-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
}

.mapping-toolbar-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mapping-toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--line);
  margin: 0 2px;
}

@media (max-width: 720px) {
  .mapping-toolbar-divider {
    display: none;
  }
}

.input-action-row input {
  min-width: 0;
  flex: 1 1 180px;
}

.input-action-row .icon-only {
  flex: 0 0 var(--control-height);
}

.btn.icon-only {
  width: var(--control-height);
  padding: 0;
}

.btn.icon-only .icon {
  margin: 0;
}

.preset-group {
  display: grid;
  gap: 8px;
}

.preset-group > span {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
}

.preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.preset-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 800;
  line-height: 1.25;
  color: var(--muted);
  background: var(--muted-soft);
}

.preset-status[data-status="applied"] {
  color: var(--success);
  background: var(--success-soft);
}

.preset-status[data-status="pending"],
.preset-status[data-status="missing"] {
  color: var(--danger);
  background: var(--danger-soft);
}

.wildcard-subdomain-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 800;
  line-height: 1.25;
  color: var(--muted);
  background: var(--muted-soft);
}

.wildcard-subdomain-status:empty {
  display: none;
}

.wildcard-subdomain-status[data-status="available"] {
  color: var(--success);
  background: var(--success-soft);
}

.wildcard-subdomain-status[data-status="invalid"],
.wildcard-subdomain-status[data-status="taken"] {
  color: var(--danger);
  background: var(--danger-soft);
}

.wildcard-subdomain-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wildcard-subdomain-suggestions[hidden] {
  display: none;
}

.wildcard-subdomain-suggestion {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 9px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 800;
}

.wildcard-subdomain-suggestion:hover,
.wildcard-subdomain-suggestion:focus-visible {
  border-color: rgba(124, 58, 237, 0.34);
  background: rgba(124, 58, 237, 0.1);
}

.list-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(130px, 0.72fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.bulk-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
}

.bulk-select-all,
.bulk-card-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bulk-card-select span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-select-all {
  font-size: var(--font-sm);
  font-weight: 800;
  color: var(--text);
}

.bulk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.row-select,
.bulk-select-all input[type="checkbox"],
.bulk-card-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.row-select:focus,
.bulk-select-all input[type="checkbox"]:focus,
.bulk-card-select input[type="checkbox"]:focus {
  box-shadow: none;
}

.row-select:focus-visible,
.bulk-select-all input[type="checkbox"]:focus-visible,
.bulk-card-select input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.compact-table {
  overflow-x: hidden;
  overflow-y: visible;
}

.compact-table table {
  min-width: 0;
  table-layout: fixed;
}

.compact-table .link-list-table,
.compact-table .domain-list-table,
.compact-table .user-list-table,
.compact-table .preset-list-table {
  min-width: 100%;
}

/*
 * Keep action columns inside the visible work area. The concrete column widths
 * reserve button space; URL/rule cells use marquee overflow instead of forcing
 * the table wider than its container.
 */
.compact-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  overflow: hidden;
  font-size: var(--table-font-size);
  line-height: 1.25;
  vertical-align: middle;
}

.compact-table td.actions-cell {
  overflow: visible;
  padding-inline: 4px;
}

.compact-table td.actions-cell .compact-actions {
  min-width: max-content;
}

.compact-table th {
  overflow: hidden;
  font-size: var(--table-header-font-size);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.compact-table .primary-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
  align-content: center;
}

.compact-table .primary-cell strong {
  font-size: var(--table-title-font-size);
  line-height: 1.25;
}

.compact-table .secondary-line,
.compact-table .meta-line {
  color: var(--muted);
  font-size: var(--font-sm);
}

.compact-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-end;
}

.card-head > .actions-row.compact-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 0 auto;
}

.card-head > .actions-row.compact-actions .muted {
  margin: 0;
  white-space: nowrap;
}

.compact-actions .icon-button {
  width: var(--table-action-size);
  height: var(--table-action-size);
  min-width: var(--table-action-size);
  border-radius: 7px;
}

.compact-actions .icon-button .icon {
  width: var(--table-action-icon-size);
  height: var(--table-action-icon-size);
  min-width: var(--table-action-icon-size);
  flex-basis: var(--table-action-icon-size);
}

.compact-actions .icon-button.link-power-button--enable {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  background: color-mix(in srgb, var(--success) 11%, var(--surface-alt));
}

.compact-actions .icon-button.link-power-button--disable {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-alt));
}

.compact-actions .icon-button.link-power-button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-alt);
}

.compact-actions .icon-button.test-access-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-muted));
}

.compact-actions .icon-button.test-access-button.test-access-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
  height: 32px;
  min-height: 32px;
  padding: 0 6px;
  gap: 4px;
  box-sizing: border-box;
}

.compact-actions .icon-button.test-access-active.stale {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-muted);
}

.compact-actions .icon-button.test-access-button:disabled {
  cursor: not-allowed;
  opacity: 0.74;
}

.test-access-count {
  display: inline-block;
  min-width: 30px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}

.owner-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.owner-cell strong,
.owner-cell small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-cell strong {
  font-size: var(--font-sm);
}

.owner-cell small {
  color: var(--muted);
  font-size: var(--font-xs);
}

.owner-cell.compact {
  max-width: 120px;
}

.select-col {
  width: 34px;
}

.entity-id-col {
  width: 58px;
}

.link-id-col {
  width: 82px;
}

@media (max-width: 1200px) {
  /* Ultra-narrow laptops or splits with sidebar+side-tools: shrink URL columns
     further and trim metrics+redirect badges. Marquee handles overflow. */
  .link-id-col {
    width: 72px;
  }

  .link-metrics-col {
    width: 120px;
  }
  .link-redirect-col {
    width: 78px;
  }
  .link-public-col,
  .link-target-col {
    width: 130px;
  }
  .link-name-col {
    width: 120px;
  }
}

.entity-id-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: var(--table-pill-height);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 0 8px;
  font-size: var(--font-xs);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.link-id-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.link-id-status .entity-id-cell {
  min-width: 40px;
  padding-inline: 7px;
}

.link-state-dot {
  width: var(--table-dot-size);
  height: var(--table-dot-size);
  flex: 0 0 var(--table-dot-size);
  border: 1px solid color-mix(in srgb, var(--surface) 70%, currentColor);
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.link-state-dot--enabled {
  color: var(--success);
  background: var(--success);
}

.link-state-dot--disabled {
  color: var(--danger);
  background: var(--danger);
}

.select-cell {
  text-align: center;
}

/* Keep the links table inside the visible work area. Long URL values collapse
   into their marquee cells instead of making the whole table scroll sideways. */
.compact-table .link-list-table {
  width: 100%;
  min-width: 0;
}

.link-name-col {
  width: 17%;
}

.link-owner-col {
  width: 11%;
}

.link-redirect-col {
  width: 78px;
}

.link-metrics-col {
  width: 128px;
}

.link-public-col {
  width: 18%;
}

.link-target-col {
  width: 17%;
}

.link-actions-col {
  width: 220px;
}

.domain-host-col {
  width: auto;
}

.domain-mode-col {
  width: 88px;
}

.domain-health-col {
  width: 92px;
}

.domain-registration-col {
  width: 76px;
}

.domain-actions-col {
  width: 220px;
}

.user-name-col {
  width: auto;
}

.user-role-col {
  width: 130px;
}

.user-status-col {
  width: 210px;
}

.user-dates-col {
  width: 170px;
}

.user-actions-col {
  width: 116px;
}

.compact-table .preset-list-table {
  width: 100%;
  min-width: 0;
}

.preset-name-col {
  width: 28%;
}

.preset-access-col {
  width: 92px;
}

.preset-rules-col {
  width: auto;
}

.preset-updated-col {
  width: 104px;
}

.preset-actions-col {
  width: 220px;
}

.preset-list-table td.actions-cell {
  padding-inline: 4px;
}

.preset-access-line {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 5px;
  min-height: 22px;
  color: var(--text);
  font-size: var(--font-xs);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.preset-access-dot {
  flex: 0 0 var(--table-dot-size);
  width: var(--table-dot-size);
  height: var(--table-dot-size);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--muted-soft);
}

.preset-access-dot.is-enabled {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.preset-access-dot.is-disabled {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.preset-access-label,
.preset-access-separator {
  color: var(--muted);
}

.preset-access-status.is-enabled {
  color: var(--success);
}

.preset-access-status.is-disabled {
  color: var(--danger);
}

.link-row,
.domain-row {
  cursor: pointer;
}

.link-row.is-disabled {
  background: color-mix(in srgb, var(--surface-alt) 74%, var(--muted-soft));
}

.link-row.is-disabled .url-cell,
.link-row.is-disabled .target-url-cell,
.link-row.is-disabled .redirect-mode-chip,
.link-row.is-disabled .metric-badge {
  opacity: 0.68;
}

.link-row:hover,
.link-row:focus,
.domain-row:hover,
.domain-row:focus {
  background: var(--hover-soft);
  outline: none;
}

.marquee-link {
  width: 100%;
  max-width: 100%;
  min-height: 30px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text);
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.marquee-link:hover,
.marquee-link:focus-visible {
  background: var(--hover-soft);
  border-color: var(--control-border);
  outline: none;
}

.marquee-text {
  display: block;
  white-space: nowrap;
  font-size: inherit;
  line-height: 1.3;
  color: inherit;
  transform: translateX(0);
  transition: transform 1.8s ease-out;
  will-change: transform;
}

.marquee-link.is-overflowing:hover .marquee-text,
.marquee-link.is-overflowing:focus .marquee-text,
.marquee-inline.is-overflowing:hover .marquee-text,
.marquee-inline.is-overflowing:focus .marquee-text {
  transform: translateX(var(--marquee-distance, 0));
  transition-duration: var(--marquee-duration, 7s);
  transition-timing-function: linear;
}

.marquee-inline {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.marquee-inline .marquee-text {
  display: block;
  font-family: inherit;
}

.marquee-link .marquee-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
}

.metric-badge {
  min-width: 50px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--surface) 82%, #fff);
  border-radius: 999px;
  padding: 0 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  align-self: center;
  pointer-events: none;
}

.link-metrics-cell {
  padding-inline: 6px;
  text-align: center;
}

.metric-stack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  white-space: nowrap;
}

.metric-badge--incoming {
  background: #d4482f;
}

.metric-badge--passed {
  background: #168a67;
}

.redirect-cell {
  padding-inline: 4px;
  text-align: center;
}

.redirect-mode-chip {
  min-width: 42px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.link-title-cell strong {
  font-size: var(--table-title-font-size);
  line-height: 1.25;
}

.link-preset-line {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preset-line.is-empty {
  opacity: 0.72;
  font-weight: 700;
}

.link-created-line {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-state-badge {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.link-state-badge--moderation {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-strong);
}

.link-state-badge--split {
  border-color: color-mix(in srgb, var(--success) 42%, var(--line));
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
}

.split-stats-line {
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 6px;
  align-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.split-stats-line::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 35;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(460px, 72vw);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.split-stats-line:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.split-stat-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  white-space: nowrap;
}

.split-stat-chip + .split-stat-chip::before {
  content: "·";
  margin-right: 3px;
  color: var(--muted);
}

.split-stat-chip strong {
  color: var(--success);
  font-size: inherit;
  line-height: 1;
}

.split-stat-name {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}

.split-stat-weight,
.split-stat-unit {
  color: var(--muted);
}

.split-stat-chip--more {
  padding: 0;
  color: var(--muted);
}

.compact-table .url-cell {
  max-width: none;
}

.compact-table .target-url-cell {
  max-width: none;
}

.target-url-cell--summary {
  cursor: default;
}

.compact-table .domain-host-cell {
  max-width: none;
}

.domain-registration-cell {
  white-space: nowrap;
}

.registration-chip {
  min-width: 54px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.registration-chip.warn {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.registration-chip.danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 15%, var(--surface-alt));
  color: var(--danger);
}

.compact-rules {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.compact-rules .marquee-text {
  font-family: inherit;
  font-size: var(--table-font-size);
}

.compact-time,
.compact-facts {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: var(--font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-facts.warn-text,
.warn-text {
  color: var(--danger);
}

.share-panel {
  position: relative;
  display: grid;
  gap: 10px;
}

.share-suggestions {
  position: absolute;
  z-index: 10;
  right: 0;
  left: 0;
  top: 62px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 6px;
}

.share-suggestions[hidden] {
  display: none;
}

.share-suggestion,
.share-row {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 7px 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.share-suggestion:hover,
.share-suggestion:focus {
  border-color: rgba(124, 58, 237, 0.24);
  background: rgba(124, 58, 237, 0.1);
}

.share-selected {
  display: grid;
  gap: 8px;
}

.share-row {
  border-color: var(--line);
  background: var(--surface-alt);
}

.share-row span,
.share-suggestion {
  min-width: 0;
}

.share-row strong,
.share-suggestion strong,
.share-row small,
.share-suggestion small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-row small,
.share-suggestion small {
  color: var(--muted);
  font-size: var(--font-sm);
}

.stats-grid {
  display: grid;
  grid-template-columns: minmax(104px, 1.14fr) repeat(12, minmax(62px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  overflow: visible;
}

.stat-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  cursor: help;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 8px 9px;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  outline: none;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}

.stat-card:hover,
.stat-card:focus-visible,
.stat-card:focus-within {
  z-index: 50;
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card-popover {
  position: absolute;
  top: calc(100% + 7px);
  left: -1px;
  min-width: min(310px, 82vw);
  max-width: min(380px, 86vw);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.stat-card:nth-last-child(-n + 4) .stat-card-popover {
  right: -1px;
  left: auto;
}

.stat-card:hover .stat-card-popover,
.stat-card:focus-visible .stat-card-popover,
.stat-card:focus-within .stat-card-popover {
  opacity: 1;
  transform: translateY(0);
}

.stat-card-popover span,
.stat-card-popover strong,
.stat-card-popover ul,
.stat-card-popover li {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.stat-card-popover span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.stat-card-popover strong {
  margin-top: 3px;
  font-size: 20px;
}

.stat-card-popover ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.stat-card-popover li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.log-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}

.log-filters .field {
  margin: 0;
}

.log-filters .field.is-dirty {
  border-radius: 10px;
  outline: 2px solid rgba(124, 58, 237, 0.42);
  outline-offset: 3px;
}

.log-filters .field.is-dirty > span:first-child {
  color: var(--accent-strong);
}

.log-filters .field--wide {
  grid-column: span 2;
}

.filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}

.logs-live-zone {
  position: relative;
  isolation: isolate;
  min-height: 160px;
}

.logs-live-content {
  transition: filter 180ms ease, opacity 180ms ease;
}

.logs-live-zone .table-wrap {
  overflow-x: hidden;
}

.logs-refresh-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.logs-live-zone.is-refreshing .logs-live-content {
  filter: blur(2px);
  opacity: 0.62;
}

.logs-live-zone.is-refreshing .logs-refresh-overlay {
  opacity: 1;
}

.logs-refresh-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(100, 116, 139, 0.28);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: twz-spin 0.75s linear infinite;
}

@keyframes twz-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1280px) {
  .log-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .log-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .log-filters .field--wide {
    grid-column: span 2;
  }
}

.table-sort {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  font-weight: 800;
}

.table-sort.is-active {
  color: var(--accent-dark);
}

.pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.pagination-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination-page.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  opacity: 1;
}

.tag-editor {
  width: 100%;
  min-height: var(--control-height);
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 5px 6px;
}

.tag-editor:not(.has-tags) {
  height: var(--control-height);
  min-height: var(--control-height);
  flex-wrap: nowrap;
  padding: 0 10px;
}

.tag-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.tag-editor-input {
  width: 120px;
  min-height: 28px;
  flex: 1 1 120px;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 4px 5px;
}

.tag-editor:not(.has-tags) .tag-editor-input {
  height: calc(var(--control-height) - 2px);
  min-height: calc(var(--control-height) - 2px);
  padding: 0;
}

.tag-editor-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.country-suggestions {
  position: absolute;
  z-index: 45;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 4px;
}

.country-suggestions[hidden] {
  display: none;
}

.country-suggestion {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.country-suggestion:hover,
.country-suggestion:focus-visible {
  background: var(--hover-soft);
  outline: none;
}

.country-suggestion-code {
  min-width: 28px;
  font-weight: 800;
}

.country-suggestion-name {
  color: var(--muted);
}

.condition-tag-editor {
  width: 100%;
  min-height: var(--control-height-sm);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 3px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: text;
}

.condition-tag-editor::-webkit-scrollbar {
  display: none;
}

.condition-tag-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.16);
}

.condition-tag-editor .tag-editor-input {
  height: 24px;
  min-height: 24px;
  flex: 1 1 140px;
  min-width: 110px;
  padding: 2px 4px;
  font-size: var(--font-sm);
}

.condition-tag-editor.has-tags .tag-editor-input {
  width: auto;
  flex: 1 1 110px;
  min-width: 110px;
  padding-inline: 4px;
}

.condition-param-tag {
  min-height: 24px;
  height: 24px;
  max-width: 190px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 6px 0 9px;
  font-size: var(--font-sm);
  font-weight: 700;
  line-height: 1;
}

.condition-param-tag button {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  outline: none;
}

.condition-param-tag button:hover,
.condition-param-tag button:focus-visible {
  background: var(--muted-soft);
  color: var(--text);
}

.condition-param-tag button:focus:not(:focus-visible) {
  background: transparent;
  color: var(--muted);
}

.tag-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 3px 8px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 800;
}

.tag-clear {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 3px 7px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 800;
}

.tag-clear:hover,
.tag-clear:focus {
  background: var(--muted-soft);
  color: var(--text);
}

.mapping-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.mapping-sections,
.mapping-targets {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.mapping-targets {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mapping-section-card,
.mapping-target-row {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.mapping-pair-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.95fr) 28px minmax(180px, 1.05fr);
  align-items: center;
  gap: 8px;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.mapping-section-card,
.mapping-pair-card {
  cursor: grab;
}

.mapping-pair-row:active {
  cursor: grabbing;
}

.mapping-pair-card {
  min-height: 72px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 10px;
}

.mapping-pair-head,
.mapping-section-meta,
.mapping-target-state,
.mapping-target-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mapping-section-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mapping-section-label .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-source-card input {
  margin-top: 8px;
  min-height: 34px;
  padding: 7px 9px;
}

.mapping-pair-arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
}

.mapping-target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  min-height: 0;
}

.mapping-target-row.assigned,
.mapping-target-card.assigned {
  border-color: rgba(15, 118, 110, 0.34);
  background: var(--success-tint);
}

.mapping-target-row.empty,
.mapping-target-card.empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  background: var(--surface-alt);
}

.mapping-target-row.drop-ready {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

.mapping-target-row p {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-target-row > div:first-child {
  min-width: 0;
}

.mapping-target-row > div:first-child .mono,
.mapping-target-row > div:first-child .muted {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-target-card p {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-target-state {
  min-width: 76px;
  justify-self: end;
  justify-content: flex-end;
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.icon-button {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-md);
  line-height: 1;
}

.icon-button.danger {
  color: var(--danger);
  border-color: rgba(194, 65, 12, 0.24);
  background: var(--danger-tint);
}

.condition-builder {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.condition-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--control-height-sm);
}

.condition-builder-head > span {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.condition-list {
  display: grid;
  gap: 8px;
}

.condition-group {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
}

.condition-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.condition-group-head > span {
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.condition-group-head > small {
  font-size: var(--font-xs);
  font-weight: 700;
}

.condition-group-list {
  display: grid;
  gap: 6px;
}

.condition-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.condition-separator::before,
.condition-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.condition-separator > span {
  min-width: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  padding: 2px 8px;
  text-align: center;
}

.condition-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 0.9fr) minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 10px;
}

.condition-empty {
  min-height: 40px;
  display: flex;
  align-items: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px 10px;
}

.mapping-empty {
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.manual-mapping summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--font-md);
  font-weight: 800;
}

.manual-mapping .field {
  margin-top: 10px;
}

.preset-details {
  margin-top: 10px;
}

.preset-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--font-md);
  font-weight: 800;
}

.anti-spy-detail {
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.anti-spy-detail > summary {
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-sm);
  list-style: none;
}

.anti-spy-detail > summary::-webkit-details-marker {
  display: none;
}

.anti-spy-detail > summary::before {
  content: "▸";
  display: inline-block;
  color: var(--muted);
  font-size: 11px;
  width: 10px;
  transition: transform 120ms ease;
}

.anti-spy-detail[open] > summary::before {
  transform: rotate(90deg);
}

.anti-spy-detail > summary strong {
  font-weight: 700;
  color: var(--text);
}

.anti-spy-detail > summary .muted {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}

.anti-spy-detail > *:not(summary) {
  padding: 0 12px 12px;
}

.anti-spy-edit-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.anti-spy-edit-form textarea,
.anti-spy-edit-form input[type="text"],
.anti-spy-edit-form input[type="number"] {
  font-family: var(--font-mono);
  font-size: var(--font-sm);
}

.anti-spy-edit-form .actions-row {
  margin-top: 8px;
  margin-bottom: 0;
}

.anti-spy-edit-form .form-error:not([hidden]) {
  color: var(--danger, #d04545);
  font-size: var(--font-xs);
  margin: 0 0 0 8px;
}

/* Chip-list editors for anti-spy admin settings (ASN, scanner sigs, org keywords) */
.asn-chip-list,
.chip-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px 6px;
  margin: 10px 0 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: 46px;
  max-height: 260px;
  overflow-y: auto;
  scroll-padding-block: 10px;
}

.anti-spy-detail > .asn-chip-list,
.anti-spy-detail > .chip-list {
  padding: 12px;
}

.asn-chip,
.chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--font-mono);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
}

.asn-chip.source-admin,
.chip-tag.source-admin {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.55);
}

.asn-chip.source-seed,
.chip-tag.source-default {
  background: var(--surface-alt);
  color: var(--muted);
}

.asn-chip-tier {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

.asn-chip-tier.tier-high { background: rgba(208, 69, 69, 0.18); color: #c63838; }
.asn-chip-tier.tier-medium { background: rgba(124, 58, 237, 0.18); color: #6d28d9; }
.asn-chip-tier.tier-low { background: rgba(102, 117, 141, 0.18); color: var(--muted); }
.asn-chip-tier.tier-remove { background: rgba(208, 69, 69, 0.18); color: #c63838; text-decoration: line-through; }

.asn-chip-name,
.chip-tag-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asn-chip-remove,
.chip-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.asn-chip-remove:hover,
.chip-tag-remove:hover {
  background: rgba(208, 69, 69, 0.18);
  color: #c63838;
}

.asn-add-row,
.chip-add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.asn-add-row input[type="number"] {
  width: 130px;
  flex: 0 0 auto;
}

.asn-add-row select {
  width: 180px;
  flex: 0 0 auto;
}

.asn-add-row input[type="text"],
.chip-add-row input[type="text"] {
  flex: 1 1 200px;
  min-width: 200px;
}

.asn-add-row button,
.chip-add-row button {
  flex: 0 0 auto;
}

.preset-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px 16px;
  margin-top: 10px;
}

.preset-settings-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.preset-settings-grid > .preset-settings-row--wide {
  grid-column: 1 / -1;
}

.preset-settings-grid span {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
}

.preset-settings-grid code {
  overflow-wrap: anywhere;
}

.ready-link-box {
  display: grid;
  gap: 7px;
}

.ready-link-box > span {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ready-link {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 10px 12px;
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  text-align: left;
  word-break: break-all;
}

.ready-link:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.restore-public-url-box {
  display: grid;
  gap: 7px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.restore-public-url-box > span {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.restore-public-url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.restore-public-url-row input {
  min-height: 42px;
}

.restore-public-url-row input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.restore-public-url-box small {
  color: var(--muted);
  font-size: var(--font-sm);
}

@media (max-width: 760px) {
  .restore-public-url-row {
    grid-template-columns: 1fr;
  }
}

.created-user-share {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 8px;
  background: var(--success-tint);
  padding: 12px;
}

.created-user-share[hidden] {
  display: none;
}

.created-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.created-user-grid div {
  display: grid;
  gap: 4px;
}

.created-user-grid span {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.created-user-grid code,
.created-user-text {
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  overflow-wrap: anywhere;
}

.created-user-text {
  width: 100%;
  resize: vertical;
}

.table-wrap {
  overflow: auto;
}

.table-wrap.compact-table {
  overflow-x: hidden;
  overflow-y: visible;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: var(--font-md);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 800;
}

.logs-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.log-time-col {
  width: 8%;
}

.log-link-col {
  width: 17%;
}

.log-ip-col {
  width: 22%;
}

.log-action-col {
  width: 6%;
}

.log-reason-col {
  width: 18%;
}

.log-client-col {
  width: 14%;
}

.log-env-col {
  width: 15%;
}

.logs-table th,
.logs-table td {
  padding: 6px 7px;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  vertical-align: middle;
}

.logs-table .log-action-cell {
  padding-inline: 4px;
  text-align: center;
  overflow: visible;
}

.logs-table .table-placeholder-cell {
  padding: 28px 12px;
  text-align: center;
  overflow: visible;
}

.table-loading-state,
.table-empty-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  padding: 0 16px;
  font-size: var(--font-sm);
  font-weight: 900;
}

.table-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: twzPanelSpinner 0.75s linear infinite;
}

.logs-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.logs-table .log-time,
.logs-table .log-link,
.logs-table .log-ip-value {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.logs-table .log-link-owner {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-table .log-network {
  display: grid;
  gap: 1px;
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
}

.logs-table .log-net-place {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.logs-table .log-net-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.logs-table .log-net-asn {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-xs);
}

.logs-table .log-net-cf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.14);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.logs-table .decision-icon--compact {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
}

.logs-table .log-network--empty {
  color: var(--muted);
}

.logs-table .log-date,
.logs-table .log-clock {
  display: block;
  white-space: nowrap;
}

.logs-table .log-clock {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.logs-table .chip {
  min-height: 22px;
  padding: 2px 8px;
  max-width: 100%;
  white-space: nowrap;
}

.decision-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.decision-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(420px, 72vw);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  font-size: var(--font-sm);
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.decision-icon:hover::after,
.decision-icon:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.decision-icon--compact {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}

.decision-icon .icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
}

.decision-icon--pass {
  border-color: #00ff8a;
  background: #00e676;
  color: #062b18;
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.22), 0 8px 18px rgba(0, 230, 118, 0.26);
}

.decision-icon--block {
  border-color: #ff5a6f;
  background: #ff1744;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 23, 68, 0.22), 0 8px 18px rgba(255, 23, 68, 0.26);
}

.logs-table .one-line,
.logs-table .mono {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.preview-panel iframe {
  width: 100%;
  height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  display: block;
}

.landing-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "sidebar editor"
    "sidebar preview";
  gap: 14px;
  align-items: start;
}

.landing-workspace .landing-sidebar-panel {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: var(--landing-sidebar-height, auto);
  max-height: var(--landing-sidebar-height, none);
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
}

.landing-workspace .landing-editor-panel {
  grid-area: editor;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.landing-workspace .preview-panel {
  grid-area: preview;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.landing-editor-panel .code-editor {
  min-height: 320px;
  resize: vertical;
}

.landing-profile-controls {
  display: grid;
  gap: 8px;
  padding-bottom: 2px;
}

.compact-form {
  gap: 10px;
}

.file-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.file-input input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.file-input-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-height-sm);
  padding: 0 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--font-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.file-input:hover .file-input-button,
.file-input input[type="file"]:focus-visible + .file-input-button {
  background: var(--hover-soft);
  border-color: var(--control-border-strong);
}

.file-input input[type="file"]:focus-visible + .file-input-button {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.file-input-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-input-name.has-file {
  color: var(--text);
}

.landing-file-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

.inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inline-actions.compact {
  gap: 6px;
}

.inline-actions.landing-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.landing-profile-actions input {
  grid-column: 1 / -1;
  min-width: 0;
}

.landing-profile-actions .btn {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
}

.landing-editor-panel .actions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
  gap: 8px;
}

.landing-editor-panel .actions-row .btn {
  width: 100%;
  min-width: 0;
}

.landing-file-toolbar-label {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.landing-file-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 8px 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.landing-file-row:hover {
  border-color: var(--control-border);
  background: var(--hover-soft);
}

.landing-file-row.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.landing-file-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.landing-file-row button {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.landing-file-row .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-file-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  z-index: 50;
}

html[data-active-view="links"]:has([data-folder-panel="link-builder"]:not([hidden])) .toast-stack,
html[data-active-view="presets"]:has([data-folder-panel="preset-create"]:not([hidden])) .toast-stack,
html[data-active-view="presets"]:has([data-folder-panel="preset-editor"]:not([hidden])) .toast-stack {
  bottom: 104px;
}

.toast {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--code-text);
  box-shadow: var(--shadow);
}

.toast-undo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 16px;
  min-width: 280px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.toast-undo-text {
  font-weight: 600;
  font-size: var(--font-md);
}

.toast-undo-cancel {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--code-text);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.toast-undo-cancel:hover {
  border-color: var(--accent);
  background: var(--hover-soft);
}

.toast-undo-cancel:active {
  transform: translateY(1px);
}

.toast-undo-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border-radius: 0 0 8px 8px;
}

.toast-undo-progress-bar {
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(1);
}

.toast-undo.toast-undo-cancelled .toast-undo-text {
  color: var(--muted);
}

.toast-undo.toast-undo-done .toast-undo-text {
  color: var(--accent);
}

.toast-undo.toast-undo-error .toast-undo-text {
  color: var(--danger);
}

.confirm-panel {
  width: min(440px, 100%);
  gap: 12px;
}

.confirm-message {
  margin: 0;
  color: var(--text);
  font-size: var(--font-md);
  line-height: 1.5;
  white-space: pre-line;
}

.confirm-actions {
  justify-content: flex-end;
}

.user-delete-panel {
  width: min(620px, 100%);
}

.user-delete-owned {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.user-delete-owned > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.user-delete-owned span {
  color: var(--muted);
  font-size: var(--font-xs);
}

.user-delete-owned strong {
  font-size: var(--font-lg);
}

.user-delete-options {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.user-delete-options legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.user-delete-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  cursor: pointer;
}

.user-delete-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.user-delete-option.danger:has(input:checked) {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.user-delete-option input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 3px 0 0;
  accent-color: var(--accent);
}

.user-delete-option > span {
  display: grid;
  gap: 3px;
  color: var(--text);
  text-transform: none;
}

.user-delete-option small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.35;
}

.user-delete-actions {
  justify-content: flex-end;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--modal-backdrop);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-panel {
  width: min(720px, 100%);
  max-height: min(780px, calc(100vh - 36px));
  overflow: auto;
  clip-path: inset(0 round var(--radius-lg));
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0;
  align-content: start;
}

.modal-panel .card-head {
  align-items: flex-start;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 22px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
  margin-bottom: 0;
}

.modal-panel > :not(.card-head) {
  margin-inline: 22px;
}

.modal-panel > :not(.card-head) + :not(.card-head) {
  margin-top: 14px;
}

.modal-panel > .card-head + :not(.card-head) {
  margin-top: 14px;
}

.modal-panel > :last-child:not(.card-head) {
  margin-bottom: 22px;
}

.modal-panel .actions-row {
  margin-bottom: 0;
  gap: 8px;
}

.two-factor-panel {
  width: min(680px, calc(100vw - 36px));
}

.two-factor-panel .card-head {
  padding: 18px 20px;
}

.two-factor-panel > :not(.card-head) {
  margin-inline: 20px;
}

.two-factor-panel > .card-head + :not(.card-head) {
  margin-top: 16px;
}

.two-factor-panel > :not(.card-head) + :not(.card-head) {
  margin-top: 14px;
}

.two-factor-panel > :last-child:not(.card-head) {
  margin-bottom: 20px;
}

.modal-detail-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.log-row {
  cursor: pointer;
}

.log-row:hover,
.log-row:focus {
  background: var(--hover-soft);
  outline: none;
}

.log-detail-modal {
  width: min(1180px, 100%);
}

.link-detail-modal,
.domain-detail-modal {
  width: min(980px, 100%);
}

.detail-block,
.detail-section {
  display: grid;
  gap: 10px;
}

.detail-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-alt);
  align-content: start;
}

.detail-section-error {
  border-color: var(--danger);
  background: var(--danger-tint);
}

.detail-section-anti-spy {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--section-emphasis-bg);
}

.detail-subsection {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.detail-section-primary {
  background: var(--surface);
}

.detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.detail-columns > .detail-section {
  height: 100%;
  border-radius: var(--radius);
}

.detail-block h4,
.detail-section h4 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-subsection h5 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-content: start;
}

.detail-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.traffic-rule-detail {
  display: grid;
  gap: 10px;
}

.traffic-rule-detail-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.traffic-rule-detail h5 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.rule-match-list {
  display: grid;
  gap: 6px;
}

.rule-match-item {
  display: grid;
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.rule-match-item > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.rule-match-item > code {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: var(--font-sm);
  line-height: 1.35;
}

.detail-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: var(--font-sm);
  line-height: 1.4;
}

.detail-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.detail-field-wide {
  grid-column: 1 / -1;
}

.detail-field span {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-field code,
.readonly-field code {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: var(--font-sm);
  line-height: 1.35;
}

.detail-field code.mono,
.detail-copy-line code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
}

.detail-copy-line {
  display: grid;
  grid-template-columns: minmax(105px, 0.18fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.detail-copy-line.compact-copy {
  grid-template-columns: minmax(120px, 180px) minmax(0, min(360px, 100%)) auto;
  justify-content: start;
}

.split-detail-list {
  display: grid;
  gap: 8px;
}

.split-detail-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.18fr) 58px 74px minmax(76px, auto) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.split-detail-name,
.split-detail-weight,
.split-detail-count {
  min-width: 0;
  font-size: var(--font-sm);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-detail-weight {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-alt));
}

.split-detail-count {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface-alt));
}

.detail-copy-line > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-copy-line code {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--code-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-copy-line code.marquee-inline {
  text-overflow: clip;
}

.detail-copy-line code.marquee-inline .marquee-text {
  font-family: inherit;
  font-size: inherit;
}

.detail-copy-line.compact-copy code {
  background: var(--surface);
  color: var(--text);
}

.detail-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.detail-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.detail-table th,
.detail-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-table td {
  max-width: 0;
}

.detail-table tr:last-child td {
  border-bottom: 0;
}

.detail-table--signals th:first-child,
.detail-table--signals td:first-child {
  width: 38%;
}

.detail-table--signals th:nth-child(2),
.detail-table--signals td:nth-child(2) {
  width: 58px;
  text-align: center;
}

.detail-table--signals th:last-child,
.detail-table--signals td:last-child {
  text-align: left;
}

.detail-table--mapping th:last-child,
.detail-table--mapping td:last-child {
  width: 82px;
  text-align: center;
}

.detail-table .mono {
  white-space: nowrap;
}

.detail-table-line {
  width: 100%;
}

.detail-table-line .marquee-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
}

.two-factor-setup {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  gap: 16px 18px;
  align-items: start;
}

.two-factor-setup[hidden] {
  display: none;
}

.two-factor-qr-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 10px;
  width: min(100%, 220px);
}

.two-factor-qr-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.two-factor-setup-primary,
.two-factor-setup-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.two-factor-panel [data-two-factor-credentials] {
  gap: 14px;
}

.two-factor-panel .actions-row {
  margin-top: 16px;
  margin-bottom: 20px;
}

.two-factor-panel [data-two-factor-uri] {
  max-height: 68px;
  overflow: auto;
  line-height: 1.25;
}

.readonly-field,
.recovery-codes {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.readonly-field span,
.recovery-codes > span {
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.readonly-field code,
.recovery-codes code {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  overflow-wrap: anywhere;
}

.migration-secret-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 4px;
  padding: 9px 11px;
  border: 1px solid var(--danger-soft);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-tint);
  color: var(--text);
  font-size: var(--font-xs);
  line-height: 1.45;
}

.migration-secret-note .icon {
  color: var(--danger);
  margin-top: 1px;
}

.migration-secret-note code {
  font-size: 0.92em;
}

.migration-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.migration-status-grid > div,
.migration-preview {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 10px;
}

.migration-status-grid span,
.migration-preview span {
  display: block;
  color: var(--muted);
  font-size: var(--font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.migration-status-grid strong,
.migration-preview strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.migration-preview ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.migration-backup-list .item-title {
  align-items: flex-start;
}

.recovery-codes[data-two-factor-recovery] > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.recovery-codes[data-two-factor-recovery] code {
  text-align: center;
  letter-spacing: 0.04em;
}

.recovery-codes[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .app-shell {
    padding-left: 0;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .two-column,
  .mapping-grid,
  .landing-workspace,
  .rule-composer-grid,
  .traffic-rules-grid,
  .traffic-help-grid {
    grid-template-columns: 1fr;
  }

  .landing-workspace {
    grid-template-areas:
      "sidebar"
      "editor"
      "preview";
  }

  .landing-workspace .landing-sidebar-panel {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .mapping-pair-row {
    grid-template-columns: 1fr;
  }

  .tracker-mode-grid {
    grid-template-columns: 1fr;
  }

  .split-destinations-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-destination-row,
  .split-detail-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .split-destination-index,
  .split-destination-row .icon-button {
    margin-top: 0;
  }

  .split-destination-row .icon-button {
    width: 100%;
    height: var(--control-height);
    min-height: var(--control-height);
  }

  .mapping-pair-arrow {
    min-height: 20px;
    transform: rotate(90deg);
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .preset-settings-grid {
    grid-template-columns: 1fr;
  }

  .condition-row {
    grid-template-columns: 1fr;
  }

  .preset-row {
    grid-template-columns: 1fr;
  }

  .prefix-controls {
    grid-template-columns: 1fr;
  }

  .prefix-actions {
    justify-content: stretch;
  }

  .prefix-actions .btn {
    flex: 1 1 0;
  }

  .editor-save-dock {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  html[data-active-view="links"]:has([data-folder-panel="link-builder"]:not([hidden])) .toast-stack,
  html[data-active-view="presets"]:has([data-folder-panel="preset-create"]:not([hidden])) .toast-stack,
  html[data-active-view="presets"]:has([data-folder-panel="preset-editor"]:not([hidden])) .toast-stack {
    bottom: 96px;
  }

  .detail-columns,
  .detail-copy-line {
    grid-template-columns: 1fr;
  }

  .detail-copy-line.compact-copy {
    grid-template-columns: 1fr;
  }

  .rule-composer-group-head {
    display: grid;
  }

  .rule-composer-group-head span {
    text-align: left;
  }

  .created-user-grid {
    grid-template-columns: 1fr;
  }

  .two-factor-setup {
    grid-template-columns: 1fr;
  }

  .two-factor-qr-frame {
    width: min(240px, 100%);
  }
}

/* License card (Settings) */
[data-license-card] {
  margin-bottom: 16px;
}

.license-status .license-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-md);
}
.license-status .license-row > :last-child {
  min-width: 0;
  text-align: right;
}
.license-status .license-row:last-child { border-bottom: none; }
.license-hwid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  word-break: break-all;
  cursor: pointer;
  color: var(--text);
}
.license-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--font-sm);
  font-weight: 800;
  margin-right: 6px;
}
.license-badge--ok { background: var(--success-soft); color: var(--success); }
.license-badge--warn { background: var(--accent-soft); color: var(--accent-strong); }
.license-badge--danger { background: var(--danger-soft); color: var(--danger); }