/* WXD SERVER - EMERALD TERMINAL THEME */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}

:root{
  --bg:       #050a08;
  --bg2:      #080f0b;
  --surface:  #0c1610;
  --surface2: #111d14;
  --border:   #1a3324;
  --border2:  #0f2318;
  --green:    #00e676;
  --green2:   #00c853;
  --green3:   #69f0ae;
  --amber:    #ffd740;
  --red:      #ff5252;
  --muted:    #4a6655;
  --text:     #c8e6c9;
  --text2:    #81a890;
  --mono:     'Courier New', Courier, monospace;
  --sans:     Arial, sans-serif;
}

body{
  background:var(--bg);
  background-image:radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,230,118,0.06) 0%, transparent 60%);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.55;
  min-height:100vh;
  padding:12px;
  overflow-x:hidden;
  text-align:center;
}

.container,.container-md,.container-lg{width:100%;max-width:700px;margin:0 auto;padding:0;}
.container-md{max-width:860px;}
.container-lg{max-width:1040px;}

h1{
  font-family:var(--mono);
  color:var(--green);
  font-size:clamp(1.15rem,5vw,1.7rem);
  font-weight:700;
  margin-bottom:16px;
  background:var(--surface);
  padding:12px 16px;
  border-left:4px solid var(--green);
  letter-spacing:1px;
  text-align:left;
}
h1::before{content:'> ';color:var(--muted);font-size:0.85em;}
h2{
  font-family:var(--mono);
  color:var(--green3);
  font-size:clamp(0.88rem,3.5vw,1.05rem);
  font-weight:600;
  margin-bottom:12px;
  letter-spacing:0.5px;
  text-align:left;
}

.box{
  background:var(--surface);
  padding:18px 16px;
  margin:14px auto;
  border:1px solid var(--border);
  border-top:2px solid var(--green2);
  width:100%;
  text-align:left;
  position:relative;
}
.status-box{
  background:var(--surface);
  padding:16px;
  margin:14px auto;
  border:1px solid var(--border);
  border-top:2px solid var(--green2);
  text-align:left;
}
.status-item{
  padding:9px 6px;
  font-size:0.88rem;
  border-bottom:1px solid var(--border2);
  font-family:var(--mono);
  display:flex;gap:8px;flex-wrap:wrap;
}
.status-item:last-child{border-bottom:none;}
.status-value{color:var(--green);font-weight:700;}

input,select,textarea{
  display:block;
  width:100%;
  margin:8px 0;
  padding:11px 14px;
  font-size:0.95rem;
  border:1px solid var(--border);
  border-bottom:2px solid var(--border);
  background:var(--bg2);
  color:var(--text);
  font-family:var(--mono);
  font-weight:400;
  -webkit-appearance:none;
  appearance:none;
}
input[type=checkbox]{
  width:18px;height:18px;display:inline-block;
  margin:0 8px 0 0;vertical-align:middle;
  cursor:pointer;accent-color:var(--green);
}
input::placeholder,textarea::placeholder{color:var(--muted);font-size:0.85rem;}
input:focus,select:focus,textarea:focus{
  border-bottom:2px solid var(--green);
  outline:none;background:#050e08;
}
select{cursor:pointer;}
textarea{min-height:110px;resize:vertical;font-size:0.88rem;}

button{
  display:block;
  width:100%;
  margin:10px 0;
  padding:12px 16px;
  font-size:0.95rem;
  font-weight:700;
  background:transparent;
  color:var(--green);
  border:1px solid var(--green2);
  cursor:pointer;
  font-family:var(--mono);
  letter-spacing:0.5px;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button:active{background:rgba(0,200,83,0.08);}

.nav-buttons{display:flex;justify-content:center;gap:8px;margin:12px 0;flex-wrap:wrap;}
.nav-btn{
  padding:8px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text2);
  text-decoration:none;
  font-weight:600;
  font-size:0.82rem;
  display:inline-block;
  text-align:center;
  font-family:var(--mono);
  -webkit-tap-highlight-color:transparent;
}
.nav-btn:active{background:var(--surface2);color:var(--green);}
.back-btn{border-color:var(--green2)!important;color:var(--green)!important;}

.warning-message{
  background:rgba(255,82,82,0.08);
  padding:12px 14px;
  border-left:3px solid var(--red);
  margin:10px 0;font-size:0.85rem;
  color:#ff8a80;text-align:left;
  font-family:var(--mono);
}
.success-message{
  background:rgba(0,230,118,0.07);
  padding:12px 14px;
  border-left:3px solid var(--green2);
  margin:10px 0;font-size:0.85rem;
  color:var(--green3);text-align:left;
  font-family:var(--mono);
}

.log-entry{
  margin:5px 0;padding:8px 12px;
  border-left:3px solid;
  font-size:0.78rem;text-align:left;
  word-break:break-word;font-family:var(--mono);
}
.log-success{border-left-color:var(--green2);background:rgba(0,200,83,0.06);color:var(--green3);}
.log-error{border-left-color:var(--red);background:rgba(255,82,82,0.06);color:#ff8a80;}
.log-info{border-left-color:var(--amber);background:rgba(255,215,64,0.05);color:#ffe57f;}
.logs-wrap{
  max-height:55vh;overflow-y:auto;
  background:var(--bg);padding:12px;
  text-align:left;font-family:var(--mono);font-size:0.78rem;
  border:1px solid var(--border);
  -webkit-overflow-scrolling:touch;
}

.task-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left-width:4px;
  border-left-style:solid;
  padding:14px;
  margin:10px 0;
  text-align:left;
  position:relative;
  transition:all 0.2s ease;
}
.card-running{
  /* border-left-color is set inline now */
}
.card-idle{
  opacity:0.85;
}
.task-header{
  display:flex;justify-content:space-between;
  align-items:flex-start;flex-wrap:wrap;
  gap:8px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--border2);
}
.task-id-label{
  color:var(--muted);font-size:0.72rem;font-weight:600;
  font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;
}
.conn-badge{padding:3px 8px;font-size:0.7rem;font-weight:700;font-family:var(--mono);}
.conn-ok{background:rgba(0,230,118,0.1);color:var(--green);border:1px solid rgba(0,200,83,0.3);}
.conn-no{background:rgba(255,82,82,0.1);color:var(--red);border:1px solid rgba(255,82,82,0.3);}
.task-header-actions{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}

.dots-btn{
  width:auto;padding:5px 10px;font-size:1rem;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;margin:0;
  font-family:var(--sans);line-height:1;
}
.dots-menu{
  display:none;position:absolute;top:100%;right:0;
  background:var(--surface);border:1px solid var(--border);
  min-width:180px;z-index:100;text-align:left;
}
.dots-menu.open{display:block;}
.dots-menu-item{
  display:block;width:100%;padding:10px 14px;
  font-size:0.82rem;font-family:var(--mono);
  color:var(--text);background:transparent;
  border:none;border-bottom:1px solid var(--border2);
  cursor:pointer;text-align:left;margin:0;
}
.dots-menu-item:last-child{border-bottom:none;}
.dots-menu-item:active{background:var(--surface2);color:var(--green);}

.minis-list{display:flex;flex-direction:column;gap:6px;}
.mini-row{
  background:var(--bg2);padding:10px 12px;
  border-left:2px solid var(--border);
  display:flex;flex-direction:column;gap:6px;
}
.mini-row.is-running{border-left-color:var(--green2);}
.mini-row.is-paused{border-left-color:var(--amber);}
.mini-row.is-stopped{border-left-color:var(--border);}
.mini-info{display:flex;flex-direction:column;gap:2px;}
.mini-target{font-size:0.88rem;font-weight:700;color:var(--amber);font-family:var(--mono);word-break:break-all;}
.mini-stats{font-size:0.74rem;color:var(--muted);font-family:var(--mono);}
.mini-err{font-size:0.72rem;color:var(--red);}
.mini-controls{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.mini-status{
  font-size:0.7rem;font-weight:700;
  font-family:var(--mono);letter-spacing:0.5px;padding:2px 7px;
}
.status-on{background:rgba(0,200,83,0.15);color:var(--green);border:1px solid rgba(0,200,83,0.3);}
.status-paused{background:rgba(255,215,64,0.12);color:var(--amber);border:1px solid rgba(255,215,64,0.3);}
.status-off{background:rgba(100,100,100,0.1);color:var(--muted);border:1px solid var(--border);}

.ctrl-btn{
  padding:5px 11px;font-size:0.75rem;font-weight:700;
  cursor:pointer;border:1px solid;
  text-decoration:none;display:inline-block;white-space:nowrap;
  font-family:var(--mono);-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;width:auto;margin:0;background:transparent;
}
.ctrl-btn:active{opacity:0.65;}
.toggle-btn{color:var(--amber);border-color:rgba(255,215,64,0.3);}
.stop-btn{color:var(--red);border-color:rgba(255,82,82,0.3);}
.start-btn{color:var(--green);border-color:rgba(0,200,83,0.3);}
.edit-btn{color:var(--green3);border-color:rgba(105,240,174,0.3);}
.del-btn{color:var(--red);border-color:rgba(255,82,82,0.2);opacity:0.7;}
.log-btn{color:var(--muted);border-color:var(--border);}

.mini-block{
  background:var(--surface);
  border:1px solid var(--border);
  border-top:2px solid var(--green2);
  padding:16px;margin:10px 0;text-align:left;
}
.mini-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.mini-title{color:var(--green3);font-size:0.88rem;font-weight:700;font-family:var(--mono);}
.mini-remove{
  background:transparent;border:1px solid rgba(255,82,82,0.3);
  color:var(--red);padding:4px 10px;cursor:pointer;
  font-size:0.75rem;font-family:var(--mono);width:auto;margin:0;
}
.add-mini-btn{
  background:transparent;border:1px dashed var(--green2);
  color:var(--green2);padding:11px;font-size:0.88rem;
  cursor:pointer;width:100%;margin:10px 0;font-weight:700;
  font-family:var(--mono);
}
.add-mini-btn:active{background:rgba(0,200,83,0.06);}

.pair-box{
  background:rgba(0,200,83,0.04);
  border:1px solid rgba(0,200,83,0.25);
  border-left:3px solid var(--green2);
  padding:16px;margin:12px 0;
  display:none;text-align:left;
}
.code-big{
  font-size:clamp(1.6rem,7vw,2.2rem);
  color:var(--amber);font-weight:700;
  font-family:var(--mono);letter-spacing:8px;
  margin:10px 0;word-break:break-all;
}

.grid{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0;text-align:left;}
.card{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--green2);padding:16px;}
.card-title{
  color:var(--green3);font-size:0.78rem;font-weight:700;
  font-family:var(--mono);letter-spacing:1.5px;text-transform:uppercase;
  border-bottom:1px solid var(--border2);padding-bottom:8px;margin-bottom:12px;
}
.big-num{font-size:2.4rem;font-weight:700;color:var(--green);font-family:var(--mono);line-height:1;}

.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px;}

.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,5,2,0.92);z-index:200;
  align-items:flex-start;justify-content:center;
  padding:16px;overflow-y:auto;
}
.modal-overlay.active{display:flex;}
.modal-box{
  background:var(--bg2);border:1px solid var(--border);
  border-top:3px solid var(--green);
  padding:20px;width:100%;max-width:520px;
  text-align:left;margin:auto;
}
.modal-title{
  color:var(--green);font-size:0.95rem;font-weight:700;
  font-family:var(--mono);margin-bottom:14px;
  border-bottom:1px solid var(--border2);padding-bottom:10px;
}
.group-item{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:10px 12px;border-bottom:1px solid var(--border2);flex-wrap:wrap;
}
.group-item:hover{background:var(--surface);}
.group-name{font-size:0.88rem;color:var(--text);font-weight:600;flex:1;min-width:100px;}
.group-id{font-size:0.7rem;color:var(--muted);font-family:var(--mono);margin-top:2px;word-break:break-all;}
.group-copy-btn{
  background:transparent;border:1px solid var(--green2);color:var(--green);
  padding:5px 10px;font-size:0.72rem;font-family:var(--mono);
  cursor:pointer;white-space:nowrap;width:auto;margin:0;
}
.group-copy-btn:active{background:rgba(0,200,83,0.1);}
.modal-close{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  padding:8px 16px;font-size:0.82rem;font-family:var(--mono);
  cursor:pointer;width:100%;margin:14px 0 0 0;
}

.empty-msg{text-align:center;padding:40px 20px;font-size:0.95rem;color:var(--muted);font-family:var(--mono);}
.empty-msg a{color:var(--green);text-decoration:none;}

.check-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:0.88rem;cursor:pointer;font-family:var(--mono);}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-box{
  background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--green);
  padding:32px 24px;width:100%;max-width:400px;text-align:left;
}
.login-brand{font-family:var(--mono);color:var(--green);font-size:1.1rem;font-weight:700;margin-bottom:4px;letter-spacing:2px;}
.login-sub{font-size:0.78rem;color:var(--muted);font-family:var(--mono);margin-bottom:24px;}
.login-label{font-size:0.72rem;color:var(--text2);font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;display:block;}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);}

@media(min-width:540px){
  body{padding:20px;}
  .mini-row{flex-direction:row;justify-content:space-between;align-items:center;}
  .mini-controls{flex-wrap:nowrap;}
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:860px){
  .grid{grid-template-columns:repeat(3,1fr);}
}