:root {
      --bg:       #0f1117;
      --card:     #1a1d27;
      --card2:    #1e2130;
      --accent:   #6366f1;
      --accent2:  #8b5cf6;
      --success:  #22c55e;
      --danger:   #ef4444;
      --border:   #2d3148;
      --text:     #e2e8f0;
      --muted:    #64748b;
    }
    * { box-sizing: border-box; }
    body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; margin: 0; height: 100vh; display: flex; flex-direction: column; }

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--card); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .field { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 8px 10px; width: 100%; font-size: 14px; transition: border-color .2s; outline: none; }
    .field:focus { border-color: var(--accent); }
    .field::placeholder { color: var(--muted); }
    select.field option { background: var(--card); }
    textarea.field { resize: vertical; }
    input[type="checkbox"].cb { width: 16px; height: 16px; cursor: pointer; }

    /* lucide icon sizes — the class is copied onto the generated <svg> */
    .ic-11 { width: 11px; height: 11px; }
    .ic-13 { width: 13px; height: 13px; }
    .ic-14 { width: 14px; height: 14px; }
    .ic-15 { width: 15px; height: 15px; }
    .ic-16 { width: 16px; height: 16px; }
    .ic-18 { width: 18px; height: 18px; }

    /* Keyboard focus ring (mouse clicks stay ringless via :focus-visible) */
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--accent); outline-offset: 1px;
    }
    tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

    #navbar { background: var(--card); border-bottom: 1px solid var(--border); padding: 0 20px; height: 56px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 50; }
    #statusbar { height: 30px; background: #12141e; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; font-size: 12px; flex-shrink: 0; }
    #main { display: flex; flex: 1; overflow: hidden; }
    #sidebar, #itemsSidebar, #propsSidebar, #requestsSidebar { width: 260px; min-width: 260px; background: var(--card); border-right: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
    #content, #itemsContent, #propsContent, #requestsContent { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    #tableWrap, #itemsTableWrap, #propsTableWrap, #requestsTableWrap { flex: 1; overflow: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    thead th { position: sticky; top: 0; background: #12141e; padding: 10px 12px; text-align: left; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
    thead th:hover { color: var(--text); }
    thead th .sort-icon { display: inline-block; margin-left: 4px; opacity: .4; }
    thead th.sort-asc .sort-icon::after { content: '↑'; opacity: 1; }
    thead th.sort-desc .sort-icon::after { content: '↓'; opacity: 1; }
    tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
    tbody tr:nth-child(even) { background: var(--card2); }
    tbody tr:nth-child(odd)  { background: var(--card); }
    tbody tr:hover, tbody tr.selected { background: #252840; }
    tbody td { padding: 9px 12px; vertical-align: middle; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .badge { display: inline-block; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 700; text-align: center; }
    .badge-indigo { background: #312e81; color: #a5b4fc; }
    .badge-violet { background: #2e1065; color: #c4b5fd; }
    .badge-tier-1 { background: #064e3b; color: #86efac; }
    .badge-tier-2 { background: #713f12; color: #fcd34d; }
    .badge-tier-3 { background: #7c2d12; color: #fed7aa; }
    .badge-tier-4 { background: #7f1d1d; color: #fca5a5; }

    .btn-icon { border: none; cursor: pointer; border-radius: 5px; padding: 5px 7px; transition: background .15s; line-height: 1; display: inline-flex; align-items: center; }
    .btn-edit  { background: #312e81; color: #a5b4fc; }
    .btn-edit:hover { background: #3730a3; }
    .btn-del   { background: #450a0a; color: #fca5a5; }
    .btn-del:hover { background: #7f1d1d; }
    .btn-icon.reward-expand-btn { background: #312e81; color: #a5b4fc; padding: 4px 6px; flex-shrink: 0; }
    .btn-icon.drawer-close { background: transparent; color: var(--muted); border: none; cursor: pointer; }
    .ext-link { color: #818cf8; text-decoration: underline; }

    .btn { border: none; cursor: pointer; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background .15s; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: #4f46e5; }
    .btn-success { background: #166534; color: #86efac; }
    .btn-success:hover { background: #15803d; }
    .btn-ghost   { background: transparent; color: var(--muted); border: 1px solid var(--border); }
    .btn-ghost:hover { color: var(--text); background: var(--card2); }
    .btn-danger  { background: #7f1d1d; color: #fca5a5; }
    .btn-danger:hover { background: #991b1b; }
    .btn-sm { padding: 5px 10px; font-size: 12px; }
    .btn:disabled, .btn-icon:disabled { opacity: .4; cursor: default; pointer-events: none; }

    #drawer { position: fixed; top: 0; right: 0; height: 100%; width: 500px; background: var(--card); border-left: 1px solid var(--border); z-index: 100; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; overflow: hidden; }
    #drawer.open { transform: translateX(0); }
    #drawerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; display: none; }
    #drawerOverlay.open { display: block; }
    #drawerHeader { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    #drawerBody { padding: 20px; overflow-y: auto; flex: 1; }
    #drawerFooter { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }

    #itemDrawer, #propDrawer { position: fixed; top: 0; right: 0; height: 100%; width: 500px; background: var(--card); border-left: 1px solid var(--border); z-index: 100; transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; overflow: hidden; }
    #itemDrawer.open, #propDrawer.open { transform: translateX(0); }
    #itemDrawerOverlay, #propDrawerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; display: none; }
    #itemDrawerOverlay.open, #propDrawerOverlay.open { display: block; }

    #detailStrip { background: var(--card); border-top: 2px solid var(--accent); padding: 16px 20px; display: none; flex-shrink: 0; max-height: 240px; overflow-y: auto; }
    #detailStrip.open { display: block; }

    /* confirm/delete modal */
    #confirmModal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; display: none; align-items: center; justify-content: center; }
    #confirmModal.open { display: flex; }
    #confirmBox { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 28px; width: 360px; text-align: center; }

    /* Row expansion for rewards */
    .reward-detail-row { display: none; background: var(--card2); border-top: 1px solid var(--border); }
    .reward-detail-row.open { display: table-row; }
    .reward-detail-cell { padding: 12px 12px; color: var(--text); font-size: 13px; }
    .reward-detail-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .reward-item-tag { background: var(--accent); color: #fff; border-radius: 4px; padding: 4px 10px; font-size: 12px; font-weight: 500; }

    /* Add-Item modal */
    #addItemModal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 300; display: none; align-items: center; justify-content: center; }
    #addItemModal.open { display: flex; }
    #addItemBox { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 28px; width: 400px; max-height: 88vh; overflow-y: auto; }

    /* Request-a-module modal */
    #requestModuleModal { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 300; display: none; align-items: center; justify-content: center; }
    #requestModuleModal.open { display: flex; }
    #requestModuleBox { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 28px; width: 420px; max-height: 88vh; overflow-y: auto; }

    /* Hidden for non-curator sessions (see applyRoleUI in app.js) */
    body:not(.is-curator) [data-curator-only] { display: none !important; }

    /* Open-request count on the Requests tab */
    .req-count { background: var(--accent); color: #fff; border-radius: 10px; font-size: 10px;
      font-weight: 700; padding: 1px 6px; line-height: 1.4; }

    /* Requests table status pills */
    .req-status { text-transform: capitalize; }
    .req-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
    .req-badge.open     { background: #1e293b; color: #93c5fd; }
    .req-badge.accepted { background: #14342b; color: #6ee7b7; }
    .req-badge.declined { background: #3b1f24; color: #fca5a5; }
    .req-badge.done     { background: #262626; color: #a3a3a3; }

    /* Tab switcher (Modules / Items) */
    .tab-switcher { display: flex; gap: 3px; background: #12141e; border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
    .tab-btn { border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { background: var(--accent); color: #fff; }
    .app-view { display: none; flex: 1; overflow: hidden; width: 100%; }
    .app-view.active { display: flex; }

    /* Reward typeahead */
    .reward-wrap { position: relative; }
    .reward-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin-bottom: 8px; }
    .reward-chip { display: inline-flex; align-items: center; gap: 5px; background: #1e1b4b; color: #a5b4fc; border: 1px solid #3730a3; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .reward-chip .chip-x { cursor: pointer; opacity: .7; line-height: 1; background: none; border: none; color: inherit; padding: 0; display: inline-flex; align-items: center; }
    .reward-chip .chip-x:hover { opacity: 1; }

    /* Tier chips with color coding */
    .tier-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
    .tier-chip-1 { background: #064e3b; color: #86efac; border: 1px solid #10b981; }
    .tier-chip-2 { background: #713f12; color: #fcd34d; border: 1px solid #f59e0b; }
    .tier-chip-3 { background: #7c2d12; color: #fed7aa; border: 1px solid #f97316; }
    .tier-chip-4 { background: #7f1d1d; color: #fca5a5; border: 1px solid #ef4444; }
    .tier-chip .chip-x { cursor: pointer; opacity: .7; line-height: 1; background: none; border: none; color: inherit; padding: 0; display: inline-flex; align-items: center; }
    .tier-chip .chip-x:hover { opacity: 1; }
    /* Typeahead dropdown (reward + item-property widgets — see typeahead.js) */
    .ta-dropdown { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: #1a1d27; border: 1px solid var(--border); border-radius: 8px; z-index: 400; display: none; max-height: 220px; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
    .ta-dropdown.open { display: block; }
    .dd-item { padding: 9px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
    .dd-item:last-child { border-bottom: none; }
    .dd-item:hover, .dd-item.dd-focus { background: #252840; }
    .dd-item .dd-name { color: var(--text); font-weight: 500; }
    .dd-item .dd-sub  { color: var(--muted); font-size: 11px; }
    .dd-item.dd-create { color: #86efac; background: #14532d22; }
    .dd-item.dd-create:hover { background: #14532d55; }
    .dd-empty { padding: 12px 14px; color: var(--muted); font-size: 13px; text-align: center; }

    #toastArea { position: fixed; top: 16px; right: 16px; z-index: 500; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
    .toast { border-radius: 8px; padding: 12px 18px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 240px; max-width: 340px; animation: slideIn .25s ease; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
    .toast-success { background: #14532d; color: #86efac; border: 1px solid #166534; }
    .toast-error   { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; }
    .toast-info    { background: #1e1b4b; color: #a5b4fc; border: 1px solid #3730a3; }
    @keyframes slideIn { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

    .stat-card { background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
    .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
    .stat-value { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .stat-col { display: flex; flex-direction: column; gap: 8px; }
    .tier-count-row { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
    .tier-count-line { display: flex; align-items: center; justify-content: space-between; }
    .tier-count-line .badge { font-size: 11px; padding: 3px 7px; }
    .tier-count-n { font-size: 15px; font-weight: 700; color: var(--text); }

    label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 5px; }

    /* --- helpers extracted from inline styles (batch 14) --- */
    .muted { color: var(--muted); }
    .req { color: var(--danger); }
    .fld { margin-top: 14px; }
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .row-6 { display: flex; gap: 6px; }
    .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
    .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
    .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    #bulkBar, #itemBulkBar { display: none; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card2); border-bottom: 1px solid var(--border); font-size: 13px; }
    #bulkBar.open, #itemBulkBar.open { display: flex; }
    #bulkBar .field, #itemBulkBar .field { width: auto; flex: 0 0 auto; padding: 5px 8px; font-size: 12px; }
    #bulkBar .spacer, #itemBulkBar .spacer { margin-left: auto; }

    #detailStrip .ds-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    #detailStrip .ds-body { flex: 1; }
    #detailStrip .ds-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    #detailStrip .ds-code { font-weight: 700; font-size: 16px; }
    #detailStrip .ds-name { color: var(--muted); font-size: 13px; }
    #detailStrip .ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; font-size: 12px; }
    #detailStrip .ds-line { margin-top: 10px; font-size: 12px; }
    #detailStrip .ds-line.tight { margin-top: 6px; }
    #detailStrip .ds-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .ds-val { color: var(--text); }

    .setting-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

    #emptyState, #itemsEmptyState, #propsEmptyState, #requestsEmptyState { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 10px; padding: 60px; text-align: center; }
    .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Show/hide toggles: JS flips the `hidden` property; this beats the
       id-selector `display` rules above (e.g. #emptyState { display:flex }). */
    [hidden] { display: none !important; }
    #loadingState, #itemsLoadingState { display: flex; align-items: center; justify-content: center; height: 200px; gap: 12px; }
    #tierMultiContainer, #aplMultiContainer { margin-top: 14px; }

    /* mobile hamburger — CSS-only, no JS on resize */
    #mobMenuBtn { display: none; }

    /* small layout utilities (were inline styles on sidebar buttons) */
    .w-full { width: 100%; }
    .flex-1 { flex: 1; }

    @media (max-width: 768px) {
      #sidebar, #itemsSidebar, #propsSidebar, #requestsSidebar { display: none; }
      #sidebar.mob-open, #itemsSidebar.mob-open, #propsSidebar.mob-open, #requestsSidebar.mob-open { display: flex; position: fixed; top: 86px; left: 0; bottom: 0; z-index: 40; }
      #drawer, #itemDrawer, #propDrawer { width: 100%; }
      #mobMenuBtn { display: inline-flex; }
    }