:root{
  --bg:#0b0f19;--panel:#0f1724;--muted:#9aa4b2;--accent:#3fb6ff;--danger:#ff6b6b;--ok:#36d399;--warn:#ffb86b;--glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:linear-gradient(180deg,var(--bg),#06070a);color:#e6eef8}
.topbar{background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);border-bottom:1px solid rgba(255,255,255,0.03)}
.topbar__inner{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px}
.brand{display:flex;gap:12px;align-items:center}
.brand__mark{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#7ce0ff);display:flex;align-items:center;justify-content:center;font-weight:700;color:#05212a}
.brand__title{font-weight:600}
.app{max-width:980px;margin:18px auto;padding:16px}
.card{background:var(--panel);border-radius:12px;padding:16px;margin:12px 0;border:1px solid rgba(255,255,255,0.03)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--accent);color:#05212a;padding:10px 14px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:8px 12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.item-header{display:grid;grid-template-columns:1fr 200px 200px;gap:8px;align-items:end;padding:12px 10px 10px;margin:0 0 10px;border:1px solid rgba(255,255,255,0.05);border-radius:12px;background:rgba(255,255,255,0.03);position:sticky;top:12px;z-index:5;backdrop-filter: blur(10px)}
.item-header__activity{color:#cfe3ff;font-size:13px;letter-spacing:0.02em;text-transform:uppercase;opacity:0.95}
.item-header__dir{color:#cfe3ff;font-size:13px;text-align:center;padding-left:10px;border-left:1px solid rgba(255,255,255,0.06)}
.item-header__title{font-weight:800;color:#e6eef8;margin-bottom:8px;line-height:1.1}
.item-header__hint{font-weight:600;color:var(--muted);font-size:12px}
.item-header__sub{display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:1}
.item-header__sub .sort-btn{display:block;width:100%;text-align:center;font-size:12px;color:var(--muted);padding:6px 6px;border-radius:8px;background:rgba(0,0,0,0.12);border:1px solid rgba(255,255,255,0.04)}
.item-row{display:grid;grid-template-columns:1fr 120px 120px;gap:8px;align-items:center;padding:8px;border-radius:8px}
.item-row + .item-row{border-top:1px dashed rgba(255,255,255,0.02);}
.item-cell{padding-left:10px;border-left:1px solid rgba(255,255,255,0.04)}
.item-row:hover{background:rgba(255,255,255,0.015)}

/* Category divider (default ordering) */
.cat-divider{margin:14px 0 8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);color:#cfe3ff;font-weight:800;letter-spacing:0.02em}
.cat-divider--first{margin-top:0}

/* Questionnaire action areas */
.q-actions-top{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.q-actions-top__primary{display:flex;justify-content:flex-start}
.q-actions-top__filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.q-actions-bottom{display:flex;justify-content:flex-start;margin-top:12px}

/* Column visibility (checkbox-style) */
.q:not(.q--show-get) .col-receive, .q:not(.q--show-get) .item-header__dir--receive{display:none}
.q:not(.q--show-do) .col-give, .q:not(.q--show-do) .item-header__dir--give{display:none}

/* Layout depending on which columns are shown */
.q.q--show-get.q--show-do .item-row, .q.q--show-get.q--show-do .item-header{grid-template-columns:1fr 200px 200px}
.q.q--show-get:not(.q--show-do) .item-row, .q.q--show-get:not(.q--show-do) .item-header{grid-template-columns:1fr 260px}
.q.q--show-do:not(.q--show-get) .item-row, .q.q--show-do:not(.q--show-get) .item-header{grid-template-columns:1fr 260px}
.q:not(.q--show-get):not(.q--show-do) .item-row, .q:not(.q--show-get):not(.q--show-do) .item-header{grid-template-columns:1fr}

/* Role toggle */
.role-toggle{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04)}
.role-toggle--wrap{flex-wrap:wrap}
.role-toggle__opt{display:flex;gap:8px;align-items:center;color:var(--muted);font-weight:600;cursor:pointer;user-select:none}
.role-toggle__opt--small{font-size:13px}
.role-toggle__opt input{accent-color: var(--accent)}

/* Sort buttons (clickable headers) */
.sort-btn{appearance:none;background:transparent;border:1px solid transparent;border-radius:10px;padding:8px 10px;cursor:pointer;color:inherit;font-weight:800}
.sort-btn:hover{border-color:rgba(255,255,255,0.10);background:rgba(255,255,255,0.03)}
.sort-btn:focus{outline:2px solid rgba(63,182,255,0.35);outline-offset:2px}
.sort-btn.is-active{border-color:rgba(63,182,255,0.35);background:rgba(63,182,255,0.10);color:#e6eef8}
.sort-ind{display:inline-block;margin-left:6px;opacity:0.8;font-weight:900}
.sort-btn.is-active .sort-ind{opacity:1}
.select{background:transparent;border:1px solid rgba(255,255,255,0.04);color:inherit;padding:8px;border-radius:6px;width:100%}

/* One-click value pills (replaces <select>) */
.pill{width:100%;text-align:left;background:rgba(0,0,0,0.10);border:1px solid rgba(255,255,255,0.05);color:inherit;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600}
.pill:hover{border-color:rgba(255,255,255,0.12);background:rgba(0,0,0,0.14)}
.pill:active{transform:translateY(1px)}
.pill:focus{outline:2px solid rgba(63,182,255,0.35);outline-offset:2px}

/* Segmented scales (color-coded slider) */
.scale{display:flex;gap:0;border-radius:12px;overflow:visible;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.10);position:relative}
.scale__seg{flex:1;min-width:0;border:0;background:transparent;color:rgba(230,238,248,0.80);padding:8px 6px;cursor:pointer;font-weight:800;letter-spacing:0.02em}
.scale__seg + .scale__seg{border-left:1px solid rgba(255,255,255,0.06)}
.scale__seg{position:relative}
.scale__seg::before{content:'';position:absolute;inset:0;background:var(--seg-bg, rgba(255,255,255,0.18));opacity:0.18}
.scale__seg:first-child::before{border-top-left-radius:11px;border-bottom-left-radius:11px}
.scale__seg:last-child::before{border-top-right-radius:11px;border-bottom-right-radius:11px}
.scale__seg span{position:relative;z-index:1;display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scale__seg:hover::before{opacity:0.28}
.scale__seg.is-active::before{opacity:0.60}
.scale__seg.is-active{color:#061016}
.scale__seg.is-active span{text-shadow:none}
.scale__seg:focus{outline:2px solid rgba(63,182,255,0.35);outline-offset:-2px}

.scale--exp .scale__seg{font-size:12px}
.scale--int .scale__seg{font-size:11px}

/* Tap-to-show tooltip (mobile-friendly) */
.scale__tip{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-8px);background:rgba(0,0,0,0.75);border:1px solid rgba(255,255,255,0.10);color:#e6eef8;padding:6px 8px;border-radius:10px;font-size:12px;font-weight:800;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 120ms ease;z-index:20}
.scale__tip.is-visible{opacity:1}
.progress{height:10px;background:rgba(255,255,255,0.03);border-radius:999px;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#7ce0ff);width:0%}
.search{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:var(--glass);color:inherit}
.footer{max-width:980px;margin:20px auto;padding:12px;color:var(--muted)}
.modal-root{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1000;background:transparent;backdrop-filter:none}
.modal-root[aria-hidden="false"]{pointer-events:auto;background:rgba(0,0,0,0.45);backdrop-filter: blur(2px)}
.modal{pointer-events:auto;background:var(--panel);padding:16px;border-radius:12px;max-width:720px;width:92%;max-height:calc(100vh - 32px);overflow:auto}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.03);color:var(--muted);}
.warn{color:var(--warn)}
.danger{color:var(--danger)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.compare-cell{padding:8px;border-radius:8px}
.row-red{background:linear-gradient(90deg, rgba(255,80,80,0.06), transparent);border:1px solid rgba(255,80,80,0.06)}
.row-green{background:linear-gradient(90deg, rgba(50,200,150,0.06), transparent);border:1px solid rgba(50,200,150,0.06)}
.row-amber{background:linear-gradient(90deg, rgba(255,170,50,0.06), transparent);border:1px solid rgba(255,170,50,0.06)}
@media(max-width:720px){
  .grid{grid-template-columns:1fr}
  .item-header{grid-template-columns:1fr 160px 160px;top:8px}
  .item-row{grid-template-columns:1fr 160px 160px}
  .q.q--show-get.q--show-do .item-row, .q.q--show-get.q--show-do .item-header{grid-template-columns:1fr 160px 160px}
  .q.q--show-get:not(.q--show-do) .item-row, .q.q--show-get:not(.q--show-do) .item-header{grid-template-columns:1fr 220px}
  .q.q--show-do:not(.q--show-get) .item-row, .q.q--show-do:not(.q--show-get) .item-header{grid-template-columns:1fr 220px}
  .q:not(.q--show-get):not(.q--show-do) .item-row, .q:not(.q--show-get):not(.q--show-do) .item-header{grid-template-columns:1fr}
}
.skip{position:absolute;left:-9999px}