@font-face{font-family:"ELGATEC Display";src:url("/assets/elgatec-display.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#06131e;--side:#071824;--surface:#0b1d2b;--raised:#102838;--border:#235068;--line:#1a3749;--text:#f6fbfd;--muted:#a5bdc8;--sub:#86a8b9;--cyan:#27d8e8;--bright:#72f3fb;--amber:#ffd447;--danger:#ffb7be;--rail:222px;font:15px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.012em}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-width:300px;background:var(--bg);color:var(--text)}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;letter-spacing:inherit}
button,select,summary,.file-button{cursor:pointer}
button{color:inherit;border:0;background:none}
button:disabled{opacity:.48;cursor:default}
button,input,select,textarea,a,summary{ -webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
input,textarea,select{color:var(--text);background:#081a27;border:1px solid var(--border);border-radius:10px;min-width:0}
input::placeholder,textarea::placeholder{color:#8ca9b8;opacity:1}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px #27d8e819}
h1,h2,h3,p{margin:0}
svg.ic{display:block;width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;flex:none}
[data-icon]{display:inline-flex;align-items:center;justify-content:center}
.primary,.secondary,.icon,.file-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;font-weight:650;transition:background .15s,border .15s}
.primary,.secondary,.file-button{min-height:42px;padding:0 16px;font-size:14px}
.primary{color:#04151f;border:1px solid #52e7f2;background:linear-gradient(180deg,#55eaf3,#24bfd6);box-shadow:0 5px 20px #27d8e81c}
.primary:hover:enabled,.file-button:hover{filter:brightness(1.07)}
.secondary,.icon{color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.secondary:hover:enabled,.icon:hover:enabled,.file-button:hover{border-color:var(--border);background:var(--raised);color:var(--text)}
.icon{width:38px;height:38px;padding:0;flex:none;font-size:17px}
.icon.plain{border-color:transparent;background:transparent}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{object-fit:contain;flex:none}
.brand>div{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand strong{font:400 22px/1 "ELGATEC Display",Arial,sans-serif;white-space:nowrap;font-synthesis:none}
.brand strong span{color:#ffcc45}
.brand small{margin-top:5px;color:#aac1cb;font-size:9px;letter-spacing:.28em;font-weight:750}
.login-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(410px,560px) 1fr;background:radial-gradient(circle at 84% 23%,#27d8e823,transparent 26%),radial-gradient(circle at 65% 78%,#ffd4470f,transparent 22%),var(--bg)}
.login-card{position:relative;z-index:1;min-height:100dvh;padding:140px clamp(28px,6vw,82px) 66px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #27d8e820;background:linear-gradient(145deg,#092033fa,#05111bfa);box-shadow:30px 0 90px #0003}
.login-brand{position:absolute;top:36px;left:clamp(28px,6vw,82px)}
.login-content{max-width:418px;width:100%}
.login-card h1{margin:0;font-size:clamp(48px,5.2vw,68px);line-height:.99;letter-spacing:-.055em}
.login-card h1 em{color:var(--bright);font-style:normal}
.intro{margin:20px 0 31px;color:var(--muted);line-height:1.65;font-size:15px}
#login-form,#password-form{display:grid;gap:17px}
#login-form label,#password-form label{display:grid;gap:7px;color:#c1d4dc;font-size:13px;font-weight:650}
#login-form input,#password-form input{width:100%;height:51px;padding:0 15px;font-size:15px;font-weight:400;border-radius:12px}
.secret-field{position:relative;display:flex}
.secret-field input{padding-right:48px!important}
.secret-field button{position:absolute;right:7px;top:7px}
.login-submit{justify-content:space-between;min-height:51px;margin-top:5px}
.login-submit svg{width:21px;height:21px}
.install-login { width: 100%; min-height: 44px; margin-top: 12px; }
.login-visual{position:relative;min-width:0;overflow:hidden;display:grid;place-items:center}
.orbit-field{position:absolute;display:grid;place-items:center;width:min(62vw,760px);aspect-ratio:1;border:1px solid #27d8e81c;border-radius:50%;box-shadow:0 0 0 70px #27d8e806,0 0 0 140px #27d8e803}
.orbit{width:min(31vw,360px);aspect-ratio:1;position:relative;display:grid;place-items:center;border:1px solid #72f3fb46;border-radius:50%;box-shadow:inset 0 0 80px #27d8e815,0 0 70px #27d8e810}
.orbit::before,.orbit::after{content:"";position:absolute;inset:13%;border:1px solid #ffd44740;border-radius:50%;transform:rotate(53deg) scaleY(.38)}
.orbit::after{transform:rotate(-53deg) scaleY(.38)}
.orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--bright);box-shadow:0 0 17px #27d8e8}
.orbit i:nth-child(1){top:8%;left:48%}.orbit i:nth-child(2){right:12%;bottom:23%;background:var(--amber);box-shadow:0 0 17px var(--amber)}.orbit i:nth-child(3){left:12%;bottom:23%}
.orbit-mail{color:#edfbff;padding:12px;background:radial-gradient(#0c2938 45%,transparent 72%);filter:drop-shadow(0 0 16px #27d8e828)}
.orbit-mail svg{width:clamp(70px,8vw,124px);height:auto;stroke-width:.9}
.form-error,.inline-error{color:var(--danger);border:1px solid #ff657046;border-radius:10px;background:#ff65700d;padding:10px 13px;font-size:13px;overflow-wrap:anywhere}
.mail-shell{height:100vh;height:100dvh;display:grid;grid-template-rows:70px minmax(0,1fr)}
.topbar{display:grid;grid-template-columns:var(--rail) minmax(160px,650px) minmax(max-content,1fr);align-items:center;gap:0;border-bottom:1px solid var(--line);background:#081c2a;padding-right:22px}
.topbar>.brand{padding:0 22px}
.search{margin:0 20px;display:flex;align-items:center;gap:9px;min-width:0;max-width:560px;border:1px solid var(--line);border-radius:10px;background:#091825;color:var(--sub);padding:0 5px 0 12px}
.search:focus-within{border-color:var(--cyan)}
.search input{width:100%;height:36px;border:0;background:none;outline:0;box-shadow:none}
.search .icon{width:32px;height:32px}
.user-button{justify-self:end;display:flex;align-items:center;gap:8px;color:var(--muted);padding:4px;border-radius:9px;font-size:13px}
.avatar,.dialog-mark{width:35px;height:35px;display:inline-grid;place-items:center;border:1px solid #27d8e839;border-radius:10px;background:#27d8e812;color:var(--bright)}
.user-button .chevron{font-size:13px}
.topbar-actions { display: flex; justify-self: end; align-items: center; gap: 8px; min-width: 0; }
.user-button #header-address { max-width: min(20vw, 240px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-mail { padding-inline: 12px; min-height: 38px; font-size: 13px; white-space: nowrap; }
#install-guide { width: min(410px, calc(100vw - 28px)); }
#install-guide .dialog-head img { flex: none; border-radius: 9px; }
#install-steps { margin: 0; padding-inline-start: 22px; }
#install-steps li { padding-inline-start: 3px; }
#install-steps li + li { margin-top: 9px; }
#install-steps li::marker { color: var(--bright); font-weight: 650; }
#install-now { margin-top: 16px; }
.app-name-guide { margin: 8px 0 18px; }
.app-name-guide summary { cursor: pointer; font-size: 14px; padding-block: 8px; }
.app-name-guide ol { margin: 10px 0; padding-inline-start: 22px; font-size: 14px; line-height: 1.5; }
.app-name-guide li + li { margin-top: 7px; }
.panels{display:grid;grid-template-columns:var(--rail) minmax(280px,33%) minmax(0,1fr);min-height:0}
.sidebar,.list-pane,.reader{min-height:0;min-width:0}
.sidebar{display:flex;flex-direction:column;padding:21px 13px 14px;background:linear-gradient(180deg,#092033,#06141f);border-right:1px solid var(--line)}
.nav-top{display:flex;gap:8px}.compose{width:100%;justify-content:flex-start;padding-left:17px}
.section-label{margin:29px 10px 10px;color:var(--sub);font-size:11px;font-weight:720;letter-spacing:.11em;text-transform:uppercase}
.sidebar-lists{flex:1;min-height:0}.scroll{overflow:auto;overscroll-behavior:contain;scrollbar-color:#37586b transparent;scrollbar-width:thin}
#label-navigation{border-top:1px solid #244253;margin-top:12px;padding-top:5px}
#label-navigation .section-label{margin-top:12px}
#sidebar-labels .label-chip{width:22px;height:22px;padding:0;justify-content:center;flex:none}
#sidebar-labels .label-chip svg{width:14px;height:14px}
.nav-btn{width:100%;display:flex;align-items:center;gap:11px;min-height:41px;padding:8px 11px;border-radius:9px;color:var(--muted);text-align:left;font-weight:550;font-size:14px}
.nav-btn>span.name{flex:1;min-width:0;overflow-wrap:anywhere}.nav-btn svg{width:17px;height:17px}
.nav-btn:hover{background:#ffffff08;color:white}.nav-btn.selected{background:linear-gradient(90deg,#27d8e827,#178bc910);color:#dcfbff;box-shadow:inset 0 0 0 1px #27d8e825}
.number{font-size:11px;color:#b7fafd;background:#27d8e81c;border-radius:6px;padding:1px 6px}
.sidebar-bottom{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.list-pane{display:flex;flex-direction:column;background:#091b29;border-right:1px solid var(--line)}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:21px 20px 18px;border-bottom:1px solid var(--line)}
.pane-head h1{font-size:23px;line-height:1.2;letter-spacing:-.035em}
.pane-head p{color:var(--sub);font-size:12px;min-height:18px;margin-top:4px}
.messages{flex:1;min-height:0}.messages:focus-visible,.reader:focus-visible{outline-offset:-2px}
.message-row{width:100%;text-align:left;padding:13px 16px 13px 20px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:3px 8px;align-items:center;border-bottom:1px solid #153145;position:relative;color:var(--muted)}
.message-row:hover{background:#102939}.message-row.selected{background:#103344}.message-row.selected::before{content:"";position:absolute;left:0;inset-block:0;width:3px;background:var(--cyan)}
.message-row .dot{width:6px;height:6px;border-radius:50%}.message-row.unread .dot{background:var(--cyan)}
.message-row .who,.message-row .subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-row .who{font-size:14px;font-weight:550}
.message-row .subject{grid-column:2;font-size:13px;color:var(--muted)}.message-row.unread .who,.message-row.unread .subject{color:#f4f9fb;font-weight:720}
.message-row time{font-size:11px;color:var(--sub);white-space:nowrap}.message-row .clip{justify-self:end;color:var(--sub);font-size:12px}
.messages{container-type:inline-size}
.message-item{position:relative}
.selection-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 4px;padding:2px 8px 2px 0;border-bottom:1px solid var(--line);background:var(--surface);min-height:43px;flex:none}
.page-check,.row-check{display:flex;align-items:center;cursor:pointer}
.page-check{gap:8px;min-height:40px;padding-inline-start:12px;color:var(--muted);font-size:12px;font-weight:650}
.page-check input,.row-check input{margin:0;width:17px;height:17px;accent-color:var(--cyan);cursor:pointer}
.page-check input:focus-visible,.row-check input:focus-visible{outline:2px solid var(--bright);outline-offset:3px}
.row-check{position:absolute;top:0;bottom:0;inset-inline-start:0;width:38px;justify-content:center;z-index:1}
.message-item .message-row{padding-inline-start:39px}
.labels-shortcut{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 8px;color:var(--bright);font-size:12px;font-weight:650;border-radius:7px}
.labels-shortcut:hover{background:var(--raised)}
#batch-tools{display:flex;align-items:center;gap:2px}
#batch-tools .bulk-control{width:34px;height:34px;border-color:transparent;font-size:16px;background:transparent}
#batch-tools .bulk-control:is(:hover,:focus-visible){border-color:var(--border);background:var(--raised)}
#batch-tools [data-bulk=trash],#batch-tools [data-bulk=delete]{color:var(--danger)}
.message-item.batch-selected .message-row{background:var(--mail-selected,#103344)!important}
.mail-labels{display:flex;gap:4px;align-items:center;flex-wrap:wrap;min-width:0}
.message-row .mail-labels{grid-column:2 / -1;grid-row:3;flex-wrap:nowrap;overflow:hidden}
.message-row .message-origin{grid-column:2 / -1;grid-row:3;display:flex;align-items:center;gap:5px;min-width:0;color:var(--muted);font-size:11px}
.message-origin svg{flex:none;width:13px;height:13px}.message-origin span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-row .message-origin~.mail-labels{grid-row:4}
.read-inner>.mail-labels{margin-block:9px 4px}
.label-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:6px;min-width:0;max-width:100%;font-size:11px;font-weight:650;line-height:17px;white-space:nowrap}
.label-chip>span{overflow:hidden;text-overflow:ellipsis}
.label-chip svg.ic{height:12px;width:12px;stroke-width:2}
.label-chip[data-color=teal]{background:#d3efef;color:#09575e}
.label-chip[data-color=amber]{background:#ffebc2;color:#734500}
.label-chip[data-color=blue]{background:#dce9fc;color:#214f8a}
.label-chip[data-color=green]{background:#d9efde;color:#235f3b}
.label-chip[data-color=violet]{background:#ebe2fa;color:#67458c}
.label-chip[data-color=red]{background:#fae1e3;color:#8b3540}
.label-overflow{font-size:11px;flex:none;color:var(--sub)}
#notice{pointer-events:none}
#batch-dialog{width:min(448px,calc(100vw - 24px));max-height:90dvh;overflow:auto}
#batch-context:not(:empty){margin-top:3px;color:var(--sub);font-size:12px}
.batch-body{padding:13px 16px 16px}
#label-catalog{list-style:none;padding:0;margin:0 0 14px}
.label-option{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 0;min-height:45px;border-bottom:1px solid var(--line)}
.label-descriptor{min-width:0;display:grid;justify-items:start;gap:2px}
.label-descriptor small{color:var(--sub);font-size:11px}
.label-options-actions,.label-fields{display:flex;align-items:center;gap:4px}
.label-options-actions .secondary{padding:0 7px;min-height:34px;border-radius:7px;gap:3px;font-size:12px}
.label-options-actions .icon{width:34px;height:34px}
#batch-dialog :is(input,select){width:100%;padding:8px 10px;background:var(--surface)}
#batch-dialog :is(#label-editor,#batch-confirm-form) label{display:grid;gap:5px;margin:0;color:var(--muted);font-size:13px;font-weight:600}
.label-fields{margin:12px 0;align-items:start;gap:10px}
.label-fields label{flex:1;min-width:0}
#batch-confirm.destructive{background:#a42c38;border-color:#a42c38;color:white;box-shadow:none}
@media (pointer:coarse){
  .row-check{width:44px}
  .message-item .message-row{padding-inline-start:44px}
  .page-check{padding-inline-start:14px}
  #batch-tools .bulk-control,.label-options-actions .icon{min-width:40px;min-height:44px}
  .label-options-actions .secondary{min-height:44px}
}
@media(max-width:420px){
  #batch-dialog .batch-body{padding:10px 12px 14px}
  #batch-dialog .label-options-actions .secondary svg{display:none}
  #batch-dialog :is(input,select){font-size:16px}
}
.message-item .message-row{padding-inline-end:54px}
.row-actions{display:flex;align-items:center;position:absolute;inset-inline-end:4px;top:2px}
.row-action{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);border-radius:8px;padding:0}
.row-action:not([data-action="more"]){display:none}
.row-action:hover:enabled,.row-action:focus-visible{background:var(--raised);color:var(--bright)}
.row-action.action-danger:hover:enabled{color:var(--danger)}
.message-row .who.starred::before{content:"★";color:var(--bright);margin-inline-end:5px}
.reader-actions{margin-inline-start:auto;display:flex;gap:5px}
.read-toolbar .reader-action{width:38px;height:38px}
.read-inner h1 .read-star{display:inline-flex;vertical-align:middle;color:var(--bright);font-size:.65em;margin-inline-end:7px}
.read-star svg{fill:currentColor}
@media (hover:hover) and (pointer:fine){
  @container (min-width:375px){
    .message-item:is(:hover,:focus-within) .row-action{display:grid;width:32px;height:34px}
    .message-item:is(:hover,:focus-within) .row-actions{top:6px}
    .message-item:is(:hover,:focus-within) .message-row{padding-inline-end:110px}
  }
}
.pager{padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.pager>div{display:flex;gap:6px}.pager .icon{width:35px;height:33px}
.reader{background:radial-gradient(ellipse at 100% 0,#10364735,transparent 45%),var(--bg);outline:0}
.empty{min-height:205px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:28px;color:var(--muted)}
.reader>.empty{min-height:100%}.empty .empty-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:2px;color:#72dce8;background:#102937;border:1px solid #204658;border-radius:16px}.empty .empty-icon svg{width:29px;height:29px}
.empty h2{font-size:17px;font-weight:600;color:#cadde5}.empty p{font-size:13px;max-width:32ch}
.read-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:15px clamp(16px,2vw,32px);border-bottom:1px solid var(--line);background:#081a27}
.read-toolbar .secondary{font-size:13px;min-height:36px;padding:5px 11px}.reader-back,.mobile-nav,.close-menu{display:none}
.read-inner{max-width:1050px;margin:0 auto;padding:26px clamp(18px,2.4vw,42px) 38px}
.read-inner h1{font-size:clamp(22px,2vw,31px);line-height:1.22;letter-spacing:-.033em;overflow-wrap:anywhere}
.meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:20px 0;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.meta dt{color:var(--sub)}.meta dd{margin:0}.meta .sender{color:var(--text);font-weight:600}
.message-body{padding:19px clamp(13px,2vw,25px);border-radius:12px;border:1px solid var(--line);background:#fff;color:#1c2931;overflow:auto;color-scheme:light}
.message-body iframe{width:100%;display:block;min-height:170px;border:none;background:white}
.message-body pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.62 system-ui,sans-serif;margin:0}
.attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.attachment,.attachment-link{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:7px 10px;color:var(--muted);border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13px;text-decoration:none;overflow-wrap:anywhere}
.attachment-link:hover{border-color:var(--border);color:var(--bright)}.attachment small,.attachment-link small{white-space:nowrap;color:var(--sub);font-size:11px}.attachment .icon{height:24px;width:24px}
dialog{max-width:calc(100vw - 28px);width:min(680px,100%);max-height:calc(100dvh - 30px);border:1px solid var(--border);border-radius:16px;padding:0;background:#0a1e2d;color:var(--text);box-shadow:0 25px 100px #0008}
dialog::backdrop{background:#020b13b8}
#message-actions{width:min(285px,calc(100vw - 16px));max-height:calc(100dvh - 16px);margin:0;inset:auto;overflow:auto;border-radius:12px}
#message-actions::backdrop{background:#06152322}
.action-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 10px 9px 16px;border-bottom:1px solid var(--line)}
.action-heading>div{min-width:0}
.action-heading h2{font-size:16px;line-height:1.3}
#action-subject{font-size:12px;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#action-choices{padding:5px}
.action-choice{width:100%;min-height:40px;padding:7px 11px;border-radius:7px;display:flex;align-items:center;gap:12px;text-align:start;color:var(--text);font-size:14px}
.action-choice:hover,.action-choice:focus-visible{background:var(--raised)}
.action-choice.action-danger,.reader-action.action-danger:hover:enabled{color:var(--danger)}
#action-step{padding:14px}
#action-move{display:grid;gap:5px;font-size:13px;color:var(--muted)}
#action-destination{width:100%;padding:9px;background:var(--surface)}
#action-warning{font-size:14px}
.action-buttons{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.action-buttons button{padding-inline:10px;font-size:13px}
#message-actions #action-submit.action-danger{background:#a42c38;border-color:#a42c38;color:white;box-shadow:none}
@media(max-width:600px){
  #message-actions{position:fixed;inset:auto 0 0;width:100%;max-width:none;margin:0;max-height:90dvh;border-radius:15px 15px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  #message-actions::backdrop{background:#06152366}
  .action-choice{min-height:44px}
  #action-destination{font-size:16px}
}
#compose-form{display:flex;flex-direction:column;max-height:calc(100dvh - 34px)}
.dialog-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
.dialog-head h2{font-size:19px;flex:1;letter-spacing:-.025em}.dialog-head .dialog-mark{width:32px;height:32px}
.compose-priority { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.compose-priority input { width: 17px; height: 17px; margin: 0; accent-color: #007584; cursor: pointer; }
.compose-priority:has(:checked) { color: var(--bright); }
@media (max-width: 365px) { #compose-dialog .dialog-head .dialog-mark { display: none; } }
.dialog-body{padding:18px 20px;min-height:0}.dialog-body h3{font-size:14px;margin:0 0 4px}
.compose-body{flex:1}.row-field{display:flex;align-items:center;gap:12px;min-height:45px;border-bottom:1px solid var(--line)}
.row-field>span{min-width:51px;color:var(--sub);font-size:13px;font-weight:600}
.row-field input,.row-field select{width:100%;min-width:0;border:0;background:transparent;padding:8px 3px;border-radius:4px}
.row-field input:focus,.row-field select:focus{box-shadow:0 1px var(--cyan)}.row-field select option{color:var(--text);background:var(--surface)}
.to-row{display:flex;align-items:center;border-bottom:1px solid var(--line)}.to-row>.row-field{flex:1;min-width:0;border:0}
.text-btn{padding:5px 6px;color:var(--bright);font-size:12px;font-weight:650}
.compose-text{display:block;resize:vertical;width:100%;min-height:165px;height:26vh;margin:13px 0 0;border:0;border-radius:5px;padding:8px 3px;background:transparent;line-height:1.6}
.dialog-actions,.leave-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dialog-actions{border-top:1px solid var(--line);padding:13px 20px}.dialog-actions>.primary{margin-left:auto}
.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.file-button:focus-within{outline:2px solid var(--amber)}
#account-dialog,#leave-dialog{width:min(440px,100%)}#account-dialog .dialog-body{max-height:calc(100dvh - 120px)}
.account-address,#identities{margin:0 0 18px;color:var(--muted);font-size:14px;overflow-wrap:anywhere}#identities{padding-left:18px}
#security{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;margin:18px 0}summary{font-weight:600}#password-form{margin-top:17px;gap:10px}
#leave-dialog p{margin:8px 0 18px;color:var(--muted)}.leave-actions>button{padding:8px 10px;min-height:38px;font-size:13px}
#notice{position:fixed;z-index:10;bottom:18px;left:50%;transform:translateX(-50%);max-width:min(90vw,560px);background:#123344;color:#ecfbff;border:1px solid #327188;border-radius:10px;padding:10px 17px;box-shadow:0 8px 24px #0006}
@media (max-width:1050px){:root{--rail:185px}.topbar{padding-right:12px}.topbar>.brand{padding:0 14px}.panels{grid-template-columns:var(--rail) minmax(245px,32%) minmax(0,1fr)}.sidebar{padding-inline:9px}}
@media (max-width:900px){.login-shell{grid-template-columns:1fr}.login-card{width:min(100%,620px);margin:auto;border-right:0}.login-visual{display:none}}
@media (max-width:780px){
 .mail-shell{grid-template-rows:auto minmax(0,1fr)}.topbar{grid-template-columns:1fr auto;row-gap:9px;padding:10px 12px}
 .topbar>.brand{padding:0;gap:7px}.brand strong{font-size:19px}.topbar .brand img{width:27px;height:27px}.brand small{font-size:8px}
 .mobile-nav,.close-menu,.reader-back{display:inline-flex}.topbar-actions{grid-column:2;grid-row:1}.user-button #header-address,.user-button .chevron{display:none}
 .search{grid-column:1/-1;grid-row:2;margin:0;width:100%;max-width:none}
 .panels{display:block;position:relative;overflow:hidden}.list-pane,.reader{height:100%;border:0}
 .sidebar{display:none;position:absolute;inset:0 auto 0 0;width:min(285px,88vw);z-index:3;box-shadow:12px 0 44px #0006;padding:16px}
 .mail-shell.menu-open .sidebar{display:flex}#shade:not([hidden]){position:absolute;inset:0;background:#020b14a6;z-index:2}
 .close-menu{width:39px;height:42px}.reader{display:none}.mail-shell.reading .reader{display:block}.mail-shell.reading .list-pane{display:none}
 .pane-head{padding:16px 17px 13px}.message-row{padding:14px 16px}.read-toolbar{padding:10px 12px;gap:6px}
 .read-toolbar .secondary{min-height:38px}.read-inner{padding:19px 14px 26px}.reader-back{margin-right:auto}
 .dialog-actions{padding:10px 12px;gap:6px}.dialog-actions button,.file-button{padding-inline:10px;font-size:13px}
}
@media (max-width:520px){.login-card{padding:120px 24px 42px;justify-content:flex-start}.login-brand{top:30px;left:24px}.login-card h1{font-size:50px}.intro{margin:17px 0 26px}.dialog-body{padding:14px}.dialog-head{padding:11px 14px}#compose-dialog{width:100%;max-width:100vw;margin:auto 0 0;border-radius:15px 15px 0 0;max-height:100dvh}#compose-form{max-height:100dvh}.compose-text{min-height:125px}.dialog-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width: 780px) {
  .install-mail { min-height: 44px; padding-inline: 10px; }
}
@media (max-width: 380px) {
  .install-mail [data-icon] { display: none; }
  .topbar-actions { gap: 4px; }
}
@media (display-mode: standalone) and (max-width: 780px) {
  .topbar { padding-block-start: max(10px, env(safe-area-inset-top)); }
  .mail-shell { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
}

.appearance-field {
  display: grid;
  gap: 6px;
  margin: 16px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.appearance-field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--text);
  border-color: var(--border);
  background-color: var(--surface);
  font-weight: 450;
}

.signature-settings {
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
  scroll-margin-block-start: 12px;
}
.push-settings { margin: 20px 0; padding: 16px 0; border-block: 1px solid var(--line); }
.push-settings .signature-help { margin: 4px 0 10px; }
.push-settings .signature-status:empty { display: none; }
.signature-help {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
#signature-form {
  display: grid;
  gap: 6px;
  margin-block-start: 14px;
}
#signature-form label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
#signature-form :is(select, textarea, input[type="text"]) {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  color: var(--text);
}
#signature-form textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
#signature-form label:not(:first-child) { margin-top: 6px; }
.signature-phone-settings {
  min-width: 0; margin: 7px 0 2px; padding: 10px 12px 12px;
  border: 1px solid var(--line); border-radius: 10px;
}
.signature-phone-settings legend { padding: 0 5px; font-size: 14px; font-weight: 600; }
.signature-phone-controls { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 172px),1fr)); gap: 10px; }
#signature-form .signature-phone-controls label { display: grid; gap: 5px; margin: 0; font-size: 13px; }
#signature-form :is(select, textarea, input[type="text"]):focus {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.signature-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 7px;
}
.signature-actions button { min-height: 44px; }
.signature-status { color: var(--muted); font-size: 13px; }
.avatar { overflow: hidden; }
.avatar img, .profile-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-settings { margin: 2px 0 22px; }
#avatar-form { display: grid; gap: 10px; margin-top: 9px; }
.avatar-options { display: flex; align-items: center; gap: 13px; }
.profile-thumbnail {
  width: 61px;
  height: 61px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--sub);
}
.profile-thumbnail svg { width: 26px; height: 26px; }
.avatar-options label {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
}
.avatar-options select {
  width: 100%;
  min-height: 44px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--surface);
  font-weight: 450;
}
.image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.image-actions :is(.file-button, button) { min-height: 44px; }
.image-actions .file-button { position: relative; margin: 0; font-size: 13px; }
#signature-form .image-actions .file-button { color: var(--muted); }
.image-actions .file-button:has(input:disabled) { opacity: .55; }
.image-actions .text-btn { padding-inline: 4px; }
.media-help { color: var(--sub); font-size: 12px; }
.signature-image-preview {
  display: grid;
  justify-items: start;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.signature-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 135px;
  width: auto;
  height: auto;
  object-fit: contain;
}
#signature-form .image-actions { margin-top: 2px; }
.compose-image-choice { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--muted); font-size: 13px; }
.compose-image-choice input { width: 17px; height: 17px; accent-color: #008795; }
.compose-image-preview { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.compose-image-preview summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
}
.compose-image-preview summary::after { content: '⌄'; margin-left: auto; font-size: 18px; }
.compose-image-preview[open] summary::after { content: '⌃'; }
.compose-image-preview summary:focus-visible { outline-offset: -3px; }
.compose-image-preview summary img { width: 56px; height: 26px; object-fit: contain; }
.message-preview {
  padding: 12px;
  color: #1c2931;
  background: #fff;
  border-top: 1px solid var(--line);
  overflow: auto;
  max-height: 45vh;
}
.message-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }
.message-preview img, .message-body .inline-mail-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 600px);
  object-fit: contain;
}
.account-signature-link { display: inline-block; margin: -7px 0 16px; color: var(--bright); font-size: 13px; text-underline-offset: 3px; }
.settings-signature-preview { margin-top: 5px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.settings-signature-preview summary { padding: 11px 12px; color: var(--muted); font-size: 13px; min-height: 42px; }
.signature-sample { padding: 12px; border-block-start: 1px solid var(--line); background: #fff; color: #22334a; }
.corporate-signature {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  color: #22334a;
  background: #fff;
  font: 14px/20px Arial, sans-serif;
  overflow-wrap: anywhere;
}
.corporate-signature .signature-contact { padding-inline-start: 12px; border-inline-start: 2px solid #28496d; }
.corporate-signature .signature-group + .signature-group { margin-top: 6px; }
.corporate-signature .signature-contact strong { color: #22334a; font-size: 18px; line-height: 22px; font-weight: 700; }
.corporate-signature .signature-service { color: #28496d; font-weight: 600; }
.corporate-signature .signature-contact a[href] { color: #205a76; text-decoration: underline; text-underline-offset: 2px; }
.corporate-signature :is(.signature-banner, .inline-mail-image) {
  display: block; width: auto; height: auto; max-width: min(100%, 480px); margin-top: 8px;
}
.corporate-signature .signature-banner-links {
  width: 100%; max-width: 480px; margin-top: 8px; line-height: 0;
}
.signature-banner-links .signature-banner-strip {
  width: 100%; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; table-layout: fixed;
}
.corporate-signature .signature-banner-links .signature-banner-strip td {
  border: 0; padding: 0; vertical-align: top;
}
.signature-banner-strip .signature-banner-correo { width: 31.6667%; }
.signature-banner-strip .signature-banner-web { width: 21.6667%; }
.signature-banner-strip .signature-banner-lateral { width: 46.6666%; }
.signature-banner-links :is(picture, a) { display: block; }
.signature-banner-links a:focus-visible { outline: 2px solid #ffcf33; outline-offset: -2px; }
.corporate-signature .signature-banner-links .signature-banner-slice {
  display: block; width: 100%; height: auto; margin: 0; padding: 0; border: 0;
  font: 13px/1.3 Arial, sans-serif; color: #173b53;
}
.corporate-signature :is(.signature-phone-art, .signature-phone-icon) {
  display: inline-block; width: auto; height: 24px; max-width: 100%; margin: 0; vertical-align: middle;
}
.corporate-signature .signature-phone-icon { width: 24px; }
.corporate-signature .signature-notices {
  margin-top: 10px; color: #52606f; font: 12px/17px Arial,sans-serif; white-space: pre-line;
}
.corporate-signature > :first-child { margin-top: 0; }
@media (max-width: 780px) {
  #signature-form :is(select, textarea, input[type="text"]), .avatar-options select { font-size: 16px; }
}

/* Theme tokens affect the mailbox panels and their dialogs. The sign-in
   screen, search, top bar and navigation keep the corporate dark palette. */
html:is([data-workspace-theme="light"], [data-workspace-theme="offwhite"], [data-workspace-theme="beige"]) {
  --mail-canvas: #ffffff;
  --mail-paper: #ffffff;
  --mail-toolbar: #f6f9fa;
  --mail-unread: #f2f8fa;
  --mail-hover: #eaf3f5;
  --mail-selected: #d8eef1;
  --mail-line: #d2dfe5;
  --mail-row-line: #e0e8ec;
  --mail-control-line: #b6cbd4;
  --mail-input-line: #8fa9b5;
  --mail-ink: #112d3c;
  --mail-body-ink: #172e3a;
  --mail-secondary: #354f5e;
  --mail-caption: #506774;
  --mail-placeholder: #5c707b;
  --mail-scroll: #9eafb9;
  --mail-unread-ink: #102e3d;
  --mail-control-hover: #e5f1f3;
  --mail-icon-bg: #e7f4f5;
  --mail-icon-line: #bfdee2;
  --mail-quote-line: #afcdd4;
  --mail-status: #eaf6f6;

  & :is(.list-pane, .reader, dialog) {
    color-scheme: light;
    --bg: var(--mail-canvas);
    --surface: var(--mail-paper);
    --raised: var(--mail-hover);
    --border: var(--mail-input-line);
    --line: var(--mail-line);
    --text: var(--mail-ink);
    --muted: var(--mail-secondary);
    --sub: var(--mail-caption);
    --cyan: #007686;
    --bright: #006978;
    --amber: #006978;
    --danger: #982935;
    color: var(--text);
    background: var(--bg);
    scrollbar-color: var(--mail-scroll) transparent;
  }
  & :is(.list-pane, dialog) .scroll { scrollbar-color: var(--mail-scroll) transparent; }
  & :is(.pane-head, .read-toolbar, .pager, .dialog-head, .dialog-actions) {
    background: var(--mail-toolbar);
  }
  & .message-row {
    color: var(--muted);
    background: var(--mail-canvas);
    border-bottom-color: var(--mail-row-line);
  }
  & .message-row.unread { background: var(--mail-unread); }
  & .message-row.unread :is(.who, .subject) { color: var(--mail-unread-ink); }
  & .message-row:hover { background: var(--mail-hover); }
  & .message-row.selected { background: var(--mail-selected); }
  & .message-row.selected .who { color: #123643; }
  & .message-row:focus-visible { outline-offset: -3px; }
  & :is(.list-pane, .reader, dialog) :is(.secondary, .icon, .attachment-link, .attachment) {
    border-color: var(--mail-control-line);
  }
  & dialog .icon.plain { border-color: transparent; }
  & :is(.list-pane, .reader, dialog) :is(.secondary, .icon):hover:enabled,
  & .reader .attachment-link:hover {
    background: var(--mail-control-hover);
    border-color: #75a3af;
    color: #095263;
  }
  & :is(.list-pane, .reader) .empty h2 { color: var(--text); }
  & :is(.list-pane, .reader) .empty-icon,
  & dialog .dialog-mark {
    color: #006b79;
    background: var(--mail-icon-bg);
    border-color: var(--mail-icon-line);
  }
  & :is(.message-body, .message-preview) {
    background: var(--mail-paper);
    color: var(--mail-body-ink);
    border-color: var(--mail-line);
    overflow-wrap: anywhere;
  }
  & .message-body a[href] { color: #006171; text-underline-offset: .15em; }
  & .message-body blockquote {
    border-inline-start: 3px solid var(--mail-quote-line);
    margin-inline: 0;
    padding-inline-start: 1em;
  }
  & .message-body table { border-collapse: collapse; }
  & .message-body :is(td, th) { padding: 2px 6px; }
  & dialog { box-shadow: 0 20px 70px #061d3240; }
  & dialog::backdrop { background: #02142199; }
  & dialog :is(input, textarea, select) { color: var(--text); }
  & dialog :is(input, textarea)::placeholder { color: var(--mail-placeholder); }
  & #password-form label { color: var(--muted); }
  & #password-form input,
  & dialog .appearance-field select { background: var(--mail-paper); }
  & dialog .primary {
    color: #fff;
    background: #006b79;
    border-color: #005967;
    box-shadow: none;
  }
  & dialog .primary:hover:enabled { background: #005664; }
  & dialog .form-error {
    background: #fff3f3;
    border-color: #dfadb3;
  }
  & #mail:not([hidden]) ~ #notice {
    background: var(--mail-status);
    border-color: #7dabaf;
    color: #124951;
    box-shadow: 0 7px 22px #102c3c22;
  }
}

html:is([data-workspace-theme="offwhite"], [data-workspace-theme="beige"]) {
  --mail-unread-ink: var(--mail-ink);
  --mail-control-hover: var(--mail-hover);
  --mail-icon-bg: var(--mail-unread);
  --mail-icon-line: var(--mail-control-line);
  --mail-quote-line: var(--mail-control-line);
  --mail-status: var(--mail-selected);
}

html[data-workspace-theme="offwhite"] {
  --mail-canvas: #efefec;
  --mail-paper: #f6f6f3;
  --mail-toolbar: #e5e6e3;
  --mail-unread: #e7ece9;
  --mail-hover: #dce5e1;
  --mail-selected: #cfe3df;
  --mail-line: #cbd1cc;
  --mail-row-line: #d3d7d1;
  --mail-control-line: #a5b4ad;
  --mail-input-line: #788b82;
  --mail-ink: #242f2d;
  --mail-body-ink: #222b29;
  --mail-secondary: #3d504a;
  --mail-caption: #4c6058;
  --mail-placeholder: #53645b;
  --mail-scroll: #98a29b;
}

html[data-workspace-theme="beige"] {
  --mail-canvas: #f2e4ce;
  --mail-paper: #faf0df;
  --mail-toolbar: #e9d8bb;
  --mail-unread: #f7ecd9;
  --mail-hover: #e9dcc3;
  --mail-selected: #d2e0d3;
  --mail-line: #cdbda4;
  --mail-row-line: #ddcfb8;
  --mail-control-line: #b7a892;
  --mail-input-line: #84755e;
  --mail-ink: #352f27;
  --mail-body-ink: #352e25;
  --mail-secondary: #514637;
  --mail-caption: #625440;
  --mail-placeholder: #665843;
  --mail-scroll: #ae9b7b;
}