/* Fear Mail v4 · obsidian and silver. This stylesheet intentionally overrides v3
   without altering the working Flask / Cloudflare implementation. */
:root{
  --bg:#020203;--ink:#f6f6f7;--muted:#999aa2;--faint:#73747b;
  --panel:#09090b;--panel-2:#101013;--edge:rgba(255,255,255,.115);
  --edge-soft:rgba(255,255,255,.07);--violet:#dedee2;--violet-light:#fff;
  --halo:rgba(255,255,255,.095);color-scheme:dark;
}
html,body{background:#020203}body{color:#f7f7f9}
button,input,select{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #eee;outline-offset:3px}
::selection{background:#ffffff39;color:white}
::-webkit-scrollbar-thumb{background:#343438;border-color:#080809}
.ambient{opacity:.42;filter:blur(58px)}
.ambient-one{background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%)}
.ambient-two{background:radial-gradient(circle,rgba(205,205,218,.11),transparent 70%)}
.fm-app-body,.fm-auth{background:#020203}
.fm-auth::before,.fm-app-body::before{opacity:.32;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
/* Background glow follows the mouse, no external images and no network access. */
.fm-auth::after,.fm-app-body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(440px circle at var(--pointer-x,50%) var(--pointer-y,40%),rgba(255,255,255,.065),transparent 75%);transition:opacity .3s;opacity:.85}
.mail-shell,.auth-shell{z-index:1;position:relative}
/* Card-level spotlight and soft reactive inner strokes. */
.auth-card,.inbox-panel,.read-panel,.mail-topbar,.rail{isolation:isolate}
.auth-card::after,.inbox-panel::after,.read-panel::after,.mail-topbar::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(480px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.045),transparent 68%);opacity:0;transition:opacity .25s}
.auth-card:hover::after,.inbox-panel:hover::after,.read-panel:hover::after,.mail-topbar:hover::after{opacity:1}
.auth-card>*{position:relative;z-index:1}
/* AUTHENTICATION — smooth centered card, no popup */
.fm-auth{display:grid;place-items:center;padding:24px 18px;min-height:100svh;overflow-x:hidden}
.auth-shell{width:min(100%,480px);max-width:480px}
.auth-eyebrow{color:#b5b5ba;letter-spacing:.13em;margin-bottom:16px}
.auth-version{color:#6c6c72}
.status-light{background:#f0f0f3;box-shadow:0 0 0 3px #ffffff15,0 0 16px #ffffff60}
.auth-card{overflow:hidden;border:1px solid #ffffff27;border-radius:26px;padding:35px clamp(24px,4vw,40px) 0;background:linear-gradient(140deg,#111114,#070708 70%);box-shadow:0 22px 100px #000c,0 0 52px #ffffff09,inset 0 1px #ffffff18}
.auth-card::before{background:radial-gradient(450px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.085),transparent 80%)}
.auth-icon{border-radius:19px;background:linear-gradient(145deg,#343439,#151519);border:1px solid #ffffff55;box-shadow:0 0 0 8px #ffffff08,0 0 34px #ffffff2d,inset 0 1px #ffffff45;animation:auth-pulse 6s ease-in-out infinite;color:white}
.auth-icon svg{filter:drop-shadow(0 0 5px #ffffff66)}
.auth-card h1{color:#fafafa}.auth-subtitle{color:#a4a4ab}
.field-label{color:#c6c6cb}
.auth-field{background:#0a0a0d;border-color:#ffffff25;border-radius:15px;cursor:text;transition:background .22s,border-color .22s,box-shadow .22s,transform .22s}
.auth-field:hover{border-color:#ffffff5c;background:#101014}
.auth-field:focus-within{background:#141418;border-color:#dedee1;box-shadow:0 0 0 3px #ffffff12,0 0 24px #ffffff0d;transform:translateY(-1px)}
.auth-field svg,.private-field{color:#a4a4aa}
.auth-field input{cursor:text;color:white;caret-color:white}
.auth-field input::placeholder{color:#77777f}
.auth-field input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 100px #141418 inset}
.auth-submit{background:linear-gradient(135deg,#e9e9ed,#c1c1c9);color:#0a0a0b;border-color:#ffffff90;border-radius:15px;box-shadow:0 10px 32px #ffffff14,inset 0 1px #fff;overflow:hidden}
.auth-submit::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,#ffffff75 50%,transparent 75%);transform:translateX(-140%);transition:transform .6s;pointer-events:none}
.auth-submit:hover::before{transform:translateX(140%)}
.auth-submit:hover{filter:brightness(1.07);box-shadow:0 14px 45px #ffffff27,0 0 30px #ffffff12;transform:translateY(-2px)}
.auth-submit span{z-index:1}
.auth-card-footer{background:#09090b;border-color:var(--edge-soft);color:#88888e}
.auth-card-footer .bullet,.auth-bottom span{color:#6e6e72}.auth-bottom{color:#808086}
.auth-error{background:#231214;color:#ffd1d2;border-color:#b75d6970}
.auth-back{color:#dedee2}.auth-back:hover{color:#fff}
.otp-cell{border-color:#ffffff30;background:#0a0a0d;border-radius:13px;color:white;position:relative;transition:background .24s,border-color .24s,box-shadow .24s,transform .24s}
.otp-cell.has-value{color:#fff;text-shadow:0 0 16px #ffffff7a}
.otp-wrap.focused .otp-cell.current{border-color:#fff;background:#19191c;box-shadow:0 0 0 3px #ffffff17,0 0 24px #ffffff1b;transform:translateY(-2px)}
/* Synthetic caret inside selected 2FA slot — actual six digits are never painted. */
.otp-wrap.focused .otp-cell.current:not(.has-value)::after{content:"";height:24px;width:2px;background:#fff;border-radius:1px;animation:caret-blink 1s step-end infinite}
.otp-wrap input{cursor:text}
.otp-hint{color:#9999a0}
@keyframes auth-pulse{0%,100%{box-shadow:0 0 0 8px #ffffff08,0 0 30px #ffffff25,inset 0 1px #ffffff40}50%{box-shadow:0 0 0 9px #ffffff0c,0 0 43px #ffffff35,inset 0 1px #ffffff55}}
@keyframes caret-blink{50%{opacity:0}}
/* INBOX SHELL */
.mail-shell{gap:13px;padding:14px}
.rail{flex:0 0 70px;width:70px;align-items:stretch;padding:17px 10px;border:1px solid #ffffff18;border-radius:22px;background:linear-gradient(145deg,#101013,#070708);box-shadow:0 12px 50px #0008;overflow:hidden;transition:flex-basis .42s var(--ease),width .42s var(--ease),box-shadow .3s}
.rail:hover,.rail:focus-within{flex-basis:206px;width:206px;box-shadow:0 18px 65px #000c,0 0 26px #ffffff12}
.rail-brand{width:100%;min-height:42px;display:flex;gap:17px;align-items:center;justify-content:flex-start;padding-left:12px;margin:0 0 33px;color:white;white-space:nowrap}
.rail-brand .ico{color:#fff;width:24px;height:24px;filter:drop-shadow(0 0 8px #ffffff55)}
.rail-wordmark{font-weight:700;font-size:14px;letter-spacing:-.025em;opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .25s;white-space:nowrap}
.rail:hover .rail-wordmark,.rail:focus-within .rail-wordmark{opacity:1;transform:none}
.rail-nav{align-items:stretch;gap:9px}
.rail-btn{width:100%;height:47px;display:flex;align-items:center;justify-content:flex-start;padding:0 13px;gap:20px;color:#a5a5ad;border-radius:14px;background:#101013;border-color:#ffffff10;white-space:nowrap}
.rail-btn .ico{width:19px;height:19px;flex:none}
.rail-label{opacity:0;transform:translateX(-6px);font-size:12px;font-weight:600;transition:opacity .22s,transform .25s;pointer-events:none}
.rail:hover .rail-label,.rail:focus-within .rail-label{opacity:1;transform:none}
.rail-btn:hover{color:white;background:#27272c;border-color:#ffffff43;box-shadow:0 0 22px #ffffff13;transform:translateX(2px)}
.rail-btn.active{color:#fff;background:linear-gradient(135deg,#353539,#1d1d21);border-color:#ffffff78;box-shadow:0 0 0 4px #ffffff07,0 0 22px #ffffff13,inset 0 1px #ffffff22}
.rail-btn.active::before{background:#fff;box-shadow:0 0 13px #ffffffa0;left:-11px}
.rail-signout{width:100%}
.mail-topbar{border-radius:20px;border:1px solid #ffffff17;background:linear-gradient(135deg,#0e0e10,#09090a);overflow:visible}
.breadcrumbs{color:#a8a8af}.breadcrumbs strong{color:#fff}.breadcrumbs .slash{color:#55555c}
.search-wrap{position:relative;overflow:visible;background:#101012;border-color:#ffffff24;color:#aaaab1;border-radius:14px;cursor:text}
.search-wrap:focus-within{border-color:#fff;background:#17171a;box-shadow:0 0 0 3px #ffffff11,0 0 24px #ffffff13}
.search-wrap input{color:#fff;caret-color:#fff;cursor:text}
.search-wrap input::placeholder{color:#8a8a91}.search-wrap kbd{border-color:#ffffff23;color:#96969f}
.search-suggestions{position:absolute;left:0;right:0;top:calc(100% + 9px);z-index:40;padding:8px;border:1px solid #ffffff24;border-radius:16px;background:#101012;box-shadow:0 26px 65px #000e,0 0 28px #ffffff0b;animation:menu-arrive .22s var(--ease) both;max-height:330px;overflow:auto;cursor:default}
.suggest-heading{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#83838b;padding:9px 10px 5px}
.suggestion{border:0;background:transparent;width:100%;display:flex;gap:9px;align-items:center;text-align:left;color:#d8d8df;padding:11px;border-radius:11px;font-size:12px;transition:background .15s,transform .15s}
.suggestion:hover,.suggestion.active{background:#29292e;color:#fff;transform:translateX(2px)}
.suggestion .ico{width:16px;height:16px;opacity:.7}.suggestion span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.search-empty-suggest{font-size:12px;color:#9a9aa1;padding:12px}
.sync-pill{color:#b6b6bc}.sync-pill.offline .status-light{background:#f5c790;box-shadow:0 0 15px #eebf8750}
.inbox-panel,.read-panel{border-radius:23px;border-color:#ffffff1a;background:linear-gradient(145deg,#0f0f11,#070708 68%);box-shadow:inset 0 1px #ffffff08,0 14px 55px #0009}
.inbox-panel::before{background:radial-gradient(circle,#ffffff0e,transparent 67%)}
.read-panel::before{background:radial-gradient(circle,#ffffff0c,transparent 68%)}
.count-pill{border-radius:10px;background:#252528;color:#f3f3f5}
/* Animated sorting dropdown */
.sort-control{position:relative;z-index:25}
.sort-trigger{min-width:132px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #ffffff25;border-radius:12px;background:#131316;color:#d6d6dc;padding:10px 12px;font-size:11px;white-space:nowrap;transition:background .2s,border .2s,box-shadow .2s}
.sort-trigger:hover,.sort-trigger[aria-expanded="true"]{border-color:#ffffff75;background:#242427;box-shadow:0 0 16px #ffffff0e}
.sort-trigger .ico{width:13px;height:13px;transition:transform .25s}
.sort-trigger[aria-expanded="true"] .ico{transform:rotate(180deg)}
.sort-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:166px;border:1px solid #ffffff30;background:#141417;box-shadow:0 18px 44px #000e,0 0 20px #ffffff09;border-radius:14px;padding:7px;transform-origin:top right;animation:menu-arrive .25s var(--ease) both}
.sort-menu button{display:block;width:100%;border:0;background:transparent;color:#b7b7bd;border-radius:9px;padding:10px 12px;text-align:left;font-size:12px;transition:background .17s,color .17s,transform .17s}
.sort-menu button:hover,.sort-menu button[aria-checked="true"]{background:#2e2e32;color:white;transform:translateX(2px)}
@keyframes menu-arrive{from{opacity:0;transform:translateY(-8px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
.icon-button{border-radius:13px;color:#b3b3ba}.icon-button:hover:not(:disabled){color:#fff;background:#29292d;border-color:#ffffff49;box-shadow:0 0 21px #ffffff12;transform:translateY(-2px) scale(1.04)}
.icon-button.starred{color:white}.icon-button.starred .ico{stroke:white;fill:#ffffff23}
.filter-bar{border-color:var(--edge-soft)}
.filter-pill{border:1px solid #ffffff19;border-radius:12px;background:#141416;color:#a6a6ae}
.filter-pill:hover{background:#2a2a2d;color:#fff;transform:translateY(-2px)}
.filter-pill.active{background:linear-gradient(135deg,#ebebee,#bfc0c4);border-color:#fff;color:#050507;box-shadow:0 6px 22px #ffffff17,inset 0 1px #ffffffaa}
.list-meta{color:#89898e}
.mail-row{border:1px solid #ffffff16;background:#111113;border-radius:16px;transition:background .22s,transform .22s,border-color .22s,box-shadow .22s}
.mail-row:hover{border-color:#ffffff75;background:#222225;box-shadow:0 7px 27px #0009,0 0 18px #ffffff13;transform:translateY(-2px)}
.mail-row.selected{background:linear-gradient(110deg,#2b2b30,#1a1a1d);border-color:#dedee1;box-shadow:inset 0 1px #ffffff24,0 0 0 1px #ffffff1b,0 0 30px #ffffff0c}
.row-avatar{background:linear-gradient(135deg,#444448,#242429);border-color:#ffffff30;color:#fff}
.row-sender{color:#e1e1e6}.row-time{color:#a7a7ac}.unread-dot{background:#fff;box-shadow:0 0 10px #fff9}.row-title{color:white}.row-preview{color:#99999f}
.row-star{color:#77777d}.row-star:hover,.row-star.starred{color:white;background:#ffffff19}.row-star.starred .ico{fill:#ffffff33}
.list-footer{color:#94949a}
.empty-orb{border-color:#ffffff40;background:linear-gradient(145deg,#2f2f33,#101012);color:#fff;box-shadow:0 0 25px #ffffff13}
.read-content{animation:fade-rise .3s var(--ease) both}.read-empty{color:#fff}.read-empty p,.tiny-kbd{color:#a3a3aa}.tiny-kbd kbd{border-color:#ffffff30}
.read-tag{background:#252528;color:#fff;border-color:#ffffff33;border-radius:9px}.read-time{color:#a6a6ae}
.sender-avatar{background:linear-gradient(135deg,#5e5e63,#252529);box-shadow:0 0 25px #ffffff14}.sender-meta span{color:#aaaab0}
.email-body{color:#e5e5e8}.reader-bottom{color:#9d9da2}
.notice{border-color:#ffffff65;background:#262629;color:white;box-shadow:0 15px 42px #000d,0 0 25px #ffffff15;border-radius:13px}
.spinning .ico{animation:spin .65s linear infinite}
/* Retain feedback even after network response so animation is perceivable */
.refresh-done .ico{animation:refresh-settle .35s var(--ease)}
@keyframes refresh-settle{from{transform:rotate(-24deg)}to{transform:rotate(0deg)}}
/* Responsive */
@media(max-width:1050px){.rail:hover,.rail:focus-within{flex-basis:178px;width:178px}.mail-columns{gap:11px}.inbox-panel{width:345px}}
@media(max-width:760px){.fm-app-body{overflow:auto}.mail-shell{padding:10px;display:block}.rail,.rail:hover,.rail:focus-within{flex-direction:row;width:auto;flex-basis:auto;height:62px;padding:6px 10px;overflow:visible}.rail-brand{width:38px;min-height:38px;padding-left:8px;margin:0}.rail-wordmark,.rail-label{display:none}.rail-nav{flex-direction:row;width:auto;gap:5px}.rail-btn{width:40px;height:40px;justify-content:center;padding:0}.rail-btn:hover{transform:translateY(-2px)}.rail-signout{width:auto;margin-left:auto}.mail-topbar{overflow:visible}.search-wrap{min-width:0}.mail-columns{height:calc(100dvh - 153px)}.inbox-panel,.read-panel{border-radius:20px}.read-panel.is-open{border-radius:20px}.sort-trigger{min-width:114px}.sort-menu{min-width:150px}.search-suggestions{min-width:min(82vw,300px);right:0;left:auto}}
@media(max-width:460px){.auth-card{padding:29px 21px 0;border-radius:22px}.auth-card-footer{margin:0 -21px}.otp-cells{gap:5px}.otp-wrap{height:59px}.inbox-header{flex-wrap:wrap;gap:14px}.heading-row h1{font-size:22px}.filter-pill{padding:9px 10px}.search-wrap kbd{display:none}}
@media(hover:none){.rail:hover{width:70px;flex-basis:70px}.rail-wordmark,.rail-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.fm-app-body::after,.fm-auth::after{display:none}}