/* Editor panel, fields, controls, and date-time picker */
.app-header{position:sticky;top:0;z-index:40;width:100%;background:#fff;border-bottom:1px solid #edf0f0;box-shadow:0 5px 18px rgba(18,24,24,.045)}
.header-inner{width:min(1460px,calc(100% - 40px));max-width:100%;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:flex-start}
.brand-logo{display:inline-flex;align-items:center;justify-content:flex-start;text-decoration:none;line-height:0}
.brand-logo img{display:block;width:auto;height:34px;max-width:100%}
#editor-title,#preview-title{scroll-margin-top:84px}

.app-shell{width:min(1460px,calc(100% - 40px));max-width:100%;margin:28px auto 30px;display:grid;grid-template-columns:minmax(470px,.93fr) minmax(430px,1.07fr);gap:clamp(22px,2.2vw,32px);align-items:stretch}
.panel{min-width:0;background:rgba(255,255,255,.98);border:1px solid rgba(14,14,14,.065);border-radius:var(--radius-xl);box-shadow:var(--shadow-panel)}
.editor-panel,.preview-panel{padding:26px}
.panel-heading,.preview-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.eyebrow{margin:0 0 5px;color:#3ba9a1;font:10px/1 var(--font-demibold);letter-spacing:.14em;text-transform:uppercase}
h1,h2{margin:0;color:#242b2b;line-height:1.2}
.panel-heading h1{font:clamp(22px,2vw,27px)/1.2 var(--font-demibold);letter-spacing:-.025em}
h2{font:18px/1.2 var(--font-demibold);letter-spacing:-.015em}

.editor-group{margin-top:24px}
.editor-group.first-group{margin-top:24px}
.editor-group+.editor-group{padding-top:22px;border-top:1px solid #edf2f5}
.group-heading{margin-bottom:14px;display:grid;gap:3px}
.group-heading>span{color:#79471a;font-size:12.5px;font-family:var(--font-demibold)}
.group-heading>small{max-width:62ch;color:var(--muted);font-size:10.6px;line-height:1.45}
.action-heading{grid-template-columns:1fr auto;align-items:center;gap:14px}
.text-action{padding:0;border:0;background:transparent;color:#e87800;font:10.5px/1.2 var(--font-demibold);white-space:nowrap}
.text-action:hover{color:#c96a00;text-decoration:underline;text-underline-offset:3px}
.text-action:focus-visible{border-radius:5px;box-shadow:0 0 0 3px var(--focus)}

.group-heading.action-heading>div{display:grid;gap:3px}

.form-grid,.display-settings-grid,.stamp-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.form-grid{gap:14px 16px}.display-settings-grid,.stamp-settings-grid{gap:12px}.display-settings-grid{align-items:stretch}
.field{min-width:0;display:grid;gap:7px;align-content:start}
.field-span-2{grid-column:1/-1}
.compact-group-heading{margin-bottom:12px}.compact-field{width:100%;align-content:start}
.field>span{color:#6b625c;font-size:11.6px;font-family:var(--font-demibold)}
input:not([type="range"]):not([type="checkbox"]),select{width:100%;min-width:0;height:44px;padding:0 12px;color:#24302f;background-color:var(--surface);border:1px solid #e1e8e7;border-radius:10px;box-shadow:0 1px 0 rgba(15,54,80,.02);font-size:12.6px;transition:border-color 140ms ease,box-shadow 140ms ease,background-color 140ms ease}
input:not([type="range"]):not([type="checkbox"]):hover,select:hover{border-color:#cfd8d6}
input:not([type="range"]):not([type="checkbox"]):focus,select:focus{border-color:#ff9c32;box-shadow:0 0 0 3px rgba(255,133,0,.12)}
select{padding-right:38px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5' stroke='%23726054' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:18px}


.field-date-time{position:relative}.field-date-time.is-open{z-index:35}
.date-time-trigger{width:100%;min-width:0;height:44px;padding:0 12px;display:grid;grid-template-columns:19px minmax(0,1fr) 18px;align-items:center;gap:10px;color:#24302f;background:#fff;border:1px solid #e1e8e7;border-radius:10px;box-shadow:0 1px 0 rgba(15,54,80,.02);text-align:left;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}
.date-time-trigger:hover{border-color:#cfd8d6}.date-time-trigger:focus-visible,.field-date-time.is-open .date-time-trigger{border-color:#ff9c32;box-shadow:0 0 0 3px rgba(255,133,0,.12)}
.date-time-icon{width:18px;height:18px;display:block;background:url("../icons/calendar.svg") center/contain no-repeat;opacity:.98}
.date-time-trigger-copy{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;overflow:hidden}.date-time-trigger-copy strong,.date-time-trigger-copy small{min-width:0;margin:0;color:#453d38;font:12.2px/1 var(--font-medium);font-variant-numeric:tabular-nums;white-space:nowrap}.date-time-trigger-copy strong{overflow:hidden;text-overflow:ellipsis}.date-time-trigger-copy small{padding-left:10px;color:#776b63;border-left:1px solid #e2e6e5}
.date-time-chevron{width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5' stroke='%23726054' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;transition:transform .15s ease}.field-date-time.is-open .date-time-chevron{transform:rotate(180deg)}
.date-time-popover{position:absolute;z-index:50;top:calc(100% + 9px);left:0;width:min(340px,calc(100vw - 36px));max-height:min(540px,calc(100vh - 120px));padding:15px;overflow:auto;overscroll-behavior:contain;color:#292421;background:rgba(255,255,255,.995);border:1px solid #dde5e4;border-radius:16px;box-shadow:0 22px 54px rgba(34,31,28,.17),0 4px 12px rgba(34,31,28,.05)}.date-time-popover[hidden]{display:none}
.date-time-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.date-time-popover-head>div:first-child{display:grid;gap:3px}.date-time-popover-head small{color:#8b817a;font-size:9.8px;font-family:var(--font-medium)}.date-time-popover-head strong{color:#403832;font:13.2px/1.2 var(--font-demibold)}.date-time-month-actions{display:inline-flex;gap:6px}
.date-time-nav{width:30px;height:30px;display:grid;place-items:center;padding:0 0 2px;color:#6c5d53;background:#faf8f6;border:1px solid #e5dfda;border-radius:9px;font-size:19px;line-height:1;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.date-time-nav:hover{color:#c96d00;background:#fff7ee;border-color:#ffd5aa}
.date-time-nav:focus-visible,.date-time-day:focus-visible,.date-time-now:focus-visible,.date-time-cancel:focus-visible,.date-time-apply:focus-visible{box-shadow:0 0 0 3px rgba(255,133,0,.12)}
.date-time-weekdays,.date-time-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.date-time-weekdays{margin-top:14px;color:#9b918b;font-size:9px;text-align:center}.date-time-weekdays span{padding-block:4px}.date-time-calendar{gap:3px}.date-time-day{height:32px;padding:0;color:#4f4640;background:transparent;border:1px solid transparent;border-radius:9px;font:10.8px/1 var(--font-medium);font-variant-numeric:tabular-nums;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.date-time-day:hover{color:#c96d00;background:#fff7ee;border-color:#ffe1c2}.date-time-day.is-muted{color:#c0b8b3}.date-time-day.is-today{color:#b86400;border-color:#ffca91}.date-time-day.is-selected{color:#101616;background:var(--turquoise);border-color:var(--turquoise)}.date-time-day.is-selected:hover{background:#5fcfc6;border-color:#5fcfc6}
.date-time-clock-row{margin-top:13px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f7fbfa;border:1px solid #e3ebea;border-radius:12px}.date-time-clock-copy{display:grid;gap:2px}.date-time-clock-copy>span{color:#5d5149;font:10.8px/1.2 var(--font-demibold)}.date-time-clock-copy small{color:#958a83;font-size:9.4px}.date-time-clock-inputs{display:inline-flex;align-items:center;gap:5px;color:#776b63;font-family:var(--font-demibold)}.date-time-clock-inputs input{width:44px!important;height:34px!important;padding:0 5px!important;border-radius:8px!important;text-align:center;font-size:12.2px;font-family:var(--font-medium);font-variant-numeric:tabular-nums;-moz-appearance:textfield}.date-time-clock-inputs input::-webkit-outer-spin-button,.date-time-clock-inputs input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
.date-time-popover-actions{margin-top:13px;padding-top:12px;display:flex;align-items:center;gap:7px;border-top:1px solid #edf1f0}.date-time-action-spacer{flex:1 1 auto}.date-time-now,.date-time-cancel,.date-time-apply{height:33px;padding:0 11px;border-radius:9px;font:10.5px/1 var(--font-demibold);transition:background-color .12s ease,border-color .12s ease,color .12s ease}.date-time-now{color:#b86400;background:#fff7ee;border:1px solid #ffdbb6}.date-time-now:hover{background:#fff0df;border-color:#ffc98f}.date-time-cancel{color:#6f6863;background:#fff;border:1px solid #e1e5e4}.date-time-cancel:hover{background:#f8faf9;border-color:#d2d9d8}.date-time-apply{color:#101616;background:var(--turquoise);border:1px solid var(--turquoise)}.date-time-apply:hover{background:#5fcfc6;border-color:#5fcfc6}

.switch-card{min-height:68px;padding:12px 13px;display:flex;align-items:center;border:1px solid #e1e8e7;border-radius:12px;background:#f8fbfa;transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease}.switch-card:hover{border-color:#cfd9d8;background:#fbfdfc}.switch-card:has(input:checked){border-color:#b9dfdc;background:linear-gradient(180deg,#fbfefe,#f3fbfa);box-shadow:0 10px 24px rgba(48,140,132,.045)}
.switch-row{width:100%;display:inline-flex;align-items:center;gap:10px;color:#34302d;font:12px/1.2 var(--font-demibold);cursor:pointer}.switch-row input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.switch-ui{flex:0 0 auto;width:38px;height:22px;padding:3px;border-radius:999px;background:#ccd6d4;transition:background-color .15s ease,box-shadow .15s ease}.switch-ui::after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.17);transition:transform .15s cubic-bezier(.2,.8,.2,1)}.switch-row input:checked+.switch-ui{background:var(--turquoise)}.switch-row input:checked+.switch-ui::after{transform:translateX(16px)}.switch-row input:focus-visible+.switch-ui{box-shadow:0 0 0 3px var(--focus)}.switch-copy{min-width:0;display:grid;gap:2px}.switch-copy strong{color:#554a43;font-size:11.7px;line-height:1.25}.switch-copy small{color:#8b817a;font:10.2px/1.35 var(--font-regular)}
.stamp-settings-card{grid-column:1/-1;padding:14px;display:grid;gap:12px;border:1px solid #e1e8e7;border-radius:16px;background:linear-gradient(180deg,#fdfefe,#f7fbfa);transition:opacity .15s ease,filter .15s ease,border-color .15s ease}.stamp-settings-card.is-disabled{opacity:.58;filter:grayscale(.08)}.stamp-settings-head{display:grid;gap:3px}.stamp-settings-head strong{color:#554a43;font-size:11.7px;line-height:1.25}.stamp-settings-head small{color:#8b817a;font-size:10.2px;line-height:1.45}.range-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}input[type="range"]{width:100%;height:20px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--turquoise);cursor:pointer}.range-value{min-width:58px;height:34px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e1e8e7;border-radius:999px;background:#fff;color:#5f5148;font:12.2px/1 var(--font-medium);font-variant-numeric:tabular-nums}.stamp-upload-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.stamp-file-control{height:46px;min-width:0;padding:5px 8px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;border:1px solid #dbe4e2;border-radius:12px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:border-color .15s ease,box-shadow .15s ease}.stamp-file-control:focus-within{border-color:#71dbd3;box-shadow:0 0 0 3px rgba(113,219,211,.16)}.stamp-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.stamp-file-button{height:32px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#fff0df;color:#9c5706;font:10.8px/1 var(--font-demibold);white-space:nowrap;cursor:pointer;transition:background-color .15s ease,transform .12s ease}.stamp-file-button:hover{background:#ffe6c7}.stamp-file-button:active{transform:translateY(1px)}.stamp-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#554f4b;font:11.2px/1.2 var(--font-medium)}.stamp-file-name.is-empty{color:#9a938e;font-family:var(--font-regular)}.stamp-clear-button{height:46px;padding-inline:16px;white-space:nowrap}.stamp-file-status{min-height:18px;color:#8b817a;font-size:10.2px;line-height:1.45}.stamp-file-status.has-file{color:#39745b}.stamp-file-status.has-error{color:#ad4d4d}

.actions{margin-top:24px;padding-top:22px;border-top:1px solid #edf2f5;display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px}
.button{height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;font:12.2px/1 var(--font-demibold);transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,opacity .14s ease,transform .12s ease}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0)}
.actions .button:hover,.actions .button:active{transform:none}
.button:focus-visible,.icon-button:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.button.primary{color:#fff;background:var(--orange);box-shadow:0 8px 18px rgba(255,133,0,.18)}
.button.primary:hover{background:var(--orange-dark)}
.button.secondary{color:#94520c;background:#fff4e7;border-color:#ffd8b0}
.button.secondary:hover{background:#ffedd8}
.button.ghost{color:#cd7000;background:#fff;border-color:#ffd9b0}
.button.ghost:hover{background:#fff7ef;border-color:#ffc787}
.button.small{height:36px;padding-inline:14px;font-size:11.2px}
.button:disabled,.icon-button:disabled{cursor:default;opacity:.42;transform:none;box-shadow:none}
