:root{
  --a:#6968A6;   /* lavender dusk */
  --b:#CF9893;   /* warm blush */
  --c:#085078;   /* deep ocean */
  --ink:#F6F7FF;
  --muted:rgba(246,247,255,.72);
  --line:rgba(246,247,255,.16);
  --shadow: 0 22px 55px rgba(0,0,0,.35);
  --shadow2: 0 12px 28px rgba(0,0,0,.32);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:-40px;
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(207,152,147,.55), transparent 60%),
    radial-gradient(900px 600px at 76% 18%, rgba(105,104,166,.55), transparent 62%),
    radial-gradient(1000px 800px at 65% 82%, rgba(8,80,120,.55), transparent 60%),
    linear-gradient(135deg, rgba(207,152,147,.45), rgba(105,104,166,.35) 40%, rgba(8,80,120,.35));
  filter: blur(0px);
}

.shell{
  max-width:1180px;
  margin:0 auto;
  padding:18px 14px 28px;
  position:relative;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 6px 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand__mark{
  width:46px; height:46px; border-radius:999px;
  background: radial-gradient(circle at 30% 25%, rgba(246,247,255,.65), rgba(246,247,255,.08) 52%, rgba(246,247,255,.02));
  border:1px solid var(--line);
  box-shadow: var(--shadow2);
}
.brand__name{font-weight:600; letter-spacing:.2px; font-size:16px}
.brand__tag{font-size:12px; color:var(--muted); margin-top:2px}

.status{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}
.dot{
  width:10px; height:10px; border-radius:99px;
  background: rgba(246,247,255,.85);
  box-shadow: 0 0 0 6px rgba(246,247,255,.08);
}
.status__txt{font-size:12px; color:var(--muted)}

.panel{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  align-items:stretch;
}

.panel__left, .panel__right{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.panel__left{ padding:18px 16px 18px; }
.panel__right{ padding:16px 14px 14px; display:flex; flex-direction:column; }

.h1{
  margin:0 0 6px;
  font-size:24px;
  letter-spacing:.2px;
}
.lead{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.keybox{
  border-radius:18px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(246,247,255,.08), rgba(246,247,255,.03));
  padding:12px 12px 10px;
}
.keybox__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.keybox__label{font-size:12px; color:rgba(246,247,255,.85); font-weight:600}
.keybox__meta{font-size:12px; color:var(--muted)}
.keybox__input{
  display:flex; gap:10px; align-items:center;
}
.keybox input{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(246,247,255,.18);
  background: rgba(0,0,0,.20);
  color:var(--ink);
  padding:12px 14px;
  outline:none;
}
.keybox input::placeholder{color:rgba(246,247,255,.40)}
.keybox__hint{
  margin-top:10px;
  font-size:11px;
  color:rgba(246,247,255,.60);
  line-height:1.35;
}

.miniBubble{
  user-select:none;
  cursor:pointer;
  border-radius:999px;
  padding:10px 12px;
  border:1px solid rgba(246,247,255,.22);
  background: radial-gradient(circle at 30% 25%, rgba(246,247,255,.16), rgba(246,247,255,.06));
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
  font-size:12px;
  white-space:nowrap;
  transition: transform .15s ease, filter .15s ease;
}
.miniBubble:active{ transform: translateY(1px) scale(.98); filter:brightness(1.05); }
.miniBubble--ghost{
  background: rgba(0,0,0,.12);
}

.divider{
  height:1px;
  background: rgba(246,247,255,.12);
  margin:14px 0;
}

.bubbleField{ display:flex; flex-direction:column; gap:14px; }

.bubbleGroup__title{
  font-size:12px;
  font-weight:600;
  color:rgba(246,247,255,.82);
  margin:0 0 8px 2px;
}

.bubbleRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.bubble{
  user-select:none;
  cursor:pointer;
  padding:11px 13px;
  border-radius:999px;
  border:1px solid rgba(246,247,255,.20);
  background: rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  font-size:12px;
  color:rgba(246,247,255,.86);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.bubble:hover{ transform: translateY(-1px); }
.bubble:active{ transform: translateY(1px) scale(.98); }

.bubble.is-active{
  background: linear-gradient(135deg, rgba(207,152,147,.28), rgba(105,104,166,.22), rgba(8,80,120,.18));
  border-color: rgba(246,247,255,.36);
  color: rgba(246,247,255,.94);
}

.chipsInput{
  display:flex; gap:10px; align-items:center;
}
.chipsInput input{
  width:100%;
  border-radius:999px;
  border:1px solid rgba(246,247,255,.18);
  background: rgba(0,0,0,.20);
  color:var(--ink);
  padding:12px 14px;
  outline:none;
}
.chipsInput input::placeholder{color:rgba(246,247,255,.40)}
.chips{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px;
  padding:9px 11px;
  border:1px solid rgba(246,247,255,.20);
  background: rgba(246,247,255,.06);
  font-size:12px;
}
.chip__x{
  width:18px; height:18px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(246,247,255,.22);
  background: rgba(0,0,0,.14);
  cursor:pointer;
}

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

.actionBubble{
  user-select:none;
  cursor:pointer;
  border-radius:28px;
  border:1px solid rgba(246,247,255,.18);
  background: rgba(0,0,0,.14);
  box-shadow: var(--shadow2);
  padding:14px 14px 13px;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
  position:relative;
  overflow:hidden;
}
.actionBubble::before{
  content:"";
  position:absolute; inset:-60px;
  background: radial-gradient(circle at 25% 25%, rgba(246,247,255,.18), transparent 52%);
  transform: rotate(12deg);
}
.actionBubble > *{ position:relative; z-index:2 }
.actionBubble:active{ transform: translateY(1px) scale(.985); filter:brightness(1.03); }
.actionBubble--primary{
  grid-column:1 / -1;
  background: linear-gradient(135deg, rgba(207,152,147,.28), rgba(105,104,166,.24), rgba(8,80,120,.20));
  border-color: rgba(246,247,255,.30);
}
.actionBubble__kicker{ font-size:11px; color:rgba(246,247,255,.72); margin-bottom:6px }
.actionBubble__title{ font-size:18px; font-weight:600; letter-spacing:.2px }
.actionBubble__sub{ font-size:11px; color:rgba(246,247,255,.66); margin-top:4px }

.resultHeader{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin:8px 2px 10px;
}
.resultHeader__title{ font-weight:600; font-size:13px; color:rgba(246,247,255,.88) }
.resultHeader__meta{ font-size:11px; color:rgba(246,247,255,.64) }

.results{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  padding:2px 2px 10px;
  overflow:auto;
  max-height: 56vh;
}

.card{
  border-radius:22px;
  border:1px solid rgba(246,247,255,.16);
  background: rgba(0,0,0,.12);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
  padding:12px 12px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute; inset:-40px;
  background: radial-gradient(circle at 18% 20%, rgba(207,152,147,.16), transparent 55%),
              radial-gradient(circle at 80% 40%, rgba(105,104,166,.14), transparent 60%),
              radial-gradient(circle at 60% 90%, rgba(8,80,120,.12), transparent 55%);
  pointer-events:none;
}
.card > *{ position:relative; z-index:2; }
.badge{
  width:34px; height:34px; border-radius:999px;
  border:1px solid rgba(246,247,255,.18);
  background: rgba(246,247,255,.06);
  display:grid; place-items:center;
  font-size:12px; color:rgba(246,247,255,.86);
  flex:0 0 auto;
}
.text{
  font-size:13px;
  line-height:1.35;
  color:rgba(246,247,255,.92);
  margin-top:2px;
  flex:1 1 auto;
}
.cardActions{
  display:flex; flex-direction:column; gap:8px;
  flex:0 0 auto;
}
.bubbleIcon{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(246,247,255,.18);
  background: rgba(0,0,0,.12);
  cursor:pointer;
  user-select:none;
  transition: transform .15s ease;
}
.bubbleIcon:active{ transform: translateY(1px) scale(.98); }

.foot{
  margin-top:auto;
  padding:10px 2px 2px;
}
.foot__line{ height:1px; background: rgba(246,247,255,.12); margin-bottom:10px; }
.foot__txt{ font-size:11px; color:rgba(246,247,255,.55); }

@media (max-width: 980px){
  .panel{ grid-template-columns:1fr; }
  .results{ max-height: 46vh; }
}