/*
 * CUSTOM STYLES — wp-custom-css.css
 *
 * This is the ONLY file you should edit for custom styling.
 * Do not modify the HTML file or other CSS files for style changes.
 */
:root {
  /* shadcn tokens */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.338 0.136 21.178);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);

  /* novel card panels */
  --novel-panel-border: none;
  --novel-meta-label-bg: color-mix(in oklch, var(--muted) 70%, var(--card));
  --text-dark: white;
  --text-light: black;
  --border-radius: 4px;
  --background-dark: #292f56;
  --background-light: #0000004a;
  --hover-border-color: white;
  --font-size-small: 12px;
  --gap-small: 2px;
  --gap-medium: 15px;
  --gap-large: 17px;
  --padding-small: 5px;
  --padding-medium: 1px 22px;
  --padding-large: 8px 15px;
  --conatiner-bg: var(--muted);
  --color-accent: var(--primary);
  --accent-muted: oklch(0.683 0 0);
  --sertobig-bg: oklch(0.1015 0.0087 309.09 / 2%);
  --sertobig-bg-dark: oklch(0.1015 0.0087 309.09 / 40%);

  --card-radius: 16px;
  --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  --card-shadow-light: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  --card-border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
  --card-bg: oklch(0.16 0.012 309 / 92%);
  --card-bg-light: oklch(0.99 0.003 309 / 98%);
}

.wrapper {
  margin: 0;
}

.darkmode {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.338 0.136 21.178);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --conatiner-bg: var(--muted);
  --color-accent: var(--primary);

  p {
    color: #c4c4c4;
  }

  .naveps {
    .nvs {
      a {
        background: var(--background-light);
      }
    }
  }

  .seriestwo {
    .sertobig {
      background: transparent !important;
      box-shadow: none;
      overflow: visible;
    }
  }
}

body {
  position: inherit;

  > div.mainholder.rtl {
    > div.th {
      > div.centernav.bound {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;

        > a {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;

          span {
            display: none;
          }
        }

        > svg {
          display: none;
        }
      }
    }
  }

  .pms-account-navigation {
    li.pms-account-navigation-link {
      a {
        display: inline-block;
        color: var(--accent);
        padding: 7px 16px;
        border-radius: var(--border-radius);
        border: 1px solid var(--accent);
        box-shadow: none;

        &:hover,
        &.pms-account-navigation-link--active {
          background: var(--color-accent);
          box-shadow: none;
        }
      }
    }
  }

  .pms-account-subscription-action-link {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
    border: 1px solid var(--accent);
    color: var(--accent);

    &:hover {
      background: var(--color-accent);
      color: #fff;
    }

    &.pms-account-subscription-action-link__renew,
    &.pms-account-subscription-action-link__change {
      background: var(--color-accent);
      color: #fff;
      border: none;
      transition: 500ms ease-in-out;

      &:hover {
        translate: 0 -2px;
        transition: 500ms ease-in-out;
      }
    }

    &.pms-account-subscription-action-link__cancel,
    &.pms-account-subscription-action-link__abandon {
      background: transparent;
      color: var(--accent-muted);
      border-color: var(--accent-muted);
    }
  }

  &[data-sub="false"] {
    .epl-pdf,
    .eph-pdf {
      display: none;
    }

    .eplister > ul:nth-child(2) > li {
      display: flex;

      a {
        flex: 1;
      }
    }
  }

  .srcmob {
    @media only screen and (max-width: 570px) {
      height: 35px;
    }
  }

  @media only screen and (max-width: 590px) {
    .kol-chapter-bar__jump {
      font-size: 0;
      height: 27px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .kol-chapter-bar__tools .optread.optxid {
      gap: 0;
      padding: var(--font-size-small);
    }
  }

  @media only screen and (max-width: 350px) {
    .kol-chapter-bar__tools {
      gap: var(--gap-small);
    }

    .kol-chapter-bar__scroll {
      gap: var(--gap-small);

      > a {
        padding: var(--padding-small);
      }
    }
  }
}

/* Hiding elements */
body > div.mainholder.rtl > div.th > div.centernav.bound > a span,
body > div.mainholder.rtl > div.th > div.centernav.bound > svg,
.kol-chapter-bar__scroll-btn span,
.kol-chapter-bar__scroll-btn i,
div.optx-content div.alignButton > button i {
  display: none;
}

/* Chapter bar (new class names — avoid theme #kol_navbar / .naveps / .dlpdf) */
.kol-chapter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  width: 100%;
  box-sizing: border-box;
}

.kol-chapter-bar__nav {
  width: 100%;
  margin: 0;
  padding: 0;
}

.kol-chapter-bar__nav-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.kol-chapter-bar__nav-item {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.kol-chapter-bar__nav-item.is-empty {
  display: none;
}

.kol-chapter-bar__nav-item > a,
.kol-chapter-bar__jump {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 12px;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.29);
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.kol-chapter-bar__nav-item > a:hover,
.kol-chapter-bar__nav-item > a:focus,
.kol-chapter-bar__jump:hover,
.kol-chapter-bar__jump:focus {
  background: rgba(0, 0, 0, 0.12);
  color: #111;
  filter: none;
}

.kol-chapter-bar__btn:hover,
.kol-chapter-bar__btn:focus {
  background: rgba(0, 0, 0, 0.12);
  color: #111;
  filter: none;
}

.kol-chapter-bar__pdf:hover,
.kol-chapter-bar__pdf:focus {
  background: rgba(0, 0, 0, 0.12);
  color: #111;
  filter: none;
}

.darkmode .kol-chapter-bar__nav-item > a:hover,
.darkmode .kol-chapter-bar__nav-item > a:focus,
.darkmode .kol-chapter-bar__jump:hover,
.darkmode .kol-chapter-bar__jump:focus,
.darkmode .kol-chapter-bar__btn:hover,
.darkmode .kol-chapter-bar__btn:focus,
.darkmode .kol-chapter-bar__pdf:hover,
.darkmode .kol-chapter-bar__pdf:focus {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  filter: brightness(1.15);
}

.kol-chapter-bar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.kol-chapter-bar__tools-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.kol-chapter-bar__scroll {
  display: flex;
  gap: 8px;
}

.kol-chapter-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.29);
  border-radius: 4px;
  border: none;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.kol-chapter-bar__tools .kol-chapter-bar__btn,
.kol-chapter-bar__tools .optread.kol-chapter-bar__btn,
.kol-chapter-bar__tools .kol-rs-trigger.kol-chapter-bar__btn {
  float: none;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.29) !important;
  color: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.kol-chapter-bar__tools .optread.kol-chapter-bar__btn .fas,
.kol-chapter-bar__tools .kol-rs-trigger.kol-chapter-bar__btn .fas {
  font-size: 15px;
  line-height: 1;
}

.kol-chapter-bar__scroll-btn {
  min-width: 36px;
  padding: 8px 12px;
}

.kol-chapter-bar__scroll-btn span {
  display: none;
}

.kol-chapter-bar__scroll-btn:first-child::after {
  content: "⇧";
  font-size: 18px;
  line-height: 1;
}

.kol-chapter-bar__scroll-btn:last-child::after {
  content: "⇩";
  font-size: 18px;
  line-height: 1;
}

.kol-chapter-bar__pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.29);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

#kol-chapter-picker select.select-chapter,
#kol-chapter-picker .select-chapter {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
}

/* Keep reader settings overlay above page chrome */
body > .option-over,
body > .option-over.optxshd,
body > .option-over.optxshd.optxshds,
.option-over.optxshd {
  z-index: 100000;
}

/* Option content styles */
div.optx-content {
  button {
    cursor: pointer;
    background: var(--background-dark);
    border: none;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-dark);

    &:hover {
      border-right: var(--hover-border-color) 1px solid;
      border-left: var(--hover-border-color) 1px solid;
    }
  }

  div.alignButton {
    display: flex;
    flex-direction: row;
    gap: var(--gap-small);
    justify-content: center;
    align-items: center;

    > button {
      padding: var(--padding-small);

      &:nth-child(1)::after {
        content: "⥱";
      }

      &:nth-child(2)::after {
        content: "☰";
      }

      i {
        display: none;
      }
    }
  }
}

/* Option overlay styles */
body > div.option-over.optxshd.optxshds {
  > div > div > div.optx-content {
    > div:nth-child(7) > div > div {
      gap: var(--gap-small);
    }

    > div:nth-child(6) > div > button {
      padding: var(--padding-small);
    }
  }
}

/* Naveps styles */
.naveps {
  .nvs {
    a {
      border-radius: var(--border-radius);
    }
  }
}

.th {
  .centernav {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
  }
}

/* Bottom chapter nav — same button chrome as top bar */
#Bottum_Down.kol-chapter-bar {
  margin: 12px 0 0;
}

#Bottum_Down .kol-chapter-bar__nav-row {
  width: 100%;
}

.announ:has(img) {
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, 0.5);
}

.sertobig {
  position: relative;
  border-radius: 3px;
  background: var(--card);
  border: none;
  box-shadow: var(--shadow-md);
  overflow: visible;
  max-width: min(960px, calc(100vw - 2rem));
  margin: 1.25rem auto;
  min-width: unset;
  color: var(--foreground);
}

article {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lastend {
  display: flex;
  gap: 6px;
  flex-direction: row;
  align-items: stretch;
  margin: 10px 15px;

  .inepcx {
    flex: 1;
    width: auto;

    & > a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border: none;
      background: var(--color-accent);
      color: #fff;
      width: 100%;
      font-size: 12px;
      font-weight: 500;
      transition:
        background 0.2s,
        filter 0.2s;
      border-radius: 8px;
      text-decoration: none;
      text-align: center;
      margin: 0;
      padding: 6px;

      &:hover {
        color: #fff;
        background: var(--color-accent);
        filter: saturate(1.45);
      }
    }
  }
}

/* Collapsible Section Arrows */
.ts-chl-collapsible {
  &:has(+ .ts-chl-collapsible-content[style*="display: none"]):after {
    transform: rotate(0deg);
  }

  &:after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb25zLWRvd24taWNvbiBsdWNpZGUtY2hldnJvbnMtZG93biI+PHBhdGggZD0ibTcgNiA1IDUgNS01Ii8+PHBhdGggZD0ibTcgMTMgNSA1IDUtNSIvPjwvc3ZnPg==");
    background-size: contain;
    float: left;
    filter: invert(1);
    transition: transform 0.3s ease;
    transform: rotate(180deg);
  }
}

.bixbox.image-list {
  max-width: 100vw;
}

/* ===== صفحة الرواية ===== */

/* Parent theme sets #content { overflow: hidden } and .insertobig { overflow: hidden }.
   Either one breaks position: sticky on .sertocover-col (not present in local preview HTML). */
#content.sertwofull {
  overflow: visible;
}

.sertwofull .seriestwo .sertobig,
.sertwofull .seriestwo .sertobig .insertobig {
  overflow: visible !important;
}

.seriestwo {
  .sertobody {
    padding: 0;
    min-width: unset;
		width: 100%;
  }

  .sertobig {
    .sertofooter-escape-route {
      .bookmark {
        border-radius: 5px;
      }
    }

    .insertobig {
      display: flex;
      flex-direction: row;
      gap: 24px;
      align-items: flex-start;
      padding: 24px;
      box-sizing: border-box;
      max-width: none;
      margin: 0;
      float: none;
      overflow: visible;
      color: var(--foreground);

      a {
        color: var(--primary);
      }

      .mycred-my-balance-wrapper {
        color: var(--foreground);
      }

      /* الغلاف + أزرار الإجراءات (sticky على سطح المكتب) */
      .sertocover-col {
        flex-shrink: 0;
        width: fit-content;
        max-width: 250px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: sticky;
        top: 88px;
        align-self: flex-start;
        z-index: 3;
      }

      .sertothumb {
        position: relative;
        width: 100%;
        min-width: 0;
        float: none;
        margin: 0;

        img {
          width: 100%;
          max-width: 250px;
          height: auto;
          border-radius: var(--radius-lg);
          display: block;
          border: none;
          box-shadow: var(--shadow-md);
          transition: box-shadow 0.2s ease, transform 0.2s ease;
        }
      }

      .sertostat {
        position: absolute;
        top: 10px;
        inset-inline-end: 10px;
        z-index: 2;
        margin: 0;
        pointer-events: none;

        span {
          display: inline-block;
          padding: 4px 10px;
          border-radius: 999px;
          font-size: 11px;
          font-weight: 700;
          background: color-mix(in oklch, var(--card) 82%, transparent);
          color: var(--foreground);
          border: 1px solid color-mix(in oklch, var(--foreground) 18%, var(--border));
          backdrop-filter: blur(6px);
          box-shadow: var(--shadow-sm);
        }
      }

      .sertoactions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 250px;
      }

      /* المعلومات */
      .sertoinfo {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: var(--foreground);

        .entry-title {
          margin: 0 0 4px;
          font-size: clamp(18px, 3vw, 32px);
          line-height: 1.15;
          color: var(--foreground);
        }

        .alter {
          display: block;
          margin: 0 0 2px;
          font-size: 13px;
          line-height: 1.5;
          padding: 0;
          border: none;
          border-radius: 0;
          background: transparent;
          color: var(--muted-foreground);
          opacity: 1;
        }

        /* الجدول */
        .sertoauth {
          display: flex;
          flex-direction: column;
          border: var(--novel-panel-border);
          border-radius: var(--radius-lg);
          overflow: hidden;
          background: var(--muted);

          .serl {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            border-bottom: none;
            position: relative;
            margin: 0;
            padding: 0;
            min-height: 36px;
            float: none;
            width: 100%;
            box-sizing: border-box;

            &:last-child {
              border-bottom: none;
            }

            &:not(:last-child)::after {
              content: "";
              position: absolute;
              right: 0;
              bottom: 0;
              left: 0;
              height: 1px;
              background: var(--border);
              opacity: 0.7;
              pointer-events: none;
            }

            span {
              display: flex;
              align-items: center;
              padding: 8px 12px;
              box-sizing: border-box;
            }

            .sername {
              width: 42%;
              font-size: 11px;
              white-space: nowrap;
              border-left: none;
              gap: 7px;
              background: var(--novel-meta-label-bg);
              color: var(--muted-foreground);
              opacity: 1;
              box-shadow: inset -1px 0 0 var(--border);

              &::before {
                content: "";
                display: inline-block;
                width: 14px;
                height: 14px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                flex-shrink: 0;
                opacity: 0.55;
              }
            }

            .serval {
              flex: 1;
              font-size: 13px;
              font-weight: 600;
              color: var(--foreground);

              a {
                display: inline-flex;
                align-items: center;
                margin-inline-end: 6px;
                margin-block: 2px;
                padding: 3px 10px;
                border: 1px solid var(--border);
                border-radius: 999px;
                background: var(--card);
                font-size: 12px;
                font-weight: 600;
                color: var(--foreground);
                cursor: pointer;
                text-decoration: none;
                transition:
                  color 0.2s ease,
                  background 0.2s ease,
                  border-color 0.2s ease;

                &:hover,
                &:focus-visible {
                  color: var(--foreground);
                  background: var(--accent);
                  border-color: color-mix(in oklch, var(--muted-foreground) 45%, var(--border));
                  outline: none;
                }
              }
            }
          }

          /* أيقونات SVG للجدول */
          .serl:nth-child(1) .sername::before {
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22/%3E%3Cpath%20d%3D%22M2%2012h20%22/%3E%3C/svg%3E");
          }
          .serl:nth-child(2) .sername::before {
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22/%3E%3C/svg%3E");
          }
          .serl:nth-child(3) .sername::before {
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203a2.85%202.83%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5Z%22/%3E%3C/svg%3E");
          }
          .serl:nth-child(4) .sername::before {
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%208%206%206%22/%3E%3Cpath%20d%3D%22m4%2014%206-6%202-3%22/%3E%3Cpath%20d%3D%22M2%205h12%22/%3E%3Cpath%20d%3D%22M7%202h1%22/%3E%3Cpath%20d%3D%22m22%2022-5-10-5%2010%22/%3E%3Cpath%20d%3D%22M14%2018h6%22/%3E%3C/svg%3E");
          }
          .serl:nth-child(5) .sername::before {
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019.5v-15A2.5%202.5%200%200%201%206.5%202H20v20H6.5a2.5%202.5%200%200%201%200-5H20%22/%3E%3C/svg%3E");
          }
          .serl:nth-child(6) .sername::before {
            background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3-7%2010-7%2010%207%2010%207-3%207-10%207-10-7-10-7Z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E");
          }
        }

        /* التصنيفات */
        .sertogenre {
          display: grid;
          grid-template-columns: repeat(
            auto-fill,
            minmax(80px, 1fr)
          );
          gap: 6px;
          border: 1px solid var(--border);
          border-radius: var(--radius-lg);
          overflow: hidden;
          margin-top: 0;
          padding: 12px 14px;
          padding-top: 0;
          background: var(--muted);
          box-shadow: var(--shadow-sm);

          &::before {
            content: "التصنيفات";
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            font-size: 15px;
            font-weight: 700;
            background: var(--primary);
            color: var(--primary-foreground);
            grid-column: 1 / -1;
            border: none;
            border-radius: 0;
            margin: 0 calc(-14px) 6px;
          }

          a {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 7px 12px;
            font-size: 12px;
            font-weight: 700;
            color: var(--foreground);
            background: var(--card);
            text-decoration: none;
            border: 1px solid var(--border);
            border-radius: 999px;
            cursor: pointer;
            transition:
              background 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease;
            text-align: center;
            box-sizing: border-box;

            &:hover,
            &:focus-visible {
              color: var(--foreground);
              background: var(--accent);
              border-color: color-mix(in oklch, var(--muted-foreground) 45%, var(--border));
              outline: none;
            }
          }
        }

        .rating.serrate {
          display: none;
        }

        .custom-rating {
          display: flex;
          flex-direction: column;
          border: var(--novel-panel-border);
          border-radius: var(--radius-lg);
          overflow: hidden;
          margin-top: 2px;
          background: var(--muted);

          &::before {
            content: "التقييمات";
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            font-size: 15px;
            font-weight: 700;
            background: var(--primary);
            color: var(--primary-foreground);
          }

          .custom-rating-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            padding: 9px 14px;
            border-bottom: 1px solid var(--border);

            &:last-child {
              border-bottom: none;
            }
          }

          .custom-rating-label {
            width: 34%;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            color: var(--muted-foreground);
          }

          .rtp {
            flex: 1;
            height: 6px;
            background: color-mix(in oklch, var(--muted-foreground) 15%, transparent);
            border-radius: 999px;
            overflow: hidden;
          }

          .rtb {
            height: 100%;

            span {
              display: block;
              height: 100%;
              background: var(--primary);
              border-radius: 999px;
            }
          }

          .custom-rating-value {
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
            min-width: 42px;
            text-align: left;
            color: var(--foreground);
          }

          .custom-rating-reviews-button {
            margin: 0;
            border: none;
            border-top: 1px solid var(--border);
            background: transparent;
            color: var(--foreground);
            padding: 10px 16px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease;

            &:hover {
              background: color-mix(in oklch, var(--foreground) 8%, transparent);
              color: var(--foreground);
            }
          }
        }

        .kol-review-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 8px 16px;
          font-size: 12px;
          font-weight: 700;
          color: var(--primary);
          border: 1px solid var(--primary);
          border-radius: var(--radius-md);
          text-decoration: none;
          cursor: pointer;
          transition: background 0.2s, color 0.2s;

          &:hover {
            background: var(--primary);
            color: var(--primary-foreground);
          }
        }

        /* النبذة */
        .sersysn {
          border: var(--novel-panel-border);
          border-radius: var(--radius-lg);
          margin-top: 10px;
          margin-bottom: 0;
          background: var(--muted);
          overflow: hidden;

          .sersys.entry-content {
            border: none;
            border-radius: 0;
            margin-top: 0;
            padding: 0 14px 10px;
            background: transparent;
            font-size: 13px;
            line-height: 1.7;
            display: block;
            position: relative;
            color: var(--foreground);

            &::before {
              content: "القصة";
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 8px 12px;
              margin: 0 -14px 10px;
              font-size: 15px;
              font-weight: 700;
              background: var(--primary);
              color: var(--primary-foreground);
              border: none;
              border-radius: 0;
            }

            p {
              border: none;
              margin: 0;
              padding: 0;
              color: var(--foreground);
            }
          }

          .sysmore {
            display: block;
            width: 100%;
            box-sizing: border-box;
            padding: 10px 16px;
            text-align: center;
            background: transparent;
            color: var(--foreground);
            font-weight: 700;
            font-size: 12px;
            cursor: pointer;
            text-decoration: none;
            border: none;
            border-top: 1px solid var(--border);
            transition: background-color 0.2s ease, color 0.2s ease;

            &:hover {
              background: color-mix(in oklch, var(--foreground) 8%, transparent);
              color: var(--foreground);
            }
          }
        }

        .kol-series-shola {
          border: 1px solid var(--border);
          border-radius: var(--radius-lg);
          overflow: hidden;
          margin-top: 2px;
          margin-bottom: 0;
          background: var(--muted);
          box-shadow: var(--shadow-sm);

          & + .sertogenre {
            margin-top: 18px;
          }

          &::before {
            content: "تحدي الشعلة";
            display: flex;
            align-items: center;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 700;
            background: color-mix(in oklch, var(--foreground) 4%, var(--muted));
            color: var(--foreground);
            border-bottom: 1px solid var(--border);
          }

          .shola-widget {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: var(--foreground) !important;
            box-shadow: none !important;
            overflow: hidden;

            .shola-progress-wrap {
              padding: 14px 14px 12px !important;
              margin: 0 !important;
            }

            .shola-progress-header,
            .shola-pb-header {
              font-size: 13px;
              font-weight: 700;
              color: var(--foreground) !important;
            }

            .shola-days-left,
            .shola-pb-days {
              color: var(--muted-foreground) !important;
              font-size: 12px !important;
              font-weight: 600 !important;
            }

            .shola-numbers,
            .shola-pb-numbers,
            .shola-pre-goal,
            .shola-pb-pre {
              color: var(--muted-foreground) !important;
              opacity: 1 !important;
              font-size: 12px !important;
            }

            .shola-bar-bg,
            .shola-pb-bg {
              height: 8px !important;
              background: color-mix(in oklch, var(--muted-foreground) 18%, transparent) !important;
              border-radius: 999px !important;
            }

            .shola-bar-fill,
            .shola-pb-fill {
              background: linear-gradient(
                90deg,
                color-mix(in oklch, #f59e0b 85%, var(--foreground)),
                #fbbf24
              ) !important;
              border-radius: 999px !important;
              font-size: 10px !important;
              color: #1a1200 !important;
            }

            .shola-completed,
            .shola-pb-done {
              color: var(--muted-foreground) !important;
              font-size: 12px !important;
              margin-top: 8px !important;
              margin-bottom: 0 !important;
            }

            /* Series page already has support under the cover — keep this block compact. */
            .shola-modal-overlay,
            .shola-btn-support,
            .shola-tabs,
            .shola-board {
              display: none !important;
            }
          }
        }

        /* الأزرار */
        > div[style*="display:flex"] {
          display: flex;
          flex-direction: row;
          gap: 10px;
          width: 100%;
          margin-top: 0;
          padding: 12px 14px;
          border: var(--novel-panel-border);
          border-radius: var(--radius-lg);
          background: var(--muted);
          box-sizing: border-box;
        }

        .serbookmark {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;

          .bmc {
            font-size: 11px;
            color: var(--muted-foreground);
            opacity: 1;
            text-align: center;

            p {
              margin: 0;
            }
          }

          .bookmark:not(.kol-library-btn) {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 700;
            color: var(--primary-foreground);
            background: var(--primary);
            border: none;
            border-radius: var(--radius-md);
            text-align: center;
            cursor: pointer;
            transition:
              background 0.2s,
              filter 0.2s;

            &:hover {
              color: var(--primary-foreground);
              background: var(--primary);
              filter: saturate(1.45);
            }
          }
        }

      }
    }
  }
}

body.darkmode .seriestwo .sertobig .insertobig .sertoinfo .sertoauth .serl .sername::before {
  filter: invert(1);
  opacity: 0.9;
}

/* Series action cards (support + library) — matches Starless Edits library button UI. */
.seriestwo .sertobig .insertobig .sertoactions .kol-library-wrap {
  position: relative;
  z-index: 50;
  overflow: visible !important;
  width: 100%;
  margin-top: 0;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn {
  width: 100% !important;
  min-height: 76px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--muted) !important;
  color: var(--foreground) !important;
  font: inherit !important;
  text-align: right;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn:hover {
  transform: translateY(-1px);
  background: var(--accent) !important;
  border-color: color-mix(in oklch, var(--muted-foreground) 35%, var(--border)) !important;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn > .fas {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 20px;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn__copy {
  display: grid;
  gap: 4px;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn__label {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn__count {
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 600;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn__count .mycred-my-balance-wrapper,
.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn__count .mycred-my-balance-wrapper > div {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn.is-in-library {
  border-color: #75132b !important;
  background: linear-gradient(135deg, #75132b, #9b1738) !important;
  color: #fff !important;
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn.is-in-library > .fas {
  background: rgba(255, 255, 255, 0.16);
}

.seriestwo .sertobig .insertobig .sertoactions .kol-library-btn.is-in-library .kol-library-btn__count {
  color: #f7dbe2;
}

body.darkmode .seriestwo .sertobig .insertobig .sertoactions .kol-library-btn {
  border-color: var(--border) !important;
  background: var(--muted) !important;
  box-shadow: none !important;
  color: var(--foreground) !important;
}

body.darkmode .seriestwo .sertobig .insertobig .sertoactions .kol-library-btn__count {
  color: var(--muted-foreground);
}

body.darkmode .seriestwo .sertobig .insertobig .sertoactions .kol-library-btn.is-in-library .kol-library-btn__count {
  color: #f7dbe2;
}

/* Theme CSS loads after this file: retain readable dark metadata surfaces. */
body.darkmode .seriestwo .sertobig .insertobig .sertoinfo .sertoauth {
  background: var(--muted);
  border: none;
}

body.darkmode .seriestwo .sertobig .insertobig .sertoinfo .sertoauth .serl {
  border: none;
}

body.darkmode .seriestwo .sertobig .insertobig .sertoinfo .sertoauth .serl .sername {
  background: var(--secondary);
  color: var(--muted-foreground);
  border: none;
}

body.darkmode .seriestwo .sertobig .insertobig .sertoinfo .sertoauth .serl .serval {
  color: var(--foreground);
}

body.darkmode .seriestwo .sertobig .insertobig .sertoinfo .sertoauth .serl .serval a {
  color: var(--foreground);
  text-decoration-color: color-mix(in oklch, var(--foreground) 40%, transparent);
}

body.darkmode .seriestwo .sertobig .insertobig .sertoinfo .sertoauth .serl .serval a:hover {
  color: var(--primary-foreground);
}

/* موبايل صفحة الرواية */
@media (max-width: 768px) {
  .sertobig {
    max-width: calc(100vw - 1rem);
    margin: 0.75rem auto;
    border-radius: 3px;
  }

  .seriestwo .sertobig .insertobig {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;

    /* Unwrap cover/actions so buttons can sit after all info on mobile. */
    .sertocover-col {
      display: contents;
      width: auto;
      max-width: none;
      position: static;
      top: auto;
    }

    .sertothumb {
      order: 1;
      width: min(250px, 100%);
      max-width: min(250px, 100%);
      min-width: unset;
      float: none;
      margin-inline: auto;
      align-self: center;

      img {
        width: 100%;
        max-width: 250px;
        height: auto;
        margin-inline: auto;
        display: block;
      }
    }

    .sertoinfo {
      order: 2;
      width: 100%;

      .entry-title {
        text-align: center;
      }

      .alter {
        text-align: center;
      }

      .sertogenre {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 0 14px 14px;

        &::before {
          flex: 0 0 100%;
          width: auto;
          grid-column: auto;
          margin: 0 -14px 8px;
        }

        a {
          float: none !important;
          display: inline-flex !important;
          flex: 0 0 auto;
          width: auto;
          max-width: 100%;
          white-space: nowrap;
        }
      }

      > div[style*="display:flex"] {
        flex-direction: column;
        gap: 8px;
      }
    }

    .sertoactions {
      order: 3;
      width: 100%;
      max-width: 100%;
      margin-top: 4px;
      align-self: stretch;
    }
  }
}

/* Flat overrides — beat inline shola assets still cached in post content. */
.seriestwo .sertoinfo .kol-series-shola {
  margin-bottom: 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

.seriestwo .sertoinfo .kol-series-shola + .sertogenre {
  margin-top: 18px !important;
}

.seriestwo .sertoinfo .sertogenre {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

.seriestwo .sertoinfo .kol-series-shola .shola-widget {
  background: transparent !important;
  border: none !important;
  color: var(--foreground) !important;
}

.seriestwo .sertoinfo .kol-series-shola .shola-modal-overlay,
.seriestwo .sertoinfo .kol-series-shola .shola-btn-support,
.seriestwo .sertoinfo .kol-series-shola .shola-tabs,
.seriestwo .sertoinfo .kol-series-shola .shola-board {
  display: none !important;
}

.seriestwo .sertoinfo .kol-series-shola .shola-bar-fill,
.seriestwo .sertoinfo .kol-series-shola .shola-pb-fill {
  background: linear-gradient(90deg, #d97706, #fbbf24) !important;
}

.seriestwo .sertoinfo .kol-series-shola .shola-tab.active {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--foreground) !important;
}

@media (max-width: 768px) {
  .seriestwo .sertobig .insertobig .sertoinfo .sertogenre a {
    float: none !important;
    display: inline-flex !important;
  }
}

.seriestwo .sertoinfo .sysmore,
.seriestwo .sertoinfo .custom-rating-reviews-button {
  color: var(--foreground) !important;
}

.seriestwo .sertoinfo .sysmore:hover,
.seriestwo .sertoinfo .custom-rating-reviews-button:hover {
  color: var(--foreground) !important;
  background: color-mix(in oklch, var(--foreground) 8%, transparent) !important;
}

/* ── صفحة تسجيل الدخول ── */
body.account {
  body {
    display: flex;
    justify-content: normal;
    min-height: 100vh;
    box-sizing: border-box;
    transition: background-color 0.3s ease;

    &.darkmode {
      .bixbox {
        background: var(--background-dark);
        border-color: var(--accent-muted);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      }
      .releases {
        background: var(--sertobig-bg-dark);
        border-bottom-color: var(--accent-muted);

        h1 {
          color: var(--text-dark);
        }
      }
      .pms-form {
        label {
          color: var(--text-dark);
          opacity: 0.8;
        }
        .input {
          background-color: var(--background-light);
          border-color: var(--accent-muted);
          color: var(--text-dark);

          &:focus {
            border-color: var(--hover-border-color);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
          }
          &:hover {
            border-color: var(--hover-border-color);
          }
        }
        .login-remember label {
          color: var(--text-dark);
        }
        .login-extra {
          a {
            color: var(--text-dark);
            opacity: 0.9;
          }
          .separator {
            color: var(--accent-muted);
          }
        }
      }
    }
  }

  .mainholder {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  #content {
    flex: 1;
    display: flex;
    max-width: 100%;
    margin: 20px 0;

    .wrapper {
      flex: 1;
      display: flex;

      .postbody {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  #sidebar {
    display: none;
  }

  .bixbox {
    max-width: 450px;
    width: 100%;
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--accent-muted);
    overflow: hidden;
    transition:
      background 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .releases {
    background: var(--sertobig-bg);
    border-bottom: 1px solid var(--accent-muted);
    text-align: center;
    transition:
      background 0.3s ease,
      border-bottom-color 0.3s ease;
    display: flex;
    justify-content: center;
    padding: 20px;

    h1 {
      margin: 0;
      font-size: 1.5rem;
      color: var(--text-light);
      transition: color 0.3s ease;
    }
  }

  .page {
    padding: var(--gap-large);

    &:has(#pms_login) > div:last-child {
      display: none;
    }
  }

  .pms-form {
    p {
      margin: 0 0 var(--gap-medium) 0;
      display: flex;
      flex-direction: column;
      gap: var(--gap-small);
    }

    label {
      font-size: var(--font-size-small);
      font-weight: 600;
      color: var(--text-light);
      opacity: 0.7;
      transition:
        color 0.3s ease,
        opacity 0.3s ease;
    }

    .input {
      width: 100%;
      padding: var(--padding-large);
      font-size: 1rem;
      border: 1px solid var(--accent-muted);
      border-radius: var(--border-radius);
      background-color: #ffffff;
      box-sizing: border-box;
      transition:
        border-color 0.2s,
        box-shadow 0.2s,
        background-color 0.3s ease,
        color 0.3s ease;

      &:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(109, 0, 21, 0.15);
      }
      &:hover {
        border-color: var(--color-accent);
      }
    }

    .login-remember {
      flex-direction: row-reverse;
      justify-content: flex-end;
      align-items: center;
      gap: var(--gap-medium);
      cursor: pointer;

      input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        margin: 0;
      }

      label {
        cursor: pointer;
        font-weight: 500;
        color: var(--text-light);
        opacity: 1;
      }
    }

    .button-primary {
      width: 100%;
      padding: var(--padding-large);
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-dark);
      background-color: var(--color-accent);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.9;
      }
    }

    .login-extra {
      flex-direction: row-reverse;
      justify-content: center;
      gap: var(--gap-medium);
      font-size: var(--font-size-small);
      margin-bottom: 0;

      a {
        color: var(--color-accent);
        text-decoration: none;
        transition: color 0.3s ease;

        &:hover {
          text-decoration: underline;
        }
      }

      .separator {
        color: var(--accent-muted);
        transition: color 0.3s ease;
      }
    }
  }
}

/* ── Edit-profile form ── */
html:has(link[rel="canonical"][href^="https://kolnovel.com/account/"]) {
  .pms-form {
    direction: rtl;
  }

  #pms_edit-profile-form .pms-form-fields-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #pms_edit-profile-form .pms-field,
  #pms_edit-profile-form .pms-field-section,
  #pms_edit-profile-form .pms-form-fields-wrapper > li:last-child {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
  }

  #pms_edit-profile-form .pms-user-login-field,
  #pms_edit-profile-form .pms-user-email-field,
  #pms_edit-profile-form .pms-field-section,
  #pms_edit-profile-form .pms-form-fields-wrapper > li:last-child {
    grid-column: 1 / -1;
  }

  #pms_edit-profile-form .pms-field-section {
    display: contents;
  }

  #pms_edit-profile-form .pms-field-section .pms-field {
    grid-column: 1 / -1;
  }

  #pms_edit-profile-form label {
    display: block;
    margin: 0 0 7px;
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 700;
  }

  #pms_edit-profile-form input[type="text"],
  #pms_edit-profile-form input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    color: var(--foreground);
    background: color-mix(in srgb, var(--card) 72%, var(--muted));
    border: 1px solid color-mix(in srgb, var(--foreground) 15%, transparent);
    border-radius: 9px;
    box-sizing: border-box;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  #pms_edit-profile-form input[type="text"]:hover,
  #pms_edit-profile-form input[type="password"]:hover {
    border-color: color-mix(in srgb, #315fca 55%, transparent);
  }

  #pms_edit-profile-form input[type="text"]:focus,
  #pms_edit-profile-form input[type="password"]:focus {
    border-color: #315fca;
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(49, 95, 202, 0.16);
  }

  #pms_edit-profile-form input:disabled {
    color: var(--muted-foreground);
    background: color-mix(in srgb, var(--foreground) 6%, transparent);
    cursor: not-allowed;
    opacity: 0.8;
  }

  #pms_edit-profile-form .pms-form-fields-wrapper > li:last-child {
    margin-top: 8px;
  }

  #pms_edit-profile-form input[type="submit"] {
    width: 100%;
    min-height: 46px;
    padding: 10px 18px;
    color: #fff;
    background: #315fca;
    border: 1px solid #315fca;
    border-radius: 9px;
    box-shadow: 0 7px 18px rgba(49, 95, 202, 0.2);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  #pms_edit-profile-form input[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
  }

  @media (max-width: 600px) {
    #pms_edit-profile-form .pms-form-fields-wrapper {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    #pms_edit-profile-form .pms-field,
    #pms_edit-profile-form .pms-user-login-field,
    #pms_edit-profile-form .pms-user-email-field,
    #pms_edit-profile-form .pms-field-section,
    #pms_edit-profile-form .pms-form-fields-wrapper > li:last-child {
      grid-column: auto;
    }
  }
}

/* ── Account dashboard refresh ── */
html:has(link[rel="canonical"][href^="https://kolnovel.com/account/"]) {
  --account-surface: color-mix(in srgb, var(--card) 92%, transparent);
  --account-raised: color-mix(in srgb, var(--muted) 76%, var(--card));
  --account-line: color-mix(in srgb, var(--foreground) 13%, transparent);
  --account-primary: #315fca;
  --account-header: #c4384b;
  --account-danger: #b6354c;

  #content {
    margin: 42px 0 56px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .bixbox {
    max-width: 780px;
    border: 1px solid var(--account-line);
    border-radius: 18px;
    background: var(--account-surface);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
  }

  .releases {
    position: relative;
    min-height: 104px;
    padding: 0 28px;
    overflow: hidden;
    text-align: right;
    justify-content: flex-start;
    align-items: center;
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.13), transparent 35%),
      linear-gradient(125deg, var(--account-header), #681522);
    border: 0;
  }

  .releases h1 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: 0;
  }

  .releases h1::after {
    content: "إدارة اشتراكك وإعداداتك";
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 400;
  }

  .page {
    padding: 28px;
  }

  .pms-account-navigation {
    margin: 0 0 26px;
  }

  .pms-account-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pms-account-navigation li.pms-account-navigation-link {
    margin: 0;
  }

  .pms-account-navigation li.pms-account-navigation-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    color: var(--foreground);
    background: var(--account-raised);
    border: 1px solid var(--account-line);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  .pms-account-navigation li.pms-account-navigation-link a:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--account-primary) 60%, var(--account-line));
    background: color-mix(in srgb, var(--account-primary) 13%, var(--account-raised));
  }

  .pms-account-navigation li.pms-account-navigation-link a.pms-account-navigation-link--active {
    color: #fff;
    background: var(--account-primary);
    border-color: var(--account-primary);
    box-shadow: 0 6px 16px rgba(49, 95, 202, 0.28);
  }

  .pms-account-navigation-link--logout {
    margin-right: auto;
  }

  .pms-account-navigation-link--logout a {
    color: var(--account-danger);
  }

  .pms-account-subscription-details-table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--account-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--account-raised);
    color: var(--foreground);
  }

  .pms-account-subscription-details-table tr {
    background: transparent;
  }

  .pms-account-subscription-details-table td {
    padding: 15px 17px;
    border: 0;
    border-bottom: 1px solid var(--account-line);
    color: var(--foreground);
    font-size: 14px;
    vertical-align: middle;
  }

  .pms-account-subscription-details-table tr:last-child td {
    border-bottom: 0;
  }

  .pms-account-subscription-details-table td:first-child {
    width: 35%;
    color: var(--muted-foreground);
    background: color-mix(in srgb, var(--foreground) 4%, transparent);
    font-size: 12px;
    font-weight: 700;
  }

  .pms-account-subscription-details-table td.status-expired {
    color: #ef6379;
    font-weight: 700;
  }

  .pms-account-subscription-action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 3px 0 3px 6px;
    padding: 6px 12px;
    color: var(--foreground);
    background: transparent;
    border: 1px solid var(--account-line);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .pms-account-subscription-action-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
  }

  .pms-account-subscription-action-link.pms-account-subscription-action-link__renew,
  .pms-account-subscription-action-link.pms-account-subscription-action-link__change {
    color: #fff;
    background: var(--account-primary);
    border-color: var(--account-primary);
  }

  .pms-account-subscription-action-link.pms-account-subscription-action-link__abandon,
  .pms-account-subscription-action-link.pms-account-subscription-action-link__cancel {
    color: #f06a7e;
    border-color: color-mix(in srgb, #f06a7e 45%, transparent);
  }

  .page > div[style*="margin-top"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
  }

  .page > div[style*="margin-top"] br {
    display: none;
  }

  .page > div[style*="margin-top"] a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: none;
    font-weight: 700;
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .page > div[style*="margin-top"] a:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
  }

  .shola-widget {
    margin: 24px 0 0;
    padding: 20px;
    border: 1px solid var(--account-line);
    border-radius: 14px;
    background: var(--account-raised);
    box-shadow: none;
  }

  .shola-progress-header,
  .shola-pb-header {
    font-size: 15px;
  }

  .shola-bar-bg,
  .shola-pb-bg {
    height: 10px;
    background: color-mix(in srgb, var(--foreground) 12%, transparent);
  }

  .shola-bar-fill,
  .shola-pb-fill {
    background: linear-gradient(90deg, #416fd8, #7e9eff);
  }

  .shola-btn-support {
    border-radius: 9px;
    background: var(--account-primary);
  }

  body.lightmode .shola-widget,
  body:not(.darkmode) .shola-widget {
    color: #1e293b;
  }

  body.lightmode .shola-progress-header,
  body.lightmode .shola-pb-header,
  body:not(.darkmode) .shola-progress-header,
  body:not(.darkmode) .shola-pb-header {
    color: #172554;
  }

  body.lightmode .shola-days-left,
  body.lightmode .shola-pb-days,
  body:not(.darkmode) .shola-days-left,
  body:not(.darkmode) .shola-pb-days {
    color: #a16207;
  }

  body.lightmode .shola-numbers,
  body.lightmode .shola-pb-numbers,
  body.lightmode .shola-pre-goal,
  body:not(.darkmode) .shola-numbers,
  body:not(.darkmode) .shola-pb-numbers,
  body:not(.darkmode) .shola-pre-goal {
    color: #475569;
    opacity: 1;
  }

  body.darkmode .shola-widget,
  body.darkmode .shola-lb-wrap,
  body.darkmode .shola-pb-wrap,
  body.darkmode .shola-modal-box {
    color: #dbe5f5;
  }

  body.darkmode .shola-progress-header,
  body.darkmode .shola-pb-header,
  body.darkmode .shola-pre-goal {
    color: #f1f5f9;
  }

  body.darkmode .shola-numbers,
  body.darkmode .shola-pb-numbers {
    color: #aebbd0;
    opacity: 1;
  }

  body.darkmode .shola-days-left,
  body.darkmode .shola-pb-days,
  body.darkmode .shola-score,
  body.darkmode .shola-lb-score {
    color: #fbbf24;
  }

  body.darkmode .shola-tab {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
  }

  body.darkmode .shola-tab.active {
    color: #fff;
    background: var(--account-primary);
    border-color: var(--account-primary);
  }

  body.darkmode .shola-row,
  body.darkmode .shola-lb-row {
    color: #dbe5f5;
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
  }

  &:has(body.darkmode) {
    --account-surface: #17191f;
    --account-raised: #1d2028;
    --account-line: rgba(255, 255, 255, 0.1);
  }

  @media (max-width: 600px) {
    #content {
      margin: 18px 0 32px;
      padding: 0 10px;
    }

    .bixbox {
      border-radius: 14px;
    }

    .releases {
      min-height: 88px;
      padding: 0 20px;
    }

    .page {
      padding: 18px 14px;
    }

    .pms-account-navigation ul {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pms-account-navigation li.pms-account-navigation-link,
    .pms-account-navigation-link--logout {
      margin: 0;
    }

    .pms-account-navigation li.pms-account-navigation-link a {
      width: 100%;
      box-sizing: border-box;
    }

    .pms-account-subscription-details-table td {
      padding: 12px 10px;
      font-size: 13px;
    }

    .pms-account-subscription-details-table td:first-child {
      width: 40%;
    }

    .pms-account-subscription-details-table__actions td:last-child {
      padding: 8px;
    }

    .pms-account-subscription-action-link {
      width: 100%;
      margin: 3px 0;
      box-sizing: border-box;
    }
  }
}

.listupd .utao.styletree .uta ul li  {
	a {
	max-width: 70%;
	border-radius:5px
}
}

.chapter-page {
	    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Old Edge/IE */
    user-select: none;
}