:root { --ink:#10243f; --blue:#0b4b9b; --cyan:#15a7a0; --paper:#f2f5f3; --line:#dce5e5; --muted:#71828d; --white:#fff; --danger:#b53c37; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.eyebrow { margin:0 0 10px; color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.16em; }
.subtle { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.login-layout { display:grid; grid-template-columns:minmax(420px,1.12fr) minmax(420px,.88fr); min-height:100vh; }
.login-story { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:8vw; color:#fff; background:#082f69; }
.login-story::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 15%,rgba(42,207,192,.28),transparent 34%),linear-gradient(145deg,transparent 54%,rgba(2,18,46,.58)); }
.story-grid { position:absolute; inset:0; opacity:.23; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:64px 64px; transform:perspective(600px) rotateX(55deg) scale(1.6); transform-origin:center bottom; }
.login-story > *:not(.story-grid) { position:relative; z-index:1; }
.brand-overline { margin:0 0 28px; color:#77e4d9; font-size:12px; letter-spacing:.18em; font-weight:800; }
.login-story h1 { margin:0; max-width:640px; font-size:clamp(46px,5.4vw,84px); line-height:1.04; letter-spacing:-.055em; }
.login-story > p:not(.brand-overline) { max-width:560px; margin:30px 0; color:#c6d8e6; font-size:17px; line-height:1.85; }
.story-proof { display:flex; gap:12px; flex-wrap:wrap; }
.story-proof span { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:8px 13px; font-size:12px; color:#d9e8f1; }
.login-panel { display:grid; place-items:center; padding:50px; background:#f7f8f5; }
.login-card { width:min(390px,100%); }
.monogram { display:grid; place-items:center; width:58px; height:58px; margin-bottom:28px; border-radius:18px 18px 18px 5px; color:#fff; font-size:24px; font-weight:800; background:linear-gradient(145deg,var(--blue),var(--cyan)); }
.monogram.small { width:42px; height:42px; margin:0; border-radius:13px 13px 13px 4px; font-size:18px; }
.login-card h2 { margin:0; font-size:34px; letter-spacing:-.03em; }
.login-card label { display:block; margin-top:24px; color:#41556a; font-size:13px; font-weight:700; }
.login-card input { width:100%; height:50px; margin-top:8px; padding:0 14px; border:1px solid #ced9db; border-radius:10px; outline:none; background:#fff; color:var(--ink); }
.login-card input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,75,155,.1); }
.primary-button, .secondary-button { border:0; border-radius:10px; min-height:42px; padding:0 18px; font-weight:800; }
.primary-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:24px; min-height:52px; color:#fff; background:var(--blue); }
.primary-button.compact { width:auto; min-height:40px; margin:0; padding:0 18px; }
.secondary-button { border:1px solid var(--line); color:#38536a; background:#fff; }
.form-error { min-height:20px; margin:12px 0 -8px; color:var(--danger); font-size:13px; }
.app-layout { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:28px 20px; color:#dbe8f2; background:#092d5e; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:0 8px 34px; }
.sidebar-brand strong, .sidebar-brand small { display:block; }
.sidebar-brand strong { color:#fff; font-size:15px; }
.sidebar-brand small { margin-top:4px; color:#8fabc6; font-size:11px; }
.sidebar nav { display:grid; gap:7px; }
.nav-item { display:flex; align-items:center; gap:13px; width:100%; padding:13px 14px; border:0; border-radius:9px; color:#9eb6cc; text-align:left; background:transparent; }
.nav-item span { color:#4e789f; font:700 10px/1 monospace; }
.nav-item:hover, .nav-item.active { color:#fff; background:rgba(255,255,255,.09); }
.nav-item.active span { color:#60d9ce; }
.sidebar-foot { margin-top:auto; padding:18px 8px 0; border-top:1px solid rgba(255,255,255,.1); color:#9eb6cc; font-size:11px; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#42d2a3; box-shadow:0 0 0 4px rgba(66,210,163,.12); }
.sidebar-foot button { float:right; border:0; color:#9eb6cc; background:none; font-size:11px; }
.workspace { min-width:0; padding:34px clamp(26px,4vw,62px) 70px; }
.topbar { display:flex; justify-content:space-between; align-items:end; margin-bottom:30px; }
.topbar h1 { margin:0; font-size:34px; letter-spacing:-.035em; }
.topbar-meta { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; }
.panel { display:none; }
.panel.active-panel { display:block; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric-grid article { min-height:150px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--white); }
.metric-grid span, .metric-grid small { display:block; color:var(--muted); font-size:12px; }
.metric-grid strong { display:block; margin:20px 0 15px; color:var(--blue); font-size:36px; letter-spacing:-.04em; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:14px; margin-top:14px; }
.surface { border:1px solid var(--line); border-radius:14px; padding:26px; background:#fff; }
.section-head { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:22px; }
.section-head h2 { margin:0; font-size:22px; letter-spacing:-.02em; }
.text-button { border:0; color:var(--blue); background:transparent; font-weight:800; font-size:12px; }
.recent-row { display:grid; grid-template-columns:1fr auto; gap:8px 20px; padding:15px 0; border-top:1px solid #e8eded; }
.recent-row strong { font-size:14px; }
.recent-row span, .recent-row small { color:var(--muted); font-size:12px; }
.status-badge { align-self:start; border-radius:999px; padding:5px 9px; color:#087168 !important; background:#e7f7f4; font-size:11px !important; }
.launch-card { color:#fff; background:#0d3a73; border-color:#0d3a73; }
.launch-card .eyebrow { color:#6ce1d7; }
.launch-card h2 { margin:0 0 24px; }
.launch-card ol { list-style:none; margin:0; padding:0; }
.launch-card li { display:flex; gap:13px; align-items:center; padding:14px 0; border-top:1px solid rgba(255,255,255,.12); color:#d7e3ed; font-size:13px; }
.launch-card li span { color:#69d9d1; font:700 10px/1 monospace; }
.analytics-card { grid-column:1/-1; }
.conversion-rate { color:var(--blue); font-size:32px; letter-spacing:-.04em; }
.funnel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.funnel-grid div, .performance-strip div { padding:16px; border:1px solid var(--line); border-radius:10px; background:#f8fbfa; }
.funnel-grid span, .performance-strip span { display:block; color:var(--muted); font-size:11px; }
.funnel-grid strong { display:block; margin-top:9px; color:var(--blue); font-size:28px; }
.performance-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; }
.performance-strip strong { display:block; margin-top:8px; color:var(--ink); font-size:17px; }
.source-breakdown { margin:16px 0 0; color:var(--muted); font-size:12px; }
.source-breakdown strong { color:var(--ink); }
.filter-label { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
select { height:38px; padding:0 32px 0 11px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:860px; }
th { padding:12px 10px; color:#7b8b95; text-align:left; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.05em; }
td { padding:15px 10px; border-bottom:1px solid #edf1f1; color:#40566b; font-size:12px; vertical-align:top; }
td strong { display:block; margin-bottom:5px; color:var(--ink); font-size:13px; }
td select { height:32px; }
.empty-state { padding:50px 20px; color:var(--muted); text-align:center; }
.editor-actions { display:flex; gap:9px; }
.editor-tabs { display:inline-flex; gap:4px; margin-bottom:28px; padding:4px; border:1px solid var(--line); border-radius:10px; background:#f4f7f6; }
.editor-tabs button { min-height:36px; padding:0 15px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:12px; font-weight:800; }
.editor-tabs button.active { color:#fff; background:var(--blue); }
.visual-editor { display:grid; gap:18px; }
.content-group { padding:24px; border:1px solid var(--line); border-radius:12px; background:#f9fbfa; }
.content-group-head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:20px; }
.content-group-head > div { display:flex; align-items:center; gap:11px; }
.content-group-head span { color:var(--cyan); font:800 10px/1 "Cascadia Code",Consolas,monospace; }
.content-group-head h3 { margin:0; font-size:17px; }
.content-group-head p { margin:0; color:var(--muted); font-size:11px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.content-field { min-width:0; color:#536a7b; font-size:11px; font-weight:800; }
.content-field > span { display:block; margin-bottom:7px; }
.content-field input, .content-field textarea { width:100%; border:1px solid #cad7da; border-radius:8px; padding:10px 11px; outline:none; color:var(--ink); background:#fff; font-size:13px; font-weight:500; line-height:1.55; }
.content-field input { height:42px; }
.content-field textarea { min-height:76px; resize:vertical; }
.content-field input:focus, .content-field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,75,155,.08); }
.wide-field { grid-column:1 / -1; }
.repeat-grid { display:grid; gap:12px; }
.compact-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.repeat-card { min-width:0; padding:18px; border:1px solid #dce6e6; border-radius:10px; background:#fff; }
.repeat-card-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
.repeat-card-head > div { display:flex; align-items:center; gap:10px; min-width:0; }
.repeat-card-head small { color:#7f9ca4; font:800 10px/1 "Cascadia Code",Consolas,monospace; }
.repeat-card-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.repeat-card-head button { border:0; color:#9b6460; background:transparent; font-size:11px; }
.media-field-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.upload-button { min-height:42px; padding:0 13px; border:1px solid #b8cecf; border-radius:8px; color:#0a6c68; background:#ecf8f6; font-size:11px; font-weight:800; }
.media-preview { display:block; width:180px; height:110px; margin-top:9px; border-radius:8px; object-fit:cover; background:#e7ecea; }
#contentEditor { width:100%; min-height:620px; resize:vertical; border:1px solid #cad7da; border-radius:10px; padding:20px; outline:none; color:#183652; background:#f8faf9; font:12px/1.7 "Cascadia Code",Consolas,monospace; tab-size:2; }
#contentEditor:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,75,155,.08); }
.editor-message { min-height:20px; margin:12px 0 0; color:var(--muted); font-size:12px; }
.toast { position:fixed; right:28px; bottom:28px; z-index:20; transform:translateY(20px); opacity:0; pointer-events:none; padding:13px 17px; border-radius:9px; color:#fff; background:#10243f; box-shadow:0 12px 35px rgba(9,31,56,.22); transition:.2s ease; font-size:13px; }
.toast.show { transform:translateY(0); opacity:1; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(21,167,160,.28); outline-offset:2px; }
@media (max-width:1050px) { .metric-grid { grid-template-columns:repeat(2,1fr); } .dashboard-grid { grid-template-columns:1fr; } }
@media (max-width:1050px) { .compact-grid { grid-template-columns:1fr; } }
@media (max-width:820px) { .login-layout { grid-template-columns:1fr; } .login-story { min-height:380px; padding:55px 32px; } .login-panel { padding:45px 26px; } .app-layout { grid-template-columns:1fr; } .sidebar { position:relative; height:auto; } .sidebar nav { grid-template-columns:repeat(3,1fr); } .sidebar-foot { display:none; } .workspace { padding:26px 18px 55px; } .topbar { align-items:start; } .topbar-meta span { display:none; } .form-grid { grid-template-columns:1fr; } .wide-field { grid-column:auto; } }
@media (max-width:560px) { .metric-grid, .funnel-grid, .performance-strip { grid-template-columns:1fr 1fr; } .metric-grid article { min-height:125px; padding:17px; } .metric-grid strong { margin:14px 0 10px; font-size:30px; } .section-head { display:block; } .conversion-rate { display:block; margin-top:14px; } .editor-actions, .filter-label { margin-top:16px; } .sidebar nav { grid-template-columns:1fr; } .content-group { padding:18px 14px; } .content-group-head { align-items:flex-start; } .content-group-head p { display:none; } .media-field-row { grid-template-columns:1fr; } .upload-button { width:100%; } }