/* JP Card Lab Graphite theme
   Visual-only layer. It deliberately does not change application structure,
   routes, IDs, event hooks or functional visibility rules. */

html[data-app-theme="graphite"]{
  color-scheme:dark;
  --bg:#17191c;
  --panel:#24272c;
  --panel2:#202328;
  --panel3:#2a2e33;
  --line:#3a3f46;
  --line-soft:#30343a;
  --text:#f0f2f5;
  --muted:#9ba3ad;
  --accent:#32b8ea;
  --accent-strong:#187fa9;
  --accent2:#82d4f3;
  --danger:#e27676;
  --success:#72c995;
  --shadow:none;
}

html[data-app-theme="graphite"] body{
  background:#17191c!important;
  color:#f0f2f5;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html[data-app-theme="graphite"] .shell{
  width:min(1500px,calc(100% - 56px));
  padding-top:0;
}

html[data-app-theme="graphite"] .topbar{
  min-height:72px;
  margin-bottom:24px;
  padding:0;
  border-bottom:1px solid #3a3f46;
}

html[data-app-theme="graphite"] .userbar{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
}

html[data-app-theme="graphite"] .btn,
html[data-app-theme="graphite"] button.btn{
  border:1px solid #474d54;
  border-radius:2px;
  background:#30343a;
  color:#e4e8ec;
  box-shadow:none;
}

html[data-app-theme="graphite"] .btn:hover{
  background:#383d43;
  filter:none;
}

html[data-app-theme="graphite"] .btn.primary{
  border-color:#2a84ab;
  border-radius:2px;
  background:#187fa9;
  color:#fff;
  box-shadow:none;
}

html[data-app-theme="graphite"] input,
html[data-app-theme="graphite"] select,
html[data-app-theme="graphite"] textarea{
  border:1px solid #474d54;
  border-radius:2px;
  background:#1d2024;
  color:#f0f2f5;
  box-shadow:none;
}

html[data-app-theme="graphite"] input:focus,
html[data-app-theme="graphite"] select:focus,
html[data-app-theme="graphite"] textarea:focus{
  outline:none;
  border-color:#4384a0;
  box-shadow:0 0 0 1px #4384a0;
}

html[data-app-theme="graphite"] .hero,
html[data-app-theme="graphite"] .panel,
html[data-app-theme="graphite"] .jp-home-brandcard,
html[data-app-theme="graphite"] .jp-home-card,
html[data-app-theme="graphite"] .jp-collection-card,
html[data-app-theme="graphite"] .jp-public-feature,
html[data-app-theme="graphite"] .item,
html[data-app-theme="graphite"] .owned-card,
html[data-app-theme="graphite"] .result,
html[data-app-theme="graphite"] .selected-print,
html[data-app-theme="graphite"] .collection-count,
html[data-app-theme="graphite"] .rule-text,
html[data-app-theme="graphite"] .jp-settings-card{
  border:1px solid #3a3f46;
  border-radius:3px;
  background:#24272c;
  box-shadow:none;
}

html[data-app-theme="graphite"] .jp-home-brandcard{
  min-height:0;
  padding:18px 20px;
  gap:16px;
}

html[data-app-theme="graphite"] .jp-home-brandmark{
  width:64px;
  height:64px;
  filter:drop-shadow(0 4px 12px rgba(50,184,234,.24));
}

html[data-app-theme="graphite"] .jp-home-brandname{
  font-size:clamp(1.55rem,3vw,2.35rem);
  letter-spacing:-.02em;
}

html[data-app-theme="graphite"] .jp-home-tagline{
  margin-top:4px;
  color:#82d4f3;
  font-size:.65rem;
  letter-spacing:.18em;
}

html[data-app-theme="graphite"] .jp-dashboard-head,
html[data-app-theme="graphite"] .jp-page-head{
  padding:0 0 4px;
}

html[data-app-theme="graphite"] .jp-dashboard-head h1,
html[data-app-theme="graphite"] .jp-page-head h1{
  font-size:1.65rem;
  letter-spacing:-.02em;
}

html[data-app-theme="graphite"] .jp-home-kicker,
html[data-app-theme="graphite"] .jp-settings-kicker,
html[data-app-theme="graphite"] .eyebrow{
  color:#32b8ea;
}

html[data-app-theme="graphite"] .jp-home-grid,
html[data-app-theme="graphite"] .jp-home-grid-four,
html[data-app-theme="graphite"] .jp-home-lower-grid,
html[data-app-theme="graphite"] .jp-collection-cards,
html[data-app-theme="graphite"] .jp-settings-grid{
  gap:12px;
}

html[data-app-theme="graphite"] .jp-home-card{
  padding:16px;
}

html[data-app-theme="graphite"] .jp-home-card strong{
  font-size:1.55rem;
}

html[data-app-theme="graphite"] .jp-activity-icon,
html[data-app-theme="graphite"] .jp-collection-icon{
  border:1px solid #3a3f46;
  border-radius:2px;
  background:#202328;
  color:#82d4f3!important;
}

html[data-app-theme="graphite"] .jp-collection-card:hover,
html[data-app-theme="graphite"] .jp-collection-card.is-active,
html[data-app-theme="graphite"] .item.active,
html[data-app-theme="graphite"] .owned-card:focus-visible{
  border-color:#4384a0;
  box-shadow:none;
}

html[data-app-theme="graphite"] .jp-all-collections-button{
  min-height:46px;
  border:1px solid #3f6475;
  border-radius:3px;
  background:#202a2f;
  box-shadow:none;
}

html[data-app-theme="graphite"] .jp-all-collections-button:hover{
  border-color:#4384a0;
  background:#26343a;
}

html[data-app-theme="graphite"] .status{
  border-radius:2px;
  background:#202328;
}

html[data-app-theme="graphite"] .card-dialog{
  border-radius:3px;
  background:#24272c;
  box-shadow:none;
}

html[data-app-theme="graphite"] .dialog-close{
  border-radius:2px;
  background:#30343a;
}

html[data-app-theme="graphite"] .auth-panel{
  border-radius:3px;
  background:#24272c;
}

html[data-app-theme="graphite"] .auth-segmented{
  border-radius:3px;
  background:#1d2024;
}

html[data-app-theme="graphite"] .auth-segment{
  border-radius:2px;
}

html[data-app-theme="graphite"] .auth-segment.active{
  background:#187fa9;
  color:#fff;
  box-shadow:none;
}

html[data-app-theme="graphite"] .jp-public-brandcard{
  border-radius:3px;
  background:#24272c;
}

html[data-app-theme="graphite"] .jp-public-feature{
  border-radius:3px;
}

html[data-app-theme="graphite"] .jp-public-feature-icon{
  border-radius:2px;
  background:#202a2f;
}

html[data-app-theme="graphite"] .jp-settings-current,
html[data-app-theme="graphite"] .jp-settings-pending{
  border:1px solid #3a3f46;
  border-radius:2px;
  background:#1d2024;
}

html[data-app-theme="graphite"] .jp-settings-pending{
  border-left:3px solid #32b8ea;
  background:#202a2f;
}

html[data-app-theme="graphite"] .jp-settings-badge{
  border-radius:2px;
  background:#26352e;
}

html[data-app-theme="graphite"] body.jp-settings-page{
  background:#17191c!important;
}

html[data-app-theme="graphite"] .jp-settings-shell{
  width:min(1280px,calc(100% - 56px));
  padding-top:0;
}

html[data-app-theme="graphite"] .jp-settings-header{
  min-height:72px;
  margin-bottom:24px;
  padding:0;
  border-bottom:1px solid #3a3f46;
}

html[data-app-theme="graphite"] .jp-settings-brandmark{
  width:42px;
  height:42px;
  flex-basis:42px;
  filter:drop-shadow(0 4px 12px rgba(50,184,234,.24));
}

html[data-app-theme="graphite"] .jp-settings-brandcopy small{
  color:#9ba3ad;
}

html[data-app-theme="graphite"] .invite-panel,
html[data-app-theme="graphite"] .verify-panel,
html[data-app-theme="graphite"] .reset-panel{
  border:1px solid #3a3f46;
  border-radius:3px;
  background:#24272c;
  box-shadow:none;
}

html[data-app-theme="graphite"] .invite-mark,
html[data-app-theme="graphite"] .verify-mark{
  filter:drop-shadow(0 4px 12px rgba(50,184,234,.24));
}

html[data-app-theme="graphite"] .reset-mark{
  width:48px;
  height:48px;
  border-radius:0;
  background:url('/app/jpcardlab-mark.svg') center/contain no-repeat;
  color:transparent;
  filter:drop-shadow(0 4px 12px rgba(50,184,234,.24));
}

html[data-app-theme="graphite"] .invite-button,
html[data-app-theme="graphite"] .verify-button,
html[data-app-theme="graphite"] .reset-button{
  border-radius:2px;
  box-shadow:none;
}

html[data-app-theme="graphite"] .invite-button.primary,
html[data-app-theme="graphite"] .verify-button.primary,
html[data-app-theme="graphite"] .reset-button.primary{
  background:#187fa9;
  border-color:#2a84ab;
}

@media(min-width:1100px){
  html[data-app-theme="graphite"] body:not(.jp-settings-page){
    padding-left:220px;
  }

  html[data-app-theme="graphite"] .shell{
    width:calc(100% - 56px);
    max-width:none;
    margin:0 28px;
  }

  html[data-app-theme="graphite"] .jp-desktop-sidebar{
    left:0;
    top:0;
    bottom:0;
    width:220px;
    padding:0 10px 12px;
    border:0;
    border-right:1px solid #3a3f46;
    border-radius:0;
    background:#202328;
    box-shadow:none;
    backdrop-filter:none;
  }

  html[data-app-theme="graphite"] .jp-sidebar-brand{
    min-height:72px;
    padding:0 8px;
    border-bottom:1px solid #3a3f46;
  }

  html[data-app-theme="graphite"] .jp-sidebar-mark{
    width:42px;
    height:42px;
  }

  html[data-app-theme="graphite"] .jp-desktop-sidebar nav{
    gap:3px;
    margin-top:14px;
  }

  html[data-app-theme="graphite"] .jp-desktop-sidebar button,
  html[data-app-theme="graphite"] .jp-desktop-sidebar .jp-sidebar-settings-link{
    min-height:40px;
    gap:8px;
    padding:8px 10px;
    border:0;
    border-left:3px solid transparent;
    border-radius:2px;
    color:#b8bec7;
    font-size:.84rem;
    font-weight:650;
  }

  html[data-app-theme="graphite"] .jp-desktop-sidebar button:hover,
  html[data-app-theme="graphite"] .jp-desktop-sidebar button.is-active,
  html[data-app-theme="graphite"] .jp-desktop-sidebar .jp-sidebar-settings-link:hover{
    background:#2b3036;
    border-color:transparent;
    color:#fff;
  }

  html[data-app-theme="graphite"] .jp-desktop-sidebar button.is-active{
    border-left-color:#32b8ea;
  }
}

@media(max-width:1099px){
  html[data-app-theme="graphite"] body{
    padding-left:0!important;
  }
}

@media(max-width:680px){
  html[data-app-theme="graphite"] .shell,
  html[data-app-theme="graphite"] .jp-settings-shell{
    width:100%;
    margin:0;
    padding-left:12px;
    padding-right:12px;
  }

  html[data-app-theme="graphite"] .topbar,
  html[data-app-theme="graphite"] .jp-settings-header{
    border-bottom:1px solid #3a3f46;
  }

  html[data-app-theme="graphite"] .panel,
  html[data-app-theme="graphite"] .jp-settings-card{
    border-radius:3px;
  }

  html[data-app-theme="graphite"] .jp-mobile-nav{
    left:0;
    right:0;
    bottom:0;
    min-height:66px;
    padding:6px;
    border:0;
    border-top:1px solid #3a3f46;
    border-radius:0;
    background:#202328;
    box-shadow:none;
    backdrop-filter:none;
  }

  html[data-app-theme="graphite"] .jp-mobile-nav button{
    border-radius:2px;
  }

  html[data-app-theme="graphite"] .jp-mobile-nav button.is-active{
    background:#2b3036;
    color:#fff;
  }

  html[data-app-theme="graphite"] .jp-mobile-nav button[data-view="scan"]{
    margin:-12px 4px 0;
    border-radius:3px;
    background:#187fa9;
    color:#fff;
    box-shadow:none;
  }

  html[data-app-theme="graphite"] .invite-shell,
  html[data-app-theme="graphite"] .verify-shell,
  html[data-app-theme="graphite"] .reset-shell{
    padding-top:24px;
  }
}


/* Project Hub */
html[data-app-theme="graphite"] body.jp-project-hub header.hero{
  min-height:0;
  border:0;
  border-bottom:1px solid #3a3f46;
  border-radius:0;
  background:#17191c;
}
html[data-app-theme="graphite"] body.jp-project-hub nav{
  border-bottom:1px solid #3a3f46;
}
html[data-app-theme="graphite"] body.jp-project-hub .brand:before{color:#32b8ea}
html[data-app-theme="graphite"] body.jp-project-hub .hero-inner{padding-top:72px;padding-bottom:82px}
html[data-app-theme="graphite"] body.jp-project-hub .hero h1{font-size:clamp(2.5rem,5vw,4.8rem)}
html[data-app-theme="graphite"] body.jp-project-hub .hero p{color:#9ba3ad}
html[data-app-theme="graphite"] body.jp-project-hub .mock-card,
html[data-app-theme="graphite"] body.jp-project-hub article,
html[data-app-theme="graphite"] body.jp-project-hub .road-col,
html[data-app-theme="graphite"] body.jp-project-hub .road-card,
html[data-app-theme="graphite"] body.jp-project-hub .community-card,
html[data-app-theme="graphite"] body.jp-project-hub .community-empty-card,
html[data-app-theme="graphite"] body.jp-project-hub .all-features,
html[data-app-theme="graphite"] body.jp-project-hub .all-features-grid div{
  border:1px solid #3a3f46;
  border-radius:3px;
  background:#24272c;
  box-shadow:none;
}
html[data-app-theme="graphite"] body.jp-project-hub .status-dot{
  border-radius:2px;
  background:#32b8ea;
  box-shadow:none;
}
html[data-app-theme="graphite"] body.jp-project-hub .section.alt{
  background:#202328;
  border-color:#3a3f46;
}
html[data-app-theme="graphite"] body.jp-project-hub .section-head span,
html[data-app-theme="graphite"] body.jp-project-hub .feature-card summary,
html[data-app-theme="graphite"] body.jp-project-hub .all-features summary,
html[data-app-theme="graphite"] body.jp-project-hub .community-origin{
  color:#82d4f3;
}
html[data-app-theme="graphite"] body.jp-project-hub .badge,
html[data-app-theme="graphite"] body.jp-project-hub .road-status,
html[data-app-theme="graphite"] body.jp-project-hub .progress-track{
  border-radius:2px;
}
html[data-app-theme="graphite"] body.jp-project-hub .progress-fill{
  border-radius:0;
  background:#32b8ea;
}
html[data-app-theme="graphite"] body.jp-project-hub .section#suggest{
  background:#17191c;
  color:#f0f2f5;
}
html[data-app-theme="graphite"] body.jp-project-hub .section#suggest .split p,
html[data-app-theme="graphite"] body.jp-project-hub .section#suggest .split li{
  color:#9ba3ad;
}
html[data-app-theme="graphite"] body.jp-project-hub .section form{
  border:1px solid #3a3f46;
  border-radius:3px;
  background:#24272c;
  box-shadow:none;
}
html[data-app-theme="graphite"] body.jp-project-hub .section form input,
html[data-app-theme="graphite"] body.jp-project-hub .section form textarea{
  border:1px solid #474d54;
  border-radius:2px;
  background:#1d2024;
  color:#f0f2f5;
}
html[data-app-theme="graphite"] body.jp-project-hub .primary{
  border-color:#2a84ab;
  background:#187fa9;
  color:#fff;
}
html[data-app-theme="graphite"] body.jp-project-hub .secondary,
html[data-app-theme="graphite"] body.jp-project-hub .ghost{
  border-color:#474d54;
  background:#30343a;
  color:#e4e8ec;
}


/* Graphite consistency pass – app surfaces
   Keep Classic untouched; only normalize legacy blue/navy surfaces while
   Graphite is active. */

/* The scanner already has permanent navigation entries. */
html[data-app-theme="graphite"] .jp-quick-scan{
  display:none!important;
}

/* Collections */
html[data-app-theme="graphite"] .jp-collection-value-summary{
  border:1px solid #3a3f46!important;
  border-radius:3px!important;
  background:#24272c!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] .jp-value-ring{
  background:conic-gradient(#32b8ea 0 82%,#3a3f46 82% 100%)!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] .jp-value-ring>div{
  border-color:#3a3f46!important;
  background:#1d2024!important;
}
html[data-app-theme="graphite"] .jp-card-price{
  border-color:#43515a!important;
  border-radius:2px!important;
  background:#202a2f!important;
}

/* Legacy desktop deck / wishlist selector surfaces */
html[data-app-theme="graphite"] body[data-jp-view="decks"] #appContent>aside .panel,
html[data-app-theme="graphite"] body[data-jp-view="wishlists"] #appContent>aside .panel,
html[data-app-theme="graphite"] #deckList .item,
html[data-app-theme="graphite"] #deckList [data-deck-id],
html[data-app-theme="graphite"] #wishlistList .wishlist-list-button{
  border-color:#3a3f46!important;
  border-radius:3px!important;
  background:#24272c!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] #deckList [data-deck-id].active,
html[data-app-theme="graphite"] #wishlistList .wishlist-list-button.active{
  border-color:#4384a0!important;
  background:#2b3036!important;
  box-shadow:inset 3px 0 0 #32b8ea!important;
}
html[data-app-theme="graphite"] .deck-sidebar-thumb,
html[data-app-theme="graphite"] .wishlist-count{
  border-color:#3a3f46!important;
  border-radius:2px!important;
  background:#1d2024!important;
}
html[data-app-theme="graphite"] .deck-manage-trigger{
  border-color:#474d54!important;
  border-radius:2px!important;
  background:#30343a!important;
}

/* Deck workspace and analysis */
html[data-app-theme="graphite"] #deckWorkspace{
  border-color:#3a3f46!important;
  border-radius:3px!important;
  background:#17191c!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] #deckWorkspace .deck-main-panel,
html[data-app-theme="graphite"] #deckWorkspace .deck-persistent-stats,
html[data-app-theme="graphite"] #deckWorkspace .deck-persistent-stats>.deck-stats-panel,
html[data-app-theme="graphite"] #deckWorkspace .deck-persistent-stats .deck-stats-panel,
html[data-app-theme="graphite"] #deckWorkspace .deck-mode-card,
html[data-app-theme="graphite"] #deckWorkspace .commander-picker,
html[data-app-theme="graphite"] #deckWorkspace .commander-selected-card,
html[data-app-theme="graphite"] #deckWorkspace .deck-card-search-panel,
html[data-app-theme="graphite"] #deckWorkspace .deck-layout-group,
html[data-app-theme="graphite"] #deckWorkspace .deck-layout-grid-group,
html[data-app-theme="graphite"] #deckWorkspace .deck-layout-list-group,
html[data-app-theme="graphite"] #deckWorkspace .deck-preview-sticky,
html[data-app-theme="graphite"] #deckWorkspace .deck-compact-stats,
html[data-app-theme="graphite"] #deckWorkspace .deck-stat-card,
html[data-app-theme="graphite"] #deckWorkspace .deck-color-analysis,
html[data-app-theme="graphite"] #deckWorkspace .deck-color-card,
html[data-app-theme="graphite"] #deckWorkspace .deck-ownership-dashboard,
html[data-app-theme="graphite"] #deckWorkspace .deck-ownership-metrics>button,
html[data-app-theme="graphite"] #deckWorkspace .deck-ownership-metrics>div,
html[data-app-theme="graphite"] #deckWorkspace .deck-ownership-card-tile,
html[data-app-theme="graphite"] #deckWorkspace .jp-dual-selected,
html[data-app-theme="graphite"] #deckWorkspace .jp-dual-picker,
html[data-app-theme="graphite"] #deckWorkspace .jp-dual-disabled{
  border-color:#3a3f46!important;
  border-radius:3px!important;
  background:#24272c!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] #deckWorkspace .commander-selected-card{
  border-left:3px solid #4384a0!important;
}
html[data-app-theme="graphite"] #deckWorkspace .deck-layout-buttons button{
  border-color:#474d54!important;
  border-radius:2px!important;
  background:#30343a!important;
  color:#dfe3e7!important;
}
html[data-app-theme="graphite"] #deckWorkspace .deck-layout-buttons button:hover,
html[data-app-theme="graphite"] #deckWorkspace .deck-layout-buttons button.active{
  border-color:#4384a0!important;
  background:#2b3036!important;
  color:#fff!important;
}

/* Wishlist workspace */
html[data-app-theme="graphite"] #wishlistWorkspace{
  border-color:#3a3f46!important;
  border-radius:3px!important;
  background:#24272c!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] .wishlist-workspace-card{
  border-color:#3a3f46!important;
  border-radius:3px!important;
  background:#24272c!important;
}
html[data-app-theme="graphite"] .wishlist-workspace-image,
html[data-app-theme="graphite"] .wishlist-no-image{
  background:#1d2024!important;
}

/* Mobile deck / wishlist overview + detail chrome */
@media(max-width:680px){
  html[data-app-theme="graphite"] .jp-library-overview-card{
    border-color:#3a3f46!important;
    border-radius:3px!important;
    background:#24272c!important;
    box-shadow:none!important;
  }
  html[data-app-theme="graphite"] .jp-library-card-icon{
    border:1px solid #3a3f46!important;
    border-radius:2px!important;
    background:#202328!important;
    color:#82d4f3!important;
  }
  html[data-app-theme="graphite"] .jp-library-mobile-detail-header{
    border-color:#3a3f46!important;
    background:#202328!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  html[data-app-theme="graphite"] .jp-library-back-button,
  html[data-app-theme="graphite"] .jp-library-menu-button,
  html[data-app-theme="graphite"] .jp-library-menu-actions button,
  html[data-app-theme="graphite"] .jp-library-menu-choicegrid button{
    border-color:#474d54!important;
    border-radius:2px!important;
    background:#30343a!important;
    color:#e4e8ec!important;
  }
  html[data-app-theme="graphite"] .jp-library-menu-actions button:first-child{
    border-color:#2a84ab!important;
    background:#187fa9!important;
    color:#fff!important;
  }
  html[data-app-theme="graphite"] .jp-library-mobile-menu{
    border-color:#3a3f46!important;
    border-radius:3px!important;
    background:#24272c!important;
    box-shadow:none!important;
  }
  html[data-app-theme="graphite"] .jp-library-searchbar{
    border-color:#474d54!important;
    border-radius:2px!important;
    background:#1d2024!important;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #deckWorkspace,
  html[data-app-theme="graphite"] body.jp-wishlist-detail-open #wishlistWorkspace{
    background:#17191c!important;
  }
  html[data-app-theme="graphite"] #jpDeckMobileHeader{
    border-color:#3a3f46!important;
    background:#202328!important;
    box-shadow:none!important;
  }
  html[data-app-theme="graphite"] #jpDeckMobileViewbar{
    border-color:#3a3f46!important;
    background:#202328!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  html[data-app-theme="graphite"] #jpDeckMobileViewbar button{
    border-color:#474d54!important;
    border-radius:2px!important;
    background:#30343a!important;
    color:#b8bec7!important;
  }
  html[data-app-theme="graphite"] #jpDeckMobileViewbar button.active{
    border-color:#4384a0!important;
    background:#2b3036!important;
    color:#fff!important;
  }
  html[data-app-theme="graphite"] #jpDeckMobileHeader .jp-deck-mobile-commanders,
  html[data-app-theme="graphite"] #jpDeckMobileHeader .jp-deck-mobile-commander,
  html[data-app-theme="graphite"] #jpDeckMobileHeader .jp-deck-mobile-summary-badges span{
    border-color:#3a3f46!important;
    border-radius:3px!important;
    background:#24272c!important;
    box-shadow:none!important;
  }
}

/* Dedicated settings page – force Graphite over the legacy settings skin. */
html[data-app-theme="graphite"] body.jp-settings-page .jp-settings-card{
  border:1px solid #3a3f46!important;
  border-radius:3px!important;
  background:#24272c!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] body.jp-settings-page .jp-settings-current,
html[data-app-theme="graphite"] body.jp-settings-page .jp-settings-pending{
  border-color:#3a3f46!important;
  border-radius:2px!important;
  background:#1d2024!important;
}
html[data-app-theme="graphite"] body.jp-settings-page .jp-settings-pending{
  border-left:3px solid #32b8ea!important;
  background:#202a2f!important;
}
html[data-app-theme="graphite"] body.jp-settings-page .btn,
html[data-app-theme="graphite"] body.jp-settings-page button.btn{
  border:1px solid #474d54!important;
  border-radius:2px!important;
  background:#30343a!important;
  color:#e4e8ec!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] body.jp-settings-page .btn.primary{
  border-color:#2a84ab!important;
  background:#187fa9!important;
  color:#fff!important;
}
html[data-app-theme="graphite"] body.jp-settings-page input,
html[data-app-theme="graphite"] body.jp-settings-page select{
  border:1px solid #474d54!important;
  border-radius:2px!important;
  background:#1d2024!important;
  color:#f0f2f5!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] body.jp-settings-page .jp-settings-badge{
  border-radius:2px!important;
  box-shadow:none!important;
}


/* Graphite deck library – visual overview inspired by modern deck libraries. */
@media(min-width:681px){
  html[data-app-theme="graphite"] #jpDeckSwitcher{
    gap:18px;
    padding:20px 0 8px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-head{
    align-items:flex-end;
    padding:0 2px;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-head strong{
    font-size:1.55rem;
    letter-spacing:-.02em;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-head span{
    max-width:520px;
    color:#9ba3ad;
    text-align:right;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-items{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
    gap:14px;
    overflow:visible;
    padding:0;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-item{
    position:relative;
    isolation:isolate;
    display:flex!important;
    align-items:flex-end!important;
    min-width:0!important;
    max-width:none!important;
    min-height:205px;
    padding:18px 52px 16px 18px!important;
    overflow:hidden;
    border:1px solid #3a3f46!important;
    border-radius:5px!important;
    background:#202328!important;
    color:#fff;
    box-shadow:none!important;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:var(--jp-deck-hero-image);
    background-size:cover;
    background-position:center 24%;
    filter:saturate(.82) brightness(.67);
    transform:scale(1.035);
    transition:transform .2s ease,filter .2s ease;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      linear-gradient(180deg,rgba(8,10,13,.06) 0%,rgba(8,10,13,.18) 32%,rgba(12,14,17,.9) 78%,rgba(12,14,17,.98) 100%),
      linear-gradient(90deg,rgba(10,12,15,.22),transparent 58%);
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-item:hover{
    border-color:#54616a!important;
    transform:translateY(-1px);
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-item:hover::before{
    transform:scale(1.055);
    filter:saturate(.9) brightness(.72);
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-item.is-active{
    border-color:#4384a0!important;
    box-shadow:inset 0 -3px 0 #32b8ea!important;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-thumb{
    display:none!important;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-copy{
    position:relative;
    z-index:2;
    display:grid;
    gap:4px;
    width:100%;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-copy>strong{
    font-size:1.18rem;
    line-height:1.15;
    text-shadow:0 1px 8px rgba(0,0,0,.72);
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-commander{
    display:block!important;
    overflow:hidden;
    color:#e2e6ea;
    font-size:.78rem;
    font-weight:650;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 6px rgba(0,0,0,.82);
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-copy>small{
    display:none!important;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-meta{
    display:flex!important;
    align-items:center;
    gap:8px;
    margin-top:3px;
    color:#c1c7cd;
    font-size:.7rem;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-meta b{
    padding:3px 6px;
    border:1px solid rgba(130,212,243,.3);
    border-radius:2px;
    background:rgba(15,25,30,.72);
    color:#9addf6;
    font-size:.62rem;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-colors{
    position:absolute;
    left:0;
    bottom:100%;
    display:flex;
    gap:4px;
    margin-bottom:9px;
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-colors img{
    width:20px;
    height:20px;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));
  }
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-deck-switch-manage{
    top:12px;
    right:12px;
    transform:none;
    z-index:3;
    width:34px;
    height:34px;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:50%!important;
    background:rgba(10,12,15,.72)!important;
    color:#fff!important;
    backdrop-filter:blur(5px);
  }
}

/* Wishlist switcher is a Graphite surface on desktop. */
html[data-app-theme="graphite"] #jpWishlistSwitcher{
  border:1px solid #3a3f46!important;
  border-radius:3px!important;
  background:#24272c!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] #jpWishlistSwitcher .jp-workspace-switcher-item{
  border-color:#3a3f46!important;
  border-radius:3px!important;
  background:#202328!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] #jpWishlistSwitcher .jp-workspace-switcher-item:hover,
html[data-app-theme="graphite"] #jpWishlistSwitcher .jp-workspace-switcher-item.is-active{
  border-color:#4384a0!important;
  background:#2b3036!important;
  box-shadow:inset 3px 0 0 #32b8ea!important;
}

/* Mobile has dedicated deck/wishlist overview screens. Never show desktop switchers there. */
@media(max-width:680px){
  html[data-app-theme="graphite"] body[data-jp-view="decks"] #jpDeckSwitcher,
  html[data-app-theme="graphite"] body[data-jp-view="wishlists"] #jpWishlistSwitcher{
    display:none!important;
  }
}


/* Graphite mobile deck library – same visual language as desktop hero cards. */
@media(max-width:680px){
  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-library-overview-list{
    gap:12px;
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero{
    position:relative;
    isolation:isolate;
    display:flex!important;
    align-items:flex-end!important;
    width:100%;
    min-height:158px;
    padding:16px 48px 15px 16px!important;
    overflow:hidden;
    border:1px solid #3a3f46!important;
    border-radius:4px!important;
    background:#202328!important;
    color:#fff!important;
    box-shadow:none!important;
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:var(--jp-mobile-deck-hero-image);
    background-size:cover;
    background-position:center 26%;
    filter:saturate(.82) brightness(.68);
    transform:scale(1.035);
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      linear-gradient(180deg,rgba(8,10,13,.05) 0%,rgba(8,10,13,.18) 30%,rgba(12,14,17,.88) 72%,rgba(12,14,17,.98) 100%),
      linear-gradient(90deg,rgba(10,12,15,.28),transparent 68%);
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero .jp-library-card-icon{
    display:none!important;
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero .jp-library-card-copy{
    position:relative;
    z-index:2;
    display:grid;
    gap:4px;
    width:100%;
    min-width:0;
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero .jp-library-card-copy>strong{
    font-size:1.18rem;
    line-height:1.1;
    color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.75);
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-commander{
    display:block!important;
    overflow:hidden;
    color:#e2e6ea;
    font-size:.78rem;
    font-weight:650;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 1px 6px rgba(0,0,0,.82);
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero .jp-library-card-copy>small{
    color:#c1c7cd!important;
    font-size:.72rem!important;
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-colors{
    position:absolute;
    left:0;
    bottom:100%;
    display:flex!important;
    gap:4px;
    margin-bottom:9px;
    min-height:19px;
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-colors img{
    width:20px;
    height:20px;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.68));
  }

  html[data-app-theme="graphite"] #jpDecksMobileOverview .jp-mobile-deck-hero .jp-library-card-arrow{
    position:absolute;
    right:15px;
    top:50%;
    z-index:2;
    transform:translateY(-50%);
    color:#fff!important;
    font-size:1.75rem;
    text-shadow:0 1px 7px rgba(0,0,0,.9);
  }

  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats{
    margin-top:18px;
    padding:14px 0 4px;
    border:0!important;
    background:transparent!important;
  }

  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-stats-overview{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-stats-columns{
    grid-template-columns:1fr;
  }

  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-color-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* Desktop collection cards: normalize source images to one exact visual frame.
   Some stored/Scryfall images have slightly different intrinsic crops; the fixed
   frame keeps every card in a row on the same top/bottom line. */
@media(min-width:681px){
  html[data-app-theme="graphite"] #cardGrid.collection-grid{
    align-items:stretch;
  }

  html[data-app-theme="graphite"] #cardGrid .owned-card{
    display:grid;
    grid-template-rows:auto 1fr;
    height:100%;
    align-self:stretch;
  }

  html[data-app-theme="graphite"] #cardGrid .owned-card-image{
    width:100%;
    aspect-ratio:5 / 7;
    overflow:hidden;
    display:block;
    position:relative;
    background:#0b0f14;
  }

  html[data-app-theme="graphite"] #cardGrid .owned-card-image>img{
    display:block;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
  }

  html[data-app-theme="graphite"] #cardGrid .owned-card-body{
    align-content:center;
    min-height:38px;
    padding:9px 10px;
  }

  html[data-app-theme="graphite"] #cardGrid .owned-card-printing{
    color:#aab2bb;
    font-size:.78rem;
    letter-spacing:.01em;
  }
}


html[data-app-theme="graphite"] .jp-deck-overview-heading-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

html[data-app-theme="graphite"] .jp-deck-overview-heading-row>h1,
html[data-app-theme="graphite"] .jp-deck-overview-heading-row>h2,
html[data-app-theme="graphite"] .jp-deck-overview-heading-row>h3{
  margin-right:auto;
}

html[data-app-theme="graphite"] .jp-create-deck-button{
  margin-left:auto;
  flex:0 0 auto;
}

.jp-new-deck-dialog{
  width:min(520px,calc(100% - 28px));
}

.jp-new-deck-dialog-content{
  display:grid;
  gap:12px;
  padding:30px 28px 24px;
}

.jp-new-deck-dialog-content h2{
  margin:0;
}

.jp-new-deck-dialog-content p{
  margin:0 0 2px;
  line-height:1.5;
}

.jp-new-deck-dialog-content label{
  font-size:.78rem;
  font-weight:700;
}

.jp-new-deck-dialog-content input{
  width:100%;
}

.jp-new-deck-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:4px;
}

@media(max-width:680px){
  html[data-app-theme="graphite"] .jp-deck-overview-heading-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  html[data-app-theme="graphite"] .jp-create-deck-button{
    width:100%;
    margin-left:0;
  }

  .jp-new-deck-dialog-content{
    padding:26px 18px 18px;
  }

  .jp-new-deck-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}


html[data-app-theme="graphite"] .jp-deck-overview-section{
  position:relative;
}

html[data-app-theme="graphite"] .jp-deck-overview-actions{
  position:absolute;
  top:0;
  right:0;
  z-index:6;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}

html[data-app-theme="graphite"] .jp-deck-overview-actions .jp-create-deck-button{
  pointer-events:auto;
  margin:0;
}

@media(max-width:680px){
  html[data-app-theme="graphite"] .jp-deck-overview-actions{
    position:static;
    width:100%;
    margin:0 0 12px;
  }

  html[data-app-theme="graphite"] .jp-deck-overview-actions .jp-create-deck-button{
    width:100%;
  }
}


html[data-app-theme="graphite"] body[data-jp-view="decks"] .sidebar-decks-section>.jp-deck-static-head{
  display:flex!important;
  align-items:center;
  gap:12px;
  margin:0 0 12px;
}

html[data-app-theme="graphite"] body[data-jp-view="decks"] .sidebar-decks-section>.jp-deck-static-head>h2{
  margin:0 auto 0 0;
}

html[data-app-theme="graphite"] body[data-jp-view="decks"] .sidebar-decks-section>.jp-deck-static-head>.jp-create-deck-button{
  display:inline-flex!important;
  flex:0 0 auto;
}

@media(max-width:680px){
  html[data-app-theme="graphite"] body[data-jp-view="decks"] .sidebar-decks-section>.jp-deck-static-head{
    display:grid!important;
    grid-template-columns:1fr;
  }

  html[data-app-theme="graphite"] body[data-jp-view="decks"] .sidebar-decks-section>.jp-deck-static-head>.jp-create-deck-button{
    width:100%;
  }
}


/* Desktop deck overview: the visible header is #jpDeckSwitcher, not the hidden
   legacy sidebar deck section. Keep the create action in this real header. */
@media(min-width:681px){
  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-head{
    display:flex!important;
    align-items:center!important;
    gap:12px;
  }

  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-head>strong{
    margin-right:auto!important;
  }

  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-switcher-head>span{
    display:none!important;
  }

  html[data-app-theme="graphite"] #jpDeckSwitcher .jp-workspace-new-deck{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin:0!important;
    min-height:36px;
    white-space:nowrap;
  }
}


/* Deck analysis graphite integration 2026-09-23 */
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats{
  margin:20px 0 0!important;
  padding:18px!important;
  border:1px solid #3a3f46!important;
  border-left:3px solid #4384a0!important;
  border-radius:3px!important;
  background:#202327!important;
  box-shadow:none!important;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-persistent-stats-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-persistent-stats-title .eyebrow{
  margin:0;
  color:#8bc9df!important;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-persistent-stats-title h3{
  margin:0;
  color:#f2f4f6;
  font-size:1.18rem;
  letter-spacing:-.015em;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-stats-overview{
  gap:8px;
  margin-bottom:10px;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-stat-card{
  padding:12px 14px;
  border-color:#363b40!important;
  border-radius:2px!important;
  background:#191c20!important;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-stat-card span{
  color:#9ea5ac;
  font-size:.72rem;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-stat-card strong{
  color:#f6f7f8;
  font-size:1.42rem;
  font-weight:760;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-stats-panel,
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-color-analysis{
  border-color:#363b40!important;
  border-radius:2px!important;
  background:#1b1e22!important;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-color-card{
  border-color:#34393e!important;
  border-radius:2px!important;
  background:#181b1f!important;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-layout-group-head{
  margin-bottom:8px;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-layout-group-head>strong{
  color:#e9ecef;
  font-size:.82rem;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-layout-group-head>span,
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-stat-row>span{
  color:#969da5;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-stat-row{
  border-color:#30343a;
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-curve-bar{
  background:linear-gradient(180deg,#58c9ee,#4384a0);
}
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-color-bar-track,
html[data-app-theme="graphite"] #deckWorkspace #jpDeckAnalysisStats .deck-color-meter{
  border-color:#34393e;
  background:#131518;
}

@media(max-width:680px){
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats{
    margin-top:16px!important;
    padding:14px 0 4px!important;
    border:0!important;
    border-top:1px solid #34393e!important;
    background:transparent!important;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-persistent-stats-title{
    display:block;
    margin-bottom:11px;
    padding:0 2px;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-persistent-stats-title .eyebrow{
    display:block;
    margin-bottom:3px;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-stat-card{
    padding:10px 11px;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-stat-card strong{
    font-size:1.2rem;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-stats-panel,
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-color-analysis{
    padding:11px;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-mana-curve{
    height:150px;
    gap:4px;
    padding:10px 2px 0;
  }
  html[data-app-theme="graphite"] body.jp-deck-detail-open #jpDeckAnalysisStats .deck-color-card{
    padding:9px;
  }
}