:root{
  --primary-color:#3b82f6; --secondary-color:#64748b;
  --success-color:#22c55e; --danger-color:#ef4444;
  --warning-color:#f59e0b; --info-color:#06b6d4;

  --app-bg-1:#0e0f13; --app-bg-2:#111827;
  --surface:#1a202c; --surface-2:#111827; --surface-3:#0b1220;
  --text:#e5e7eb; --text-dim:#94a3b8;
  --border:rgba(255,255,255,.08);
  --shadow:0 2px 12px rgba(0,0,0,.35);
  --radius:12px; --focus:0 0 0 3px rgba(59,130,246,.25);
  --transition:all .25s ease;

  --sidebar-width:260px;
  --sidebar-bg:#0f172a;
  --sidebar-hover:rgba(59,130,246,.1);
}

html[data-theme="light"]{
  --app-bg-1:#667eea;
  --app-bg-2:#764ba2;
  --surface:#f8fafc;
  --surface-2:#e2e8f0;
  --surface-3:#cbd5e1;
  --text:#1e293b;
  --text-dim:#64748b;
  --border:rgba(0,0,0,.15);
  --shadow:0 2px 16px rgba(0,0,0,.15);
  
  --sidebar-bg:#ffffff;
  --sidebar-hover:rgba(59,130,246,.08);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,system-ui,sans-serif;
  background:linear-gradient(180deg,var(--app-bg-1) 0%, var(--app-bg-2) 100%);
  min-height:100vh;color:var(--text);line-height:1.6;
  display:flex;
}

.sidebar{
  width:var(--sidebar-width);
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  height:100vh;
  position:fixed;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  z-index:1000;
  transition:var(--transition);
  box-shadow:var(--shadow);
}

.sidebar.collapsed{
  width:70px;
}

.sidebar.collapsed .sidebar-header span,
.sidebar.collapsed .nav-item span{
  display:none;
}

.sidebar.collapsed .sidebar-header{
  justify-content:center;
  padding:20px 10px;
}

.sidebar.collapsed .nav-item{
  justify-content:center;
  padding:14px 10px;
}

.sidebar.collapsed .sidebar-footer{
  padding:16px 10px;
}

.sidebar-header{
  padding:24px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.25rem;
  font-weight:700;
  color:var(--primary-color);
}

.sidebar-header i{
  font-size:1.5rem;
}

.sidebar-nav{
  flex:1;
  padding:16px 0;
  overflow-y:auto;
}

.sidebar-footer{
  padding:16px 20px;
  border-top:1px solid var(--border);
}

.sidebar-collapse-btn{
  width:100%;
  padding:12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  transition:var(--transition);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}

.sidebar-collapse-btn:hover{
  background:var(--primary-color);
  color:#fff;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  color:var(--text);
  text-decoration:none;
  transition:var(--transition);
  border-left:3px solid transparent;
  cursor:pointer;
}

.nav-item:hover{
  background:var(--sidebar-hover);
  color:var(--primary-color);
}

.nav-item.active{
  background:var(--sidebar-hover);
  color:var(--primary-color);
  border-left-color:var(--primary-color);
}

.nav-item i{
  font-size:1.1rem;
  width:24px;
  text-align:center;
}

.sidebar-toggle{
  position:fixed;
  left:20px;
  top:20px;
  width:46px;
  height:46px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1001;
  box-shadow:var(--shadow);
  transition:var(--transition);
}

.sidebar-toggle:hover{
  background:var(--primary-color);
  color:#fff;
}

.main-content{
  flex:1;
  margin-left:var(--sidebar-width);
  transition:var(--transition);
}

.sidebar.collapsed ~ .main-content{
  margin-left:70px;
}

.container{max-width:1400px;margin:0 auto;padding:20px}

/* Page Content */
.page-content{
  display:none;
}

.page-content.active{
  display:block;
}

.header{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);color:var(--text);
  padding:20px 24px;border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px;
}

.header-content h1{font-size:1.75rem}
.header-content p{color:var(--text-dim)}
.header-actions{display:flex;gap:12px}

/* Buttons */
.btn{
  padding:11px 16px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:var(--transition);
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
}

.two-column-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:26px}

/* Cards */
.card{background:var(--surface);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border);margin-bottom:24px}
.card-header{background:var(--surface);color:var(--text);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.card-header h3{font-size:1.1rem;display:flex;align-items:center;gap:8px}
.card-body{padding:20px}
.webhook-config{background:var(--surface)}

/* Badge */
.badge{
  background:var(--primary-color);
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
}

.usage-stats-section:last-child{
  margin-bottom:0;
}

.usage-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.table-container{overflow-x:auto}
.history-scroll{max-height:420px; overflow-y:auto;}

.accounts-table{width:100%;border-collapse:collapse;font-size:.95rem;color:var(--text)}
.accounts-table th,.accounts-table td{padding:14px;text-align:left;border-bottom:1px solid var(--border)}
.accounts-table th{background:var(--surface-3);text-transform:uppercase;font-size:.82rem;letter-spacing:.4px;font-weight:600}
.accounts-table tbody tr{transition:var(--transition)}
.accounts-table tbody tr:hover{background:rgba(0,0,0,.03)}
html[data-theme="dark"] .accounts-table tbody tr:hover{background:rgba(255,255,255,.03)}
html[data-theme="light"] .accounts-table tbody tr:hover{background:rgba(0,0,0,.06)}
.no-data-message{padding:36px;color:var(--text-dim);text-align:center}
.no-data-message i{font-size:2.6rem;margin-bottom:12px;color:#475569;display:block}
.no-data-message p{margin:0}

/* Action Buttons */
.action-buttons{display:flex;gap:6px}

/* Badges */
.status-badge{padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.3px;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px}
.status-badge.online{background:rgba(34,197,94,.12);color:#22c55e;border-color:rgba(34,197,94,.35)}
.status-badge.offline{background:rgba(239,68,68,.12);color:#ef4444;border-color:rgba(239,68,68,.35)}
.status-badge.loading{background:rgba(245,158,11,.12);color:#f59e0b;border-color:rgba(245,158,11,.35)}

/* System Info */
.system-info{display:grid;gap:12px}
.info-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--surface-2);border-radius:10px;border:1px solid var(--border);color:var(--text);gap:10px;flex-wrap:wrap}
.info-item code{background:#0a0f16;padding:8px 10px;border-radius:8px;border:1px solid var(--border);font-family:'Monaco','Courier New',monospace;color:var(--text);max-width:420px;overflow-x:auto;font-size:.85rem}
html[data-theme="light"] .info-item code{background:#cbd5e1;color:#1e293b;border-color:rgba(0,0,0,.2)}

/* Copy Trading Layout */
.copy-trading-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
  margin-bottom:26px;
}

.copy-form-sections{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.account-section{
  background:var(--surface-2);
  padding:20px;
  border-radius:10px;
  border:1px solid var(--border);
}

.section-title{
  font-size:1rem;
  margin-bottom:16px;
  color:var(--text);
  font-weight:600;
}

.copy-account-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
}

.copy-account-row .form-group{
  flex:1;
}

.plan-form-section{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:20px;
}

.pairs-column{
  display:flex;
  flex-direction:column;
  background:var(--surface-2);
  border-radius:10px;
  border:1px solid var(--border);
  padding:16px;
}

.pairs-column-title{
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:2px solid var(--primary-color);
  display:flex;
  align-items:center;
  gap:8px;
}

.pair-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}

.pair-content{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
}

.info-grid{
  display:grid;
  gap:6px;
  font-size:.88rem;
}

.info-grid div{
  color:var(--text-dim);
}

.info-grid strong{
  color:var(--text);
  margin-right:4px;
}

.copy-arrow{
  font-size:1.5rem;
  color:var(--primary-color);
  display:flex;
  align-items:center;
  justify-content:center;
}

.pair-modal-section{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
}

.pair-modal-section-title{
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px;
}

.pair-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.plan-item-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.plan-item-arrow{
  font-size:1.2rem;
  color:var(--primary-color);
  flex-shrink:0;
}

.pair-table-arrow{
  font-size:1.2rem;
  color:var(--primary-color);
}

/* DARK default */

.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{background:var(--primary-color)}
.btn-secondary{background:var(--secondary-color)}
.btn-success{background:var(--success-color);color:#fff}
.btn-danger{background:var(--danger-color)}
.btn-warning{background:var(--warning-color);color:#0b0b0b}
.btn-info{background:var(--info-color);color:#fff}
.btn-sm{padding:8px 12px;font-size:.85rem}
.btn-copy{background:none;border:1px solid rgba(255,255,255,.12);color:var(--text);padding:8px;border-radius:8px}
html[data-theme="dark"] .btn-copy{color:#cbd5e1}
.btn-copy:hover{background:rgba(255,255,255,.08);color:#fff}

/* Icon-only toggle button */
.btn-icon{width:46px;height:46px;border-radius:12px;padding:0;justify-content:center}
.btn-icon i{font-size:1.1rem}

.btn-full{width:100%}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:26px}
.stat-card{background:var(--surface);color:var(--text);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px;border:1px solid var(--border);transition:var(--transition)}
.stat-card:hover{transform:translateY(-2px)}
.stat-icon{font-size:2rem;color:var(--primary-color);width:48px;min-width:48px;display:flex;align-items:center;justify-content:center;text-align:center}
.stat-number{font-size:1.8rem;font-weight:700}
.stat-label{color:var(--text-dim);font-size:.9rem;text-transform:uppercase;letter-spacing:.4px}

/* Solid dots for online/offline */
.stat-icon.online,.stat-icon.offline{position:relative;font-size:0;width:22px;height:22px;min-width:22px;border-radius:50%;background:transparent;border:0;box-shadow:none;line-height:0}
.stat-icon.online::before,.stat-icon.offline::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor}
.stat-icon.online{color:var(--success-color)}
.stat-icon.offline{color:var(--danger-color)}

/* Stats Grid 4 Columns */
.stats-grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:26px;
}

.table-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Forms */
.add-form-vertical{display:flex;flex-direction:column;gap:16px}
.form-group{display:flex;flex-direction:column}
.form-group label{margin-bottom:8px;color:var(--text);font-weight:500}
.form-input,.search-input{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);transition:var(--transition);font-size:1rem}
html[data-theme="dark"] .form-input,html[data-theme="dark"] .search-input{color:#fff}
html[data-theme="light"] .form-input,html[data-theme="light"] .search-input{color:#1e293b;background:#fff;border-color:rgba(0,0,0,.2)}
.form-input:focus,.search-input:focus{outline:none;box-shadow:var(--focus);border-color:var(--primary-color)}
.search-input{width:260px}
.url-input-group{display:flex;align-items:center;gap:10px}
.url-input-group .form-input{flex:1}

/* Account Button Group */
.account-button-group{
  display:flex;
  gap:10px;
}

.account-button-group .btn{
  flex:1;
}

.webhook-info{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:14px;background:var(--surface-2);border-radius:10px;border:1px solid var(--border)}
.info-row{font-size:.9rem;color:var(--text)}
html[data-theme="light"] .webhook-info{background:#e2e8f0;border-color:rgba(0,0,0,.15)}
html[data-theme="light"] .info-row{color:#1e293b}

/* Example/JSON */
.example-section{margin-top:18px}
.example-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.example-nav{display:flex;gap:6px;flex-wrap:wrap}
.example-nav-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:.8rem;transition:var(--transition)}
html[data-theme="dark"] .example-nav-btn{color:#fff}
html[data-theme="light"] .example-nav-btn{background:#cbd5e1;border-color:rgba(0,0,0,.2);color:#1e293b}
.example-nav-btn:hover,.example-nav-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}
.example-content{background:var(--surface-2);border-radius:10px;padding:14px}
.example-title{margin-bottom:10px;font-weight:600;color:var(--text)}
html[data-theme="light"] .example-content{background:#e2e8f0}
html[data-theme="light"] .example-title{color:#1e293b}
.json-container{position:relative;background:var(--surface-3);border-radius:10px;border:1px solid var(--border)}
html[data-theme="light"] .json-container{background:#cbd5e1;border-color:rgba(0,0,0,.2)}
.json-copy-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.08);border:none;color:var(--text);padding:8px 9px;border-radius:8px;cursor:pointer;transition:var(--transition);z-index:10}
html[data-theme="dark"] .json-copy-btn{color:#fff}
.json-copy-btn:hover{background:var(--primary-color);color:#fff}
.json-code{background:transparent;color:var(--text);padding:16px;margin:0;font-family:'Monaco','Courier New',monospace;font-size:.9rem;line-height:1.6;white-space:pre-wrap;overflow-x:auto;max-height:320px}
html[data-theme="light"] .json-code{color:#1e293b}

/* Usage Stats Section */
.usage-stats-section{
  padding:16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:16px;
}

.usage-stats-title{
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:16px;
}

.usage-stat-item{
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:var(--transition);
}

.usage-stat-item:hover{
  background:var(--surface);
  transform:translateY(-1px);
}

.usage-stat-icon{
  font-size:1.5rem;
  color:var(--primary-color);
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,0.1);
  border-radius:8px;
  flex-shrink:0;
}

.usage-stat-icon.online-icon{
  color:var(--success-color);
  background:rgba(34,197,94,0.1);
}

.usage-stat-icon.offline-icon{
  color:var(--danger-color);
  background:rgba(239,68,68,0.1);
}

.usage-stat-info{
  flex:1;
  min-width:0;
}

.usage-stat-number{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}

.usage-stat-label{
  font-size:0.8rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:0.3px;
  margin-top:2px;
}

.copy-button-group{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.copy-button-group .btn{
  white-space:nowrap;
}

.plans-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:400px;
  overflow-y:auto;
  padding:2px;
}

.plan-item{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:var(--transition);
}

.plan-item:hover{
  background:var(--surface-3);
  transform:translateX(2px);
}

.plan-name{
  font-weight:600;
  color:var(--text);
  flex:1;
}

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

.plan-actions .btn{
  padding:6px 10px;
  font-size:0.85rem;
}

.empty-state-small{
  text-align:center;
  padding:40px 20px;
  color:var(--text-dim);
}

.empty-state-small i{
  font-size:2rem;
  margin-bottom:10px;
  opacity:.4;
  display:block;
}

.empty-state-small p{
  margin:0;
  font-size:0.9rem;
}

.required{color:var(--danger-color)}

/* Copy Pairs List - Two Column Layout */
.pairs-two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  min-height:400px;
}

.accounts-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:450px;
  overflow-y:auto;
  padding-right:4px;
  flex:1;
}

.account-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  transition:var(--transition);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.account-card:hover{
  background:var(--surface-3);
  transform:translateX(2px);
  box-shadow:var(--shadow);
}

.account-card-info{
  flex:1;
}

.account-card-number{
  font-weight:700;
  color:var(--text);
  font-size:1rem;
  margin-bottom:4px;
}

.account-card-nickname{
  color:var(--text-dim);
  font-size:0.85rem;
}

.account-card-actions{
  display:flex;
  gap:6px;
}

.copy-pairs-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.copy-pair-card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  transition:var(--transition);
}

.copy-pair-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

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

.account-info h5{
  font-size:.95rem;
  margin-bottom:10px;
  color:var(--primary-color);
  display:flex;
  align-items:center;
  gap:6px;
}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--text-dim);
}

.empty-state i{
  font-size:3rem;
  margin-bottom:16px;
  opacity:.5;
  display:block;
}

.empty-state p{
  margin:0;
  font-size:1.1rem;
}

.empty-subtitle{
  font-size:.9rem;
  margin-top:8px;
  opacity:.7;
}

.account-selection-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.account-selection-item{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 16px;
  transition:var(--transition);
}

.account-selection-item:hover{
  background:var(--surface-3);
  border-color:var(--primary-color);
}

.account-selection-label{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  width:100%;
}

.account-checkbox, .webhook-account-checkbox{
  width:20px;
  height:20px;
  cursor:pointer;
  flex-shrink:0;
}

.account-selection-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.account-selection-number{
  font-weight:700;
  color:var(--text);
  font-size:1rem;
  display:flex;
  align-items:center;
  gap:8px;
}

.account-selection-details{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.account-selection-nickname{
  color:var(--text-dim);
  font-size:0.9rem;
}

.pair-modal-settings{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pair-modal-setting-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  background:var(--surface-3);
  border-radius:8px;
  border:1px solid var(--border);
}

.pair-modal-setting-info{
  flex:1;
}

.pair-modal-setting-label{
  font-weight:600;
  color:var(--text);
  margin-bottom:4px;
}

.pair-modal-setting-desc{
  font-size:0.85rem;
  color:var(--text-dim);
}

.toggle-switch{
  position:relative;
  display:inline-block;
  width:48px;
  height:24px;
  flex-shrink:0;
}

.toggle-switch input{
  opacity:0;
  width:0;
  height:0;
}

.toggle-slider{
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:var(--surface-3);
  border:1px solid var(--border);
  transition:var(--transition);
  border-radius:24px;
}

.toggle-slider:before{
  position:absolute;
  content:"";
  height:16px;
  width:16px;
  left:4px;
  bottom:3px;
  background-color:var(--text-dim);
  transition:var(--transition);
  border-radius:50%;
}

.toggle-switch input:checked + .toggle-slider{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before{
  transform:translateX(24px);
  background-color:#fff;
}

.token-input-group{
  display:flex;
  align-items:center;
  gap:8px;
}

.token-input-group .form-input{
  flex:1;
  font-size:0.9rem;
  background:var(--surface-3);
}

.plan-item-card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  transition:var(--transition);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.plan-item-card:hover{
  background:var(--surface-3);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.plan-item-accounts{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
}

.plan-item-account{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface-3);
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  flex:1;
}

.plan-item-account.master i{
  color:var(--warning-color);
}

.plan-item-account.slave i{
  color:var(--info-color);
}

.plan-item-account-info{
  flex:1;
  min-width:0;
}

.plan-item-account-number{
  font-weight:700;
  color:var(--text);
  font-size:0.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.plan-item-account-nickname{
  font-size:0.8rem;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.plan-item-details{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:8px 12px;
  background:var(--surface-3);
  border-radius:8px;
}

.plan-item-detail{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.85rem;
  color:var(--text-dim);
}

.plan-item-detail i{
  font-size:0.9rem;
}

.plan-item-token{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--surface-3);
  border-radius:8px;
  border:1px solid var(--border);
}

.plan-item-token i{
  color:var(--success-color);
  font-size:0.9rem;
}

.plan-item-token code{
  flex:1;
  font-family:monospace;
  font-size:0.85rem;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:transparent;
  padding:0;
  border:0;
}

.btn-icon-small{
  background:none;
  border:none;
  color:var(--text-dim);
  cursor:pointer;
  padding:4px 8px;
  border-radius:4px;
  transition:var(--transition);
}

.btn-icon-small:hover{
  background:rgba(255,255,255,0.1);
  color:var(--text);
}

.plan-item-actions{
  display:flex;
  gap:8px;
  padding-top:8px;
  border-top:1px solid var(--border);
}

.plan-item-actions .btn{
  flex:1;
}

.pair-table-cell{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
}

.pair-table-master,
.pair-table-slave{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
}

.pair-table-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.toggle-switch-small{
  position:relative;
  display:inline-block;
  width:36px;
  height:18px;
  flex-shrink:0;
}

.toggle-switch-small input{
  opacity:0;
  width:0;
  height:0;
}

.toggle-slider-small{
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:var(--surface-3);
  border:1px solid var(--border);
  transition:var(--transition);
  border-radius:18px;
}

.toggle-slider-small:before{
  position:absolute;
  content:"";
  height:12px;
  width:12px;
  left:3px;
  bottom:2px;
  background-color:var(--text-dim);
  transition:var(--transition);
  border-radius:50%;
}

.toggle-switch-small input:checked + .toggle-slider-small{
  background-color:var(--primary-color);
  border-color:var(--primary-color);
}

.toggle-switch-small input:checked + .toggle-slider-small:before{
  transform:translateX(18px);
  background-color:#fff;
}

.toggle-switch-small input:disabled + .toggle-slider-small{
  opacity:0.6;
  cursor:not-allowed;
}

.toggle-label{
  font-size:0.85rem;
  font-weight:600;
  color:var(--text);
}

.volume-mode-badge{
  display:inline-block;
  padding:6px 12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  font-size:0.85rem;
  font-weight:600;
  color:var(--text);
  text-transform:capitalize;
}

.api-token-cell{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:250px;
}

.api-token-cell code{
  flex:1;
  font-family:monospace;
  font-size:0.8rem;
  color:var(--text);
  background:var(--surface-2);
  padding:6px 8px;
  border-radius:4px;
  border:1px solid var(--border);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;place-items:center;z-index:9999}
.loading-overlay.show{display:grid}
.loading-spinner{background:var(--surface);padding:32px;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);color:var(--text);text-align:center}
.loading-spinner i{font-size:2.5rem;margin-bottom:12px;display:block}

/* Toast Notifications */
.toast-container{
  position:fixed;
  bottom:18px;
  right:18px;
  z-index:10000;
  display:flex;
  flex-direction:column-reverse;
  gap:10px;
  max-width:400px;
}

.toast{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:14px 16px;min-width:300px;display:flex;align-items:center;gap:12px;border-left:4px solid var(--primary-color);color:var(--text);animation:slideInBottom .3s ease}
.toast.success{border-left-color:var(--success-color)}
.toast.error{border-left-color:var(--danger-color)}
.toast.warning{border-left-color:var(--warning-color)}
.toast.info{border-left-color:var(--info-color)}
.toast-icon{font-size:1.5rem}
.toast-content{flex:1}
.toast-title{font-weight:700;margin-bottom:2px}
.toast-message{font-size:.9rem;color:var(--text-dim)}
.toast-close{background:none;border:none;font-size:1.1rem;color:var(--text-dim);cursor:pointer;padding:4px}
.toast-close:hover{color:var(--text)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;place-items:center;z-index:10001}
.modal-overlay.show{display:grid}
.modal{background:var(--surface);color:var(--text);border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow);min-width:400px;max-width:520px;animation:modalFadeIn .25s ease}
.modal-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-header h4{margin:0;font-size:1.1rem}
.modal-close{background:none;border:none;font-size:1.4rem;color:var(--text-dim);cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.modal-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.modal-body{padding:18px}
.modal-body p{margin:0;line-height:1.6}
.modal-footer{padding:16px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* Animations */
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideInBottom{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes modalFadeIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

/* Scrollbar Styling */
.plans-list::-webkit-scrollbar,
.history-scroll::-webkit-scrollbar,
.accounts-list::-webkit-scrollbar{
  width:8px;
}

.plans-list::-webkit-scrollbar-track,
.history-scroll::-webkit-scrollbar-track,
.accounts-list::-webkit-scrollbar-track{
  background:var(--surface-2);
  border-radius:10px;
}

.plans-list::-webkit-scrollbar-thumb,
.history-scroll::-webkit-scrollbar-thumb,
.accounts-list::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:10px;
}

.plans-list::-webkit-scrollbar-thumb:hover,
.history-scroll::-webkit-scrollbar-thumb:hover,
.accounts-list::-webkit-scrollbar-thumb:hover{
  background:var(--text-dim);
}

@media (max-width:1200px){
  .copy-trading-grid{
    grid-template-columns:1fr;
  }
  .copy-account-row{
    flex-wrap:wrap;
  }
  .copy-button-group{
    width:100%;
  }
  .copy-button-group .btn{
    flex:1;
  }
  .stats-grid-4{
    grid-template-columns:repeat(2,1fr);
  }
  .pair-table-cell{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .pair-table-arrow{
    transform:rotate(90deg);
  }
}

@media (max-width:1024px){
  .sidebar{
    transform:translateX(-100%);
  }
  .sidebar.show{
    transform:translateX(0);
  }
  .main-content{
    margin-left:0;
  }
  .sidebar-toggle{
    display:flex;
  }
  .two-column-layout{
    grid-template-columns:1fr;
  }
  .pairs-two-column{
    grid-template-columns:1fr;
  }
  .pair-content{
    grid-template-columns:1fr;
    gap:16px;
  }
  .copy-arrow{
    transform:rotate(90deg);
  }
}

@media (max-width:768px){
  .container{padding:14px}
  .header{flex-direction:column;gap:12px;text-align:center}
  .header-actions{width:100%;justify-content:center;flex-wrap:wrap}
  .stats-grid{grid-template-columns:1fr}
  .stats-grid-4{grid-template-columns:1fr}
  .table-actions{flex-direction:column;width:100%}
  .table-actions select,.search-input{width:100%}
  .example-header{flex-direction:column;align-items:flex-start}
  .modal{min-width:90%;max-width:90%}
  .toast-container{right:10px;left:10px;bottom:10px;max-width:none}
  .toast{min-width:auto}
  .account-button-group{flex-direction:column}
  .account-button-group .btn{width:100%}
  .copy-account-row{
    flex-direction:column;
    align-items:stretch;
  }
  .copy-button-group{
    flex-direction:column;
  }
  .pair-modal-grid{
    grid-template-columns:1fr;
  }
  .plan-item-accounts{
    flex-direction:column;
  }
  .plan-item-arrow{
    transform:rotate(90deg);
  }
  .plan-item-account{
    width:100%;
  }
  .api-token-cell{
    max-width:150px;
  }
  .api-token-cell code{
    font-size:0.7rem;
  }
  .usage-stats-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .stats-grid-4{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){
  .header-content h1{font-size:1.35rem}
  .stat-card{flex-direction:column;text-align:center}
  .accounts-table{font-size:.85rem}
  .accounts-table th,.accounts-table td{padding:10px 8px}
  .action-buttons{flex-direction:column}
  .pair-actions{flex-direction:column;width:100%}
  .pair-actions .btn{width:100%}
  .plan-item-details{
    flex-direction:column;
    align-items:flex-start;
  }
  .plan-item-actions{
    flex-direction:column;
  }
}

/* === Restore API Token column and Volume visibility (table) === */
#page-copytrading .accounts-table thead tr th:nth-child(6),
#page-copytrading #activePairsTableBody td:nth-child(6) {
  display: table-cell !important; /* re-show API Token column */
}

/* If token cells use helper classes, re-show them */
#page-copytrading #activePairsTableBody .api-token,
#page-copytrading #activePairsTableBody .api-token-cell {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* Ensure history table 'VOLUME' column remains visible */
#page-history .accounts-table thead tr th:nth-child(6),
#page-history .accounts-table tbody tr td:nth-child(6){
  display: table-cell !important;
}

/* === Remove only: API Token Generated block (modal), Edit & Settings buttons === */

/* Hide token generator UI inside create/edit pair modals */
.token-input-group,
#pairApiToken,
#editPairApiToken {
  display: none !important;
}

/* Hide their copy buttons next to the token inputs */
#pairApiToken + .btn,
#pairApiToken + button,
#editPairApiToken + .btn,
#editPairApiToken + button {
  display: none !important;
}

/* Hide Edit / Settings buttons anywhere in pair cards & tables */
button[title="Edit"],
button[title="Settings"],
button[onclick^="ui.editPlan"] {
  display: none !important;
}


/* === Layout tweak: keep headings top-left but add breathing room === */
#page-copytrading .pairs-column{
  padding: 20px;               /* was 16px */
}

#page-copytrading .pairs-column-title{
  justify-content: flex-start; /* ensure left alignment */
  text-align: left;
  margin-top: 2px;
  margin-bottom: 14px;         /* a bit tighter than 16 for balance */
  padding-bottom: 8px;         /* keep underline comfortable */
}

#page-copytrading .account-section{
  padding: 20px;               /* consistent with pairs-column */
}

#page-copytrading .section-title{
  text-align: left;
  margin-top: 2px;
  margin-bottom: 12px;
}
/* === End tweak === */


/* === Pair Create/Edit: keep titles top-left and balance spacing === */
#page-copytrading .plan-form-section{
  gap: 16px;                   /* consistent vertical rhythm between sections */
  margin-bottom: 20px;
}

#page-copytrading .plan-form-section > .account-section{
  padding: 20px;               /* unify internal padding */
  border-radius: 10px;
}

#page-copytrading .plan-form-section > .account-section + .account-section{
  margin-top: 12px;            /* even space between stacked sections */
}

#page-copytrading .account-section .section-title{
  margin-top: 2px;
  margin-bottom: 12px;         /* same as headings elsewhere */
  text-align: left;
}

/* Ensure the two fields (e.g., Master/Slave selects, Volume/Multiplier) feel balanced */
#page-copytrading .account-section .copy-account-row{
  gap: 16px;                    /* breathing room between the two columns */
}

#page-copytrading .account-section .form-group label{
  display: block;
  margin-bottom: 6px;          /* consistent label spacing above inputs */
}

/* Status blocks like “API Token Generated” */
#page-copytrading .account-section.status,
#page-copytrading .token-status,
#page-copytrading .api-token-status{
  padding: 18px 20px;
}
/* === End Pair Create/Edit spacing tweaks === */


/* === Fine-tune: keep titles top-left, add symmetric breathing space (v2) === */
#page-copytrading .account-section{
  padding: 24px 24px;          /* more top/bottom padding so title isn't cramped */
}

#page-copytrading .section-title{
  margin-top: 0;               /* remove extra nudge */
  margin-bottom: 14px;         /* slightly more room under title */
  text-align: left;
}

#page-copytrading .account-section .copy-account-row{
  gap: 20px;                   /* consistent spacing between two controls */
}

#page-copytrading .account-section .form-group label{
  margin-bottom: 8px;          /* comfortable label distance */
  text-align: left;
}
/* === end v2 tweaks === */


/* --- Settings Page Styles (appended) --- */
/* ==========================================
   เพิ่มส่วนนี้ใน static/style.css
   ========================================== */

/* =================== Settings Page Styles =================== */

/* Rate Limit Grid - 2 Column Layout */
.rate-limit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.settings-info-box {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.settings-info-box.warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.settings-info-box i {
  font-size: 1.5rem;
  color: var(--primary-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.settings-info-box.warning i {
  color: var(--warning-color);
}

.settings-info-box div {
  flex: 1;
}

.settings-info-box strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.settings-info-box code {
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}

.settings-section .section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-section .form-group {
  margin-bottom: 16px;
}

.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.form-hint code {
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.rate-limit-examples {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.rate-limit-examples strong {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-right: 4px;
}

.btn-example {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-example:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.current-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.config-item strong {
  color: var(--text);
  font-weight: 600;
}

.config-item code {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: 'Monaco', 'Courier New', monospace;
  color: var(--text);
  font-size: 0.9em;
}

html[data-theme="light"] .config-item code {
  background: #cbd5e1;
  color: #1e293b;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.advanced-settings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advanced-setting-item {
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.advanced-setting-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.advanced-setting-item code {
  display: block;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: 'Monaco', 'Courier New', monospace;
  color: var(--text);
  margin-bottom: 8px;
  overflow-x: auto;
}

html[data-theme="light"] .advanced-setting-item code {
  background: #cbd5e1;
  color: #1e293b;
}

.advanced-setting-item small {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Responsive */
@media (max-width: 768px) {
  .rate-limit-grid {
    grid-template-columns: 1fr;
  }
  
  .rate-limit-examples {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-example {
    width: 100%;
  }
  
  .config-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .settings-actions {
    flex-direction: column;
  }
  
  .settings-actions .btn {
    width: 100%;
  }
}



/* --- Email Settings Styles (appended) --- */
/* ==========================================
   เพิ่มส่วนนี้ใน static/style.css
   ========================================== */

/* =================== Email Settings Styles =================== */

.email-toggle-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #475569;
  transition: 0.3s;
  border-radius: 30px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.toggle-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.email-config-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.password-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.password-input-group .form-input {
  flex: 1;
}

.btn-icon-toggle {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
}

.btn-icon-toggle:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.provider-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.provider-buttons strong {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-right: 8px;
}

.btn-provider {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-provider:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.btn-provider.gmail:hover {
  background: #ea4335;
  border-color: #ea4335;
}

.btn-provider.outlook:hover {
  background: #0078d4;
  border-color: #0078d4;
}

.btn-provider.yahoo:hover {
  background: #6001d2;
  border-color: #6001d2;
}

.recipients-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  min-height: 48px;
}

.recipient-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-color);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.recipient-tag i {
  font-size: 0.9rem;
}

.smtp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

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

.smtp-info-item strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.smtp-info-item code {
  display: block;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'Monaco', 'Courier New', monospace;
  color: var(--text);
  font-size: 0.9em;
}

html[data-theme="light"] .smtp-info-item code {
  background: #cbd5e1;
  color: #1e293b;
}

.test-email-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
  border: 2px dashed var(--primary-color);
}

.test-email-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.test-email-content p {
  flex: 1;
  margin: 0;
  color: var(--text);
}

.test-email-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.test-email-result.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.test-email-result.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.test-email-result i {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.test-email-result.success i {
  color: #22c55e;
}

.test-email-result.error i {
  color: #ef4444;
}

.test-email-result div {
  flex: 1;
}

.test-email-result strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

.test-email-result p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.email-instructions-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.modal-content-large {
  background: var(--surface);
  border-radius: 12px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.instruction-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.instruction-step {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.step-number {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
}

.step-content {
  flex: 1;
}

.step-content h5 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 1rem;
}

.step-content p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.step-content a {
  color: var(--primary-color);
  text-decoration: none;
  word-break: break-all;
}

.step-content a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .email-toggle-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .password-input-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-icon-toggle {
    width: 100%;
  }
  
  .provider-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .provider-buttons strong {
    margin-bottom: 8px;
  }
  
  .btn-provider {
    width: 100%;
    justify-content: center;
  }
  
  .test-email-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .test-email-content .btn {
    width: 100%;
  }
  
  .smtp-info-grid {
    grid-template-columns: 1fr;
  }
  
  .instruction-step {
    flex-direction: column;
  }
  
  .step-number {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .recipients-tags {
    flex-direction: column;
  }
  
  .recipient-tag {
    width: 100%;
    justify-content: center;
  }
}


/* === BEGIN: Email Settings Patch (appended) === */
/* ==========================================
   เพิ่มส่วนนี้ใน style.css สำหรับ Email Settings 2 Column Layout
   ========================================== */

/* =================== Email Settings - 2 Column Layout =================== */

/* Grid 2 คอลัมน์สำหรับ Sender และ Recipients */
.email-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* Email Config Section Container */
.email-config-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
}

/* Email Toggle Group */
.email-toggle-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #475569;
  transition: 0.3s;
  border-radius: 30px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.toggle-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

/* Password Input Group */
.password-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.password-input-group .form-input {
  flex: 1;
}

.btn-icon-toggle {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
}

.btn-icon-toggle:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* Provider Buttons */
.provider-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.provider-buttons strong {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-right: 8px;
}

.btn-provider {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-provider:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.btn-provider.gmail:hover {
  background: #ea4335;
  border-color: #ea4335;
}

.btn-provider.outlook:hover {
  background: #0078d4;
  border-color: #0078d4;
}

.btn-provider.yahoo:hover {
  background: #6001d2;
  border-color: #6001d2;
}

/* Recipients Tags */
.recipients-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
  min-height: 48px;
}

.recipient-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-color);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.recipient-tag i {
  font-size: 0.9rem;
  cursor: pointer;
}

/* SMTP Info Grid */
.smtp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

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

.smtp-info-item strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.smtp-info-item code {
  display: block;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'Monaco', 'Courier New', monospace;
  color: var(--text);
  font-size: 0.9em;
}

html[data-theme="light"] .smtp-info-item code {
  background: #cbd5e1;
  color: #1e293b;
}

/* Test Email Section */
.test-email-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
  border: 2px dashed var(--primary-color);
}

.test-email-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.test-email-content p {
  flex: 1;
  margin: 0;
  color: var(--text);
}

.test-email-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.test-email-result.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.test-email-result.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.test-email-result i {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Responsive Design สำหรับ Email Settings */
@media (max-width: 992px) {
  .email-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .provider-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn-provider {
    width: 100%;
    justify-content: center;
  }
  
  .test-email-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .test-email-content .btn {
    width: 100%;
  }
}

/* === END: Email Settings Patch (appended) === */

/* ==========================================
   System Logs Styles
   ========================================== */

#systemLogsContainer {
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(59, 130, 246, 0.05);
  border-bottom: 1px solid var(--border-color);
}

.log-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.log-header h3 i {
  color: var(--primary-color);
  font-size: 1rem;
}

.log-count {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-weight: 500;
  padding: 4px 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
}

.log-content {
  height: 600px; /* Fixed height - ไม่ยืดหรือหดตามเนื้อหา */
  max-height: 600px;
  overflow-y: auto; /* เลื่อนได้เมื่อเนื้อหาเกิน */
  overflow-x: hidden; /* ไม่ให้เลื่อนซ้าย-ขวา */
  padding: 12px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.log-content::-webkit-scrollbar {
  width: 8px;
}

.log-content::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

.log-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.log-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

.log-entry {
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.log-entry:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(2px);
}

.log-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  min-width: 70px;
  text-align: center;
}

.log-badge-info {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.log-badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.log-badge-warning {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.log-badge-error {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.log-info {
  border-left-color: #3b82f6;
}

.log-success {
  border-left-color: #22c55e;
}

.log-warning {
  border-left-color: #fbbf24;
}

.log-error {
  border-left-color: #ef4444;
}

.log-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}

.log-empty i {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.log-empty p {
  margin: 0;
  font-size: 1rem;
}

/* Card header with button */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header .btn {
  margin-left: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .log-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .log-count {
    align-self: flex-end;
  }
  
  .log-content {
    font-size: 0.8rem;
    max-height: 400px;
  }
  
  .log-entry {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }
  
  .log-badge {
    min-width: 60px;
    font-size: 0.7rem;
  }
}

/* ========================================== */


/* ====== PATCH: Remove blue user icon for Slave everywhere ====== */
/* Pair card header: right column (Slave) */
.copy-pair-card .pair-content > :nth-child(3) i[class*="fa-user"] { display: none !important; }
/* If a pseudo-element is used for the icon */
.copy-pair-card .pair-content > :nth-child(3) .slave-name::before,
.copy-pair-card .pair-header .slave-name::before,
.copy-pair-card .pair-content > :nth-child(3) .slave::before,
.copy-pair-card .pair-header .slave::before {
  content: none !important; display: none !important;
}

/* Table layout: hide user icon in Slave column */
.pair-table-slave i[class*="fa-user"] { display: none !important; }

/* Plan / modal chips: hide user icon for Slave account badge */
.plan-item-account.slave i[class*="fa-user"] { display: none !important; }

/* Fallback: any FontAwesome user icon inside a copy pair card */
.copy-pair-card i.fas.fa-user,
.copy-pair-card i.fa-solid.fa-user,
.copy-pair-card i.fa.fa-user {
  display: none !important;
}
/* ====== END PATCH ====== */

/* === Balanced actions for Add Master modal (added by ChatGPT) === */
.modal-body .form-group {
  /* Add breathing room between the select and the buttons */
  margin-bottom: 12px;
}

.modal-actions {
  /* Make action buttons symmetric and not cramped */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding-top: 4px;
}

.modal-actions .btn {
  /* Ensure equal-width buttons and centered labels */
  width: 100%;
  justify-content: center;
}

@media (max-width: 480px) {
  /* On very small screens, stack buttons vertically */
  .modal-actions { grid-template-columns: 1fr; }
}

/* === System Info Endpoint Row — improved layout (added by ChatGPT) === */
.system-info { gap: 12px; }

.system-info .info-item {
  /* Turn the row into a neat 3‑column grid: Label | Value | Copy */
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.system-info .info-item strong {
  min-width: 180px;               /* keep label width stable */
}

.system-info .info-item code {
  background: #0a0f16;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  width: 100%;                     /* stretch to take remaining space */
  max-width: 100%;
  white-space: nowrap;             /* single line */
  overflow: hidden;                /* hide overflow */
  text-overflow: ellipsis;         /* show ellipsis for long URLs */
  display: block;
}

html[data-theme="light"] .system-info .info-item code {
  background: #cbd5e1;
  color: #1e293b;
  border-color: rgba(0,0,0,.2);
}

.system-info .info-item .btn-copy {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .system-info .info-item {
    grid-template-columns: 1fr;  /* stack vertically on small screens */
    gap: 8px;
  }
  .system-info .info-item strong {
    min-width: 0;
  }
  .system-info .info-item .btn-copy {
    justify-self: start;
  }
}

/* === Server Status badge — don't stretch; keep as compact chip === */
.system-info .info-item .status-badge,
#serverStatusSystem {
  justify-self: start;   /* stop grid from stretching it */
  width: auto;           /* ensure width fits content */
  max-width: max-content;
}

/* === Fix: Server Status row should keep badge next to label (flex-start) === */
.system-info .info-item:first-child {
  justify-content: flex-start;  /* label + chip sit together on the left */
  gap: 12px;
}
.system-info .info-item:first-child .status-badge {
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
}

/* === Server Status row: use 2 columns (Label | Chip) and keep them together */
.system-info .info-item:first-child {
  display: grid !important;
  grid-template-columns: max-content max-content !important; /* remove the 1fr spacer */
  align-items: center;
  gap: 10px; /* tight spacing */
}

.system-info .info-item:first-child .status-badge,
.system-info .info-item:first-child #serverStatusSystem {
  width: auto !important;
  max-width: max-content !important;
  justify-self: start !important;
}

/* === Server Status row: place chip on the FAR RIGHT === */
.system-info .info-item:first-child {
  display: grid !important;
  grid-template-columns: max-content 1fr max-content !important; /* label | spacer | chip */
  align-items: center;
  gap: 10px;
  justify-content: normal !important;
  justify-items: stretch;
}

.system-info .info-item:first-child .status-badge,
.system-info .info-item:first-child #serverStatusSystem {
  width: auto !important;
  max-width: max-content !important;
  justify-self: end !important;   /* push chip to the right edge */
}