/* 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));
  }
}