/* ================= SHADCN DARK TOKENS ================= */
:root{
  --background: 0 0% 3%;
  --foreground: 0 0% 98%;
  --card: 0 0% 5%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 5%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14%;
  --muted-foreground: 0 0% 63%;
  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 0% 22%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 16%;
  --input: 0 0% 16%;
  --ring: 0 0% 63%;
  --radius: 0.5rem;

  --font-display: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ================= RESET & BASE ================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button{ cursor:pointer; background:none; border:none; font-family:inherit; color:inherit; }
::selection{ background: hsl(var(--secondary)); }
a{ color: hsl(var(--foreground)); text-decoration: none; }

/* ================= LAYOUT ================= */
.app{
  display:grid;
  grid-template-columns: 210px 1fr;
  height:100vh;
  overflow:hidden;
}

/* ================= SIDEBAR ================= */
.sidebar{
  background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border));
  display:flex;
  flex-direction:column;
  padding: 14px 10px;
  gap: 0;
}

/* brand */
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding: 8px 10px; margin-bottom: 12px;
}
.sidebar-brand-icon{
  width:32px; height:32px; border-radius:8px;
  background: linear-gradient(135deg, hsl(250 60% 55%), hsl(280 60% 45%));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 8px hsl(250 60% 55% / 0.3);
}
.sidebar-brand-icon i{ font-size:18px; color:#fff; }
.sidebar-brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.sidebar-brand-name{
  font-family: var(--font-display); font-size:17px; font-weight:700;
  letter-spacing:-0.03em; color:hsl(var(--foreground));
}
.sidebar-brand-tag{
  font-size:10px; font-weight:500; color:hsl(var(--muted-foreground));
  letter-spacing:0.04em;
}

/* nav */
.nav{ display:flex; flex-direction:column; gap:1px; flex:1; }
.nav-group-label{
  font-size: 11px; font-weight:500; color: hsl(var(--muted-foreground));
  padding: 16px 10px 6px; letter-spacing:0.02em;
}
.nav-group-label:first-child{ padding-top:4px; }
.nav-item{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px; border-radius: var(--radius);
  color: hsl(var(--muted-foreground)); font-size: 13px; font-weight:500;
  transition: all 0.15s ease;
  position:relative;
}
.nav-item i{ font-size:18px; flex-shrink:0; opacity:0.7; }
.nav-item:hover{
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.nav-item:hover i{ opacity:1; }
.nav-item.is-active{
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.nav-item.is-active i{ opacity:1; }
.nav-item.is-active::before{
  content:'';
  position:absolute;
  left:0; top:20%; bottom:20%;
  width:2px;
  border-radius:1px;
  background:hsl(var(--foreground));
  box-shadow:0 0 6px hsl(var(--foreground)),0 0 12px hsl(var(--foreground)/0.4);
}

/* footer / user */
.sidebar-footer{
  margin-top:auto; padding-top:12px;
  border-top:1px solid hsl(var(--border));
  display:flex; align-items:center; gap:8px;
}
.sidebar-user{
  display:flex; align-items:center; gap:10px;
  flex:1; min-width:0; padding:6px 8px;
  border-radius:var(--radius); cursor:default;
  transition:background .15s;
}
.sidebar-user:hover{ background:hsl(var(--accent)); }
.sidebar-avatar{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, hsl(200 60% 50%), hsl(220 60% 40%));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  background-size:cover; background-position:center; overflow:hidden;
}
.sidebar-user-info{
  display:flex; flex-direction:column; min-width:0; line-height:1.25;
}
.sidebar-user-name{
  font-size:13px; font-weight:600; color:hsl(var(--foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sidebar-user-role{
  font-size:10px; font-weight:500; color:hsl(var(--muted-foreground));
  letter-spacing:0.03em;
}
.sidebar-settings-btn{
  width:32px; height:32px; border-radius:var(--radius); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:hsl(var(--muted-foreground)); transition:all .15s;
}
.sidebar-settings-btn i{ font-size:16px; }
.sidebar-settings-btn:hover{
  background:hsl(var(--accent)); color:hsl(var(--foreground));
}

/* ================= MAIN AREA ================= */
.main{ display:flex; flex-direction:column; min-width:0; height:100vh; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px; border-bottom: 1px solid hsl(var(--border));
  flex-shrink:0;
}
.topbar-title h1{
  font-family: var(--font-display); font-size: 18px; font-weight:600;
  margin:0; letter-spacing:-0.02em;
}
.topbar-actions{ display:flex; align-items:center; gap:8px; }

.icon-btn{
  position:relative; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background: transparent; border:1px solid hsl(var(--border)); border-radius: var(--radius);
  color: hsl(var(--muted-foreground)); transition: all 0.15s ease;
}
.icon-btn i{ font-size:16px; }
.icon-btn:hover{
  background: hsl(var(--accent)); color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.icon-dot{
  position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background: hsl(0 0% 65%); border:2px solid hsl(var(--card));
}
.icon-btn.bell-bounce{ animation: bellBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bellBounce{
  0%{ transform:scale(1) rotate(0); }
  20%{ transform:scale(1.25) rotate(-12deg); }
  40%{ transform:scale(1.25) rotate(12deg); }
  60%{ transform:scale(1.15) rotate(-6deg); }
  80%{ transform:scale(1.05) rotate(3deg); }
  100%{ transform:scale(1) rotate(0); }
}

/* ================= NOTIFICATIONS ================= */
.notif-wrap{ position:relative; }
.notif-panel{
  position:absolute; top:calc(100% + 8px); right:0; width:360px;
  background: hsl(var(--popover)); border:1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s; z-index:60;
}
.notif-wrap.open .notif-panel{ opacity:1; pointer-events:all; transform: translateY(0); }
.notif-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; border-bottom:1px solid hsl(var(--border));
}
.notif-title{ font-size:14px; font-weight:600; }
.notif-mark-read{
  font-size:12px; color:hsl(var(--muted-foreground)); font-weight:500;
  padding:4px 10px; border-radius:var(--radius);
  transition: background .15s;
}
.notif-mark-read:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.notif-list{ max-height:340px; overflow-y:auto; }
.notif-item{
  display:flex; gap:12px; padding:12px 16px;
  border-bottom:1px solid hsl(var(--border)); transition: background .1s;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background: hsl(var(--accent)); }
.notif-item.unread{ background: hsl(217.2 32.6% 20%); }
.notif-item.notif-enter{
  animation: notifSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes notifSlideIn{
  0%{ opacity:0; transform:scale(0.8) translateY(-10px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.notif-icon{
  width:32px; height:32px; border-radius:var(--radius); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.notif-icon.green{ background: hsl(150 50% 45% / 0.15); color: hsl(150 60% 55%); }
.notif-icon.purple{ background: hsl(267 50% 55% / 0.15); color: hsl(267 60% 65%); }
.notif-icon.orange{ background: hsl(35 80% 55% / 0.15); color: hsl(35 80% 65%); }
.notif-icon.red{ background: hsl(0 60% 50% / 0.15); color: hsl(0 65% 60%); }
.notif-body{ flex:1; min-width:0; }
.notif-text{ font-size:13px; color:hsl(var(--muted-foreground)); line-height:1.5; }
.notif-text b{ color:hsl(var(--foreground)); font-weight:600; }
.notif-time{ font-size:11px; color:hsl(var(--muted-foreground)); margin-top:3px; font-family:var(--font-mono); opacity:0.6; }

/* ================= CONTENT ================= */
.content{ flex:1; overflow-y:auto; padding: 24px 24px 60px; }
.content:has(.view.is-active#view-accounts){ padding:0; overflow:hidden; }
.content:has(.view.is-active#view-drainer){ padding:0; overflow:hidden; }
.content:has(.view.is-active#view-data){ padding:0; overflow:hidden; }
.content:has(.view.is-active#view-domains){ padding:0; overflow:hidden; }
.content:has(.view.is-active#view-panels){ padding:0; overflow:hidden; }

.view{ display:none; animation: fadeIn .2s ease; }
.view.is-active{ display:flex; flex-direction:column; height:100%; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{ opacity:1; transform:none; } }

.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: 50vh; gap:12px; color: hsl(var(--muted-foreground)); text-align:center;
}
.placeholder i{ font-size:48px; opacity:0.2; }
.placeholder h2{ font-family: var(--font-display); font-size:20px; font-weight:600; color: hsl(var(--foreground)); margin:0; opacity:0.6; }
.placeholder p{ font-size:14px; margin:0; opacity:0.5; }

/* ================= WIDGET (OVERVIEW) ================= */
.widget{
  background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: var(--radius);
  padding: 20px; max-width:560px;
}
.widget-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.widget-head h2{ font-family:var(--font-display); font-size:15px; font-weight:600; margin:0; }
.widget-head h2 span{ color:hsl(var(--muted-foreground)); }

.pc-list{ display:flex; flex-direction:column; gap:2px; }
.pc-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--radius);
  transition: background .1s;
}
.pc-row:hover{ background:hsl(var(--accent)); }
.pc-dot{ width:7px; height:7px; border-radius:50%; background: hsl(0 0% 65%); flex-shrink:0; }
.pc-name{ flex:1; font-size:13px; color:hsl(var(--muted-foreground)); }
.pc-name b{ color:hsl(var(--foreground)); font-weight:600; }
.pc-nick{ font-size:12px; color:hsl(var(--muted-foreground)); margin-left:6px; opacity:0.6; }
.pc-edit{
  width:28px; height:28px; border-radius:var(--radius); display:flex;
  align-items:center; justify-content:center; color:hsl(var(--muted-foreground));
  transition: all .1s;
}
.pc-edit i{ font-size:14px; }
.pc-edit:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }

/* ================= OVERVIEW DASHBOARD ================= */
.ov-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:20px;
}
.ov-stat-card{
  background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:12px;
  padding:18px 20px; display:flex; align-items:center; gap:14px;
  transition: border-color .2s, box-shadow .2s;
}
.ov-stat-card:hover{ border-color:hsl(var(--ring)); box-shadow:0 0 0 1px hsl(var(--ring) / 0.15); }
.ov-stat-icon{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.ov-stat-icon i{ font-size:20px; }
.ov-stat-card[data-accent="purple"] .ov-stat-icon{ background:hsl(270 50% 55% / 0.15); color:hsl(270 60% 65%); }
.ov-stat-card[data-accent="green"] .ov-stat-icon{ background:hsl(150 50% 45% / 0.15); color:hsl(150 60% 55%); }
.ov-stat-card[data-accent="amber"] .ov-stat-icon{ background:hsl(35 80% 50% / 0.15); color:hsl(35 80% 60%); }
.ov-stat-card[data-accent="red"] .ov-stat-icon{ background:hsl(0 55% 50% / 0.15); color:hsl(0 60% 60%); }
.ov-stat-body{ display:flex; flex-direction:column; }
.ov-stat-val{ font-size:24px; font-weight:700; font-family:var(--font-display); letter-spacing:-0.03em; line-height:1.1; color:hsl(var(--foreground)); }
.ov-stat-label{ font-size:12px; font-weight:500; color:hsl(var(--muted-foreground)); margin-top:2px; }

.ov-row{ display:grid; grid-template-columns:1fr 340px; gap:16px; }

.ov-panel{
  background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:12px; overflow:hidden;
}
.ov-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid hsl(var(--border));
}
.ov-panel-head h3{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; color:hsl(var(--foreground)); margin:0; }
.ov-panel-head h3 i{ font-size:16px; color:hsl(var(--muted-foreground)); }
.ov-panel-badge{ font-size:11px; font-weight:500; color:hsl(var(--muted-foreground)); background:hsl(var(--secondary)); padding:3px 10px; border-radius:20px; }

.ov-empty{ padding:28px 18px; text-align:center; color:hsl(var(--muted-foreground)); font-size:13px; }

/* machine rows */
.ov-pc-list{ max-height:380px; overflow-y:auto; }
.ov-pc-row{
  display:flex; align-items:center; gap:12px; padding:10px 18px;
  transition:background .1s; border-bottom:1px solid hsl(var(--border));
}
.ov-pc-row:last-child{ border-bottom:none; }
.ov-pc-row:hover{ background:hsl(var(--accent)); }
.ov-pc-info{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.ov-pc-name{ font-size:13px; font-weight:600; color:hsl(var(--foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-pc-host{ font-size:11px; color:hsl(var(--muted-foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-pc-status{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:hsl(150 50% 50%); flex-shrink:0; }
.ov-pc-dot{ width:6px; height:6px; border-radius:50%; background:hsl(150 60% 50%); box-shadow:0 0 6px hsl(150 60% 50% / 0.5); animation:ov-pulse 2s ease infinite; }
@keyframes ov-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
.ov-pc-row .pc-edit{ margin-left:4px; }
.ov-pc-row.ov-pc-enter{ animation: ov-pc-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ov-pc-enter{
  from{ opacity:0; transform:scale(0.9) translateX(-12px); }
  to{ opacity:1; transform:scale(1) translateX(0); }
}

/* activity */
.ov-col-side{ display:flex; flex-direction:column; gap:16px; }
.ov-activity{ flex:1; }
.ov-activity-list{ max-height:180px; overflow-y:auto; padding:6px 0; }
.ov-act-item{ display:flex; gap:10px; padding:8px 18px; align-items:flex-start; }
.ov-act-dot{ width:7px; height:7px; border-radius:50%; background:hsl(var(--muted-foreground)); margin-top:5px; flex-shrink:0; }
.ov-act-dot.unread{ background:hsl(210 80% 60%); box-shadow:0 0 6px hsl(210 80% 60% / 0.4); }
.ov-act-body{ display:flex; flex-direction:column; min-width:0; }
.ov-act-text{ font-size:12px; color:hsl(var(--foreground)); line-height:1.35; }
.ov-act-time{ font-size:11px; color:hsl(var(--muted-foreground)); margin-top:2px; }

/* quick actions */
.ov-quick{ }
.ov-quick-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding:14px 18px; }
.ov-quick-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; border-radius:10px; font-size:11px; font-weight:500;
  color:hsl(var(--muted-foreground)); background:hsl(var(--secondary) / 0.4);
  border:1px solid transparent; transition:all .15s;
}
.ov-quick-btn i{ font-size:20px; }
.ov-quick-btn:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }

/* ================= FORM INPUTS ================= */
.mailer-field{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.mailer-field label{
  font-size:13px; font-weight:500; color:hsl(var(--foreground));
}
.mailer-field input, .mailer-field textarea{
  width:100%; background: hsl(var(--background));
  border:1px solid hsl(var(--input)); border-radius: var(--radius);
  padding:9px 12px; font-size:13px; color: hsl(var(--foreground));
  font-family:inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
.mailer-field input::placeholder, .mailer-field textarea::placeholder{
  color: hsl(var(--muted-foreground)); opacity:0.5;
}
.mailer-field input:focus, .mailer-field textarea:focus{
  border-color: hsl(var(--ring)); outline:none;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.mailer-field textarea{ resize:none; flex:1; min-height:160px; }
.mailer-field-grow{ flex:1; display:flex; flex-direction:column; }
.mailer-field-grow textarea{ flex:1; }

/* ================= CUSTOM SELECT ================= */
.cselect-init{ display:none; }
.cselect{ position:relative; width:100%; }
.cselect.cselect-open{ z-index:50; }
.cselect-trigger{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:9px 12px;
  background: hsl(var(--background));
  border:1px solid hsl(var(--input)); border-radius: var(--radius);
  color: hsl(var(--foreground)); font-size:13px; font-family:inherit;
  cursor:pointer; outline:none; user-select:none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.cselect-trigger:hover{ background-color:hsl(var(--accent)); border-color:hsl(var(--muted-foreground)); }
.cselect.cselect-open .cselect-trigger{
  border-color:hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
}
.cselect-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cselect-label.cselect-placeholder{ color:hsl(var(--muted-foreground)); }
.cselect-chevron{
  width:16px; height:16px; flex-shrink:0; color:hsl(var(--muted-foreground));
  transition: transform 0.2s;
}
.cselect.cselect-open .cselect-chevron{ transform:rotate(180deg); }
.cselect-dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:hsl(var(--popover)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); padding:4px;
  max-height:240px; overflow-y:auto; overflow-x:hidden;
  opacity:0; transform:translateY(-4px);
  pointer-events:none; transition: opacity 0.15s, transform 0.15s;
  box-shadow:0 8px 24px hsl(0 0% 0% / 0.5);
  z-index:51;
}
.cselect.cselect-open .cselect-dropdown{
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.cselect-option{
  padding:8px 12px; border-radius:6px;
  font-size:13px; color:hsl(var(--muted-foreground));
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: background 0.08s, color 0.08s;
}
.cselect-option:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.cselect-option.cselect-selected{ background:hsl(var(--accent)); color:hsl(var(--foreground)); font-weight:500; }
.cselect-dropdown::-webkit-scrollbar{ width:6px; }
.cselect-dropdown::-webkit-scrollbar-track{ background:transparent; }
.cselect-dropdown::-webkit-scrollbar-thumb{ background:hsl(var(--border)); border-radius:3px; }

/* ================= CUSTOM CHECKBOX ================= */
.fm-check-wrap{ display:flex; align-items:center; flex-shrink:0; width:22px; }
.custom-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px;
  background: hsl(var(--background)); border:1.5px solid hsl(var(--input));
  cursor:pointer; position:relative; flex-shrink:0;
  transition: all 0.15s;
}
.custom-check:hover{ border-color:hsl(var(--muted-foreground)); background:hsl(var(--accent)); }
.custom-check input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.custom-check .check-mark{
  width:12px; height:12px; opacity:0; transform:scale(0.5);
  transition: opacity 0.12s, transform 0.12s;
}
.custom-check .check-mark svg{
  width:100%; height:100%; display:block;
}
.custom-check input:checked ~ .check-mark{
  opacity:1; transform:scale(1);
}
.custom-check input:checked ~ .check-bg{ opacity:1; }
.custom-check .check-bg{
  position:absolute; inset:0; border-radius:6px;
  background:hsl(var(--primary)); opacity:0; transition: opacity 0.12s; z-index:0;
}
.custom-check .check-mark{ position:relative; z-index:1; }
.custom-check input:checked ~ .check-bg + .check-mark svg polyline{ stroke:hsl(var(--primary-foreground)); }
.mailer-checkbox-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:hsl(var(--foreground)); cursor:pointer; user-select:none;
}
.mailer-checkbox-label .custom-check{ margin:0; }

.fm-check{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:20px; height:20px; border-radius:6px;
  background: hsl(var(--background)); border:1.5px solid hsl(var(--input));
  cursor:pointer; position:relative; flex-shrink:0;
  transition: all 0.15s;
}
.fm-check:hover{ border-color:hsl(var(--muted-foreground)); background:hsl(var(--accent)); }
.fm-check:checked{
  background:hsl(var(--primary)); border-color:hsl(var(--primary));
}
.fm-check:checked::after{
  content:''; position:absolute; top:3px; left:6px;
  width:5px; height:9px; border:solid hsl(var(--primary-foreground));
  border-width:0 2px 2px 0; transform:rotate(45deg) translate(-0.5px, -0.5px);
}
.fm-check:focus-visible{
  outline:2px solid hsl(var(--ring)); outline-offset:2px;
}

/* ================= BUTTONS ================= */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius: var(--radius);
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size:13px; font-weight:500; font-family:inherit;
  transition: opacity 0.15s;
}
.btn-primary:hover{ opacity:0.9; }
.btn-primary:disabled{ opacity:0.5; pointer-events:none; }
.btn-primary i{ font-size:15px; }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius: var(--radius);
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
  font-size:13px; font-weight:500; font-family:inherit;
  transition: background 0.15s;
}
.btn-secondary:hover{ background: hsl(var(--secondary) / 0.8); }
.btn-secondary i{ font-size:15px; }

.btn-destructive{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius: var(--radius);
  background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground));
  font-size:13px; font-weight:500; font-family:inherit;
  transition: opacity 0.15s;
}
.btn-destructive:hover{ opacity:0.9; }
.btn-destructive i{ font-size:15px; }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px; border-radius: var(--radius);
  background: transparent; color: hsl(var(--muted-foreground));
  font-size:13px; font-weight:500; font-family:inherit;
  transition: background 0.15s, color 0.15s;
}
.btn-ghost:hover{ background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.btn-ghost i{ font-size:15px; }

/* ================= MODALS ================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .15s; z-index:100;
}
.modal-overlay.open{ opacity:1; pointer-events:all; }
.modal{
  background: hsl(var(--popover)); border:1px solid hsl(var(--border)); border-radius: var(--radius);
  padding:24px; width:380px; transform:translateY(8px); transition:transform .15s;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.modal-overlay.open .modal{ transform:translateY(0); }
.modal h3{ font-size:16px; font-weight:600; margin:0 0 4px; }
.modal p{ font-size:13px; color:hsl(var(--muted-foreground)); margin:0 0 16px; }
.modal label{ display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
.modal input{
  width:100%; background:hsl(var(--background)); border:1px solid hsl(var(--input));
  border-radius:var(--radius); padding:9px 12px; font-size:13px; color:hsl(var(--foreground)); font-family:inherit;
}
.modal input:focus{ border-color:hsl(var(--ring)); outline:none; box-shadow:0 0 0 2px hsl(var(--ring)/0.2); }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.modal-btn{
  padding:8px 16px; border-radius:var(--radius); font-size:13px; font-weight:500;
  transition: all 0.15s;
}
.modal-btn.cancel{ color:hsl(var(--muted-foreground)); }
.modal-btn.cancel:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.modal-btn.save{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
.modal-btn.save:hover{ opacity:0.9; }

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: hsl(var(--border)); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background: hsl(var(--muted-foreground)); }

@media (max-width: 760px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
  .ov-grid{ grid-template-columns:repeat(2, 1fr); }
  .ov-row{ grid-template-columns:1fr; }
}

/* ================= MAILER ================= */
.mailer-layout{
  display:flex; gap:0; height: calc(100vh - 80px);
}
.mailer-sidebar{
  display:flex; flex-direction:column; gap:2px;
  background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: var(--radius);
  padding:6px; width:160px; flex-shrink:0; align-self:flex-start;
}
.mailer-sidebar-btn{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius: var(--radius);
  color: hsl(var(--muted-foreground)); font-size:13px; font-weight:500;
  text-align:left; transition: all 0.15s;
}
.mailer-sidebar-btn i{ font-size:16px; flex-shrink:0; opacity:0.6; }
.mailer-sidebar-btn:hover{ background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.mailer-sidebar-btn:hover i{ opacity:1; }
.mailer-sidebar-btn.is-active{ background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.mailer-sidebar-btn.is-active i{ opacity:1; }
.mailer-sidebar-spacer{ flex:1; }

.mailer-content{
  flex:1; min-width:0; padding-left:12px;
  display:flex; flex-direction:column;
}
.mailer-panel{
  background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: var(--radius);
  padding:24px; display:none; flex-direction:column; flex:1; min-height:0;
}
.mailer-panel.is-active{ display:flex; }

.mailer-compose-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.mailer-compose-header h3{ font-size:15px; font-weight:600; margin:0; }
.mailer-compose-header-left{ display:flex; align-items:center; gap:10px; }

.mailer-status{
  font-size:12px; font-family:var(--font-mono); color: hsl(var(--muted-foreground));
  transition: color .15s;
}
.mailer-status.success{ color: hsl(150 50% 55%); }
.mailer-status.error{ color: hsl(0 84% 60%); }
.mailer-settings-desc{ font-size:12px; color:hsl(var(--muted-foreground)); }

.mailer-settings-tabs{
  display:flex; gap:2px; margin-bottom:18px;
  background: hsl(var(--accent)); border-radius: var(--radius); padding:3px;
  width: fit-content;
}
.mailer-settings-tab{
  padding:6px 16px; border-radius: calc(var(--radius) - 2px); font-size:12px; font-weight:500;
  color: hsl(var(--muted-foreground)); transition: all 0.15s;
}
.mailer-settings-tab:hover{ color: hsl(var(--foreground)); }
.mailer-settings-tab.is-active{ background: hsl(var(--background)); color: hsl(var(--foreground)); }

.mailer-settings-form{ display:flex; flex-direction:column; flex:1; }
.mailer-settings-form .mailer-settings-desc{ margin-bottom:16px; }

.mailer-checkbox-label{
  display:flex !important; align-items:center; gap:8px;
  font-size:13px !important; color: hsl(var(--muted-foreground)) !important;
  cursor:pointer;
}
.mailer-checkbox-label input[type="checkbox"]{
  width:16px; height:16px; accent-color: hsl(var(--primary)); border-radius:4px;
}

.mailer-compose-footer{ display:flex; justify-content:flex-end; margin-top:16px; gap:8px; }

/* ================= SPLIT ROW ================= */
.mailer-split-row{ display:flex; flex-direction:row; gap:12px; }
.mailer-split-70{ flex:7; }
.mailer-split-30{ flex:3; }
.mailer-split-70 label, .mailer-split-30 label{
  display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:hsl(var(--foreground));
}
.mailer-split-70 input, .mailer-split-30 input{
  width:100%; padding:9px 12px; border-radius:var(--radius);
  background:hsl(var(--background)); border:1px solid hsl(var(--input)); color:hsl(var(--foreground));
  font-size:13px; font-family:inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
.mailer-split-70 input:focus, .mailer-split-30 input:focus{
  border-color:hsl(var(--ring)); outline:none; box-shadow:0 0 0 2px hsl(var(--ring)/0.2);
}

/* ================= ATTACHMENTS ================= */
.mailer-attach-zone{
  display:flex; align-items:center; gap:8px;
  padding:14px 16px; border-radius:var(--radius);
  border:1px dashed hsl(var(--border)); background:transparent;
  cursor:pointer; transition: all 0.15s;
}
.mailer-attach-zone:hover{ border-color:hsl(var(--ring)); background:hsl(var(--accent)); }
.mailer-attach-zone i{ font-size:16px; color:hsl(var(--muted-foreground)); }
.mailer-attach-zone span{ font-size:12px; color:hsl(var(--muted-foreground)); }
.mailer-attach-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mailer-attach-chip{
  display:flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--radius);
  background:hsl(var(--secondary)); font-size:12px; color:hsl(var(--foreground));
}
.mailer-attach-chip .remove{
  cursor:pointer; color:hsl(var(--muted-foreground)); font-size:14px; line-height:1;
}
.mailer-attach-chip .remove:hover{ color:hsl(0 0% 90%); }

/* ================= SHELL ================= */
.shell-layout{ display:flex; gap:16px; height:100%; }
.shell-select-wrap{ width:260px; flex-shrink:0; }
.shell-select-wrap label{ display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
.shell-terminal-wrap{ flex:1; display:flex; flex-direction:column; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); overflow:hidden; min-height:0; }
.shell-terminal-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid hsl(var(--border)); }
.shell-terminal-head span{ font-size:13px; font-weight:600; }
.shell-terminal{ flex:1; overflow-y:auto; padding:16px; font-family:var(--font-mono); font-size:12px; line-height:1.7; color:hsl(var(--muted-foreground)); white-space:pre-wrap; word-break:break-all; }
.shell-terminal .cmd-line{ color:hsl(var(--foreground)); font-weight:500; }
.shell-terminal .cmd-output{ color:hsl(var(--muted-foreground)); }
.shell-terminal .cmd-error{ color:hsl(0 84% 60%); }
.shell-input-row{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid hsl(var(--border)); background:hsl(var(--background)); }
.shell-breadcrumb{ display:flex; align-items:center; gap:0; font-family:var(--font-mono); font-size:12px; color:hsl(var(--muted-foreground)); flex-shrink:0; white-space:nowrap; overflow-x:auto; }
.shell-breadcrumb .seg{ padding:1px 4px; border-radius:4px; cursor:pointer; transition: background 0.1s, color 0.1s; }
.shell-breadcrumb .seg:hover{ background:hsl(var(--secondary)); color:hsl(var(--foreground)); }
.shell-breadcrumb .sep{ margin:0; color:hsl(var(--muted-foreground)); opacity:0.4; }
.shell-input{ flex:1; background:none; border:none; outline:none; font-family:var(--font-mono); font-size:12px; color:hsl(var(--foreground)); }

/* ================= REMOTE LAYOUT ================= */
.remote-layout{
  display:flex; gap:0; flex:1; min-height:0;
}
.remote-sidebar{
  display:flex; flex-direction:column; gap:2px;
  background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: var(--radius);
  padding:6px; width:160px; flex-shrink:0; align-self:flex-start;
  overflow-y:auto; max-height:calc(100vh - 120px);
}
.remote-sidebar-btn{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius: var(--radius);
  color: hsl(var(--muted-foreground)); font-size:12px; font-weight:500;
  text-align:left; transition: all 0.15s; white-space:nowrap;
}
.remote-sidebar-btn i{ font-size:16px; flex-shrink:0; opacity:0.6; }
.remote-sidebar-btn:hover{ background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.remote-sidebar-btn:hover i{ opacity:1; }
.remote-sidebar-btn.is-active{ background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.remote-sidebar-btn.is-active i{ opacity:1; }

.remote-content{
  flex:1; min-width:0; padding-left:12px;
  display:flex; flex-direction:column;
}
.remote-panel{
  display:none; flex-direction:column; flex:1; min-height:0;
}
.remote-panel.is-active{ display:flex; }

.remote-select-bar{
  display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-shrink:0;
}
.remote-select-bar .cselect{ width:auto; min-width:200px; }

/* ================= TOOL PANELS ================= */
.tool-panel{
  background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius: var(--radius);
  display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;
}
.tool-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid hsl(var(--border)); flex-shrink:0;
}
.tool-panel-head h3{ font-size:14px; font-weight:600; margin:0; }
.tool-panel-head-right{ display:flex; align-items:center; gap:10px; }
.tool-search-input{ background: hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:6px; padding:4px 10px; font-size:12px; color: hsl(var(--foreground)); outline:none; width:180px; transition: border-color .15s; }
.tool-search-input:focus{ border-color: hsl(var(--primary)); }
.tool-search-input::placeholder{ color: hsl(var(--muted-foreground)); }
.cookie-row-dl{ background:none; border:none; cursor:pointer; padding:2px 4px; color: hsl(var(--muted-foreground)); opacity:.45; transition: color .15s, opacity .15s; font-size:14px; line-height:1; }
.cookie-row-dl:hover{ color:#fff; opacity:1; }
.tool-download-btn{ padding:4px 10px !important; font-size:11px !important; }
.tool-status{ font-size:12px; font-family:var(--font-mono); color: hsl(var(--muted-foreground)); transition: color .15s; }
.tool-status.success{ color: hsl(150 50% 55%); }
.tool-status.error{ color: hsl(0 84% 60%); }
.tool-panel-body{
  flex:1; overflow-y:auto; padding:16px; font-size:13px;
}
.tool-panel-body-center{ display:flex; align-items:center; justify-content:center; }
.tool-empty{ color:hsl(var(--muted-foreground)); font-size:13px; text-align:center; padding:32px; }
.tool-error{ color:hsl(0 84% 60%); }

/* ================= INFO GRID ================= */
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.info-item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; background:hsl(var(--background)); border-radius:var(--radius);
  border:1px solid hsl(var(--border));
}
.info-label{ font-size:11px; font-weight:500; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.04em; }
.info-value{ font-size:13px; color:hsl(var(--foreground)); font-family:var(--font-mono); word-break:break-all; }
.info-section{ margin-top:12px; }
.info-section h4{ font-size:13px; font-weight:600; margin-bottom:8px; color:hsl(var(--foreground)); }
.info-pre{
  background:hsl(var(--background)); border:1px solid hsl(var(--border)); border-radius:var(--radius);
  padding:12px; font-family:var(--font-mono); font-size:11px; line-height:1.6;
  color:hsl(var(--muted-foreground)); white-space:pre-wrap; word-break:break-all;
  overflow-x:auto; max-height:300px; overflow-y:auto;
}

/* ================= PROCESS TABLE ================= */
.proc-table-wrap{ overflow:auto; max-height:calc(100vh - 220px); }
.proc-table{ width:100%; border-collapse:collapse; font-size:12px; font-family:var(--font-mono); }
.proc-table th{
  position:sticky; top:0; background:hsl(var(--background));
  text-align:left; padding:8px 12px; font-weight:600; font-size:11px;
  color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.04em;
  border-bottom:1px solid hsl(var(--border));
}
.proc-table td{ padding:6px 12px; border-bottom:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); white-space:nowrap; }
.proc-table tr:hover td{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }

/* ================= SCREENSHOT ================= */
.screenshot-img{
  max-width:100%; max-height:calc(100vh - 220px); border-radius:var(--radius);
  border:1px solid hsl(var(--border)); object-fit:contain;
}

/* ================= FILE MANAGER ================= */
.fm-breadcrumb{
  display:flex; align-items:center; gap:0; padding:8px 16px;
  font-family:var(--font-mono); font-size:12px; color:hsl(var(--muted-foreground));
  border-bottom:1px solid hsl(var(--border)); flex-shrink:0; overflow-x:auto; white-space:nowrap;
}
.fm-breadcrumb .seg{ padding:2px 6px; border-radius:4px; cursor:pointer; transition: background 0.1s, color 0.1s; }
.fm-breadcrumb .seg:hover{ background:hsl(var(--secondary)); color:hsl(var(--foreground)); }
.fm-breadcrumb .sep{ margin:0 2px; opacity:0.4; }
.fm-list{ display:flex; flex-direction:column; gap:1px; }
.fm-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--radius); cursor:pointer; transition: background 0.1s;
}
.fm-item:hover{ background:hsl(var(--accent)); }
.fm-item i{ font-size:16px; color:hsl(var(--muted-foreground)); flex-shrink:0; }
.fm-item.fm-dir i{ color:hsl(45 80% 55%); }
.fm-name{ flex:1; font-size:13px; color:hsl(var(--foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fm-size{ font-size:12px; font-family:var(--font-mono); color:hsl(var(--muted-foreground)); width:80px; text-align:right; flex-shrink:0; }
.fm-date{ font-size:12px; font-family:var(--font-mono); color:hsl(var(--muted-foreground)); opacity:0.6; width:100px; text-align:right; flex-shrink:0; }

/* ================= KEYLOGGER OUTPUT ================= */
.kl-output{
  background:hsl(var(--background)); border:1px solid hsl(var(--border)); border-radius:var(--radius);
  padding:12px; max-height:calc(100vh - 220px); overflow-y:auto;
}
.kl-output pre{
  font-family:var(--font-mono); font-size:12px; line-height:1.6;
  color:hsl(var(--muted-foreground)); white-space:pre-wrap; word-break:break-all; margin:0;
}

/* ================= FIREWALL / RDP / UAC / DEFENDER UI ================= */
.fw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.fw-card{ background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:12px; text-align:center; }
.fw-card h4{ margin:0 0 6px; font-size:12px; color:hsl(var(--muted-foreground)); font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.fw-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.3px; }
.fw-on{ background:hsl(142 76% 42% / .15); color:hsl(142 76% 60%); border:1px solid hsl(142 76% 42% / .3); }
.fw-off{ background:hsl(0 72% 51% / .12); color:hsl(0 72% 65%); border:1px solid hsl(0 72% 51% / .3); }
.fw-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; }
.fw-stat{ background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:10px 8px; text-align:center; }
.fw-stat-val{ display:block; font-size:20px; font-weight:700; color:hsl(var(--foreground)); }
.fw-stat-lbl{ display:block; font-size:11px; color:hsl(var(--muted-foreground)); margin-top:2px; }
.fw-red{ color:hsl(0 72% 60%) !important; }
.fw-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.fw-label{ font-size:13px; color:hsl(var(--foreground)); }
.fw-label b{ font-weight:600; }
.fw-props{ display:flex; flex-direction:column; gap:1px; margin-bottom:12px; }
.fw-prop{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); font-size:13px; }
.fw-prop:first-child{ border-radius:var(--radius) var(--radius) 0 0; }
.fw-prop:last-child{ border-radius:0 0 var(--radius) var(--radius); }
.fw-prop span{ color:hsl(var(--muted-foreground)); }
.fw-prop b{ font-weight:600; color:hsl(var(--foreground)); }
.fw-warn{ color:hsl(0 72% 60%) !important; }
.fw-sessions{ margin-bottom:8px; }
.fw-sessions h4{ font-size:12px; color:hsl(var(--muted-foreground)); margin:0 0 6px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; }
.fw-session-line{ font-size:12px; font-family:var(--font-mono); padding:6px 10px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); margin-bottom:3px; color:hsl(var(--foreground)); }
.fw-note{ font-size:12px; color:hsl(var(--muted-foreground)); font-style:italic; margin-top:4px; }
.rdp-connect-box{ display:flex; align-items:center; gap:10px; padding:12px; background:hsl(217 91% 60% / .08); border:1px solid hsl(217 91% 60% / .25); border-radius:var(--radius); margin-bottom:12px; flex-wrap:wrap; }
.rdp-connect-label{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:hsl(217 91% 70%); flex:1; min-width:200px; }
.rdp-copy-btn{ padding:6px 12px !important; font-size:12px !important; }

/* ================= CLIPBOARD PILLS ================= */
.cb-list{
  display:flex; flex-direction:column; gap:6px;
  padding:4px; max-height:calc(100vh - 160px); overflow-y:auto;
}
.cb-pill{
  display:flex; flex-direction:column; gap:3px;
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); padding:10px 14px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
}
.cb-pill:hover{
  background:hsl(var(--accent)); border-color:hsl(var(--primary) / .3);
}
.cb-pill-copied{
  border-color:hsl(142 76% 42%) !important;
  background:hsl(142 76% 42% / .1) !important;
}
.cb-pill-time{
  font-size:11px; font-weight:500; color:hsl(var(--muted-foreground));
  opacity:.7;
}
.cb-pill-text{
  font-size:13px; line-height:1.5; color:hsl(var(--foreground));
  word-break:break-word; font-family:var(--font-mono);
  max-height:120px; overflow:hidden;
}
.cb-pill-url{
  color:hsl(217 91% 60%); text-decoration:underline;
  text-decoration-color:hsl(217 91% 60% / .3);
}
.cb-pill:hover .cb-pill-url{
  text-decoration-color:hsl(217 91% 60%);
}

/* ================= TEMPLATES PILL ================= */
.tmpl-pill-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:999px;
  background:hsl(var(--secondary)); color:hsl(var(--secondary-foreground));
  font-size:11px; font-weight:500; font-family:inherit;
  cursor:pointer; transition: opacity 0.15s;
}
.tmpl-pill-btn:hover{ opacity:0.8; }
.tmpl-pill-btn i{ font-size:12px; }

/* ================= TEMPLATES TAB ================= */
.templates-layout{ display:flex; height:100%; gap:0; }
.templates-sidebar{
  width:260px; flex-shrink:0; border-right:1px solid hsl(var(--border));
  display:flex; flex-direction:column; padding:16px;
}
.templates-sidebar-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.templates-sidebar-head h3{ font-size:15px; font-weight:600; margin:0; }
.templates-search{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--radius);
  background:transparent; border:1px solid hsl(var(--input)); margin-bottom:12px;
  min-width:0; width:100%; box-sizing:border-box;
}
.templates-search i{ color:hsl(var(--muted-foreground)); font-size:14px; flex-shrink:0; }
.templates-search input{
  flex:1; min-width:0; background:none; border:none; color:hsl(var(--foreground)); font-size:13px;
  font-family:inherit; outline:none;
}
.templates-search input::placeholder{ color:hsl(var(--muted-foreground)); opacity:0.5; }
.templates-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.tmpl-list-item{
  padding:8px 12px; border-radius:var(--radius); cursor:pointer;
  font-size:13px; color:hsl(var(--muted-foreground)); transition: background .1s;
  display:flex; align-items:center; gap:8px;
}
.tmpl-list-item:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.tmpl-list-item.is-active{ background:hsl(var(--accent)); color:hsl(var(--foreground)); font-weight:500; }
.tmpl-list-item .tmpl-list-icon{ font-size:14px; }
.tmpl-list-provider{ margin-left:auto; font-size:11px; color:hsl(var(--muted-foreground)); opacity:0.5; }
.tmpl-list-empty{ font-size:12px; color:hsl(var(--muted-foreground)); text-align:center; padding:24px 12px; }
.templates-editor{ flex:1; display:flex; flex-direction:column; padding:16px 24px; overflow-y:auto; }
.templates-editor-head{ margin-bottom:20px; }
.templates-editor-head h3{ font-size:15px; font-weight:600; margin:0; }

/* ================= TEMPLATE PICKER MODAL ================= */
.modal-wide{ max-width:560px; }
.template-picker-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px;
}
.template-picker-head h3{ font-size:16px; font-weight:600; margin:0; white-space:nowrap; }
.template-picker-search{
  display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:var(--radius);
  background:hsl(var(--background)); border:1px solid hsl(var(--input)); flex:1;
}
.template-picker-search i{ color:hsl(var(--muted-foreground)); font-size:14px; }
.template-picker-search input{
  background:none; border:none; color:hsl(var(--foreground)); font-size:13px;
  font-family:inherit; outline:none; width:100%;
}
.template-picker-search input::placeholder{ color:hsl(var(--muted-foreground)); opacity:0.5; }
.template-picker-list{
  max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
  margin-bottom:16px;
}
.template-picker-empty{ font-size:12px; color:hsl(var(--muted-foreground)); text-align:center; padding:32px; }
.template-picker-item{
  padding:10px 14px; border-radius:var(--radius); cursor:pointer;
  border:1px solid hsl(var(--border)); transition: all 0.15s;
}
.template-picker-item:hover{ border-color:hsl(var(--ring)); background:hsl(var(--accent)); }
.template-picker-item .tp-name{ font-size:13px; font-weight:500; color:hsl(var(--foreground)); }
.template-picker-item .tp-meta{ font-size:12px; color:hsl(var(--muted-foreground)); margin-top:2px; }

/* ================= NETWORK PASSWORDS ================= */
.net-pass-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.net-pass-item{
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border-radius:var(--radius);
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
}
.net-pass-ssid{ font-size:13px; font-weight:500; color:hsl(var(--foreground)); min-width:160px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.net-pass-pw{ font-size:12px; font-family:var(--font-mono); color:hsl(150 60% 50%); flex-shrink:0; }
.net-pass-pw.hidden{ color:hsl(var(--muted-foreground)); opacity:0.5; }
.net-pass-actions{ display:flex; gap:2px; margin-left:auto; flex-shrink:0; opacity:0; transition:opacity .15s; }
.net-pass-item:hover .net-pass-actions{ opacity:1; }
.net-pass-actions .btn-ghost{ padding:3px 5px; font-size:12px; border-radius:var(--radius); color:hsl(var(--muted-foreground)); }
.net-pass-actions .btn-ghost:hover{ color:hsl(var(--foreground)); background:hsl(var(--accent)); }

/* ================= COOKIE TABLE ================= */
.cookie-table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid hsl(var(--border)); }
.cookie-table{ width:100%; border-collapse:collapse; font-size:12px; }
.cookie-table th{ text-align:left; padding:6px 10px; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:hsl(var(--muted-foreground)); background:hsl(var(--card)); border-bottom:1px solid hsl(var(--border)); position:sticky; top:0; }
.cookie-table td{ padding:5px 10px; border-bottom:1px solid hsl(var(--border)); color:hsl(var(--foreground)); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cookie-table tr:hover td{ background:hsl(var(--accent)); }
.cookie-table td.cookie-val{ font-family:var(--font-mono); color:hsl(150 60% 50%); cursor:help; }

/* ================= ACCOUNTS ================= */
.accounts-layout{ display:flex; height:100%; gap:0; }
.accounts-sidebar{
  width:180px; flex-shrink:0; border-right:1px solid hsl(var(--border));
  display:flex; flex-direction:column; padding:16px;
  min-width:0;
}
.accounts-sidebar-head{ margin-bottom:12px; }
.accounts-sidebar-head h3{ font-size:15px; font-weight:600; margin:0; }
.accounts-cat-list{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.acc-cat-item{
  padding:8px 12px; border-radius:var(--radius); cursor:pointer;
  font-size:13px; color:hsl(var(--muted-foreground)); transition: background .1s;
  display:flex; align-items:center; gap:8px;
}
.acc-cat-item:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.acc-cat-item.is-active{ background:hsl(var(--accent)); color:hsl(var(--foreground)); font-weight:500; }

.accounts-list-wrap{
  width:280px; flex-shrink:0; border-right:1px solid hsl(var(--border));
  display:flex; flex-direction:column;
}
.accounts-list-head{ padding:12px 16px; border-bottom:1px solid hsl(var(--border)); display:flex; align-items:center; gap:8px; }
.accounts-search{
  display:flex; align-items:center; gap:8px; flex:1;
  padding:7px 12px; border-radius:var(--radius);
  background:transparent; border:1px solid hsl(var(--input));
}
.accounts-search i{ color:hsl(var(--muted-foreground)); font-size:14px; }
.accounts-search input{
  flex:1; background:none; border:none; color:hsl(var(--foreground)); font-size:13px;
  font-family:inherit; outline:none;
}
.accounts-search input::placeholder{ color:hsl(var(--muted-foreground)); opacity:0.5; }
.accounts-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding:8px; }
.acc-item{
  padding:10px 12px; border:1px solid hsl(var(--border)); border-radius:var(--radius);
  cursor:pointer; transition: background .1s; margin-bottom:4px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.acc-item:hover{ background:hsl(var(--accent)); }
.acc-item.is-active{ background:hsl(var(--accent)); border-color:hsl(var(--ring)); }
.acc-item-main{ flex:1; min-width:0; }
.acc-item-actions{ display:flex; gap:2px; flex-shrink:0; }
.acc-item-actions .btn-ghost{ padding:4px 6px; font-size:13px; border-radius:var(--radius); color:hsl(var(--muted-foreground)); }
.acc-item-actions .btn-ghost:hover{ color:hsl(var(--foreground)); background:hsl(var(--accent)); }
.acc-item-cat{ font-size:11px; font-weight:500; color:hsl(var(--primary)); margin-bottom:3px; text-transform:uppercase; letter-spacing:0.5px; }
.acc-item-email{ font-size:13px; font-weight:500; color:hsl(var(--foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-item-url{ font-size:11px; color:hsl(var(--muted-foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }

.accounts-editor{ flex:1; display:flex; flex-direction:column; padding:0; }
.accounts-editor-head{
  padding:12px 20px; border-bottom:1px solid hsl(var(--border));
  display:flex; align-items:center; justify-content:space-between;
}
.accounts-editor-head h3{ font-size:15px; font-weight:600; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.accounts-editor-body{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.acc-field label{ display:block; font-size:12px; font-weight:500; color:hsl(var(--muted-foreground)); margin-bottom:5px; }
.acc-field input, .acc-field select, .acc-field textarea{
  width:100%; padding:9px 12px; border-radius:var(--radius);
  background:hsl(var(--background)); border:1px solid hsl(var(--input)); color:hsl(var(--foreground));
  font-size:13px; font-family:inherit; transition: border-color 0.15s;
}
.acc-field input:focus, .acc-field select:focus, .acc-field textarea:focus{
  border-color:hsl(var(--ring)); outline:none; box-shadow:0 0 0 2px hsl(var(--ring)/0.2);
}
.acc-field textarea{ resize:vertical; min-height:60px; }
.acc-field select{ cursor:pointer; }
.acc-field select option{ background:hsl(var(--background)); color:hsl(var(--foreground)); }
.accounts-editor-foot{ padding:12px 20px; border-top:1px solid hsl(var(--border)); display:flex; gap:8px; justify-content:flex-end; }

/* ================= ACCOUNTS TAB BAR ================= */
.accounts-tab-bar{
  display:flex; gap:2px; padding:12px 16px; border-bottom:1px solid hsl(var(--border));
  flex-shrink:0;
}
.accounts-tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--radius);
  background:transparent; border:1px solid transparent;
  color:hsl(var(--muted-foreground)); font-size:13px; font-weight:500; font-family:inherit;
  cursor:pointer; transition: all 0.15s;
}
.accounts-tab:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.accounts-tab.is-active{ background:hsl(var(--accent)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
.accounts-tab i{ font-size:14px; }
.accounts-tab-panel{ display:none; flex:1; min-height:0; flex-direction:column; overflow:hidden; }
.accounts-tab-panel.is-active{ display:flex; }

/* ================= SWEEPER ================= */
.sweeper-layout{ display:flex; height:100%; gap:0; }
.sweeper-sidebar{
  width:200px; flex-shrink:0; border-right:1px solid hsl(var(--border));
  display:flex; flex-direction:column; padding:16px;
}
.sweeper-sidebar-head{ margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.sweeper-sidebar-head h3{ font-size:15px; font-weight:600; margin:0; }
.sweeper-cat-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:16px; }
.sweeper-cat-item{
  padding:8px 12px; border-radius:var(--radius); cursor:pointer;
  font-size:13px; color:hsl(var(--muted-foreground)); transition: background .1s;
  display:flex; align-items:center; gap:8px;
}
.sweeper-cat-item:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.sweeper-cat-item.is-active{ background:hsl(var(--accent)); color:hsl(var(--foreground)); font-weight:500; }
.sweeper-options{ margin-top:auto; padding-top:12px; border-top:1px solid hsl(var(--border)); }
.sweeper-opt-head{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:hsl(var(--muted-foreground)); margin-bottom:10px; }
.sweeper-body{ flex:1; display:flex; flex-direction:column; min-width:0; }
.sweeper-status-bar{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid hsl(var(--border)); flex-shrink:0;
}
.sweeper-computer-select{ display:flex; align-items:center; gap:8px; }
.sweeper-filter-wrap{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.sweeper-filter-wrap i{ color:hsl(var(--muted-foreground)); font-size:14px; }
.sweeper-filter-input{
  background:hsl(var(--input)); border:1px solid hsl(var(--border)); border-radius:var(--radius);
  color:hsl(var(--foreground)); padding:5px 10px; font-size:13px; width:180px; outline:none;
  transition: border-color .15s;
}
.sweeper-filter-input:focus{ border-color:hsl(var(--ring)); }
.sweeper-filter-input::placeholder{ color:hsl(var(--muted-foreground)); opacity:.6; }
.ph-icon{ vertical-align:middle; flex-shrink:0; width:1em; height:1em; }
.sweeper-results{ flex:1; overflow-y:auto; padding:16px; }
.sweep-group{ margin-bottom:4px; }
.sweep-group-head{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:6px 10px; border-radius:var(--radius); transition: background .1s;
  user-select:none;
}
.sweep-group-head:hover{ background:hsl(var(--accent)); }
.sweep-group-head h4{ margin:0; font-size:13px; font-weight:600; color:hsl(var(--foreground)); }
.sweep-group-actions{ margin-left:auto; display:flex; gap:2px; opacity:0; transition: opacity .15s; }
.sweep-group-head:hover .sweep-group-actions{ opacity:1; }
.sweep-group-actions .btn-ghost{ padding:4px 6px; font-size:13px; border-radius:var(--radius); }
.sweep-group-arrow{ font-size:12px; color:hsl(var(--muted-foreground)); transition: transform .15s; flex-shrink:0; }
.sweep-group.is-open .sweep-group-arrow{ transform:rotate(90deg); }
.sweep-group-items{ display:none; }
.sweep-group.is-open .sweep-group-items{ display:block; padding-left:22px; }

/* ================= FILE VIEWER ================= */
.file-viewer-overlay{
  position:fixed; inset:0; z-index:200;
  background:hsl(0 0% 0% / 0.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.file-viewer-overlay.is-open{ display:flex; }
.file-viewer{
  width:100%; max-width:900px; height:80vh;
  background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 16px 48px hsl(0 0% 0% / 0.5);
}
.file-viewer-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid hsl(var(--border));
  flex-shrink:0;
}
.file-viewer-title{
  font-size:13px; font-weight:600; color:hsl(var(--foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.file-viewer-size{ font-size:11px; color:hsl(var(--muted-foreground)); flex-shrink:0; }
.file-viewer-close{
  width:28px; height:28px; border-radius:6px; border:none;
  background:transparent; color:hsl(var(--muted-foreground)); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background 0.1s, color 0.1s;
}
.file-viewer-close:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.file-viewer-body{
  flex:1; overflow:auto; padding:16px; margin:0;
  font-family:var(--font-mono); font-size:12px; line-height:1.6;
  color:hsl(var(--foreground)); white-space:pre; tab-size:4;
  background:transparent; border:none;
}
.file-viewer-body::-webkit-scrollbar{ width:8px; height:8px; }
.file-viewer-body::-webkit-scrollbar-track{ background:transparent; }
.file-viewer-body::-webkit-scrollbar-thumb{ background:hsl(var(--border)); border-radius:4px; }
.file-viewer-err{ color:hsl(0 80% 60%); }

/* ================= CONFIRM MODAL ================= */
.modal-confirm{ max-width:360px; text-align:center; }
.confirm-icon{
  width:48px; height:48px; border-radius:50%;
  background:hsl(var(--secondary)); color:hsl(var(--destructive));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; font-size:22px;
}
.modal-confirm h3{ font-size:16px; font-weight:600; margin:0 0 6px; text-align:center; }
.modal-confirm p{ font-size:13px; color:hsl(var(--muted-foreground)); margin:0 0 20px; text-align:center; }
.modal-actions-ios{ display:flex; gap:10px; justify-content:center; }

/* ================= iOS 26 BUTTONS ================= */
.modal-btn.ios-cancel, .modal-btn.ios-danger{
  flex:1; padding:11px 20px; border-radius:999px;
  font-size:13px; font-weight:500; font-family:inherit;
  cursor:pointer; border:none; transition: all 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.modal-btn.ios-cancel{
  background:hsl(var(--secondary)); color:hsl(var(--foreground));
}
.modal-btn.ios-cancel:hover{ background:hsl(var(--accent)); }
.modal-btn.ios-cancel:active{ transform:scale(0.97); }
.modal-btn.ios-danger{
  background:hsl(var(--destructive)); color:hsl(var(--destructive-foreground));
}
.modal-btn.ios-danger:hover{ background:hsl(0 80% 48%); }
.modal-btn.ios-danger:active{ transform:scale(0.97); }

/* ================= FOCUS VISIBLE ================= */
button:focus-visible{
  outline: 2px solid hsl(var(--ring)); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ================= NEW TOOL STYLES ================= */
.tool-pre{ font-family:var(--font-mono); font-size:12px; white-space:pre-wrap; word-break:break-all; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:12px; margin:0; max-height:400px; overflow-y:auto; }
.custom-check-group{ display:flex; flex-wrap:wrap; gap:12px; padding:8px 0; }
.hosts-textarea{ width:100%; min-height:300px; font-family:var(--font-mono); font-size:12px; background:hsl(var(--card)); color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:10px; resize:vertical; }
.drive-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.drive-card{ background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:12px; }
.drive-card-head{ font-size:14px; margin-bottom:4px; }
.drive-card-detail{ font-size:12px; color:hsl(var(--muted-foreground)); }
.drive-bar-wrap{ height:6px; background:hsl(var(--muted)); border-radius:3px; margin:6px 0; overflow:hidden; }
.drive-bar{ height:100%; border-radius:3px; transition:width 0.3s; }
.vm-indicator-list{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.vm-indicator{ font-size:12px; padding:6px 10px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); }
.vm-ind-method{ font-weight:600; font-family:var(--font-mono); font-size:11px; }
.btn-danger{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius); border:none; cursor:pointer; font-size:13px; font-weight:500; transition:all 0.15s; background:hsl(0 84% 60%); color:#fff; }
.btn-danger:hover{ filter:brightness(1.15); background:hsl(0 84% 50%); }
/* ================= CLIPBOARD PILLS ================= */
.tool-status.tool-status-warn{ color: hsl(35 80% 55%); }
.wallet-list{ display:flex; flex-direction:column; gap:8px; }
.wallet-card{ padding:12px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); }
.wallet-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.wallet-name{ font-weight:600; font-size:13px; }
.wallet-chain{ font-size:11px; font-family:var(--font-mono); padding:2px 6px; border-radius:4px; background:hsl(270 50% 55% / 0.15); color:hsl(270 60% 65%); }
.wallet-meta{ display:flex; flex-wrap:wrap; gap:4px; }
.wallet-tag{ font-size:11px; padding:2px 6px; border-radius:4px; background:hsl(var(--secondary)); color:hsl(var(--muted-foreground)); display:inline-flex; align-items:center; gap:3px; }
.wallet-tag i{ font-size:11px; }
.wallet-tag.wallet-id{ font-family:var(--font-mono); font-size:10px; opacity:0.6; }
.wallet-tag.wallet-ok{ background:hsl(150 50% 45% / 0.15); color:hsl(150 60% 55%); }
.wallet-seeds{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.wallet-seed{ padding:6px 8px; border-radius:4px; background:hsl(var(--secondary)); font-size:11px; display:flex; flex-direction:column; gap:2px; }
.wallet-seed-label{ font-weight:600; color:hsl(var(--muted-foreground)); display:flex; align-items:center; gap:4px; }
.wallet-seed-label i{ font-size:11px; }
.wallet-seed-value{ font-family:var(--font-mono); font-size:11px; color:hsl(45 80% 65%); word-break:break-all; }
.wallet-seed-mnemonic{ border-left:2px solid hsl(150 60% 55%); }
.wallet-seed-vault{ border-left:2px solid hsl(35 80% 55%); }
.drainer-tab-bar{ display:flex; gap:2px; padding:8px; background:hsl(var(--card)); border-bottom:1px solid hsl(var(--border)); position:sticky; top:0; z-index:2; align-items:center; }
.drainer-tab-bar .drainer-search-wrap{ margin-left:auto; display:flex; align-items:center; gap:4px; background:hsl(var(--background)); border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:4px 8px; }
.drainer-search{ background:none; border:none; outline:none; color:hsl(var(--foreground)); font-size:12px; width:180px; font-family:inherit; }
.drainer-search::placeholder{ color:hsl(var(--muted-foreground)); opacity:0.6; }
.drainer-tab{ display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:var(--radius); border:none; background:transparent; color:hsl(var(--muted-foreground)); font-size:12px; font-weight:500; cursor:pointer; transition:all .15s; }
.drainer-tab:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.drainer-tab.is-active{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.drainer-tab i{ font-size:14px; }
.drainer-tab-panel{ display:none; }
.drainer-tab-panel.is-active{ display:block; max-height:calc(100vh - 52px); overflow-y:auto; padding:12px; }

/* ================= THEME VARIANTS ================= */
/* Light */
[data-theme="light"]{
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 97%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 0 0% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 94%;
  --secondary-foreground: 0 0% 10%;
  --muted: 0 0% 94%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 94%;
  --accent-foreground: 0 0% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 40%;
}
[data-theme="light"] ::selection{ background: hsl(0 0% 90%); }
[data-theme="light"] .sidebar{ background: hsl(0 0% 97%); border-right-color: hsl(0 0% 92%); }
[data-theme="light"] .sidebar-brand-icon{
  background: linear-gradient(135deg, hsl(250 50% 45%), hsl(280 50% 35%));
  box-shadow: 0 2px 8px hsl(250 50% 45% / 0.25);
}
[data-theme="light"] .topbar{ background: hsl(0 0% 100%); border-bottom-color: hsl(0 0% 92%); }
[data-theme="light"] input[type="text"],
[data-theme="light"] textarea,
[data-theme="light"] .tool-input{ background: hsl(0 0% 100%); border-color: hsl(0 0% 88%); color: hsl(0 0% 10%); }
[data-theme="light"] .ov-stat-card,
[data-theme="light"] .tool-panel,
[data-theme="light"] .card{ background: hsl(0 0% 98%); border-color: hsl(0 0% 90%); }
[data-theme="light"] .theme-card{ background: hsl(0 0% 97%); border-color: hsl(0 0% 88%); }
[data-theme="light"] .theme-card:hover{ border-color: hsl(0 0% 60%); }
[data-theme="light"] .theme-label{ color: hsl(0 0% 15%); }
[data-theme="light"] .settings-about{ background: hsl(0 0% 97%); border-color: hsl(0 0% 90%); }
[data-theme="light"] .settings-profile-card{ background: hsl(0 0% 97%); border-color: hsl(0 0% 90%); }

/* Catppuccin Mocha */
[data-theme="catppuccin"]{
  --background: 0 0% 7%;
  --foreground: 0 0% 93%;
  --card: 0 0% 10%;
  --card-foreground: 0 0% 93%;
  --popover: 0 0% 10%;
  --popover-foreground: 0 0% 93%;
  --primary: 267 60% 80%;
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 93%;
  --muted: 0 0% 14%;
  --muted-foreground: 270 15% 60%;
  --accent: 320 40% 14%;
  --accent-foreground: 0 0% 93%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 16%;
  --input: 0 0% 16%;
  --ring: 267 60% 80%;
}
[data-theme="catppuccin"] .sidebar{ background: hsl(0 0% 8%); border-right-color: hsl(0 0% 14%); }
[data-theme="catppuccin"] .sidebar-brand-icon{
  background: linear-gradient(135deg, hsl(267 60% 65%), hsl(320 50% 55%));
  box-shadow: 0 2px 8px hsl(267 60% 55% / 0.3);
}
[data-theme="catppuccin"] .nav-item:hover{ background: hsl(320 40% 14%); }
[data-theme="catppuccin"] .nav-item.is-active{ background: hsl(267 60% 20%); color: hsl(267 60% 80%); }

/* Fatality.win */
[data-theme="fatality"]{
  --background: 249 44% 19%;
  --foreground: 250 33% 74%;
  --card: 249 44% 19%;
  --card-foreground: 250 33% 74%;
  --popover: 249 44% 19%;
  --popover-foreground: 250 33% 74%;
  --primary: 335 90% 40%;
  --primary-foreground: 250 33% 74%;
  --secondary: 255 42% 13%;
  --secondary-foreground: 250 33% 74%;
  --muted: 255 42% 13%;
  --muted-foreground: 250 33% 74%;
  --accent: 335 90% 40%;
  --accent-foreground: 250 33% 74%;
  --destructive: 335 90% 40%;
  --destructive-foreground: 250 33% 74%;
  --border: 255 35% 32%;
  --input: 255 35% 32%;
  --ring: 335 90% 40%;
}
[data-theme="fatality"] .sidebar{ background: hsl(255 42% 13%); border-right-color: hsl(255 30% 22%); }
[data-theme="fatality"] .sidebar-brand-icon{
  background: linear-gradient(135deg, hsl(335 90% 40%), hsl(249 44% 19%));
  box-shadow: 0 2px 8px hsl(335 90% 40% / 0.35);
}
[data-theme="fatality"] .nav-item.is-active{ background: hsl(335 40% 18%); color: hsl(335 90% 40%); }
[data-theme="fatality"] .nav-item:hover{ background: hsl(255 30% 18%); }
[data-theme="fatality"] .ov-stat-card[data-accent="purple"]{ border-left-color: hsl(335 90% 40%); }
[data-theme="fatality"] .ov-stat-card[data-accent="blue"]{ border-left-color: hsl(250 33% 74%); }
[data-theme="fatality"] .ov-stat-card[data-accent="green"]{ border-left-color: hsl(140 60% 45%); }
[data-theme="fatality"] .ov-stat-card[data-accent="orange"]{ border-left-color: hsl(250 33% 74%); }
[data-theme="fatality"] ::selection{ background: hsl(335 90% 40%); }

/* Nord */
[data-theme="nord"]{
  --background: 220 23% 11%;
  --foreground: 218 27% 80%;
  --card: 220 22% 14%;
  --card-foreground: 218 27% 80%;
  --popover: 220 22% 14%;
  --popover-foreground: 218 27% 80%;
  --primary: 213 58% 65%;
  --primary-foreground: 220 23% 11%;
  --secondary: 220 22% 17%;
  --secondary-foreground: 218 27% 80%;
  --muted: 220 22% 17%;
  --muted-foreground: 219 15% 55%;
  --accent: 179 45% 18%;
  --accent-foreground: 179 50% 75%;
  --destructive: 1 60% 50%;
  --destructive-foreground: 218 27% 80%;
  --border: 220 22% 19%;
  --input: 220 22% 19%;
  --ring: 213 58% 65%;
}
[data-theme="nord"] .sidebar{ background: hsl(220 23% 12%); border-right-color: hsl(220 22% 18%); }
[data-theme="nord"] .sidebar-brand-icon{
  background: linear-gradient(135deg, hsl(213 58% 55%), hsl(179 45% 45%));
  box-shadow: 0 2px 8px hsl(213 58% 50% / 0.3);
}
[data-theme="nord"] .nav-item.is-active{ background: hsl(213 58% 18%); color: hsl(213 58% 65%); }
[data-theme="nord"] .nav-item:hover{ background: hsl(220 22% 18%); }
[data-theme="nord"] ::selection{ background: hsl(213 50% 30%); }
[data-theme="nord"] input[type="text"],
[data-theme="nord"] textarea,
[data-theme="nord"] .tool-input{ border-color: hsl(220 22% 20%); }

/* ================= DATA VIEW ================= */
.data-layout{ display:flex; height:100%; gap:0; }

.data-sidebar{
  width:260px; flex-shrink:0; border-right:1px solid hsl(var(--border));
  display:flex; flex-direction:column; padding:16px;
  min-width:0;
}
.data-sidebar-head{ margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.data-sidebar-head h3{ font-size:15px; font-weight:600; margin:0; }
.data-paste-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.data-paste-item{
  padding:10px 12px; border:1px solid hsl(var(--border)); border-radius:var(--radius);
  cursor:pointer; transition:background .1s, opacity .4s, transform .4s;
  display:flex; align-items:center; gap:8px;
}
.data-paste-item[data-removing]{ opacity:0; transform:translateX(-8px); }
@keyframes dataFadeIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.data-paste-item{ animation:dataFadeIn .4s ease; }
.data-paste-item:hover{ background:hsl(var(--accent)); }
.data-paste-item.is-active{ background:hsl(var(--accent)); border-color:hsl(var(--ring)); }
.data-paste-item i{ font-size:16px; color:hsl(var(--muted-foreground)); flex-shrink:0; }
.data-paste-item-name{ font-size:13px; font-weight:500; color:hsl(var(--foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.data-paste-item-syntax{ font-size:11px; color:hsl(var(--muted-foreground)); flex-shrink:0; text-transform:uppercase; letter-spacing:0.5px; }
.data-paste-del{
  padding:2px 4px; font-size:13px; border-radius:var(--radius);
  color:hsl(var(--muted-foreground)); flex-shrink:0; opacity:0; transition:opacity .15s, color .15s;
}
.data-paste-del i{ color:inherit; }
.data-paste-item:hover .data-paste-del{ opacity:1; }
.data-paste-del:hover{ color:hsl(0 84% 60%) !important; }

.data-editor{ flex:1; display:flex; flex-direction:column; padding:0; }
.data-editor-head{
  padding:12px 20px; border-bottom:1px solid hsl(var(--border));
  display:flex; align-items:center; justify-content:space-between;
}
.data-editor-head h3{ font-size:15px; font-weight:600; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.data-editor-body{ flex:1; padding:20px; display:flex; flex-direction:column; gap:14px; min-height:0; overflow-y:auto; }

.data-editor-toolbar{ display:flex; align-items:center; gap:10px; }
.data-name-input{
  flex:1; padding:9px 12px; border-radius:var(--radius);
  background:hsl(var(--background)); border:1px solid hsl(var(--input)); color:hsl(var(--foreground));
  font-size:13px; font-family:inherit; transition:border-color 0.15s;
}
.data-name-input:focus{ border-color:hsl(var(--ring)); outline:none; box-shadow:0 0 0 2px hsl(var(--ring)/0.2); }
.data-editor-body .cselect{ width:auto; min-width:140px; flex-shrink:0; }

.data-editor-area{
  width:100%; height:100%; padding:12px;
  background:transparent; border:none; border-radius:var(--radius);
  color:transparent; caret-color:hsl(var(--foreground));
  font-family:var(--font-mono); font-size:12px; line-height:1.7; tab-size:2;
  resize:none; outline:none; position:absolute; top:0; left:0; z-index:1;
  overflow:auto; white-space:pre;
}
.data-editor-area::placeholder{ color:hsl(var(--muted-foreground)); opacity:0.5; }
.data-editor-wrap{
  flex:1; min-height:0; position:relative;
  background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius);
  overflow:hidden;
}
.data-editor-wrap:focus-within{ border-color:hsl(var(--ring)); box-shadow:0 0 0 2px hsl(var(--ring)/0.2); }
.data-editor-highlight{
  margin:0; padding:12px;
  font-family:var(--font-mono); font-size:12px; line-height:1.7; tab-size:2;
  color:hsl(var(--foreground)); white-space:pre; overflow:auto;
  position:absolute; top:0; left:0; right:0; bottom:0;
  pointer-events:none; background:transparent; border:none; border-radius:var(--radius);
}
.data-editor-highlight code{
  font-family:inherit; font-size:inherit; line-height:inherit;
  background:transparent !important;
}
.data-editor-highlight[class*="language-"]{ background:transparent !important; }
pre[class*="language-"]{ background:transparent !important; margin:0 !important; padding:0 !important; }
code[class*="language-"]{ background:transparent !important; font-family:inherit !important; font-size:inherit !important; text-shadow:none !important; }

.data-editor-foot{
  padding:12px 20px; border-top:1px solid hsl(var(--border));
  display:flex; align-items:center; justify-content:space-between;
}
.data-status-info{ font-size:11px; color:hsl(var(--muted-foreground)); font-family:var(--font-mono); }
.data-status-encoding{ font-size:11px; color:hsl(var(--muted-foreground)); opacity:0.5; }

.data-empty-state{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:hsl(var(--muted-foreground)); }
.data-empty-state i{ font-size:32px; opacity:0.3; }
.data-empty-state p{ font-size:13px; }

/* ================= SETTINGS PAGE ================= */
.settings-page{ max-width:640px; display:flex; flex-direction:column; gap:24px; }
.settings-section{ display:flex; flex-direction:column; gap:10px; }
.settings-section-title{ font-size:13px; font-weight:600; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:6px; }
.settings-section-title i{ font-size:15px; }

.settings-profile-card{ display:flex; align-items:center; gap:20px; padding:20px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); }
.settings-avatar-wrap{ position:relative; flex-shrink:0; }
.settings-avatar{
  width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:hsl(var(--secondary)); color:hsl(var(--muted-foreground)); font-size:28px; font-weight:700;
  background-size:cover; background-position:center; overflow:hidden; flex-shrink:0;
}
.settings-avatar-edit{
  position:absolute; bottom:0; right:0; width:24px; height:24px; border-radius:50%;
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:12px; border:2px solid hsl(var(--card)); transition:transform .15s;
}
.settings-avatar-edit:hover{ transform:scale(1.1); }
.settings-profile-fields{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; }
.settings-field{ display:flex; flex-direction:column; gap:3px; }
.settings-field label{ font-size:11px; font-weight:600; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.3px; }
.settings-field input{
  padding:8px 10px; border-radius:var(--radius); border:1px solid hsl(var(--border));
  background:hsl(var(--background)); color:hsl(var(--foreground)); font-size:13px; font-family:inherit;
  transition:border-color .15s;
}
.settings-field input:focus{ outline:none; border-color:hsl(var(--ring)); }

.theme-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.theme-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px;
  border-radius:var(--radius); border:2px solid hsl(var(--border)); background:hsl(var(--card));
  cursor:pointer; transition:all .15s; position:relative; overflow:hidden;
}
.theme-card:hover{ border-color:hsl(var(--muted-foreground)); transform:translateY(-1px); }
.theme-card.is-active{ border-color:hsl(var(--primary)); }
.theme-check{ display:none; position:absolute; top:6px; right:6px; color:hsl(var(--primary)); font-size:16px; }
.theme-card.is-active .theme-check{ display:block; }
.theme-label{ font-size:11px; font-weight:500; }

.theme-preview{
  width:100%; height:52px; border-radius:6px; padding:4px; display:flex; flex-direction:column; gap:2px;
  overflow:hidden;
}
.theme-preview .tp-bar{ height:6px; border-radius:3px; flex-shrink:0; }
.theme-preview .tp-side{ display:flex; gap:2px; flex:1; }
.theme-preview .tp-body{ flex:1; border-radius:3px; }

[data-preview="dark"] .tp-bar{ background:hsl(0 0% 14%); }
[data-preview="dark"] .tp-side{ width:14px; background:hsl(0 0% 10%); }
[data-preview="dark"] .tp-body{ background:hsl(0 0% 5%); }

[data-preview="light"] .tp-bar{ background:hsl(0 0% 94%); }
[data-preview="light"] .tp-side{ width:14px; background:hsl(0 0% 97%); }
[data-preview="light"] .tp-body{ background:hsl(0 0% 100%); }

[data-preview="catppuccin"] .tp-bar{ background:hsl(267 40% 20%); }
[data-preview="catppuccin"] .tp-side{ width:14px; background:hsl(320 35% 16%); }
[data-preview="catppuccin"] .tp-body{ background:hsl(270 25% 10%); }

[data-preview="fatality"] .tp-bar{ background:hsl(0 100% 12%); }
[data-preview="fatality"] .tp-side{ width:14px; background:hsl(0 50% 8%); }
[data-preview="fatality"] .tp-body{ background:hsl(0 0% 5%); }

[data-preview="nord"] .tp-bar{ background:hsl(213 50% 22%); }
[data-preview="nord"] .tp-side{ width:14px; background:hsl(220 23% 14%); }
[data-preview="nord"] .tp-body{ background:hsl(220 23% 11%); }

.settings-about{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); font-size:12px; color:hsl(var(--muted-foreground)); }
.settings-about-item strong{ color:hsl(var(--foreground)); }
.settings-about-sep{ opacity:0.4; }

/* ================= TOAST NOTIFICATIONS ================= */
.toast-container{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-radius:14px;
  background:hsl(var(--popover)); border:1px solid hsl(var(--border));
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.4), 0 2px 8px hsl(0 0% 0% / 0.2);
  backdrop-filter:blur(12px);
  max-width:360px; width:max-content; cursor:pointer;
  animation: toastIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.toast.toast-out{ animation: toastOut 0.35s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.toast-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.toast-icon.green{ background:hsl(150 50% 45% / 0.15); color:hsl(150 60% 55%); }
.toast-icon.red{ background:hsl(0 60% 50% / 0.15); color:hsl(0 65% 60%); }
.toast-body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.toast-title{ font-size:13px; font-weight:600; color:hsl(var(--foreground)); }
.toast-text{ font-size:12px; color:hsl(var(--muted-foreground)); }
.toast-progress{
  position:absolute; bottom:0; left:14px; right:14px; height:2px; border-radius:1px;
  background:hsl(var(--border)); overflow:hidden;
}
.toast-progress-bar{
  height:100%; border-radius:1px; background:hsl(var(--muted-foreground));
  animation: toastCountdown 4s linear forwards;
}
@keyframes toastIn{
  0%{ opacity:0; transform:translateY(-100%) scale(0.9); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toastOut{
  0%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-60%) scale(0.9); }
}
@keyframes toastCountdown{
  0%{ width:100%; }
  100%{ width:0%; }
}

.panels-empty-state, .domains-empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:80px 20px; color:hsl(var(--muted-foreground)); }
.panels-empty-state i, .domains-empty-state i{ font-size:40px; opacity:0.3; }
.panels-empty-state p, .domains-empty-state p{ font-size:14px; font-weight:600; }
.panels-empty-state span, .domains-empty-state span{ font-size:12px; opacity:0.6; }

.machines-stats-bar{ display:flex; align-items:center; gap:12px; padding:0 0 16px; border-bottom:1px solid hsl(var(--border)); margin-bottom:16px; }
.machines-stat{ display:flex; align-items:center; gap:5px; font-size:12px; color:hsl(var(--muted-foreground)); padding:5px 10px; border-radius:var(--radius); background:hsl(var(--card)); border:1px solid hsl(var(--border)); }
.machines-stat i{ font-size:8px; }
.machines-stat.online i{ color:hsl(142 70% 50%); }
.machines-stat.offline i{ color:hsl(var(--muted-foreground)); opacity:0.4; }
.machines-stat.total i{ color:hsl(var(--primary)); }

.machines-table-wrap{ overflow-x:auto; }
.machines-table{ width:100%; border-collapse:separate; border-spacing:0; }
.machines-table thead th{ padding:8px 12px; font-size:11px; font-weight:600; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.5px; text-align:left; border-bottom:1px solid hsl(var(--border)); position:sticky; top:0; background:hsl(var(--background)); }
.mach-col-status{ width:16px; }
.mach-col-status-text{ width:70px; }
.mach-col-ip{ width:140px; }
.mach-col-actions{ width:260px; }
.mach-col-name{ min-width:150px; }

.mach-row{ transition:background .1s; }
.mach-row:hover{ background:hsl(var(--accent) / 0.4); }
.mach-row td{ padding:10px 12px; border-bottom:1px solid hsl(var(--border) / 0.5); vertical-align:middle; }
.mach-row.offline td{ opacity:0.5; }
.mach-row.offline:hover td{ opacity:0.7; }

.mach-dot{ display:block; width:8px; height:8px; border-radius:50%; }
.mach-dot.on{ background:hsl(142 70% 50%); box-shadow:0 0 6px hsl(142 70% 50% / 0.4); }
.mach-row.offline .mach-dot{ background:hsl(var(--muted-foreground)); opacity:0.35; }

.mach-name{ font-size:13px; font-weight:600; color:hsl(var(--foreground)); display:block; }
.mach-host{ font-size:11px; color:hsl(var(--muted-foreground)); font-family:var(--font-mono); display:block; }

.mach-col-ip code{ font-size:11px; color:hsl(var(--muted-foreground)); font-family:var(--font-mono); background:hsl(var(--accent) / 0.4); padding:2px 6px; border-radius:calc(var(--radius) - 2px); }

.mach-badge{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; padding:3px 8px; border-radius:999px; }
.mach-badge.on{ background:hsl(142 70% 50% / 0.15); color:hsl(142 70% 50%); }
.mach-row.offline .mach-badge{ background:hsl(var(--muted-foreground) / 0.12); color:hsl(var(--muted-foreground)); }

.mach-actions{ display:flex; gap:2px; flex-wrap:nowrap; }
.mach-action-btn{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:none; background:transparent; color:hsl(var(--muted-foreground)); border-radius:calc(var(--radius) - 2px); cursor:pointer; transition:all .15s; font-size:13px; flex-shrink:0; }
.mach-action-btn:hover{ background:hsl(var(--accent)); color:hsl(var(--foreground)); }
.mach-action-btn-rename{ color:hsl(var(--primary) / 0.7); }
.mach-action-btn-rename:hover{ color:hsl(var(--primary)); background:hsl(var(--primary) / 0.1); }

.machines-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:80px 20px; color:hsl(var(--muted-foreground)); }
.machines-empty i{ font-size:40px; opacity:0.3; }
.machines-empty p{ font-size:14px; font-weight:600; }
.machines-empty span{ font-size:12px; opacity:0.6; }

/* ================= DOMAINS ================= */
.domain-dns-section{ margin-top:8px; border-top:1px solid hsl(var(--border)); padding-top:14px; }
.domain-dns-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.domain-dns-header h4{ font-size:13px; font-weight:600; margin:0; color:hsl(var(--foreground)); }
.domain-dns-table-wrap{ border:1px solid hsl(var(--border)); border-radius:var(--radius); }
.domain-dns-table{ width:100%; border-collapse:collapse; }
.domain-dns-table thead th{ padding:6px 10px; font-size:10px; font-weight:600; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.5px; text-align:left; border-bottom:1px solid hsl(var(--border)); background:hsl(var(--card)); }
.domain-dns-table td{ padding:4px 6px; border-bottom:1px solid hsl(var(--border) / 0.5); vertical-align:middle; }
.domain-dns-table td select{ min-width:70px; padding:4px 6px; font-size:11px; }
.domain-dns-table td input{ background:transparent; border:1px solid hsl(var(--border)); border-radius:calc(var(--radius) - 2px); padding:4px 8px; font-size:11px; color:hsl(var(--foreground)); width:100%; box-sizing:border-box; }
.domain-dns-table td input:focus{ outline:none; border-color:hsl(var(--ring)); }
.domain-dns-empty{ display:flex; align-items:center; justify-content:center; gap:8px; padding:24px; color:hsl(var(--muted-foreground)); font-size:12px; }
.domain-dns-empty i{ font-size:20px; opacity:0.3; }
.mailer-split-50{ flex:1; min-width:0; }
.domain-test-result{ display:flex; flex-direction:column; gap:4px; margin-top:4px; padding:10px 14px; border-radius:var(--radius); background:hsl(var(--card)); border:1px solid hsl(var(--border)); font-size:12px; }
.domain-test-row{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.domain-test-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.domain-test-dot.ok{ background:hsl(142 70% 50%); }
.domain-test-dot.warn{ background:hsl(38 92% 50%); }
.domain-test-dot.fail{ background:hsl(0 84% 60%); }
.domain-test-dot.testing{ background:hsl(var(--primary)); animation: domainPulse 1s ease infinite; }
@keyframes domainPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
.domain-test-label{ font-weight:600; color:hsl(var(--foreground)); min-width:50px; }
.domain-test-val{ color:hsl(var(--muted-foreground)); font-family:var(--font-mono); font-size:11px; }
.domain-test-time{ margin-left:auto; color:hsl(var(--muted-foreground)); font-size:11px; font-family:var(--font-mono); }

/* ================= PANELS ================= */
.panels-right{ flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.panels-right .data-editor{ flex:1; display:flex; flex-direction:column; min-height:0; }
.panels-right .data-editor-body{ flex:1; overflow-y:auto; }
.panels-right .data-editor-head{ flex-shrink:0; }
.panel-actions-bar{ display:flex; gap:8px; }
.panel-test-result{ display:flex; flex-direction:column; gap:4px; padding:10px 14px; border-radius:var(--radius); background:hsl(var(--card)); border:1px solid hsl(var(--border)); font-size:12px; }
.panels-terminal{ display:flex; flex-direction:column; height:300px; min-height:200px; border-top:1px solid hsl(var(--border)); background:#1a1b26; }
.panels-terminal-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 12px; font-size:12px; color:hsl(var(--muted-foreground)); background:hsl(var(--card)); border-bottom:1px solid hsl(var(--border)); flex-shrink:0; }
.panels-terminal-head i{ margin-right:4px; }
.panels-terminal-body{ flex:1; overflow:hidden; }
.panels-terminal-body .xterm{ padding:8px 0 0 8px; }

/* ================= DEPLOY / UPLOAD ================= */
.panel-deploy-section{ margin-top:12px; }
.panel-deploy-section h4{ display:flex; align-items:center; gap:6px; }
.panel-deploy-section h4 i{ color:hsl(var(--primary)); }
.panel-upload-zone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:18px 12px; border:1.5px dashed hsl(var(--border)); border-radius:8px;
  background:hsl(var(--muted)/0.3); text-align:center; cursor:pointer; transition:all .15s;
  font-size:12px; color:hsl(var(--muted-foreground));
}
.panel-upload-zone:hover,
.panel-upload-zone.dragover{
  border-color:hsl(var(--primary)); background:hsl(var(--primary)/0.06); color:hsl(var(--foreground));
}
.panel-file-list{ display:flex; flex-direction:column; gap:3px; margin-top:6px; max-height:140px; overflow-y:auto; }
.panel-file-item{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:5px 8px; border-radius:5px; background:hsl(var(--muted)/0.25);
  font-size:11px; color:hsl(var(--muted-foreground));
}
.panel-file-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel-file-item .file-size{ flex-shrink:0; opacity:0.5; }
.panel-file-item .file-rm{ cursor:pointer; opacity:0.4; flex-shrink:0; }
.panel-file-item .file-rm:hover{ opacity:1; color:hsl(var(--destructive)); }
.panel-deploy-progress{
  margin-top:8px; font-size:11px; color:hsl(var(--muted-foreground));
}
.panel-deploy-progress .pct{ color:hsl(var(--primary)); font-weight:600; }

/* ================= CLOUDFLARE ================= */
.domain-cf-status{ font-size:12px; color:hsl(var(--muted-foreground)); padding:4px 0; }
.domain-cf-status .cf-ok{ color:hsl(142 70% 50%); }
.domain-cf-status .cf-err{ color:hsl(0 84% 60%); }
.domain-dns-header i{ margin-right:4px; }