/* Pastegram editor theme v53: real dark/light modes + cleaner presets */
:root{
  --pg53-radius-xl:28px;
  --pg53-radius-lg:20px;
  --pg53-radius-md:16px;
  --pg53-radius-sm:12px;
}
html[data-theme=dark]{
  --bg:#090d16;
  --surface:#101827;
  --stage:#0f1626;
  --ink:#f3f7ff;
  --muted:#97a7c5;
  --line:#25334f;
  --brand:#2f80ff;
  --tint:rgba(47,128,255,.14);
  --shadow:0 18px 50px rgba(0,0,0,.28);
  color-scheme:dark;
}
html[data-theme=light]{
  --bg:#eef3fb;
  --surface:#ffffff;
  --stage:#edf2fa;
  --ink:#16233f;
  --muted:#7283a5;
  --line:#dbe4f2;
  --brand:#4d5cff;
  --tint:#eef0ff;
  --shadow:0 14px 36px rgba(52,72,115,.12);
  color-scheme:light;
}
html,body{background:var(--bg)!important;color:var(--ink)!important}
body{font-family:Outfit,system-ui,sans-serif!important}
button,summary,input,select,textarea{font-family:inherit}
button,summary{border-radius:14px!important}
button.primary{background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 70%, #9c5cff))!important;border-color:transparent!important;color:#fff!important}
header{
  height:70px!important;min-height:70px!important;padding:0 18px!important;gap:14px!important;
  border-bottom:1px solid var(--line)!important;backdrop-filter:blur(16px);
}
html[data-theme=dark] header{background:rgba(8,12,21,.88)!important;box-shadow:0 10px 25px rgba(0,0,0,.18)}
html[data-theme=light] header{background:rgba(255,255,255,.88)!important;box-shadow:0 10px 25px rgba(48,67,105,.08)}
.brand{color:var(--ink)!important;font-size:19px!important;font-weight:700!important;gap:12px!important}
.brand img{width:36px!important;height:36px!important;border-radius:10px}
.brand small{font-size:9px!important;letter-spacing:.18em!important;color:var(--muted)!important}
.pill{border:1px solid var(--line)!important;background:color-mix(in srgb,var(--surface) 88%, var(--brand) 12%)!important;color:var(--ink)!important;border-radius:999px!important;padding:8px 12px!important}
#undo,#redo,#theme{min-width:42px!important}
#projects-open,#save-current-header,#export-open,.editor-faq,summary{padding-inline:14px!important}
.file-actions{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow)!important}
.file-actions button{border-radius:10px!important}
main{height:calc(100dvh - 70px)!important;grid-template-columns:86px 285px minmax(0,1fr) 330px!important;gap:14px!important;padding:14px!important}
#tools,#quick-sidebar,#sidebar,#workspace,#top-tools,.zoom-bar,.file-actions,dialog,.layer-list button,.catalog button{box-shadow:var(--shadow)}
#tools{
  border:1px solid var(--line)!important;border-radius:24px!important;padding:12px 7px!important;gap:6px!important;
}
html[data-theme=dark] #tools{background:linear-gradient(180deg,#08111f,#0e1b33)!important}
html[data-theme=light] #tools{background:linear-gradient(180deg,#16233d,#1b2d4a)!important;border-color:#203152!important}
#tools button{color:#d3ddf4!important;min-height:66px!important;border-radius:18px!important;padding:9px 5px!important;background:transparent!important;border:0!important;font-size:11px!important;font-weight:500}
#tools button.active{color:#fff!important;background:linear-gradient(180deg,#1d4fd9,#256cff)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 24px rgba(37,108,255,.26)!important}
#tools button:hover{background:rgba(255,255,255,.06)!important}
#quick-sidebar,#sidebar{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:28px!important;padding:18px!important;overflow:auto!important}
.side-title h1,.side-title h2,.section-heading h2,#panel h2,#panel h3,#live-adjust h2,#live-adjust h3,#sidebar h2,#sidebar h3{color:var(--ink)!important}
#panel p,.note,label,output,#project-list,.project-drawer-footer p{color:var(--muted)!important}
label{font-size:12px!important;margin:14px 0!important}
input:not([type=range]):not([type=checkbox]),select,textarea{background:color-mix(in srgb,var(--surface) 76%, var(--bg) 24%)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:14px!important}
input[type=color]{background:color-mix(in srgb,var(--surface) 76%, var(--bg) 24%)!important;border-radius:12px!important}
input[type=range]{accent-color:var(--brand)}
#top-tools{display:flex!important;align-items:center;gap:10px!important;padding:0 6px 12px 6px!important;background:transparent!important}
#top-tools button,#reset-canvas{min-height:48px!important;padding:10px 14px!important;border-radius:16px!important;font-size:13px!important;font-weight:600!important;background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
#workspace{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:30px!important;overflow:hidden!important;position:relative!important}
.workspace-heading{height:48px!important;padding:12px 18px!important;background:color-mix(in srgb,var(--surface) 88%, var(--bg) 12%);border-bottom:1px solid var(--line);color:var(--muted)!important;font-size:12px!important}
#doc-name{font-size:15px!important;color:var(--ink)!important;font-weight:700!important}
#doc-size{font-size:12px!important;color:var(--muted)!important}
#stage{padding:18px!important;background:
  linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
  repeating-linear-gradient(0deg, color-mix(in srgb,var(--line) 65%, transparent) 0 1px, transparent 1px 40px),
  repeating-linear-gradient(90deg, color-mix(in srgb,var(--line) 65%, transparent) 0 1px, transparent 1px 40px),
  var(--stage)!important}
.canvas-container{border-radius:20px!important;overflow:hidden;box-shadow:0 20px 45px rgba(0,0,0,.18)!important;background:repeating-conic-gradient(#f1f5fb 0% 25%,#e4ebf5 0% 50%) 50%/20px 20px!important}
html[data-theme=dark] .canvas-container{background:repeating-conic-gradient(#1a2335 0% 25%,#0f1829 0% 50%) 50%/20px 20px!important}
.zoom-bar{position:absolute!important;left:50%;bottom:18px;transform:translateX(-50%);height:50px!important;padding:7px 10px!important;border-radius:999px!important;background:color-mix(in srgb,var(--surface) 88%, var(--bg) 12%)!important;border:1px solid var(--line)!important;color:var(--ink)!important;z-index:8}
.zoom-bar button{min-height:34px!important;min-width:38px!important;color:var(--ink)!important;background:transparent!important;border:1px solid transparent!important}
.zoom-bar span{color:var(--ink)!important;font-weight:600}
#floating-tools{position:absolute!important;left:50%;top:72px;transform:translateX(-50%);display:flex;gap:10px;padding:10px 12px!important;border-radius:18px!important;background:color-mix(in srgb,var(--surface) 90%, var(--bg) 10%)!important;border:1px solid var(--line)!important;z-index:10}
#floating-tools button{min-height:42px!important;padding:8px 12px!important;border-radius:14px!important;background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
#image-summary,.properties-tabs,.quick-presets,.layers-section,#live-adjust section{background:color-mix(in srgb,var(--surface) 92%, var(--bg) 8%)!important;border:1px solid var(--line)!important;border-radius:20px!important}
#image-summary{padding:12px!important;margin-bottom:12px!important}
#selected-preview{border-radius:14px!important;background:var(--stage)!important}
#selected-title{color:var(--ink)!important}
#selected-size{color:var(--muted)!important}
.properties-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px!important;margin-bottom:12px!important}
.properties-tabs button{min-height:40px!important;border-radius:14px!important;background:transparent!important;border:0!important;color:var(--muted)!important}
.properties-tabs button.active,.properties-tabs button.chosen,.properties-tabs button[aria-selected=true],.properties-tabs button[aria-current=true]{background:color-mix(in srgb,var(--brand) 14%, var(--surface) 86%)!important;border:1px solid color-mix(in srgb,var(--brand) 35%, var(--line))!important;color:var(--brand)!important}
#live-adjust{display:flex;flex-direction:column;gap:12px}
#live-adjust section,#sidebar section{padding:14px!important}
.look-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important}
.look-grid button,.filter-grid button{padding:0!important;border-radius:16px!important;overflow:hidden!important;background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.look-grid img,.filter-grid img{display:block;width:100%!important;object-fit:cover!important;background:var(--stage)!important}
.look-grid img{height:72px!important}.filter-grid img{height:84px!important}
.look-grid span,.filter-grid span{display:block;padding:8px 8px 10px!important;font-size:10px!important;color:var(--ink)!important}
.quick-grid,.button-grid,.fields{gap:10px!important}
.quick-grid button,.button-grid button,.catalog button,.layer-list button{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:16px!important}
.layer-list button.selected{background:color-mix(in srgb,var(--brand) 14%, var(--surface) 86%)!important;border-color:var(--brand)!important}
.catalog button{background:color-mix(in srgb,var(--surface) 86%, var(--bg) 14%)!important;min-height:92px!important}
.catalog img{border-radius:12px!important;background:var(--stage)!important}
#object-toolbar{background:color-mix(in srgb,var(--surface) 92%, var(--bg) 8%)!important;border:1px solid var(--line)!important;box-shadow:0 20px 35px rgba(0,0,0,.18)!important;border-radius:18px!important}
#object-toolbar button{background:transparent!important;border:0!important;color:var(--ink)!important;border-radius:12px!important}
#object-toolbar .danger{color:#ff5b79!important}
dialog{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:24px!important;padding:22px!important}
dialog::backdrop{background:rgba(7,10,18,.55)!important;backdrop-filter:blur(8px)}
#welcome{background:var(--surface)!important}.welcome-symbol{background:color-mix(in srgb,var(--brand) 12%, var(--surface) 88%)!important;color:var(--brand)!important}
#toast{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
@media (min-width:901px){#panel{display:flex;flex-direction:column;gap:14px}#panel>.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#panel>.quick-grid button{min-height:92px!important;flex-direction:column;padding:14px 8px!important;font-size:12px!important}}
@media (max-width:900px){
  body>main,body.panel-open>main,body.properties-open>main{padding:8px 8px 92px!important;background:var(--bg)!important}
  #workspace{border-radius:24px!important}
  #workspace .workspace-heading{height:38px!important;min-height:38px!important;padding:7px 10px!important}
  #workspace .zoom-bar{bottom:84px!important;height:42px!important;padding:5px 8px!important}
  #mobile-create-dock,body.panel-open #mobile-create-dock,body.properties-open #mobile-create-dock{background:color-mix(in srgb,var(--surface) 92%, var(--bg) 8%)!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:var(--shadow)!important}
  #mobile-create-dock button{color:var(--ink)!important;border-radius:16px!important}
  #mobile-create-dock [data-mobile-action=upload]{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 92%, white 8%),var(--brand))!important;color:#fff!important}
  #mobile-create-dock [data-mobile-action=adjust],#mobile-create-dock [data-mobile-action=more]{background:color-mix(in srgb,var(--surface) 84%, var(--bg) 16%)!important}
  #quick-sidebar,#sidebar,body.panel-open #quick-sidebar,body.properties-open #sidebar{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:26px!important;box-shadow:var(--shadow)!important}
  #quick-sidebar .side-title,#sidebar>.side-title{background:var(--surface)!important}
  #mobile-tool-picker{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:26px!important;color:var(--ink)!important}
  .mobile-picker-heading{background:color-mix(in srgb,var(--surface) 88%, var(--bg) 12%)!important;border-bottom:1px solid var(--line)!important}
  .mobile-picker-grid button{background:color-mix(in srgb,var(--surface) 84%, var(--bg) 16%)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:18px!important}
  .properties-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .look-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}