/* OPERAVA MailDesk — styles.
 * Section 1 is the compiled Tailwind v3 output from the approved MailDesk design templates
 * (Loginpage + Mail Dashboard), merged so responsive rules follow base rules.
 * Section 2 is the hand-written component layer. Do not hand-edit section 1;
 * add any new utility to section 2. */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}
:after,:before{--tw-content:""}
:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
body{line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
:-moz-focusring{outline:auto}
:-moz-ui-invalid{box-shadow:none}
progress{vertical-align:baseline}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}
fieldset{margin:0}
fieldset,legend{padding:0}
menu,ol,ul{list-style:none;margin:0;padding:0}
dialog{padding:0}
textarea{resize:vertical}
input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
[role=button],button{cursor:pointer}
:disabled{cursor:default}
audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]:where(:not([hidden=until-found])){display:none}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:sticky}
.inset-0{inset:0}
.bottom-0{bottom:0}
.bottom-full{bottom:100%}
.left-0{left:0}
.left-3{left:.75rem}
.top-0{top:0}
.top-1\/2{top:50%}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}
.mx-4{margin-left:1rem;margin-right:1rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.ml-1{margin-left:.25rem}
.ml-2{margin-left:.5rem}
.ml-6{margin-left:1.5rem}
.ml-auto{margin-left:auto}
.mr-1{margin-right:.25rem}
.mt-0\.5{margin-top:.125rem}
.mt-1{margin-top:.25rem}
.mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-auto{margin-top:auto}
.flex{display:flex}
.table{display:table}
.grid{display:grid}
.hidden{display:none}
.h-10{height:2.5rem}
.h-14{height:3.5rem}
.h-16{height:4rem}
.h-2{height:.5rem}
.h-20{height:5rem}
.h-28{height:7rem}
.h-8{height:2rem}
.h-9{height:2.25rem}
.h-\[52px\]{height:52px}
.h-full{height:100%}
.max-h-\[92vh\]{max-height:92vh}
.min-h-0{min-height:0}
.min-h-\[220px\]{min-height:220px}
.min-h-\[64px\]{min-height:64px}
.min-h-\[80px\]{min-height:80px}
.min-h-screen{min-height:100vh}
.w-10{width:2.5rem}
.w-14{width:3.5rem}
.w-16{width:4rem}
.w-20{width:5rem}
.w-56{width:14rem}
.w-8{width:2rem}
.w-9{width:2.25rem}
.w-\[280px\]{width:280px}
.w-\[3px\]{width:3px}
.w-full{width:100%}
.min-w-0{min-width:0}
.max-w-\[320px\]{max-width:320px}
.max-w-\[720px\]{max-width:720px}
.max-w-full{max-width:100%}
.max-w-none{max-width:none}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.-translate-x-full{--tw-translate-x:-100%}
.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.-translate-y-1\/2{--tw-translate-y:-50%}
.translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.cursor-pointer{cursor:pointer}
.resize-none{resize:none}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-0\.5{gap:.125rem}
.gap-1{gap:.25rem}
.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}
.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}
.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}
.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}
.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}
.self-end{align-self:flex-end}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-pre-wrap{white-space:pre-wrap}
.break-words{overflow-wrap:break-word}
.rounded{border-radius:.25rem}
.rounded-2xl{border-radius:1rem}
.rounded-\[20px\]{border-radius:20px}
.rounded-\[24px\]{border-radius:24px}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.rounded-t-\[24px\]{border-top-left-radius:24px;border-top-right-radius:24px}
.border{border-width:1px}
.border-b{border-bottom-width:1px}
.border-l{border-left-width:1px}
.border-r{border-right-width:1px}
.border-t{border-top-width:1px}
.border-dashed{border-style:dashed}
.border-\[\#D1D5DB\]{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}
.border-\[\#e7e5d8\]{--tw-border-opacity:1;border-color:rgb(231 229 216/var(--tw-border-opacity,1))}
.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}
.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}
.bg-\[\#D1D5DB\]{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}
.bg-\[\#E5E7EB\]{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}
.bg-\[\#E5E7EB\]\/60{background-color:rgba(229,231,235,.6)}
.bg-\[\#F3F4F6\]{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}
.bg-\[\#fdfbf0\]{--tw-bg-opacity:1;background-color:rgb(253 251 240/var(--tw-bg-opacity,1))}
.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}
.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}
.bg-black\/10{background-color:rgba(0,0,0,.1)}
.bg-black\/20{background-color:rgba(0,0,0,.2)}
.bg-black\/30{background-color:rgba(0,0,0,.3)}
.bg-black\/5{background-color:rgba(0,0,0,.05)}
.bg-black\/\[0\.06\]{background-color:rgba(0,0,0,.06)}
.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}
.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}
.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}
.bg-transparent{background-color:transparent}
.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}
.bg-white\/70{background-color:hsla(0,0%,100%,.7)}
.p-0{padding:0}
.p-1{padding:.25rem}
.p-10{padding:2.5rem}
.p-2{padding:.5rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.pb-2{padding-bottom:.5rem}
.pb-3{padding-bottom:.75rem}
.pb-4{padding-bottom:1rem}
.pb-6{padding-bottom:1.5rem}
.pl-3{padding-left:.75rem}
.pl-9{padding-left:2.25rem}
.pr-3{padding-right:.75rem}
.pt-2{padding-top:.5rem}
.pt-4{padding-top:1rem}
.pt-6{padding-top:1.5rem}
.text-left{text-align:left}
.text-center{text-align:center}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[20px\]{font-size:20px}
.text-\[22px\]{font-size:22px}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:.75rem;line-height:1rem}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.capitalize{text-transform:capitalize}
.italic{font-style:italic}
.leading-5{line-height:1.25rem}
.leading-6{line-height:1.5rem}
.leading-tight{line-height:1.25}
.tracking-tight{letter-spacing:-.025em}
.text-\[\#374151\]{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}
.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}
.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}
.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}
.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}
.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}
.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.opacity-50{opacity:.5}
.opacity-60{opacity:.6}
.opacity-80{opacity:.8}
.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}
.shadow-2xl,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}
.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.ring-\[\#D1D5DB\]{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219/var(--tw-ring-opacity,1))}
.blur{--tw-blur:blur(8px)}
.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.duration-300{transition-duration:.3s}
#root,body,html{min-height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}
[role=button]:not([aria-disabled=true]),button:not(:disabled),label[for],select:not(:disabled),summary{cursor:pointer}
.selection\:bg-\[\#E5E7EB\]\/60 ::-moz-selection{background-color:rgba(229,231,235,.6)}
.selection\:bg-\[\#E5E7EB\]\/60 ::selection{background-color:rgba(229,231,235,.6)}
.selection\:bg-\[\#E5E7EB\]\/60::-moz-selection{background-color:rgba(229,231,235,.6)}
.selection\:bg-\[\#E5E7EB\]\/60::selection{background-color:rgba(229,231,235,.6)}
.hover\:bg-black\/10:hover{background-color:rgba(0,0,0,.1)}
.hover\:bg-black\/5:hover{background-color:rgba(0,0,0,.05)}
.hover\:bg-black\/\[0\.02\]:hover{background-color:rgba(0,0,0,.02)}
.hover\:bg-black\/\[0\.04\]:hover{background-color:rgba(0,0,0,.04)}
.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}
.hover\:opacity-100:hover{opacity:1}
.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}
.hover\:shadow-md:hover,.hover\:shadow:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}
.hover\:shadow-sm:hover{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.focus\:ring-\[\#D1D5DB\]\/30:focus{--tw-ring-color:rgba(209,213,219,.3)}
.focus\:ring-\[\#D1D5DB\]\/40:focus{--tw-ring-color:rgba(209,213,219,.4)}
.focus\:ring-\[\#D1D5DB\]\/50:focus{--tw-ring-color:rgba(209,213,219,.5)}
.group:hover .group-hover\:flex{display:flex}
.container{width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.pointer-events-none{pointer-events:none}
.visible{visibility:visible}
.inset-y-0{top:0;bottom:0}
.-left-16{left:-4rem}
.-top-20{top:-5rem}
.bottom-\[30\%\]{bottom:30%}
.left-1\/2{left:50%}
.left-3\.5{left:.875rem}
.left-\[18\%\]{left:18%}
.left-\[26\%\]{left:26%}
.right-0{right:0}
.right-3{right:.75rem}
.right-4{right:1rem}
.right-6{right:1.5rem}
.right-\[20\%\]{right:20%}
.top-4{top:1rem}
.top-6{top:1.5rem}
.top-\[22\%\]{top:22%}
.top-\[28\%\]{top:28%}
.z-\[60\]{z-index:60}
.mb-10{margin-bottom:2.5rem}
.mb-3{margin-bottom:.75rem}
.mb-8{margin-bottom:2rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.box-border{box-sizing:border-box}
.h-1{height:.25rem}
.h-1\.5{height:.375rem}
.h-12{height:3rem}
.h-3{height:.75rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-64{height:16rem}
.h-7{height:1.75rem}
.h-\[18px\]{height:18px}
.h-\[320px\]{height:320px}
.h-\[420px\]{height:420px}
.h-\[42px\]{height:42px}
.h-\[44px\]{height:44px}
.h-\[460px\]{height:460px}
.h-px{height:1px}
.w-1{width:.25rem}
.w-1\.5{width:.375rem}
.w-12{width:3rem}
.w-3{width:.75rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-64{width:16rem}
.w-7{width:1.75rem}
.w-\[18px\]{width:18px}
.w-\[320px\]{width:320px}
.w-\[420px\]{width:420px}
.w-\[460px\]{width:460px}
.max-w-\[100vw\]{max-width:100vw}
.max-w-\[280px\]{max-width:280px}
.max-w-\[360px\]{max-width:360px}
.max-w-\[380px\]{max-width:380px}
.max-w-\[980px\]{max-width:980px}
.max-w-\[calc\(100vw-3rem\)\]{max-width:calc(100vw - 3rem)}
.-translate-x-1\/2{--tw-translate-x:-50%}
.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.animate-\[float_0\.4s_ease\]{animation:float .4s ease}
@keyframes spin{to{transform:rotate(1turn)}}
.animate-spin{animation:spin 1s linear infinite}
.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.place-items-center{place-items:center}
.gap-2\.5{gap:.625rem}
.-space-x-1\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(-.375rem*var(--tw-space-x-reverse));margin-left:calc(-.375rem*(1 - var(--tw-space-x-reverse)))}
.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}
.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}
.overflow-x-hidden{overflow-x:hidden}
.break-all{word-break:break-all}
.rounded-\[12px\]{border-radius:12px}
.rounded-\[28px\]{border-radius:28px}
.rounded-\[6px\]{border-radius:6px}
.border-2,.border-\[2px\]{border-width:2px}
.border-\[\#dcfce7\]{--tw-border-opacity:1;border-color:rgb(220 252 231/var(--tw-border-opacity,1))}
.border-\[\#e7e5d8\]\/60{border-color:hsla(52,24%,88%,.6)}
.border-\[\#e7e5d8\]\/70{border-color:hsla(52,24%,88%,.7)}
.border-\[\#f8f5e9\]{--tw-border-opacity:1;border-color:rgb(248 245 233/var(--tw-border-opacity,1))}
.border-\[\#fbf8ef\]{--tw-border-opacity:1;border-color:rgb(251 248 239/var(--tw-border-opacity,1))}
.border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165/var(--tw-border-opacity,1))}
.border-transparent{border-color:transparent}
.border-white\/10{border-color:hsla(0,0%,100%,.1)}
.border-t-\[\#8B5CF6\]{--tw-border-opacity:1;border-top-color:rgb(139 92 246/var(--tw-border-opacity,1))}
.bg-\[\#111827\]{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}
.bg-\[\#1a1a1a\]\/20{background-color:rgba(26,26,26,.2)}
.bg-\[\#8B5CF6\]\/40{background-color:rgba(139,92,246,.4)}
.bg-\[\#FB923C\]\/40{background-color:rgba(251,146,60,.4)}
.bg-\[\#e7e5d8\]{--tw-bg-opacity:1;background-color:rgb(231 229 216/var(--tw-bg-opacity,1))}
.bg-\[\#f0ede1\]{--tw-bg-opacity:1;background-color:rgb(240 237 225/var(--tw-bg-opacity,1))}
.bg-\[\#f0fdf4\]{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}
.bg-\[\#f3f4f6\]{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}
.bg-\[\#f8f5e9\]{--tw-bg-opacity:1;background-color:rgb(248 245 233/var(--tw-bg-opacity,1))}
.bg-\[\#f8f5e9\]\/80{background-color:hsla(48,52%,94%,.8)}
.bg-\[\#fcfaf4\]{--tw-bg-opacity:1;background-color:rgb(252 250 244/var(--tw-bg-opacity,1))}
.bg-\[\#fcfcfb\]{--tw-bg-opacity:1;background-color:rgb(252 252 251/var(--tw-bg-opacity,1))}
.bg-red-50\/40{background-color:hsla(0,86%,97%,.4)}
.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}
.bg-white\/80{background-color:hsla(0,0%,100%,.8)}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}
.from-\[\#8B5CF6\]{--tw-gradient-from:#8b5cf6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(139,92,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-\[\#FB923C\]{--tw-gradient-to:#fb923c var(--tw-gradient-to-position)}
.bg-clip-text{-webkit-background-clip:text;background-clip:text}
.object-contain{-o-object-fit:contain;object-fit:contain}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-9{padding-top:2.25rem;padding-bottom:2.25rem}
.pl-\[42px\]{padding-left:42px}
.pr-11{padding-right:2.75rem}
.pr-4{padding-right:1rem}
.pt-1{padding-top:.25rem}
.text-\[10\.5px\]{font-size:10.5px}
.text-\[12\.5px\]{font-size:12.5px}
.text-\[16px\]{font-size:16px}
.text-\[17px\]{font-size:17px}
.text-\[18px\]{font-size:18px}
.text-\[32px\]{font-size:32px}
.text-\[8px\]{font-size:8px}
.text-\[9px\]{font-size:9px}
.font-light{font-weight:300}
.uppercase{text-transform:uppercase}
.leading-\[0\.95\]{line-height:.95}
.leading-\[1\.4\]{line-height:1.4}
.leading-\[1\.5\]{line-height:1.5}
.leading-\[1\.6\]{line-height:1.6}
.tracking-\[-0\.01em\]{letter-spacing:-.01em}
.tracking-\[-0\.02em\]{letter-spacing:-.02em}
.tracking-\[0\.04em\]{letter-spacing:.04em}
.tracking-\[0\.12em\]{letter-spacing:.12em}
.tracking-\[0\.14em\]{letter-spacing:.14em}
.tracking-wide{letter-spacing:.025em}
.text-\[\#111827\]{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}
.text-\[\#1a1a1a\]{--tw-text-opacity:1;color:rgb(26 26 26/var(--tw-text-opacity,1))}
.text-\[\#4b5563\]{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}
.text-\[\#6b6a63\]{--tw-text-opacity:1;color:rgb(107 106 99/var(--tw-text-opacity,1))}
.text-\[\#6b7280\]{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}
.text-\[\#8a8983\]{--tw-text-opacity:1;color:rgb(138 137 131/var(--tw-text-opacity,1))}
.text-\[\#9a9993\]{--tw-text-opacity:1;color:rgb(154 153 147/var(--tw-text-opacity,1))}
.text-\[\#9ca3af\]{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}
.text-transparent{color:transparent}
.opacity-0{opacity:0}
.opacity-70{opacity:.7}
.shadow-\[0_12px_32px_rgba\(0\2c 0\2c 0\2c 0\.18\)\]{--tw-shadow:0 12px 32px rgba(0,0,0,.18);--tw-shadow-colored:0 12px 32px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-\[0_16px_48px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]{--tw-shadow:0 16px 48px rgba(0,0,0,.12);--tw-shadow-colored:0 16px 48px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-\[0_1px_2px_rgba\(0\2c 0\2c 0\2c 0\.04\)\]{--tw-shadow:0 1px 2px rgba(0,0,0,.04);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-\[0_4px_12px_rgba\(139\2c 92\2c 246\2c 0\.18\)\]{--tw-shadow:0 4px 12px rgba(139,92,246,.18);--tw-shadow-colored:0 4px 12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.8\)_inset\]{--tw-shadow:0 8px 32px rgba(0,0,0,.06),0 1px 0 hsla(0,0%,100%,.8) inset;--tw-shadow-colored:0 8px 32px var(--tw-shadow-color),inset 0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.blur-\[100px\]{--tw-blur:blur(100px)}
.blur-\[100px\],.blur-\[50px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.blur-\[50px\]{--tw-blur:blur(50px)}
.blur-\[80px\]{--tw-blur:blur(80px)}
.blur-\[80px\],.blur-\[90px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.blur-\[90px\]{--tw-blur:blur(90px)}
.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
.backdrop-blur-\[14px\]{--tw-backdrop-blur:blur(14px)}
.backdrop-blur-\[14px\],.backdrop-blur-\[6px\]{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
.backdrop-blur-\[6px\]{--tw-backdrop-blur:blur(6px)}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}
.selection\:bg-\[\#e7e5d8\] ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(231 229 216/var(--tw-bg-opacity,1))}
.selection\:bg-\[\#e7e5d8\] ::selection{--tw-bg-opacity:1;background-color:rgb(231 229 216/var(--tw-bg-opacity,1))}
.selection\:bg-\[\#e7e5d8\]::-moz-selection{--tw-bg-opacity:1;background-color:rgb(231 229 216/var(--tw-bg-opacity,1))}
.selection\:bg-\[\#e7e5d8\]::selection{--tw-bg-opacity:1;background-color:rgb(231 229 216/var(--tw-bg-opacity,1))}
.placeholder\:text-\[\#9ca3af\]::-moz-placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}
.placeholder\:text-\[\#9ca3af\]::placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}
.hover\:bg-\[\#D1D5DB\]:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}
.hover\:bg-\[\#F3F4F6\]:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}
.hover\:bg-\[\#e5e7eb\]:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}
.hover\:bg-\[\#f3f4f6\]:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}
.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}
.hover\:text-\[\#6b7280\]:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}
.hover\:opacity-80:hover{opacity:.8}
.focus\:border-\[\#d6d3c8\]:focus{--tw-border-opacity:1;border-color:rgb(214 211 200/var(--tw-border-opacity,1))}
.focus\:border-red-400:focus{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}
.focus\:bg-white:focus{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}
.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}
.focus\:ring-\[\#f0ede1\]:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(240 237 225/var(--tw-ring-opacity,1))}
.focus\:ring-red-100:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(254 226 226/var(--tw-ring-opacity,1))}
.active\:bg-\[\#CBD5E1\]:active{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}
.active\:bg-\[\#e7e5d8\]:active{--tw-bg-opacity:1;background-color:rgb(231 229 216/var(--tw-bg-opacity,1))}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}
.disabled\:opacity-70:disabled{opacity:.7}
.peer:checked~.peer-checked\:border-\[\#111827\]{--tw-border-opacity:1;border-color:rgb(17 24 39/var(--tw-border-opacity,1))}
.peer:checked~.peer-checked\:bg-\[\#111827\]{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}
.peer:checked~.peer-checked\:opacity-100{opacity:1}
@media (min-width:640px){.container{max-width:640px}
.sm\:inline-block{display:inline-block}}
@media (min-width:768px){.md\:flex{display:flex}
.md\:max-h-\[84vh\]{max-height:84vh}
.md\:max-w-\[640px\]{max-width:640px}
.md\:items-center{align-items:center}
.md\:rounded-\[24px\]{border-radius:24px}
.md\:p-6{padding:1.5rem}
.md\:p-8{padding:2rem}
.container{max-width:768px}}
@media (min-width:1024px){.lg\:static{position:static}
.lg\:flex{display:flex}
.lg\:hidden{display:none}
.lg\:w-\[420px\]{width:420px}
.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.lg\:pl-\[280px\]{padding-left:280px}
.container{max-width:1024px}
.lg\:mt-0{margin-top:0}
.lg\:block{display:block}
.lg\:w-\[46\%\]{width:46%}
.lg\:w-\[54\%\]{width:54%}
.lg\:flex-row{flex-direction:row}
.lg\:border-b-0{border-bottom-width:0}
.lg\:border-r{border-right-width:1px}
.lg\:bg-\[\#fbf8ef\]{--tw-bg-opacity:1;background-color:rgb(251 248 239/var(--tw-bg-opacity,1))}
.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}
.lg\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.lg\:py-12{padding-top:3rem;padding-bottom:3rem}
.lg\:py-8{padding-top:2rem;padding-bottom:2rem}
.lg\:text-\[36px\]{font-size:36px}}
@media (min-width:1280px){.xl\:w-\[460px\]{width:460px}
.container{max-width:1280px}}
@media (min-width:1536px){.container{max-width:1536px}}
/* ==========================================================================
   Section 2 — MailDesk component layer
   ========================================================================== */
html, body { margin: 0; background: #f8f5e9; overflow-x: hidden; max-width: 100vw; -webkit-text-size-adjust: 100%; }

/* Typography: sign-in uses Inter + Instrument Serif; workspace uses the system stack + Georgia (per templates) */
#auth-view, #auth-view * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#auth-view .serif { font-family: 'Instrument Serif', 'Times New Roman', serif; }
#app-view, #app-view *, #composer, #composer *, #toast-region, #toast-region *, #reset-modal, #reset-modal * {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif;
}
#app-view h1, #app-view h2, #app-view h3, #app-view .serif { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.02em; }
code, pre, kbd, .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }

/* Icons — purple→orange gradient strokes */
.gradient-icon, .star-gradient { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* User-space gradient: straight horizontal/vertical strokes (trash lid, alert "!", italic bars,
   link bar, sparkles, log-out arrow) have a zero-width/height bounding box, so an
   objectBoundingBox gradient made those strokes invisible. A 24px user-space gradient matches the
   icon viewBox and renders every stroke. */
.gradient-icon svg, .star-gradient svg { stroke: url(#purpleOrangeUser); }
.star-gradient svg { fill: url(#purpleOrangeUser); }
.plain-icon { stroke: currentColor; flex-shrink: 0; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #d8d5c6; border-radius: 999px; }

/* Sign-in motion */
@keyframes float { 0%, 100% { transform: translateY(0) translateX(0); } 33% { transform: translateY(-18px) translateX(10px); } 66% { transform: translateY(12px) translateX(-8px); } }
@keyframes float2 { 0%, 100% { transform: translateY(0) translateX(0) scale(1); } 50% { transform: translateY(-22px) translateX(-14px) scale(1.03); } }
@keyframes orbDrift { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .55; } 25% { transform: translate(28px, -18px) scale(1.08); opacity: .7; } 50% { transform: translate(-12px, 22px) scale(.95); opacity: .5; } 75% { transform: translate(-24px, -10px) scale(1.05); opacity: .65; } }
@keyframes dotFloat { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-8px); opacity: 1; } }
@keyframes lineGrow { 0% { width: 0; opacity: 0; } 100% { width: var(--w); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* Remember-me checkmark shows only when checked */
.peer ~ div > svg { opacity: 0; transition: opacity .15s; }
.peer:checked ~ div > svg { opacity: 1; }
.peer:focus-visible ~ div { box-shadow: 0 0 0 3px rgba(139, 92, 246, .3); }

/* Keyboard focus: visible everywhere, invisible for pointer clicks */
:where(button, a, summary, [tabindex], [role="button"], input[type="checkbox"]):focus-visible { outline: 2px solid #8B5CF6; outline-offset: 2px; border-radius: 10px; }
:where(input, textarea, select, [contenteditable="true"]):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(209, 213, 219, .6); }
#app-view input[type="checkbox"] { accent-color: #6b7280; width: 14px; height: 14px; cursor: pointer; }
button:disabled { cursor: not-allowed; }
.is-invalid { border-color: #fca5a5 !important; background-color: rgba(254, 242, 242, .55) !important; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 12px; background: #111827; color: #fff; font-size: 13px; transition: top .15s; }
.skip-link:focus { top: 12px; }
.break-anywhere { overflow-wrap: anywhere; }
.invisible { visibility: hidden; }

/* Segmented controls (composer Write / HTML Raw, signature tabs) */
.seg[aria-selected="true"] { background: #E5E7EB; border: 1px solid #D1D5DB; color: #374151; font-weight: 500; }
.seg[aria-selected="false"] { border: 1px solid transparent; }
.seg[aria-selected="false"]:hover { background: rgba(0, 0, 0, .05); }
.sig-tab[aria-selected="true"] { background: #E5E7EB; color: #374151; border-color: #D1D5DB !important; font-weight: 500; }
.sig-tab[aria-selected="false"]:hover { background: rgba(0, 0, 0, .05); }

/* Interaction feedback: smooth hover colours and a gentle press on every control */
#app-view button, #composer button, #reset-modal button, #auth-view button, #toast-region button {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .12s ease;
}
#app-view button:not(:disabled):active, #composer button:not(:disabled):active,
#reset-modal button:not(:disabled):active, #auth-view button:not(:disabled):active { transform: scale(.97); }
#app-view .row-open:not(:disabled):active, #nav button:not(:disabled):active { transform: none; }
#nav button:not(:disabled):active { background: rgba(0, 0, 0, .06); }
#app-view [data-star] svg { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
#app-view [data-star]:hover svg, #app-view [data-action="star"]:hover svg { transform: scale(1.15); }
#app-view .star-pop svg { animation: starPop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes starPop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Row star: a 32px tap target without changing the row layout */
.star-btn { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px 0; border-radius: 10px; cursor: pointer; }
.star-btn:hover { background: rgba(0, 0, 0, .04); }

/* Popovers & menus open with motion */
.pop-in { animation: popIn .16s cubic-bezier(.32, .72, 0, 1); transform-origin: top right; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }

/* Reader and list content fade in when the selection or folder changes */
.reader-in { animation: readerIn .22s cubic-bezier(.32, .72, 0, 1); }
@keyframes readerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.list-in { animation: listIn .2s ease-out; }
@keyframes listIn { from { opacity: 0; } to { opacity: 1; } }

/* Mobile reader slides in from the right */
@media (max-width: 1023px) {
  #reader-pane.fixed { animation: sheetIn .26s cubic-bezier(.32, .72, 0, 1); }
  @keyframes sheetIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  #compose-form { animation-name: sheetUp; }
  @keyframes sheetUp { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Composer header rows: highlight the whole row instead of a boxed ring on the bare input */
#compose-form .compose-row { transition: border-color .15s ease; }
#compose-form .compose-row:focus-within { border-color: #D1D5DB !important; }
#compose-form .compose-row input:focus-visible { box-shadow: none; }

/* Mobile-only filter group in the toolbar (the header group is md+) */
.filters-mobile { display: flex; }
@media (min-width: 768px) { .filters-mobile { display: none; } }

/* Keep toasts clear of the floating Compose button on phones/tablets */
@media (max-width: 1023px) { #toast-region { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* Compact reader action labels on narrow screens */
@media (max-width: 479px) { .label-wide { display: none; } }

/* Sign-in brand panel: keep the "trusted by" line clear of the progress bars */
.brand-foot { margin-top: 2.5rem; }
.brand-tag { white-space: normal; line-height: 1.35; }

/* Message list rows */
.mail-rows { list-style: none; margin: 0; padding: 0; }
.row-open:focus-visible { outline-offset: 4px; }

/* Message body iframe (sandboxed — received HTML never runs in the app) */
.mail-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; color-scheme: light; }

/* Template previews render at a reduced scale inside their card */
.template-preview > * { transform-origin: top left; }

/* Status accents (existing amber tone for SES warnings) */
.chip-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.banner-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* Skeleton loading */
.skeleton { position: relative; overflow: hidden; background: #efeada; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Dialog + toast motion */
.dialog-in { animation: dialogIn .22s cubic-bezier(.32, .72, 0, 1); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.toast { animation: toastIn .24s cubic-bezier(.32, .72, 0, 1); }
.toast-out { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Keyboard shortcut popover */
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid #e7e5d8; border-bottom-width: 2px; border-radius: 6px; background: #fff; font-size: 11px; }
.shortcut-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 0; }
.shortcut-grid dd { margin: 0; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Utilities used by MailDesk states that the template build did not include */
.block { display: block; }
.self-start { align-self: flex-start; }
.pointer-events-auto { pointer-events: auto; }
.overscroll-contain { overscroll-behavior: contain; }
.resize-y { resize: vertical; }
.text-right { text-align: right; }
.top-full { top: 100%; }
.bottom-5 { bottom: 1.25rem; }
.z-\[70\] { z-index: 70; }
.h-\[100dvh\] { height: 100vh; height: 100dvh; }
.h-\[40px\] { height: 40px; }
.w-48 { width: 12rem; }
.w-60 { width: 15rem; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }
.w-\[calc\(100vw-32px\)\] { width: calc(100vw - 32px); }
.max-w-\[420px\] { max-width: 420px; }
.max-w-\[460px\] { max-width: 460px; }
.p-1\.5 { padding: .375rem; }
.pt-0\.5 { padding-top: .125rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.px-3\.5 { padding-left: .875rem; padding-right: .875rem; }
.text-\[11\.5px\] { font-size: 11.5px; }
.leading-\[1\.45\] { line-height: 1.45; }
.leading-\[1\.55\] { line-height: 1.55; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.bg-emerald-500 { background-color: #10b981; }
.bg-amber-500 { background-color: #f59e0b; }
.hover\:bg-\[\#f8f5e9\]:hover { background-color: #f8f5e9; }
.hover\:bg-black\/\[0\.03\]:hover { background-color: rgba(0, 0, 0, .03); }
.disabled\:opacity-60:disabled { opacity: .6; }
@media (min-width: 1024px) { .lg\:inline { display: inline; } }