:root { --ink:#211f1e; --muted:#aaa5a1; --line:#ebe7e4; --paper:#fcfaf7; --orange:#ff9f0a; }
* { box-sizing:border-box; }
html { min-height:100%; background:#fbf8f5; }
body { min-width:320px; min-height:100vh; margin:0; color:var(--ink); background-color:#fbf8f5; background-image:radial-gradient(#eadfd7 1.15px,transparent 1.15px); background-size:28px 28px; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; padding:22px 20px 128px; }
.app-main { width:min(100%,960px); margin:0 auto; }
.home-surface,.panel { border:1px solid rgba(240,237,234,.88); border-radius:30px; background:rgba(255,255,255,.94); box-shadow:0 18px 45px rgba(76,59,46,.055); }
.home-surface { padding:24px 46px 40px; }
.mini-banner { display:flex; width:100%; align-items:center; gap:14px; padding:13px 18px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; text-align:left; box-shadow:0 8px 22px rgba(94,72,56,.035); }
.mini-banner:hover { background:#fcfbfa; border-color:#ded8d4; }
.qr-code { width:48px; height:48px; flex:0 0 48px; }
.mini-banner span { display:grid; gap:3px; min-width:0; }
.mini-banner strong { font-size:1rem; letter-spacing:.01em; }
.mini-banner span span { color:#aaa5a1; font-size:.82rem; }
.mini-banner > b { margin-left:auto; color:#cbc5c1; font-size:1.7rem; font-weight:400; }
.hero { padding:26px 18px 30px; text-align:center; }
.hero-icon { display:grid; width:66px; height:66px; margin:0 auto 12px; place-items:center; border-radius:22px; color:#ff5c5c; background:#fff0ec; font-size:33px; line-height:1; box-shadow:0 10px 20px rgba(74,42,28,.08); }
.hero h2 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:2rem; letter-spacing:-.04em; }
.hero p { max-width:420px; margin:8px auto 16px; color:#aaa5a1; font-size:.92rem; line-height:1.4; }
.chip-row { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.chip { padding:7px 12px; border:1px solid #eeeae7; border-radius:999px; color:#aaa5a1; background:#fff; font-size:.77rem; }
.skill-list { display:grid; gap:14px; }
.skill-card { display:flex; width:100%; align-items:center; gap:16px; padding:16px 20px; border:1px solid #ece8e5; border-radius:20px; color:var(--ink); background:var(--paper); text-align:left; transition:background .16s,border-color .16s,box-shadow .16s,transform .16s; }
.skill-card:hover { border-color:#dbd6d2; background:#fff; box-shadow:0 10px 20px rgba(82,60,47,.06); transform:translateY(-1px); }
.skill-icon { display:grid; width:56px; height:56px; flex:0 0 56px; place-items:center; border-radius:19px; font-size:28px; }
.skill-copy { min-width:0; }
.skill-copy h3 { display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:1.05rem; letter-spacing:-.02em; }
.skill-copy p { margin:0; color:#aaa5a1; font-size:.89rem; line-height:1.4; }
.pro-badge { padding:2px 7px; border-radius:999px; color:#fff; background:var(--orange); font-size:.64rem; letter-spacing:.04em; }
.skill-arrow { margin-left:auto; color:#d7d2ce; font-size:1.8rem; font-weight:300; }
.more-hero .hero-icon { color:#f4b000; background:#fff8df; }
.coming-soon { display:grid; justify-items:center; gap:5px; padding:20px; border:1px dashed #ded8d4; border-radius:20px; color:#aaa5a1; background:#fcfaf7; }
.coming-soon strong { color:#87817d; font-size:.9rem; }
.coming-soon small { font-size:.76rem; }
.product-footer { display:flex; justify-content:center; gap:7px; padding:20px 0 0; color:#b7b0ac; font-size:.72rem; }
.product-footer span + span::before { content:"·"; margin-right:7px; }
.bottom-nav { position:fixed; z-index:10; right:20px; bottom:18px; left:20px; display:grid; grid-template-columns:repeat(4,1fr); width:min(calc(100% - 40px),640px); margin:auto; padding:8px; border:1px solid #eeeae7; border-radius:32px; background:rgba(255,255,255,.95); box-shadow:0 17px 30px rgba(63,45,33,.14); backdrop-filter:blur(16px); }
.nav-item { border:0; border-radius:25px; padding:13px 8px; color:#99928e; background:transparent; font-size:.88rem; font-weight:800; }
.nav-item.is-active { color:#fff; background:#1d1a18; box-shadow:0 5px 12px rgba(28,25,23,.18); }
.panel { width:min(100%,860px); margin:0 auto; padding:28px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.panel-title { margin:0; font-size:1.35rem; }
.panel-subtitle { margin:7px 0 0; color:#aaa5a1; font-size:.88rem; }
.back-button { border:1px solid var(--line); border-radius:12px; padding:8px 11px; color:#77706b; background:#fff; }
.safety-note { margin:18px 0; padding:11px 13px; border:1px solid #f4e8d9; border-radius:14px; color:#866a51; background:#fffaf4; font-size:.78rem; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.field { display:grid; gap:6px; }.field.full { grid-column:1/-1; }.field label { color:#766d66; font-size:.77rem; font-weight:800; }.field input,.field textarea { width:100%; border:1px solid #e7e2de; border-radius:14px; padding:12px; color:var(--ink); background:#fff; outline:none; }.field input:focus,.field textarea:focus { border-color:#d8b895; box-shadow:0 0 0 4px rgba(223,177,126,.15); }.field textarea { min-height:105px; resize:vertical; }.field-help { color:#aaa5a1; font-size:.72rem; }.photo-preview { width:min(100%,300px); max-height:260px; border:1px solid var(--line); border-radius:14px; object-fit:cover; }.form-actions { display:flex; justify-content:flex-end; margin-top:16px; }.primary-button { border:0; border-radius:14px; padding:12px 18px; color:#fff; background:#1d1a18; font-weight:800; }
.result-card { display:grid; gap:10px; margin-top:18px; padding:16px; border:1px solid #eadfce; border-radius:18px; background:#fffaf5; }.result-card h3 { margin:0; color:#9d6335; font-size:1rem; }.result-content { color:#5f5650; white-space:pre-wrap; line-height:1.7; font-size:.9rem; }.result-card.is-error { border-color:#f0c7c3; background:#fff6f5; }.result-card.is-error h3 { color:#bc4b44; }.chat-box { display:flex; gap:9px; margin-top:16px; padding-top:16px; border-top:1px solid #f0ece9; }.chat-box input { min-width:0; flex:1; border:1px solid #e7e2de; border-radius:14px; padding:12px; }.chat-box button { border:0; border-radius:14px; padding:0 16px; color:#fff; background:#1d1a18; }
.call-screen { min-height:calc(100vh - 150px); margin:-22px -20px 0; padding:22px 22px 94px; background:#fff; }.call-toolbar { display:flex; align-items:center; gap:5px; padding-bottom:20px; border-bottom:1px solid #f0eeec; }.call-pill,.call-actions button { border:0; border-radius:999px; padding:9px 12px; color:#aaa5a1; background:#f5f4f2; font-size:.78rem; font-weight:800; }.call-pill.is-current { color:#e48622; background:#fff5e9; }.call-actions { display:flex; gap:7px; margin-left:auto; }.call-actions button:first-child { color:#26a69a; background:#eefbf8; }.call-actions button:last-child { color:#ee7070; background:#fff1f1; }.call-thread { padding-top:14px; }.call-kicker { display:block; color:#e68f42; font-size:.84rem; }.crush-check { display:block; margin:20px 0 26px; color:#746d68; }.crush-check input { width:20px; height:20px; margin:0 8px 0 0; vertical-align:middle; }.call-message { display:grid; width:max-content; max-width:360px; grid-template-columns:46px auto; column-gap:14px; align-items:center; }.call-message i { display:grid; width:46px; height:46px; grid-row:span 2; place-items:center; border-radius:50%; color:#fff; background:#ffaf0a; font-style:normal; font-weight:900; }.call-message strong { color:#e48622; }.call-message p { margin:6px 0 0; padding:16px 20px; border:1px solid #f0eeec; border-radius:18px; background:#fff; box-shadow:0 4px 10px rgba(38,28,21,.06); }.call-composer { position:fixed; z-index:5; right:22px; bottom:90px; left:22px; display:flex; gap:10px; align-items:center; }.call-composer input { min-width:0; flex:1; border:1px solid #e4dfdb; border-radius:19px; padding:17px 23px; background:#fff; box-shadow:0 3px 8px rgba(40,32,25,.03); }.call-composer button { display:grid; width:48px; height:48px; place-items:center; border:0; border-radius:50%; color:#aaa5a1; background:#eeeae7; font-size:1.15rem; }.call-screen #result { position:fixed; z-index:6; right:22px; bottom:160px; left:22px; max-width:640px; margin:auto; }
.profile-panel { padding:26px 46px 40px; }.account-line { display:flex; align-items:center; gap:8px; margin:20px 0 0; color:#77706b; font-size:.84rem; }.account-line span { color:#aaa5a1; }.account-line button { margin-left:auto; border:0; color:#d57272; background:transparent; font-size:.78rem; }.usage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0; }.usage-grid div { display:grid; justify-items:center; gap:13px; padding:24px 12px; border:1px solid var(--line); border-radius:20px; background:#fcfbfa; }.usage-grid span { color:#aaa5a1; font-size:.8rem; }.usage-grid strong { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:2rem; }.invite-copy { margin:18px 0; color:#aaa5a1; text-align:center; font-size:.82rem; }.invite-copy strong { color:#ff9140; }.profile-list { display:grid; gap:14px; }.profile-list div { padding:20px; border:1px solid var(--line); border-radius:17px; background:#fff; }.login-button,.auth-form button[type="submit"] { width:100%; margin-top:28px; border:0; border-radius:17px; padding:17px; color:#fff; background:#1d1a18; font-size:1rem; font-weight:900; box-shadow:0 11px 20px rgba(28,25,23,.15); }.auth-form { display:grid; gap:10px; margin-top:22px; padding:22px; border:1px solid var(--line); border-radius:20px; background:#fcfbfa; }.auth-form h2 { margin:0 0 4px; font-size:1.1rem; }.auth-form input { width:100%; border:1px solid #e7e2de; border-radius:13px; padding:12px; background:#fff; }.auth-form button[type="submit"] { margin-top:4px; }.auth-form button[type="button"] { border:0; color:#9d6335; background:transparent; font-size:.8rem; }.auth-form p { min-height:1em; margin:0; color:#c85d55; font-size:.8rem; }
.noscript-content { width:min(90%,760px); margin:10vh auto; padding:28px; border-radius:22px; background:#fff; }.noscript-content p { color:#77706b; line-height:1.8; }
@media (max-width:620px) { .app-shell { padding:12px 12px 104px; }.home-surface,.profile-panel { border-radius:22px; padding:16px; }.mini-banner { padding:11px; border-radius:15px; }.qr-code { width:42px; height:42px; flex-basis:42px; }.mini-banner strong { font-size:.88rem; }.mini-banner span span { font-size:.72rem; }.hero { padding:24px 8px; }.hero h2 { font-size:1.7rem; }.hero p { font-size:.82rem; }.skill-list { gap:10px; }.skill-card { gap:12px; padding:13px; border-radius:17px; }.skill-icon { width:48px; height:48px; flex-basis:48px; border-radius:16px; font-size:24px; }.skill-copy h3 { font-size:.95rem; }.skill-copy p { font-size:.78rem; }.skill-arrow { font-size:1.35rem; }.bottom-nav { right:12px; bottom:12px; left:12px; width:calc(100% - 24px); padding:6px; }.nav-item { padding:11px 3px; font-size:.73rem; }.panel { padding:18px; }.form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.product-footer { flex-direction:column; align-items:center; gap:3px; }.product-footer span + span::before { display:none; }.call-screen { min-height:calc(100vh - 116px); margin:-12px -12px 0; padding:15px 14px 90px; }.call-toolbar { overflow:auto; }.call-actions { display:none; }.call-composer { right:14px; bottom:84px; left:14px; }.profile-panel { padding-bottom:30px; }.usage-grid { gap:8px; margin:22px 0; }.usage-grid div { padding:18px 6px; }.usage-grid span { font-size:.68rem; }.profile-list div { padding:16px; } }