/* ---- Color themes ---- Every color in this file is a var(--*) reference into this block, so a theme is nothing but a different set of values for the same names. The bare :root block is the "dark" theme (the original, unthemed look of this app) and doubles as the fallback for any unrecognized data-theme value; :root[data-theme="dark"] is intentionally not repeated since it would be identical. Applied by app.js setting data-theme on and persisted in localStorage - see THEME_STORAGE_KEY in app.js. */ :root { color-scheme: dark; --bg: #1e1f22; --bg-panel: #161719; --bg-surface: #202224; --bg-sunken: #16171a; --bg-sunken-alt: #1b1c1e; --bg-input: #26282b; --bg-input-hover: #34363a; --border: #2a2c2f; --border-strong: #3a3c40; --border-hover: #5a5c60; --text: #e3e3e3; --text-soft: #ccc; --text-muted: #999; --text-dim: #888; --text-faint: #666; --text-faintest: #444; --accent: #2f5f9e; --accent-hover: #3a6db0; --accent-text: #fff; --accent-text-soft: #cdddf2; --link: #6a9fd8; --stat-bg: #1b3a5c; --stat-text: #a9cdf0; --danger-bg: #4a1f1f; --danger-text: #f0a9a9; --success-text: #a9e0a9; --warning-bg: #2b2312; --warning-border: #4d3d1a; --warning-text: #e0c060; --warning-text-soft: #d8c797; --overlay: rgba(0, 0, 0, 0.6); --shadow: rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { color-scheme: light; --bg: #f4f5f7; --bg-panel: #ffffff; --bg-surface: #ffffff; --bg-sunken: #eceef1; --bg-sunken-alt: #eef0f3; --bg-input: #eceef1; --bg-input-hover: #dfe2e6; --border: #dde0e4; --border-strong: #c7cbd1; --border-hover: #a8adb5; --text: #1d1f23; --text-soft: #3a3d42; --text-muted: #6b6f76; --text-dim: #767a81; --text-faint: #9a9ea5; --text-faintest: #c3c6cb; --accent: #2f5f9e; --accent-hover: #3a6db0; --accent-text: #fff; --accent-text-soft: #dce8f7; --link: #2f6fb0; --stat-bg: #dce8f7; --stat-text: #1c4d85; --danger-bg: #fbdede; --danger-text: #b33a3a; --success-text: #2f8f4e; --warning-bg: #fdf1d6; --warning-border: #e8cf8e; --warning-text: #8a6a12; --warning-text-soft: #7a5e10; --overlay: rgba(20, 20, 25, 0.4); --shadow: rgba(20, 20, 25, 0.18); } /* Dark neutrals shared with the base theme - only the accent family (the colors that make a theme feel distinct) changes here and in Verdant below, so both stay easy to compare against the base values above. */ :root[data-theme="crimson"] { --accent: #a1443f; --accent-hover: #bd5850; --accent-text-soft: #f2d3ce; --link: #e0a06a; --stat-bg: #4a2620; --stat-text: #f0c2a9; } :root[data-theme="verdant"] { --accent: #3f7d52; --accent-hover: #4f9863; --accent-text-soft: #cdeed6; --link: #7ecb95; --stat-bg: #1b3a24; --stat-text: #a9e0b9; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } #app { display: flex; flex-direction: column; height: 100vh; } /* ---- Top nav ---- */ #topnav { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--border); flex-shrink: 0; } #topnav h1 { font-size: 15px; margin: 0 20px 0 0; color: var(--text); } .nav-tab { background: transparent; border: none; color: var(--text-muted); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; } .nav-tab:hover { background: var(--bg-input); color: var(--text); } .nav-tab.active { background: var(--accent); color: var(--accent-text); } /* ---- Search/Raw Data View dropdown (right-aligned in the top nav) ---- */ .nav-dropdown { position: relative; margin-left: auto; } /* Sits right after the Search/Raw Data View dropdown, which already claims the auto margin that pushes both of them to the right edge as a group - a second auto margin here would shove this one away from it instead. */ #user-menu-dropdown { margin-left: 8px; } #user-menu-menu { min-width: 200px; } #user-menu-username { padding: 6px 10px 2px; font-size: 12px; color: var(--text-faint); word-break: break-all; } .nav-dropdown-toggle { display: flex; align-items: center; gap: 6px; } .nav-dropdown-arrow { font-size: 10px; color: var(--text-faint); } .nav-dropdown-toggle.active .nav-dropdown-arrow { color: var(--accent-text-soft); } .nav-dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 170px; z-index: 50; box-shadow: 0 8px 24px var(--shadow); } .nav-dropdown-item { background: transparent; border: none; color: var(--text); padding: 8px 10px; border-radius: 5px; text-align: left; cursor: pointer; font-size: 14px; } .nav-dropdown-item:hover { background: var(--bg-input); } .nav-dropdown-item.active { background: var(--accent); color: var(--accent-text); } /* ---- Views ---- */ .view { display: none; flex: 1; min-height: 0; } .view.active { display: flex; } .view > main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 24px; overflow: hidden; } /* ---- Search filters panel ---- */ #filters { width: 220px; flex-shrink: 0; background: var(--bg-panel); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } #filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .filter-label-row { display: flex; align-items: center; justify-content: space-between; } .clear-one { background: transparent; border: none; color: var(--text-faintest); cursor: default; font-size: 12px; padding: 0 2px; text-transform: none; letter-spacing: normal; visibility: hidden; } .clear-one.active { color: var(--text-muted); cursor: pointer; visibility: visible; } .clear-one.active:hover { color: var(--danger-text); } #filters select, #filters input { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; } .range-row { display: flex; align-items: center; gap: 6px; color: var(--text-faint); } .range-row input { width: 0; flex: 1; } #f-clear, #f-add-stat { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 8px; border-radius: 6px; cursor: pointer; margin-top: 4px; } #f-clear:hover, #f-add-stat:hover { background: var(--bg-input-hover); } #stat-filters { display: flex; flex-direction: column; gap: 8px; } .stat-filter-row { display: flex; flex-direction: column; gap: 4px; background: var(--bg-sunken-alt); border: 1px solid var(--border); border-radius: 6px; padding: 8px; } .stat-filter-row .stat-row-top { display: flex; align-items: center; gap: 6px; } .stat-filter-row select { flex: 1; } .stat-filter-row .remove-stat { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 15px; padding: 0 4px; text-transform: none; } .stat-filter-row .remove-stat:hover { color: var(--danger-text); } /* ---- Search bar (shared shape for both views) ---- */ #search-bar, #raw-search-bar, #keyitems-search-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-shrink: 0; } #search-input, #raw-search-input, #keyitems-search-input { flex: 1; max-width: 480px; padding: 9px 14px; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); } #search-result-count, #raw-result-count, #keyitems-result-count { color: var(--text-dim); font-size: 13px; } /* ---- Search result cards ---- */ #search-results, #raw-results { flex: 1; overflow-y: auto; } .item-card { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; background: var(--bg-surface); padding: 12px 16px; } .item-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } /* ---- Item icons (in-game 32x32 art, shown at various sizes via CSS - there is no separate larger "inventory" image in the client, so every spot just scales the same source image) ---- */ .item-icon { display: inline-block; vertical-align: middle; background: var(--bg-sunken); border-radius: 3px; flex-shrink: 0; } .item-icon-card { width: 24px; height: 24px; } .item-icon-tooltip { width: 32px; height: 32px; } .item-icon-row { width: 18px; height: 18px; margin-right: 6px; } .item-icon-slot, .item-icon-placeholder { width: 40px; height: 40px; } .item-icon-placeholder { background: var(--bg-sunken); border: 1px dashed var(--border); border-radius: 3px; } .item-card-header .name { font-weight: 600; font-size: 15px; } .item-card-header .id { color: var(--link); font-size: 12px; } .item-card-header .category { margin-left: auto; font-size: 11px; color: var(--text-muted); background: var(--border); padding: 2px 8px; border-radius: 10px; } .item-card-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; } .item-card-meta .badge { background: var(--bg-input); border-radius: 4px; padding: 2px 6px; } .item-card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .stat-chip { background: var(--stat-bg); color: var(--stat-text); border-radius: 4px; padding: 2px 7px; font-size: 12px; } .stat-chip.negative { background: var(--danger-bg); color: var(--danger-text); } .item-card-description { white-space: pre-line; font-size: 13px; color: var(--text-soft); line-height: 1.5; } .item-card-plain-stats { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin-bottom: 8px; } .item-card-context-label { color: var(--text-dim); font-weight: 600; } .item-card-ah { margin-top: 8px; font-size: 12px; color: var(--text-dim); } /* ---- Raw data view (category sidebar + expandable rows) ---- */ #view-raw #sidebar { width: 220px; flex-shrink: 0; background: var(--bg-panel); padding: 16px 0 0; display: flex; flex-direction: column; } /* flex:1 fills whatever space the bottom Config block (see .sidebar-bottom) doesn't need, and scrolls internally - the Config button stays pinned at the sidebar's bottom edge no matter how long this list gets. */ #table-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; } .sidebar-bottom { padding: 8px 16px 16px; } #table-list li { padding: 8px 16px; cursor: pointer; display: flex; justify-content: space-between; font-size: 14px; } #table-list li:hover { background: var(--bg-input); } #table-list li.active { background: var(--accent); color: var(--accent-text); } #table-list li .count { color: var(--text-dim); font-size: 12px; } #table-list li.active .count { color: var(--accent-text-soft); } .result-row { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: var(--bg-surface); } .result-summary { padding: 10px 14px; cursor: pointer; display: flex; gap: 12px; align-items: baseline; } .result-summary:hover { background: var(--bg-input); } .result-summary .id { color: var(--link); font-size: 12px; min-width: 48px; } .result-summary .name { font-weight: 600; flex: 1; } .result-detail { display: none; padding: 10px 14px 14px; border-top: 1px solid var(--border); } .result-row.expanded .result-detail { display: block; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; } .detail-field { font-size: 13px; } .detail-field .key { color: var(--text-dim); margin-right: 6px; } .detail-field .val { color: var(--text); } /* ---- Shared pagination ---- */ .pagination { display: flex; align-items: center; gap: 12px; padding-top: 12px; flex-shrink: 0; } .pagination button { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 14px; border-radius: 6px; cursor: pointer; } .pagination button:disabled { opacity: 0.4; cursor: default; } .pagination span { color: var(--text-dim); font-size: 13px; } /* ---- Characters view ---- */ #char-sidebar { width: 220px; flex-shrink: 0; background: var(--bg-panel); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .char-picker-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .char-picker-label select { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 7px 8px; font-size: 13px; } /* The main/sub job picker that replaces the character select's old spot for job/level text - two selects sharing the same width, split evenly. */ #char-job-combo { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } #char-job-combo select { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 7px 8px; font-size: 13px; } .job-combo-slash { color: var(--text-muted); font-size: 13px; } /* Single-button sidebar nav (Import, Unacquired Gear, Spells, Trusts, Gear Sets, Gearswap) - each button both labels and switches to its section, so there's no separate heading + button pair to keep in sync. */ .char-nav-btn { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 8px; border-radius: 6px; cursor: pointer; text-align: left; width: 100%; } .char-nav-btn:hover { background: var(--bg-input-hover); } /* Shared by every left sidebar's bottom-pinned Config button (Search's #filters, Raw Data's #sidebar, Characters' #char-sidebar) - the spacer grows to fill the sidebar's remaining flex space, pushing the divider and button to the bottom regardless of how much nav content is above them. The divider's negative margin bleeds it to the sidebar's full width by exactly canceling out a 16px horizontal inset - true whether that inset is the sidebar's own padding (char-sidebar, filters) or a wrapper's (#sidebar's .sidebar-bottom, which has no padding of its own). */ .sidenav-spacer { flex: 1; } .sidenav-divider { border-top: 1px solid var(--border); margin: 0 -16px; } .char-nav-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } #char-import-status { font-size: 12px; color: var(--text-muted); /* Reserves the gap between the import button and the nav buttons below it permanently, whether or not a message is currently showing/still fading - so nothing shifts position when one appears or fades out. */ min-height: 16px; opacity: 0; transition: opacity 5s linear; } #char-import-status.error { color: var(--danger-text); } #char-import-status.success { color: var(--success-text); } #gearswap-import-modal-status { font-size: 12px; color: var(--text-muted); min-height: 16px; opacity: 0; transition: opacity 5s linear; } #gearswap-import-modal-status.error { color: var(--danger-text); } #gearswap-import-modal-status.success { color: var(--success-text); } /* Above the gear set tabs - lets the current job combo mirror another combo's gear sets instead of owning its own (see #gearset-link-select's wiring in app.js for the three checkbox states: free/source/follower). */ #gearset-link-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } #gearset-link-checkbox-label:has(#gearset-link-checkbox:disabled) { cursor: not-allowed; } #gearset-link-select { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; } #gearset-make-primary-btn { margin-left: auto; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; } #gearset-make-primary-btn:hover { background: var(--bg-input-hover); } #gearset-tabs-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } #gearset-tabs { display: flex; flex-wrap: wrap; gap: 8px; } #gearset-add-btn { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-soft); border-radius: 6px; padding: 8px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; } #gearset-add-btn:hover { border-color: var(--border-hover); color: var(--accent-text); } #gearswap-import-btn { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-soft); border-radius: 6px; padding: 8px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; } #gearswap-import-btn:hover { border-color: var(--border-hover); color: var(--text); } .gearset-tab { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; } .gearset-tab:hover { background: var(--bg-input); } .gearset-tab.active { background: var(--accent); color: var(--accent-text); } .gearset-tab.dragging { opacity: 0.4; } .gearset-tab-label-wrap { display: flex; align-items: center; gap: 6px; } .gearset-tab-assigned-badge { font-size: 12px; color: var(--text-muted); cursor: default; } .gearset-tab.active .gearset-tab-assigned-badge { color: var(--accent-text-soft); } .gearset-tab-buttons { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .gearset-tab .rename-gearset, .gearset-tab .remove-gearset { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 4px; } .gearset-tab.active .rename-gearset, .gearset-tab.active .remove-gearset { color: var(--accent-text-soft); } .gearset-tab .rename-gearset:hover { color: var(--stat-text); } .gearset-tab .remove-gearset:hover { color: var(--danger-text); } #view-characters main { overflow-y: auto; } .empty-message { color: var(--text-dim); font-size: 14px; padding: 40px 0; text-align: center; } .empty-message code { background: var(--bg-input); padding: 2px 6px; border-radius: 4px; } #equip-grid { display: grid; /* 4 columns matches the real in-game equip window: row 1 is Main/Sub/Range/Ammo, row 2 Head/Body/Hands/Legs, row 3 Feet/Neck/Waist/L.Ear, row 4 R.Ear/L.Ring/R.Ring/Back - EQUIP_SLOTS in app.js is already in that exact order. */ grid-template-columns: repeat(4, minmax(160px, 220px)); gap: 10px; margin-bottom: 20px; } .equip-slot { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: pointer; } .equip-slot:hover { border-color: var(--border-strong); background: var(--bg-input); } .equip-slot .slot-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; } .slot-item-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .slot-item-text { min-width: 0; } .equip-slot .slot-item-name { font-size: 14px; } .equip-slot.empty .slot-item-name { color: var(--text-faint); } .equip-slot .slot-item-goal { font-size: 11px; color: var(--warning-text); margin-top: 2px; } /* Shown when this slot has a specific augmented copy pinned (see slotAugments()), so it's clear at a glance which of possibly several owned rolls of this item is the one this gear set actually uses - not just on hover via the tooltip. */ .equip-slot .slot-item-augments { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; } #stat-totals, #goals-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; } #stat-totals h3, #goals-section h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } #stat-totals-body { display: flex; flex-wrap: wrap; gap: 6px; } #goals-body { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .goal-row { display: flex; justify-content: space-between; color: var(--text-soft); } .goal-row .goal-slot { color: var(--text-dim); font-size: 12px; } #unacquired-view h3 { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } #unacquired-body { display: flex; flex-direction: column; gap: 8px; } .unacquired-row { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; } /* Grid instead of flex, with a fixed-width name column, so the notes column below starts at the exact same x-position on every row - "in-line with each other" - rather than floating wherever each row's name happens to end. 240px comfortably fits every item name in the db (longest is 21 chars) plus icon and level suffix without wrapping. grid-column is set explicitly on all three children below because the notes column is sometimes absent from a row's HTML (no note for that item); without an explicit column, grid auto-placement would slide the set tags into the middle column instead of leaving it blank. */ .unacquired-summary { padding: 10px 14px; display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 12px; cursor: pointer; } .unacquired-summary:hover { background: var(--bg-input); } .unacquired-row .unacquired-name { grid-column: 1; color: var(--text); font-weight: 600; display: flex; align-items: center; } /* Sits between the name and the set tags, set off as its own column with a divider rather than reading as more name text. Always rendered (even with no note) so the divider itself stays consistent from row to row; min-width: 0 lets the text shrink past its natural width so the ellipsis below can kick in once the window gets tight, instead of forcing overflow. */ .unacquired-row .unacquired-notes-preview { grid-column: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-muted); font-size: 12px; font-style: italic; padding-left: 12px; border-left: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; } .unacquired-row .unacquired-sets { grid-column: 3; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .unacquired-row .unacquired-set-tag { background: var(--bg-input); color: var(--text-muted); border-radius: 4px; padding: 2px 7px; font-size: 11px; white-space: nowrap; } .unacquired-detail { display: none; padding: 0 14px 12px; border-top: 1px solid var(--border); margin-top: -1px; padding-top: 10px; } .unacquired-row.expanded .unacquired-detail { display: block; } /* ---- Chase Gear per-item Notes (inside .unacquired-detail) ---- */ .item-notes { background: var(--bg-sunken-alt); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-top: 10px; } .item-notes-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .item-notes-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .item-notes-edit-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-soft); border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; } .item-notes-edit-btn:hover { background: var(--bg-input); color: var(--text); } .item-notes-display { font-size: 13px; color: var(--text-soft); line-height: 1.5; white-space: pre-wrap; margin-top: 6px; } .item-notes-textarea { width: 100%; resize: vertical; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; margin-top: 6px; } .item-notes-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .item-notes-actions button { border-radius: 6px; padding: 6px 14px; font-size: 12px; cursor: pointer; } .item-notes-save-btn { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-text); } .item-notes-save-btn:hover { background: var(--accent-hover); } .item-notes-cancel-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-soft); } .item-notes-cancel-btn:hover { background: var(--bg-input); } #spells-view h3, #trusts-view h3 { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } #spells-job-filters { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; } #spells-job-checkboxes { display: flex; flex-wrap: wrap; gap: 6px; max-width: 620px; } /* Toggle-style job filter buttons - same visual language as .gearswap-toggle-btn: rest state is a plain outlined button, active (i.e. "checked") fills with the current theme's accent color. */ .job-filter-btn { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-soft); border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; } .job-filter-btn:hover { background: var(--bg-input-hover); color: var(--text); } .job-filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .list-options { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .list-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); cursor: pointer; user-select: none; white-space: nowrap; } #spells-result-count { display: block; color: var(--text-dim); font-size: 12px; margin-bottom: 8px; } #trusts-counts { display: flex; gap: 12px; } #trusts-acquired-count, #trusts-result-count { color: var(--text-dim); font-size: 12px; } #trusts-filters { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* ---- Key Items ---- */ #keyitems-view h3 { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } #keyitems-body { display: flex; flex-direction: column; gap: 16px; } .keyitems-group-title { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; } .keyitems-group-count { color: var(--text-faint); font-weight: normal; text-transform: none; letter-spacing: normal; } .keyitems-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; } .keyitems-row { font-size: 13px; color: var(--text-soft); padding: 4px 0; } .sortable-col { cursor: pointer; user-select: none; } .sortable-col:hover { color: var(--text-soft); } #spells-table-wrapper, #trusts-table-wrapper { overflow-x: auto; } /* Shared borderless-table look for the Characters tab's read-only data lists (Spells, Trusts, and any future ones) - dense rows, sticky uppercase header, hover highlight, no visible cell borders/gridlines. */ .char-data-table { width: 100%; border-collapse: collapse; } .char-data-table th, .char-data-table td { text-align: left; padding: 6px 12px; font-size: 13px; border: none; white-space: nowrap; } #spells-table th:nth-child(3), #spells-table td:nth-child(3) { white-space: normal; } .char-data-table thead th { position: sticky; top: 0; background: var(--bg-sunken); color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: normal; padding-bottom: 8px; } /* Applied via JS (row-alt) rather than :nth-child, since the Spells table interleaves hidden .spell-detail-row elements that would otherwise throw off the even/odd count without ever being visible themselves. */ .char-data-table tbody tr.row-alt { background: var(--bg-sunken-alt); } .char-data-table tbody tr:hover { background: var(--bg-surface); } .char-data-table .learned-cell { color: var(--success-text); text-align: center; } /* ---- Spells: Blue Magic "Learned From" expandable rows ---- */ .spell-row.has-sources { cursor: pointer; } .spell-expand-icon { display: inline-block; color: var(--text-faint); font-size: 11px; transition: transform 0.1s ease; } .spell-row.has-sources.expanded .spell-expand-icon { transform: rotate(90deg); } .spell-detail-row td { padding: 0 12px 12px; white-space: normal; border-top: none; } .spell-sources { background: var(--bg-sunken-alt); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; } .spell-sources-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; } .spell-source-row { display: flex; gap: 10px; padding: 3px 0; font-size: 13px; } .spell-source-monster { color: var(--text); font-weight: 600; flex-shrink: 0; min-width: 140px; } .spell-source-detail { color: var(--text-dim); } #gearswap-setup-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } #gearswap-setup-header h3 { margin: 0; } #gearswap-export-link { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; flex-shrink: 0; } #gearswap-export-link:hover { background: var(--bg-input-hover); } .gearswap-setup-intro { color: var(--text-muted); font-size: 13px; line-height: 1.5; max-width: 640px; margin: 0 0 16px; } .gearswap-setup-intro code { background: var(--bg-input); padding: 1px 5px; border-radius: 4px; } #gearswap-setup-body { display: flex; flex-direction: column; gap: 12px; } .gearswap-category { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } .gearswap-category-title { font-size: 14px; font-weight: 600; color: var(--text); } .gearswap-category-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; max-width: 560px; line-height: 1.4; } #gearswap-caveats { background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; max-width: 640px; } .gearswap-caveats-title { color: var(--warning-text); font-weight: 600; font-size: 13px; margin-bottom: 6px; } #gearswap-caveats ul { margin: 0; padding-left: 18px; color: var(--warning-text-soft); font-size: 12px; line-height: 1.6; } .gearswap-manual-note { font-size: 12px; color: var(--warning-text); margin-top: 8px; line-height: 1.4; max-width: 560px; } .gearswap-default-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--text-soft); } .gearswap-default-row select, .gearswap-subset-select { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; } .gearswap-subsets { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .gearswap-subset-row { display: flex; align-items: center; gap: 8px; } .gearswap-subset-label { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; flex: 1; min-width: 0; } .gearswap-subset-select { flex-shrink: 0; width: 200px; } .gearswap-subset-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px 6px; flex-shrink: 0; } .gearswap-subset-remove:hover { color: var(--danger-text); } .gearswap-add-subset { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; margin-top: 10px; } .gearswap-add-subset:hover { border-color: var(--border-hover); color: var(--text-soft); } /* ---- Item picker overlay ---- */ #item-picker-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 100; } #item-picker { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; width: 600px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; padding: 16px; } #item-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } #item-picker-header span { font-weight: 600; font-size: 15px; } #item-picker-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; } #item-picker-search { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px; } #item-picker-unequip { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--danger-text); border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; margin-bottom: 10px; align-self: flex-start; } #item-picker-unequip:hover { background: var(--bg-input-hover); } #item-picker-owned, #item-picker-all { overflow-y: auto; } #item-picker-owned { max-height: 30%; /* Without a floor, a slot with few owned items (e.g. Back/Cape) shrinks to fit them - sometimes just one visible row - so scrolling to see the rest jumps by whatever increment the browser's wheel step is (Firefox's default is 3 lines), overshooting past items in a box that short. ~4 item rows plus the sticky header, always. */ min-height: 140px; margin-bottom: 10px; } #item-picker-all { flex: 1; } #item-picker h4 { position: sticky; top: 0; background: var(--bg); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; margin: 0; padding: 4px 0 6px; z-index: 1; } .picker-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; } .picker-item-label { display: flex; align-items: center; min-width: 0; } .picker-item-copy { color: var(--text-muted); font-size: 11px; font-style: italic; } .picker-item:hover { background: var(--bg-input); } .picker-item .picker-item-owned-tag { font-size: 11px; color: var(--success-text); } .picker-empty { color: var(--text-faint); font-size: 12px; padding: 6px 8px; } /* ---- Item hover tooltip (Wowhead-style) ---- */ #item-tooltip { display: none; position: fixed; z-index: 200; width: 320px; max-width: 90vw; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); padding: 12px 14px; pointer-events: none; font-size: 13px; } #item-tooltip.visible { display: block; } .tooltip-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } #item-tooltip .tooltip-name { font-weight: 600; font-size: 14px; color: var(--text); } .tooltip-keyitem-category { font-size: 12px; color: var(--text-dim); } .tooltip-keyitem-description { white-space: pre-line; font-size: 13px; color: var(--text-soft); line-height: 1.5; margin-top: 8px; } .tooltip-augments { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .tooltip-augments-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-text); margin-bottom: 4px; } .tooltip-augments-copy { font-size: 11px; color: var(--text-faint); margin-top: 6px; } .tooltip-augments-copy:first-child { margin-top: 0; } .tooltip-augments-list { font-size: 13px; color: var(--text-soft); line-height: 1.5; } .hoverable-item { cursor: help; } .hoverable-item:hover { text-decoration: underline dotted; } /* ---- Gearswap export modal ---- */ #gearswap-export-modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 150; } #gearswap-export-modal { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; width: 440px; max-width: 90vw; padding: 16px; display: flex; flex-direction: column; gap: 16px; } #gearswap-export-modal-header { display: flex; align-items: center; justify-content: space-between; } #gearswap-export-modal-header span { font-weight: 600; font-size: 15px; } #gearswap-export-modal-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; } .gearswap-export-field { display: flex; flex-direction: column; gap: 6px; } .gearswap-export-field-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .gearswap-export-field-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } .gearswap-export-field select { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 8px 10px; font-size: 13px; } .gearswap-toggle-group { display: flex; gap: 8px; } .gearswap-toggle-btn { flex: 1; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text-soft); border-radius: 6px; padding: 10px; font-size: 13px; cursor: pointer; text-align: center; } .gearswap-toggle-btn:hover { background: var(--bg-input-hover); } .gearswap-toggle-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } #gearswap-export-filename-preview { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12px; font-family: monospace; color: var(--stat-text); min-height: 16px; } #gearswap-export-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } #gearswap-export-modal-actions button { border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; } #gearswap-export-modal-cancel { background: transparent; border: 1px solid var(--border-strong); color: var(--text-soft); } #gearswap-export-modal-cancel:hover { background: var(--bg-input); } #gearswap-export-modal-submit { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-text); } #gearswap-export-modal-submit:hover:not(:disabled) { background: var(--accent-hover); } #gearswap-export-modal-submit:disabled { background: var(--border); border-color: var(--border); color: var(--text-faint); cursor: not-allowed; } /* ---- Config view ---- */ #view-config h3 { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .config-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; max-width: 640px; } .config-section-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; } .config-section-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; } .config-section-desc code { background: var(--bg-input); padding: 1px 5px; border-radius: 4px; } .config-section button { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; } .config-section button:hover:not(:disabled) { background: var(--bg-input-hover); } .config-section button:disabled { opacity: 0.5; cursor: default; } #config-rescan-status { font-size: 12px; color: var(--text-dim); margin-top: 8px; } #config-rescan-status.error { color: var(--danger-text); } #config-rescan-status.success { color: var(--success-text); } #config-rescan-log { display: block; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-top: 10px; max-height: 220px; overflow-y: auto; font-size: 12px; line-height: 1.5; color: var(--text-soft); white-space: pre-wrap; } #config-theme-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .theme-swatch { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; } .theme-swatch:hover { background: var(--bg-input-hover); } .theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .theme-swatch-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(128, 128, 128, 0.3); } /* ---- Gearswap import modal ---- */ #gearswap-import-modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 150; } #gearswap-import-modal { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; width: 560px; max-width: 90vw; max-height: 80vh; padding: 16px; display: flex; flex-direction: column; gap: 14px; } #gearswap-import-modal-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #gearswap-import-modal-header span { font-weight: 600; font-size: 15px; } #gearswap-import-modal-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; } .gearswap-import-intro { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin: 0; flex-shrink: 0; } .gearswap-import-intro code { background: var(--bg-input); padding: 1px 5px; border-radius: 4px; } #gearswap-import-sets-count { color: var(--text-dim); font-size: 12px; flex-shrink: 0; } #gearswap-import-sets-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; } .gearswap-import-set-row { /* flex-shrink:0 is load-bearing: this is a flex item (column) of #gearswap-import-sets-list, and overflow: hidden below makes its automatic flex min-height resolve to 0 instead of its content size (per the flexbox spec) - without this, a file with enough detected sets that the list's natural height exceeds the modal's max-height gets every row squashed down toward that 0 instead of scrolling, clipping away all their text (verified: reproduces with 31 sets, never with the 6-set test file, since that one always fit). */ flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } /* Same toggle-button language as .job-filter-btn/.theme-swatch - rest state is a plain outlined row, active (i.e. "selected to import") fills with the current theme's accent color. Selecting a set and expanding it to see its items are independent actions - see the nested .gearswap-import-set-expand-btn, which stops its click from also toggling selection. */ .gearswap-import-set-summary { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--bg-input); color: var(--text); padding: 8px 12px; font-size: 13px; cursor: pointer; text-align: left; } .gearswap-import-set-summary:hover { background: var(--bg-input-hover); } .gearswap-import-set-summary.active { background: var(--accent); color: var(--accent-text); } .gearswap-import-set-expand-btn { flex-shrink: 0; background: transparent; border: none; color: inherit; opacity: 0.7; cursor: pointer; font-size: 11px; padding: 2px 4px; transition: transform 0.1s ease; } .gearswap-import-set-expand-btn:hover { opacity: 1; } .gearswap-import-set-row.expanded .gearswap-import-set-expand-btn { transform: rotate(90deg); } .gearswap-import-set-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gearswap-import-set-meta { flex-shrink: 0; margin-left: auto; font-size: 12px; color: var(--text-dim); } .gearswap-import-set-summary.active .gearswap-import-set-meta { color: var(--accent-text-soft); } .gearswap-import-unmatched { color: var(--warning-text); } .gearswap-import-set-summary.active .gearswap-import-unmatched { color: var(--accent-text-soft); } .gearswap-import-overwrite { color: var(--warning-text); font-style: italic; } .gearswap-import-set-summary.active .gearswap-import-overwrite { color: var(--accent-text-soft); } .gearswap-import-set-detail { display: none; padding: 4px 12px 8px 34px; border-top: 1px solid var(--border); } .gearswap-import-set-row.expanded .gearswap-import-set-detail { display: block; } .gearswap-import-slot-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12px; } .gearswap-import-slot-label { color: var(--text-muted); min-width: 80px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.03em; font-size: 11px; } .gearswap-import-slot-item { color: var(--text-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gearswap-import-slot-badge { flex-shrink: 0; margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 10px; } .gearswap-import-slot-badge.unmatched { background: var(--danger-bg); color: var(--danger-text); } .gearswap-import-slot-badge.unobtained { background: var(--warning-bg); color: var(--warning-text); } #gearswap-import-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; } #gearswap-import-modal-actions button { border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; } #gearswap-import-modal-cancel { background: transparent; border: 1px solid var(--border-strong); color: var(--text-soft); } #gearswap-import-modal-cancel:hover { background: var(--bg-input); } #gearswap-import-modal-submit { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-text); } #gearswap-import-modal-submit:hover:not(:disabled) { background: var(--accent-hover); } #gearswap-import-modal-submit:disabled { background: var(--border); border-color: var(--border); color: var(--text-faint); cursor: not-allowed; } /* ---- Generic dialog modal (alert/confirm/prompt replacements) ---- */ /* One shared overlay+box, reused for all three - see showAlertModal()/ showConfirmModal()/showPromptModal() in app.js, which toggle the input field and Cancel button per mode rather than needing three separate markup blocks. */ #dialog-modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 200; } #dialog-modal { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; width: 420px; max-width: 90vw; padding: 18px; display: flex; flex-direction: column; gap: 14px; } #dialog-modal-message { font-size: 14px; line-height: 1.5; white-space: pre-wrap; } #dialog-modal-input { padding: 9px 12px; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); } #dialog-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } #dialog-modal-actions button { border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; } #dialog-modal-cancel-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-soft); } #dialog-modal-cancel-btn:hover { background: var(--bg-input); } #dialog-modal-confirm-btn { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-text); } #dialog-modal-confirm-btn:hover { background: var(--accent-hover); } /* ---- Login page ---- */ #login-page { height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } #login-card { display: flex; flex-direction: column; gap: 14px; width: 300px; padding: 28px 24px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); } #login-title { margin: 0 0 4px; text-align: center; } #login-title-main { /* Commercial Monotype font used in FFXI's own logo - not bundled here, so this only renders as intended on a machine that already has it installed; otherwise it falls back to the serif stack below. */ font-family: "Runic MT Condensed", "Times New Roman", serif; display: block; font-size: 26px; color: var(--text); } #login-title-sub { display: block; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); } .login-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); } .login-field input { padding: 9px 12px; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); font-family: inherit; } .login-error { background: var(--danger-bg); color: var(--danger-text); padding: 8px 12px; border-radius: 6px; font-size: 13px; } #login-submit-btn { margin-top: 6px; padding: 9px; background: var(--accent); color: var(--accent-text); border: none; border-radius: 6px; cursor: pointer; font-size: 14px; } #login-submit-btn:hover { background: var(--accent-hover); } /* ---- Reset password modal ---- */ #reset-password-modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 150; } #reset-password-modal { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; width: 360px; max-width: 90vw; padding: 16px; display: flex; flex-direction: column; gap: 16px; } #reset-password-modal-header { display: flex; align-items: center; justify-content: space-between; } #reset-password-modal-header span { font-weight: 600; font-size: 15px; } #reset-password-modal-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; } #reset-password-status { font-size: 12px; min-height: 16px; opacity: 0; } #reset-password-status.error { color: var(--danger-text); opacity: 1; } #reset-password-status.success { color: var(--success-text); opacity: 1; } #reset-password-modal .gearswap-export-field input { background: var(--bg-input); border: 1px solid var(--border-strong); color: var(--text); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; } #reset-password-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } #reset-password-modal-actions button { border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; } #reset-password-cancel-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-soft); } #reset-password-cancel-btn:hover { background: var(--bg-input); } #reset-password-submit-btn { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-text); } #reset-password-submit-btn:hover { background: var(--accent-hover); }