:root { color-scheme: light; --ink:#25211e; --muted:#786f68; --paper:#fffdfa; --line:#eadfd5; --accent:#ff5a36; --accent-dark:#d93d1e; --soft:#fff0e8; --shadow:0 18px 50px rgba(77,48,27,.10); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 80% 0,#ffe1d0 0,transparent 32rem),#f7f2eb; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(920px,100%); margin:auto; padding:28px 18px calc(100px + env(safe-area-inset-bottom)); }
.brand { display:flex; align-items:center; gap:13px; margin:0 4px 24px; }
.brand h1,.brand p,.section-title h2,.section-title p { margin:0; }
.brand h1 { font-size:25px; letter-spacing:-.03em; }
.brand p,.section-title p,.muted { color:var(--muted); font-size:13px; }
.mark { display:grid; place-items:center; width:48px; aspect-ratio:1; border-radius:16px; color:white; font-weight:900; font-size:22px; transform:rotate(-5deg); background:linear-gradient(145deg,#ff7c43,var(--accent)); box-shadow:0 10px 25px rgba(255,90,54,.28); }
.brand .quiet { margin-left:auto; }
.card { background:rgba(255,253,250,.94); border:1px solid rgba(234,223,213,.9); border-radius:24px; padding:24px; box-shadow:var(--shadow); margin-bottom:16px; }
.auth { display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; min-height:320px; }
.auth > * { min-width:0; }
.auth h2 { max-width:480px; font-size:32px; line-height:1.2; margin:12px 0; letter-spacing:-.04em; }
.eyebrow { color:var(--accent-dark); font-weight:800; font-size:12px; letter-spacing:.08em; }
form,label { display:grid; gap:7px; }
form { gap:14px; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:14px; padding:13px 14px; color:var(--ink); background:white; outline:none; transition:.2s; }
input:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,90,54,.12); }
textarea { resize:vertical; line-height:1.6; margin-top:15px; }
button { border:0; border-radius:13px; padding:12px 17px; font-weight:800; }
.primary { color:white; background:var(--accent); box-shadow:0 8px 20px rgba(255,90,54,.2); }
.primary:hover { background:var(--accent-dark); }
.secondary,.quiet,.mode,.tabs button { background:#fff; color:var(--ink); border:1px solid var(--line); }
.quiet { padding:8px 12px; }
.tabs { display:flex; gap:7px; padding:6px; width:max-content; margin:0 auto 16px; border-radius:16px; background:rgba(255,255,255,.72); }
.tabs button { padding:9px 20px; background:transparent; border-color:transparent; }
.tabs button.active { background:var(--ink); color:white; }
.panel { display:none; }
.panel.active { display:block; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-title > div { flex:1; }
.section-title h2 { font-size:19px; }
.step { display:grid; place-items:center; min-width:32px; height:32px; border-radius:10px; color:var(--accent-dark); background:var(--soft); font-weight:900; }
.mode-row { display:flex; gap:8px; margin-top:18px; }
.mode-row .clipboard { margin-left:auto; }
.mode { padding:9px 16px; }
.mode.active { color:var(--accent-dark); border-color:#ffb8a4; background:var(--soft); }
.file-box { margin-top:16px; padding:26px; border:1px dashed #e6aa94; border-radius:16px; color:var(--accent-dark); text-align:center; background:var(--soft); }
.file-box input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.device-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.device { display:flex; align-items:center; gap:10px; padding:15px; border:1px solid var(--line); border-radius:16px; background:white; }
.device:has(input:checked) { border-color:var(--accent); background:var(--soft); }
.device input,.check-line input { width:18px; accent-color:var(--accent); }
.check-line { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:11px; padding:15px; border-radius:16px; background:#f7f4f0; }
.check-line span { display:grid; }
.check-line small { color:var(--muted); }
.action-bar { position:sticky; bottom:14px; display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:9px; padding:10px; border:1px solid rgba(234,223,213,.9); border-radius:20px; background:rgba(255,253,250,.86); backdrop-filter:blur(18px); box-shadow:var(--shadow); z-index:2; }
.feed { display:grid; gap:11px; margin-top:17px; }
.feed article { padding:15px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.feed h3,.feed p { margin:0 0 7px; }
.feed p { white-space:pre-wrap; overflow-wrap:anywhere; }
.feed small { color:var(--muted); }
.search-row { display:grid; grid-template-columns:1fr auto; gap:9px; }
.hidden { display:none !important; }
#toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%,30px); opacity:0; color:white; background:#25211e; border-radius:14px; padding:12px 18px; transition:.25s; pointer-events:none; z-index:10; }
#toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:680px) { .shell{padding:18px 12px 110px}.auth{grid-template-columns:1fr;min-height:0}.auth h2{font-size:24px;overflow-wrap:anywhere}.card{padding:18px;border-radius:20px}.device-grid{grid-template-columns:1fr}.action-bar{grid-template-columns:1fr 1fr}.action-bar .primary{grid-column:1/-1;grid-row:1}.tabs{width:100%}.tabs button{flex:1}.brand p{display:none}.mode-row{flex-wrap:wrap}.mode-row .clipboard{margin-left:0;width:100%} }