/* R14 · the document owns the screen; controls live in a compact side rail. */
.template-dialog{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 24px);max-height:none;padding:0;background:#142330;color:#edf4f7;border:1px solid #526579;border-radius:12px;box-shadow:0 24px 80px #0008;overflow:hidden;box-sizing:border-box}
.template-dialog[open]{display:flex;flex-direction:column}
.template-dialog::backdrop{background:#030a14d9;backdrop-filter:blur(5px)}
.template-dialog #templateBody{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;overflow:hidden}
.template-workspace{display:grid;grid-template-columns:minmax(0,1fr) 258px;flex:1;min-height:0;min-width:0;overflow:hidden}
.template-preview-wrap{display:flex;min-width:0;min-height:0;background:#1a2934}
.template-preview-wrap iframe{display:block;width:100%;height:100%;min-height:0;flex:1;border:0;background:#1a2934;box-sizing:border-box}
.template-control-rail{display:flex;flex-direction:column;min-width:0;min-height:0;border-inline-start:1px solid #8198a42b;background:linear-gradient(150deg,#1b2d3a,#11212d);overflow:hidden}
.template-rail-head{padding:19px 16px 16px;flex:none}
.template-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.template-dialog>.template-dialog-head{padding:22px}
.template-dialog h2{font-size:20px;line-height:1.45;font-weight:450;margin:6px 0 0;letter-spacing:.01em}
.template-dialog .template-dialog-head .eyebrow{font-size:8px;line-height:1.5;letter-spacing:.13em;color:#a3b9c6}
.template-dialog .template-dialog-head .icon-button{width:30px;height:32px;flex:none;padding:0;color:#c5d5dd}
.template-dialog button,.template-dialog select,.template-dialog summary{font:inherit;font-size:13px}
.template-dialog button{cursor:pointer}
.template-dialog button:disabled{opacity:.42;cursor:not-allowed}
.template-dialog [hidden]{display:none!important}
.template-rail-scroll{flex:1;min-height:0;padding:0 16px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7890a266 transparent}
.template-dialog #templateStatus{font-size:12px;color:#c1d1dc;line-height:1.6;margin:0 0 12px}
.template-dialog>#templateStatus{margin:0 22px 14px}
.template-dialog #templateStatus:empty{display:none}
.template-dialog #templatePreviewLabel{font-size:11px;line-height:1.65;color:#a9bdc8;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid #9cb4bd26}
.template-dialog #templatePreviewLabel:before{content:'◉';font-size:9px;margin-inline-end:6px;color:#c7e0d6}
.template-options{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;min-width:0}
.template-field{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#b9ccdc;font-size:12px;line-height:1.5;min-height:40px;min-width:0}
.template-options select{height:40px;min-width:105px;max-width:145px;background:#0d1e2b;color:#eff6fa;border:1px solid #516275;border-radius:6px;padding:0 9px;box-sizing:border-box;box-shadow:inset 0 1px 4px #0002}
.template-view-controls{position:relative}
.template-view-controls .template-field{align-items:flex-start;line-height:40px}
.template-view-controls select{min-width:125px}
.template-view-controls output{display:block;text-align:end;margin-top:3px;font:10px/1.4 ui-monospace,monospace;color:#8fa7b6}
.template-dialog #templateToggleLayouts,.template-options>[data-template-view],.template-reference-menu>summary{width:100%;min-height:40px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;border:1px solid #526a7f;border-radius:6px;background:linear-gradient(180deg,#28404f,#1b2d3b);color:#eff6fa;box-sizing:border-box;box-shadow:inset 0 1px #d8e9e51a,0 1px 2px #0003}
.template-dialog #templateToggleLayouts:after{content:'＋';font-size:16px;color:#bfd1d7}
.template-dialog #templateToggleLayouts[aria-expanded=true]:after{content:'−'}
.template-dialog #templateToggleLayouts[aria-expanded=true]{background:#10232e;box-shadow:inset 0 2px 4px #0004;border-color:#a9c6bc}
.template-reference-menu{position:relative}
.template-reference-menu>summary{cursor:pointer;list-style:none;background:transparent;color:#b8cbd5}
.template-reference-menu>summary::-webkit-details-marker{display:none}
.template-reference-menu>div{margin-top:6px;padding:5px;border:1px solid #4f6579;border-radius:7px;background:#122331}
.template-reference-menu button{border:0;background:transparent;color:#d4e2e8;width:100%;text-align:start;padding:10px 9px;border-radius:5px;line-height:1.5;font-size:12px}
.template-reference-menu button:hover{background:#294255}
.template-colors{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px;padding:10px;border:1px solid #3d5265;border-radius:7px;background:#112432;box-sizing:border-box}
.template-colors>span{width:100%;font-size:12px;color:#b7cbd8;margin-bottom:1px}
.template-dialog .template-color-swatch{width:22px;height:22px;padding:0;min-width:22px;min-height:22px;border-radius:50%;background:var(--swatch);border:2px solid #a5b4bf55;box-shadow:0 0 0 2px transparent}
.template-dialog .template-color-swatch:hover{box-shadow:0 0 0 2px #9ec5d4}
.template-dialog .template-color-swatch[aria-pressed=true]{border-color:#effffb;box-shadow:0 0 0 2px #b7e2d9}
.template-custom-color{width:22px;height:22px;display:block;position:relative;border-radius:5px;overflow:hidden;border:1px solid #9fb6c5;box-sizing:border-box}
.template-custom-color>span{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
.template-custom-color input{width:32px;height:32px;position:absolute;top:-5px;left:-5px;padding:0;border:0;cursor:pointer}
.template-dialog .template-color-reset{border:0;background:transparent;padding:3px 0 0;margin-inline-start:auto;color:#bfced8;font-size:11px;min-height:24px}
.template-list{display:flex;flex-direction:column;gap:7px;margin-top:12px;min-height:0}
.template-dialog.preview-focused .template-list{display:none}
.template-list button{display:flex;align-items:center;text-align:start;gap:11px;border:1px solid #344b60;border-radius:7px;background:#142733;color:#e4edf2;padding:9px;flex-shrink:0;cursor:pointer}
.template-list button[aria-pressed=true]{border-color:#c7ded2;background:#243d42;box-shadow:inset 3px 0 #c7ded2}
.template-list b{font-size:8px;letter-spacing:.1em;color:#8ca8ba;display:block;margin-bottom:4px}
.template-list strong{font-size:12px;line-height:1.5;font-weight:500;display:block}
.template-mini{display:flex;flex-direction:column;gap:5px;width:28px;height:39px;padding:7px 5px;background:#f4f2e9;flex-shrink:0;box-shadow:1px 2px 5px #0004}
.template-mini i{display:block;height:2px;background:#91a29b}
.template-mini i:first-child{width:50%;height:4px;background:#3b605b}
.template-mini.split{border-right:8px solid #bacac5}
.template-export-actions{display:flex;flex-direction:column;gap:8px;padding:13px 16px 15px;flex:none;border-top:1px solid #8198a42b;background:#132430}
.template-export-actions>button,.template-export-menu>summary{width:100%;border:1px solid #4e657b;background:#1d303d;color:#d6e5eb;border-radius:7px;padding:0 14px;min-height:42px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.template-export-actions>button{min-height:35px;border-color:transparent;background:transparent;font-size:12px;color:#a8bdc9}
.template-export-menu{position:relative;width:100%}
.template-export-menu>summary{color:#17333b;background:linear-gradient(175deg,#eee8d8,#c4d8cf);border-color:#dce9de;list-style:none;cursor:pointer;gap:16px;font-weight:550;box-shadow:inset 0 1px #fff9,0 2px 3px #0003}
.template-export-menu>summary::-webkit-details-marker{display:none}
.template-export-popover{position:absolute;inset-inline-end:0;bottom:calc(100% + 9px);width:100%;max-width:calc(100vw - 48px);max-height:min(65dvh,460px,calc(100dvh - 190px));overflow-y:auto;padding:7px;background:#192c3d;border:1px solid #587489;border-radius:10px;box-shadow:0 12px 35px #0008;z-index:25;box-sizing:border-box}
.template-dialog .template-export-popover>button{display:flex;flex-direction:column;gap:3px;text-align:start;width:100%;border:0;background:transparent;color:#eef7f8;border-radius:6px;padding:12px 13px}
.template-export-popover>button:hover{background:#2b4658}
.template-export-popover>button>strong{font-size:16px;font-weight:550}
.template-export-popover>button>strong>small{font-weight:400;color:#b8cad5;font-size:12px}
.template-export-popover>button>span{font-size:12px;color:#acbfcc}
.template-advanced-exports{border-top:1px solid #40596a;margin-top:4px;padding:4px 0}
.template-advanced-exports>summary{padding:10px 13px;font-size:12px;cursor:pointer;color:#aec1ce;list-style:none}
.template-advanced-exports>summary:after{content:'＋';float:inline-end}
.template-advanced-exports[open]>summary:after{content:'−'}
.template-advanced-exports>summary::-webkit-details-marker{display:none}
.template-dialog .template-advanced-exports>button{display:block;width:100%;padding:9px 13px;text-align:start;border:0;background:transparent;color:#c8d7e0;font-size:13px;border-radius:6px}
.template-advanced-exports>button:hover{background:#2b4658}
.template-draft-note{padding:9px 10px;border:1px solid #a394645c;background:#5b4b2729;color:#e0cca3;font-size:11px;border-radius:6px;margin:0 0 12px;line-height:1.65}
.template-dialog .template-example-note{font-size:11px;color:#d2c4a2;margin:0 0 14px;line-height:1.65}
.template-dialog :is(button,select,summary,input):focus-visible{outline:2px solid #d4e7d9;outline-offset:3px}
.template-mobile-toolbar{display:none}
@media(min-width:761px) and (max-width:1000px){.template-workspace{grid-template-columns:minmax(0,1fr) 230px}.template-rail-head{padding-inline:12px}.template-rail-scroll{padding-inline:12px}.template-export-actions{padding-inline:12px}.template-view-controls select{min-width:115px}.template-dialog h2{font-size:18px}.template-colors{gap:7px;padding:9px}.template-dialog .template-color-swatch,.template-custom-color{width:20px;height:20px;min-width:20px;min-height:20px}}
@media(max-width:760px){
 .template-dialog{width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0}
 .template-mobile-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 44px;padding:0 8px;background:#152733;border-bottom:1px solid #98b5bd2e;box-sizing:border-box}
 .template-mobile-toolbar>span{font-size:12px;color:#d1dfe5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .template-mobile-toolbar>button{min-height:36px;border:1px solid #6d899849;border-radius:5px;background:#213946;color:#e0e9e8;padding:0 10px;font-size:12px;white-space:nowrap;flex:none}
 .template-mobile-toolbar>[data-template-close]{font-size:23px;width:36px;min-width:36px;padding:0;background:transparent;border-color:transparent}
 .template-mobile-toolbar>button[aria-expanded=true]{background:#0e212c;border-color:#b8cec2;box-shadow:inset 0 2px 4px #0005}
 .template-workspace{position:relative;display:flex;flex-direction:column;min-height:0}
 .template-preview-wrap{flex:1;width:100%;min-height:0}
 .template-control-rail{display:none;position:absolute;inset:0 0 0 auto;width:min(340px,100%);z-index:5;box-shadow:-18px 0 40px #020b1466}
 .template-dialog.controls-open .template-control-rail{display:flex}
 .template-rail-head{padding:15px 16px 12px}
 .template-dialog h2{font-size:20px}
 .template-rail-scroll{padding:0 16px 14px}
 .template-field{font-size:13px}
 .template-options select{font-size:16px;max-width:175px;min-width:135px}
 .template-view-controls select{min-width:155px}
 .template-colors{gap:10px}
 .template-dialog .template-color-swatch,.template-custom-color{width:25px;height:25px;min-width:25px;min-height:25px}
 .template-export-actions{padding-bottom:max(12px,env(safe-area-inset-bottom));gap:7px}
 .template-export-actions>button,.template-export-menu>summary{min-height:42px}
 .template-export-popover{max-width:calc(100vw - 36px);width:100%}
}
@media(prefers-reduced-motion:reduce){.template-dialog,.template-dialog *{scroll-behavior:auto!important}}