html,body,#app{min-height:100%}body{margin:0}:root{--ink: #10233a;--ink-soft: #3d556e;--line: rgba(16, 35, 58, .12);--panel: rgba(255, 252, 247, .78);--panel-solid: #fffaf3;--accent: #0f7c6b;--accent-deep: #0a5c4f;--danger: #b42318;--bg-a: #d7eee8;--bg-b: #f3e6d4;--bg-c: #e8f0f7;--shadow: 0 18px 50px rgba(16, 35, 58, .08);--radius: 18px;--font-display: "Syne", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body: "Outfit", "PingFang SC", "Microsoft YaHei", sans-serif}*{box-sizing:border-box}.shell{position:relative;min-height:100vh;overflow-x:hidden;color:var(--ink);font-family:var(--font-body);background:radial-gradient(1200px 600px at 8% -10%,var(--bg-a),transparent 55%),radial-gradient(900px 500px at 100% 0%,var(--bg-b),transparent 50%),linear-gradient(165deg,var(--bg-c),#f7f1e8 48%,#eef5f2)}.glow{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;animation:drift 14s ease-in-out infinite alternate}.glow-a{width:280px;height:280px;top:12%;right:8%;background:rgba(15,124,107,.18)}.glow-b{width:220px;height:220px;left:-40px;bottom:18%;background:rgba(214,160,88,.16);animation-delay:-4s}.grain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.page{position:relative;z-index:1;width:min(920px,calc(100% - 32px));margin:0 auto;padding:48px 0 72px;animation:rise .7s ease-out both}.hero{margin-bottom:28px}.brand{margin:0 0 10px;font-family:var(--font-display);font-size:clamp(2rem,6vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}.hero h1{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(1.35rem,3vw,1.75rem);font-weight:700;letter-spacing:-.02em}.lead{margin:0;max-width:34rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.55}.meta{margin:14px 0 0;color:var(--accent-deep);font-size:.92rem;font-weight:500}.panel{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px 20px;margin-bottom:18px;animation:rise .75s ease-out both}.form-panel{animation-delay:.08s}.list-panel{animation-delay:.16s}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panel-head h2{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:700}.form{display:grid;gap:14px}@media (min-width: 720px){.form{grid-template-columns:1fr 1fr auto;align-items:end}.form-actions{padding-bottom:1px}}label{display:grid;gap:7px}label span{font-size:.82rem;font-weight:500;color:var(--ink-soft)}input{height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.88);color:var(--ink);font:inherit;font-size:.95rem;outline:none;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}input:focus{border-color:#0f7c6b8c;box-shadow:0 0 0 3px #0f7c6b26}.btn{height:44px;padding:0 18px;border:1px solid transparent;border-radius:12px;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.btn:disabled{opacity:.6;cursor:default}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-deep)}.btn.ghost{height:36px;padding:0 12px;background:transparent;border-color:var(--line);color:var(--ink-soft)}.btn.ghost:hover{border-color:#0f7c6b59;color:var(--accent-deep)}.table-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px}table{width:100%;border-collapse:collapse;min-width:560px}th,td{padding:12px 10px;text-align:left;font-size:.92rem;border-bottom:1px solid var(--line)}th{color:var(--ink-soft);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}tbody tr{transition:background .18s ease}tbody tr:hover{background:rgba(15,124,107,.05)}.id{font-variant-numeric:tabular-nums;color:var(--ink-soft)}.name{font-weight:600}.time{color:var(--ink-soft);font-size:.88rem;white-space:nowrap}.ops{display:flex;gap:12px;white-space:nowrap}.text-btn{padding:0;border:none;background:none;color:var(--accent-deep);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}.text-btn:hover{text-decoration:underline}.text-btn.danger{color:var(--danger)}.state{padding:28px 8px;color:var(--ink-soft);text-align:center;font-size:.95rem}.toast{position:fixed;left:50%;bottom:28px;z-index:20;transform:translate(-50%);padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff7ec;font-size:.9rem;font-weight:500;box-shadow:0 12px 30px #10233a38}.toast-enter-active,.toast-leave-active{transition:opacity .25s ease,transform .25s ease}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,10px)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{0%{transform:translateZ(0)}to{transform:translate3d(18px,-22px,0)}}@media (max-width: 640px){.page{padding-top:32px}.panel{padding:18px 16px}.panel-head{align-items:flex-start}}