:root{--bg: #f5f1e8;--card: rgba(255, 252, 247, .9);--line: rgba(34, 28, 21, .1);--text: #201a15;--muted: #74685b;--accent: #2a1f15;--accent-soft: #f2e9de;--good: #1f6a4e;--warn: #9a6626;--shadow: 0 18px 50px rgba(43, 31, 20, .12);--page-bg-image: none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);font-family:HarmonyOS Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(#f7f4edbd,#efe8dcd1),var(--page-bg-image),linear-gradient(180deg,#f7f4ed,#efe8dc);background-size:cover;background-position:center;background-attachment:fixed}::selection{background:#2a1f152e;color:#1c1612}button,a{font:inherit}#app{min-height:100vh}.page-shell{position:relative;min-height:100vh;padding:24px}.backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.8),transparent 28%),radial-gradient(circle at 85% 80%,rgba(210,191,168,.3),transparent 24%);pointer-events:none}.guide-card{position:relative;z-index:1;width:min(100%,680px);margin:0 auto;padding:32px 28px 24px;border:1px solid var(--line);border-radius:28px;background:var(--card);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.guide-head{display:flex;align-items:center;gap:14px}.brand-logo{width:40px;height:40px;object-fit:contain}.eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.page-title{margin:0;font-size:28px;font-weight:700}.lead-text{margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.75}.hero-panel{margin-top:22px;padding:24px;border-radius:24px;background:linear-gradient(180deg,#fffffff5,#fdf9f2eb);border:1px solid rgba(34,28,21,.08);box-shadow:0 10px 30px #2b1f140f}.hero-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.hero-copy{display:flex;flex-direction:column;gap:8px;margin-top:14px}.hero-label{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.hero-site{font-size:34px;line-height:1.05}.hero-state{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#2a1f150f;color:var(--muted);font-size:12px}.hero-state.checking{color:var(--warn);background:#9a66261a}.hero-state.ready{color:var(--good);background:#1f6a4e1a}.hero-status{color:var(--muted);font-size:14px;line-height:1.7;max-width:32rem}.hero-actions{display:flex;gap:10px;margin-top:20px}.hero-foot{margin-top:16px;padding-top:14px;border-top:1px solid rgba(34,28,21,.08)}.primary-button,.secondary-button,.ghost-button,.stop-button,.line-button{min-height:42px;padding:0 16px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.primary-button{background:var(--accent);color:#fffaf3}.primary-button:disabled{opacity:.45;cursor:not-allowed}.secondary-button{background:var(--accent-soft);color:var(--accent);border-color:#2a1f1514}.ghost-button,.line-button.subtle{background:transparent;color:var(--muted);border-color:#2a1f151a}.stop-button{background:#9a66261a;color:var(--warn);border-color:#9a662633}.stop-button:hover{background:#9a66262e}.feedback-text{color:var(--muted);font-size:13px}.bookmark-tip{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.6}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;margin:0 2px;border-radius:8px;border:1px solid rgba(42,31,21,.12);background:#ffffffc7;box-shadow:inset 0 -1px #2a1f1514;color:var(--accent);font-size:12px;font-family:inherit;font-weight:600}.line-section{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:14px;max-height:248px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}.list-panel{margin-top:14px;padding:14px 16px;border-radius:18px;background:#ffffff5c;border:1px solid rgba(34,28,21,.06)}.list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:0}.list-title{margin:0;font-size:15px;font-weight:700}.list-subtitle{margin:4px 0 0;color:var(--muted);font-size:12px}.list-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.ghost-button.compact{min-height:34px;padding:0 12px;font-size:12px}.line-section::-webkit-scrollbar{width:4px}.line-section::-webkit-scrollbar-track{background:transparent}.line-section::-webkit-scrollbar-thumb{background:#2a1f1526;border-radius:4px}.line-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:#ffffff8c}.line-item.active{border-color:#1f6a4e47;background:#f4fbf7f2}.line-item.unavailable{background:#fcf7f2e6}.line-main{display:flex;align-items:center;gap:18px;min-width:0}.line-name{margin:0 0 4px;font-size:16px;font-weight:700}.line-hint{margin:0;color:var(--muted);font-size:13px}.line-url{margin:6px 0 0;color:#74685bd1;font-size:12px;line-height:1.5;word-break:break-all}.line-metric{flex:0 0 auto;color:var(--good);font-size:13px;font-weight:600}.line-actions{display:flex;gap:8px;flex:0 0 auto}.line-button{background:#fff;color:var(--accent);border-color:#2a1f151a}@keyframes card-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.guide-card{animation:card-in .45s cubic-bezier(.22,1,.36,1) both}.fade-enter-active,.fade-leave-active{transition:opacity .18s ease}.fade-enter-from,.fade-leave-to{opacity:0}.hero-text-enter-active,.hero-text-leave-active{transition:opacity .2s ease,transform .2s ease}.hero-text-enter-from{opacity:0;transform:translateY(8px)}.hero-text-leave-to{opacity:0;transform:translateY(-4px)}.line-enter-active{transition:opacity .2s ease,transform .2s ease}.line-leave-active{transition:opacity .15s ease;position:absolute}.line-enter-from{opacity:0;transform:translate(-10px)}.line-leave-to{opacity:0}.line-move{transition:transform .2s ease}@media (max-width: 720px){.page-shell{padding:14px}.guide-card{padding:18px;border-radius:18px}.page-title,.hero-site{font-size:24px}.hero-actions{flex-direction:column}.hero-topline,.list-head,.list-meta{flex-direction:column;align-items:flex-start}.line-section{max-height:360px}.line-item{flex-direction:column;align-items:flex-start}.line-main{width:100%;justify-content:space-between}.line-actions{width:100%}.line-button{flex:1}}
