:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color: #282633;
  background: #f6f6fa;
  --ink: #282633;
  --muted: #727b75;
  --soft: #929a93;
  --line: #e7e5ee;
  --line-strong: #d9d7e1;
  --canvas: #f6f6fa;
  --surface: #fff;
  --surface-soft: #faf9fc;
  --graphite: #25232f;
  --graphite-raised: #31303e;
  --graphite-line: #454352;
  --violet: #6454c8;
  --violet-dark: #5040b4;
  --violet-soft: #efedfb;
  --green: #5d765d;
  --green-soft: #edf1e9;
  --blue: #65b8ff;
  --red: #ff7b86;
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --shadow-card: 0 2px 4px rgb(31 37 33 / 4%), 0 10px 26px rgb(31 37 33 / 3%);
  --shadow-modal: 0 28px 90px rgb(18 25 21 / 24%);
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--canvas); }
body { min-width: 320px; min-height: 100vh; margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgb(100 84 200 / 42%);
  outline-offset: 3px;
}
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.helpblock > summary::before, .topology-help summary::before, .network-method summary::before, .network-help-panel summary::before, .network-text summary::before { content: "›"; display: inline-block; margin-right: 7px; color: #6658c0; font-size: 16px; line-height: 1; transition: transform .16s ease; }
.helpblock[open] > summary::before, .topology-help[open] summary::before, .network-method[open] summary::before, .network-help-panel[open] summary::before, .network-text[open] summary::before { transform: rotate(90deg); }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
.icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }
.primary, .secondary, .ghost, .danger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.primary { color: #fff; background: var(--violet); box-shadow: 0 2px 5px rgb(54 42 121 / 14%); }
.primary:hover { background: var(--violet-dark); box-shadow: 0 4px 12px rgb(54 42 121 / 18%); }
.primary:active { transform: translateY(1px); }
.secondary { color: #39463d; background: #edf0e9; border-color: #dce2d7; }
.secondary:hover { background: #e4e9df; }
.ghost { color: #4d5952; background: #fff; border-color: var(--line-strong); }
.ghost:hover { color: var(--ink); background: #faf9fc; border-color: #c5c1b8; }
.danger { color: #a33831; background: #fbebE8; border-color: #f1d4ce; }
.danger:hover { background: #f6ddd7; }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d9d7e1;
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  outline: none;
  box-shadow: 0 1px 1px rgb(25 30 26 / 2%);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #9aa19a; }
input:focus, textarea:focus, select:focus { border-color: #7768cd; box-shadow: 0 0 0 3px rgb(185 76 54 / 11%); }
textarea { min-height: 120px; resize: vertical; line-height: 1.65; }
label { display: block; margin: 18px 0 7px; color: #39433d; font-size: 12px; font-weight: 650; }
select {
  height: 44px;
  min-height: 44px;
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #78847b 50%), linear-gradient(135deg, #78847b 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px;
}
#app { min-height: 100vh; }
.loading { padding: 110px 24px; color: var(--muted); text-align: center; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; font-size: 18px; font-weight: 750; letter-spacing: -.7px; }
.brandmark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 11px;
  padding-right: 2px;
  color: #fff;
  background: var(--violet);
  font-size: 24px;
  letter-spacing: -2px;
}
.brandtext { display: block; }
.brand small { display: block; margin-top: 4px; color: #aab4ad; font-size: 8px; font-weight: 650; letter-spacing: 1.7px; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 10;
  width: 252px;
  display: flex;
  flex-direction: column;
  padding: 28px 18px 18px;
  color: #eef1ec;
  background: var(--graphite);
  border-right: 1px solid #3a3848;
}
.sidebar-head { padding: 0 9px; }
.navlabel { margin: 49px 11px 13px; color: #a5b0a8; font-size: 11px; font-weight: 700; letter-spacing: 1.7px; }
.sidebar nav { display: grid; gap: 6px; }
.navbutton {
  position: relative;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  color: #a9b2ac;
  background: transparent;
  text-align: left;
  font-size: 12px;
  font-weight: 550;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.navbutton:hover { color: #fff; background: rgb(255 255 255 / 5%); }
.navbutton.active { color: #fff; background: #363444; border-color: #49475b; }
.navbutton.active::before {
  position: absolute;
  inset: 10px auto 10px -19px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #9b91e6;
  content: "";
}
.nav-icon { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #aaa6b7; background: #31303e; }
.navbutton.active .nav-icon { color: #f0b4a0; background: #47425c; }
.navbutton .icon { width: 17px; height: 17px; }
.nav-copy { min-width: 0; flex: 1; line-height: 1.35; }
.nav-copy small { display: block; margin-top: 3px; color: #aab4ad; font-size: 11px; font-weight: 450; }
.navbutton.active .nav-copy small { color: #b7c0ba; }
.navbutton .count { min-width: 23px; margin-left: auto; border-radius: 6px; padding: 4px 6px; color: #e8ede7; background: #404a44; font-size: 10px; font-weight: 650; text-align: center; }
.sidebarbottom { display: grid; gap: 14px; margin-top: auto; border-top: 1px solid #39423d; padding: 18px 2px 0; }
.workspace { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: #89958d; font-size: 10px; }
.workspace strong { display: block; color: #e0e6df; font-size: 11px; font-weight: 600; }
.workspace small { display: block; margin-top: 3px; color: #aab4ad; font-size: 11px; }
.workspace-avatar { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #414c44; border-radius: 9px; color: #d5ddd4; background: #323d36; font-size: 9px; font-weight: 750; }
.workspace-state { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #89a981; box-shadow: 0 0 0 3px rgb(137 169 129 / 13%); }
#logout { color: #aab3ac; }
#logout .nav-icon { color: inherit; background: transparent; }
.main { min-width: 0; min-height: 100vh; margin-left: 252px; }
.topbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(22px, 3.3vw, 48px);
  color: var(--muted);
  background: rgb(255 255 255 / 78%);
}
.breadcrumb { min-width: 0; display: flex; align-items: center; gap: 11px; font-size: 11px; }
.breadcrumb-quiet { color: #8c948e; }
.breadcrumb-separator { color: #b3b7b2; }
.breadcrumb strong { overflow: hidden; color: #39433d; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.topright { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; }
#sync { display: inline-flex; align-items: center; gap: 8px; color: #68746c; font-size: 11px; }
.statusdot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #7e9c74; box-shadow: 0 0 0 3px rgb(126 156 116 / 12%); }
#sync.offline { color: #a03d32; }
#sync.offline .statusdot { background: #c65d4e; box-shadow: 0 0 0 3px rgb(198 93 78 / 12%); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e2ded7; border-radius: 50%; color: #59675d; background: #eeece6; font-size: 9px; font-weight: 750; }
#mobilelogout { display: none; }
.content { width: 100%; max-width: 1680px; min-width: 0; margin: 0 auto; padding: 37px clamp(22px, 3.3vw, 48px) 56px; }
.eyebrow { margin: 0 0 9px; color: #6658c0; font-size: 10px; font-weight: 750; letter-spacing: 1.7px; text-transform: uppercase; }
.pageheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.pageheading-copy { min-width: 0; }
.pageheading h1 { margin: 0 0 9px; color: #282633; font: 400 clamp(29px, 2.9vw, 38px)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.8px; }
.subtitle { max-width: 650px; margin: 0; color: #747d76; font-size: 12px; line-height: 1.7; }
.pageheading > .primary { flex: 0 0 auto; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 27px 0 25px; }
.stat {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 17px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(25 30 26 / 2%);
}
.stat strong { display: block; color: #252d28; font-size: 25px; font-weight: 650; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat small { display: block; margin-top: 8px; color: #626d65; font-size: 12px; font-weight: 550; }
.statbadge { width: 35px; height: 35px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #ebe8e1; border-radius: 10px; color: #7b877e; background: #f7f6f2; }
.statbadge .icon { width: 16px; height: 16px; }
.stat:nth-child(2) .statbadge { color: #6888a6; background: #edf2f6; border-color: #e1e8ee; }
.stat:nth-child(3) .statbadge { color: #aa7652; background: #f8f0e9; border-color: #eee3d9; }
.stat:nth-child(4) .statbadge { color: #688262; background: #edf2ea; border-color: #e0e9dc; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 15px; }
.toolbar-main { min-width: 0; display: flex; flex: 1; align-items: center; gap: 10px; }
.search { position: relative; width: min(310px, 38vw); flex: 0 1 310px; }
.search .icon { position: absolute; top: 13px; left: 13px; width: 17px; height: 17px; color: #8f9891; pointer-events: none; }
.search input { min-height: 42px; padding-left: 39px; font-size: 12px; }
.filters { min-width: 0; display: flex; gap: 9px; }
.filters select {
  width: 158px;
  padding: 0 32px 0 12px;
  color: #46534a;
  background-color: #fff;
  font-size: 12px;
}
.viewtag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: #69746c; font-size: 11px; }
.viewtag .icon { width: 15px; height: 15px; color: #a15743; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.column { min-width: 0; min-height: 370px; border: 1px solid #e4e2eb; border-radius: 13px; padding: 11px; background: #f1f0f6; }
.columnhead { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 3px 10px; color: #454352; font-size: 12px; font-weight: 700; }
.columnname { min-width: 0; display: flex; align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #858e87; }
.column[data-status="doing"] .dot { background: #6689a8; }
.column[data-status="blocked"] .dot { background: #b77943; }
.column[data-status="done"] .dot { background: #6e8c65; }
.columncount { min-width: 21px; border: 1px solid #dedbd4; border-radius: 6px; padding: 3px 5px; color: #5b675f; background: #faf9fc; font-size: 11px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.addcolumn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; color: #7c867e; background: transparent; font-size: 19px; line-height: 1; }
.addcolumn:hover { border-color: #ddd9d1; color: var(--violet); background: #fff; }
.cards { display: flex; flex-direction: column; gap: 9px; }
.taskcard {
  width: 100%;
  min-width: 0;
  display: block;
  border: 1px solid #e7e5ee;
  border-radius: 10px;
  padding: 13px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(25 30 26 / 3%);
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.taskcard:hover { transform: translateY(-1px); border-color: #d1c9be; box-shadow: 0 7px 18px rgb(38 43 39 / 8%); }
.taskcard:focus-visible { position: relative; z-index: 1; }
.cardmeta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 9px; }
.project { min-width: 0; overflow: hidden; color: #615b80; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.taskcode { flex: 0 0 auto; color: #696878; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.taskcard h3 { margin: 0 0 7px; color: #29312c; font-size: 14px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.carddesc { display: -webkit-box; overflow: hidden; margin: 0 0 11px; color: #606c63; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.priority { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e6e4de; border-radius: 5px; padding: 4px 6px; color: #536157; background: #f4f5f1; font-size: 11px; font-weight: 650; white-space: nowrap; }
.priority.high { border-color: #efd3c9; color: #a84732; background: #fbede8; }
.priority.low { border-color: #dce5ea; color: #56758b; background: #eef3f6; }
.cardfooter { display: flex; align-items: center; justify-content: space-between; gap: 7px; border-top: 1px solid #f0eee9; padding-top: 10px; }
.owner { max-width: 105px; overflow: hidden; color: #59665d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.owner::before { width: 6px; height: 6px; display: inline-block; margin-right: 5px; border-radius: 50%; background: #859a7d; content: ""; }
.blockreason { overflow-wrap: anywhere; margin: 0 0 10px; border-left: 2px solid #c18a56; border-radius: 0 6px 6px 0; padding: 8px 9px; color: #704b28; background: #faf1e5; font-size: 11px; line-height: 1.55; }
.empty { margin-bottom: 2px; border: 1px dashed #d9d6cf; border-radius: 8px; padding: 28px 10px; color: #696878; background: rgb(255 255 255 / 45%); font-size: 11px; line-height: 1.7; text-align: center; }
.boardfooter { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; color: #68736b; font-size: 11px; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr); background: #faf9f6; }
.loginbrand { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-right: 1px solid #3b394a; padding: 42px clamp(34px, 7.5vw, 112px); color: #fff; background: var(--graphite); }
.loginmessage { max-width: 520px; margin: 70px 0; }
.loginmessage .eyebrow { color: #bfb8ff; }
.loginmessage h1 { margin: 20px 0; color: #f6f5fb; font: 400 clamp(40px, 5vw, 68px)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -1.8px; }
.loginmessage h1 span { color: #bdb5f4; }
.loginmessage p:not(.eyebrow) { max-width: 370px; margin: 0; color: #b5beb8; font-size: 13px; line-height: 1.8; }
.loginfooter { display: flex; align-items: center; gap: 10px; color: #a8b1aa; font-size: 10px; }
.loginfooter-mark { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #49534d; border-radius: 8px; color: #d5ddd5; font-size: 8px; font-weight: 750; }
.loginformwrap { display: flex; align-items: center; justify-content: center; padding: 40px clamp(24px, 6vw, 80px); }
.loginformpanel { width: 100%; max-width: 390px; }
.login-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 23px; border: 1px solid #e7e3dc; border-radius: 999px; padding: 7px 11px; color: #68746b; background: #fff; font-size: 11px; font-weight: 600; }
.login-badge .icon { width: 14px; height: 14px; color: var(--violet); }
.loginform .eyebrow { margin-bottom: 13px; }
.loginform h2 { margin: 0 0 9px; color: #292f2b; font-size: 28px; font-weight: 650; letter-spacing: -1px; }
.loginform > p:not(.eyebrow):not(.inlineerror):not(.loginhint) { margin: 0 0 23px; color: #7b847d; font-size: 12px; line-height: 1.7; }
.loginform .primary { width: 100%; margin-top: 22px; }
.loginform .primary span { margin-left: auto; font-size: 16px; }
.loginhint { display: flex; align-items: center; gap: 9px; margin: 30px 0 0 !important; border-top: 1px solid var(--line); padding-top: 17px; color: #69746c !important; font-size: 11px !important; }
.loginhint .icon { width: 15px; height: 15px; color: #7e8f7d; }
.inlineerror { min-height: 18px; margin: 10px 0 0; color: #a83f35 !important; font-size: 11px !important; line-height: 1.5; }
dialog {
  width: min(650px, calc(100vw - 28px));
  max-height: min(90dvh, 900px);
  overflow: hidden;
  border: 1px solid #e4e0d9;
  border-radius: 16px;
  padding: 0;
  color: var(--ink);
  background: #fcfbf8;
  box-shadow: var(--shadow-modal);
}
dialog::backdrop { background: rgb(23 31 26 / 62%); }
.modalhead { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 20px 25px; }
.modalhead h2 { margin: 0; color: #252d28; font-size: 18px; font-weight: 650; letter-spacing: -.4px; }
.close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; color: #778078; background: transparent; font-size: 24px; line-height: 1; }
.close:hover { color: var(--ink); background: #f0eee9; }
.modalbody { max-height: calc(90dvh - 76px); overflow-y: auto; padding: 4px 25px 25px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.detaildesc { margin: 10px 0 18px; color: #5f6962; font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.detailinfo { margin: 16px 0; color: #68736b; font-size: 11px; line-height: 1.75; }
.detailinfo + h3 { margin: 16px 0 6px; color: #29312c; font-size: 19px; letter-spacing: -.45px; }
.sectiontitle { margin: 27px 0 12px; color: #8c5b49; font-size: 11px; font-weight: 750; letter-spacing: 1.3px; text-transform: uppercase; }
.event { border-top: 1px solid #ebe8e2; padding: 11px 0; color: #58635b; font-size: 11px; line-height: 1.6; }
.eventmeta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; color: #707a72; font-size: 11px; }
.eventmeta strong { color: #465249; font-size: 11px; font-weight: 650; }
.eventmessage { overflow-wrap: anywhere; }
.helptext { color: #727d75; font-size: 11px; line-height: 1.7; }
.helpblock { border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.helpblock > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; cursor: pointer; padding: 14px 16px; color: #354139; list-style-position: inside; }
.helpblock > summary strong { font-size: 11px; font-weight: 650; }
.helpblock > summary span { color: #696878; font-size: 11px; }
.helpblock-body { border-top: 1px solid var(--line); padding: 2px 16px 16px; }
.helpblock-body .helptext { margin-bottom: 12px; }
.code { overflow: auto; border: 1px solid #303b35; border-radius: 8px; padding: 13px 14px; color: #e1e9e1; background: #242d28; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
code { border-radius: 4px; padding: 2px 4px; color: #755044; background: #f1ece5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.topology-section { min-width: 0; margin-top: 31px; }
.topology-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.topology-heading h2, .queue-agents > h2 { margin: 0; color: #363444; font-size: 17px; font-weight: 650; letter-spacing: -.35px; }
.scope-badge { flex: 0 0 auto; border: 1px solid #d5dfd3; border-radius: 999px; padding: 6px 10px; color: #456047; background: #edf2ea; font-size: 10px; font-weight: 650; white-space: nowrap; }
.topology-help { margin: 0 0 12px; }
.topology-help summary, .network-method summary, .network-help-panel summary, .network-text summary {
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  color: #68746b;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
}
.topology-help > p { max-width: 720px; margin: 8px 0 12px; color: #626d65; font-size: 11px; line-height: 1.7; }
.topology-state { display: flex; align-items: center; gap: 9px; border: 1px solid #d8e4d6; border-radius: 9px; padding: 11px 13px; color: #456045; background: #edf3eb; font-size: 11px; line-height: 1.55; }
.topology-state .icon { width: 16px; height: 16px; }
.topology-state.stale, .topology-state.unavailable { border-color: #ecd6bd; color: #875b31; background: #fbf1e4; }
.topology-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; color: #626d65; font-size: 11px; line-height: 1.6; }
.topology-summary:empty { display: none; }
.topology-summary strong { color: #39443d; font-weight: 700; }
.topology-empty { margin: 14px 0 0; color: #737d75; font-size: 11px; line-height: 1.7; }
.queue-agents { margin-top: 35px; border-top: 1px solid var(--line-strong); padding-top: 26px; }
.queue-agents > .helptext { max-width: 680px; margin: 8px 0 15px; }
.terminalgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; margin-top: 14px; }
.terminalcard { min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 16px; background: #fff; box-shadow: 0 1px 2px rgb(25 30 26 / 2%); }
.terminalcard h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; color: #343e37; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.terminalcard h3 .icon { width: 17px; height: 17px; color: #7a8a7b; }
.terminalcard p { margin: 0 0 14px; color: #606c63; font-size: 11px; line-height: 1.8; }
.terminalcard.revoked { background: #f8f6f2; }
.terminalcard.revoked h3, .terminalcard.revoked p { color: #929991; }
.terminalcard .danger { min-height: 38px; padding: 8px 11px; font-size: 11px; }
.emptyterminals { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 22px; color: #727d75; background: #fff; font-size: 11px; line-height: 1.7; text-align: center; }
#topology-network { min-width: 0; }
.network-panel { overflow: hidden; border: 1px solid #454252; border-radius: 16px; color: #edf1eb; background: #242230; box-shadow: 0 12px 30px rgb(26 32 28 / 9%); }
.network-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; border-bottom: 1px solid rgb(255 255 255 / 8%); padding: 18px 22px; }
.network-titlegroup { min-width: 0; }
.network-eyebrow { margin: 0 0 5px; color: #b9b1f1; font-size: 10px; font-weight: 750; letter-spacing: 1.6px; }
.network-titlegroup h3 { margin: 0; color: #f0f2ed; font-size: 14px; font-weight: 650; letter-spacing: -.2px; }
.network-controls { display: flex; align-items: center; gap: 6px; }
.network-controls button, .network-footer button {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #53506b;
  border-radius: 8px;
  padding: 6px 10px;
  color: #edf1eb;
  background: #353347;
  font-size: 18px;
  font-weight: 550;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.network-controls button:hover, .network-footer button:hover { border-color: #8d88a8; background: #403d53; }
.network-controls button:focus-visible, .network-footer button:focus-visible { outline-color: #e3a18a; }
.network-controls button:disabled, .network-footer button:disabled { opacity: .45; cursor: default; }
.network-controls output { min-width: 43px; color: #d1d8d0; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.network-controls .network-fit { min-width: 0; margin-left: 3px; padding-inline: 12px; font-size: 11px; }
.network-stateband { border-bottom: 1px solid rgb(255 255 255 / 7%); padding: 11px 22px 0; }
.network-activity-legend { display: flex; flex-wrap: wrap; gap: 8px 19px; color: #d2d9d2; font-size: 11px; line-height: 1.6; }
.network-activity-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.activity-key { width: 9px; height: 9px; display: inline-block; flex: 0 0 auto; border: 1.5px solid #aab6ad; border-radius: 50%; font-style: normal; }
.activity-key.working { border-color: var(--blue); background: rgb(101 184 255 / 16%); }
.activity-key.needs-human { border-color: var(--red); background: rgb(255 123 134 / 16%); }
.activity-key.neutral { border-color: #aab6ad; background: rgb(170 182 173 / 10%); }
.network-activity-notice { margin: 8px 0 10px; color: #e0c9aa; font-size: 11px; line-height: 1.6; }
.network-activity-notice[hidden] { display: none; }
.network-canvas {
  display: block;
  width: 100%;
  height: 440px;
  touch-action: none;
  cursor: grab;
  background-color: #242230;
  background-image: radial-gradient(#a7a0d126 .75px, transparent .75px);
  background-size: 23px 23px;
  outline-offset: -5px;
}
.network-canvas:focus-visible { outline: 2px solid #c2baff; }
.network-canvas.dragging { cursor: grabbing; }
.network-line { stroke: #aaa5c8; stroke-width: 1.6; opacity: .68; transition: stroke .18s ease, opacity .18s ease; }
.network-line.highlighted { stroke: #f4ad7b; stroke-width: 2.6; opacity: 1; }
.network-line.dimmed { opacity: .12; }
.network-node { color: #433f58; cursor: pointer; outline: none; }
.network-hit { fill: transparent; pointer-events: all; }
.network-halo { fill: rgb(176 166 229 / 5%); stroke: rgb(192 183 235 / 28%); stroke-width: 1; }
.network-orb { fill: #f2f1e9; stroke: #ccc8dd; stroke-width: 2; transition: fill .15s ease, stroke .15s ease; }
.network-node:hover .network-orb { fill: #fffdfd; stroke: #e1a17b; }
.network-node:focus-visible .network-halo { fill: rgb(227 161 138 / 9%); stroke: #efc1a4; stroke-width: 3; }
.network-node.selected .network-orb { fill: #f4ad7b; stroke: #ffd5b1; stroke-width: 3; }
.network-node.selected .network-halo { fill: rgb(244 173 123 / 8%); stroke: rgb(244 173 123 / 38%); }
.network-node.neighbor .network-orb { fill: #e7e2ff; stroke: #bdb4ef; }
.network-node.dimmed { opacity: .68; }
.network-node.activity-working, .network-node.activity-needs-human { opacity: 1; }
.network-activity-trace, .network-activity-pulse { fill: none; stroke-width: 2; pointer-events: none; visibility: hidden; }
.network-activity-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; }
.network-node.activity-working .network-activity-trace, .network-node.activity-working .network-activity-pulse { visibility: visible; stroke: var(--blue); }
.network-node.activity-needs-human .network-activity-trace, .network-node.activity-needs-human .network-activity-pulse { visibility: visible; stroke: var(--red); }
.network-node.activity-working .network-activity-pulse, .network-node.activity-needs-human .network-activity-pulse { animation: network-activity-pulse 1.8s ease-out infinite; }
.network-node.activity-needs-human .network-activity-pulse { animation-duration: 1.5s; }
.network-node.activity-needs-human.activity-working .network-activity-trace, .network-node.activity-needs-human.activity-working .network-activity-pulse { stroke: var(--red); }
.network-name { display: -webkit-box; overflow: hidden; max-height: 40px; color: #f5f4fa; font: 650 14px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.network-node.selected .network-name { color: #ffd3b4; }
.network-activity-label { margin-top: 4px; color: #c7d1c9; font: 500 11px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; white-space: nowrap; }
.network-node.activity-working .network-activity-label { color: #8bcdff; }
.network-node.activity-needs-human .network-activity-label { color: #ffadb3; }
.network-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgb(255 255 255 / 8%); padding: 13px 20px; background: rgb(255 255 255 / 2%); }
.network-footer p { min-width: 0; margin: 0; color: #cbd4cc; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.network-footer strong { display: block; margin-bottom: 1px; color: #ffd0ae; font-size: 12px; font-weight: 700; }
.network-selection-activity { display: block; margin: 2px 0 4px; color: #d2d9d2; }
.network-footer button { min-height: 38px; flex: 0 0 auto; padding: 6px 11px; font-size: 11px; }
.network-method, .network-help-panel { border-top: 1px solid rgb(255 255 255 / 7%); padding: 10px 20px; }
.network-method summary, .network-help-panel summary { color: #c0bdda; }
.network-method p, .network-help-panel p { max-width: 780px; margin: 8px 0 2px; color: #c9c5d7; font-size: 11px; line-height: 1.7; }
.network-text { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; color: #46534a; background: #fff; font-size: 11px; }
.network-text summary { color: #58655b; }
.network-text ul { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.network-text li { overflow-wrap: anywhere; border-top: 1px solid #eeece6; padding: 10px 0 0; line-height: 1.65; }
.network-text li > span { display: block; margin-top: 4px; }
.network-text button { max-width: 100%; min-height: 38px; overflow-wrap: anywhere; border: 1px solid #d9e1d4; border-radius: 7px; padding: 7px 10px; color: #394d3d; background: #f0f4ed; font-size: 11px; text-align: left; }
.network-text button[aria-pressed="true"] { border-color: #d78f6b; color: #8c4229; background: #fff0e5; }
.network-text-activity { font-weight: 650; }
.network-text-activity.activity-working { color: #225d91; }
.network-text-activity.activity-needs-human { color: #a22a38; }
.network-empty { min-height: 290px; display: grid; place-content: center; justify-items: center; padding: 42px 24px; text-align: center; }
.network-empty > .icon { width: 34px; height: 34px; color: #b9b1f1; }
.network-empty h3 { margin: 17px 0 7px; color: #eff1eb; font-size: 18px; font-weight: 650; letter-spacing: -.4px; }
.network-empty p { margin: 0; color: #b2beb4; font-size: 11px; line-height: 1.7; }
.approval-section { margin-top: 27px; border: 1px solid #e2dfed; border-radius: 16px; padding: 21px; background: #fff; box-shadow: var(--shadow-card); }
.approval-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.approval-heading .eyebrow { margin: 0 0 5px; color: #7569bf; font-size: 10px; font-weight: 750; letter-spacing: 1.5px; }
.approval-heading h2 { margin: 0; color: #302e3d; font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 500; letter-spacing: -.35px; }
.approval-heading p:not(.eyebrow) { margin: 5px 0 0; color: #686777; font-size: 12px; line-height: 1.55; }
.approval-count { flex: 0 0 auto; border: 1px solid #dcd7f3; border-radius: 999px; padding: 7px 11px; color: #5144a5; background: #f1effb; font-size: 11px; font-weight: 700; }
.approval-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); gap: 13px; }
.approval-card { min-width: 0; border: 1px solid #e5e2ed; border-radius: 13px; padding: 17px; background: #fcfbfe; }
.approval-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.approval-kicker { display: block; margin-bottom: 4px; color: #78758b; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.approval-cardhead h3 { margin: 0; color: #302e3d; font-size: 15px; font-weight: 680; line-height: 1.45; overflow-wrap: anywhere; }
.approval-pending { flex: 0 0 auto; border: 1px solid #eedfca; border-radius: 999px; padding: 5px 9px; color: #81572c; background: #fbf4e9; font-size: 11px; font-weight: 650; }
.approval-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 12px; color: #656373; font-size: 12px; line-height: 1.5; }
.approval-meta strong { color: #413d5a; }
.approval-meta code { color: #5144a5; background: #f0eef9; overflow-wrap: anywhere; }
.approval-review { display: grid; gap: 12px; margin-top: 14px; border: 1px solid #e9e7f0; border-radius: 10px; padding: 13px; background: #fff; }
.approval-field > span { display: block; margin-bottom: 6px; color: #676578; font-size: 11px; font-weight: 700; }
.approval-field pre { max-width: 100%; margin: 0; border: 1px solid #e5e2ef; border-radius: 8px; padding: 11px 12px; color: #302e3d; background: #f6f5fb; font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.approval-field .approval-cwd { display: block; padding: 8px 9px; color: #45415c; background: #f1eff8; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.approval-field p { margin: 0; color: #454453; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.approval-foot { margin-top: 12px; color: #74542e; font-size: 11px; font-variant-numeric: tabular-nums; }
.approval-note { margin: 9px 0 0; color: #686777; font-size: 12px; line-height: 1.6; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.approval-actions .primary, .approval-actions .danger { min-height: 44px; padding-inline: 15px; font-size: 12px; }
.approval-actions .danger { color: #8f3438; background: #fbebee; border-color: #eed3d7; }
.approval-actions .danger:hover { background: #f7dfe3; }
.approval-progress-list { display: grid; gap: 8px; margin-bottom: 13px; }
.approval-progress { display: flex; align-items: center; gap: 9px; border: 1px solid #dcd7f3; border-radius: 9px; padding: 11px 12px; color: #5144a5; background: #f5f3fc; font-size: 12px; line-height: 1.5; }
.approval-progress:focus { outline: 2px solid #7768cd; outline-offset: 2px; }
.approval-progress-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #7569bf; }
@keyframes network-activity-pulse { 0% { transform: scale(.98); opacity: .78; } 85%, 100% { transform: scale(1.31); opacity: 0; } }
@media (max-width: 1240px) {
  .sidebar { width: 226px; }
  .main { margin-left: 226px; }
  .content { padding-inline: 27px; }
  .board { gap: 9px; }
  .column { padding: 9px; }
  .taskcard { padding: 11px; }
  .toolbar { align-items: flex-start; }
  .viewtag { display: none; }
}
@media (max-width: 1020px) {
  .sidebar { width: 72px; align-items: center; padding: 25px 10px 14px; }
  .sidebar-head { padding: 0; }
  .sidebar .brand { justify-content: center; }
  .sidebar .brandtext, .sidebar .navlabel, .sidebar .nav-copy, .sidebarbottom { display: none; }
  .sidebar nav { width: 100%; margin-top: 42px; }
  .sidebar .navbutton { justify-content: center; padding: 7px; }
  .sidebar .navbutton.active::before { left: -11px; }
  .sidebar .navbutton .count { position: absolute; top: 1px; right: 0; min-width: 18px; border: 1px solid var(--graphite); border-radius: 999px; padding: 2px 5px; color: #fff; background: var(--violet); font-size: 11px; }
  .main { margin-left: 72px; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { gap: 9px; }
  .stat { min-height: 82px; padding: 12px; }
}
@media (max-width: 700px) {
  .sidebar {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 66px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid #3a3848;
    padding: 11px 15px;
  }
  .sidebar-head { padding: 0; }
  .sidebar .brand { gap: 8px; font-size: 15px; }
  .sidebar .brandmark { width: 32px; height: 32px; border-radius: 9px; font-size: 21px; }
  .sidebar .nav-copy { display: block; font-size: 10px; white-space: nowrap; }
  .sidebar .nav-copy small { display: none; }

  .sidebar nav { display: flex; justify-content: flex-end; gap: 5px; margin: 0; }
  .sidebar .navbutton, .sidebar .navbutton.active { width: auto; min-width: 0; min-height: 40px; justify-content: center; gap: 6px; border-radius: 8px; padding: 5px 8px; font-size: 10px; }
  .sidebar .navbutton.active::before { inset: auto 9px -12px; width: auto; height: 2px; border-radius: 2px 2px 0 0; }
  .sidebar .nav-icon { width: 26px; height: 26px; }
  .sidebar .navbutton .count { position: static; min-width: 20px; margin-left: 1px; border: 0; border-radius: 6px; padding: 3px 4px; font-size: 11px; }
  .main { margin: 0; }
  .topbar { height: 53px; padding: 0 16px; }
  .breadcrumb { gap: 7px; font-size: 11px; }
  .breadcrumb-quiet, .breadcrumb-separator { display: none; }
  .breadcrumb strong { font-size: 11px; }
  .topright { gap: 8px; }
  #sync { gap: 6px; font-size: 11px; }
  #sync .syncword { display: none; }
  .avatar { width: 28px; height: 28px; }
  #mobilelogout { width: 34px; min-height: 34px; display: inline-flex; padding: 7px; }
  #mobilelogout .icon { width: 16px; height: 16px; }
  .content { padding: 25px 16px 42px; }
  .pageheading { align-items: flex-start; gap: 12px; }
  .pageheading h1 { font-size: 27px; }
  .subtitle { max-width: 290px; font-size: 11px; }
  .pageheading > .primary { min-height: 40px; gap: 6px; padding: 8px 10px; font-size: 10px; white-space: nowrap; }
  .pageheading > .primary .icon { width: 15px; height: 15px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 21px 0; }
  .stat { min-height: 73px; padding: 10px 9px; }
  .stat strong { font-size: 21px; }
  .stat small { margin-top: 6px; color: #626d65; font-size: 11px; white-space: nowrap; }
  .statbadge { display: none; }
  .toolbar { display: block; margin-bottom: 12px; }
  .toolbar-main { display: grid; gap: 8px; }
  .search { width: 100%; max-width: none; }
  .filters { width: 100%; gap: 7px; }
  .filters select { width: 50%; min-width: 0; flex: 1; padding-left: 8px; padding-right: 30px; font-size: 12px; }
  .board { grid-template-columns: 1fr; gap: 10px; }
  .column { min-height: 115px; padding: 10px; }
  .columnhead { min-height: 34px; padding-bottom: 8px; font-size: 12px; }
  .cards { gap: 8px; }
  .taskcard { padding: 12px; }
  .taskcard h3 { font-size: 13px; }
  .cardfooter { flex-wrap: nowrap; }
  .empty { padding: 19px 10px; }
  .boardfooter { padding-top: 13px; font-size: 11px; }
  .boardfooter span:last-child { display: none; }
  .topology-section { margin-top: 25px; }
  .approval-section { margin-top: 21px; padding: 15px; }
  .approval-heading { align-items: flex-start; }
  .approval-heading h2 { font-size: 19px; }
  .approval-grid { grid-template-columns: 1fr; }
  .approval-card { padding: 13px; }
  .approval-cardhead { flex-wrap: wrap; }
  .approval-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .approval-actions button { width: 100%; }
  .topology-heading h2, .queue-agents > h2 { font-size: 15px; }
  .topology-summary { gap: 5px 13px; font-size: 11px; }
  .topology-summary span:last-child { flex-basis: 100%; }
  .network-toolbar { padding: 14px 13px; }
  .network-controls { width: 100%; justify-content: flex-end; gap: 5px; }
  .network-controls button { min-width: 40px; min-height: 40px; }
  .network-controls .network-fit { margin-left: auto; }
  .network-stateband { padding: 9px 13px 0; }
  .network-activity-legend { gap: 6px 12px; font-size: 11px; }
  .network-activity-notice { font-size: 11px; }
  .network-canvas { height: 380px; }
  .network-footer { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 11px 13px; }
  .network-footer p { flex: 1 1 150px; }
  .network-footer button { min-height: 37px; }
  .network-method, .network-help-panel { padding: 9px 13px; }
  .network-text { padding: 11px 12px; }
  .queue-agents { margin-top: 28px; padding-top: 21px; }
  .terminalgrid { grid-template-columns: 1fr; }
  .login { min-height: 100vh; grid-template-columns: 1fr; }
  .loginbrand { min-height: 270px; padding: 24px 25px; }
  .loginmessage { margin: 42px 0 25px; }
  .loginmessage h1 { margin: 0 0 11px; font-size: clamp(30px, 8vw, 40px); letter-spacing: -1px; }
  .loginmessage p:not(.eyebrow) { max-width: 330px; font-size: 11px; line-height: 1.65; }
  .loginmessage .eyebrow { margin-bottom: 8px; font-size: 9px; }
  .loginfooter { font-size: 10px; }
  .loginformwrap { padding: 29px 24px 42px; }
  .loginformpanel { max-width: 410px; }
  .login-badge { margin-bottom: 18px; }
  .loginform h2 { font-size: 24px; }
  .modalhead { padding: 16px 18px; }
  .modalbody { max-height: calc(90dvh - 65px); padding: 3px 18px 19px; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .actions { margin-top: 19px; }
  .topology-help > p { font-size: 11px; }
}
@media (max-width: 360px) {
  .filters { flex-direction: column; }
  .filters select { width: 100%; flex: none; }
  .sidebar { grid-template-columns: auto minmax(0, 1fr); gap: 7px; padding-inline: 11px; }
  .sidebar .brand { gap: 6px; }
  .sidebar .brandtext { display: none; }
  .sidebar .brand small { letter-spacing: .8px; }
  .sidebar nav { gap: 2px; }
  .sidebar .navbutton, .sidebar .navbutton.active { gap: 4px; padding-inline: 5px; font-size: 10px; }
  .sidebar .nav-icon { width: 23px; height: 23px; }
  .content { padding-inline: 13px; }
  .approval-section { padding: 12px; }
  .approval-card { padding: 11px; }
  .approval-actions { grid-template-columns: 1fr; }
  .pageheading { gap: 6px; }
  .pageheading h1 { font-size: 24px; }
  .pageheading > .primary { padding-inline: 8px; font-size: 11px; }
  .stat { padding-inline: 7px; }
  .stat strong { font-size: 19px; }

  .column { padding: 8px; }
  .network-canvas { height: 350px; }
  .network-controls output { min-width: 34px; font-size: 11px; }
  .network-controls .network-fit { padding-inline: 8px; font-size: 11px; }
  .network-activity-legend { gap: 5px 9px; font-size: 11px; }
  .loginbrand { min-height: 255px; padding-inline: 21px; }
  .loginformwrap { padding-inline: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .network-node.activity-working .network-activity-pulse, .network-node.activity-needs-human .network-activity-pulse { visibility: hidden; }
  .network-node.activity-working .network-activity-trace, .network-node.activity-needs-human .network-activity-trace { stroke-width: 3; }
}
#toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  max-width: min(380px, calc(100vw - 32px));
  visibility: hidden;
  transform: translateY(8px);
  border: 1px solid #48564c;
  border-radius: 10px;
  padding: 12px 15px;
  color: #f1f3ee;
  background: #29332d;
  box-shadow: 0 12px 32px rgb(22 29 24 / 20%);
  font-size: 11px;
  line-height: 1.55;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
#toast.visible { visibility: visible; transform: translateY(0); opacity: 1; }
@media (max-width: 600px) { #toast { right: 12px; bottom: 12px; } }