#dcpg-root{
  --dcpg-teal-900:#0B3B3B;
  --dcpg-teal-700:#0F5257;
  --dcpg-teal-600:#166166;
  --dcpg-amber-500:#D98E3F;
  --dcpg-amber-300:#E8C687;
  --dcpg-cream-100:#FAF6EF;
  --dcpg-cream-200:#F1EADB;
  --dcpg-ink-900:#22302E;
  --dcpg-ink-600:#4B5B58;
  --dcpg-sage-200:#D8E3DA;
  --dcpg-partner-a:#0F5257;
  --dcpg-partner-b:#D98E3F;
  max-width:640px;margin:0 auto;padding:24px 16px 60px;
  font-family:'Inter',system-ui,sans-serif;color:var(--dcpg-ink-900);
  box-sizing:border-box;
}
#dcpg-root *{box-sizing:border-box;}
#dcpg-root h1,#dcpg-root h2,#dcpg-root h3{
  font-family:Georgia,'Times New Roman',serif;font-weight:600;color:var(--dcpg-teal-900);margin:0 0 8px;
}
#dcpg-root h1{font-size:28px;}
#dcpg-root h2{font-size:22px;}
#dcpg-root p.dcpg-sub{color:var(--dcpg-ink-600);font-size:15px;line-height:1.5;margin:0 0 24px;}
#dcpg-root .dcpg-card{
  background:#fff;border:1px solid var(--dcpg-sage-200);border-radius:14px;padding:26px;
}
#dcpg-root label.dcpg-field{display:block;margin-bottom:18px;}
#dcpg-root label.dcpg-field span{display:block;font-weight:600;font-size:13px;color:var(--dcpg-teal-900);margin-bottom:6px;}
#dcpg-root input[type=text],#dcpg-root textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--dcpg-sage-200);border-radius:8px;
  font-family:inherit;font-size:15px;background:var(--dcpg-cream-100);color:var(--dcpg-ink-900);
}
#dcpg-root textarea{min-height:100px;resize:vertical;}
#dcpg-root .dcpg-range-row{display:flex;align-items:center;gap:12px;}
#dcpg-root input[type=range]{flex:1;accent-color:var(--dcpg-teal-700);}
#dcpg-root .dcpg-range-val{font-weight:700;color:var(--dcpg-amber-500);min-width:26px;text-align:right;}
#dcpg-root button{
  font-family:inherit;font-weight:600;font-size:14px;border:none;border-radius:8px;
  padding:12px 20px;cursor:pointer;
}
#dcpg-root .dcpg-btn-primary{background:var(--dcpg-teal-700);color:#fff;}
#dcpg-root .dcpg-btn-primary:disabled{background:var(--dcpg-sage-200);color:var(--dcpg-ink-600);cursor:not-allowed;}
#dcpg-root .dcpg-btn-secondary{background:transparent;color:var(--dcpg-teal-700);border:1.5px solid var(--dcpg-sage-200);}
#dcpg-root .dcpg-btn-text{background:none;color:var(--dcpg-ink-600);padding:6px 2px;font-size:13px;text-decoration:underline;}
#dcpg-root .dcpg-error{margin-top:14px;padding:11px 13px;background:#FBEEEA;border:1px solid #E2B4A8;border-radius:8px;color:#8A3A2A;font-size:13px;}
#dcpg-root .dcpg-loading{display:flex;align-items:center;gap:9px;color:var(--dcpg-ink-600);font-size:13px;margin-top:14px;}
#dcpg-root .dcpg-spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--dcpg-sage-200);border-top-color:var(--dcpg-teal-700);animation:dcpg-spin .7s linear infinite;}
@keyframes dcpg-spin{to{transform:rotate(360deg);}}

/* Links screen */
#dcpg-root .dcpg-link-box{
  display:flex;align-items:center;gap:8px;background:var(--dcpg-cream-100);
  border:1px solid var(--dcpg-sage-200);border-radius:8px;padding:10px 12px;margin-bottom:10px;
}
#dcpg-root .dcpg-link-box input{border:none;background:transparent;flex:1;font-size:13px;padding:0;}
#dcpg-root .dcpg-link-label{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;color:var(--dcpg-teal-900);}

/* Board */
#dcpg-root .dcpg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px;}
#dcpg-root .dcpg-feature{
  position:relative;background:var(--dcpg-cream-200);border:1.5px solid var(--dcpg-sage-200);
  border-radius:16px;min-height:120px;padding:14px 10px 10px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;box-shadow:inset 0 3px 8px rgba(11,59,59,.08);
}
#dcpg-root .dcpg-feature.dcpg-hover{border-color:var(--dcpg-amber-500);background:var(--dcpg-amber-300);}
#dcpg-root .dcpg-feature-label{font-family:Georgia,serif;font-size:13px;text-align:center;margin-bottom:6px;color:var(--dcpg-teal-900);line-height:1.25;}
#dcpg-root .dcpg-feature-count{font-size:11px;font-weight:700;color:var(--dcpg-amber-500);background:#fff;border-radius:999px;padding:1px 8px;margin-bottom:8px;}
#dcpg-root .dcpg-pile{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;min-height:22px;}

#dcpg-root .dcpg-candy{width:20px;height:20px;border-radius:50%;box-shadow:inset -2px -3px 4px rgba(0,0,0,.18),inset 2px 2px 3px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.15);cursor:grab;touch-action:none;flex-shrink:0;}
#dcpg-root .dcpg-candy.dcpg-placed{width:14px;height:14px;cursor:pointer;}
#dcpg-root .dcpg-candy.dcpg-ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-50%) scale(1.15);}

#dcpg-root .dcpg-tray-wrap{background:#fff;border:1px solid var(--dcpg-sage-200);border-radius:14px;padding:18px;}
#dcpg-root .dcpg-tray-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
#dcpg-root .dcpg-tray-head h3{font-size:14px;margin:0;}
#dcpg-root .dcpg-tray-count{font-size:12px;color:var(--dcpg-ink-600);}
#dcpg-root .dcpg-tray{display:flex;flex-wrap:wrap;gap:8px;min-height:30px;}

#dcpg-root .dcpg-waiting{text-align:center;padding:40px 10px;}
#dcpg-root .dcpg-waiting .dcpg-spinner{width:22px;height:22px;border-width:3px;margin:0 auto 16px;}

/* Comparison */
#dcpg-root .dcpg-legend{display:flex;gap:18px;margin-bottom:18px;font-size:13px;}
#dcpg-root .dcpg-legend span{display:inline-flex;align-items:center;gap:6px;}
#dcpg-root .dcpg-swatch{width:12px;height:12px;border-radius:3px;display:inline-block;}
#dcpg-root .dcpg-cmp-row{margin-bottom:16px;}
#dcpg-root .dcpg-cmp-label{font-weight:600;font-size:14px;color:var(--dcpg-teal-900);margin-bottom:6px;}
#dcpg-root .dcpg-cmp-bars{display:flex;flex-direction:column;gap:4px;}
#dcpg-root .dcpg-cmp-bar-row{display:flex;align-items:center;gap:8px;}
#dcpg-root .dcpg-cmp-bar-track{flex:1;background:var(--dcpg-cream-200);border-radius:999px;height:12px;overflow:hidden;}
#dcpg-root .dcpg-cmp-bar-fill{height:100%;border-radius:999px;}
#dcpg-root .dcpg-cmp-bar-val{font-size:12px;color:var(--dcpg-ink-600);width:20px;text-align:right;}

@media (max-width:480px){
  #dcpg-root .dcpg-card{padding:18px;}
  #dcpg-root .dcpg-grid{grid-template-columns:repeat(2,1fr);}
}