:root{--bg:#0f1115;--p:#171b22;--p2:#1d2330;--brd:#2a3342;--txt:#eef3fb;--mut:#9eabc2;--ok:#2bb673;--warn:#e6a93d;--danger:#d95c5c;--acc:#4f8cff;--acc2:#7aa6ff;--sh:0 12px 28px rgba(0,0,0,.25);--r:16px}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font:14px/1.45 system-ui,-apple-system,sans-serif}
button,input,select{font:inherit}
.ws-shell{max-width:1560px;margin:0 auto;padding:20px}
.ws-topbar{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;margin-bottom:20px}
.ws-brand-title{font-size:22px;font-weight:800}
.ws-muted{color:var(--mut);font-size:13px}
.ws-body{display:grid;grid-template-columns:300px 1fr;gap:20px}
.ws-sidebar,.ws-main{display:flex;flex-direction:column;gap:16px}
.ws-card{background:linear-gradient(180deg,var(--p),var(--p2));border:1px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.ws-card-title{font-size:15px;font-weight:800;margin-bottom:10px}
.ws-card-danger{border-color:rgba(217,92,92,.4)}
.ws-chips{display:flex;gap:8px;flex-wrap:wrap}
.ws-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--brd);border-radius:999px;padding:5px 10px;background:rgba(255,255,255,.03);font-size:12px;white-space:nowrap}
.ws-chip-ok{border-color:rgba(43,182,115,.45);color:#9ff0c5}
.ws-chip-warn{border-color:rgba(230,169,61,.45);color:#f6d08a}
.ws-chip-danger{border-color:rgba(217,92,92,.45);color:#f6a1a1}
.sidebar-big{font-size:18px;font-weight:800}
.sidebar-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.sidebar-row:last-child{border-bottom:0}
.ws-input,.ws-select{width:100%;background:#0f141d;color:var(--txt);border:1px solid var(--brd);border-radius:12px;padding:10px 12px;outline:none}
.ws-input:focus,.ws-select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.ws-toggle{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--brd);border-radius:12px;padding:10px 12px}
.ws-ctrl{display:flex;flex-direction:column;gap:6px;min-width:100px}
.ws-ctrl>span{font-size:12px;color:var(--mut);font-weight:700}
.ws-btn,.ws-icon-btn{border:1px solid var(--brd);border-radius:12px;background:#101722;color:var(--txt);padding:10px 14px;cursor:pointer}
.ws-btn:hover,.ws-icon-btn:hover{border-color:var(--acc2)}
.ws-btn:disabled{opacity:.55;cursor:not-allowed}
.ws-btn-primary{background:linear-gradient(180deg,var(--acc),#326de0);border-color:#326de0}
.ws-btn-sec{background:#182131}
.ws-btn-muted{background:#121821}
.ws-btn-sm{padding:7px 10px;font-size:12px}
.ws-controls{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ws-controls-left,.ws-controls-right{display:flex;gap:8px;flex-wrap:wrap}
.def-rows{display:flex;flex-direction:column;gap:14px}
.def-row{border:1px solid var(--brd);border-radius:14px;padding:14px;background:rgba(255,255,255,.02)}
.def-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.def-row-title{font-weight:800}
.def-row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.def-row-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.def-row-foot{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.def-live-empty{color:var(--mut);font-size:12px}
.def-live-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:12px;border:1px solid var(--brd);background:rgba(255,255,255,.03)}
.def-live-ok{border-color:rgba(43,182,115,.28);background:rgba(43,182,115,.08)}
.def-live-warn{border-color:rgba(230,169,61,.28);background:rgba(230,169,61,.08)}
.def-live-neutral{border-color:rgba(79,140,255,.24);background:rgba(79,140,255,.08)}
.def-live-error{border-color:rgba(217,92,92,.28);background:rgba(217,92,92,.08)}
.def-inline-note{color:var(--mut);font-size:12px}
.popular-box{padding:10px 12px;border-radius:12px;border:1px dashed var(--brd);color:var(--mut)}
.popular-box-error{border-color:rgba(217,92,92,.28);color:#f6a1a1}
.popular-head{margin-bottom:8px}
.popular-title{font-size:12px;color:var(--mut);font-weight:700}
.popular-list{display:flex;flex-direction:column;gap:8px}
.popular-card{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--brd);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.03)}
.popular-card-main{display:flex;flex-direction:column;gap:4px}
.popular-team{font-weight:700}
.popular-meta{font-size:12px;color:var(--mut)}
.ws-loading{margin-top:14px;color:var(--mut)}
.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:block}
.ws-summary{border-color:rgba(79,140,255,.35)}
.ws-summary-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.res-card{display:flex;flex-direction:column;gap:12px}
.res-ok{border-color:rgba(43,182,115,.28)}
.res-fail{border-color:rgba(217,92,92,.28)}
.res-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.res-grid{display:grid;gap:12px}
.res-label{color:var(--mut);font-size:12px;margin-bottom:4px;font-weight:700}
.res-explain{color:#cfe0ff;background:rgba(79,140,255,.09);border:1px solid rgba(79,140,255,.2);border-radius:12px;padding:10px 12px}
.res-reason{color:#ffd0d0}
.ws-placeholder{min-height:220px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:1200px){.ws-body{grid-template-columns:1fr}.ws-sidebar{order:2}.ws-main{order:1}.def-row-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ws-shell{padding:12px}.ws-topbar{grid-template-columns:1fr}.def-row-grid{grid-template-columns:1fr}.def-row-head{align-items:flex-start;flex-direction:column}}


/* ── unit icons ─────────────────────────────────────────── */
.unit-icon{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;overflow:hidden;
  background:linear-gradient(135deg,#2a3342,#1d2330);
  border:1px solid var(--brd);
  vertical-align:middle;
  position:relative;
  flex-shrink:0;
}
.unit-icon img{display:block;object-fit:cover;border-radius:6px}
.unit-icon-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--txt);font-weight:800;font-size:14px;
  background:linear-gradient(135deg,#3a4556,#252c3a);
}
.def-live-icons{display:inline-flex;gap:4px;align-items:center;margin-left:4px}
.popular-team-icons{display:flex;gap:6px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.res-teams{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.res-team{display:flex;flex-direction:column;gap:8px}
.res-team-icons{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.res-team-names{color:var(--mut);font-size:12px}
.res-stats{color:var(--txt);font-size:13px;padding:8px 12px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid var(--brd)}
@media(max-width:900px){.res-teams{grid-template-columns:1fr}}


/* ── popular comps close + result warn ─────────────────── */
.popular-wrap{position:relative}
.popular-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.popular-close{
  background:transparent;border:1px solid var(--brd);border-radius:8px;
  color:var(--mut);cursor:pointer;padding:4px 8px;font-size:12px;line-height:1;
}
.popular-close:hover{border-color:var(--acc2);color:var(--txt)}
.popular-box{position:relative;padding-right:36px}
.popular-box .popular-close{position:absolute;top:8px;right:8px}
.res-explain-warn{
  background:rgba(230,169,61,.10);
  border-color:rgba(230,169,61,.35);
  color:#f6d08a;
}


/* ── autocomplete dropdown ─────────────────────────────── */
.ac-dropdown{
  position:absolute;z-index:9999;
  background:#131824;border:1px solid var(--brd);border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  max-height:360px;overflow-y:auto;overflow-x:hidden;
  padding:4px;
}
.ac-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:8px;cursor:pointer;
  color:var(--txt);
}
.ac-item:hover,.ac-item-sel{
  background:rgba(79,140,255,.15);
}
.ac-icon{
  width:28px;height:28px;flex-shrink:0;
  border-radius:6px;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a3342,#1d2330);
  border:1px solid var(--brd);
  position:relative;
}
.ac-icon img{width:28px;height:28px;object-fit:cover;border-radius:5px;display:block}
.ac-icon-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--txt);font-weight:800;font-size:13px;
  background:linear-gradient(135deg,#3a4556,#252c3a);
}
.ac-name{flex:1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-role{font-size:11px;color:var(--mut);padding:2px 6px;border:1px solid var(--brd);border-radius:6px;text-transform:lowercase}
.ac-badge{font-size:10px;padding:2px 6px;border-radius:6px;font-weight:800;letter-spacing:.5px}
.ac-badge-gl{background:linear-gradient(180deg,#f6d08a,#e6a93d);color:#3a2a10;border:1px solid #b8862c}
.ac-empty,.ac-loading{padding:10px 12px;color:var(--mut);font-size:13px}

/* === gac alternatives v1.1 === */
.res-primary-choice {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.res-choice-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.res-choice-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.res-choice-title {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.res-alternatives {
  margin-top: 12px;
}

.res-alternatives > summary {
  cursor: pointer;
  user-select: none;
  color: #8ec5ff;
  font-weight: 600;
  outline: none;
}

.res-alternatives > summary::-webkit-details-marker {
  display: none;
}

.res-alternatives > summary::before {
  content: "▸ ";
}

.res-alternatives[open] > summary::before {
  content: "▾ ";
}

.res-alt-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.res-alt-card {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.res-alt-select {
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #2f6fed;
  cursor: pointer;
}

.res-alt-select:hover {
  background: #245ad1;
}

@media (max-width: 900px) {
  .res-choice-top {
    flex-direction: column;
  }

  .res-choice-side {
    justify-content: flex-start;
  }
}
/* === /gac alternatives v1.1 === */

/* === mac-block v1.1 === */
.mac-block {
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 12px;
}

.mac-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #8ec5ff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 14px;
  font-weight: 600;
}

.mac-toggle:hover {
  background: rgba(142,197,255,0.08);
}

.mac-form {
  margin-top: 10px;
}

.mac-form-inner {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.mac-ac-wrap {
  position: relative;
  flex: 1 1 260px;
}

.mac-input {
  width: 100%;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
  padding: 8px 12px;
  box-sizing: border-box;
}

.mac-input:focus {
  outline: none;
  border-color: #4ea1ff;
}

.mac-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1e2235;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  z-index: 200;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.mac-sug-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #e0e0e0;
}

.mac-sug-item:hover {
  background: rgba(78,161,255,0.12);
}

.mac-check-btn {
  background: #2f6fed;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  white-space: nowrap;
}

.mac-check-btn:hover {
  background: #245ad1;
}

.mac-close-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #888;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 10px;
}

.mac-close-btn:hover {
  color: #e0e0e0;
  border-color: rgba(255,255,255,0.3);
}

.mac-result-wrap {
  margin-top: 10px;
}

.mac-result {
  border-radius: 10px;
  padding: 12px 16px;
}

.mac-result-error {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #f08080;
}

.mac-result-empty {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
}

.mac-result-exact {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.mac-result-partial {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.mac-result-leader_only {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}

.mac-result-no_data {
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.1);
}

.mac-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mac-result-badge {
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 6px;
}

.mac-badge-exact { background: rgba(40,167,69,0.2); color: #5dd87e; }
.mac-badge-partial { background: rgba(255,193,7,0.15); color: #ffc107; }
.mac-badge-leader_only { background: rgba(255,255,255,0.07); color: #aaa; }
.mac-badge-no_data { background: rgba(255,255,255,0.04); color: #888; }

.mac-stat {
  font-size: 13px;
  color: #c0c0c0;
}

.mac-team {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.mac-team-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  white-space: nowrap;
}
/* === /mac-block v1.1 === */

/* === history-panel v1.1 === */
.ws-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px !important;
}

.ws-history-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #2f6fed;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.history-panel {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 460px;
  max-width: calc(100vw - 40px);
  max-height: 70vh;
  overflow-y: auto;
  background: #16192b;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 16px;
  z-index: 1000;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

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

.history-head > div:last-child {
  display: flex;
  gap: 6px;
}

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

.history-empty {
  padding: 20px;
  text-align: center;
}

.history-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
}

.history-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.history-item-actions {
  display: flex;
  gap: 6px;
}

.history-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-chip {
  background: rgba(78,161,255,0.08);
  border: 1px solid rgba(78,161,255,0.2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: #c8d8ff;
}

.history-chip-more {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: #aaa;
}
/* === /history-panel v1.1 === */

/* === ws-share v1.1 === */
.ws-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 2000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: ws-toast-in 0.2s ease-out;
}

.ws-toast-ok {
  background: rgba(40, 167, 69, 0.95);
  color: #fff;
}

.ws-toast-err {
  background: rgba(220, 53, 69, 0.95);
  color: #fff;
}

@keyframes ws-toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.ws-share-banner {
  margin: 12px 20px 0;
  padding: 10px 14px;
  background: rgba(78,161,255,0.1);
  border: 1px solid rgba(78,161,255,0.3);
  border-radius: 8px;
  color: #8ec5ff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ws-banner-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: #8ec5ff;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
}

.ws-banner-close:hover {
  background: rgba(255,255,255,0.05);
}
/* === /ws-share v1.1 === */

/* === status-card v1.2 === */
.status-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}

.status-item.status-ok {
  border-color: rgba(40, 167, 69, 0.25);
  background: rgba(40, 167, 69, 0.06);
}

.status-item.status-bad {
  border-color: rgba(255, 193, 7, 0.25);
  background: rgba(255, 193, 7, 0.05);
}

.status-item.status-neutral {
  border-color: rgba(255,255,255,0.06);
}

.status-icon {
  font-size: 15px;
  line-height: 1.3;
  flex-shrink: 0;
  padding-top: 1px;
}

.status-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.status-label {
  font-size: 13px;
  font-weight: 700;
  color: #e0e0e0;
}

.status-hint {
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.status-hint code {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: #c8d8ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* === /status-card v1.2 === */

/* === reserve-editor v1.2 === */
.reserve-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reserve-chip-x {
  background: none;
  border: none;
  color: #f08080;
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
}

.reserve-chip-x:hover {
  color: #ff5555;
}

.reserve-controls {
  margin-top: 8px;
}

.reserve-edit-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.reserve-ac-wrap {
  position: relative;
  margin-bottom: 8px;
}

.reserve-ac-input {
  width: 100%;
  box-sizing: border-box;
}

.reserve-ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1e2235;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  z-index: 300;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 220px;
  overflow-y: auto;
}

.reserve-ac-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #e0e0e0;
}

.reserve-ac-item:hover,
.reserve-ac-item.reserve-ac-sel {
  background: rgba(78,161,255,0.15);
}

.reserve-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reserve-error {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #f08080;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 8px;
}

.reserve-hint {
  margin-top: 6px;
}
/* === /reserve-editor v1.2 === */

/* === ws-ally v1.2 === */
.ws-ally-block {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-ally-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-ally-name {
  color: #8ec5ff;
  font-weight: 600;
}

.ws-ally-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ws-ally-input {
  width: 140px;
  padding: 5px 10px !important;
  font-size: 13px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ws-ally-form form {
  display: inline;
}
/* === /ws-ally v1.2 === */

/* === roster-sync v1.2 === */
.roster-sync-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roster-sync-status {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 1.4;
}

.roster-sync-status.roster-sync-info {
  background: rgba(78,161,255,0.08);
  border: 1px solid rgba(78,161,255,0.2);
  color: #8ec5ff;
}

.roster-sync-status.roster-sync-ok {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
  color: #5dd87e;
}

.roster-sync-status.roster-sync-err {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #f08080;
}
/* === /roster-sync v1.2 === */

/* === preset-panel v1.2 === */
.preset-error {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #f08080;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 8px;
}

.preset-hint {
  font-size: 12px;
}

.preset-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.preset-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
}

.preset-row-active {
  border-color: rgba(40, 167, 69, 0.35);
  background: rgba(40, 167, 69, 0.06);
}

.preset-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-row-title {
  font-size: 13px;
}

.preset-row-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.preset-badges {
  margin-top: 6px;
}

.preset-reserved-names {
  margin-top: 6px;
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
}

.preset-create-block {
  margin-top: 8px;
}

.preset-form {
  margin-top: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
}

.preset-form-row {
  margin-bottom: 10px;
}

.preset-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.preset-form .ws-label,
.preset-form .ws-ctrl > span {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.preset-reserved-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 26px;
  margin-bottom: 6px;
}

.preset-ac-wrap {
  position: relative;
}

.preset-ac-input {
  width: 100%;
  box-sizing: border-box;
}

.preset-ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1e2235;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  z-index: 400;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 220px;
  overflow-y: auto;
}

.preset-ac-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #e0e0e0;
}

.preset-ac-item:hover,
.preset-ac-item.preset-ac-sel {
  background: rgba(78,161,255,0.15);
}

.preset-form-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* === /preset-panel v1.2 === */