/* DAAILOK / Preview Canvas creator
   One source of truth for dark/light liquid glass; independent from canvas zoom. */
#canvasGeneratorDialog[hidden]{display:none!important}
#canvasGeneratorDialog{
 position:fixed;inset:0;z-index:2000;
 display:flex;align-items:center;justify-content:center;
 padding:16px;background:rgba(8,11,14,.22);
 -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
 font-family:"Microsoft YaHei UI","Segoe UI Variable Text","Segoe UI","PingFang SC",system-ui,sans-serif;
 font-size:12px;color:var(--text);
}
#canvasGeneratorDialog *{box-sizing:border-box}
#canvasGeneratorDialog .canvas-generator-panel{
 position:relative;isolation:isolate;
 width:720px;max-width:calc(100vw - 32px);
 height:440px;max-height:calc(100dvh - 32px);
 min-height:0;overflow:visible;transform:none!important;
 display:flex;flex-direction:column;gap:9px;
 padding:17px 20px 16px;
 border:1px solid var(--edge);border-radius:17px;color:var(--text);
 background:linear-gradient(140deg,rgba(100,109,108,.36),rgba(28,32,36,.84) 27%,rgba(21,24,28,.90) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
  inset 1px 0 0 rgba(255,255,255,.035),
  0 20px 50px rgba(0,0,0,.28);
 -webkit-backdrop-filter:blur(24px) saturate(145%);
 backdrop-filter:blur(24px) saturate(145%);
}
#canvasGeneratorDialog .canvas-generator-panel>header{
 display:flex;align-items:center;justify-content:space-between;
 flex:0 0 27px;min-height:27px;
}
#canvasGeneratorDialog .canvas-generator-panel>header strong{
 color:var(--text);font-size:15px;font-weight:600;letter-spacing:.015em;
}
#canvasGeneratorDialog .canvas-generator-panel>header button{
 width:27px;height:27px;display:grid;place-items:center;
 border:1px solid transparent;border-radius:8px;
 background:transparent;color:var(--muted);
 font-family:inherit;font-size:21px;font-weight:400;line-height:1;cursor:pointer;
}
#canvasGeneratorDialog .canvas-generator-panel>header button:hover{
 border-color:color-mix(in srgb,var(--accent) 34%,transparent);
 background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);
}
#canvasGeneratorDialog .canvas-generator-reference-strip{
 flex:0 0 58px;display:flex;align-items:center;
 gap:8px;width:100%;min-width:0;flex-wrap:nowrap;
}
#canvasGeneratorDialog .canvas-generator-refs{
 display:flex;align-items:center;gap:8px;
 flex:0 1 auto;min-width:0;max-width:calc(100% - 147px);
}
#canvasGeneratorDialog .canvas-generator-ref{
 position:relative;flex:0 0 55px;width:55px;height:55px;
 overflow:hidden;border:1px solid var(--edge);border-radius:10px;
 background:rgba(10,14,16,.14);
}
#canvasGeneratorDialog .canvas-generator-ref img{
 display:block;width:100%;height:100%;object-fit:cover;
}
#canvasGeneratorDialog .canvas-generator-ref button{
 position:absolute;top:3px;right:3px;
 width:18px;height:18px;display:grid;place-items:center;
 border:0;border-radius:50%;background:rgba(15,18,20,.82);
 color:#fff;cursor:pointer;
}
#canvasGeneratorDialog .canvas-generator-add-reference{
 flex:0 0 55px;width:55px;height:55px;
 border:1px solid var(--edge);border-radius:10px;
 display:grid;place-items:center;cursor:pointer;
 background:rgba(12,16,18,.18);color:var(--muted);
 font-size:25px;font-weight:300;
 transition:border-color .14s,background .14s,color .14s;
}
#canvasGeneratorDialog .canvas-generator-add-reference:hover,
#canvasGeneratorDialog .canvas-generator-add-reference:focus-visible{
 outline:none;color:var(--accent);
 border-color:color-mix(in srgb,var(--accent) 48%,var(--edge));
 background:color-mix(in srgb,var(--accent) 11%,transparent);
}
#canvasGeneratorDialog .canvas-generator-add-reference:disabled{opacity:.45;cursor:default}
#canvasGeneratorDialog .canvas-generator-ref-count{
 color:var(--muted);font-size:11px;white-space:nowrap;padding-left:2px;
}
#canvasGeneratorDialog #canvasGeneratorPrompt{
 flex:1 1 auto;min-height:92px;max-height:none;
 width:100%;padding:9px 0;resize:none;outline:none;border:0;
 background:transparent;color:var(--text);
 font:400 13px/1.7 "Microsoft YaHei UI","Segoe UI Variable Text","PingFang SC",system-ui,sans-serif;
}
#canvasGeneratorDialog #canvasGeneratorPrompt::placeholder{color:var(--muted);opacity:.73}
#canvasGeneratorDialog .canvas-generator-panel footer{
 flex:0 0 auto;display:flex;flex-direction:column;gap:12px;
 padding-top:12px;border-top:1px solid var(--hair);
 overflow:visible;
}
#canvasGeneratorDialog .canvas-generator-params{
 position:relative;z-index:20;display:flex;align-items:flex-end;
 gap:10px;flex-wrap:nowrap;
}
#canvasGeneratorDialog .canvas-generator-params label{
 display:flex;flex-direction:column;align-items:stretch;
 min-width:0;flex:0 0 auto;gap:5px;color:var(--muted);
 font:500 11px/1.45 "Microsoft YaHei UI","Segoe UI Variable Text","PingFang SC",system-ui,sans-serif;
 letter-spacing:.012em;
}
#canvasGeneratorDialog .canvas-generator-params label:nth-child(1){width:264px}
#canvasGeneratorDialog .canvas-generator-params label:nth-child(2){width:138px}
#canvasGeneratorDialog .canvas-generator-params label:nth-child(3){width:185px}
#canvasGeneratorDialog .canvas-generator-native-select{
 position:absolute!important;opacity:0!important;pointer-events:none!important;
 width:1px!important;height:1px!important;border:0!important;padding:0!important;
 clip-path:inset(50%);overflow:hidden!important;
}
#canvasGeneratorDialog .canvas-generator-combobox{
 position:relative;width:100%;min-width:0;
}
#canvasGeneratorDialog .canvas-generator-select-trigger{
 display:flex;align-items:center;justify-content:space-between;gap:8px;
 width:100%;height:35px;padding:0 12px;
 border:1px solid var(--edge);border-radius:10px;
 background:color-mix(in srgb,var(--glass) 86%,transparent);
 color:var(--text);cursor:pointer;white-space:nowrap;text-align:left;
 font:500 12px/1.4 "Microsoft YaHei UI","Segoe UI Variable Text","PingFang SC",system-ui,sans-serif;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.075);
}
#canvasGeneratorDialog .canvas-generator-selected-label{
 flex:1 1 auto;min-width:0;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis;
}
#canvasGeneratorDialog .canvas-generator-chevron{
 flex:0 0 7px;width:7px;height:7px;margin-right:1px;
 border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:rotate(45deg) translateY(-2px);opacity:.74;
}
#canvasGeneratorDialog .canvas-generator-select-trigger[aria-expanded="true"] .canvas-generator-chevron{
 transform:rotate(225deg) translateY(-1px);
}
#canvasGeneratorDialog .canvas-generator-select-trigger:hover,
#canvasGeneratorDialog .canvas-generator-select-trigger:focus-visible,
#canvasGeneratorDialog .canvas-generator-select-trigger[aria-expanded="true"]{
 outline:none;border-color:color-mix(in srgb,var(--accent) 52%,var(--edge));
 background:color-mix(in srgb,var(--accent) 10%,var(--glass));
}
#canvasGeneratorDialog .canvas-generator-select-trigger:disabled{opacity:.45;cursor:default}
#canvasGeneratorDialog .canvas-generator-choice-menu[hidden]{display:none!important}
#canvasGeneratorDialog .canvas-generator-choice-menu{
 position:absolute;bottom:calc(100% + 7px);left:0;right:0;z-index:300;
 max-height:190px;overflow-y:auto;padding:5px;
 border:1px solid var(--edge);border-radius:11px;
 background:color-mix(in srgb,var(--surface) 95%,#171b1d);
 box-shadow:0 14px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07);
 -webkit-backdrop-filter:blur(22px) saturate(145%);
 backdrop-filter:blur(22px) saturate(145%);
}
#canvasGeneratorDialog .canvas-generator-params label:first-child .canvas-generator-choice-menu{
 min-width:264px;
}
#canvasGeneratorDialog .canvas-generator-choice{
 display:flex;align-items:center;width:100%;min-height:34px;height:auto;
 padding:7px 11px;border:1px solid transparent;border-radius:8px;
 background:transparent;color:var(--text);
 font:500 12px/1.4 "Microsoft YaHei UI","Segoe UI Variable Text","PingFang SC",system-ui,sans-serif;
 text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer;
}
#canvasGeneratorDialog .canvas-generator-choice:hover,
#canvasGeneratorDialog .canvas-generator-choice:focus-visible{
 outline:none;border-color:color-mix(in srgb,var(--accent) 25%,transparent);
 background:color-mix(in srgb,var(--accent) 14%,transparent);
}
#canvasGeneratorDialog .canvas-generator-choice[aria-selected="true"]{
 color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
}
#canvasGeneratorDialog .canvas-generator-actions{
 display:flex;align-items:center;justify-content:flex-end;
 gap:9px;width:100%;margin:0;flex-wrap:nowrap;
}
#canvasGeneratorDialog .canvas-generator-actions p{
 flex:1 1 auto;min-width:0;max-width:none;margin:0;
 color:var(--muted);font-size:10px;line-height:1.45;
}
#canvasGeneratorDialog .canvas-generator-actions button{
 flex:0 0 auto;min-height:33px;padding:7px 14px;
 border:1px solid var(--edge);border-radius:999px;
 background:color-mix(in srgb,var(--glass) 83%,transparent);
 color:var(--text);cursor:pointer;
 font:500 12px/1.4 "Microsoft YaHei UI","Segoe UI",system-ui,sans-serif;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#canvasGeneratorDialog #canvasGeneratorSubmit{font-weight:600}
#canvasGeneratorDialog .canvas-generator-actions button:hover,
#canvasGeneratorDialog .canvas-generator-actions button:focus-visible,
#canvasGeneratorSubmit:not(:disabled):hover{
 outline:none;border-color:color-mix(in srgb,var(--accent) 54%,var(--edge));
 background:color-mix(in srgb,var(--accent) 11%,var(--glass));
}
#canvasGeneratorDialog .canvas-generator-actions button:disabled{opacity:.45;cursor:default}

/* Bright theme uses the same translucent, single-layer liquid glass. */
body[data-theme="light"] #canvasGeneratorDialog{background:rgba(35,43,39,.08)}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-panel{
 border-color:rgba(255,255,255,.76);
 background:linear-gradient(140deg,
  rgba(255,255,255,.92) 0%,rgba(237,243,240,.83) 45%,rgba(205,220,213,.73) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.93),
  inset 1px 0 0 rgba(255,255,255,.50),0 16px 44px rgba(43,61,55,.18);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-ref{
 border-color:rgba(75,96,87,.19);background:rgba(255,255,255,.4);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-add-reference{
 background:rgba(255,255,255,.35);border-color:rgba(75,96,87,.2);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-panel footer{
 border-top-color:rgba(64,82,73,.15);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-select-trigger,
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-actions button{
 border-color:rgba(66,87,78,.24);
 background:linear-gradient(140deg,rgba(255,255,255,.58),rgba(220,232,226,.29));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.84);color:var(--text);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-choice-menu{
 border-color:rgba(75,92,82,.20);
 background:linear-gradient(140deg,rgba(251,253,252,.98),rgba(226,235,230,.97));
 box-shadow:0 14px 32px rgba(46,62,54,.19),inset 0 1px 0 rgba(255,255,255,.93);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-choice{
 color:var(--text);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-choice[aria-selected="true"]{
 color:var(--accent-strong);
}
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-select-trigger:hover,
body[data-theme="light"] #canvasGeneratorDialog .canvas-generator-actions button:hover{
 background:color-mix(in srgb,var(--accent) 12%,rgba(255,255,255,.70));
}
@media(max-width:760px){
 #canvasGeneratorDialog{padding:10px}
 #canvasGeneratorDialog .canvas-generator-panel{
  width:calc(100vw - 20px);max-width:calc(100vw - 20px);
  height:min(440px,calc(100dvh - 20px));padding:13px;overflow-y:auto;
 }
 #canvasGeneratorDialog .canvas-generator-reference-strip{flex:0 0 52px;gap:6px}
 #canvasGeneratorDialog .canvas-generator-refs{gap:5px}
 #canvasGeneratorDialog .canvas-generator-ref,
 #canvasGeneratorDialog .canvas-generator-add-reference{
  width:48px;height:48px;flex-basis:48px;
 }
 #canvasGeneratorDialog .canvas-generator-params{gap:8px;flex-wrap:wrap}
 #canvasGeneratorDialog .canvas-generator-params label:nth-child(1){width:100%}
 #canvasGeneratorDialog .canvas-generator-params label:nth-child(2){width:calc(43% - 4px)}
 #canvasGeneratorDialog .canvas-generator-params label:nth-child(3){width:calc(57% - 4px)}
 #canvasGeneratorDialog .canvas-generator-reference-strip .canvas-generator-ref-count{font-size:10px}
}
@media(max-height:520px){
 #canvasGeneratorDialog .canvas-generator-panel{overflow-y:auto}
}