.stw-root {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2a24;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f6f5;
}

.stw-header {
    flex: 0 0 auto;
    height: 62px;
    background: #fff;
    border-bottom: 1px solid #e3e8e5;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.stw-brand { display: flex; align-items: center; gap: 12px; }
.stw-brand-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, #0f5e3a, #14804d);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
}
.stw-brand-name { font-weight: 700; color: #14201a; }
.stw-brand-sub { font-size: 12px; color: #6b7a72; }

.stw-header-right { display: flex; align-items: center; gap: 16px; }
.stw-user { display: flex; align-items: center; gap: 8px; }
.stw-avatar {
    width: 30px; height: 30px; border-radius: 999px;
    background: linear-gradient(135deg, #0f5e3a, #14804d);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.stw-user-name { font-size: 13px; font-weight: 600; color: #14201a; }
.stw-role { font-size: 12px; color: #6b7a72; }

.stw-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #0f5e3a, #14804d);
    color: #fff; border: none; border-radius: 10px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.stw-btn-primary:hover { filter: brightness(1.06); }

.stw-body { flex: 1 1 auto; display: flex; min-height: 0; }

.stw-sidebar {
    flex: 0 0 232px; background: #fff; border-right: 1px solid #e3e8e5;
    padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
}
.stw-menu-label {
    margin: 0 8px 8px; font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: #6b7a72; font-weight: 600;
}
.stw-nav {
    display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; border: none; border-radius: 10px; padding: 10px 12px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    background: transparent; color: #2a382f;
}
.stw-nav:hover { background: #eef2f0; }
.stw-nav-active { background: #5b6cc4; color: #fff; }

.stw-main { flex: 1 1 auto; overflow-y: auto; padding: 28px; min-width: 0; }
.stw-main h1 { margin: 0 0 4px; font-size: 28px; color: #14201a; }
.stw-lead { margin: 0 0 20px; color: #6b7a72; font-size: 17px; }

/* ---- Today ---- */
.stw-card { background:#fff; border:1px solid #e3e8e5; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.05); overflow:hidden; }
.stw-muted { color:#6b7a72; }
.stw-goal { padding:20px; margin-bottom:20px; }
.stw-goal-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.stw-goal-raised { font-size:22px; font-weight:700; color:#14201a; }
.stw-goal-pct { font-weight:700; color:#14804d; }
.stw-goal-track { height:14px; background:#e3e8e5; border-radius:999px; overflow:hidden; }
.stw-goal-fill { height:100%; background:linear-gradient(135deg,#0f5e3a,#14804d); border-radius:999px; }
.stw-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.stw-card-head { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid #eef2f0; }
.stw-card-head h2 { margin:0; font-size:16px; color:#14201a; flex:1; }
.stw-chip { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.stw-chip-green { background:#e6f4ec; color:#14804d; }
.stw-chip-blue { background:#e7eefb; color:#3a5fd0; }
.stw-chip-amber { background:#fbf1d9; color:#b7860b; }
.stw-chip-violet { background:#eef0fb; color:#5b6cc4; }
.stw-count { background:#e6f4ec; color:#0f5e3a; border-radius:999px; padding:2px 10px; font-size:13px; font-weight:700; }
.stw-row { display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid #eef2f0; }
.stw-row-main { flex:1; min-width:0; }
.stw-row-title { font-weight:600; color:#14201a; }
.stw-empty { padding:20px; text-align:center; color:#6b7a72; }
.stw-btn-sm { padding:7px 12px; font-size:13px; }
.stw-btn-outline { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#2a382f; border:1px solid #cdd6d1; border-radius:10px; font-weight:600; cursor:pointer; }
.stw-btn-outline:hover { background:#eef2f0; }
.stw-btn-link { background:none; border:none; color:#3a5fd0; font-weight:600; cursor:pointer; font-size:13px; }
.stw-btn-link:hover { text-decoration:underline; }
.stw-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#14201a; color:#fff; padding:12px 20px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.2); font-size:13px; font-weight:600; z-index:100; display:flex; align-items:center; gap:10px; }
.stw-toast i { color:#7ee2a8; }

/* ---- Donors ---- */
.stw-page-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.stw-badge { display:flex; align-items:center; gap:10px; background:#fbf1d9; border:1px solid #f0e0b0; border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:13px; }
.stw-badge i { color:#b7860b; }
.stw-badge span { flex:1; }
.stw-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #cdd6d1; border-radius:10px; padding:8px 12px; margin-bottom:16px; max-width:360px; }
.stw-search i { color:#6b7a72; }
.stw-search input { border:none; outline:none; flex:1; font-size:13px; background:transparent; }
.stw-table-head { padding:12px 20px; border-bottom:1px solid #eef2f0; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#6b7a72; font-weight:600; }
.stw-table-row { padding:12px 20px; border-bottom:1px solid #eef2f0; cursor:pointer; align-items:center; }
.stw-table-row:hover { background:#f4f6f5; }
.stw-donor-grid { display:grid; grid-template-columns:2.2fr 1fr 1.2fr 1fr; gap:12px; }
.stw-donor-name { display:flex; align-items:center; gap:10px; min-width:0; }
.stw-tags { font-size:12px; }
.stw-lapsing { color:#c0392b; font-weight:600; font-size:13px; }

/* ---- Donors: sort bar ---- */
.stw-sort-bar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.stw-sort-btn { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #cdd6d1; border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; color:#2a382f; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s cubic-bezier(0.34,1.5,0.5,1); }
.stw-sort-btn:hover { background:#eef2f0; }
.stw-sort-btn:active { transform:scale(0.96); }
.stw-sort-active { background:#e6f4ec; border-color:#14804d; color:#0f5e3a; }
.stw-sort-idx { background:#14804d; color:#fff; border-radius:999px; min-width:16px; height:16px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }

/* ---- Donors: card layout ---- */
.stw-donor-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:16px; }
.stw-donor-card { background:#fff; border:1px solid #e3e8e5; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.05); padding:18px; cursor:pointer; display:flex; flex-direction:column; gap:14px; }
.stw-donor-card-head { display:flex; align-items:center; gap:12px; }
.stw-avatar-lg { width:46px; height:46px; font-size:16px; flex:0 0 auto; }
.stw-donor-card-id { flex:1; min-width:0; }
.stw-donor-card-id .stw-row-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stw-donor-card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid #eef2f0; padding-top:12px; }
.stw-donor-card-stats .stw-row-title { font-size:15px; }
.stw-donor-card-actions { display:flex; gap:8px; }
.stw-donor-card-actions .stw-btn-sm { flex:1; justify-content:center; }

/* ---- Donor detail ---- */
.stw-back { margin-bottom:12px; padding:0; }
.stw-hero { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:linear-gradient(135deg,#0f5e3a,#14804d); color:#fff; border-radius:16px; padding:20px 24px; margin-bottom:16px; }
.stw-hero-avatar { width:64px; height:64px; border-radius:999px; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }
.stw-hero-main { flex:1; min-width:0; }
.stw-hero-main h1 { margin:0; color:#fff; font-size:26px; }
.stw-hero-sub { opacity:.9; font-size:13px; }
.stw-hero-actions { display:flex; gap:8px; flex-wrap:wrap; }
.stw-btn-ghost { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.stw-btn-white { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#0f5e3a; border:none; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.stw-stats3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.stw-stat { padding:16px; }
.stw-stat-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#6b7a72; font-weight:600; }
.stw-stat-big { font-size:22px; font-weight:700; color:#14201a; }
.stw-grid-detail { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; }
.stw-mt { margin-top:16px; }

/* Donor detail — contact information card */
.stw-contact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px 28px; padding:18px 20px; }
.stw-contact-item { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:#1f2a24; min-width:0; }
.stw-contact-item i { color:#14804d; font-size:16px; line-height:1.4; flex:none; }
.stw-contact-item a { color:#14804d; text-decoration:none; word-break:break-word; }
.stw-contact-item a:hover { text-decoration:underline; }
.stw-contact-address address { font-style:normal; line-height:1.45; }
.stw-card > .stw-muted[data-testid="contact-empty"] { padding:16px 20px; }
.stw-pill { font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; }
.stw-pill-green { background:#e6f4ec; color:#0f5e3a; }
.stw-pill-amber { background:#fbf1d9; color:#b7860b; }
.stw-pill-blue { background:#e7eefb; color:#3a5fd0; }
.stw-pill-grey { background:#eef2f0; color:#6b7a72; }
.stw-icon-btn { background:none; border:none; cursor:pointer; color:#0f5e3a; font-size:14px; }
.stw-timeline { padding:12px 20px; }
.stw-tl-row { display:flex; gap:10px; padding:8px 0; }
.stw-tl-dot { width:26px; height:26px; border-radius:999px; background:#f4f6f5; border:1px solid #cdd6d1; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* ---- Asks board ---- */
.stw-asks-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.stw-ask-col { background:#f4f6f5; border:1px solid #e3e8e5; border-radius:16px; padding:12px; min-height:60vh; }
.stw-ask-col-head { display:flex; align-items:center; gap:8px; padding:6px 8px 12px; }
.stw-ask-col-head h2 { margin:0; font-size:14px; flex:1; color:#14201a; }
.stw-dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.stw-dot-thinking { background:#6b7a72; } .stw-dot-asked { background:#b7860b; } .stw-dot-decided { background:#14804d; }
.stw-count-plain { background:#fff; border:1px solid #cdd6d1; border-radius:999px; padding:1px 9px; font-size:12px; font-weight:700; }
.stw-ask-card { padding:12px; margin-bottom:10px; }
.stw-ask-next { font-size:12px; margin-top:4px; }
.stw-ask-actions { display:flex; gap:6px; margin-top:10px; }
.stw-btn-xs { padding:4px 8px; font-size:12px; }
.stw-pill-red { background:#fae3e0; color:#c0392b; }
/* ---- Pledges ---- */
.stw-pledge-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr auto; gap:12px; align-items:center; }
/* ---- Reports ---- */
.stw-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
/* ---- Import ---- */
.stw-stepper { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.stw-step { display:flex; align-items:center; gap:8px; flex:1; }
.stw-step-dot { width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:#eef2f0; color:#6b7a72; border:1px solid #cdd6d1; flex:0 0 auto; }
.stw-step-done { background:#14804d; color:#fff; border:none; }
.stw-step-cur { background:#5b6cc4; color:#fff; border:none; }
.stw-import-panel { padding:24px; }
.stw-dropzone { border:2px dashed #cdd6d1; border-radius:12px; padding:40px 20px; text-align:center; }
.stw-drop-icon { font-size:40px; color:#14804d; }
.stw-map-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #eef2f0; }
.stw-map-row code { color:#6b7a72; }
.stw-wizard-nav { display:flex; justify-content:space-between; margin-top:20px; gap:10px; }
.stw-import-done { text-align:center; padding:16px 0; }
.stw-done-check { width:64px; height:64px; border-radius:999px; background:#e6f4ec; color:#14804d; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 16px; }

/* ---- Modal ---- */
.stw-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90; display:flex; align-items:center; justify-content:center; padding:20px; }
.stw-modal { background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); width:100%; max-width:560px; max-height:88vh; overflow-y:auto; }
.stw-modal-head { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid #eef2f0; position:sticky; top:0; background:#fff; }
.stw-modal-head h2 { margin:0; font-size:16px; color:#14201a; flex:1; }
.stw-modal-close { background:none; border:none; color:#6b7a72; cursor:pointer; font-size:20px; line-height:1; }
.stw-modal-body { padding:20px; }
.stw-field-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#6b7a72; font-weight:600; margin:12px 0 6px; }
.stw-input { width:100%; border:1px solid #cdd6d1; border-radius:10px; padding:10px; font-family:inherit; font-size:13px; background:#fff; }
.stw-textarea { width:100%; min-height:160px; border:1px solid #cdd6d1; border-radius:10px; padding:12px; font-family:inherit; font-size:13px; line-height:1.5; resize:vertical; }
.stw-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.stw-receipt { border:1px solid #cdd6d1; border-radius:10px; padding:20px; background:#f4f6f5; }
.stw-receipt-head { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #0f5e3a; padding-bottom:12px; margin-bottom:12px; }
.stw-receipt-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13px; }
.stw-merge-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stw-merge-keep { border:2px solid #0f5e3a; border-radius:10px; padding:16px; }
.stw-merge-in { border:1px solid #cdd6d1; border-radius:10px; padding:16px; opacity:.85; }

/* ---- Asks drag-and-drop ---- */
.stw-ask-card { cursor: grab; }
.stw-ask-card:active { cursor: grabbing; }
.stw-ask-col-over { outline: 2px dashed #14804d; outline-offset: -3px; background: #eaf3ee; }

/* ---- Ask decision (Decided column) ---- */
.stw-ask-decision { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.stw-decision-select { border:1px solid #cdd6d1; border-radius:8px; padding:4px 8px; font-size:12px; font-family:inherit; background:#fff; cursor:pointer; }
.stw-ask-card.stw-dragging { opacity:0.45; }

/* ---- List loading skeletons (shown while any list is fetching) ---- */
.stw-loading-list { display:flex; flex-direction:column; gap:16px; padding:8px 0; }
.stw-skel-row { display:flex; flex-direction:column; gap:8px; }
.stw-skel-line { height:12px; border-radius:6px; background:#eef2f0;
    background-image:linear-gradient(90deg, #eef2f0 0, #e2e8e4 40px, #eef2f0 80px);
    background-size:600px 100%; animation:stw-shimmer 1.3s linear infinite; }
.stw-skel-title { width:45%; }
.stw-skel-sub { width:28%; height:10px; }
@keyframes stw-shimmer { 0% { background-position:-120px 0; } 100% { background-position:480px 0; } }
@media (prefers-reduced-motion: reduce) { .stw-skel-line { animation:none; } }
.stw-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Today: layout modes (stack / grid / row) ---- */
.stw-today-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:12px; }
.stw-layout-switch { display:inline-flex; border:1px solid #dfe5e1; border-radius:10px; overflow:hidden; background:#fff; }
.stw-layout-opt { background:transparent; border:0; padding:6px 12px; cursor:pointer; color:#7a8a82; border-right:1px solid #eef2f0; font-size:15px; line-height:1; }
.stw-layout-opt:last-child { border-right:0; }
.stw-layout-opt:hover { background:#f2f6f4; }
.stw-layout-opt-active { background:#14804d; color:#fff; }
.stw-layout-opt-active:hover { background:#14804d; }
.stw-grid2.stw-layout-stack { grid-template-columns:1fr; }
.stw-grid2.stw-layout-grid { grid-template-columns:1fr 1fr; }
.stw-grid2.stw-layout-row { display:flex; flex-wrap:nowrap; overflow-x:auto; padding-bottom:10px; }
.stw-grid2.stw-layout-row > .stw-queue { flex:0 0 340px; min-width:340px; }
@media (max-width:820px) { .stw-grid2.stw-layout-grid { grid-template-columns:1fr; } }

/* ===================== Responsive shell & grids ===================== */
/* Hamburger + drawer backdrop: hidden on desktop, activated in the mobile block */
.stw-hamburger { display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto; margin-right:2px; border:1px solid #dfe5e1; border-radius:10px; background:#fff; color:#2a382f; font-size:20px; cursor:pointer; }
.stw-hamburger:hover { background:#eef2f0; }
.stw-nav-backdrop { display:none; }

@media (max-width: 860px) {
    /* Shell: sidebar collapses into an off-canvas drawer */
    .stw-hamburger { display:inline-flex; }
    .stw-header { padding:0 12px; gap:8px; }
    .stw-brand-sub { display:none; }
    .stw-header-right { gap:8px; }
    .stw-tour-btn span { display:none; }        /* icon-only Tour */
    .stw-user > div { display:none; }           /* keep avatar, drop name/role text */

    .stw-sidebar {
        position:fixed; top:0; left:0; bottom:0; z-index:95;
        width:270px; max-width:82vw;
        transform:translateX(-100%);
        transition:transform .25s ease;
        box-shadow:0 12px 40px rgba(0,0,0,.22);
        overflow-y:auto;
    }
    .stw-body.stw-nav-open .stw-sidebar { transform:translateX(0); }
    .stw-nav-backdrop {
        display:block; position:fixed; inset:0; z-index:94;
        background:rgba(0,0,0,.42); opacity:0; pointer-events:none;
        transition:opacity .2s ease;
    }
    .stw-body.stw-nav-open .stw-nav-backdrop { opacity:1; pointer-events:auto; }

    .stw-main { padding:16px; }
    .stw-main h1 { font-size:22px; }
    .stw-lead { font-size:15px; margin-bottom:16px; }
    .stw-hero-main h1 { font-size:22px; }

    /* Collapse multi-column content grids to a single column */
    .stw-grid2.stw-layout-grid, .stw-grid2.stw-layout-stack { grid-template-columns:1fr; }
    .stw-grid-detail { grid-template-columns:1fr; }
    .stw-asks-grid { grid-template-columns:1fr; }
    .stw-ask-col { min-height:auto; }
    .stw-kpis { grid-template-columns:repeat(2,1fr); }
    .stw-receipt-grid, .stw-merge-grid { grid-template-columns:1fr; }

    /* Pledges table -> stacked rows (drop the column header) */
    .stw-table-head.stw-pledge-grid { display:none; }
    .stw-table-row.stw-pledge-grid { grid-template-columns:1fr; gap:4px; }

    /* Two-column designer + batch review collapse to one column */
    .stw-tpl-designer { grid-template-columns:1fr; }
    .stw-batch-review { grid-template-columns:1fr; }
    .stw-batch-list { max-height:none; }
    .stw-batch-top, .stw-batch-foot { margin-left:-16px; margin-right:-16px; }

    /* Thank-you template designer: collapse its tables/fields to one column */
    .stw-table-head.stw-tpl-grid { display:none; }
    .stw-tpl-grid { grid-template-columns:1fr; gap:8px; }
    .stw-tpl-actions { justify-content:flex-start; }
    .stw-tpl-fields { grid-template-columns:1fr; }
    .stw-link-row { grid-template-columns:1fr; }
    .stw-modal-wide { width:96vw; }
}

@media (max-width: 520px) {
    .stw-btn-label { display:none; }            /* Log activity -> icon only */
    .stw-stats3 { grid-template-columns:1fr; }
    .stw-kpis { grid-template-columns:1fr; }
    .stw-main { padding:12px; }
    .stw-hero { padding:16px; }
    .stw-hero-avatar { width:52px; height:52px; font-size:18px; }
    /* Keep avatar beside the name, push the action buttons to a full-width row below */
    .stw-hero-main { min-width:55%; }
    .stw-hero-actions { flex-basis:100%; }
    .stw-hero-actions .stw-btn-ghost, .stw-hero-actions .stw-btn-white { flex:1; justify-content:center; }
    .stw-step span { display:none; }            /* import stepper -> dots only */
    .stw-modal-body { padding:16px; }
    .stw-overlay { padding:10px; }
}

/* Landscape phones: very short viewport — let the modal use more height */
@media (max-height: 480px) {
    .stw-modal { max-height:94vh; }
}

/* Respect reduced-motion for the drawer slide */
@media (prefers-reduced-motion: reduce) {
    .stw-sidebar, .stw-nav-backdrop { transition:none; }
}

/* ---- Today: collapsible + reorderable queues ---- */
.stw-queue-grip { color:#b6c2bb; cursor:grab; display:inline-flex; align-items:center; margin-right:2px; }
.stw-collapse-btn { margin-left:auto; background:transparent; border:0; color:#7a8a82; cursor:pointer; padding:4px 6px; border-radius:6px; line-height:1; }
.stw-collapse-btn:hover { background:#f2f6f4; color:#1b2b24; }
.stw-card.stw-collapsed > *:not(.stw-card-head) { display:none; }
.stw-card.stw-collapsed .stw-card-head { margin-bottom:0; }
.stw-queue.stw-queue-dragging { opacity:0.45; }
.stw-queue.stw-queue-over { outline:2px dashed #14804d; outline-offset:-3px; }
/* The count sits just left of the collapse chevron. */
.stw-queue .stw-card-head .stw-count { margin-left:0; }

/* ---- Guided tour ---- */
.stw-tour-btn { background:transparent; border:1px solid #cdd6d1; color:#3a4a42; border-radius:10px; padding:8px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-weight:600; font-family:inherit; font-size:14px; }
.stw-tour-btn:hover { background:#f2f6f4; }
.stw-tour-overlay { position:fixed; inset:0; z-index:1000; }
.stw-tour-fulldim { position:fixed; inset:0; background:rgba(15,23,20,0.55); }
.stw-tour-spot { position:fixed; border-radius:10px; border:2px solid #fff; box-shadow:0 0 0 9999px rgba(15,23,20,0.55); pointer-events:none; transition:top .2s ease, left .2s ease, width .2s ease, height .2s ease; }
.stw-tour-tip { position:fixed; left:50%; transform:translateX(-50%); width:min(460px,92vw); background:#fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.28); padding:20px 22px; z-index:1001; }
.stw-tour-tip-bottom { bottom:28px; }
.stw-tour-tip-top { top:28px; }
.stw-tour-count { font-size:12px; font-weight:700; color:#14804d; text-transform:uppercase; letter-spacing:.05em; }
.stw-tour-tip h3 { margin:6px 0 8px; font-size:18px; color:#1b2b24; }
.stw-tour-tip p { margin:0 0 16px; color:#3a4a42; line-height:1.5; }
.stw-tour-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stw-tour-nav { display:flex; gap:8px; }

/* ---- Settings ---- */
.stw-setting-row { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.stw-setting-text { max-width:70ch; }
.stw-setting-toggle { white-space:nowrap; font-weight:600; }
.stw-orgname-edit { display:flex; gap:8px; align-items:center; }
.stw-orgname-edit .stw-input { min-width:240px; }
.stw-lock-note { margin-top:8px; display:inline-flex; align-items:center; gap:6px; }

/* Wider modal for the receipt preview and the rich thank-you editor. */
.stw-modal-wide { max-width: 760px; width: 94vw; }

/* ---- Thank-you template designer ---- */
.stw-tpl-grid { grid-template-columns: 2fr 2fr 1fr auto; display:grid; align-items:center; gap:12px; }
.stw-tpl-actions { display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.stw-tpl-editor { display:flex; flex-direction:column; gap:16px; }
.stw-tpl-fields { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.stw-checkbox { display:flex; align-items:center; gap:8px; font-size:14px; color:#3a4a42; cursor:pointer; }
.stw-tpl-insert { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid #eef2f0; padding-top:14px; }
.stw-insert-field { flex:1; min-width:220px; }
.stw-insert-actions { display:flex; gap:8px; align-items:center; }
.stw-link-row { display:grid; grid-template-columns:2fr 1fr auto; gap:8px; align-items:center; }
.stw-editor-wrap #tpl-editor, .stw-editor-wrap #draft-editor { min-height:280px; background:#fff; }
.stw-draft-editor #draft-editor { min-height:240px; background:#fff; }
.stw-hidden { display:none; }
.stw-email-preview { border:1px solid #dfe5e1; border-radius:10px; padding:24px; background:#fff; min-height:280px; overflow:auto; }
/* Preview honours the letter's own image sizing (width/height attrs); only clamp overflow. */
.stw-email-preview img { max-width:100%; }

/* ---- Editor image resize handles ---- */
.stw-img-resize { position:absolute; border:1.5px solid #14804d; box-sizing:border-box; pointer-events:none; z-index:6; }
.stw-img-handle { position:absolute; width:11px; height:11px; background:#14804d; border:1.5px solid #fff; border-radius:2px; pointer-events:auto; }
.stw-img-handle-nw { left:-6px; top:-6px; cursor:nwse-resize; }
.stw-img-handle-ne { right:-6px; top:-6px; cursor:nesw-resize; }
.stw-img-handle-sw { left:-6px; bottom:-6px; cursor:nesw-resize; }
.stw-img-handle-se { right:-6px; bottom:-6px; cursor:nwse-resize; }
/* Keep Quill's toolbar tidy inside the Steward cards. */
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color:#dfe5e1; }
.ql-container.ql-snow { border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
.ql-toolbar.ql-snow { border-top-left-radius:8px; border-top-right-radius:8px; }

/* ================= Thank-yous: tiers, batch table, batch flow ================= */
/* Gift-size tier colours (Everyday / Generous / Significant / Major) */
.stw-tier-chip, .stw-tier-tag { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700; white-space:nowrap; border:1px solid transparent; }
.stw-tier-any         { background:#eef2f0; color:#5a6b62; border-color:#dfe5e1; }
.stw-tier-everyday    { background:#eef2f0; color:#5a6b62; border-color:#dfe5e1; }
.stw-tier-generous    { background:#e6f4ec; color:#0f5e3a; border-color:#bfe3cd; }
.stw-tier-significant { background:#e7eefb; color:#3a5fd0; border-color:#c5d8fb; }
.stw-tier-major       { background:#fae3e0; color:#c0392b; border-color:#f3c9d1; }
.stw-tier-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 20px 6px; }
button.stw-tier-chip { cursor:pointer; font-family:inherit; line-height:1.4; transition:box-shadow .12s ease, transform .1s ease; }
button.stw-tier-chip:hover { box-shadow:0 0 0 1px currentColor; }
button.stw-tier-chip:active { transform:scale(0.96); }
.stw-tier-chip-on { box-shadow:0 0 0 2px currentColor; font-weight:700; }
.stw-tier-chip-on:hover { box-shadow:0 0 0 2px currentColor; }
.stw-tier-clear { font-size:12px; margin-left:2px; }

/* Dashboard "Thank-yous to send" multi-select rows */
.stw-ty-selectall { display:flex; align-items:center; gap:10px; padding:8px 20px; border-top:1px solid #eef2f0; background:#f8faf9; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#6b7a72; font-weight:600; cursor:pointer; }
.stw-ty-selectall input, .stw-ty-row input[type=checkbox] { width:17px; height:17px; accent-color:#14804d; cursor:pointer; flex:none; }
.stw-ty-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:11px 20px; border-top:1px solid #eef2f0; }
.stw-ty-row-sel { background:rgba(91,108,196,0.06); }
.stw-ty-avatar { width:34px; height:34px; flex:none; }
.stw-ty-id { flex:1 1 130px; min-width:0; display:flex; flex-direction:column; }
.stw-ty-giftline { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stw-ty-tpl { flex:1 1 150px; min-width:0; border:1px solid #cdd6d1; border-radius:8px; padding:6px 8px; font-family:inherit; font-size:12px; color:#2a382f; background:#fff; cursor:pointer; }
.stw-ty-foot { display:flex; align-items:center; gap:14px; padding:14px 20px; border-top:1px solid #eef2f0; background:#f8faf9; flex-wrap:wrap; }
.stw-ty-foot .stw-btn-primary[disabled] { background:#e3e8e5; color:#9aa8a0; cursor:not-allowed; box-shadow:none; }

/* Batch flow: centred states (generate / sent) */
.stw-batch-center { max-width:460px; margin:8vh auto 0; text-align:center; animation:stw-rise .3s var(--stw-ease, ease); }
.stw-batch-center h1, .stw-batch-center h2 { color:#14201a; margin:0 0 8px; }
.stw-batch-spin { width:72px; height:72px; margin:0 auto 16px; border-radius:999px; background:#e6f4ec; color:#0f5e3a; display:flex; align-items:center; justify-content:center; font-size:32px; }
.stw-batch-check { width:84px; height:84px; margin:0 auto 16px; border-radius:999px; background:#e6f4ec; color:#14804d; display:flex; align-items:center; justify-content:center; font-size:40px; }
.stw-batch-track { height:12px; background:#e3e8e5; border-radius:999px; overflow:hidden; margin:16px 0 10px; }
.stw-batch-bar { height:100%; background:linear-gradient(135deg,#0f5e3a,#14804d); border-radius:999px; transition:width .12s linear; }
.stw-batch-breakdown { display:flex; flex-direction:column; gap:10px; margin:20px 0; text-align:left; }
.stw-batch-bd { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e3e8e5; border-radius:12px; padding:12px 16px; }
.stw-batch-bd-ic { width:36px; height:36px; flex:none; border-radius:8px; background:#eef2f0; color:#3a5fd0; display:flex; align-items:center; justify-content:center; font-size:18px; }

/* Batch review: top bar, two-pane, footer */
.stw-batch-top { display:flex; align-items:center; gap:16px; margin:-28px -28px 16px; padding:14px 24px; background:#fff; border-bottom:1px solid #e3e8e5; }
.stw-batch-title { font-weight:700; color:#14201a; font-size:17px; }
.stw-batch-review { display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; }
.stw-batch-list { background:#fff; border:1px solid #e3e8e5; border-radius:16px; overflow:hidden; max-height:60vh; overflow-y:auto; }
.stw-batch-recip { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid #eef2f0; cursor:pointer; border-left:3px solid transparent; }
.stw-batch-recip:hover { background:#f4f6f5; }
.stw-batch-recip-active { background:rgba(91,108,196,0.08); border-left-color:#5b6cc4; }
.stw-batch-recip-id { flex:1; min-width:0; }
.stw-batch-recip-id .stw-row-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stw-batch-recip-tags { display:flex; align-items:center; gap:6px; margin-top:3px; }
.stw-batch-status { display:inline-block; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:700; }
.stw-batch-status-ready { background:#e7eefb; color:#3a5fd0; }
.stw-batch-status-personalized { background:#e6f4ec; color:#0f5e3a; }
.stw-batch-editor { background:#fff; border:1px solid #e3e8e5; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.stw-batch-eh { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid #eef2f0; }
.stw-batch-to { flex:1; min-width:0; }
.stw-batch-eh-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stw-batch-chan { display:inline-flex; align-items:center; gap:5px; background:#e7eefb; color:#3a5fd0; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700; }
.stw-batch-tplname { font-size:12px; }
.stw-batch-paper-wrap { padding:20px; background:#f4f6f5; max-height:52vh; overflow-y:auto; }
.stw-batch-paper { max-width:640px; margin:0 auto; }
.stw-batch-subject { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dfe5e1; border-radius:8px 8px 0 0; padding:10px 14px; }
.stw-batch-subject span { font-size:13px; font-weight:600; color:#6b7a72; }
.stw-batch-subject input { flex:1; border:none; outline:none; font-family:inherit; font-size:14px; color:#14201a; font-weight:600; background:transparent; }
.stw-batch-letter { background:#fff; }
.stw-batch-letter .ql-container.ql-snow { border-top:none; border-radius:0 0 8px 8px; min-height:280px; }
.stw-batch-hint { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font-size:12px; color:#6b7a72; flex-wrap:wrap; }
.stw-batch-eb { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px; border-top:1px solid #eef2f0; }
.stw-batch-nav { display:flex; gap:8px; }
.stw-batch-remove, .stw-danger { color:#c0392b; }
.stw-batch-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:20px -28px -28px; padding:14px 24px; background:#fff; border-top:1px solid #e3e8e5; flex-wrap:wrap; }
.stw-batch-foot-r { display:flex; align-items:center; gap:16px; }

/* Two-column thank-you letter designer */
.stw-tpl-title { margin:0 0 16px; }
.stw-tpl-designer { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; max-width:1120px; }
.stw-tpl-edcard { overflow:hidden; }
.stw-tpl-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid #eef2f0; background:#f8faf9; }
.stw-tpl-toolbar-sp { flex:1; }
.stw-tpl-insert-select { border:1px solid #cdd6d1; border-radius:8px; padding:6px 8px; font-family:inherit; font-size:13px; color:#3a5fd0; font-weight:600; background:#fff; cursor:pointer; }
.stw-tpl-edcard .stw-editor-wrap { padding:0; }
.stw-tpl-edcard .ql-toolbar.ql-snow { border-left:none; border-right:none; border-top:none; }
.stw-tpl-edcard .ql-container.ql-snow { border:none; }
.stw-tpl-edcard .stw-email-preview { border:none; border-radius:0; }
.stw-tpl-edcard .stw-link-row { padding:12px; border-bottom:1px solid #eef2f0; }
.stw-tpl-settings { display:flex; flex-direction:column; gap:16px; }
.stw-tpl-setcard { padding:20px; display:flex; flex-direction:column; gap:16px; }
.stw-tpl-note { background:#e7eefb; border:1px solid #c5d8fb; border-radius:10px; padding:14px 16px; font-size:13px; color:#2a382f; line-height:1.5; }
.stw-tpl-note i { color:#3a5fd0; }
.stw-tpl-actions2 { display:flex; gap:10px; }
.stw-tpl-actions2 .stw-btn-outline { flex:1; justify-content:center; padding:10px; }
.stw-tpl-actions2 .stw-btn-primary { flex:2; justify-content:center; padding:10px; }

/* ---- Import file picker (real upload) ---- */
.stw-file-label { display:inline-flex; align-items:center; gap:8px; cursor:pointer; position:relative; }
.stw-file-input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }

/* ---- Export board packet: print only the Reports view ---- */
@media print {
    .stw-header, .stw-sidebar, .stw-btn-primary, .stw-toast, .stw-overlay { display:none !important; }
    .stw-root, .stw-body, .stw-main { display:block !important; height:auto !important; overflow:visible !important; }
    .stw-main { padding:0 !important; }
    .stw-card { break-inside:avoid; box-shadow:none !important; border:1px solid #dfe5e1 !important; }
    body { background:#fff !important; }
}

/* ================= Motion & micro-interactions ================= */
@keyframes stw-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes stw-rise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes stw-pop {
    0%   { opacity:0; transform:scale(0.88) translateY(26px); }
    60%  { opacity:1; transform:scale(1.03) translateY(-3px); }
    100% { opacity:1; transform:none; }
}
@keyframes stw-toast-in {
    0%   { opacity:0; transform:translate(-50%,36px) scale(0.85); }
    55%  { opacity:1; transform:translate(-50%,-6px) scale(1.04); }
    100% { opacity:1; transform:translate(-50%,0) scale(1); }
}

/* Screen transitions: the whole screen clearly rises and fades in on navigation. */
.stw-screen-anim { animation: stw-rise 0.45s cubic-bezier(0.16,0.84,0.44,1) both; }

/* Cards arrive with an obvious staggered rise. */
.stw-screen-anim .stw-card { animation: stw-rise 0.5s cubic-bezier(0.16,0.84,0.44,1) both; }
.stw-screen-anim .stw-card:nth-of-type(2){animation-delay:.09s}
.stw-screen-anim .stw-card:nth-of-type(3){animation-delay:.18s}
.stw-screen-anim .stw-card:nth-of-type(4){animation-delay:.27s}
.stw-screen-anim .stw-card:nth-of-type(5){animation-delay:.34s}

/* List fills: rows and donor cards visibly cascade in. */
.stw-row, .stw-table-row, .stw-tl-row, .stw-ask-card, .stw-donor-card { animation: stw-rise 0.48s cubic-bezier(0.16,0.84,0.44,1) both; }
.stw-donor-card { transition: box-shadow .22s ease, transform .22s cubic-bezier(0.34,1.4,0.5,1); }
.stw-donor-card:hover { box-shadow:0 16px 36px rgba(0,0,0,.13); transform:translateY(-5px); }
.stw-donor-card:active { transform:translateY(-5px) scale(0.99); }
.stw-donor-card:nth-child(2){animation-delay:.04s}  .stw-donor-card:nth-child(3){animation-delay:.08s}
.stw-donor-card:nth-child(4){animation-delay:.12s}  .stw-donor-card:nth-child(5){animation-delay:.16s}
.stw-donor-card:nth-child(6){animation-delay:.20s}  .stw-donor-card:nth-child(7){animation-delay:.24s}
.stw-donor-card:nth-child(8){animation-delay:.28s}  .stw-donor-card:nth-child(n+9){animation-delay:.32s}
.stw-table-row:nth-child(2){animation-delay:.05s}  .stw-table-row:nth-child(3){animation-delay:.10s}
.stw-table-row:nth-child(4){animation-delay:.15s}  .stw-table-row:nth-child(5){animation-delay:.20s}
.stw-table-row:nth-child(6){animation-delay:.25s}  .stw-table-row:nth-child(7){animation-delay:.30s}
.stw-table-row:nth-child(8){animation-delay:.35s}  .stw-table-row:nth-child(9){animation-delay:.40s}
.stw-table-row:nth-child(10){animation-delay:.45s} .stw-table-row:nth-child(n+11){animation-delay:.50s}
.stw-row:nth-child(3){animation-delay:.06s}  .stw-row:nth-child(4){animation-delay:.12s}
.stw-row:nth-child(5){animation-delay:.18s}  .stw-row:nth-child(6){animation-delay:.24s}
.stw-row:nth-child(n+7){animation-delay:.30s}
.stw-ask-card:nth-child(2){animation-delay:.06s} .stw-ask-card:nth-child(3){animation-delay:.12s}
.stw-ask-card:nth-child(n+4){animation-delay:.18s}

/* Hover / selection — clearly interactive. */
.stw-nav { transition: background .2s ease, color .2s ease, transform .16s cubic-bezier(0.34,1.5,0.5,1), box-shadow .2s ease; }
.stw-nav:hover { transform: translateX(5px); }
.stw-nav-active { box-shadow: 0 5px 16px rgba(91,108,196,.42); }
.stw-nav:active { transform: scale(0.95); }
.stw-table-row { transition: background .2s ease, transform .2s cubic-bezier(0.34,1.4,0.5,1), box-shadow .2s ease; }
.stw-table-row:hover { transform: translateX(9px); background:#eaf4ee; box-shadow:-5px 0 0 #14804d; }
.stw-table-row:active { transform: translateX(9px) scale(0.99); }
.stw-card { transition: box-shadow .25s ease, transform .25s ease; }
.stw-btn-primary, .stw-btn-outline, .stw-btn-white, .stw-btn-ghost, .stw-btn-link, .stw-icon-btn,
.stw-btn-sm, .stw-btn-xs, .stw-layout-opt, .stw-collapse-btn, .stw-tour-btn {
    transition: filter .16s ease, background .16s ease, color .16s ease, transform .14s cubic-bezier(0.34,1.5,0.5,1), box-shadow .16s ease;
}
.stw-btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow:0 8px 18px rgba(15,94,58,.32); }
.stw-btn-primary:active, .stw-btn-outline:active, .stw-btn-white:active, .stw-btn-ghost:active,
.stw-icon-btn:active, .stw-btn-sm:active, .stw-btn-xs:active { transform: translateY(2px) scale(0.96); }
.stw-icon-btn:hover { background:#eef2f0; transform: scale(1.15); }
.stw-btn-outline:hover, .stw-btn-white:hover, .stw-btn-ghost:hover { transform: translateY(-2px); }
.stw-ask-card { transition: box-shadow .22s ease, transform .22s cubic-bezier(0.34,1.4,0.5,1); }
.stw-ask-card:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.16); transform: translateY(-6px) scale(1.015); }
.stw-pill, .stw-chip { transition: background .16s ease, color .16s ease, transform .16s cubic-bezier(0.34,1.5,0.5,1); }
.stw-pill:hover { transform: scale(1.06); }

/* Modal, toast & tour — bold entrances with a slight overshoot. */
.stw-overlay { animation: stw-fade-in 0.2s ease both; }
.stw-modal { animation: stw-pop 0.42s cubic-bezier(0.34,1.4,0.5,1) both; }
.stw-toast { animation: stw-toast-in 0.5s cubic-bezier(0.34,1.4,0.5,1) both; }
.stw-tour-tip { animation: stw-pop 0.4s cubic-bezier(0.34,1.4,0.5,1) both; }

/* The goal bar fills dramatically. */
.stw-goal-fill { transition: width 1.2s cubic-bezier(0.16,0.84,0.44,1); }

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .stw-screen-anim, .stw-screen-anim .stw-card, .stw-row, .stw-table-row, .stw-tl-row, .stw-ask-card, .stw-donor-card,
    .stw-overlay, .stw-modal, .stw-toast, .stw-tour-tip { animation: none !important; }
    .stw-goal-fill { transition: none !important; }
    * { transition-duration: 0.01ms !important; }
}