@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root { --ink:#182230; --muted:#6e7a8e; --line:#e6eaf0; --canvas:#f5f7fa; --paper:#fff; --blue:#2463eb; --soft-blue:#eaf1ff; --accent:#2463eb; --accent-soft:#eaf1ff; --green:#159c63; --radius:16px; }
* { box-sizing:border-box; }
html { min-width:320px; background:#edf1f6; }
body { margin:0; color:var(--ink); background:#edf1f6; font-family:"Noto Sans SC",ui-sans-serif,system-ui,sans-serif; font-size:14px; }
button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid #88b5ff; outline-offset:2px; }
.prototype { width:min(1540px,100%); min-height:100vh; margin:auto; background:var(--canvas); --accent:#2463eb; --accent-soft:#eaf1ff; --nav-bg:#fff; --hero-bg:#fff; --hero-text:#182230; --stat-bg:#fff; }
.topbar { height:74px; padding:0 28px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:19px; text-decoration:none; letter-spacing:-.04em; }.brand em { color:var(--accent); font-style:normal; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#fff; background:var(--accent); }.brand svg,.icon svg,.metric-icon svg { width:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.switcher { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:#f7f8fb; }.style-choice { padding:7px 11px; border:0; border-radius:8px; color:#68758a; background:transparent; font-size:12px; font-weight:600; }.style-choice.active { color:var(--ink); background:#fff; box-shadow:0 1px 5px #c9d0db75; }.profile { justify-self:end; display:flex; align-items:center; gap:8px; padding:5px 7px 5px 5px; color:#344054; border:1px solid var(--line); border-radius:11px; background:#fff; }.avatar,.large-avatar,.initial { display:grid; place-items:center; border-radius:50%; font-weight:700; }.avatar { width:27px; height:27px; color:#fff; background:#f26e49; }.chevron { color:#8993a3; }
.intro { display:flex; justify-content:space-between; gap:28px; padding:36px 44px 30px; color:var(--hero-text); background:var(--hero-bg); border-bottom:1px solid var(--line); }.crumb { margin:0 0 9px; color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; }.intro h1 { max-width:670px; margin:0; font-size:32px; letter-spacing:-.055em; line-height:1.18; }.intro > div > p:last-child { max-width:650px; margin:11px 0 0; color:var(--muted); line-height:1.65; }.intro-actions,.section-actions { display:flex; align-items:center; gap:10px; }.intro-actions { align-self:flex-end; }.button { min-height:38px; padding:0 14px; border-radius:10px; border:1px solid transparent; font-weight:600; }.button.primary { color:#fff; background:#2463eb; background:var(--accent,#2463eb); }.button.secondary { color:#344054; border-color:var(--line); background:#fff; }.button:hover { filter:brightness(.97); }
.status-strip { display:flex; align-items:center; gap:26px; min-height:52px; padding:0 44px; background:#fbfcfe; border-bottom:1px solid var(--line); color:#617086; font-size:12px; }.status-strip div { display:flex; align-items:center; gap:7px; }.status-strip strong { margin-left:3px; color:#26344a; }.status-dot { width:7px; height:7px; border-radius:50%; }.status-dot.good { background:#21af75; box-shadow:0 0 0 3px #daf5e9; }.status-dot.warm { background:#efad2d; box-shadow:0 0 0 3px #fff1d1; }.quiet-button { margin-left:auto; padding:0; color:var(--accent); border:0; background:none; font-weight:600; }.quiet-button span { margin-left:6px; }
.app-layout { display:grid; grid-template-columns:244px minmax(0,1fr); }.sidebar { min-height:calc(100vh - 204px); padding:24px 16px; background:var(--nav-bg); border-right:1px solid var(--line); }.nav-label { margin:0 11px 9px; color:#9ca6b5; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }.nav-label.lower { margin-top:26px; }.nav-item { display:flex; align-items:center; width:100%; min-height:42px; padding:0 11px; gap:10px; border:0; border-radius:10px; color:#5a687d; background:transparent; text-align:left; }.nav-item:hover { color:var(--accent); background:var(--accent-soft); }.nav-item.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }.nav-item b { margin-left:auto; font-size:11px; }.icon { display:grid; place-items:center; width:18px; }.icon svg { width:17px; }.side-help { display:flex; gap:10px; margin:40px 7px 0; padding:13px 10px; border-radius:12px; background:#f3f6fb; color:#4e5d72; }.side-help > span { display:grid; flex:0 0 21px; place-items:center; width:21px; height:21px; color:#fff; border-radius:50%; background:var(--accent); font-weight:700; }.side-help strong,.side-help small { display:block; }.side-help strong { font-size:12px; }.side-help small { margin-top:2px; color:#8290a2; font-size:11px; }
.content { min-width:0; padding:32px 38px 60px; }.content-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }.content-head h2,.panel h3 { margin:0; letter-spacing:-.035em; }.content-head h2 { font-size:21px; }.content-head p,.panel-heading p { margin:5px 0 0; color:var(--muted); font-size:12px; }.date-chip { padding:7px 10px; color:#617086; border:1px solid var(--line); border-radius:9px; background:#fff; font-family:"DM Mono",monospace; font-size:11px; }.date-chip span { margin-left:7px; }.view { display:none; }.view.active { display:block; }.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }.metric,.panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 7px 19px rgba(23,38,63,.025); }.metric { position:relative; display:flex; align-items:flex-start; gap:13px; min-height:124px; padding:20px; overflow:hidden; }.metric::after { position:absolute; right:-22px; bottom:-38px; width:110px; height:110px; border-radius:50%; background:var(--accent-soft); content:""; opacity:.6; }.metric-icon { display:grid; place-items:center; z-index:1; width:35px; height:35px; border-radius:10px; }.metric-icon.blue { color:#2463eb; background:#eaf1ff; }.metric-icon.violet { color:#8454e8; background:#f0eafd; }.metric-icon.amber { color:#cc8414; background:#fff3da; }.metric small,.metric span { display:block; color:var(--muted); font-size:12px; }.metric strong { display:inline-block; margin:5px 8px 0 0; font-size:25px; letter-spacing:-.05em; }.metric .positive { display:inline; color:#159c63; font-size:11px; }.metric-note { position:absolute; right:18px; bottom:17px; z-index:1; }.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(310px,.85fr); gap:16px; }.panel { padding:21px; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:17px; }.panel h3 { font-size:16px; }.text-button { padding:0; color:var(--accent); border:0; background:none; font-weight:600; }.delivery-list { border-top:1px solid var(--line); }.delivery { display:grid; grid-template-columns:1.35fr 18px 1.25fr auto auto 65px; align-items:center; gap:7px; min-height:54px; border-bottom:1px solid var(--line); font-size:12px; }.mail-source,.recipient { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mail-source { color:#58677c; }.recipient { color:#22314a; font-weight:600; }.arrow { color:#a9b2bf; }.path,.pill { display:inline-flex; align-items:center; justify-content:center; min-height:23px; padding:0 8px; border-radius:6px; font-size:10px; font-weight:600; white-space:nowrap; }.path.admin { color:#53657d; background:#eef1f5; }.path.child { color:#6b3ccd; background:#f0eafd; }.delivery time { color:#9ba5b4; font-size:10px; text-align:right; }.rule-preview label { display:block; margin:5px 0 7px; color:#57667b; font-size:12px; font-weight:600; }.route-input { display:flex; padding:4px; border:1px solid #cfd7e4; border-radius:10px; }.route-input input { min-width:0; flex:1; padding:6px 7px; border:0; color:#24324a; outline:0; }.route-input button { padding:0 11px; color:#fff; border:0; border-radius:7px; background:var(--accent); font-weight:600; }.route-result { display:flex; gap:10px; margin-top:16px; padding:13px; border-radius:11px; background:#effbf5; }.check { display:grid; flex:0 0 22px; place-items:center; width:22px; height:22px; color:#fff; border-radius:50%; background:#1aad71; font-size:12px; font-weight:700; }.check.neutral { background:#71829a; }.route-result strong { font-size:12px; }.route-result p { margin:3px 0 0; color:#577065; font-size:11px; }.route-result code,.rules-table code,.log-row code { color:#52627a; font-family:"DM Mono",monospace; font-size:11px; }.hint { margin:14px 0 0; color:#8591a2; font-size:11px; }.section-actions { justify-content:space-between; margin-bottom:17px; }.filters { display:flex; gap:6px; }.filter { padding:7px 11px; color:#657389; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:12px; }.filter.active { color:var(--accent); border-color:#b8cffb; background:var(--accent-soft); }.domain-table { padding:0; overflow:hidden; }.table-head,.table-row { display:grid; grid-template-columns:1.4fr .95fr 1.3fr .75fr .5fr; align-items:center; gap:18px; padding:17px 21px; }.table-head { color:#8994a4; background:#fbfcfe; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; }.table-row { min-height:62px; border-bottom:1px solid var(--line); }.table-row:last-child { border:0; }.table-row strong { font-size:13px; }.pill.good { color:#138858; background:#e6f8ef; }.pill.violet { color:#7440da; background:#f1ebfe; }.accounts-layout { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(420px,1.7fr); gap:16px; }.admin-card > p { margin:0; color:var(--accent); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.08em; }.identity { display:flex; align-items:center; gap:12px; margin:17px 0 22px; }.large-avatar { width:44px; height:44px; color:#fff; background:#f26e49; font-size:19px; }.identity h3 { margin:0; font-size:15px; }.identity p { margin:4px 0 0; color:var(--muted); font-size:11px; }.admin-stat { display:flex; align-items:baseline; gap:8px; padding:15px 0; border-top:1px solid var(--line); }.admin-stat strong { font-size:22px; }.admin-stat span { color:var(--muted); font-size:11px; }.wide { width:100%; margin-top:7px; }.count { color:#7c899b; font-size:11px; }.account-row { display:grid; grid-template-columns:34px 1fr auto 22px; align-items:center; gap:11px; padding:13px 0; border-top:1px solid var(--line); }.initial { width:31px; height:31px; color:#fff; font-size:12px; }.initial.coral { background:#df755d; }.initial.indigo { background:#6877da; }.initial.green { background:#39a77c; }.account-row strong,.account-row span:not(.initial):not(.pill) { display:block; }.account-row strong { font-size:12px; }.account-row div span { margin-top:3px; color:var(--muted); font-size:10px; }.more { color:#8b96a5; border:0; background:none; }.rule-explainer,.inline-note { display:flex; align-items:center; gap:8px; margin:0; color:#607086; font-size:12px; }.rule-explainer .check { width:18px; height:18px; font-size:10px; }.rule-grid { grid-template-columns:1.25fr 1fr 1.25fr .7fr .4fr; }.toggle { color:#159c63; font-size:11px; font-weight:600; }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.settings-grid .panel h3 { margin-bottom:10px; }.setting { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; border-top:1px solid var(--line); }.setting strong { font-size:13px; }.setting p { margin:4px 0 0; color:var(--muted); font-size:11px; }.toggle-button { padding:6px 10px; color:#158a5b; border:0; border-radius:7px; background:#e9f9f0; font-size:11px; font-weight:600; }.logs { padding:0; overflow:hidden; }.logs .panel-heading { padding:21px 21px 4px; }.log-row { display:grid; grid-template-columns:.7fr 1.5fr 1.2fr 1.2fr .5fr; gap:14px; align-items:center; padding:14px 21px; border-top:1px solid var(--line); font-size:12px; }.log-head { color:#8792a2; background:#fbfcfe; font-size:11px; }.log-row time { color:#758297; }
/* Direction 02: compact operations console */
[data-theme="console"] { --accent:#22b67a; --accent-soft:#e4f8ef; --canvas:#101722; --paper:#161f2e; --line:#293548; --ink:#edf3fa; --muted:#99a8ba; --nav-bg:#111925; --hero-bg:#111925; --hero-text:#edf3fa; --stat-bg:#161f2e; }.prototype[data-theme="console"] .topbar,.prototype[data-theme="console"] .status-strip,.prototype[data-theme="console"] .table-head,.prototype[data-theme="console"] .log-head { background:#111925; }.prototype[data-theme="console"] .button.secondary,.prototype[data-theme="console"] .date-chip,.prototype[data-theme="console"] .filter,.prototype[data-theme="console"] .profile { color:#dce6f1; border-color:#334056; background:#192332; }.prototype[data-theme="console"] .switcher { border-color:#354257; background:#182231; }.prototype[data-theme="console"] .style-choice.active { color:#edf3fa; background:#2a374a; box-shadow:none; }.prototype[data-theme="console"] .metric-icon.blue { color:#4d9dff; background:#1d3456; }.prototype[data-theme="console"] .metric-icon.violet { color:#b399ff; background:#332c5a; }.prototype[data-theme="console"] .metric-icon.amber { color:#f6c45a; background:#443820; }.prototype[data-theme="console"] .metric::after { background:#213d37; }.prototype[data-theme="console"] .nav-item { color:#9eacc0; }.prototype[data-theme="console"] .nav-item.active,.prototype[data-theme="console"] .nav-item:hover { color:#8af0c2; background:#1d3a36; }.prototype[data-theme="console"] .delivery,.prototype[data-theme="console"] .recipient { color:#dce6f1; }.prototype[data-theme="console"] .mail-source { color:#a5b3c5; }.prototype[data-theme="console"] .path.admin { color:#b6c3d4; background:#2c384a; }.prototype[data-theme="console"] .route-input { border-color:#3d4a61; }.prototype[data-theme="console"] .route-input input { color:#e7eef8; background:#161f2e; }.prototype[data-theme="console"] .route-result { background:#17382f; }.prototype[data-theme="console"] .route-result p { color:#b2d7c7; }.prototype[data-theme="console"] .side-help { background:#1a2938; }.prototype[data-theme="console"] .pill.good { background:#153c31; }.prototype[data-theme="console"] .pill.violet { background:#372d5d; }.prototype[data-theme="console"] .prototype { background:#101722; }
/* Direction 03: people-centered studio */
[data-theme="studio"] { --accent:#d35f43; --accent-soft:#fff0eb; --canvas:#fbf8f4; --paper:#fffdf9; --line:#eadfd6; --ink:#312821; --muted:#7d7168; --nav-bg:#f5eee7; --hero-bg:#f8ede5; --hero-text:#312821; }.prototype[data-theme="studio"] .topbar { background:#fffaf5; }.prototype[data-theme="studio"] .status-strip,.prototype[data-theme="studio"] .table-head,.prototype[data-theme="studio"] .log-head { background:#fffaf5; }.prototype[data-theme="studio"] .brand-mark,.prototype[data-theme="studio"] .button.primary,.prototype[data-theme="studio"] .route-input button { background:#d35f43; }.prototype[data-theme="studio"] .crumb,.prototype[data-theme="studio"] .text-button,.prototype[data-theme="studio"] .quiet-button { color:#be4d32; }.prototype[data-theme="studio"] .metric::after { background:#f9d9ca; }.prototype[data-theme="studio"] .metric-icon.blue { color:#b34a32; background:#ffe9de; }.prototype[data-theme="studio"] .metric-icon.violet { color:#8d5b38; background:#f8ebd4; }.prototype[data-theme="studio"] .metric-icon.amber { color:#bd7216; background:#fff1d3; }.prototype[data-theme="studio"] .nav-item.active,.prototype[data-theme="studio"] .nav-item:hover { color:#b84c33; background:#fff2ec; }.prototype[data-theme="studio"] .side-help { background:#f3e6dc; }.prototype[data-theme="studio"] .side-help > span { background:#d35f43; }.prototype[data-theme="studio"] .filter.active { color:#b84c33; border-color:#f0b7a6; background:#fff0eb; }
.domain-modal { width:min(510px,calc(100% - 32px)); padding:0; color:var(--ink); border:0; border-radius:18px; box-shadow:0 25px 70px #11182766; }.domain-modal::backdrop { background:#17203380; }.domain-modal form { position:relative; padding:30px; }.domain-modal h2 { margin:0; font-size:23px; letter-spacing:-.04em; }.domain-modal form > p:not(.crumb) { margin:9px 0 25px; color:var(--muted); line-height:1.6; }.domain-modal label { display:block; margin:14px 0 7px; font-size:12px; font-weight:600; }.domain-modal input { width:100%; padding:10px 11px; color:var(--ink); border:1px solid var(--line); border-radius:9px; }.close { position:absolute; top:16px; right:17px; width:30px; height:30px; color:#7d8998; border:0; border-radius:7px; background:#f4f6f8; font-size:22px; line-height:1; }.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:25px; }.toast { position:fixed; right:28px; bottom:28px; transform:translateY(15px); z-index:5; padding:12px 15px; color:#fff; border-radius:10px; background:#1c2a40; box-shadow:0 12px 30px #1720334d; opacity:0; transition:.2s ease; pointer-events:none; }.toast.visible { transform:translateY(0); opacity:1; }
@media (max-width:980px) { .topbar { grid-template-columns:1fr auto; }.switcher { position:absolute; top:80px; left:24px; z-index:2; }.profile { grid-column:2; }.intro { padding-top:70px; }.dashboard-grid,.accounts-layout { grid-template-columns:1fr; }.metrics { grid-template-columns:repeat(3,1fr); }.app-layout { grid-template-columns:210px minmax(0,1fr); }.content { padding:26px; }.status-strip { padding:0 26px; gap:12px; }.status-strip div:nth-child(3) { display:none; } }
@media (max-width:720px) { .topbar { height:62px; padding:0 16px; }.brand { font-size:16px; }.brand-mark { width:29px; height:29px; }.profile > span:not(.avatar) { display:none; }.switcher { top:68px; left:12px; right:12px; justify-content:space-between; }.style-choice { flex:1; padding:7px 4px; font-size:10px; }.intro { display:block; padding:62px 18px 22px; }.intro h1 { font-size:27px; }.intro-actions { margin-top:20px; }.status-strip { display:grid; grid-template-columns:1fr 1fr; min-height:84px; padding:12px 18px; }.status-strip .quiet-button { margin-left:0; text-align:left; }.app-layout { display:block; }.sidebar { display:flex; gap:3px; min-height:auto; overflow:auto; padding:8px 12px; border-bottom:1px solid var(--line); border-right:0; }.nav-label,.nav-item b,.side-help { display:none; }.nav-item { flex:0 0 auto; width:auto; min-height:37px; padding:0 9px; font-size:12px; }.content { padding:22px 16px 38px; }.content-head { margin-bottom:17px; }.content-head h2 { font-size:19px; }.date-chip { display:none; }.metrics { grid-template-columns:1fr; gap:10px; }.metric { min-height:93px; }.dashboard-grid { gap:10px; }.panel { padding:16px; }.delivery { grid-template-columns:1fr 14px 1fr; gap:5px; padding:9px 0; }.delivery .path,.delivery time { display:none; }.route-input input { width:0; }.section-actions { align-items:flex-start; }.table-head { display:none; }.table-row,.table-row.rule-grid { grid-template-columns:1fr auto; gap:7px; padding:15px; }.table-row > span:nth-of-type(2),.table-row > span:nth-of-type(3),.table-row > strong + span { display:none; }.rule-grid code + span { display:none; }.settings-grid { grid-template-columns:1fr; }.log-row { grid-template-columns:1fr auto; padding:13px 15px; }.log-row > *:nth-child(3),.log-row > *:nth-child(4) { display:none; }.log-head { display:none; }.inline-note { max-width:190px; line-height:1.5; }.accounts-layout { grid-template-columns:1fr; }.intro-actions .button { flex:1; }.button { min-height:40px; } }

/* Browser mailbox workspace */
.mailbox-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:14px; }.compose { min-width:112px; min-height:38px; color:#fff; border:0; border-radius:9px; background:var(--accent); font-weight:600; }.mail-search { display:flex; align-items:center; flex:1; max-width:410px; padding:0 10px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:#8996a7; }.mail-search input { width:100%; height:37px; padding:0 8px; color:var(--ink); border:0; outline:0; background:transparent; }.icon-button { display:grid; place-items:center; width:38px; height:38px; color:#657287; border:1px solid var(--line); border-radius:9px; background:var(--paper); }.mailbox-shell { display:grid; grid-template-columns:160px 355px minmax(390px,1fr); min-height:590px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }.mail-folders { padding:14px 9px; border-right:1px solid var(--line); background:var(--nav-bg); }.folder { display:flex; justify-content:space-between; width:100%; min-height:36px; padding:0 10px; color:var(--muted); border:0; border-radius:7px; background:transparent; text-align:left; }.folder.active { color:var(--accent); background:var(--accent-soft); font-weight:600; }.folder b { font-size:11px; }.folder-account { display:flex; align-items:center; gap:7px; margin:23px 5px 0; padding:12px 0; border-top:1px solid var(--line); }.folder-account .avatar { width:25px; height:25px; font-size:11px; }.folder-account strong,.folder-account small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.folder-account strong { max-width:100px; font-size:10px; }.folder-account small { margin-top:3px; color:var(--muted); font-size:9px; }.mail-list { border-right:1px solid var(--line); }.mail-list-head { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:9px; min-height:56px; padding:0 15px; border-bottom:1px solid var(--line); }.mail-list-head strong { font-size:15px; }.mail-list-head > span { color:var(--muted); font-size:10px; }.mail-list-head div { display:flex; gap:4px; }.mail-list-head button { width:22px; height:22px; padding:0; color:#758296; border:0; border-radius:5px; background:transparent; }.mail-row { position:relative; display:grid; grid-template-columns:1fr auto; width:100%; min-height:85px; padding:13px 15px 11px; color:var(--ink); border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; }.mail-row:hover { background:#f9fbff; }.mail-row.selected { background:var(--accent-soft); }.mail-row.selected::before { position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--accent); content:""; }.mail-row .sender { color:#5f6e82; font-size:11px; }.mail-row .subject { overflow:hidden; margin-top:5px; font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.mail-row time { color:#7d899b; font-size:10px; }.mail-row small { grid-column:1/-1; overflow:hidden; margin-top:8px; color:#8c98a8; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.mail-detail { min-width:0; }.mail-actions { display:flex; gap:6px; min-height:56px; padding:10px 16px; border-bottom:1px solid var(--line); }.mail-actions button { min-height:31px; padding:0 9px; color:#607087; border:1px solid var(--line); border-radius:7px; background:var(--paper); font-size:11px; }.mail-content { max-width:690px; padding:26px 30px; }.mail-tag { display:inline-flex; margin:0 0 15px; padding:5px 8px; color:#178b5a; border-radius:5px; background:#e7f8ef; font-size:10px; font-weight:600; }.mail-content h2 { margin:0 0 19px; font-size:23px; letter-spacing:-.04em; }.mail-content dl { margin:0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.mail-content dl div { display:grid; grid-template-columns:52px 1fr; gap:7px; margin:4px 0; font-size:11px; }.mail-content dt { color:#8793a3; }.mail-content dd { margin:0; color:#516076; }.mail-body { padding-top:22px; color:#46566e; line-height:1.65; }.mail-banner { display:flex; align-items:center; justify-content:space-between; height:102px; padding:0 25px; color:#fff; background:linear-gradient(110deg,#16265b,#5d228b); font-size:22px; font-weight:700; letter-spacing:.02em; }.mail-banner span { font-size:12px; font-weight:500; opacity:.8; }.mail-body p { max-width:560px; font-size:13px; }
.prototype[data-theme="console"] .mail-row:hover { background:#1c293a; }.prototype[data-theme="console"] .mail-row.selected { background:#173c34; }.prototype[data-theme="console"] .mail-actions button { color:#c5d0df; border-color:#334056; background:#192332; }.prototype[data-theme="console"] .mail-tag { color:#a4e6c7; background:#174735; }.prototype[data-theme="console"] .mail-content dd,.prototype[data-theme="console"] .mail-body { color:#b8c5d5; }.prototype[data-theme="console"] .mail-search input { color:#eaf0f8; }
@media (max-width:720px) { .mailbox-shell { grid-template-columns:1fr; min-height:0; }.mail-folders { display:flex; gap:4px; overflow:auto; padding:8px; border-right:0; border-bottom:1px solid var(--line); }.folder { flex:0 0 auto; min-height:32px; width:auto; }.folder-account { display:none; }.mail-list { border-right:0; }.mail-detail { display:none; }.mailbox-toolbar { gap:7px; }.compose { min-width:78px; }.mail-search { min-width:0; }.mail-search input { font-size:12px; } }

/* Selection is carried by its surface color, without a decorative side rail. */
.mail-row.selected::before { display:none; }
/* Local control-plane interactions and the mobile message drill-in. */
.mail-back { display: none; }
.profile-wrap { position:relative; justify-self:end; }
.profile-menu { position:absolute; top:calc(100% + 9px); right:0; z-index:8; width:190px; padding:7px; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:0 16px 35px rgba(27,43,68,.16); }
.profile-summary { display:grid; gap:3px; padding:9px 10px 11px; border-bottom:1px solid var(--line); }.profile-summary strong { font-size:12px; }.profile-summary span { color:var(--muted); font-size:11px; }
.profile-menu button { display:block; width:100%; margin-top:3px; padding:9px 10px; color:var(--ink); border:0; border-radius:7px; background:transparent; text-align:left; font-size:12px; }.profile-menu button:hover { background:var(--accent-soft); }.profile-menu button.danger { color:#c64747; }
.guide-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }.guide-head h3 { margin:4px 0 5px; font-size:24px; }.guide-head p:not(.crumb) { max-width:650px; margin:0; color:var(--muted); line-height:1.6; }.dns-guide { padding:0; overflow:hidden; }.dns-guide .panel-heading { padding:21px 21px 4px; }.dns-head,.dns-row { display:grid; grid-template-columns:90px minmax(170px,.9fr) minmax(240px,2fr) minmax(110px,.6fr); gap:12px; align-items:center; padding:14px 21px; border-top:1px solid var(--line); font-size:12px; }.dns-head { color:#8792a2; background:#fbfcfe; font-size:11px; }.dns-row strong { color:var(--accent); }.dns-row code { overflow:hidden; color:#42536d; font-family:"DM Mono",monospace; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.dns-row span { color:var(--muted); font-size:11px; }.connectivity { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; }.connectivity h3 { margin:0 0 5px; }.connectivity p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }.test-result { margin-top:12px; padding:13px 15px; color:#53647a; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:12px; line-height:1.5; }
.account-modal { width:min(460px,calc(100% - 32px)); padding:0; color:var(--ink); border:0; border-radius:18px; box-shadow:0 25px 70px #11182766; }.account-modal::backdrop { background:#17203380; }.account-modal form { position:relative; padding:30px; }.account-modal h2 { margin:0; font-size:23px; letter-spacing:-.04em; }.account-modal label { display:block; margin:14px 0 7px; font-size:12px; font-weight:600; }.account-modal input,.account-modal textarea { width:100%; padding:10px 11px; color:var(--ink); border:1px solid var(--line); border-radius:9px; background:var(--paper); }.account-modal textarea { min-height:118px; resize:vertical; line-height:1.55; }
.login-page { display:grid; min-height:100vh; place-items:center; padding:24px; background:linear-gradient(135deg,#edf4ff,#f7faff 48%,#eaf3ff); }.login-card { width:min(430px,100%); padding:34px; border:1px solid #dce6f3; border-radius:20px; background:#fff; box-shadow:0 24px 70px rgba(36,73,132,.13); }.login-card .brand { margin-bottom:34px; }.login-card h1 { margin:5px 0 8px; font-size:27px; letter-spacing:-.05em; }.login-card > p:not(.crumb):not(.login-note) { margin:0 0 26px; color:var(--muted); line-height:1.6; }.login-card label { display:block; margin:16px 0 7px; font-size:12px; font-weight:600; }.login-card input { width:100%; min-height:44px; padding:0 12px; border:1px solid #ccd8e8; border-radius:9px; }.login-submit { width:100%; margin-top:24px; }.login-note { margin:16px 0 0; color:#7f8da0; font-size:11px; line-height:1.6; }
.top-context { display:flex; align-items:center; gap:10px; padding:4px 5px 4px 12px; color:#52647d; border:1px solid var(--line); border-radius:10px; background:#f8fafc; font-size:12px; font-weight:600; }
.login-mode { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 24px; padding:4px; border-radius:10px; background:#eef3fb; }.login-mode button { min-height:34px; color:#63738a; border:0; border-radius:7px; background:transparent; font-size:12px; font-weight:700; }.login-mode button.active { color:var(--accent); background:#fff; box-shadow:0 1px 4px #afbed14d; }
.login-feedback { min-height:20px; margin:14px 0 -10px; color:#c43d47; font-size:12px; font-weight:600; line-height:1.5; }
.register-link { margin:18px 0 0; color:#718098; font-size:12px; text-align:center; }.register-link a { color:var(--accent); font-weight:700; text-decoration:none; }
.plan-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:8px 30px 30px; }.plan-options button { display:grid; gap:5px; padding:16px; color:var(--ink); border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; }.plan-options button:hover { color:var(--accent); border-color:#a9c6ff; background:var(--accent-soft); }.plan-options span { color:var(--muted); font-size:11px; }
.top-context button { min-height:30px; padding:0 10px; color:#65748a; border:0; border-radius:7px; background:transparent; font-size:12px; font-weight:700; }.top-context button.active { color:var(--accent); background:var(--accent-soft); }
.form-feedback { min-height: 1.4em; margin: 10px 0 0; color: var(--accent, #1d5cc9); font-size: 13px; line-height: 1.55; }
.intro { min-height:136px; padding:23px 44px 20px; }.intro h1 { font-size:28px; }.intro .crumb { margin-bottom:6px; }.intro-actions { margin-bottom:2px; }
.account-modal select { width:100%; padding:10px 11px; color:var(--ink); border:1px solid var(--line); border-radius:9px; background:var(--paper); }.empty-list,.mail-empty { display:grid; gap:5px; padding:22px; color:var(--muted); font-size:12px; line-height:1.55; }.empty-list { border-top:1px solid var(--line); }.mail-empty { place-content:center; min-height:260px; text-align:center; }.mail-empty strong { color:#53647a; font-size:14px; }.mail-empty span { font-size:11px; }
.danger-button { min-height:38px; padding:0 14px; color:#fff; border:1px solid #c9474d; border-radius:10px; background:#c9474d; font-weight:600; }.danger-button:hover { background:#b63b41; }.danger-button:disabled { cursor:not-allowed; opacity:.55; }
.dialog-note,.mailbox-cleanup > p { margin:10px 0 0; color:var(--muted); line-height:1.6; font-size:13px; }.mailbox-cleanup { display:grid; gap:16px; align-content:start; }.mailbox-cleanup .danger-button { justify-self:start; }
.dns-automation { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:13px 20px; align-items:center; margin-top:16px; }.dns-automation h3 { margin:0 0 5px; }.dns-automation p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }.dns-automation-actions { display:flex; gap:8px; align-items:center; }.dns-automation select { width:190px; min-height:38px; padding:0 10px; color:var(--ink); border:1px solid var(--line); border-radius:9px; background:var(--paper); }.dns-automation .form-feedback { grid-column:1/-1; margin:0; }.provider-list { display:grid; gap:8px; margin-top:17px; }.provider-row { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:11px; border:1px solid var(--line); border-radius:9px; background:#fbfcfe; }.provider-row strong,.provider-row small { display:block; }.provider-row strong { font-size:12px; }.provider-row small { margin-top:3px; color:var(--muted); font-size:10px; }.provider-row button { min-height:30px; padding:0 9px; color:var(--accent); border:1px solid #bcd0f8; border-radius:7px; background:var(--accent-soft); font-size:11px; font-weight:600; }
.dns-provider-modal { width:min(560px,calc(100% - 32px)); }.credential-guide { margin:18px 0 4px; border:1px solid #cbdafb; border-radius:11px; background:#f8fbff; }.credential-guide summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; color:#244a8e; cursor:pointer; font-size:12px; font-weight:700; list-style:none; }.credential-guide summary::-webkit-details-marker { display:none; }.guide-icon { display:grid; place-items:center; width:20px; height:20px; color:#fff; border-radius:50%; background:var(--accent); font-size:10px; }.guide-chevron { margin-left:auto; color:#6f83a5; transition:transform .18s ease; }.credential-guide[open] .guide-chevron { transform:rotate(180deg); }.credential-steps { display:grid; gap:0; padding:1px 12px 11px; }.credential-step { display:grid; grid-template-columns:25px 1fr; gap:8px; padding:10px 0; border-top:1px solid #dce7fa; }.credential-step > span { display:grid; place-items:center; width:22px; height:22px; color:var(--accent); border-radius:7px; background:#e8f0ff; font-family:"DM Mono",monospace; font-size:10px; font-weight:700; }.credential-step strong { display:block; color:#2f405a; font-size:12px; }.credential-step p { margin:3px 0 0; color:#65748a; font-size:11px; line-height:1.55; }.credential-step a { display:inline-block; margin-top:4px; color:var(--accent); font-size:11px; font-weight:700; text-decoration:none; }.credential-step code { padding:1px 4px; color:#465b7b; border-radius:3px; background:#eaf0fa; font-family:"DM Mono",monospace; font-size:10px; }
@media (max-width: 720px) {
  .intro { min-height:0; padding:23px 18px 19px; }.intro-actions { margin-top:15px; }
  .top-context { padding:0; border:0; background:transparent; }
  .top-context > span { display:none; }
  .top-context button { padding:0 8px; }
  .mail-back { display: inline-flex; }
  .guide-head,.connectivity { display:grid; grid-template-columns:1fr; }.dns-head { display:none; }.dns-row { grid-template-columns:82px 1fr; padding:14px; }.dns-row .dns-value,.dns-row span { grid-column:2; }.profile-menu { right:-8px; }
  body.mobile-mail-open .mail-folders,
  body.mobile-mail-open .mail-list { display: none; }
  body.mobile-mail-open .mail-detail { display: block; }
  .dns-automation { grid-template-columns:1fr; }.dns-automation-actions { display:grid; grid-template-columns:1fr 1fr; }.dns-automation select { grid-column:1/-1; width:100%; }.dns-automation-actions .button { padding:0 8px; }
  .dns-provider-modal { width:calc(100% - 20px); }.credential-step { grid-template-columns:23px 1fr; }
}

/* Account and rule operations */
.account-row { grid-template-columns:34px minmax(0,1fr) auto auto; }
.account-row > div { min-width:0; }
.account-row > div span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-action { min-height:28px; padding:5px 2px; }
.rule-grid { grid-template-columns:1.25fr 1fr 1.25fr .7fr .7fr; }
.rule-actions { display:flex; align-items:center; gap:9px; }
.danger-text { color:#c64a40; }
.password-row { display:flex; align-items:center; gap:8px; }
.password-row input { min-width:0; flex:1; }
.password-row .button { flex:0 0 auto; padding:9px 11px; }
.field-hint { margin:6px 0 0; color:var(--muted); font-size:11px; }
@media (max-width:720px) { .account-row { grid-template-columns:34px minmax(0,1fr) auto; } .account-action { grid-column:2 / -1; justify-self:start; } .rule-grid { grid-template-columns:1fr; gap:7px; } .table-head.rule-grid { display:none; } .rule-actions { margin-top:3px; } }