:root { color-scheme: light; --ink: #17202a; --muted: #718096; --line: #e7e9ef; --surface: #fff; --canvas: #f7f8fb; --blue: #3977e8; --amber: #e59b2d; --violet: #8465d8; --green: #39a56a; --red: #bd4a5a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--canvas); } button, input, select { font: inherit; } .shell { max-width: 1440px; margin: auto; padding: 42px 32px 56px; } .topbar { display: flex; justify-content: space-between; align-items: end; margin-bottom: 34px; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.06em; } h2 { margin: 0; font-size: 1rem; } h3 { margin: 26px 0 12px; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .eyebrow { margin-bottom: 10px; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .16em; } .muted { color: var(--muted); font-size: .85rem; } .top-actions { display: flex; gap: 14px; align-items: center; } .auth-state { color: var(--green); font-size: .8rem; font-weight: 700; } .auth-state[data-state="loading"] { color: var(--muted); } .auth-state[data-state="error"] { color: var(--red); } .button { border: 0; border-radius: 10px; padding: 11px 17px; color: #fff; background: var(--ink); cursor: pointer; font-weight: 700; } .button:disabled { opacity: .5; cursor: wait; } .button-quiet { color: var(--ink); background: #eceef4; } .notice { margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; color: #8c2e3b; background: #fff0f2; font-size: .9rem; } .notice.success { color: #17643d; background: #e9f8ef; }
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 16px; align-items: start; } .column { min-height: 430px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #f1f2f6; } .column-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .column-head > div { display: flex; gap: 8px; align-items: center; } .dot { width: 9px; height: 9px; border-radius: 99px; background: currentColor; } .blue { color: var(--blue); } .amber { color: var(--amber); } .violet { color: var(--violet); } .green { color: var(--green); } .count { min-width: 25px; padding: 3px 7px; border-radius: 99px; color: var(--muted); background: #fff; text-align: center; font-size: .75rem; } .cards { display: grid; gap: 10px; } .card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--surface); box-shadow: 0 3px 12px #17202a08; cursor: pointer; } .card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px #17202a12; } .card-row, .card-foot { display: flex; justify-content: space-between; gap: 12px; } .card-row strong { color: var(--ink); font-size: .9rem; } .menu { color: #b0b4bf; letter-spacing: 2px; } .address { min-height: 38px; margin: 10px 0; color: var(--muted); font-size: .8rem; line-height: 1.45; } .card-foot { color: var(--muted); font-size: .75rem; } .empty { padding: 28px 4px; color: #a2a7b4; font-size: .8rem; text-align: center; }
.case-dialog { width: min(520px, calc(100% - 28px)); max-height: 90vh; padding: 30px; border: 0; border-radius: 18px; color: var(--ink); box-shadow: 0 20px 70px #17202a40; } .case-dialog::backdrop { background: #17202a66; } .dialog-close { position: absolute; top: 14px; right: 17px; border: 0; color: var(--muted); background: transparent; font-size: 1.7rem; cursor: pointer; } label { display: grid; gap: 7px; margin: 14px 0; color: var(--muted); font-size: .8rem; font-weight: 700; } input, select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fbfbfd; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .history { max-height: 180px; overflow: auto; } .history p { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .8rem; line-height: 1.45; } .history strong { color: var(--ink); } .history small { display: block; margin-top: 4px; color: #a2a7b4; } @media (max-width: 900px) { .board { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 600px) { .shell { padding: 26px 16px; } .topbar { align-items: start; flex-direction: column; gap: 18px; } .board { grid-template-columns: 1fr; } .column { min-height: 220px; } .detail-grid { grid-template-columns: 1fr; } }