/* SpellGang's community visual language. Existing play surfaces remain scoped out. */
:root {
  --sg-bg: #0c1313;
  --sg-panel: #151d1c;
  --sg-panel-2: #1b2522;
  --sg-raised: #202b27;
  --sg-border: #35413b;
  --sg-line: #899a8730;
  --sg-text: #eeece5;
  --sg-muted: #aab1b0;
  --sg-gold: #ddbf80;
  --sg-radius: 10px;
  --sg-sidebar-width: 246px;
}
body:has(#app), body.shared-page, body.landing-page {
  color: var(--sg-text);
  background: radial-gradient(ellipse at 68% 0, #35443a18, transparent 65%), var(--sg-bg);
  background-attachment: fixed;
}
#app { min-height: 100dvh; }
#app main { margin-left: var(--sg-sidebar-width); max-width: 1920px; padding: 0 28px 64px; }
#app .sidebar {
  width: var(--sg-sidebar-width);
  padding: 0 17px 16px;
  background: linear-gradient(170deg, #121b1a, #0e1615 65%);
  border-right: 1px solid #35413b88;
  box-shadow: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4b5244 transparent;
}
#app .sidebar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  margin: 0 -17px 14px;
  padding: 0 20px;
  border-bottom: 1px solid var(--sg-line);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.6px;
  color: #e8cb94;
  white-space: nowrap;
}
#app .sidebar .brand .sigil { margin: 0; font-size: 35px; font-weight: 400; color: var(--sg-gold); }
#app .sidebar .brand small { display: none; }
#app .sidebar>.nav-label { margin: 6px 12px 9px; font-size: 8px; color: #879590; letter-spacing: 1.5px; }
#app .sidebar nav .nav {
  min-height: 44px;
  margin: 4px 0;
  padding: 10px 13px;
  gap: 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: #d2d7d4;
  font-size: 13px;
  font-weight: 500;
}
#app .sidebar nav .nav:hover { background: #26312c77; color: #f3eee3; }
#app .sidebar nav .nav.active {
  background: linear-gradient(90deg, #a68c4826, #28332e99);
  border-color: #bfa05f25;
  box-shadow: inset 3px 0 var(--sg-gold);
  color: #ebcd8a;
}
#app .sidebar .nav-icon { width: 21px; height: 21px; flex: 0 0 21px; color: inherit; }
#app .nav b { color: #d7c28d; background: #18211d; border-radius: 5px; }
#app .sidebar .side-bottom { padding-top: 18px; }
#app .sidebar .user { min-height: 62px; padding: 15px 5px 0; border-color: #69715a3d; }
#app .sidebar .avatar { width: 40px; height: 40px; flex: 0 0 40px; background: linear-gradient(140deg,#3b4936,#1a2820); border-color: #a48c55; color: #f0dcae; }
#app .sidebar .user strong { color: #f0eee6; font-size: 12px; }
#app .sidebar .user small { color: #a1aaa6; font-size: 10px; }
#app .sidebar #users-open { font-size: 11px; min-height: 38px; }
#app .discord-link { box-shadow: none; }
#sidebar-groups { position: relative; padding: 21px 4px 4px; margin-top: 20px; border-top: 1px solid #a999603e; }
#sidebar-groups::before { content: ''; position: absolute; top: -3px; left: calc(50% - 3px); width: 5px; height: 5px; background: #d7bb7e; transform: rotate(45deg); }
#sidebar-groups .sidebar-groups-heading, #sidebar-groups>h2, #sidebar-groups>h3 { font: 500 9px Manrope,sans-serif; letter-spacing: 1.7px; text-transform: uppercase; color: #8d9c95; margin: 0 7px 11px; }
#sidebar-groups .sidebar-group, #sidebar-groups>button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px; margin: 2px 0; color: #cfd6cf; border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: left; font-size: 11px; }
#sidebar-groups .sidebar-group:hover, #sidebar-groups>button:hover { border-color: #aa975735; background: #26352a55; }
#sidebar-groups .sidebar-group-avatar { display: grid; place-items: center; flex: 0 0 35px; height: 37px; border-radius: 7px; border: 1px solid #b7a56d44; background: linear-gradient(145deg,#48543b,#202d25); color: #e1ce98; font: 18px Cinzel,serif; }
#sidebar-groups .sidebar-group-name { min-width: 0; overflow-wrap: anywhere; }
#sidebar-groups>p { color: #9ca9a1; font-size: 11px; line-height: 1.6; margin: 4px 7px; }

/* One header for navigation, search and the user's existing tools. */
#app .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  height: auto;
  margin: 0 -28px 20px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--sg-line);
  background: #0d1515f2;
  backdrop-filter: blur(14px);
}
#app .topbar .shell-crumb { min-width: 100px; color: #8d9a94; font-size: 10px; }
#app .topbar .shell-crumb strong { color: #ddc793; font-weight: 500; }
#app .topbar .shell-search { display: flex; position: relative; flex: 1 1 400px; align-items: center; max-width: 650px; min-width: 0; margin: 0 auto; }
#app .topbar .shell-search>svg { position: absolute; left: 12px; width: 18px; height: 18px; color: #a8b6ad; fill: none; stroke: currentColor; stroke-width: 1.5; pointer-events: none; }
#app .topbar .shell-search input { display: block; width: 100%; min-width: 0; height: 39px; padding: 9px 43px 9px 39px; background: #1b2422; border-color: #3d4942; border-radius: 8px; font-size: 12px; }
#app .topbar .shell-search button { position: absolute; right: 5px; width: 30px; height: 30px; padding: 5px; color: #c2c9c5; border: 0; background: transparent; border-radius: 5px; }
#app .topbar .shell-search button:hover { color: #f1d69c; background: #354034; }
#app .topbar>.shell-tools { display: flex; flex-shrink: 0; align-items: center; gap: 7px; }
#app .topbar>.shell-tools .button { min-height: 34px; padding: 7px 10px; border-color: #72785b42; background: transparent; font-size: 10px; }
#app .topbar>.shell-tools .button:hover { border-color: #c4a86c; background: #2d3425; }
#app .topbar>.shell-tools .shell-icon { display: grid; place-items: center; width: 35px; height: 35px; padding: 7px; border: 1px solid transparent; border-radius: 7px; color: #d9ddd7; background: transparent; }
#app .topbar>.shell-tools .shell-icon:hover { background: #28342b; border-color: #b9a16544; }
#app .topbar>.shell-tools svg { width: 19px; height: 19px; }
#app .collection-more>summary { border-color: #72785b42; background: transparent; border-radius: 6px; }
#app .collection-more>div { background: #19221f; border-color: #615c43; box-shadow: 0 14px 35px #0008; }

/* Shared controls remain quiet around the card artwork. */
#app :is(.button,.primary), #login-screen :is(.button,.primary), .shared-page :is(.button,.primary), .landing-page :is(.button,.primary) { border-radius: 7px; font-weight: 600; }
#app .button, #login-screen .button, .shared-page .button, .landing-page .button { background: #151e1b; border-color: #706d4b; color: #e2d4b4; }
#app .button:hover, #login-screen .button:hover, .shared-page .button:hover, .landing-page .button:hover { background: #2a3325; border-color: #b69b60; color: #f0dcae; }
#app .primary, #login-screen .primary, .shared-page .primary, .landing-page .primary { background: linear-gradient(115deg,#e3c98f,#c4a669); border: 1px solid #ebd29a; color: #171b15; box-shadow: inset 0 1px #fff7dc45,0 3px 9px #0002; }
#app .primary:hover, #login-screen .primary:hover, .shared-page .primary:hover, .landing-page .primary:hover { background: linear-gradient(115deg,#efd9a6,#d6b879); border-color: #f3dfb3; }
#app :is(input,select,textarea), #login-screen :is(input,select,textarea), .shared-page :is(input,select,textarea) { color: #e7e9e1; background-color: #101a17; border-color: #415047; border-radius: 7px; }
#app :is(input,select,textarea)::placeholder, #login-screen input::placeholder, .shared-page input::placeholder { color: #93a19a; }
#app :is(input,select,textarea):focus, #login-screen input:focus, .shared-page :is(input,select,textarea):focus { outline-color: #d5b677; border-color: #bda16a; }
#app .eyebrow, #login-screen .eyebrow, .shared-page .eyebrow { color: #bea873; }
#app .text-button, .shared-page .text-button { color: #c9bb96; }
#app :is(.deck-intro,#help-section)>h1, #app .deck-intro h1 { color: #ecd8b2; font-size: 37px; letter-spacing: -.6px; }
#app .deck-intro h1 em, #app #help-section h1 em { color: #d1b97f; font-style: normal; }
#app :is(.deck-intro,#help-section)>p, #app .deck-intro p { color: var(--sg-muted); }
#app :is(.collection-tabs,.profile-tabs), .shared-page .profile-tabs { background: #101917; border-color: #35443b; border-radius: 8px; }
#app :is(.collection-tabs,.profile-tabs) button, .shared-page .profile-tabs .button { color: #afb9b0; background: transparent; }
#app :is(.collection-tabs,.profile-tabs) button:is(.active,.selected), #app #community-tabs button.selected, .shared-page .profile-tabs .selected { background: linear-gradient(115deg,#a4884626,#565a3c44); color: #ebd29a; box-shadow: inset 0 0 0 1px #b79a5b77; border-radius: 5px; }

/* Collection: compact ledgers and generous card images. */
#app .hero { background: linear-gradient(100deg,#1f2c24,#15211c); border-color: #7a734c55; box-shadow: none; }
#app .hero h1 { color: #e6d1a7; }
#app .stats { background: #151e1b; border-color: #3c493c; border-radius: 9px; }
#app .stats>article { border-color: #7e886138; }
#app .stats strong { color: #e9d6a9; }
#app .stats small, #app .value-summary { color: #a8b2a5; }
#app .stats>.collection-value { border-top-color: #7e886138; }
#app .collection-filter-options>summary, #app .collection-filter-options[open]>.collection-filter-body { background: #151f1b; border-color: #425044; }
#app #inventory-toolbar>.inventory-bulk-controls { background: #253124; border-color: #6c7653; }
#app .card, .shared-page .card, #community-content .market-card { background: linear-gradient(150deg,#202c23,#111d16); border-color: #6c765b55; border-radius: 10px; box-shadow: 0 7px 20px #0002; }
#app .card:hover, .shared-page .card:hover, #community-content .market-card:hover { border-color: #c0a365; box-shadow: 0 10px 24px #0003; }
#app .card-open h3, .shared-page .card h3, #community-content .market-card h3 { color: #ecebdd; }
#app .card-price-line, .shared-page .card-price-line { border-color: #8b93612c; }
#app .card-price-line small, .shared-page .card-price-line small { color: #9eab98; }

/* Deck library and builder retain their established, tested geometry. */
#app #decks-section .deck-tile { background: radial-gradient(ellipse at 0 0,#79754b18,transparent 65%),#16211c; border-color: #6c725247; border-radius: 10px; }
#app #decks-section .deck-banner { background: linear-gradient(140deg,#5e694029,#101a16); border-right-color: #75845b2d; }
#app #decks-section .deck-tile:hover { border-color: #b39a60; }
#app #decks-section .deck-tile h2 { color: #e9d6ac; }
#app #decks-section .deck-tile-body>small { color: #a6b09d; }
#app #deck-editor :is(.deck-analysis,.deck-composition,.deck-pool) { background: #18221c; border-color: #5a65474d; box-shadow: none; }
#app #deck-editor .deck-value { background: #111b16; border-color: #5a65474d; }
#app #deck-editor :is(.deck-statistics-toggle,.deck-notes,.deck-sharing-state,.rules-note), #app #decks-section .format-help { background: #141e18; border-color: #5d67474d; }
#app #deck-editor :is(.deck-pane-title h2,.zone-title,.deck-total>strong) { color: #dfcca1; }
#app #deck-editor .deck-card-row { border-bottom-color: #717d4c26; }
#app #deck-editor .pool-card { background: #111c15; border-color: #5c704335; }
#app #deck-editor .deck-step button { background: #293623; border-color: #707b4c66; }
#app #deck-editor .deck-transfer { color: #dac694; background: #8b7a3421; border-color: #a28b4c66; }
#app #deck-editor .deck-stat-panel, #app #deck-editor .deck-land-ring, #app #deck-editor .deck-metrics article { background: #1b281d; border-color: #6f78483d; }

/* Supporting sections use the same frame, without adding new layers of UI. */
#app :is(.edition-card,.admin-user,.admin-summary>article,.admin-activity,.help-grid article,.offer-tile) { background: linear-gradient(135deg,#202a21,#131e17); border-color: #646c4b55; border-radius: 10px; box-shadow: 0 6px 20px #0002; }
#app :is(.edition-card,.admin-user,.help-grid article,.offer-tile) h2, #app .edition-card h3 { color: #e4d1aa; }
#app #community-section .exchange-explainer { background: #18211a88; border-color: #6e765042; }
#app #community-section .exchange-explainer span, #app #community-section .exchange-hint { color: #a4b0a0; }
#app #community-content .empty { background: #17211855; border-color: #887e4b55; }
#app #admin-section .admin-summary strong { color: #e5c98a; }
#app .help-grid article p, #app .edition-card p { color: #aeb8a7; }

/* Explicit product dialogs: no selectors for the separate play UI. */
:is(#card-dialog,#shared-dialog,#public-deck-dialog,#account-dialog,#new-deck-dialog,#users-dialog,#share-dialog,#admin-action-dialog,#notifications-dialog,#onboarding-dialog,#edition-dialog,#import-dialog,#inventory-dialog,#inventory-bulk-dialog,#wish-dialog,#trade-dialog,#interest-dialog,#chat-card-dialog,.wall-dialog) {
  color: #eeece3;
  background: linear-gradient(135deg,#1e2820,#101b15);
  border: 1px solid #9c885b88;
  border-radius: 13px;
  box-shadow: 0 24px 90px #000b,inset 0 1px #dfc78c12;
}
:is(#card-dialog,#shared-dialog,#public-deck-dialog,#account-dialog,#new-deck-dialog,#users-dialog,#share-dialog,#admin-action-dialog,#notifications-dialog,#onboarding-dialog,#edition-dialog,#import-dialog,#inventory-dialog,#inventory-bulk-dialog,#wish-dialog,#trade-dialog,#interest-dialog,#chat-card-dialog,.wall-dialog)::backdrop { background: #030a08c9; backdrop-filter: blur(5px); }
:is(#card-dialog,#shared-dialog,#public-deck-dialog,#account-dialog,#new-deck-dialog,#users-dialog,#share-dialog,#admin-action-dialog,#notifications-dialog,#onboarding-dialog,#edition-dialog,#import-dialog,#inventory-dialog,#inventory-bulk-dialog,#wish-dialog,#trade-dialog,#interest-dialog,#chat-card-dialog,.wall-dialog) h2 { color: #e8d2a3; }
:is(#card-dialog,#shared-dialog,#public-deck-dialog,#account-dialog,#new-deck-dialog,#users-dialog,#share-dialog,#admin-action-dialog,#notifications-dialog,#onboarding-dialog,#edition-dialog,#import-dialog,#inventory-dialog,#inventory-bulk-dialog,#wish-dialog,#trade-dialog,#interest-dialog,#chat-card-dialog,.wall-dialog) :is(input,select,textarea) { background-color: #0f1b14; border-color: #536143; color: #e7e7da; }
:is(#card-dialog,#shared-dialog,#public-deck-dialog,#account-dialog,#new-deck-dialog,#users-dialog,#share-dialog,#admin-action-dialog,#notifications-dialog,#onboarding-dialog,#edition-dialog,#import-dialog,#inventory-dialog,#inventory-bulk-dialog,#wish-dialog,#trade-dialog,#interest-dialog,#chat-card-dialog,.wall-dialog) .primary { background: linear-gradient(115deg,#e3c98f,#c4a669); border-color: #ebd29a; color: #171b15; }
#card-dialog :is(.ownership,.card-wanted-panel), #shared-dialog .card-prices { background: #1c2a1c; border-color: #69754c66; }
#card-dialog .finish-field { background: #152214; border-color: #637b443d; }
#card-dialog .detail-info .language { border-color: #616d414d; }
#chat-dock { background: #111c16; border-color: #93815488; box-shadow: 0 16px 55px #0008; }
#chat-dock header { background: #273326; border-color: #a18c574d; }
#chat-dock .chat-person:hover { background: #293a25; }
#chat-dock .chat-bubble { background: #243122; }
#chat-dock .chat-bubble.mine { background: #3e4c2a; }
#chat-launcher { background: #22321e; border-color: #a7925c; color: #e6d2a2; }

/* Public pages carry the same identity while retaining their readonly layout. */
.shared-page .shared-main { max-width: 1480px; }
.shared-page .shared-brand { border-color: #82734d44; }
.shared-page .shared-brand .brand { color: #e8cb94; font-weight: 600; letter-spacing: .1px; }
.shared-page .shared-intro h1 { color: #ecd6aa; }
.shared-page .shared-intro p { color: #aab4a6; }
.shared-page .shared-counts span { background: #1d2a1d; border-color: #68774b55; color: #d8dfc8; }
.shared-page .shared-toolbar { background: #152016; border-color: #66754855; }
.shared-page .public-deck-zone { background: #172319; border-color: #65784955; }
.shared-page .public-deck-card { background: #101d12; border-color: #647b3f55; }
.shared-page footer { border-color: #6f77473d; color: #8e9f88; }
#login-screen { background: #101813; }
#login-screen .login-art { background-color: #16251b; }
#login-screen .login-form { background: #101b15; }
#login-screen .brand, #login-screen h2 { color: #e6cb93; }
#login-screen .login-form>p, #login-screen .login-form>small { color: #aab69f; }
.landing-page header { border-color: #67724c44; }
.landing-page .brand { color: #e8cb94; }
.landing-page .intro h1 { color: #ecd8b2; }
.landing-page .intro h1 em { color: #b0c196; }
.landing-page .showcase article { background: linear-gradient(135deg,#222c20,#121e16); border-color: #7b7c4b55; border-radius: 11px; }
.landing-page .showcase h2 { color: #dfca9c; }
.landing-page .showcase p { color: #acb69e; }
.landing-page footer { border-color: #7e7b4d44; }

@media (min-width:761px) and (max-width:1150px) {
  :root { --sg-sidebar-width: 208px; }
  #app main { padding-inline: 20px; }
  #app .sidebar { padding-inline: 12px; }
  #app .sidebar .brand { font-size: 24px; margin-inline: -12px; padding-inline: 15px; gap: 5px; }
  #app .sidebar .brand .sigil { font-size: 30px; }
  #app .sidebar nav .nav { font-size: 12px; padding-inline: 10px; }
  #app .topbar { margin-inline: -20px; padding-inline: 20px; gap: 12px; }
  #app .topbar .shell-crumb { display: none; }
}
@media (max-width:760px) {
  #app .sidebar { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; padding: 10px 12px 7px; border-right: 0; border-bottom: 1px solid #5d67474d; gap: 8px; overflow: visible; }
  #app .sidebar .brand { min-height: 35px; margin: 0; padding: 0; border: 0; font-size: 23px; gap: 4px; }
  #app .sidebar .brand .sigil { font-size: 29px; }
  #app .sidebar>.nav-label, #app .sidebar #sidebar-groups { display: none; }
  #app .sidebar nav { display: flex; grid-column: 1/-1; grid-row: 2; gap: 4px; min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 1px 0 3px; scrollbar-width: none; }
  #app .sidebar nav::-webkit-scrollbar { display: none; }
  #app .sidebar nav .nav { display: flex; flex: 0 0 auto; flex-direction: row; width: auto; min-width: 0; min-height: 36px; margin: 0; padding: 7px 10px; gap: 6px; font-size: 11px; line-height: 1.3; white-space: nowrap; text-align: left; }
  #app .sidebar nav .nav .nav-icon { width: 17px; height: 17px; flex-basis: 17px; }
  #app .sidebar nav .nav[data-view=help] { width: auto; min-width: 0; font-size: 11px; padding: 7px 10px; }
  #app .sidebar .side-bottom { display: flex; grid-column: 2; grid-row: 1; gap: 6px; align-items: center; padding: 0; margin: 0; }
  #app .sidebar .user { min-height: 0; padding: 0; border: 0; width: auto; }
  #app .sidebar .avatar { width: 32px; height: 32px; flex-basis: 32px; }
  #app .sidebar #users-open { width: 30px; min-width: 30px; min-height: 31px; padding: 5px; font-size: 0; }
  #app .sidebar #users-open .nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
  #app .discord-link { min-height: 30px; padding: 6px 8px; font-size: 9px; }
  #app main { margin-left: 0; padding: 0 12px 64px; }
  #app .topbar { position: relative; margin: 0 -12px 14px; padding: 10px 12px; min-height: 56px; gap: 8px; flex-wrap: wrap; backdrop-filter: none; }
  #app .topbar .shell-crumb { display: none; }
  #app .topbar .shell-search { flex: 1 1 155px; margin: 0; max-width: none; }
  #app .topbar .shell-search input { height: 36px; font-size: 11px; padding-left: 33px; }
  #app .topbar .shell-search>svg { left: 10px; width: 15px; height: 15px; }
  #app .topbar>.shell-tools { gap: 4px; }
  #app .topbar>.shell-tools .button { min-height: 32px; font-size: 9px; padding: 6px 8px; }
  #app .topbar>.shell-tools .shell-icon { width: 31px; height: 31px; padding: 6px; }
  #app :is(.deck-intro,#help-section)>h1, #app .deck-intro h1 { font-size: 29px; }
  #app .card, .shared-page .card, #community-content .market-card { border-radius: 8px; }
  .shared-page .shared-brand .brand { font-size: 22px; }
  .shared-page .shared-intro h1 { font-size: 27px; }
}
@media (max-width:370px) {
  #app .sidebar .brand { font-size: 21px; }
  #app .sidebar .brand .sigil { font-size: 25px; }
  #app .discord-link { font-size: 0; gap: 0; width: 28px; min-height: 29px; padding: 5px; }
  #app .discord-link>span:first-child { display: inline; font-size: 14px; }
  #app .discord-link>span:last-child { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  #app :is(.button,.primary,.card,.deck-tile), .shared-page .card { transition: none; }
}