From 3bec5c37c54758ea25f65a9705066afcba4f9207 Mon Sep 17 00:00:00 2001
From: Collin Pendleton <collinp@collinpendleton.com>
Date: Tue, 21 Jul 2026 09:11:18 -0500
Subject: [PATCH] Fix a few minor layout issues

---
 client/index.html                        | 271 +++------
 client/src/components/auth.js            |  13 +
 client/src/components/deckBuilder.js     | 123 +++-
 client/src/components/decks.js           |  10 +-
 client/src/components/inventory.js       |  10 +-
 client/src/components/priceMonitoring.js |  10 +-
 client/src/components/settings.js        | 111 +++-
 client/src/components/sharedDeck.js      |  16 +-
 client/src/services/api.js               |  17 +
 client/src/styles/main.css               | 745 ++++++++++++++++++++---
 client/src/utils/ui.js                   | 220 +++++--
 package-lock.json                        |  25 +-
 src/routes/admin.js                      |  25 +
 src/routes/auth.js                       |  13 +
 src/services/cardService.js              |   4 +-
 src/services/deckService.js              |  10 +-
 src/services/settingsService.js          |  63 ++
 17 files changed, 1284 insertions(+), 402 deletions(-)
 create mode 100644 src/services/settingsService.js

diff --git a/client/index.html b/client/index.html
index bc714f1..9aa10ef 100644
--- a/client/index.html
+++ b/client/index.html
@@ -61,31 +61,32 @@
                         />
                     </div>
                     <div class="nav-links">
-                        <a href="#" data-page="decks" class="nav-link active">
+                        <a href="#" data-page="decks" class="nav-link active" title="My Decks">
                             <i class="ph ph-cards nav-icon"></i>
                             <span class="nav-text">My Decks</span>
                         </a>
-                        <a href="#" data-page="cards" class="nav-link">
+                        <a href="#" data-page="cards" class="nav-link" title="Browse Cards">
                             <i class="ph ph-magnifying-glass nav-icon"></i>
                             <span class="nav-text">Browse Cards</span>
                         </a>
-                        <a href="#" data-page="shopping" class="nav-link">
+                        <a href="#" data-page="shopping" class="nav-link" title="Shopping">
                             <i class="ph ph-shopping-cart nav-icon"></i>
                             <span class="nav-text">Shopping</span>
                         </a>
-                        <a href="#" data-page="inventory" class="nav-link">
+                        <a href="#" data-page="inventory" class="nav-link" title="Inventory">
                             <i class="ph ph-archive nav-icon"></i>
                             <span class="nav-text">Inventory</span>
                         </a>
-                        <a href="#" data-page="price-monitoring" class="nav-link">
+                        <a href="#" data-page="price-monitoring" class="nav-link" title="Price Watch">
                             <i class="ph ph-bell-ringing nav-icon"></i>
                             <span class="nav-text">Price Watch</span>
                         </a>
-                        <a href="#" data-page="settings" class="nav-link">
+                        <a href="#" data-page="settings" class="nav-link" title="Settings">
                             <i class="ph ph-gear nav-icon"></i>
                             <span class="nav-text">Settings</span>
                         </a>
-                        <div class="user-menu">
+                    </div>
+                    <div class="user-menu">
                             <button
                                 id="user-avatar-btn"
                                 class="user-avatar-btn"
@@ -195,7 +196,6 @@
                             </div>
                         </div>
                     </div>
-                </div>
             </nav>
 
             <!-- Auth Page -->
@@ -436,7 +436,7 @@ <h2>My Decks</h2>
                                     id="deck-filter-search"
                                     placeholder="Filter cards in deck..."
                                     autocomplete="off"
-                                    style="width: 100%; padding: 0.5rem 2rem 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary); font-size: 0.9rem;"
+                                    style="width: 100%; padding: 0.5rem 2rem 0.5rem 0.75rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-secondary); font-size: 0.9rem;"
                                 />
                                 <button
                                     id="deck-filter-clear"
@@ -555,40 +555,15 @@ <h2>Browse Cards</h2>
                     />
                     <button
                         id="cards-browse-clear"
-                        class="hidden"
-                        style="position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.25rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;"
+                        class="search-clear-btn hidden"
                         title="Clear search"
                     >
                         <i class="ph ph-x"></i>
                     </button>
-                    <div
-                        class="filters"
-                        style="
-                            display: flex;
-                            gap: 1rem;
-                            margin-top: 1rem;
-                            flex-wrap: wrap;
-                        "
-                    >
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >Sort By</label
-                            >
-                            <select
-                                id="filter-sort"
-                                class="filter-select"
-                                style="
-                                    padding: 0.5rem;
-                                    border-radius: 6px;
-                                    border: 1px solid var(--border-color);
-                                    background: var(--bg-secondary);
-                                "
-                            >
+                    <div class="filter-bar">
+                        <div class="filter-field">
+                            <label class="field-label">Sort By</label>
+                            <select id="filter-sort" class="filter-select">
                                 <option value="random">Random</option>
                                 <option value="name">Alphabetical</option>
                                 <option value="cmc">Mana Value</option>
@@ -598,25 +573,9 @@ <h2>Browse Cards</h2>
                                 </option>
                             </select>
                         </div>
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >Card Type</label
-                            >
-                            <select
-                                id="filter-types"
-                                class="filter-select"
-                                style="
-                                    padding: 0.5rem;
-                                    border-radius: 6px;
-                                    border: 1px solid var(--border-color);
-                                    background: var(--bg-secondary);
-                                "
-                            >
+                        <div class="filter-field">
+                            <label class="field-label">Card Type</label>
+                            <select id="filter-types" class="filter-select">
                                 <option value="all">All Types</option>
                                 <option value="Creature">Creature</option>
                                 <option value="Instant">Instant</option>
@@ -629,90 +588,51 @@ <h2>Browse Cards</h2>
                                 <option value="Land">Land</option>
                             </select>
                         </div>
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >Rarity</label
-                            >
+                        <div class="filter-field">
+                            <label class="field-label">Rarity</label>
                             <div id="filter-rarity" class="rarity-filter-group" style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-                                <label class="rarity-checkbox" style="cursor: pointer;">
-                                    <input type="checkbox" value="common" style="display: none;" />
-                                    <span class="rarity-checkbox-box" style="display: inline-block; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: var(--bg-tertiary); color: var(--text-secondary); border: 2px solid transparent; transition: all 0.2s;">C</span>
+                                <label class="rarity-checkbox">
+                                    <input type="checkbox" value="common" />
+                                    <span class="rarity-checkbox-box rarity-c">C</span>
                                 </label>
-                                <label class="rarity-checkbox" style="cursor: pointer;">
-                                    <input type="checkbox" value="uncommon" style="display: none;" />
-                                    <span class="rarity-checkbox-box" style="display: inline-block; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: #71717a; color: white; border: 2px solid transparent; transition: all 0.2s;">U</span>
+                                <label class="rarity-checkbox">
+                                    <input type="checkbox" value="uncommon" />
+                                    <span class="rarity-checkbox-box rarity-u">U</span>
                                 </label>
-                                <label class="rarity-checkbox" style="cursor: pointer;">
-                                    <input type="checkbox" value="rare" style="display: none;" />
-                                    <span class="rarity-checkbox-box" style="display: inline-block; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: #ca8a04; color: white; border: 2px solid transparent; transition: all 0.2s;">R</span>
+                                <label class="rarity-checkbox">
+                                    <input type="checkbox" value="rare" />
+                                    <span class="rarity-checkbox-box rarity-r">R</span>
                                 </label>
-                                <label class="rarity-checkbox" style="cursor: pointer;">
-                                    <input type="checkbox" value="mythic" style="display: none;" />
-                                    <span class="rarity-checkbox-box" style="display: inline-block; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: #ea580c; color: white; border: 2px solid transparent; transition: all 0.2s;">M</span>
+                                <label class="rarity-checkbox">
+                                    <input type="checkbox" value="mythic" />
+                                    <span class="rarity-checkbox-box rarity-m">M</span>
                                 </label>
                             </div>
                         </div>
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >CMC</label
-                            >
-                            <div
-                                style="
-                                    display: flex;
-                                    gap: 0.5rem;
-                                    align-items: center;
-                                "
-                            >
+                        <div class="filter-field">
+                            <label class="field-label">CMC</label>
+                            <div class="cmc-range">
                                 <input
                                     type="number"
                                     id="filter-cmc-min"
+                                    class="input-narrow"
                                     placeholder="Min"
                                     min="0"
                                     max="20"
-                                    style="
-                                        width: 70px;
-                                        padding: 0.5rem;
-                                        border-radius: 6px;
-                                        border: 1px solid var(--border-color);
-                                        background: var(--bg-secondary);
-                                    "
                                 />
                                 <span>-</span>
                                 <input
                                     type="number"
                                     id="filter-cmc-max"
+                                    class="input-narrow"
                                     placeholder="Max"
                                     min="0"
                                     max="20"
-                                    style="
-                                        width: 70px;
-                                        padding: 0.5rem;
-                                        border-radius: 6px;
-                                        border: 1px solid var(--border-color);
-                                        background: var(--bg-secondary);
-                                    "
                                 />
                             </div>
                         </div>
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >Colors</label
-                            >
+                        <div class="filter-field">
+                            <label class="field-label">Colors</label>
                             <div id="filter-colors" class="color-filter-group">
                                 <label class="color-checkbox">
                                     <input type="checkbox" value="W" />
@@ -752,49 +672,20 @@ <h2>Browse Cards</h2>
                                 </label>
                             </div>
                         </div>
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >Sets</label
-                            >
-                            <button
-                                id="filter-sets-btn"
-                                class="btn btn-secondary"
-                                style="padding: 0.5rem 1rem"
-                            >
+                        <div class="filter-field">
+                            <label class="field-label">Sets</label>
+                            <button id="filter-sets-btn" class="btn btn-secondary">
                                 <span id="selected-sets-count">All Sets</span>
                             </button>
                         </div>
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >Subtypes</label
-                            >
-                            <button
-                                id="filter-subtypes-btn"
-                                class="btn btn-secondary"
-                                style="padding: 0.5rem 1rem"
-                            >
+                        <div class="filter-field">
+                            <label class="field-label">Subtypes</label>
+                            <button id="filter-subtypes-btn" class="btn btn-secondary">
                                 <span id="selected-subtypes-count">All Subtypes</span>
                             </button>
                         </div>
-                        <div>
-                            <label
-                                style="
-                                    display: block;
-                                    margin-bottom: 0.5rem;
-                                    font-weight: 600;
-                                "
-                                >Collection</label
-                            >
+                        <div class="filter-field">
+                            <label class="field-label">Collection</label>
                             <label class="color-checkbox">
                                 <input
                                     type="checkbox"
@@ -818,24 +709,11 @@ <h2>Browse Cards</h2>
                     </div>
                 </div>
                 <div id="cards-grid" class="cards-grid"></div>
-                <div
-                    id="pagination"
-                    class="pagination"
-                    style="
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        gap: 1rem;
-                        margin: 2rem 0;
-                        padding: 1rem;
-                    "
-                >
+                <div id="pagination" class="pagination">
                     <button id="prev-page" class="btn btn-secondary" disabled>
                         Previous
                     </button>
-                    <span id="page-info" style="font-weight: 600"
-                        >Page 1 of 1</span
-                    >
+                    <span id="page-info">Page 1 of 1</span>
                     <button id="next-page" class="btn btn-secondary" disabled>
                         Next
                     </button>
@@ -1094,8 +972,8 @@ <h2>Price Watch</h2>
             </div>
 
             <!-- Add/Edit Price Watch Modal -->
-            <div id="pm-watch-modal" class="modal hidden">
-                <div class="modal-content" style="max-width: 500px;">
+            <div id="pm-watch-modal" class="modal drawer-mode hidden" data-persist>
+                <div class="modal-content">
                     <span class="modal-close" id="pm-watch-modal-close">&times;</span>
                     <h2 id="pm-watch-modal-title" style="margin-bottom: 1.5rem;">Add Price Watch</h2>
                     <form id="pm-watch-form">
@@ -1104,7 +982,7 @@ <h2 id="pm-watch-modal-title" style="margin-bottom: 1.5rem;">Add Price Watch</h2
                             <div style="display:flex;gap:0.5rem;align-items:flex-start;">
                                 <div style="position: relative; flex: 1;">
                                     <input type="text" id="pm-card-name" placeholder="e.g. Meekstone" required autocomplete="off" style="width: 100%;" />
-                                    <div id="pm-card-search-results" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; max-height: 250px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3);"></div>
+                                    <div id="pm-card-search-results" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; max-height: 250px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3);"></div>
                                 </div>
                                 <select id="pm-card-type-filter" title="Filter by card type" style="flex-shrink:0;width:140px;">
                                     <option value="">All types</option>
@@ -1283,7 +1161,7 @@ <h4 style="margin-bottom: 1rem;">Automatic Backup Schedule</h4>
                                 </div>
                                 <div>
                                     <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Frequency</label>
-                                    <select id="backup-frequency" style="width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary);">
+                                    <select id="backup-frequency" style="width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-secondary);">
                                         <option value="6hours">Every 6 Hours</option>
                                         <option value="12hours">Every 12 Hours</option>
                                         <option value="daily" selected>Daily (2 AM)</option>
@@ -1300,7 +1178,7 @@ <h4 style="margin-bottom: 1rem;">Automatic Backup Schedule</h4>
                                     min="1"
                                     max="100"
                                     value="10"
-                                    style="width: 150px; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-secondary);"
+                                    style="width: 150px; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-secondary);"
                                 />
                                 <p style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem;">
                                     Older backups will be automatically deleted
@@ -1339,7 +1217,7 @@ <h3>Price Check Schedule</h3>
                         <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end;margin-bottom:1rem;">
                             <div>
                                 <label style="display:block;margin-bottom:0.5rem;font-weight:600;">Frequency</label>
-                                <select id="price-schedule-preset" style="width:100%;padding:0.5rem;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-secondary);">
+                                <select id="price-schedule-preset" style="width:100%;padding:0.5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary);">
                                     <option value="0 * * * *">Every 1 hour</option>
                                     <option value="0 */3 * * *">Every 3 hours</option>
                                     <option value="0 */6 * * *">Every 6 hours (default)</option>
@@ -1350,7 +1228,7 @@ <h3>Price Check Schedule</h3>
                             </div>
                             <div id="price-schedule-custom-wrap" style="display:none;">
                                 <label style="display:block;margin-bottom:0.5rem;font-weight:600;">Cron expression</label>
-                                <input type="text" id="price-schedule-custom" placeholder="e.g. 0 */4 * * *" style="width:100%;padding:0.5rem;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-secondary);">
+                                <input type="text" id="price-schedule-custom" placeholder="e.g. 0 */4 * * *" style="width:100%;padding:0.5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary);">
                             </div>
                         </div>
                         <div style="display:flex;align-items:center;gap:1rem;">
@@ -1359,6 +1237,31 @@ <h3>Price Check Schedule</h3>
                         </div>
                     </section>
 
+                    <section
+                        id="access-control-section"
+                        class="settings-section"
+                        style="margin-top: 2rem; display: none"
+                    >
+                        <h3>Access Control</h3>
+                        <p>Control who can create accounts on this server.</p>
+                        <div class="setting-row">
+                            <div class="setting-row-text">
+                                <div class="setting-row-title">Allow public registration</div>
+                                <div class="setting-row-desc">
+                                    When off, the Register option is hidden and new sign-ups are
+                                    rejected. You can still create users in User Management below.
+                                </div>
+                                <div id="registration-locked-note" class="setting-row-desc hidden" style="color: var(--warning); margin-top: 0.25rem;">
+                                    Locked by the REGISTRATION_ENABLED environment variable.
+                                </div>
+                            </div>
+                            <label class="toggle-switch">
+                                <input type="checkbox" id="toggle-registration" />
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    </section>
+
                     <section
                         id="user-management-section"
                         class="settings-section"
@@ -1383,8 +1286,8 @@ <h3>User Management</h3>
             </div>
 
             <!-- Buy Deck Modal -->
-            <div id="buy-deck-modal" class="modal hidden">
-                <div class="modal-content" style="max-width: 600px;">
+            <div id="buy-deck-modal" class="modal drawer-mode hidden">
+                <div class="modal-content">
                     <span class="modal-close" id="buy-modal-close">&times;</span>
                     <h2 style="margin-bottom: 1rem;">Buy Deck</h2>
 
@@ -1397,7 +1300,7 @@ <h2 style="margin-bottom: 1rem;">Buy Deck</h2>
                     </div>
 
                     <!-- Tabs -->
-                    <div style="display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 2px solid var(--border-color);">
+                    <div style="display: flex; gap: 0; margin-bottom: 1.25rem; border-bottom: 2px solid var(--border);">
                         <button class="buy-tab-btn active" data-buy-tab="optimizer" style="padding: 0.5rem 1rem; background: none; border: none; border-bottom: 2px solid var(--primary); margin-bottom: -2px; color: var(--primary); font-weight: 600; cursor: pointer; font-size: 0.875rem;">
                             <i class="ph ph-magic-wand"></i> Mana Pool Optimizer
                         </button>
@@ -1784,7 +1687,7 @@ <h2 style="margin-bottom: 1rem">Filter by Sets</h2>
                                 width: 100%;
                                 padding: 0.75rem;
                                 border-radius: 6px;
-                                border: 1px solid var(--border-color);
+                                border: 1px solid var(--border);
                                 background: var(--bg-secondary);
                             "
                         />
@@ -1833,7 +1736,7 @@ <h2 style="margin-bottom: 1rem">Filter by Subtypes</h2>
                                 width: 100%;
                                 padding: 0.75rem;
                                 border-radius: 6px;
-                                border: 1px solid var(--border-color);
+                                border: 1px solid var(--border);
                                 background: var(--bg-secondary);
                             "
                         />
@@ -1897,8 +1800,8 @@ <h2 style="margin-bottom: 1.5rem">Check Deck Legality</h2>
             </div>
 
             <!-- Printing Optimizer Modal -->
-            <div id="printing-optimizer-modal" class="modal hidden">
-                <div class="modal-content" style="max-width: 900px">
+            <div id="printing-optimizer-modal" class="modal drawer-mode drawer-wide hidden">
+                <div class="modal-content">
                     <span class="modal-close" id="optimizer-modal-close"
                         >&times;</span
                     >
diff --git a/client/src/components/auth.js b/client/src/components/auth.js
index bb43cda..a105432 100644
--- a/client/src/components/auth.js
+++ b/client/src/components/auth.js
@@ -9,6 +9,19 @@ export function setupAuth(onLoginSuccess) {
   const showRegisterBtn = document.getElementById('show-register');
   const showLoginBtn = document.getElementById('show-login');
 
+  // Hide the Register option when the server has registration disabled.
+  api.getAuthConfig()
+    .then((cfg) => {
+      if (cfg && cfg.registrationEnabled === false) {
+        loginForm.classList.remove('hidden');
+        registerForm.classList.add('hidden');
+        const authSwitch = showRegisterBtn.closest('.auth-switch');
+        if (authSwitch) authSwitch.classList.add('hidden');
+        else showRegisterBtn.classList.add('hidden');
+      }
+    })
+    .catch(() => { /* default to showing register if config can't be fetched */ });
+
   // Toggle between login and register
   showRegisterBtn.addEventListener('click', (e) => {
     e.preventDefault();
diff --git a/client/src/components/deckBuilder.js b/client/src/components/deckBuilder.js
index 894ca88..c1595b0 100644
--- a/client/src/components/deckBuilder.js
+++ b/client/src/components/deckBuilder.js
@@ -19,6 +19,16 @@ let optimizerState = {
   availableSets: []
 }; // Store printing optimizer state
 
+// Which board a deck card belongs to. board_type is authoritative; is_sideboard is
+// the legacy fallback for rows written before maybeboard existed. Note maybeboard rows
+// carry is_sideboard = 0, so `!is_sideboard` must never be used to mean "mainboard".
+function boardOf(card) {
+  return card.board_type || (card.is_sideboard ? 'sideboard' : 'mainboard');
+}
+const isMainboardCard = (c) => boardOf(c) === 'mainboard';
+const isSideboardCard = (c) => boardOf(c) === 'sideboard';
+const isMaybeboardCard = (c) => boardOf(c) === 'maybeboard';
+
 // Detect if device is touch-enabled (mobile/tablet)
 function isTouchDevice() {
   return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
@@ -188,7 +198,7 @@ export function setupDeckBuilder() {
     resultsEl.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-secondary);">Checking deck with Mana Pool…</div>';
 
     const decklist = currentDeck.cards
-      .filter(c => !c.is_sideboard)
+      .filter(isMainboardCard)
       .map(c => `${c.quantity} ${c.name}`)
       .join('\n');
 
@@ -570,16 +580,10 @@ function renderDeckCards() {
   const sideboard = document.getElementById('sideboard');
   const maybeboard = document.getElementById('maybeboard');
 
-  // Filter cards by board type, using board_type if available, falling back to is_sideboard
-  let mainboardCards = currentDeck.cards.filter(c => {
-    if (c.board_type) return c.board_type === 'mainboard';
-    return !c.is_sideboard;
-  });
-  let sideboardCards = currentDeck.cards.filter(c => {
-    if (c.board_type) return c.board_type === 'sideboard';
-    return c.is_sideboard;
-  });
-  let maybeboardCards = currentDeck.cards.filter(c => c.board_type === 'maybeboard');
+  // Filter cards by board type (board_type authoritative, is_sideboard legacy fallback)
+  let mainboardCards = currentDeck.cards.filter(isMainboardCard);
+  let sideboardCards = currentDeck.cards.filter(isSideboardCard);
+  let maybeboardCards = currentDeck.cards.filter(isMaybeboardCard);
 
   // Apply filters
   const hasFilter = currentFilter.cmc !== null || currentFilter.color !== null || currentFilter.ownership !== null || deckFilterQuery;
@@ -757,12 +761,62 @@ function renderCardsList(cards) {
   return html;
 }
 
+// Commander eligibility. A legendary creature qualifies; so does any card whose rules
+// text says "... can be your commander" — which is how planeswalker commanders (Daretti,
+// Teferi, Freyalise, etc.) are printed, so those now get the "Set as Commander" toggle.
+// If MTGJSON leadership-skills data is present on the card it wins (also covers edge cases
+// like Grist that lack the printed text), but the oracle-text check is the reliable signal.
+function canBeCommander(card) {
+  if (card.leadership_skills) {
+    try {
+      const skills = typeof card.leadership_skills === 'string'
+        ? JSON.parse(card.leadership_skills)
+        : card.leadership_skills;
+      if (skills && skills.commander) return true;
+    } catch { /* fall through to heuristic */ }
+  }
+  const type = card.type_line || '';
+  const isLegendaryCreature = /legendary/i.test(type) && /creature/i.test(type);
+  if (isLegendaryCreature) return true;
+  // Backgrounds are commanders (paired with a "Choose a Background" legend).
+  if (/\bBackground\b/i.test(type)) return true;
+  if (card.oracle_text && /can be your commander/i.test(card.oracle_text)) return true;
+  return false;
+}
+
+// ---- Two-commander pairings (Partner / Backgrounds / Doctor's companion) ----
+const cmdrText = (c) => (c.oracle_text || '').replace(/\r/g, '');
+const hasPartner = (c) =>
+  /(^|\n)Partner\b(?!\s+with)/i.test(cmdrText(c)) ||
+  /have two commanders if both have partner/i.test(cmdrText(c).replace(/\n/g, ' '));
+const partnerWithName = (c) => {
+  const m = cmdrText(c).match(/Partner with ([^\n(.]+)/i);
+  return m ? m[1].trim().replace(/[.,]+$/, '') : null;
+};
+const hasFriendsForever = (c) => /friends forever/i.test(cmdrText(c));
+const hasChooseABackground = (c) => /choose a background/i.test(cmdrText(c));
+const isBackground = (c) => /\bBackground\b/i.test(c.type_line || '');
+const hasDoctorsCompanion = (c) => /doctor.?s companion/i.test(cmdrText(c));
+const isTimeLordDoctor = (c) => /Time Lord/i.test(c.type_line || '') && /Doctor/i.test(c.type_line || '');
+
+// May cards `a` and `b` legally be commanders together?
+function canPairCommanders(a, b) {
+  if (!a || !b || a.deck_card_id === b.deck_card_id) return false;
+  if (hasPartner(a) && hasPartner(b)) return true;
+  const aw = partnerWithName(a), bw = partnerWithName(b);
+  if (aw && (b.name || '').toLowerCase().includes(aw.toLowerCase())) return true;
+  if (bw && (a.name || '').toLowerCase().includes(bw.toLowerCase())) return true;
+  if (hasFriendsForever(a) && hasFriendsForever(b)) return true;
+  if (hasChooseABackground(a) && isBackground(b)) return true;
+  if (hasChooseABackground(b) && isBackground(a)) return true;
+  if (hasDoctorsCompanion(a) && isTimeLordDoctor(b)) return true;
+  if (hasDoctorsCompanion(b) && isTimeLordDoctor(a)) return true;
+  return false;
+}
+
 function renderCardItem(card) {
   const isCommanderDeck = currentDeck.format === 'commander';
-  const isLegendaryCreature = card.type_line &&
-    (card.type_line.includes('Legendary') || card.type_line.includes('legendary')) &&
-    (card.type_line.includes('Creature') || card.type_line.includes('creature'));
-  const showCommanderIcon = isCommanderDeck && isLegendaryCreature && !card.is_sideboard;
+  const showCommanderIcon = isCommanderDeck && canBeCommander(card) && isMainboardCard(card);
 
   // Ultra-compact view - minimal text-only with dropdown
   if (layoutView === 'ultra-compact') {
@@ -1297,12 +1351,21 @@ async function toggleCommander(deckCardId) {
     const card = currentDeck.cards.find(c => c.deck_card_id == deckCardId);
     const newCommanderStatus = !card.is_commander;
 
-    // If setting as commander, first unmark any existing commander
+    // When setting a commander, keep an existing commander only if the two form a
+    // valid pair (Partner / Partner with / Friends forever / Background / Doctor's
+    // companion). Otherwise the new pick replaces whatever was there.
+    let pairedWithPartner = false;
     if (newCommanderStatus) {
-      const currentCommander = currentDeck.cards.find(c => c.is_commander);
-      if (currentCommander && currentCommander.deck_card_id != deckCardId) {
-        // Unmark the current commander
-        await api.updateDeckCard(currentDeckId, currentCommander.deck_card_id, { isCommander: false });
+      const existing = currentDeck.cards.filter(
+        c => c.is_commander && c.deck_card_id != deckCardId
+      );
+      const partner = existing.find(c => canPairCommanders(c, card));
+      pairedWithPartner = !!partner;
+      const toUnmark = partner
+        ? existing.filter(c => c.deck_card_id != partner.deck_card_id)
+        : existing;
+      for (const c of toUnmark) {
+        await api.updateDeckCard(currentDeckId, c.deck_card_id, { isCommander: false });
       }
     }
 
@@ -1314,7 +1377,9 @@ async function toggleCommander(deckCardId) {
     hideLoading();
 
     showToast(
-      newCommanderStatus ? '⚔️ Commander set!' : 'Commander removed',
+      newCommanderStatus
+        ? (pairedWithPartner ? '⚔️ Partner commander set!' : '⚔️ Commander set!')
+        : 'Commander removed',
       'success',
       2000
     );
@@ -1497,8 +1562,8 @@ function generateDeckList() {
   const nonOwnedOnly = document.getElementById('copy-non-owned-only')?.checked || false;
 
   // Build deck list in TCGPlayer format with set codes
-  let mainboardCards = currentDeck.cards.filter(c => !c.is_sideboard);
-  let sideboardCards = currentDeck.cards.filter(c => c.is_sideboard);
+  let mainboardCards = currentDeck.cards.filter(isMainboardCard);
+  let sideboardCards = currentDeck.cards.filter(isSideboardCard);
 
   // Filter for non-owned cards if checkbox is checked
   if (nonOwnedOnly) {
@@ -1588,8 +1653,8 @@ function exportToManapool() {
 }
 
 function generateExport(format) {
-  const mainboard = currentDeck.cards.filter(c => !c.is_sideboard);
-  const sideboard = currentDeck.cards.filter(c => c.is_sideboard);
+  const mainboard = currentDeck.cards.filter(isMainboardCard);
+  const sideboard = currentDeck.cards.filter(isSideboardCard);
 
   let text = '';
 
@@ -1855,7 +1920,7 @@ function calculateActualCMC(card) {
 
 function renderStats(stats) {
   // Calculate statistics for mana values
-  const mainboardCards = currentDeck.cards.filter(c => !c.is_sideboard);
+  const mainboardCards = currentDeck.cards.filter(isMainboardCard);
   const totalCards = mainboardCards.reduce((sum, c) => sum + c.quantity, 0);
 
   // Calculate owned percentage
@@ -2334,7 +2399,7 @@ function dealExampleHand() {
   }
 
   // Get mainboard cards only
-  const mainboardCards = currentDeck.cards.filter(c => !c.is_sideboard);
+  const mainboardCards = currentDeck.cards.filter(isMainboardCard);
   if (mainboardCards.length === 0) {
     showToast('Add cards to your mainboard first', 'warning');
     return;
@@ -2363,7 +2428,7 @@ function drawCard() {
   }
 
   // Get mainboard cards only
-  const mainboardCards = currentDeck.cards.filter(c => !c.is_sideboard);
+  const mainboardCards = currentDeck.cards.filter(isMainboardCard);
   if (mainboardCards.length === 0) {
     showToast('Add cards to your mainboard first', 'warning');
     return;
@@ -2441,7 +2506,7 @@ function updateHandStats() {
   }
 
   // Get mainboard cards only
-  const mainboardCards = currentDeck.cards.filter(c => !c.is_sideboard);
+  const mainboardCards = currentDeck.cards.filter(isMainboardCard);
   if (mainboardCards.length === 0) {
     statsContainer.innerHTML = '';
     return;
diff --git a/client/src/components/decks.js b/client/src/components/decks.js
index 566c4bc..76eceee 100644
--- a/client/src/components/decks.js
+++ b/client/src/components/decks.js
@@ -1,5 +1,5 @@
 import api from '../services/api.js';
-import { showLoading, hideLoading, formatDate, showError, showToast } from '../utils/ui.js';
+import { showLoading, hideLoading, formatDate, showError, showToast, confirmDialog } from '../utils/ui.js';
 
 let decks = [];
 
@@ -145,7 +145,13 @@ function renderDecks() {
       e.stopPropagation();
       const deckId = btn.dataset.deckId;
 
-      if (confirm('Are you sure you want to delete this deck?')) {
+      const ok = await confirmDialog({
+        title: 'Delete deck?',
+        message: 'This permanently deletes the deck and its contents.',
+        confirmText: 'Delete',
+        danger: true,
+      });
+      if (ok) {
         try {
           showLoading();
           await api.deleteDeck(deckId);
diff --git a/client/src/components/inventory.js b/client/src/components/inventory.js
index e83565a..390b2d2 100644
--- a/client/src/components/inventory.js
+++ b/client/src/components/inventory.js
@@ -1,5 +1,5 @@
 import api from '../services/api.js';
-import { showLoading, hideLoading, formatMana, showToast, showError } from '../utils/ui.js';
+import { showLoading, hideLoading, formatMana, showToast, showError, confirmDialog } from '../utils/ui.js';
 import { showCardDetail } from './cards.js';
 
 let inventoryData = null;
@@ -419,7 +419,13 @@ function setupBulkActions() {
     removeSelectedBtn.addEventListener('click', async () => {
       if (selectedCards.size === 0) return;
 
-      if (!confirm(`Remove ${selectedCards.size} card(s) from inventory?`)) return;
+      const ok = await confirmDialog({
+        title: 'Remove cards?',
+        message: `Remove ${selectedCards.size} card(s) from your inventory?`,
+        confirmText: 'Remove',
+        danger: true,
+      });
+      if (!ok) return;
 
       try {
         showLoading();
diff --git a/client/src/components/priceMonitoring.js b/client/src/components/priceMonitoring.js
index b7eac09..385e290 100644
--- a/client/src/components/priceMonitoring.js
+++ b/client/src/components/priceMonitoring.js
@@ -1,5 +1,5 @@
 import api from '../services/api.js';
-import { showToast, debounce } from '../utils/ui.js';
+import { showToast, debounce, confirmDialog, openDrawer, closeDrawer } from '../utils/ui.js';
 
 const CONDITIONS = { any: 'Any', nm: 'NM', lp: 'LP', mp: 'MP', hp: 'HP', dm: 'DM' };
 
@@ -445,7 +445,13 @@ export function setupPriceMonitoring() {
     if (deleteBtn) {
       const id = parseInt(deleteBtn.dataset.id);
       const name = deleteBtn.dataset.name;
-      if (!confirm(`Delete price watch for "${name}"?`)) return;
+      const ok = await confirmDialog({
+        title: 'Delete price watch?',
+        message: `Stop watching the price for "${name}"?`,
+        confirmText: 'Delete',
+        danger: true,
+      });
+      if (!ok) return;
       try {
         await api.deletePriceWatch(id);
         showToast('Watch deleted', 'success');
diff --git a/client/src/components/settings.js b/client/src/components/settings.js
index 0599aad..6349ceb 100644
--- a/client/src/components/settings.js
+++ b/client/src/components/settings.js
@@ -1,5 +1,5 @@
 import api from '../services/api.js';
-import { showLoading, hideLoading, showModal, showToast } from '../utils/ui.js';
+import { showLoading, hideLoading, showModal, showToast, confirmDialog } from '../utils/ui.js';
 
 export function setupSettings() {
   const generateApiKeyBtn = document.getElementById('generate-api-key-btn');
@@ -51,11 +51,13 @@ export function setupSettings() {
       return;
     }
 
-    const overwrite = confirm(
-      'Do you want to overwrite existing data?\n\n' +
-      'YES: Replace all your current data with the backup\n' +
-      'NO: Merge the backup with your existing data (may create duplicates)'
-    );
+    const overwrite = await confirmDialog({
+      title: 'Restore backup',
+      message: 'Overwrite replaces all current data with the backup. Merge keeps your existing data and adds the backup (may create duplicates).',
+      confirmText: 'Overwrite',
+      cancelText: 'Merge',
+      danger: true,
+    });
 
     try {
       showLoading();
@@ -132,9 +134,12 @@ export function setupSettings() {
 
   // Refresh database
   refreshDbBtn.addEventListener('click', async () => {
-    if (!confirm('This will update all card data, prices, and sets. It may take several minutes. Continue?')) {
-      return;
-    }
+    const ok = await confirmDialog({
+      title: 'Refresh database?',
+      message: 'This updates all card data, prices, and sets. It may take several minutes.',
+      confirmText: 'Refresh',
+    });
+    if (!ok) return;
 
     try {
       refreshDbBtn.disabled = true;
@@ -252,6 +257,7 @@ async function checkAdminAndLoadUsers() {
   try {
     const profile = await api.getProfile();
     const userManagementSection = document.getElementById('user-management-section');
+    const accessControlSection = document.getElementById('access-control-section');
     const backupSection = document.getElementById('backup-section');
     const databaseSection = document.getElementById('database-section');
 
@@ -261,11 +267,14 @@ async function checkAdminAndLoadUsers() {
     if (profile.user.is_admin) {
       // User is an admin, show admin-only sections
       if (userManagementSection) userManagementSection.style.display = 'block';
+      if (accessControlSection) accessControlSection.style.display = 'block';
       if (databaseSection) databaseSection.style.display = 'block';
       await loadUsers();
+      await loadAccessControl();
     } else {
       // Hide admin-only sections for non-admins
       if (userManagementSection) userManagementSection.style.display = 'none';
+      if (accessControlSection) accessControlSection.style.display = 'none';
       if (databaseSection) databaseSection.style.display = 'none';
     }
   } catch (error) {
@@ -273,6 +282,37 @@ async function checkAdminAndLoadUsers() {
   }
 }
 
+let accessControlWired = false;
+async function loadAccessControl() {
+  const toggle = document.getElementById('toggle-registration');
+  const lockedNote = document.getElementById('registration-locked-note');
+  if (!toggle) return;
+  try {
+    const settings = await api.getAdminSettings();
+    toggle.checked = settings.registrationEnabled !== false;
+    const locked = !!settings.registrationLockedByEnv;
+    toggle.disabled = locked;
+    if (lockedNote) lockedNote.classList.toggle('hidden', !locked);
+  } catch (error) {
+    console.error('Failed to load access settings:', error);
+  }
+
+  if (!accessControlWired) {
+    accessControlWired = true;
+    toggle.addEventListener('change', async () => {
+      const enabled = toggle.checked;
+      try {
+        const updated = await api.updateAdminSettings({ registrationEnabled: enabled });
+        toggle.checked = updated.registrationEnabled !== false;
+        showToast(enabled ? 'Public registration enabled' : 'Public registration disabled', 'success');
+      } catch (error) {
+        toggle.checked = !enabled; // revert on failure
+        showToast('Failed to update setting: ' + error.message, 'error');
+      }
+    });
+  }
+}
+
 async function loadUsers() {
   try {
     showLoading();
@@ -320,9 +360,13 @@ function renderUsers(users) {
 
 window.toggleAdminStatus = async function(userId, makeAdmin) {
   const action = makeAdmin ? 'promote to admin' : 'remove admin status from';
-  if (!confirm(`Are you sure you want to ${action} this user?`)) {
-    return;
-  }
+  const ok = await confirmDialog({
+    title: makeAdmin ? 'Promote to admin?' : 'Remove admin status?',
+    message: `Are you sure you want to ${action} this user?`,
+    confirmText: makeAdmin ? 'Promote' : 'Remove',
+    danger: !makeAdmin,
+  });
+  if (!ok) return;
 
   try {
     showLoading();
@@ -337,9 +381,13 @@ window.toggleAdminStatus = async function(userId, makeAdmin) {
 };
 
 window.deleteUserConfirm = async function(userId, username) {
-  if (!confirm(`Are you sure you want to delete user "${username}"? This action cannot be undone and will delete all their decks and data.`)) {
-    return;
-  }
+  const ok = await confirmDialog({
+    title: 'Delete user?',
+    message: `Delete user "${username}"? This cannot be undone and removes all their decks and data.`,
+    confirmText: 'Delete user',
+    danger: true,
+  });
+  if (!ok) return;
 
   try {
     showLoading();
@@ -429,9 +477,13 @@ function renderApiKeys(apiKeys) {
 
 // Make this global so the onclick handler can access it
 window.revokeApiKey = async function(keyId) {
-  if (!confirm('Are you sure you want to revoke this API key? This action cannot be undone.')) {
-    return;
-  }
+  const ok = await confirmDialog({
+    title: 'Revoke API key?',
+    message: 'This cannot be undone. Any integration using this key will stop working.',
+    confirmText: 'Revoke',
+    danger: true,
+  });
+  if (!ok) return;
 
   try {
     showLoading();
@@ -547,12 +599,13 @@ window.downloadBackup = async function(filename) {
 };
 
 window.restoreFromBackup = async function(filename) {
-  const overwrite = confirm(
-    `Restore from "${filename}"?\n\n` +
-    'Do you want to overwrite existing data?\n\n' +
-    'YES: Replace all your current data with the backup\n' +
-    'NO: Merge the backup with your existing data (may create duplicates)'
-  );
+  const overwrite = await confirmDialog({
+    title: `Restore from "${filename}"?`,
+    message: 'Overwrite replaces all current data with the backup. Merge keeps your existing data and adds the backup (may create duplicates).',
+    confirmText: 'Overwrite',
+    cancelText: 'Merge',
+    danger: true,
+  });
 
   try {
     showLoading();
@@ -590,9 +643,13 @@ window.restoreFromBackup = async function(filename) {
 };
 
 window.deleteBackup = async function(filename) {
-  if (!confirm(`Are you sure you want to delete "${filename}"? This action cannot be undone.`)) {
-    return;
-  }
+  const ok = await confirmDialog({
+    title: 'Delete backup?',
+    message: `Delete "${filename}"? This cannot be undone.`,
+    confirmText: 'Delete',
+    danger: true,
+  });
+  if (!ok) return;
 
   try {
     showLoading();
diff --git a/client/src/components/sharedDeck.js b/client/src/components/sharedDeck.js
index e347814..606b02c 100644
--- a/client/src/components/sharedDeck.js
+++ b/client/src/components/sharedDeck.js
@@ -1,6 +1,12 @@
 import api from '../services/api.js';
 import { showLoading, hideLoading, formatMana, showToast } from '../utils/ui.js';
 
+// Board of a shared-deck card (board_type authoritative; is_sideboard is legacy).
+const sharedBoardOf = (c) => c.board_type || (c.is_sideboard ? 'sideboard' : 'mainboard');
+const isSharedMainboard = (c) => sharedBoardOf(c) === 'mainboard';
+const isSharedSideboard = (c) => sharedBoardOf(c) === 'sideboard';
+
+
 let sharedDeck = null;
 let isAuthenticated = false;
 
@@ -97,8 +103,8 @@ function renderSharedDeckCards() {
   const mainboard = document.getElementById('shared-mainboard');
   const sideboard = document.getElementById('shared-sideboard');
 
-  const mainboardCards = sharedDeck.cards.filter(c => !c.is_sideboard);
-  const sideboardCards = sharedDeck.cards.filter(c => c.is_sideboard);
+  const mainboardCards = sharedDeck.cards.filter(isSharedMainboard);
+  const sideboardCards = sharedDeck.cards.filter(isSharedSideboard);
 
   // Update counts
   const mainboardTotal = mainboardCards.reduce((sum, c) => sum + c.quantity, 0);
@@ -192,7 +198,7 @@ function switchTab(tab) {
 function renderSharedDeckStats() {
   // Calculate mana curve
   const manaCurve = {};
-  sharedDeck.cards.filter(c => !c.is_sideboard).forEach(card => {
+  sharedDeck.cards.filter(isSharedMainboard).forEach(card => {
     const cmc = Math.floor(card.cmc || 0);
     if (!manaCurve[cmc]) {
       manaCurve[cmc] = 0;
@@ -207,7 +213,7 @@ function renderSharedDeckStats() {
 
   // Calculate type distribution
   const typeDistribution = {};
-  sharedDeck.cards.filter(c => !c.is_sideboard).forEach(card => {
+  sharedDeck.cards.filter(isSharedMainboard).forEach(card => {
     const typeLine = card.type_line || '';
     let type = 'Other';
 
@@ -232,7 +238,7 @@ function renderSharedDeckStats() {
 
   // Calculate color distribution
   const colorDistribution = {};
-  sharedDeck.cards.filter(c => !c.is_sideboard).forEach(card => {
+  sharedDeck.cards.filter(isSharedMainboard).forEach(card => {
     const colors = card.colors || '';
     if (!colorDistribution[colors]) {
       colorDistribution[colors] = 0;
diff --git a/client/src/services/api.js b/client/src/services/api.js
index 4c6a5c6..01c9324 100644
--- a/client/src/services/api.js
+++ b/client/src/services/api.js
@@ -359,6 +359,23 @@ class ApiClient {
     });
   }
 
+  // Public auth config (no auth required) — used to hide the Register option
+  async getAuthConfig() {
+    return this.request('/auth/config');
+  }
+
+  // App settings (admin only)
+  async getAdminSettings() {
+    return this.request('/admin/settings');
+  }
+
+  async updateAdminSettings(updates) {
+    return this.request('/admin/settings', {
+      method: 'PUT',
+      body: JSON.stringify(updates),
+    });
+  }
+
   // Shopping methods
   async getShoppingList(deckIds) {
     const params = new URLSearchParams();
diff --git a/client/src/styles/main.css b/client/src/styles/main.css
index 302a030..dda739c 100644
--- a/client/src/styles/main.css
+++ b/client/src/styles/main.css
@@ -1,17 +1,86 @@
 :root {
+  /* Brand / accent */
   --primary: #6366f1;
   --primary-dark: #4f46e5;
+  --primary-light: #818cf8;
+  --primary-soft: rgba(99, 102, 241, 0.12); /* tinted surface / active bg */
+  --brand-pink: #ec4899; /* gradient partner for the logo/title */
+
+  /* Semantic status */
   --secondary: #64748b;
   --success: #10b981;
+  --success-dark: #059669;
   --danger: #ef4444;
+  --danger-dark: #dc2626;
   --warning: #f59e0b;
+  --warning-dark: #d97706;
+  --info: #3b82f6;
+
+  /* Surfaces (dark-only) */
   --bg: #0f172a;
   --bg-secondary: #1e293b;
   --bg-tertiary: #334155;
+  --bg-hover: #3d4c63; /* subtle hover lift on tertiary surfaces */
+
+  /* Text */
   --text: #f1f5f9;
   --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+
+  /* Borders */
   --border: #475569;
-  --shadow: rgba(0, 0, 0, 0.5);
+  --border-strong: #64748b;
+  --border-color: #475569; /* legacy alias — some markup references --border-color */
+
+  /* Rarity (MTG) */
+  --rarity-common: #71717a;
+  --rarity-uncommon: #71717a;
+  --rarity-rare: #ca8a04;
+  --rarity-mythic: #ea580c;
+
+  /* Spacing scale (4pt grid) */
+  --space-1: 0.25rem; /* 4  */
+  --space-2: 0.5rem;  /* 8  */
+  --space-3: 0.75rem; /* 12 */
+  --space-4: 1rem;    /* 16 */
+  --space-5: 1.5rem;  /* 24 */
+  --space-6: 2rem;    /* 32 */
+  --space-7: 3rem;    /* 48 */
+  --space-8: 4rem;    /* 64 */
+
+  /* Radius scale */
+  --radius-sm: 0.375rem; /* 6  */
+  --radius-md: 0.5rem;   /* 8  */
+  --radius-lg: 0.75rem;  /* 12 */
+  --radius-xl: 1rem;     /* 16 */
+  --radius-full: 9999px;
+
+  /* Elevation scale */
+  --shadow: rgba(0, 0, 0, 0.5); /* legacy raw shadow color, still referenced */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
+  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.55);
+
+  /* Typography */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 2rem;
+
+  /* Motion */
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition: 0.18s var(--ease);
+
+  /* Layout */
+  --page-max: 1400px;
+  --z-nav: 100;
+  --z-popover: 900;
+  --z-modal: 1000;
+  --z-toast: 10000;
 }
 
 * {
@@ -21,7 +90,7 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  font-family: var(--font-sans);
   background: var(--bg);
   color: var(--text);
   line-height: 1.6;
@@ -40,19 +109,28 @@ body {
 /* Buttons */
 .btn {
   padding: 0.625rem 1.25rem;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 0.875rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
   font-weight: 600;
+  font-family: inherit;
+  line-height: 1.2;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: background var(--transition), border-color var(--transition),
+    box-shadow var(--transition), color var(--transition), opacity var(--transition);
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: center;
+  gap: var(--space-2);
+  white-space: nowrap;
+  user-select: none;
 }
 
-.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px var(--shadow); }
-.btn:active { transform: translateY(0); }
+/* Subtler feedback than the old universal lift: shadow + slight brighten */
+.btn:hover { box-shadow: var(--shadow-md); }
+.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
+.btn:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
 
 .btn-primary {
   background: var(--primary);
@@ -61,17 +139,38 @@ body {
 .btn-primary:hover { background: var(--primary-dark); }
 
 .btn-secondary {
-  background: var(--secondary);
-  color: white;
+  background: var(--bg-tertiary);
+  color: var(--text);
+  border-color: var(--border);
 }
+.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
 
 .btn-danger {
   background: var(--danger);
   color: white;
 }
+.btn-danger:hover { background: var(--danger-dark); }
+
+.btn-warning {
+  background: var(--warning);
+  color: #1f1300;
+}
+.btn-warning:hover { background: var(--warning-dark); }
+
+/* Ghost / outline — for low-emphasis and icon-forward actions */
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border-color: var(--border);
+}
+.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text); border-color: var(--border-strong); }
 
 .btn-block { width: 100%; justify-content: center; }
 
+/* Size variants (replace inline padding/flex overrides) */
+.btn-sm { padding: 0.375rem 0.75rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
+.btn-lg { padding: 0.875rem 1.75rem; font-size: var(--text-base); }
+
 /* Navigation */
 .navbar {
   background: var(--bg-secondary);
@@ -83,43 +182,78 @@ body {
 }
 
 .nav-container {
-  max-width: 1400px;
+  max-width: var(--page-max);
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 var(--space-5);
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: var(--space-4);
+}
+
+.nav-brand {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .nav-brand h1 {
-  font-size: 1.5rem;
-  background: linear-gradient(135deg, var(--primary), #ec4899);
+  font-size: var(--text-xl);
+  background: linear-gradient(135deg, var(--primary), var(--brand-pink));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
+/* Links occupy the middle and scroll horizontally (contained) rather than
+   pushing labels off-screen on mid-width viewports. */
 .nav-links {
   display: flex;
-  gap: 2rem;
   align-items: center;
+  gap: var(--space-1);
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x proximity;
+  /* Fade the right edge as a scroll hint — invisible until links overflow,
+     since they left-align and leave empty space on the right when they fit. */
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
 }
+.nav-links::-webkit-scrollbar { display: none; }
 
 .nav-link {
   color: var(--text-secondary);
   text-decoration: none;
   font-weight: 500;
-  transition: color 0.2s;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
+  font-size: var(--text-sm);
+  transition: color var(--transition), background var(--transition);
+  padding: 0.5rem 0.85rem;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+  scroll-snap-align: start;
 }
 
-.nav-link:hover, .nav-link.active {
-  color: var(--primary);
-  background: rgba(99, 102, 241, 0.1);
+.nav-link:hover {
+  color: var(--text);
+  background: var(--bg-tertiary);
+}
+
+.nav-link.active {
+  color: var(--primary-light);
+  background: var(--primary-soft);
+}
+
+/* User menu pinned to the right, never scrolls away */
+.user-menu {
+  flex-shrink: 0;
+  margin-left: auto;
 }
 
 .nav-logout-btn {
@@ -169,7 +303,7 @@ body {
   font-size: 2.5rem;
   text-align: center;
   margin-bottom: 0.5rem;
-  background: linear-gradient(135deg, var(--primary), #ec4899);
+  background: linear-gradient(135deg, var(--primary), var(--brand-pink));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -209,13 +343,14 @@ body {
 .form-group textarea,
 input[type="number"] {
   width: 100%;
-  padding: 0.75rem;
-  background: var(--bg-tertiary);
+  padding: var(--space-3);
+  background-color: var(--bg-tertiary);
   border: 1px solid var(--border);
-  border-radius: 0.5rem;
+  border-radius: var(--radius-md);
   color: var(--text);
-  font-size: 0.875rem;
-  transition: all 0.2s;
+  font-size: var(--text-sm);
+  font-family: inherit;
+  transition: border-color var(--transition), box-shadow var(--transition);
 }
 
 .form-group input:focus,
@@ -223,7 +358,41 @@ input[type="number"] {
 .form-group textarea:focus {
   outline: none;
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder,
+input::placeholder {
+  color: var(--text-muted);
+}
+
+/* ---- Modern select control: reset native chrome + custom chevron ---- */
+select,
+.form-group select,
+.filter-select,
+.deck-format-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--space-3) center;
+  background-size: 14px;
+  padding-right: 2.25rem;
+  cursor: pointer;
+}
+
+select:hover,
+.filter-select:hover,
+.deck-format-select:hover {
+  border-color: var(--border-strong);
+}
+
+/* Native option list — dark to match the app (supported in most modern browsers) */
+select option {
+  background: var(--bg-secondary);
+  color: var(--text);
 }
 
 .auth-switch {
@@ -347,11 +516,12 @@ input[type="number"] {
 }
 
 .deck-format-select {
-  padding: 0.625rem 0.875rem;
-  background: var(--bg-tertiary);
+  padding: 0.625rem 2.25rem 0.625rem 0.875rem;
+  background-color: var(--bg-tertiary);
   border: 1px solid var(--border);
-  border-radius: 0.5rem;
+  border-radius: var(--radius-md);
   color: var(--text);
+  font-size: var(--text-sm);
   min-width: 150px;
 }
 
@@ -632,12 +802,14 @@ button.btn-icon.active {
   border-color: var(--primary);
 }
 
-/* Icon inside a button - no border or hover effects */
+/* Icon inside a .btn — inherits button color, no border/hover of its own */
 .btn .btn-icon {
   background: none;
   border: none;
   padding: 0;
   pointer-events: none;
+  flex-shrink: 0;
+  font-size: 20px;
 }
 
 .tab-btn {
@@ -1173,13 +1345,20 @@ button.btn-icon.active {
 
 .search-input {
   width: 100%;
-  padding: 1rem;
+  padding: var(--space-3) var(--space-4);
   background: var(--bg-tertiary);
-  border: 2px solid var(--border);
-  border-radius: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
   color: var(--text);
-  font-size: 1rem;
-  margin-bottom: 1rem;
+  font-size: var(--text-base);
+  margin-bottom: var(--space-4);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft);
 }
 
 .filters {
@@ -1187,13 +1366,155 @@ button.btn-icon.active {
   gap: 1rem;
 }
 
+/* ---- Standardized filter bar (cards / browse) ---- */
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--space-4);
+  margin-top: var(--space-4);
+  padding: var(--space-4);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
+.filter-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+/* Shared field label (replaces the repeated inline label style) */
+.field-label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.cmc-range {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+.input-narrow {
+  width: 72px;
+  padding: var(--space-2) var(--space-3);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-size: var(--text-sm);
+}
+.input-narrow:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+/* Rarity chips — tokenized (was inline hex per chip) */
+.rarity-checkbox { cursor: pointer; user-select: none; }
+.rarity-checkbox input[type="checkbox"] { display: none; }
+.rarity-checkbox-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.35rem 0.6rem;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  color: white;
+  border: 2px solid transparent;
+  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
+}
+.rarity-checkbox-box.rarity-c { background: var(--bg-hover); color: var(--text-secondary); }
+.rarity-checkbox-box.rarity-u { background: var(--rarity-uncommon); }
+.rarity-checkbox-box.rarity-r { background: var(--rarity-rare); }
+.rarity-checkbox-box.rarity-m { background: var(--rarity-mythic); }
+
+/* Toolbar / button-row utilities (replace recurring inline flex rows) */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.btn-row { display: flex; gap: var(--space-2); }
+.spacer { margin-left: auto; }
+
+/* Setting row (label + control) */
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+}
+.setting-row-title { font-weight: 600; }
+.setting-row-desc { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 0.15rem; }
+
+/* Toggle switch */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 46px;
+  height: 26px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  transition: background var(--transition), border-color var(--transition);
+}
+.toggle-slider::before {
+  content: '';
+  position: absolute;
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--text);
+  border-radius: 50%;
+  transition: transform var(--transition);
+}
+.toggle-switch input:checked + .toggle-slider {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.toggle-switch input:checked + .toggle-slider::before { transform: translate(20px, -50%); }
+.toggle-switch input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px var(--primary-soft); }
+
 .filter-select,
 .filter-input {
-  padding: 0.75rem;
-  background: var(--bg-tertiary);
+  padding: var(--space-3);
+  background-color: var(--bg-tertiary);
   border: 1px solid var(--border);
-  border-radius: 0.5rem;
+  border-radius: var(--radius-md);
   color: var(--text);
+  font-size: var(--text-sm);
+  font-family: inherit;
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.filter-select { padding-right: 2.25rem; }
+
+.filter-input:focus,
+.filter-select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft);
 }
 
 .cards-grid {
@@ -1277,50 +1598,315 @@ button.btn-icon.active {
 /* Modal */
 .modal {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.75);
+  inset: 0;
+  background: rgba(2, 6, 23, 0.7);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  padding: var(--space-4);
+  z-index: var(--z-modal);
+  animation: modalFade 0.18s var(--ease);
 }
 
 .modal-content {
   background: var(--bg-secondary);
-  border-radius: 1rem;
-  padding: 2rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
   max-width: 1000px;
-  width: 90%;
+  width: 100%;
   max-height: 90vh;
   overflow-y: auto;
   position: relative;
+  box-shadow: var(--shadow-xl);
+  animation: modalPop 0.2s var(--ease);
+}
+
+/* Size variants — replace the per-modal inline max-width overrides */
+.modal-content.modal-sm { max-width: 420px; }
+.modal-content.modal-md { max-width: 560px; }
+.modal-content.modal-lg { max-width: 720px; }
+.modal-content.modal-xl { max-width: 960px; }
+
+@keyframes modalFade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes modalPop {
+  from { opacity: 0; transform: translateY(12px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
 }
 
+/* Optional structured header/body/footer (used by restructured modals) */
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-bottom: var(--space-5);
+}
+.modal-header h2,
+.modal-title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+}
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-5);
+}
+
+/* Close button — absolute top-right, no float hack. Works with existing
+   <span class="modal-close">&times;</span> markup and with header layouts. */
 .modal-close {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  width: 2.25rem;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  z-index: 2;
+  transition: background var(--transition), color var(--transition), border-color var(--transition);
+}
+
+/* When placed inside a flex header, keep it in flow rather than absolute */
+.modal-header .modal-close {
+  position: static;
+}
+
+/* Keep a leading modal title clear of the absolute close button */
+.modal-content > h2:first-of-type,
+.modal-content > .modal-close + h2 {
+  padding-right: 2.75rem;
+}
+
+.modal-close:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+  border-color: var(--border-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal, .modal-content { animation: none; }
+}
+
+/* Present an existing .modal as a right-side drawer (heavy panels).
+   One class on the .modal container — no inner-markup changes needed. */
+.modal.drawer-mode {
+  justify-content: flex-end;
+  align-items: stretch;
+  padding: 0;
+}
+.modal.drawer-mode .modal-content {
+  height: 100%;
+  max-height: 100%;
+  width: min(600px, 100vw);
+  max-width: 100vw !important; /* override any inline max-width */
+  border-radius: 0;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  animation: drawerIn 0.24s var(--ease);
+}
+.modal.drawer-mode.drawer-wide .modal-content { width: min(820px, 100vw); }
+
+@media (max-width: 640px) {
+  .modal.drawer-mode .modal-content { width: 100vw; }
+}
+
+/* ============================================================
+   Toasts (on-system; replaces inline cssText in ui.js)
+   ============================================================ */
+#toast-container {
+  position: fixed;
+  top: var(--space-5);
+  right: var(--space-5);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-width: min(400px, calc(100vw - 2 * var(--space-5)));
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  border-left: 3px solid transparent;
+  background: var(--bg-tertiary);
+  color: var(--text);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  box-shadow: var(--shadow-lg);
+  cursor: pointer;
+  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
+  animation: toastIn 0.25s var(--ease);
+}
+.toast.toast-out { opacity: 0; transform: translateX(24px); }
+
+.toast i {
+  font-size: 1.25rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.toast-success { border-left-color: var(--success); }
+.toast-success i { color: var(--success); }
+.toast-error { border-left-color: var(--danger); }
+.toast-error i { color: var(--danger); }
+.toast-warning { border-left-color: var(--warning); }
+.toast-warning i { color: var(--warning); }
+.toast-info { border-left-color: var(--info); }
+.toast-info i { color: var(--info); }
+.toast span { flex: 1; }
+
+@keyframes toastIn {
+  from { transform: translateX(24px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+/* ============================================================
+   Drawer (right-side slide-in panel for heavy modals)
+   ============================================================ */
+.drawer {
+  position: fixed;
+  inset: 0;
+  background: rgba(2, 6, 23, 0.55);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: flex-end;
+  z-index: var(--z-modal);
+  animation: modalFade 0.2s var(--ease);
+}
+
+.drawer-panel {
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  width: min(560px, 100vw);
+  max-width: 100vw;
+  height: 100%;
+  overflow-y: auto;
+  box-shadow: var(--shadow-xl);
+  animation: drawerIn 0.24s var(--ease);
+  display: flex;
+  flex-direction: column;
+}
+.drawer-panel.drawer-wide { width: min(760px, 100vw); }
+
+.drawer-header {
   position: sticky;
-  top: 0.5rem;
-  float: right;
-  margin-bottom: -2rem;
-  font-size: 2rem;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+}
+.drawer-header h2, .drawer-title {
+  font-size: var(--text-xl);
+  font-weight: 700;
+}
+.drawer-body { padding: var(--space-6); flex: 1; }
+.drawer-footer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  padding: var(--space-4) var(--space-6);
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border);
+}
+
+.drawer-close {
   cursor: pointer;
   color: var(--text-secondary);
+  background: var(--bg-tertiary);
+  width: 2.25rem;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  font-size: 1.5rem;
+  line-height: 1;
+  transition: background var(--transition), color var(--transition);
+}
+.drawer-close:hover { background: var(--bg-hover); color: var(--text); }
+
+@keyframes drawerIn {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+/* ============================================================
+   Generic popover (anchored dropdown; reuses menu look)
+   ============================================================ */
+.popover {
+  position: absolute;
+  z-index: var(--z-popover);
   background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-2);
+  min-width: 220px;
+  max-height: 70vh;
+  overflow-y: auto;
+  animation: popoverIn 0.14s var(--ease);
+}
+@keyframes popoverIn {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ============================================================
+   Confirm dialog (styled replacement for native confirm())
+   ============================================================ */
+.confirm-dialog { text-align: left; }
+.confirm-dialog .confirm-icon {
   width: 3rem;
   height: 3rem;
+  border-radius: var(--radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
-  z-index: 100;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  font-size: 1.5rem;
+  margin-bottom: var(--space-4);
+  background: var(--primary-soft);
+  color: var(--primary-light);
+}
+.confirm-dialog.confirm-danger .confirm-icon {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger);
 }
+.confirm-dialog h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
+.confirm-dialog p { color: var(--text-secondary); margin-bottom: var(--space-5); }
 
-.modal-close:hover {
-  color: var(--text);
-  background: var(--bg-tertiary);
+@media (prefers-reduced-motion: reduce) {
+  .drawer, .drawer-panel, .popover, .toast { animation: none; }
+}
+
+@media (max-width: 640px) {
+  .drawer-panel { width: 100vw; }
 }
 
 /* Card Detail Grid */
@@ -1652,7 +2238,7 @@ button.btn-icon.active {
 }
 
 .btn-success:hover {
-  background: #059669;
+  background: var(--success-dark);
 }
 
 /* Badge */
@@ -1667,11 +2253,6 @@ button.btn-icon.active {
   color: white;
 }
 
-/* Button with icon and text */
-.btn .btn-icon {
-  flex-shrink: 0;
-}
-
 .btn .btn-text {
   white-space: nowrap;
 }
@@ -1683,11 +2264,6 @@ button.btn-icon.active {
   font-size: 20px;
 }
 
-/* Button icon sizing */
-.btn .btn-icon {
-  font-size: 20px;
-}
-
 .btn-icon i {
   font-size: 20px;
 }
@@ -2196,11 +2772,6 @@ button.btn-icon.active {
   box-shadow: 0 0 0 3px var(--primary);
 }
 
-.btn-sm {
-  padding: 0.5rem 1rem;
-  font-size: 0.813rem;
-}
-
 /* Example Hand */
 .example-hand-grid {
   display: grid;
@@ -3116,7 +3687,27 @@ button.btn-icon.active {
   align-items: center;
   gap: 1rem;
   padding: 1rem;
+  margin: 2rem 0;
+}
+.pagination span { font-weight: 600; color: var(--text-secondary); }
+
+/* Clear-search button inside a relative search wrapper */
+.search-clear-btn {
+  position: absolute;
+  right: 0.75rem;
+  top: 1.1rem;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
 }
+.search-clear-btn:hover { color: var(--text); }
 
 /* Mobile Responsiveness */
 @media (max-width: 768px) {
diff --git a/client/src/utils/ui.js b/client/src/utils/ui.js
index 458a20c..7ff87a8 100644
--- a/client/src/utils/ui.js
+++ b/client/src/utils/ui.js
@@ -34,11 +34,58 @@ export function hideModal() {
   document.getElementById('modal').classList.add('hidden');
 }
 
-// Setup modal close handlers
-document.querySelector('#modal .modal-close')?.addEventListener('click', hideModal);
-document.getElementById('modal')?.addEventListener('click', (e) => {
-  if (e.target.id === 'modal') {
-    hideModal();
+/**
+ * Generic show/hide for any modal or drawer element by id.
+ * Centralizes what components used to do ad-hoc with classList.
+ */
+export function openModal(id) {
+  const el = document.getElementById(id);
+  if (el) el.classList.remove('hidden');
+  return el;
+}
+
+export function closeModal(id) {
+  const el = document.getElementById(id);
+  if (el) el.classList.add('hidden');
+  return el;
+}
+
+export const openDrawer = openModal;
+export const closeDrawer = closeModal;
+
+/* ------------------------------------------------------------------
+   Global overlay behavior: Esc + backdrop click + close buttons.
+   Applies to every .modal and .drawer without per-component wiring.
+------------------------------------------------------------------ */
+function closeTopLayer() {
+  // Overlays without data-persist can be dismissed with Esc/backdrop.
+  const layers = document.querySelectorAll(
+    '.modal:not(.hidden):not([data-persist]), .drawer:not(.hidden):not([data-persist])'
+  );
+  const top = layers[layers.length - 1];
+  if (top) top.classList.add('hidden');
+}
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeTopLayer();
+});
+
+document.addEventListener('click', (e) => {
+  // Any close button inside an overlay closes its overlay (always allowed)
+  const closer = e.target.closest('.modal-close, .drawer-close, [data-close]');
+  if (closer) {
+    const layer = closer.closest('.modal, .drawer');
+    if (layer) {
+      layer.classList.add('hidden');
+      return;
+    }
+  }
+  // Backdrop click (the overlay element itself, not its content)
+  if (
+    (e.target.classList.contains('modal') || e.target.classList.contains('drawer')) &&
+    !e.target.hasAttribute('data-persist')
+  ) {
+    e.target.classList.add('hidden');
   }
 });
 
@@ -87,84 +134,123 @@ export function formatOracleText(text) {
 }
 
 /**
- * Show toast notification
+ * Show toast notification (styled via .toast CSS classes + Phosphor icon).
+ * Signature is unchanged so existing call sites keep working.
  */
 export function showToast(message, type = 'success', duration = 3000) {
-  // Create toast container if it doesn't exist
   let container = document.getElementById('toast-container');
   if (!container) {
     container = document.createElement('div');
     container.id = 'toast-container';
-    container.style.cssText = `
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      z-index: 10000;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    `;
     document.body.appendChild(container);
   }
 
-  // Create toast
+  const icons = {
+    success: 'ph-check-circle',
+    error: 'ph-x-circle',
+    warning: 'ph-warning',
+    info: 'ph-info',
+  };
+
   const toast = document.createElement('div');
   toast.className = `toast toast-${type}`;
-  toast.style.cssText = `
-    padding: 12px 20px;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    color: white;
-    font-size: 14px;
-    font-weight: 500;
-    min-width: 200px;
-    max-width: 400px;
-    animation: slideIn 0.3s ease-out;
-    cursor: pointer;
-    transition: opacity 0.3s;
-  `;
 
-  // Set background color based on type
-  const colors = {
-    success: '#10b981',
-    error: '#ef4444',
-    warning: '#f59e0b',
-    info: '#3b82f6'
+  const icon = document.createElement('i');
+  icon.className = `ph-fill ${icons[type] || icons.info}`;
+  const text = document.createElement('span');
+  text.textContent = message;
+  toast.append(icon, text);
+
+  const dismiss = () => {
+    toast.classList.add('toast-out');
+    setTimeout(() => toast.remove(), 250);
   };
-  toast.style.backgroundColor = colors[type] || colors.info;
+  toast.addEventListener('click', dismiss);
+  container.appendChild(toast);
 
-  toast.textContent = message;
+  if (duration) setTimeout(dismiss, duration);
+}
 
-  // Add click to dismiss
-  toast.addEventListener('click', () => {
-    toast.style.opacity = '0';
-    setTimeout(() => toast.remove(), 300);
+/**
+ * Styled confirmation dialog — a drop-in replacement for native confirm().
+ * Returns a Promise<boolean>.
+ */
+export function confirmDialog({
+  title = 'Are you sure?',
+  message = '',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  danger = false,
+  icon,
+} = {}) {
+  return new Promise((resolve) => {
+    const overlay = document.createElement('div');
+    overlay.className = 'modal';
+    const iconName = icon || (danger ? 'ph-warning' : 'ph-question');
+    overlay.innerHTML = `
+      <div class="modal-content modal-sm confirm-dialog ${danger ? 'confirm-danger' : ''}">
+        <div class="confirm-icon"><i class="ph-fill ${iconName}"></i></div>
+        <h2>${title}</h2>
+        ${message ? `<p>${message}</p>` : ''}
+        <div class="modal-footer">
+          <button class="btn btn-ghost" data-act="cancel">${cancelText}</button>
+          <button class="btn ${danger ? 'btn-danger' : 'btn-primary'}" data-act="ok">${confirmText}</button>
+        </div>
+      </div>`;
+    document.body.appendChild(overlay);
+
+    const done = (val) => {
+      overlay.remove();
+      document.removeEventListener('keydown', onKey);
+      resolve(val);
+    };
+    overlay.querySelector('[data-act="ok"]').addEventListener('click', () => done(true));
+    overlay.querySelector('[data-act="cancel"]').addEventListener('click', () => done(false));
+    overlay.addEventListener('click', (e) => {
+      if (e.target === overlay) done(false);
+    });
+    const onKey = (e) => {
+      if (e.key === 'Escape') done(false);
+      else if (e.key === 'Enter') done(true);
+    };
+    document.addEventListener('keydown', onKey);
+    overlay.querySelector('[data-act="ok"]').focus();
   });
+}
 
-  // Add toast to container
-  container.appendChild(toast);
+/**
+ * Anchored popover. Pass an anchor element and a content element; returns
+ * { el, close }. Closes on outside-click or Esc. Reuses .popover styling.
+ */
+export function popover(anchorEl, contentEl, { align = 'left', gap = 6 } = {}) {
+  const pop = document.createElement('div');
+  pop.className = 'popover';
+  pop.appendChild(contentEl);
+  document.body.appendChild(pop);
 
-  // Auto remove after duration
-  if (duration) {
-    setTimeout(() => {
-      toast.style.opacity = '0';
-      setTimeout(() => toast.remove(), 300);
-    }, duration);
-  }
-}
+  const r = anchorEl.getBoundingClientRect();
+  pop.style.top = `${r.bottom + window.scrollY + gap}px`;
+  const rawLeft = align === 'right'
+    ? r.right + window.scrollX - pop.offsetWidth
+    : r.left + window.scrollX;
+  const maxLeft = window.scrollX + document.documentElement.clientWidth - pop.offsetWidth - 8;
+  pop.style.left = `${Math.max(8, Math.min(rawLeft, maxLeft))}px`;
 
-// Add CSS animation
-const style = document.createElement('style');
-style.textContent = `
-  @keyframes slideIn {
-    from {
-      transform: translateX(400px);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-`;
-document.head.appendChild(style);
+  const close = () => {
+    pop.remove();
+    document.removeEventListener('mousedown', onDoc, true);
+    document.removeEventListener('keydown', onKey);
+  };
+  const onDoc = (e) => {
+    if (!pop.contains(e.target) && !anchorEl.contains(e.target)) close();
+  };
+  const onKey = (e) => {
+    if (e.key === 'Escape') close();
+  };
+  setTimeout(() => {
+    document.addEventListener('mousedown', onDoc, true);
+    document.addEventListener('keydown', onKey);
+  }, 0);
+
+  return { el: pop, close };
+}
diff --git a/package-lock.json b/package-lock.json
index 792f78b..fbe861c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,8 @@
         "express": "^4.18.2",
         "express-rate-limit": "^7.1.5",
         "helmet": "^7.1.0",
-        "jsonwebtoken": "^9.0.2"
+        "jsonwebtoken": "^9.0.2",
+        "node-cron": "^3.0.3"
       },
       "devDependencies": {
         "nodemon": "^3.0.2"
@@ -1512,6 +1513,18 @@
       "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==",
       "license": "MIT"
     },
+    "node_modules/node-cron": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-3.0.3.tgz",
+      "integrity": "sha512-dOal67//nohNgYWb+nWmg5dkFdIwDm8EpeGYMekPMrngV3637lqnX0lbUcCtgibHTz6SEz7DAIjKvKDFYCnO1A==",
+      "license": "ISC",
+      "dependencies": {
+        "uuid": "8.3.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -2316,6 +2329,16 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/src/routes/admin.js b/src/routes/admin.js
index f80ebad..fb81d31 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -11,11 +11,36 @@ import {
   getBackupConfig
 } from '../services/backupService.js';
 import { getAllUsers, updateUser, deleteUser, resetUserPassword } from '../services/authService.js';
+import { getSettings, updateSettings } from '../services/settingsService.js';
 import { authenticate } from '../middleware/auth.js';
 import { requireAdmin } from '../middleware/adminAuth.js';
 
 const router = express.Router();
 
+/**
+ * GET /api/admin/settings
+ * Read app settings (admin only)
+ */
+router.get('/settings', authenticate, requireAdmin, (req, res, next) => {
+  try {
+    res.json(getSettings());
+  } catch (error) {
+    next(error);
+  }
+});
+
+/**
+ * PUT /api/admin/settings
+ * Update app settings (admin only)
+ */
+router.put('/settings', authenticate, requireAdmin, (req, res, next) => {
+  try {
+    res.json(updateSettings(req.body || {}));
+  } catch (error) {
+    next(error);
+  }
+});
+
 /**
  * POST /api/admin/sync
  * Trigger manual database sync (admin only)
diff --git a/src/routes/auth.js b/src/routes/auth.js
index 52985c6..e1cd37b 100644
--- a/src/routes/auth.js
+++ b/src/routes/auth.js
@@ -9,16 +9,29 @@ import {
 } from '../services/authService.js';
 import { authenticate } from '../middleware/auth.js';
 import { verifyToken, generateTokens } from '../utils/jwt.js';
+import { isRegistrationEnabled } from '../services/settingsService.js';
 import db from '../db/connection.js';
 
 const router = express.Router();
 
+/**
+ * GET /api/auth/config
+ * Public auth-related config (used by the client to hide the Register option).
+ */
+router.get('/config', (req, res) => {
+  res.json({ registrationEnabled: isRegistrationEnabled() });
+});
+
 /**
  * POST /api/auth/register
  * Register a new user
  */
 router.post('/register', async (req, res, next) => {
   try {
+    if (!isRegistrationEnabled()) {
+      return res.status(403).json({ error: 'Registration is disabled on this server' });
+    }
+
     const { username, email, password } = req.body;
 
     if (!username || !email || !password) {
diff --git a/src/services/cardService.js b/src/services/cardService.js
index 32127a3..2ae8ae3 100644
--- a/src/services/cardService.js
+++ b/src/services/cardService.js
@@ -710,8 +710,8 @@ export function getCardDeckUsage(userId, cardId) {
   return db.all(
     `SELECT DISTINCT d.id, d.name, d.format,
             SUM(dc.quantity) as total_quantity,
-            GROUP_CONCAT(CASE WHEN dc.is_sideboard = 1 THEN dc.quantity ELSE 0 END) as sideboard_quantities,
-            GROUP_CONCAT(CASE WHEN dc.is_sideboard = 0 THEN dc.quantity ELSE 0 END) as mainboard_quantities
+            GROUP_CONCAT(CASE WHEN COALESCE(dc.board_type, CASE WHEN dc.is_sideboard = 1 THEN 'sideboard' ELSE 'mainboard' END) = 'sideboard' THEN dc.quantity ELSE 0 END) as sideboard_quantities,
+            GROUP_CONCAT(CASE WHEN COALESCE(dc.board_type, CASE WHEN dc.is_sideboard = 1 THEN 'sideboard' ELSE 'mainboard' END) = 'mainboard' THEN dc.quantity ELSE 0 END) as mainboard_quantities
      FROM deck_cards dc
      JOIN decks d ON dc.deck_id = d.id
      JOIN printings p ON dc.printing_id = p.id
diff --git a/src/services/deckService.js b/src/services/deckService.js
index 36cfc8f..b5c3075 100644
--- a/src/services/deckService.js
+++ b/src/services/deckService.js
@@ -337,7 +337,7 @@ export function getDeckStats(deckId, userId) {
      FROM deck_cards dc
      JOIN printings p ON dc.printing_id = p.id
      JOIN cards c ON p.card_id = c.id
-     WHERE dc.deck_id = ? AND dc.is_sideboard = 0
+     WHERE dc.deck_id = ? AND (dc.board_type = 'mainboard' OR (dc.board_type IS NULL AND dc.is_sideboard = 0))
      GROUP BY CAST(c.cmc AS INTEGER)
      ORDER BY cmc`,
     [deckId]
@@ -352,7 +352,7 @@ export function getDeckStats(deckId, userId) {
      FROM deck_cards dc
      JOIN printings p ON dc.printing_id = p.id
      JOIN cards c ON p.card_id = c.id
-     WHERE dc.deck_id = ? AND dc.is_sideboard = 0
+     WHERE dc.deck_id = ? AND (dc.board_type = 'mainboard' OR (dc.board_type IS NULL AND dc.is_sideboard = 0))
      GROUP BY c.colors`,
     [deckId]
   );
@@ -375,7 +375,7 @@ export function getDeckStats(deckId, userId) {
      FROM deck_cards dc
      JOIN printings p ON dc.printing_id = p.id
      JOIN cards c ON p.card_id = c.id
-     WHERE dc.deck_id = ? AND dc.is_sideboard = 0
+     WHERE dc.deck_id = ? AND (dc.board_type = 'mainboard' OR (dc.board_type IS NULL AND dc.is_sideboard = 0))
      GROUP BY type`,
     [deckId]
   );
@@ -471,6 +471,7 @@ export function getDeckByShareToken(shareToken) {
       dc.id as deck_card_id,
       dc.quantity,
       dc.is_sideboard,
+      COALESCE(dc.board_type, CASE WHEN dc.is_sideboard = 1 THEN 'sideboard' ELSE 'mainboard' END) as board_type,
       dc.is_commander,
       p.id as printing_id,
       p.card_id,
@@ -496,6 +497,7 @@ export function getDeckByShareToken(shareToken) {
      JOIN cards c ON p.card_id = c.id
      LEFT JOIN sets s ON p.set_code = s.code
      WHERE dc.deck_id = ?
+       AND COALESCE(dc.board_type, CASE WHEN dc.is_sideboard = 1 THEN 'sideboard' ELSE 'mainboard' END) != 'maybeboard'
      ORDER BY dc.is_sideboard, c.cmc, c.name`,
     [share.deck_id]
   );
@@ -577,7 +579,7 @@ export function checkDeckLegality(deckId, userId, format) {
      FROM deck_cards dc
      JOIN printings p ON dc.printing_id = p.id
      JOIN cards c ON p.card_id = c.id
-     WHERE dc.deck_id = ? AND dc.is_sideboard = 0
+     WHERE dc.deck_id = ? AND (dc.board_type = 'mainboard' OR (dc.board_type IS NULL AND dc.is_sideboard = 0))
      GROUP BY c.id
      ORDER BY c.name`,
     [deckId]
diff --git a/src/services/settingsService.js b/src/services/settingsService.js
new file mode 100644
index 0000000..3e94738
--- /dev/null
+++ b/src/services/settingsService.js
@@ -0,0 +1,63 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Stored alongside backups in the data directory — deliberately file-based (not a DB
+// table) so it works regardless of migration state.
+const DATA_DIR = process.env.DATA_PATH || path.join(__dirname, '../../data');
+const SETTINGS_FILE = path.join(DATA_DIR, 'app-settings.json');
+
+const DEFAULTS = {
+  registrationEnabled: true,
+};
+
+function readFile() {
+  try {
+    const raw = fs.readFileSync(SETTINGS_FILE, 'utf8');
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Returns all app settings, merged over defaults.
+ * An env override (REGISTRATION_ENABLED=false) always wins so a headless/hardened
+ * deploy can force registration off without touching the file.
+ */
+export function getSettings() {
+  const settings = { ...DEFAULTS, ...readFile() };
+  if (process.env.REGISTRATION_ENABLED !== undefined) {
+    settings.registrationEnabled =
+      process.env.REGISTRATION_ENABLED.toLowerCase() === 'true';
+    settings.registrationLockedByEnv = true;
+  }
+  return settings;
+}
+
+export function isRegistrationEnabled() {
+  return getSettings().registrationEnabled !== false;
+}
+
+/**
+ * Merge and persist a partial settings patch. Only known keys are accepted.
+ * Ignored when the value is locked by an env var.
+ */
+export function updateSettings(patch = {}) {
+  const current = { ...DEFAULTS, ...readFile() };
+  if (typeof patch.registrationEnabled === 'boolean') {
+    current.registrationEnabled = patch.registrationEnabled;
+  }
+  try {
+    if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR, { recursive: true });
+    fs.writeFileSync(SETTINGS_FILE, JSON.stringify(current, null, 2));
+  } catch (err) {
+    throw new Error(`Failed to save settings: ${err.message}`);
+  }
+  return getSettings();
+}