:root { --ink:#38001e; --muted:#5c4450; --line:rgba(56,0,30,.16); --paper:#fcf9ed; --card:#fff; --accent:#ff6021; --accent-dark:#e54d14; --green:#18794e; --red:#a52a35; --yellow:#8a5b00; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; } a { color:inherit; text-decoration:none; } button,input { font:inherit; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:24px 28px; } .brand { font-weight:800; letter-spacing:-.03em; } .brand:first-letter { color:var(--accent); } nav { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:.92rem; } nav a:hover, .inline-form button:hover { color:var(--accent); } .inline-form { display:inline; } .inline-form button { border:0; padding:0; color:var(--muted); background:none; cursor:pointer; }
.container { max-width:1180px; margin:auto; padding:0 28px; } .hero { padding:100px 0 120px; max-width:800px; } .eyebrow { margin:0 0 14px; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:22px; font-size:64px; line-height:.98; letter-spacing:-.07em; } h1 span { color:var(--accent); } h2 { margin-bottom:0; font-size:36px; line-height:1.05; letter-spacing:-.05em; } h3 { margin:28px 0 9px; font-size:1.2rem; letter-spacing:-.02em; } .hero-copy { max-width:620px; margin-bottom:30px; color:var(--muted); font-size:1.15rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; } .button { display:inline-flex; justify-content:center; align-items:center; border:1px solid transparent; border-radius:8px; padding:11px 17px; font-size:.92rem; font-weight:750; cursor:pointer; transition:.18s ease; } .button-primary { color:#fff; background:var(--accent); box-shadow:0 7px 20px rgba(56,0,30,.16); } .button-primary:hover { background:var(--accent-dark); transform:translateY(-1px); } .button-secondary { border-color:var(--line); background:var(--card); } .button-secondary:hover { border-color:var(--accent); color:var(--accent); }
.section-heading { margin-bottom:24px; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .card { border:1px solid var(--line); border-radius:13px; background:var(--card); padding:25px; box-shadow:0 6px 24px rgba(56,0,30,.06); } .card p { color:var(--muted); } .card-number { color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.12em; } code { border-radius:4px; padding:2px 5px; color:var(--ink); background:rgba(56,0,30,.08); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; }
.next-step { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:90px 0; padding:32px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .next-step p:last-child { max-width:490px; margin:0; color:var(--muted); } .site-footer { display:flex; justify-content:space-between; max-width:1180px; margin:30px auto 0; padding:28px; color:var(--muted); font-size:.82rem; }
.page-center { display:grid; min-height:calc(100vh - 170px); place-items:center; } .not-found { width:min(100%,620px); text-align:center; } .not-found h1, .login-card h1 { font-size:48px; } .not-found p { margin:0 auto 24px; color:var(--muted); } .login-card { width:min(100%,430px); } .login-card h1 { margin-bottom:8px; } .login-form { display:grid; gap:8px; margin-top:25px; } .login-form label { margin-top:8px; font-size:.86rem; font-weight:700; } .login-form input { width:100%; border:1px solid var(--line); border-radius:7px; padding:11px 12px; outline:0; background:#fff; } .login-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,96,33,.16); }
.notice { margin:18px 0; border-radius:8px; padding:13px 16px; font-size:.9rem; } .notice-error { color:var(--red); background:#fff1f0; } .notice-warning { border:1px solid #f0d59d; color:var(--yellow); background:#fff9eb; } .notice small { display:inline-block; margin-top:5px; }
.dashboard { padding-bottom:70px; } .dashboard-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:45px 0 28px; } .dashboard-heading h1 { margin:0; font-size:56px; } .status-dot { color:var(--green); font-size:.8rem; font-weight:700; } .metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .metric { padding:20px; } .metric p { margin-bottom:9px; font-size:.8rem; font-weight:700; color:var(--muted); } .metric strong { color:var(--accent); font-size:2rem; letter-spacing:-.05em; } .dashboard-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:14px; margin-top:14px; } .breakdown-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; } .dashboard .card h2 { margin-bottom:20px; font-size:1.2rem; letter-spacing:-.03em; } .card-heading { display:flex; justify-content:space-between; gap:15px; } .card-heading span { color:var(--muted); font-size:.75rem; }
.dashboard-actions { display:flex; align-items:center; gap:20px; } .page-list { margin-top:14px; } .page-list-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-top:1px solid rgba(56,0,30,.08); } .page-list-row div { display:grid; gap:3px; } .page-list-row span { color:var(--muted); font-size:.82rem; } .notice-success { color:var(--green); background:#e8f5ee; } .seo-editor { max-width:850px; margin-top:14px; } .editor-form { display:grid; gap:8px; margin-top:25px; } .editor-form label { margin-top:8px; font-size:.86rem; font-weight:700; } .editor-form input, .editor-form textarea, .editor-form select { width:100%; border:1px solid var(--line); border-radius:7px; padding:11px 12px; outline:0; background:#fff; color:var(--ink); } .editor-form textarea { resize:vertical; } .editor-form input:focus, .editor-form textarea:focus, .editor-form select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,96,33,.16); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .code-input { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; } .editor-actions { display:flex; gap:10px; margin-top:18px; }
.checkbox-grid { display:flex; flex-wrap:wrap; gap:20px; margin:8px 0 10px; } .checkbox-grid label { display:flex; align-items:center; gap:8px; margin:0; font-weight:650; } .checkbox-grid input { width:auto; accent-color:var(--accent); }
.bar-row { display:grid; grid-template-columns:6.5rem 1fr 2rem; align-items:center; gap:10px; margin:12px 0; font-size:.78rem; } .bar-row span { color:var(--muted); } .bar-row b, .list b { color:var(--accent); font-size:.8rem; } .bar { height:9px; overflow:hidden; border-radius:99px; background:rgba(56,0,30,.08); } .bar i { display:block; height:100%; border-radius:inherit; background:var(--accent); } .list > div { display:flex; justify-content:space-between; gap:15px; padding:9px 0; border-bottom:1px solid rgba(56,0,30,.08); font-size:.85rem; } .list > div:last-child { border-bottom:0; } .list span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; } .muted { color:var(--muted); } .recent { margin-top:14px; } .table-wrap { overflow-x:auto; } table { width:100%; min-width:600px; border-collapse:collapse; font-size:.82rem; } th { padding:0 15px 11px 0; color:var(--muted); font-size:.7rem; letter-spacing:.08em; text-align:left; text-transform:uppercase; } td { padding:11px 15px 11px 0; border-top:1px solid rgba(56,0,30,.08); } td:first-child { color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; }
@media (max-width:760px) { .site-header { padding:20px; } nav { gap:12px; } .container { padding:0 20px; } .hero { padding:65px 0 80px; } .feature-grid,.metric-grid,.breakdown-grid,.dashboard-grid,.next-step,.form-grid { grid-template-columns:1fr; } .next-step { gap:16px; margin:65px 0; } .dashboard-heading { align-items:start; flex-direction:column; margin-top:35px; } .dashboard-actions { align-items:start; flex-direction:column; gap:12px; } .page-list-row { align-items:start; flex-direction:column; } .site-footer { padding:22px 20px; } }