2026-09-22 22:42:00 +08:00
|
|
|
:root{--blue:#1a73e8;--bg:#f6f8fb;--surface:#fff;--ink:#172033;--muted:#69778e;--line:#e5eaf1;--soft:#edf4ff;--red:#e74e58;--green:#279966}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{border:0;background:none;color:inherit;cursor:pointer;min-height:44px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #79b4ff;outline-offset:2px}a{color:var(--blue)}svg.icon{width:22px;height:22px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}h1,h2,h3,p{margin:0}h1{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.5px}h2{font-size:20px;line-height:1.35;letter-spacing:-.3px}h3{font-size:16px;font-weight:650}small,.small{font-size:12px}.muted{color:var(--muted)}.blue{color:var(--blue)}.red{color:var(--red)}.green{color:var(--green)}.amber{color:#d89020}.app{height:100dvh;max-width:600px;margin:auto;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--bg)}.app.dark{background:#10161e;color:#fff}.safe-top{height:24px;flex:none;background:var(--surface)}.dark .safe-top{background:#10161e}.bar{height:56px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--surface)}.bar .back,.bar .right{width:44px;flex:none;display:grid;place-items:center}.bar .right{margin-left:auto}.bar .bar-title{font-size:18px;font-weight:650;flex:1;line-height:1.25}.bar.root{height:62px;padding:0 20px;background:transparent}.bar.root h1{flex:1}.bar.dark{background:#10161e}.bar .plus{width:34px;height:34px;min-height:34px;border-radius:50%;background:var(--blue);color:white;display:grid;place-items:center}.scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px}.scroll.flush{padding:0}.scroll.white{background:var(--surface)}.scroll::-webkit-scrollbar{width:4px}.scroll::-webkit-scrollbar-thumb{background:#b3bfd04d;border-radius:8px}.nav{display:flex;flex:none;height:92px;padding:7px 16px 24px;background:var(--surface);border-top:1px solid var(--line);justify-content:space-around}.nav button{width:33%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px;position:relative}.nav button.active{color:var(--blue)}.nav svg{width:24px;height:24px}.nav .badge{position:absolute;background:#f15b64;color:white;top:0;left:calc(50% + 6px);font-size:10px;padding:0 5px;min-width:16px;border-radius:10px;border:2px solid white}.actions{display:flex;gap:10px;flex:none;padding:12px 16px calc(20px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}.actions>*{flex:1}.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px;text-decoration:none}.btn.primary{background:var(--blue);color:white}.btn.secondary{border:1px solid #89b5f0;color:var(--blue);background:var(--surface)}.btn.ghost{background:#eef2f7;color:#42536d}.btn.danger{color:var(--red);background:#fff1f2}.btn.full{width:100%}.stack{display:flex;flex-direction:column;gap:16px}.card{background:var(--surface);border:1px solid #edf0f5;border-radius:16px;padding:16px}.group{background:var(--surface);border-radius:16px;padding:0 16px;border:1px solid #edf0f5}.row{display:flex;align-items:center;gap:12px;min-height:64px;border-bottom:1px solid var(--line);width:100%;text-align:left;padding:12px 0}.row:last-child{border-bottom:0}.row .grow{flex:1;min-width:0}.row .arrow{color:#8694a9}.row p{font-size:12px;color:var(--muted);margin-top:3px}.row .trailing{color:var(--muted);font-size:13px;margin-left:auto}.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#e3edff;color:#2862ab;font-size:17px;flex:none;font-weight:600}.a
|
