/* EditWise Pro Light – Glass refresh (no extra UI) */
:root{
  --bg1:#f7f8fb;
  --bg2:#ffffff;
  --grad-a: 250deg;
  --grad: radial-gradient(1200px 800px at 10% 10%, #f0f4ff 0%, transparent 40%),
          radial-gradient(1000px 700px at 90% 0%, #fff1f7 0%, transparent 45%),
          linear-gradient(var(--grad-a), #f9fbff 0%, #f6f7fb 35%, #f5f5ff 100%);
  --panel: rgba(255,255,255,0.55);
  --panel-strong: rgba(255,255,255,0.7);
  --line: rgba(20, 28, 48, 0.12);
  --text:#0b0c0f;
  --muted:#6b7280;
  --accent:#6d28d9;
  --accent-2:#8b5cf6;
  --ring: rgba(139,92,246,.18);
}

html,body{
  background: var(--grad);
  color: var(--text);
  min-height: 100%;
  background-attachment: fixed;
}

/* Glass cards ------------------------------------------------------------- */
.card, .panel, .box, .group, .section{
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 10px 30px rgba(15, 23, 42, 0.06),
    0 30px 80px rgba(109, 40, 217, 0.07);
}

/* Optional stronger glass for emphasized blocks */
.glass-strong{
  background: var(--panel-strong) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 12px 36px rgba(15, 23, 42, 0.08),
    0 40px 90px rgba(139, 92, 246, 0.09);
}

/* Inputs & selects -------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="color"], select, textarea {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--accent-2);
  box-shadow: 0 0 0 6px var(--ring);
}
.range{ accent-color: var(--accent); }

/* Buttons ----------------------------------------------------------------- */
button, .btn, [role="button"]{
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.8) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 18px rgba(10,20,36,.08);
  transition: transform .06s ease, filter .18s ease;
  backdrop-filter: blur(8px) saturate(160%);
}
button:hover, .btn:hover{ filter: brightness(1.03); }
button:active, .btn:active{ transform: translateY(1px); }
.btn.primary{
  background: linear-gradient(180deg, var(--accent-2), var(--accent)) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(139,92,246,.24), 0 1px 0 rgba(255,255,255,.7) inset;
}

/* Canvas polish ----------------------------------------------------------- */
#c, canvas, .viewer, .stageWrap{
  border-radius: 16px !important;
  border: 1px dashed rgba(20, 28, 48, 0.14) !important;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
}

/* Focus ring -------------------------------------------------------------- */
:where(button,a,[role="button"],input,select,textarea):focus-visible{
  outline: none; box-shadow: 0 0 0 6px var(--ring);
  border-color: var(--accent-2);
}

/* Reduce motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}