:root {
  color-scheme: light;
  --ink: #17221f;
  --muted: #6f7d78;
  --line: #e5ebe8;
  --surface: #ffffff;
  --soft: #ffffff;
  --green: #1677e8;
  --green-soft: #eef6ff;
  --purple: #6652b8;
  --shadow: 0 4px 18px rgba(20, 28, 38, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--soft); }
a { color: inherit; text-decoration: none; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(22px, calc((100vw - 1248px) / 2)); background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.topbar-inner { width: min(1248px, 100%); display:flex; align-items:center; justify-content:space-between; margin:auto; }
.brand { display: flex; gap: 11px; align-items: center; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { width: 32px; height: 24px; display: block; object-fit: contain; font-size:0; color:transparent; background: url('/assets/elooffice-mark.svg') center/contain no-repeat; }
.nav { display: flex; gap: 26px; align-items: center; color: var(--muted); font-size: 14px; }
.nav a:hover { color: var(--ink); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 17px; border-radius: 8px; border: 1px solid #d9dde2; background: white; font-size: 14px; font-weight: 650; cursor: pointer; }
.button.primary { color: white; background: #111315; border-color: #111315; box-shadow: 0 2px 8px rgba(17,19,21,.15); }
.wrap { width: min(1248px, 92vw); margin: 0 auto; }
.landing-hero { padding: 86px 20px 78px; text-align:center; }
.hero-kicker { color:#737980; font-size:14px; margin:0 0 14px; }
.landing-hero h1 { margin:0; font-size:clamp(54px,8vw,92px); letter-spacing:-.08em; line-height:1; }
.hero-subtitle { display:flex; justify-content:center; gap:25px; margin:24px 0 0; color:#454a50; font-size:16px; }
.hero-copy { color:var(--muted); font-size:18px; margin:20px 0 0; }
.hero-actions { display:flex; justify-content:center; gap:10px; margin-top:28px; }
.platform-note { color:#9aa0a6; font-size:12px; margin-top:16px; }
.product-shot { width:min(1080px,100%); margin:48px auto 0; border:1px solid #dfe3e8; border-radius:15px; box-shadow:0 12px 35px rgba(20,28,38,.1); overflow:hidden; text-align:left; }
.shot-toolbar { height:48px; display:flex; align-items:center; gap:18px; padding:0 18px; background:#f8f9fa; border-bottom:1px solid #e7e9eb; color:#7b8187; font-size:12px; }
.shot-toolbar strong { color:#24282c; font-size:13px; margin-right:auto; }.traffic { display:flex; gap:6px; }.traffic i { width:10px; height:10px; border-radius:50%; background:#d9dde0; }.traffic i:first-child{background:#e9aaa2}.traffic i:nth-child(2){background:#e5c77d}.traffic i:last-child{background:#91cba2}
.shot-content { min-height:345px; display:grid; grid-template-columns:190px 1fr; background:#fff; }.shot-content aside { padding:27px 14px; border-right:1px solid #edf0f2; background:#fbfcfc; }.shot-nav { padding:11px 14px; border-radius:8px; color:#798087; font-size:13px; margin-bottom:4px; }.shot-nav.active { color:#1d252b; background:#eef6ff; font-weight:650; }.shot-content section { padding:36px 52px; }.shot-title { font-size:22px; font-weight:700; margin-bottom:25px; }.shot-files { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.shot-files > div { display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid #e9ecee; border-radius:10px; }.shot-files span { font-size:13px; }.shot-files small { color:#9da3a8; font-size:11px; }.file { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:#fff; font-size:15px; }.file.doc,.type-chip.doc{background:#4d8ee8}.file.sheet,.type-chip.sheet{background:#51a77c}.file.slide,.type-chip.slide{background:#d57e70}
.benefits { padding:75px 0 88px; background:#fafafa; border-top:1px solid #f0f1f2; border-bottom:1px solid #f0f1f2; }.section-wrap { width:min(1120px,90vw); margin:auto; }.benefits h2,.showcase h2 { text-align:center; font-size:32px; letter-spacing:-.05em; margin:0 0 34px; }.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.benefit-grid article { padding:4px 4px; }.feature-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:#fff; border:1px solid #e4e7e9; color:#4d8ee8; font-size:18px; }.benefit-grid h3 { margin:16px 0 8px; font-size:17px; }.benefit-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.showcase { padding:85px 0 45px; }.showcase-row { display:grid; grid-template-columns: .72fr 1.28fr; gap:60px; align-items:center; margin:65px 0 100px; }.showcase-row.reverse { grid-template-columns:1.28fr .72fr; }.showcase-row.reverse .showcase-copy { order:2; }.showcase-copy { padding:20px; }.showcase-copy p { max-width:300px; color:#626a71; font-size:17px; line-height:1.75; margin-top:22px; }.type-chip { display:inline-flex; color:#fff; border-radius:7px; padding:7px 11px; font-size:13px; font-weight:700; }.editor-shot { height:285px; border:1px solid #dfe3e8; border-radius:11px; overflow:hidden; box-shadow:var(--shadow); background:#fff; }.mini-bar { height:35px; padding:10px 14px; background:#f7f8f9; color:#8a9096; border-bottom:1px solid #e8ebed; font-size:10px; }.paper { width:68%; height:195px; margin:25px auto; padding:28px 34px; border:1px solid #eef0f1; box-shadow:0 2px 8px #eef0f1; display:flex; flex-direction:column; gap:16px; }.paper b { font-size:18px; }.paper em { height:7px; display:block; background:#e9edf0; border-radius:5px; }.paper em.short { width:66%; }.grid-lines { display:grid; gap:0; margin:24px; border:1px solid #dfe5e8; color:#69737a; font-size:12px; }.grid-lines * { padding:13px; border-bottom:1px solid #e7ebed; }.grid-lines b { color:#3b8b69; background:#f0f8f4; }.slide-page { width:73%; height:190px; margin:25px auto; padding:40px; background:linear-gradient(135deg,#eff5ff,#fff); border:1px solid #edf0f2; }.slide-page b { display:block; font-size:25px; }.slide-page small { display:block; margin-top:20px; color:#7a8794; }.closing { text-align:center; padding:70px 20px 90px; background:#fafafa; }.closing h2 { font-size:30px; letter-spacing:-.05em; margin:0 0 10px; }.closing p { color:var(--muted); margin:0 0 24px; }
.hero { padding: 86px 0 60px; text-align: center; }
.eyebrow { display: inline-flex; color: var(--muted); background: #f4f5f6; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 650; }
h1 { margin: 20px 0 13px; font-size: clamp(46px, 7vw, 80px); line-height: 1.02; letter-spacing: -.07em; }
.lead { max-width: 610px; margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.7; }
.actions { display: flex; justify-content: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.formats { display:flex; justify-content:center; gap:28px; margin:30px 0 0; color:#62676d; font-size:14px; }
.format { display:flex; align-items:center; gap:7px; }
.format-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:6px; font-size:12px; font-weight:750; color:white; background:#3988e6; }
.format-icon.sheet { background:#4aa77b; }.format-icon.slide { background:#d9806f; }.format-icon.pdf { background:#c75d62; }.format-icon.markdown { background:#8b79c8; }
.app-card { width:min(1060px, 100%); margin:50px auto 0; background: var(--surface); border: 1px solid #dfe3e8; border-radius: 14px; box-shadow: 0 10px 30px rgba(20,28,38,.1); padding: 11px; text-align:left; }
.window { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fbfcfb; }
.window-head { padding: 15px 17px; display:flex; justify-content:space-between; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.window-body { min-height: 315px; padding: 30px 12%; display: grid; align-content:center; gap: 12px; background: linear-gradient(90deg,#fbfcfd 0 22%,#fff 22%); }
.fake-row { height: 12px; border-radius: 8px; background: #e7efeb; }
.fake-row.short { width: 52%; background: #cae8da; }
.feature-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px 0 82px; }
.card { padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.card h3 { margin: 15px 0 8px; font-size: 18px; }
.card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.icon { width: 38px; height: 38px; display:grid; place-items:center; border-radius: 10px; color: var(--green); background: var(--green-soft); font-weight: 800; }
.section { padding: 74px 0; background:#fafafa; border-top:1px solid #f0f1f2; }
.section h2 { margin: 0 0 12px; font-size: 34px; letter-spacing: -.04em; }
.section-intro { color: var(--muted); margin: 0 0 28px; }
.footer { padding: 28px 0 44px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.page { padding: 48px 0 80px; }
.page-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom: 28px; }
.page-head h1 { margin:0; font-size: 38px; }
.page-head p { margin:8px 0 0; color:var(--muted); }
.dashboard { display:grid; grid-template-columns: 230px 1fr; gap: 20px; align-items:start; }
.side-nav { padding: 12px; background:white; border:1px solid var(--line); border-radius:20px; }
.side-nav a { display:block; padding:12px 13px; border-radius:11px; color:var(--muted); font-size:14px; }
.side-nav a.active, .side-nav a:hover { color:var(--green); background:var(--green-soft); font-weight:650; }
.panel-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.metric { font-size: 30px; font-weight: 750; margin-top: 8px; }
.label { color:var(--muted); font-size:13px; }
.notice { padding:16px; background:#fff8e7; color:#88661c; border:1px solid #f3e4bc; border-radius:14px; font-size:14px; line-height:1.6; }
.auth-layout { display:grid; grid-template-columns:1fr 410px; gap:80px; align-items:center; min-height:450px; }.auth-copy h2 { font-size:42px; line-height:1.15; letter-spacing:-.06em; margin:18px 0; }.auth-copy p { max-width:410px; color:var(--muted); line-height:1.75; }.auth-card,.profile-form,.profile-card { padding:28px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }.auth-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; }.auth-tabs button { padding:0 0 12px; border:0; background:none; color:#9aa0a6; font-size:16px; cursor:pointer; }.auth-tabs button.active { color:var(--ink); border-bottom:2px solid var(--ink); font-weight:700; }.auth-card label,.profile-form label { display:block; color:#5f686e; font-size:13px; margin:14px 0; }.auth-card input,.profile-form input { width:100%; height:42px; margin-top:7px; padding:0 12px; border:1px solid #dfe3e6; border-radius:8px; outline:none; font:inherit; }.auth-card input:focus,.profile-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }.code-row { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; }.code-row .button { height:42px; white-space:nowrap; }.full { width:100%; margin-top:10px; }.form-message { min-height:20px; margin:12px 0 0; color:var(--green); font-size:13px; }.form-message.error { color:#c34f4f; }.profile-card { display:flex; align-items:center; gap:17px; margin-bottom:18px; }.profile-card h2 { margin:0 0 5px; font-size:22px; }.profile-avatar { width:58px; height:58px; display:grid; place-items:center; border-radius:16px; color:#fff; background:#17191b; font-size:24px; font-weight:700; }.muted { color:var(--muted); }.small-metric { font-size:22px; }
@media (max-width: 800px) { .nav { display:none; } .landing-hero { padding-top:58px; }.hero-subtitle { gap:12px; font-size:13px; }.shot-content { grid-template-columns:1fr; }.shot-content aside { display:none; }.shot-content section { padding:28px 20px; }.shot-files { grid-template-columns:1fr; }.shot-files > div:nth-child(3) { display:none; }.benefit-grid { grid-template-columns:repeat(2,1fr); }.showcase-row,.showcase-row.reverse { grid-template-columns:1fr; gap:10px; margin:48px 0 70px; }.showcase-row.reverse .showcase-copy { order:0; }.showcase-copy { padding:0; }.editor-shot { height:235px; } .panel-grid { grid-template-columns:1fr; } .dashboard { grid-template-columns:1fr; } .page-head { align-items:start; flex-direction:column; }.auth-layout { grid-template-columns:1fr; gap:28px; }.auth-copy h2 { font-size:34px; }.auth-card { padding:22px; } }

/* Account form: one calm, vertical flow on every screen size. */
.auth-layout { display:block; min-height:0; padding:54px 0 76px; }
.auth-copy { max-width:520px; margin:0 auto 28px; text-align:center; }
.auth-copy .eyebrow { margin:auto; }
.auth-copy h2 { margin:15px 0 10px; font-size:34px; line-height:1.2; }
.auth-copy p { max-width:440px; margin:0 auto; font-size:14px; }
.auth-card { width:min(420px,100%); margin:0 auto; padding:30px; border-radius:18px; box-shadow:0 10px 28px rgba(20,28,38,.08); }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 0 25px; }
.auth-tabs button { width:100%; padding:0 0 13px; }
.auth-card label { margin:0 0 17px; }
.auth-card input { height:46px; margin-top:8px; border-radius:9px; }
.code-row { display:block; }
.code-row label { margin-bottom:9px; }
.code-row .button { width:100%; height:40px; }
.auth-card .full { height:46px; margin-top:5px; border-radius:9px; }
.form-message { text-align:center; }
@media (max-width: 800px) { .auth-layout { padding:38px 0 55px; }.auth-copy h2 { font-size:30px; }.auth-card { padding:24px 20px; } }
/* Markdown showcase */
.file.markdown,.type-chip.markdown{background:#8b79c8}.markdown-page{width:73%;height:210px;margin:18px auto;padding:24px 30px;display:flex;flex-direction:column;gap:10px;color:#59636d;background:#fbfcfe;border:1px solid #edf0f2;font:13px/1.4 ui-monospace,SFMono-Regular,monospace}.markdown-page b{color:#333b43;font-size:18px}.markdown-page span{color:#687d91}.markdown-page i{color:#7b8791;font-style:normal}