/* stylelint-disable at-rule-no-unknown */

/* Tailwind source — compiled to tailwind.build.css by `npm run build:css`.
   The permanent `tw-` prefix provides a clear project namespace.

   Component classes below are intentionally written in plain CSS with
   CSS variables so they do not require resolving prefixed Tailwind
   utilities inside @apply. */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.tw-container {
  width: 100%;
}

@media (min-width: 576px) {
  .tw-container {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .tw-container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .tw-container {
    max-width: 992px;
  }
}

@media (min-width: 1200px) {
  .tw-container {
    max-width: 1200px;
  }
}

@media (min-width: 1400px) {
  .tw-container {
    max-width: 1400px;
  }
}

/* -- Parity rules: old-class rules covered by tw-* twins lacked these
     states; kept under the tw-* names actually used in markup. -- */

select.tw-form-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.tw-form-check-input:not(:checked):not(:focus):not(:disabled) {
  border-color: var(--text-muted);
}

/* == Reguly scalone z usunietych arkuszy (etap 5.5) ==========
     Kolejnosc odpowiada dawnej kolejnosci <link> w base.html:
     base, navigation, forms, buttons, feedback, tables, typography,
     modules, utilities, layout, light-mode. == */

/* ══ scalone z base.css (etap 5.5) ══ */

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

hr {
  border-color: var(--border);
  opacity: 1;
}

.tw-border-subtle {
  border-color: var(--border);
}

.tw-table thead th,
  .tw-citizens-table thead th {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

tr.tw-user-row {
  cursor: pointer;
}

tr.tw-user-row:hover {
  background-color: var(--accent-muted);
}

td a {
  text-decoration: none;
  color: var(--text-primary);
  transition: color .15s;
}

td a:hover {
  color: var(--accent);
}

.tw-citizen-tab-empty {
  font-size: .875rem;
}

.tw-td-truncate {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

img {
  max-width: 100%;
  height: auto;
}

.tw-sidebar-nav .tw-nav-item a.tw-chat-has-messages {
  color: var(--color-info);
}

.tw-notif-banner-wrap {
  --banner-max-height: 0;
  max-height: var(--banner-max-height);
  overflow: hidden;
  transition: max-height .3s ease;
}

#notification-permission-banner,
  #notification-blocked-banner {
  border-radius: 0;
}

.tw-chat-room-pulse {
  animation: text-flash 2s infinite;
}

@keyframes text-flash {
  0%, 100% {
    opacity: 1;
    color: var(--accent);
  }

  50% {
    opacity: 0.3;
    color: var(--accent);
  }
}

.tw-task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tw-task-actions form {
  margin: 0;
  display: inline-flex;
}

.tw-task-actions .tw-btn {
  white-space: nowrap;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ══ scalone z navigation.css (etap 5.5) ══ */

.tw-anon-nav-link.tw-active,
  .tw-event-meta-link:hover {
  background: var(--accent-muted);
  color: var(--accent);
}

/* ══ scalone z forms.css (etap 5.5) ══ */

form.tw-signup img.captcha {
  display: block;
  width: 170px;
  border: 1px solid var(--border);
  border-radius: .375rem;
  margin-bottom: .4rem;
}

form.tw-signup input[name*="captcha"] {
  width: 172px;
}

#login-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem 2.25rem;
  margin-top: 3rem;
  box-shadow: 0 4px 32px rgba(0, 0, 0, .18);
}

#login-box h3 {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 1.5rem;
}

.tw-message-input-rich {
  --textarea-height: auto;
  border: none;
  background-color: transparent;
  color: var(--text-primary);
  flex: 1;
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
  overflow-y: auto;
  min-height: 4rem;
  max-height: 180px;
  height: var(--textarea-height);
  outline: none;
  word-break: break-word;
}

.tw-message-input-rich:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
  opacity: .6;
  display: block;
}

.tw-message-input-rich:empty::after {
  content: attr(data-hint);
  display: block;
  font-size: .7rem;
  color: var(--text-muted);
  opacity: .4;
  pointer-events: none;
  margin-top: .2rem;
}

@media (max-width: 767.98px) {
  .tw-message-input-rich {
    min-height: 2.5rem;
    max-height: 120px;
  }
}

/* ══ scalone z buttons.css (etap 5.5) ══ */

.tw-fmt-toolbar {
  display: flex;
  gap: .2rem;
  flex-shrink: 0;
}

.tw-fmt-btn {
  background: var(--color-surface-offset);
  border: 1px solid var(--border);
  border-radius: .25rem;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: .9rem;
  flex-shrink: 0;
}

.tw-fmt-btn:hover,
  .tw-fmt-btn.tw-active {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--text-primary);
}

.tw-msg-counter {
  font-size: .82rem;
  color: var(--text-muted);
  text-align: right;
  justify-content: flex-end;
  padding: .1rem .5rem .0rem;
  flex-shrink: 0;
  line-height: 1.2;
  transition: color .15s;
}

.tw-msg-counter.tw-msg-counter--warn {
  color: var(--status-warning-color);
}

.tw-msg-counter.tw-msg-counter--error {
  color: var(--badge-rejected-color);
  font-weight: 600;
}

/* ══ scalone z feedback.css (etap 5.5) ══ */

.tw-toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(.5rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: .45rem 1.1rem;
  border-radius: 9999px;
  font-size: .82rem;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.tw-toast.tw-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ══ scalone z tables.css (etap 5.5) ══ */

.tw-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--table-bg);
  color: var(--table-color);
  border-color: var(--table-border-color);
}

.tw-table th,
  .tw-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--table-border-color);
  color: var(--table-color);
  vertical-align: middle;
}

.tw-table-striped > tbody > tr:nth-of-type(odd) > * {
  background: var(--table-striped-bg);
  color: var(--table-striped-color);
}

/* ══ scalone z typography.css (etap 5.5) ══ */

small,
  .tw-cal-day {
  color: var(--text-muted);
  font-size: .82rem;
}

/* ══ scalone z modules.css (etap 5.5) ══ */

.tw-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .65rem;
  border-radius: .4rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .78rem;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.tw-sort-btn:hover,
  .tw-arg-edit-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, .2);
}

.tw-sort-btn.tw-active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-muted);
  font-weight: 500;
}

.tw-sort-arrow {
  font-size: .65rem;
  opacity: .8;
  margin-left: 1px;
}

.tw-cat-mgr-actions {
  display: flex;
  gap: .3rem;
  flex-shrink: 0;
}

.tw-sort-btn .tw-sort-btn-label,
  .tw-btn-cta .tw-btn-cta-label {
  font-size: .78rem;
}

.tw-cat-filter {
  position: relative;
  flex-shrink: 0;
}

.tw-cat-filter-chevron {
  font-size: .6rem;
  margin-left: 2px;
  transition: transform var(--transition-fast);
}

.tw-cat-filter-trigger[aria-expanded="true"] .tw-cat-filter-chevron {
  transform: rotate(180deg);
}

.tw-cat-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .5rem .6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  min-width: 260px;
  max-width: 340px;
}

.tw-cat-filter-panel[hidden] {
  display: none;
}

.tw-cat-filter-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .65rem;
  border-radius: .4rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.tw-cat-filter-item:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,.2);
}

.tw-cat-filter-item.tw-active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-muted);
  font-weight: 500;
}

.tw-cat-filter-all {
  width: 100%;
  font-weight: 600;
  margin-bottom: .1rem;
}

.tw-cat-filter-check {
  font-size: .65rem;
  opacity: 0;
}

.tw-cat-filter-item.tw-active .tw-cat-filter-check {
  opacity: 1;
}

.tw-info-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-size: .85rem;
  cursor: pointer;
  transition: color var(--transition-fast);
  line-height: 1;
}

.tw-info-icon-btn:hover,
  .tw-info-icon-btn:focus {
  color: var(--accent);
  outline: none;
}

.tw-arg-inline-submit--for {
  background: var(--badge-approved-bg);
  color: var(--badge-approved-color);
}

.tw-stepper-rejected .tw-stepper-step-count,
  .tw-arg-inline-submit--against {
  background: var(--badge-rejected-bg);
  color: var(--badge-rejected-color);
}

.tw-proposals-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tw-proposals-list.tw-view-compact {
  gap: 0.35rem;
}

.tw-proposals-list.tw-view-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: stretch;
}

.tw-proposals-list.tw-view-grid>.tw-tasks-section-label {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .tw-proposals-list.tw-view-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .tw-proposals-list.tw-view-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tw-proposals-list.tw-view-compact .tw-proposal-card,
  .tw-proposals-list.tw-view-compact .tw-task-card {
  border-radius: var(--radius-sm, .35rem);
}

.tw-proposals-list.tw-view-compact .tw-proposal-card-header,
  .tw-proposals-list.tw-view-compact .tw-task-card-header {
  padding: .55rem .75rem .45rem;
}

.tw-proposals-list.tw-view-compact .tw-proposal-card-body {
  padding: .45rem .75rem .55rem;
}

.tw-proposals-list.tw-view-compact .tw-task-card-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.tw-proposals-list.tw-view-compact .tw-task-card-title-row {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.tw-proposals-list.tw-view-compact .tw-task-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-proposals-list.tw-view-compact .tw-task-card-badges-row {
  display: none;
}

.tw-proposals-list.tw-view-compact .tw-task-card-meta {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  gap: .4rem;
}

.tw-proposals-list.tw-view-compact .tw-task-card-body {
  display: none;
}

.tw-proposals-list:not(.tw-view-grid):not(.tw-view-compact) .tw-task-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
}

.tw-proposals-list:not(.tw-view-grid):not(.tw-view-compact) .tw-task-card-title-row {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  gap: .35rem;
}

.tw-proposals-list:not(.tw-view-grid):not(.tw-view-compact) .tw-task-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-proposals-list:not(.tw-view-grid):not(.tw-view-compact) .tw-task-card-badges-row {
  order: -1;
  width: 100%;
  margin-bottom: .15rem;
}

.tw-proposals-list:not(.tw-view-grid):not(.tw-view-compact) .tw-task-card-meta {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.tw-proposals-list:not(.tw-view-grid):not(.tw-view-compact) .tw-task-assignee-row {
  display: none;
}

.tw-proposals-list:not(.tw-view-grid) .tw-proposal-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
}

.tw-proposals-list:not(.tw-view-grid) .tw-proposal-card-title-row {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  gap: .35rem;
}

.tw-proposals-list:not(.tw-view-grid) .tw-proposal-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-proposals-list:not(.tw-view-grid) .tw-proposal-card-badges-row {
  order: -1;
  width: 100%;
  margin-bottom: .15rem;
}

.tw-proposals-list:not(.tw-view-grid) .tw-proposal-card-meta {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.tw-proposals-list:not(.tw-view-grid) .tw-proposal-section--consequences,
  .tw-proposals-list:not(.tw-view-grid) .tw-proposal-section--reasoning,
  .tw-proposals-list:not(.tw-view-grid) .tw-proposal-section--referendum {
  display: none;
}

.tw-proposals-list.tw-view-compact .tw-proposal-section--law {
  display: none;
}

.tw-proposal-card,
  .tw-task-card,
  .tw-event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--transition-med), box-shadow var(--transition-med);
  position: relative;
}

.tw-proposal-card:hover,
  .tw-task-card:hover,
  .tw-event-card:hover {
  border-color: var(--accent);
  box-shadow:
      0 0 0 1px var(--accent-border),
      0 0 12px var(--accent-glow),
      0 0 32px var(--accent-glow-medium),
      0 6px 24px rgba(0, 0, 0, .4);
}

.tw-proposal-card-header,
  .tw-task-card-header,
  .tw-event-card-header {
  position: relative;
  padding: .9rem 1.1rem .75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.tw-proposal-card-header:focus-visible,
  .tw-task-card-header:focus-visible,
  .tw-event-card-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tw-proposal-card-title-row,
  .tw-task-card-title-row,
  .tw-event-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .4rem;
}

.tw-proposal-card-num,
  .tw-task-card-num {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
  padding-top: 2px;
}

.tw-proposal-card-title,
  .tw-task-card-title,
  .tw-event-card-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.tw-proposal-card-badges-row,
  .tw-task-card-badges-row,
  .tw-event-card-badges-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}

.tw-proposal-card-meta,
  .tw-task-card-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.tw-task-card-meta {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.tw-proposal-author-link,
  .tw-task-coordinator-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  border-radius: .35rem;
  padding: 2px 5px 2px 2px;
  margin: -2px -5px -2px -2px;
  transition: background var(--transition-fast);
}

.tw-proposal-author-link:hover {
  background: var(--color-surface-dynamic);
}

.tw-proposal-author-link:hover .tw-proposal-author-name {
  color: var(--text-primary);
}

.tw-proposal-author-name {
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.tw-proposal-meta-sep,
  .tw-task-meta-sep {
  opacity: .35;
}

.tw-proposal-date,
  .tw-task-date {
  color: var(--text-muted);
}

.tw-proposal-signatures,
  .tw-task-against {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.tw-proposal-role-icon,
  .tw-task-role-icon {
  font-size: .8rem;
  color: var(--text-muted);
  opacity: .75;
  margin-right: .15rem;
}

.tw-proposal-author-link:hover .tw-proposal-role-icon,
  .tw-task-coordinator-link:hover .tw-task-role-icon {
  color: var(--accent);
  opacity: 1;
}

.tw-task-coordinator-link:hover {
  background: var(--color-surface-offset);
}

.tw-task-coordinator-link:hover .tw-task-coordinator-name {
  color: var(--text-primary);
}

.tw-task-coordinator-name {
  color: var(--text-primary);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.tw-task-coordinator-empty {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-style: italic;
  color: var(--text-muted);
  opacity: .8;
}

button.tw-task-helpers-btn,
  button.tw-task-against-btn {
  background: transparent;
  border: none;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: .35rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

button.tw-task-helpers-btn:hover,
  button.tw-task-helpers-btn:focus-visible,
  button.tw-task-against-btn:hover,
  button.tw-task-against-btn:focus-visible {
  background: var(--color-surface-offset);
  color: var(--text-primary);
  outline: none;
}

.tw-helpers-popover {
  --popover-bg: var(--bg-card);
  --popover-border-color: var(--border);
  --popover-header-bg: var(--bg-card);
  --popover-header-color: var(--text-primary);
  --popover-body-color: var(--text-primary);
  --popover-max-width: 260px;
  max-width: var(--popover-max-width);
  background: var(--popover-bg);
  border: 1px solid var(--popover-border-color);
  color: var(--popover-body-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.tw-helpers-popover .tw-popover-header {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.tw-helpers-popover .tw-popover-body {
  padding: .35rem;
}

.tw-helpers-popover-list {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.tw-helpers-popover-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border-radius: .35rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}

.tw-helpers-popover-item:hover {
  background: var(--accent-muted);
}

.tw-helpers-popover-name {
  font-size: .85rem;
  font-weight: 500;
}

.tw-helpers-popover-more {
  display: block;
  margin-top: .25rem;
  padding: .35rem .5rem;
  font-size: .75rem;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border);
  text-align: center;
}

.tw-helpers-popover-more:hover {
  background: var(--accent-muted);
}

.tw-helpers-popover-empty,
  .tw-helpers-popover-loading {
  padding: .5rem;
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.tw-proposal-card-body,
  .tw-task-card-body,
  .tw-event-card-body {
  border-top: 1px solid var(--border);
  padding: 1.1rem 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  cursor: pointer;
}

.tw-proposal-section-label,
  .tw-task-section-label,
  .tw-event-section-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .3rem;
}

.tw-proposal-section-label i,
  .tw-task-section-label i,
  .tw-event-section-label i {
  color: var(--accent);
}

.tw-proposal-section-text,
  .tw-task-section-text,
  .tw-event-section-text {
  font-size: .875rem;
  color: var(--text-primary);
  line-height: 1.6;
}

.tw-chat-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--accent);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 500;
  padding: 2px 7px 2px 5px;
  border-radius: var(--radius-badge);
  border: 1px solid var(--accent-glow);
  background: var(--accent-muted);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tw-chat-link:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

:root {
  --arrow-h: 36px;
  --arrow-tip: 12px;
  --arrow-overlap: 1px;
  --stepper-color: var(--accent);
  --stepper-color-muted: var(--accent-muted);
  --stepper-color-shadow: var(--accent-glow);
}

.tw-stepper-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  row-gap: .5rem;
}

.tw-stepper-step-wrap {
  position: relative;
  height: var(--arrow-h);
  clip-path: polygon(0 0, calc(100% - var(--arrow-tip)) 0, 100% 50%, calc(100% - var(--arrow-tip)) 100%, 0 100%);
  background: var(--color-surface-offset);
  margin-right: calc(-1 * var(--arrow-overlap));
  transition: filter var(--transition-fast), background var(--transition-fast);
  filter: drop-shadow(0 0 1.5px var(--btn-glass-border));
}

.tw-stepper-step-wrap+.tw-stepper-step-wrap {
  clip-path: polygon(0 0, calc(100% - var(--arrow-tip)) 0, 100% 50%, calc(100% - var(--arrow-tip)) 100%, 0 100%, var(--arrow-tip) 50%);
}

.tw-stepper-step-wrap:hover {
  background: rgba(255, 255, 255, .08);
  filter: drop-shadow(0 0 1.5px var(--btn-glass-border)) brightness(1.15);
  z-index: 2;
}

.tw-stepper-step-wrap.tw-active {
  background: var(--stepper-color-muted);
  filter: drop-shadow(0 0 6px var(--stepper-color-shadow));
  z-index: 3;
}

.tw-stepper-step {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 100%;
  padding: 0 calc(var(--arrow-tip) + .65rem) 0 calc(var(--arrow-tip) + .65rem);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .82rem;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.tw-stepper-step-wrap:first-of-type .tw-stepper-step {
  padding-left: .85rem;
}

.tw-stepper-step:hover {
  color: var(--text-primary);
}

.tw-stepper-step-wrap.tw-active .tw-stepper-step {
  color: var(--stepper-color);
  font-weight: 600;
}

.tw-stepper-step-label {
  font-size: .82rem;
}

.tw-stepper-step i {
  font-size: .9rem;
}

.tw-stepper-step-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--text-muted);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.tw-stepper-step-wrap.tw-active .tw-stepper-step-count {
  background: var(--stepper-color);
  color: var(--text-on-accent);
}

.tw-stepper-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 .65rem;
  flex-shrink: 0;
}

.tw-stepper-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn);
  background: var(--stepper-color-muted);
  border: 1px solid var(--stepper-color);
  color: var(--stepper-color);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 700;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
  margin-right: .75rem;
}

.tw-stepper-info-btn:hover {
  box-shadow: 0 0 10px var(--stepper-color-shadow);
  filter: brightness(1.2);
}

.tw-stepper-info-btn.tw-active {
  background: var(--stepper-color);
  color: var(--text-on-accent);
  box-shadow: 0 0 10px var(--stepper-color-shadow);
}

.tw-stepper-rejected {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: .4rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .78rem;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.tw-stepper-rejected:hover,
  .tw-arg-edit-btn--danger:hover {
  color: var(--badge-rejected-color);
  border-color: rgba(239, 68, 68, .4);
}

.tw-stepper-rejected.tw-active {
  color: var(--badge-rejected-color);
  border-color: rgba(239, 68, 68, .5);
  background: var(--badge-rejected-bg);
}

.tw-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  .tw-detail-layout {
    grid-template-columns: 1fr;
  }
}

.tw-detail-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.tw-detail-header-top {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}

.tw-detail-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.3;
}

.tw-detail-nav {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}

.tw-detail-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: .4rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .8rem;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.tw-detail-nav-btn:hover,
  .tw-task-vote-btn--down:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, .2);
  background: var(--color-surface-offset);
}

.tw-detail-nav-btn.tw-disabled {
  opacity: .3;
  pointer-events: none;
}

.tw-detail-meta-sep {
  opacity: .35;
}

.tw-detail-meta-arrow {
  opacity: .7;
  font-size: .9em;
  color: var(--accent);
}

.tw-detail-author-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  text-decoration: none;
  border-radius: .3rem;
  padding: 1px 5px 1px 1px;
  margin: -1px -5px -1px -1px;
  transition: background var(--transition-fast);
}

.tw-detail-author-link:hover {
  background: var(--color-surface-dynamic);
}

.tw-detail-section-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .5rem;
}

.tw-detail-section-label i {
  color: var(--accent);
  margin-right: .25rem;
}

.tw-detail-section-text {
  font-size: .9rem;
  color: var(--text-primary);
  line-height: 1.65;
}

.tw-detail-subsection {
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}

.tw-detail-subsection:first-child {
  padding-top: 0;
}

.tw-detail-subsection:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.tw-args-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: .75rem;
}

@media (max-width: 640px) {
  .tw-args-grid {
    grid-template-columns: 1fr;
  }
}

.tw-args-col-header {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.tw-args-col-header--for {
  color: var(--badge-approved-color);
}

.tw-args-col-header--against {
  color: var(--badge-rejected-color);
}

.tw-args-col-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 900;
  flex-shrink: 0;
}

.tw-args-col-header--for .tw-args-col-icon {
  border: 2px solid var(--badge-approved-color);
  color: var(--badge-approved-color);
}

.tw-args-col-header--against .tw-args-col-icon {
  border: 2px solid var(--badge-rejected-color);
  color: var(--badge-rejected-color);
}

.tw-arg-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: .55rem;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tw-arg-card--for {
  border-left-color: var(--badge-approved-color);
}

.tw-arg-card--against {
  border-left-color: var(--badge-rejected-color);
}

.tw-arg-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.tw-arg-card-author {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  text-decoration: none;
}

.tw-arg-card-author:hover .tw-arg-author-name {
  color: var(--accent);
}

.tw-arg-author-info {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex: 1;
  min-width: 0;
}

.tw-arg-author-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-arg-author-date {
  font-size: .68rem;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.tw-arg-card-content {
  font-size: .85rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: .5rem;
}

.tw-arg-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  padding-top: .45rem;
  border-top: 1px solid var(--border);
}

.tw-arg-edit-btn {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: .3rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tw-arg-add-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .25rem;
  padding: .38rem .8rem;
  border-radius: var(--radius-btn);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .8rem;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  width: 100%;
  justify-content: center;
}

.tw-arg-add-toggle--for:hover {
  color: var(--badge-approved-color);
  border-color: rgba(0, 188, 140, .5);
  background: var(--badge-approved-bg);
}

.tw-arg-add-toggle--against:hover {
  color: var(--badge-rejected-color);
  border-color: rgba(239, 68, 68, .45);
  background: var(--badge-rejected-bg);
}

.tw-arg-inline-form {
  margin-top: .6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .55rem;
  padding: .85rem 1rem;
}

.tw-arg-inline-form textarea {
  width: 100%;
  background: var(--input-bg);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
  border: 1px solid var(--input-border);
  border-radius: .4rem;
  color: var(--text-primary);
  padding: .5rem .7rem;
  font-size: .85rem;
  resize: vertical;
  min-height: 80px;
  margin-bottom: .55rem;
}

.tw-arg-inline-submit {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .85rem;
  border-radius: .4rem;
  border: none;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.tw-arg-inline-submit--for:hover,
  .tw-arg-inline-submit--against:hover {
  filter: brightness(1.2);
}

.tw-detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 500;
  padding: 2px 7px 2px 5px;
  border-radius: 2rem;
  margin-bottom: 0;
}

.tw-detail-status-badge--s1 {
  background: var(--badge-proposition-bg);
  color: var(--badge-proposition-color);
  border: 1px solid rgba(59, 130, 246, .3);
}

.tw-detail-status-badge--s2 {
  background: var(--badge-discussion-bg);
  color: var(--badge-discussion-color);
  border: 1px solid rgba(168, 85, 247, .3);
}

.tw-detail-status-badge--s3 {
  background: var(--badge-referendum-bg);
  color: var(--badge-referendum-color);
  border: 1px solid rgba(249, 115, 22, .3);
}

.tw-detail-status-badge--s4 {
  background: var(--badge-rejected-bg);
  color: var(--badge-rejected-color);
  border: 1px solid rgba(239, 68, 68, .3);
}

.tw-detail-status-badge--s5 {
  background: var(--badge-approved-bg);
  color: var(--badge-approved-color);
  border: 1px solid rgba(0, 188, 140, .3);
}

.tw-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: -moz-fit-content;
  width: fit-content;
  padding: .35rem .75rem;
  border-radius: .5rem;
  font-size: .85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: .4rem;
}

.tw-action-btn-sign {
  background: var(--accent);
  color: var(--text-on-accent);
}

.tw-action-btn-sign:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 10px var(--accent-glow);
}

.tw-action-btn-withdraw {
  background: transparent;
  color: var(--badge-rejected-color);
  border: 1px solid rgba(239, 68, 68, .4);
}

.tw-action-btn-withdraw:hover {
  background: var(--badge-rejected-bg);
  border-color: var(--badge-rejected-color);
}

.tw-action-btn-yes {
  background: var(--badge-approved-bg);
  color: var(--badge-approved-color);
  border: 1px solid rgba(0, 188, 140, .4);
}

.tw-action-btn-yes:hover {
  filter: brightness(1.2);
}

.tw-action-btn-no {
  background: var(--badge-rejected-bg);
  color: var(--badge-rejected-color);
  border: 1px solid rgba(239, 68, 68, .3);
}

.tw-action-btn-no:hover {
  filter: brightness(1.2);
}

.tw-action-btn-edit {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 500;
}

.tw-action-btn-edit:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, .2);
  background: var(--color-surface-offset);
}

[data-coord-state][hidden] {
  display: none !important;
}

.tw-action-btn-take {
  background: var(--badge-proposition-bg);
  color: var(--badge-proposition-color);
  border: 1px solid var(--badge-proposition-border);
}

.tw-action-btn-take:hover,
  .tw-task-take-btn:hover {
  filter: brightness(1.2);
  border-color: var(--badge-proposition-color);
}

.tw-task-actions .tw-task-vote-btn,
  .tw-task-actions .tw-action-btn {
  min-height: 2.25rem;
  padding: .35rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: .5rem;
  gap: .4rem;
  box-sizing: border-box;
  margin-bottom: 0;
  border: 1px solid var(--border);
}

.tw-result-bar {
  margin-bottom: .65rem;
}

.tw-result-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  margin-bottom: .25rem;
}

.tw-result-bar-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.tw-result-bar-fill {
  width: var(--progress, 0%);
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width .4s ease;
}

.tw-protocol-list {
  font-size: .75rem;
  color: var(--text-muted);
  font-family: monospace;
  max-height: 160px;
  overflow-y: auto;
  line-height: 1.7;
}

.tw-protocol-yes {
  color: var(--badge-approved-color);
}

.tw-protocol-no {
  color: var(--badge-rejected-color);
}

.tw-tasks-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: .5rem 0 .3rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
}

.tw-tasks-section-label i {
  color: var(--badge-proposition-color);
}

.tw-tasks-section-label:first-child {
  margin-top: 0;
}

.tw-task-assignee-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.tw-task-assignee-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.tw-task-assignee-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
}

.tw-task-assignee-empty {
  font-style: italic;
}

.tw-task-vote-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.tw-task-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  border-radius: .4rem;
  border: 1px solid var(--border);
  background: transparent;
  font-size: .78rem;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.tw-task-vote-btn--up {
  color: var(--badge-approved-color);
}

.tw-task-vote-btn--up.tw-active,
  .tw-task-vote-btn--up:hover {
  background: var(--badge-approved-bg);
  border-color: var(--badge-approved-border);
}

.tw-task-vote-btn--down {
  color: var(--text-muted);
}

.tw-task-vote-btn--down.tw-active {
  background: var(--color-surface-offset);
  border-color: var(--border);
  color: var(--text-primary);
}

.tw-task-take-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  border-radius: .4rem;
  border: 1px solid var(--badge-proposition-border);
  background: var(--badge-proposition-bg);
  color: var(--badge-proposition-color);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tw-task-resign-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .7rem;
  border-radius: .4rem;
  border: 1px solid var(--badge-rejected-border);
  background: transparent;
  color: var(--badge-rejected-color);
  font-size: .78rem;
  font-weight: 500;
}

.tw-ec-section {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.tw-ec-section-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .5rem;
}

.tw-ec-section-title i {
  color: var(--accent);
}

.tw-ec-open-full {
  margin-left: auto;
  color: var(--text-muted);
  font-size: .75rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.tw-ec-open-full:hover {
  color: var(--accent);
}

.tw-ec-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-card);
}

.tw-ec-messages {
  max-height: 400px;
  overflow-y: auto;
  padding: .5rem .6rem;
  scroll-behavior: smooth;
}

.tw-ec-messages::-webkit-scrollbar {
  width: 4px;
}

.tw-ec-messages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-xs);
}

.tw-ec-loading {
  color: var(--text-muted);
  font-size: .82rem;
  text-align: center;
  padding: 1rem 0;
}

.tw-ec-input-area {
  border-top: 1px solid var(--border);
  padding: .5rem;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.tw-ec-input-area .tw-message-input-rich {
  min-height: 4rem;
  max-height: 120px;
}

@media (max-width: 767.98px) {
  .tw-ec-messages {
    padding: .5rem .3rem;
  }

  .tw-ec-input-area {
    padding: .25rem;
  }

  .tw-ec-wrapper .tw-compose-bar {
    padding: .3rem .15rem;
  }
}

.tw-activity-list .tw-feed-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem .4rem .6rem .75rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  position: relative;
}

.tw-feed-avatar {
  flex-shrink: 0;
  margin-top: 1px;
}

.tw-activity-list .tw-feed-row:last-child {
  border-bottom: none;
}

.tw-activity-list .tw-feed-row:hover {
  background: var(--accent-muted);
  border-color: var(--accent-glow);
}

.tw-activity-list .tw-feed-row:hover .tw-feed-title {
  color: var(--accent);
}

.tw-feed-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: .25rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .8rem;
  transition: color .12s, background .12s;
}

.tw-feed-row:hover .tw-feed-toggle,
  .tw-feed-toggle:hover,
  .tw-feed-toggle:focus {
  color: var(--accent);
  background: var(--accent-muted);
  outline: none;
}

.tw-feed-toggle[data-is-bookmarked="true"] {
  color: var(--color-warning);
}

.tw-feed-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: .875rem;
}

.tw-feed-title-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-feed-timestamp,
  .tw-feed-author,
  .tw-feed-toggle {
  flex-shrink: 0;
}

.tw-feed-author {
  max-width: 25%;
  overflow: hidden;
}

.tw-feed-author > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-activity-list.tw-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .75rem;
  padding: .75rem;
}

.tw-activity-list.tw-view-grid .tw-feed-row {
  border: 1px solid var(--border);
  border-radius: .4rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  position: relative;
}

.tw-activity-list.tw-view-grid .tw-feed-row:hover {
  border-color: var(--accent-glow);
}

.tw-activity-list.tw-view-grid .tw-feed-toggle {
  position: absolute;
  top: .55rem;
  right: .7rem;
  z-index: 2;
}

.tw-activity-list.tw-view-grid .tw-feed-toggle[data-action="bookmark"] {
  right: 2.2rem;
}

.tw-activity-list.tw-view-grid .tw-feed-row > div:last-child {
  width: 100%;
  margin-top: auto;
}

.tw-activity-list.tw-view-grid .tw-feed-title {
  white-space: normal;
}

.tw-activity-list.tw-view-grid .tw-feed-desc {
  white-space: normal;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-activity-list.tw-view-grid .tw-feed-avatar .tw-avatar {
  width: 16px;
  height: 16px;
  font-size: .45rem;
}

.tw-activity-list:not(.tw-view-grid) .tw-feed-row[data-content-type="room_messages"] .tw-feed-desc {
  display: -webkit-box;
  overflow: hidden;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.tw-cal-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tw-cal-table th {
  text-align: center;
  font-size: .7rem;
  color: var(--text-muted);
  font-weight: 500;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
}

.tw-cal-table td {
  height: 52px;
  vertical-align: top;
  text-align: center;
  border: 1px solid var(--border);
  padding: .25rem;
}

#events-calendar .tw-cal-table th {
  padding: .2rem 0;
}

#events-calendar .tw-cal-table td {
  height: 38px;
  padding: .15rem;
}

#calendar .tw-cal-container {
  padding: .5rem;
}

#calendar .tw-cal-toolbar {
  margin-bottom: .45rem;
  padding: .1rem 0;
}

#calendar .tw-cal-table th {
  padding: .2rem 0;
}

#calendar .tw-cal-table td {
  height: 30px;
  padding: .15rem;
}

.tw-cal-day.tw-cal-day-today {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tw-cal-day.tw-cal-day-has-event {
  color: var(--accent);
  font-weight: 600;
}

.tw-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.tw-cal-dots {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  min-height: 7px;
}

.tw-cal-dots-more {
  font-size: .55rem;
  color: var(--accent);
  font-weight: 600;
  margin-left: 1px;
}

.tw-cal-day-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  text-decoration: none;
  padding: 2px;
  border-radius: .35rem;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.tw-cal-day-link:hover {
  background: var(--accent-muted);
}

.tw-cal-day-link--selected {
  background: var(--accent-muted);
  box-shadow: 0 0 0 2px var(--accent);
}

.tw-cal-container {
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.tw-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
  padding: .25rem 0;
  flex-wrap: wrap;
  gap: .5rem;
}

.tw-cal-month-controls {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

#events-calendar {
  margin-bottom: .75rem;
}

#events-calendar .tw-cal-container {
  padding: .65rem;
}

#events-calendar .tw-cal-toolbar {
  justify-content: flex-start;
  margin-bottom: .45rem;
  padding: .1rem 0;
  gap: .35rem;
}

#events-calendar .tw-cal-toolbar-nav {
  margin-left: auto;
}

.tw-cal-year-select {
  width: -moz-max-content;
  width: max-content;
  padding: .28rem 1.8rem .28rem .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: .85rem;
  cursor: pointer;
}

.tw-cal-month-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.tw-cal-month-title i {
  color: var(--accent);
}

.tw-cal-toolbar-nav {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.tw-category-chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: var(--radius-badge);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .75rem;
  transition: all var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
}

.tw-category-chip:hover,
  .tw-category-chip.tw-active {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent-glow);
}

.tw-cat-filter-manage-sep {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: .35rem 0 .2rem;
}

.tw-cat-filter-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .3rem .65rem;
  background: none;
  border: none;
  border-radius: .4rem;
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.tw-cat-filter-manage-btn:hover {
  color: var(--text-primary);
  background: var(--color-surface-dynamic);
}

.tw-cat-mgr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.tw-cat-mgr-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: .45rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.tw-cat-mgr-row--editing {
  flex-wrap: wrap;
  background: var(--color-surface-dynamic);
}

.tw-cat-mgr-info,
  .tw-event-card-content {
  flex: 1;
  min-width: 0;
}

.tw-cat-mgr-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-cat-mgr-badge {
  font-size: .7rem;
  padding: .1rem .45rem;
  border-radius: .3rem;
  background: var(--accent-muted);
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.tw-cat-mgr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: .35rem;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .8rem;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.tw-cat-mgr-btn:hover {
  color: var(--text-primary);
  background: var(--color-surface-dynamic);
  border-color: var(--btn-glass-hover-border);
}

.tw-cat-mgr-btn--delete:hover {
  color: var(--badge-rejected-color);
  border-color: var(--badge-rejected-color);
  background: var(--badge-rejected-bg);
}

.tw-cat-mgr-btn--save {
  color: var(--accent);
  border-color: var(--accent-border);
}

.tw-cat-mgr-btn--save:hover {
  background: var(--accent-muted);
}

.tw-cat-mgr-edit-fields {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  width: 100%;
  margin-top: .35rem;
}

.tw-cat-mgr-input {
  width: 100%;
  padding: .3rem .5rem;
  border-radius: .35rem;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: .82rem;
}

.tw-cat-mgr-add-row {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .5rem .6rem;
  border-radius: .45rem;
  border: 1px dashed var(--border);
  margin-top: .2rem;
}

.tw-cat-mgr-error {
  font-size: .78rem;
  color: var(--badge-rejected-color);
  margin-top: .25rem;
}

.tw-cat-mgr-protected {
  font-size: .72rem;
  color: var(--text-muted);
  padding: 0 .3rem;
}

.tw-cat-mgr-edit-btns {
  display: flex;
  gap: .35rem;
}

.tw-cat-mgr-handle {
  cursor: grab;
  color: var(--text-muted);
  padding: 0 .5rem 0 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tw-cat-mgr-row.tw-sortable-ghost {
  opacity: .4;
  background: var(--bg-card);
}

.tw-cat-mgr-row.tw-sortable-chosen {
  cursor: grabbing;
}

.tw-event-card--past {
  opacity: .65;
}

.tw-proposals-list.tw-view-grid .tw-event-card-description .tw-event-section-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.6em);
}

.tw-event-card-inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.tw-event-card-date-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 64px;
  padding: .4rem .55rem;
  border-radius: var(--radius-btn);
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  line-height: 1;
}

.tw-event-card-date-pill--past,
  .tw-agenda-event-chip--private {
  background: transparent;
  border-color: var(--border);
}

.tw-event-card-day {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tw-event-card-date-pill--past .tw-event-card-day {
  color: var(--text-muted);
}

.tw-event-card-month {
  font-size: .65rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: .15rem;
}

.tw-event-card-time {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .25rem;
  font-variant-numeric: tabular-nums;
}

.tw-event-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .35rem;
}

.tw-event-card-badges-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .45rem;
}

.tw-event-card-meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  row-gap: .25rem;
}

.tw-event-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.tw-event-meta-frequency,
  .tw-room-link.tw-room-link--not-seen .tw-room-link-date {
  color: var(--accent);
  font-weight: 500;
}

.tw-event-meta-frequency i {
  opacity: .85;
}

.tw-event-meta-sep {
  color: var(--text-muted);
  opacity: .35;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.tw-event-meta-past {
  color: var(--badge-rejected-color);
  font-weight: 500;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .04em;
}

.tw-event-meta-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: .35rem;
  position: relative;
  z-index: 2;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.tw-proposals-list.tw-view-grid .tw-event-card-inner {
  flex-direction: column;
  gap: .65rem;
}

.tw-proposals-list.tw-view-grid .tw-event-card-date-pill {
  flex-direction: row;
  align-items: baseline;
  gap: .5rem;
  min-width: 0;
  padding: .35rem .6rem;
  align-self: flex-start;
}

.tw-proposals-list.tw-view-grid .tw-event-card-day {
  font-size: 1.05rem;
}

.tw-proposals-list.tw-view-grid .tw-event-card-month,
  .tw-proposals-list.tw-view-grid .tw-event-card-time {
  margin-top: 0;
}

.tw-events-agenda {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.tw-events-calendar--loading {
  min-height: 80px;
  position: relative;
}

.tw-events-calendar--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: agenda-spin .8s linear infinite;
}

@keyframes agenda-spin {
  to {
    transform: rotate(360deg);
  }
}

.tw-agenda-day {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .9rem;
  padding: .5rem 0;
  align-items: start;
  scroll-margin-top: 1rem;
  border-radius: var(--radius-card);
}

.tw-agenda-day-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: .35rem;
  flex-shrink: 0;
  line-height: 1;
}

.tw-agenda-day-name {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
}

.tw-agenda-day-num {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: .15rem;
  font-variant-numeric: tabular-nums;
}

.tw-agenda-day--past .tw-agenda-day-num,
  .tw-agenda-day--past .tw-agenda-day-name {
  color: var(--text-muted);
}

.tw-agenda-day--today .tw-agenda-day-num {
  background: var(--accent);
  color: var(--bg-card);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.tw-agenda-day-events {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

.tw-agenda-event-chip {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: var(--accent-muted);
  border: 1px solid transparent;
  color: var(--text-primary);
  text-decoration: none;
  font-size: .85rem;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-width: 0;
}

.tw-agenda-event-chip:hover {
  background: var(--accent);
  color: var(--bg-card);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.tw-agenda-event-chip:hover .tw-agenda-event-time,
  .tw-agenda-event-chip:hover .tw-agenda-event-place,
  .tw-agenda-event-chip:hover .tw-agenda-event-icon {
  color: var(--bg-card);
  opacity: 1;
}

.tw-agenda-event-icon {
  color: var(--accent);
  flex-shrink: 0;
  font-size: .8rem;
}

.tw-agenda-event-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  flex-shrink: 0;
}

.tw-agenda-event-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.tw-agenda-event-place {
  color: var(--text-muted);
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
  max-width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-agenda-event-private {
  color: var(--text-muted);
  font-size: .75rem;
  flex-shrink: 0;
}

.tw-agenda-event-chip--past {
  opacity: .55;
}

.tw-agenda-event-chip--past:hover {
  opacity: 1;
}

@media (max-width: 540px) {
  .tw-agenda-day {
    grid-template-columns: 48px 1fr;
    gap: .65rem;
  }

  .tw-agenda-day-num {
    font-size: 1.15rem;
  }

  .tw-agenda-event-place {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .tw-cat-filter-panel {
    max-width: calc(100vw - 1.5rem);
    min-width: 0;
  }
}

.tw-registration-timeline {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.1rem 1.1rem 0.6rem;
  border-radius: var(--radius-card);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.tw-registration-timeline-heading {
  margin: 0 0 1rem 2.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tw-registration-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tw-registration-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.65rem 0.8rem 0.65rem 0.45rem;
  min-height: 3.5rem;
  border-radius: var(--radius-btn);
  transition: background var(--transition-fast);
}

.tw-registration-timeline-item::before {
  content: "";
  position: absolute;
  left: 1.14rem;
  top: 2.55rem;
  bottom: -0.35rem;
  width: 2px;
  background: var(--border);
}

.tw-registration-timeline-item:last-child::before {
  display: none;
}

.tw-registration-timeline-item--completed::before {
  background: var(--status-online-color);
}

.tw-registration-timeline-marker {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.12rem;
  border: 2px solid var(--text-muted);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.tw-registration-timeline-marker-icon {
  display: none;
  font-size: 0.72rem;
  color: var(--text-inverse);
  line-height: 1;
}

.tw-registration-timeline-item--completed .tw-registration-timeline-marker {
  border-color: var(--status-online-color);
  background: var(--status-online-color);
}

.tw-registration-timeline-item--completed .tw-registration-timeline-marker-icon {
  display: inline-block;
}

.tw-registration-timeline-item--current {
  background: var(--status-warning-bg);
  border: 1px solid rgba(243, 156, 18, 0.35);
}

.tw-registration-timeline-item--current .tw-registration-timeline-marker {
  border-color: var(--status-warning-color);
  background: var(--status-warning-color);
  box-shadow: 0 0 0 5px rgba(243, 156, 18, 0.25);
  animation: registration-timeline-pulse 1.8s infinite;
}

.tw-registration-timeline-item--current .tw-registration-timeline-marker-icon {
  display: none;
}

@keyframes registration-timeline-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.45);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(243, 156, 18, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
  }
}

.tw-registration-timeline-item--future .tw-registration-timeline-marker {
  border-color: var(--text-muted);
  background: transparent;
}

.tw-registration-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.1rem;
}

.tw-registration-timeline-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.3;
}

.tw-registration-timeline-item--current .tw-registration-timeline-title {
  color: var(--status-warning-color);
  font-size: 1.02rem;
}

.tw-registration-timeline-item--future .tw-registration-timeline-title {
  color: var(--text-muted);
}

.tw-registration-timeline-icon {
  width: 1.15rem;
  text-align: center;
  font-size: 1rem;
  color: var(--text-muted);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.tw-registration-timeline-item--current .tw-registration-timeline-icon {
  transform: scale(1.15);
  color: var(--text-primary);
}

.tw-registration-timeline-item--completed .tw-registration-timeline-icon {
  color: var(--text-primary);
}

.tw-registration-timeline-icon--email {
  color: var(--badge-proposition-color);
}

.tw-registration-timeline-icon--verify {
  color: var(--badge-discussion-color);
}

.tw-registration-timeline-icon--form {
  color: var(--badge-referendum-color);
}

.tw-registration-timeline-icon--approval {
  color: var(--status-online-color);
}

.tw-registration-timeline-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.tw-registration-timeline-item--completed .tw-registration-timeline-desc {
  color: rgba(34, 197, 94, 0.85);
}

.tw-registration-timeline-item--current .tw-registration-timeline-desc {
  color: rgba(243, 156, 18, 0.9);
}

@media (max-width: 540px) {
  .tw-registration-timeline {
    padding: 0.9rem 0.7rem;
  }

  .tw-registration-timeline-heading {
    margin-left: 2rem;
    font-size: 0.95rem;
  }

  .tw-registration-timeline-title {
    font-size: 0.9rem;
  }

  .tw-registration-timeline-item--current .tw-registration-timeline-title {
    font-size: 0.97rem;
  }
}

.tw-partner-notes {
  display: inline-block;
  width: 100%;
  white-space: normal;
  word-break: break-word;
}

th.tw-notes-col,
  td.tw-notes-col {
  width: 100%;
}

.tw-partner-name-link {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.tw-partner-name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.tw-task-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: stretch;
}

.tw-task-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: .82rem;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tw-task-meta-item:hover {
  border-color: var(--accent-glow);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.tw-task-meta-icon {
  color: var(--accent);
  font-size: .75rem;
}

.tw-task-meta-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tw-task-meta-value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: .9rem;
}

.tw-task-meta-status-active {
  color: var(--status-online-color);
}

.tw-task-meta-status-completed {
  color: var(--badge-approved-color);
}

.tw-task-meta-status-cancelled,
  .tw-task-meta-status-rejected {
  color: var(--badge-rejected-color);
}

.tw-helpers-voter-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.tw-helpers-voter-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .4rem;
  border-radius: .4rem;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tw-helpers-voter-item:hover {
  background: var(--accent-muted);
  border-color: var(--border);
}

.tw-helpers-voter-item .tw-helpers-popover-item {
  flex: 1;
  min-width: 0;
}

.tw-helper-status {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  padding: .15rem .4rem;
  border-radius: .25rem;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.tw-helper-status--approved {
  background: var(--badge-approved-bg);
  color: var(--badge-approved-color);
  border-color: var(--badge-approved-border);
}

.tw-helper-status--pending {
  background: var(--color-surface-offset);
  color: var(--text-muted);
}

.tw-helper-toggle-form {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.tw-helper-switch {
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 1.3rem;
  cursor: pointer;
  flex-shrink: 0;
}

.tw-helper-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.tw-helper-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--color-surface-offset);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tw-helper-switch-slider::before {
  content: "";
  position: absolute;
  top: .1rem;
  left: .1rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.tw-helper-switch input:checked + .tw-helper-switch-slider {
  background: var(--badge-approved-bg);
  border-color: var(--badge-approved-border);
}

.tw-helper-switch input:checked + .tw-helper-switch-slider::before {
  transform: translateX(1.1rem);
  background: var(--badge-approved-color);
}

.tw-helper-switch input:focus-visible + .tw-helper-switch-slider {
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.tw-ec-readonly-notice {
  text-align: center;
  padding: .75rem;
  color: var(--text-muted);
  font-size: .85rem;
  border-top: 1px solid var(--border);
  background: var(--color-surface-offset);
}

.tw-ec-readonly-notice i {
  margin-right: .4rem;
  color: var(--badge-rejected-color);
}

@media (max-width: 540px) {
  .tw-task-meta-row {
    gap: .4rem;
  }

  .tw-task-meta-item {
    padding: .3rem .5rem;
    font-size: .75rem;
  }

  .tw-helpers-voter-item {
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  .tw-stepper-step-wrap:not(.tw-active) .tw-stepper-step-label {
    display: none;
  }

  .tw-stepper-step-wrap.tw-active .tw-stepper-step-label {
    display: inline;
  }
}

/* ══ scalone z utilities.css (etap 5.5) ══ */

.tw-badge-status-sm {
  font-size: .65rem;
  padding: 1px 6px;
}

.tw-admin-muted {
  color: var(--text-muted);
  font-size: .85rem;
}

.tw-filter-btn-unread {
  color: var(--badge-proposition-color);
  border-color: var(--badge-proposition-border);
}

.tw-citizen-color-0 {
  background-color: var(--citizen-color-0);
}

.tw-citizen-color-1 {
  background-color: var(--citizen-color-1);
}

.tw-citizen-color-2 {
  background-color: var(--citizen-color-2);
}

.tw-citizen-color-3 {
  background-color: var(--citizen-color-3);
}

.tw-citizen-color-4 {
  background-color: var(--citizen-color-4);
}

.tw-citizen-color-5 {
  background-color: var(--citizen-color-5);
}

.tw-citizen-color-6 {
  background-color: var(--citizen-color-6);
}

.tw-citizen-color-7 {
  background-color: var(--citizen-color-7);
}

.tw-citizen-color-8 {
  background-color: var(--citizen-color-8);
}

.tw-citizen-color-9 {
  background-color: var(--citizen-color-9);
}

.tw-citizen-color-10 {
  background-color: var(--citizen-color-10);
}

.tw-citizen-color-11 {
  background-color: var(--citizen-color-11);
}

.tw-calendar-nav {
  width: auto;
  padding: 0 .7rem;
  font-size: .78rem;
}

.tw-vote-question {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tw-vote-for {
  color: var(--badge-approved-color);
}

.tw-vote-against {
  color: var(--badge-rejected-color);
}

.tw-brand-mark-sm {
  max-height: 64px;
  width: auto;
}

.tw-brand-mark-lg {
  max-height: 96px;
  width: auto;
}

.tw-event-delete-btn {
  color: var(--badge-rejected-color);
}

.tw-event-link {
  color: var(--accent);
  text-decoration: none;
}

.tw-event-back-link {
  width: auto;
  padding: 0 .85rem;
  gap: .4rem;
}

.tw-quick-link-item {
  background: var(--color-surface-offset);
  border-radius: var(--radius-xs);
  cursor: move;
}

.tw-quick-link-title,
  .tw-decision-link {
  flex: 1;
  font-size: .85rem;
}

.tw-quick-link-url {
  font-size: .75rem;
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-quick-link-edit {
  font-size: .72rem;
  padding: 2px 8px;
}

.tw-quick-link-form {
  width: 100%;
}

.tw-quick-link-form .tw-quick-link-input {
  width: auto;
}

.tw-quick-link-form .tw-quick-link-input-title {
  flex: 2 1 140px;
  min-width: 100px;
}

.tw-quick-link-form .tw-quick-link-input-url {
  flex: 3 1 200px;
  min-width: 140px;
}

.tw-quick-link-form .tw-quick-link-input-order {
  flex: 0 1 80px;
  min-width: 50px;
  max-width: 80px;
}

.tw-quick-link-form .tw-quick-link-form-btn {
  flex: 0 0 auto;
}

.tw-site-admin-version {
  font-size: .72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.tw-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.tw-pen-signed {
  color: var(--badge-approved-color);
}

.tw-pen-unsigned {
  color: var(--accent);
}

.tw-search-input {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text-primary);
}

.tw-sr-type-badge {
  min-width: 90px;
  text-align: center;
  flex-shrink: 0;
}

.tw-sr-title {
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-sr-desc {
  color: var(--text-muted);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-sr-row {
  transition: background .15s;
}

.tw-sr-row:hover {
  background: var(--accent-muted);
}

.tw-quick-links-wrapper {
  display: flex;
  gap: .35rem;
  align-items: center;
}

.tw-search-submit-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .36rem .55rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}

.tw-diff-add {
  display: block;
  background: var(--badge-approved-bg);
  color: var(--badge-approved-color);
  border-left: 3px solid var(--badge-approved-color);
  padding-left: .4rem;
  margin: 1px 0;
}

.tw-diff-remove {
  display: block;
  background: var(--badge-rejected-bg);
  color: var(--badge-rejected-color);
  border-left: 3px solid var(--badge-rejected-color);
  padding-left: .4rem;
  margin: 1px 0;
  text-decoration: line-through;
}

.tw-diff-context {
  display: block;
  color: var(--text-muted);
  padding-left: .4rem;
  margin: 1px 0;
}

.tw-msg-quote {
  background: var(--color-surface-offset);
  border-left: 3px solid var(--accent);
  border-radius: 0 .3rem .3rem 0;
  padding: .3rem .5rem .3rem .6rem;
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  max-width: 100%;
  overflow: hidden;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.tw-msg-quote:hover {
  background: var(--accent-muted);
  border-left-color: var(--accent-hover);
}

.tw-msg-quote>* {
  pointer-events: none;
}

.tw-msg-quote-mark {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  opacity: .7;
}

.tw-msg-quote-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
  font-style: italic;
}

.tw-msg-quote-jump {
  pointer-events: auto;
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: .9rem;
  flex-shrink: 0;
  transition: color .15s;
  opacity: .6;
}

.tw-msg-quote:hover .tw-msg-quote-jump {
  opacity: 1;
  color: var(--accent-hover);
}

@keyframes msg-flash {
  0%, 100% {
    background: transparent;
  }

  20%, 80% {
    background: var(--accent-muted);
  }
}

.tw-msg-highlighted {
  animation: msg-flash 2s ease;
  border-radius: .2rem;
}

.tw-reply-preview {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .65rem;
  background: var(--color-surface-offset);
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tw-reply-preview-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tw-reply-preview-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .25rem;
  flex-shrink: 0;
  transition: color .15s;
}

.tw-reply-preview-close:hover {
  color: var(--badge-rejected-color);
}

.tw-vote-bar-wrap {
  height: 4px;
  border-radius: 9999px;
  background: var(--color-surface-offset);
  flex: 1;
  min-width: 50px;
  max-width: 100px;
  overflow: hidden;
  align-self: center;
}

.tw-vote-bar-fill {
  width: var(--vote-progress, 0%);
  height: 100%;
  border-radius: 9999px;
  transition: width .3s ease;
}

.tw-vote-bar--positive {
  background: var(--status-online-color);
}

.tw-vote-bar--neutral {
  background: var(--status-warning-color);
}

.tw-vote-bar--negative {
  background: var(--badge-rejected-color);
}

.tw-vote-bar-label {
  font-size: .65rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.tw-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .15rem .45rem;
  border-radius: 9999px;
  background: var(--color-surface-offset);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: .85rem;
  transition: background .15s, border-color .15s;
  line-height: 1;
}

.tw-reaction-btn--active {
  background: var(--accent-muted);
  border: 1px solid var(--accent);
}

.tw-reaction-btn:hover:not(.tw-reaction-btn--active) {
  background: var(--color-surface-dynamic);
}

.tw-reaction-count,
  .tw-read-by-count {
  font-size: .72rem;
  color: var(--text-muted);
}

.tw-chip {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 2rem;
  font-size: .78rem;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  transition: all .15s;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  opacity: .38;
}

.tw-chip:hover {
  opacity: .65;
}

.tw-chip.tw-chip--on {
  opacity: 1;
}

.tw-chip.tw-chip--on[data-color="primary"] {
  background: var(--badge-primary-bg);
  color: var(--badge-primary-color);
  border-color: var(--badge-primary-border);
}

.tw-chip.tw-chip--on[data-color="warning"] {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-color);
  border-color: var(--badge-warning-border);
}

.tw-chip.tw-chip--on[data-color="danger"] {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-color);
  border-color: var(--badge-danger-border);
}

.tw-chip.tw-chip--on[data-color="success"] {
  background: var(--badge-success-bg);
  color: var(--badge-success-color);
  border-color: var(--badge-success-border);
}

.tw-chip.tw-chip--on[data-color="secondary"] {
  background: var(--badge-secondary-bg);
  color: var(--badge-secondary-color);
  border-color: var(--badge-secondary-border);
}

.tw-chip.tw-chip--on[data-color="info"] {
  background: var(--badge-info-bg);
  color: var(--badge-info-color);
  border-color: var(--badge-info-border);
}

.tw-chip.tw-chip--on[data-color="accent"] {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

.tw-chip.tw-chip--on[data-color="dark"] {
  background: var(--badge-dark-bg);
  color: var(--badge-dark-color);
  border-color: var(--badge-dark-border);
}

.tw-gap-35 {
  gap: .35rem;
}

.tw-text-main {
  color: var(--text-primary);
}

.tw-sortable-ghost {
  opacity: .4;
  background: var(--accent-muted);
  border: 2px dashed var(--accent);
  border-radius: .6rem;
}

.tw-sortable-chosen {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.tw-drag-handle {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: .5;
  cursor: grab;
  font-size: .9rem;
  transition: opacity .15s;
}

.tw-drag-handle:hover,
  .tw-drag-handle:active {
  opacity: 1;
}

.tw-drag-handle:active {
  cursor: grabbing;
}

/* ══ scalone z layout.css (etap 5.5) ══ */

.tw-avatar {
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
}

.tw-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

img.tw-avatar {
  -o-object-fit: cover;
     object-fit: cover;
  display: inline-block;
}

.tw-avatar-fallback {
  color: var(--accent);
  background: var(--accent-muted);
}

.tw-avatar-fallback[class*="tw-citizen-color-"] {
  color: var(--text-inverse);
}

.tw-avatar-xs {
  width: 18px;
  height: 18px;
  font-size: .5rem;
}

.tw-avatar-sm {
  width: 20px;
  height: 20px;
  font-size: .55rem;
}

.tw-avatar-md {
  width: 22px;
  height: 22px;
  font-size: .6rem;
}

.tw-avatar-lg {
  width: 28px;
  height: 28px;
  font-size: .65rem;
}

.tw-avatar-xl {
  width: 30px;
  height: 30px;
  font-size: .7rem;
}

.tw-avatar-2xl {
  width: 32px;
  height: 32px;
  font-size: .75rem;
}

.tw-avatar-3xl {
  width: 34px;
  height: 34px;
  font-size: .8rem;
}

.tw-avatar-4xl {
  width: 36px;
  height: 36px;
  font-size: .85rem;
}

.tw-avatar-5xl {
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
}

.tw-avatar-6xl {
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
}

.tw-avatar-7xl {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

.tw-avatar.tw-avatar-accent {
  background: var(--accent);
  color: var(--text-on-accent);
}

.tw-avatar-bordered {
  border: 2px solid var(--border);
}

.tw-text-author,
  .tw-feed-desc,
  .tw-cat-mgr-desc {
  font-size: .75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html,
  body {
  background: var(--bg-base);
  color: var(--text-primary);
  margin: 0;
}

.tw-sidebar {
  width: -moz-max-content;
  width: max-content;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  align-self: flex-start;
  z-index: 100;
  border-right: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  transition: width .2s ease;
}

.tw-sidebar-logo .tw-brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.tw-sidebar-logo .tw-logo-label {
  overflow-wrap: anywhere;
  min-width: 0;
}

.tw-brand-mark {
  width: 1em;
  height: 1em;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: -.125em;
}

.tw-sidebar-nav .tw-nav-item {
  list-style: none;
}

.tw-sidebar-nav .tw-nav-item a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.1rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: .4rem;
  margin: .1rem .65rem;
  transition: background .15s, color .15s;
  font-size: .875rem;
}

.tw-sidebar-nav .tw-nav-item a:hover,
  .tw-sidebar-bottom .tw-nav-item a:hover {
  background: var(--accent-muted);
  color: var(--text-primary);
}

.tw-sidebar-nav .tw-nav-item a.tw-active {
  background: var(--accent-muted);
  color: var(--accent);
}

.tw-sidebar-nav .tw-nav-item a .tw-nav-icon {
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
  font-size: .9rem;
}

.tw-sidebar-bottom .tw-nav-item {
  list-style: none;
}

.tw-sidebar-bottom .tw-nav-item a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1.1rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: .4rem;
  margin: .1rem .65rem;
  transition: background .15s, color .15s;
  font-size: .875rem;
}

.tw-main-area {
  margin-left: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  transition: none;
}

.tw-topbar {
  height: var(--topbar-height);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 90;
  flex-shrink: 0;
}

.tw-topbar .tw-topbar-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.tw-topbar .tw-topbar-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.tw-topbar .tw-topbar-breadcrumb a:hover {
  color: var(--text-primary);
}

.tw-topbar .tw-topbar-logo {
  display: none;
}

.tw-topbar .tw-topbar-breadcrumb .tw-sep {
  opacity: .4;
}

.tw-topbar .tw-topbar-breadcrumb .tw-current,
  .tw-task-assignee-name {
  color: var(--text-primary);
  font-weight: 500;
}

.tw-topbar .tw-search-box {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: .5rem;
  padding: .38rem .85rem;
  color: var(--text-primary);
  width: 220px;
  font-size: .85rem;
}

.tw-topbar .tw-search-box::-moz-placeholder {
  color: var(--text-muted);
}

.tw-topbar .tw-search-box::placeholder {
  color: var(--text-muted);
}

.tw-topbar .tw-search-box:focus,
  .tw-arg-inline-form textarea:focus,
  .tw-cat-mgr-input:focus {
  outline: none;
  border-color: var(--accent);
}

.tw-topbar .tw-notif-bell {
  color: var(--text-muted);
  font-size: 1rem;
  position: relative;
  text-decoration: none;
  padding: .25rem;
  transition: color .15s;
}

.tw-topbar .tw-notif-bell:hover {
  color: var(--text-primary);
}

.tw-topbar .tw-notif-bell .tw-notif-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--badge-rejected-color);
  color: var(--text-on-accent);
  border-radius: 9px;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-sidebar);
  box-sizing: border-box;
  animation: pulse 2s infinite;
  box-shadow: 0 0 8px var(--badge-rejected-glow);
}

.tw-anon-nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex-shrink: 0;
}

.tw-anon-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border-radius: .45rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: .83rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.tw-anon-nav-link:hover {
  color: var(--text-primary);
  background: var(--btn-glass-bg);
}

@media (max-width: 767.98px) {
  .tw-topbar {
    padding: 0 .75rem;
    gap: .35rem;
  }

  .tw-anon-nav-text {
    display: none;
  }

  .tw-anon-nav-link {
    padding: .25rem .35rem;
  }

  .tw-topbar .tw-notif-bell {
    padding: .15rem;
    font-size: .92rem;
  }

  .tw-topbar .tw-btn-outline-secondary,
  .tw-topbar .tw-btn-cta {
    padding: .32rem .55rem;
    font-size: .75rem;
  }
}

a {
  color: var(--accent);
  transition: opacity .15s;
}

a:hover {
  opacity: .85;
}

@media (max-width: 767.98px) {
  .tw-sidebar {
    position: fixed;
    width: var(--sidebar-width);
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .tw-sidebar.tw-sidebar-open {
    transform: translateX(0);
  }

  .tw-main-area {
    margin-left: 0;
  }

  .tw-topbar .tw-btn-cta-label {
    display: none;
  }

  .tw-topbar .tw-topbar-breadcrumb .tw-sep,
  .tw-topbar .tw-topbar-breadcrumb .tw-current {
    display: none;
  }

  .tw-topbar .tw-topbar-logo .tw-logo-label {
    display: none;
  }

  .tw-topbar .tw-topbar-breadcrumb {
    position: relative;
    justify-content: center;
  }

  .tw-topbar .tw-topbar-breadcrumb .tw-current {
    display: inline;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tw-topbar .tw-topbar-breadcrumb #sidebar-toggle,
  .tw-topbar .tw-topbar-breadcrumb .tw-topbar-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .tw-topbar .tw-topbar-breadcrumb #sidebar-toggle {
    left: 0;
  }

  .tw-topbar .tw-topbar-breadcrumb .tw-topbar-logo {
    left: 2.25rem;
  }

  .tw-topbar .tw-topbar-logo {
    display: inline-flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 1rem;
    text-decoration: none;
  }

  .tw-topbar .tw-topbar-logo:hover {
    color: var(--accent);
  }

  .tw-sidebar-bottom .tw-nav-item {
    flex: 0 0 auto;
  }

  .tw-sidebar-bottom .tw-nav-item a,
  .tw-sidebar-bottom .tw-nav-item button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    padding: .6rem .75rem;
    margin: 0;
    border-radius: .4rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
  }

  .tw-sidebar-bottom .tw-nav-item a:hover,
  .tw-sidebar-bottom .tw-nav-item a:focus,
  .tw-sidebar-bottom .tw-nav-item button:hover,
  .tw-sidebar-bottom .tw-nav-item button:focus {
    background: var(--accent-muted);
    color: var(--text-primary);
  }

  .tw-sidebar-bottom .tw-nav-item a.tw-active {
    color: var(--accent);
  }
}

#sidebar-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .tw-sidebar.tw-collapsed {
    width: var(--sidebar-collapsed-width);
  }

  .tw-sidebar.tw-collapsed .tw-nav-text,
  .tw-sidebar.tw-collapsed .tw-logo-sub,
  .tw-sidebar.tw-collapsed .tw-logo-label {
    display: none !important;
  }

  .tw-sidebar.tw-collapsed .tw-sidebar-logo {
    padding: 1.1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tw-sidebar.tw-collapsed .tw-sidebar-nav .tw-nav-item a,
  .tw-sidebar.tw-collapsed .tw-sidebar-bottom .tw-nav-item a,
  .tw-sidebar.tw-collapsed .tw-sidebar-bottom .tw-nav-item button {
    justify-content: center;
    padding: .6rem 0;
    margin: .1rem 4px;
    gap: 0;
  }

  .tw-sidebar.tw-collapsed .tw-sidebar-bottom ul {
    flex-direction: column;
  }

  .tw-sidebar.tw-collapsed .tw-sidebar-bottom .tw-nav-item {
    margin-inline-start: 0 !important;
  }

  .tw-sidebar.tw-collapsed .tw-nav-icon {
    width: auto;
    margin: 0;
  }

  .tw-main-area.tw-sidebar-collapsed {
    margin-left: 0;
  }
}

.tw-expandable {
  position: relative;
}

.tw-expandable-body {
  max-height: 13.5em;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tw-expandable-hint {
  display: none;
  padding-top: .25em;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  text-align: right;
}

.tw-expandable.tw-has-overflow {
  cursor: pointer;
}

.tw-expandable.tw-has-overflow:not(.tw-is-open) > .tw-expandable-hint {
  display: block;
}

.tw-expandable.tw-is-open > .tw-expandable-body {
  max-height: 9999px;
}

.tox-tinymce {
  width: 100% !important;
}

@media (max-width: 576px) {
  .tox-tinymce {
    max-height: 60vh;
  }
}

.tw-near-threshold {
  background-color: var(--status-warning-bg);
  border-left: 3px solid var(--status-warning-color);
}

.tw-citizens-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tw-citizens-toolbar .tw-view-toggle-btn .tw-view-label {
  font-size: .78rem;
}

#citizens-list-view tbody tr > td {
  background-color: var(--bg-card);
}

#citizens-list-view tbody tr:nth-child(even) > td {
  background-color: var(--table-stripe-bg);
}

#citizens-list-view .tw-citizens-table {
  --table-hover-bg: var(--accent-muted);
  --table-hover-color: var(--text-primary);
}

.tw-view-grid #citizens-list-view {
  display: none;
}

.tw-cursor-default {
  cursor: default;
}

[data-detail-url] {
  cursor: pointer;
}

.tw-btn-mark-all {
  color: var(--badge-proposition-color);
  border-color: var(--badge-proposition-border);
}

.tw-empty-state-icon {
  color: var(--text-muted);
  opacity: .35;
}

.tw-modal-backdrop-custom {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 99;
}

.tw-search-result-link {
  background: var(--accent-muted);
  color: var(--accent);
  font-size: .8rem;
  padding: .4rem .75rem;
}

.tw-search-page-submit {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
}

.tw-search-result-meta {
  color: var(--text-muted);
  font-size: .75rem;
  flex-shrink: 0;
}

.tw-section-divider {
  border-top: 1px solid var(--border);
}

.tw-badge-xs {
  font-size: .72rem;
  padding: 2px 8px;
}

.tw-bg-glass-sm {
  background: var(--color-surface-offset);
  border-radius: var(--radius-xs);
}

/* ══ scalone z light-mode.css (etap 5.5) ══ */

[data-theme="light"] .tw-topbar .tw-notif-bell .tw-notif-count {
  color: var(--text-inverse);
}

[data-theme="light"] td a {
  color: var(--text-primary);
}

[data-theme="light"] .tw-proposal-card-header:hover {
  background: rgba(0, 0, 0, .025);
}

[data-theme="light"] .tw-proposal-card-body:hover {
  background: var(--accent-muted);
}

[data-theme="light"] .tw-proposal-author-link:hover {
  background: rgba(0, 0, 0, .05);
}

[data-theme="light"] .tw-sort-btn.tw-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-muted);
}

[data-theme="light"] .tw-chat-room-pulse {
  color: var(--accent);
}

[data-theme="light"] .tw-stepper-step-wrap {
  background: rgba(0, 0, 0, .04);
}

[data-theme="light"] .tw-stepper-step-wrap:hover {
  background: rgba(0, 0, 0, .08);
  filter: drop-shadow(0 0 1.5px var(--btn-glass-border));
}

[data-theme="light"] .tw-stepper-step {
  color: var(--text-muted);
}

[data-theme="light"] .tw-stepper-step:hover {
  color: var(--text-primary);
}

[data-theme="light"] .tw-stepper-step-count {
  background: rgba(0, 0, 0, .08);
}

/* ── Buttons ─────────────────────────────────────────────── */

.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-btn);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.tw-btn-link {
  padding-right: 0;
  padding-left: 0;
  background: transparent;
  color: var(--accent);
  text-decoration: none;
}

.tw-btn-link:hover,
  .tw-btn-link:focus {
  color: var(--accent-hover);
  text-decoration: underline;
}

.tw-btn-primary {
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.tw-btn-primary:hover,
  .tw-btn-primary:focus {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 14px var(--accent-muted);
}

.tw-btn-secondary {
  background: var(--btn-glass-bg);
  border: 1px solid var(--btn-glass-border);
  color: var(--btn-glass-color);
}

.tw-btn-secondary:hover,
  .tw-btn-secondary:focus {
  background: var(--btn-glass-hover-bg);
  border-color: var(--btn-glass-hover-border);
  color: var(--btn-glass-hover-color);
}

.tw-btn-outline-primary {
  background: transparent;
  border: 1px solid var(--accent-border);
  color: var(--accent);
}

.tw-btn-outline-primary:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.tw-btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.tw-btn-outline-secondary:hover {
  background: var(--btn-outline-secondary-hover-bg);
  border-color: var(--btn-outline-secondary-hover-border);
  color: var(--text-primary);
}

.tw-btn-outline-danger {
  background: transparent;
  border: 1px solid var(--badge-rejected-color);
  color: var(--badge-rejected-color);
}

.tw-btn-outline-danger:hover,
  .tw-btn-outline-danger:focus {
  background: var(--btn-danger-bg);
  border-color: var(--badge-rejected-color);
  color: var(--btn-danger-color);
}

.tw-btn-outline-success {
  background: transparent;
  border: 1px solid var(--badge-approved-color);
  color: var(--badge-approved-color);
}

.tw-btn-outline-success:hover,
  .tw-btn-outline-success:focus {
  background: var(--btn-success-bg);
  border-color: var(--badge-approved-color);
  color: var(--btn-success-color);
}

.tw-btn-outline-warning {
  background: transparent;
  border: 1px solid var(--status-warning-color);
  color: var(--status-warning-color);
}

.tw-btn-outline-warning:hover,
  .tw-btn-outline-warning:focus {
  background: var(--btn-warning-bg);
  border-color: var(--status-warning-color);
  color: var(--text-inverse);
}

.tw-btn-outline-info {
  background: transparent;
  border: 1px solid var(--color-info);
  color: var(--color-info);
}

.tw-btn-outline-info:hover,
  .tw-btn-outline-info:focus {
  background: color-mix(in srgb, var(--color-info) 85%, transparent);
  border-color: var(--color-info);
  color: var(--text-inverse);
}

.tw-btn-outline-light {
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
}

.tw-btn-outline-light:hover,
  .tw-btn-outline-light:focus {
  background: var(--bg-card);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.tw-btn-outline-dark {
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
}

.tw-btn-outline-dark:hover,
  .tw-btn-outline-dark:focus {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-card);
}

.tw-btn-sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}

.tw-btn-danger {
  background: var(--btn-danger-bg);
  border: 1px solid var(--badge-rejected-color);
  color: var(--btn-danger-color);
}

.tw-btn-danger:hover {
  background: var(--badge-rejected-color);
  border-color: var(--badge-rejected-color);
}

.tw-btn-success {
  background: var(--btn-success-bg);
  border: 1px solid var(--badge-approved-color);
  color: var(--btn-success-color);
}

.tw-btn-success:hover {
  background: var(--badge-approved-color);
  border-color: var(--badge-approved-color);
}

.tw-btn-warning {
  background: var(--btn-warning-bg);
  border: 1px solid var(--status-warning-color);
  color: var(--text-on-accent);
}

.tw-btn-warning:hover {
  background: var(--status-warning-color);
  border-color: var(--status-warning-color);
}

.tw-btn-info {
  background: color-mix(in srgb, var(--color-info) 85%, transparent);
  border: 1px solid var(--color-info);
  color: var(--text-inverse);
}

.tw-btn-info:hover,
  .tw-btn-info:focus {
  background: var(--color-info);
  border-color: var(--color-info);
}

.tw-btn-light {
  background: var(--color-light);
  border: 1px solid var(--color-light);
  color: var(--text-inverse);
}

.tw-btn-light:hover,
  .tw-btn-light:focus {
  background: var(--color-light);
  border-color: var(--color-light);
  filter: brightness(.9);
}

.tw-btn-dark {
  background: var(--color-dark);
  border: 1px solid var(--color-dark);
  color: var(--text-inverse);
}

.tw-btn-dark:hover,
  .tw-btn-dark:focus {
  background: var(--color-dark);
  border-color: var(--color-dark);
  filter: brightness(1.15);
}

/* ── Cards ───────────────────────────────────────────────── */

.tw-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
}

.tw-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.tw-card-body {
  flex: 1 1 auto;
  padding: 0.75rem;
}

.tw-card-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

/* ── Forms ───────────────────────────────────────────────── */

.tw-form-control,
  .tw-form-select {
  width: 100%;
  border-radius: var(--radius-btn);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s;
}

.tw-form-control::-moz-placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.tw-form-control::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.tw-form-control:focus,
  .tw-form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
  background: var(--input-bg);
  color: var(--text-primary);
}

.tw-form-label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.tw-form-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tw-form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.5rem;
  padding-left: 0;
  margin-bottom: 0.25rem;
}

.tw-form-check-inline {
  display: inline-flex;
  margin-right: 0.75rem;
  margin-bottom: 0;
}

.tw-form-check-input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--input-border);
  border-radius: 0.25rem;
  background: var(--input-bg);
  color: var(--text-primary);
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.tw-form-check-input:checked {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") center/1rem auto no-repeat;
}

.tw-form-check-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.tw-form-check-input[type="radio"] {
  border-radius: 50%;
}

.tw-form-check-input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--input-bg);
}

.tw-form-check-label {
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

input.tw-form-switch,
  .tw-form-switch .tw-form-check-input {
  width: 2rem;
  height: 1.1rem;
  border-radius: 9999px;
  background: var(--input-border);
  position: relative;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s;
  border: none;
}

input.tw-form-switch::before,
  .tw-form-switch .tw-form-check-input::before {
  content: '';
  position: absolute;
  top: 0.075rem;
  left: 0.075rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--bg-card);
  transition: transform 0.15s;
}

input.tw-form-switch:checked,
  .tw-form-switch .tw-form-check-input:checked {
  background: var(--accent);
}

input.tw-form-switch:checked::before,
  .tw-form-switch .tw-form-check-input:checked::before {
  transform: translateX(0.85rem);
}

input.tw-form-switch:focus,
  .tw-form-switch .tw-form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.tw-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.tw-input-group > .tw-form-control,
  .tw-input-group > .tw-form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.tw-input-group > .tw-form-control:not(:last-child),
  .tw-input-group > .tw-form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.tw-input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  background: var(--bg-tertiary);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-btn);
}

.tw-input-group > .tw-input-group-text + .tw-form-control,
  .tw-input-group > .tw-input-group-text + .tw-form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.tw-form-control-sm,
  .tw-form-select-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.tw-form-floating {
  position: relative;
}

.tw-form-floating > .tw-form-control,
  .tw-form-floating > .tw-form-select {
  min-height: 3.5rem;
  padding: 1.5rem 0.75rem 0.5rem;
}

.tw-form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  pointer-events: none;
}

.tw-invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-danger);
}

.tw-form-control.is-invalid,
  .tw-form-select.is-invalid {
  border-color: var(--color-danger);
}

.tw-form-control.is-invalid:focus,
  .tw-form-select.is-invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent);
}

.tw-form-check-input.is-invalid {
  border-color: var(--color-danger);
}

.tw-form-check-input.is-invalid:checked {
  background-color: var(--color-danger);
}

.tw-form-control.is-invalid ~ .tw-invalid-feedback,
  .tw-form-select.is-invalid ~ .tw-invalid-feedback,
  .tw-form-check-input.is-invalid ~ .tw-invalid-feedback {
  display: block;
}

/* ── Alerts ──────────────────────────────────────────────── */

.tw-alert {
  border-radius: 0.55rem;
  border: 1px solid var(--border);
  padding: 0.75rem;
  font-size: 0.875rem;
}

.tw-alert-dismissible {
  position: relative;
  padding-right: 3rem;
}

.tw-alert-dismissible .tw-btn-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.tw-alert-heading {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.tw-alert-info {
  background: var(--alert-info-bg);
  color: var(--alert-info-color);
  border-color: var(--alert-info-border);
}

.tw-alert-success {
  background: var(--alert-success-bg);
  color: var(--alert-success-color);
  border-color: var(--alert-success-border);
}

.tw-alert-warning {
  background: var(--alert-warning-bg);
  color: var(--alert-warning-color);
  border-color: var(--alert-warning-border);
}

.tw-alert-danger {
  background: var(--alert-danger-bg);
  color: var(--alert-danger-color);
  border-color: var(--alert-danger-border);
}

.tw-alert-primary {
  background: var(--alert-primary-bg);
  color: var(--alert-primary-color);
  border-color: var(--alert-primary-border);
}

.tw-alert-secondary {
  background: var(--alert-secondary-bg);
  color: var(--alert-secondary-color);
  border-color: var(--alert-secondary-border);
}

.tw-alert-dark {
  background: var(--alert-dark-bg);
  color: var(--alert-dark-color);
  border-color: var(--alert-dark-border);
}

/* ── Badges ──────────────────────────────────────────────── */

.tw-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.tw-badge-proposition {
  background: var(--badge-proposition-bg);
  color: var(--badge-proposition-color);
  border-color: var(--badge-proposition-border);
}

.tw-badge-discussion {
  background: var(--badge-discussion-bg);
  color: var(--badge-discussion-color);
}

.tw-badge-referendum {
  background: var(--badge-referendum-bg);
  color: var(--badge-referendum-color);
}

.tw-badge-approved {
  background: var(--badge-approved-bg);
  color: var(--badge-approved-color);
  border-color: var(--badge-approved-border);
}

.tw-badge-rejected {
  background: var(--badge-rejected-bg);
  color: var(--badge-rejected-color);
  border-color: var(--badge-rejected-border);
}

/* ── Sections / typography ───────────────────────────────── */

.tw-section {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.tw-section-heading {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tw-text-muted {
  color: var(--text-muted);
}

.tw-text-body {
  color: var(--text-primary);
}

/* ── Dashboard grid & tiles ──────────────────────────────── */

.tw-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-auto-flow: row dense;
  grid-auto-rows: auto;
}

.tw-dashboard-tile--1x1,
  .tw-dashboard-tile--2x1 {
  min-width: 0;
}

@media (min-width: 768px) {
  .tw-dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(240px, auto);
  }

  .tw-dashboard-tile {
    min-height: 240px;
  }

  .tw-dashboard-tile--1x1 {
    grid-column: span 1;
  }

  .tw-dashboard-tile--2x1 {
    grid-column: span 2;
  }
}

@media (min-width: 992px) {
  .tw-dashboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tw-dashboard-tile-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}

.tw-dashboard-tile-header .tw-tile-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin: 0 auto 0 0;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tw-dashboard-tile-header > i:not(.tw-drag-handle),
  .tw-dashboard-tile-header .tw-tile-heading > i {
  color: var(--accent);
  font-size: 0.85rem;
}

/* ── Quick links tile ────────────────────────────────────── */

.tw-quick-links-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-right: 4px;
  max-height: calc(5 * 2rem);
}

.tw-quick-link-circle {
  color: var(--badge-rejected-color);
  transition: color 0.15s;
}

.tw-quick-link-circle.tw-is-read {
  color: var(--badge-approved-color);
}

.tw-quick-link-row .tw-text-primary-link {
  color: var(--accent);
}

.tw-quick-link-row.tw-is-read .tw-text-primary-link {
  color: var(--text-muted);
}

.tw-progress {
  display: flex;
  height: 5px;
  overflow: hidden;
  background: var(--progress-bg);
  border-radius: var(--radius-sm);
}

.tw-progress-thick {
  height: 8px;
}

.tw-progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--accent);
  width: var(--progress, 0%);
  transition: width 0.6s ease;
}

/* ── Dashboard list rows / activity feed tile ────────────── */

.tw-task-dash-row {
  border-radius: 0.35rem;
  border: 1px solid transparent;
  padding: 3px 6px;
  margin: 0 -6px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tw-task-dash-row:hover {
  background: var(--accent-muted);
  border-color: var(--accent-glow);
}

.tw-task-dash-row:hover .tw-text-primary-link {
  color: var(--accent);
}

.tw-unread-row {
  min-width: 0;
  background: var(--badge-proposition-bg);
  border-left: 3px solid var(--badge-proposition-color);
}

.tw-activity-more {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 2px 12px 4px;
}

.tw-text-primary-link {
  font-size: 0.82rem;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  position: relative;
  z-index: 2;
  transition: color 0.15s;
}

.tw-text-primary-link:hover {
  color: var(--accent);
}

.tw-dashboard-counter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-badge, 0.5rem);
  border: 1px solid var(--badge-proposition-border);
  background: transparent;
  color: var(--badge-proposition-color);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
  z-index: 2;
}

.tw-dashboard-counter-btn:hover {
  background: var(--badge-proposition-bg);
  border-color: var(--badge-proposition-color);
}

.tw-dashboard-counter-btn.tw-has-count {
  background: var(--badge-proposition-bg);
  box-shadow: 0 0 8px var(--badge-proposition-border);
}

.tw-stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* badge-status + dynamic color badges (content_type_color → primary/warning/…) */

.tw-badge-status {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-badge);
  white-space: nowrap;
}

.tw-badge-status-xs {
  font-size: 0.62rem;
  padding: 1px 5px;
}

.tw-badge-primary {
  background: var(--badge-primary-bg);
  color: var(--badge-primary-color);
}

.tw-badge-success {
  background: var(--badge-success-bg);
  color: var(--badge-success-color);
}

.tw-badge-danger {
  background: var(--badge-danger-bg);
  color: var(--badge-danger-color);
}

.tw-badge-warning {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-color);
}

.tw-badge-info {
  background: var(--badge-info-bg);
  color: var(--badge-info-color);
}

.tw-badge-secondary {
  background: var(--badge-secondary-bg);
  color: var(--badge-secondary-color);
}

.tw-badge-light {
  background: var(--color-surface-offset);
  color: var(--text-primary);
}

.tw-badge-dark {
  background: var(--badge-dark-bg);
  color: var(--badge-dark-color);
}

/* ── Featured documents carousel (3.5) ───────────────────── */

.tw-tile-carousel-wrapper {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
}

.tw-featured-carousel {
  position: relative;
  height: 100%;
  min-height: 180px;
  overflow: hidden;
  border-radius: var(--radius-card, 0.5rem);
}

.tw-featured-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

.tw-featured-carousel-item {
  flex: 0 0 100%;
  height: 100%;
  min-width: 0;
}

.tw-featured-carousel-item > a {
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.tw-featured-carousel img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-card, 0.5rem);
  filter: brightness(var(--featured-img-brightness));
}

.tw-featured-carousel-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.55rem 0.75rem;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg-card) 82%, transparent));
  color: var(--text-primary);
  font-size: 1.275rem;
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--bg-card) 60%, transparent);
  border-radius: 0 0 var(--radius-card, 0.5rem) var(--radius-card, 0.5rem);
}

.tw-featured-carousel-subtitle {
  display: block;
  margin-top: 0.1rem;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text-primary);
}

.tw-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--text-inverse);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}

.tw-carousel-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.65);
}

.tw-carousel-btn i {
  font-size: 0.75rem;
}

.tw-carousel-prev {
  left: 0.35rem;
}

.tw-carousel-next {
  right: 0.35rem;
}

/* Below the 3-column breakpoint tiles size to content, so the flex
     wrapper would collapse — give the carousel a fixed aspect ratio and
     let the image cover it (no empty space for any image proportion). */

@media (max-width: 991.98px) {
  .tw-tile-carousel-wrapper {
    flex: none;
  }

  .tw-featured-carousel {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

.tw-link-more {
  font-size: 0.82rem;
  color: var(--accent);
  position: relative;
  z-index: 2;
}

/* ── Dot public/private (also used in 3.6 upcoming events) ─ */

.tw-dot-public,
  .tw-dot-private {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  opacity: 0.8;
  flex-shrink: 0;
}

.tw-dot-public {
  background: var(--badge-approved-color);
}

.tw-dot-private {
  background: var(--text-muted);
}

/* ── Layout ──────────────────────────────────────────────── */

.tw-layout-wrapper {
  display: flex;
  min-height: 100vh;
}

.tw-main-area {
  margin-left: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.tw-main-content {
  flex: 1 1 0;
  padding: 1.5rem;
}

/* ── Topbar ──────────────────────────────────────────────── */

.tw-topbar {
  height: var(--topbar-height);
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 90;
  flex-shrink: 0;
}

.tw-topbar-breadcrumb {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.tw-topbar-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}

.tw-topbar-breadcrumb a:hover {
  color: var(--text-primary);
}

.tw-topbar-breadcrumb .tw-sep {
  opacity: 0.4;
}

.tw-topbar-breadcrumb .tw-current {
  color: var(--text-primary);
  font-weight: 500;
}

.tw-topbar-logo {
  display: none;
  align-items: center;
  color: var(--text-primary);
  font-size: 1rem;
  text-decoration: none;
}

.tw-topbar-logo:hover {
  color: var(--accent);
}

.tw-search-box {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0.5rem;
  padding: 0.38rem 0.85rem;
  color: var(--text-primary);
  width: 220px;
  font-size: 0.85rem;
}

.tw-search-box::-moz-placeholder {
  color: var(--text-muted);
}

.tw-search-box::placeholder {
  color: var(--text-muted);
}

.tw-search-box:focus {
  outline: none;
  border-color: var(--accent);
}

.tw-notif-bell {
  color: var(--text-muted);
  font-size: 1rem;
  position: relative;
  text-decoration: none;
  padding: 0.25rem;
  transition: color 0.15s;
}

.tw-notif-bell:hover {
  color: var(--text-primary);
}

.tw-notif-bell .tw-notif-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--badge-rejected-color);
  color: var(--text-on-accent);
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-sidebar);
  box-sizing: border-box;
  animation: pulse 2s infinite;
  box-shadow: 0 0 8px var(--badge-rejected-glow);
}

/* ── Sidebar ─────────────────────────────────────────────── */

.tw-sidebar {
  width: -moz-max-content;
  width: max-content;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  align-self: flex-start;
  z-index: 100;
  border-right: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.2s ease;
}

.tw-sidebar-logo {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  max-width: var(--sidebar-width);
  box-sizing: border-box;
}

.tw-sidebar-logo .tw-logo-title {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.2;
}

.tw-sidebar-logo .tw-logo-sub {
  color: var(--text-muted);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  display: block;
  margin-top: 2px;
  transition: color 0.15s;
}

.tw-sidebar-logo a:hover .tw-logo-sub {
  color: var(--text-primary);
}

.tw-sidebar-nav {
  flex: 1 1 0;
  min-height: 0;
  padding: 0.75rem 0;
  overflow-y: auto;
}

.tw-sidebar-nav .tw-nav-item {
  list-style: none;
}

.tw-sidebar-nav .tw-nav-item a,
  .tw-sidebar-bottom .tw-nav-item a,
  .tw-sidebar-bottom .tw-nav-item button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.1rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 0.4rem;
  margin: 0.1rem 0.65rem;
  transition: background 0.15s, color 0.15s;
  font-size: 0.875rem;
}

.tw-sidebar-nav .tw-nav-item a:hover,
  .tw-sidebar-bottom .tw-nav-item a:hover,
  .tw-sidebar-bottom .tw-nav-item button:hover {
  background: var(--accent-muted);
  color: var(--text-primary);
}

.tw-sidebar-nav .tw-nav-item a.tw-active,
  .tw-sidebar-bottom .tw-nav-item a.tw-active {
  background: var(--accent-muted);
  color: var(--accent);
}

.tw-sidebar-nav .tw-nav-item a .tw-nav-icon,
  .tw-sidebar-bottom .tw-nav-icon {
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.tw-sidebar-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.5rem 0;
}

.tw-sidebar-bottom ul {
  display: flex;
  align-items: center;
}

.tw-sidebar-bottom .tw-nav-item {
  list-style: none;
}

.tw-sidebar-close-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.4rem;
}

/* ── Toasts / alerts global ──────────────────────────────── */

.tw-toast-container {
  position: fixed;
  top: 33%;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 280px;
  max-width: min(480px, 90vw);
}

.tw-toast-container.tw-visible {
  visibility: visible;
}

.tw-toast-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-overlay);
  animation: tw-toast-in 0.2s ease;
  transition: opacity .4s;
}

.tw-toast-msg--out {
  opacity: 0;
}

.tw-toast-msg.tw-toast-success {
  background: var(--badge-approved-color);
  color: var(--text-primary);
  border-color: var(--badge-approved-color);
}

.tw-toast-msg.tw-toast-error,
  .tw-toast-msg.tw-toast-danger {
  background: var(--badge-rejected-color);
  color: var(--text-primary);
  border-color: var(--badge-rejected-color);
}

.tw-toast-msg.tw-toast-warning {
  background: var(--status-warning-color);
  color: var(--text-primary);
  border-color: var(--status-warning-color);
}

.tw-toast-msg.tw-toast-info {
  background: var(--badge-proposition-color);
  color: var(--text-primary);
  border-color: var(--badge-proposition-color);
}

.tw-toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.tw-toast-close:hover {
  opacity: 1;
}

@keyframes tw-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Mobile layout overrides (@media ≤768px) ─────────────── */

@media (max-width: 767.98px) {
  .tw-topbar {
    padding: 0 0.75rem;
    gap: 0.35rem;
  }

  .tw-sidebar {
    position: fixed;
    width: var(--sidebar-width);
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .tw-sidebar.tw-sidebar-open {
    transform: translateX(0);
  }

  .tw-main-content {
    padding: 0.75rem;
  }

  .tw-sidebar-bottom {
    padding: 0.5rem 0.75rem;
  }

  .tw-sidebar-bottom .tw-nav-item {
    flex: 0 0 auto;
  }

  .tw-sidebar-bottom .tw-nav-item a,
    .tw-sidebar-bottom .tw-nav-item button {
    justify-content: center;
    min-width: 48px;
    padding: 0.6rem 0.75rem;
    margin: 0;
    font-size: 1.1rem;
  }
}

/* ── Dashboard tiles 3.8–3.14 ────────────────────────────── */

.tw-card--no-hover,
  .tw-card--no-hover:hover {
  border-color: var(--border);
  box-shadow: none;
}

.tw-hr-subtle {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.25rem 0;
  opacity: 0.6;
}

.tw-tile-text-muted {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.tw-balance-positive {
  color: var(--badge-approved-color);
  font-weight: 500;
}

.tw-balance-negative {
  color: var(--badge-rejected-color);
  font-weight: 500;
}

.tw-onboarding-hint {
  font-size: 0.82rem;
}

.tw-chat-msg-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-radius: 0.4rem;
  transition: background 0.15s;
}

.tw-chat-msg-row:hover {
  background: var(--accent-muted);
}

.tw-chat-msg-sender {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tw-chat-msg-room {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tw-chat-msg-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.tw-chat-msg-link {
  font-size: 0.82rem;
  color: var(--text-primary);
}

.tw-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-badge);
  border: 1px solid var(--border);
  background: var(--btn-glass-bg);
  color: var(--text-primary);
  font-size: 0.82rem;
}

.tw-wspol-stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

/* ── 4.1 Board detail ────────────────────────────────────── */

.tw-board-post-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 0.75rem 0;
  background: var(--bg-card);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-overlay);
}

.tw-post-header {
  border-bottom: 2px solid var(--border);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}

.tw-post-title {
  color: var(--badge-proposition-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  letter-spacing: 0.5px;
}

.tw-post-subtitle {
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  font-style: italic;
  opacity: 0.9;
}

.tw-post-featured-image {
  margin-bottom: 1rem;
}

.tw-post-featured-image img {
  width: 66%;
  max-height: 400px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: var(--radius-xs);
  display: block;
  margin: 0 auto;
}

.tw-post-content {
  color: var(--text-primary);
  line-height: 1.8;
  font-size: 1.1rem;
  padding: 1rem 0;
}

.tw-post-content h1,
  .tw-post-content h2,
  .tw-post-content h3,
  .tw-post-content h4,
  .tw-post-content h5,
  .tw-post-content h6 {
  color: var(--badge-proposition-color);
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.tw-post-content h1 {
  font-size: 2rem;
}

.tw-post-content h2 {
  font-size: 1.75rem;
}

.tw-post-content h3 {
  font-size: 1.5rem;
}

.tw-post-content h4 {
  font-size: 1.25rem;
}

.tw-post-content h5 {
  font-size: 1.1rem;
}

.tw-post-content h6 {
  font-size: 1rem;
}

.tw-post-content p {
  margin-bottom: 0.5rem;
  text-align: justify;
}

.tw-post-content ul,
  .tw-post-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.tw-post-content blockquote {
  border-left: 4px solid var(--badge-proposition-color);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--text-muted);
}

.tw-post-content code {
  background: var(--badge-proposition-bg);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  color: var(--badge-proposition-color);
}

.tw-post-content pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid var(--border);
}

.tw-board-post-card table,
  .tw-board-post-card .tw-table {
  border-collapse: collapse;
  width: 100%;
}

.tw-board-post-card table td,
  .tw-board-post-card table th,
  .tw-board-post-card .tw-table td,
  .tw-board-post-card .tw-table th {
  border: 1px solid var(--border);
  padding: 8px;
}

.tw-post-attachments {
  margin-top: 1.5rem;
}

.tw-attachment-uploaded-at {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tw-list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-radius: var(--radius-card);
}

.tw-list-group-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s;
}

.tw-list-group-item:first-child {
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-card);
}

.tw-list-group-item:last-child {
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

.tw-list-group-item + .tw-list-group-item {
  border-top: none;
}

.tw-list-group-item:hover {
  background: var(--accent-muted);
}

.tw-list-group-flush {
  border-radius: 0;
}

.tw-list-group-flush .tw-list-group-item {
  border-left: none;
  border-right: none;
}

.tw-list-group-flush .tw-list-group-item:first-child {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.tw-list-group-flush .tw-list-group-item:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media (max-width: 767.98px) {
  .tw-board-post-card {
    margin: 0.5rem 0;
    padding: 1rem;
    max-width: 98%;
    min-width: 0;
    box-sizing: border-box;
  }

  .tw-board-post-card .tw-post-header {
    min-width: 0;
    max-width: 100%;
  }

  .tw-post-title {
    font-size: 1.75rem;
  }

  .tw-post-subtitle {
    font-size: 1.2rem;
  }

  .tw-board-post-card table,
    .tw-board-post-card .tw-table {
    font-size: 0.8rem;
  }

  .tw-board-post-card table td,
    .tw-board-post-card table th,
    .tw-board-post-card .tw-table td,
    .tw-board-post-card .tw-table th {
    padding: 4px 2px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .tw-board-post-card {
    padding: 0.75rem;
  }

  .tw-post-title {
    font-size: 1.5rem;
  }

  .tw-post-subtitle {
    font-size: 1.1rem;
  }
}

/* ── 4.1 Board / shared toolbar ──────────────────────────── */

.tw-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.tw-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

.tw-toolbar-sort {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  flex-wrap: wrap;
}

.tw-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-btn, 0.5rem);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tw-sort-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.tw-sort-btn.tw-active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-muted);
  font-weight: 500;
}

.tw-sort-btn-label {
  font-size: 0.78rem;
}

.tw-sort-arrow {
  font-size: 0.65rem;
  opacity: 0.8;
}

.tw-toolbar-sort-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

.tw-toolbar-view {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.tw-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 32px;
  height: 32px;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-btn, 0.5rem);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tw-view-toggle-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.tw-view-toggle-btn.tw-active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-muted);
}

.tw-view-label {
  font-size: 0.78rem;
}

.tw-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.32rem 0.55rem;
  border-radius: 0.5rem;
  border: none;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.tw-btn-cta:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

.tw-btn-cta--round {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 0;
}

.tw-btn-cta--round i {
  font-size: 1.1rem;
}

.tw-board-category-group {
  margin-bottom: 1.5rem;
}

.tw-board-posts-list {
  display: block;
}

.tw-board-posts-grid {
  display: none;
}

.tw-view-grid .tw-board-posts-grid {
  display: block;
}

.tw-view-grid .tw-board-posts-list {
  display: none;
}

.tw-board-post-row {
  transition: background 0.15s;
}

.tw-board-post-row:hover {
  background: var(--accent-muted);
}

.tw-post-row-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.tw-post-row-link:hover {
  background: var(--accent-muted);
  color: inherit;
}

.tw-post-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 0.75rem;
  height: 100%;
  min-height: 160px;
  cursor: pointer;
  transition: border-color 0.15s;
  background: var(--bg-card);
}

.tw-post-card-link:hover {
  border-color: var(--accent);
  color: inherit;
}

.tw-post-card-link--featured {
  background-color: var(--bg-card);
  background-image:
      linear-gradient(var(--featured-img-overlay), var(--featured-img-overlay)),
      var(--featured-img);
  background-size: cover;
  background-position: center;
}

/* Secondary captions sit on the veiled photo where --text-muted washes out
     in the light theme, so featured tiles use the full primary text color. */

.tw-post-card-link--featured .tw-text-subtitle-clamp-2,
  .tw-post-card-link--featured .tw-text-meta {
  color: var(--text-primary);
}

.tw-cat-group-icon {
  color: var(--accent);
  opacity: 0.8;
}

.tw-post-featured-thumb {
  width: 50%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: top center;
     object-position: top center;
  border-radius: var(--radius-card);
}

.tw-text-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.tw-text-title-clamp,
  .tw-text-title-clamp-2 {
  font-size: 0.875rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-text-title-clamp {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.tw-text-title-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.tw-text-subtitle-clamp,
  .tw-text-subtitle-clamp-2 {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tw-text-subtitle-clamp {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.tw-text-subtitle-clamp-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 480px) {
  .tw-view-toggle-btn {
    padding: 0.28rem 0.45rem;
    gap: 0;
  }

  .tw-view-toggle-btn .tw-view-label,
    .tw-sort-btn .tw-sort-btn-label,
    .tw-btn-cta .tw-btn-cta-label {
    display: none;
  }

  .tw-view-toggle-btn.tw-active .tw-view-label,
    .tw-sort-btn.tw-active .tw-sort-btn-label {
    display: inline;
    margin-left: 0.35rem;
  }
}

/* ── 4.2 Obywatele — citizens list/grid ──────────────────── */

.tw-citizens-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tw-citizens-search-input {
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text-primary);
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s;
}

.tw-citizens-search-input:focus {
  border-color: var(--accent);
}

.tw-citizens-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.3rem 0.8rem;
  border-radius: 0.5rem;
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

.tw-citizens-filter-btn:hover,
  .tw-citizens-filter-btn.tw-active {
  color: var(--accent);
  border-color: var(--accent);
}

.tw-filter-label {
  font-size: 0.78rem;
}

.tw-citizens-table-wrap {
  overflow-x: auto;
}

.tw-citizens-table {
  width: 100%;
  table-layout: auto;
  font-size: 0.875rem;
  color: var(--text-primary);
  border-collapse: collapse;
  margin-bottom: 0;
}

.tw-citizens-table th,
  .tw-citizens-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  vertical-align: middle;
}

.tw-citizens-table tbody tr:nth-child(even) td {
  background: var(--table-stripe-bg);
}

.tw-citizens-table tbody tr:hover td,
  .tw-user-row:hover td {
  background: var(--accent-muted);
}

.tw-table-sm th,
  .tw-table-sm td {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.tw-table-hover tbody tr:hover td {
  background: var(--accent-muted);
}

.tw-user-row {
  cursor: pointer;
}

.tw-citizen-card-top {
  position: relative;
  display: inline-flex;
}

.tw-citizens-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.tw-view-grid .tw-citizens-grid {
  display: grid;
}

.tw-view-grid #citizens-list-view {
  display: none;
}

.tw-citizen-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem 0.85rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.tw-citizen-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px var(--accent-glow);
  background: var(--accent-muted);
}

.tw-citizen-card-top .tw-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg-card);
  margin: 0;
}

.tw-restart-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tw-width-30 {
  width: 30%;
  min-width: 180px;
}

.tw-min-w-20 {
  min-width: 5rem;
}

.tw-min-w-12 {
  min-width: 3rem;
}

.tw-max-w-640 {
  max-width: 640px;
}

.tw-avatar-upload-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}

.tw-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: 50%;
}

.tw-avatar-overlay-icon {
  font-size: 1.5rem;
}

.tw-avatar-upload-wrap:hover .tw-avatar-overlay {
  opacity: 1;
}

.tw-profile-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tw-email-frequency-cell {
  min-width: 140px;
}

.tw-profile-email {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tw-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.tw-profile-row:last-child {
  border-bottom: none;
}

.tw-profile-key {
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tw-profile-val {
  font-size: 0.9rem;
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

.tw-profile-val--empty {
  color: var(--text-muted);
  font-style: italic;
}

.tw-historia-badge {
  display: inline-block;
  background: var(--history-badge-bg);
  color: var(--history-badge-color);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
}

.tw-historia-current-badge {
  display: inline-block;
  background: var(--badge-approved-color);
  color: var(--text-inverse);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
}

.tw-historia-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.tw-diff-block {
  font-family: monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  overflow-x: auto;
}

.tw-diff-block ins {
  background: var(--diff-ins-bg);
  color: var(--diff-ins-color);
  text-decoration: none;
  padding: 0 0.15rem;
}

.tw-diff-block del {
  background: var(--diff-del-bg);
  color: var(--diff-del-color);
  text-decoration: none;
  padding: 0 0.15rem;
}

.tw-border-approved {
  border-color: var(--badge-approved-color) !important;
}

.tw-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-muted);
  gap: .55rem;
  text-align: center;
}

.tw-empty-state--sm {
  padding: 1rem;
  gap: .35rem;
}

.tw-empty-state--sm .tw-empty-state-icon {
  font-size: 1.25rem;
}

.tw-empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tw-candidate-vote-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.85rem;
}

.tw-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 0.4rem;
}

.tw-status-dot--online {
  background: var(--status-online-color);
  box-shadow: 0 0 5px var(--status-online-glow);
}

.tw-status-dot--active {
  background: var(--accent);
}

.tw-status-dot--dormant {
  background: var(--status-dormant-color);
}

.tw-status-dot--inactive {
  background: var(--text-muted);
  opacity: 0.5;
}

@media (max-width: 767.98px) {
  .tw-citizens-table th.tw-hidden-mobile,
    .tw-citizens-table td.tw-hidden-mobile {
    display: none;
  }
}

@media (max-width: 992px) {
  .tw-citizens-table th.tw-hidden-tablet,
    .tw-citizens-table td.tw-hidden-tablet {
    display: none;
  }
}

@media (max-width: 1200px) {
  .tw-citizens-table th.tw-hidden-desktop,
    .tw-citizens-table td.tw-hidden-desktop {
    display: none;
  }
}

@media (max-width: 480px) {
  .tw-citizens-toolbar .tw-filter-label {
    display: none;
  }
}

.tw-bg-primary {
  background-color: var(--color-primary) !important;
}

.tw-bg-body-tertiary {
  background-color: var(--bg-tertiary) !important;
}

.tw-text-md {
  font-size: 0.875rem;
}

/* ── Display utilities (5.4.2) ───────────────────────────── */

.tw-d-none {
  display: none !important;
}

.tw-d-block {
  display: block !important;
}

.tw-d-inline {
  display: inline !important;
}

.tw-d-inline-block {
  display: inline-block !important;
}

.tw-d-flex {
  display: flex !important;
}

.tw-d-inline-flex {
  display: inline-flex !important;
}

.tw-d-grid {
  display: grid !important;
}

.tw-d-table {
  display: table !important;
}

.tw-d-table-cell {
  display: table-cell !important;
}

.tw-d-table-row {
  display: table-row !important;
}

/* ── Disabled state (5.4.2) ──────────────────────────────── */

.tw-disabled {
  pointer-events: none !important;
  opacity: 0.3 !important;
}

/* ── Modals (5.4.3) ──────────────────────────────────────── */

body.tw-modal-open {
  overflow: hidden;
}

.tw-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.tw-modal.tw-show {
  display: block;
}

.tw-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background: var(--modal-backdrop-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.tw-modal-backdrop.tw-show {
  opacity: 0.5;
  visibility: visible;
}

.tw-modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

@media (min-width: 576px) {
  .tw-modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
}

.tw-modal.tw-fade .tw-modal-dialog {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
  transform: translate(0, -50px);
}

.tw-modal.tw-show .tw-modal-dialog {
  opacity: 1;
  transform: none;
}

.tw-modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-overlay);
}

.tw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.tw-modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.tw-modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 0.75rem;
}

.tw-modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid var(--border);
}

.tw-modal-dialog-scrollable .tw-modal-content {
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

.tw-modal-dialog-scrollable .tw-modal-body {
  overflow-y: auto;
}

.tw-btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}

.tw-btn-close:hover,
  .tw-btn-close:focus {
  color: var(--text-primary);
}

/* ── Dropdowns (5.4.3) ───────────────────────────────────── */

.tw-dropdown {
  position: relative;
}

.tw-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  display: none;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
  list-style: none;
}

.tw-dropdown-menu.tw-show {
  display: block;
}

.tw-dropdown-menu-end {
  right: 0;
  left: auto;
}

.tw-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.35rem 1rem;
  color: var(--text-primary);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: start;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.tw-dropdown-item:hover,
  .tw-dropdown-item:focus {
  background: var(--accent-muted);
  color: var(--accent);
}

.tw-dropdown-item.tw-active {
  background: var(--accent-muted);
  color: var(--accent);
}

.tw-dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  border-top: 1px solid var(--border);
  opacity: 0.6;
}

/* ── Collapse (5.4.3) ────────────────────────────────────── */

.tw-collapse {
  display: none;
}

.tw-collapse.tw-show {
  display: block;
}

tr.tw-collapse.tw-show {
  display: table-row;
}

.tw-accordion-item {
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.tw-accordion-item + .tw-accordion-item {
  margin-top: 0.5rem;
}

.tw-accordion-header {
  margin: 0;
}

.tw-accordion-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--accent-muted);
  color: var(--accent);
  font-weight: 600;
  text-align: left;
}

.tw-accordion-button.tw-collapsed {
  background: var(--bg-card);
  color: var(--text-primary);
}

.tw-accordion-button:hover,
  .tw-accordion-button:focus-visible {
  background: var(--accent-muted);
  color: var(--accent);
}

.tw-accordion-body {
  padding: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Tooltip / Popover (5.4.5) ───────────────────────────── */

.tw-tooltip,
  .tw-popover {
  position: absolute;
  z-index: 1070;
  display: block;
  max-width: 280px;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.tw-tooltip.tw-show,
  .tw-popover.tw-show {
  opacity: 1;
  visibility: visible;
}

.tw-tooltip-inner,
  .tw-popover {
  background: var(--surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tw-tooltip-inner {
  padding: 0.375rem 0.5rem;
  font-size: 0.78rem;
  max-width: 280px;
}

.tw-tooltip-arrow,
  .tw-popover-arrow {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  transform: rotate(45deg);
}

.tw-tooltip[data-tw-placement="top"] .tw-tooltip-arrow,
  .tw-popover[data-tw-placement="top"] .tw-popover-arrow {
  bottom: -0.35rem;
  left: 50%;
  margin-left: -0.3rem;
  border-top-color: transparent;
  border-left-color: transparent;
}

.tw-tooltip[data-tw-placement="bottom"] .tw-tooltip-arrow,
  .tw-popover[data-tw-placement="bottom"] .tw-popover-arrow {
  top: -0.35rem;
  left: 50%;
  margin-left: -0.3rem;
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.tw-tooltip[data-tw-placement="left"] .tw-tooltip-arrow,
  .tw-popover[data-tw-placement="left"] .tw-popover-arrow {
  right: -0.35rem;
  top: 50%;
  margin-top: -0.3rem;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.tw-tooltip[data-tw-placement="right"] .tw-tooltip-arrow,
  .tw-popover[data-tw-placement="right"] .tw-popover-arrow {
  left: -0.35rem;
  top: 50%;
  margin-top: -0.3rem;
  border-right-color: transparent;
  border-top-color: transparent;
}

.tw-popover {
  pointer-events: auto;
  font-size: 0.85rem;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}

.tw-popover-header {
  padding: 0.5rem 0.75rem;
  margin: 0;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  border-radius: 0.375rem 0.375rem 0 0;
  background: var(--surface);
}

.tw-popover-body {
  padding: 0.5rem 0.75rem;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Tabs (5.4.5) ────────────────────────────────────────── */

.tw-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  list-style: none;
}

.tw-nav-tabs .tw-nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-btn) var(--radius-btn) 0 0;
  color: var(--text-muted);
  text-decoration: none;
}

.tw-nav-tabs .tw-nav-link:hover,
  .tw-nav-tabs .tw-nav-link:focus-visible {
  background: var(--accent-muted);
  color: var(--accent);
}

.tw-nav-tabs .tw-nav-link.tw-active {
  margin-bottom: -1px;
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--accent);
}

.tw-tab-content > .tw-tab-pane {
  display: none;
}

.tw-tab-content > .tw-tab-pane.tw-show,
  .tw-tab-content > .tw-tab-pane.tw-active {
  display: block;
}

/* ============================================================ */

/* CHAT TOKENS                                                  */

/* ============================================================ */

:root {
  --navbar-height: 56px;
  --notification-banner-height: 50px;
}

/* ============================================================ */

/* LAYOUT                                                       */

/* ============================================================ */

/* Jawny hook strony — .tw-chat-page ustawia szablon chat.html na <body>,
   bez :has() i bez skryptowego flashu layoutu. */

body.tw-chat-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.tw-chat-page .tw-layout-wrapper,
body.tw-chat-page .tw-main-area {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.tw-chat-page .tw-main-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tw-chat-rooms {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: 0;
  position: relative;
}

/* Delikatny wskaźnik stanu połączenia — nie zasłania treści, nie blokuje
   interakcji; pokazywany klasą (tw-d-none) z chat.js. */

.tw-chat-conn-status {
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  pointer-events: none;
}

.tw-chat-rooms>.tw-room-list-col,
.tw-chat-rooms>.tw-chat-root-messages {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: clip;
}

.tw-room-list-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: clip;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
  padding: 0;
}

.tw-chat-root-messages {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

/* ============================================================ */

/* CHAT ROOM — MESSAGES AREA                                   */

/* ============================================================ */

#room {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  min-height: 0;
  min-width: 0;
}

#room .tw-chat-messages {
  flex: 1 1 0;
  height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.tw-chat-messages .tw-empty-chat-message {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin: 2.5rem 0;
  text-align: center;
}

.tw-chat-messages .tw-date-banner {
  text-align: center;
  margin-top: .1rem;
  margin-bottom: .3rem;
}

.tw-chat-messages .tw-chat-message {
  display: flex;
  margin-right: 2%;
  margin-bottom: .6rem;
  margin-left: .3rem;
}

.tw-chat-messages .tw-chat-message.tw-chat-message--own {
  justify-content: flex-end;
  margin-left: 2%;
  margin-right: .3rem;
}

#room .tw-chat-messages .tw-chat-message {
  margin-right: 6%;
}

#room .tw-chat-messages .tw-chat-message.tw-chat-message--own {
  margin-left: 6%;
}

.tw-chat-messages .tw-chat-message.tw-msg-highlight .tw-chat-message-content {
  box-shadow: 0 0 10px 2px var(--accent);
  transition: box-shadow 5s ease;
}

.tw-chat-messages .tw-chat-message.tw-chat-message--pending {
  opacity: 0.55;
}

.tw-chat-messages .tw-chat-message.tw-chat-message--failed .tw-chat-message-content {
  outline: 1px solid var(--badge-rejected-color);
}

/* ============================================================ */

/* MESSAGE CONTENT                                              */

/* ============================================================ */

.tw-chat-message .tw-chat-message-content {
  min-width: 100%;
  padding: .4rem .6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  position: relative;
  --expandable-bg: var(--bg-card);
}

.tw-chat-message.tw-chat-message--own .tw-chat-message-content {
  background: var(--accent-muted);
  --expandable-bg: var(--accent-muted);
  border-color: var(--accent-glow);
}

.tw-chat-message .tw-chat-message-content .tw-chat-message-header {
  padding-left: .1rem;
  margin-bottom: .1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tw-chat-message-header-left,
.tw-chat-message-header-right {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.tw-chat-message-header-right {
  gap: .25rem;
}

.tw-username {
  color: var(--text-muted);
  font-weight: bold;
}

.tw-username-link {
  text-decoration: none;
  color: var(--text-muted);
}

.tw-username-link:hover,
.tw-username-link:focus {
  color: var(--accent-hover, var(--accent));
  text-decoration: underline;
}

.tw-chat-message-header-left .tw-avatar {
  margin-right: .35rem;
}

.tw-chat-message .tw-chat-message-content .tw-chat-message-header .tw-message-timestamp {
  display: inline-flex;
  align-items: center;
  height: 1.875rem;
  line-height: 1.875rem;
  font-size: smaller;
  color: var(--text-muted);
}

/* Chat small icon buttons (history, edit, reply, vote, anonymous) */

.tw-message-btn,
.tw-anonymous-toggle {
  background: var(--color-surface-offset);
  border: 1px solid var(--border);
  border-radius: .25rem;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.tw-message-btn {
  padding: .25rem .5rem;
  text-decoration: none;
  gap: .25rem;
  height: 1.875rem;
  min-width: 1.875rem;
}

.tw-message-btn i {
  font-size: .85rem;
}

.tw-message-btn:hover {
  background: var(--color-surface-dynamic);
  opacity: .9;
}

.tw-message-btn.tw-msg-vote {
  padding: .15rem .45rem;
  height: auto;
  min-width: unset;
  border-radius: 9999px;
  font-size: .85rem;
}

.tw-msg-vote.tw-active {
  background: var(--accent-muted);
  border-color: var(--accent);
}

.tw-chat-message .tw-chat-message-content .tw-msg-body {
  margin-bottom: .2rem;
  display: flex;
  flex-direction: column;
}

.tw-chat-message .tw-chat-message-content .tw-msg-body .tw-attachment-image-container {
  cursor: pointer;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

.tw-chat-message .tw-chat-message-content .tw-msg-body .tw-attachment-image-container .tw-attached-image {
  max-height: 15dvh;
  height: auto;
  max-width: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.tw-chat-message .tw-chat-message-content .tw-msg-body .tw-msg-text {
  overflow-wrap: break-word;
}

/* ============================================================ */

/* FLOAT RETURN BUTTON                              */

/* ============================================================ */

#msg-return-btn {
  position: absolute;
  bottom: .3rem;
  right: .3rem;
  background: var(--accent);
  border: none;
  color: var(--text-inverse);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, background .15s;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

#msg-return-btn.tw-visible {
  opacity: 1;
  pointer-events: auto;
}

#msg-return-btn:hover {
  background: var(--accent-hover, var(--accent));
}

/* ============================================================ */

/* IMAGE PREVIEW (before sending)                              */

/* ============================================================ */

#room .tw-image-preview-container {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

#room .tw-image-preview-container .tw-preview-images .tw-image-preview {
  width: 50px;
  height: 50px;
  margin: .3rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.tw-image-preview-wrapper {
  position: relative;
  display: inline-block;
}

.tw-ec-image-preview-wrapper .tw-image-preview {
  max-width: 100px;
  max-height: 100px;
  margin: 5px;
}

.tw-image-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0 4px;
  font-size: 12px;
}

/* ============================================================ */

/* CHAT CONTROLS                                               */

/* ============================================================ */

#room .tw-chat-controls {
  display: block;
  flex-shrink: 0;
  padding: 0.5rem;
  background-color: var(--bg-card);
  border-top: 1px solid var(--border);
}

#room .tw-chat-controls>div {
  display: flex;
  gap: .1rem;
}

/* ============================================================ */

/* COMPOSE BOX — unified input container                        */

/* ============================================================ */

.tw-compose-box {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: .45rem;
  background-color: var(--input-bg);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
  overflow: hidden;
  transition: border-color .15s;
}

.tw-compose-box:focus-within {
  border-color: var(--accent-muted);
}

.tw-compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  padding: .3rem .4rem;
  border-top: 1px solid var(--border);
  background-color: var(--bg-card);
}

.tw-compose-bar-left,
.tw-chat-cat-header {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.tw-compose-bar-right {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.tw-compose-separator {
  width: 1px;
  height: 1.2rem;
  background-color: var(--border);
  margin: 0 .15rem;
}

.tw-compose-send {
  padding: .3rem .6rem;
  font-size: 1rem;
  line-height: 1;
}

#room .tw-chat-controls input[type="file"] {
  display: none;
}

#room .tw-chat-controls input[type="file"]:disabled+label,
#room .tw-chat-controls input[type="file"]:disabled+label:hover {
  background-color: var(--text-muted);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.tw-compose-box.tw-compose-box--error {
  border-color: var(--badge-rejected-color);
}

/* ============================================================ */

/* ANONYMOUS TOGGLE                                */

/* ============================================================ */

.tw-anonymous-toggle {
  color: var(--text-muted);
}

.tw-anonymous-toggle:hover,
.tw-anonymous-toggle.tw-active {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* ============================================================ */

/* BREADCRUMB                                       */

/* ============================================================ */

.tw-chat-breadcrumb {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: .35rem .75rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}

.tw-bc-seg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tw-bc-seg--active {
  color: var(--text-primary);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}

.tw-bc-back-icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}

/* ============================================================ */

/* Chat sort toolbar — sortowanie + filtr popularne             */

/* ============================================================ */

.tw-chat-breadcrumb-row {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: .25rem .75rem;
  flex-shrink: 0;
  min-width: 0;
}

.tw-chat-breadcrumb-row .tw-chat-breadcrumb {
  position: static;
  border-bottom: none;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
}

.tw-chat-sort-toolbar {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}

.tw-chat-sort-toolbar .tw-sort-btn .tw-sort-arrow {
  font-size: .65rem;
  opacity: .8;
}

/* ============================================================ */

/* MESSAGE META ROW (reactions + read-by)           */

/* ============================================================ */

.tw-msg-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem;
  margin-top: .4rem;
  padding-top: .3rem;
  border-top: 1px solid var(--border);
  position: relative;
}

.tw-msg-vote[data-event-name="upvote"] {
  margin-left: auto;
}

/* Separator between voting and reactions */

.tw-msg-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--border);
  align-self: center;
  margin: 0 .2rem;
  flex-shrink: 0;
}

/* Read by dropdown */

.tw-read-by-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  z-index: 100;
  min-width: 200px;
  max-width: 300px;
  margin-bottom: .25rem;
}

.tw-read-by-list {
  padding: .5rem;
  max-height: 200px;
  overflow-y: auto;
}

.tw-read-by-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .4rem;
  border-radius: .25rem;
  transition: background .15s;
}

.tw-read-by-item:hover {
  background: var(--color-surface-offset);
}

.tw-read-by-empty {
  color: var(--text-muted);
  font-style: italic;
}

.tw-read-by-username {
  font-size: .85rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================ */

/* ROOM LIST — CONTROLS                                        */

/* ============================================================ */

.tw-room-list-controls {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  padding: .25rem .75rem;
}

.tw-room-list-controls-inner {
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: flex-end;
}

.tw-room-list-controls-inner .tw-sort-btn {
  padding: .28rem .45rem;
  flex-shrink: 0;
}

.tw-room-search-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 3rem;
}

.tw-room-search-input {
  width: 100%;
  padding: .28rem .65rem .28rem 1.8rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: .4rem;
  color: var(--text-primary);
  font-size: .8rem;
  line-height: 1.2;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.tw-room-search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-muted);
}

.tw-room-search-input::-moz-placeholder {
  color: var(--text-muted);
}

.tw-room-search-input::placeholder {
  color: var(--text-muted);
}

.tw-room-search-icon {
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .75rem;
  pointer-events: none;
}

.tw-chat-messages::-webkit-scrollbar,
.tw-room-list::-webkit-scrollbar {
  width: 8px;
}

.tw-chat-messages::-webkit-scrollbar-track,
.tw-room-list::-webkit-scrollbar-track {
  background: var(--bg-base);
}

.tw-chat-messages::-webkit-scrollbar-thumb,
.tw-room-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-xs);
}

#room-list .tw-room-list-groups {
  display: block;
  width: 100%;
  max-width: 100%;
}

.tw-room-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: clip;
  width: 100%;
}

#room-list-flat {
  padding: .25rem 0;
}

#sort-activity-btn .tw-sort-dir-icon {
  display: none;
  font-size: .65em;
  margin-left: 1px;
  vertical-align: middle;
}

#sort-activity-btn.tw-active .tw-sort-dir-icon {
  display: inline;
}

/* ============================================================ */

/* TREE NAVIGATION SIDEBAR                         */

/* ============================================================ */

/* L0 — Category node */

.tw-chat-category {
  margin-bottom: .1rem;
}

/* Delikatny akcent kategorii — kolory semantyczne zgodne z core/colors.py
   (CATEGORY_COLORS): tasks→warning (task), votes→danger (decision),
   documents→primary (post), public→info (chat), private→secondary (citizen).
   Zmienna ustawiana też na .tw-room-link[data-room-kind], bo sortowanie po
   aktywności przenosi linki do #room-list-flat poza kontener kategorii. */

.tw-chat-category[data-category="public"],
.tw-room-link[data-room-kind="public"] {
  --chat-cat-accent: var(--badge-info-color);
}

.tw-chat-category[data-category="tasks"],
.tw-room-link[data-room-kind="task"] {
  --chat-cat-accent: var(--badge-warning-color);
}

.tw-chat-category[data-category="votes"],
.tw-room-link[data-room-kind="vote"] {
  --chat-cat-accent: var(--badge-danger-color);
}

.tw-chat-category[data-category="documents"],
.tw-room-link[data-room-kind="document"] {
  --chat-cat-accent: var(--badge-primary-color);
}

.tw-chat-category[data-category="private"],
.tw-room-link[data-room-kind="private"] {
  --chat-cat-accent: var(--badge-secondary-color);
}

.tw-chat-cat-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .5rem;
  background: none;
  border: none;
  color: var(--chat-cat-accent, var(--text-muted));
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  text-align: left;
  transition: color .15s;
}

.tw-chat-cat-btn:hover {
  color: var(--text-primary);
}

.tw-chat-cat-arrow {
  font-size: .7rem;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.tw-chat-cat-btn[aria-expanded="true"] .tw-chat-cat-arrow {
  transform: rotate(0deg);
}

.tw-chat-cat-btn[aria-expanded="false"] .tw-chat-cat-arrow {
  transform: rotate(-90deg);
}

/* Collapse/expand container — NO display:none */

.tw-chat-cat-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tw-chat-cat-content.tw-open {
  max-height: 2000px;
}

/* Status indicators (right side of any node) */

.tw-nav-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tw-nav-status--unread {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-online-color);
  box-shadow: 0 0 4px var(--status-online-color);
}

.tw-nav-status--read {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--text-muted);
  opacity: .7;
}

.tw-nav-status--locked {
  color: var(--text-muted);
  font-size: .7rem;
}

/* ============================================================ */

/* EXISTING ROOM LINK (flat lists: public rooms, private)      */

/* ============================================================ */

.tw-room-link {
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .5rem;
  font-size: 0.9rem;
  margin: .2rem;
  width: calc(100% - 4px);
  max-width: calc(100% - 4px);
  box-sizing: border-box;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  border-radius: .25rem;
  border-left-width: 3px;
  border-left-color: color-mix(in srgb, var(--chat-cat-accent, transparent) 50%, transparent);
}

.tw-room-link .tw-avatar:not(.tw-avatar-fallback) {
  background: var(--color-surface-offset);
  color: var(--text-muted);
}

.tw-room-link-status,
.tw-room-link-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tw-room-link-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.tw-room-link-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  min-width: 0;
}

.tw-room-link-date {
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.tw-room-link-preview {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tw-room-link-sender {
  font-weight: 500;
  margin-right: .15rem;
}

.tw-room-link-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.tw-room-link-muted-icon {
  color: var(--text-muted);
  font-size: .75rem;
}

.tw-room-link.tw-room-link--online {
  color: var(--status-warning-color);
}

.tw-room-link.tw-room-link--joined {
  background: var(--accent-muted);
  border-left-color: var(--accent);
  font-weight: 500;
  color: var(--text-primary);
}

.tw-room-link.tw-room-link--not-seen {
  border-color: var(--accent);
  color: var(--status-online-color);
}

/* Unread filter button */

#unread-filter-btn.tw-active {
  background-color: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
}

#unread-filter-btn.tw-active:hover,
.tw-chat-no-unread-inline-btn:hover {
  background-color: var(--accent-hover);
  color: var(--bg-base);
  border-color: var(--accent-hover);
}

.tw-room-link.tw-room-link--filtered-out,
.tw-room-link.tw-room-link--search-filtered-out {
  display: none !important;
}

.tw-room-link.tw-room-link--tapping {
  background-color: var(--accent-muted);
  border-color: var(--accent);
  transform: scale(0.98);
}

.tw-room-link.tw-room-link--connecting .tw-avatar {
  position: relative;
}

.tw-room-link.tw-room-link--connecting .tw-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  animation: room-link-connecting-spin 0.7s linear infinite;
}

@keyframes room-link-connecting-spin {
  to {
    transform: rotate(360deg);
  }
}

.tw-room-link .tw-room-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tw-room-link.tw-room-link--not-seen .tw-room-name {
  font-weight: 600;
  color: var(--text-primary);
}

.tw-room-link-chevron {
  background: transparent;
  border: none;
  padding: .25rem .35rem;
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: .25rem;
  transition: opacity .15s, color .15s, background-color .15s;
}

.tw-room-link-chevron:hover {
  color: var(--text-primary);
  background: var(--color-surface-offset);
}

@media (hover: hover) {
  .tw-room-link-chevron {
    opacity: 0;
  }

  .tw-room-link:hover .tw-room-link-chevron,
    .tw-room-link-chevron[aria-expanded="true"] {
    opacity: 1;
  }
}

.tw-copy-feedback {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  font-size: 0.65rem;
  z-index: 2;
  transition: opacity .2s;
}

.tw-copy-feedback--out {
  opacity: 0;
}

/* Editing state for message inputs (input has border:none — outline shows the affordance) */

.tw-editing {
  outline: 1px solid var(--status-warning-color);
  outline-offset: -1px;
}

/* Dragging state for quick-link reorder */

.tw-quick-link-item.tw-dragging {
  opacity: .5;
}

/* Offscreen helper element (e.g. clipboard fallback textarea) */

.tw-offscreen {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Archive sections */

.tw-archive-section {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.85;
}

.tw-archive-section.tw-visible {
  max-height: 2000px;
}

.tw-archive-section .tw-room-link {
  font-size: 0.85rem;
  opacity: 0.7;
}

.tw-archive-section .tw-room-link:hover {
  opacity: 1;
}

/* Hidden active sections shown via JS */

#content-pub-rooms-active,
#content-tasks-active,
#content-votes-active,
#content-prv-active {
  display: none;
}

/* ============================================================ */

/* DESKTOP MEDIA QUERY                                         */

/* ============================================================ */

@media (min-width: 768px) {
  #room .tw-chat-messages .tw-chat-message,
    #room .tw-chat-messages .tw-chat-message.tw-chat-message--own {
    max-width: 80%;
  }

  .tw-chat-message .tw-chat-message-content {
    max-width: 100%;
  }

  #room .tw-chat-messages {
    padding-bottom: 0;
  }

  /* Info modal mobile adjustments */

  .tw-modal-body .tw-alert {
    margin-bottom: 1rem;
  }

  /* Desktop: room list is always visible; breadcrumb is redundant. */

  .tw-chat-breadcrumb-row {
    justify-content: flex-end;
  }

  .tw-chat-breadcrumb-row .tw-chat-breadcrumb {
    display: none;
  }
}

/* ============================================================ */

/* MOBILE MEDIA QUERY                                          */

/* ============================================================ */

@media (max-width: 767.98px) {
  .tw-modal-dialog {
    margin: 0.5rem;
  }

  .tw-modal-body {
    padding: 1rem;
  }

  .tw-modal-body .tw-alert {
    margin-bottom: 1rem;
    padding: 0.75rem;
  }

  .tw-modal-body h6 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .tw-modal-body p {
    font-size: 0.8rem;
  }

  /* Mobile: room-list-col is an 80% drawer from the right, over the
       messages/placeholder area. position:fixed anchors it to the viewport
       exactly like .tw-chat-root-messages — .tw-room-list (flex:1 1 auto)
       otherwise collapses to 0px whenever the body.tw-chat-page/100dvh
       ancestor chain can't resolve a definite height. */

  .tw-room-list-col {
    position: fixed;
    top: var(--topbar-height, 60px);
    bottom: env(safe-area-inset-bottom, 0px);
    left: 20%;
    right: 0;
    width: 80% !important;
    max-width: 80% !important;
    flex: 0 0 80% !important;
    display: flex !important;
    background: var(--bg-base);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-overlay);
  }

  /* Mobile: hide the list when the room panel is shown (room-list-showing
       is toggled only on mobile by renderChatView). */

  .tw-chat-rooms:not(.tw-room-list-showing) .tw-room-list-col {
    display: none !important;
  }

  /* Mobile: toolbar stays pinned at top even if list content overflows */

  .tw-room-list-controls {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Mobile: hide sort button text labels to keep the toolbar compact. */

  .tw-chat-sort-toolbar .tw-sort-btn span {
    display: none;
  }

  .tw-room-list .tw-room-list-groups {
    width: 100% !important;
    max-width: 100% !important;
  }

  #room .tw-chat-controls {
    background-color: var(--bg-card);
    padding: 0.2rem 0.5rem;
    border-top: 1px solid var(--border);
  }

  #room .tw-chat-messages {
    flex: 1 1 0;
    height: 0;
  }

  #room .tw-chat-messages .tw-chat-message {
    margin-right: 6%;
    margin-left: .3rem;
    max-width: 90%;
  }

  #room .tw-chat-messages .tw-chat-message.tw-chat-message--own {
    margin-left: 6%;
    margin-right: .6rem;
    max-width: 90%;
  }

  /* Mobile: messages/placeholder area always takes full screen below topbar */

  .tw-chat-rooms .tw-chat-root-messages {
    position: fixed;
    top: var(--topbar-height, 60px);
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Mobile: safe area for home indicator (iOS notch) */

  #room .tw-chat-controls {
    padding-bottom: max(0.2rem, env(safe-area-inset-bottom));
  }

  /* Mobile: wrap compose bar if too narrow — send button always visible */

  .tw-compose-bar {
    flex-wrap: wrap;
  }

  .tw-compose-bar-right {
    margin-left: auto;
  }

  /* Mobile: category headers aligned to the right (thumb reach) */

  .tw-chat-cat-btn {
    justify-content: flex-end;
  }

  .tw-chat-cat-arrow {
    order: 1;
  }

  /* Mobile: breadcrumb becomes the room-list toggle, ordered right-to-left:
       [room name ...] [back icon] [category]. Sort toolbar stays on the left. */

  .tw-chat-breadcrumb-row {
    justify-content: flex-start;
  }

  .tw-chat-breadcrumb-row .tw-chat-sort-toolbar {
    order: 0;
  }

  .tw-chat-breadcrumb-row .tw-chat-breadcrumb {
    order: 1;
    flex-direction: row-reverse;
    align-items: center;
    cursor: pointer;
  }

  .tw-chat-breadcrumb:hover {
    color: var(--accent);
  }

  .tw-chat-breadcrumb .tw-bc-seg:not(.tw-bc-seg--active),
    .tw-chat-breadcrumb .tw-bc-sep {
    display: inline;
  }

  .tw-chat-breadcrumb .tw-bc-seg--active {
    flex: 0 1 auto;
    color: var(--text-muted);
    font-weight: 400;
  }

  .tw-chat-breadcrumb .tw-bc-seg:not(.tw-bc-seg--active) {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-weight: 500;
  }

  .tw-chat-breadcrumb .tw-bc-back-icon {
    color: var(--text-primary);
  }

  #toggle-room-list-btn {
    display: none !important;
  }
}

/* ============================================================ */

/* IMAGE VIEWER (Lightbox)                                     */

/* ============================================================ */

.tw-image-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: imageViewerFadeIn 0.2s ease-out;
}

@keyframes imageViewerFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.tw-image-viewer-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  color: var(--text-inverse);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
  padding: 5px 15px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.tw-image-viewer-close:hover {
  opacity: 1;
}

.tw-image-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  color: var(--text-inverse);
  background: rgba(255, 255, 255, .1);
  border: none;
  cursor: pointer;
  z-index: 10000;
  padding: 10px 20px;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  border-radius: var(--radius-xs);
}

.tw-image-viewer-nav:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .2);
}

.tw-image-viewer-prev {
  left: 15px;
}

.tw-image-viewer-next {
  right: 15px;
}

.tw-image-viewer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  max-height: 90%;
  cursor: default;
}

.tw-image-viewer-img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity 0.2s ease;
  animation: imageViewerImgFadeIn 0.3s ease-out;
}

@keyframes imageViewerImgFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tw-image-viewer-counter {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-inverse);
  background: rgba(0, 0, 0, .6);
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  z-index: 10000;
}

@media (max-width: 767.98px) {
  .tw-image-viewer-nav {
    font-size: 2rem;
    padding: 8px 15px;
  }

  .tw-image-viewer-prev {
    left: 10px;
  }

  .tw-image-viewer-next {
    right: 10px;
  }

  .tw-image-viewer-close {
    top: 5px;
    right: 10px;
    font-size: 1.8rem;
  }
}

/* ============================================================ */

/* EMPTY STATES — placeholder "Wybierz pokoj" + brak nieprzeczytanych */

/* ============================================================ */

.tw-chat-no-room-placeholder,
.tw-chat-no-unread-empty-state,
.tw-chat-no-search-results,
.tw-chat-join-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  padding: 2rem 1.5rem;
  color: var(--text-muted);
  gap: 0.75rem;
}

.tw-chat-no-room-icon,
.tw-chat-no-unread-icon {
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0.6;
}

.tw-chat-no-room-text,
.tw-chat-no-unread-title {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.tw-chat-no-unread-hint {
  margin: 0;
  font-size: .82rem;
  color: var(--text-muted);
  max-width: 28ch;
  line-height: 1.4;
}

/* Klikalny przycisk w podpowiedzi — te same KOLORY co aktywny #unread-filter-btn
   (mirrorujemy regule #unread-filter-btn.tw-active wyzej: primary tlo + bg-base tekst,
   hover na accent-hover), zeby user od razu skojarzyl, ktory przycisk ma kliknac.
   UWAGA: geometrie (padding/border-radius/font-size) ustawiamy tu lokalnie — pasek
   dziedziczy ja z reguly bazowej .tw-sort-btn, wiec nie jest 1:1 i moze sie rozjechac.
   Klik = klik tego przycisku w pasku (showUnreadEmptyState w chat.js). */

.tw-chat-no-unread-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .28rem .45rem;
  margin: 0 0.2em;
  border-radius: .4rem;
  border: 1px solid var(--accent);
  background-color: var(--accent);
  color: var(--bg-base);
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.tw-chat-no-unread-inline-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Gdy pokazany jest empty state "brak nieprzeczytanych", chowamy drzewo kategorii
   i ewentualną płaską listę sortowania. Nie ruszamy inline style
   .tw-room-list-groups — sort wg czasu tez ukrywa ten element przez display:none,
   a manipulacja inline style'em z dwoch miejsc daje "widmo" drzewa po zdjeciu
   filtra. */

#room-list:has(.tw-chat-no-unread-empty-state) .tw-room-list-groups,
#room-list:has(.tw-chat-no-unread-empty-state) #room-list-flat,
#room-list:has(.tw-chat-no-search-results) .tw-room-list-groups,
#room-list:has(.tw-chat-no-search-results) #room-list-flat {
  display: none;
}

@media (max-width: 767.98px) {
  .tw-chat-no-room-placeholder,
    .tw-chat-no-unread-empty-state,
    .tw-chat-no-search-results,
    .tw-chat-join-error {
    padding: 1.5rem 1rem;
  }
}

/* ── Edit history table ─────────────────────────────────────── */

.tw-chat-history-table {
  border-bottom: 1px solid var(--border);
}

.tw-chat-history-table td {
  vertical-align: top;
}

.tw-chat-history-index {
  width: 0;
}

.tw-chat-history-meta {
  text-align: end;
  font-size: smaller;
  color: var(--text-muted);
}

.tw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.tw-visible {
  visibility: visible;
}

.tw-invisible {
  visibility: hidden;
}

.tw-collapse {
  visibility: collapse;
}

.tw-absolute {
  position: absolute;
}

.tw-relative {
  position: relative;
}

.tw-z-50 {
  z-index: 50;
}

.tw-col-span-12 {
  grid-column: span 12 / span 12;
}

.tw-m-0 {
  margin: 0px;
}

.tw-m-2 {
  margin: 0.5rem;
}

.tw-mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.tw-my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.tw-my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.tw-mb-0 {
  margin-bottom: 0px;
}

.tw-mb-1 {
  margin-bottom: 0.25rem;
}

.tw-mb-2 {
  margin-bottom: 0.5rem;
}

.tw-mb-3 {
  margin-bottom: 0.75rem;
}

.tw-mb-4 {
  margin-bottom: 1rem;
}

.tw-mb-5 {
  margin-bottom: 1.25rem;
}

.tw-mb-auto {
  margin-bottom: auto;
}

.tw-me-1 {
  margin-inline-end: 0.25rem;
}

.tw-me-2 {
  margin-inline-end: 0.5rem;
}

.tw-ml-2 {
  margin-left: 0.5rem;
}

.tw-ms-1 {
  margin-inline-start: 0.25rem;
}

.tw-ms-2 {
  margin-inline-start: 0.5rem;
}

.tw-ms-auto {
  margin-inline-start: auto;
}

.tw-mt-1 {
  margin-top: 0.25rem;
}

.tw-mt-1\.5 {
  margin-top: 0.375rem;
}

.tw-mt-2 {
  margin-top: 0.5rem;
}

.tw-mt-3 {
  margin-top: 0.75rem;
}

.tw-mt-4 {
  margin-top: 1rem;
}

.tw-mt-8 {
  margin-top: 2rem;
}

.tw-mt-auto {
  margin-top: auto;
}

.tw-block {
  display: block;
}

.tw-inline-block {
  display: inline-block;
}

.tw-inline {
  display: inline;
}

.tw-flex {
  display: flex;
}

.tw-inline-flex {
  display: inline-flex;
}

.tw-table {
  display: table;
}

.tw-grid {
  display: grid;
}

.tw-hidden {
  display: none;
}

.tw-aspect-square {
  aspect-ratio: 1 / 1;
}

.tw-h-10 {
  height: 2.5rem;
}

.tw-h-auto {
  height: auto;
}

.tw-h-full {
  height: 100%;
}

.tw-min-h-0 {
  min-height: 0px;
}

.tw-w-10 {
  width: 2.5rem;
}

.tw-w-10\/12 {
  width: 83.333333%;
}

.tw-w-full {
  width: 100%;
}

.tw-min-w-0 {
  min-width: 0px;
}

.tw-min-w-12 {
  min-width: 3rem;
}

.tw-min-w-20 {
  min-width: 5rem;
}

.tw-max-w-md {
  max-width: 28rem;
}

.tw-max-w-xl {
  max-width: 36rem;
}

.tw-flex-1 {
  flex: 1 1 0%;
}

.tw-flex-none {
  flex: none;
}

.tw-flex-shrink-0 {
  flex-shrink: 0;
}

.tw-shrink-0 {
  flex-shrink: 0;
}

.tw-cursor-default {
  cursor: default;
}

.tw-list-none {
  list-style-type: none;
}

.tw-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tw-grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.tw-flex-row {
  flex-direction: row;
}

.tw-flex-col {
  flex-direction: column;
}

.tw-flex-wrap {
  flex-wrap: wrap;
}

.tw-items-start {
  align-items: flex-start;
}

.tw-items-center {
  align-items: center;
}

.tw-justify-end {
  justify-content: flex-end;
}

.tw-justify-center {
  justify-content: center;
}

.tw-justify-between {
  justify-content: space-between;
}

.tw-gap-0 {
  gap: 0px;
}

.tw-gap-1 {
  gap: 0.25rem;
}

.tw-gap-2 {
  gap: 0.5rem;
}

.tw-gap-3 {
  gap: 0.75rem;
}

.tw-gap-4 {
  gap: 1rem;
}

.tw-self-start {
  align-self: flex-start;
}

.tw-overflow-hidden {
  overflow: hidden;
}

.tw-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-text-nowrap {
  text-wrap: nowrap;
}

.tw-break-words {
  overflow-wrap: break-word;
}

.tw-rounded {
  border-radius: 0.25rem;
}

.tw-rounded-card {
  border-radius: 0.75rem;
}

.tw-rounded-full {
  border-radius: 9999px;
}

.tw-rounded-none {
  border-radius: 0px;
}

.tw-rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.tw-rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.tw-border {
  border-width: 1px;
}

.tw-border-b {
  border-bottom-width: 1px;
}

.tw-border-l-4 {
  border-left-width: 4px;
}

.tw-border-r-0 {
  border-right-width: 0px;
}

.tw-border-t {
  border-top-width: 1px;
}

.tw-border-danger {
  border-color: var(--badge-rejected-color);
}

.tw-border-primary {
  border-color: var(--color-primary);
}

.tw-bg-bg-card {
  background-color: var(--bg-card);
}

.tw-bg-danger {
  background-color: var(--badge-rejected-color);
}

.tw-bg-info {
  background-color: var(--color-info);
}

.tw-bg-primary {
  background-color: var(--color-primary);
}

.tw-bg-success {
  background-color: var(--badge-approved-color);
}

.tw-bg-warning {
  background-color: var(--status-warning-color);
}

.tw-bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.tw-bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}

.tw-p-0 {
  padding: 0px;
}

.tw-p-1 {
  padding: 0.25rem;
}

.tw-p-2 {
  padding: 0.5rem;
}

.tw-p-3 {
  padding: 0.75rem;
}

.tw-p-4 {
  padding: 1rem;
}

.tw-px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.tw-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.tw-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.tw-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.tw-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.tw-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.tw-pb-2 {
  padding-bottom: 0.5rem;
}

.tw-pb-3 {
  padding-bottom: 0.75rem;
}

.tw-pl-3 {
  padding-left: 0.75rem;
}

.tw-pt-3 {
  padding-top: 0.75rem;
}

.tw-pt-5 {
  padding-top: 1.25rem;
}

.tw-text-center {
  text-align: center;
}

.tw-text-start {
  text-align: start;
}

.tw-text-end {
  text-align: end;
}

.tw-align-middle {
  vertical-align: middle;
}

.tw-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.tw-text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.tw-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.tw-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.tw-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tw-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.tw-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.tw-font-bold {
  font-weight: 700;
}

.tw-font-medium {
  font-weight: 500;
}

.tw-font-normal {
  font-weight: 400;
}

.tw-font-semibold {
  font-weight: 600;
}

.tw-uppercase {
  text-transform: uppercase;
}

.tw-italic {
  font-style: italic;
}

.tw-tracking-wide {
  letter-spacing: 0.025em;
}

.tw-text-accent {
  color: var(--accent);
}

.tw-text-danger {
  color: var(--badge-rejected-color);
}

.tw-text-info {
  color: var(--color-info);
}

.tw-text-primary {
  color: var(--color-primary);
}

.tw-text-secondary {
  color: var(--color-secondary);
}

.tw-text-success {
  color: var(--badge-approved-color);
}

.tw-text-warning {
  color: var(--status-warning-color);
}

.tw-text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.tw-no-underline {
  text-decoration-line: none;
}

.tw-opacity-50 {
  opacity: 0.5;
}

.tw-opacity-70 {
  opacity: 0.7;
}

.tw-opacity-80 {
  opacity: 0.8;
}

.tw-opacity-90 {
  opacity: 0.9;
}

.tw-shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 576px) {
  .sm\:tw-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:tw-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .sm\:tw-block {
    display: block;
  }

  .sm\:tw-hidden {
    display: none;
  }

  .sm\:tw-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:tw-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:tw-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:tw-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:tw-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:tw-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:tw-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:tw-block {
    display: block;
  }

  .md\:tw-hidden {
    display: none;
  }

  .md\:tw-w-1\/4 {
    width: 25%;
  }

  .md\:tw-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:tw-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .lg\:tw-h-auto {
    height: auto;
  }

  .lg\:tw-w-auto {
    width: auto;
  }

  .lg\:tw-flex-1 {
    flex: 1 1 0%;
  }

  .lg\:tw-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:tw-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:tw-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:tw-justify-between {
    justify-content: space-between;
  }

  .lg\:tw-p-2 {
    padding: 0.5rem;
  }

  .lg\:tw-text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}