:root { font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #17202a; background: #edf3f7; font-size: 15px; --primary: #087f8c; --primary-bright: #12a3aa; --ink-soft: #536772; --line: #d9e5ea; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 0%, #dff3f5 0, transparent 32%), linear-gradient(180deg, #eef5f8 0, #e9f0f4 100%); }
main { width: min(1120px, calc(100% - 32px)); margin: 32px auto 80px; }
.hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; padding: 28px 32px; border-radius: 24px; background: linear-gradient(130deg, #086978, #0b8f99 54%, #18aeb1); color: white; box-shadow: 0 20px 50px #075e6c30; }
.hero::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -135px; border-radius: 50%; border: 42px solid #ffffff12; }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.brand-logo { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; background: #fff; border: 4px solid #ffffffd9; box-shadow: 0 10px 25px #004b5650; }
.hero h1 { font-size: 30px; margin: 6px 0; }
.hero p { margin: 0; opacity: .88; }
.eyebrow, .step { font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.step { color: #008e96; }
.mode { position: relative; z-index: 1; background: #fff4cb; color: #745100; padding: 10px 14px; border-radius: 999px; font-weight: 700; box-shadow: 0 7px 18px #00454d20; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
.dashboard-grid { margin-bottom: 18px; }
.card { background: #ffffffed; border: 1px solid #d9e6eb; border-radius: 20px; padding: 24px; box-shadow: 0 12px 36px #294b5b12; backdrop-filter: blur(8px); }
.task-management-card > .section-head { margin-bottom: 20px; }
.span2 { grid-column: span 2; }
.section-head { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.section-head h2 { font-size: 19px; margin: 0; }
.section-head button { margin-left: auto; }
.management-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #e2ebee; }
.management-tool { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 15px; text-align: left; color: #24414c; border: 1px solid #cfe4e7; border-radius: 14px; background: linear-gradient(110deg, #eef9f9, #f8fbfc); box-shadow: none; }
.management-tool:hover:not(:disabled) { border-color: #91cbd0; background: #f6fdfd; }
.management-tool > span:nth-child(2) { min-width: 0; }
.management-tool strong, .management-tool small { display: block; }
.management-tool small { overflow: hidden; margin-top: 4px; color: #71838b; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tool-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-bright)); box-shadow: 0 7px 16px #087f8c2d; }
.tool-icon.account-icon { background: linear-gradient(135deg, #3869a8, #6196d0); box-shadow: 0 7px 16px #376ba52d; }
.tool-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.tool-arrow { margin-left: auto; color: #79a1a8; font-size: 27px; font-weight: 400; }
.row, .two { display: flex; gap: 14px; align-items: end; }
.two > * { flex: 1; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: end; }
.grow { flex: 1; }
.patient-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.patient-grid .wide { grid-column: span 2; }
.patient-grid .action input { min-width: 0; }
.patient-grid .action button { flex: 0 0 auto; white-space: nowrap; }
label { display: flex; flex-direction: column; gap: 7px; color: #42525d; font-size: 13px; font-weight: 650; }
.switch { flex-direction: row; align-items: center; }
.switch input { width: auto; }
input, select, button { font: inherit; border-radius: 11px; border: 1px solid #cbd8df; padding: 10px 12px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
input:focus, select:focus { outline: 2px solid #21a8ad55; border-color: #07959d; }
button { background: linear-gradient(135deg, #078995, #0aa0a6); color: #fff; border-color: #078e97; font-weight: 700; cursor: pointer; box-shadow: 0 5px 13px #078e9720; }
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px #078e9730; }
button.secondary { background: #e7f6f6; color: #08777d; border-color: #a9dada; }
button.ghost { background: white; color: #08777d; }
button.danger { background: #fff2f1; color: #a33832; border-color: #efc4c0; }
button:disabled { cursor: not-allowed; opacity: .45; }
.action { display: flex; }
.action input { flex: 1; border-radius: 10px 0 0 10px; }
.action button { border-radius: 0 10px 10px 0; }
.notify-actions { margin-top: 14px; }
.notify-form-section { margin-bottom: 0; }
.notification-settings { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.notify-mode-field { width: min(280px, 100%); }
#notifyFields { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px; min-width: 0; }
#notifyFields label { min-width: 0; }
#notifyFields .field-span-2 { grid-column: span 2; }
.callback-panel { margin-top: 16px; padding: 14px; border: 1px solid #b8dcdf; border-radius: 12px; background: #f1fbfb; }
.callback-panel small { display: block; color: #687d85; margin-top: 8px; }
.notice { background: #fff5d8; border: 1px solid #eed590; color: #755600; border-radius: 10px; padding: 11px; line-height: 1.5; }
.polling-policy { margin-bottom: 0; }
.authorization { background: #fff8e8; border: 1px solid #ebd59c; border-radius: 12px; padding: 14px; margin: 14px 0; }
.authorization p { margin: 6px 0 12px; line-height: 1.5; }
.hint { color: #74838c; font-size: 12px; }
.results { display: grid; gap: 8px; margin-top: 14px; }
.results.empty { color: #88949b; }
.result, .schedule { display: flex; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid #e0e8ec; border-radius: 12px; }
.result.selected { border-color: #07959d; background: #edfafa; }
.result small, .schedule small { display: block; color: #6d7d86; margin-top: 5px; }
.task-result { display: block; padding: 16px; }
.task-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.task-heading { min-width: 0; }
.task-heading small { display: block; color: #6d7d86; margin-top: 5px; }
.task-heading .release-date { color: #9a5a00; font-weight: 700; }
.task-content-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 9px; }
.task-main { min-width: 0; }
.task-name { font-size: 16px; }
.task-state-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid #d8e0e4; border-radius: 999px; color: #60717a; background: #f1f4f5; font-size: 12px; font-weight: 800; white-space: nowrap; }
.task-state-badge.badge-checking { color: #24658c; border-color: #aad1e6; background: #e7f4fb; }
.task-state-badge.badge-matched { color: #086c71; border-color: #83d1d0; background: #dcf7f4; }
.task-state-badge.badge-needs-auth, .task-state-badge.badge-error { color: #a03d37; border-color: #efb9b5; background: #fff0ef; }
.task-state-badge.badge-authorized, .task-state-badge.badge-success { color: #08734a; border-color: #9bd7bb; background: #e3f7ed; }
.task-state-badge.badge-warning { color: #795600; border-color: #efcf78; background: #fff3ce; }
.availability-panel { width: fit-content; max-width: min(100%, 380px); margin-top: 9px; padding: 10px 11px; color: #075d62; border: 1px solid #76cbd0; border-radius: 11px; background: linear-gradient(110deg, #dcf7f5, #ecfbf7); box-shadow: 0 5px 14px #087f8c16; }
.availability-panel > strong { display: block; margin-bottom: 8px; }
.available-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.available-slot { padding: 6px 9px; color: #075d62; border: 1px solid #8bd1ce; border-radius: 8px; background: #fff; font-size: 13px; }
.task-control-area { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 10px; max-width: 100%; }
.task-badges { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.run-state-badge { min-height: 28px; padding: 5px 10px; border: 1px solid #d8e0e4; font-weight: 800; }
.task-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 20px; background: #eef1f3; color: #66747b; font-size: 12px; }
.badge.ok { background: #dff7ec; color: #087949; }
.selected-summary { margin-top: 12px; padding: 11px 12px; border-radius: 10px; background: #f3f8fa; color: #48616c; }
.selected-summary.ok { background: #e8f8f4; color: #08766e; }
.excluded { opacity: .55; background: #f3f4f5; }
.kept { border-color: #b9dfd7; }
.slots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.slot { padding: 5px 8px; background: #e7f7f4; border-radius: 7px; font-size: 12px; }
.sms { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.sms input { width: 112px; }
.event-card { min-height: 0; }
.event-card > .section-head small { color: #77878f; font-size: 12px; }
.events { display: grid; gap: 6px; max-height: min(560px, 58vh); overflow-y: auto; padding-right: 5px; overscroll-behavior: contain; }
.event { display: grid; grid-template-columns: 190px 70px 1fr; gap: 8px; font-size: 13px; padding: 8px; border-bottom: 1px solid #edf1f3; }
.hidden { display: none; }
#toast { position: fixed; right: 22px; top: 20px; z-index: 9999; }
.toast { background: #173642; color: white; padding: 11px 16px; border-radius: 10px; margin-bottom: 8px; box-shadow: 0 8px 24px #0003; }
.toast.error { background: #9f3030; }

dialog { width: min(980px, calc(100% - 24px)); max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 22px; background: #f5f9fb; box-shadow: 0 28px 90px #102d3b55; }
.settings-dialog { width: min(1080px, calc(100% - 24px)); }
.account-dialog { width: min(620px, calc(100% - 24px)); }
dialog::backdrop { background: #102d3b88; backdrop-filter: blur(3px); }
.dialog-shell { display: flex; flex-direction: column; max-height: calc(100vh - 30px); }
.dialog-head, .dialog-footer { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: #fff; border-bottom: 1px solid #dfe8ec; }
.dialog-head h2 { margin: 4px 0 0; }
.dialog-footer { justify-content: flex-end; gap: 10px; border-top: 1px solid #dfe8ec; border-bottom: 0; }
.dialog-body { padding: 20px; overflow: auto; }
.icon-button { font-size: 24px; line-height: 1; padding: 7px 12px; }
.form-section { background: #fff; border: 1px solid #dce6eb; border-radius: 15px; padding: 18px; margin-bottom: 14px; }
.form-section h3 { margin: 0 0 14px; font-size: 16px; }
.preview-head { margin-top: 18px; }
.preview-head h3 { margin: 0; }
.account-form-section { display: grid; gap: 15px; margin-bottom: 0; }
.account-footer .account-logout { margin-right: auto; }

.login-page { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #d7f2f3, transparent 42%), linear-gradient(160deg, #eaf3f6, #dfecef); }
.login-shell { width: min(420px, 100%); margin: 0; }
.login-card { overflow: hidden; padding: 34px; text-align: center; border: 1px solid #d0e2e6; border-radius: 24px; background: #fffffff2; box-shadow: 0 24px 70px #21465324; }
.login-logo { width: 78px; height: 78px; margin-bottom: 12px; object-fit: cover; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 10px 24px #0b687c2e; }
.login-card .eyebrow { display: block; color: #07878e; }
.login-card h1 { margin: 8px 0 6px; font-size: 27px; }
.login-card > p { margin: 0 0 22px; color: #708189; }
.login-form { display: grid; gap: 15px; text-align: left; }
.login-form button { margin-top: 5px; padding: 12px; }
.login-error { margin: 0 0 16px; padding: 10px 12px; color: #983c36; border: 1px solid #edc3bf; border-radius: 10px; background: #fff1f0; text-align: left; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .hero, .row { align-items: stretch; flex-direction: column; }
  .brand { align-items: flex-start; }
  .brand-logo { width: 58px; height: 58px; }
  .mode { align-self: flex-start; }
  .task-management-card > .section-head { flex-wrap: wrap; }
  .task-management-card > .section-head button { width: 100%; margin-left: 0; }
  .event { grid-template-columns: 1fr; }
  .two { flex-direction: column; align-items: stretch; }
  .three { grid-template-columns: 1fr; }
  .patient-grid { grid-template-columns: 1fr; }
  .patient-grid .wide { grid-column: auto; }
  .result { flex-direction: column; }
  #targets .task-result { position: relative; padding-top: 56px; }
  #targets .task-heading-row { display: block; }
  #targets .task-badges { position: absolute; top: 14px; right: 14px; max-width: calc(100% - 28px); }
  #targets .task-content-row { flex-direction: column; }
  .management-tools { grid-template-columns: 1fr; }
  .task-actions { justify-content: flex-start; }
  #targets .task-control-area { align-items: stretch; width: 100%; }
  #targets .task-badges { justify-content: flex-end; }
  #targets .availability-panel { width: 100%; }
  #targets .sms { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  #targets .sms [data-sms] { grid-column: 1 / -1; width: 100%; }
  #targets .sms input { width: 100%; min-width: 0; }
  .dialog-body { padding: 12px; }
  .dialog-head, .dialog-footer { padding: 14px; }
  .dialog-footer { flex-wrap: wrap; }
  #notifyFields { grid-template-columns: 1fr; }
  #notifyFields .field-span-2 { grid-column: auto; }
  .account-footer .account-logout { width: 100%; margin-right: 0; }
  .login-card { padding: 28px 22px; }
}