:root { --ink:#1a2841; --muted:#8791a4; --blue:#3b68ee; --line:#edf0f5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#e8edf4; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; }
button,a { -webkit-tap-highlight-color:transparent; }
button { border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:.15rem solid var(--blue); outline-offset:.2rem; }
.app-shell { width:min(100%,30rem); margin:auto; background:#f4f6fa; min-height:100dvh; }
.app-content { padding:1.15rem 1.1rem calc(6rem + env(safe-area-inset-bottom)); }
.app-head { display:flex; align-items:center; gap:.6rem; }
.brand-mark { width:2.35rem; height:2.35rem; border-radius:.8rem; display:grid; place-items:center; background:linear-gradient(140deg,#2e57e2,#638bff); color:white; box-shadow:0 .35rem .8rem #3b68ee25; font-size:1.1rem; flex-shrink:0; }
.brand-copy { flex:1; }
.brand-copy h1 { font-size:1rem; font-weight:750; margin:0 0 .2rem; }
.brand-copy span { font-size:.58rem; color:var(--muted); letter-spacing:.05rem; }
.notification,.avatar { width:2.3rem; height:2.3rem; display:grid; place-items:center; flex-shrink:0; }
.notification { position:relative; font-size:1.15rem; }
.notification b { position:absolute; width:.3rem; height:.3rem; border-radius:50%; background:#f47770; top:.4rem; right:.55rem; }
.avatar { border-radius:50%; background:#e5eaff; color:#5064b1; font-size:.8rem; font-weight:700; width:1.85rem; height:1.85rem; }
.hero-card { position:relative; isolation:isolate; height:14.5rem; border-radius:1.1rem; overflow:hidden; background:#16304a url('assets/business-morning-v2.webp') center/cover; color:white; box-shadow:0 .6rem 1.2rem #253e6120; }
.hero-card video,.hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero-shade { background:linear-gradient(90deg,#09233ee8,#12294065 57%,#16304a10),linear-gradient(0deg,#0a253ac4,transparent 45%); z-index:-1; }
.hero-top,.hero-bottom { position:absolute; left:1rem; right:1rem; display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.hero-top { top:.9rem; font-size:.57rem; color:#f0f6ff; }
.hero-top>span:first-child { display:flex; align-items:center; gap:.35rem; }
.live-dot { width:.3rem; height:.3rem; border-radius:50%; background:#91e0bd; box-shadow:0 0 .45rem #91e0bd80; }
.film-label { padding:.15rem .3rem; background:#ffffff18; border:1px solid #ffffff30; border-radius:.3rem; font-size:.5rem; }
.hero-copy { position:absolute; left:1rem; top:3.8rem; }
.hero-copy p { font-size:1.42rem; line-height:1.5; font-weight:700; letter-spacing:-.03rem; margin:0 0 .5rem; }
.hero-copy>span { color:#d1ddeb; font-size:.57rem; }
.hero-bottom { bottom:.85rem; }
.film-button { display:flex; align-items:center; gap:.4rem; font-size:.65rem; padding:.3rem 0; }
.film-button>i { font-size:1.2rem; }
.film-button>span { color:#c6d7e4; font-size:.55rem; }
.video-toggle { border-radius:50%; background:#ffffff20; border:1px solid #ffffff45; width:2rem; height:2rem; display:grid; place-items:center; }
.overview { border-radius:1rem; background:white; margin-top:.85rem; padding:1rem .8rem; box-shadow:0 .25rem 1rem #243f6310; }
.overview-title { display:flex; justify-content:space-between; align-items:center; padding:0 .2rem .75rem; }
.overview-title h2 { font-size:.75rem; font-weight:700; margin:0; }
.overview-title>span { font-size:.55rem; color:#2b9b7a; }
.metric-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; }
.metric-grid button { text-align:left; padding:0 .65rem; min-width:0; border-left:1px solid var(--line); }
.metric-grid button:first-child { padding-left:.2rem; border:0; }
.metric-grid button:last-child { padding-right:0; }
.metric-grid button>span { font-size:.56rem; color:var(--muted); display:block; white-space:nowrap; }
.metric-grid button>span i { font-size:.45rem; }
.metric-grid strong { font-size:clamp(1rem,5vw,1.5rem); font-weight:750; display:block; margin:.4rem 0 .3rem; white-space:nowrap; letter-spacing:-.035rem; }
.metric-grid strong small { font-size:.55rem; font-weight:500; margin:0 .08rem; }
.metric-grid em { font-size:.55rem; color:#209e7c; font-style:normal; display:flex; flex-wrap:wrap; gap:.15rem .3rem; }
.metric-grid em span { color:#9ba5b6; font-size:.5rem; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:1.15rem 0; gap:.3rem; }
.quick-grid a { display:grid; justify-items:center; gap:.45rem; font-size:.64rem; }
.quick-icon { width:2.65rem; height:2.65rem; display:grid; place-items:center; border-radius:.9rem; font-size:1.25rem; }
.blue { background:#eaf0ff; color:#4775ed; }
.violet { background:#eeebff; color:#8b6bd7; }
.amber { background:#fff0dc; color:#d39c37; }
.teal { background:#e1f5ef; color:#3b9f8d; }
.focus-card { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(110deg,#e9efff,#edf3ff 60%,#e0e9ff); border:1px solid #e0e7fa; border-radius:.9rem; padding:.85rem 1rem; scroll-margin-top:1rem; }
.focus-heading { display:flex; align-items:center; justify-content:space-between; font-size:.57rem; color:#5574c2; }
.focus-heading>span:last-child { font-size:.5rem; color:#8496bb; }
.focus-card h2 { font-size:.84rem; margin:.65rem 0 .35rem; font-weight:700; }
.focus-card p { color:#7687a9; font-size:.6rem; margin-bottom:.6rem; }
.focus-card button { color:#4f71cf; font-size:.58rem; padding:0; }
.focus-card button i { margin-left:.4rem; }
.focus-deco { position:absolute; z-index:-1; right:-.8rem; bottom:-1rem; font-size:6rem; color:#b3c8ff40; transform:rotate(-20deg); }
.section-block { margin-top:1.35rem; scroll-margin-top:1rem; }
.section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.section-title h2 { margin:0; font-size:.9rem; font-weight:750; }
.section-title h2 span { color:#557be4; background:#e7edfd; padding:.08rem .3rem; border-radius:.3rem; font-size:.58rem; margin-left:.25rem; }
.section-title>span,.section-title>button { color:var(--muted); font-size:.56rem; padding:0; }
.todo-list { background:white; border-radius:.9rem; padding:0 .8rem; }
.todo { display:flex; align-items:center; width:100%; gap:.6rem; padding:.85rem 0; text-align:left; border-bottom:1px solid var(--line); }
.todo:last-child { border:0; }
.todo>i:first-child { flex-shrink:0; width:2rem; height:2rem; display:grid; place-items:center; border-radius:.65rem; font-size:1rem; }
.todo>span { display:grid; gap:.3rem; flex:1; min-width:0; }
.todo strong { font-size:.65rem; font-weight:600; }
.todo small { font-size:.52rem; color:var(--muted); }
.todo>b { font-weight:500; color:#d77d60; background:#fff1e9; padding:.15rem .3rem; border-radius:.25rem; font-size:.5rem; }
.arrow { font-size:.55rem; color:#a7b1c2; }
.project-card { display:flex; align-items:center; text-align:left; gap:.75rem; padding:1rem .85rem; background:white; border-radius:.9rem; width:100%; }
.project-symbol { width:2.5rem; height:2.8rem; display:grid; place-items:center; background:#edf2ff; color:#6482d9; border-radius:.65rem; font-size:1.25rem; }
.project-card>div { flex:1; }
.project-card strong { display:block; font-size:.7rem; margin-bottom:.4rem; }
.project-card div>span { display:flex; justify-content:space-between; font-size:.5rem; color:var(--muted); }
.project-card b { color:#5d7ad1; font-weight:500; }
.progress { height:.25rem; margin-top:.5rem; background:#edf1fb; }
.progress-bar { border-radius:.25rem; background:linear-gradient(90deg,#5279e9,#96b1ff); }
.project-card>i { font-size:.6rem; color:#a7b1c2; }
.editorial-card { display:block; width:100%; height:9rem; position:relative; isolation:isolate; border-radius:.9rem; overflow:hidden; text-align:left; color:white; padding:1rem; }
.editorial-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 57%; z-index:-2; }
.editorial-card::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#102942e6,#10294212); z-index:-1; }
.editorial-copy { display:grid; gap:.5rem; position:absolute; bottom:1rem; }
.editorial-copy small { font-size:.45rem; letter-spacing:.1rem; color:#c2d6eb; }
.editorial-copy strong { font-size:.95rem; }
.editorial-copy>span { font-size:.5rem; color:#cad8e7; }
.editorial-play { position:absolute; right:1rem; top:3.1rem; display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:50%; border:1px solid #ffffff80; background:#ffffff20; font-size:1.5rem; }
.page-footer { text-align:center; color:#9ba6b9; margin-top:1.5rem; font-size:.5rem; }
.page-footer p { font-size:.45rem; margin-top:.4rem; }
.app-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,30rem); display:grid; grid-template-columns:repeat(5,1fr); padding:.7rem .35rem calc(.65rem + env(safe-area-inset-bottom)); background:#ffffffed; backdrop-filter:blur(16px); border-top:1px solid #e9edf5; z-index:5; }
.app-nav a,.app-nav button { display:grid; justify-items:center; gap:.25rem; color:#9ba6ba; font-size:.55rem; padding:0; }
.app-nav i { font-size:1.15rem; }
.app-nav .active { color:var(--blue); }
#home,#overview { scroll-margin-top:1rem; }
dialog { width:min(calc(100% - 2rem),26rem); max-height:85dvh; overflow-y:auto; border:0; border-radius:1.1rem; padding:1.25rem; color:var(--ink); box-shadow:0 1rem 4rem #14213933; }
dialog::backdrop { background:#101d37a0; backdrop-filter:blur(6px); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; color:var(--muted); font-size:.65rem; }
.dialog-head button { padding:.4rem; }
dialog h2 { font-size:1.1rem; font-weight:700; margin-bottom:1rem; }
#detailBody { font-size:.8rem; line-height:1.9; color:#6a7890; white-space:pre-line; }
.dialog-confirm { background:var(--blue); color:white; width:100%; padding:.7rem; border-radius:.65rem; margin-top:1.25rem; font-size:.8rem; }
.film-dialog { padding:1rem; }
.film-dialog h2 { margin:0; font-size:1rem; color:var(--ink); }
.film-dialog video { width:100%; border-radius:.65rem; background:#102942; }
.film-dialog p { font-size:.6rem; color:var(--muted); margin:.7rem 0 0; }
body:has(dialog[open]) { overflow:hidden; }
body:has(dialog[open]) .app-content { overflow:hidden; }
@media (min-width:600px) { body { padding:1.5rem; } .app-shell { border:.5rem solid #1b2230; border-radius:2rem; height:calc(100dvh - 3rem); min-height:0; max-height:58rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1.5rem 4rem #1c345333; width:26rem; } .app-content { flex:1; min-height:0; overflow-y:auto; padding-bottom:1rem; scrollbar-width:thin; scrollbar-color:#cdd6e5 transparent; scroll-behavior:smooth; } .app-nav { flex-shrink:0; position:static; transform:none; width:100%; } .app-shell:has(dialog[open]) .app-content { overflow:hidden; } }
@media (max-width:340px) { .app-content { padding-left:.8rem; padding-right:.8rem; } .metric-grid button { padding-left:.4rem; padding-right:.4rem; } .hero-copy p { font-size:1.3rem; } .hero-top { font-size:.52rem; } }
@media (prefers-reduced-motion:reduce) { html,.app-content { scroll-behavior:auto; } }
/* Operation home: neutral business navigation and centered video feature card. */
.app-head{min-height:3.1rem;padding:.15rem .1rem .45rem;border-bottom:1px solid #e9edf3}.brand-mark{width:2.15rem;height:2.15rem;border-radius:.7rem}.notification,.avatar{width:1.85rem;height:1.85rem}.hero-card{width:calc(100% + 1.2rem);height:9.2rem;margin:.2rem -.6rem 0;border-radius:.9rem;box-shadow:0 .4rem .9rem #253e6118}.hero-copy{left:.8rem;top:2.55rem}.hero-copy p{font-size:1rem;line-height:1.28;margin-bottom:.28rem}.hero-copy>span{font-size:.48rem}.hero-top,.hero-bottom{left:.75rem;right:.75rem}.hero-top{top:.6rem;font-size:.49rem}.hero-bottom{bottom:.55rem}.film-button{font-size:.55rem}.film-button>i{font-size:1rem}.video-toggle{width:1.7rem;height:1.7rem}.overview{margin-top:.7rem;padding:.8rem .7rem}.quick-grid{margin:.9rem 0;gap:.2rem}.quick-icon{width:2.3rem;height:2.3rem;border-radius:.75rem}
.hero-card{isolation:isolate;background:#14283c;touch-action:pan-y}.hero-slide{position:absolute;inset:0;z-index:0;visibility:hidden;opacity:0;transition:opacity .55s ease,visibility .55s ease}.hero-slide.active{z-index:1;visibility:visible;opacity:1}.hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%}.hero-slide .hero-shade{inset:0;z-index:0;background:linear-gradient(90deg,#07192ee8 0%,#0c2034b8 43%,#122b421c 100%),linear-gradient(0deg,#091a2eb8,transparent 55%)}.hero-slide .hero-top,.hero-slide .hero-copy{z-index:1}.hero-top .film-label{white-space:nowrap}.hero-bottom{z-index:3}.carousel-controls{display:flex;align-items:center;gap:.25rem}.carousel-controls>button:not(.video-toggle){display:grid;place-items:center;width:1.35rem;height:1.6rem;color:#fff;background:#ffffff18;border:1px solid #ffffff35;border-radius:.4rem;font-size:.55rem}.carousel-dots{display:flex;align-items:center;gap:.23rem;padding:0 .1rem}.carousel-dots button{width:.3rem;height:.3rem;padding:0;border-radius:1rem;background:#ffffff80;transition:width .2s ease,background .2s ease}.carousel-dots button.active{width:.8rem;background:#fff}.carousel-controls .video-toggle{width:1.6rem;height:1.6rem;font-size:.8rem}.film-button{white-space:nowrap}.hero-card:focus-within{outline:.12rem solid #7398ff;outline-offset:.12rem}
@media (prefers-reduced-motion:reduce){.hero-slide,.carousel-dots button{transition:none}}

/* Usable navigation sizing and viewport-contained mockup preview. */
.phone-shell,.app-shell{min-height:0!important}
.bottom-nav,.app-nav{box-sizing:border-box;min-height:4.2rem;padding-block:.42rem max(.48rem,env(safe-area-inset-bottom))}
.bottom-nav button,.bottom-nav a,.app-nav button,.app-nav a{box-sizing:border-box;min-width:2.75rem;min-height:2.85rem;padding:.22rem .12rem;gap:.24rem;font-size:.68rem;line-height:1.15;touch-action:manipulation}
.bottom-nav button>i,.bottom-nav a>i,.app-nav button>i,.app-nav a>i{font-size:1.3rem;line-height:1}
.bottom-nav button.scan,.bottom-nav button.nav-center{min-width:2.9rem;min-height:2.9rem}
.bottom-nav button.scan>i,.bottom-nav button.nav-center>i{font-size:1.35rem}.bottom-nav button.scan>span,.bottom-nav button.nav-center>span{font-size:.58rem}