@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
/* CoreBIQ — shared application stylesheet */
/* Centralized theme, typography, colors and extracted page styles. */

:root {
  --corebiq-font: Inter, "Google Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --corebiq-bg: #f7f8fa;
  --corebiq-surface: #ffffff;
  --corebiq-text: #202124;
  --corebiq-muted: #5f6368;
  --corebiq-border: #dadce0;
  --corebiq-primary: #1a73e8;
  --corebiq-primary-dark: #1557b0;
  --corebiq-radius: 10px;
}

html, body { font-family: var(--corebiq-font); }

.cb-inline-0001 { font-size: 32px; color: var(--primary); }
.cb-inline-0002 { font-size: 18px; }
.cb-inline-0003 { font-size: 16px; vertical-align: middle; color: var(--text-muted); }
.cb-inline-0004 { width:28px;height:28px;border:0 }
.cb-inline-0005 { font-size:17px }
.cb-inline-0006 { font-size:12px;color:var(--muted) }
.cb-inline-0007 { width:36px;height:36px }
.cb-inline-0008 { display:none }
.cb-inline-0009 { width:auto;height:36px }
.cb-inline-0010 { color:var(--danger) }
.cb-inline-0011 { margin-top:10px }
.cb-inline-0012 { font-size:12px;margin-top:5px;font-weight:700 }
.cb-inline-0013 { max-width:620px }
.cb-inline-0014 { margin:0 0 4px }
.cb-inline-0015 { margin-bottom:12px }
.cb-inline-0016 { margin-top:12px }
.cb-inline-0017 { padding:0 15px 15px }
.cb-inline-0018 { margin: 0; }
.cb-inline-0019 { margin-left: auto; }
.cb-inline-0020 { color: var(--primary); }
.cb-inline-0021 { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; }
.cb-inline-0022 { color: var(--primary); margin: 0; }
.cb-inline-0023 { border:none; padding:4px; }
.cb-inline-0024 { margin-left: 8px; font-weight: 700; }
.cb-inline-0025 { display: flex; gap: 8px; }
.cb-inline-0026 { padding: 0 16px; }
.cb-inline-0027 { display: flex; gap: 16px; }
.cb-inline-0028 { flex: 1; }
.cb-inline-0029 { grid-column: 1 / -1; }
.cb-inline-0030 { display:none; }
.cb-inline-0031 { color: var(--danger); }
.cb-inline-0032 { border-color: var(--danger); }
.cb-inline-0033 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--bg); padding: 16px; border-radius: 12px; margin-top: 8px; }
.cb-inline-0034 { font-weight: 700; color: var(--danger); background: transparent; border: none; }
.cb-inline-0035 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 24px; }
.cb-inline-0036 { background: transparent; border: none; font-weight: 600; color: var(--secondary); padding-left: 0; width: 300px; }
.cb-inline-0037 { margin-right: 12px; }
.cb-inline-0038 { margin: 0; color: var(--primary); }
.cb-inline-0039 { padding: 4px 8px; border: none; }
.cb-inline-0040 { margin-bottom: 4px; font-size: 18px; }
.cb-inline-0041 { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.cb-inline-0042 { background: #FAFAFA; border: 1px solid var(--border); padding: 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; min-height: 150px; }
.cb-inline-0043 { margin-top: 20px; text-align: right; }
.cb-inline-0044 { margin: 0 0 12px 0; color: var(--text-main); font-size: 14px; }
.cb-inline-0045 { margin:0; }
.cb-inline-0046 { display:flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #FAFAFA; padding: 16px; border-radius: 12px; border: 1px solid var(--border); width: 100%; }
.cb-inline-0047 { display:flex; align-items:center; gap:6px; }
.cb-inline-0048 { width: auto; padding: 8px; }
.cb-inline-0049 { font-size: 12px; color: var(--text-muted); }
.cb-inline-0050 { padding: 8px 12px; }
.cb-inline-0051 { width: auto; padding: 8px; display: none; }
.cb-inline-0052 { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; flex: 1; min-width: 150px; }
.cb-inline-0053 { font-size: 18px; color: var(--text-muted); }
.cb-inline-0054 { border: none; background: transparent; outline: none; font-size: 13px; width: 100%; margin-left: 8px; padding: 8px 0; }
.cb-inline-0055 { padding: 8px; }
.cb-inline-0056 { background: var(--primary-light); padding: 16px; border-radius: 12px; align-items: center; gap: 12px; }
.cb-inline-0057 { color: var(--primary); font-size: 14px; }
.cb-inline-0058 { width: auto; }
.cb-inline-0059 { text-align: right; }
.cb-inline-0060 { color: var(--primary); margin: 0 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cb-inline-0061 { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-inline-0062 { padding: 14px 16px; white-space: nowrap; }
.cb-inline-0063 { flex: 1; min-width: 200px; }
.cb-inline-0064 { padding: 14px 16px; }
.cb-inline-0065 { color: var(--primary); margin: 24px 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cb-inline-0066 { font-weight: 700; color: var(--danger); background: transparent; border: none; padding-left: 0; }
.cb-inline-0067 { text-align: right; margin-top: 24px; }
.cb-inline-0068 { margin-right: 12px; padding: 14px 24px; }
.cb-inline-0069 { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.cb-inline-0070 { border-color: var(--danger); color: var(--danger); padding: 6px 12px; font-size: 12px; }
.cb-inline-0071 { font-size: 14px; }
.cb-inline-0072 { border-color: var(--primary); color: var(--primary); padding: 6px 12px; font-size: 12px; }
.cb-inline-0073 { padding: 6px 12px; font-size: 12px; }
.cb-inline-0074 { font-size: 14px; color: var(--primary); }
.cb-inline-0075 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #FAFAFA; padding: 12px; border-radius: 8px; border: 1px solid var(--border); width: 100%; }
.cb-inline-0076 { display: flex; align-items: center; gap: 6px; }
.cb-inline-0077 { padding: 8px; font-size: 12px; width: auto; }
.cb-inline-0078 { padding: 8px 12px; font-size: 12px; }
.cb-inline-0079 { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; flex: 1; min-width: 200px; }
.cb-inline-0080 { font-size: 16px; color: var(--text-muted); }
.cb-inline-0081 { border: none; background: transparent; outline: none; font-size: 12px; width: 100%; margin-left: 6px; }
.cb-inline-0082 { padding: 8px; font-size: 12px; }
.cb-inline-0083 { font-size: 16px; }
.cb-inline-0084 { background: #fef5e8; padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.cb-inline-0085 { width: auto; padding: 8px 12px; }
.cb-inline-0086 { padding: 8px 16px; }
.cb-inline-0087 { padding: 8px 16px; border: none; background: transparent; }
.cb-inline-0088 { transform: scale(1.2); }
.cb-inline-0089 { margin-bottom: 16px; }
.cb-inline-0090 { border-color: var(--primary); background: var(--primary-light); }
.cb-inline-0091 { display: flex; gap: 12px; flex-wrap: wrap; }
.cb-inline-0092 { flex-direction: row; flex-wrap: wrap; }
.cb-inline-0093 { padding: 6px 12px; font-size: 12px; color: var(--success); border-color: rgba(16, 185, 129, 0.5); }
.cb-inline-0094 { padding: 8px 16px; font-size: 12px; background: var(--primary); color: white; border: none; }
.cb-inline-0095 { padding: 16px 20px; font-weight: 700; color: var(--primary); font-size: 16px; display: none; }
.cb-inline-0096 { padding: 0 20px 20px 20px; }
.cb-inline-0097 { text-align: center; padding: 30px; color: var(--text-muted); font-size: 13px; }
.cb-inline-0098 { text-align:center; padding: 20px; color: var(--text-muted); }
.cb-inline-0099 { font-size: 14px; color: var(--success); }
.cb-inline-0100 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff; width: 100%; }
.cb-inline-0101 { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; flex: 1; min-width: 150px; }
.cb-inline-0102 { text-align: right; margin-top: 24px; display: flex; justify-content: flex-end; gap: 12px; }
.cb-inline-0103 { font-size: 28px; color: var(--primary); }
.cb-inline-0104 { margin: 0 0 8px 0; color: var(--text-main); }
.cb-inline-0105 { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.cb-inline-0106 { display: none; }
.cb-inline-0107 { color: var(--success); }
.cb-inline-0108 { font-weight: bold; }
.cb-inline-0109 { grid-column: span 2; }
.cb-inline-0110 { background: var(--bg); padding: 16px; border-radius: 12px; }
.cb-inline-0111 { color: var(--success); font-weight: 700; }
.cb-inline-0112 { color: var(--danger); font-weight: 700; }
.cb-inline-0113 { background: var(--primary-light); border-color: #BFDBFE; }
.cb-inline-0114 { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
.cb-inline-0115 { display: flex; gap: 8px; align-items: center; }
.cb-inline-0116 { display: none; margin-top: 24px; text-align: right; }
.cb-inline-0117 { background: #FAFAFA; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; display: flex; align-items: center; gap: 6px; }
.cb-inline-0118 { border: none; background: transparent; outline: none; font-size: 13px; width: 130px; }
.cb-inline-0119 { color: var(--text-header); }
.cb-inline-0120 { background: var(--btn-num); border-color: var(--btn-border); box-shadow: var(--btn-shadow); }
.cb-inline-0121 { color: var(--btn-num-text); }
.cb-inline-0122 { background: var(--menu-bg); color: var(--menu-text); border-color: var(--menu-border); }
.cb-inline-0123 { border-color: var(--menu-border); }
.cb-inline-0124 { color: var(--menu-text); }
.cb-inline-0125 { color: var(--screen-text); }
.cb-inline-0126 { border-color: var(--screen-divider); }
.cb-inline-0127 { color: var(--screen-text-muted); }
.cb-inline-0128 { background: var(--menu-bg); border: 1px solid var(--menu-border); }
.cb-inline-0129 { background: var(--btn-orange); color: var(--btn-orange-text); }
.cb-inline-0130 { margin-top: 0; }
.cb-inline-0131 { display: none; margin-top: 32px; text-align: right; }
.cb-inline-0132 { margin-top: 24px; }
.cb-inline-0133 { color: var(--success); border-color: rgba(16, 185, 129, 0.3); }
.cb-inline-0134 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.cb-inline-0135 { color: #555; }
.cb-inline-0136 { margin-bottom: 4px; }
.cb-inline-0137 { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #FFFFFF; border-bottom: 1px solid #E8E5E1; position: sticky; top: 0; z-index: 100; }
.cb-inline-0138 { display: flex; align-items: center; gap: 16px; }
.cb-inline-0139 { background: none; border: none; color: #0a0a0a; cursor: pointer; display: none; }
.cb-inline-0140 { font-size: 28px; }
.cb-inline-0141 { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cb-inline-0142 { width: 192px; background: #FAFAFA; border: 1px solid #E8E5E1; border-radius: 8px; display: flex; align-items: center; padding: 8px 12px; }
.cb-inline-0143 { font-size: 20px; color: #777777; }
.cb-inline-0144 { border: none; background: transparent; outline: none; width: 100%; font-size: 13px; margin-left: 8px; color: #0a0a0a; }
.cb-inline-0145 { position: relative; cursor: pointer; display: flex; align-items: center; }
.cb-inline-0146 { color: #777777; font-size: 24px; }
.cb-inline-0147 { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background: #e16349; border-radius: 50%; border: 2px solid #FFF; }
.cb-inline-0148 { display: flex; align-items: center; padding-left: 12px; border-left: 1px solid #E8E5E1; }
.cb-inline-0149 { width: 34px; height: 34px; background: #fef5e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #e16349; font-weight: 700; font-size: 14px; }
.cb-inline-0150 { font-size:22px;margin-bottom:4px;font-weight:700 }
.cb-inline-0151 { color:var(--text-main) }
.cb-inline-0152 { color:var(--primary) }
.cb-inline-0153 { font-size:15px;font-weight:600;color:var(--secondary);margin-bottom:8px;display:flex;align-items:center;gap:6px }
.cb-inline-0154 { font-size:18px }
.cb-inline-0155 { color:var(--text-muted);font-size:13px;font-weight:500;margin-bottom:24px }
.cb-inline-0156 { background:var(--warning) }
.cb-inline-0157 { background:var(--success) }
.cb-inline-0158 { background:var(--secondary) }
.cb-inline-0159 { background:var(--danger) }
.cb-inline-0160 { color:var(--primary);cursor:pointer;font-size:20px;background:#FAFAFA;padding:4px;border-radius:6px;border:1px solid var(--border) }
.cb-inline-0161 { padding:16px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#FAFAFA;gap:12px }
.cb-inline-0162 { font-size:14px;font-weight:700;margin:0;color:var(--text-main) }
.cb-inline-0163 { background:var(--surface);border:1px solid var(--border);padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-main);display:flex;align-items:center;gap:6px }
.cb-inline-0164 { font-size:16px }
.cb-inline-0165 { text-align:center;padding:30px;font-size:13px;color:var(--text-muted);display:block;width:100% }
.cb-inline-0166 { font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px }
.cb-inline-0167 { font-size:20px;color:var(--primary) }
.cb-inline-0168 { cursor:pointer;font-size:20px }
.cb-inline-0169 { flex:1;padding:0;overflow-y:auto;overflow-x:hidden;height:100% }
.cb-inline-0170 { height: fit-content; }
.cb-inline-0171 { margin: 0 0 16px 0; font-size: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.cb-inline-0172 { width: 90px; margin-bottom: 0; }
.cb-inline-0173 { margin-bottom: 0; }
.cb-inline-0174 { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.cb-inline-0175 { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #FAFAFA; }
.cb-inline-0176 { margin: 0; font-size: 15px; }
.cb-inline-0177 { display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; width: 250px; }
.cb-inline-0178 { border: none; background: transparent; outline: none; font-size: 13px; width: 100%; margin-left: 8px; }
.cb-inline-0179 { text-align: center; padding: 30px; }
.cb-inline-0180 { margin-top: 4px; font-size: 10px; }
.cb-inline-0181 { font-size: 10px; }
.cb-inline-0182 { height: auto; }
.cb-inline-0183 { padding: 6px; border-radius: 6px; border: 1px solid var(--border); font-size: 11px; outline: none; cursor: pointer; color: var(--text-main); }
.cb-inline-0184 { animation-delay: 0s; }
.cb-inline-0185 { animation-delay: 0.2s; }
.cb-inline-0186 { animation-delay: 0.4s; }
.cb-inline-0187 { font-weight: 600; letter-spacing: 1px; }
.cb-inline-0188 { border: none; padding: 0; margin: 0; }
.cb-inline-0189 { text-align: right; margin-top: 16px; }
.cb-inline-0190 { display: inline-flex; margin-right: 12px; padding: 14px 24px; }
.cb-inline-0191 { font-size: 16px; color: var(--primary); }
.cb-inline-0192 { color: var(--danger); margin: 0 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cb-inline-0193 { background: #FEF2F2; padding: 16px; border-radius: 12px; }
.cb-inline-0194 { color: var(--danger); font-weight: 700; border-color: #FCA5A5; }
.cb-inline-0195 { color: var(--warning); }
.cb-inline-0196 { background: #FEF2F2; border-color: #FCA5A5; }
.cb-inline-0197 { margin-bottom: 8px; }
.cb-inline-0198 { color: var(--text-muted); font-size: 20px; }
.cb-inline-0199 { position: relative; }
.cb-inline-0200 { padding-left: 44px; }
.cb-inline-0201 { position: absolute; left: 14px; top: 16px; color: var(--text-muted); }
.cb-inline-0202 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cb-inline-0203 { font-weight: 800; color: var(--primary); font-size: 18px; }
.cb-inline-0204 { margin-top: 10px; }
.cb-inline-0205 { font-size: 56px; color: var(--grey-med); margin-bottom: 16px; display: block; }
.cb-inline-0206 { color: var(--text-muted); font-size: 15px; font-weight: 500; margin: 0; }
.cb-inline-0207 { width: 100%; max-width: 380px; }
.cb-inline-0208 { margin: 0 0 20px 0; color: var(--text-main); font-size: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.cb-inline-0209 { background: #E2E8F0; cursor: not-allowed; }
.cb-inline-0210 { font-weight: 700; color: var(--primary); }
.cb-inline-0211 { margin-top: 8px; }
.cb-inline-0212 { font-size: 48px; color: var(--grey-med); margin-bottom: 12px; }
.cb-inline-0213 { color: var(--text-muted); font-size: 14px; }
.cb-inline-0214 { grid-column: 1 / -1; background: #25D366; }
.cb-inline-0215 { color: var(--success); margin: 0 0 16px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.cb-inline-0216 { background: #ECFDF5; padding: 16px; border-radius: 12px; }
.cb-inline-0217 { color: var(--success); font-weight: 700; border-color: #A7F3D0; }
.cb-inline-0218 { color: var(--primary); font-weight: 700; }
.cb-inline-0219 { color: #3B82F6; }
.cb-inline-0220 { background: #ECFDF5; border-color: #A7F3D0; }
.cb-inline-0221 { display: block; }
.cb-inline-0222 { display: flex; flex-direction: column; height: 100vh; width: 100vw; align-items: center; justify-content: center; background: var(--bg); z-index: 9999; position: fixed; top: 0; left: 0; padding: 20px; }
.cb-inline-0223 { background: var(--surface); padding: 40px; border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); width: 100%; max-width: 400px; text-align: center; }
.cb-inline-0224 { color: var(--text-main); margin-bottom: 24px; font-weight: 800; line-height: 1.3; }
.cb-inline-0225 { color: var(--primary); font-size: 18px; }
.cb-inline-0226 { width: 100%; padding: 14px; margin-bottom: 16px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; outline: none; background: #FAFAFA; }
.cb-inline-0227 { position: relative; margin-bottom: 8px; }
.cb-inline-0228 { width: 100%; padding: 14px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; outline: none; padding-right: 40px; background: #FAFAFA; }
.cb-inline-0229 { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; user-select: none; }
.cb-inline-0230 { text-align: right; margin-bottom: 16px; }
.cb-inline-0231 { color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s; }
.cb-inline-0232 { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 24px; gap: 8px; }
.cb-inline-0233 { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.cb-inline-0234 { font-size: 13px; color: var(--text-muted); cursor: pointer; user-select: none; font-weight: 500; }
.cb-inline-0235 { width: 100%; background: var(--primary); color: white; border: none; padding: 14px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; transition: opacity 0.2s; }
.cb-inline-0236 { color: var(--danger); margin-top: 16px; display: none; font-size: 13px; }
.cb-inline-0237 { display: none; background: var(--surface); padding: 40px; border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); width: 100%; max-width: 400px; text-align: center; }
.cb-inline-0238 { color: var(--text-main); margin-bottom: 12px; font-weight: 800; }
.cb-inline-0239 { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; line-height: 1.5; }
.cb-inline-0240 { width: 100%; background: var(--primary); color: white; border: none; padding: 14px; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; transition: opacity 0.2s; margin-bottom: 16px; }
.cb-inline-0241 { margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.cb-inline-0242 { color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.cb-inline-0243 { margin-top: 40px; text-align: center; }
.cb-inline-0244 { max-width: 120px; height: auto; opacity: 0.7; }
.cb-inline-0245 { display: none; height: 100vh; width: 100vw; overflow: hidden; }
.cb-inline-0246 { font-size: 22px; margin-bottom: 4px; font-weight: 700; }
.cb-inline-0247 { color: var(--text-main); }
.cb-inline-0248 { font-size: 15px; font-weight: 600; color: var(--secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cb-inline-0249 { color: var(--text-muted); font-size: 13px; font-weight: 500; margin-bottom: 24px; }
.cb-inline-0250 { background: var(--warning); }
.cb-inline-0251 { background: var(--success); }
.cb-inline-0252 { background: var(--secondary); }
.cb-inline-0253 { background: var(--danger); }
.cb-inline-0254 { color: var(--primary); cursor: pointer; font-size: 20px; background: #FAFAFA; padding: 4px; border-radius: 6px; border: 1px solid var(--border); }
.cb-inline-0255 { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #FAFAFA; }
.cb-inline-0256 { font-size: 14px; font-weight: 700; margin: 0; color: var(--text-main); }
.cb-inline-0257 { background: var(--surface); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-main); display: flex; align-items: center; gap: 6px; transition: 0.2s; }
.cb-inline-0258 { text-align: center; padding: 30px; font-size: 13px; color: var(--text-muted); display: block; width: 100%; }
.cb-inline-0259 { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cb-inline-0260 { font-size: 20px; color: var(--primary); }
.cb-inline-0261 { cursor: pointer; font-size: 20px; }
.cb-inline-0262 { flex: 1; padding: 0; overflow-y: auto; overflow-x: hidden; height: 100%; }
.cb-inline-0263 { display: flex; gap: 12px; align-items: flex-end; margin-top: 21px; }
.cb-inline-0264 { width:180px;max-width:100%;height:auto;display:block; }
.cb-inline-0265 { width:55% }
.cb-inline-0266 { width:15% }
.cb-inline-0267 { width:30% }
.cb-inline-0268 { margin-top:13px }
.cb-inline-0269 { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.cb-inline-0270 { background: var(--surface); border: 1px solid var(--border); padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.cb-inline-0271 { padding: 24px; }
.cb-inline-0272 { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.cb-inline-0273 { background: var(--surface); padding: 24px; border-radius: 16px; border: 1px solid var(--border); margin-bottom: 24px; }
.cb-inline-0274 { font-size: 16px; margin-bottom: 8px; }
.cb-inline-0275 { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.cb-inline-0276 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.cb-inline-0277 { font-size: 12px; color: var(--text-muted); font-weight: bold; }
.cb-inline-0278 { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #f0f0f0; cursor: not-allowed; }
.cb-inline-0279 { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
.cb-inline-0280 { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.cb-inline-0281 { background: transparent; color: var(--text-muted); border: 1px solid var(--border); padding: 12px 24px; border-radius: 8px; cursor: pointer; font-weight: bold; margin-left: 8px; }
.cb-inline-0282 { margin-top: 12px; font-size: 13px; font-weight: bold; }
.cb-inline-0283 { width: 100%; text-align: left; border-collapse: collapse; }
.cb-inline-0284 { background: #FAFAFA; border-bottom: 1px solid var(--border); }
.cb-inline-0285 { padding: 12px; }
.cb-inline-0286 { padding: 12px; text-align: right; }
.cb-inline-0287 { text-align: center; padding: 20px; }

/* ===== Extracted from 404.html (style block 1) ===== */

    :root {
        --prof-red: #2563EB;
        --prof-red-hover: #1D4ED8;

        --text-dark: #1F2937;
        --text-grey: #6B7280;

        --bg-color: #F8FAFC;
        --border-color: #E2E8F0;
    }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-dark);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            text-align: center;
        }

        /* Main Content Wrapper */
        .error-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .error-code {
            font-size: clamp(100px, 15vw, 150px);
            font-weight: 700;
            color: var(--prof-red);
            line-height: 1;
            margin-bottom: 16px;
            letter-spacing: -2px;
        }

        .error-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 12px;
        }

        .error-message {
            font-size: 16px;
            color: var(--text-grey);
            max-width: 400px;
            margin-bottom: 32px;
            line-height: 1.5;
        }

        /* Back to Main Page Button */
        .btn-back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--prof-red);
            color: #FFFFFF;
            text-decoration: none;
            padding: 14px 32px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(200, 0, 0, 0.2);
        }

        .btn-back:hover {
            background-color: var(--prof-red-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(200, 0, 0, 0.3);
        }

        .btn-back:active {
            transform: translateY(0);
        }

        /* Bottom Footer */
        .dev-footer {
            padding: 24px 20px;
            background-color: #FFFFFF;
            border-top: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding-bottom: max(24px, env(safe-area-inset-bottom));
        }

        .dev-label {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #9CA3AF;
        }

        .dev-link {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 600;
            font-size: 14px;
            transition: color 0.2s ease;
        }

        .dev-link:hover {
            color: var(--prof-red);
        }

        /* 1x1 Logo */
        .dev-logo {
            width: 24px;
            height: 24px;
            object-fit: contain;
            display: block;
        }
    

/* ===== Extracted from aboutapp.html (style block 2) ===== */

        #about-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
        
        #about-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        
        #about-module .modern-card { background: var(--surface); border-radius: 24px; padding: 40px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
        
        .app-hero-logo { max-width: 220px; height: auto; margin-bottom: 16px; }
        
        .app-title { font-size: 26px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; letter-spacing: -0.5px; }
        .app-subtitle { font-size: 15px; font-weight: 500; color: var(--text-muted); margin-bottom: 24px; max-width: 600px; line-height: 1.6; }
        
        .version-badge { background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 20px; border: 1px solid #BFDBFE; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 32px; }

        .features-grid { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; margin-bottom: 32px; text-align: left; }
        @media (min-width: 768px) { .features-grid { grid-template-columns: 1fr 1fr; } }
        
        .feature-item { background: #FAFAFA; border: 1px solid var(--border); padding: 20px; border-radius: 16px; display: flex; gap: 16px; align-items: flex-start; transition: transform 0.2s; }
        .feature-item:hover { transform: translateY(-2px); border-color: var(--primary-light); box-shadow: 0 4px 12px rgba(0,98,255,0.05); }
        .feature-icon { background: #EFF6FF; color: var(--primary); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .feature-text h5 { margin: 0 0 4px 0; font-size: 15px; font-weight: 700; color: var(--text-main); }
        .feature-text p { margin: 0; font-size: 13px; color: var(--secondary); line-height: 1.5; }

        .dev-block { width: 100%; background: #F8FAFC; border-radius: 16px; padding: 24px; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 16px; }
        .dev-logo { width: 100px; height: auto; margin-bottom: 12px; opacity: 0.8; }
        .dev-info { font-size: 14px; color: var(--secondary); line-height: 1.6; text-align: center; }
        .dev-link { color: var(--primary); text-decoration: none; font-weight: 600; transition: 0.2s; }
        .dev-link:hover { text-decoration: underline; }

        @media (max-width: 600px) {
            #about-module .modern-card { padding: 24px; }
            .feature-item { flex-direction: column; gap: 12px; }
        }
    

/* ===== Extracted from appointments.html (style block 3) ===== */

:root{--primary:#2563EB;--primary-light:#EFF6FF;--bg:#F8FAFC;--surface:#fff;--text:#0F172A;--muted:#64748B;--border:#E2E8F0;--success:#10B981;--danger:#EF4444;--warning:#F59E0B;--shadow:0 2px 10px rgba(15,23,42,.06)}
#appointment-module{font-family:Inter,sans-serif;width:100%;max-width:1120px;color:var(--text)}
#appointment-module *{box-sizing:border-box}
.material-symbols-rounded{font-size:20px;vertical-align:middle}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.title h2{font-size:27px;line-height:1.1;margin:0;font-weight:750}.title p{font-size:14px;color:var(--muted);margin:5px 0 0}
.btn{border:1px solid var(--border);background:#fff;color:var(--text);height:40px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.danger{color:var(--danger);border-color:#FECACA}.btn.blue{color:var(--primary);border-color:#BFDBFE}.btn.small{height:36px;padding:0 10px;font-size:12px}
.new-btn{height:40px;padding:0 15px;border:0;border-radius:10px;background:var(--primary);color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.kpi .label{font-size:12px;color:var(--muted);font-weight:600}.kpi .num{font-size:22px;font-weight:800;margin-top:3px}
.kpi.today .num{color:var(--primary)}.kpi.done .num{color:var(--success)}.kpi.pending .num{color:var(--warning)}
.panel{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:visible;margin-bottom:16px}
.panel-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel-title{font-size:15px;font-weight:750}
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tool{position:relative}.icon-btn{width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#334155}.icon-btn:hover{background:#F8FAFC}
.icon-btn.active{background:var(--primary-light);color:var(--primary);border-color:#BFDBFE}
.dropdown{display:none;position:absolute;right:0;top:45px;min-width:190px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.14);padding:6px;z-index:5000}
.tool.open .dropdown{display:block}.drop-title{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;padding:7px 9px}.drop-item{width:100%;border:0;background:#fff;text-align:left;padding:9px;border-radius:7px;font-size:13px;display:flex;gap:8px;align-items:center;cursor:pointer;color:var(--text)}.drop-item:hover{background:#F8FAFC}.drop-item.active{background:var(--primary-light);color:var(--primary);font-weight:700}
.searchbar{display:none;padding:8px 12px;border-bottom:1px solid var(--border);background:#FAFAFA}.searchbar.show{display:flex}.searchbox{display:flex;align-items:center;gap:6px;width:100%;background:#fff;border:1px solid var(--border);border-radius:9px;padding:0 9px}.searchbox input{height:36px;width:100%;border:0;outline:0;font-size:13px}
.filters{display:none;padding:10px 12px;border-bottom:1px solid var(--border);background:#FAFAFA;gap:8px;flex-wrap:wrap;align-items:center}.filters.show{display:flex}
.form-input{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--border);font-size:13px;color:var(--text);background:#FAFAFA;outline:none}.form-input:focus{border-color:var(--primary);background:#fff}.filter-input{width:auto;min-width:120px;height:36px;padding:7px 9px}
.bulkbar{display:none;background:#FFF7ED;padding:10px 12px;border-bottom:1px solid #FED7AA;align-items:center;gap:8px;flex-wrap:wrap}.bulkbar.show{display:flex}.bulkbar strong{font-size:12px;color:#9A3412}
.table-wrap{overflow-x:auto}.table{width:100%;min-width:930px;border-collapse:collapse}.table th{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:10px 12px;background:#FAFAFA;border-bottom:1px solid var(--border);white-space:nowrap}.table td{font-size:13px;padding:12px;border-bottom:1px solid var(--border);vertical-align:top}.table tr:last-child td{border-bottom:0}.patient-name{font-weight:750;font-size:14px}.sub{font-size:11px;color:var(--muted);margin-top:3px}.actions{display:flex;gap:5px;justify-content:flex-end}.act{width:32px;height:32px;border:1px solid var(--border);background:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.act:hover{background:#F8FAFC}.act.note{color:#8B5CF6}.act.inv{color:#155A90}.act.edit{color:#64748B}
.no-due{color:#64748B;font-weight:700}.excess{color:#059669;font-weight:750}.due{color:#DC2626;font-weight:750}
.badge{display:inline-flex;padding:4px 8px;border-radius:6px;font-size:10px;font-weight:750;text-transform:uppercase}.pending{background:#FFF7ED;color:#EA580C}.reported{background:#EFF6FF;color:#2563EB}.completed{background:#ECFDF5;color:#059669}.rescheduled{background:#F1F5F9;color:#64748B}.cancelled{background:#FEF2F2;color:#DC2626}.cat{background:#F8FAFC;color:#334155;border:1px solid var(--border)}
.cards{display:none;padding:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}.cards.show{display:grid}.apt-card{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}.card-top{display:flex;justify-content:space-between;gap:8px}.card-patient{display:flex;gap:8px}.card-check{padding-top:2px}.card-line{font-size:12px;color:var(--muted);margin-top:5px}.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}.card-actions{display:flex;gap:6px;margin-top:10px}
.empty{text-align:center;padding:35px 15px;color:var(--muted);font-size:13px}
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.52);z-index:10000;align-items:center;justify-content:center;padding:14px}.modal.show{display:flex}.modal-box{background:#fff;width:min(900px,100%);max-height:94vh;overflow:auto;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.22)}.modal-head{position:sticky;top:0;z-index:2;background:#fff;padding:13px 15px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-head h3{font-size:16px;margin:0}.modal-body{padding:15px}.close{width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:#fff;cursor:pointer}
.section{border:1px solid var(--border);border-radius:11px;margin-bottom:12px;padding:12px}.section h4{font-size:13px;color:var(--primary);margin:0 0 12px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.grid.three{grid-template-columns:repeat(3,1fr)}.field label{display:block;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:5px}.span2{grid-column:1/-1}.location-row{display:grid;grid-template-columns:auto 1fr auto;gap:6px}.money-box{background:var(--bg);border-radius:10px;padding:10px}.form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:3px}.readonly{background:#F8FAFC!important;border:0!important;font-weight:750}
.notes-content{padding:15px;line-height:1.6;white-space:pre-wrap;font-size:13px;min-height:150px;background:#FAFAFA;border:1px solid var(--border);border-radius:9px}
.confirm-box{max-width:430px}.confirm-message{font-size:13px;line-height:1.6;color:var(--muted);padding:15px}
@media(max-width:700px){.topbar{align-items:flex-start}.title h2{font-size:22px}.new-btn span:last-child{display:none}.kpis{gap:7px}.kpi{padding:10px}.kpi .num{font-size:20px}.grid,.grid.three{grid-template-columns:1fr}.span2{grid-column:auto}.modal{padding:8px}.modal-box{max-height:96vh}.toolbar{width:100%}.panel-head{align-items:flex-start}.panel-title{width:100%}}
@media print{#appointment-module .no-print,#appointment-module .toolbar,#appointment-module .new-btn,.kpis{display:none!important}.panel{box-shadow:none;border:0}.table{min-width:100%}}


/* ===== Extracted from appointments12.html (style block 4) ===== */

        :root {
            /* Zoho Blue Variant */
            --primary: #0062FF;        /* Main Zoho Blue */
            --primary-light: #EAF2FF;  /* Very soft blue for active states/backgrounds */
            
            /* Cool-toned neutrals to match the blue */
            --bg: #F4F6F8;             /* Cool light gray for app background */
            --surface: #ffffff;        /* Crisp white for cards/panels */
            --text-main: #0F172A;      /* Deep slate for high readability */
            --text-muted: #64748B;     /* Muted slate for secondary text */
            --border: #E2E8F0;         /* Cool, clean border color */
            --grey-med: #CBD5E1;
            
            /* Preserved shadow and semantic colors */
            --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
            --success: #10B981;
            --warning: #F59E0B; 
            --secondary: #475569;      /* Adjusted to cool slate to match theme */
            --danger: #EF4444; 
        }

        #appointment-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px;}
        
        #appointment-module .section-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        /* Action Bar */
        .action-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
        .action-bar .btn-action { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-action:hover { background: var(--primary); color: white; }
        .action-bar .btn-danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-danger:hover { background: var(--danger); color: white; }

        /* Form styling */
        #aptFormCard { display: none; background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; animation: fadeIn 0.3s ease;}
        #aptFormCard.active { display: block; }
        
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; box-sizing: border-box;}
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        
        /* Timesheet CSS */
        .timesheet-wrapper { display: none; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow-x: auto; margin-bottom: 24px; padding: 16px; animation: fadeIn 0.3s ease;}
        .timesheet-wrapper.active { display: block; }
        .timesheet-table { width: 100%; min-width: 1000px; border-collapse: collapse; text-align: center; }
        .timesheet-table th { background: var(--primary-light); color: var(--primary); font-size: 11px; padding: 10px 4px; border: 1px solid var(--border); }
        .timesheet-table td { border: 1px solid var(--border); padding: 6px; font-size: 11px; vertical-align: top; height: 60px; width: 7.1%; }
        .timesheet-table .ts-doctor { font-weight: bold; background: #fafafa; text-align: left; padding-left: 12px; width: 15%; color: var(--text-main); }
        .ts-booking { background: var(--primary); color: white; padding: 4px; border-radius: 4px; margin-bottom: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Data Table CSS */
        #appointment-module .table-container { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); }
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; }
        .badge-pending { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(0, 98, 255, 0.1); color: var(--primary); } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-regular { background: rgba(245, 158, 11, 0.15); color: var(--warning); font-size: 10px; padding: 2px 6px; margin-left: 6px; }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; color: inherit; cursor: pointer;}
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); }

        #bulk-reschedule-container { display: none; margin-bottom: 16px; }
        #bulk-reschedule-container.active { display: flex; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
    

/* ===== Extracted from appointmentsorg.html (style block 5) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;

        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;
        --grey-med: #CBD5E1;

        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);

        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #appointment-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px;}
        
        #appointment-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #appointment-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.four-cols { grid-template-columns: 1fr 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #appointment-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}

        #appointment-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        
        /* Native Horizontal Scroll Table for Mobile */
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap;}
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap;}
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; margin-right: 4px; }
        .badge-pending { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(59, 130, 246, 0.1); color: #3B82F6; } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-cancelled { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
        .badge-category { background: rgba(15, 23, 42, 0.05); color: var(--text-main); border: 1px solid var(--border); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        #reschedule-container, #bulk-reschedule-container { display: none; }
        #reschedule-container.active, #bulk-reschedule-container.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #appointment-module .table-container { box-shadow: none; border: none; margin: 0; }
            #appointment-module .table-header { padding: 0 0 10px 0; border-bottom: 2px solid #000; }
            #appointment-module .saas-table { min-width: 100%; }
            #appointment-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #appointment-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from appointmtnt3.html (style block 6) ===== */

        :root {
            /* Zoho Blue Theme */
            --primary: #0062FF; 
            --primary-light: #eaf1ff;
            --bg: #F8F9FA;
            --surface: #ffffff;
            --text-main: #0a0a0a;
            --text-muted: #6b7280;
            --border: #e5e7eb;
            --grey-med: #D9D9D9;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
            --success: #10B981;
            --danger: #EF4444;
            --secondary: #64748B;
            --warning: #F59E0B;
        }

        #appointment-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px;}
        
        #appointment-module .section-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        /* Action Bar */
        .action-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
        .action-bar .btn-action { background: var(--surface); color: var(--primary); border: 1px solid var(--primary); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-action:hover { background: var(--primary); color: white; }
        .action-bar .btn-danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; }
        .action-bar .btn-danger:hover { background: var(--danger); color: white; }

        /* Form styling */
        #aptFormCard { display: none; background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; animation: fadeIn 0.3s ease;}
        #aptFormCard.active { display: block; }
        
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; box-sizing: border-box;}
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        
        /* Timesheet CSS */
        .timesheet-wrapper { display: none; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow-x: auto; margin-bottom: 24px; padding: 16px; animation: fadeIn 0.3s ease;}
        .timesheet-wrapper.active { display: block; }
        .timesheet-table { width: 100%; min-width: 1000px; border-collapse: collapse; text-align: center; }
        .timesheet-table th { background: var(--primary-light); color: var(--primary); font-size: 11px; padding: 10px 4px; border: 1px solid var(--border); }
        .timesheet-table td { border: 1px solid var(--border); padding: 6px; font-size: 11px; vertical-align: top; height: 60px; width: 7.1%; }
        .timesheet-table .ts-doctor { font-weight: bold; background: #fafafa; text-align: left; padding-left: 12px; width: 15%; color: var(--text-main); }
        .ts-booking { background: var(--primary); color: white; padding: 4px; border-radius: 4px; margin-bottom: 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        /* Data Table CSS */
        #appointment-module .table-container { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); }
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; }
        .badge-pending { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(0, 98, 255, 0.1); color: var(--primary); } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-regular { background: rgba(245, 158, 11, 0.15); color: var(--warning); font-size: 10px; padding: 2px 6px; margin-left: 6px; }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; color: inherit; cursor: pointer;}
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); }

        #bulk-reschedule-container { display: none; margin-bottom: 16px; }
        #bulk-reschedule-container.active { display: flex; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
    

/* ===== Extracted from apt.html (style block 7) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;

        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;
        --grey-med: #CBD5E1;

        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);

        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #appointment-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px;}
        
        #appointment-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #appointment-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #appointment-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #appointment-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #appointment-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }
        @media (min-width: 1024px) { #appointment-module .input-group.four-cols { grid-template-columns: 1fr 1fr 1fr 1fr; } }

        #appointment-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #appointment-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #appointment-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #appointment-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #appointment-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #appointment-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}

        #appointment-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        
        /* Native Horizontal Scroll Table for Mobile */
        #appointment-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #appointment-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #appointment-module .saas-table { width: 100%; min-width: 950px; border-collapse: collapse; text-align: left; }
        #appointment-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap;}
        #appointment-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap;}
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; margin-right: 4px; }
        .badge-pending { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-reported { background: rgba(59, 130, 246, 0.1); color: #3B82F6; } 
        .badge-completed { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-rescheduled { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }
        .badge-cancelled { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
        .badge-category { background: rgba(15, 23, 42, 0.05); color: var(--text-main); border: 1px solid var(--border); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        #reschedule-container, #bulk-reschedule-container { display: none; }
        #reschedule-container.active, #bulk-reschedule-container.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* Notes Modal Styles */
        .notes-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
        .notes-modal-content { background: white; width: 100%; max-width: 600px; border-radius: 12px; padding: 24px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
        .notes-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #appointment-module .table-container { box-shadow: none; border: none; margin: 0; }
            #appointment-module .table-header { padding: 0 0 10px 0; border-bottom: 2px solid #000; }
            #appointment-module .saas-table { min-width: 100%; }
            #appointment-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #appointment-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from attendance.html (style block 8) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --success: #10B981;
        --danger: #EF4444;
        --warning: #F59E0B;
    }
        
        #attendance-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; margin: 0 auto;}
        #attendance-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        
        #attendance-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #attendance-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #attendance-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #attendance-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #attendance-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #attendance-module .form-input:focus { border-color: var(--primary); background: var(--surface); }

        #attendance-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; display: inline-flex; align-items: center; gap: 6px;}
        #attendance-module .btn-primary:active { opacity: 0.8; }
        #attendance-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #attendance-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

        /* Google Sheet Style Horizontal Scroll Table */
        #attendance-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #attendance-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #attendance-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #attendance-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #attendance-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #attendance-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        /* Status Badges */
        .badge { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-present { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-leave { background: rgba(251, 146, 60, 0.1); color: var(--warning); }
        .badge-pending { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
        .badge-rejected { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

        /* Summary Dashboard */
        .summary-dashboard { display: flex; gap: 12px; flex-wrap: wrap; background: #FAFAFA; padding: 12px; border-radius: 12px; border: 1px solid var(--border); }
        .summary-card { flex: 1; min-width: 120px; padding: 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .summary-card span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
        .summary-card strong { font-size: 20px; font-weight: 800; color: var(--text-main); }
        .summary-card.present strong { color: var(--success); }
        .summary-card.leave strong { color: var(--warning); }

        /* Monthly View Matrix Styling */
        #monthTable { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 1100px; }
        #monthTable th { background: #FAFAFA; color: var(--text-muted); text-transform: uppercase; font-size: 10px; padding: 8px 4px; border: 1px solid var(--border); text-align: center; }
        #monthTable td { border: 1px solid var(--border); padding: 6px 4px; text-align: center; font-weight: 600; }
        #monthTable td:nth-child(1), #monthTable td:nth-child(2), #monthTable td:nth-child(3) { text-align: left; padding-left: 10px; }
        .m-st-P { color: var(--success); }
        .m-st-L { color: var(--warning); }
        .m-st-H { color: #3B82F6; }
        .m-st-none { color: #ddd; font-weight: normal; }

        /* Modal Styles */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); z-index: 9999; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }
        .modal-container { background: var(--surface); border-radius: 20px; width: 100%; max-width: 800px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
        .modal-container.small { max-width: 500px; }
        .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { margin: 0; font-size: 18px; color: var(--text-main); }
        .modal-close { background: transparent; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; transition: 0.2s; }
        .modal-close:hover { background: var(--grey-light); color: var(--danger); }
        .modal-body { padding: 24px; overflow-y: auto; }

        @media print {
            @page { size: A4 landscape; margin: 10mm; }
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            
            body.printing-monthly #daily-log-container,
            body.printing-monthly #leave-requests-container { display: none !important; }
            
            body:not(.printing-monthly) #monthlyReportContainer { display: none !important; }

            #attendance-module .table-container { box-shadow: none; border: none; margin: 0; }
            #attendance-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #attendance-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
            
            #monthTable th, #monthTable td { border: 1px solid #000; font-size: 9px; padding: 3px; }
            #monthTable th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    

/* ===== Extracted from backup.html (style block 9) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;

        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;
        --grey-med: #CBD5E1;

        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);

        --success: #10B981;
        --danger: #EF4444;
        --warning: #F59E0B;
    }

        #export-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 900px; margin: 0 auto; padding: 20px 0;}
        
        #export-module .section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
        #export-module .card { background: var(--surface); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        
        #export-module .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #export-module .input-group { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
        @media (min-width: 768px) { #export-module .input-group { grid-template-columns: 1fr 1fr 1fr; } }

        #export-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 15px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #export-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #export-module .btn-primary { background: var(--primary); color: white; border: none; padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #export-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        #export-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; transform: none; }
        
        #export-module .btn-danger { background: var(--danger); color: white; border: none; padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
        #export-module .btn-danger:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2); transform: translateY(-1px); }

        .info-box { background: var(--primary-light); border: 1px solid #BFDBFE; padding: 16px; border-radius: 12px; color: #1E3A8A; font-size: 13px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px;}
        .info-box.warning { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
    

/* ===== Extracted from backup.html (style block 10) ===== */

        @keyframes spin { 100% { transform: rotate(360deg); } }
    

/* ===== Extracted from bank.html (style block 11) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #transaction-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        /* Google Sheet Style Table (Horizontal Scroll) */
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-sales { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-expense { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-receipt { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* Patient Summary Dash */
        #patientSummaryDash { display: none; background: #fef5e8; border: 1px dashed var(--primary); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        /* Ledger Balances */
        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        /* Print Override */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from bottomnav.html (style block 12) ===== */

    .bottom-nav { 
        display: flex; justify-content: space-around; background: var(--surface); 
        border-top: 1px solid var(--border); padding: 10px 0; 
        padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
        position: fixed; bottom: 0; width: 100%; z-index: 900; 
    }
    .bottom-nav-item { 
        display: flex; flex-direction: column; align-items: center; 
        color: var(--text-muted); text-decoration: none; 
        font-size: 10px; font-weight: 600; cursor: pointer; 
        transition: color 0.2s ease;
    }
    .bottom-nav-item:hover { color: var(--text-main); }
    .bottom-nav-item.active { color: var(--primary); }
    .bottom-nav-icon { font-size: 24px; margin-bottom: 4px; }


/* ===== Extracted from branches.html (style block 13) ===== */

    /* --- Core Theme Variables --- */
    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;

        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;
        --grey-light: #F1F5F9;
        --grey-med: #CBD5E1;

        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);

        --danger: #EF4444;
    }

        #branches-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; margin: 0 auto; }

        /* --- UI Components --- */
        #branches-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #branches-module .icon-btn { background: var(--surface); border: 1px solid var(--border); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm); transition: 0.2s; }
        #branches-module .icon-btn:hover { color: var(--primary); border-color: var(--primary); }

        /* Form Card - Now takes full width */
        #branches-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 32px; width: 100%; }
        #branches-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #branches-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #branches-module .input-group { grid-template-columns: 1fr 1fr; } }
        /* Allowing full width rows for long addresses */
        #branches-module .full-width-field { grid-column: 1 / -1; }

        #branches-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; }
        
        /* --- Read-Only vs Editable States --- */
        #branches-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 600; color: var(--text-main); pointer-events: none; transition: all 0.3s ease; }
        #branches-module .readonly-input.editable { background: #FAFAFA; border: 1px solid var(--border); padding-left: 16px; pointer-events: auto; font-weight: 500;}
        #branches-module .readonly-input.editable:focus { border-color: var(--primary); background: var(--surface); }
        #branches-module .locked-input { background: #F4F4F4 !important; color: #888 !important; pointer-events: none !important; border: 1px solid var(--border) !important; padding-left: 16px !important; }

        #branches-module .btn-primary { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #branches-module .btn-primary:active { opacity: 0.8; }
        #branches-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }

        /* --- Google Sheet Style Horizontal Scroll Table --- */
        #branches-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; width: 100%; }
        #branches-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        #branches-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0;}
        
        #branches-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #branches-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #branches-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #branches-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #branches-module .saas-table tr:last-child td { border-bottom: none; }
        
        #branches-module .branch-info { display: flex; flex-direction: column; }
        #branches-module .branch-info .bid { font-size: 12px; color: var(--primary); font-weight: 700; margin-bottom: 2px; }
    

/* ===== Extracted from calc.html (style block 14) ===== */

        :root[data-theme="dark"] {
            /* Frame & Metal Background */
            --bg-base: #1a1b1c;
            --bg-metal-1: rgba(255,255,255,0.02);
            --text-header: #e0e0e0;
            --text-cm: #df483a;
            
            /* Menus and Modals */
            --menu-bg: #222325;
            --menu-text: #e0e0e0;
            --menu-border: #333333;
            --menu-hover: #333435;
            
            /* Screen */
            --screen-bg: linear-gradient(180deg, #0f282f 0%, #12333b 100%);
            --screen-text: #ffffff;
            --screen-text-muted: #5e848d;
            --screen-border: #000000;
            --screen-divider: #264a52;
            
            /* Button Base */
            --btn-border: #050505;
            --btn-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 3px 6px rgba(0,0,0,0.6);
            
            /* Button Variants */
            --btn-num: linear-gradient(180deg, #333435 0%, #1e1e1f 100%);
            --btn-num-text: #b3b3b3; 
            
            --btn-mem: linear-gradient(180deg, #363636 0%, #262626 100%);
            --btn-mem-text: #909090;
            
            --btn-op: linear-gradient(180deg, #325a74 0%, #1f4258 100%);
            --btn-op-text: #ffffff;
            
            --btn-red: linear-gradient(180deg, #c2463b 0%, #9c2e25 100%);
            --btn-red-text: #ffffff;
            
            --btn-orange: linear-gradient(180deg, #e29033 0%, #c16e15 100%);
            --btn-orange-text: #000000;
        }

        :root[data-theme="light"] {
            /* Frame & Metal Background */
            --bg-base: #e4e6e8;
            --bg-metal-1: rgba(0,0,0,0.03);
            --text-header: #111111;
            --text-cm: #db3a2b;
            
            /* Menus and Modals */
            --menu-bg: #f5f6f7;
            --menu-text: #111111;
            --menu-border: #caced1;
            --menu-hover: #e4e6e8;
            
            /* Screen */
            --screen-bg: linear-gradient(180deg, #a4c1cf 0%, #89adb9 100%);
            --screen-text: #111111;
            --screen-text-muted: #3a545e;
            --screen-border: #6c7d85;
            --screen-divider: #7598a6;
            
            /* Button Base */
            --btn-border: #99a2a8;
            --btn-shadow: inset 0 1px 2px rgba(255,255,255,0.9), 0 2px 4px rgba(0,0,0,0.25);
            
            /* Button Variants */
            --btn-num: linear-gradient(180deg, #f2f2f2 0%, #d8d8d8 100%);
            --btn-num-text: #111111; 
            
            --btn-mem: linear-gradient(180deg, #a7b2c2 0%, #8b97a8 100%);
            --btn-mem-text: #ffffff;
            
            --btn-op: linear-gradient(180deg, #dce4ee 0%, #b8c6d8 100%);
            --btn-op-text: #111111;
            
            --btn-red: linear-gradient(180deg, #ef8a7a 0%, #db5b4a 100%);
            --btn-red-text: #111111;
            
            --btn-orange: linear-gradient(180deg, #fac680 0%, #ee9941 100%);
            --btn-orange-text: #111111;
        }

        * { 
            font-family: 'Roboto', sans-serif; 
            -webkit-tap-highlight-color: transparent; 
            box-sizing: border-box;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }

        body { 
            background-color: var(--bg-base);
            background-image: 
                repeating-linear-gradient(90deg, transparent 0px, transparent 1px, var(--bg-metal-1) 1px, var(--bg-metal-1) 3px),
                linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
            margin: 0;
            height: 100dvh; 
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }

        /* Dynamic Grid */
        .keypad-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: 0.7fr repeat(5, 1fr);
            gap: 0.45rem;
            width: 100%;
            height: 100%;
        }

        /* 3D Button Style */
        .calc-btn {
            display: flex; align-items: center; justify-content: center;
            border-radius: 8px; font-weight: 500; 
            cursor: pointer; user-select: none;
            border: 1px solid var(--btn-border);
            box-shadow: var(--btn-shadow);
            touch-action: manipulation;
            transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.1s;
        }
        
        .calc-btn:active { 
            transform: translateY(2px); 
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.1);
            filter: brightness(0.9);
        }

        .btn-num { background: var(--btn-num); color: var(--btn-num-text); font-size: 2.25rem; font-weight: 500; }
        .btn-mem { background: var(--btn-mem); color: var(--btn-mem-text); font-size: 1.25rem; font-weight: 500; }
        .btn-op { background: var(--btn-op); color: var(--btn-op-text); font-size: 2.25rem; }
        .btn-red { background: var(--btn-red); color: var(--btn-red-text); font-size: 2.25rem; }
        .btn-orange { background: var(--btn-orange); color: var(--btn-orange-text); font-size: 2.25rem; }
        
        /* The Display Screen */
        .display-box {
            background: var(--screen-bg);
            border: 2px solid var(--screen-border);
            border-radius: 6px;
            box-shadow: inset 0 4px 12px rgba(0,0,0,0.25), 0 1px 1px rgba(255,255,255,0.05);
        }

        .truncate-custom {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hover-menu:hover {
            background-color: var(--menu-hover);
        }

        /* Splash Screen Base Styles */
        #splash-screen {
            background-color: var(--bg-base);
        }
    

/* ===== Extracted from cash.html (style block 15) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #transaction-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        /* Google Sheet Style Table (Horizontal Scroll) */
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-sales { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-expense { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-receipt { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* Patient Summary Dash */
        #patientSummaryDash { display: none; background: #fef5e8; border: 1px dashed var(--primary); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        /* Ledger Balances */
        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        /* Print Override */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from company.html (style block 16) ===== */

    /* --- Core Theme Variables --- */
    :root {
        --primary: #2563EB;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    }

        #company-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 850px; margin: 0 auto; } 

        /* --- UI Components --- */
        #company-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #company-module .icon-btn { background: var(--surface); border: 1px solid var(--border); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm); transition: 0.2s; }
        #company-module .icon-btn:hover { color: var(--primary); border-color: var(--primary); }
        
        #company-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #company-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #company-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #company-module .input-group { grid-template-columns: 1fr 1fr; } }

        #company-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        
        /* --- Read-Only vs Editable States --- */
        #company-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 600; color: var(--text-main); pointer-events: none; transition: all 0.3s ease; }
        #company-module .readonly-input.editable { background: #FAFAFA; border: 1px solid var(--border); padding-left: 16px; pointer-events: auto; font-weight: 500;}
        #company-module .readonly-input.editable:focus { border-color: var(--primary); background: var(--surface); }

        #company-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #company-module .btn-primary:active { opacity: 0.8; }
        #company-module .btn-primary:disabled { background: var(--border); cursor: not-allowed; }
        #company-module .section-header { color: var(--primary); margin-top: 24px; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; font-size: 14px; font-weight: 700; text-transform: uppercase;}
    

/* ===== Extracted from estimate.html (style block 17) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;

        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;

        --success: #10B981;
        --danger: #EF4444;
    }

        #estimate-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; margin: 0 auto; }
        
        .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); }
        .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.04); border: 1px solid var(--border); margin-bottom: 24px; }
        .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; }
        .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; width: 100%; }
        .btn-primary:active { opacity: 0.8; }
        .btn-primary:disabled { background: #D9D9D9; cursor: not-allowed; }

        .action-row { display: none; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
        .btn-action { flex: 1; min-width: 100px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; background: #FAFAFA; border: 1px solid var(--border); padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text-main); cursor: pointer; transition: 0.2s; }
        .btn-action:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }

        .a4-wrapper { background: #E8E5E1; padding: 20px; border-radius: 20px; overflow-x: auto; display: flex; justify-content: center; }
        .a4-paper { background: white; width: 210mm; min-height: 297mm; padding: 40px; box-sizing: border-box; box-shadow: 0 8px 24px rgba(0,0,0,0.1); color: #0a0a0a; flex-shrink: 0; }
        
        .a4-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary); padding-bottom: 24px; margin-bottom: 30px; }
        .a4-logo-area img { max-width: 200px; height: auto; display: block; object-fit: contain; }
        .a4-company-info { text-align: right; font-size: 13px; color: #555; line-height: 1.6; }
        
        .a4-bill-to { display: flex; justify-content: space-between; margin-bottom: 40px; }
        .a4-bill-to h3 { margin: 0 0 8px 0; color: var(--primary); font-size: 14px; text-transform: uppercase; }
        
        .a4-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
        .a4-table th { background: #FAFAFA; color: #777; font-size: 12px; text-transform: uppercase; padding: 12px; text-align: left; border-bottom: 2px solid #E8E5E1; }
        .a4-table td { padding: 16px 12px; font-size: 15px; border-bottom: 1px solid #E8E5E1; }
        
        .a4-totals { float: right; width: 300px; }
        .a4-totals-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 15px; }
        .a4-totals-row.balance { font-size: 20px; font-weight: 800; color: var(--primary); border-top: 2px solid #0a0a0a; padding-top: 15px; margin-top: 5px; }
        
        .a4-bank-details { clear: both; margin-top: 60px; padding: 20px; background: #FAFAFA; border-radius: 8px; font-size: 13px; border: 1px solid #E8E5E1; }
        .a4-bank-details h4 { margin: 0 0 10px 0; color: var(--primary); text-transform: uppercase; font-size: 12px; }
        
        .a4-footer-text { margin-top: 40px; text-align: center; font-size: 9px; color: #999; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.5px; }

        @media (max-width: 768px) {
            .a4-wrapper { padding: 10px; justify-content: flex-start; }
            .a4-paper { transform: scale(0.85); transform-origin: top left; }
        }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            .a4-wrapper { padding: 0; background: none; justify-content: flex-start; overflow: visible; }
            .a4-paper { box-shadow: none; width: 100%; padding: 0; transform: none; min-height: auto; }
        }
    

/* ===== Extracted from header - Copy.html (style block 18) ===== */

  /* --- Progress Clock Header Styles --- */
  .metric-round { position: relative; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; }
  .clock-svg { transform: rotate(-90deg); position: absolute; }
  .clock-svg circle { fill: none; stroke-width: 4; stroke-linecap: round; }
  .bg-track { stroke: #F0F0F0; }
  .progress-arc { transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
  .center-text { display: flex; flex-direction: column; align-items: center; z-index: 1; text-align: center; line-height: 1; }
  .main-val { font-size: 13px; font-weight: 700; color: #0a0a0a; margin-bottom: 2px; }
  .sub-label { font-size: 7px; font-weight: 700; color: #777777; text-transform: uppercase; }

  /* Pair 1: DD & MM (Primary Blue) */
.blue-pair .progress-arc {
    stroke: #2563EB;
}

/* Pair 2: HH & MM (Zoho Yellow) */
.yellow-pair .progress-arc {
    stroke: #FFC72C;
}

/* Logout Button */
.logout-btn {
    margin-left: 12px;
    padding: 6px 12px;
    background: #FEF2F2;
    color: #EF4444;
    border: 1px solid #FCA5A5;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.logout-btn:hover {
    background: #EF4444;
    color: #FFFFFF;
}

  /* --- Mobile Responsiveness --- */
  @media (max-width: 768px) {
      .desktop-only { display: none !important; }
      .search-container { width: auto !important; background: transparent !important; border: none !important; padding: 0 !important; }
      .search-input { display: none !important; }
      .top-header { padding: 12px 16px !important; }
      .logout-btn { padding: 4px 8px; font-size: 11px; }
  }


/* ===== Extracted from index.html (style block 19) ===== */

:root{
    --primary:#0062FF;
    --primary-light:#EAF2FF;
    --bg:#F4F6F8;
    --surface:#fff;
    --text-main:#0F172A;
    --text-muted:#64748B;
    --border:#E2E8F0;
    --shadow:0 4px 12px rgba(0,0,0,.04);
    --success:#10B981;
    --warning:#F59E0B;
    --secondary:#475569;
    --danger:#EF4444;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;-webkit-tap-highlight-color:transparent}
html,body{
    display:flex;
    height:100%;
    height:100dvh;
    width:100vw;
    overflow:hidden;
    background:var(--bg);
    color:var(--text-main);
}
#app-container{
    display:flex;
    height:100%;
    height:100dvh;
    width:100vw;
    overflow:hidden;
    visibility:hidden;
}
#sidebar-container{
    width:260px;
    height:100%;
    background:var(--surface);
    border-right:1px solid var(--border);
    flex-shrink:0;
    overflow-y:auto;
    transition:transform .3s ease;
    z-index:1000;
}
.main-wrapper{
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    height:100%;
}
#header-container{flex-shrink:0}
#bottomnav-container{display:none;flex-shrink:0}
#main-content{
    flex:1;
    overflow-y:auto;
    padding:24px;
    -webkit-overflow-scrolling:touch;
}
.view-section{display:none;animation:fadeIn .3s ease-in-out}
.view-section.active{display:block}
@keyframes fadeIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

.dash-top-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:20px;
    margin-bottom:24px;
}
.dash-card{
    background:var(--surface);
    border-radius:16px;
    padding:24px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    display:flex;
    flex-direction:column;
}
.card-title{
    font-size:14px;
    font-weight:700;
    color:var(--text-main);
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.fin-stat-container{
    display:flex;
    flex-direction:column;
    gap:16px;
    flex:1;
    justify-content:center;
}
.fin-stat{
    padding:16px;
    border-radius:12px;
    background:#FAFAFA;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.fin-stat.alert{background:#fff5f5;border-color:#fecaca}
.fin-stat.success-box{background:#ECFDF5;border-color:#A7F3D0}
.fin-stat-info{display:flex;flex-direction:column}
.fin-label{
    font-size:11px;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    margin-bottom:4px;
    letter-spacing:.5px;
}
.fin-amount{font-size:24px;font-weight:800;color:var(--text-main)}
.fin-stat.alert .fin-amount{color:var(--danger)}
.fin-stat.success-box .fin-amount{color:var(--success)}
.fin-icon{font-size:32px;color:var(--border)}
.fin-stat.alert .fin-icon{color:#fca5a5}
.fin-stat.success-box .fin-icon{color:#6EE7B7}
.chart-container{
    position:relative;
    height:180px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:16px;
}
.mini-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini-stat{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    border-radius:8px;
    background:#FAFAFA;
    border:1px solid var(--border);
}
.mini-stat-label{
    font-size:11px;
    font-weight:600;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    gap:6px;
}
.dot{width:8px;height:8px;border-radius:50%}
.mini-stat-val{font-size:13px;font-weight:700;color:var(--text-main)}
.cal-header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}
.cal-nav-btn{
    background:#FAFAFA;
    border:1px solid var(--border);
    border-radius:6px;
    font-size:20px;
    color:var(--text-main);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
}
.cal-nav-btn:hover{background:var(--surface);border-color:var(--primary);color:var(--primary)}
.cal-month-title{font-size:14px;font-weight:700;color:var(--text-main)}
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
    text-align:center;
}
.cal-day-name{
    font-size:10px;
    font-weight:700;
    color:var(--text-muted);
    padding-bottom:8px;
    text-transform:uppercase;
}
.cal-day{
    padding:8px 0;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
    border:1px solid transparent;
    position:relative;
}
.cal-day:hover{background:#FAFAFA;border-color:var(--border)}
.cal-day.active{
    background:var(--primary);
    color:#fff;
    font-weight:700;
    box-shadow:0 4px 10px rgba(0,98,255,.3);
}
.cal-day.has-event::after{
    content:'';
    position:absolute;
    bottom:4px;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--text-main);
}
.cal-day.active.has-event::after{background:#fff}
.cal-day.empty{pointer-events:none}

.dash-table-wrapper{
    background:var(--surface);
    border-radius:16px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
    overflow:hidden;
    width:100%;
    margin-bottom:40px;
}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.saas-table{
    width:100%;
    min-width:800px;
    border-collapse:collapse;
    text-align:left;
}
.saas-table th{
    padding:14px 20px;
    font-size:11px;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    background:#FAFAFA;
    border-bottom:1px solid var(--border);
    letter-spacing:.5px;
}
.saas-table td{
    padding:16px 20px;
    font-size:13px;
    font-weight:500;
    border-bottom:1px solid var(--border);
    color:var(--text-main);
    vertical-align:middle;
    white-space:nowrap;
}
.saas-table tr:last-child td{border-bottom:none}
.badge{
    padding:4px 10px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    display:inline-block;
    white-space:nowrap;
}
.badge-pending{background:#FFF7ED;color:var(--warning);border:1px solid #FFEDD5}
.badge-completed{background:#ECFDF5;color:var(--success);border:1px solid #D1FAE5}
.badge-rescheduled{background:#F8FAFC;color:var(--secondary);border:1px solid #E2E8F0}
.badge-cancelled{background:#FEF2F2;color:var(--danger);border:1px solid #FEE2E2}

.balance-no-due{color:#64748B!important;font-weight:700}
.balance-due{color:#EF4444!important;font-weight:700}
.balance-excess{color:#10B981!important;font-weight:700}

.dash-error{
    display:none;
    background:#FEF2F2;
    border:1px solid #FCA5A5;
    color:var(--danger);
    padding:12px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
    align-items:center;
    gap:8px;
}

#calc-popup-container{
    display:none;
    position:fixed;
    bottom:20px;
    right:20px;
    width:320px;
    height:480px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,.25);
    border:1px solid var(--border);
    z-index:10000;
    resize:both;
    overflow:hidden;
    flex-direction:column;
    min-width:250px;
    min-height:350px;
}
#calc-popup-header{
    background:var(--surface);
    color:var(--text-main);
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:move;
    border-bottom:1px solid var(--border);
    user-select:none;
}

@media(max-width:768px){
    #sidebar-container{
        position:fixed;
        z-index:1000;
        top:0;
        left:0;
        transform:translateX(-100%);
        width:280px;
        height:100%;
        box-shadow:5px 0 15px rgba(0,0,0,.1);
    }
    #sidebar-container.open{transform:translateX(0)}
    #bottomnav-container{display:block}
    #main-content{padding:16px;padding-bottom:90px}
    #calc-popup-container{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        bottom:auto;
        right:auto;
        resize:none;
        width:min(92vw,360px);
        height:min(76dvh,560px);
    }
    .dash-top-row{grid-template-columns:1fr;gap:12px}
    .dash-card{padding:16px;border-radius:12px}
}


/* ===== Extracted from ledgers.html (style block 20) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #ledger-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 40px; }
        
        #ledger-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        
        #ledger-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
        @media (min-width: 992px) { #ledger-module .grid-layout { grid-template-columns: 300px 1fr; } }

        #ledger-module .card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
        
        #ledger-module .form-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #ledger-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #ledger-module .input-group.two-cols { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #ledger-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #ledger-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; margin-bottom: 16px;}
        #ledger-module .form-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light); }
        #ledger-module .form-input:read-only { background: #E2E8F0; color: var(--text-muted); cursor: not-allowed; font-weight: 700; }
        
        #ledger-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #ledger-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        
        #ledger-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s;}
        #ledger-module .btn-outline:hover { background: #FAFAFA; border-color: var(--primary); color: var(--primary); }

        /* Table Styles */
        #ledger-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #ledger-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #ledger-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #ledger-module .saas-table th { padding: 16px 20px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #ledger-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-dr { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-cr { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-cat { background: var(--bg); border: 1px solid var(--border); color: var(--text-main); }
    

/* ===== Extracted from letterhead.html (style block 21) ===== */

    :root {
        --primary: #2563EB;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --bg-light: #F8FAFC;
        --stamp-green: #007B5E; /* Authentic Rubber Stamp Green */
    }

        #letterhead-module { font-family: 'Inter', sans-serif; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1120px;}

        /* --- A4 Screen Canvas (Mobile Responsive) --- */
        #letterhead-module .a4-canvas {
            width: 100%;
            max-width: 210mm; /* Exact A4 width */
            min-height: 297mm; /* Exact A4 height */
            background: #FFFFFF;
            padding: 20mm; /* A4 Margin */
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            margin-bottom: 24px;
            overflow: hidden; /* Contains the watermark */
        }

        /* --- Center Watermark --- */
        #letterhead-module .watermark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%; /* Scales dynamically with the page */
            max-width: 400px;
            height: auto;
            opacity: 0.08; /* Low opacity */
            pointer-events: none; /* Prevents it from blocking clicks on the text area */
            z-index: 0;
        }

        /* Elevate content above watermark */
        #letterhead-module .letter-header,
        #letterhead-module .meta-group,
        #letterhead-module .letter-body,
        #letterhead-module .footer-section {
            position: relative;
            z-index: 1;
        }

        /* --- Header --- */
        #letterhead-module .letter-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 2px solid var(--primary);
            padding-bottom: 16px;
            margin-bottom: 24px;
            gap: 16px;
        }
        #letterhead-module .logo-img { max-width: 130px; height: auto; }
        #letterhead-module .company-info { text-align: right; font-size: 11px; color: var(--text-muted); line-height: 1.5; }
        #letterhead-module .comp-title-img { max-width: 180px; height: auto; display: inline-block; margin-bottom: 4px; }

        #letterhead-module .branch-bar {
            font-size: 9px;
            color: var(--text-muted);
            background: var(--bg-light);
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #E8E5E1;
            text-align: center;
            margin-top: 8px;
        }

        /* --- Metadata Fields --- */
        #letterhead-module .meta-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
        #letterhead-module .meta-row { display: flex; align-items: center; gap: 12px; }
        #letterhead-module .meta-row.subject { align-items: flex-start; }
        #letterhead-module .meta-label { width: 70px; font-weight: 600; font-size: 13px; color: var(--text-main); flex-shrink: 0; }
        
        /* Inputs & Native Date Picker */
        #letterhead-module .meta-input { 
            flex: 1; 
            border: none; 
            border-bottom: 1px dashed var(--border); 
            outline: none; 
            font-size: 13px; 
            padding: 4px 0; 
            color: #111; 
            background: transparent;
            font-family: inherit;
        }
        #letterhead-module .meta-input:focus { border-bottom-color: var(--primary); }

        /* --- Content --- */
        #letterhead-module .letter-body { flex: 1; margin-bottom: 24px; }
        #letterhead-module .letter-body textarea { 
            width: 100%; height: 100%; min-height: 200px; 
            border: none; outline: none; resize: none; 
            font-size: 13px; line-height: 1.7; color: #111; 
            background: transparent; /* Essential for watermark visibility */
            font-family: inherit;
        }

        /* --- Sign-off & Seal --- */
        #letterhead-module .footer-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; min-height: 100px; }
        #letterhead-module .sign-block { font-size: 13px; color: var(--text-muted); line-height: 1.6; font-weight: 500; }
        
        /* --- Seal Integration Styles --- */
        #letterhead-module .seal-control-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
        
        #letterhead-module .seal-box-company {
            width: 63.5mm;
            height: 25.4mm;
            border: 2px solid var(--stamp-green);
            border-radius: 4px;
            background: transparent;
            color: var(--stamp-green);
            position: relative;
            overflow: hidden;
            font-family: "Times New Roman", serif;
            display: none;
        }
        #letterhead-module .seal-box-company .seal-name { text-align: center; font-size: 18px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4mm; line-height: 1; }
        #letterhead-module .seal-box-company .signature-line { position: absolute; left: 5mm; right: 5mm; bottom: 8mm; border-top: 1.5px solid var(--stamp-green); }
        #letterhead-module .seal-box-company .seal-role { position: absolute; right: 5mm; bottom: 2.5mm; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--stamp-green); }

        #letterhead-module .seal-box-doctor {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--stamp-green);
            font-family: "Arial", "Helvetica", sans-serif;
            text-align: center;
            line-height: 1.4;
        }
        #letterhead-module .seal-box-doctor .doc-name { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; }
        #letterhead-module .seal-box-doctor .doc-qual { font-size: 15px; font-weight: 700; }
        #letterhead-module .seal-box-doctor .doc-reg { font-size: 14px; font-weight: 700; margin-top: 2px; }
        #letterhead-module .seal-box-doctor .doc-role { font-size: 14px; font-weight: 700; margin-top: 2px; }

        /* --- Screen Control Action --- */
        #letterhead-module .print-ctrl { width: 100%; max-width: 800px; text-align: right; margin-bottom: 24px; }
        #letterhead-module .print-btn { padding: 12px 32px; background: var(--primary); color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 13px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        #letterhead-module .print-btn:hover { opacity: 0.9; }

        /* --- Strict Print Media Queries --- */
        @media (max-width: 768px) {
            #letterhead-module { padding: 0px; }
            #letterhead-module .a4-canvas { box-shadow: none; border: none; border-radius: 0; padding: 0; min-height: auto; height: auto; }
            #letterhead-module .letter-header { flex-direction: column; gap: 12px; }
            #letterhead-module .company-info { text-align: left; }
            #letterhead-module .print-ctrl { text-align: center; }
        }

        @media print {
            body { background: #FFF !important; padding: 0 !important; display: block !important; }
            #sidebar-container, #header-container, #bottomnav-container, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #letterhead-module .a4-canvas { box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; max-width: none !important; min-height: auto !important; height: auto !important; }
            #letterhead-module .meta-input { border-bottom: none !important; }
            
            /* Print colors accurately for the seal */
            #letterhead-module .seal-box-company, #letterhead-module .seal-box-doctor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    

/* ===== Extracted from login.html (style block 22) ===== */

        .bg-crossed-pattern { background: linear-gradient(135deg, #ffffff 50%, #f8fafc 50%); position: relative; }
        .bg-crossed-pattern::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); background-size: 32px 32px; opacity: 0.5; pointer-events: none; }
        .hover-float { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .hover-float:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 82, 204, 0.15); }
        #splash-screen { transition: opacity 0.6s ease-out, visibility 0.6s ease-out; }
        .fade-out { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
    

/* ===== Extracted from nav.html (style block 23) ===== */

    /* Wrapper to manage full height and push footer to the bottom */
    .sidebar-inner-wrapper { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
    
    /* Top Logo Styling - Automatically scales the 2000px image down to fit the sidebar */
    .sidebar-logo { max-width: 160px; height: auto; object-fit: contain; display: block; } 
    
    /* The nav menu takes up the remaining space (flex: 1) to push the footer down */
    .sidebar-nav { flex: 1; overflow-y: auto; padding-bottom: 20px; } 
    
    /* Sidebar Footer Styling */
    .sidebar-footer { padding: 20px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FAFAFA; margin-top: auto; }
    .footer-logo { width: 90px; height: auto; margin-bottom: 6px; object-fit: contain; }
    .footer-version { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }


/* ===== Extracted from patients.html (style block 24) ===== */

    /* --- Core Theme Variables --- */
    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;

        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;
        --grey-light: #F1F5F9;
        --grey-med: #CBD5E1;

        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);

        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #patient-module { font-family: 'Inter', sans-serif; }
        
        /* --- UI Components --- */
        #patient-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #patient-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #patient-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #patient-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #patient-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #patient-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }
        @media (min-width: 1024px) { #patient-module .input-group.four-cols { grid-template-columns: 1fr 1fr 1fr 1fr; } }

        #patient-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #patient-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #patient-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }
        #patient-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }

        #patient-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #patient-module .btn-primary:active { opacity: 0.8; }
        #patient-module .btn-primary:disabled { background: var(--grey-med); cursor: not-allowed; }
        #patient-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
        #patient-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}

        #patient-module .validation-msg { font-size: 12px; font-weight: 600; margin-top: 6px; display: none; }
        #patient-module .validation-msg.success { color: var(--success); display: block; }
        #patient-module .validation-msg.error { color: var(--danger); display: block; }

        /* --- Badges --- */
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap; margin-bottom: 4px; }
        .badge-normal { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
        .badge-regular { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
        .badge-both { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

        /* --- Table Styling --- */
        #patient-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #patient-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #patient-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0; }
        #patient-module .saas-table { width: 100%; border-collapse: collapse; text-align: left; }
        #patient-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); }
        #patient-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: top; }
        #patient-module .saas-table tr:last-child td { border-bottom: none; }
        #patient-module .patient-info { display: flex; flex-direction: column; }
        #patient-module .patient-info .pid { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 700; }

        /* --- CTA Links --- */
        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* --- Mobile Table Fix --- */
        @media (max-width: 767px) {
            #patient-module .saas-table thead { display: none; }
            #patient-module .saas-table, #patient-module .saas-table tbody, #patient-module .saas-table tr, #patient-module .saas-table td { display: block; width: 100%; }
            #patient-module .saas-table tr { padding: 16px; border-bottom: 1px solid var(--border); }
            
            #patient-module .saas-table td { 
                padding: 8px 0; 
                border: none; 
                display: flex; 
                flex-direction: column; 
                align-items: flex-start; 
            }
            
            #patient-module .saas-table td::before { 
                content: attr(data-label); 
                font-size: 10px; 
                color: var(--text-muted); 
                font-weight: 700; 
                text-transform: uppercase; 
                margin-bottom: 4px; 
                letter-spacing: 0.5px;
            }
            
            #patient-module .saas-table td:nth-child(1) { 
                padding-bottom: 16px; 
                border-bottom: 1px dashed var(--border); 
                margin-bottom: 8px;
            }
            
            #patient-module .saas-table td:nth-child(1)::before { display: none; }
            #patient-module .saas-table td:nth-child(1) .patient-info { flex-direction: row; align-items: center; gap: 8px; font-size: 16px; }

            .mobile-cta-container {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 6px;
            }
        }

        /* --- Clean Print Styling for PDF Export --- */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #patient-module .table-container { box-shadow: none; border: none; margin: 0; }
            #patient-module .table-header { padding: 0 0 10px 0; border-bottom: 2px solid #000; }
            #patient-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #patient-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from payments.html (style block 25) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #transaction-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--danger); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-expense { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .badge-payment { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from privacy.html (style block 26) ===== */

        #privacy-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
        
        #privacy-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        
        #privacy-module .modern-card { background: var(--surface); border-radius: 24px; padding: 40px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden; }
        
        #privacy-module .last-updated { font-size: 13px; font-weight: 600; color: var(--primary); background: var(--primary-light); display: inline-block; padding: 6px 12px; border-radius: 8px; margin-bottom: 24px; }
        
        #privacy-module h4 { font-size: 18px; font-weight: 700; color: var(--text-main); margin: 32px 0 12px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
        #privacy-module h4:first-of-type { margin-top: 0; }
        
        #privacy-module p { font-size: 14px; color: var(--secondary); line-height: 1.7; margin-bottom: 16px; }
        #privacy-module ul { font-size: 14px; color: var(--secondary); line-height: 1.7; margin-bottom: 16px; padding-left: 20px; }
        #privacy-module li { margin-bottom: 8px; }
        #privacy-module li::marker { color: var(--primary); }

        .highlight-box { background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 12px; padding: 20px; margin: 24px 0; }
        .highlight-box h5 { margin: 0 0 8px 0; color: #065F46; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px;}
        .highlight-box p { margin: 0; color: #047857; font-size: 14px; font-weight: 500; }

        .contact-block { background: #F8FAFC; border-radius: 12px; padding: 20px; border: 1px solid var(--border); margin-top: 32px; }
        .contact-block strong { color: var(--text-main); }
        .contact-link { color: var(--primary); text-decoration: none; font-weight: 600; transition: 0.2s; }
        .contact-link:hover { text-decoration: underline; }

        @media (max-width: 600px) {
            #privacy-module .modern-card { padding: 24px; }
        }
    

/* ===== Extracted from qr.html (style block 27) ===== */

        #upi-qr-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1.1fr 0.9fr; } }

        #upi-qr-module .modern-card { background: var(--surface); border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden;}
        
        #upi-qr-module .form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #upi-qr-module .input-wrapper { margin-bottom: 20px; }
        #upi-qr-module .form-input { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 15px; color: var(--text-main); background: #F8FAFC; outline: none; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-light); }
        #upi-qr-module .form-input:read-only { background: #E2E8F0; color: var(--text-muted); cursor: not-allowed; box-shadow: none; font-weight: 600;}
        
        #upi-qr-module .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #1D4ED8 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);}
        #upi-qr-module .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 99, 235, 0.3); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 2px solid var(--border); padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
        
        #upi-qr-module .btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 211, 102, 0.2);}
        #upi-qr-module .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 211, 102, 0.3); }

        .qr-preview-container { background: #F1F5F9; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 480px; text-align: center; position: relative; }
        
        /* The Premium Canvas Receipt */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: none; background: white; transition: 0.3s; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
        
        .section-header { margin: 0 0 24px 0; color: var(--text-main); font-size: 18px; border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between;}
    

/* ===== Extracted from qr1.html (style block 28) ===== */

        #upi-qr-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1fr 1fr; } }

        #upi-qr-module .card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
        #upi-qr-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #upi-qr-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; margin-bottom: 16px;}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #upi-qr-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #upi-qr-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: #FAFAFA; border-color: var(--primary); color: var(--primary); }

        .qr-preview-container { background: #F8FAFC; border: 2px dashed var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; }
        
        /* The Canvas where the QR Receipt is drawn */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; background: white; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
    

/* ===== Extracted from qr2.html (style block 29) ===== */

        #upi-qr-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 10px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1.1fr 0.9fr; } }

        #upi-qr-module .modern-card { background: var(--surface); border-radius: 24px; padding: 30px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04); border: 1px solid var(--border); position: relative; overflow: hidden;}
        
        #upi-qr-module .form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
        
        #upi-qr-module .input-wrapper { margin-bottom: 20px; }
        #upi-qr-module .form-input { width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 15px; color: var(--text-main); background: #F8FAFC; outline: none; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-light); }
        #upi-qr-module .form-input:read-only { background: #E2E8F0; color: var(--text-muted); cursor: not-allowed; box-shadow: none; font-weight: 600;}
        
        #upi-qr-module .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, #1D4ED8 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);}
        #upi-qr-module .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 99, 235, 0.3); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 2px solid var(--border); padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
        
        #upi-qr-module .btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); color: white; border: none; padding: 16px 24px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 8px 16px rgba(37, 211, 102, 0.2);}
        #upi-qr-module .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(37, 211, 102, 0.3); }

        .qr-preview-container { background: #F1F5F9; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 480px; text-align: center; position: relative; }
        
        /* The Premium Canvas Receipt */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); display: none; background: white; transition: 0.3s; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
        
        .section-header { margin: 0 0 24px 0; color: var(--text-main); font-size: 18px; border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between;}
    

/* ===== Extracted from qrorg.html (style block 30) ===== */

        #upi-qr-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; margin: 0 auto; padding-bottom: 40px;}
        
        #upi-qr-module .section-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; color: var(--text-main); display: flex; align-items: center; gap: 8px;}
        
        #upi-qr-module .grid-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
        @media (min-width: 992px) { #upi-qr-module .grid-layout { grid-template-columns: 1fr 1fr; } }

        #upi-qr-module .card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
        #upi-qr-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        #upi-qr-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; margin-bottom: 16px;}
        #upi-qr-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        
        #upi-qr-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
        #upi-qr-module .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
        
        #upi-qr-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s;}
        #upi-qr-module .btn-outline:hover { background: #FAFAFA; border-color: var(--primary); color: var(--primary); }

        .qr-preview-container { background: #F8FAFC; border: 2px dashed var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; }
        
        /* The Canvas where the QR Receipt is drawn */
        #compositeCanvas { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none; background: white; }
        
        .action-buttons { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; width: 100%;}
        @media (max-width: 600px) { .action-buttons { grid-template-columns: 1fr; } }
    

/* ===== Extracted from receipt.html (style block 31) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #transaction-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--success); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-receipt { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-sales { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        #patientSummaryDash { display: none; background: #ECFDF5; border: 1px dashed var(--success); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        .ledger-summary-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; background: #FAFAFA; border-bottom: 1px solid var(--border); padding: 16px 20px; }
        .ledger-box { padding: 16px; border-radius: 12px; background: white; border: 1px solid var(--border); }
        .ledger-box h5 { margin: 0 0 4px 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }
        .ledger-box p { margin: 0; font-size: 20px; font-weight: 800; color: var(--text-main); }

        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from seal.html (style block 32) ===== */

    :root {
        --primary: #2563EB;
        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);

        --stamp-green: #007B5E; /* Authentic Rubber Stamp Green */
    }

        #seal-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 800px; margin: 0 auto; }
        
        #seal-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        #seal-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        
        /* --- Controls --- */
        .seal-selector-group { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
        .seal-option { flex: 1; min-width: 200px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; background: #FAFAFA; }
        .seal-option:hover { border-color: var(--primary); }
        .seal-option.active { border-color: var(--primary); background: var(--primary-light); }
        .seal-option input[type="radio"] { accent-color: var(--primary); transform: scale(1.2); cursor: pointer; }
        .seal-option-details { display: flex; flex-direction: column; }
        .seal-option-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
        .seal-option-desc { font-size: 12px; color: var(--text-muted); }

        .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; }
        .btn-outline:hover { background: #FAFAFA; }

        /* --- Preview Canvas --- */
        .canvas-area { background: #F0F0F0; border-radius: 16px; padding: 40px; display: flex; justify-content: center; align-items: center; min-height: 300px; border: 1px dashed #CCC; }

        /* --- Seal 1: Company Seal (2.5" x 1") --- */
        .seal-box-company {
            width: 63.5mm;
            height: 25.4mm;
            border: 2px solid var(--stamp-green);
            border-radius: 4px;
            background: transparent;
            color: var(--stamp-green);
            position: relative;
            overflow: hidden;
            font-family: "Times New Roman", serif;
            display: none; /* Toggled by JS */
        }
        .seal-box-company .seal-name { text-align: center; font-size: 18px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4mm; line-height: 1; }
        .seal-box-company .signature-line { position: absolute; left: 5mm; right: 5mm; bottom: 8mm; border-top: 1.5px solid var(--stamp-green); }
        .seal-box-company .seal-role { position: absolute; right: 5mm; bottom: 2.5mm; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--stamp-green); }

        /* --- Seal 2: Doctor Seal (Sans-serif, No Border) --- */
        .seal-box-doctor {
            display: none; /* Toggled by JS */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--stamp-green);
            font-family: "Arial", "Helvetica", sans-serif; /* Matches the image */
            text-align: center;
            line-height: 1.4;
        }
        .seal-box-doctor .doc-name { font-size: 17px; font-weight: 800; letter-spacing: 0.5px; }
        .seal-box-doctor .doc-qual { font-size: 15px; font-weight: 700; }
        .seal-box-doctor .doc-reg { font-size: 14px; font-weight: 700; margin-top: 2px; }
        .seal-box-doctor .doc-role { font-size: 14px; font-weight: 700; margin-top: 2px; }

        /* --- Print Styles --- */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            
            .canvas-area { background: white; border: none; padding: 0; min-height: auto; align-items: flex-start; justify-content: flex-start; }
            .seal-box-company, .seal-box-doctor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        }
    

/* ===== Extracted from sidebar..html (style block 33) ===== */

    :root {
        --primary: #0062FF;
        --primary-light: #EAF2FF;
        
        --bg: #F4F6F8;
        --surface: #ffffff;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        --success: #10B981;
        --warning: #F59E0B; 
        --secondary: #475569;
        --danger: #EF4444; 
    }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
        body { display: flex; height: 100vh; width: 100vw; overflow: hidden; background: var(--bg); color: var(--text-main); }

        #sidebar-container { width: 260px; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); flex-shrink: 0; overflow-y: auto; transition: transform 0.3s ease; z-index: 1000; }
        .main-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
        #header-container { flex-shrink: 0; }
        #bottomnav-container { display: none; flex-shrink: 0; }

        #main-content { flex: 1; overflow-y: auto; padding: 24px; -webkit-overflow-scrolling: touch; }
        .view-section { display: none; animation: fadeIn 0.3s ease-in-out; }
        .view-section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .dash-top-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 24px; }
        .dash-card { background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); border: 1px solid var(--border); display: flex; flex-direction: column;}
        .card-title { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}

        .fin-stat-container { display: flex; flex-direction: column; gap: 16px; flex: 1; justify-content: center; }
        .fin-stat { padding: 16px; border-radius: 12px; background: #FAFAFA; border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;}
        .fin-stat.alert { background: #fff5f5; border-color: #fecaca; }
        .fin-stat.success-box { background: #ECFDF5; border-color: #A7F3D0; }
        .fin-stat-info { display: flex; flex-direction: column; }
        .fin-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px;}
        .fin-amount { font-size: 24px; font-weight: 800; color: var(--text-main); }
        .fin-stat.alert .fin-amount { color: var(--danger); }
        .fin-stat.success-box .fin-amount { color: var(--success); }
        .fin-icon { font-size: 32px; color: var(--border); }
        .fin-stat.alert .fin-icon { color: #fca5a5; }
        .fin-stat.success-box .fin-icon { color: #6EE7B7; }

        .chart-container { position: relative; height: 180px; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 16px;}
        .mini-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .mini-stat { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 8px; background: #FAFAFA; border: 1px solid var(--border); }
        .mini-stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px;}
        .dot { width: 8px; height: 8px; border-radius: 50%; }
        .mini-stat-val { font-size: 13px; font-weight: 700; color: var(--text-main); }

        .cal-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .cal-nav-btn { background: #FAFAFA; border: 1px solid var(--border); border-radius: 6px; font-size: 20px; color: var(--text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 4px;}
        .cal-nav-btn:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }
        .cal-month-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
        .cal-day-name { font-size: 10px; font-weight: 700; color: var(--text-muted); padding-bottom: 8px; text-transform: uppercase;}
        .cal-day { padding: 8px 0; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s; border: 1px solid transparent; position: relative;}
        .cal-day:hover { background: #FAFAFA; border-color: var(--border); }
        .cal-day.active { background: var(--primary); color: white; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 98, 255, 0.3);}
        .cal-day.has-event::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--text-main); }
        .cal-day.active.has-event::after { background: white; }
        .cal-day.empty { pointer-events: none; }

        .dash-table-wrapper { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; width: 100%; margin-bottom: 40px; }
        
        .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        .saas-table th { padding: 14px 20px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); letter-spacing: 0.5px;}
        .saas-table td { padding: 16px 20px; font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--border); color: var(--text-main); vertical-align: middle; white-space: nowrap;}
        .saas-table tr:last-child td { border-bottom: none; }

        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; white-space: nowrap;}
        .badge-pending { background: #FFF7ED; color: var(--warning); border: 1px solid #FFEDD5; }
        .badge-completed { background: #ECFDF5; color: var(--success); border: 1px solid #D1FAE5; }
        .badge-rescheduled { background: #F8FAFC; color: var(--secondary); border: 1px solid #E2E8F0; }
        .badge-cancelled { background: #FEF2F2; color: var(--danger); border: 1px solid #FEE2E2; }

        .dash-error { display: none; background: #FEF2F2; border: 1px solid #FCA5A5; color: var(--danger); padding: 12px; border-radius: 8px; font-size: 13px; font-weight: 600; margin-bottom: 20px; align-items: center; gap: 8px; }

        /* Draggable & Resizable Calculator Popup Styles */
        #calc-popup-container {
            display: none; 
            position: fixed; 
            bottom: 20px; 
            right: 20px; 
            width: 320px; 
            height: 480px; 
            background: white; 
            border-radius: 12px; 
            box-shadow: 0 10px 40px rgba(0,0,0,0.25); 
            border: 1px solid var(--border); 
            z-index: 10000; 
            resize: both; /* Makes it resizable */
            overflow: hidden; 
            flex-direction: column;
            min-width: 250px;
            min-height: 350px;
        }
        #calc-popup-header {
            background: var(--surface); 
            color: var(--text-main); 
            padding: 12px 16px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            cursor: move; /* Drag cursor */
            border-bottom: 1px solid var(--border);
            user-select: none;
        }

        @media (max-width: 768px) {
            #sidebar-container { position: fixed; z-index: 1000; transform: translateX(-100%); width: 280px; box-shadow: 5px 0 15px rgba(0,0,0,0.1); }
            #sidebar-container.open { transform: translateX(0); }
            #bottomnav-container { display: block; }
            #main-content { padding: 16px; padding-bottom: 100px; }
            
            /* On mobile, center the calculator popup */
            #calc-popup-container {
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
                bottom: auto; right: auto;
                resize: none;
            }
        }
    

/* ===== Extracted from sidebar.html (style block 34) ===== */

    /* =========================================================
       SIDEBAR BASE
       ========================================================= */

    .sidebar-inner-wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        height: 100%;
    }


    /* =========================================================
       SIDEBAR HEADER / STRA CARE LOGO
       ========================================================= */

    .sidebar-header {
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 10;
        border-bottom: 1px solid var(--border);

        padding: 16px 20px;

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

        min-height: 76px;
    }

    .sidebar-brand {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-logo {
        display: block;
        width: 100%;
        max-width: 190px;
        height: auto;
        max-height: 52px;
        object-fit: contain;
    }

    .close-menu {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-main);

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

        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .close-menu:hover {
        background: #F5F5F5;
    }


    /* =========================================================
       NAVIGATION
       ========================================================= */

    .sidebar-nav {
        flex: 1;
        overflow-y: auto;

        padding-top: 14px;
        padding-bottom: 20px;

        display: flex;
        flex-direction: column;
        gap: 3px;

        scrollbar-width: thin;
    }


    /* =========================================================
       NAVIGATION LINKS
       ========================================================= */

    .nav-link {
        display: flex;
        align-items: center;

        width: calc(100% - 32px);
        margin: 0 16px;

        padding: 11px 14px;

        border: none;
        background: transparent;

        text-align: left;
        cursor: pointer;

        font-size: 14px;
        font-weight: 500;

        color: var(--text-muted);

        border-radius: 8px;

        transition:
            background 0.2s ease,
            color 0.2s ease;

        font-family: inherit;
    }

    .nav-link:hover {
        background: #FAFAFA;
        color: var(--text-main);
    }

    .nav-link.active {
        background: var(--primary-light);
        color: var(--primary);
        font-weight: 600;
    }

    .nav-link .material-symbols-rounded {
        font-size: 21px;
        margin-right: 12px;
        color: inherit;
        transition: color 0.2s ease;
        flex-shrink: 0;
    }


    /* =========================================================
       DIVIDERS
       ========================================================= */

    .nav-divider {
        height: 1px;
        background: var(--border);

        margin: 11px 24px;

        flex-shrink: 0;
    }


    /* =========================================================
       BADGES
       ========================================================= */

    .menu-badge {
        margin-left: auto;

        background: var(--primary);
        color: white;

        padding: 2px 8px;

        border-radius: 20px;

        font-size: 11px;
        font-weight: 700;
    }

    .menu-badge.pending {
        background: var(--warning);
        color: #fff;
    }


    /* =========================================================
       FOOTER
       ========================================================= */

    .sidebar-footer {
        padding: 18px 20px;

        border-top: 1px solid var(--border);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background: #FAFAFA;

        margin-top: auto;
        flex-shrink: 0;
    }

    .footer-logo {
        width: 82px;
        height: auto;

        margin-bottom: 6px;

        object-fit: contain;
    }

    .footer-app-name {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-main);

        margin-bottom: 2px;

        text-align: center;
    }

    .footer-version {
        font-size: 11px;
        font-weight: 600;

        color: var(--text-muted);

        text-transform: uppercase;
        letter-spacing: 0.5px;
    }


    /* =========================================================
       DESKTOP
       ========================================================= */

    @media (min-width: 769px) {

        .close-menu {
            display: none;
        }

        .sidebar-header {
            justify-content: center;
        }

        .sidebar-logo {
            max-width: 175px;
        }
    }


    /* =========================================================
       MOBILE SIDEBAR
       ========================================================= */

    @media (max-width: 768px) {

        .sidebar-header {
            padding: 14px 16px;

            min-height: 82px;

            justify-content: space-between;
        }

        .sidebar-brand {
            justify-content: flex-start;
        }

        .sidebar-logo {
            width: 100%;
            max-width: 190px;
            max-height: 55px;
        }

        .close-menu {
            display: flex;

            width: 38px;
            height: 38px;

            flex-shrink: 0;
        }

        .close-menu .material-symbols-rounded {
            font-size: 23px;
        }

        .sidebar-nav {
            padding-top: 12px;
            padding-bottom: 20px;
        }

        .nav-link {
            width: calc(100% - 24px);
            margin: 0 12px;

            padding: 12px 14px;

            font-size: 14px;
        }

        .nav-link .material-symbols-rounded {
            font-size: 21px;
            margin-right: 12px;
        }

        .nav-divider {
            margin: 10px 20px;
        }

        .sidebar-footer {
            padding: 16px 20px;
        }
    }


/* ===== Extracted from staff.html (style block 35) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;

        --bg: #F8FAFC;
        --surface: #FFFFFF;

        --text-main: #0F172A;
        --text-muted: #64748B;

        --border: #E2E8F0;
        --grey-med: #CBD5E1;

        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);

        --danger: #EF4444;
    }

        #staff-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; }
        #staff-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #staff-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #staff-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #staff-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #staff-module .input-group { grid-template-columns: 1fr 1fr 1fr; } }

        #staff-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #staff-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #staff-module .readonly-input { background: #F4F4F4; color: var(--text-muted); font-weight: 600; pointer-events: none; }

        #staff-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
        #staff-module .btn-primary:active { opacity: 0.8; }
        #staff-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
        
        #staff-module .icon-action { color: var(--text-muted); cursor: pointer; font-size: 20px; transition: color 0.2s; }
        #staff-module .icon-action:hover { color: var(--primary); }
        #staff-module .icon-action.delete:hover { color: var(--danger); }

        /* Google Sheet Style Horizontal Scroll Table */
        #staff-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #staff-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        #staff-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0; }
        
        #staff-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #staff-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #staff-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #staff-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #staff-module .saas-table tr:last-child td { border-bottom: none; }
        
        #staff-module .t-id { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 4px 8px; border-radius: 6px; }

        /* REMOVED the restrictive mobile max-width card CSS */
    

/* ===== Extracted from temp-invoice.html (style block 36) ===== */

:root{
  --blue:#1769C2;
  --blue-dark:#0B4F91;
  --blue-soft:#EAF3FF;
  --green:#0A8F68;
  --green-dark:#067052;
  --green-soft:#EAF8F3;
  --ink:#172033;
  --muted:#667085;
  --line:#D9E2EC;
  --paper:#fff;
  --page:#F3F6FA;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--page);font-family:Inter,Arial,sans-serif;color:var(--ink)}
body{padding:28px}
.invoice-wrap{width:210mm;min-height:297mm;margin:auto;background:var(--paper);box-shadow:0 10px 35px rgba(15,23,42,.12);position:relative;overflow:hidden}
.invoice{min-height:297mm;padding:16mm 17mm 14mm;position:relative}
.top-accent{position:absolute;left:0;top:0;width:100%;height:6px;background:linear-gradient(90deg,var(--blue) 0 68%,var(--green) 68% 100%)}
.header{display:flex;justify-content:space-between;gap:24px;padding-top:4px;padding-bottom:13px;border-bottom:2px solid var(--blue)}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.logo{width:72px;height:72px;object-fit:contain;border-radius:8px;display:block}
.brand-text{min-width:0}
.company-name{font-size:24px;font-weight:800;letter-spacing:-.6px;color:var(--blue-dark);line-height:1.1}
.tagline{font-size:10px;color:var(--green);font-weight:700;margin-top:4px}
.company-contact{text-align:right;font-size:9.5px;line-height:1.55;color:var(--muted);max-width:310px}
.company-contact strong{color:var(--ink)}
.invoice-title{margin-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.invoice-title h1{margin:0;color:var(--blue-dark);font-size:21px;letter-spacing:.8px;line-height:1.2}
.invoice-title .type{font-size:10px;font-weight:700;color:var(--green);background:var(--green-soft);padding:6px 10px;border-radius:5px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:14px}
.meta-box{border:1px solid var(--line);border-radius:7px;padding:9px 11px;background:#fff}
.meta-label{font-size:8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.meta-value{font-size:11px;font-weight:600;margin-top:4px;min-height:14px}
.patient{margin-top:18px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.section-head{background:linear-gradient(90deg,var(--blue-soft),#fff);border-left:4px solid var(--blue);padding:8px 11px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--blue-dark)}
.patient-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0}
.field{padding:9px 11px;border-right:1px solid var(--line);border-top:1px solid var(--line)}
.field:nth-child(3n){border-right:0}
.field-label{font-size:8px;color:var(--muted);text-transform:uppercase;font-weight:700}
.field-value{font-size:11px;font-weight:600;margin-top:3px;min-height:14px}
.service{margin-top:18px}
table{width:100%;border-collapse:collapse;font-size:10px}
thead th{background:var(--blue-dark);color:#fff;padding:8px 8px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.4px}
thead th:last-child,td:last-child{text-align:right}
tbody td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:1px solid var(--line)}
.service-main{font-weight:700;color:var(--ink)}
.service-sub{font-size:8.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.amount{font-weight:700;white-space:nowrap}
.summary{display:flex;justify-content:flex-end;margin-top:10px}
.summary-box{width:270px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sum-row{display:flex;justify-content:space-between;padding:7px 11px;font-size:10px;border-bottom:1px solid var(--line)}
.sum-row:last-child{border-bottom:0}
.sum-row.total{background:var(--blue-soft);font-weight:800;color:var(--blue-dark);font-size:12px}
.sum-row.paid{color:var(--green-dark);font-weight:700;background:var(--green-soft)}
.sum-row.balance{font-weight:800}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px}
.info-box{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.info-title{padding:7px 10px;background:#F8FAFC;color:var(--blue-dark);font-size:9px;font-weight:800;text-transform:uppercase}
.info-body{padding:9px 10px;font-size:9.5px;line-height:1.55;color:#475467;min-height:58px}
.amount-words{margin-top:13px;padding:9px 11px;border-left:4px solid var(--green);background:var(--green-soft);font-size:9.5px}
.amount-words strong{color:var(--green-dark)}
.signature{margin-top:25px;display:flex;justify-content:flex-end}
.sign-box{width:220px;text-align:center}
.signature-space{height:43px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sign-name{font-size:10px;font-weight:800}
.sign-qual{font-size:8.5px;color:var(--muted);line-height:1.45}
.footer{margin-top:20px;padding-top:9px;border-top:2px solid var(--green);display:flex;justify-content:space-between;gap:20px;font-size:8px;color:var(--muted);line-height:1.5}
.footer-right{text-align:right}
.watermark{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:125mm;max-width:70%;opacity:.035;pointer-events:none;display:block}
.actions{width:210mm;margin:0 auto 12px;display:flex;justify-content:flex-end;gap:8px}
.btn{border:0;border-radius:7px;padding:10px 15px;font:600 12px Inter;cursor:pointer}
.btn-print{background:var(--blue);color:white}
.btn-close{background:white;color:var(--ink);border:1px solid var(--line)}

.editable{outline:none;border-bottom:1px dashed transparent}
.editable:hover,.editable:focus{border-bottom-color:var(--blue)}

@media(max-width:850px){
 body{padding:0;background:#fff}
 .actions{width:100%;padding:10px;position:sticky;top:0;background:#fff;z-index:5;border-bottom:1px solid var(--line)}
 .invoice-wrap{width:100%;min-height:auto;box-shadow:none}
 .invoice{min-height:auto;padding:9mm 7mm}
 .header{flex-direction:column}
 .company-contact{text-align:left;max-width:none}
 .meta,.patient-grid,.info-grid{grid-template-columns:1fr}
 .field{border-right:0!important}
 .summary-box{width:100%}
 .invoice-title{align-items:flex-start;flex-direction:column}
 .footer{flex-direction:column}.footer-right{text-align:left}
}

@page{size:A4;margin:0}
@media print{
 body{padding:0;background:#fff}
 .actions{display:none!important}
 .invoice-wrap{width:210mm;min-height:297mm;box-shadow:none}
 .invoice{min-height:297mm}
 *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}





/* ===== Extracted from therapist.html (style block 37) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --danger: #EF4444;
    }

        #therapist-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; }
        #therapist-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #therapist-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #therapist-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #therapist-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #therapist-module .input-group { grid-template-columns: 1fr 1fr 1fr; } }

        #therapist-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #therapist-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #therapist-module .readonly-input { background: #F4F4F4; color: var(--text-muted); font-weight: 600; pointer-events: none; }

        #therapist-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
        #therapist-module .btn-primary:active { opacity: 0.8; }
        #therapist-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
        
        #therapist-module .icon-action { color: var(--text-muted); cursor: pointer; font-size: 20px; transition: color 0.2s; }
        #therapist-module .icon-action:hover { color: var(--primary); }
        #therapist-module .icon-action.delete:hover { color: var(--danger); }

        #therapist-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #therapist-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;}
        #therapist-module .table-header h4 { font-size: 16px; font-weight: 600; margin: 0; }
        
        /* Table Responsive handles Google Sheets style scrolling */
        #therapist-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #therapist-module .saas-table { width: 100%; min-width: 800px; border-collapse: collapse; text-align: left; }
        #therapist-module .saas-table th { padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #therapist-module .saas-table td { padding: 16px 20px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #therapist-module .saas-table tr:last-child td { border-bottom: none; }
        
        #therapist-module .t-id { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-light); padding: 4px 8px; border-radius: 6px; }

        /* DELETED the @media (max-width: 767px) that was turning rows into cards */
    

/* ===== Extracted from transaction.html (style block 38) ===== */

    :root {
        --primary: #2563EB;
        --primary-light: #EFF6FF;
        --bg: #F8FAFC;
        --surface: #FFFFFF;
        --text-main: #0F172A;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --grey-med: #CBD5E1;
        --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
        --success: #10B981;
        --danger: #EF4444;
        --secondary: #64748B;
    }

        #transaction-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 1120px; }
        #transaction-module .section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        
        #transaction-module .form-card { background: var(--surface); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: 24px; }
        #transaction-module .form-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; }
        
        #transaction-module .input-group { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
        @media (min-width: 768px) { #transaction-module .input-group { grid-template-columns: 1fr 1fr; } }
        @media (min-width: 1024px) { #transaction-module .input-group.three-cols { grid-template-columns: 1fr 1fr 1fr; } }

        #transaction-module .form-input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 14px; color: var(--text-main); background: #FAFAFA; outline: none; transition: border 0.2s; appearance: auto; }
        #transaction-module .form-input:focus { border-color: var(--primary); background: var(--surface); }
        #transaction-module .form-input:disabled { background: #F0F0F0; color: #999; cursor: not-allowed; }

        #transaction-module .readonly-input { background: transparent; border: 1px dashed transparent; padding-left: 0; font-weight: 700; color: var(--text-main); pointer-events: none; }
        
        #transaction-module .btn-primary { background: var(--primary); color: white; border: none; padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
        #transaction-module .btn-primary:active { opacity: 0.8; }
        #transaction-module .btn-outline { background: var(--surface); color: var(--text-main); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
        #transaction-module .btn-verify { background: var(--text-main); color: #fff; border: none; padding: 0 20px; border-radius: 12px; font-weight: 600; cursor: pointer; font-size: 13px;}
        
        /* Google Sheet Style Table (Horizontal Scroll) */
        #transaction-module .table-container { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
        #transaction-module .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        #transaction-module .table-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
        #transaction-module .saas-table { width: 100%; min-width: 900px; border-collapse: collapse; text-align: left; }
        #transaction-module .saas-table th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; background: #FAFAFA; border-bottom: 1px solid var(--border); white-space: nowrap; }
        #transaction-module .saas-table td { padding: 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
        
        .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; display: inline-block; }
        .badge-sales { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .badge-expense { background: rgba(251, 146, 60, 0.1); color: var(--danger); }
        .badge-receipt { background: rgba(100, 116, 139, 0.1); color: var(--secondary); }

        .cta-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #FAFAFA; border: 1px solid var(--border); transition: 0.2s; text-decoration: none; }
        .cta-link:hover { background: var(--surface); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

        /* Patient Summary Dash */
        #patientSummaryDash { display: none; background: #fef5e8; border: 1px dashed var(--primary); padding: 16px; border-radius: 12px; margin-bottom: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
        .summary-metric { display: flex; flex-direction: column; }
        .summary-metric span { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px;}
        .summary-metric strong { font-size: 18px; font-weight: 800; color: var(--text-main); }

        /* Print Override */
        @media print {
            body { background: white; padding: 0; }
            #sidebar-container, #header-container, #bottomnav-container, .form-card, .section-title, .no-print { display: none !important; }
            .main-wrapper { flex: 1; display: block; overflow: visible; }
            #main-content { padding: 0; overflow: visible; }
            #transaction-module .table-container { box-shadow: none; border: none; margin: 0; }
            #transaction-module .saas-table th { background: white; color: black; border-bottom: 1px solid #000; }
            #transaction-module .saas-table td { border-bottom: 1px solid #E8E5E1; }
        }
    

/* ===== Extracted from updates.html (style block 39) ===== */

        #updates-module { font-family: 'Inter', sans-serif; width: 100%; max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
        
        #updates-module .section-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; color: var(--text-main); display: flex; align-items: center; gap: 10px; }
        #updates-module .section-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; font-weight: 500; }
        
        /* Timeline Container */
        .timeline { position: relative; margin-left: 16px; padding-left: 32px; border-left: 2px solid var(--border); }
        
        /* Timeline Item */
        .timeline-item { position: relative; margin-bottom: 32px; }
        .timeline-item:last-child { margin-bottom: 0; }
        
        /* Timeline Dot */
        .timeline-dot { position: absolute; left: -41px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 4px solid var(--primary); box-shadow: 0 0 0 4px var(--bg); }
        .timeline-dot.new { border-color: var(--success); }
        .timeline-dot.fix { border-color: var(--warning); }

        /* Update Card */
        .update-card { background: var(--surface); border-radius: 16px; padding: 24px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03); border: 1px solid var(--border); transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .update-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); }
        
        .update-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
        .update-version { font-size: 18px; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
        .update-date { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--bg); padding: 4px 10px; border-radius: 6px; }
        
        .update-body { font-size: 14px; color: var(--secondary); line-height: 1.6; }
        .update-body ul { margin-top: 12px; padding-left: 20px; }
        .update-body li { margin-bottom: 8px; }
        .update-body li::marker { color: var(--primary); }

        /* Badges */
        .upd-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        .upd-feature { background: #ECFDF5; color: #10B981; border: 1px solid #A7F3D0; }
        .upd-improvement { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
        .upd-fix { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }

        @media (max-width: 600px) {
            .timeline { margin-left: 8px; padding-left: 24px; }
            .timeline-dot { left: -33px; width: 14px; height: 14px; border-width: 3px; }
            .update-card { padding: 16px; }
        }
    

/* ===== Extracted from upi-qr.html (style block 40) ===== */

    /* Wrapper to manage full height */
    .sidebar-inner-wrapper { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
    
    /* Make the top logo header sticky */
    .sidebar-header { position: sticky; top: 0; background: var(--surface); z-index: 10; border-bottom: 1px solid var(--border); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;}
    .sidebar-logo { max-width: 140px; height: auto; object-fit: contain; display: block; } 
    .close-menu { background: none; border: none; cursor: pointer; color: var(--text-main); display: flex; align-items: center; justify-content: center; }
    
    /* Navigation Container */
    .sidebar-nav { flex: 1; overflow-y: auto; padding-top: 16px; padding-bottom: 20px; display: flex; flex-direction: column; gap: 4px; } 
    
    /* Sidebar Navigation Links */
    .nav-link { 
        display: flex; 
        align-items: center; 
        width: calc(100% - 32px); 
        margin: 0 16px; 
        padding: 12px 16px; 
        border: none; 
        background: transparent; 
        text-align: left; 
        cursor: pointer; 
        font-size: 14px; 
        font-weight: 500; 
        color: var(--text-muted); 
        border-radius: 8px; 
        transition: all 0.2s ease; 
        font-family: inherit;
    }
    .nav-link:hover { background: #FAFAFA; color: var(--text-main); }
    .nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
    .nav-link .material-symbols-rounded { font-size: 22px; margin-right: 12px; color: inherit; transition: color 0.2s ease; }
    
    /* Dividers and Badges */
    .nav-divider { height: 1px; background: var(--border); margin: 12px 24px; flex-shrink: 0; }
    .menu-badge { margin-left: auto; background: var(--primary); color: white; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .menu-badge.pending { background: var(--warning); color: #fff; }

    /* App Name and Version at the bottom */
    .sidebar-footer { padding: 20px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FAFAFA; margin-top: auto; flex-shrink: 0;}
    .footer-logo { width: 90px; height: auto; margin-bottom: 6px; object-fit: contain; }
    .footer-app-name { font-size: 13px; font-weight: 800; color: var(--text-main); margin-bottom: 2px; text-align: center; }
    .footer-version { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

    /* Hide close button on desktop */
    @media (min-width: 769px) {
        .close-menu { display: none; }
    }


/* ===== Extracted from header.html (unclosed style fragment) ===== */

    /* =========================================================
       PROGRESS CLOCK HEADER
       ========================================================= */

    .metric-round {
        position: relative;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clock-svg {
        transform: rotate(-90deg);
        position: absolute;
    }

    .clock-svg circle {
        fill: none;
        stroke-width: 4;
        stroke-linecap: round;
    }

    .bg-track {
        stroke: #F0F0F0;
    }

    .progress-arc {
        transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .center-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        text-align: center;
        line-height: 1;
    }

    .main-val {
        font-size: 13px;
        font-weight: 700;
        color: #0a0a0a;
        margin-bottom: 2px;
    }

    .sub-label {
        font-size: 7px;
        font-weight: 700;
        color: #777777;
        text-transform: uppercase;
    }

    .blue-pair .progress-arc {
        stroke: #2563EB;
    }

    .yellow-pair .progress-arc {
        stroke: #FFC72C;
    }

    /* =========================================================
       LOGOUT
       ========================================================= */

    .logout-btn {
        margin-left: 12px;
        padding: 6px 12px;
        background: #FEF2F2;
        color: #EF4444;
        border: 1px solid #FCA5A5;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }

    .logout-btn:hover {
        background: #EF4444;
        color: #FFFFFF;
    }

    /* =========================================================
       NOTIFICATION
       ========================================================= */

    @keyframes ring {
        0% { transform: rotate(0); }
        10% { transform: rotate(15deg); }
        20% { transform: rotate(-10deg); }
        30% { transform: rotate(5deg); }
        40% { transform: rotate(-5deg); }
        50% { transform: rotate(0); }
        100% { transform: rotate(0); }
    }

    .bell-anim {
        animation: ring 2s infinite;
        transform-origin: top center;
        color: #0062FF !important;
    }

    /* =========================================================
       MOBILE SEARCH
       ========================================================= */

    .mobile-search-btn {
        display: none;
        width: 38px;
        height: 38px;
        border: 1px solid #E8E5E1;
        background: #FAFAFA;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        color: #0F172A;
        cursor: pointer;
    }

    .mobile-search-btn .material-symbols-rounded {
        font-size: 21px;
    }

    .mobile-search-panel {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 6px);
        background: #FFFFFF;
        border: 1px solid #E2E8F0;
        border-radius: 10px;
        padding: 8px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.10);
        z-index: 9999;
    }

    .mobile-search-panel.open {
        display: flex;
    }

    .mobile-search-inner {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        padding: 9px 11px;
    }

    .mobile-search-inner .material-symbols-rounded {
        font-size: 20px;
        color: #64748B;
    }

    .mobile-search-input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: #0F172A;
        font-size: 13px;
        font-weight: 500;
    }

    .mobile-search-input::placeholder {
        color: #94A3B8;
    }

    /* =========================================================
       DESKTOP SEARCH
       ========================================================= */

    .search-container {
        width: 192px;
        background: #FAFAFA;
        border: 1px solid #E8E5E1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 8px 12px;
    }

    .