.crop-box{
  width:160px; height:160px;
  border:1px solid rgba(214,182,107,.35);
  background:#0a1811;
  border-radius:999px;
  overflow:hidden;
  position:relative;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
.crop-box img{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(1);
  user-select:none; pointer-events:none; object-fit:cover;
}
.crop-box.drag{cursor:grabbing}
@media (max-width: 600px){ }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(191,230,208,.12), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(214,182,107,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
/* Subtle animated background motion */
body{ background-position: 20% 10%, 80% 0%, 0 0; animation: bgMove 60s linear infinite; }
@keyframes bgMove{
  0%{ background-position: 20% 10%, 80% 0%, 0 0; }
  50%{ background-position: 24% 12%, 78% 2%, 0 0; }
  100%{ background-position: 20% 10%, 80% 0%, 0 0; }
}
a{color:var(--mint); text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1160px;margin:0 auto;padding:26px 18px 80px}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 14px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:var(--r);
  box-shadow: var(--shadow);
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{
  width:46px;height:46px;border-radius:999px;
  border:1px solid rgba(214,182,107,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  object-fit:cover;
  background:#0a1811;
}
.brand .title{display:flex;flex-direction:column;line-height:1.05}
.brand .title b{font-size:14.5px;letter-spacing:.45px}
.brand .title span{font-size:12.5px;color:var(--muted)}
.nav{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.btn{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:650;
  letter-spacing:.25px;
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.gold{
  border-color:rgba(214,182,107,.35);
  background:rgba(214,182,107,.12);
}
.btn.gold:hover{background:rgba(214,182,107,.18)}
.btn.small{padding:8px 10px;border-radius:12px;font-size:12.5px}
.hero{
  margin-top:18px;
  padding:24px;
  border-radius:calc(var(--r) + 6px);
  border:1px solid var(--stroke);
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(191,230,208,.10), transparent 55%),
    radial-gradient(900px 450px at 80% 10%, rgba(214,182,107,.10), transparent 60%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }
.h-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  color:rgba(214,182,107,.95);
}
.h1{margin:12px 0 8px;font-size:36px;letter-spacing:.3px}
.sub{color:var(--muted);line-height:1.55;font-size:15.5px;max-width:62ch}
.card{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  border-radius:var(--r);
  padding:16px;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 900px){ .grid2{grid-template-columns:1fr} }
.kpi{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  background:rgba(0,0,0,.18);
}
.kpi b{display:block; font-size:14px; letter-spacing:.25px}
.kpi span{display:block; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.45}
.chatwrap{margin-top:16px;display:grid;grid-template-columns:1fr 340px;gap:12px}
@media (max-width: 1050px){ .chatwrap{grid-template-columns:1fr} }
.chat{
  border:1px solid var(--stroke);
  border-radius:calc(var(--r) + 6px);
  background:rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 540px;
}
.chathead{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--stroke);
  background:rgba(0,0,0,.16);
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(214,182,107,.35);
  color:rgba(214,182,107,.98);
  background:rgba(214,182,107,.10);
}
.badge-active{ border-color:rgba(82,196,127,.45); color:rgba(82,196,127,.98); background:rgba(82,196,127,.12); }
.badge-trialing{ border-color:rgba(240,173,78,.45); color:rgba(240,173,78,.98); background:rgba(240,173,78,.12); }
.badge-none{ border-color:rgba(255,255,255,.18); color:rgba(232,243,238,.65); background:rgba(255,255,255,.06); }
.dot{
  width:8px;height:8px;border-radius:999px;background:rgba(191,230,208,.95);
  box-shadow:0 0 0 4px rgba(191,230,208,.10);
}
.messages{padding:14px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.messages.forest{background:#0a1811; border:1px solid var(--stroke); border-radius:12px}
.messages.light{background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:12px}
.msg{
  max-width:860px;
  padding:11px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
  line-height:1.55;
  white-space:pre-wrap;
}
.msg.user{margin-left:auto;border-color:rgba(191,230,208,.35);background:rgba(191,230,208,.12)}
.msg.assistant{border-color:rgba(214,182,107,.35);background:rgba(214,182,107,.10)}
.composer{display:flex; gap:10px;padding:12px;border-top:1px solid var(--stroke);background:rgba(0,0,0,.14)}
.input{
  flex:1;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-radius:14px;
  padding:12px 12px;
  outline:none;
}
.input:focus{border-color:rgba(214,182,107,.35)}
/* Refined accessible focus rings */
.btn:focus-visible,
.input:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline:2px solid rgba(214,182,107,.65);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(214,182,107,.15);
  border-color:rgba(214,182,107,.45);
}
.hr{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.smallmuted{color:var(--muted);font-size:13px;line-height:1.45}
.toast{
  position:fixed; right:16px; bottom:16px;
  width:min(380px, calc(100% - 32px));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  padding:12px;
  display:none;
  box-shadow: var(--shadow);
  z-index:9999;
}
.toast b{display:block; color:rgba(214,182,107,.95); margin-bottom:6px}
.toast p{margin:0;color:rgba(232,243,238,.86);font-size:13px;line-height:1.45}
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.58);
  z-index:9999;
}
.modal .box{
  width:min(520px, 100%);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:16px;
}
.modal .box .btn.small{padding:6px 9px}
.shape-toggle{display:flex; gap:6px}
.shape-toggle .btn.small.active{border-color:rgba(191,230,208,.45); background:rgba(191,230,208,.12)}
.field{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.field label{font-size:12.5px;color:rgba(232,243,238,.82)}
.field input,.field select, .field textarea{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:var(--text);
  border-radius:14px;
  padding:11px 12px;
  outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(214,182,107,.35)}
.row{display:flex; gap:10px}
.row > *{flex:1}
.table{width:100%;border-collapse:separate;border-spacing:0;border-radius:16px;border:1px solid rgba(255,255,255,.10);overflow:hidden}
.table th,.table td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.table th{color:rgba(214,182,107,.95);text-align:left;background:rgba(0,0,0,.15)}
.table tr:last-child td{border-bottom:none}
/* Cleaned stray CSS */

/* Theme variables (defaults and Yeti override) */
:root{
  --bg0:#081410;
  --bg1:#0b1a12;
  --panel:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --text:#e8f3ee;
  --muted:rgba(232,243,238,.75);
  --gold:#d6b66b;
  --mint:#bfe6d0;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --r:18px;
}
body.yeti-theme{
  --bg0:#07121a;
  --bg1:#0a1620;
  --mint:#a5f3fc; /* links */
  --gold:#7dd3fc; /* accent buttons */
}
body.yeti-theme .brand img{ border-color: rgba(125,211,252,.35); background:#07121a; }
body.yeti-theme .badge{ border-color: rgba(125,211,252,.35); color: rgba(125,211,252,.98); background: rgba(125,211,252,.10); }

/* Premium selection color */
::selection{ background: rgba(214,182,107,.25); color:#0a1811; }