:root { --bg:#f6f7fb; --card:#fff; --ink:#18202b; --muted:#748093; --line:#e8ebf1; --accent:#5b55e8; --accent-soft:#eeedff; --green:#23865b; --green-soft:#e8f7ef; --amber:#ad7214; --amber-soft:#fff5df; --blue:#3975b8; --blue-soft:#eaf3ff; --shadow:0 10px 28px rgba(30,38,64,.06); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { border:0; cursor:pointer; }
.app-shell { max-width:760px; min-height:100vh; margin:auto; padding-bottom:82px; }
.topbar { padding:22px 20px 12px; display:flex; justify-content:space-between; align-items:flex-start; }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:10px; letter-spacing:.13em; font-weight:700; }
h1 { margin:0; font-size:27px; letter-spacing:-.04em; }
h2 { margin:0; font-size:21px; letter-spacing:-.03em; } h3 { margin:0; font-size:16px; }
.demo-badge { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; background:#fff4d8; color:#8b6417; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap; }
.demo-badge span { width:6px; height:6px; background:#d89b25; border-radius:50%; }
.page-wrap { padding:8px 16px 24px; }
.hero { padding:21px 20px 20px; color:#fff; border-radius:22px; background:linear-gradient(135deg,#635de7,#4a49bd); box-shadow:0 14px 30px rgba(78,73,190,.2); }
.hero p { margin:7px 0 19px; color:#dbdcff; font-size:13px; line-height:1.6; }
.hero h2 { font-size:24px; }
.dispatch-box { background:#fff; padding:13px; border-radius:15px; }
textarea { width:100%; min-height:74px; border:0; outline:0; resize:vertical; color:var(--ink); line-height:1.5; font-size:15px; }
textarea::placeholder { color:#a3adbc; }
.dispatch-footer { display:flex; gap:8px; align-items:center; margin-top:7px; }
select { flex:1; min-width:0; appearance:none; border:1px solid var(--line); border-radius:10px; padding:10px 28px 10px 10px; color:#515b6d; background:#fafbfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23748093' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; font-size:12px; }
.primary { padding:11px 16px; border-radius:10px; color:#fff; background:var(--accent); font-weight:700; font-size:13px; white-space:nowrap; }
.section { margin-top:25px; } .section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; } .subtle { color:var(--muted); font-size:12px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .stat { padding:13px 10px; background:var(--card); border-radius:14px; box-shadow:var(--shadow); } .stat b { display:block; font-size:21px; } .stat span { color:var(--muted); font-size:11px; }
.task-card { padding:16px; background:var(--card); border:1px solid transparent; border-radius:16px; box-shadow:var(--shadow); margin-bottom:10px; } .task-card:active { border-color:#d9d7ff; }
.task-top { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; } .task-title { font-weight:700; line-height:1.45; font-size:15px; }
.status { display:inline-flex; align-items:center; border-radius:99px; padding:5px 9px; font-size:11px; font-weight:700; white-space:nowrap; } .status.todo { color:var(--muted); background:#f0f2f6; } .status.doing { color:var(--blue); background:var(--blue-soft); } .status.review { color:var(--amber); background:var(--amber-soft); } .status.done { color:var(--green); background:var(--green-soft); }
.task-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:11px; } .task-meta strong { color:#495366; font-weight:600; }
.empty { text-align:center; padding:30px 16px; background:#fff; border:1px dashed #dce1ea; border-radius:16px; color:var(--muted); font-size:13px; }
.filter-row { display:flex; gap:7px; overflow:auto; padding-bottom:5px; margin:4px 0 16px; } .filter { flex:none; padding:8px 12px; border-radius:99px; color:var(--muted); background:#fff; border:1px solid var(--line); font-size:12px; } .filter.active { color:var(--accent); border-color:#cbc9ff; background:var(--accent-soft); font-weight:700; }
.person-card { display:flex; gap:13px; align-items:flex-start; padding:15px; margin-bottom:10px; background:#fff; border-radius:16px; box-shadow:var(--shadow); } .avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:var(--accent-soft); color:var(--accent); font-weight:800; } .person-card p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.detail { padding:20px; } .detail-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; } .detail-label { color:var(--muted); font-size:11px; margin:20px 0 7px; font-weight:700; letter-spacing:.04em; } .detail-text { margin:0; line-height:1.65; font-size:14px; white-space:pre-wrap; } .step-list { margin:0; padding:0; list-style:none; } .step-list li { display:flex; gap:9px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; } .step-list li::before { content:'✓'; color:var(--accent); font-weight:700; } .result { padding:14px; border:1px solid #d5f0df; background:var(--green-soft); border-radius:13px; color:#226d4b; line-height:1.6; font-size:13px; white-space:pre-wrap; }
.actions { display:flex; gap:8px; margin-top:20px; } .secondary { flex:1; padding:11px 12px; border-radius:10px; color:#4f596c; background:#f0f2f6; font-weight:700; font-size:12px; } .danger { color:#b14848; background:#fff0f0; }
.modal-backdrop { position:fixed; inset:0; z-index:10; display:flex; align-items:flex-end; justify-content:center; background:rgba(18,24,38,.42); } .modal { width:min(760px,100%); max-height:88vh; overflow:auto; background:#fff; border-radius:22px 22px 0 0; box-shadow:0 -12px 40px rgba(16,22,45,.18); } .modal-bar { display:flex; justify-content:space-between; align-items:center; padding:17px 20px 8px; } .close { width:32px; height:32px; border-radius:50%; background:#f0f2f6; color:#647084; font-size:20px; }
.toast { position:fixed; z-index:20; left:50%; bottom:89px; max-width:calc(100% - 32px); transform:translate(-50%,20px); padding:11px 15px; border-radius:11px; color:#fff; background:#263043; font-size:12px; opacity:0; pointer-events:none; transition:.2s ease; } .toast.show { opacity:1; transform:translate(-50%,0); }
.notice { padding:12px 14px; background:#fff4d8; border-radius:12px; color:#8b6417; font-size:12px; line-height:1.5; margin-bottom:14px; }
.bottom-nav { position:fixed; z-index:5; bottom:0; left:50%; transform:translateX(-50%); width:min(760px,100%); display:flex; justify-content:space-around; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); border-top:1px solid var(--line); backdrop-filter:blur(12px); } .nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:#98a1b0; background:transparent; font-size:10px; } .nav-item.active { color:var(--accent); font-weight:700; } .nav-icon { font-size:21px; line-height:1; }
@media (min-width:600px) { .page-wrap { padding-left:24px; padding-right:24px; } .hero { padding:26px; } .modal-backdrop { align-items:center; padding:20px; } .modal { border-radius:22px; max-width:560px; } }