.actions-demo {
  --action-blue: var(--blue, #075de8);
  --action-danger: #c92a2a;
  width: min(100%, 560px);
  min-width: 0;
  color: var(--text);
  font: 12px/1.35 "DM Sans", sans-serif;
}

.actions-demo *, .actions-demo *::before, .actions-demo *::after { box-sizing: border-box; }
.actions-demo button, .actions-demo input { color: inherit; font: inherit; }
.actions-demo button { cursor: pointer; }
.actions-demo button:disabled { cursor: default; opacity: .58; }
.actions-demo [hidden] { display: none !important; }
.actions-demo p { margin: 3px 0; color: var(--muted); }
.actions-demo small { color: var(--muted); }
.action-button { min-height: 34px; border: 1px solid transparent; border-radius: 6px; padding: 7px 12px; font-weight: 800; }
.action-button.primary { background: var(--action-blue); color: #fff; }
.action-button.secondary { border-color: var(--border-strong); background: var(--surface); }
.action-button.tertiary { border-color: transparent; background: transparent; color: var(--action-blue); text-decoration: underline; text-underline-offset: 3px; }
.action-button.ghost { border-color: transparent; background: transparent; color: inherit; }
.action-button.ghost:hover, .action-button.ghost:focus-visible { background: color-mix(in srgb, var(--surface) 18%, transparent); }
.action-button.danger { background: var(--action-danger); color: #fff; }
.action-button.icon-text { display: inline-flex; align-items: center; gap: 7px; }
.action-button.full { width: 100%; }

.actions-button-stage { display: grid; min-height: 145px; place-content: center; justify-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 14px; text-align: center; }
.actions-button-stage.paired { grid-template-columns: auto auto; }.actions-button-stage.tinted { background: linear-gradient(135deg, #172554, #1e40af); color: #fff; }.actions-button-stage.danger-zone { justify-items: start; place-content: center start; text-align: left; }.actions-button-stage.danger-zone .action-button { margin-top: 5px; }.actions-button-stage > small { min-height: 16px; }.actions-button-stage.tinted small { color: #dbeafe; }
.actions-demo-link { border: 0; background: transparent; color: var(--action-blue); padding: 2px; font-weight: 700; }
.actions-icon-stage { position: relative; display: grid; min-height: 145px; place-content: center; justify-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.action-icon-button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--action-blue); font-size: 20px; }.actions-icon-stage [role="tooltip"] { border-radius: 4px; background: #1e2736; color: #fff; padding: 4px 7px; font-size: 10px; }
.actions-mobile-frame { display: grid; gap: 14px; width: min(100%, 300px); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 16px; }.actions-mobile-frame strong { display: flex; justify-content: space-between; }.actions-mobile-frame strong span { color: var(--action-blue); }
.action-button.toggle[aria-pressed="true"] { border-color: var(--action-blue); background: var(--blue-soft); color: var(--action-blue); }
.actions-favorite { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; min-height: 112px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 12px; }.actions-favorite div { display: grid; }.actions-favorite button { grid-column: 2; grid-row: 1 / 3; width: 38px; height: 38px; border: 0; background: transparent; color: #b77900; font-size: 28px; }.actions-favorite > span { color: var(--muted); font-size: 10px; }.actions-favorite button[aria-pressed="true"] { color: #e4a000; }
.actions-group-stage { display: flex; flex-wrap: wrap; justify-content: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 7px; }.actions-group-stage .action-button { border-width: 0 1px 0 0; border-radius: 0; }.actions-group-stage .action-button:last-child { border-right: 0; }

.actions-split-stage { position: relative; display: grid; min-height: 150px; place-content: start center; padding-top: 10px; }.actions-split-stage > div:first-child { display: flex; }.actions-split-stage .action-button:first-child { border-radius: 6px 0 0 6px; }.actions-split-stage .action-button.arrow { min-width: 35px; border-left-color: rgba(255,255,255,.45); border-radius: 0 6px 6px 0; padding-inline: 8px; }.actions-split-stage .actions-menu { top: 51px; }
.actions-disclosure { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.actions-disclosure > button { display: flex; width: 100%; align-items: center; gap: 7px; border: 0; background: var(--surface); padding: 10px; font-weight: 800; text-align: left; }.actions-disclosure > button span { transition: transform .16s ease; }.actions-disclosure > button[aria-expanded="false"] span { transform: rotate(-90deg); }.actions-disclosure > div { display: grid; gap: 7px; border-top: 1px solid var(--border); background: var(--surface-subtle); padding: 10px; }.actions-disclosure label { display: flex; gap: 6px; font-size: 10px; }.actions-disclosure input { accent-color: var(--action-blue); }
.actions-repeat { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 11px; }.actions-repeat > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #e8f6ee; color: #14804a; font-weight: 800; }.actions-repeat div { display: grid; }.actions-repeat .action-button { padding-inline: 8px; }
.actions-hold { display: grid; gap: 7px; width: min(100%, 300px); }.actions-hold > button { position: relative; height: 38px; overflow: hidden; border: 1px solid var(--action-danger); border-radius: 6px; background: var(--surface); color: var(--action-danger); }.actions-hold > button span { position: absolute; inset: 0 auto 0 0; width: 0; background: #ffe8e8; transition: width .4s ease; }.actions-hold > button b { position: relative; }.actions-hold > button.progress span { width: 100%; }.actions-hold > small { text-align: center; }
.action-button.loading { display: inline-flex; min-width: 130px; align-items: center; justify-content: center; gap: 7px; }.action-button.loading i { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; }.action-button.loading.busy i { display: block; animation: actions-spin .8s linear infinite; }@keyframes actions-spin { to { transform: rotate(360deg); } }

.actions-menu-stage, .actions-context-stage, .actions-menubar-stage { position: relative; min-height: 150px; padding: 9px; }.actions-menu-trigger { display: flex; min-width: 100px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); padding: 7px 9px; font-weight: 800; }.actions-menu-stage.overflow .actions-menu-trigger { min-width: 38px; justify-content: center; letter-spacing: 1px; }.actions-menu { position: absolute; z-index: 3; top: 49px; left: 50%; display: grid; width: min(86%, 190px); border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: 0 10px 26px rgba(20,34,62,.18); padding: 4px; transform: translateX(-50%); }.actions-menu > button { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 5px; min-height: 27px; border: 0; border-radius: 4px; background: transparent; padding: 5px 7px; text-align: left; }.actions-menu > button:hover, .actions-menu > button.selected { background: var(--blue-soft); color: var(--action-blue); }.actions-menu > button > span { text-align: center; }.actions-menu > button > b { font-weight: 600; }.actions-menu > button.danger { color: var(--action-danger); }.actions-menu hr { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid var(--border); }.actions-menu kbd, .menu-shortcut { color: var(--muted); font: 9px "IBM Plex Mono", monospace; white-space: nowrap; }
.actions-context-stage article { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); padding: 7px; }.actions-context-stage article > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 5px; background: var(--blue-soft); color: var(--action-blue); font-size: 9px; font-weight: 800; }.actions-context-stage article div { display: grid; }.actions-context-stage article button { border: 0; background: transparent; color: var(--action-blue); font-weight: 700; }.actions-context-stage .actions-menu { top: 57px; right: 8px; left: auto; width: 155px; transform: none; }
.actions-menu-stage.cascading .actions-menu { left: 42%; }.actions-menu button i { margin-left: auto; font-style: normal; }.actions-submenu { top: 31px; left: calc(100% + 55px); width: 105px; }.actions-menu-stage.checks .actions-menu > button, .actions-menu-stage.radios .actions-menu > button { grid-template-columns: 18px 1fr; }.actions-menu-stage.grouped .actions-menu { top: 47px; }.actions-menu-stage.grouped .actions-menu > button { min-height: 21px; padding-block: 3px; }.actions-menu-stage.shortcuts .actions-menu > button { grid-template-columns: 1fr auto; }
.actions-menubar-stage { padding: 10px; }.actions-menubar-stage > [role="menubar"] { display: flex; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 3px; }.actions-menubar-stage > [role="menubar"] button { border: 0; border-radius: 4px; background: transparent; padding: 5px 8px; }.actions-menubar-stage > [role="menubar"] button[aria-expanded="true"] { background: var(--blue-soft); color: var(--action-blue); }.actions-menubar-stage .actions-menu { top: 48px; left: 10px; width: 150px; transform: none; }

.actions-toolbar-stage { display: grid; justify-items: center; gap: 8px; }.actions-toolbar { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); padding: 4px; box-shadow: 0 5px 16px rgba(20,34,62,.08); }.actions-toolbar button { display: grid; min-width: 31px; height: 31px; place-items: center; border: 0; border-radius: 4px; background: transparent; }.actions-toolbar button:hover, .actions-toolbar button.active, .actions-toolbar button[aria-pressed="true"] { background: var(--blue-soft); color: var(--action-blue); }.actions-toolbar i { width: 1px; height: 22px; margin: 0 3px; background: var(--border); }.actions-toolbar-stage > p { text-align: center; }.actions-toolbar.formatting button { min-width: 30px; }
.actions-bulk-stage { position: relative; min-height: 145px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.actions-mini-list { display: grid; gap: 8px; padding: 15px; }.actions-mini-list span { border-radius: 5px; background: var(--surface-subtle); padding: 8px; }.actions-bulk { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--border); background: #17243b; color: #fff; padding: 8px; }.actions-bulk strong { flex: 1; white-space: nowrap; }.actions-bulk button { border: 0; background: transparent; color: #fff; padding: 4px; }.actions-bulk button.danger { color: #ffb4b4; }
.actions-sticky-stage { position: relative; min-height: 145px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.actions-sticky-stage > div { display: grid; gap: 9px; padding: 12px; }.actions-sticky-stage > div i { display: block; height: 8px; border-radius: 99px; background: var(--surface-selected); }.actions-sticky-stage > div i:nth-of-type(2) { width: 75%; }.actions-sticky-stage footer { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 5px; width: 100%; border-top: 1px solid var(--border); background: var(--surface); padding: 7px; }.actions-sticky-stage footer span { flex: 1; color: #9a6700; font-size: 9px; }
.actions-fab-stage { position: relative; min-height: 150px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); padding: 11px; }.actions-fab-stage article { display: grid; gap: 8px; }.actions-fab-stage article span { border-radius: 5px; background: var(--surface); padding: 7px; }.actions-fab { position: absolute; right: 12px; bottom: 12px; display: grid; width: 45px; height: 45px; place-items: center; border: 0; border-radius: 50%; background: var(--action-blue); color: #fff !important; box-shadow: 0 8px 18px rgba(7,93,232,.3); font-size: 25px; }.actions-fab-stage > [role="tooltip"] { position: absolute; right: 66px; bottom: 23px; border-radius: 4px; background: #1e2736; color: #fff; padding: 4px 6px; font-size: 9px; }.actions-fab-stage.speed > div { position: absolute; right: 17px; bottom: 62px; display: grid; gap: 5px; }.actions-fab-stage.speed > div button { display: flex; align-items: center; justify-content: flex-end; gap: 6px; border: 0; background: transparent; }.actions-fab-stage.speed > div button::first-line { border-radius: 50%; background: var(--surface); }.actions-fab-stage.speed > div span { border-radius: 4px; background: #1e2736; color: #fff; padding: 3px 5px; font-size: 9px; }
.actions-row-stage { display: grid; gap: 8px; }.actions-row-stage article { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); padding: 8px; }.actions-row-stage article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--action-blue); font-weight: 800; }.actions-row-stage article div { display: grid; }.actions-row-stage article button { border: 0; background: transparent; color: var(--action-blue); font-weight: 700; }.actions-row-result { color: var(--muted); font-size: 9px; text-align: center; }
.actions-swipe-stage { position: relative; display: grid; gap: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); padding: 14px 8px; }.actions-swipe-actions { position: absolute; inset: 14px 8px auto auto; display: flex; height: 56px; }.actions-swipe-actions button { border: 0; background: #526174; color: #fff; padding: 8px; }.actions-swipe-actions button.danger { background: var(--action-danger); }.actions-swipe-stage article { position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 7px; margin-right: 74px; border-radius: 6px; background: var(--surface); box-shadow: 0 4px 12px rgba(20,34,62,.08); padding: 8px; transition: margin .2s ease; }.actions-swipe-stage article.closed { margin-right: 0; }.actions-swipe-stage article > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--action-blue); font-weight: 800; }.actions-swipe-stage article div { display: grid; }.actions-swipe-stage article button { border: 0; background: transparent; color: var(--action-blue); font-size: 18px; }.actions-swipe-stage > small { text-align: center; }
.actions-bottom-stage { position: relative; min-height: 150px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }.actions-bottom-stage article { display: grid; gap: 9px; padding: 12px; }.actions-bottom-stage article i { height: 8px; border-radius: 99px; background: var(--surface-selected); }.actions-bottom-stage article i:nth-of-type(2) { width: 70%; }.actions-bottom-stage nav { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); background: var(--surface); padding: 5px 8px max(5px, env(safe-area-inset-bottom)); }.actions-bottom-stage nav button { display: grid; justify-items: center; gap: 1px; border: 0; background: transparent; color: var(--muted); font-size: 14px; }.actions-bottom-stage nav button span { font-size: 8px; }.actions-bottom-stage nav button.primary { color: var(--action-blue); }

.concept-card-preview .actions-demo { width: 100%; overflow: hidden; font-size: 9px; }
.concept-card-preview .actions-demo button { font-size: 9px; }
.concept-card-preview .actions-button-stage, .concept-card-preview .actions-icon-stage, .concept-card-preview .actions-fab-stage, .concept-card-preview .actions-bottom-stage, .concept-card-preview .actions-bulk-stage, .concept-card-preview .actions-sticky-stage { min-height: 146px; }
.concept-card-preview .action-button { min-height: 28px; padding: 5px 7px; }
.concept-card-preview .actions-button-stage.paired { gap: 4px; }
.concept-card-preview .actions-mobile-frame { gap: 9px; padding: 11px; }
.concept-card-preview .actions-group-stage .action-button { flex: 1; padding-inline: 4px; }
.concept-card-preview .actions-repeat { grid-template-columns: 26px 1fr; }.concept-card-preview .actions-repeat .action-button { grid-column: 2; justify-self: start; }
.concept-card-preview .actions-menu { width: 92%; }
.concept-card-preview .actions-submenu { right: -58px; left: auto; width: 88px; transform: none; }
.concept-card-preview .actions-toolbar button { min-width: 25px; height: 27px; }
.concept-card-preview .actions-bulk button span { display: none; }
.concept-card-preview .actions-sticky-stage footer span { display: none; }
.concept-card-preview .actions-row-stage article { grid-template-columns: 28px 1fr auto; }.concept-card-preview .actions-row-stage article > button:first-of-type { display: none; }

@media (max-width: 480px) {
  .actions-demo { font-size: 11px; }
  .actions-menu { width: min(92%, 220px); }
  .actions-submenu { right: -54px; left: auto; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .actions-demo *, .actions-demo *::before, .actions-demo *::after { animation: none !important; transition: none !important; }
}