diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..91c5163
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,1181 @@
+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Lora', serif;
+    background: linear-gradient(135deg, #f5deb3 0%, #d2b48c 100%);
+    color: #333;
+    padding: 20px;
+    min-height: 100vh;
+}
+
+.header {
+    text-align: center;
+    background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
+    color: #f5deb3;
+    padding: 30px 20px;
+    border-radius: 10px;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+    margin-bottom: 30px;
+    position: relative;
+}
+
+.header h1 {
+    font-family: 'Cinzel', serif;
+    font-size: 2.5em;
+    margin: 0;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+.subtitle {
+    font-style: italic;
+    margin-top: 10px;
+    font-size: 1.1em;
+}
+
+.admin-link {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    color: #f5deb3;
+    text-decoration: none;
+    padding: 8px 16px;
+    border: 2px solid #f5deb3;
+    border-radius: 5px;
+    transition: all 0.3s;
+}
+
+.admin-link:hover {
+    background: #f5deb3;
+    color: #8b4513;
+}
+
+/* Hamburger Menu */
+.hamburger-menu {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 100;
+}
+
+.hamburger-btn {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 24px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+}
+
+.hamburger-line {
+    display: block;
+    width: 100%;
+    height: 3px;
+    background: #f5deb3;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.hamburger-btn:hover .hamburger-line {
+    background: #fff;
+}
+
+.hamburger-nav {
+    display: none;
+    position: absolute;
+    top: 35px;
+    left: 0;
+    background: linear-gradient(135deg, #654321 0%, #4a2511 100%);
+    border: 2px solid #f5deb3;
+    border-radius: 8px;
+    min-width: 180px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+    overflow: hidden;
+}
+
+.hamburger-nav.open {
+    display: block;
+}
+
+.hamburger-nav .nav-link {
+    display: block;
+    padding: 12px 16px;
+    color: #f5deb3;
+    text-decoration: none;
+    font-size: 0.95em;
+    transition: all 0.2s ease;
+    border-bottom: 1px solid rgba(245, 222, 179, 0.2);
+}
+
+.hamburger-nav .nav-link:last-child {
+    border-bottom: none;
+}
+
+.hamburger-nav .nav-link:hover {
+    background: rgba(245, 222, 179, 0.15);
+    color: #fff;
+    padding-left: 20px;
+}
+
+/* Mobile adjustments for hamburger menu */
+@media (max-width: 768px) {
+    .hamburger-menu {
+        top: 15px;
+        left: 15px;
+    }
+}
+
+@media (max-width: 480px) {
+    .hamburger-menu {
+        top: 10px;
+        left: 10px;
+    }
+
+    .hamburger-btn {
+        width: 26px;
+        height: 20px;
+    }
+
+    .hamburger-line {
+        height: 2px;
+    }
+
+    .hamburger-nav {
+        min-width: 160px;
+    }
+
+    .hamburger-nav .nav-link {
+        padding: 10px 14px;
+        font-size: 0.9em;
+    }
+}
+
+/* Party Tracker */
+.party-tracker {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+@media (max-width: 768px) {
+    .party-tracker {
+        grid-template-columns: 1fr;
+    }
+
+    body {
+        padding: 10px;
+    }
+
+    .header h1 {
+        font-size: 1.6em;
+    }
+
+    .admin-link {
+        position: static;
+        display: block;
+        margin-top: 15px;
+    }
+}
+
+@media (max-width: 480px) {
+    .header h1 {
+        font-size: 1.3em;
+    }
+}
+
+.party-xp, .faction-reps {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 3px 3px 12px rgba(0,0,0,0.2);
+}
+
+.party-xp h3, .faction-reps h3 {
+    font-family: 'Cinzel', serif;
+    color: #4a2511;
+    margin: 0 0 15px 0;
+}
+
+/* Public Faction Reputations */
+.faction-reps-public {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 3px 3px 12px rgba(0,0,0,0.2);
+    margin-bottom: 30px;
+}
+
+.faction-reps-public h3 {
+    font-family: 'Cinzel', serif;
+    color: #4a2511;
+    margin: 0 0 15px 0;
+    text-align: center;
+}
+
+.xp-display {
+    font-size: 1.2em;
+    margin: 10px 0;
+}
+
+.xp-label {
+    color: #666;
+    margin-right: 10px;
+}
+
+.xp-value {
+    color: #4169e1;
+    font-weight: 600;
+    font-size: 1.3em;
+}
+
+/* Reputation Table */
+.rep-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.rep-table td {
+    padding: 12px;
+    text-align: center;
+    border: 1px solid #ddd;
+    width: 25%;
+}
+
+/* Mobile responsive reputation table */
+@media (max-width: 600px) {
+    .rep-table tr {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .rep-table td {
+        width: 50%;
+        box-sizing: border-box;
+    }
+}
+
+.rep-table .faction-name {
+    display: block;
+    font-size: 0.95em;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.rep-score {
+    font-weight: 600;
+    font-size: 1.3em;
+    margin-top: 5px;
+    color: #333;
+}
+
+.rep-score.hostile {
+    color: #dc143c;
+}
+
+.rep-score.friendly {
+    color: #228b22;
+}
+
+.rep-badge {
+    display: inline-block;
+    font-size: 0.75em;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 3px;
+    margin-left: 5px;
+    text-transform: uppercase;
+}
+
+.rep-badge.hostile {
+    background: #dc143c;
+    color: white;
+}
+
+.rep-badge.friendly {
+    background: #228b22;
+    color: white;
+}
+
+.rep-badge.placeholder {
+    visibility: hidden;
+}
+
+.failure-penalty {
+    font-size: 0.75em;
+    color: #999;
+    margin-top: 5px;
+    font-style: italic;
+}
+
+/* Reputation Benefits Tooltip */
+.faction-name-wrapper {
+    position: relative;
+    display: block;
+}
+
+.benefits-info-icon {
+    display: block;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    background: #8b4513;
+    color: #fff;
+    border-radius: 50%;
+    font-size: 0.7em;
+    font-weight: bold;
+    cursor: pointer;
+    margin: 0 auto 5px auto;
+    transition: all 0.2s;
+}
+
+.benefits-info-icon:hover {
+    background: #654321;
+    transform: scale(1.1);
+}
+
+.benefits-tooltip {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 10px;
+    background: #fff;
+    border: 2px solid #8b4513;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+    z-index: 1000;
+    width: 400px;
+    max-width: 90vw;
+    text-align: left;
+}
+
+.benefits-tooltip.show {
+    display: block;
+}
+
+.tooltip-title {
+    font-family: 'Cinzel', serif;
+    font-size: 1.1em;
+    font-weight: 600;
+    color: #4a2511;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #d2b48c;
+}
+
+.benefit-item {
+    margin-bottom: 12px;
+    padding: 10px;
+    border-radius: 5px;
+    border-left: 4px solid;
+}
+
+.benefit-item.unlocked {
+    background: #f0f8f0;
+    border-left-color: #228b22;
+}
+
+.benefit-item.locked {
+    background: #f8f8f8;
+    border-left-color: #999;
+    opacity: 0.7;
+}
+
+.benefit-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.benefit-level {
+    font-weight: 600;
+    font-size: 0.9em;
+    color: #4a2511;
+}
+
+.benefit-item.unlocked .benefit-level {
+    color: #228b22;
+}
+
+.benefit-item.locked .benefit-level {
+    color: #999;
+}
+
+.benefit-status {
+    font-size: 0.9em;
+}
+
+.benefit-item.unlocked .benefit-status {
+    color: #228b22;
+}
+
+.benefit-item.locked .benefit-status {
+    color: #999;
+}
+
+.benefit-text {
+    font-size: 0.85em;
+    line-height: 1.5;
+    color: #333;
+}
+
+.benefit-item.locked .benefit-text {
+    color: #666;
+}
+
+/* Tooltip arrow */
+.benefits-tooltip::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 8px solid transparent;
+    border-bottom-color: #8b4513;
+}
+
+.benefits-tooltip::after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-bottom-color: #fff;
+    margin-bottom: -2px;
+}
+
+/* Quest Board */
+.quest-board {
+    display: grid;
+    gap: 20px;
+}
+
+.quest {
+    background: #fff;
+    border-left: 5px solid;
+    padding: 20px;
+    box-shadow: 3px 3px 8px rgba(0,0,0,0.2);
+    position: relative;
+    transition: transform 0.2s;
+    border-radius: 5px;
+}
+
+.quest:hover {
+    transform: translateX(5px);
+}
+
+.quest-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 12px;
+}
+
+.faction-name {
+    font-family: 'Cinzel', serif;
+    font-size: 1.4em;
+    font-weight: 600;
+    margin: 0;
+}
+
+.quest-id {
+    font-size: 0.9em;
+    color: #666;
+    font-style: italic;
+}
+
+.quest-text {
+    font-size: 1.05em;
+    margin: 12px 0;
+    padding: 12px;
+    background: #fafafa;
+    border-radius: 3px;
+    line-height: 1.5;
+}
+
+.rewards {
+    display: flex;
+    gap: 12px;
+    margin-top: 12px;
+    font-size: 0.95em;
+    flex-wrap: wrap;
+}
+
+.reward-item {
+    background: #f0f0f0;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-weight: 600;
+}
+
+.gold { color: #d4af37; }
+.xp { color: #4169e1; }
+.rep { color: #228b22; }
+.duration { color: #8b4513; }
+.availability { color: #708090; }
+
+/* Reputation Changes */
+.reputation-changes {
+    margin-top: 12px;
+    padding: 10px;
+    background: #f9f9f9;
+    border-radius: 4px;
+    font-size: 0.9em;
+    line-height: 1.8;
+}
+
+.reputation-changes strong {
+    display: block;
+    margin-bottom: 6px;
+    color: #4a2511;
+}
+
+.rep-change {
+    display: inline-block;
+    margin-right: 12px;
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.rep-change .faction-name {
+    font-size: 0.95em;
+}
+
+.rep-positive {
+    background: #d4edda;
+    color: #155724;
+}
+
+.rep-negative {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+/* Faction-specific colors */
+.kundarak { border-left-color: #8b7355; }
+.medani { border-left-color: #4682b4; }
+.deneith { border-left-color: #b22222; }
+.tharashk { border-left-color: #8b6914; }
+.thuranni { border-left-color: #4b0082; }
+.tarkanan { border-left-color: #dc143c; }
+.ashbound { border-left-color: #228b22; }
+.morgrave { border-left-color: #ff8c00; }
+
+.kundarak .faction-name, .faction-name.kundarak { color: #8b7355; }
+.medani .faction-name, .faction-name.medani { color: #4682b4; }
+.deneith .faction-name, .faction-name.deneith { color: #b22222; }
+.tharashk .faction-name, .faction-name.tharashk { color: #8b6914; }
+.thuranni .faction-name, .faction-name.thuranni { color: #4b0082; }
+.tarkanan .faction-name, .faction-name.tarkanan { color: #dc143c; }
+.ashbound .faction-name, .faction-name.ashbound { color: #228b22; }
+.morgrave .faction-name, .faction-name.morgrave { color: #ff8c00; }
+
+/* Loading & Empty States */
+.loading, .no-quests {
+    text-align: center;
+    padding: 40px;
+    color: #666;
+    font-style: italic;
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 2px solid #8b4513;
+    font-style: italic;
+    color: #6b4423;
+}
+
+/* ========== ADMIN STYLES ========== */
+
+/* Admin Sections */
+.admin-section {
+    background: #fff;
+    padding: 25px;
+    border-radius: 8px;
+    box-shadow: 3px 3px 12px rgba(0,0,0,0.2);
+    margin-bottom: 25px;
+}
+
+.admin-section h2 {
+    font-family: 'Cinzel', serif;
+    color: #4a2511;
+    margin: 0 0 20px 0;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #8b4513;
+}
+
+/* Login Box */
+.login-box {
+    max-width: 400px;
+    margin: 50px auto;
+    padding: 30px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+.login-box h2 {
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.login-box input {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 2px solid #ddd;
+    border-radius: 5px;
+    font-size: 1em;
+}
+
+.error-message {
+    color: #dc143c;
+    text-align: center;
+    margin-top: 10px;
+}
+
+/* Admin Quest List */
+.admin-quest-list {
+    display: grid;
+    gap: 15px;
+}
+
+.admin-quest {
+    background: #f9f9f9;
+    border-left: 5px solid;
+    padding: 15px;
+    border-radius: 5px;
+    position: relative;
+}
+
+.quest-actions {
+    margin-top: 15px;
+    display: flex;
+    gap: 10px;
+}
+
+/* Buttons */
+button {
+    font-family: 'Lora', serif;
+    font-size: 1em;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.btn-primary {
+    background: #4682b4;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #357abd;
+}
+
+.btn-secondary {
+    background: #8b7355;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #6b5535;
+}
+
+.btn-success {
+    background: #228b22;
+    color: white;
+}
+
+.btn-success:hover {
+    background: #1a6b1a;
+}
+
+.btn-danger {
+    background: #dc143c;
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #b01030;
+}
+
+.btn-complete {
+    background: #4169e1;
+    color: white;
+    width: 100%;
+}
+
+.btn-complete:hover {
+    background: #3159d1;
+}
+
+/* Action Buttons Grid */
+.action-buttons {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+
+/* Modals */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.6);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background: #fff;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+    max-width: 500px;
+    width: 90%;
+}
+
+.modal-content h3 {
+    font-family: 'Cinzel', serif;
+    color: #4a2511;
+    margin: 0 0 20px 0;
+}
+
+.modal-content p {
+    margin: 15px 0;
+    padding: 10px;
+    background: #f9f9f9;
+    border-radius: 5px;
+}
+
+.modal-content label {
+    display: block;
+    margin: 15px 0 5px 0;
+    font-weight: 600;
+}
+
+.modal-content input,
+.modal-content select {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #ddd;
+    border-radius: 5px;
+    font-size: 1em;
+    margin-bottom: 15px;
+}
+
+.modal-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.modal-buttons button {
+    flex: 1;
+}
+
+/* Section Titles */
+.section-title {
+    font-family: 'Cinzel', serif;
+    color: #4a2511;
+    font-size: 1.8em;
+    margin: 30px 0 20px 0;
+    text-align: center;
+    border-bottom: 3px solid #8b4513;
+    padding-bottom: 10px;
+}
+
+/* Quest History */
+.quest-history {
+    display: grid;
+    gap: 15px;
+    margin-bottom: 30px;
+}
+
+.history-entry {
+    background: #fff;
+    border-left: 5px solid;
+    padding: 15px;
+    box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
+    border-radius: 5px;
+    opacity: 0.9;
+}
+
+.history-entry.success {
+    background: #f9fff9;
+}
+
+.history-entry.failure {
+    background: #fff5f5;
+}
+
+.history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.history-faction-info {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.history-faction-info .faction-name {
+    font-family: 'Cinzel', serif;
+    font-size: 1.2em;
+    font-weight: 600;
+    margin: 0;
+}
+
+.history-status {
+    font-size: 0.9em;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 4px;
+    background: #f0f0f0;
+}
+
+.history-status.success {
+    background: #d4edda;
+    color: #155724;
+}
+
+.history-status.failure {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.history-week {
+    font-size: 0.9em;
+    color: #666;
+    font-style: italic;
+}
+
+.history-description {
+    font-size: 0.95em;
+    margin: 10px 0;
+    padding: 10px;
+    background: #fafafa;
+    border-radius: 3px;
+}
+
+.history-rewards {
+    display: flex;
+    gap: 10px;
+    margin-top: 10px;
+    font-size: 0.9em;
+    flex-wrap: wrap;
+}
+
+/* Faction Quest Status Grid */
+.quest-status-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 15px;
+}
+
+.faction-status {
+    background: #f9f9f9;
+    border-left: 5px solid;
+    padding: 15px;
+    border-radius: 5px;
+    transition: all 0.3s;
+}
+
+.faction-status.exhausted {
+    background: #ffe6e6;
+    opacity: 0.8;
+}
+
+.faction-status .faction-name {
+    font-family: 'Cinzel', serif;
+    font-size: 1.2em;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.faction-status .quest-progress {
+    font-size: 0.95em;
+    color: #666;
+    margin: 8px 0;
+}
+
+.faction-status .quest-progress .used {
+    font-weight: 600;
+    color: #333;
+}
+
+.faction-status .quest-progress .total {
+    font-weight: 600;
+    color: #666;
+}
+
+.faction-status .quest-remaining {
+    font-size: 0.9em;
+    font-weight: 600;
+    color: #228b22;
+    margin-top: 8px;
+}
+
+.faction-status .quest-remaining.warning {
+    color: #dc143c;
+    font-size: 1em;
+}
+
+/* Print Styles */
+@media print {
+    body {
+        background: white;
+    }
+
+    .header {
+        background: #8b4513;
+        print-color-adjust: exact;
+        -webkit-print-color-adjust: exact;
+    }
+
+    .admin-link {
+        display: none;
+    }
+
+    .quest:hover {
+        transform: none;
+    }
+}
+
+/* ===== MAGIC ITEM MARKET STYLES ===== */
+
+/* Market Section */
+.market-section {
+  margin: 2rem auto;
+  max-width: 1400px;
+}
+
+.no-items {
+  text-align: center;
+  padding: 2rem;
+  color: #b8a992;
+  font-style: italic;
+}
+
+/* Market Table */
+.market-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: rgba(255, 255, 255, 0.9);
+  border: 2px solid #8b7355;
+}
+
+.market-table thead {
+  background: rgba(139, 115, 85, 0.3);
+  border-bottom: 2px solid #8b7355;
+}
+
+.market-table th {
+  padding: 1rem;
+  text-align: left;
+  font-weight: 600;
+  color: #2c1810;
+  font-size: 0.95rem;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s ease;
+}
+
+.market-table th:hover {
+  background: rgba(139, 115, 85, 0.4);
+}
+
+.market-table th.sorted-asc,
+.market-table th.sorted-desc {
+  background: rgba(139, 115, 85, 0.5);
+}
+
+.market-table tbody tr {
+  border-bottom: 1px solid rgba(139, 115, 85, 0.2);
+  transition: background 0.2s ease;
+}
+
+.market-table tbody tr:hover {
+  background: rgba(139, 115, 85, 0.1);
+}
+
+.market-table td {
+  padding: 0.75rem 1rem;
+  color: #2c1810;
+}
+
+/* Table Cells */
+.item-name-cell {
+  font-weight: 600;
+  color: #2c1810;
+  font-size: 0.95rem;
+}
+
+.item-faction-cell {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+/* Faction colors - using existing colors from faction-name classes */
+.item-faction-cell.kundarak { color: #8b7355; }
+.item-faction-cell.medani { color: #4682b4; }
+.item-faction-cell.deneith { color: #b22222; }
+.item-faction-cell.tharashk { color: #8b6914; }
+.item-faction-cell.thuranni { color: #4b0082; }
+.item-faction-cell.tarkanan { color: #dc143c; }
+.item-faction-cell.ashbound { color: #228b22; }
+.item-faction-cell.morgrave { color: #ff8c00; }
+
+.item-rarity-cell {
+  text-align: center;
+}
+
+.rarity-badge {
+  display: inline-block;
+  padding: 0.25rem 0.6rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.rarity-uncommon {
+  background: #1e7b1e;
+  color: white;
+}
+
+.rarity-rare {
+  background: #4169e1;
+  color: white;
+}
+
+.rarity-very-rare {
+  background: #9370db;
+  color: white;
+}
+
+.item-stock-cell {
+  font-size: 0.85rem;
+}
+
+.stock-indicator {
+  font-size: 0.75rem;
+  letter-spacing: 2px;
+  margin-right: 0.5rem;
+}
+
+.stock-label {
+  text-transform: capitalize;
+}
+
+/* Stock level colors */
+.stock-very-limited { color: #ff8c00; }
+.stock-limited { color: #daa520; }
+.stock-modest { color: #4682b4; }
+.stock-abundant { color: #32cd32; }
+.stock-very-abundant { color: #228b22; }
+
+.item-cost-cell {
+  font-weight: 600;
+  color: #8b6914;
+  font-size: 0.95rem;
+  text-align: right;
+}
+
+.base-price {
+  font-size: 0.75rem;
+  color: #666;
+  font-weight: normal;
+  margin-left: 0.5rem;
+  text-decoration: line-through;
+}
+
+/* Collapsible Market Section */
+.collapsible-header {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s ease;
+}
+
+.collapsible-header:hover {
+  color: #654321;
+}
+
+.collapsible-header span {
+  display: inline-block;
+  transition: transform 0.2s ease;
+  font-size: 0.8em;
+  margin-right: 0.5rem;
+}
+
+.collapsible-content {
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+/* Market table wrapper for horizontal scroll */
+.market-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: 0 -10px;
+  padding: 0 10px;
+  position: relative;
+}
+
+/* Scroll hint shadow on mobile */
+@media (max-width: 768px) {
+  .market-table-wrapper {
+    background:
+      linear-gradient(to right, white 30%, transparent),
+      linear-gradient(to right, transparent, white 70%) 100% 0,
+      linear-gradient(to right, rgba(0,0,0,0.15), transparent 20px),
+      linear-gradient(to left, rgba(0,0,0,0.15), transparent 20px) 100% 0;
+    background-repeat: no-repeat;
+    background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
+    background-attachment: local, local, scroll, scroll;
+  }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .market-table {
+    font-size: 0.85rem;
+    min-width: 600px;
+  }
+
+  .market-table th,
+  .market-table td {
+    padding: 0.5rem;
+  }
+
+  .stock-indicator {
+    display: none;
+  }
+}