:root{
  --assist-bg:#f4f6fb;
  --assist-card:#ffffff;
  --assist-text:#0f172a;
  --assist-muted:rgba(15,23,42,.60);
  --assist-border:rgba(226,232,240,1);
  --assist-accent:#16a34a;
  --assist-accent-2:#22c55e;
  --assist-bg-image:
    radial-gradient(800px 320px at 10% 0,rgba(56,189,248,.18),rgba(15,23,42,0) 60%);
  --assist-focus:0 0 0 1px rgba(34,197,94,.35);
  --assist-focus-2:0 0 0 3px rgba(34,197,94,.22);
  --assist-shadow:0 16px 40px rgba(15,23,42,.10);
  --assist-shadow-soft:0 10px 26px rgba(15,23,42,.08);
  --assist-radius:18px;
}
.assist-body{
  margin:0;
  background-image:var(--assist-bg-image);
  background-color:var(--assist-bg);
  color:var(--assist-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
.assist-shell{
  max-width:960px;
  margin:24px auto 40px;
  padding:0 14px;
}
.assist-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.assist-topbar__left{min-width:0}
.assist-topbar__right{display:flex;align-items:center;gap:10px}
.assist-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.assist-nav__link{
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--assist-border);
  background:rgba(255,255,255,.75);
  color:rgba(15,23,42,.76);
  font-size:13px;
  font-weight:850;
}
.assist-nav__link:hover{color:var(--assist-text)}
.assist-burger{
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--assist-border);
  background:rgba(255,255,255,.78);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:0;
}
.assist-burger span{
  display:block;
  width:18px;height:2px;
  background:rgba(15,23,42,.75);
  border-radius:2px;
}
.assist-drawer{position:fixed;inset:0;z-index:60}
.assist-drawer__mask{position:absolute;inset:0;background:rgba(2,6,23,.62)}
.assist-drawer__panel{
  position:absolute;top:12px;right:12px;bottom:12px;
  width:min(320px,calc(100% - 24px));
  background:var(--assist-card);
  border:1px solid var(--assist-border);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(2,6,23,.22);
  display:flex;
  flex-direction:column;
}
.assist-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 10px;
  border-bottom:1px solid var(--assist-border);
}
.assist-drawer__title{font-weight:950}
.assist-drawer__close{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--assist-border);
  background:rgba(255,255,255,.86);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.assist-drawer__body{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.assist-drawer__link{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--assist-border);
  background:rgba(255,255,255,.92);
  color:rgba(15,23,42,.84);
  font-weight:900;
}
.assist-drawer__link:hover{color:var(--assist-text)}
.assist-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:14px;
}
.assist-hero{display:none}
.assist-brand{display:flex;align-items:center;gap:10px}
.assist-mark{
  width:34px;height:34px;border-radius:999px;
  background:linear-gradient(135deg,var(--assist-accent),var(--assist-accent-2));
  display:flex;align-items:center;justify-content:center;
  color:#ecfdf3;font-weight:900;font-size:15px;
  box-shadow:0 12px 26px rgba(22,163,74,.38);
}
.assist-brand__name{font-weight:900;font-size:16px}
.assist-brand__sub{font-size:12px;color:var(--assist-muted);margin-top:2px}
.assist-hero__meta{font-size:12px;color:rgba(15,23,42,.55)}

.assist-card{
  border-radius:var(--assist-radius);
  background:var(--assist-card);
  border:1px solid var(--assist-border);
  box-shadow:var(--assist-shadow);
  padding:16px 16px 18px;
  margin-bottom:14px;
}
.assist-card--muted{
  background:linear-gradient(180deg,#f9fafb,#ffffff);
  box-shadow:var(--assist-shadow-soft);
}

.assist-tabs{
  display:inline-flex;
  flex-wrap:wrap;
  padding:0;
  border-radius:0;
  background:transparent;
  gap:8px;
  margin-bottom:18px;
}
.assist-tab{
  border:1px solid rgba(209,213,219,1);
  border-radius:12px;
  padding:8px 14px;
  font-size:13px;
  font-weight:800;
  background:rgba(255,255,255,.78);
  color:rgba(15,23,42,.70);
  cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s,transform .15s;
  white-space:nowrap;
}
.assist-tab:hover{transform:translateY(-1px)}
.assist-tab.is-active{
  background:linear-gradient(135deg,var(--assist-accent),var(--assist-accent-2));
  color:#ecfdf3;
  box-shadow:0 12px 26px rgba(22,163,74,.32);
  border-color:transparent;
}

.assist-pane{display:none}
.assist-pane__title{font-size:15px;font-weight:900;margin-bottom:6px}
.assist-pane__desc{font-size:13px;color:rgba(15,23,42,.62);margin-bottom:14px}

.assist-alert{
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:10px;
}
.assist-alert.is-ok{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534}
.assist-alert.is-bad{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.assist-alert.is-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}

.assist-alert-actions{
  margin:-2px 0 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.assist-form{margin-top:4px}
.assist-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.assist-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
}
.assist-field--full{grid-column:1 / -1}
.assist-field span{font-weight:800;color:rgba(15,23,42,.85)}
.assist-field em{font-style:normal;color:rgba(15,23,42,.55);font-size:12px}
.assist-field input{
  height:38px;
  border-radius:10px;
  border:1px solid rgba(209,213,219,1);
  padding:0 10px;
  font-size:13px;
}
.assist-field input:focus{
  outline:none;
  border-color:rgba(34,197,94,.7);
  box-shadow:var(--assist-focus);
}
.assist-captcha{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.assist-captcha-img{
  width:124px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(209,213,219,1);
  background:#fff;
  display:block;
  cursor:pointer;
}
.assist-captcha input{
  flex:0 0 220px;
  min-width:160px;
}
.assist-captcha-refresh{
  height:38px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(209,213,219,1);
  background:rgba(255,255,255,.92);
  color:rgba(15,23,42,.80);
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}
.assist-file{padding:6px 10px;height:auto}

.assist-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.assist-btn{
  border:0;
  border-radius:10px;
  height:38px;
  padding:0 16px;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.assist-btn.is-primary{
  background:linear-gradient(135deg,var(--assist-accent),var(--assist-accent-2));
  color:#ecfdf3;
  box-shadow:0 12px 26px rgba(22,163,74,.30);
}
.assist-btn.is-ghost{
  background:var(--assist-card);
  color:#111827;
  border:1px solid rgba(209,213,219,1);
}
.assist-btn--full{width:100%}

.assist-steps{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.assist-step{
  border-radius:14px;
  background:#f9fafb;
  border:1px solid var(--assist-border);
  padding:10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.assist-step__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  padding:0 10px;
  height:22px;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
  color:#166534;
  background:#dcfce7;
}
.assist-step__thumb{
  border-radius:10px;
  background:#0b1120;
  overflow:hidden;
  aspect-ratio:4 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.assist-step__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.assist-step__label{
  font-size:12px;
  color:rgba(15,23,42,.70);
}

.assist-status{
  margin-top:12px;
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.assist-status__k{font-weight:800;color:rgba(15,23,42,.70)}
.assist-status__v{font-weight:900}
.assist-status__meta{font-size:12px;color:rgba(15,23,42,.60);display:flex;gap:10px;flex-wrap:wrap}
.assist-status.is-ok{background:#ecfdf3;border:1px solid #bbf7d0;color:#166534}
.assist-status.is-bad{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.assist-status.is-pending{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}

.assist-foot{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:rgba(15,23,42,.55);
}
.assist-foot a{text-decoration:none;color:rgba(37,99,235,.9);font-weight:700}

@media (max-width: 720px){
  .assist-shell{margin-top:18px}
  .assist-nav{display:none}
  .assist-burger{display:inline-flex}
  .assist-grid{grid-template-columns:1fr}
  .assist-steps{grid-template-columns:1fr}
  .assist-captcha input{flex:1 1 140px;min-width:120px}
}

/* Tutorial Styles */
.assist-pane[data-pane="okx_tutorial"],
.assist-pane[data-pane="binance_tutorial"] {
  padding-top: 10px;
}

/* Binance Specific Styles */
.assist-pane[data-pane="binance_tutorial"] .tutorial-header h1 {
  background: linear-gradient(135deg, #F0B90B 0%, #d4a000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #F0B90B; /* Fallback */
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-chapter {
  border-left-color: #F0B90B;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-chapter-title {
  color: #b57e10;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-chapter-number {
  background: #F0B90B;
  color: #1a1a1a;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-step-number {
  background: #F0B90B;
  color: #1a1a1a;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-link-box {
  background: #fef9e6;
  border-color: #F0B90B;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-link-box a {
  background: linear-gradient(135deg, #F0B90B 0%, #FCD535 100%);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(240, 185, 11, 0.3);
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-link-box a:hover {
  background: white;
  color: #F0B90B;
  box-shadow: 0 6px 16px rgba(240, 185, 11, 0.4);
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-warning-box {
  background: #fff7e6;
  border-color: #ffd591;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-warning-content h4 {
  color: #d46b08;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-tip-box {
  background: #fef9e6;
  border-color: #F0B90B;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-tip-content h4 {
  color: #b57e10;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-tip-content p {
  color: #666;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-completion {
  background: #fef9e6;
  border-color: #F0B90B;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-completion h3 {
  color: #b57e10;
}

.assist-pane[data-pane="binance_tutorial"] .tutorial-completion-icon {
  color: #F0B90B;
}

/* Key Points for Binance */
.tutorial-key-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.tutorial-key-point {
  background: white;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
  text-align: center;
  transition: transform 0.2s;
}

.tutorial-key-point:hover {
  transform: translateY(-2px);
  border-color: #F0B90B;
}

.tutorial-key-point-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}

.tutorial-key-point h4 {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}

.tutorial-key-point p {
  font-size: 12px;
  color: rgba(15,23,42,.6);
  margin: 0;
}

.tutorial-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(226,232,240,1);
}
.tutorial-header h1 {
  color: #0f172a;
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 900;
}
.tutorial-header p {
  color: rgba(15,23,42,.6);
  font-size: 13px;
}

.tutorial-chapter {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,1);
  border-left: 4px solid #16a34a;
}
.tutorial-chapter-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #16a34a;
  font-size: 16px;
  font-weight: 800;
}
.tutorial-chapter-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #16a34a;
  color: white;
  border-radius: 999px;
  margin-right: 10px;
  font-weight: 800;
  font-size: 13px;
}

.tutorial-step {
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,1);
}
.tutorial-step:last-child {
  margin-bottom: 0;
}
.tutorial-step-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.tutorial-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #22c55e;
  color: white;
  border-radius: 999px;
  margin-right: 10px;
  font-weight: 800;
  font-size: 12px;
}
.tutorial-step-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
.tutorial-step p {
  font-size: 13px;
  color: rgba(15,23,42,.75);
  margin: 0 0 12px;
  line-height: 1.5;
}

.tutorial-warning-box {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  padding: 14px;
  margin: 16px 0;
}
.tutorial-warning-content h4 {
  color: #c2410c;
  font-size: 14px;
  margin: 0 0 6px;
  font-weight: 800;
}
.tutorial-warning-content p {
  color: #9a3412;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.tutorial-image-container {
  margin: 16px 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(226,232,240,1);
  background-color: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 0;
}
.tutorial-image-container img {
  width: auto;
  max-width: 100%;
  max-height: 500px;
  display: block;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Specifically for phone screenshots */
@media (min-width: 640px) {
  .tutorial-image-container img {
    max-width: 320px;
  }
}

.tutorial-image-caption {
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  background: white;
  color: rgba(15,23,42,.6);
  font-size: 13px;
  font-weight: 500;
  border-top: 1px solid rgba(226,232,240,1);
  margin-top: 16px;
  /* Ensure caption spans full width */
  margin-left: -16px;
  margin-right: -16px;
  width: calc(100% + 32px);
}

.tutorial-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}
/* Ensure grid items stretch to fill height */
.tutorial-image-grid .tutorial-image-container {
  margin: 0;
  height: 100%;
  justify-content: space-between;
}

.tutorial-link-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  text-align: center;
}
.tutorial-link-box a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg,#3b82f6,#2563eb);
  color: white;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(37,99,235,0.2);
}
.tutorial-link-box a:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37,99,235,0.3);
}
.tutorial-link-box a i {
  font-style: normal;
  font-size: 14px;
}

.tutorial-tip-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px;
  margin: 16px 0;
}
.tutorial-tip-content h4 {
  color: #15803d;
  font-size: 14px;
  margin: 0 0 6px;
  font-weight: 800;
}
.tutorial-tip-content p {
  color: #166534;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.tutorial-completion {
  text-align: center;
  padding: 30px;
  background: #f0fdf4;
  border-radius: 16px;
  margin-top: 30px;
  border: 1px solid #bbf7d0;
}
.tutorial-completion-icon {
  font-size: 40px;
  margin-bottom: 12px;
  line-height: 1;
}
.tutorial-completion h3 {
  color: #15803d;
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 800;
}
.tutorial-completion p {
  color: #166534;
  font-size: 13px;
  margin: 0;
}