:root {
            --ink: #0B2545;
            --teal: #127c7cff;
            --teal-deep: #0a5757ff;
            --mint: #EAF6F4;
            --coral: #FF6F59;
            --paper: #FFFFFF;
            --line: #D7E4E1;
            --gray: #5B6B72;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            background: #DCE6E9;
            font-family: 'Inter', Arial, sans-serif;
            color: var(--ink);
        }

        .toolbar {
            max-width: 210mm;
            margin: 10px auto;
            display: flex;
            justify-content: flex-end;
        }

        .toolbar button {
            background: var(--teal-deep);
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
        }

        .toolbar button:hover {
            background: var(--ink);
        }

        .save-btn {
            background: var(--coral) !important;
        }

        .save-btn:hover {
            background: #e05943 !important;
        }

        .save-status {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 600;
            align-self: center;
            margin-right: 6px;
        }

        .save-status.ok {
            color: #1a7a4c;
        }

        .save-status.err {
            color: #c0392b;
        }

        .page {
            width: 210mm;
            min-height: 297mm;
            margin: 0 auto 30px auto;
            background: var(--paper);
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.20);
            display: flex;
            position: relative;
            overflow: hidden;
        }

        /* Sidebar */
        .sidebar {
            width: 62mm;
            background: #d7e7f796;
            padding: 0mm 0mm 0mm 0mm;
            display: flex;
            flex-direction: column;
            position: relative;
            align-items: center;
        }

        .sidebar-logo {
            width: 90%;
            /* border-radius: 8px;
            background-color: white; */
            padding: 20px 3px;
            object-fit: contain;
            /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); */
            text-align: center;
        }

        .sidebar h1 {
            font-family: 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 19px;
            line-height: 1.2;
            margin: 14px 0 4px 0;
            letter-spacing: 0.2px;
        }

        .sidebar .sub {
            font-family: 'Manrope', sans-serif;
            font-size: 11px;
            font-weight: 500;
            opacity: 0.85;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .sidebarFooter {
            margin-top: auto;
            text-align: center;
        }

        .address {

            font-family: 'Manrope', sans-serif;
            width: 100%;
            color: white;
            text-align: center;
            background-color: var(--teal-deep);
            padding-top: 10px;
        }

        .address strong {
            display: inline-block;
            text-align: center !important;
            text-transform: uppercase;
            display: block;
        }

        .addressInside {
            font-family: 'Manrope', sans-serif;
            text-align: justify !important;
            font-size: 13px;
            padding: 0px 5px 30px 15px;


        }

        /* Main */
        .main {
            flex: 1;
            padding: 12mm 8mm 8mm 2mm;
            display: flex;
            flex-direction: column;
        }

        .rx-mark {
            font-family: 'Manrope', sans-serif;
            font-weight: 800;
            font-size: 26px;
            color: var(--mint);
            -webkit-text-stroke: 1.5px var(--teal);
            line-height: 1;
            flex-shrink: 0;
        }

        .patient-strip {
            display: flex;
            gap: 0;
            border: 1px solid var(--line);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 14px;
        }

        .patient-strip .cell {
            flex: 1;
            padding: 8px 12px;
            border-right: 1px solid var(--line);
        }

        .patient-strip .cell:last-child {
            border-right: none;
        }

        .patient-strip label {
            display: block;
            font-family: 'Manrope', sans-serif;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: var(--teal-deep);
            margin-bottom: 3px;
        }

        .patient-strip .val {
            font-size: 13px;
            font-weight: 500;
            min-height: 16px;
        }

        .val-select {
            font-family: 'Inter', Arial, sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            border: none;
            background: transparent;
            padding: 0;
            width: 100%;
            cursor: pointer;
        }

        .val-select:focus {
            outline: none;
        }


        @media print {
            .val-select {
                appearance: none;
                -webkit-appearance: none;
            }
        }

        .body-grid {
            display: flex;
            gap: 10px;
            flex: 1;
            width: 100%;
        }

        .col-notes {
            width: 90%;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .note-block {
            border-radius: 10px;
            padding: 10px 12px;
        }

        .note-block select {
            border: none;
            background-color: transparent;
            font-family: 'Inter', Arial, sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
        }

        .note-block .k {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--teal-deep);
            margin-bottom: 4px;
        }

        .note-block .k svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        .note-block .v {
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
        }

        .tooth-chart-wrap {
            background: none;
            border-radius: 10px;
            padding: 10px 5px 6px 5px;
            text-align: center;
        }

        .tooth-chart-wrap .k {
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 10px;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: var(--teal-deep);
            margin-bottom: 2px;
        }

        .tooth-chart-wrap svg {
            width: 175px;
            height: auto;
        }

        .col-rx {
            width: auto;
            border-left: 1.5px dashed var(--line);
            padding-left: 16px;
            display: flex;
            flex-direction: column;
        }

        .rx-heading {
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--gray);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .rx-heading::after {
            content: "";
            flex: 1;
            height: 1px;
            background: var(--line);
        }

        #rxList select{
            border: none;
            outline: none;
        }

        .rx-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--line);
        }

        .rx-item:last-of-type {
            border-bottom: none;
        }

        .rx-num {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--ink);
            color: #fff;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .rx-content {
            flex: 1;
        }

        .rx-drug {
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 15px;
            color: var(--ink);
        }

        .rx-meta {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-top: 6px;
            flex-wrap: wrap;
        }

        .dose-tablet {
            display: flex;
        }

        .dose-syrup {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .syrup-amount {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 11px;
            font-weight: 600;
            color: var(--ink);
            background: var(--mint);
            border: none;
            border-radius: 8px;
            padding: 6px 9px;
            width: 82px;
        }

        .syrup-amount:focus {
            outline: 1.5px solid var(--teal);
        }

        .syrup-frequency {
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 500;
            color: var(--ink);
            background: var(--mint);
            border: none;
            border-radius: 8px;
            padding: 6px 9px;
            cursor: pointer;
        }

        .syrup-frequency:focus {
            outline: 1.5px solid var(--teal);
        }

        .custom-type-toggle {
            display: flex;
            gap: 6px;
            margin-top: 6px;
        }

        .type-btn {
            font-family: 'Manrope', sans-serif;
            font-size: 10.5px;
            font-weight: 700;
            border: 1.4px solid var(--line);
            background: #fff;
            color: var(--gray);
            border-radius: 20px;
            padding: 4px 10px;
            cursor: pointer;
        }

        .type-btn.active {
            background: var(--teal);
            border-color: var(--teal);
            color: #fff;
        }

        .dose-schedule {
            display: flex;
            align-items: center;
            gap: 5px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 10px;
            color: var(--gray);
        }

        .dot-row {
            display: flex;
            gap: 6px;
        }

        .dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1.5px solid var(--teal);
            cursor: pointer;
            background: #fff;
            transition: background .12s ease, transform .12s ease;
            position: relative;
        }

        .dot:hover {
            transform: scale(1.12);
        }

        .dot.filled {
            background: var(--teal);
        }

        .dot-labels {
            display: flex;
            gap: 6px;
            font-family: 'IBM Plex Mono', monospace;
            font-size: 7.5px;
            color: var(--gray);
            text-align: center;
            margin-top: 2px;
        }

        .dot-labels span {
            width: 16px;
        }

        .dose-pattern {
            font-weight: 700;
            color: var(--ink);
            letter-spacing: 0.5px;
        }
        .dose-pattern select {
            font-size: 12px;
        }

        .drug-select {
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--ink);
            border: none;
            border-bottom: 1.5px dashed var(--line);
            background: transparent;
            padding: 2px 4px 3px 0;
            max-width: 100%;
            cursor: pointer;
        }

        .drug-select:focus {
            outline: none;
            border-bottom-color: var(--teal);
        }

        .drug-custom-input {
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 12px;
            color: var(--ink);
            border: none;
            border-bottom: 1.5px solid var(--teal);
            background: transparent;
            padding: 2px 4px 3px 0;
            width: 100%;
            margin-top: 4px;
            display: none;
        }

        .drug-custom-input.show {
            display: block;
        }

        .duration-input {
            font-family: 'IBM Plex Mono', monospace;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--teal-deep);
            background: var(--mint);
            border: none;
            border-radius: 20px;
            padding: 3px 9px;
            width: 80px;
            text-align: center;
        }

        .duration-input:focus {
            outline: 1.5px solid var(--teal);
        }

        .remove-med-btn {
            border: none;
            background: transparent;
            color: var(--gray);
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 6px;
            margin-left: auto;
            flex-shrink: 0;
        }

        .remove-med-btn:hover {
            background: #FBE7E4;
            color: var(--coral);
        }

        .rx-item {
            align-items: flex-start;
        }

        .rx-drug-row {
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }

        .rx-drug-row .drug-wrap {
            flex: 1;
            min-width: 0;
        }

        .add-med-btn {
            margin-top: 12px;
            align-self: flex-start;
            background: var(--mint);
            color: var(--teal-deep);
            border: 1.5px dashed var(--teal);
            border-radius: 20px;
            padding: 7px 16px;
            font-family: 'Manrope', sans-serif;
            font-weight: 700;
            font-size: 12px;
            cursor: pointer;
        }

        .add-med-btn:hover {
            background: var(--teal);
            color: #fff;
        }

        @media print {

            .add-med-btn,
            .remove-med-btn {
                display: none !important;
            }

            .drug-select {
                appearance: none;
                border-bottom: none;
            }

            .duration-input {
                background: var(--mint);
            }

            input[type="date"]::-webkit-calendar-picker-indicator {
                display: none !important;
            }

            /* Select arrow */
            select {
                appearance: none !important;
                -webkit-appearance: none !important;
                -moz-appearance: none !important;
                background-image: none !important;
                background-color: none !important;
                border: none !important;
            }

            select::-ms-expand {
                display: none !important;
            }
        }

        .duration-tag {
            background: var(--mint);
            color: var(--teal-deep);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 10.5px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 20px;
        }

        .rx-note {
            font-family: 'Noto Sans Bengali', 'Inter', sans-serif;
            font-size: 12.5px;
            font-weight: 600;
            color: var(--coral);
            margin-top: 4px;
            min-height: 16px;
        }

        .rx-note:empty::before {
            content: attr(data-placeholder);
            color: #b7c2c0;
            font-weight: 500;
            font-style: italic;
        }

        @media print {
            .rx-note:empty {
                display: none;
            }
        }

        .footer-q {
            text-align: center;
            margin-top: 10px;
        }

        .footer-quote {
            margin-top: auto;
            color: #014428;
            text-align: center;
            font-family: 'Noto Sans Bengali', sans-serif;
            font-weight: 600;
            font-size: 13px;
            background-color: #d5f8ea;
            border: #014428 1px dotted;
            border-radius: 7px;
            display: inline-block;
            padding: 5px;
        }

        .sign-area {
            display: flex;
            justify-content: flex-end;
            margin-top: 14px;
            flex-direction: row;
            width: auto;
        }

        .sign-box {
            width: 150px;
            text-align: center;
        }

        .sign-box .line {
            border-top: 1.4px solid var(--ink);
            margin-bottom: 4px;
        }

        .sign-box .cap {
            font-family: 'Manrope', sans-serif;
            font-size: 9.5px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--gray);
        }

        .aftercare {
            margin-top: 16px;
            background: var(--mint);
            border-radius: 10px;
            padding: 12px 16px;
        }

        .aftercare .title {
            font-family: 'Noto Sans Bengali', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--teal-deep);
            margin-bottom: 6px;
            text-decoration: underline;
        }

        .aftercare ul {
            margin: 0;
            padding-left: 18px;
            font-family: 'Noto Sans Bengali', sans-serif;
            font-size: 12px;
            line-height: 1.65;
            color: var(--ink);
        }

        [contenteditable="true"] {
            outline: none;
            border-radius: 4px;
        }

        [contenteditable="true"]:hover {
            background: rgba(18, 124, 124, 0.08);
        }

        [contenteditable="true"]:focus {
            background: rgba(18, 124, 124, 0.14);
        }

        @media print {
            body {
                background: var(--paper);
            }

            .toolbar {
                display: none;
            }

            .page {
                box-shadow: none;
                margin: 0;
            }

            @page {
                size: A4;
                margin: 0;
            }
        }