html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        font-family: Arial, sans-serif;
        background: #222;
        color: #fff;
        text-align: center;
    }

    body {
        overflow: hidden;
    }

    #toolbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #111;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        box-sizing: border-box;
        min-height: 58px;
        padding-right: 58px;
    }

    button {
        padding: 8px 12px;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        border: 0;
        border-radius: 4px;
        background: #444;
        color: #fff;
        min-width: 38px;
    }

    button:hover {
        background: #666;
    }

    button:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    select {
        padding: 7px;
        font-size: 15px;
        max-width: 160px;
    }

    #pageInfo {
        min-width: 70px;
        display: inline-block;
        font-size: 16px;
    }

    #zoomSlider {
        width: 130px;
    }

    #zoomInfo {
        min-width: 48px;
        display: inline-block;
        text-align: left;
        cursor: default;
    }

    #viewModeBtn,
    #coverModeBtn,
    #fitPageBtn,
    #fitWidthBtn {
        font-weight: bold;
    }

    #fitPageBtn.fit-active,
    #fitWidthBtn.fit-active,
    #coverModeBtn.cover-active {
        background: #666;
    }

    #fullscreenBtn {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1001;
        min-width: 38px;
        width: 38px;
        height: 38px;
        padding: 0;
        font-size: 18px;
        line-height: 38px;
    }

    #viewer {
        position: absolute;
        top: 58px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 15px;
        box-sizing: border-box;
        overflow: auto;
        scroll-behavior: smooth;

        /*
            Allows normal browser gestures, including native pinch zoom.
            Single-finger swipe is still handled by JavaScript.
        */
        touch-action: pan-y pinch-zoom;

        user-select: none;
        -webkit-user-select: none;
        -webkit-overflow-scrolling: touch;
    }

    /*
        In manga mode the lower page slider panel is fixed over the screen.
        When it is visible, shorten the reading viewport so fit-height pages
        and the horizontal strip finish above the controls rather than being
        hidden underneath them. JavaScript updates the variable from the
        actual rendered toolbar height so wrapping/mobile layouts are handled.
    */
    body.manga-horizontal:not(.page-slider-hidden) #viewer {
        bottom: var(--manga-bottom-toolbar-clearance, 96px);
    }

    #spreadWrapper {
        display: inline-flex;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        transform-origin: top center;
        transition: transform 0.25s ease;
    }

    #spreadWrapper.single-page {
        display: inline-block;
    }

    /*
        Continuous strip mode: by default all pages/spreads are laid out in one
        scrollable vertical column. When URL manga mode is active, JavaScript
        adds body.manga-horizontal and the same rows become a horizontal strip.
        The original #spreadWrapper is kept for compatibility with transition code
        but is hidden from view while this continuous strip is active.
    */
    #spreadWrapper {
        display: none !important;
    }

    #continuousWrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        transform-origin: top center;
        padding-bottom: 30px;
    }

    body.manga-horizontal #viewer {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x pinch-zoom;
    }

    body.manga-horizontal #continuousWrapper {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        width: max-content;
        max-width: none;
        min-height: 100%;
        padding-right: 30px;
        padding-bottom: 0;
    }

    body.manga-horizontal .continuousRow {
        flex: 0 0 auto;
        max-width: none;
    }

    body.manga-horizontal .continuousRow.single-page-row {
        display: inline-flex;
    }

    body.manga-horizontal.mobile-portrait-single .continuousRow {
        justify-content: center;
    }

    body.manga-horizontal.mobile-portrait-single .continuousRow.double-page-row {
        display: inline-flex;
    }

    body.manga-horizontal.mobile-portrait-single .continuousRow.double-page-row .comicPage + .comicPage {
        display: none !important;
    }

    .continuousRow {
        display: inline-flex;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        max-width: 100%;
    }

    .continuousRow.single-page-row {
        display: block;
    }

    .continuousRow .comicPage {
        display: block;
    }

    body.two-page .continuousRow.double-page-row .comicPage {
        max-width: calc(50vw - 40px);
    }

    body.single-page .continuousRow .comicPage {
        max-width: 100%;
    }

    /*
        Exact Fit Height mode for the continuous strip.
        The image height is controlled directly so the current page height
        fits the browser window and the width reduces proportionally.
    */
    body.fit-height-exact .continuousRow .comicPage {
        height: var(--fit-height-page-height, auto) !important;
        width: auto !important;
        max-width: none !important;
    }

    /*
        Exact Fit Width mode for the continuous strip.
        JavaScript sets the image widths that form the fitted-width baseline;
        the zoom slider then scales smoothly from that baseline.
    */
    body.fit-width-exact .continuousRow,
    body.fit-width-exact .continuousRow .comicPage {
        max-width: none !important;
    }

    body.fit-width-exact .continuousRow .comicPage {
        height: auto !important;
    }

    .comicPage {
        display: block;
        max-width: 100%;
        height: auto;
        box-shadow: 0 0 12px rgba(0,0,0,0.6);
        background: #fff;
        -webkit-user-drag: none;
        user-drag: none;
    }

    #page2 {
        display: none;
    }

    body.two-page #page1,
    body.two-page #page2 {
        max-width: calc(50vw - 40px);
    }

    body.two-page #page2 {
        display: block;
    }

    body.single-page #page2 {
        display: none;
    }

    .page-transition-layer {
        position: absolute;
        inset: 0;
        z-index: 800;
        padding: 15px;
        box-sizing: border-box;
        overflow: hidden;
        pointer-events: none;
        background: #222;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .page-transition-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .page-transition-stack.horizontal-transition {
        flex-direction: row;
        align-items: flex-start;
    }

    /*
        Mobile swipe transitions must always look like a simple one-page
        horizontal strip, even if a two-page/spread mode has been selected
        or briefly restored. These rules prevent the global two-page CSS
        from leaking into the swipe animation layer.
    */
    .page-transition-layer.mobile-single-strip {
        align-items: flex-start;
    }

    .page-transition-layer.mobile-single-strip .page-transition-stack {
        gap: 0;
        align-items: flex-start;
    }

    .page-transition-layer.mobile-single-strip .transitionSpreadWrapper {
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: 100%;
        transform: none !important;
    }

    .page-transition-layer.mobile-single-strip .transitionSpreadWrapper .comicPage {
        display: block !important;
        height: var(--mobile-swipe-page-height, auto) !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        flex: 0 0 auto;
    }

    .page-transition-layer.mobile-single-strip .transitionSpreadWrapper .comicPage + .comicPage {
        display: none !important;
    }

    .transitionSpreadWrapper {
        display: inline-flex;
        justify-content: center;
        align-items: flex-start;
        gap: 12px;
        transform-origin: top center;
    }

    .transitionSpreadWrapper.single-page {
        display: inline-block;
    }

    body.two-page .transitionSpreadWrapper .comicPage {
        max-width: calc(50vw - 40px);
    }

    body.single-page .transitionSpreadWrapper .comicPage {
        max-width: 100%;
    }



    /*
        In manga horizontal mode, keep the optional side page-turn panels as
        a visible, centred 25% side hit area. This avoids full-height side
        panels interfering with top-toolbar and lower-toolbar/page areas.
    */
    body.manga-horizontal .left-edge-panel,
    body.manga-horizontal .right-edge-panel,
    body.manga-horizontal.toolbar-hidden .left-edge-panel,
    body.manga-horizontal.toolbar-hidden .right-edge-panel {
        top: 37.5vh;
        height: 25vh;
    }

    body.manga-horizontal .settings-button {
        right: 25px;
    }

    body.manga-horizontal .help-button {
        left: 25px;
    }

    /*
        When manga mode is opened with &sidepanels in the URL, force the
        optional side page panels to be visible. This overrides any earlier
        transparent/invisible manga-mode styling while keeping the 25% centred
        hit area.
    */
    body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .left-edge-panel,
    body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .right-edge-panel {
        display: block !important;
        opacity: 0.3 !important;
        visibility: visible !important;
    }

    body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .left-edge-button,
    body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .right-edge-button {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #000000 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    @media (max-width: 700px) {
        .page-transition-layer {
            padding: 15px;
        }

        .page-transition-stack {
            gap: 12px;
        }

        .transitionSpreadWrapper {
            gap: 8px;
        }

        body.two-page .transitionSpreadWrapper .comicPage {
            max-width: calc(50vw - 28px);
        }
    }


    .settings-button {
        position: fixed;
        bottom: 20px;
        right: 40px;
        z-index: 2000;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 50%;
        font-size: 20px;
        line-height: 38px;
        background: #444;
        color: #fff;
        box-shadow: 0 0 8px rgba(0,0,0,0.45);
    }

    .settings-button:hover {
        background: #666;
    }

    .settings-panel {
        position: fixed;
        bottom: 54px;
        right: 40px;
        z-index: 2000;
        min-width: 180px;
        padding: 12px;
        border-radius: 6px;
        background: rgba(17, 17, 17, 0.96);
        color: #fff;
        box-shadow: 0 0 12px rgba(0,0,0,0.65);
        text-align: left;
        font-size: 14px;
    }

    .settings-panel[hidden] {
        display: none;
    }

    .settings-panel label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        white-space: nowrap;
    }

    .settings-panel input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    .page-slider-panel {
        position: fixed;
        left: 50%;
        /* 10px higher than the original 6px footer position. */
        bottom: 16px !important;
        z-index: 12000;
        width: min(520px, calc(100vw - 140px));
        min-width: 220px;
        padding: 5px 10px 9px;
        border-radius: 6px;
        background: rgba(17, 17, 17, 0.88);
        color: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        transform: translateX(-50%);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 13px;
    }

    .page-slider-panel,
    .page-slider-panel * {
        touch-action: manipulation;
    }

    .page-slider-panel input[type="range"] {
        touch-action: none;
    }

    .page-slider-row {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .page-slider-panel input[type="range"] {
        flex: 1;
        min-width: 120px;
    }

    .page-slider-panel span {
        min-width: 68px;
        text-align: right;
        white-space: nowrap;
    }

    .bottom-fullscreen-button {
        width: 28px;
        min-width: 28px;
        height: 28px;
        padding: 0;
        border: none;
        border-radius: 4px;
        background: #444;
        color: #fff;
        font-size: 16px;
        line-height: 28px;
        cursor: pointer;
    }

    .bottom-control-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: auto auto 1fr auto auto;
        align-items: center;
        column-gap: 12px;
        padding-top: 0;
        max-width: 310px;
        margin: 0 auto;
    }

    .bottom-control-button {
        min-height: 24px;
        padding: 0;
        border: none;
        background: transparent !important;
        color: #fff;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        border-radius: 0;
        box-shadow: none;
        outline: none;
    }

    .bottom-control-symbol {
        display: block;
        font-size: 29px;
        line-height: 22px;
        font-weight: 300;
    }

    .bottom-control-spacer {
        min-width: 20px;
    }

    .bottom-zoom-symbol {
        width: 24px;
        min-width: 24px;
        height: 24px;
        line-height: 22px;
        text-align: center;
        font-weight: normal;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .bottom-zoom-symbol .fa {
        display: inline-block;
        color: #fff !important;
        font-family: FontAwesome !important;
        font-size: 21px;
        line-height: 22px;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .bottom-zoom-fallback {
        display: none;
        color: #fff;
        font-size: 21px;
        line-height: 22px;
    }

    body.fontawesome-missing .bottom-zoom-symbol .fa {
        display: none;
    }

    body.fontawesome-missing .bottom-zoom-fallback {
        display: inline-block;
    }

    #bottomZoomOutBtn {
        margin-right: -5px;
    }

    .bottom-control-button:hover,
    .bottom-control-button:focus,
    .bottom-control-button:focus-visible,
    .bottom-control-button:active {
        background: transparent !important;
        color: #dfefff;
        box-shadow: none;
        outline: none;
    }

    .bottom-fullscreen-button:hover {
        background: #666;
    }

    .bottom-control-button:disabled {
        opacity: 0.35;
        cursor: default;
    }

    body.page-slider-hidden .page-slider-panel {
        display: none;
    }


    .help-button {
        position: fixed;
        bottom: 20px;
        left: 40px;
        z-index: 2000;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border-radius: 50%;
        font-size: 22px;
        font-weight: bold;
        line-height: 38px;
        background: #444;
        color: #fff;
        box-shadow: 0 0 8px rgba(0,0,0,0.45);
    }

    .help-button:hover {
        background: #666;
    }

    .help-panel {
        position: fixed;
        bottom: 54px;
        left: 40px;
        z-index: 2000;
        width: min(360px, calc(100vw - 20px));
        padding: 12px 14px;
        border-radius: 6px;
        background: rgba(17, 17, 17, 0.96);
        color: #fff;
        box-shadow: 0 0 12px rgba(0,0,0,0.65);
        text-align: left;
        font-size: 14px;
        line-height: 1.45;
        box-sizing: border-box;
    }

    .help-panel[hidden] {
        display: none;
    }

    .help-panel p {
        margin: 0 0 10px 0;
    }

    .help-panel p:last-child {
        margin-bottom: 0;
    }


    .page-number-overlay {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2500;
        min-width: 210px;
        max-width: min(420px, calc(100vw - 40px));
        padding: 18px 22px;
        border-radius: 10px;
        background: rgba(17, 17, 17, 0.88);
        color: #fff;
        box-shadow: 0 0 16px rgba(0,0,0,0.7);
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }

    .page-number-overlay[hidden] {
        display: none;
    }

    .page-number-overlay .page-number-overlay-main {
        display: block;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .page-number-overlay .page-number-overlay-sub {
        display: block;
        font-size: 14px;
        line-height: 1.35;
        opacity: 0.95;
    }


    .page-number-overlay .page-metadata {
        display: block;
        margin: 12px 0 10px 0;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.22);
        text-align: left;
        font-size: 13px;
        line-height: 1.35;
        max-height: min(42vh, 360px);
        overflow: auto;
    }

    .page-number-overlay .page-metadata[hidden] {
        display: none;
    }

    .page-number-overlay .metadata-row {
        display: grid;
        grid-template-columns: minmax(90px, 34%) 1fr;
        gap: 8px;
        margin: 4px 0;
    }

    .page-number-overlay .metadata-label {
        font-weight: bold;
        opacity: 0.85;
    }

    .page-number-overlay .metadata-value {
        overflow-wrap: anywhere;
    }


    .swipe-instruction-overlay {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2600;
        max-width: min(420px, calc(100vw - 40px));
        padding: 14px 18px;
        border-radius: 10px;
        background: rgba(17, 17, 17, 0.88);
        color: #fff;
        box-shadow: 0 0 16px rgba(0,0,0,0.7);
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        line-height: 1.35;
        box-sizing: border-box;
        pointer-events: none;
        opacity: 1;
        transition: opacity 180ms ease;
    }

    .swipe-instruction-overlay[hidden] {
        display: none;
    }

    .swipe-instruction-overlay.swipe-instruction-fading {
        opacity: 0;
    }

    body.toolbar-hidden #toolbar {
        display: none;
    }

    body.toolbar-hidden #viewer {
        top: 0;
    }

    body.edge-panels-hidden .left-edge-panel,
    body.edge-panels-hidden .right-edge-panel {
        display: none;
    }

    body.toolbar-hidden .left-edge-panel,
    body.toolbar-hidden .right-edge-panel {
        top: 0;
        height: 100vh;
    }

    @media (max-width: 700px) {
        #toolbar {
            gap: 6px;
            padding: 8px 52px 8px 8px;
        }

        button {
            padding: 7px 9px;
            font-size: 15px;
            min-width: 34px;
        }

        #pageInfo {
            min-width: 58px;
            font-size: 14px;
        }

        /* On mobile, keep the toolbar compact: no first/last buttons and no zoom slider. */
        #firstBtn,
        #lastBtn,
        #zoomSlider {
            display: none;
        }

        select {
            max-width: 110px;
        }

        #viewer {
            top: 96px;
        }

        #spreadWrapper {
            gap: 8px;
        }

        #continuousWrapper {
            gap: 12px;
        }

        .continuousRow {
            gap: 8px;
        }

        body.two-page .continuousRow.double-page-row .comicPage {
            max-width: calc(50vw - 28px);
        }

        body.two-page #page1,
        body.two-page #page2 {
            max-width: calc(50vw - 28px);
        }
    }

	#overlayfooter{
			position:fixed;
			padding:0;
			margin:0;
			z-index: 1000;
			bottom: 50px;
			left:0;
			width: 100%;
			height: 20px;
			text-align: center;
			font-size: 20pt;
			font-family:arial, verdana;
			color: #0000ff;
			opacity: 0.3;
		}
	#overlayheader{
			position:fixed;
			padding:0;
			margin:0;
			z-index: 1000;
			top: 75px;
			left:0;
			width: 100%;
			height: 20px;
			text-align: center;
			font-size: 20pt;
			font-family:arial, verdana;
			color: #0000ff;
			opacity: 0.3;
		}
	#helppage{
			width: 100%;
			height:auto;
			position: fixed;
			margin-top: 10px;
			padding: 0;
			top: 6%;
			text-align: center;
			opacity: 1;
			border: 2px black;
			object-fit: contain;
		}
	#overlaymiddleright
	{
		position:fixed;
		padding:0;
		margin:0;
		z-index: 1000;
		top: 45%;
		right:10px;
		opacity: 0.35;
	}
	#overlaymiddleleft
	{
		position:fixed;
		padding:0;
		margin:0;
		z-index: 1000;
		top: 45%;
		left:10px;
		opacity: 0.35;
	}
	#overlaysample
	{
		position:fixed;
		padding:0;
		margin:0;
		left:0;
		width: 100%;
		z-index: 1000;
		top: 40%;
		text-align: center;
		font-size: 2em;
		font-family:arial, verdana;
	  -webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	  -ms-transform: rotate(45deg);
	  -o-transform: rotate(45deg);
	  transform: rotate(45deg);
		color: #222222;
		opacity: 0.3;
	}
	.left-edge-panel {
		position: fixed;
		left: 0;
		top: 15vh;
		opacity: 0.35;
		width: max(36px, 3vw);
		height: 70vh;

		z-index: 9999;

		margin: 0;
		padding: 0;
	}

	.left-edge-button {
		width: 100%;
		height: 100%;

		border: none;
		padding: 0;
		margin: 0;

		background: #333;
		color: #000;
		cursor: pointer;

		writing-mode: vertical-rl;
		text-orientation: mixed;

		display: flex;
		align-items: center;
		justify-content: center;
	}
	.right-edge-panel {
		position: fixed;
		left: calc(100vw - 55px);
		top: 15vh;
		opacity: 0.35;
		width: max(36px, 3vw);
		height:70vh;

		z-index: 9999;

		margin: 0;
		padding: 0;
	}

	.right-edge-button {
		width: 100%;
		height: 100%;

		border: none;
		padding: 0;
		margin: 0;

		background: #333;
		color: #000;
		cursor: pointer;

		writing-mode: vertical-rl;
		text-orientation: mixed;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	/*
		Final mobile-safe manga side-panel override.
		This appears after the base side-panel CSS so it wins over the
		generic toolbar-hidden and mobile rules. When &sidepanels is present
		in manga mode, keep the panels visible on mobile as well as desktop.
	*/
	body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .left-edge-panel,
	body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .right-edge-panel {
		display: block !important;
		visibility: visible !important;
		opacity: 0.3 !important;
		top: 37.5vh !important;
		height: 25vh !important;
		width: max(36px, 3vw) !important;
		z-index: 13000 !important;
		pointer-events: auto !important;
	}

	body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .left-edge-panel {
		left: 0 !important;
		right: auto !important;
	}

	body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .right-edge-panel {
		right: 0 !important;
		left: auto !important;
	}

	body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .left-edge-button,
	body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .right-edge-button {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		height: 100% !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		pointer-events: auto !important;
	}

	@media (max-width: 700px), (pointer: coarse) {
		body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .left-edge-panel,
		body.manga-horizontal.sidepanels-url-visible:not(.edge-panels-hidden) .right-edge-panel {
			display: block !important;
			visibility: visible !important;
			opacity: 0.3 !important;
			top: 37.5vh !important;
			height: 25vh !important;
			width: 40px !important;
		}
	}

@media print {
    body{visibility: hidden; display: none}
}