/* =========================================================
   W3.CSS Mac OS 9 Platinum UI Theme
   Light mode default
   Dark mode:    body.platinum-dark-mode
   E-reader:     body.platinum-ereader-mode

   Designed for:
   - W3.CSS layouts
   - retro Mac OS 9-style UI
   - graceful fallback for e-readers
   ========================================================= */

/* ---------------------------------------------------------
   Design tokens
   --------------------------------------------------------- */
:root {
  --plat-bg: #d6d6d6;
  --plat-surface: #dcdcdc;
  --plat-surface-light: #eeeeee;
  --plat-surface-dark: #b8b8b8;

  --plat-border-light: #ffffff;
  --plat-border-mid: #9a9a9a;
  --plat-border-dark: #595959;
  --plat-border-deep: #2f2f2f;

  --plat-text: #000000;
  --plat-muted: #333333;

  --plat-blue: #245fd6;
  --plat-blue-dark: #123f9a;
  --plat-blue-light: #dce8ff;

  --plat-page: #f4f4ef;

  --plat-radius: 2px;
  --plat-font: Arial, Helvetica, sans-serif;
  --plat-mono: "Courier New", Courier, monospace;
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--plat-font);
  font-size: 14px;
  line-height: 1.45;
}

html {
  background: var(--plat-bg);
}

body {
  background:
    linear-gradient(135deg, #cfcfcf 0%, #e1e1e1 45%, #c8c8c8 100%);
  color: var(--plat-text);
}

/* Better text rhythm */
p {
  margin-top: 0.4em;
  margin-bottom: 0.9em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--plat-font);
  font-weight: bold;
  line-height: 1.2;
  color: inherit;
}

h1 {
  font-size: 1.7rem;
}

h2 {
  font-size: 1.35rem;
}

h3 {
  font-size: 1.15rem;
}

a {
  color: #0000cc;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

a:hover,
a:focus {
  color: #ffffff;
  background-color: var(--plat-blue);
  outline: 1px dotted #000000;
}

/* ---------------------------------------------------------
   Classic bevel helpers
   --------------------------------------------------------- */
.w3-container,
.w3-panel,
.w3-card,
.w3-card-2,
.w3-card-4,
.w3-modal-content,
.platinum-window {
  background-color: var(--plat-surface);
  color: var(--plat-text);
  border: 1px solid var(--plat-border-dark);
}

/* Raised Mac-style surface */
.platinum-window,
.w3-card,
.w3-card-2,
.w3-card-4,
.w3-modal-content {
  border-width: 2px;
  border-style: solid;
  border-color:
    var(--plat-border-light)
    var(--plat-border-dark)
    var(--plat-border-dark)
    var(--plat-border-light);
  box-shadow:
    inset 1px 1px 0 #f7f7f7,
    inset -1px -1px 0 #a5a5a5,
    2px 2px 0 rgba(0, 0, 0, 0.25);
}

/* Main outer window */
body > .platinum-window {
  max-width: 1180px;
  margin: 1rem auto;
  padding: 0;
}

/* Panels inside windows should not all look equally heavy */
.platinum-window .w3-container,
.platinum-window .w3-panel {
  box-shadow: none;
}

/* ---------------------------------------------------------
   Titlebar
   --------------------------------------------------------- */
.platinum-titlebar {
  position: relative;
  min-height: 1.8rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
  font-weight: bold;
  font-family: var(--plat-font);

  color: #000000;
  background-color: #c8c8c8;
  background-image:
    repeating-linear-gradient(
      to bottom,
      #f6f6f6 0,
      #f6f6f6 1px,
      #b8b8b8 1px,
      #b8b8b8 2px
    );

  border-bottom: 1px solid var(--plat-border-deep);
  box-shadow: inset 0 1px 0 #ffffff;
}

.platinum-title {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  background-color: var(--plat-surface);
  color: #000000;
  line-height: 1.3;
}

/* Optional classic close box */
.platinum-close {
  display: inline-block;
  position: absolute;
  left: 0.45rem;
  top: 0.38rem;
  width: 0.8rem;
  height: 0.8rem;
  background: #dcdcdc;
  border: 1px solid;
  border-color: #ffffff #555555 #555555 #ffffff;
  box-shadow: inset -1px -1px 0 #9a9a9a;
}

/* ---------------------------------------------------------
   Theme surfaces
   --------------------------------------------------------- */
.w3-theme,
.w3-theme-l1,
.w3-theme-l2,
.w3-theme-l3,
.w3-theme-l4,
.w3-theme-l5,
.w3-bar.w3-theme,
.w3-container.w3-theme {
  background-color: #c9c9c9 !important;
  color: #000000 !important;
  border-bottom: 1px solid var(--plat-border-dark);
}

.w3-theme-l5 { background-color: #f5f5f5 !important; color: #000000 !important; }
.w3-theme-l4 { background-color: #eeeeee !important; color: #000000 !important; }
.w3-theme-l3 { background-color: #d9d9d9 !important; color: #000000 !important; }
.w3-theme-l2 { background-color: #c7c7c7 !important; color: #000000 !important; }
.w3-theme-l1 { background-color: #b5b5b5 !important; color: #000000 !important; }

.w3-theme-d1 { background-color: #8f8f8f !important; color: #000000 !important; }
.w3-theme-d2 { background-color: #777777 !important; color: #ffffff !important; }
.w3-theme-d3 { background-color: #5f5f5f !important; color: #ffffff !important; }
.w3-theme-d4 { background-color: #474747 !important; color: #ffffff !important; }
.w3-theme-d5 { background-color: #2f2f2f !important; color: #ffffff !important; }

.w3-theme-light {
  background-color: #f5f5f5 !important;
  color: #000000 !important;
}

.w3-theme-dark {
  background-color: #2f2f2f !important;
  color: #ffffff !important;
}

.w3-theme-action,
.w3-blue {
  background-color: var(--plat-blue) !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.w3-button,
.w3-btn {
  font-family: var(--plat-font);
  font-weight: normal;
  text-decoration: none;
  border-radius: var(--plat-radius);
  padding: 0.35em 0.75em;

  color: #000000 !important;
  background-color: #dcdcdc !important;
  background-image: linear-gradient(#ffffff, #d0d0d0);

  border: 2px solid !important;
  border-color:
    #ffffff
    #595959
    #595959
    #ffffff !important;

  box-shadow:
    inset 1px 1px 0 #f7f7f7,
    inset -1px -1px 0 #a5a5a5;
}

.w3-button:hover,
.w3-btn:hover {
  background-color: #cfcfcf !important;
  background-image: linear-gradient(#f5f5f5, #c2c2c2);
  color: #000000 !important;
}

.w3-button:active,
.w3-btn:active {
  background-image: linear-gradient(#bcbcbc, #eeeeee);
  border-color:
    #595959
    #ffffff
    #ffffff
    #595959 !important;
  box-shadow:
    inset 1px 1px 2px rgba(0, 0, 0, 0.35);
}

.w3-button.w3-blue,
.w3-btn.w3-blue,
.w3-button.w3-theme-action,
.w3-btn.w3-theme-action {
  background-color: var(--plat-blue) !important;
  background-image: linear-gradient(#4f83ff, #245fd6);
  color: #ffffff !important;
  border-color:
    #a8c0ff
    #123f9a
    #123f9a
    #a8c0ff !important;
}

/* Buttons in bars look more tab-like */
.w3-bar .w3-button {
  border-radius: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------
   Inputs and forms
   --------------------------------------------------------- */
.w3-input,
.w3-select,
textarea,
input,
select {
  font-family: inherit;
  padding: 0.35em;
  border-radius: 0;

  color: #000000;
  background-color: #ffffff;

  border: 2px solid !important;
  border-color:
    #5f5f5f
    #ffffff
    #ffffff
    #5f5f5f !important;

  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.w3-input:focus,
.w3-select:focus,
textarea:focus,
input:focus,
select:focus {
  outline: 1px dotted #003399;
  outline-offset: 1px;
}

/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */
.w3-table,
.w3-table-all {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  color: #000000;
  border: 2px solid;
  border-color:
    #5f5f5f
    #ffffff
    #ffffff
    #5f5f5f;
}

.w3-table th,
.w3-table-all th,
.w3-table td,
.w3-table-all td {
  padding: 0.45em;
  border: 1px solid #b7b7b7;
}

.w3-table th,
.w3-table-all th {
  background-color: #c9c9c9;
  color: #000000;
  font-weight: bold;
}

.w3-table-all tr:nth-child(even) {
  background-color: #eeeeee;
}

.w3-table-all tr:nth-child(odd) {
  background-color: #ffffff;
}

/* ---------------------------------------------------------
   Navigation and sidebar
   --------------------------------------------------------- */
.w3-bar {
  background-color: var(--plat-surface);
  border: 2px solid;
  border-color:
    #ffffff
    #595959
    #595959
    #ffffff;
}

.w3-bar .w3-bar-item {
  color: #000000;
}

.platinum-sidebar {
  display: none;
  width: 33%;
  height: auto !important;
  min-height: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0.5em;

  top: 0;
  left: 0;
  z-index: 10;

  font-size: 20px;

  transform: translateY(-100%);
  pointer-events: none;
  transition: transform 0.25s ease;
}

.platinum-sidebar.platinum-sidebar-visible {
  display: block;
}

.platinum-sidebar.platinum-sidebar-open {
  transform: translateY(0);
  pointer-events: auto;
}

.platinum-sidebar .w3-button {
  font-size: 1rem;
  margin: 0.25rem auto;
  max-width: 90%;
}

/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */
.w3-ul {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  border: 2px solid;
  border-color:
    #5f5f5f
    #ffffff
    #ffffff
    #5f5f5f;
}

.w3-ul li {
  list-style: none;
  padding: 0.55em;
  border-bottom: 1px solid #bdbdbd;
}

.w3-ul li:last-child {
  border-bottom: 0;
}

/* ---------------------------------------------------------
   Badges, tags, progress
   --------------------------------------------------------- */
.w3-badge,
.w3-tag {
  border-radius: var(--plat-radius);
  padding: 0.1em 0.4em;
  background-color: #c9c9c9;
  color: #000000;
  border: 1px solid #7f7f7f;
}

.w3-light-grey,
.w3-light-gray {
  background-color: #a8a8a8 !important;
  border: 1px solid #7f7f7f;
}

/* ---------------------------------------------------------
   Code
   --------------------------------------------------------- */
.w3-code,
.w3-codespan,
code,
pre {
  font-family: var(--plat-mono);
}

.w3-code,
pre {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid;
  border-color:
    #5f5f5f
    #ffffff
    #ffffff
    #5f5f5f;
}

.w3-codespan,
code {
  background-color: #eeeeee;
  color: #000000;
  border: 1px solid #b7b7b7;
  padding: 0.05em 0.25em;
}

/* ---------------------------------------------------------
   Alerts
   --------------------------------------------------------- */
.w3-panel.w3-pale-blue,
.w3-panel.w3-pale-green,
.w3-panel.w3-pale-yellow,
.w3-panel.w3-pale-red {
  background-color: #eeeeee !important;
  color: #000000 !important;
  border-left: 5px solid var(--plat-blue) !important;
}

/* ---------------------------------------------------------
   Modal
   --------------------------------------------------------- */
.w3-modal {
  background-color: rgba(0, 0, 0, 0.35);
}

.w3-modal-content {
  max-width: 760px;
}

/* ---------------------------------------------------------
   Horizontal rule
   --------------------------------------------------------- */
hr {
  border: 0;
  height: 2px;
  background:
    linear-gradient(
      to bottom,
      #8a8a8a 0,
      #8a8a8a 1px,
      #ffffff 1px,
      #ffffff 2px
    );
  margin: 1.5rem 0;
}

/* ---------------------------------------------------------
   Images
   --------------------------------------------------------- */
img {
  image-rendering: auto;
}

.w3-card img,
.w3-card-2 img,
.w3-card-4 img {
  max-width: 100%;
}

/* ---------------------------------------------------------
   Header improvements for your current index.html
   --------------------------------------------------------- */
#myHeader {
  margin: 0.75rem;
}

#myHeader p {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.w3-row-padding > .w3-third > .w3-card {
  margin-bottom: 1rem;
}

/* Make the logo cards look like inset display panes */
.w3-card.w3-container {
  padding-top: 0.75rem;
}

/* ---------------------------------------------------------
   Selection
   --------------------------------------------------------- */
::selection {
  color: #ffffff;
  background-color: var(--plat-blue);
}

/* =========================================================
   Dark mode
   ========================================================= */
body.platinum-dark-mode {
  --plat-bg: #2f3033;
  --plat-surface: #33353a;
  --plat-surface-light: #484a50;
  --plat-surface-dark: #1d1e22;

  --plat-border-light: #5a5c63;
  --plat-border-mid: #303238;
  --plat-border-dark: #101114;
  --plat-border-deep: #07080a;

  --plat-text: #f2f2f2;
  --plat-muted: #c9cbd1;

  --plat-blue: #4d7df0;
  --plat-blue-dark: #183b8c;
  --plat-blue-light: #24385f;

  background:
    linear-gradient(135deg, #25262a 0%, #36383e 50%, #202125 100%);
  color: var(--plat-text);
}

body.platinum-dark-mode a {
  color: #9dbbff;
}

body.platinum-dark-mode a:visited {
  color: #c8a8ff;
}

body.platinum-dark-mode a:hover,
body.platinum-dark-mode a:focus {
  color: #ffffff;
  background-color: #4d7df0;
}

body.platinum-dark-mode .w3-container,
body.platinum-dark-mode .w3-panel,
body.platinum-dark-mode .w3-card,
body.platinum-dark-mode .w3-card-2,
body.platinum-dark-mode .w3-card-4,
body.platinum-dark-mode .w3-modal-content,
body.platinum-dark-mode .platinum-window {
  background-color: #33353a;
  color: #f2f2f2;
  border-color:
    #5a5c63
    #101114
    #101114
    #5a5c63;
  box-shadow:
    inset 1px 1px 0 #4b4d53,
    inset -1px -1px 0 #202125,
    2px 2px 0 rgba(0, 0, 0, 0.45);
}

body.platinum-dark-mode .platinum-titlebar {
  color: #ffffff;
  background-color: #3f4147;
  background-image:
    repeating-linear-gradient(
      to bottom,
      #5a5c63 0,
      #5a5c63 1px,
      #2b2d32 1px,
      #2b2d32 2px
    );
  border-bottom-color: #07080a;
}

body.platinum-dark-mode .platinum-title {
  background-color: #33353a;
  color: #ffffff;
}

body.platinum-dark-mode .platinum-close {
  background: #33353a;
  border-color: #5a5c63 #101114 #101114 #5a5c63;
}

body.platinum-dark-mode .w3-theme,
body.platinum-dark-mode .w3-theme-l1,
body.platinum-dark-mode .w3-theme-l2,
body.platinum-dark-mode .w3-theme-l3,
body.platinum-dark-mode .w3-theme-l4,
body.platinum-dark-mode .w3-theme-l5,
body.platinum-dark-mode .w3-bar.w3-theme,
body.platinum-dark-mode .w3-container.w3-theme {
  background-color: #3f4147 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #101114;
}

body.platinum-dark-mode .w3-theme-l5 { background-color: #5a5c63 !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-l4 { background-color: #4d4f55 !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-l3 { background-color: #44464b !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-l2 { background-color: #3a3b3f !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-l1 { background-color: #323338 !important; color: #ffffff !important; }

body.platinum-dark-mode .w3-theme-d1 { background-color: #2a2b2f !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-d2 { background-color: #242529 !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-d3 { background-color: #1f2023 !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-d4 { background-color: #1b1c1f !important; color: #ffffff !important; }
body.platinum-dark-mode .w3-theme-d5 { background-color: #141518 !important; color: #ffffff !important; }

body.platinum-dark-mode .w3-theme-light {
  background-color: #5a5c63 !important;
  color: #ffffff !important;
}

body.platinum-dark-mode .w3-theme-dark {
  background-color: #141518 !important;
  color: #ffffff !important;
}

body.platinum-dark-mode .w3-theme-action,
body.platinum-dark-mode .w3-blue {
  background-color: #4d7df0 !important;
  color: #ffffff !important;
}

body.platinum-dark-mode .w3-button,
body.platinum-dark-mode .w3-btn {
  color: #ffffff !important;
  background-color: #3c3e43 !important;
  background-image: linear-gradient(#55575e, #303238);
  border-color:
    #666970
    #101114
    #101114
    #666970 !important;
  box-shadow:
    inset 1px 1px 0 #62646b,
    inset -1px -1px 0 #202125;
}

body.platinum-dark-mode .w3-button:hover,
body.platinum-dark-mode .w3-btn:hover {
  background-color: #484a50 !important;
  background-image: linear-gradient(#62646b, #3b3d43);
  color: #ffffff !important;
}

body.platinum-dark-mode .w3-button:active,
body.platinum-dark-mode .w3-btn:active {
  border-color:
    #101114
    #666970
    #666970
    #101114 !important;
}

body.platinum-dark-mode .w3-button.w3-blue,
body.platinum-dark-mode .w3-btn.w3-blue,
body.platinum-dark-mode .w3-button.w3-theme-action,
body.platinum-dark-mode .w3-btn.w3-theme-action {
  background-image: linear-gradient(#6f98ff, #3f6fe0);
  color: #ffffff !important;
  border-color:
    #9dbbff
    #183b8c
    #183b8c
    #9dbbff !important;
}

body.platinum-dark-mode .w3-input,
body.platinum-dark-mode .w3-select,
body.platinum-dark-mode textarea,
body.platinum-dark-mode input,
body.platinum-dark-mode select {
  background-color: #18191c;
  color: #f2f2f2;
  border-color:
    #07080a
    #5a5c63
    #5a5c63
    #07080a !important;
}

body.platinum-dark-mode .w3-input:focus,
body.platinum-dark-mode .w3-select:focus,
body.platinum-dark-mode textarea:focus,
body.platinum-dark-mode input:focus,
body.platinum-dark-mode select:focus {
  outline-color: #9dbbff;
}

body.platinum-dark-mode input::placeholder,
body.platinum-dark-mode textarea::placeholder {
  color: #aeb1ba;
}

body.platinum-dark-mode .w3-table,
body.platinum-dark-mode .w3-table-all,
body.platinum-dark-mode .w3-ul,
body.platinum-dark-mode .w3-code,
body.platinum-dark-mode pre {
  background-color: #202125;
  color: #f2f2f2;
  border-color:
    #07080a
    #5a5c63
    #5a5c63
    #07080a;
}

body.platinum-dark-mode .w3-table th,
body.platinum-dark-mode .w3-table-all th {
  background-color: #3f4147;
  color: #ffffff;
}

body.platinum-dark-mode .w3-table th,
body.platinum-dark-mode .w3-table-all th,
body.platinum-dark-mode .w3-table td,
body.platinum-dark-mode .w3-table-all td,
body.platinum-dark-mode .w3-ul li {
  border-color: #3d3f45;
}

body.platinum-dark-mode .w3-table-all tr:nth-child(even) {
  background-color: #292b30;
}

body.platinum-dark-mode .w3-table-all tr:nth-child(odd) {
  background-color: #202125;
}

body.platinum-dark-mode .w3-bar {
  background-color: #33353a;
  border-color:
    #5a5c63
    #101114
    #101114
    #5a5c63;
}

body.platinum-dark-mode .w3-bar .w3-bar-item {
  color: #f2f2f2;
}

body.platinum-dark-mode .w3-badge,
body.platinum-dark-mode .w3-tag {
  background-color: #44464b;
  color: #ffffff;
  border-color: #101114;
}

body.platinum-dark-mode .w3-light-grey,
body.platinum-dark-mode .w3-light-gray {
  background-color: #3a3b3f !important;
  border-color: #101114;
}

body.platinum-dark-mode .w3-codespan,
body.platinum-dark-mode code {
  background-color: #18191c;
  color: #f2f2f2;
  border-color: #3d3f45;
}

body.platinum-dark-mode .w3-panel.w3-pale-blue,
body.platinum-dark-mode .w3-panel.w3-pale-green,
body.platinum-dark-mode .w3-panel.w3-pale-yellow,
body.platinum-dark-mode .w3-panel.w3-pale-red {
  background-color: #3a3b3f !important;
  color: #f2f2f2 !important;
  border-left: 5px solid #5f8fff !important;
}

/* =========================================================
   E-reader mode
   Use: body.classList.toggle('platinum-ereader-mode')
   ========================================================= */
body.platinum-ereader-mode {
  background: #f6f3e8 !important;
  color: #111111 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
}

body.platinum-ereader-mode > .platinum-window {
  max-width: 42rem;
  margin: 0 auto;
  border: 0;
  box-shadow: none;
  background: #f6f3e8;
}

body.platinum-ereader-mode .w3-container,
body.platinum-ereader-mode .w3-panel,
body.platinum-ereader-mode .w3-card,
body.platinum-ereader-mode .w3-card-2,
body.platinum-ereader-mode .w3-card-4,
body.platinum-ereader-mode .w3-modal-content,
body.platinum-ereader-mode .platinum-window {
  background: #f6f3e8 !important;
  color: #111111 !important;
  border: 1px solid #999999 !important;
  box-shadow: none !important;
  background-image: none !important;
}

body.platinum-ereader-mode .platinum-titlebar {
  background: #eeeeee !important;
  color: #000000 !important;
  border-bottom: 1px solid #777777;
  box-shadow: none;
}

body.platinum-ereader-mode .platinum-title {
  background: #eeeeee !important;
  color: #000000 !important;
}

body.platinum-ereader-mode .platinum-close {
  display: none;
}

body.platinum-ereader-mode h1,
body.platinum-ereader-mode h2,
body.platinum-ereader-mode h3,
body.platinum-ereader-mode h4,
body.platinum-ereader-mode h5,
body.platinum-ereader-mode h6 {
  font-family: Arial, Helvetica, sans-serif;
}

body.platinum-ereader-mode a {
  color: #000000;
  text-decoration: underline;
}

body.platinum-ereader-mode a:visited {
  color: #333333;
}

body.platinum-ereader-mode .w3-button,
body.platinum-ereader-mode .w3-btn,
body.platinum-ereader-mode input,
body.platinum-ereader-mode select,
body.platinum-ereader-mode textarea {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #555555 !important;
  box-shadow: none !important;
  background-image: none !important;
}

body.platinum-ereader-mode .w3-table,
body.platinum-ereader-mode .w3-table-all,
body.platinum-ereader-mode .w3-ul,
body.platinum-ereader-mode .w3-code,
body.platinum-ereader-mode pre {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #777777 !important;
  box-shadow: none !important;
}

body.platinum-ereader-mode .w3-table th,
body.platinum-ereader-mode .w3-table-all th {
  background: #e6e6e6 !important;
  color: #000000 !important;
}

body.platinum-ereader-mode img {
  filter: grayscale(100%);
}

body.platinum-ereader-mode .platinum-sidebar {
  transition: none;
  font-family: Arial, Helvetica, sans-serif;
}

/* E-reader mode overrides dark mode if both are enabled */
body.platinum-dark-mode.platinum-ereader-mode {
  background: #111111 !important;
  color: #eeeeee !important;
}

body.platinum-dark-mode.platinum-ereader-mode > .platinum-window,
body.platinum-dark-mode.platinum-ereader-mode .w3-container,
body.platinum-dark-mode.platinum-ereader-mode .w3-panel,
body.platinum-dark-mode.platinum-ereader-mode .w3-card,
body.platinum-dark-mode.platinum-ereader-mode .w3-card-2,
body.platinum-dark-mode.platinum-ereader-mode .w3-card-4,
body.platinum-dark-mode.platinum-ereader-mode .w3-modal-content,
body.platinum-dark-mode.platinum-ereader-mode .platinum-window {
  background: #111111 !important;
  color: #eeeeee !important;
  border-color: #777777 !important;
}

body.platinum-dark-mode.platinum-ereader-mode .platinum-titlebar,
body.platinum-dark-mode.platinum-ereader-mode .platinum-title {
  background: #222222 !important;
  color: #ffffff !important;
}

body.platinum-dark-mode.platinum-ereader-mode .w3-button,
body.platinum-dark-mode.platinum-ereader-mode .w3-btn,
body.platinum-dark-mode.platinum-ereader-mode input,
body.platinum-dark-mode.platinum-ereader-mode select,
body.platinum-dark-mode.platinum-ereader-mode textarea,
body.platinum-dark-mode.platinum-ereader-mode .w3-table,
body.platinum-dark-mode.platinum-ereader-mode .w3-table-all,
body.platinum-dark-mode.platinum-ereader-mode .w3-ul,
body.platinum-dark-mode.platinum-ereader-mode .w3-code,
body.platinum-dark-mode.platinum-ereader-mode pre {
  background: #1a1a1a !important;
  color: #eeeeee !important;
  border-color: #777777 !important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 700px) {
  body > .platinum-window {
    margin: 0;
    border-left: 0;
    border-right: 0;
  }

  .platinum-sidebar {
    width: 100%;
    font-size: 18px;
  }

  #myHeader {
    margin: 0.5rem;
  }

  .w3-row-padding > .w3-third > .w3-card {
    min-height: auto !important;
  }

  .w3-third.w3-container {
    min-height: auto !important;
    margin-bottom: 1rem;
  }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .platinum-sidebar {
    transition: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------
   RSS Stuff
   --------------------------------------------------------- */
.rss-scrollbox {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 8px;
}

.rss-card {
  min-height: 460px;
  max-height: 460px;
  overflow: hidden;
}