/* ═══ أيقونات مدمجة تعمل بدون إنترنت (بديل Phosphor CDN) ═══ */
.ph,.ph-bold,.ph-fill,.ph-duotone{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 20.5 12 12 20.5 3.5 12Z'/%3E%3C/svg%3E");display:inline-block;width:1em;height:1em;min-width:1em;flex:0 0 auto;background-color:currentColor;-webkit-mask:var(--pi) center/contain no-repeat;mask:var(--pi) center/contain no-repeat;vertical-align:-0.125em;line-height:1}
.ph-x{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.ph-check{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E")}
.ph-plus{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.ph-minus{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.ph-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3C/svg%3E")}
.ph-check-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.4 2.7 2.7L16.4 9'/%3E%3C/svg%3E")}
.ph-x-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E")}
.ph-plus-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
.ph-info{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5m0-8.6v.01'/%3E%3C/svg%3E")}
.ph-warning{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20H2.5Z M12 9.5V14m0 3v.01'/%3E%3C/svg%3E")}
.ph-arrow-left{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4.5M10.5 5.5 4 12l6.5 6.5'/%3E%3C/svg%3E")}
.ph-arrow-up-right{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")}
.ph-arrow-clockwise{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66M20 4v4h-4'/%3E%3C/svg%3E")}
.ph-arrow-counter-clockwise{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.34-5.66M4 4v4h4'/%3E%3C/svg%3E")}
.ph-arrows-clockwise{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9A6.5 6.5 0 0 1 18 7.5M18 3.5v4h-4M17.5 15A6.5 6.5 0 0 1 6 16.5M6 20.5v-4h4'/%3E%3C/svg%3E")}
.ph-at{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.5 7.1'/%3E%3C/svg%3E")}
.ph-bell{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.5 16H5.5c1.2-1.2 1.7-2.6 1.7-4.5V10a4.8 4.8 0 0 1 9.6 0v1.5c0 1.9.5 3.3 1.7 4.5ZM9.8 19.5a2.3 2.3 0 0 0 4.4 0'/%3E%3C/svg%3E")}
.ph-bell-ringing{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.5 16H5.5c1.2-1.2 1.7-2.6 1.7-4.5V10a4.8 4.8 0 0 1 9.6 0v1.5c0 1.9.5 3.3 1.7 4.5ZM9.8 19.5a2.3 2.3 0 0 0 4.4 0M2.8 8.5A9.5 9.5 0 0 1 5 4.7m16.2 3.8A9.5 9.5 0 0 0 19 4.7'/%3E%3C/svg%3E")}
.ph-bell-slash{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.5 16H7.5M6 13.5c.5-.9.7-1.5.7-2V10a4.8 4.8 0 0 1 8-3.6M9.8 19.5a2.3 2.3 0 0 0 4.4 0M4 4l16 16'/%3E%3C/svg%3E")}
.ph-calendar-blank{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3.5v4m8-4v4M4 10.5h16'/%3E%3C/svg%3E")}
.ph-calendar{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3.5v4m8-4v4M4 10.5h16M9 15h.01M15 15h.01'/%3E%3C/svg%3E")}
.ph-calendar-check{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3.5v4m8-4v4M4 10.5h16m-7 4.3 2 2 4-4'/%3E%3C/svg%3E")}
.ph-camera{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='2.5'/%3E%3Cpath d='M8.5 7.5 10 5h4l1.5 2.5'/%3E%3Ccircle cx='12' cy='13.2' r='3.2'/%3E%3C/svg%3E")}
.ph-cards{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='14' height='10.5' rx='2'/%3E%3Cpath d='M7.5 5h10.5A2.5 2.5 0 0 1 20.5 7.5V15'/%3E%3C/svg%3E")}
.ph-cash-register{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='8.5' rx='2'/%3E%3Cpath d='M8 11V7.5A1.5 1.5 0 0 1 9.5 6h5A1.5 1.5 0 0 1 16 7.5V11M8.5 15h.01M12 15h.01M15.5 15h.01'/%3E%3C/svg%3E")}
.ph-chart-bar{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 20h17M7 20v-6m5 6V9m5 11v-7'/%3E%3C/svg%3E")}
.ph-chart-line-up{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4v15.5H20M6.5 15l4-4 3 3 6-6'/%3E%3C/svg%3E")}
.ph-chat-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0-7.8-4.5L3 21l4.7-1.2A9 9 0 0 0 12 21Z'/%3E%3C/svg%3E")}
.ph-clock{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.ph-clock-countdown{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12A8.5 8.5 0 1 1 12 3.5M12 7.5V12l3 2M16.4 4.7v.01M19.6 7.7v.01'/%3E%3C/svg%3E")}
.ph-clock-counter-clockwise{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6M3.5 3.5V8H8M12 7.5V12l3 2'/%3E%3C/svg%3E")}
.ph-cloud-arrow-up{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10a4 4 0 0 0 .8-7.9A6 6 0 0 0 6.2 12 3.8 3.8 0 0 0 7 18.5ZM12 15.5V9.8M9.3 12.2 12 9.5l2.7 2.7'/%3E%3C/svg%3E")}
.ph-coins{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='9.5' r='5.8'/%3E%3Cpath d='M13.4 17.9A5.8 5.8 0 1 0 15.8 6.7'/%3E%3C/svg%3E")}
.ph-copy{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='2'/%3E%3Cpath d='M15.5 5.5v-1a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1'/%3E%3C/svg%3E")}
.ph-crown-simple{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l2 10.5h14l2-10.5-5.5 3.5L12 5 8.5 11Z'/%3E%3C/svg%3E")}
.ph-currency-circle-dollar{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8v10.4M14.8 9.2c-.5-.9-1.6-1.4-2.8-1.4-1.7 0-3 .9-3 2.2s1.2 2 3 2 3 .8 3 2.1-1.3 2.2-3 2.2c-1.2 0-2.3-.5-2.8-1.4'/%3E%3C/svg%3E")}
.ph-device-mobile{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.5'/%3E%3Cpath d='M10.5 17.8h3'/%3E%3C/svg%3E")}
.ph-eye{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.ph-eye-slash{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5c1.3 0 2.5.3 3.6.8M21.5 12S18 18.5 12 18.5c-1.3 0-2.5-.3-3.6-.8M9.9 9.9a3 3 0 0 0 4.2 4.2M4 4l16 16'/%3E%3C/svg%3E")}
.ph-file-text{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8ZM14 3v5h5M9 13h6M9 16.5h6'/%3E%3C/svg%3E")}
.ph-floppy-disk{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h10L20.5 8.5v10a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2ZM8 20.5v-6h8v6M8.5 3.5V8h6'/%3E%3C/svg%3E")}
.ph-gear-six{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.8v3M12 18.2v3M4 7.4l2.6 1.5M17.4 15.1l2.6 1.5M4 16.6l2.6-1.5M17.4 8.9 20 7.4'/%3E%3C/svg%3E")}
.ph-hand-coins{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15' cy='6.8' r='3'/%3E%3Cpath d='M4 14h3.2l3.8 2h4.3a1.5 1.5 0 0 1 0 3H10.5M4 19.5V14M15.3 19h3c1.2 0 2.2-.6 3.2-2'/%3E%3C/svg%3E")}
.ph-house{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5 12 4l7.5 6.5V19a1.5 1.5 0 0 1-1.5 1.5h-3.5V14h-5v6.5H6A1.5 1.5 0 0 1 4.5 19Z'/%3E%3C/svg%3E")}
.ph-identification-badge{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2.5'/%3E%3Cpath d='M9.5 6.5h5'/%3E%3Ccircle cx='12' cy='11.5' r='2.4'/%3E%3Cpath d='M8.3 17.4c.9-1.7 2.1-2.5 3.7-2.5s2.8.8 3.7 2.5'/%3E%3C/svg%3E")}
.ph-identification-card{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Ccircle cx='8.5' cy='10.8' r='2'/%3E%3Cpath d='M6 15.5c.6-1.2 1.5-1.8 2.5-1.8s1.9.6 2.5 1.8M14.5 10h4M14.5 13.5h4'/%3E%3C/svg%3E")}
.ph-list{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M4.5 12h15M4.5 17.5h15'/%3E%3C/svg%3E")}
.ph-list-checks{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 1.5 1.5L8 4.7M3.5 12.5 5 14l3-2.8M3.5 19l1.5 1.5L8 17.7M11 6.5h9.5M11 13h9.5M11 19.5h9.5'/%3E%3C/svg%3E")}
.ph-lock-key{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8.5 10.5V7.5a3.5 3.5 0 0 1 7 0v3'/%3E%3Ccircle cx='12' cy='14.8' r='1.6'/%3E%3Cpath d='M12 16.4v1.9'/%3E%3C/svg%3E")}
.ph-magic-wand{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 14.5 9.5M13 8l3 3M18.5 3.5v3M17 5h3M20.5 9.5v2M19.5 10.5h2M8 3.5v2M7 4.5h2'/%3E%3C/svg%3E")}
.ph-magnifying-glass{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='M15.3 15.3 20.5 20.5'/%3E%3C/svg%3E")}
.ph-map-pin{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.ph-note{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14A1.5 1.5 0 0 1 20.5 6v9L15 20.5H5A1.5 1.5 0 0 1 3.5 19V6A1.5 1.5 0 0 1 5 4.5ZM14.8 20.3V15.5h4.9M8 9.5h8M8 13h5'/%3E%3C/svg%3E")}
.ph-note-pencil{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.5V19a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 19V5A1.5 1.5 0 0 1 5 3.5h6.5M12 15.2l8.3-8.3a1.55 1.55 0 0 0-2.2-2.2L9.8 13v2.2Z'/%3E%3C/svg%3E")}
.ph-package{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20.5 7.5v9L12 21l-8.5-4.5v-9ZM3.5 7.5 12 12l8.5-4.5M12 12v9M16.5 9.8 8 5.3'/%3E%3C/svg%3E")}
.ph-paper-plane-tilt{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 3.8 9.7c-.8.3-.8 1.4 0 1.7l6 2.2 2.2 6c.3.8 1.4.8 1.7 0ZM10 14 20.5 3.5'/%3E%3C/svg%3E")}
.ph-pause{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5v13M15 5.5v13'/%3E%3C/svg%3E")}
.ph-pencil-simple{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l.9-4.1L16.4 4.4a1.9 1.9 0 0 1 2.7 0l.5.5a1.9 1.9 0 0 1 0 2.7L8.1 19.1ZM14.8 6l3.2 3.2'/%3E%3C/svg%3E")}
.ph-play{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.8v14.4c0 .8.9 1.3 1.6.9l11-7.2c.6-.4.6-1.4 0-1.8l-11-7.2C7.9 3.5 7 4 7 4.8Z'/%3E%3C/svg%3E")}
.ph-printer{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8.5v-5h11v5M6.5 16H4.5A1.5 1.5 0 0 1 3 14.5v-4A2 2 0 0 1 5 8.5h14a2 2 0 0 1 2 2v4a1.5 1.5 0 0 1-1.5 1.5H17.5M17.3 11.5h.01'/%3E%3Crect x='6.5' y='13.5' width='11' height='7' rx='1'/%3E%3C/svg%3E")}
.ph-prohibit{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
.ph-receipt{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h14V20l-2.3-1.5L14.4 20l-2.4-1.5L9.6 20l-2.3-1.5L5 20ZM8.5 8.5h7M8.5 12h7'/%3E%3C/svg%3E")}
.ph-receipt-x{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h14V20l-2.3-1.5L14.4 20l-2.4-1.5L9.6 20l-2.3-1.5L5 20ZM9.8 7.3l4.4 4.4m0-4.4-4.4 4.4'/%3E%3C/svg%3E")}
.ph-seal-check{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.2 1.7 2.7-.4 1 2.6 2.6 1-.4 2.7L21.8 12l-1.7 2.2.4 2.7-2.6 1-1 2.6-2.7-.4L12 21.8l-2.2-1.7-2.7.4-1-2.6-2.6-1 .4-2.7L2.2 12l1.7-2.2-.4-2.7 2.6-1 1-2.6 2.7.4ZM8.6 12.4l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E")}
.ph-shopping-cart-simple{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h2.2l2.1 11h11.4l2-8.5H6'/%3E%3Ccircle cx='9.5' cy='19.8' r='1.4'/%3E%3Ccircle cx='16.5' cy='19.8' r='1.4'/%3E%3C/svg%3E")}
.ph-shopping-cart{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h2.2l2.1 11h11.4l2-8.5H6'/%3E%3Ccircle cx='9.5' cy='19.8' r='1.4'/%3E%3Ccircle cx='16.5' cy='19.8' r='1.4'/%3E%3C/svg%3E")}
.ph-sign-in{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5H19A1.5 1.5 0 0 1 20.5 5v14a1.5 1.5 0 0 1-1.5 1.5h-4.5M3.5 12h10M9.5 7.5 14 12l-4.5 4.5'/%3E%3C/svg%3E")}
.ph-sign-out{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5H5A1.5 1.5 0 0 0 3.5 5v14A1.5 1.5 0 0 0 5 20.5h4.5M9.5 12h11M16 7.5 20.5 12 16 16.5'/%3E%3C/svg%3E")}
.ph-sparkle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3c.6 4 2 6.4 6.5 7-4.5.6-5.9 3-6.5 7-.6-4-2-6.4-6.5-7 4.5-.6 5.9-3 6.5-7ZM18.5 14.5c.3 1.6 1 2.5 2.5 2.8-1.5.3-2.2 1.2-2.5 2.7-.3-1.5-1-2.4-2.5-2.7 1.5-.3 2.2-1.2 2.5-2.8Z'/%3E%3C/svg%3E")}
.ph-spinner{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3.5M12 17.5V21M3 12h3.5M17.5 12H21M5.6 5.6l2.5 2.5M15.9 15.9l2.5 2.5M5.6 18.4l2.5-2.5M15.9 8.1l2.5-2.5'/%3E%3C/svg%3E")}
.ph-squares-four{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.ph-stack{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 21 8l-9 5L3 8ZM4.5 12.5 12 16.5l7.5-4M4.5 17 12 21l7.5-4'/%3E%3C/svg%3E")}
.ph-storefront{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9.8V19A1.5 1.5 0 0 0 6 20.5h12a1.5 1.5 0 0 0 1.5-1.5V9.8M3.5 9.5 5 4h14l1.5 5.5M3.5 9.5h17M10 20.5v-6h4v6'/%3E%3C/svg%3E")}
.ph-trash{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M9 6.5V4.8A1.3 1.3 0 0 1 10.3 3.5h3.4A1.3 1.3 0 0 1 15 4.8v1.7M6.2 6.5 7 19a1.8 1.8 0 0 0 1.8 1.7h6.4A1.8 1.8 0 0 0 17 19l.8-12.5M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E")}
.ph-trend-up{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17 9.5 11l3.5 3.5L20.5 7M15 7h5.5v5.5'/%3E%3C/svg%3E")}
.ph-trend-down{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7 9.5 13l3.5-3.5L20.5 17M15 17h5.5v-5.5'/%3E%3C/svg%3E")}
.ph-trophy{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5.5a4 4 0 0 1-8 0ZM8 5.5H4.5V7A3.4 3.4 0 0 0 8 10.3M16 5.5h3.5V7A3.4 3.4 0 0 1 16 10.3M12 13.5v4M8 20.5h8M9.5 20.5l.6-3h3.8l.6 3'/%3E%3C/svg%3E")}
.ph-upload-simple{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7.5 8.5 12 4l4.5 4.5M4.5 15.5V19A1.5 1.5 0 0 0 6 20.5h12a1.5 1.5 0 0 0 1.5-1.5v-3.5'/%3E%3C/svg%3E")}
.ph-user{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='4'/%3E%3Cpath d='M4.5 20c1.4-3.4 4.1-5.2 7.5-5.2s6.1 1.8 7.5 5.2'/%3E%3C/svg%3E")}
.ph-user-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='10' r='3.2'/%3E%3Cpath d='M5.8 18.5C7.3 15.9 9.4 14.6 12 14.6s4.7 1.3 6.2 3.9'/%3E%3C/svg%3E")}
.ph-user-plus{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8.2' r='4'/%3E%3Cpath d='M2.8 20c1.3-3.3 3.9-5 7.2-5 1.6 0 3 .4 4.2 1.1M18.5 8v6M15.5 11h6'/%3E%3C/svg%3E")}
.ph-users{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='3.6'/%3E%3Cpath d='M2.5 19.5c1.2-3 3.6-4.6 6.5-4.6s5.3 1.6 6.5 4.6M15.5 5.7a3.6 3.6 0 1 1 0 6.6M16.8 15.2c2.3.4 4 1.9 4.9 4.3'/%3E%3C/svg%3E")}
.ph-users-three{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M6.6 20c.9-2.7 2.9-4.2 5.4-4.2s4.5 1.5 5.4 4.2'/%3E%3Ccircle cx='4.7' cy='10' r='2.3'/%3E%3Ccircle cx='19.3' cy='10' r='2.3'/%3E%3Cpath d='M1.5 18.2c.7-2 2-3.2 3.7-3.4M22.5 18.2c-.7-2-2-3.2-3.7-3.4'/%3E%3C/svg%3E")}
.ph-wallet{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='13.5' rx='2'/%3E%3Cpath d='M3.5 8.5V6.8A1.8 1.8 0 0 1 5.3 5H17M16 12.5h4.5v4H16a2 2 0 0 1 0-4Z'/%3E%3C/svg%3E")}
.ph-whatsapp-logo{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5ZM8.7 9.2c-.2 2.6 3.4 6.3 6.1 6.1l.5-1.7-1.9-.8-.9.8c-1.1-.5-2.1-1.5-2.6-2.6l.9-.8-.7-1.9Z'/%3E%3C/svg%3E")}
.ph-wifi-high{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18.5v.01M8.6 15.1a5.3 5.3 0 0 1 6.8 0M5.7 12a9.5 9.5 0 0 1 12.6 0M2.8 8.9a13.7 13.7 0 0 1 18.4 0'/%3E%3C/svg%3E")}
.ph-wifi-slash{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18.5v.01M8.6 15.1a5.3 5.3 0 0 1 6.8 0M5.7 12a9.6 9.6 0 0 1 4.2-2.4M14 9.4c1.6.35 3.1 1.2 4.3 2.6M2.8 8.9A13.8 13.8 0 0 1 8 6M4 4l16 16'/%3E%3C/svg%3E")}
.ph-clipboard-text{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='4.5' width='13' height='16' rx='2'/%3E%3Cpath d='M9 3.5h6v2.5H9ZM9 11.5h6M9 15h6'/%3E%3C/svg%3E")}
.ph-check-square{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='m8.4 12.4 2.5 2.5 4.9-5.2'/%3E%3C/svg%3E")}
.ph-square{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3C/svg%3E")}
.ph-funnel{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6.2 7.2V19l-3.6 1.8v-8.6Z'/%3E%3C/svg%3E")}
.ph-moon{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 13.6A8.6 8.6 0 1 1 10.4 3.6a7 7 0 0 0 10 10Z'/%3E%3C/svg%3E")}
.ph-sun{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Cpath d='M12 2.2v2.2M12 19.6v2.2M2.2 12h2.2M19.6 12h2.2M4.9 4.9l1.6 1.6M17.5 17.5l1.6 1.6M19.1 4.9l-1.6 1.6M6.5 17.5l-1.6 1.6'/%3E%3C/svg%3E")}
.ph-headset{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5V12a8 8 0 0 1 16 0v1.5'/%3E%3Crect x='3' y='13' width='4.2' height='6.4' rx='2.1'/%3E%3Crect x='16.8' y='13' width='4.2' height='6.4' rx='2.1'/%3E%3Cpath d='M19 19.4v.4a2.4 2.4 0 0 1-2.4 2.4h-3.8'/%3E%3C/svg%3E")}
.ph-scroll{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5a2 2 0 1 0-4 0c0 1.1.9 2 2 2h2m0-2v12.5A2.5 2.5 0 0 0 9.5 20H19M7 5h12a2 2 0 0 1 2 2v10.5a2.5 2.5 0 0 1-2.5 2.5M11 9.5h6M11 13h6'/%3E%3C/svg%3E")}
.ph-shield-check{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.8 5.6v5.5c0 4.6 3.1 8.2 7.2 9.6 4.1-1.4 7.2-5 7.2-9.6V5.6Z'/%3E%3Cpath d='m8.7 12 2.3 2.3 4.3-4.5'/%3E%3C/svg%3E")}
.ph-key{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.6' cy='16.4' r='3.9'/%3E%3Cpath d='M10.4 13.6 20 4M16 4h4v4M13.7 10.3l2.6 2.6'/%3E%3C/svg%3E")}
.ph-image{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='14.4' rx='2.5'/%3E%3Ccircle cx='8.8' cy='9.8' r='1.7'/%3E%3Cpath d='m3.5 16.8 4.9-4.2a1.5 1.5 0 0 1 2 .05L14 16l2.3-2a1.5 1.5 0 0 1 2 0l2.5 2.2'/%3E%3C/svg%3E")}
.ph-wrench{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E")}
.ph-arrow-u-up-left{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3.8 4 7.3l3.5 3.5M4 7.3h10.2a5.2 5.2 0 0 1 0 10.4H9'/%3E%3C/svg%3E")}
.ph-arrow-right{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6.5-6.5L20 12l-6.5 6.5'/%3E%3C/svg%3E")}
.ph-minus-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
.ph-chats-circle{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 9.3A6.3 6.3 0 1 0 4.3 14.2L3.4 17.6l3.4-.9'/%3E%3Cpath d='M8.6 14.9a6.3 6.3 0 0 0 10 3.7l3.4.9-.9-3.4a6.3 6.3 0 0 0-5-9.8'/%3E%3C/svg%3E")}
.ph-download-simple{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E")}
.ph-broadcast{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6.5 6.5a7.5 7.5 0 0 0 0 11M17.5 6.5a7.5 7.5 0 0 1 0 11M3.7 3.7a11.5 11.5 0 0 0 0 16.6M20.3 3.7a11.5 11.5 0 0 1 0 16.6'/%3E%3C/svg%3E")}
.ph-database{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='3'/%3E%3Cpath d='M4.5 5.5v13c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-13M4.5 12c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3'/%3E%3C/svg%3E")}

        :root {
            --primary: #6C43FF;
            --primary-dark: #4E24E8;
            --primary-light: #9A7BFF;
            --primary-soft: #EFE9FF;
            --orchid: #E44FB0;
            --gold: #C98A1B;
            --gold-light: #F3C566;
            --gold-soft: #FBF0D7;
            --gold-metal: linear-gradient(105deg, #9A6A10 0%, #E8B44A 22%, #FFF0C2 38%, #D89B26 55%, #8E5E0A 72%, #F6CE77 100%);
            --success: #0FA97A;
            --success-soft: #DDF6ED;
            --danger: #E5484D;
            --danger-soft: #FDE9EA;
            --bg-main: #FBFAFF;
            --bg-white: #ffffff;
            --bg-card: rgba(255,255,255,0.62);
            --text-dark: #17102E;
            --text-body: #453D66;
            --text-muted: #8C84AB;
            --text-light: #6C43FF;
            --border-light: rgba(122,100,190,0.18);
            --border-soft: rgba(122,100,190,0.10);
            --glass: blur(26px) saturate(190%);
            --shadow-sm: 0 1px 2px rgba(23,16,46,0.05), 0 6px 16px -6px rgba(78,36,232,0.10);
            --shadow-md: 0 2px 5px rgba(23,16,46,0.05), 0 22px 48px -18px rgba(78,36,232,0.24);
            --shadow-lg: 0 10px 20px -8px rgba(23,16,46,0.10), 0 38px 84px -24px rgba(78,36,232,0.34);
            --shadow-glow: 0 14px 38px -10px rgba(108,67,255,0.5);
            --radius-2xl: 30px;
            --radius-xl: 24px;
            --radius-lg: 17px;
            --radius-md: 12px;
            --radius-sm: 9px;
            --sidebar-width: 264px;
            --topbar-height: 68px;
            --font-display: 'Zain', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
            --font-body: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; height: 100%; }
        body {
            font-family: var(--font-body); background: transparent;
            min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: hidden;
            color: var(--text-body); -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
        }
        h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-dark); letter-spacing: -0.2px; }
        a { color: var(--primary); text-decoration: none; }
        :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
        ::selection { background: rgba(108,67,255,0.22); }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #D9D1F2; border-radius: 8px; }
        ::-webkit-scrollbar-thumb:hover { background: #B8A9EA; }

        /* ════════ LIVING AURORA CANVAS ════════ */
        body::before {
            content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
            background:
                radial-gradient(58% 46% at 12% 8%,  #E4DAFF 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FFE4C2 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #D9E9FF 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #FFDCEE 0%, transparent 60%),
                #FDFCFF;
            background-size: 160% 160%;
            animation: meshShift 26s ease-in-out infinite alternate;
        }
        @keyframes meshShift {
            0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
            100% { background-position: 40% 30%, 60% 25%, 55% 70%, 45% 65%, 0 0; }
        }
        .bg-orb {
            position: fixed; border-radius: 50%; filter: blur(90px) saturate(1.3); z-index: -1; pointer-events: none;
            animation: orbSwim 20s ease-in-out infinite alternate; opacity: 0.85;
        }
        .bg-orb.orb1 { width: 46vh; height: 46vh; background: rgba(139,107,255,0.30); top: -14vh; right: -12vh; }
        .bg-orb.orb2 { width: 38vh; height: 38vh; background: rgba(255,183,74,0.26); top: 40vh; left: -14vh; animation-delay: -7s; }
        .bg-orb.orb3 { width: 34vh; height: 34vh; background: rgba(228,79,176,0.18); bottom: -10vh; right: 30vw; animation-delay: -13s; }
        @keyframes orbSwim { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-8vw, 6vh) scale(1.15); } }
        @keyframes floatUpDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
        @keyframes softPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
        @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
        @keyframes haloSpin { to { transform: rotate(360deg); } }
        @keyframes popIn { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        @keyframes phspin { to { transform: rotate(360deg); } }
        .ph-spin { display: inline-block; animation: phspin 0.9s linear infinite; }
        @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes pageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
            }
        }

        /* ════════ سلاسة اللمس (كل الأجهزة) ════════ */
        button, .btn, .btn-icon, .dock-tab, .nav-link, .tab-btn, .portal-icon-btn, .copy-btn,
        input, select, textarea, a, .card[onclick], tr[onclick], .user-chip {
            touch-action: manipulation;
        }
        .table-wrap { -webkit-overflow-scrolling: touch; } /* بدون overscroll-behavior — كانت تمنع تمرير الصفحة فوق الجداول */
        .modal-box, .nav-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
        input, select, textarea { font-size: max(16px, 1em); } /* يمنع تكبير الشاشة التلقائي عند الكتابة على iOS/أندرويد */

        /* ════════ وضع الأداء (LITE) — للجوالات القديمة: بدون ضبابية أو أنيميشن ثقيل ════════ */
        html.lite *, html.lite *::before, html.lite *::after {
            backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
            animation: none !important; transition: none !important;
        }
        html.lite { scroll-behavior: auto; }
        html.lite body::before { background: #F7F4FF; animation: none !important; background-size: 100% 100%; }
        html.lite .bg-orb { display: none !important; }
        html.lite .sidebar, html.lite .portal-dock, html.lite .mobile-topbar { background: rgba(255,255,255,0.97) !important; }
        html.lite .card, html.lite .stat-card, html.lite .modal-box, html.lite .auth-card,
        html.lite .card-number-item, html.lite .pay-method-card, html.lite .notif-item,
        html.lite .buy-card-tile, html.lite .portal-icon-btn { background: #ffffff !important; }
        html.lite [class] { box-shadow: none !important; text-shadow: none !important; }
        html.lite .card, html.lite .stat-card, html.lite .modal-box, html.lite .sidebar,
        html.lite .portal-dock, html.lite .auth-card, html.lite .buy-card-tile { border: 1px solid #E5DFF7 !important; }

        /* ════════ تذييل الحقوق ════════ */
        .app-footer {
            text-align: center; padding: 26px 14px 18px; font-size: 11.5px; font-weight: 700;
            color: var(--text-muted); letter-spacing: 0.2px;
        }
        .app-footer b { color: var(--primary); font-weight: 800; }

        /* أيقونة المشاركة (مدمجة أوفلاين مثل باقي الأيقونات) */
        .ph-share-network{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='17.5' cy='5.5' r='2.6'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.6'/%3E%3Cpath d='M8.4 10.8 15 6.9M8.4 13.2 15 17.1'/%3E%3C/svg%3E")}

        /* أيقونات صفحة التصاميم والألوان (مدمجة أوفلاين) */
        .ph-drop-half{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8c3.6 4 6.5 7.2 6.5 11a6.5 6.5 0 0 1-13 0c0-3.8 2.9-7 6.5-11Z'/%3E%3Cpath d='M5.6 14.5h12.8'/%3E%3C/svg%3E")}
        .ph-rows{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='6'  rx='1.8'/%3E%3Crect x='3.5' y='13.5' width='17' height='6' rx='1.8'/%3E%3C/svg%3E")}
        .ph-gauge{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 18a9 9 0 1 1 17 0'/%3E%3Cpath d='M12 18l4.2-5.6'/%3E%3Ccircle cx='12' cy='18' r='1.6'/%3E%3C/svg%3E")}
        .ph-square{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3C/svg%3E")}
        .ph-lightning{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 2.5 4 13.5h6.5L10 21.5 20 10.5h-6.5Z'/%3E%3C/svg%3E")}

        /* أيقونات كانت مستخدمة في الواجهة بدون تعريف — كانت تظهر كمعيّن فارغ */
        .ph-archive{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='18' height='5' rx='1.6'/%3E%3Cpath d='M4.8 8.5v10a2 2 0 0 0 2 2h10.4a2 2 0 0 0 2-2v-10'/%3E%3Cpath d='M9.8 12.5h4.4'/%3E%3C/svg%3E")}
        .ph-caret-down{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9 12 15.5 18.5 9'/%3E%3C/svg%3E")}
        .ph-chart-line{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4v15.5H20M6.5 16l4-5 3.2 2.6L19 8'/%3E%3C/svg%3E")}
        .ph-circle-dashed{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='3.4 3.2'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3C/svg%3E")}
        .ph-link{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.8a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1.5 1.5'/%3E%3Cpath d='M14 10.2a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1.5-1.5'/%3E%3C/svg%3E")}
        .ph-robot{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.5' width='17' height='12' rx='2.6'/%3E%3Cpath d='M12 3.4v4.1M8.6 13h.01M15.4 13h.01M9.6 16.6h4.8'/%3E%3Ccircle cx='12' cy='2.9' r='1.3'/%3E%3C/svg%3E")}
        .ph-telegram-logo{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4.4 2.9 11.3l4.7 1.9M21 4.4l-2.6 15-6.3-4.6-2.1 3.4-1.4-5.4M21 4.4 9.5 13.2'/%3E%3C/svg%3E")}
        .ph-calendar-heart{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='2.5'/%3E%3Cpath d='M8 3.5v4m8-4v4M4 10.5h16'/%3E%3Cpath d='M12 17.6c-2.6-1.7-3.3-2.9-3.3-3.9a1.7 1.7 0 0 1 3.3-.6 1.7 1.7 0 0 1 3.3.6c0 1-.7 2.2-3.3 3.9Z'/%3E%3C/svg%3E")}

        /* ════════ APP SHELL ════════ */
        .app-shell { display: flex; min-height: 100vh; min-height: 100dvh; position: relative; z-index: 1; }

        /* ════════ SIDEBAR (LIQUID GLASS DOCK) ════════ */
        .sidebar {
            width: var(--sidebar-width); flex-shrink: 0; position: fixed; top: 14px; bottom: 14px; right: 14px;
            background: rgba(255,255,255,0.55);
            backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%);
            border: 1px solid rgba(255,255,255,0.9);
            border-radius: 28px; z-index: 1000;
            box-shadow: 0 4px 10px rgba(23,16,46,0.06), 0 28px 56px -18px rgba(78,36,232,0.35), inset 0 1px 0 rgba(255,255,255,0.95);
            display: flex; flex-direction: column; padding: 22px 16px;
            transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; border-bottom: 1px solid var(--border-soft); margin-bottom: 18px; }
        .sidebar-brand-icon {
            width: 46px; height: 46px; border-radius: 16px; flex-shrink: 0;
            background: linear-gradient(140deg, #7A52FF 0%, #A66BF2 100%);
            display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff;
            box-shadow: 0 12px 22px -8px rgba(108,67,255,0.55), inset 0 1.5px 0 rgba(255,255,255,0.4);
            animation: floatUpDown 4.6s ease-in-out infinite;
        }
        /* صورة الشعار المرفوع — تملأ صندوق العلامة وترث زواياه في كل الشاشات */
        .brand-logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
        .sidebar-brand-text { min-width: 0; }
        .sidebar-brand-title {
            font-family: var(--font-display); font-size: 21px; font-weight: 900; line-height: 1.15;
            background: linear-gradient(115deg, #2A1B6E 0%, #6C43FF 45%, #B267E8 70%, #2A1B6E 100%);
            background-size: 220% 220%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 7s ease infinite;
        }
        .sidebar-brand-sub { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }

        .nav-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-inline-end: 2px; }
        .nav-section-label { font-size: 10.5px; font-weight: 800; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; padding: 14px 12px 6px; }
        .nav-link {
            display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 15px;
            color: var(--text-body); font-weight: 600; font-size: 14px; position: relative; transition: background-color 0.25s ease, color 0.25s ease;
            cursor: pointer;
        }
        .nav-link i { font-size: 19px; color: var(--text-muted); transition: color 0.25s ease; flex-shrink: 0; width: 20px; text-align: center; }
        .nav-link:hover { background: rgba(108,67,255,0.08); color: var(--text-dark); }
        .nav-link:hover i { color: var(--primary); }
        .nav-link.active {
            background: linear-gradient(135deg, rgba(108,67,255,0.14), rgba(232,180,74,0.10));
            color: var(--text-dark); font-weight: 800;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 14px -6px rgba(108,67,255,0.3);
        }
        .nav-link.active i { color: var(--primary); }
        .nav-link .nav-badge {
            margin-inline-start: auto; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800;
            padding: 2px 7px; border-radius: 20px; min-width: 18px; text-align: center;
        }
        .nav-link .nav-badge.gold { background: var(--gold-metal); background-size: 200% auto; color: #3D2600; animation: shimmer 4.5s linear infinite; }

        .sidebar-footer { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 10px; }
        .user-chip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 15px; cursor: pointer; transition: background 0.2s; }
        .user-chip:hover { background: rgba(108,67,255,0.08); }
        .user-avatar {
            width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 800; font-size: 15px; flex-shrink: 0;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px -6px rgba(23,16,46,0.3);
        }
        .user-chip-info { min-width: 0; flex: 1; }
        .user-chip-name { font-weight: 700; font-size: 13px; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .user-chip-role { font-size: 10.5px; color: var(--text-muted); }

        /* ════════ MOBILE SIDEBAR TOGGLE ════════ */
        .mobile-topbar { display: none; }
        .sidebar-overlay { display: none; }

        /* ════════ MAIN CONTENT ════════ */
        .main-content { flex: 1; margin-right: calc(var(--sidebar-width) + 28px); padding: 26px 26px 40px; min-width: 0; }
        .content-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
        .content-title { font-size: 26px; font-weight: 900; color: var(--text-dark); display: flex; align-items: center; gap: 10px; }
        .content-subtitle { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 3px; }
        .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

        .page-view { display: none; animation: pageFade 0.4s ease; }
        .page-view.active { display: block; }

        /* ════════ LIQUID GLASS CARDS ════════ */
        .card {
            background: var(--bg-card);
            backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
            border: 1px solid rgba(255,255,255,0.85);
            border-radius: var(--radius-2xl);
            padding: 22px; margin-bottom: 18px;
            box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(122,100,190,0.08);
            position: relative; overflow: hidden;
        }
        .card::after {
            content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2.5px;
            border-radius: 0 0 6px 6px; background: var(--gold-metal); background-size: 200% auto;
            animation: shimmer 5s linear infinite; opacity: 0.85;
        }
        .card > * { position: relative; z-index: 1; }
        .card-flat { box-shadow: var(--shadow-sm); }
        .card-flat::after { display: none; }
        .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
        .card-title { font-size: 16px; font-weight: 800; color: var(--text-dark); display: flex; align-items: center; gap: 8px; }
        .card-title i { color: var(--primary); font-size: 19px; }

        /* ════════ STAT CARDS (KPI) ════════ */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
        .stats-grid-5 { grid-template-columns: repeat(5, 1fr); }
        .stat-card {
            background: var(--bg-card); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
            border: 1px solid rgba(255,255,255,0.85); border-radius: var(--radius-xl); padding: 20px;
            box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.95);
            position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.95); }
        .stat-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .stat-icon-wrap {
            width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
            font-size: 21px; color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.35), 0 10px 18px -8px rgba(23,16,46,0.3);
        }
        .stat-icon-wrap.purple { background: linear-gradient(140deg, #7A52FF, #A66BF2); }
        .stat-icon-wrap.gold { background: var(--gold-metal); background-size: 200% auto; color: #3D2600; animation: shimmer 5s linear infinite; }
        .stat-icon-wrap.green { background: linear-gradient(140deg, #14C08D, #0A9068); }
        .stat-icon-wrap.red { background: linear-gradient(140deg, #F0565C, #D63A40); }
        .stat-trend { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; display: flex; align-items: center; gap: 3px; }
        .stat-trend.up { background: var(--success-soft); color: #067A5B; }
        .stat-trend.down { background: var(--danger-soft); color: #B42318; }
        .stat-value { font-family: var(--font-display); font-size: 27px; font-weight: 900; color: var(--text-dark); line-height: 1.1; font-variant-numeric: tabular-nums; }
        .stat-label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-top: 5px; }

        /* ════════ BUTTONS ════════ */
        .btn {
            background: linear-gradient(160deg, #7A52FF 0%, #6337F2 55%, #7E4BFF 100%);
            border: none; color: #fff; font-weight: 800; font-size: 14px; padding: 13px 20px;
            border-radius: var(--radius-lg); cursor: pointer; transition: transform var(--transition), opacity var(--transition);
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            box-shadow: var(--shadow-glow), inset 0 1.5px 0 rgba(255,255,255,0.35), inset 0 -3px 6px rgba(46,16,140,0.35);
            position: relative; overflow: hidden; font-family: var(--font-display); white-space: nowrap;
        }
        .btn::after {
            content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
            transform: translateX(-100%); transition: transform 0.5s;
        }
        .btn:hover::after { transform: translateX(100%); }
        .btn:active { transform: scale(0.97); }
        .btn:disabled { opacity: 0.55; cursor: not-allowed; }
        .btn-sm { padding: 9px 15px; font-size: 12.5px; border-radius: var(--radius-md); }
        .btn-gold {
            background: var(--gold-metal); background-size: 220% auto; animation: shimmer 6s linear infinite;
            color: #3D2600; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
            box-shadow: 0 14px 34px -10px rgba(201,138,27,0.55), inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -3px 6px rgba(110,70,5,0.3);
        }
        .btn-danger { background: linear-gradient(160deg, #F0565C 0%, #D63A40 60%, #F0565C 100%); box-shadow: 0 14px 30px -10px rgba(229,72,77,0.5), inset 0 1.5px 0 rgba(255,255,255,0.3), inset 0 -3px 6px rgba(130,20,24,0.35); }
        .btn-success { background: linear-gradient(160deg, #14C08D 0%, #0A9068 60%, #14C08D 100%); box-shadow: 0 14px 30px -10px rgba(15,169,122,0.5), inset 0 1.5px 0 rgba(255,255,255,0.3); }
        .btn-outline {
            background: rgba(255,255,255,0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border: 1.5px solid rgba(108,67,255,0.4); color: var(--primary); box-shadow: var(--shadow-sm); text-shadow: none;
        }
        .btn-outline.danger { border-color: rgba(229,72,77,0.4); color: var(--danger); }
        .btn-ghost { background: transparent; box-shadow: none; color: var(--text-muted); border: 1px solid var(--border-light); }
        .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 13px; flex-shrink: 0; }
        .btn-block { width: 100%; }

        /* ════════ FORMS ════════ */
        .form-group { margin-bottom: 15px; }
        .form-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-body); margin-bottom: 6px; }
        .form-label .req { color: var(--danger); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .input, .select, textarea.input {
            width: 100%; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.9);
            box-shadow: inset 0 1px 3px rgba(78,36,232,0.05); border-radius: var(--radius-lg);
            padding: 12px 15px; font-family: var(--font-body); font-size: 14px; color: var(--text-dark);
            transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition); outline: none;
        }
        .input:focus, .select:focus, textarea.input:focus {
            border-color: rgba(108,67,255,0.55); background: #fff; box-shadow: 0 0 0 4px rgba(108,67,255,0.13);
        }
        .input::placeholder { color: #B4ACCE; }
        .input-icon-wrap { position: relative; }
        .input-icon-wrap i { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--primary); font-size: 17px; pointer-events: none; }
        /* الأيقونة على اليمين → الحشوة على اليمين (فيزيائية لتعمل حتى مع حقول dir=ltr) — يمنع تداخل النص مع الأيقونة نهائياً */
        .input-icon-wrap .input { padding-right: 46px; padding-left: 15px; }
        select.select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238C84AB' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-inline-start: 34px; }
        textarea.input { resize: vertical; min-height: 80px; }
        .form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
        .toggle-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
        .toggle-switch input { display: none; }
        .toggle-track { width: 42px; height: 24px; background: rgba(140,132,171,0.3); border-radius: 20px; position: relative; transition: background 0.25s; flex-shrink: 0; }
        .toggle-track::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.25s; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
        .toggle-switch input:checked + .toggle-track { background: linear-gradient(140deg, #7A52FF, #A66BF2); }
        .toggle-switch input:checked + .toggle-track::after { transform: translateX(-18px); }

        /* ════════ BADGES ════════ */
        .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 30px; font-size: 11px; font-weight: 700; white-space: nowrap; }
        .badge-purple { background: var(--primary-soft); color: #4E24E8; }
        .badge-green { background: var(--success-soft); color: #067A5B; }
        .badge-red { background: var(--danger-soft); color: #B42318; }
        .badge-gold { background: var(--gold-metal); background-size: 200% auto; color: #3D2600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
        .badge-gray { background: rgba(140,132,171,0.15); color: var(--text-muted); }
        .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

        /* ════════ TABLES ════════ */
        .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
        table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
        table.data-table th {
            text-align: right; padding: 12px 14px; font-size: 11.5px; font-weight: 800; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1.5px solid var(--border-light); white-space: nowrap;
        }
        table.data-table td { padding: 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-body); vertical-align: middle; }
        table.data-table tbody tr { transition: background 0.2s; }
        table.data-table tbody tr:hover { background: rgba(108,67,255,0.04); }
        table.data-table tbody tr:last-child td { border-bottom: none; }
        .cell-strong { font-weight: 700; color: var(--text-dark); }
        .cell-actions { display: flex; gap: 6px; justify-content: flex-end; }
        .row-avatar { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0; }

        /* ════════ EMPTY STATE ════════ */
        .empty-state { text-align: center; padding: 50px 20px; }
        .empty-state i { font-size: 52px; color: var(--border-light); margin-bottom: 14px; display: block; }
        .empty-state-title { font-weight: 800; color: var(--text-dark); font-size: 15px; margin-bottom: 4px; }
        .empty-state-sub { font-size: 12.5px; color: var(--text-muted); }

        /* ════════ MODALS ════════ */
        .modal-overlay {
            position: fixed; inset: 0; background: rgba(23,16,46,0.4); z-index: 3000; display: none;
            align-items: center; justify-content: center; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
            padding: 20px;
        }
        .modal-overlay.show { display: flex; }
        .modal-box {
            background: rgba(255,255,255,0.88);
            backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
            border: 1px solid rgba(255,255,255,0.95); border-radius: var(--radius-2xl);
            padding: 26px; max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto;
            box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,1);
            animation: modalPop 0.4s cubic-bezier(0.34,1.56,0.64,1); position: relative;
        }
        .modal-box.modal-wide { max-width: 640px; }
        @keyframes modalPop { from { transform: scale(0.9) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
        .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
        .modal-title { font-size: 18px; font-weight: 900; color: var(--text-dark); display: flex; align-items: center; gap: 8px; }
        .modal-title i { color: var(--primary); }
        .modal-close { width: 34px; height: 34px; border-radius: 11px; border: none; background: rgba(140,132,171,0.12); color: var(--text-muted); cursor: pointer; font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
        .modal-close:hover { background: rgba(229,72,77,0.15); color: var(--danger); }
        .modal-footer { display: flex; gap: 10px; margin-top: 20px; }
        .modal-footer .btn { flex: 1; }

        /* ════════ TOASTS ════════ */
        #toastRoot {
            position: fixed; top: 18px; left: 0; right: 0; z-index: 4000;
            display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; padding: 0 16px;
        }
        .toast {
            pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px;
            background: rgba(255,255,255,0.85); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%);
            border: 1px solid rgba(255,255,255,0.95); border-radius: 20px; padding: 13px 15px;
            box-shadow: 0 10px 20px -8px rgba(23,16,46,0.12), 0 32px 64px -20px rgba(78,36,232,0.38), inset 0 1px 0 rgba(255,255,255,1);
            position: relative; overflow: hidden; cursor: pointer;
            transform: translateY(-28px) scale(0.94); opacity: 0;
            transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
        }
        /* transform: none في حالة الاستقرار — نفس تحصين لوحة البحث ضد إزاحة القصّ الدائري على أندرويد RTL */
        .toast.show { transform: none; opacity: 1; }
        .toast.hide { transform: translateY(-18px) scale(0.94); opacity: 0; transition: 0.25s ease; }
        .toast-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.4), 0 10px 18px -8px rgba(23,16,46,0.35); }
        .toast-body { flex: 1; min-width: 0; }
        .toast-title { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--text-dark); }
        .toast-msg { font-size: 11.5px; color: var(--text-body); line-height: 1.5; margin-top: 1px; }
        .toast-error .toast-icon { background: linear-gradient(140deg, #F0565C, #D63A40); }
        .toast-success .toast-icon { background: linear-gradient(140deg, #14C08D, #0A9068); }
        .toast-warning .toast-icon { background: var(--gold-metal); background-size: 200% auto; color: #3D2600; }
        .toast-info .toast-icon { background: linear-gradient(140deg, #7A52FF, #A66BF2); }
        .toast-progress { position: absolute; bottom: 0; right: 0; left: 0; height: 3px; background: currentColor; transform-origin: right; animation: toastbar 3800ms linear forwards; }
        @keyframes toastbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

        /* ════════ FILTER BAR ════════ */
        .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
        .filter-bar .input, .filter-bar .select { width: auto; min-width: 150px; }
        .search-wrap { position: relative; flex: 1; min-width: 200px; }
        .search-wrap i { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; }
        .search-wrap .input { padding-right: 42px; padding-left: 15px; }

        /* ════════ TABS ════════ */
        .tabs { display: flex; gap: 6px; background: rgba(140,132,171,0.08); padding: 5px; border-radius: 16px; margin-bottom: 20px; width: fit-content; }
        .tab-btn { padding: 9px 18px; border-radius: 12px; border: none; background: transparent; color: var(--text-muted); font-weight: 700; font-size: 13px; cursor: pointer; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; font-family: var(--font-body); }
        .tab-btn.active { background: #fff; color: var(--text-dark); box-shadow: var(--shadow-sm); }

        /* ════════ LOGIN / SETUP SCREENS ════════ */
        .auth-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; z-index: 1; }
        .auth-box { width: 100%; max-width: 400px; }
        .auth-logo { text-align: center; margin-bottom: 30px; }
        .auth-logo-icon {
            width: 84px; height: 84px; border-radius: 26px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(140deg, #7A52FF 0%, #A66BF2 100%); font-size: 38px; color: #fff;
            box-shadow: 0 22px 40px -12px rgba(108,67,255,0.5), inset 0 1.5px 0 rgba(255,255,255,0.4);
            animation: floatUpDown 4.6s ease-in-out infinite; position: relative;
        }
        .auth-logo-icon::before {
            content: ''; position: absolute; inset: -12px; border-radius: 32px; padding: 2px;
            background: conic-gradient(from 0deg, transparent 10%, #A88BFF 30%, #FFE3A0 46%, #E8B44A 55%, transparent 75%);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; animation: haloSpin 7s linear infinite;
        }
        .auth-title {
            font-family: var(--font-display); font-size: 34px; font-weight: 900; text-align: center;
            background: linear-gradient(115deg, #2A1B6E 0%, #6C43FF 38%, #B267E8 58%, #2A1B6E 100%);
            background-size: 220% 220%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 7s ease infinite;
        }
        .auth-sub { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
        .auth-card { background: var(--bg-card); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border: 1px solid rgba(255,255,255,0.85); border-radius: var(--radius-2xl); padding: 28px 24px; margin-top: 26px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.95); position: relative; overflow: hidden; }
        .auth-card::after { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2.5px; border-radius: 0 0 6px 6px; background: var(--gold-metal); background-size: 200% auto; animation: shimmer 5s linear infinite; }
        .auth-card > * { position: relative; z-index: 1; }
        .auth-error { background: var(--danger-soft); border: 1px solid #F7C6C8; color: #B42318; padding: 11px 15px; border-radius: var(--radius-md); margin-bottom: 14px; font-weight: 600; text-align: center; font-size: 13px; display: none; }
        .auth-footer-hint { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 20px; }
        /* ✨ أزرار شاشة الدخول — نسخة مجمَّلة */
        #authTabs { width: 100%; background: rgba(108,67,255,0.07); border: 1px solid rgba(108,67,255,0.14); border-radius: 18px; padding: 5px; gap: 5px; }
        #authTabs .tab-btn { flex: 1; padding: 11px 8px; border-radius: 14px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
        #authTabs .tab-btn i { font-size: 15px; }
        #authTabs .tab-btn.active, html.dark #authTabs .tab-btn.active {
            background: linear-gradient(140deg, #7A52FF 0%, #A66BF2 100%); color: #fff;
            box-shadow: 0 10px 22px -9px rgba(108,67,255,0.6), inset 0 1.5px 0 rgba(255,255,255,0.35);
        }
        .auth-submit-btn {
            margin-top: 10px; padding: 15px 20px; font-size: 15px; border-radius: 18px;
            background: linear-gradient(120deg, #5B2EEF 0%, #7A52FF 28%, #9B65FF 50%, #7A52FF 72%, #5B2EEF 100%);
            background-size: 220% auto; animation: shimmer 7s linear infinite;
            box-shadow: 0 20px 40px -14px rgba(93,46,239,0.65), inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -3px 8px rgba(40,12,120,0.4);
        }
        .auth-submit-btn i { font-size: 18px; }
        .auth-submit-btn .auth-submit-arrow { font-size: 16px; opacity: 0.85; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }
        .auth-submit-btn:hover .auth-submit-arrow { transform: translateX(-5px); }
        .auth-submit-btn:hover { box-shadow: 0 24px 48px -14px rgba(93,46,239,0.8), inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 8px rgba(40,12,120,0.4), 0 0 0 4px rgba(122,82,255,0.18); }
        .auth-submit-btn.btn-gold { background: var(--gold-metal); background-size: 220% auto; box-shadow: 0 20px 40px -14px rgba(201,138,27,0.6), inset 0 2px 0 rgba(255,255,255,0.6), inset 0 -3px 8px rgba(110,70,5,0.3); }
        .auth-submit-btn.btn-gold:hover { box-shadow: 0 24px 48px -14px rgba(201,138,27,0.75), inset 0 2px 0 rgba(255,255,255,0.65), inset 0 -3px 8px rgba(110,70,5,0.3), 0 0 0 4px rgba(232,180,74,0.2); }
        html.lite .auth-submit-btn { animation: none; }

        /* ════════ الدخول بالبصمة (WebAuthn) ════════ */
        .wa-login-btn {
            width: 100%; display: flex; align-items: center; gap: 14px; cursor: pointer;
            padding: 14px 18px; border-radius: var(--radius-xl); border: 1.5px solid rgba(15,169,122,0.35);
            background: linear-gradient(135deg, rgba(15,169,122,0.14), rgba(108,67,255,0.10));
            box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
            text-align: right; font-family: var(--font-body);
        }
        .wa-login-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(15,169,122,0.35); }
        .wa-login-btn:active { transform: scale(0.98); }
        .wa-login-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
        .wa-login-btn-icon {
            flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(140deg, #14C08D, #0A9068); color: #fff; font-size: 23px;
            box-shadow: 0 8px 20px -6px rgba(15,169,122,0.6); animation: softPulse 2.4s ease-in-out infinite;
        }
        html.lite .wa-login-btn-icon { animation: none; }
        .wa-login-btn-text { display: flex; flex-direction: column; gap: 2px; }
        .wa-login-btn-text b { font-size: 14.5px; color: var(--text-dark); font-weight: 800; }
        .wa-login-btn-text small { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
        .auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-muted); font-size: 12px; font-weight: 700; }
        .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }
        .wa-toggle-link {
            width: 100%; background: transparent; border: none; cursor: pointer; padding: 6px; margin-bottom: 14px;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            color: var(--primary); font-weight: 700; font-size: 12.5px; font-family: var(--font-body);
        }
        .wa-toggle-link i { font-size: 14px; }

        /* — صفوف الأجهزة المفعَّلة (إعدادات الموظف / تبويب «حسابي» للزبون) — */
        .wa-device-row {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px;
            background: rgba(255,255,255,0.5); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
        }
        .wa-device-icon {
            flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
            background: rgba(15,169,122,0.14); color: var(--success); font-size: 18px;
        }
        .wa-device-info { flex: 1; min-width: 0; }
        .wa-device-label { font-size: 13px; font-weight: 800; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .wa-device-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
        .wa-device-del {
            flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; border: none; cursor: pointer;
            background: var(--danger-soft); color: var(--danger); display: flex; align-items: center; justify-content: center;
            transition: transform var(--transition);
        }
        .wa-device-del:hover { transform: scale(1.08); }

        /* ════════ إعلان صفحة الدخول ════════ */
        .login-ad {
            margin-top: 22px; display: flex; align-items: center; gap: 13px;
            padding: 15px 17px; border-radius: var(--radius-xl);
            background: linear-gradient(135deg, rgba(108,67,255,0.14), rgba(201,138,27,0.10));
            border: 1px solid rgba(108,67,255,0.28);
            box-shadow: 0 10px 30px rgba(108,67,255,0.16), inset 0 1px 0 rgba(255,255,255,0.6);
            position: relative; overflow: hidden; animation: adPulse 4.5s ease-in-out infinite;
        }
        .login-ad::before {
            content: ''; position: absolute; top: 0; right: -60%; width: 55%; height: 100%;
            background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
            animation: adShine 4.5s linear infinite;
        }
        @keyframes adShine { 0% { right: -60%; } 55%, 100% { right: 130%; } }
        @keyframes adPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(108,67,255,0.16), inset 0 1px 0 rgba(255,255,255,0.6); } 50% { box-shadow: 0 14px 38px rgba(108,67,255,0.28), inset 0 1px 0 rgba(255,255,255,0.6); } }
        .login-ad-icon {
            flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
            background: var(--gold-metal); background-size: 200% auto; animation: shimmer 5s linear infinite;
            color: #3D2600; font-size: 21px; box-shadow: 0 6px 16px rgba(201,138,27,0.32);
        }
        .login-ad-text { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.7; color: var(--text-strong, #23202E); position: relative; z-index: 1; }
        html.dark .login-ad-text { color: var(--text, #EAECFF); }
        html.lite .login-ad::before, html.lite .login-ad { animation: none !important; }

        /* ════════ PERMISSIONS GRID ════════ */
        .perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .perm-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; background: rgba(255,255,255,0.55); border: 1px solid var(--border-soft); border-radius: 13px; }
        .perm-item span { font-size: 12.5px; font-weight: 600; color: var(--text-body); }

        /* ════════ AVATAR COLOR PICKER ════════ */
        .color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
        .color-dot { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; transition: border-color 0.2s, transform 0.2s; }
        .color-dot.selected { border-color: var(--text-dark); transform: scale(1.15); }

        /* ════════ RESPONSIVE ════════ */
        @media (max-width: 1080px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 900px) {
            .sidebar { transform: translateX(105%); top: 0; bottom: 0; right: 0; border-radius: 0; }
            .sidebar.mobile-open { transform: translateX(0); }
            .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(23,16,46,0.45); z-index: 999; backdrop-filter: blur(4px); }
            .sidebar-overlay.show { display: block; }
            .main-content { margin-right: 0; padding: 18px 16px 90px; }
            .mobile-topbar {
                display: flex; align-items: center; justify-content: space-between; gap: 12px;
                background: rgba(255,255,255,0.7); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
                border: 1px solid rgba(255,255,255,0.9); border-radius: 20px; padding: 12px 14px; margin-bottom: 18px;
                box-shadow: var(--shadow-md); position: sticky; top: 10px; z-index: 500;
            }
            .mobile-topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text-dark); font-family: var(--font-display); font-size: 16px; }
            .mobile-menu-btn { width: 40px; height: 40px; border-radius: 13px; border: none; background: rgba(108,67,255,0.1); color: var(--primary); font-size: 19px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
            .content-title { font-size: 21px; }
            .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
            .form-row { grid-template-columns: 1fr; }
            .perm-grid { grid-template-columns: 1fr; }
        }

        /* ═══════════════════════ ستارة تبديل الثيم (غروب/شروق سينمائي) ═══════════════════════ */
        .theme-wipe {
            position: fixed; inset: 0; height: 100dvh; z-index: 99999; pointer-events: none;
            animation: themeSweep 1.25s cubic-bezier(0.66, 0, 0.34, 1) forwards; will-change: transform;
        }
        @keyframes themeSweep {
            0%   { transform: translateY(-103%); }
            44%  { transform: translateY(0); }
            56%  { transform: translateY(0); }
            100% { transform: translateY(103%); }
        }
        /* نحو الداكن: غروب — توهّج دافئ يهبط ثم يحلّ الليل البنفسجي */
        .theme-wipe.to-dark {
            background: linear-gradient(180deg,
                #0D0A1C 0%, #171233 30%, #3B1E7E 52%, #8B3FB8 68%,
                #E75A8C 80%, #FF8E5E 88%, #FFC46B 94%, #FFE9B8 100%);
        }
        .theme-wipe.to-dark::after {
            content: ''; position: absolute; left: 50%; bottom: 3.5%;
            width: 34vmin; height: 34vmin; transform: translateX(-50%); border-radius: 50%;
            background: radial-gradient(circle, #FFF6D8 0%, #FFD98A 38%, rgba(255,180,90,0.55) 62%, transparent 72%);
            filter: blur(6px);
        }
        /* نحو الفاتح: شروق — الفجر يبدّد الليل */
        .theme-wipe.to-light {
            background: linear-gradient(180deg,
                #FDFCFF 0%, #FFE9B8 7%, #FFC46B 14%, #FF8E5E 26%,
                #E75A8C 44%, #8B3FB8 63%, #3B1E7E 80%, #0D0A1C 100%);
        }
        .theme-wipe.to-light::after {
            content: ''; position: absolute; left: 50%; top: 4.5%;
            width: 30vmin; height: 30vmin; transform: translateX(-50%); border-radius: 50%;
            background: radial-gradient(circle, #FFFDF4 0%, #FFE9A8 40%, rgba(255,200,110,0.5) 62%, transparent 72%);
            filter: blur(5px);
        }
        html.lite .theme-wipe { display: none; }

        /* ═══════════════════════ الوضع الداكن (Dark Mode) ═══════════════════════ */
        html.dark { color-scheme: dark; }
        html.dark body {
            --primary: #8B68FF; --primary-dark: #6C43FF; --primary-light: #B49BFF; --primary-soft: rgba(139,104,255,0.16);
            --orchid: #F06AC0;
            --gold: #E8B44A; --gold-light: #F6CE77; --gold-soft: rgba(232,180,74,0.15);
            --gold-metal: linear-gradient(105deg, #7A5410 0%, #E8B44A 22%, #FFF0C2 38%, #D89B26 55%, #8E5E0A 72%, #F6CE77 100%);
            --success: #2BD79E; --success-soft: rgba(43,215,158,0.15);
            --danger: #FF6B70; --danger-soft: rgba(255,107,112,0.14);
            --bg-main: #0D0A1C; --bg-white: #171233; --bg-card: rgba(26,20,48,0.72);
            --text-dark: #F3EFFF; --text-body: #C9C2E8; --text-muted: #8D85B5; --text-light: #B49BFF;
            --border-light: rgba(150,130,220,0.22); --border-soft: rgba(150,130,220,0.12);
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 6px 16px -6px rgba(0,0,0,0.4);
            --shadow-md: 0 2px 5px rgba(0,0,0,0.3), 0 22px 48px -18px rgba(0,0,0,0.55);
            --shadow-lg: 0 10px 20px -8px rgba(0,0,0,0.4), 0 38px 84px -24px rgba(0,0,0,0.6);
            --shadow-glow: 0 14px 38px -10px rgba(139,104,255,0.4);
        }
        html.dark body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #241A52 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #3A2158 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #10254A 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #3A1440 0%, transparent 60%),
                #0D0A1C;
        }
        html.dark .bg-orb { opacity: 0.45; filter: blur(100px) saturate(1.1); }
        html.dark ::selection { background: rgba(139,104,255,0.4); }
        html.dark ::-webkit-scrollbar-thumb { background: #3A2F6B; }
        html.dark ::-webkit-scrollbar-thumb:hover { background: #4C3E8C; }
        html.dark .sidebar, html.dark .mobile-topbar {
            background: rgba(16,12,36,0.8); border-color: rgba(150,130,220,0.2);
            box-shadow: 0 4px 10px rgba(0,0,0,0.35), 0 28px 56px -18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(190,170,255,0.1);
        }
        html.dark .card, html.dark .card-flat, html.dark .stat-card, html.dark .auth-card {
            background: rgba(24,18,46,0.72); border-color: rgba(150,130,220,0.18);
            box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 22px 48px -18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(190,170,255,0.08);
        }
        html.dark .modal-box { background: rgba(23,17,44,0.94); border-color: rgba(150,130,220,0.26); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(190,170,255,0.1); }
        html.dark .input, html.dark .select, html.dark textarea.input {
            background: rgba(13,10,28,0.55); border-color: rgba(150,130,220,0.26);
            color: var(--text-dark); box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
        }
        html.dark .input:focus, html.dark .select:focus, html.dark textarea.input:focus {
            background: rgba(13,10,28,0.85); border-color: rgba(139,104,255,0.6); box-shadow: 0 0 0 4px rgba(139,104,255,0.18);
        }
        html.dark .select option { background: #171233; color: #F3EFFF; }
        html.dark .input::placeholder, html.dark textarea.input::placeholder { color: #6F679A; }
        html.dark .toast { background: rgba(24,18,46,0.92); border-color: rgba(150,130,220,0.26); box-shadow: var(--shadow-lg); }
        html.dark .tab-btn.active { background: rgba(139,104,255,0.22); color: var(--text-dark); box-shadow: none; }
        html.dark .btn-outline { background: rgba(24,18,46,0.6); border-color: rgba(139,104,255,0.45); color: var(--primary-light); }
        html.dark .btn-outline.danger { border-color: rgba(255,107,112,0.45); color: var(--danger); }
        html.dark .nav-link:hover, html.dark .user-chip:hover { background: rgba(139,104,255,0.1); }
        html.dark .perm-item { background: rgba(24,18,46,0.55); }
        html.dark .sidebar-overlay { background: rgba(0,0,0,0.62); }
        html.dark .color-dot.selected { border-color: #F3EFFF; }
        html.dark table.data-table thead th { background: rgba(139,104,255,0.08); }
        html.dark table.data-table tbody tr:hover { background: rgba(139,104,255,0.06); }
        html.dark .portal-dock { background: rgba(16,12,36,0.86); border-color: rgba(150,130,220,0.22); }
        html.dark .portal-icon-btn, html.dark .notif-item, html.dark .card-number-item,
        html.dark .pay-method-card, html.dark .buy-card-tile, html.dark .install-hint,
        html.dark .qty-stepper {
            background: rgba(24,18,46,0.7); border-color: rgba(150,130,220,0.2);
        }
        html.dark .notif-item.unread { background: rgba(139,104,255,0.14); }
        html.lite.dark body::before { background: #12102A; }
        html.lite.dark .sidebar, html.lite.dark .portal-dock, html.lite.dark .mobile-topbar { background: rgba(18,14,38,0.98) !important; }
        html.lite.dark .card, html.lite.dark .stat-card, html.lite.dark .modal-box, html.lite.dark .auth-card,
        html.lite.dark .card-number-item, html.lite.dark .pay-method-card, html.lite.dark .notif-item,
        html.lite.dark .buy-card-tile, html.lite.dark .portal-icon-btn { background: #171233 !important; }

        /* زر تبديل الثيم في الشريط الجانبي */
        .theme-btn {
            display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 8px;
            border-radius: 14px; border: 1px solid var(--border-light); background: rgba(255,255,255,0.5);
            cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 12.5px; color: var(--text-body);
            transition: border-color 0.25s, color 0.25s;
        }
        .theme-btn i { font-size: 16px; color: var(--gold); }
        .theme-btn:hover { border-color: rgba(139,104,255,0.4); color: var(--primary); }
        html.dark .theme-btn { background: rgba(24,18,46,0.6); }

        /* ═══════════════════════ محادثة الدعم الفني (نمط واتساب) ═══════════════════════ */
        .support-layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: stretch; }
        .ticket-list-pane, .chat-pane { min-height: 64vh; max-height: 76vh; display: flex; flex-direction: column; }
        .ticket-list-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-inline-end: 2px; }
        .ticket-item {
            display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 16px;
            cursor: pointer; border: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s;
        }
        .ticket-item:hover { background: rgba(108,67,255,0.07); }
        .ticket-item.active { background: var(--primary-soft); border-color: rgba(139,104,255,0.35); }
        .ticket-avatar {
            width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
            background: var(--gold-metal); color: #3A2800; font-weight: 900; font-size: 16px; font-family: var(--font-display);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        }
        .ticket-item-info { flex: 1; min-width: 0; }
        .ticket-item-name { font-weight: 800; font-size: 13.5px; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ticket-item-snippet { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
        .ticket-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
        .ticket-item-time { font-size: 10.5px; color: var(--text-muted); }
        .ticket-unread {
            min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--success); color: #fff;
            font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
        }
        .ticket-status-chip { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
        .ticket-status-chip.open { background: var(--success-soft); color: var(--success); }
        .ticket-status-chip.closed { background: var(--danger-soft); color: var(--danger); }
        .chat-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
        .chat-head-info { flex: 1; min-width: 0; }
        .chat-head-name { font-weight: 800; font-size: 14.5px; color: var(--text-dark); }
        .chat-head-sub { font-size: 11.5px; color: var(--text-muted); direction: ltr; text-align: right; }
        .chat-back-btn { display: none; }
        .chat-body { flex: 1; overflow-y: auto; padding: 15px 4px; display: flex; flex-direction: column; gap: 9px; }
        .chat-bubble {
            max-width: 80%; padding: 10px 14px; border-radius: 18px; font-size: 13.5px; line-height: 1.7;
            word-break: break-word; white-space: pre-wrap; position: relative; box-shadow: var(--shadow-sm);
        }
        .chat-bubble .cb-meta { display: flex; gap: 6px; align-items: center; font-size: 10px; opacity: 0.75; margin-top: 4px; font-weight: 600; }
        .chat-bubble.cb-me {
            align-self: flex-end; color: #fff; border-bottom-left-radius: 6px;
            background: linear-gradient(140deg, #7A52FF 0%, #A66BF2 100%);
        }
        .chat-bubble.cb-them {
            align-self: flex-start; color: var(--text-dark); border-bottom-right-radius: 6px;
            background: rgba(255,255,255,0.85); border: 1px solid var(--border-light);
        }
        html.dark .chat-bubble.cb-them { background: rgba(30,23,56,0.9); }
        .chat-bubble.cb-system {
            align-self: center; max-width: 92%; text-align: center; font-size: 12px; font-weight: 700;
            background: var(--gold-soft); color: var(--gold); border: 1px dashed rgba(201,138,27,0.4);
            border-radius: 999px; padding: 7px 16px; box-shadow: none;
        }
        html.dark .chat-bubble.cb-system { color: var(--gold-light); border-color: rgba(232,180,74,0.4); }
        .chat-input-row { display: flex; gap: 10px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--border-light); }
        .chat-input-row textarea { flex: 1; resize: none; min-height: 46px; max-height: 120px; }
        .chat-send-btn {
            width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
            background: linear-gradient(140deg, #7A52FF, #A66BF2); box-shadow: var(--shadow-glow); transition: transform 0.2s;
        }
        .chat-send-btn:active { transform: scale(0.92); }
        .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); }
        .chat-empty i { font-size: 44px; opacity: 0.5; }
        @media (max-width: 900px) {
            .support-layout { grid-template-columns: 1fr; }
            .support-layout .chat-pane { display: none; }
            .support-layout.show-chat .chat-pane { display: flex; }
            .support-layout.show-chat .ticket-list-pane { display: none; }
            .chat-back-btn { display: inline-flex; }
            .ticket-list-pane, .chat-pane { min-height: 58vh; max-height: none; }
        }

        /* ═══════════════════════ سجل التدقيق ═══════════════════════ */
        .audit-row { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px dashed var(--border-soft); align-items: flex-start; }
        .audit-row:last-child { border-bottom: none; }
        .audit-ico {
            width: 38px; height: 38px; border-radius: 13px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 17px;
        }
        .audit-main { flex: 1; min-width: 0; }
        .audit-action { font-weight: 800; font-size: 13.5px; color: var(--text-dark); }
        .audit-details { font-size: 12.5px; color: var(--text-body); margin-top: 2px; line-height: 1.6; word-break: break-word; }
        .audit-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin-top: 5px; }
        .audit-meta span { display: inline-flex; align-items: center; gap: 4px; }

        /* ═══════════════════════ صفحة فحص البطاقة ═══════════════════════ */
        .cc-search-wrap { position: relative; }
        .cc-search-wrap > i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 16px; font-size: 18px; color: var(--text-muted); pointer-events: none; }
        .cc-search-input { padding-inline-start: 46px !important; font-size: 15.5px !important; height: 54px; border-radius: 18px !important; }
        .cc-card {
            border: 1px solid var(--border-light); border-radius: 18px; padding: 14px;
            background: rgba(255,255,255,0.55); margin-bottom: 11px;
        }
        html.dark .cc-card { background: rgba(24,18,46,0.6); }
        .cc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .cc-num { font-weight: 800; font-size: 15.5px; letter-spacing: 1px; direction: ltr; color: var(--text-dark); font-family: 'Courier New', monospace; }
        .cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 11px; }
        .cc-field { font-size: 12px; color: var(--text-muted); }
        .cc-field b { display: block; font-size: 13px; color: var(--text-dark); font-weight: 700; margin-top: 1px; }

        /* ═══════════════════════ إعدادات: معاينة الأيقونة + الصيانة ═══════════════════════ */
        .icon-preview-img {
            width: 76px; height: 76px; border-radius: 20px; object-fit: cover; flex-shrink: 0;
            border: 1px solid var(--border-light); box-shadow: var(--shadow-md); background: #0D0A1C;
        }
        .maint-pill { padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
        .maint-pill.on { background: var(--danger-soft); color: var(--danger); }
        .maint-pill.off { background: var(--success-soft); color: var(--success); }

        @media (max-width: 520px) {
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .modal-box { padding: 20px 16px; }
            table.data-table { font-size: 12.5px; }
        }

        /* شبكة إحصائيات لوحة التحكم الرئيسية (5 بطاقات) */
        @media (max-width: 1300px) { .stats-grid-5 { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 640px)  { .stats-grid-5 { grid-template-columns: repeat(2, 1fr); } }

        /* ═══════════════════════ لمسات بصرية أفخم (أنيميشن + حالات تحميل) ═══════════════════════ */
        /* دخول ناعم للبطاقات والصفحات */
        @keyframes ansRise {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes ansFade { from { opacity: 0; } to { opacity: 1; } }
        .page-view.active > .card,
        .page-view.active > .stats-grid > .stat-card,
        .page-view.active > .bento-grid > .stat-card,
        .page-view.active > .content-topbar {
            animation: ansRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        /* تدرّج بسيط في ظهور البطاقات المتتابعة لإحساس أرقى */
        .page-view.active > .card:nth-child(2) { animation-delay: 0.04s; }
        .page-view.active > .card:nth-child(3) { animation-delay: 0.08s; }
        .page-view.active > .card:nth-child(4) { animation-delay: 0.12s; }
        .page-view.active > .card:nth-child(5) { animation-delay: 0.16s; }
        .page-view.active > .stats-grid > .stat-card:nth-child(2) { animation-delay: 0.05s; }
        .page-view.active > .stats-grid > .stat-card:nth-child(3) { animation-delay: 0.1s; }
        .page-view.active > .stats-grid > .stat-card:nth-child(4) { animation-delay: 0.15s; }
        .page-view.active > .bento-grid > .stat-card:nth-child(2) { animation-delay: 0.05s; }
        .page-view.active > .bento-grid > .stat-card:nth-child(3) { animation-delay: 0.1s; }
        .page-view.active > .bento-grid > .stat-card:nth-child(4) { animation-delay: 0.15s; }
        .page-view.active > .bento-grid > .stat-card:nth-child(5) { animation-delay: 0.2s; }
        html.lite .page-view.active > .card,
        html.lite .page-view.active > .stats-grid > .stat-card,
        html.lite .page-view.active > .bento-grid > .stat-card,
        html.lite .page-view.active > .content-topbar { animation: none; }

        /* رفع لطيف للأزرار والبطاقات عند المرور */
        .btn { transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s, filter 0.2s, background 0.2s, opacity 0.2s; }
        .btn:hover:not(:disabled) { transform: translateY(-2px); }
        .btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
        .stat-card { transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s; }
        .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
        html.lite .btn:hover, html.lite .stat-card:hover { transform: none; }

        /* أيقونات عناوين البطاقات تنبض بلطف */
        @keyframes ansIconPulse {
            0%, 100% { transform: scale(1); }
            50%      { transform: scale(1.12); }
        }
        .card-title > i.ph-duotone,
        .content-title > i.ph-duotone { display: inline-block; }
        .card:hover .card-title > i.ph-duotone { animation: ansIconPulse 1.1s ease-in-out; }
        html.lite .card:hover .card-title > i.ph-duotone { animation: none; }

        /* سبينر دائري صغير للأزرار أثناء التحميل */
        @keyframes ansSpin { to { transform: rotate(360deg); } }
        .ans-spin {
            display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
            border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%;
            animation: ansSpin 0.7s linear infinite;
        }
        .btn.is-loading { pointer-events: none; opacity: 0.85; }
        .btn-outline .ans-spin, .btn-ghost .ans-spin { border-color: rgba(139,104,255,0.35); border-top-color: var(--primary); }

        /* هيكل تحميل (Skeleton) للقوائم والبطاقات */
        @keyframes ansShimmer { 100% { background-position: -200% 0; } }
        .ans-skel {
            border-radius: 10px; background: linear-gradient(90deg,
                rgba(150,130,220,0.10) 25%, rgba(150,130,220,0.22) 37%, rgba(150,130,220,0.10) 63%);
            background-size: 200% 100%; animation: ansShimmer 1.3s ease-in-out infinite;
        }

        /* ════════ Micro-interactions: Ripple + Haptic Scale (بدون أي مكتبات) ════════ */
        .btn, .btn-icon, .nav-link, .dock-tab, .copy-btn, .mk-login-btn, .tab-btn, .stat-card, .card[onclick] {
            position: relative; overflow: hidden;
            -webkit-tap-highlight-color: transparent;
        }
        .ans-ripple {
            position: absolute; border-radius: 50%; pointer-events: none;
            background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 55%, transparent 72%);
            transform: scale(0); opacity: 0.9; z-index: 5;
            animation: ansRippleOut 0.62s cubic-bezier(0.22,0.61,0.36,1) forwards;
        }
        .btn-outline .ans-ripple, .btn-ghost .ans-ripple, .nav-link .ans-ripple,
        .tab-btn .ans-ripple, .stat-card .ans-ripple, .card[onclick] .ans-ripple, .copy-btn.copy-btn-sm .ans-ripple {
            background: radial-gradient(circle, rgba(108,67,255,0.28) 0%, rgba(108,67,255,0.10) 55%, transparent 72%);
        }
        @keyframes ansRippleOut {
            to { transform: scale(1); opacity: 0; }
        }
        .btn-icon:active, .copy-btn:active, .nav-link:active, .dock-tab:active,
        .tab-btn:active, .card[onclick]:active { transform: scale(0.96); }
        .stat-card:active { transform: scale(0.985); }
        html.lite .ans-ripple { display: none; }
        @media (prefers-reduced-motion: reduce) { .ans-ripple { display: none; } }

        /* ════════ Command Palette (Cmd/Ctrl+K) ════════ */
        /* إصلاح تداخل أندرويد RTL: لا نجمع backdrop-filter + border-radius + overflow:hidden + transform دائم
           على نفس الصندوق — كروم أندرويد يحسب أصل القصّ الدائري خطأً فينزاح المحتوى بمقدار نصف قطر الزاوية (30px) */
        .cmd-palette-box {
            align-self: flex-start; margin-top: 10vh;
            animation: cmdPopIn 0.22s cubic-bezier(0.22,1,0.36,1) backwards;
            overflow: visible;
            background: rgba(255,255,255,0.97);
            backdrop-filter: none; -webkit-backdrop-filter: none;
        }
        html.dark .cmd-palette-box { background: rgba(26,19,48,0.985); }
        @keyframes cmdPopIn { from { opacity: 0; transform: translateY(-14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .cmd-input-wrap {
            display: flex; align-items: center; gap: 12px; padding: 16px 18px;
            border-bottom: 1px solid var(--border-soft);
        }
        .cmd-input-wrap i { font-size: 19px; color: var(--text-muted); flex-shrink: 0; }
        .cmd-input {
            flex: 1; border: none; background: transparent; outline: none; font-size: 15.5px;
            font-family: var(--font-body); color: var(--text-dark); font-weight: 600;
        }
        .cmd-input::placeholder { color: var(--text-muted); font-weight: 500; }
        .cmd-kbd {
            font-size: 10.5px; font-weight: 800; color: var(--text-muted); background: rgba(122,100,190,0.12);
            padding: 3px 8px; border-radius: 7px; flex-shrink: 0;
        }
        .cmd-results { max-height: 56vh; overflow-y: auto; padding: 8px; border-radius: 0 0 calc(var(--radius-2xl) - 1px) calc(var(--radius-2xl) - 1px); }
        .cmd-section-label { font-size: 10.5px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.6px; padding: 10px 12px 4px; text-transform: uppercase; }
        .cmd-item {
            display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px;
            cursor: pointer; transition: background 0.15s;
        }
        .cmd-item:hover, .cmd-item.cmd-active { background: rgba(108,67,255,0.10); }
        .cmd-item-icon {
            width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(140deg, #7A52FF, #A66BF2); color: #fff; font-size: 16px; flex-shrink: 0;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px -6px rgba(108,67,255,0.4);
        }
        .cmd-item-title { font-weight: 700; font-size: 13.5px; color: var(--text-dark); }
        .cmd-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
        .cmd-item-hint { margin-inline-start: auto; font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }
        .cmd-empty { text-align: center; padding: 34px 16px; color: var(--text-muted); font-size: 13px; }
        .cmd-trigger-btn {
            display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin-bottom: 12px;
            border-radius: 13px; border: 1px solid var(--border-light);
            /* خلفية مشتقّة من لون النص فتنقلب مع الوضع الداكن تلقائياً بدل البياض */
            background: color-mix(in srgb, var(--text-dark) 6%, transparent);
            color: var(--text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color 0.2s, color 0.2s;
        }
        .cmd-trigger-btn:hover { background: rgba(108,67,255,0.08); color: var(--text-dark); }
        .cmd-trigger-btn i.ph-magnifying-glass { font-size: 15px; }
        .cmd-trigger-kbd {
            margin-inline-start: auto; font-size: 10px; font-weight: 800; background: rgba(122,100,190,0.14);
            padding: 2px 7px; border-radius: 6px; color: var(--text-muted);
        }

        /* ════════ Success Burst — انفجار نجاح صغير بديل عن Lottie (CSS/SVG خالص) ════════ */
        .success-burst-overlay {
            position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
            pointer-events: none; opacity: 0; visibility: hidden;
        }
        .success-burst-overlay.show { animation: burstFadeInOut 1.15s ease forwards; visibility: visible; }
        @keyframes burstFadeInOut {
            0% { opacity: 0; } 10% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; }
        }
        .success-burst-ring {
            position: absolute; width: 90px; height: 90px; border-radius: 50%;
            background: radial-gradient(circle, rgba(15,169,122,0.35) 0%, rgba(15,169,122,0.08) 55%, transparent 72%);
            transform: scale(0);
        }
        .success-burst-overlay.show .success-burst-ring { animation: burstRingPop 0.9s cubic-bezier(0.22,1,0.36,1) forwards; }
        @keyframes burstRingPop {
            0% { transform: scale(0); opacity: 0.9; }
            60% { transform: scale(2.6); opacity: 0.5; }
            100% { transform: scale(3.4); opacity: 0; }
        }
        .success-burst-check {
            width: 78px; height: 78px; position: relative; z-index: 1;
            filter: drop-shadow(0 8px 18px rgba(15,169,122,0.5));
        }
        .success-burst-circle {
            stroke: #12C08C; stroke-width: 3; stroke-linecap: round;
            stroke-dasharray: 145; stroke-dashoffset: 145;
        }
        .success-burst-tick {
            stroke: #12C08C; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
            stroke-dasharray: 36; stroke-dashoffset: 36;
        }
        .success-burst-overlay.show .success-burst-circle { animation: burstDraw 0.45s ease forwards; }
        .success-burst-overlay.show .success-burst-tick { animation: burstDraw 0.35s ease 0.4s forwards; }
        @keyframes burstDraw { to { stroke-dashoffset: 0; } }
        @media (prefers-reduced-motion: reduce) {
            .success-burst-overlay { display: none !important; }
        }
        html.lite .success-burst-overlay { display: none !important; }
        html.dark .ans-skel { background: linear-gradient(90deg,
            rgba(150,130,220,0.08) 25%, rgba(150,130,220,0.18) 37%, rgba(150,130,220,0.08) 63%);
            background-size: 200% 100%; }
        .ans-skel-row { height: 56px; margin-bottom: 10px; }
        .ans-skel-line { height: 13px; margin-bottom: 9px; }
        .ans-skel-line.sm { width: 55%; }
        .ans-skel-card {
            display: flex; align-items: center; gap: 12px; padding: 16px;
            background: var(--bg-card); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
            border: 1px solid rgba(255,255,255,0.85); border-radius: var(--radius-xl);
            box-shadow: var(--shadow-sm);
        }
        html.lite .ans-skel { animation: none; opacity: 0.7; }

        /* توهّج نبضة على البطاقات المميزة (النسخ الاحتياطي / الإشعار الجماعي) */
        .feature-card { position: relative; overflow: hidden; }
        .feature-card::before {
            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
            background: linear-gradient(120deg, transparent, rgba(139,104,255,0.35), transparent);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.7;
        }
        html.lite .feature-card::before { display: none; }

        /* صندوق "تذكرني" في صفحة الدخول */
        .remember-row {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            margin: 4px 0 2px; font-size: 12.5px; color: var(--text-body);
        }
        .remember-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-weight: 700; }
        .remember-check input { position: absolute; opacity: 0; width: 0; height: 0; }
        .remember-box {
            width: 20px; height: 20px; border-radius: 7px; border: 1.8px solid var(--border-light);
            background: var(--bg-white); display: inline-flex; align-items: center; justify-content: center;
            transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; flex-shrink: 0;
        }
        .remember-box i { font-size: 13px; color: #fff; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.2s, color 0.2s; }
        .remember-check input:checked + .remember-box {
            background: var(--gold-metal); border-color: transparent; box-shadow: 0 3px 10px -3px rgba(201,138,27,0.5);
        }
        .remember-check input:checked + .remember-box i { opacity: 1; transform: scale(1); color: #3A2800; }
        .remember-check:hover .remember-box { border-color: rgba(139,104,255,0.5); }

        /* شارة إشعار جماعي عدّاد الزبائن */
        .bc-count-pill {
            display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
            padding: 4px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary);
        }

        /* ═══════════════ أيقونات إضافية مدمجة (تعمل بدون إنترنت) ═══════════════ */
        .ph-paperclip{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.5 12 21a5.3 5.3 0 0 1-7.5-7.5l9-9a3.55 3.55 0 0 1 5 5l-9 9a1.77 1.77 0 0 1-2.5-2.5l8.3-8.3'/%3E%3C/svg%3E")}
        .ph-palette{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18h1.5a2.5 2.5 0 0 0 0-5H12a2 2 0 0 1 0-4h6.5A2.5 2.5 0 0 0 21 9.5 8.7 8.7 0 0 0 12 3Z'/%3E%3Ccircle cx='7.5' cy='10.5' r='1.1'/%3E%3Ccircle cx='11' cy='7' r='1.1'/%3E%3Ccircle cx='15.5' cy='7.5' r='1.1'/%3E%3C/svg%3E")}
        .ph-megaphone-simple{--pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6l14 4V5L4 9Z'/%3E%3Cpath d='M8 15.5v2.7a1.8 1.8 0 0 0 3.6 0v-1.6'/%3E%3C/svg%3E")}

        /* ═══════════════ الانتقال التدريجي بين الصفحات (Stagger Reveal) ═══════════════ */
        @keyframes stgIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
        .stg-in.stg-in { animation: stgIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--stg-d, 0ms) !important; }
        html.lite .stg-in.stg-in { animation: none; }

        /* أيقونات القوائم تهتز بلطف عند التحويم */
        @keyframes ansWiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-11deg); } 70% { transform: rotate(9deg); } }
        .nav-link:hover > i, .dock-tab:hover > i { animation: ansWiggle 0.5s ease; }
        html.lite .nav-link:hover > i, html.lite .dock-tab:hover > i { animation: none; }

        /* هيكل تحميل المحادثات (فقاعات وهمية بدل نص التحميل) */
        .chat-skel { display: flex; flex-direction: column; gap: 10px; padding: 12px 4px; }
        .chat-skel .cs-b1 { width: 62%; height: 46px; border-radius: 16px 16px 16px 5px; }
        .chat-skel .cs-b2 { width: 44%; height: 38px; align-self: flex-end; border-radius: 16px 16px 5px 16px; }
        .chat-skel .cs-b3 { width: 72%; height: 54px; border-radius: 16px 16px 16px 5px; }

        /* ═══════════════ مرفقات الدعم الفني (صور وملفات) ═══════════════ */
        .chat-attach-btn {
            width: 46px; height: 46px; border-radius: 50%; border: 1.6px dashed rgba(139,104,255,0.45); cursor: pointer; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 18px;
            background: var(--primary-soft); color: var(--primary); transition: transform 0.2s, filter 0.2s;
        }
        .chat-attach-btn:hover { filter: brightness(1.05); }
        .chat-attach-btn:active { transform: scale(0.9); }
        .chat-attach-preview {
            display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 12px;
            border-radius: 12px; background: var(--primary-soft); border: 1px dashed rgba(139,104,255,0.4);
            font-size: 11.5px; font-weight: 700; color: var(--primary); max-width: 100%; animation: popIn 0.25s ease;
        }
        .chat-attach-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; direction: ltr; }
        .chat-attach-preview button { border: none; background: transparent; color: var(--danger); cursor: pointer; font-size: 14px; display: flex; padding: 2px; }
        .cb-attach-img {
            display: block; max-width: 220px; max-height: 220px; width: 100%; border-radius: 13px; margin-top: 6px;
            border: 1px solid rgba(255,255,255,0.45); object-fit: cover; cursor: zoom-in; box-shadow: 0 8px 18px -8px rgba(23,16,46,0.35);
        }
        .cb-file-chip {
            display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 13px; border-radius: 12px;
            background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
            color: inherit; text-decoration: none; font-size: 12px; font-weight: 800; max-width: 100%; transition: transform 0.18s;
        }
        .cb-file-chip:active { transform: scale(0.96); }
        .cb-them .cb-file-chip { background: var(--primary-soft); border-color: rgba(139,104,255,0.3); color: var(--primary); }
        .cb-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; max-width: 170px; }
        .cb-file-chip small { opacity: 0.8; font-weight: 700; }

        /* ═══════════════ شعارات طرق الدفع الرسمية (PalPay / Jawwal Pay) ═══════════════ */
        .pay-method-logo.pm-brand, .notif-icon.pm-brand-sm, .row-avatar.pm-brand {
            background: #ffffff !important; border: 1px solid var(--border-soft); padding: 4px; overflow: hidden;
        }
        .pay-method-logo.pm-brand svg, .notif-icon.pm-brand-sm svg, .row-avatar.pm-brand svg { width: 100%; height: 100%; display: block; }

        /* ═══════════════ نافذة الترحيب المنبثقة في البوابة ═══════════════ */
        .wpop-box { max-width: 400px; text-align: center; position: relative; overflow: hidden; }
        .wpop-box::before {
            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px;
            background: linear-gradient(120deg, var(--primary), var(--orchid), var(--gold-light), var(--primary));
            background-size: 300% 300%; animation: wpopRing 6s linear infinite;
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
        }
        @keyframes wpopRing { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        .wpop-ico {
            width: 72px; height: 72px; margin: 6px auto 14px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
            font-size: 33px; color: #fff; background: linear-gradient(140deg, var(--primary), var(--orchid));
            box-shadow: var(--shadow-glow), inset 0 1.5px 0 rgba(255,255,255,0.4);
            animation: wpopFloat 3s ease-in-out infinite;
        }
        @keyframes wpopFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
        .wpop-title {
            font-family: var(--font-display); font-weight: 900; font-size: 21px; margin-bottom: 10px;
            background: linear-gradient(120deg, var(--primary), var(--orchid)); -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .wpop-body { font-size: 13.5px; color: var(--text-body); line-height: 2; margin-bottom: 18px; white-space: pre-line; word-break: break-word; }
        .wpop-spark { position: absolute; color: var(--gold); opacity: 0.75; animation: wpopTwinkle 2.4s ease-in-out infinite; pointer-events: none; }
        @keyframes wpopTwinkle { 0%, 100% { transform: scale(0.55); opacity: 0.25; } 50% { transform: scale(1.15); opacity: 0.9; } }
        html.lite .wpop-box::before, html.lite .wpop-ico, html.lite .wpop-spark { animation: none; }

        /* ═══════════════ منتقي تصاميم النظام الفاخرة ═══════════════ */
        /* ═══════════════ محرّر طرق الدفع ═══════════════ */
        .pmr-row {
            display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px;
            border: 1.6px solid var(--border-light); background: var(--bg-white); transition: opacity 0.2s, transform 0.2s;
        }
        .pmr-row.pmr-inactive { opacity: 0.55; }
        .pmr-logo { width: 40px; height: 40px; min-width: 40px; border-radius: 11px; overflow: hidden; background: #fff; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; }
        .pmr-logo svg { width: 100%; height: 100%; }
        .pmr-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
        .pmr-fields input, .pmr-fields textarea { border: 1px solid var(--border-soft); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; font-family: var(--font-body); background: var(--bg-soft); color: var(--text-dark); width: 100%; }
        .pmr-fields input:focus, .pmr-fields textarea:focus { outline: none; border-color: var(--primary); }
        .pmr-label-num { display: flex; gap: 6px; }
        .pmr-actions { display: flex; flex-direction: column; gap: 6px; align-items: center; }
        .pmr-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: transform 0.15s, filter 0.15s; }
        .pmr-icon-btn:active { transform: scale(0.88); }
        .pmr-icon-btn.pmr-del { background: rgba(224,49,49,0.12); color: var(--danger); }
        .pmr-icon-btn.pmr-del:hover { filter: brightness(1.1); }
        .pmr-toggle-mini { width: 34px; height: 20px; border-radius: 20px; border: none; cursor: pointer; position: relative; background: var(--border-soft); transition: background 0.2s; }
        .pmr-toggle-mini::after { content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .pmr-toggle-mini.on { background: var(--success); }
        .pmr-toggle-mini.on::after { transform: translateX(-14px); }
        .skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
        .skin-card {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
            border-radius: 14px; border: 1.6px solid var(--border-light); background: var(--bg-white);
            font-family: var(--font-body); font-size: 12.5px; font-weight: 800; color: var(--text-dark);
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; text-align: right;
        }
        .skin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .skin-swatch { width: 30px; height: 30px; min-width: 30px; border-radius: 10px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), 0 5px 10px -4px rgba(23,16,46,0.35); }
        .skin-name { flex: 1; }
        .skin-check { font-size: 17px; color: var(--success); opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.25s; }
        .skin-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-md); }
        .skin-card.active .skin-check { opacity: 1; transform: scale(1); }
        html.dark .skin-card { background: rgba(24,18,46,0.6); }
        html.lite .skin-card:hover { transform: none; }

        /* ═══════════════ التصاميم الفاخرة (تُطبّق على كامل النظام) ═══════════════ */
        /* توحيد عناصر كانت بألوان ثابتة لتتبع لون التصميم المختار */
        html:not([data-skin="royal"]) .chat-send-btn { background: linear-gradient(140deg, var(--primary-dark), var(--primary-light)); }
        html:not([data-skin="royal"]) .notif-icon:not(.pm-brand-sm) { background: linear-gradient(140deg, var(--primary-dark), var(--primary-light)); }

        /* ── الزمرّد الإمبراطوري ── */
        html[data-skin="emerald"] body {
            --primary: #0E8F63; --primary-dark: #0A6B4A; --primary-light: #34C08E; --primary-soft: #E1F6EC;
            --orchid: #12A5A5; --text-light: #0E8F63;
            --shadow-glow: 0 14px 38px -10px rgba(14,143,99,0.5);
        }
        html[data-skin="emerald"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #DAF4E7 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FFF0CE 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #D3F0EC 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #DDF4DC 0%, transparent 60%),
                #F8FCFA;
            background-size: 160% 160%;
        }
        html.dark[data-skin="emerald"] body {
            --primary: #2FBF8A; --primary-dark: #0E8F63; --primary-light: #6FDDB4; --primary-soft: rgba(47,191,138,0.16);
            --orchid: #24C6C6; --text-light: #6FDDB4;
            --shadow-glow: 0 14px 38px -10px rgba(47,191,138,0.4);
        }
        html.dark[data-skin="emerald"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #103226 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #0E3A2C 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #0A2C30 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #123322 0%, transparent 60%),
                #08130E;
        }
        html.lite[data-skin="emerald"] body::before { background: #F2FAF6; }
        html.lite.dark[data-skin="emerald"] body::before { background: #0C201A; }

        /* ── ياقوت المحيط ── */
        html[data-skin="ocean"] body {
            --primary: #0E7BD8; --primary-dark: #0A5FB0; --primary-light: #57AEF2; --primary-soft: #E3F1FD;
            --orchid: #17B8CE; --text-light: #0E7BD8;
            --shadow-glow: 0 14px 38px -10px rgba(14,123,216,0.5);
        }
        html[data-skin="ocean"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #DCEDFC 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FFEECB 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #D6F0F7 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #DCE8FB 0%, transparent 60%),
                #F8FBFF;
            background-size: 160% 160%;
        }
        html.dark[data-skin="ocean"] body {
            --primary: #4EA8F5; --primary-dark: #0E7BD8; --primary-light: #8AC6FA; --primary-soft: rgba(78,168,245,0.16);
            --orchid: #2BD3E8; --text-light: #8AC6FA;
            --shadow-glow: 0 14px 38px -10px rgba(78,168,245,0.4);
        }
        html.dark[data-skin="ocean"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #0D2440 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #0A2C4A 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #0A2F38 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #102A47 0%, transparent 60%),
                #071120;
        }
        html.lite[data-skin="ocean"] body::before { background: #F0F7FE; }
        html.lite.dark[data-skin="ocean"] body::before { background: #0B1B2E; }

        /* ── غروب اللهب ── */
        html[data-skin="sunset"] body {
            --primary: #E8590C; --primary-dark: #C74708; --primary-light: #FF922B; --primary-soft: #FEEBDD;
            --orchid: #E64980; --text-light: #E8590C;
            --shadow-glow: 0 14px 38px -10px rgba(232,89,12,0.45);
        }
        html[data-skin="sunset"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #FDE9DB 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FCE3E6 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #FDF0DC 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #FBE4D6 0%, transparent 60%),
                #FFFAF6;
            background-size: 160% 160%;
        }
        html.dark[data-skin="sunset"] body {
            --primary: #FF7A2F; --primary-dark: #E8590C; --primary-light: #FFA35C; --primary-soft: rgba(255,122,47,0.16);
            --orchid: #F06595; --text-light: #FFA35C;
            --shadow-glow: 0 14px 38px -10px rgba(255,122,47,0.4);
        }
        html.dark[data-skin="sunset"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #3A1B0D 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #3B1224 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #33200C 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #2E150B 0%, transparent 60%),
                #180B07;
        }
        html.lite[data-skin="sunset"] body::before { background: #FFF6F0; }
        html.lite.dark[data-skin="sunset"] body::before { background: #241009; }

        /* ── الوردة الذهبية ── */
        html[data-skin="rose"] body {
            --primary: #D6336C; --primary-dark: #B02458; --primary-light: #F06595; --primary-soft: #FCE7EF;
            --orchid: #9C36B5; --text-light: #D6336C;
            --shadow-glow: 0 14px 38px -10px rgba(214,51,108,0.45);
        }
        html[data-skin="rose"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #FBE2EC 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FDF0D6 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #F4E1F7 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #FDE7F0 0%, transparent 60%),
                #FFF8FB;
            background-size: 160% 160%;
        }
        html.dark[data-skin="rose"] body {
            --primary: #F06595; --primary-dark: #D6336C; --primary-light: #F7A6C3; --primary-soft: rgba(240,101,149,0.16);
            --orchid: #C061D8; --text-light: #F7A6C3;
            --shadow-glow: 0 14px 38px -10px rgba(240,101,149,0.4);
        }
        html.dark[data-skin="rose"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #3A1122 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #33102C 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #2E1038 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #2A0E1E 0%, transparent 60%),
                #180812;
        }
        html.lite[data-skin="rose"] body::before { background: #FEF3F8; }
        html.lite.dark[data-skin="rose"] body::before { background: #24101A; }

        /* ── نيلي منتصف الليل ── */
        html[data-skin="midnight"] body {
            --primary: #3D52D5; --primary-dark: #2C3EAD; --primary-light: #6E7FF3; --primary-soft: #E5E9FC;
            --orchid: #7A5CE8; --text-light: #3D52D5;
            --shadow-glow: 0 14px 38px -10px rgba(61,82,213,0.5);
        }
        html[data-skin="midnight"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #E0E6FB 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #EFE4FA 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #DEE9FA 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #E5E1FB 0%, transparent 60%),
                #F7F8FE;
            background-size: 160% 160%;
        }
        html.dark[data-skin="midnight"] body {
            --primary: #7186F5; --primary-dark: #3D52D5; --primary-light: #9DACF9; --primary-soft: rgba(113,134,245,0.16);
            --orchid: #9B7BF2; --text-light: #9DACF9;
            --shadow-glow: 0 14px 38px -10px rgba(113,134,245,0.4);
        }
        html.dark[data-skin="midnight"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #12183B 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #151046 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #0E1C3E 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #141238 0%, transparent 60%),
                #0A0F26;
        }
        html.lite[data-skin="midnight"] body::before { background: #F2F4FD; }
        html.lite.dark[data-skin="midnight"] body::before { background: #0D1330; }

        /* ── الذهب الإمبراطوري ── */
        html[data-skin="amber"] body {
            --primary: #C08A12; --primary-dark: #96690B; --primary-light: #E8B44A; --primary-soft: #FBF0DA;
            --orchid: #D96F1E; --text-light: #A9740F;
            --shadow-glow: 0 14px 38px -10px rgba(192,138,18,0.45);
        }
        html[data-skin="amber"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #FBEFD6 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FCE9D8 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #F8F0DD 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #FAEBD2 0%, transparent 60%),
                #FFFCF4;
            background-size: 160% 160%;
        }
        html.dark[data-skin="amber"] body {
            --primary: #E5B04A; --primary-dark: #C08A12; --primary-light: #F2CC7E; --primary-soft: rgba(229,176,74,0.16);
            --orchid: #E8874A; --text-light: #F2CC7E;
            --shadow-glow: 0 14px 38px -10px rgba(229,176,74,0.4);
        }
        html.dark[data-skin="amber"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #2E2408 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #33240C 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #2C1F07 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #2A1D05 0%, transparent 60%),
                #191204;
        }
        html.lite[data-skin="amber"] body::before { background: #FBF6E8; }
        html.lite.dark[data-skin="amber"] body::before { background: #221A08; }

        /* ── البلاتين الملكي ── */
        html[data-skin="graphite"] body {
            --primary: #46536B; --primary-dark: #333D50; --primary-light: #7C8AA5; --primary-soft: #E8ECF3;
            --orchid: #5E7CA8; --text-light: #46536B;
            --shadow-glow: 0 14px 38px -10px rgba(70,83,107,0.42);
        }
        html[data-skin="graphite"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #E4E8EF 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #EDEDF2 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #E2E7EE 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #E7EAF0 0%, transparent 60%),
                #F7F9FB;
            background-size: 160% 160%;
        }
        html.dark[data-skin="graphite"] body {
            --primary: #93A5C4; --primary-dark: #5E7398; --primary-light: #B8C6DD; --primary-soft: rgba(147,165,196,0.16);
            --orchid: #7FA3C9; --text-light: #B8C6DD;
            --shadow-glow: 0 14px 38px -10px rgba(147,165,196,0.35);
        }
        html.dark[data-skin="graphite"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #171C26 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #141A24 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #121722 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #161B25 0%, transparent 60%),
                #0B0E14;
        }
        html.lite[data-skin="graphite"] body::before { background: #F1F4F8; }
        html.lite.dark[data-skin="graphite"] body::before { background: #10151E; }

        /* ── الشفق القطبي ── */
        html[data-skin="aurora"] body {
            --primary: #0C9E8E; --primary-dark: #08776B; --primary-light: #38C9B8; --primary-soft: #DDF5F1;
            --orchid: #7C5CE8; --text-light: #0C9E8E;
            --shadow-glow: 0 14px 38px -10px rgba(12,158,142,0.45);
        }
        html[data-skin="aurora"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #D8F3EE 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #E7E1FA 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #D8EFF6 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #DDF2E4 0%, transparent 60%),
                #F6FCFB;
            background-size: 160% 160%;
        }
        html.dark[data-skin="aurora"] body {
            --primary: #2FC9B4; --primary-dark: #0C9E8E; --primary-light: #74E3D2; --primary-soft: rgba(47,201,180,0.16);
            --orchid: #9B7BF2; --text-light: #74E3D2;
            --shadow-glow: 0 14px 38px -10px rgba(47,201,180,0.4);
        }
        html.dark[data-skin="aurora"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #0C2A26 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #1A1440 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #0A2C31 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #0E2A1C 0%, transparent 60%),
                #071413;
        }
        html.lite[data-skin="aurora"] body::before { background: #EFF9F7; }
        html.lite.dark[data-skin="aurora"] body::before { background: #0B1F1C; }

        /* ── الياقوت القرمزي ── */
        html[data-skin="crimson"] body {
            --primary: #C2233A; --primary-dark: #9A1A2D; --primary-light: #E8506A; --primary-soft: #FBE3E7;
            --orchid: #E0653B; --text-light: #C2233A;
            --shadow-glow: 0 14px 38px -10px rgba(194,35,58,0.45);
        }
        html[data-skin="crimson"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #FADFE3 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FBE9D9 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #F8E2EA 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #FADEDA 0%, transparent 60%),
                #FFF8F8;
            background-size: 160% 160%;
        }
        html.dark[data-skin="crimson"] body {
            --primary: #F05A73; --primary-dark: #C2233A; --primary-light: #F792A3; --primary-soft: rgba(240,90,115,0.16);
            --orchid: #F0784E; --text-light: #F792A3;
            --shadow-glow: 0 14px 38px -10px rgba(240,90,115,0.4);
        }
        html.dark[data-skin="crimson"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #360B14 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #33130C 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #2E0D18 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #300A0E 0%, transparent 60%),
                #190508;
        }
        html.lite[data-skin="crimson"] body::before { background: #FDF1F2; }
        html.lite.dark[data-skin="crimson"] body::before { background: #240A0F; }

        /* ── اللافندر الحالم ── */
        html[data-skin="lavender"] body {
            --primary: #8A63D2; --primary-dark: #6C48B0; --primary-light: #AC8BEA; --primary-soft: #F0EAFB;
            --orchid: #C86BC9; --text-light: #8A63D2;
            --shadow-glow: 0 14px 38px -10px rgba(138,99,210,0.42);
        }
        html[data-skin="lavender"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #ECE3FA 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #FBE7F6 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #E5E7FB 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #F0E2F8 0%, transparent 60%),
                #FBF9FE;
            background-size: 160% 160%;
        }
        html.dark[data-skin="lavender"] body {
            --primary: #A98BEA; --primary-dark: #8A63D2; --primary-light: #C7B2F4; --primary-soft: rgba(169,139,234,0.16);
            --orchid: #D687D7; --text-light: #C7B2F4;
            --shadow-glow: 0 14px 38px -10px rgba(169,139,234,0.4);
        }
        html.dark[data-skin="lavender"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #241542 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #2B1238 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #1C1440 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #251040 0%, transparent 60%),
                #120A20;
        }
        html.lite[data-skin="lavender"] body::before { background: #F6F2FC; }
        html.lite.dark[data-skin="lavender"] body::before { background: #191030; }

        /* ── الموكا الفاخر ── */
        html[data-skin="mocha"] body {
            --primary: #7A4A21; --primary-dark: #5C3616; --primary-light: #A2703F; --primary-soft: #F3E8DC;
            --orchid: #C08A4E; --text-light: #7A4A21;
            --shadow-glow: 0 14px 38px -10px rgba(122,74,33,0.4);
        }
        html[data-skin="mocha"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #F0E3D3 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #F6E9DC 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #EEE0D6 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #F2E5D0 0%, transparent 60%),
                #FBF7F1;
            background-size: 160% 160%;
        }
        html.dark[data-skin="mocha"] body {
            --primary: #C08A55; --primary-dark: #8A5A2C; --primary-light: #DBB183; --primary-soft: rgba(192,138,85,0.16);
            --orchid: #D6A05E; --text-light: #DBB183;
            --shadow-glow: 0 14px 38px -10px rgba(192,138,85,0.4);
        }
        html.dark[data-skin="mocha"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #2B1E10 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #2E2212 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #291B0E 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #2C1F0F 0%, transparent 60%),
                #150E07;
        }
        html.lite[data-skin="mocha"] body::before { background: #F7F1E9; }
        html.lite.dark[data-skin="mocha"] body::before { background: #1D140A; }

        /* ── الأوبسيديان الأسود ── */
        html[data-skin="obsidian"] body {
            --primary: #1F2430; --primary-dark: #11151E; --primary-light: #566175; --primary-soft: #E7E9EE;
            --orchid: #6B7789; --text-light: #1F2430;
            --shadow-glow: 0 14px 38px -10px rgba(31,36,48,0.42);
        }
        html[data-skin="obsidian"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #E5E7ED 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #EDE9E2 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #E3E6EC 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #E8E8EC 0%, transparent 60%),
                #F8F8FA;
            background-size: 160% 160%;
        }
        html.dark[data-skin="obsidian"] body {
            --primary: #A7B2C6; --primary-dark: #6B7789; --primary-light: #CBD3E0; --primary-soft: rgba(167,178,198,0.16);
            --orchid: #8FA0BC; --text-light: #CBD3E0;
            --shadow-glow: 0 14px 38px -10px rgba(167,178,198,0.32);
        }
        html.dark[data-skin="obsidian"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #10141C 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #0D1118 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #0B0F16 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #0E1219 0%, transparent 60%),
                #05070C;
        }
        html.lite[data-skin="obsidian"] body::before { background: #F2F3F6; }
        html.lite.dark[data-skin="obsidian"] body::before { background: #0A0D13; }

        /* ── الياقوت الأزرق ── */
        html[data-skin="sapphire"] body {
            --primary: #1D4ED8; --primary-dark: #1435A3; --primary-light: #5B84F0; --primary-soft: #E4EAFC;
            --orchid: #4C6EF5; --text-light: #1D4ED8;
            --shadow-glow: 0 14px 38px -10px rgba(29,78,216,0.5);
        }
        html[data-skin="sapphire"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #DEE7FC 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #E8E4FB 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #DCE9FA 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #E2E6FD 0%, transparent 60%),
                #F7F9FF;
            background-size: 160% 160%;
        }
        html.dark[data-skin="sapphire"] body {
            --primary: #6188F5; --primary-dark: #1D4ED8; --primary-light: #97B0FA; --primary-soft: rgba(97,136,245,0.16);
            --orchid: #8A9BF7; --text-light: #97B0FA;
            --shadow-glow: 0 14px 38px -10px rgba(97,136,245,0.4);
        }
        html.dark[data-skin="sapphire"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #0C1740 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #101344 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #0A1A3E 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #0D1338 0%, transparent 60%),
                #060B1C;
        }
        html.lite[data-skin="sapphire"] body::before { background: #F1F5FE; }
        html.lite.dark[data-skin="sapphire"] body::before { background: #0A1029; }

        /* ── اليَشَم الفاخر ── */
        html[data-skin="jade"] body {
            --primary: #12796B; --primary-dark: #0B5A4F; --primary-light: #3FAE9C; --primary-soft: #DFF2EF;
            --orchid: #2E9E7E; --text-light: #12796B;
            --shadow-glow: 0 14px 38px -10px rgba(18,121,107,0.45);
        }
        html[data-skin="jade"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #DCF0EC 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #F3EEDA 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #DAEFE6 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #E1F1E6 0%, transparent 60%),
                #F7FCFB;
            background-size: 160% 160%;
        }
        html.dark[data-skin="jade"] body {
            --primary: #35B9A3; --primary-dark: #12796B; --primary-light: #79D9C7; --primary-soft: rgba(53,185,163,0.16);
            --orchid: #4FC79B; --text-light: #79D9C7;
            --shadow-glow: 0 14px 38px -10px rgba(53,185,163,0.38);
        }
        html.dark[data-skin="jade"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #08251F 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #0C2A21 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #06231E 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #0A2419 0%, transparent 60%),
                #04120F;
        }
        html.lite[data-skin="jade"] body::before { background: #F0F9F7; }
        html.lite.dark[data-skin="jade"] body::before { background: #071C17; }

        /* ── البوردو الملكي ── */
        html[data-skin="bordeaux"] body {
            --primary: #8E1B3A; --primary-dark: #6B0F2A; --primary-light: #C24B68; --primary-soft: #F7E1E7;
            --orchid: #A63B5E; --text-light: #8E1B3A;
            --shadow-glow: 0 14px 38px -10px rgba(142,27,58,0.45);
        }
        html[data-skin="bordeaux"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #F7DEE5 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #F6ECD8 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #F3DFE6 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #F7E2DC 0%, transparent 60%),
                #FFF9FA;
            background-size: 160% 160%;
        }
        html.dark[data-skin="bordeaux"] body {
            --primary: #D2506F; --primary-dark: #8E1B3A; --primary-light: #E68CA2; --primary-soft: rgba(210,80,111,0.16);
            --orchid: #DC7A6C; --text-light: #E68CA2;
            --shadow-glow: 0 14px 38px -10px rgba(210,80,111,0.38);
        }
        html.dark[data-skin="bordeaux"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #300A18 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #2C0F14 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #2A0912 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #2E0C15 0%, transparent 60%),
                #14040A;
        }
        html.lite[data-skin="bordeaux"] body::before { background: #FBF1F3; }
        html.lite.dark[data-skin="bordeaux"] body::before { background: #1D0810; }

        /* ── الفيروز العميق ── */
        html[data-skin="teal"] body {
            --primary: #0B7A8C; --primary-dark: #075B69; --primary-light: #38AEBF; --primary-soft: #DDF1F4;
            --orchid: #3D8FB0; --text-light: #0B7A8C;
            --shadow-glow: 0 14px 38px -10px rgba(11,122,140,0.45);
        }
        html[data-skin="teal"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #D9F0F4 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #E5EDF7 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #D8EFEE 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #DEEEF5 0%, transparent 60%),
                #F6FCFD;
            background-size: 160% 160%;
        }
        html.dark[data-skin="teal"] body {
            --primary: #2FB6CC; --primary-dark: #0B7A8C; --primary-light: #74D6E4; --primary-soft: rgba(47,182,204,0.16);
            --orchid: #5AA8D6; --text-light: #74D6E4;
            --shadow-glow: 0 14px 38px -10px rgba(47,182,204,0.38);
        }
        html.dark[data-skin="teal"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #062730 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #08222E 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #05252C 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #072530 0%, transparent 60%),
                #04141A;
        }
        html.lite[data-skin="teal"] body::before { background: #EFF9FB; }
        html.lite.dark[data-skin="teal"] body::before { background: #061E26; }

        /* ── العاج والذهب ── */
        html[data-skin="ivory"] body {
            --primary: #8A7A52; --primary-dark: #675B3B; --primary-light: #BCA974; --primary-soft: #F4EFDF;
            --orchid: #A08A4E; --text-light: #7A6C48;
            --shadow-glow: 0 14px 38px -10px rgba(138,122,82,0.4);
        }
        html[data-skin="ivory"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #F5EFDD 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #F3EDE0 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #F2EEE1 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #F6F0DE 0%, transparent 60%),
                #FFFDF7;
            background-size: 160% 160%;
        }
        html.dark[data-skin="ivory"] body {
            --primary: #CBB77C; --primary-dark: #8A7A52; --primary-light: #E2D3A4; --primary-soft: rgba(203,183,124,0.16);
            --orchid: #C9A96A; --text-light: #E2D3A4;
            --shadow-glow: 0 14px 38px -10px rgba(203,183,124,0.35);
        }
        html.dark[data-skin="ivory"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #2A2413 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #262110 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #24200F 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #282212 0%, transparent 60%),
                #151208;
        }
        html.lite[data-skin="ivory"] body::before { background: #FAF6EA; }
        html.lite.dark[data-skin="ivory"] body::before { background: #1E1A0D; }

        /* ── البرقوق الملكي ── */
        html[data-skin="plum"] body {
            --primary: #6D2C8E; --primary-dark: #521F6D; --primary-light: #A05CC0; --primary-soft: #F0E4F7;
            --orchid: #B04593; --text-light: #6D2C8E;
            --shadow-glow: 0 14px 38px -10px rgba(109,44,142,0.45);
        }
        html[data-skin="plum"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #EFE0F7 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #F7E2F1 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #EBE3F8 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #F3E1F4 0%, transparent 60%),
                #FDF9FF;
            background-size: 160% 160%;
        }
        html.dark[data-skin="plum"] body {
            --primary: #B173D2; --primary-dark: #6D2C8E; --primary-light: #D0A5E6; --primary-soft: rgba(177,115,210,0.16);
            --orchid: #D970BC; --text-light: #D0A5E6;
            --shadow-glow: 0 14px 38px -10px rgba(177,115,210,0.38);
        }
        html.dark[data-skin="plum"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #210B33 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #2A0A2C 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #1D0A30 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #250B2E 0%, transparent 60%),
                #100618;
        }
        html.lite[data-skin="plum"] body::before { background: #F8F1FC; }
        html.lite.dark[data-skin="plum"] body::before { background: #180A22; }

        /* ── الفولاذ الأزرق ── */
        html[data-skin="steel"] body {
            --primary: #3E5C76; --primary-dark: #2C4358; --primary-light: #7392AF; --primary-soft: #E6EDF3;
            --orchid: #5B7A99; --text-light: #3E5C76;
            --shadow-glow: 0 14px 38px -10px rgba(62,92,118,0.42);
        }
        html[data-skin="steel"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #E3EBF2 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #EBEDF1 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #E0E9F1 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #E6ECF2 0%, transparent 60%),
                #F7FAFC;
            background-size: 160% 160%;
        }
        html.dark[data-skin="steel"] body {
            --primary: #85A6C4; --primary-dark: #4E718F; --primary-light: #AFC6DC; --primary-soft: rgba(133,166,196,0.16);
            --orchid: #7B9DC0; --text-light: #AFC6DC;
            --shadow-glow: 0 14px 38px -10px rgba(133,166,196,0.34);
        }
        html.dark[data-skin="steel"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  #101822 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, #0E151E 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, #0C141D 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, #0F1720 0%, transparent 60%),
                #070C12;
        }
        html.lite[data-skin="steel"] body::before { background: #F0F4F8; }
        html.lite.dark[data-skin="steel"] body::before { background: #0B1119; }

        /* ════════════════════════════════════════════════════════════════
         *  محرّك التصاميم (DESIGN LANGUAGE ENGINE)
         *  data-theme   → نمط التصميم: الأسطح، الظلال، الحواف، الحركة
         *  data-shape   → حِدّة الزوايا
         *  data-density → كثافة الواجهة
         *  يُطبَّق على كامل النظام: لوحة الإدارة + بوابة الزبائن معاً
         * ════════════════════════════════════════════════════════════════ */

        /* ═══ حِدّة الزوايا ═══ */
        html[data-shape="round"] body {
            --radius-2xl: 38px; --radius-xl: 30px; --radius-lg: 22px; --radius-md: 16px; --radius-sm: 12px;
        }
        html[data-shape="sharp"] body {
            --radius-2xl: 10px; --radius-xl: 8px; --radius-lg: 6px; --radius-md: 5px; --radius-sm: 4px;
        }
        html[data-shape="sharp"] .sidebar { border-radius: 12px; }
        html[data-shape="sharp"] .portal-dock { border-radius: 10px; }
        html[data-shape="sharp"] .nav-link { border-radius: 6px; }
        html[data-shape="sharp"] .dock-tab { border-radius: 6px; }
        html[data-shape="sharp"] .btn-icon { border-radius: 6px; }
        html[data-shape="sharp"] .user-avatar,
        html[data-shape="sharp"] .stat-icon-wrap,
        html[data-shape="sharp"] .sidebar-brand-icon,
        html[data-shape="sharp"] .row-avatar { border-radius: 7px; }
        html[data-shape="sharp"] .badge { border-radius: 5px; }
        html[data-shape="sharp"] .skin-swatch { border-radius: 5px; }
        html[data-shape="sharp"] .toggle-track { border-radius: 4px; }
        html[data-shape="sharp"] .toggle-track::after { border-radius: 3px; }

        html[data-shape="round"] .sidebar { border-radius: 34px; }
        html[data-shape="round"] .nav-link { border-radius: 19px; }
        html[data-shape="round"] .portal-dock { border-radius: 32px; }
        html[data-shape="round"] .dock-tab { border-radius: 22px; }
        html[data-shape="round"] .btn-icon { border-radius: 50%; }
        html[data-shape="round"] .user-avatar,
        html[data-shape="round"] .stat-icon-wrap,
        html[data-shape="round"] .sidebar-brand-icon,
        html[data-shape="round"] .row-avatar { border-radius: 50%; }
        html[data-shape="round"] .skin-swatch { border-radius: 50%; }

        /* ═══ كثافة الواجهة ═══ */
        html[data-density="compact"] .card { padding: 14px; margin-bottom: 12px; }
        html[data-density="compact"] .stat-card { padding: 13px; }
        html[data-density="compact"] .nav-link { padding: 8px 11px; font-size: 13px; }
        html[data-density="compact"] .nav-link i { font-size: 17px; }
        html[data-density="compact"] .nav-section-label { padding: 9px 12px 4px; }
        html[data-density="compact"] .btn { padding: 10px 16px; font-size: 13px; }
        html[data-density="compact"] .input, html[data-density="compact"] .select,
        html[data-density="compact"] textarea.input { padding: 9px 12px; }
        html[data-density="compact"] table.data-table td { padding: 9px 11px; }
        html[data-density="compact"] table.data-table th { padding: 9px 11px; }
        html[data-density="compact"] .form-group { margin-bottom: 11px; }
        html[data-density="compact"] .content-topbar { margin-bottom: 16px; }
        html[data-density="compact"] .stats-grid { gap: 11px; margin-bottom: 15px; }
        html[data-density="compact"] .main-content { padding: 18px 18px 32px; }
        html[data-density="compact"] .stat-value { font-size: 23px; }
        html[data-density="compact"] .content-title { font-size: 22px; }
        html[data-density="compact"] .modal-box { padding: 18px; }
        /* الحشوة المختصرة أعلاه تمسح المساحة المحجوزة لأيقونة الحقل، فيركب
           النص فوق الأيقونة في كل حقول الدخول والتسجيل والبحث — نعيدها هنا. */
        html[data-density="compact"] .input-icon-wrap .input { padding-right: 42px; padding-left: 12px; }
        html[data-density="compact"] .search-wrap .input { padding-right: 38px; padding-left: 12px; }

        html[data-density="roomy"] .card { padding: 30px; margin-bottom: 24px; }
        html[data-density="roomy"] .stat-card { padding: 26px; }
        html[data-density="roomy"] .nav-link { padding: 14px 15px; }
        html[data-density="roomy"] .btn { padding: 15px 24px; }
        html[data-density="roomy"] .input, html[data-density="roomy"] .select,
        html[data-density="roomy"] textarea.input { padding: 15px 17px; }
        /* نفس علّة الكثافة المضغوطة — نعيد المساحة المحجوزة لأيقونة الحقل */
        html[data-density="roomy"] .input-icon-wrap .input { padding-right: 50px; padding-left: 17px; }
        html[data-density="roomy"] .search-wrap .input { padding-right: 46px; padding-left: 17px; }
        html[data-density="roomy"] table.data-table td { padding: 18px 16px; }
        html[data-density="roomy"] .form-group { margin-bottom: 20px; }
        html[data-density="roomy"] .stats-grid { gap: 20px; margin-bottom: 28px; }
        html[data-density="roomy"] .main-content { padding: 34px 34px 50px; }
        html[data-density="roomy"] .modal-box { padding: 32px; }

        /* ════════════════════════════════════════════════════════════════
         *  1) الزجاج السائل (LIQUID) — النمط الافتراضي، لا يحتاج تعديلات
         * ════════════════════════════════════════════════════════════════ */

        /* ════════════════════════════════════════════════════════════════
         *  2) الشفق المتدرّج (AURORA) — أسطح ملوّنة متوهّجة وحواف مضيئة
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="aurora"] .card,
        html[data-theme="aurora"] .stat-card,
        html[data-theme="aurora"] .auth-card {
            background:
                linear-gradient(150deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.5) 100%),
                radial-gradient(120% 90% at 100% 0%, var(--primary-soft) 0%, transparent 62%);
            border: 1px solid transparent;
            background-origin: border-box;
            box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        html[data-theme="aurora"] .card::after {
            left: 0; right: 0; height: 3px; opacity: 1;
            background: linear-gradient(90deg, var(--primary) 0%, var(--orchid) 45%, var(--gold-light) 100%);
            background-size: 220% auto; animation: shimmer 6s linear infinite;
        }
        html[data-theme="aurora"] .stat-card::before {
            content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
            background: radial-gradient(80% 60% at 100% 0%, var(--primary-soft), transparent 70%);
            opacity: 0.85;
        }
        html[data-theme="aurora"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="aurora"] .sidebar {
            background: linear-gradient(170deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.44) 100%);
            box-shadow: 0 4px 10px rgba(23,16,46,0.05), 0 28px 60px -18px var(--primary), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="aurora"] .nav-link.active {
            background: linear-gradient(120deg, var(--primary-soft), rgba(255,255,255,0.2));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 18px -7px var(--primary);
        }
        html[data-theme="aurora"] .bg-orb { opacity: 1; filter: blur(70px) saturate(1.6); }
        html.dark[data-theme="aurora"] .card,
        html.dark[data-theme="aurora"] .stat-card,
        html.dark[data-theme="aurora"] .auth-card {
            background:
                linear-gradient(150deg, rgba(30,22,58,0.86) 0%, rgba(20,14,42,0.6) 100%),
                radial-gradient(120% 90% at 100% 0%, var(--primary-soft) 0%, transparent 62%);
        }
        html.dark[data-theme="aurora"] .sidebar {
            background: linear-gradient(170deg, rgba(22,16,48,0.88) 0%, rgba(14,10,32,0.7) 100%);
        }

        /* ════════════════════════════════════════════════════════════════
         *  3) النيومورفيزم الناعم (NEO) — أسطح مطبوعة بظلال داخلية ناعمة
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="neo"] body::before { filter: saturate(0.55) brightness(1.06); }
        html[data-theme="neo"] .card,
        html[data-theme="neo"] .stat-card,
        html[data-theme="neo"] .auth-card,
        html[data-theme="neo"] .modal-box {
            background: var(--bg-main);
            backdrop-filter: none; -webkit-backdrop-filter: none;
            border: none;
            box-shadow: 9px 9px 22px rgba(23,16,46,0.09), -9px -9px 22px rgba(255,255,255,0.95);
        }
        html[data-theme="neo"] .card::after { display: none; }
        html[data-theme="neo"] .stat-card:hover {
            transform: none;
            box-shadow: 5px 5px 14px rgba(23,16,46,0.10), -5px -5px 14px rgba(255,255,255,0.95);
        }
        html[data-theme="neo"] .sidebar,
        html[data-theme="neo"] .portal-dock,
        html[data-theme="neo"] .mobile-topbar {
            background: var(--bg-main); border: none;
            backdrop-filter: none; -webkit-backdrop-filter: none;
            box-shadow: 10px 0 26px rgba(23,16,46,0.07), inset -1px 0 0 rgba(255,255,255,0.8);
        }
        html[data-theme="neo"] .nav-link.active {
            background: var(--bg-main); box-shadow: inset 4px 4px 9px rgba(23,16,46,0.10), inset -4px -4px 9px rgba(255,255,255,0.95);
        }
        html[data-theme="neo"] .nav-link:hover { background: transparent; }
        html[data-theme="neo"] .input,
        html[data-theme="neo"] .select,
        html[data-theme="neo"] textarea.input {
            background: var(--bg-main); border: none;
            box-shadow: inset 4px 4px 9px rgba(23,16,46,0.08), inset -4px -4px 9px rgba(255,255,255,0.9);
        }
        html[data-theme="neo"] .input:focus,
        html[data-theme="neo"] .select:focus,
        html[data-theme="neo"] textarea.input:focus {
            background: var(--bg-main);
            box-shadow: inset 4px 4px 9px rgba(23,16,46,0.10), inset -4px -4px 9px rgba(255,255,255,0.9), 0 0 0 2px var(--primary-soft);
        }
        html[data-theme="neo"] .btn {
            box-shadow: 5px 5px 13px rgba(23,16,46,0.16), -3px -3px 10px rgba(255,255,255,0.55), inset 0 1px 0 rgba(255,255,255,0.28);
        }
        html[data-theme="neo"] .btn:active {
            transform: none;
            box-shadow: inset 4px 4px 9px rgba(0,0,0,0.22), inset -3px -3px 8px rgba(255,255,255,0.14);
        }
        html[data-theme="neo"] .btn-outline {
            background: var(--bg-main); border: none; color: var(--primary);
            box-shadow: 5px 5px 12px rgba(23,16,46,0.09), -5px -5px 12px rgba(255,255,255,0.95);
        }
        html[data-theme="neo"] .btn::after { display: none; }
        html[data-theme="neo"] .skin-card, html[data-theme="neo"] .dsn-card {
            background: var(--bg-main); border: none;
            box-shadow: 5px 5px 13px rgba(23,16,46,0.08), -5px -5px 13px rgba(255,255,255,0.95);
        }
        /* الوضع الداكن: النيومورفيزم يتطلّب أن يتطابق لون السطح مع لون الخلفية تماماً،
           وإلا ظهرت البطاقات ككتل مسطّحة باهتة بدل أن تبدو منحوتة في الخلفية.
           لذلك نُسطّح الخلفية المتدرّجة ونوحّد اللون، ثم نبني العمق بالظلال فقط. */
        html.dark[data-theme="neo"] body {
            --bg-main: #201A3C; --bg-white: #201A3C;
        }
        html.dark[data-theme="neo"] body::before {
            background: #201A3C; animation: none; background-size: 100% 100%;
        }
        html.dark[data-theme="neo"] .bg-orb { display: none; }
        html.dark[data-theme="neo"] .card,
        html.dark[data-theme="neo"] .stat-card,
        html.dark[data-theme="neo"] .auth-card,
        html.dark[data-theme="neo"] .modal-box,
        html.dark[data-theme="neo"] .sidebar,
        html.dark[data-theme="neo"] .portal-dock,
        html.dark[data-theme="neo"] .mobile-topbar,
        html.dark[data-theme="neo"] .input,
        html.dark[data-theme="neo"] .select,
        html.dark[data-theme="neo"] textarea.input,
        html.dark[data-theme="neo"] .skin-card,
        html.dark[data-theme="neo"] .dsn-card,
        html.dark[data-theme="neo"] .btn-outline {
            background: #201A3C; border: none;
        }
        /* ظل غامق من أسفل + ضوء بنفسجي خافت من أعلى = إحساس النحت */
        html.dark[data-theme="neo"] .card,
        html.dark[data-theme="neo"] .stat-card,
        html.dark[data-theme="neo"] .auth-card,
        html.dark[data-theme="neo"] .modal-box,
        html.dark[data-theme="neo"] .skin-card,
        html.dark[data-theme="neo"] .dsn-card,
        html.dark[data-theme="neo"] .btn-outline {
            box-shadow: 8px 8px 18px rgba(6,3,20,0.75), -8px -8px 18px rgba(126,102,214,0.13);
        }
        html.dark[data-theme="neo"] .stat-card:hover {
            box-shadow: 5px 5px 12px rgba(6,3,20,0.7), -5px -5px 12px rgba(126,102,214,0.14);
        }
        html.dark[data-theme="neo"] .sidebar,
        html.dark[data-theme="neo"] .portal-dock,
        html.dark[data-theme="neo"] .mobile-topbar {
            box-shadow: 10px 0 26px rgba(6,3,20,0.7), inset -1px 0 0 rgba(126,102,214,0.12);
        }
        html.dark[data-theme="neo"] .nav-link.active,
        html.dark[data-theme="neo"] .input,
        html.dark[data-theme="neo"] .select,
        html.dark[data-theme="neo"] textarea.input {
            box-shadow: inset 4px 4px 9px rgba(6,3,20,0.8), inset -4px -4px 9px rgba(126,102,214,0.12);
        }
        html.dark[data-theme="neo"] .input:focus,
        html.dark[data-theme="neo"] .select:focus,
        html.dark[data-theme="neo"] textarea.input:focus {
            box-shadow: inset 4px 4px 9px rgba(6,3,20,0.85), inset -4px -4px 9px rgba(126,102,214,0.12), 0 0 0 2px var(--primary-soft);
        }

        /* ════════════════════════════════════════════════════════════════
         *  4) الأناقة المسطّحة (MINIMAL) — بلا ضبابية، خطوط نظيفة، هدوء تام
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="minimal"] body::before {
            background: var(--bg-main); animation: none; background-size: 100% 100%;
        }
        html[data-theme="minimal"] .bg-orb { display: none; }
        html[data-theme="minimal"] .card,
        html[data-theme="minimal"] .stat-card,
        html[data-theme="minimal"] .auth-card,
        html[data-theme="minimal"] .modal-box {
            background: var(--bg-white);
            backdrop-filter: none; -webkit-backdrop-filter: none;
            border: 1px solid var(--border-light);
            box-shadow: none;
        }
        html[data-theme="minimal"] .card::after { display: none; }
        html[data-theme="minimal"] .stat-card:hover { transform: none; box-shadow: 0 2px 10px -3px rgba(23,16,46,0.12); }
        html[data-theme="minimal"] .sidebar,
        html[data-theme="minimal"] .portal-dock,
        html[data-theme="minimal"] .mobile-topbar {
            background: var(--bg-white);
            backdrop-filter: none; -webkit-backdrop-filter: none;
            border: 1px solid var(--border-light); box-shadow: none;
        }
        html[data-theme="minimal"] .sidebar-brand-icon { animation: none; box-shadow: none; }
        html[data-theme="minimal"] .sidebar-brand-title {
            background: none; -webkit-text-fill-color: var(--text-dark); color: var(--text-dark); animation: none;
        }
        html[data-theme="minimal"] .nav-link.active {
            background: var(--primary-soft); box-shadow: none;
        }
        html[data-theme="minimal"] .btn {
            background: var(--primary); box-shadow: none; animation: none;
        }
        html[data-theme="minimal"] .btn::after { display: none; }
        /* الأزرار المميّزة صارت خضراء في كل النظام — والتصميم المسطّح يتبعها
           بلون مصمت واحد بلا لمعان، فينسجم مع هدوء الطابع. */
        html[data-theme="minimal"] .btn-gold {
            background: #12B981; color: #fff; animation: none; text-shadow: none; box-shadow: none;
        }
        html[data-theme="minimal"] .btn-danger { background: var(--danger); box-shadow: none; }
        html[data-theme="minimal"] .btn-success { background: var(--success); box-shadow: none; }
        html[data-theme="minimal"] .btn-outline { background: transparent; box-shadow: none; }
        html[data-theme="minimal"] .input,
        html[data-theme="minimal"] .select,
        html[data-theme="minimal"] textarea.input {
            background: var(--bg-white); border: 1px solid var(--border-light); box-shadow: none;
        }
        html[data-theme="minimal"] .input:focus,
        html[data-theme="minimal"] .select:focus,
        html[data-theme="minimal"] textarea.input:focus {
            border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
        }
        /* أيقونات الإحصاءات: في الطابع المسطّح تُرسم كمربّع ملوّن خفيف بلون
           الأيقونة نفسها بدل التدرّجات اللامعة — أوضح وأهدأ، ويعمل في
           الوضعين الفاتح والداكن لأن اللون مشتقّ لا ثابت. */
        html[data-theme="minimal"] .stat-icon-wrap { box-shadow: none; }
        html[data-theme="minimal"] .stat-icon-wrap.purple {
            background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary);
        }
        html[data-theme="minimal"] .stat-icon-wrap.green {
            background: color-mix(in srgb, #12B981 16%, transparent); color: #12B981;
        }
        html[data-theme="minimal"] .stat-icon-wrap.red {
            background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger);
        }
        html[data-theme="minimal"] .stat-icon-wrap.gold {
            animation: none; background: color-mix(in srgb, #12B981 16%, transparent); color: #12B981;
        }
        html[data-theme="minimal"] .nav-badge.gold { animation: none; background: var(--gold); color: #fff; }
        html[data-theme="minimal"] .badge-gold { background: var(--gold-soft); color: var(--gold); box-shadow: none; }
        html[data-theme="minimal"] .skin-card, html[data-theme="minimal"] .dsn-card {
            background: var(--bg-white); box-shadow: none;
        }
        html[data-theme="minimal"] .skin-card:hover, html[data-theme="minimal"] .dsn-card:hover { transform: none; box-shadow: none; border-color: var(--primary); }
        html.dark[data-theme="minimal"] body::before { background: var(--bg-main); }

        /* ════════════════════════════════════════════════════════════════
         *  5) النخبة الذهبية (ELITE) — إطارات ذهبية، أسطح داكنة راقية
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="elite"] .card,
        html[data-theme="elite"] .stat-card,
        html[data-theme="elite"] .auth-card,
        html[data-theme="elite"] .modal-box {
            border: 1px solid rgba(201,138,27,0.35);
            box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(201,138,27,0.06);
        }
        html[data-theme="elite"] .card::after {
            left: 0; right: 0; height: 3px; opacity: 1;
            background: var(--gold-metal); background-size: 220% auto; animation: shimmer 5s linear infinite;
        }
        html[data-theme="elite"] .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; z-index: 0;
            background: var(--gold-metal); background-size: 200% auto; animation: shimmer 6s linear infinite;
        }
        html[data-theme="elite"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="elite"] .sidebar {
            border: 1px solid rgba(201,138,27,0.38);
            box-shadow: 0 4px 10px rgba(23,16,46,0.06), 0 28px 56px -18px rgba(78,36,232,0.3), inset 0 1px 0 rgba(255,240,200,0.6);
        }
        html[data-theme="elite"] .sidebar-brand {
            border-bottom: 1px solid rgba(201,138,27,0.3);
        }
        html[data-theme="elite"] .sidebar-brand-title {
            background: var(--gold-metal); background-size: 220% auto;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            animation: shimmer 6s linear infinite;
        }
        html[data-theme="elite"] .sidebar-brand-icon {
            background: var(--gold-metal); background-size: 200% auto; color: #3D2600;
            box-shadow: 0 12px 22px -8px rgba(201,138,27,0.6), inset 0 1.5px 0 rgba(255,255,255,0.6);
            animation: shimmer 6s linear infinite, floatUpDown 4.6s ease-in-out infinite;
        }
        html[data-theme="elite"] .nav-link.active {
            background: linear-gradient(135deg, rgba(201,138,27,0.18), rgba(232,180,74,0.08));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 14px -6px rgba(201,138,27,0.4);
        }
        html[data-theme="elite"] .nav-link.active::before {
            content: ''; position: absolute; top: 22%; bottom: 22%; right: 0; width: 3px;
            border-radius: 4px; background: var(--gold-metal); background-size: 200% auto;
        }
        html[data-theme="elite"] .nav-link.active i { color: var(--gold); }
        html[data-theme="elite"] .btn {
            border: 1px solid rgba(201,138,27,0.4);
        }
        html[data-theme="elite"] .content-title i { color: var(--gold) !important; }
        html[data-theme="elite"] .card-title i { color: var(--gold); }
        html[data-theme="elite"] .stat-icon-wrap.purple {
            background: linear-gradient(140deg, var(--primary-dark), var(--primary-light));
            box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.35), 0 10px 18px -8px rgba(23,16,46,0.4), 0 0 0 1px rgba(201,138,27,0.35);
        }
        html[data-theme="elite"] .dock-tab.active {
            background: linear-gradient(140deg, rgba(201,138,27,0.2), rgba(232,180,74,0.1));
            color: var(--gold);
        }
        html[data-theme="elite"] .modal-box { border-color: rgba(201,138,27,0.4); }
        html[data-theme="elite"] .skin-card.active, html[data-theme="elite"] .dsn-card.active {
            border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-md);
        }
        html.dark[data-theme="elite"] .card,
        html.dark[data-theme="elite"] .stat-card,
        html.dark[data-theme="elite"] .auth-card,
        html.dark[data-theme="elite"] .modal-box,
        html.dark[data-theme="elite"] .sidebar {
            border-color: rgba(232,180,74,0.34);
        }

        /* ════════════════════════════════════════════════════════════════
         *  6) النيون الليلي (NEON) — يفرض الوضع الداكن + توهّج نيون
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="neon"] body {
            --bg-main: #07060F; --bg-white: #0E0C1E; --bg-card: rgba(14,12,30,0.78);
            --text-dark: #F2EFFF; --text-body: #BDB6DC; --text-muted: #7A73A3;
            --border-light: rgba(150,130,220,0.28); --border-soft: rgba(150,130,220,0.14);
        }
        html[data-theme="neon"] body::before {
            background:
                radial-gradient(58% 46% at 12% 8%,  color-mix(in srgb, var(--primary) 22%, #07060F) 0%, transparent 62%),
                radial-gradient(52% 42% at 88% 10%, color-mix(in srgb, var(--orchid) 18%, #07060F) 0%, transparent 60%),
                radial-gradient(56% 50% at 85% 90%, color-mix(in srgb, var(--primary) 16%, #07060F) 0%, transparent 62%),
                radial-gradient(50% 44% at 10% 88%, color-mix(in srgb, var(--orchid) 14%, #07060F) 0%, transparent 60%),
                #07060F;
            background-size: 160% 160%;
        }
        html[data-theme="neon"] .bg-orb { opacity: 0.55; filter: blur(80px) saturate(1.8); }
        html[data-theme="neon"] .card,
        html[data-theme="neon"] .stat-card,
        html[data-theme="neon"] .auth-card,
        html[data-theme="neon"] .modal-box {
            background: rgba(14,12,30,0.82);
            border: 1px solid var(--primary);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent),
                        0 0 26px -6px var(--primary),
                        inset 0 1px 0 color-mix(in srgb, var(--primary) 22%, transparent);
        }
        html[data-theme="neon"] .card::after {
            left: 0; right: 0; height: 2px; opacity: 1; animation: none;
            background: linear-gradient(90deg, transparent, var(--primary), var(--orchid), transparent);
        }
        html[data-theme="neon"] .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 0 1px var(--primary), 0 0 40px -6px var(--primary);
        }
        html[data-theme="neon"] .sidebar,
        html[data-theme="neon"] .portal-dock,
        html[data-theme="neon"] .mobile-topbar {
            background: rgba(10,8,22,0.9);
            border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
            box-shadow: 0 0 34px -10px var(--primary), inset 0 1px 0 color-mix(in srgb, var(--primary) 20%, transparent);
        }
        html[data-theme="neon"] .sidebar-brand-title {
            background: linear-gradient(115deg, var(--primary), var(--orchid), var(--primary));
            background-size: 220% 220%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 5s ease infinite;
            filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 55%, transparent));
        }
        html[data-theme="neon"] .sidebar-brand-icon {
            background: linear-gradient(140deg, var(--primary-dark), var(--primary-light));
            box-shadow: 0 0 22px -2px var(--primary), inset 0 1.5px 0 rgba(255,255,255,0.3);
        }
        html[data-theme="neon"] .nav-link.active {
            background: color-mix(in srgb, var(--primary) 16%, transparent);
            box-shadow: inset 0 0 0 1px var(--primary), 0 0 16px -4px var(--primary);
            text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 60%, transparent);
        }
        html[data-theme="neon"] .nav-link.active i {
            filter: drop-shadow(0 0 6px var(--primary));
        }
        html[data-theme="neon"] .btn {
            background: linear-gradient(160deg, var(--primary-dark), var(--primary));
            box-shadow: 0 0 20px -3px var(--primary), inset 0 1px 0 rgba(255,255,255,0.25);
            text-shadow: 0 0 8px color-mix(in srgb, var(--primary) 70%, transparent);
        }
        html[data-theme="neon"] .btn-gold {
            background: linear-gradient(160deg, #8A5F0C, var(--gold-light));
            color: #1A1200; box-shadow: 0 0 20px -3px var(--gold-light); animation: none; text-shadow: none;
        }
        html[data-theme="neon"] .btn-danger { box-shadow: 0 0 20px -3px var(--danger); }
        html[data-theme="neon"] .btn-success { box-shadow: 0 0 20px -3px var(--success); }
        html[data-theme="neon"] .btn-outline {
            background: transparent; border: 1.5px solid var(--primary); color: var(--primary);
            box-shadow: 0 0 14px -4px var(--primary), inset 0 0 14px -8px var(--primary);
        }
        html[data-theme="neon"] .input,
        html[data-theme="neon"] .select,
        html[data-theme="neon"] textarea.input {
            background: rgba(8,6,18,0.8); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
            color: var(--text-dark); box-shadow: inset 0 0 12px -6px var(--primary);
        }
        html[data-theme="neon"] .input:focus,
        html[data-theme="neon"] .select:focus,
        html[data-theme="neon"] textarea.input:focus {
            background: rgba(8,6,18,0.95); border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent), 0 0 20px -5px var(--primary);
        }
        html[data-theme="neon"] .input::placeholder { color: #5D5684; }
        html[data-theme="neon"] table.data-table th { color: var(--primary); border-bottom-color: color-mix(in srgb, var(--primary) 35%, transparent); }
        html[data-theme="neon"] table.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
        html[data-theme="neon"] .stat-value { text-shadow: 0 0 16px color-mix(in srgb, var(--primary) 40%, transparent); }
        html[data-theme="neon"] .stat-icon-wrap { box-shadow: 0 0 18px -4px currentColor, inset 0 1.5px 0 rgba(255,255,255,0.3); }
        html[data-theme="neon"] .dock-tab.active {
            background: color-mix(in srgb, var(--primary) 18%, transparent);
            box-shadow: inset 0 0 0 1px var(--primary), 0 0 14px -4px var(--primary);
        }
        html[data-theme="neon"] .modal-overlay { background: rgba(4,3,10,0.66); }
        html[data-theme="neon"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 55%, #211B3E); }
        html[data-theme="neon"] .skin-card, html[data-theme="neon"] .dsn-card {
            background: rgba(14,12,30,0.8); border-color: color-mix(in srgb, var(--primary) 30%, transparent);
        }
        html[data-theme="neon"] .skin-card.active, html[data-theme="neon"] .dsn-card.active {
            border-color: var(--primary); box-shadow: 0 0 22px -5px var(--primary), 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
        }
        html[data-theme="neon"] .empty-state i { color: color-mix(in srgb, var(--primary) 35%, transparent); }
        html[data-theme="neon"] .badge-gold { background: linear-gradient(140deg, #8A5F0C, var(--gold-light)); color: #1A1200; animation: none; }
        html[data-theme="neon"] .nav-badge.gold { background: linear-gradient(140deg, #8A5F0C, var(--gold-light)); color: #1A1200; animation: none; }
        html[data-theme="neon"] .toggle-switch input:checked + .toggle-track {
            background: linear-gradient(140deg, var(--primary-dark), var(--primary-light));
            box-shadow: 0 0 12px -2px var(--primary);
        }
        /* في وضع النيون: زر تبديل الوضع الفاتح/الداكن لا معنى له — النمط ليلي دائماً */
        html[data-theme="neon"] .theme-wipe { display: none; }

        /* ════════════════════════════════════════════════════════════════
         *  7) الكريستال الطيفي (PRISM) — زجاج نقي يكسر الضوء بحواف قوس قزح
         * ════════════════════════════════════════════════════════════════ */
        @keyframes prismShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
        html[data-theme="prism"] .card,
        html[data-theme="prism"] .stat-card,
        html[data-theme="prism"] .auth-card,
        html[data-theme="prism"] .modal-box {
            border: 1px solid transparent;
            background:
                linear-gradient(160deg, rgba(255,255,255,0.93), rgba(255,255,255,0.78)) padding-box,
                conic-gradient(from 210deg, rgba(255,94,138,0.55), rgba(255,193,99,0.55), rgba(126,240,180,0.55),
                    rgba(99,200,255,0.6), rgba(160,107,255,0.6), rgba(255,107,224,0.55), rgba(255,94,138,0.55)) border-box;
            box-shadow: 0 2px 5px rgba(23,16,46,0.05), 0 26px 54px -22px rgba(120,90,255,0.35),
                        inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="prism"] .card::after {
            left: 0; right: 0; height: 3px; opacity: 1; border-radius: 0;
            background: linear-gradient(90deg, #FF5E8A, #FFC163, #FFF06B, #6BF0B4, #63C8FF, #A06BFF, #FF6BE0, #FF5E8A);
            background-size: 300% 100%; animation: prismShift 9s linear infinite;
        }
        html[data-theme="prism"] .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; z-index: 0;
            background: linear-gradient(90deg, #FF5E8A, #FFC163, #FFF06B, #6BF0B4, #63C8FF, #A06BFF, #FF6BE0, #FF5E8A);
            background-size: 300% 100%; animation: prismShift 11s linear infinite;
        }
        html[data-theme="prism"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="prism"] .sidebar,
        html[data-theme="prism"] .portal-dock,
        html[data-theme="prism"] .mobile-topbar {
            border: 1px solid transparent;
            background:
                linear-gradient(170deg, rgba(255,255,255,0.88), rgba(255,255,255,0.7)) padding-box,
                conic-gradient(from 140deg, rgba(255,94,138,0.5), rgba(99,200,255,0.55), rgba(160,107,255,0.55),
                    rgba(126,240,180,0.5), rgba(255,94,138,0.5)) border-box;
            box-shadow: 0 4px 10px rgba(23,16,46,0.05), 0 28px 60px -18px rgba(120,90,255,0.4), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="prism"] .sidebar-brand-title {
            background: linear-gradient(100deg, #E24E86, #E8A23C 26%, #2FBE8C 52%, #3E9BE8 74%, #8B5CF0 100%);
            background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 8s linear infinite;
        }
        html[data-theme="prism"] .sidebar-brand-icon {
            background: linear-gradient(140deg, var(--primary-dark), var(--primary-light));
            box-shadow: 0 12px 24px -8px rgba(120,90,255,0.55), 0 0 0 1px rgba(255,255,255,0.7) inset;
        }
        html[data-theme="prism"] .nav-link.active {
            background: linear-gradient(120deg, var(--primary-soft), rgba(255,255,255,0.35));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 18px -8px var(--primary);
        }
        html[data-theme="prism"] .nav-link.active::before {
            content: ''; position: absolute; top: 22%; bottom: 22%; right: 0; width: 3px; border-radius: 4px;
            background: linear-gradient(180deg, #FF5E8A, #FFC163, #63C8FF, #A06BFF);
        }
        html[data-theme="prism"] .btn { box-shadow: 0 12px 26px -10px var(--primary), inset 0 1px 0 rgba(255,255,255,0.35); }
        html[data-theme="prism"] .dock-tab.active {
            background: linear-gradient(135deg, var(--primary-soft), rgba(255,255,255,0.25));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px -6px var(--primary);
        }
        html[data-theme="prism"] .skin-card.active, html[data-theme="prism"] .dsn-card.active {
            border-color: transparent;
            background:
                linear-gradient(var(--bg-white), var(--bg-white)) padding-box,
                linear-gradient(120deg, #FF5E8A, #FFC163, #63C8FF, #A06BFF) border-box;
            box-shadow: 0 10px 26px -12px rgba(120,90,255,0.5);
        }
        html[data-theme="prism"] .bg-orb { opacity: 0.95; filter: blur(74px) saturate(1.75); }
        html.dark[data-theme="prism"] .card,
        html.dark[data-theme="prism"] .stat-card,
        html.dark[data-theme="prism"] .auth-card,
        html.dark[data-theme="prism"] .modal-box {
            background:
                linear-gradient(160deg, rgba(26,20,48,0.92), rgba(18,13,38,0.8)) padding-box,
                conic-gradient(from 210deg, rgba(255,94,138,0.5), rgba(255,193,99,0.5), rgba(126,240,180,0.5),
                    rgba(99,200,255,0.55), rgba(160,107,255,0.55), rgba(255,107,224,0.5), rgba(255,94,138,0.5)) border-box;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 26px 54px -22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(190,170,255,0.1);
        }
        html.dark[data-theme="prism"] .sidebar,
        html.dark[data-theme="prism"] .portal-dock,
        html.dark[data-theme="prism"] .mobile-topbar {
            background:
                linear-gradient(170deg, rgba(20,15,42,0.94), rgba(14,10,32,0.82)) padding-box,
                conic-gradient(from 140deg, rgba(255,94,138,0.45), rgba(99,200,255,0.5), rgba(160,107,255,0.5),
                    rgba(126,240,180,0.45), rgba(255,94,138,0.45)) border-box;
        }
        html.dark[data-theme="prism"] .skin-card.active, html.dark[data-theme="prism"] .dsn-card.active {
            background:
                linear-gradient(#171233, #171233) padding-box,
                linear-gradient(120deg, #FF5E8A, #FFC163, #63C8FF, #A06BFF) border-box;
        }

        /* ════════════════════════════════════════════════════════════════
         *  8) السديم الكوني (NEBULA) — سماء ليلية بنجوم وسُدُم حيّة — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="nebula"] body {
            --bg-main: #050514; --bg-white: #0D0C24; --bg-card: rgba(13,12,36,0.76);
            --text-dark: #F1EEFF; --text-body: #BCB5DE; --text-muted: #7B74A6;
            --border-light: rgba(150,130,220,0.26); --border-soft: rgba(150,130,220,0.13);
        }
        html[data-theme="nebula"] body::before {
            background:
                radial-gradient(1.4px 1.4px at 22px 34px, rgba(255,255,255,0.9) 50%, transparent 52%),
                radial-gradient(1px 1px at 118px 76px, rgba(226,216,255,0.65) 50%, transparent 52%),
                radial-gradient(1.7px 1.7px at 66px 128px, rgba(255,255,255,0.95) 50%, transparent 52%),
                radial-gradient(56% 44% at 14% 10%, color-mix(in srgb, var(--primary) 26%, transparent) 0%, transparent 64%),
                radial-gradient(50% 42% at 86% 14%, color-mix(in srgb, var(--orchid) 20%, transparent) 0%, transparent 62%),
                radial-gradient(58% 52% at 82% 88%, color-mix(in srgb, var(--primary) 17%, transparent) 0%, transparent 64%),
                radial-gradient(46% 40% at 12% 86%, color-mix(in srgb, var(--orchid) 14%, transparent) 0%, transparent 60%),
                #050514;
            background-size: 150px 150px, 230px 230px, 290px 290px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
            background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
        }
        html[data-theme="nebula"] .bg-orb { opacity: 0.55; filter: blur(95px) saturate(1.75); }
        html[data-theme="nebula"] .card,
        html[data-theme="nebula"] .stat-card,
        html[data-theme="nebula"] .auth-card,
        html[data-theme="nebula"] .modal-box {
            background: linear-gradient(165deg, rgba(19,17,48,0.85), rgba(9,8,28,0.78));
            border: 1px solid color-mix(in srgb, var(--primary) 26%, transparent);
            box-shadow: 0 0 46px -20px var(--primary), 0 24px 50px -20px rgba(0,0,0,0.65),
                        inset 0 1px 0 color-mix(in srgb, var(--primary) 22%, transparent);
        }
        html[data-theme="nebula"] .card::after {
            left: 0; right: 0; height: 2.5px; opacity: 1; animation: softPulse 5s ease-in-out infinite;
            background: linear-gradient(90deg, transparent, var(--primary) 30%, var(--orchid) 70%, transparent);
        }
        html[data-theme="nebula"] .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 58px -18px var(--primary), 0 26px 52px -18px rgba(0,0,0,0.7);
        }
        html[data-theme="nebula"] .sidebar,
        html[data-theme="nebula"] .portal-dock,
        html[data-theme="nebula"] .mobile-topbar {
            background: linear-gradient(180deg, rgba(13,11,36,0.92), rgba(7,6,22,0.9));
            border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
            box-shadow: 0 0 48px -16px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--primary) 18%, transparent);
        }
        html[data-theme="nebula"] .sidebar-brand-title {
            background: linear-gradient(110deg, var(--primary-light), var(--orchid) 55%, var(--gold-light));
            background-size: 220% 220%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 7s ease infinite;
            filter: drop-shadow(0 0 12px color-mix(in srgb, var(--primary) 50%, transparent));
        }
        html[data-theme="nebula"] .sidebar-brand-icon {
            background: linear-gradient(140deg, var(--primary-dark), var(--orchid));
            box-shadow: 0 0 26px -4px var(--primary), inset 0 1.5px 0 rgba(255,255,255,0.3);
            animation: floatUpDown 5s ease-in-out infinite;
        }
        html[data-theme="nebula"] .nav-link.active {
            background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--orchid) 10%, transparent));
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 22px -8px var(--primary);
        }
        html[data-theme="nebula"] .nav-link.active i { filter: drop-shadow(0 0 7px var(--primary)); }
        html[data-theme="nebula"] .btn {
            background: linear-gradient(160deg, var(--primary-dark), var(--orchid));
            box-shadow: 0 0 26px -6px var(--primary), inset 0 1px 0 rgba(255,255,255,0.25);
        }
        html[data-theme="nebula"] .btn-outline {
            background: rgba(13,12,36,0.6); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
            color: var(--primary-light); box-shadow: 0 0 18px -8px var(--primary);
        }
        html[data-theme="nebula"] .input,
        html[data-theme="nebula"] .select,
        html[data-theme="nebula"] textarea.input {
            background: rgba(6,5,20,0.75); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
            color: var(--text-dark);
        }
        html[data-theme="nebula"] .input:focus,
        html[data-theme="nebula"] .select:focus,
        html[data-theme="nebula"] textarea.input:focus {
            background: rgba(6,5,20,0.95); border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent), 0 0 22px -6px var(--primary);
        }
        html[data-theme="nebula"] .input::placeholder { color: #5C558A; }
        html[data-theme="nebula"] .select option { background: #0D0C24; color: #F1EEFF; }
        html[data-theme="nebula"] table.data-table th { color: var(--primary-light); border-bottom-color: color-mix(in srgb, var(--primary) 30%, transparent); }
        html[data-theme="nebula"] table.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
        html[data-theme="nebula"] .stat-value { text-shadow: 0 0 18px color-mix(in srgb, var(--primary) 45%, transparent); }
        html[data-theme="nebula"] .dock-tab.active {
            background: color-mix(in srgb, var(--primary) 18%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent), 0 0 16px -6px var(--primary);
        }
        html[data-theme="nebula"] .skin-card, html[data-theme="nebula"] .dsn-card {
            background: rgba(13,12,36,0.78); border-color: color-mix(in srgb, var(--primary) 24%, transparent);
        }
        html[data-theme="nebula"] .skin-card.active, html[data-theme="nebula"] .dsn-card.active {
            border-color: var(--primary); box-shadow: 0 0 26px -8px var(--primary), 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
        }
        html[data-theme="nebula"] .modal-overlay { background: rgba(2,2,10,0.7); }
        html[data-theme="nebula"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 50%, #1B173A); }
        html[data-theme="nebula"] .empty-state i { color: color-mix(in srgb, var(--primary) 38%, transparent); }
        html[data-theme="nebula"] .theme-wipe { display: none; }

        /* ════════════════════════════════════════════════════════════════
         *  9) الرخام الملكي (MARBLE) — حجر مصقول بعروق ذهبية، هدوء المتاحف
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="marble"] body::before {
            background:
                linear-gradient(112deg, transparent 41.6%, rgba(23,16,46,0.045) 42%, transparent 44%),
                linear-gradient(64deg, transparent 59.4%, rgba(23,16,46,0.038) 60%, transparent 62.5%),
                linear-gradient(152deg, transparent 19.4%, rgba(176,124,32,0.06) 20%, transparent 22.5%),
                linear-gradient(98deg, transparent 78.5%, rgba(176,124,32,0.05) 79%, transparent 80.5%),
                radial-gradient(64% 46% at 82% 0%, rgba(201,138,27,0.07), transparent 62%),
                linear-gradient(180deg, #F8F5EF, #F2EEE5);
            animation: none; background-size: 100% 100%;
        }
        html[data-theme="marble"] .bg-orb { display: none; }
        html[data-theme="marble"] .card,
        html[data-theme="marble"] .stat-card,
        html[data-theme="marble"] .auth-card,
        html[data-theme="marble"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(118deg, transparent 47.5%, rgba(23,16,46,0.035) 48%, transparent 50%),
                linear-gradient(58deg, transparent 68.5%, rgba(176,124,32,0.05) 69%, transparent 71%),
                linear-gradient(180deg, #FFFFFF, #FAF7F0);
            border: 1px solid rgba(176,124,32,0.3);
            box-shadow: 0 1px 2px rgba(23,16,46,0.05), 0 22px 46px -22px rgba(84,60,20,0.3),
                        inset 0 0 0 1px rgba(255,255,255,0.85);
        }
        html[data-theme="marble"] .card::after {
            left: 0; right: 0; height: 2px; opacity: 1; border-radius: 0;
            background: var(--gold-metal); background-size: 260% auto; animation: shimmer 9s linear infinite;
        }
        html[data-theme="marble"] .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 4px rgba(23,16,46,0.05), 0 26px 50px -20px rgba(84,60,20,0.36), inset 0 0 0 1px rgba(255,255,255,0.85);
        }
        html[data-theme="marble"] .sidebar,
        html[data-theme="marble"] .portal-dock,
        html[data-theme="marble"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(160deg, transparent 55.5%, rgba(23,16,46,0.03) 56%, transparent 58%),
                linear-gradient(180deg, #FFFFFF, #F8F4EC);
            border: 1px solid rgba(176,124,32,0.32);
            box-shadow: 0 4px 10px rgba(23,16,46,0.05), 0 26px 54px -22px rgba(84,60,20,0.34), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="marble"] .sidebar-brand-title {
            background: var(--gold-metal); background-size: 240% auto;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            animation: shimmer 9s linear infinite;
        }
        html[data-theme="marble"] .sidebar-brand-icon {
            background: var(--gold-metal); background-size: 220% auto; color: #3D2600;
            box-shadow: 0 12px 22px -8px rgba(176,124,32,0.55), inset 0 1.5px 0 rgba(255,255,255,0.6);
            animation: shimmer 9s linear infinite;
        }
        html[data-theme="marble"] .nav-link.active {
            background: linear-gradient(120deg, var(--gold-soft), transparent 85%);
            box-shadow: inset 0 0 0 1px rgba(176,124,32,0.28);
        }
        html[data-theme="marble"] .nav-link.active::before {
            content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 3px; border-radius: 4px;
            background: var(--gold-metal); background-size: 200% auto;
        }
        html[data-theme="marble"] .nav-link.active i { color: var(--gold); }
        html[data-theme="marble"] .content-title i,
        html[data-theme="marble"] .card-title i { color: var(--gold) !important; }
        html[data-theme="marble"] .btn { border: 1px solid rgba(176,124,32,0.35); }
        html[data-theme="marble"] .btn-outline { border-color: rgba(176,124,32,0.45); }
        html[data-theme="marble"] .input,
        html[data-theme="marble"] .select,
        html[data-theme="marble"] textarea.input { background: #FFFFFF; border-color: rgba(140,110,50,0.28); }
        html[data-theme="marble"] .dock-tab.active {
            background: var(--gold-soft); color: var(--gold);
            box-shadow: inset 0 0 0 1px rgba(176,124,32,0.3);
        }
        html[data-theme="marble"] .skin-card, html[data-theme="marble"] .dsn-card { background: #FFFEFA; border-color: rgba(176,124,32,0.22); }
        html[data-theme="marble"] .skin-card.active, html[data-theme="marble"] .dsn-card.active {
            border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), 0 14px 30px -16px rgba(84,60,20,0.4);
        }
        html.dark[data-theme="marble"] body::before {
            background:
                linear-gradient(112deg, transparent 41.5%, rgba(232,180,74,0.08) 42%, transparent 44.2%),
                linear-gradient(64deg, transparent 59.3%, rgba(232,180,74,0.06) 60%, transparent 62.6%),
                linear-gradient(152deg, transparent 19.3%, rgba(255,255,255,0.045) 20%, transparent 22.4%),
                radial-gradient(64% 46% at 82% 0%, rgba(232,180,74,0.08), transparent 62%),
                linear-gradient(180deg, #100E13, #0A090D);
        }
        html.dark[data-theme="marble"] .card,
        html.dark[data-theme="marble"] .stat-card,
        html.dark[data-theme="marble"] .auth-card,
        html.dark[data-theme="marble"] .modal-box {
            background:
                linear-gradient(118deg, transparent 47.4%, rgba(232,180,74,0.07) 48%, transparent 50.2%),
                linear-gradient(58deg, transparent 68.4%, rgba(255,255,255,0.035) 69%, transparent 71.2%),
                linear-gradient(180deg, #17141C, #100E15);
            border-color: rgba(232,180,74,0.3);
            box-shadow: 0 2px 5px rgba(0,0,0,0.35), 0 24px 50px -22px rgba(0,0,0,0.65), inset 0 1px 0 rgba(232,180,74,0.1);
        }
        html.dark[data-theme="marble"] .sidebar,
        html.dark[data-theme="marble"] .portal-dock,
        html.dark[data-theme="marble"] .mobile-topbar {
            background:
                linear-gradient(160deg, transparent 55.4%, rgba(232,180,74,0.06) 56%, transparent 58.2%),
                linear-gradient(180deg, #17141C, #0E0C12);
            border-color: rgba(232,180,74,0.32);
        }
        html.dark[data-theme="marble"] .input,
        html.dark[data-theme="marble"] .select,
        html.dark[data-theme="marble"] textarea.input { background: rgba(10,9,13,0.7); border-color: rgba(232,180,74,0.26); }
        html.dark[data-theme="marble"] .skin-card, html.dark[data-theme="marble"] .dsn-card { background: #15121A; border-color: rgba(232,180,74,0.2); }

        /* ════════════════════════════════════════════════════════════════
         *  10) المخمل الحريري (SILK) — ساتان فاخر تنساب عليه لمعة ضوء هادئة
         * ════════════════════════════════════════════════════════════════ */
        @keyframes silkSheen { 0% { background-position: -140% 0; } 58%, 100% { background-position: 240% 0; } }
        html[data-theme="silk"] body::before { filter: saturate(0.9) brightness(1.03); }
        html[data-theme="silk"] .card,
        html[data-theme="silk"] .stat-card,
        html[data-theme="silk"] .auth-card,
        html[data-theme="silk"] .modal-box {
            border: 1px solid rgba(255,255,255,0.6);
            background: linear-gradient(165deg, #FFFFFF 0%, color-mix(in srgb, var(--primary) 5%, #FFF9F5) 100%);
            box-shadow: 0 3px 7px rgba(23,16,46,0.04), 0 34px 64px -30px color-mix(in srgb, var(--primary) 55%, rgba(23,16,46,0.35)),
                        inset 0 1.5px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="silk"] .card::after,
        html[data-theme="silk"] .auth-card::after {
            top: 0; left: 0; right: 0; bottom: 0; height: auto; border-radius: 0; opacity: 0.8; pointer-events: none;
            background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0.18) 52%, transparent 66%);
            background-size: 260% 100%; background-repeat: no-repeat;
            animation: silkSheen 7s ease-in-out infinite;
        }
        html[data-theme="silk"] .stat-card::before {
            content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
            background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.5) 46%, transparent 64%);
            background-size: 260% 100%; background-repeat: no-repeat;
            animation: silkSheen 8.5s ease-in-out infinite;
        }
        html[data-theme="silk"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="silk"] .stat-card:hover { transform: translateY(-4px); }
        html[data-theme="silk"] .sidebar,
        html[data-theme="silk"] .portal-dock,
        html[data-theme="silk"] .mobile-topbar {
            border: 1px solid rgba(255,255,255,0.65);
            background: linear-gradient(175deg, rgba(255,255,255,0.94), color-mix(in srgb, var(--primary) 6%, #FFF8F3));
            box-shadow: 0 4px 10px rgba(23,16,46,0.04), 0 34px 68px -26px color-mix(in srgb, var(--primary) 60%, rgba(23,16,46,0.35)),
                        inset 0 1.5px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="silk"] .nav-link.active {
            background: linear-gradient(120deg, var(--primary-soft), color-mix(in srgb, var(--orchid) 9%, transparent));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 20px -10px var(--primary);
        }
        html[data-theme="silk"] .btn {
            box-shadow: 0 16px 32px -14px var(--primary), inset 0 1.5px 0 rgba(255,255,255,0.4), inset 0 -6px 12px -8px rgba(0,0,0,0.28);
        }
        html[data-theme="silk"] .input,
        html[data-theme="silk"] .select,
        html[data-theme="silk"] textarea.input {
            /* كان أبيض ثابتاً فيبقى لوحاً فاتحاً في الوضع الداكن — الآن يتبع الوضع */
            background: color-mix(in srgb, var(--bg-white) 90%, transparent);
            border-color: color-mix(in srgb, var(--primary) 16%, rgba(122,100,190,0.14));
            box-shadow: inset 0 2px 5px rgba(23,16,46,0.05);
        }
        html[data-theme="silk"] .dock-tab.active {
            background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--orchid) 8%, transparent));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
        }
        html.dark[data-theme="silk"] .card,
        html.dark[data-theme="silk"] .stat-card,
        html.dark[data-theme="silk"] .auth-card,
        html.dark[data-theme="silk"] .modal-box {
            border-color: rgba(150,130,220,0.2);
            background: linear-gradient(165deg, #1E1838 0%, #140F2A 100%);
            box-shadow: 0 3px 7px rgba(0,0,0,0.35), 0 36px 70px -30px rgba(0,0,0,0.75), inset 0 1.5px 0 rgba(190,170,255,0.12);
        }
        html.dark[data-theme="silk"] .card::after,
        html.dark[data-theme="silk"] .auth-card::after {
            background: linear-gradient(115deg, transparent 32%, rgba(200,180,255,0.16) 46%, rgba(200,180,255,0.06) 52%, transparent 66%);
            background-size: 260% 100%; background-repeat: no-repeat;
        }
        html.dark[data-theme="silk"] .stat-card::before {
            background: linear-gradient(115deg, transparent 32%, rgba(200,180,255,0.14) 46%, transparent 64%);
            background-size: 260% 100%; background-repeat: no-repeat;
        }
        html.dark[data-theme="silk"] .sidebar,
        html.dark[data-theme="silk"] .portal-dock,
        html.dark[data-theme="silk"] .mobile-topbar {
            border-color: rgba(150,130,220,0.22);
            background: linear-gradient(175deg, rgba(24,18,46,0.96), rgba(14,10,30,0.92));
        }

        /* ════════════════════════════════════════════════════════════════
         *  11) ألياف الكربون (CARBON) — نسيج كربوني رياضي بلمسات معدنية — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="carbon"] body {
            --bg-main: #0B0D10; --bg-white: #13161B; --bg-card: rgba(19,22,27,0.92);
            --text-dark: #EDF1F5; --text-body: #ADB6C2; --text-muted: #6E7887;
            --border-light: rgba(150,165,185,0.2); --border-soft: rgba(150,165,185,0.1);
        }
        html[data-theme="carbon"] body::before {
            background:
                repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,0.014) 22px 23px),
                radial-gradient(60% 44% at 80% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 62%),
                linear-gradient(180deg, #0D1014, #08090C);
            animation: none; background-size: 100% 100%;
        }
        html[data-theme="carbon"] .bg-orb { display: none; }
        html[data-theme="carbon"] .card,
        html[data-theme="carbon"] .stat-card,
        html[data-theme="carbon"] .auth-card,
        html[data-theme="carbon"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(27deg, #16191F 5px, transparent 5px) 0 5px,
                linear-gradient(207deg, #16191F 5px, transparent 5px) 10px 0,
                linear-gradient(27deg, #0F1217 5px, transparent 5px) 0 10px,
                linear-gradient(207deg, #0F1217 5px, transparent 5px) 10px 5px,
                linear-gradient(90deg, #12151A 10px, transparent 10px),
                linear-gradient(#14171D 25%, #0E1015 25%, #0E1015 50%, transparent 50%, transparent 75%, #12151A 75%, #12151A);
            background-color: #0C0F13; background-size: 20px 20px;
            border: 1px solid #232B35;
            box-shadow: 0 20px 44px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(190,205,225,0.09);
        }
        html[data-theme="carbon"] .card::after {
            left: 0; right: 0; height: 3px; opacity: 1; border-radius: 0; animation: none;
            background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 35%, #FFFFFF) 50%, var(--primary-dark));
        }
        html[data-theme="carbon"] .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; z-index: 0;
            background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 35%, #FFFFFF) 50%, var(--primary-dark));
        }
        html[data-theme="carbon"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="carbon"] .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 24px 48px -18px rgba(0,0,0,0.85), 0 0 26px -12px var(--primary), inset 0 1px 0 rgba(190,205,225,0.1);
        }
        html[data-theme="carbon"] .sidebar,
        html[data-theme="carbon"] .portal-dock,
        html[data-theme="carbon"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(27deg, #14171C 5px, transparent 5px) 0 5px,
                linear-gradient(207deg, #14171C 5px, transparent 5px) 10px 0,
                linear-gradient(27deg, #0D1014 5px, transparent 5px) 0 10px,
                linear-gradient(207deg, #0D1014 5px, transparent 5px) 10px 5px,
                linear-gradient(90deg, #10131A 10px, transparent 10px),
                linear-gradient(#12151B 25%, #0C0E13 25%, #0C0E13 50%, transparent 50%, transparent 75%, #10141A 75%, #10141A);
            background-color: #0A0D11; background-size: 20px 20px;
            border: 1px solid #232B35;
            box-shadow: 0 22px 46px -18px rgba(0,0,0,0.85), inset 0 1px 0 rgba(190,205,225,0.08);
        }
        html[data-theme="carbon"] .sidebar-brand-title {
            background: linear-gradient(105deg, #8A97A8 0%, #E8EFF7 30%, #9FACBE 55%, #DDE6F0 80%, #8A97A8 100%);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 8s linear infinite;
        }
        html[data-theme="carbon"] .sidebar-brand-icon {
            background: linear-gradient(150deg, var(--primary), var(--primary-dark));
            box-shadow: 0 0 22px -6px var(--primary), inset 0 1.5px 0 rgba(255,255,255,0.3);
        }
        html[data-theme="carbon"] .nav-link.active {
            background: color-mix(in srgb, var(--primary) 13%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
        }
        html[data-theme="carbon"] .nav-link.active::before {
            content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 3px; border-radius: 4px;
            background: var(--primary);
        }
        html[data-theme="carbon"] .btn {
            border: 1px solid rgba(190,205,225,0.16);
            box-shadow: 0 14px 26px -12px var(--primary), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -6px 10px -8px rgba(0,0,0,0.5);
        }
        html[data-theme="carbon"] .btn-outline {
            background: linear-gradient(180deg, #2A323D, #171C23);
            border: 1px solid #39424E; color: #D5DEE9;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 20px -12px rgba(0,0,0,0.8);
        }
        html[data-theme="carbon"] .input,
        html[data-theme="carbon"] .select,
        html[data-theme="carbon"] textarea.input {
            background: #0A0D11; border: 1px solid #29323D; color: var(--text-dark);
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
        }
        html[data-theme="carbon"] .input:focus,
        html[data-theme="carbon"] .select:focus,
        html[data-theme="carbon"] textarea.input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent), inset 0 2px 6px rgba(0,0,0,0.6);
        }
        html[data-theme="carbon"] .input::placeholder { color: #55606E; }
        html[data-theme="carbon"] .select option { background: #13161B; color: #EDF1F5; }
        html[data-theme="carbon"] table.data-table th { color: var(--primary); border-bottom-color: #29323D; }
        html[data-theme="carbon"] table.data-table tbody tr:hover { background: rgba(150,165,185,0.05); }
        html[data-theme="carbon"] .dock-tab.active {
            background: color-mix(in srgb, var(--primary) 15%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
        }
        html[data-theme="carbon"] .skin-card, html[data-theme="carbon"] .dsn-card { background: #13161B; border-color: #232B35; }
        html[data-theme="carbon"] .skin-card.active, html[data-theme="carbon"] .dsn-card.active {
            border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent), 0 14px 30px -16px rgba(0,0,0,0.8);
        }
        html[data-theme="carbon"] .modal-overlay { background: rgba(3,4,6,0.72); }
        html[data-theme="carbon"] ::-webkit-scrollbar-thumb { background: #2E3843; }
        html[data-theme="carbon"] .theme-wipe { display: none; }

        /* ════════════════════════════════════════════════════════════════
         *  12) الواجهة المستقبلية (HUD) — أقواس زوايا وشعاع مسح كلوحات القيادة — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        @keyframes hudScan { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
        html[data-theme="hud"] body {
            --bg-main: #040A12; --bg-white: #081321; --bg-card: rgba(7,17,29,0.8);
            --text-dark: #E9F4FF; --text-body: #9FB8CE; --text-muted: #5E7891;
            --border-light: color-mix(in srgb, var(--primary) 30%, transparent);
            --border-soft: color-mix(in srgb, var(--primary) 15%, transparent);
        }
        html[data-theme="hud"] body::before {
            background:
                repeating-linear-gradient(0deg, transparent 0 41px, color-mix(in srgb, var(--primary) 9%, transparent) 41px 42px),
                repeating-linear-gradient(90deg, transparent 0 41px, color-mix(in srgb, var(--primary) 9%, transparent) 41px 42px),
                radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 68%),
                #040A12;
            animation: none; background-size: 100% 100%;
        }
        html[data-theme="hud"] .bg-orb { opacity: 0.3; filter: blur(110px) saturate(1.5); }
        html[data-theme="hud"] .card,
        html[data-theme="hud"] .stat-card,
        html[data-theme="hud"] .auth-card,
        html[data-theme="hud"] .modal-box {
            background: linear-gradient(180deg, rgba(9,20,34,0.86), rgba(5,12,21,0.82));
            border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent), 0 18px 42px -20px rgba(0,0,0,0.8),
                        inset 0 1px 0 color-mix(in srgb, var(--primary) 18%, transparent);
        }
        html[data-theme="hud"] .card::before,
        html[data-theme="hud"] .stat-card::before,
        html[data-theme="hud"] .auth-card::before {
            content: ''; position: absolute; inset: 7px; pointer-events: none; z-index: 0; opacity: 0.6;
            background:
                linear-gradient(var(--primary), var(--primary)) right 0 top 0 / 15px 2px,
                linear-gradient(var(--primary), var(--primary)) right 0 top 0 / 2px 15px,
                linear-gradient(var(--primary), var(--primary)) left 0 top 0 / 15px 2px,
                linear-gradient(var(--primary), var(--primary)) left 0 top 0 / 2px 15px,
                linear-gradient(var(--primary), var(--primary)) right 0 bottom 0 / 15px 2px,
                linear-gradient(var(--primary), var(--primary)) right 0 bottom 0 / 2px 15px,
                linear-gradient(var(--primary), var(--primary)) left 0 bottom 0 / 15px 2px,
                linear-gradient(var(--primary), var(--primary)) left 0 bottom 0 / 2px 15px;
            background-repeat: no-repeat;
        }
        html[data-theme="hud"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="hud"] .card::after {
            left: 0; right: 0; height: 2px; opacity: 1; border-radius: 0;
            background: linear-gradient(90deg, transparent, var(--primary) 45%, color-mix(in srgb, var(--primary) 35%, #FFFFFF) 50%, var(--primary) 55%, transparent);
            background-size: 46% 100%; background-repeat: no-repeat;
            animation: hudScan 4.4s linear infinite;
        }
        html[data-theme="hud"] .stat-card:hover {
            transform: none;
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 34px -10px var(--primary), 0 18px 42px -20px rgba(0,0,0,0.85);
        }
        html[data-theme="hud"] .sidebar,
        html[data-theme="hud"] .portal-dock,
        html[data-theme="hud"] .mobile-topbar {
            background: linear-gradient(180deg, rgba(6,15,26,0.94), rgba(4,10,18,0.92));
            border: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
            box-shadow: 0 0 30px -14px var(--primary), inset 0 1px 0 color-mix(in srgb, var(--primary) 16%, transparent);
        }
        html[data-theme="hud"] .sidebar-brand-title {
            color: var(--text-dark); letter-spacing: 1px;
            text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 60%, transparent);
        }
        html[data-theme="hud"] .sidebar-brand-icon {
            background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 55%, #05131F), var(--primary-dark));
            box-shadow: 0 0 20px -4px var(--primary), inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent);
        }
        html[data-theme="hud"] .content-title { letter-spacing: 0.5px; }
        html[data-theme="hud"] .nav-link.active {
            background: color-mix(in srgb, var(--primary) 13%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent), 0 0 18px -8px var(--primary);
        }
        html[data-theme="hud"] .nav-link.active i { filter: drop-shadow(0 0 6px var(--primary)); }
        html[data-theme="hud"] .btn {
            border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
            box-shadow: 0 0 22px -8px var(--primary), inset 0 1px 0 rgba(255,255,255,0.18);
        }
        html[data-theme="hud"] .btn-outline {
            background: transparent; border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
            color: var(--primary-light); box-shadow: inset 0 0 14px -10px var(--primary);
        }
        html[data-theme="hud"] .input,
        html[data-theme="hud"] .select,
        html[data-theme="hud"] textarea.input {
            background: rgba(3,9,16,0.8); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
            color: var(--text-dark);
        }
        html[data-theme="hud"] .input:focus,
        html[data-theme="hud"] .select:focus,
        html[data-theme="hud"] textarea.input:focus {
            background: rgba(3,9,16,0.96); border-color: var(--primary);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), 0 0 20px -8px var(--primary);
        }
        html[data-theme="hud"] .input::placeholder { color: #48607A; }
        html[data-theme="hud"] .select option { background: #081321; color: #E9F4FF; }
        html[data-theme="hud"] table.data-table th {
            color: var(--primary); letter-spacing: 0.6px;
            border-bottom-color: color-mix(in srgb, var(--primary) 35%, transparent);
        }
        html[data-theme="hud"] table.data-table tbody tr:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
        html[data-theme="hud"] .stat-value { text-shadow: 0 0 16px color-mix(in srgb, var(--primary) 45%, transparent); font-variant-numeric: tabular-nums; }
        html[data-theme="hud"] .dock-tab.active {
            background: color-mix(in srgb, var(--primary) 15%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent);
        }
        html[data-theme="hud"] .skin-card, html[data-theme="hud"] .dsn-card {
            background: rgba(7,17,29,0.85); border-color: color-mix(in srgb, var(--primary) 24%, transparent);
        }
        html[data-theme="hud"] .skin-card.active, html[data-theme="hud"] .dsn-card.active {
            border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 24px -8px var(--primary);
        }
        html[data-theme="hud"] .modal-overlay { background: rgba(1,4,8,0.74); }
        html[data-theme="hud"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 45%, #10202F); }
        html[data-theme="hud"] .empty-state i { color: color-mix(in srgb, var(--primary) 38%, transparent); }
        html[data-theme="hud"] .theme-wipe { display: none; }

        /* ════════════════════════════════════════════════════════════════
         *  13) الديباج الإمبراطوري (IMPERIAL) — نقوش قصور وإطار مزدوج مذهّب
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="imperial"] body::before {
            background:
                radial-gradient(circle at 13px 13px, rgba(176,124,32,0.11) 1.5px, transparent 2px),
                radial-gradient(circle at 0 0, rgba(176,124,32,0.08) 1.5px, transparent 2px),
                radial-gradient(66% 50% at 50% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 64%),
                linear-gradient(180deg, #F7F1E4, #F1EAD8);
            animation: none;
            background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100%;
            background-repeat: repeat, repeat, no-repeat, no-repeat;
        }
        html[data-theme="imperial"] .bg-orb { display: none; }
        html[data-theme="imperial"] .card,
        html[data-theme="imperial"] .stat-card,
        html[data-theme="imperial"] .auth-card,
        html[data-theme="imperial"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(180deg, #FFFDF6, #FBF5E7);
            border: 1px solid rgba(176,124,32,0.5);
            box-shadow: 0 2px 4px rgba(84,60,20,0.06), 0 24px 50px -24px rgba(84,60,20,0.42), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        html[data-theme="imperial"] .card::before,
        html[data-theme="imperial"] .stat-card::before,
        html[data-theme="imperial"] .auth-card::before {
            content: ''; position: absolute; inset: 6px; pointer-events: none; z-index: 0;
            border: 1px solid rgba(176,124,32,0.34); border-radius: inherit;
        }
        html[data-theme="imperial"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="imperial"] .card::after {
            left: 0; right: 0; height: 3px; opacity: 1; border-radius: 0;
            background: var(--gold-metal); background-size: 240% auto; animation: shimmer 7s linear infinite;
        }
        html[data-theme="imperial"] .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(84,60,20,0.07), 0 28px 56px -22px rgba(84,60,20,0.48), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        html[data-theme="imperial"] .sidebar,
        html[data-theme="imperial"] .portal-dock,
        html[data-theme="imperial"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                radial-gradient(circle at 13px 13px, rgba(176,124,32,0.09) 1.5px, transparent 2px),
                linear-gradient(180deg, #FFFDF6, #F8F1E1);
            background-size: 26px 26px, 100% 100%;
            border: 1px solid rgba(176,124,32,0.5);
            box-shadow: 0 4px 10px rgba(84,60,20,0.07), 0 28px 58px -24px rgba(84,60,20,0.45), inset 0 1px 0 rgba(255,255,255,0.92);
        }
        html[data-theme="imperial"] .sidebar-brand {
            border-bottom: 1px solid rgba(176,124,32,0.35);
        }
        html[data-theme="imperial"] .sidebar-brand-title {
            background: var(--gold-metal); background-size: 240% auto;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            animation: shimmer 7s linear infinite;
        }
        html[data-theme="imperial"] .sidebar-brand-icon {
            background: linear-gradient(140deg, var(--primary-dark), var(--primary));
            box-shadow: 0 0 0 2px rgba(176,124,32,0.5), 0 12px 24px -10px var(--primary), inset 0 1.5px 0 rgba(255,255,255,0.4);
        }
        html[data-theme="imperial"] .nav-link.active {
            background: linear-gradient(120deg, var(--gold-soft), color-mix(in srgb, var(--primary) 7%, transparent));
            box-shadow: inset 0 0 0 1px rgba(176,124,32,0.35);
        }
        html[data-theme="imperial"] .nav-link.active::before {
            content: ''; position: absolute; top: 16%; bottom: 16%; right: 0; width: 3px; border-radius: 4px;
            background: var(--gold-metal); background-size: 200% auto;
            box-shadow: -4px 0 0 -2.4px rgba(176,124,32,0.45);
        }
        html[data-theme="imperial"] .nav-link.active i { color: var(--gold); }
        html[data-theme="imperial"] .content-title i,
        html[data-theme="imperial"] .card-title i { color: var(--gold) !important; }
        html[data-theme="imperial"] .btn {
            border: 1px solid rgba(176,124,32,0.45);
            box-shadow: 0 12px 24px -12px var(--primary), inset 0 1px 0 rgba(255,255,255,0.35);
        }
        html[data-theme="imperial"] .btn-outline { border-color: rgba(176,124,32,0.5); }
        html[data-theme="imperial"] .input,
        html[data-theme="imperial"] .select,
        html[data-theme="imperial"] textarea.input { background: #FFFEF9; border-color: rgba(150,110,45,0.32); }
        html[data-theme="imperial"] .dock-tab.active {
            background: var(--gold-soft); color: var(--gold);
            box-shadow: inset 0 0 0 1px rgba(176,124,32,0.38);
        }
        html[data-theme="imperial"] .skin-card, html[data-theme="imperial"] .dsn-card { background: #FFFDF6; border-color: rgba(176,124,32,0.28); }
        html[data-theme="imperial"] .skin-card.active, html[data-theme="imperial"] .dsn-card.active {
            border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), 0 16px 34px -18px rgba(84,60,20,0.45);
        }
        html.dark[data-theme="imperial"] body::before {
            background:
                radial-gradient(circle at 13px 13px, rgba(232,180,74,0.1) 1.5px, transparent 2px),
                radial-gradient(circle at 0 0, rgba(232,180,74,0.07) 1.5px, transparent 2px),
                radial-gradient(66% 50% at 50% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 64%),
                linear-gradient(180deg, #150D24, #0E081A);
            background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100%;
            background-repeat: repeat, repeat, no-repeat, no-repeat;
        }
        html.dark[data-theme="imperial"] .card,
        html.dark[data-theme="imperial"] .stat-card,
        html.dark[data-theme="imperial"] .auth-card,
        html.dark[data-theme="imperial"] .modal-box {
            background: linear-gradient(180deg, #1E152F, #150E24);
            border-color: rgba(232,180,74,0.42);
            box-shadow: 0 2px 5px rgba(0,0,0,0.4), 0 26px 54px -24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(232,180,74,0.12);
        }
        html.dark[data-theme="imperial"] .card::before,
        html.dark[data-theme="imperial"] .stat-card::before,
        html.dark[data-theme="imperial"] .auth-card::before {
            border-color: rgba(232,180,74,0.28);
        }
        html.dark[data-theme="imperial"] .sidebar,
        html.dark[data-theme="imperial"] .portal-dock,
        html.dark[data-theme="imperial"] .mobile-topbar {
            background:
                radial-gradient(circle at 13px 13px, rgba(232,180,74,0.08) 1.5px, transparent 2px),
                linear-gradient(180deg, #1E152F, #130C22);
            background-size: 26px 26px, 100% 100%;
            border-color: rgba(232,180,74,0.42);
        }
        html.dark[data-theme="imperial"] .input,
        html.dark[data-theme="imperial"] .select,
        html.dark[data-theme="imperial"] textarea.input { background: rgba(12,7,22,0.7); border-color: rgba(232,180,74,0.3); }
        html.dark[data-theme="imperial"] .skin-card, html.dark[data-theme="imperial"] .dsn-card { background: #1B132B; border-color: rgba(232,180,74,0.24); }

        /* ════════════════════════════════════════════════════════════════
         *  14) البورسلين الملكي (PORCELAIN) — خزف مصقول لامع بحوافّ مذهّبة
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="porcelain"] body::before {
            background:
                radial-gradient(70% 46% at 50% 0%, rgba(255,255,255,0.85), transparent 66%),
                radial-gradient(40% 30% at 12% 100%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%),
                linear-gradient(180deg, #FCFBF7, #F5F2E9);
            animation: none;
        }
        html[data-theme="porcelain"] .bg-orb { opacity: 0.35; }
        html[data-theme="porcelain"] .card,
        html[data-theme="porcelain"] .stat-card,
        html[data-theme="porcelain"] .auth-card,
        html[data-theme="porcelain"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(178deg, #FFFFFF 0%, #FDFCF7 55%, #F6F2E8 100%);
            border: 1px solid rgba(176,124,32,0.42);
            box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 -10px 22px -18px rgba(120,86,20,0.35) inset,
                        0 3px 6px rgba(84,60,20,0.05), 0 26px 52px -26px rgba(84,60,20,0.4);
        }
        html[data-theme="porcelain"] .card::before,
        html[data-theme="porcelain"] .stat-card::before,
        html[data-theme="porcelain"] .auth-card::before {
            content: ''; position: absolute; inset: 0 0 55%; pointer-events: none; z-index: 0; border-radius: inherit;
            background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
        }
        html[data-theme="porcelain"] .card::after { height: 2.5px; opacity: 1; animation: none; background: linear-gradient(90deg, #9A6A10, #E8B44A 40%, #FFF0C2 55%, #8E5E0A); }
        html[data-theme="porcelain"] .stat-card > *, html[data-theme="porcelain"] .card > * { position: relative; z-index: 1; }
        html[data-theme="porcelain"] .sidebar,
        html[data-theme="porcelain"] .portal-dock,
        html[data-theme="porcelain"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(180deg, #FFFFFF, #F8F5EC);
            border: 1px solid rgba(176,124,32,0.38);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 24px 48px -26px rgba(84,60,20,0.4);
        }
        html[data-theme="porcelain"] .sidebar-brand-title {
            background: linear-gradient(105deg, #8E5E0A, #D89B26 35%, #FFF0C2 52%, #B87F14 70%, #8E5E0A);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 7s linear infinite;
        }
        html[data-theme="porcelain"] .sidebar-brand-icon { box-shadow: 0 0 0 2px rgba(176,124,32,0.35), 0 12px 24px -10px rgba(84,60,20,0.5); }
        html[data-theme="porcelain"] .nav-link.active {
            background: linear-gradient(180deg, #FFFFFF, #FAF5E9);
            box-shadow: inset 0 0 0 1px rgba(176,124,32,0.42), 0 8px 18px -10px rgba(84,60,20,0.35);
        }
        html[data-theme="porcelain"] .btn { box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 -4px 8px rgba(0,0,0,0.14); }
        html[data-theme="porcelain"] .input,
        html[data-theme="porcelain"] .select,
        html[data-theme="porcelain"] textarea.input { background: #FFFFFF; border: 1px solid rgba(176,124,32,0.34); box-shadow: inset 0 2px 5px rgba(120,86,20,0.08); }
        html[data-theme="porcelain"] table.data-table th { color: #8E5E0A; border-bottom-color: rgba(176,124,32,0.3); }
        html[data-theme="porcelain"] .skin-card, html[data-theme="porcelain"] .dsn-card { background: #FFFFFF; border-color: rgba(176,124,32,0.28); }
        html.dark[data-theme="porcelain"] body::before { background: radial-gradient(70% 46% at 50% 0%, rgba(232,180,74,0.08), transparent 66%), linear-gradient(180deg, #191622, #121019); }
        html.dark[data-theme="porcelain"] .card,
        html.dark[data-theme="porcelain"] .stat-card,
        html.dark[data-theme="porcelain"] .auth-card,
        html.dark[data-theme="porcelain"] .modal-box {
            background: linear-gradient(178deg, #221E2E, #17141F);
            border-color: rgba(232,180,74,0.4);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 54px -26px rgba(0,0,0,0.75);
        }
        html.dark[data-theme="porcelain"] .card::before,
        html.dark[data-theme="porcelain"] .stat-card::before,
        html.dark[data-theme="porcelain"] .auth-card::before { background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent); }
        html.dark[data-theme="porcelain"] .sidebar,
        html.dark[data-theme="porcelain"] .portal-dock,
        html.dark[data-theme="porcelain"] .mobile-topbar { background: linear-gradient(180deg, #201C2B, #14111C); border-color: rgba(232,180,74,0.36); }
        html.dark[data-theme="porcelain"] .nav-link.active { background: rgba(232,180,74,0.1); box-shadow: inset 0 0 0 1px rgba(232,180,74,0.4); }
        html.dark[data-theme="porcelain"] .input,
        html.dark[data-theme="porcelain"] .select,
        html.dark[data-theme="porcelain"] textarea.input { background: rgba(10,8,16,0.65); border-color: rgba(232,180,74,0.3); }
        html.dark[data-theme="porcelain"] .skin-card, html.dark[data-theme="porcelain"] .dsn-card { background: #1D1928; border-color: rgba(232,180,74,0.24); }
        [data-theme="porcelain"] .boot-splash { background: linear-gradient(165deg, #FDFCF8, #F7F4EA 70%); }
        html.dark[data-theme="porcelain"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #1B1824, #12101A 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  15) طيّات الأوريغامي (ORIGAMI) — ورق مطويّ بوجوه ضوئية حادّة
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="origami"] body::before {
            background:
                linear-gradient(118deg, transparent 49.6%, rgba(23,16,46,0.05) 50%, transparent 50.5%),
                linear-gradient(242deg, transparent 34.6%, rgba(23,16,46,0.04) 35%, transparent 35.5%),
                linear-gradient(180deg, #FAF9F5, #F1EFE8);
            animation: none;
        }
        html[data-theme="origami"] .bg-orb { display: none; }
        html[data-theme="origami"] .card,
        html[data-theme="origami"] .stat-card,
        html[data-theme="origami"] .auth-card,
        html[data-theme="origami"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(122deg, rgba(255,255,255,0.9) 40%, rgba(233,230,222,0.55) 40.4%, rgba(255,255,255,0) 62%),
                linear-gradient(302deg, rgba(244,242,236,0.85) 22%, rgba(255,255,255,0) 46%),
                #FCFBF8;
            border: 1px solid #DCD8CC;
            box-shadow: 5px 5px 0 -1px rgba(23,16,46,0.07), 0 22px 40px -26px rgba(23,16,46,0.35);
        }
        html[data-theme="origami"] .card::after {
            left: auto; right: 0; top: 0; height: auto; width: 0; opacity: 1; animation: none; border-radius: 0 var(--radius-xl) 0 0;
            border-top: 22px solid color-mix(in srgb, var(--primary) 82%, #000);
            border-left: 22px solid transparent; background: none;
        }
        html[data-theme="origami"] .stat-card::before {
            content: ''; position: absolute; top: 0; right: 0; z-index: 1;
            border-top: 16px solid color-mix(in srgb, var(--primary) 82%, #000);
            border-left: 16px solid transparent; border-radius: 0 var(--radius-xl) 0 0;
        }
        html[data-theme="origami"] .sidebar,
        html[data-theme="origami"] .portal-dock,
        html[data-theme="origami"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(122deg, #FFFFFF 55%, #F3F1EA 55.4%);
            border: 1px solid #DCD8CC;
            box-shadow: 5px 5px 0 -1px rgba(23,16,46,0.06), 0 24px 44px -28px rgba(23,16,46,0.35);
        }
        html[data-theme="origami"] .nav-link.active {
            background: #FFFFFF;
            box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 55%, transparent), 3px 3px 0 -1px rgba(23,16,46,0.09);
        }
        html[data-theme="origami"] .btn { border-radius: 10px; box-shadow: 4px 4px 0 -1px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1.5px 0 rgba(255,255,255,0.35); }
        html[data-theme="origami"] .btn:active { transform: translate(2px, 2px); }
        html[data-theme="origami"] .input,
        html[data-theme="origami"] .select,
        html[data-theme="origami"] textarea.input { background: #FFFFFF; border: 1.5px solid #D8D4C8; border-radius: 10px; box-shadow: 3px 3px 0 -1px rgba(23,16,46,0.06); }
        html[data-theme="origami"] table.data-table th { border-bottom: 2px solid #23202E; color: #23202E; }
        html[data-theme="origami"] .skin-card, html[data-theme="origami"] .dsn-card { background: #FCFBF8; border-color: #DCD8CC; }
        html.dark[data-theme="origami"] body::before { background: linear-gradient(118deg, transparent 49.6%, rgba(255,255,255,0.035) 50%, transparent 50.5%), linear-gradient(180deg, #1B1A21, #131218); }
        html.dark[data-theme="origami"] .card,
        html.dark[data-theme="origami"] .stat-card,
        html.dark[data-theme="origami"] .auth-card,
        html.dark[data-theme="origami"] .modal-box {
            background: linear-gradient(122deg, rgba(45,43,54,0.9) 40%, rgba(28,27,35,0.85) 40.4%), #201F28;
            border-color: #35333F;
            box-shadow: 5px 5px 0 -1px rgba(0,0,0,0.4), 0 24px 44px -26px rgba(0,0,0,0.7);
        }
        html.dark[data-theme="origami"] .sidebar,
        html.dark[data-theme="origami"] .portal-dock,
        html.dark[data-theme="origami"] .mobile-topbar { background: linear-gradient(122deg, #24232C 55%, #1A1920 55.4%); border-color: #35333F; }
        html.dark[data-theme="origami"] .nav-link.active { background: #2A2933; }
        html.dark[data-theme="origami"] .input,
        html.dark[data-theme="origami"] .select,
        html.dark[data-theme="origami"] textarea.input { background: #17161D; border-color: #3A3844; }
        html.dark[data-theme="origami"] .skin-card, html.dark[data-theme="origami"] .dsn-card { background: #201F28; border-color: #35333F; }
        [data-theme="origami"] .boot-splash { background: linear-gradient(122deg, #FAF9F5 55%, #F0EEE6 55.4%); }
        html.dark[data-theme="origami"] .boot-splash { background: linear-gradient(122deg, #1B1A21 55%, #131218 55.4%); }

        /* ════════════════════════════════════════════════════════════════
         *  16) اللؤلؤ المكنون (PEARL) — تقزّح لؤلئي يتنفّس على صدف أبيض
         * ════════════════════════════════════════════════════════════════ */
        @keyframes pearlSheen { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        html[data-theme="pearl"] body::before {
            background: linear-gradient(115deg, #FDFDFB, #F3EFF6 26%, #EDF4F2 50%, #F6F1EC 74%, #FDFDFB);
            background-size: 300% 300%; animation: pearlSheen 22s ease-in-out infinite;
        }
        html[data-theme="pearl"] .bg-orb { opacity: 0.4; filter: blur(120px) saturate(0.8); }
        html[data-theme="pearl"] .card,
        html[data-theme="pearl"] .stat-card,
        html[data-theme="pearl"] .auth-card,
        html[data-theme="pearl"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(#FFFFFF, #FDFCFA) padding-box,
                linear-gradient(130deg, #F3C6D8, #C9DCF4 30%, #C4EADF 55%, #F1E4C2 78%, #E4C8EE) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 3px 6px rgba(140,120,160,0.08), 0 26px 52px -28px rgba(140,120,160,0.5), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="pearl"] .card::after {
            left: 0; right: 0; height: 100%; opacity: 0.5; border-radius: inherit;
            background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.75) 50%, transparent 70%);
            background-size: 260% 100%; animation: pearlSheen 9s ease-in-out infinite;
            pointer-events: none;
        }
        html[data-theme="pearl"] .stat-card > *, html[data-theme="pearl"] .card > * { position: relative; z-index: 1; }
        html[data-theme="pearl"] .sidebar,
        html[data-theme="pearl"] .portal-dock,
        html[data-theme="pearl"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(#FFFFFF, #FBFAF7) padding-box,
                linear-gradient(160deg, #F3C6D8, #C9DCF4 35%, #C4EADF 65%, #F1E4C2) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 26px 54px -30px rgba(140,120,160,0.55), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="pearl"] .sidebar-brand-title {
            background: linear-gradient(105deg, #B98BAD, #7FA6C9 30%, #7DBFA8 55%, #C9AE6F 78%, #B98BAD);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 9s linear infinite;
        }
        html[data-theme="pearl"] .nav-link.active { background: linear-gradient(120deg, rgba(243,198,216,0.28), rgba(201,220,244,0.28)); box-shadow: inset 0 0 0 1px rgba(180,160,200,0.4); }
        html[data-theme="pearl"] .input,
        html[data-theme="pearl"] .select,
        html[data-theme="pearl"] textarea.input { background: #FFFFFF; border: 1px solid #E2DAE8; box-shadow: inset 0 2px 5px rgba(140,120,160,0.08); }
        html[data-theme="pearl"] table.data-table th { border-bottom-color: #E2DAE8; }
        html[data-theme="pearl"] .skin-card, html[data-theme="pearl"] .dsn-card { background: #FFFFFF; border-color: #E6DFEC; }
        html.dark[data-theme="pearl"] body::before {
            background: linear-gradient(115deg, #12101B, #1B1428 28%, #101C22 52%, #1E1626 76%, #12101B);
            background-size: 300% 300%; animation: pearlSheen 26s ease-in-out infinite;
        }
        html.dark[data-theme="pearl"] .card,
        html.dark[data-theme="pearl"] .stat-card,
        html.dark[data-theme="pearl"] .auth-card,
        html.dark[data-theme="pearl"] .modal-box {
            background:
                linear-gradient(#1C1926, #15121E) padding-box,
                linear-gradient(130deg, #8A4E68, #3E5C88 30%, #2E6E5C 55%, #8A7440 78%, #6E4680) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 26px 54px -26px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.07);
        }
        html.dark[data-theme="pearl"] .card::after { opacity: 0.14; }
        html.dark[data-theme="pearl"] .sidebar,
        html.dark[data-theme="pearl"] .portal-dock,
        html.dark[data-theme="pearl"] .mobile-topbar {
            background:
                linear-gradient(#1A1724, #13101C) padding-box,
                linear-gradient(160deg, #8A4E68, #3E5C88 35%, #2E6E5C 65%, #8A7440) border-box;
            border: 1.5px solid transparent;
        }
        html.dark[data-theme="pearl"] .input,
        html.dark[data-theme="pearl"] .select,
        html.dark[data-theme="pearl"] textarea.input { background: rgba(9,7,14,0.6); border-color: #3A3348; }
        html.dark[data-theme="pearl"] .skin-card, html.dark[data-theme="pearl"] .dsn-card { background: #1A1724; border-color: #322C40; }
        [data-theme="pearl"] .boot-splash { background: linear-gradient(150deg, #FDFDFB, #F3F0F7 45%, #EEF4F3 78%); }
        html.dark[data-theme="pearl"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #1A1626, #100D18 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  17) الجليد القطبي (GLACIER) — صقيع نقي وحواف جليدية باردة
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="glacier"] body::before {
            background:
                linear-gradient(146deg, transparent 30%, rgba(120,180,225,0.1) 30.4%, transparent 33%),
                linear-gradient(212deg, transparent 58%, rgba(120,180,225,0.08) 58.4%, transparent 61%),
                radial-gradient(70% 50% at 50% 0%, rgba(255,255,255,0.9), transparent 65%),
                linear-gradient(180deg, #F1F8FD, #E3EFF9);
            animation: none;
        }
        html[data-theme="glacier"] .bg-orb { opacity: 0.4; filter: blur(120px) hue-rotate(160deg); }
        html[data-theme="glacier"] .card,
        html[data-theme="glacier"] .stat-card,
        html[data-theme="glacier"] .auth-card,
        html[data-theme="glacier"] .modal-box {
            background: linear-gradient(168deg, rgba(255,255,255,0.9), rgba(238,247,253,0.82));
            backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
            border: 1px solid #BFDCEF;
            box-shadow: 0 3px 7px rgba(52,110,160,0.07), 0 28px 54px -28px rgba(52,110,160,0.45),
                        inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -12px 22px -18px rgba(150,205,240,0.55);
        }
        html[data-theme="glacier"] .card::after { height: 2.5px; opacity: 1; animation: none; background: linear-gradient(90deg, #4FA7DE, #BFE6FF 45%, #FFFFFF 55%, #4FA7DE); }
        html[data-theme="glacier"] .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; z-index: 0;
            background: linear-gradient(90deg, #4FA7DE, #BFE6FF 45%, #FFFFFF 55%, #4FA7DE);
        }
        html[data-theme="glacier"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="glacier"] .sidebar,
        html[data-theme="glacier"] .portal-dock,
        html[data-theme="glacier"] .mobile-topbar {
            background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(236,246,253,0.88));
            backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
            border: 1px solid #BFDCEF;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 26px 52px -30px rgba(52,110,160,0.45);
        }
        html[data-theme="glacier"] .sidebar-brand-title {
            background: linear-gradient(105deg, #2F7FB8, #8FD0F5 35%, #E8F7FF 52%, #4FA7DE 70%, #2F7FB8);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 8s linear infinite;
        }
        html[data-theme="glacier"] .nav-link.active { background: rgba(120,190,235,0.16); box-shadow: inset 0 0 0 1px rgba(90,165,215,0.45); }
        html[data-theme="glacier"] .input,
        html[data-theme="glacier"] .select,
        html[data-theme="glacier"] textarea.input { background: rgba(255,255,255,0.92); border: 1px solid #C4DEF0; box-shadow: inset 0 2px 6px rgba(52,110,160,0.08); }
        html[data-theme="glacier"] table.data-table th { color: #2F7FB8; border-bottom-color: #C4DEF0; }
        html[data-theme="glacier"] .skin-card, html[data-theme="glacier"] .dsn-card { background: rgba(255,255,255,0.92); border-color: #C4DEF0; }
        html.dark[data-theme="glacier"] body::before {
            background:
                linear-gradient(146deg, transparent 30%, rgba(90,180,235,0.07) 30.4%, transparent 33%),
                radial-gradient(70% 50% at 50% 0%, rgba(60,140,200,0.2), transparent 65%),
                linear-gradient(180deg, #0A1A28, #060F1A);
        }
        html.dark[data-theme="glacier"] .card,
        html.dark[data-theme="glacier"] .stat-card,
        html.dark[data-theme="glacier"] .auth-card,
        html.dark[data-theme="glacier"] .modal-box {
            background: linear-gradient(168deg, rgba(16,32,48,0.88), rgba(10,22,36,0.85));
            border-color: rgba(110,180,230,0.32);
            box-shadow: 0 28px 56px -26px rgba(0,0,0,0.75), inset 0 1px 0 rgba(180,225,255,0.12), inset 0 -12px 22px -18px rgba(60,140,200,0.3);
        }
        html.dark[data-theme="glacier"] .sidebar,
        html.dark[data-theme="glacier"] .portal-dock,
        html.dark[data-theme="glacier"] .mobile-topbar { background: linear-gradient(180deg, rgba(14,28,44,0.92), rgba(8,18,30,0.9)); border-color: rgba(110,180,230,0.3); }
        html.dark[data-theme="glacier"] .nav-link.active { background: rgba(90,170,230,0.14); box-shadow: inset 0 0 0 1px rgba(110,185,235,0.45); }
        html.dark[data-theme="glacier"] .input,
        html.dark[data-theme="glacier"] .select,
        html.dark[data-theme="glacier"] textarea.input { background: rgba(5,12,20,0.65); border-color: rgba(110,180,230,0.28); }
        html.dark[data-theme="glacier"] .skin-card, html.dark[data-theme="glacier"] .dsn-card { background: #0E1C2C; border-color: rgba(110,180,230,0.26); }
        [data-theme="glacier"] .boot-splash { background: linear-gradient(165deg, #F4FAFE, #E6F1FA 70%); }
        html.dark[data-theme="glacier"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #0C1F30, #071420 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  18) حديقة ساكورا (SAKURA) — ورق ياباني وأزهار كرز وحبر
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="sakura"] body::before {
            background:
                radial-gradient(circle at 22px 30px, rgba(232,120,150,0.14) 2.5px, transparent 3.5px),
                radial-gradient(circle at 68px 78px, rgba(232,120,150,0.1) 2px, transparent 3px),
                radial-gradient(circle at 46px 8px, rgba(232,150,110,0.08) 1.8px, transparent 2.8px),
                linear-gradient(180deg, #FCF7F1, #F8EFE9);
            animation: none; background-size: 96px 96px, 96px 96px, 96px 96px, 100% 100%;
        }
        html[data-theme="sakura"] .bg-orb { opacity: 0.35; filter: blur(120px) hue-rotate(-40deg); }
        html[data-theme="sakura"] .card,
        html[data-theme="sakura"] .stat-card,
        html[data-theme="sakura"] .auth-card,
        html[data-theme="sakura"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(178deg, #FFFDFB, #FCF5F0);
            border: 1.5px solid #4A4048;
            box-shadow: 0 3px 0 -1px #4A4048, 0 24px 46px -26px rgba(74,52,60,0.4);
        }
        html[data-theme="sakura"] .card::after { height: 3px; opacity: 1; animation: none; background: linear-gradient(90deg, #E87896, #F7C6D4 45%, #FFEDF2 55%, #E87896); }
        html[data-theme="sakura"] .sidebar,
        html[data-theme="sakura"] .portal-dock,
        html[data-theme="sakura"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                radial-gradient(circle at 18px 24px, rgba(232,120,150,0.12) 2.2px, transparent 3.2px),
                linear-gradient(180deg, #FFFDFB, #FBF3EE);
            background-size: 84px 84px, 100% 100%;
            border: 1.5px solid #4A4048;
            box-shadow: 0 3px 0 -1px #4A4048, 0 26px 50px -28px rgba(74,52,60,0.4);
        }
        html[data-theme="sakura"] .sidebar-brand-title {
            background: linear-gradient(105deg, #C2496B, #F09AB4 35%, #FFE3EC 52%, #E87896 70%, #C2496B);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 8s linear infinite;
        }
        html[data-theme="sakura"] .sidebar-brand-icon { box-shadow: 0 0 0 2px #4A4048, 0 10px 22px -10px rgba(194,73,107,0.55); }
        html[data-theme="sakura"] .nav-link.active { background: rgba(232,120,150,0.13); box-shadow: inset 0 0 0 1.5px rgba(194,73,107,0.45); }
        html[data-theme="sakura"] .btn { box-shadow: 0 3px 0 -1px rgba(74,64,72,0.85), 0 14px 26px -12px color-mix(in srgb, var(--primary) 50%, transparent); }
        html[data-theme="sakura"] .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 -1px rgba(74,64,72,0.85); }
        html[data-theme="sakura"] .input,
        html[data-theme="sakura"] .select,
        html[data-theme="sakura"] textarea.input { background: #FFFEFC; border: 1.5px solid #C9BFC4; box-shadow: inset 0 2px 4px rgba(74,52,60,0.07); }
        html[data-theme="sakura"] .input:focus, html[data-theme="sakura"] .select:focus, html[data-theme="sakura"] textarea.input:focus { border-color: #E87896; box-shadow: 0 0 0 3px rgba(232,120,150,0.2); }
        html[data-theme="sakura"] table.data-table th { color: #4A4048; border-bottom: 2px solid #4A4048; }
        html[data-theme="sakura"] .skin-card, html[data-theme="sakura"] .dsn-card { background: #FFFDFB; border-color: #D8CED4; }
        html.dark[data-theme="sakura"] body::before {
            background:
                radial-gradient(circle at 22px 30px, rgba(232,120,150,0.14) 2.5px, transparent 3.5px),
                radial-gradient(circle at 68px 78px, rgba(232,120,150,0.09) 2px, transparent 3px),
                linear-gradient(180deg, #1C1219, #130C12);
            background-size: 96px 96px, 96px 96px, 100% 100%;
        }
        html.dark[data-theme="sakura"] .card,
        html.dark[data-theme="sakura"] .stat-card,
        html.dark[data-theme="sakura"] .auth-card,
        html.dark[data-theme="sakura"] .modal-box { background: linear-gradient(178deg, #241820, #190F16); border-color: #5E4652; box-shadow: 0 3px 0 -1px #0A060A, 0 26px 50px -26px rgba(0,0,0,0.75); }
        html.dark[data-theme="sakura"] .sidebar,
        html.dark[data-theme="sakura"] .portal-dock,
        html.dark[data-theme="sakura"] .mobile-topbar { background: radial-gradient(circle at 18px 24px, rgba(232,120,150,0.1) 2.2px, transparent 3.2px), linear-gradient(180deg, #221621, #170D15); background-size: 84px 84px, 100% 100%; border-color: #5E4652; }
        html.dark[data-theme="sakura"] .input,
        html.dark[data-theme="sakura"] .select,
        html.dark[data-theme="sakura"] textarea.input { background: rgba(12,7,11,0.65); border-color: #4E3A46; }
        html.dark[data-theme="sakura"] .skin-card, html.dark[data-theme="sakura"] .dsn-card { background: #211622; border-color: #46333E; }
        [data-theme="sakura"] .boot-splash { background: linear-gradient(165deg, #FDF8F3, #F8EEEA 70%); }
        html.dark[data-theme="sakura"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #241522, #17101A 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  19) الكروم الهولوغرامي (HOLO) — معدن فضّي بإطار طيفي متقزّح
         * ════════════════════════════════════════════════════════════════ */
        @keyframes holoSweep { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
        html[data-theme="holo"] body::before {
            background:
                radial-gradient(55% 42% at 82% 0%, rgba(180,160,255,0.14), transparent 65%),
                radial-gradient(50% 40% at 12% 8%, rgba(140,225,255,0.13), transparent 65%),
                linear-gradient(180deg, #F4F5F9, #E9EBF2);
            animation: none;
        }
        html[data-theme="holo"] .bg-orb { opacity: 0.45; }
        html[data-theme="holo"] .card,
        html[data-theme="holo"] .stat-card,
        html[data-theme="holo"] .auth-card,
        html[data-theme="holo"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(165deg, #FEFEFF 0%, #EFF1F6 46%, #F9FAFC 54%, #E8EAF1 100%) padding-box,
                conic-gradient(from 210deg, #C7D6F5, #E8C7F0 22%, #C7F0DE 45%, #F5E6C0 68%, #C7DCF5 88%, #C7D6F5) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 3px 6px rgba(80,90,120,0.08), 0 26px 52px -26px rgba(80,90,120,0.45), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="holo"] .card::after {
            left: 0; right: 0; height: 100%; opacity: 0.55; border-radius: inherit; pointer-events: none;
            background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.85) 50%, transparent 66%);
            background-size: 300% 100%; animation: holoSweep 7s linear infinite;
        }
        html[data-theme="holo"] .stat-card > *, html[data-theme="holo"] .card > * { position: relative; z-index: 1; }
        html[data-theme="holo"] .sidebar,
        html[data-theme="holo"] .portal-dock,
        html[data-theme="holo"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                linear-gradient(180deg, #FDFDFE, #ECEEF4) padding-box,
                conic-gradient(from 160deg, #C7D6F5, #E8C7F0 25%, #C7F0DE 50%, #F5E6C0 75%, #C7D6F5) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 26px 52px -30px rgba(80,90,120,0.5), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        html[data-theme="holo"] .sidebar-brand-title {
            background: linear-gradient(105deg, #6E7B96 0%, #C3CCE0 25%, #FFFFFF 40%, #9AA6C0 60%, #E8EDF7 78%, #6E7B96 100%);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 6.5s linear infinite;
        }
        html[data-theme="holo"] .nav-link.active { background: linear-gradient(120deg, rgba(199,214,245,0.4), rgba(232,199,240,0.32)); box-shadow: inset 0 0 0 1px rgba(150,160,200,0.45); }
        html[data-theme="holo"] .btn { box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--primary) 55%, transparent), inset 0 1.5px 0 rgba(255,255,255,0.55), inset 0 -4px 8px rgba(30,40,70,0.2); }
        html[data-theme="holo"] .input,
        html[data-theme="holo"] .select,
        html[data-theme="holo"] textarea.input { background: linear-gradient(180deg, #FFFFFF, #F2F4F8); border: 1px solid #CBD2E0; box-shadow: inset 0 2px 5px rgba(80,90,120,0.1); }
        html[data-theme="holo"] table.data-table th { color: #5A6480; border-bottom-color: #CBD2E0; }
        html[data-theme="holo"] .skin-card, html[data-theme="holo"] .dsn-card { background: #FDFDFE; border-color: #D5DAE6; }
        html.dark[data-theme="holo"] body::before {
            background:
                radial-gradient(55% 42% at 82% 0%, rgba(150,120,255,0.14), transparent 65%),
                radial-gradient(50% 40% at 12% 8%, rgba(90,200,255,0.1), transparent 65%),
                linear-gradient(180deg, #14161C, #0D0F14);
        }
        html.dark[data-theme="holo"] .card,
        html.dark[data-theme="holo"] .stat-card,
        html.dark[data-theme="holo"] .auth-card,
        html.dark[data-theme="holo"] .modal-box {
            background:
                linear-gradient(165deg, #1F2229 0%, #14161C 50%, #1B1E25 100%) padding-box,
                conic-gradient(from 210deg, #4E5E86, #7A4E86 22%, #3E7A64 45%, #86743E 68%, #4E6486 88%, #4E5E86) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 26px 54px -26px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        html.dark[data-theme="holo"] .card::after { opacity: 0.14; }
        html.dark[data-theme="holo"] .sidebar,
        html.dark[data-theme="holo"] .portal-dock,
        html.dark[data-theme="holo"] .mobile-topbar {
            background:
                linear-gradient(180deg, #1C1F26, #121419) padding-box,
                conic-gradient(from 160deg, #4E5E86, #7A4E86 25%, #3E7A64 50%, #86743E 75%, #4E5E86) border-box;
            border: 1.5px solid transparent;
        }
        html.dark[data-theme="holo"] .input,
        html.dark[data-theme="holo"] .select,
        html.dark[data-theme="holo"] textarea.input { background: rgba(8,10,14,0.65); border-color: #363C4C; }
        html.dark[data-theme="holo"] .skin-card, html.dark[data-theme="holo"] .dsn-card { background: #191C23; border-color: #303646; }
        [data-theme="holo"] .boot-splash { background: linear-gradient(140deg, #F7F8FB, #ECEEF4 55%, #F4F5F9); }
        html.dark[data-theme="holo"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #181B22, #101218 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  20) قصر الأندلس (ANDALUS) — زليج وأقواس بإطار مذهّب مزدوج
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="andalus"] body::before {
            background:
                repeating-linear-gradient(45deg, transparent 0 17px, rgba(14,123,116,0.06) 17px 18px),
                repeating-linear-gradient(-45deg, transparent 0 17px, rgba(176,124,32,0.06) 17px 18px),
                radial-gradient(circle at 18px 18px, rgba(14,123,116,0.1) 1.6px, transparent 2.4px),
                linear-gradient(180deg, #F7F2E4, #F0E9D4);
            animation: none; background-size: 100% 100%, 100% 100%, 36px 36px, 100% 100%;
        }
        html[data-theme="andalus"] .bg-orb { display: none; }
        html[data-theme="andalus"] .card,
        html[data-theme="andalus"] .stat-card,
        html[data-theme="andalus"] .auth-card,
        html[data-theme="andalus"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(180deg, #FEFBF2, #F9F2E1);
            border: 1.5px solid rgba(176,124,32,0.55);
            box-shadow: 0 2px 4px rgba(84,60,20,0.06), 0 24px 50px -24px rgba(84,60,20,0.42), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        html[data-theme="andalus"] .card::before,
        html[data-theme="andalus"] .stat-card::before,
        html[data-theme="andalus"] .auth-card::before,
        html[data-theme="andalus"] .modal-box::before {
            content: ''; position: absolute; inset: 5px; pointer-events: none; z-index: 0;
            border: 1px solid rgba(14,123,116,0.45); border-radius: inherit;
        }
        html[data-theme="andalus"] .card::after {
            left: 10px; right: 10px; height: 6px; opacity: 1; animation: none; border-radius: 0 0 6px 6px;
            background: repeating-linear-gradient(90deg, #0E7B74 0 10px, #C9962E 10px 14px, #F4EEE0 14px 18px, #C9962E 18px 22px, #0E7B74 22px 32px);
        }
        html[data-theme="andalus"] .stat-card > *, html[data-theme="andalus"] .card > *, html[data-theme="andalus"] .modal-box > * { position: relative; z-index: 1; }
        html[data-theme="andalus"] .sidebar,
        html[data-theme="andalus"] .portal-dock,
        html[data-theme="andalus"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                radial-gradient(circle at 16px 16px, rgba(14,123,116,0.09) 1.5px, transparent 2.3px),
                linear-gradient(180deg, #FEFBF2, #F7EFDC);
            background-size: 32px 32px, 100% 100%;
            border: 1.5px solid rgba(176,124,32,0.55);
            box-shadow: 0 24px 50px -26px rgba(84,60,20,0.42), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        html[data-theme="andalus"] .sidebar-brand-title {
            background: linear-gradient(105deg, #8E5E0A, #D89B26 32%, #FFF0C2 48%, #0E7B74 78%, #8E5E0A);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 8.5s linear infinite;
        }
        html[data-theme="andalus"] .sidebar-brand-icon { box-shadow: 0 0 0 2px rgba(176,124,32,0.45), 0 0 0 4px rgba(14,123,116,0.25), 0 12px 24px -10px rgba(84,60,20,0.5); }
        html[data-theme="andalus"] .nav-link.active { background: rgba(14,123,116,0.1); box-shadow: inset 0 0 0 1.5px rgba(14,123,116,0.45); }
        html[data-theme="andalus"] .input,
        html[data-theme="andalus"] .select,
        html[data-theme="andalus"] textarea.input { background: #FFFDF6; border: 1.5px solid rgba(176,124,32,0.4); box-shadow: inset 0 2px 5px rgba(84,60,20,0.07); }
        html[data-theme="andalus"] .input:focus, html[data-theme="andalus"] .select:focus, html[data-theme="andalus"] textarea.input:focus { border-color: #0E7B74; box-shadow: 0 0 0 3px rgba(14,123,116,0.18); }
        html[data-theme="andalus"] table.data-table th { color: #0E7B74; border-bottom: 2px solid rgba(176,124,32,0.45); }
        html[data-theme="andalus"] .skin-card, html[data-theme="andalus"] .dsn-card { background: #FEFBF2; border-color: rgba(176,124,32,0.35); }
        html.dark[data-theme="andalus"] body::before {
            background:
                repeating-linear-gradient(45deg, transparent 0 17px, rgba(46,180,168,0.05) 17px 18px),
                repeating-linear-gradient(-45deg, transparent 0 17px, rgba(232,180,74,0.05) 17px 18px),
                radial-gradient(circle at 18px 18px, rgba(46,180,168,0.1) 1.6px, transparent 2.4px),
                linear-gradient(180deg, #191430, #100C22);
            background-size: 100% 100%, 100% 100%, 36px 36px, 100% 100%;
        }
        html.dark[data-theme="andalus"] .card,
        html.dark[data-theme="andalus"] .stat-card,
        html.dark[data-theme="andalus"] .auth-card,
        html.dark[data-theme="andalus"] .modal-box { background: linear-gradient(180deg, #201A38, #150F2A); border-color: rgba(232,180,74,0.45); box-shadow: 0 26px 54px -26px rgba(0,0,0,0.75), inset 0 1px 0 rgba(232,180,74,0.1); }
        html.dark[data-theme="andalus"] .card::before,
        html.dark[data-theme="andalus"] .stat-card::before,
        html.dark[data-theme="andalus"] .auth-card::before,
        html.dark[data-theme="andalus"] .modal-box::before { border-color: rgba(46,180,168,0.4); }
        html.dark[data-theme="andalus"] .sidebar,
        html.dark[data-theme="andalus"] .portal-dock,
        html.dark[data-theme="andalus"] .mobile-topbar { background: radial-gradient(circle at 16px 16px, rgba(46,180,168,0.08) 1.5px, transparent 2.3px), linear-gradient(180deg, #1E1836, #130D26); background-size: 32px 32px, 100% 100%; border-color: rgba(232,180,74,0.45); }
        html.dark[data-theme="andalus"] .input,
        html.dark[data-theme="andalus"] .select,
        html.dark[data-theme="andalus"] textarea.input { background: rgba(10,7,20,0.7); border-color: rgba(232,180,74,0.32); }
        html.dark[data-theme="andalus"] .skin-card, html.dark[data-theme="andalus"] .dsn-card { background: #1D1734; border-color: rgba(232,180,74,0.26); }
        [data-theme="andalus"] .boot-splash { background: linear-gradient(165deg, #F8F3E7, #F0E9D6 70%); }
        html.dark[data-theme="andalus"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #1D1836, #141026 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  21) الفولاذ الدمشقي (DAMASCUS) — موجات فولاذ بترصيع ذهبي — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="damascus"] body {
            --bg-main: #0B0E12; --bg-white: #141920; --bg-card: rgba(20,25,32,0.92);
            --text-dark: #ECF1F6; --text-body: #AAB6C4; --text-muted: #6B7889;
            --border-light: rgba(201,150,46,0.28); --border-soft: rgba(160,175,195,0.1);
        }
        html[data-theme="damascus"] body::before {
            background:
                repeating-radial-gradient(ellipse 130% 42% at 50% -8%, transparent 0 26px, rgba(200,215,235,0.028) 26px 28px),
                repeating-radial-gradient(ellipse 120% 40% at 50% 112%, transparent 0 30px, rgba(200,215,235,0.02) 30px 32px),
                radial-gradient(60% 44% at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 62%),
                linear-gradient(180deg, #10141A, #090C10);
            animation: none; background-size: 100% 100%;
        }
        html[data-theme="damascus"] .bg-orb { display: none; }
        html[data-theme="damascus"] .card,
        html[data-theme="damascus"] .stat-card,
        html[data-theme="damascus"] .auth-card,
        html[data-theme="damascus"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                repeating-radial-gradient(ellipse 160% 60% at 20% -20%, transparent 0 18px, rgba(200,215,235,0.03) 18px 19.5px),
                repeating-radial-gradient(ellipse 150% 55% at 90% 120%, transparent 0 22px, rgba(200,215,235,0.022) 22px 23.5px),
                linear-gradient(172deg, #1A2029 0%, #12161D 60%, #171C24 100%);
            border: 1px solid rgba(201,150,46,0.5);
            box-shadow: 0 22px 46px -22px rgba(0,0,0,0.85), inset 0 1px 0 rgba(210,225,245,0.1), inset 0 0 0 1px rgba(10,13,17,0.6);
        }
        html[data-theme="damascus"] .card::after { height: 2.5px; opacity: 1; animation: none; background: linear-gradient(90deg, #8E5E0A, #E8B44A 40%, #FFF0C2 52%, #C9962E 66%, #8E5E0A); }
        html[data-theme="damascus"] .stat-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; z-index: 0;
            background: linear-gradient(90deg, #8E5E0A, #E8B44A 40%, #FFF0C2 52%, #C9962E 66%, #8E5E0A);
        }
        html[data-theme="damascus"] .stat-card > * { position: relative; z-index: 1; }
        html[data-theme="damascus"] .stat-card:hover { transform: translateY(-2px); box-shadow: 0 26px 52px -20px rgba(0,0,0,0.9), 0 0 26px -14px rgba(232,180,74,0.7), inset 0 1px 0 rgba(210,225,245,0.12); }
        html[data-theme="damascus"] .sidebar,
        html[data-theme="damascus"] .portal-dock,
        html[data-theme="damascus"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background:
                repeating-radial-gradient(ellipse 170% 55% at 50% -15%, transparent 0 20px, rgba(200,215,235,0.026) 20px 21.5px),
                linear-gradient(180deg, #171C24, #0E1218);
            border: 1px solid rgba(201,150,46,0.45);
            box-shadow: 0 24px 50px -22px rgba(0,0,0,0.9), inset 0 1px 0 rgba(210,225,245,0.09);
        }
        html[data-theme="damascus"] .sidebar-brand-title {
            background: linear-gradient(105deg, #97A5B6 0%, #E4ECF5 22%, #C9962E 45%, #FFE9A8 58%, #C9962E 70%, #97A5B6 100%);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 7.5s linear infinite;
        }
        html[data-theme="damascus"] .sidebar-brand-icon { background: linear-gradient(150deg, #2A323E, #12161D); box-shadow: 0 0 0 1.5px rgba(201,150,46,0.55), 0 12px 26px -12px rgba(0,0,0,0.9); }
        html[data-theme="damascus"] .nav-link.active { background: rgba(232,180,74,0.09); box-shadow: inset 0 0 0 1px rgba(201,150,46,0.5); }
        html[data-theme="damascus"] .nav-link.active::before { content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 3px; border-radius: 4px; background: linear-gradient(180deg, #E8B44A, #8E5E0A); }
        html[data-theme="damascus"] .btn { border: 1px solid rgba(201,150,46,0.3); box-shadow: 0 14px 26px -12px var(--primary), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -6px 10px -8px rgba(0,0,0,0.5); }
        html[data-theme="damascus"] .btn-outline { background: linear-gradient(180deg, #262E39, #161B22); border: 1px solid rgba(201,150,46,0.4); color: #E4ECF5; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 20px -12px rgba(0,0,0,0.8); }
        html[data-theme="damascus"] .input,
        html[data-theme="damascus"] .select,
        html[data-theme="damascus"] textarea.input { background: #0B0F14; border: 1px solid rgba(201,150,46,0.3); color: var(--text-dark); box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); }
        html[data-theme="damascus"] .input:focus, html[data-theme="damascus"] .select:focus, html[data-theme="damascus"] textarea.input:focus { border-color: #E8B44A; box-shadow: 0 0 0 3px rgba(232,180,74,0.16), inset 0 2px 6px rgba(0,0,0,0.6); }
        html[data-theme="damascus"] .input::placeholder { color: #566374; }
        html[data-theme="damascus"] .select option { background: #141920; color: #ECF1F6; }
        html[data-theme="damascus"] table.data-table th { color: #E8B44A; border-bottom-color: rgba(201,150,46,0.35); }
        html[data-theme="damascus"] table.data-table tbody tr:hover { background: rgba(200,215,235,0.045); }
        html[data-theme="damascus"] .dock-tab.active { background: rgba(232,180,74,0.1); box-shadow: inset 0 0 0 1px rgba(201,150,46,0.5); }
        html[data-theme="damascus"] .skin-card, html[data-theme="damascus"] .dsn-card { background: #141920; border-color: rgba(201,150,46,0.28); }
        html[data-theme="damascus"] .skin-card.active, html[data-theme="damascus"] .dsn-card.active { border-color: #E8B44A; box-shadow: 0 0 0 2px rgba(232,180,74,0.3), 0 14px 30px -16px rgba(0,0,0,0.8); }
        html[data-theme="damascus"] .modal-overlay { background: rgba(4,6,8,0.74); }
        html[data-theme="damascus"] ::-webkit-scrollbar-thumb { background: #2C3542; }
        html[data-theme="damascus"] .theme-wipe { display: none; }
        [data-theme="damascus"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #131820, #0B0E12 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  22) الموجة الليلية (RETRO) — غروب نيون وشبكة أفق ثمانينية — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        html[data-theme="retro"] body {
            --bg-main: #0F0524; --bg-white: #1B0E38; --bg-card: rgba(27,14,56,0.9);
            --text-dark: #F4EDFF; --text-body: #C0AEE0; --text-muted: #7E6BA6;
            --border-light: rgba(255,86,196,0.3); --border-soft: rgba(255,86,196,0.14);
        }
        html[data-theme="retro"] body::before {
            background:
                repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,86,196,0.11) 34px 35px),
                repeating-linear-gradient(90deg, transparent 0 34px, rgba(94,225,255,0.07) 34px 35px),
                radial-gradient(60% 44% at 50% -4%, rgba(255,122,64,0.3), rgba(255,86,196,0.18) 42%, transparent 68%),
                linear-gradient(180deg, #1C0A3E 0%, #0F0524 55%, #090318 100%);
            animation: none; background-size: 100% 100%;
        }
        html[data-theme="retro"] .bg-orb { opacity: 0.4; filter: blur(110px) saturate(1.8); }
        html[data-theme="retro"] .card,
        html[data-theme="retro"] .stat-card,
        html[data-theme="retro"] .auth-card,
        html[data-theme="retro"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(#221046, #170A32) padding-box,
                        linear-gradient(120deg, #FF56C4, #7A3CFF 45%, #5EE1FF) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 22px 48px -22px rgba(0,0,0,0.8), 0 0 32px -16px rgba(255,86,196,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        html[data-theme="retro"] .card::after { height: 2.5px; opacity: 1; animation: none; background: linear-gradient(90deg, #FF56C4, #FFB25E 45%, #5EE1FF); }
        html[data-theme="retro"] .stat-card:hover { transform: translateY(-2px); box-shadow: 0 26px 52px -20px rgba(0,0,0,0.85), 0 0 40px -14px rgba(94,225,255,0.6); }
        html[data-theme="retro"] .sidebar,
        html[data-theme="retro"] .portal-dock,
        html[data-theme="retro"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(#1E0D40, #12072A) padding-box,
                        linear-gradient(160deg, #FF56C4, #7A3CFF 50%, #5EE1FF) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 24px 50px -22px rgba(0,0,0,0.85), 0 0 36px -18px rgba(122,60,255,0.6);
        }
        html[data-theme="retro"] .sidebar-brand-title {
            background: linear-gradient(105deg, #FF56C4 0%, #FFB25E 30%, #FFF3D6 46%, #5EE1FF 72%, #FF56C4 100%);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 6s linear infinite;
        }
        html[data-theme="retro"] .sidebar-brand-icon { background: linear-gradient(150deg, #FF56C4, #7A3CFF); box-shadow: 0 0 24px -6px #FF56C4, inset 0 1.5px 0 rgba(255,255,255,0.35); }
        html[data-theme="retro"] .nav-link.active { background: rgba(255,86,196,0.12); box-shadow: inset 0 0 0 1px rgba(255,86,196,0.5), 0 0 18px -8px rgba(255,86,196,0.7); }
        html[data-theme="retro"] .btn { border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 14px 30px -12px var(--primary), 0 0 26px -10px rgba(255,86,196,0.5), inset 0 1px 0 rgba(255,255,255,0.25); }
        html[data-theme="retro"] .btn-outline { background: rgba(27,14,56,0.7); border: 1.5px solid rgba(94,225,255,0.5); color: #5EE1FF; box-shadow: 0 0 18px -10px rgba(94,225,255,0.7); }
        html[data-theme="retro"] .input,
        html[data-theme="retro"] .select,
        html[data-theme="retro"] textarea.input { background: rgba(10,4,26,0.75); border: 1px solid rgba(122,60,255,0.4); color: var(--text-dark); box-shadow: inset 0 2px 6px rgba(0,0,0,0.55); }
        html[data-theme="retro"] .input:focus, html[data-theme="retro"] .select:focus, html[data-theme="retro"] textarea.input:focus { border-color: #5EE1FF; box-shadow: 0 0 0 3px rgba(94,225,255,0.18), 0 0 20px -8px rgba(94,225,255,0.6); }
        html[data-theme="retro"] .input::placeholder { color: #6E5C96; }
        html[data-theme="retro"] .select option { background: #1B0E38; color: #F4EDFF; }
        html[data-theme="retro"] table.data-table th { color: #5EE1FF; border-bottom-color: rgba(122,60,255,0.4); }
        html[data-theme="retro"] table.data-table tbody tr:hover { background: rgba(255,86,196,0.06); }
        html[data-theme="retro"] .dock-tab.active { background: rgba(255,86,196,0.13); box-shadow: inset 0 0 0 1px rgba(255,86,196,0.5); }
        html[data-theme="retro"] .skin-card, html[data-theme="retro"] .dsn-card { background: #1B0E38; border-color: rgba(122,60,255,0.35); }
        html[data-theme="retro"] .skin-card.active, html[data-theme="retro"] .dsn-card.active { border-color: #FF56C4; box-shadow: 0 0 0 2px rgba(255,86,196,0.35), 0 0 28px -12px rgba(255,86,196,0.8); }
        html[data-theme="retro"] .modal-overlay { background: rgba(6,2,16,0.76); }
        html[data-theme="retro"] ::-webkit-scrollbar-thumb { background: #3A2564; }
        html[data-theme="retro"] .theme-wipe { display: none; }
        [data-theme="retro"] .boot-splash { background: radial-gradient(70% 48% at 50% 16%, #3B1060, #1A0838 46%, #0F0524 76%); }

        /* ════════════════════════════════════════════════════════════════
         *  23) الزجاج المعشّق (VITRAIL) — جواهر ملوّنة بإطار رصاصي — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        @keyframes vitrailSweep { 0% { background-position: 220% center; } 100% { background-position: -120% center; } }
        html[data-theme="vitrail"] body {
            --bg-main: #0E0B14; --bg-white: #191424; --bg-card: rgba(25,20,36,0.92);
            --text-dark: #F2EDF8; --text-body: #B8ACC8; --text-muted: #746A86;
            --border-light: rgba(200,180,230,0.2); --border-soft: rgba(200,180,230,0.1);
        }
        html[data-theme="vitrail"] body::before {
            background:
                radial-gradient(34% 26% at 16% 10%, rgba(196,42,72,0.16), transparent 70%),
                radial-gradient(30% 24% at 84% 16%, rgba(36,96,196,0.16), transparent 70%),
                radial-gradient(32% 26% at 74% 86%, rgba(24,150,96,0.13), transparent 70%),
                radial-gradient(28% 22% at 18% 84%, rgba(196,150,26,0.12), transparent 70%),
                linear-gradient(180deg, #131020, #0B0912);
            animation: none;
        }
        html[data-theme="vitrail"] .bg-orb { opacity: 0.35; filter: blur(120px) saturate(1.6); }
        html[data-theme="vitrail"] .card,
        html[data-theme="vitrail"] .stat-card,
        html[data-theme="vitrail"] .auth-card,
        html[data-theme="vitrail"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(#1D1730, #140F22) padding-box,
                        conic-gradient(from 140deg, #7E2438, #24457E 24%, #1E6E4A 50%, #7E5E1C 74%, #58247E 92%, #7E2438) border-box;
            border: 2px solid transparent;
            box-shadow: 0 0 0 1px #08060E, 0 22px 48px -22px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(230,215,250,0.07), inset 0 1px 0 rgba(255,255,255,0.06);
        }
        html[data-theme="vitrail"] .card::after {
            left: 0; right: 0; height: 100%; opacity: 0.4; border-radius: inherit; pointer-events: none;
            background: linear-gradient(115deg, transparent 36%, rgba(235,225,255,0.16) 50%, transparent 64%);
            background-size: 300% 100%; animation: vitrailSweep 9s linear infinite;
        }
        html[data-theme="vitrail"] .stat-card > *, html[data-theme="vitrail"] .card > * { position: relative; z-index: 1; }
        html[data-theme="vitrail"] .sidebar,
        html[data-theme="vitrail"] .portal-dock,
        html[data-theme="vitrail"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(#1B152C, #110D1E) padding-box,
                        conic-gradient(from 200deg, #7E2438, #24457E 26%, #1E6E4A 52%, #7E5E1C 76%, #7E2438) border-box;
            border: 2px solid transparent;
            box-shadow: 0 0 0 1px #08060E, 0 24px 50px -22px rgba(0,0,0,0.9);
        }
        html[data-theme="vitrail"] .sidebar-brand-title {
            background: linear-gradient(105deg, #E06A84 0%, #7FA4E8 28%, #7CD8AC 52%, #E8C46A 74%, #C08AE8 92%, #E06A84 100%);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 8s linear infinite;
        }
        html[data-theme="vitrail"] .sidebar-brand-icon { background: linear-gradient(150deg, #2A2240, #171226); box-shadow: 0 0 0 1.5px rgba(200,180,230,0.3), 0 12px 26px -12px rgba(0,0,0,0.9); }
        html[data-theme="vitrail"] .nav-link.active { background: rgba(200,180,230,0.09); box-shadow: inset 0 0 0 1px rgba(200,180,230,0.35); }
        html[data-theme="vitrail"] .btn { border: 1px solid rgba(230,215,250,0.16); box-shadow: 0 14px 28px -12px var(--primary), inset 0 1px 0 rgba(255,255,255,0.22); }
        html[data-theme="vitrail"] .btn-outline { background: rgba(25,20,36,0.75); border: 1.5px solid rgba(200,180,230,0.35); color: #E4DAF2; }
        html[data-theme="vitrail"] .input,
        html[data-theme="vitrail"] .select,
        html[data-theme="vitrail"] textarea.input { background: rgba(9,7,15,0.7); border: 1px solid rgba(200,180,230,0.24); color: var(--text-dark); box-shadow: inset 0 2px 6px rgba(0,0,0,0.55); }
        html[data-theme="vitrail"] .input::placeholder { color: #665C7A; }
        html[data-theme="vitrail"] .select option { background: #191424; color: #F2EDF8; }
        html[data-theme="vitrail"] table.data-table th { color: #C8B4E6; border-bottom-color: rgba(200,180,230,0.24); }
        html[data-theme="vitrail"] table.data-table tbody tr:hover { background: rgba(200,180,230,0.05); }
        html[data-theme="vitrail"] .dock-tab.active { background: rgba(200,180,230,0.1); box-shadow: inset 0 0 0 1px rgba(200,180,230,0.35); }
        html[data-theme="vitrail"] .skin-card, html[data-theme="vitrail"] .dsn-card { background: #191424; border-color: rgba(200,180,230,0.2); }
        html[data-theme="vitrail"] .skin-card.active, html[data-theme="vitrail"] .dsn-card.active { border-color: #C8B4E6; box-shadow: 0 0 0 2px rgba(200,180,230,0.28), 0 14px 30px -16px rgba(0,0,0,0.8); }
        html[data-theme="vitrail"] .modal-overlay { background: rgba(4,3,8,0.76); }
        html[data-theme="vitrail"] ::-webkit-scrollbar-thumb { background: #322A46; }
        html[data-theme="vitrail"] .theme-wipe { display: none; }
        [data-theme="vitrail"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #1A1424, #0E0B14 62%); }

        /* ════════════════════════════════════════════════════════════════
         *  24) الكسوف الذهبي (ECLIPSE) — هالة ذهبية حول ليل مطلق — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        @keyframes eclipseBreathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
        html[data-theme="eclipse"] body {
            --bg-main: #050308; --bg-white: #100C14; --bg-card: rgba(16,12,20,0.94);
            --text-dark: #F4EFE6; --text-body: #B4AB9C; --text-muted: #6E675C;
            --border-light: rgba(232,180,74,0.3); --border-soft: rgba(232,180,74,0.13);
        }
        html[data-theme="eclipse"] body::before {
            background:
                radial-gradient(circle 300px at 50% 12%, transparent 0 138px, rgba(232,180,74,0.5) 148px, rgba(232,180,74,0.16) 168px, transparent 218px),
                radial-gradient(60% 42% at 50% 4%, rgba(120,86,20,0.2), transparent 66%),
                linear-gradient(180deg, #0A0710, #040207);
            animation: eclipseBreathe 7s ease-in-out infinite;
        }
        html[data-theme="eclipse"] .bg-orb { display: none; }
        html[data-theme="eclipse"] .card,
        html[data-theme="eclipse"] .stat-card,
        html[data-theme="eclipse"] .auth-card,
        html[data-theme="eclipse"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: radial-gradient(120% 100% at 50% -20%, #171119 0%, #0D0A11 55%);
            border: 1px solid rgba(232,180,74,0.42);
            box-shadow: 0 0 34px -16px rgba(232,180,74,0.45), 0 24px 50px -24px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,240,194,0.08);
        }
        html[data-theme="eclipse"] .card::after { height: 2px; opacity: 1; animation: none; background: linear-gradient(90deg, transparent, #E8B44A 35%, #FFF0C2 50%, #E8B44A 65%, transparent); }
        html[data-theme="eclipse"] .stat-card:hover { transform: translateY(-2px); box-shadow: 0 0 44px -14px rgba(232,180,74,0.65), 0 28px 54px -22px rgba(0,0,0,0.95); }
        html[data-theme="eclipse"] .sidebar,
        html[data-theme="eclipse"] .portal-dock,
        html[data-theme="eclipse"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: radial-gradient(140% 90% at 50% -30%, #151016 0%, #0B0810 60%);
            border: 1px solid rgba(232,180,74,0.38);
            box-shadow: 0 0 38px -18px rgba(232,180,74,0.4), 0 26px 52px -24px rgba(0,0,0,0.95);
        }
        html[data-theme="eclipse"] .sidebar-brand-title {
            background: linear-gradient(105deg, #8E5E0A, #E8B44A 34%, #FFF6DC 50%, #E8B44A 66%, #8E5E0A);
            background-size: 240% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 6.5s linear infinite;
        }
        html[data-theme="eclipse"] .sidebar-brand-icon { background: radial-gradient(circle at 50% 30%, #241A0C, #0D0A11 75%); box-shadow: 0 0 0 1.5px rgba(232,180,74,0.6), 0 0 22px -6px rgba(232,180,74,0.7); }
        html[data-theme="eclipse"] .nav-link.active { background: rgba(232,180,74,0.09); box-shadow: inset 0 0 0 1px rgba(232,180,74,0.45); }
        html[data-theme="eclipse"] .nav-link.active::before { content: ''; position: absolute; top: 20%; bottom: 20%; right: 0; width: 3px; border-radius: 4px; background: linear-gradient(180deg, #FFF0C2, #E8B44A, #8E5E0A); }
        html[data-theme="eclipse"] .btn { border: 1px solid rgba(232,180,74,0.28); box-shadow: 0 14px 28px -12px var(--primary), 0 0 24px -12px rgba(232,180,74,0.45), inset 0 1px 0 rgba(255,255,255,0.2); }
        html[data-theme="eclipse"] .btn-outline { background: rgba(16,12,20,0.8); border: 1.5px solid rgba(232,180,74,0.45); color: #F0DFAE; }
        html[data-theme="eclipse"] .input,
        html[data-theme="eclipse"] .select,
        html[data-theme="eclipse"] textarea.input { background: rgba(6,4,9,0.75); border: 1px solid rgba(232,180,74,0.26); color: var(--text-dark); box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); }
        html[data-theme="eclipse"] .input:focus, html[data-theme="eclipse"] .select:focus, html[data-theme="eclipse"] textarea.input:focus { border-color: #E8B44A; box-shadow: 0 0 0 3px rgba(232,180,74,0.15), 0 0 22px -10px rgba(232,180,74,0.6); }
        html[data-theme="eclipse"] .input::placeholder { color: #5E574C; }
        html[data-theme="eclipse"] .select option { background: #100C14; color: #F4EFE6; }
        html[data-theme="eclipse"] table.data-table th { color: #E8B44A; border-bottom-color: rgba(232,180,74,0.3); }
        html[data-theme="eclipse"] table.data-table tbody tr:hover { background: rgba(232,180,74,0.05); }
        html[data-theme="eclipse"] .dock-tab.active { background: rgba(232,180,74,0.1); box-shadow: inset 0 0 0 1px rgba(232,180,74,0.45); }
        html[data-theme="eclipse"] .skin-card, html[data-theme="eclipse"] .dsn-card { background: #100C14; border-color: rgba(232,180,74,0.24); }
        html[data-theme="eclipse"] .skin-card.active, html[data-theme="eclipse"] .dsn-card.active { border-color: #E8B44A; box-shadow: 0 0 0 2px rgba(232,180,74,0.3), 0 0 30px -12px rgba(232,180,74,0.7); }
        html[data-theme="eclipse"] .modal-overlay { background: rgba(2,1,4,0.8); }
        html[data-theme="eclipse"] ::-webkit-scrollbar-thumb { background: #2C2418; }
        html[data-theme="eclipse"] .theme-wipe { display: none; }
        [data-theme="eclipse"] .boot-splash { background: radial-gradient(circle at 50% 30%, #1A1206, #050308 58%); }

        /* ════════════════════════════════════════════════════════════════
         *  25) الذهب السائل (AURUM) — ذهب منصهر يجري على حواف الليل — ليلي دائماً
         * ════════════════════════════════════════════════════════════════ */
        @keyframes aurumFlow { 0% { background-position: 0% 50%, 0 0; } 100% { background-position: 300% 50%, 0 0; } }
        @keyframes aurumSweep { 0% { background-position: 240% center; } 100% { background-position: -140% center; } }
        html[data-theme="aurum"] body {
            --bg-main: #0B0906; --bg-white: #16110A; --bg-card: rgba(22,17,10,0.94);
            --text-dark: #F8F1E2; --text-body: #C4B69C; --text-muted: #7E7258;
            --border-light: rgba(232,180,74,0.34); --border-soft: rgba(232,180,74,0.14);
            --gold-soft: rgba(232,180,74,0.16);
        }
        html[data-theme="aurum"] body::before {
            background:
                radial-gradient(46% 34% at 78% 0%, rgba(216,155,38,0.24), transparent 66%),
                radial-gradient(40% 30% at 8% 22%, rgba(142,94,10,0.2), transparent 68%),
                radial-gradient(50% 36% at 50% 108%, rgba(120,76,10,0.16), transparent 70%),
                linear-gradient(180deg, #120D07, #080604);
            animation: none;
        }
        html[data-theme="aurum"] .bg-orb { opacity: 0.35; filter: blur(120px) sepia(1) saturate(2.4) hue-rotate(-14deg); }
        html[data-theme="aurum"] .card,
        html[data-theme="aurum"] .stat-card,
        html[data-theme="aurum"] .auth-card,
        html[data-theme="aurum"] .modal-box {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(#171208, #100C06) padding-box,
                        linear-gradient(140deg, #8E5E0A, #E8B44A 30%, #FFF0C2 46%, #C9962E 62%, #6E4A08 82%, #E8B44A) border-box;
            background-size: 100% 100%, 300% 100%;
            border: 1.5px solid transparent;
            animation: aurumFlow 8s linear infinite;
            box-shadow: 0 0 36px -18px rgba(232,180,74,0.5), 0 24px 50px -24px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,240,194,0.1);
        }
        html[data-theme="aurum"] .card::after {
            left: 0; right: 0; height: 100%; opacity: 0.5; border-radius: inherit; pointer-events: none;
            background: linear-gradient(115deg, transparent 36%, rgba(255,240,194,0.14) 50%, transparent 64%);
            background-size: 300% 100%; animation: aurumSweep 6.5s linear infinite;
        }
        html[data-theme="aurum"] .stat-card > *, html[data-theme="aurum"] .card > * { position: relative; z-index: 1; }
        html[data-theme="aurum"] .stat-card:hover { transform: translateY(-2px); box-shadow: 0 0 48px -14px rgba(232,180,74,0.75), 0 28px 56px -22px rgba(0,0,0,0.95); }
        html[data-theme="aurum"] .sidebar,
        html[data-theme="aurum"] .portal-dock,
        html[data-theme="aurum"] .mobile-topbar {
            backdrop-filter: none; -webkit-backdrop-filter: none;
            background: linear-gradient(#150F07, #0D0905) padding-box,
                        linear-gradient(165deg, #8E5E0A, #E8B44A 32%, #FFF0C2 48%, #C9962E 66%, #8E5E0A) border-box;
            border: 1.5px solid transparent;
            box-shadow: 0 0 40px -18px rgba(232,180,74,0.45), 0 26px 54px -24px rgba(0,0,0,0.95);
        }
        html[data-theme="aurum"] .sidebar-brand-title {
            background: linear-gradient(105deg, #8E5E0A 0%, #D89B26 24%, #FFF6DC 44%, #E8B44A 60%, #FFF0C2 76%, #8E5E0A 100%);
            background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; animation: shimmer 5s linear infinite;
        }
        html[data-theme="aurum"] .sidebar-brand-icon { background: var(--gold-metal); background-size: 220% auto; animation: shimmer 6s linear infinite; box-shadow: 0 0 26px -6px rgba(232,180,74,0.8), inset 0 1.5px 0 rgba(255,255,255,0.5); }
        html[data-theme="aurum"] .nav-link.active { background: rgba(232,180,74,0.1); box-shadow: inset 0 0 0 1px rgba(232,180,74,0.5); color: #FFE9A8; }
        html[data-theme="aurum"] .nav-link.active::before { content: ''; position: absolute; top: 18%; bottom: 18%; right: 0; width: 3px; border-radius: 4px; background: linear-gradient(180deg, #FFF0C2, #E8B44A 50%, #8E5E0A); box-shadow: 0 0 12px rgba(232,180,74,0.8); }
        html[data-theme="aurum"] .btn { border: 1px solid rgba(232,180,74,0.32); box-shadow: 0 14px 28px -12px var(--primary), 0 0 26px -10px rgba(232,180,74,0.5), inset 0 1px 0 rgba(255,255,255,0.22); }
        html[data-theme="aurum"] .btn-outline { background: linear-gradient(180deg, #241B0E, #14100A); border: 1.5px solid rgba(232,180,74,0.5); color: #F0DFAE; box-shadow: inset 0 1px 0 rgba(255,240,194,0.12), 0 10px 20px -12px rgba(0,0,0,0.8); }
        html[data-theme="aurum"] .btn-ghost { border-color: rgba(232,180,74,0.24); color: #B0A488; }
        html[data-theme="aurum"] .input,
        html[data-theme="aurum"] .select,
        html[data-theme="aurum"] textarea.input { background: rgba(8,6,4,0.75); border: 1px solid rgba(232,180,74,0.3); color: var(--text-dark); box-shadow: inset 0 2px 6px rgba(0,0,0,0.6); }
        html[data-theme="aurum"] .input:focus, html[data-theme="aurum"] .select:focus, html[data-theme="aurum"] textarea.input:focus { border-color: #E8B44A; box-shadow: 0 0 0 3px rgba(232,180,74,0.16), 0 0 24px -10px rgba(232,180,74,0.7); }
        html[data-theme="aurum"] .input::placeholder { color: #6E6350; }
        html[data-theme="aurum"] .select option { background: #16110A; color: #F8F1E2; }
        html[data-theme="aurum"] table.data-table th { color: #E8B44A; border-bottom-color: rgba(232,180,74,0.34); }
        html[data-theme="aurum"] table.data-table tbody tr:hover { background: rgba(232,180,74,0.055); }
        html[data-theme="aurum"] .dock-tab.active { background: rgba(232,180,74,0.11); box-shadow: inset 0 0 0 1px rgba(232,180,74,0.5); }
        html[data-theme="aurum"] .skin-card, html[data-theme="aurum"] .dsn-card { background: #16110A; border-color: rgba(232,180,74,0.26); }
        html[data-theme="aurum"] .skin-card.active, html[data-theme="aurum"] .dsn-card.active { border-color: #E8B44A; box-shadow: 0 0 0 2px rgba(232,180,74,0.32), 0 0 32px -12px rgba(232,180,74,0.8); }
        html[data-theme="aurum"] .modal-overlay { background: rgba(4,3,1,0.78); }
        html[data-theme="aurum"] ::-webkit-scrollbar-thumb { background: #3A2E18; }
        html[data-theme="aurum"] .theme-wipe { display: none; }
        [data-theme="aurum"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #201607, #0B0906 65%); }
        [data-theme="aurum"] .boot-logo-ring { border-color: rgba(232,180,74,0.55); box-shadow: 0 0 44px -12px rgba(232,180,74,0.7), inset 0 0 0 1px rgba(255,240,194,0.1); }

        /* ═══ شاشة الافتتاح (Boot Splash) — الخلفية تتبدّل مع كل نمط تصميم ═══ */
        .boot-splash {
            position: fixed; inset: 0; z-index: 6000;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; visibility: hidden; pointer-events: none;
            background: linear-gradient(165deg, #F8F6FF 0%, #EFEBFA 55%, #E6E1F5 100%);
            transition: opacity .72s ease, visibility .72s ease;
        }
        .boot-splash.show { opacity: 1; visibility: visible; pointer-events: all; }
        .boot-splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
        .boot-inner { display: flex; flex-direction: column; align-items: center; gap: 13px; transform: translateY(-4vh); }
        .boot-logo-ring {
            width: 110px; height: 110px; border-radius: 30px; display: grid; place-items: center;
            background: rgba(255,255,255,0.62); border: 1px solid rgba(120,86,20,0.28);
            box-shadow: 0 20px 48px -18px rgba(23,16,46,0.4), inset 0 0 0 1px rgba(255,255,255,0.55);
            animation: bootPop .85s cubic-bezier(.22,1.25,.36,1) both;
        }
        .boot-logo { width: 84px; height: 84px; border-radius: 22px; object-fit: cover; }
        .boot-name {
            font-size: 27px; font-weight: 800; letter-spacing: .3px;
            background: linear-gradient(105deg, #8E5E0A, #E8B44A 40%, #FFF0C2 55%, #C9962E 70%, #8E5E0A);
            background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
            animation: shimmer 3.4s linear infinite;
        }
        .boot-sub { font-size: 10.5px; font-weight: 700; letter-spacing: 5px; color: var(--text-dim); }
        .boot-bar { width: 150px; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(23,16,46,0.12); margin-top: 9px; }
        .boot-bar span { display: block; height: 100%; width: 42%; border-radius: 4px; background: linear-gradient(90deg, #C9962E, #FFE9A8, #C9962E); animation: bootSlide 1.1s ease-in-out infinite alternate; }
        .boot-foot { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); font-size: 10.5px; color: var(--text-dim); opacity: .82; }
        html.dark .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #191233 0%, #0D0A1C 60%, #080614 100%); }
        html.dark .boot-logo-ring { background: rgba(255,255,255,0.05); border-color: rgba(212,168,80,0.35); box-shadow: 0 24px 56px -18px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.06); }
        html.dark .boot-bar { background: rgba(255,255,255,0.1); }
        @keyframes bootPop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        @keyframes bootSlide { from { transform: translateX(155%); } to { transform: translateX(-155%); } }
        /* خلفية الشاشة حسب الأنماط الحالية */
        [data-theme="aurora"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #241A4A, #150F2E 60%, #0B0722); }
        [data-theme="elite"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #2A1C4E, #1B1233 58%, #120B26); }
        [data-theme="neon"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #150F2E, #07060F 62%); }
        [data-theme="nebula"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #16163E, #060616 62%); }
        [data-theme="carbon"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #141920, #0A0D11 62%); }
        [data-theme="hud"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #0A1626, #040A12 62%); }
        [data-theme="neo"] .boot-splash { background: linear-gradient(160deg, #F4F2FB, #ECE9F5 70%); }
        [data-theme="minimal"] .boot-splash { background: #FFFFFF; }
        [data-theme="prism"] .boot-splash { background: linear-gradient(160deg, #FFFFFF, #F0F4FF 72%); }
        [data-theme="marble"] .boot-splash { background: linear-gradient(160deg, #FBF8F1, #F6F2E9 70%); }
        [data-theme="silk"] .boot-splash { background: linear-gradient(150deg, #FFF9F4, #FCEFE6 55%, #F4E8FA); }
        [data-theme="imperial"] .boot-splash { background: linear-gradient(160deg, #FAF4E6, #F5EEDD 60%, #EFE3C6); }
        html.dark[data-theme="neo"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #1D1730, #120E20 62%); }
        html.dark[data-theme="minimal"] .boot-splash { background: #101014; }
        html.dark[data-theme="prism"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #141A2E, #0B0E1A 62%); }
        html.dark[data-theme="marble"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #201A10, #161209 62%); }
        html.dark[data-theme="silk"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #241620, #1A1114 62%); }
        html.dark[data-theme="imperial"] .boot-splash { background: radial-gradient(120% 90% at 50% 0%, #281C46, #1C1430 62%); }

        /* ═══ حركة أقل عند طلب النظام (يشمل الأنماط الجديدة) ═══ */
        @media (prefers-reduced-motion: reduce) {
            html[data-theme="prism"] .card::after, html[data-theme="prism"] .stat-card::before,
            html[data-theme="silk"] .card::after, html[data-theme="silk"] .auth-card::after,
            html[data-theme="silk"] .stat-card::before,
            html[data-theme="hud"] .card::after,
            html[data-theme="nebula"] .card::after,
            html[data-theme="pearl"] body::before, html[data-theme="pearl"] .card::after,
            html[data-theme="holo"] .card::after,
            html[data-theme="vitrail"] .card::after,
            html[data-theme="eclipse"] body::before,
            html[data-theme="aurum"] .card, html[data-theme="aurum"] .stat-card,
            html[data-theme="aurum"] .auth-card, html[data-theme="aurum"] .modal-box,
            html[data-theme="aurum"] .card::after,
            .boot-splash *, .boot-splash { animation: none !important; }
        }

        /* ═══ وضع الأداء يتغلّب على كل الأنماط الثقيلة ═══ */
        html.lite[data-theme="neon"] .card, html.lite[data-theme="neon"] .stat-card,
        html.lite[data-theme="neon"] .modal-box, html.lite[data-theme="neon"] .auth-card { background: #0E0C1E !important; }
        html.lite[data-theme="neon"] .sidebar, html.lite[data-theme="neon"] .portal-dock,
        html.lite[data-theme="neon"] .mobile-topbar { background: #0A0816 !important; }
        html.lite[data-theme="neo"] .card, html.lite[data-theme="neo"] .stat-card { background: var(--bg-white) !important; }
        html.lite[data-theme="aurora"] .card, html.lite[data-theme="aurora"] .stat-card { background: var(--bg-white) !important; }
        html.lite[data-theme="prism"] .card, html.lite[data-theme="prism"] .stat-card,
        html.lite[data-theme="prism"] .modal-box, html.lite[data-theme="prism"] .auth-card { background: var(--bg-white) !important; border-color: var(--border-light) !important; }
        html.lite[data-theme="prism"] .card::after, html.lite[data-theme="prism"] .stat-card::before { animation: none !important; }
        html.lite[data-theme="nebula"] .card, html.lite[data-theme="nebula"] .stat-card,
        html.lite[data-theme="nebula"] .modal-box, html.lite[data-theme="nebula"] .auth-card { background: #0D0C24 !important; }
        html.lite[data-theme="nebula"] .sidebar, html.lite[data-theme="nebula"] .portal-dock,
        html.lite[data-theme="nebula"] .mobile-topbar { background: #0A0920 !important; }
        html.lite[data-theme="nebula"] body::before { background: #050514; }
        html.lite[data-theme="marble"] .card, html.lite[data-theme="marble"] .stat-card,
        html.lite[data-theme="marble"] .modal-box, html.lite[data-theme="marble"] .auth-card { background: var(--bg-white) !important; }
        html.lite[data-theme="marble"] body::before { background: #F5F1E8; }
        html.lite.dark[data-theme="marble"] body::before { background: #0D0B10; }
        html.lite[data-theme="silk"] .card::after, html.lite[data-theme="silk"] .auth-card::after,
        html.lite[data-theme="silk"] .stat-card::before { display: none !important; }
        html.lite[data-theme="silk"] .card, html.lite[data-theme="silk"] .stat-card,
        html.lite[data-theme="silk"] .modal-box, html.lite[data-theme="silk"] .auth-card { background: var(--bg-white) !important; }
        html.lite[data-theme="carbon"] .card, html.lite[data-theme="carbon"] .stat-card,
        html.lite[data-theme="carbon"] .modal-box, html.lite[data-theme="carbon"] .auth-card { background: #13161B !important; }
        html.lite[data-theme="carbon"] .sidebar, html.lite[data-theme="carbon"] .portal-dock,
        html.lite[data-theme="carbon"] .mobile-topbar { background: #0E1116 !important; }
        html.lite[data-theme="carbon"] body::before { background: #0A0C0F; }
        html.lite[data-theme="hud"] .card, html.lite[data-theme="hud"] .stat-card,
        html.lite[data-theme="hud"] .modal-box, html.lite[data-theme="hud"] .auth-card { background: #081321 !important; }
        html.lite[data-theme="hud"] .sidebar, html.lite[data-theme="hud"] .portal-dock,
        html.lite[data-theme="hud"] .mobile-topbar { background: #060F1A !important; }
        html.lite[data-theme="hud"] body::before { background: #040A12; }
        html.lite[data-theme="hud"] .card::after { animation: none !important; }
        html.lite[data-theme="imperial"] .card, html.lite[data-theme="imperial"] .stat-card,
        html.lite[data-theme="imperial"] .modal-box, html.lite[data-theme="imperial"] .auth-card { background: var(--bg-white) !important; }
        html.lite[data-theme="imperial"] body::before { background: #F5EFE1; }
        html.lite.dark[data-theme="imperial"] body::before { background: #110B1E; }

        html.lite[data-theme="porcelain"] .card, html.lite[data-theme="porcelain"] .stat-card,
        html.lite[data-theme="porcelain"] .modal-box, html.lite[data-theme="porcelain"] .auth-card { background: var(--bg-white) !important; }
        html.lite[data-theme="porcelain"] body::before { background: #F9F6EE; }
        html.lite.dark[data-theme="porcelain"] body::before { background: #14121B; }
        html.lite[data-theme="origami"] .card, html.lite[data-theme="origami"] .stat-card,
        html.lite[data-theme="origami"] .modal-box, html.lite[data-theme="origami"] .auth-card { background: var(--bg-white) !important; }
        html.lite[data-theme="origami"] body::before { background: #F6F5F0; }
        html.lite.dark[data-theme="origami"] body::before { background: #16151B; }
        html.lite[data-theme="pearl"] body::before, html.lite[data-theme="pearl"] .card::after { animation: none !important; }
        html.lite[data-theme="pearl"] .card::after { display: none !important; }
        html.lite[data-theme="pearl"] .card, html.lite[data-theme="pearl"] .stat-card,
        html.lite[data-theme="pearl"] .modal-box, html.lite[data-theme="pearl"] .auth-card { background: var(--bg-white) !important; border: 1px solid #E2DAE8 !important; }
        html.lite[data-theme="pearl"] body::before { background: #F7F5F8; }
        html.lite.dark[data-theme="pearl"] body::before { background: #131019; }
        html.lite.dark[data-theme="pearl"] .card, html.lite.dark[data-theme="pearl"] .stat-card,
        html.lite.dark[data-theme="pearl"] .modal-box, html.lite.dark[data-theme="pearl"] .auth-card { border-color: #3A3348 !important; }
        html.lite[data-theme="glacier"] .card, html.lite[data-theme="glacier"] .stat-card,
        html.lite[data-theme="glacier"] .modal-box, html.lite[data-theme="glacier"] .auth-card { background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
        html.lite[data-theme="glacier"] .sidebar, html.lite[data-theme="glacier"] .portal-dock,
        html.lite[data-theme="glacier"] .mobile-topbar { background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
        html.lite[data-theme="glacier"] body::before { background: #EBF4FA; }
        html.lite.dark[data-theme="glacier"] .card, html.lite.dark[data-theme="glacier"] .stat-card,
        html.lite.dark[data-theme="glacier"] .modal-box, html.lite.dark[data-theme="glacier"] .auth-card { background: #0F2033 !important; }
        html.lite.dark[data-theme="glacier"] .sidebar, html.lite.dark[data-theme="glacier"] .portal-dock,
        html.lite.dark[data-theme="glacier"] .mobile-topbar { background: #0C1A2A !important; }
        html.lite.dark[data-theme="glacier"] body::before { background: #071420; }
        html.lite[data-theme="sakura"] .card, html.lite[data-theme="sakura"] .stat-card,
        html.lite[data-theme="sakura"] .modal-box, html.lite[data-theme="sakura"] .auth-card { background: var(--bg-white) !important; }
        html.lite[data-theme="sakura"] body::before { background: #FAF3ED; }
        html.lite.dark[data-theme="sakura"] body::before { background: #17101A; }
        html.lite[data-theme="holo"] .card::after { display: none !important; }
        html.lite[data-theme="holo"] .card, html.lite[data-theme="holo"] .stat-card,
        html.lite[data-theme="holo"] .modal-box, html.lite[data-theme="holo"] .auth-card { background: var(--bg-white) !important; border: 1px solid #CBD2E0 !important; }
        html.lite[data-theme="holo"] body::before { background: #F0F1F6; }
        html.lite.dark[data-theme="holo"] body::before { background: #101218; }
        html.lite.dark[data-theme="holo"] .card, html.lite.dark[data-theme="holo"] .stat-card,
        html.lite.dark[data-theme="holo"] .modal-box, html.lite.dark[data-theme="holo"] .auth-card { border-color: #363C4C !important; }
        html.lite[data-theme="andalus"] .card, html.lite[data-theme="andalus"] .stat-card,
        html.lite[data-theme="andalus"] .modal-box, html.lite[data-theme="andalus"] .auth-card { background: var(--bg-white) !important; }
        html.lite[data-theme="andalus"] body::before { background: #F3EDDD; }
        html.lite.dark[data-theme="andalus"] body::before { background: #141026; }
        html.lite[data-theme="damascus"] .card, html.lite[data-theme="damascus"] .stat-card,
        html.lite[data-theme="damascus"] .modal-box, html.lite[data-theme="damascus"] .auth-card { background: #161C24 !important; }
        html.lite[data-theme="damascus"] .sidebar, html.lite[data-theme="damascus"] .portal-dock,
        html.lite[data-theme="damascus"] .mobile-topbar { background: #12171E !important; }
        html.lite[data-theme="damascus"] body::before { background: #0C1016; }
        html.lite[data-theme="retro"] .card, html.lite[data-theme="retro"] .stat-card,
        html.lite[data-theme="retro"] .modal-box, html.lite[data-theme="retro"] .auth-card { background: #1E0E40 !important; border: 1px solid rgba(255,86,196,0.45) !important; }
        html.lite[data-theme="retro"] .sidebar, html.lite[data-theme="retro"] .portal-dock,
        html.lite[data-theme="retro"] .mobile-topbar { background: #180B36 !important; border: 1px solid rgba(122,60,255,0.45) !important; }
        html.lite[data-theme="retro"] body::before { background: #0F0524; }
        html.lite[data-theme="vitrail"] .card::after { display: none !important; }
        html.lite[data-theme="vitrail"] .card, html.lite[data-theme="vitrail"] .stat-card,
        html.lite[data-theme="vitrail"] .modal-box, html.lite[data-theme="vitrail"] .auth-card { background: #1B1528 !important; border: 1px solid #3A3048 !important; }
        html.lite[data-theme="vitrail"] .sidebar, html.lite[data-theme="vitrail"] .portal-dock,
        html.lite[data-theme="vitrail"] .mobile-topbar { background: #171226 !important; border: 1px solid #352C42 !important; }
        html.lite[data-theme="vitrail"] body::before { background: #0E0B14; }
        html.lite[data-theme="eclipse"] body::before { animation: none !important; background: #070410; }
        html.lite[data-theme="eclipse"] .card, html.lite[data-theme="eclipse"] .stat-card,
        html.lite[data-theme="eclipse"] .modal-box, html.lite[data-theme="eclipse"] .auth-card { background: #110D16 !important; }
        html.lite[data-theme="eclipse"] .sidebar, html.lite[data-theme="eclipse"] .portal-dock,
        html.lite[data-theme="eclipse"] .mobile-topbar { background: #0E0A12 !important; }
        html.lite[data-theme="aurum"] .card, html.lite[data-theme="aurum"] .stat-card,
        html.lite[data-theme="aurum"] .modal-box, html.lite[data-theme="aurum"] .auth-card { background: #171208 !important; border: 1px solid rgba(201,150,46,0.55) !important; animation: none !important; }
        html.lite[data-theme="aurum"] .card::after { display: none !important; }
        html.lite[data-theme="aurum"] .sidebar, html.lite[data-theme="aurum"] .portal-dock,
        html.lite[data-theme="aurum"] .mobile-topbar { background: #130F07 !important; border: 1px solid rgba(201,150,46,0.5) !important; }
        html.lite[data-theme="aurum"] body::before { background: #0B0906; }


        /* ═══ وميض تأكيد تطبيق التصميم على كامل الشاشة ═══ */
        .dsn-flash {
            position: fixed; inset: 0; z-index: 4000; pointer-events: none;
            background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 62%);
            animation: dsnFlashKf 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
        }
        @keyframes dsnFlashKf {
            0%   { opacity: 0; transform: scale(0.85); }
            35%  { opacity: 1; }
            100% { opacity: 0; transform: scale(1.35); }
        }
        html.lite .dsn-flash { display: none; }
        @media (prefers-reduced-motion: reduce) { .dsn-flash { display: none; } }

        /* ═══ صفحة التصاميم والألوان ═══ */
        .dsn-hero {
            position: relative; overflow: hidden; border-radius: var(--radius-2xl);
            padding: 22px 24px; margin-bottom: 18px;
            background: linear-gradient(135deg, var(--primary-soft), transparent 70%), var(--bg-card);
            backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
            border: 1px solid rgba(255,255,255,0.85); box-shadow: var(--shadow-md);
        }
        html.dark .dsn-hero { background: linear-gradient(135deg, var(--primary-soft), transparent 70%), rgba(24,18,46,0.72); border-color: rgba(150,130,220,0.18); }
        .dsn-hero-title { font-family: var(--font-display); font-size: 21px; font-weight: 900; color: var(--text-dark); display: flex; align-items: center; gap: 9px; }
        .dsn-hero-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.85; margin-top: 6px; max-width: 640px; }

        .dsn-section-head {
            display: flex; align-items: center; gap: 9px; margin-bottom: 4px;
            font-weight: 800; font-size: 14px; color: var(--text-dark);
        }
        .dsn-section-head i { color: var(--primary); font-size: 18px; }
        .dsn-section-sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.8; margin-bottom: 14px; }

        /* شبكة أنماط التصميم — بطاقات فيها معاينة حيّة */
        .dsn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
        .dsn-card {
            position: relative; text-align: right; cursor: pointer; overflow: hidden;
            padding: 0; border-radius: var(--radius-lg); border: 1.5px solid var(--border-light);
            background: var(--bg-white); transition: transform 0.28s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.28s ease, border-color 0.28s ease;
            font-family: var(--font-body); display: flex; flex-direction: column;
        }
        .dsn-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary); }
        .dsn-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-md); }
        html.lite .dsn-card:hover { transform: none; }
        html.dark .dsn-card { background: rgba(24,18,46,0.6); }

        /* المعاينة الحيّة داخل البطاقة */
        .dsn-prev {
            height: 84px; position: relative; overflow: hidden; padding: 10px;
            display: flex; flex-direction: column; gap: 6px; justify-content: center;
            border-bottom: 1px solid var(--border-soft);
        }
        .dsn-prev-bar { height: 7px; border-radius: 4px; }
        .dsn-prev-chip { width: 26px; height: 26px; border-radius: 8px; position: absolute; top: 9px; left: 10px; }
        .dsn-card-body { padding: 10px 12px 12px; display: flex; align-items: center; gap: 8px; }
        .dsn-card-name { flex: 1; font-weight: 800; font-size: 12.5px; color: var(--text-dark); }
        .dsn-card-desc { font-size: 10.5px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
        .dsn-check { font-size: 17px; color: var(--success); opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.25s; }
        .dsn-card.active .dsn-check { opacity: 1; transform: scale(1); }

        /* معاينة: زجاج سائل */
        .dsn-prev.p-liquid { background: linear-gradient(135deg, #E4DAFF, #FFE4C2 50%, #D9E9FF); }
        .dsn-prev.p-liquid .dsn-prev-bar { background: rgba(255,255,255,0.75); backdrop-filter: blur(4px); box-shadow: 0 2px 6px -2px rgba(78,36,232,0.4); }
        .dsn-prev.p-liquid .dsn-prev-chip { background: rgba(255,255,255,0.8); box-shadow: 0 3px 8px -2px rgba(78,36,232,0.5); }
        /* معاينة: شفق */
        .dsn-prev.p-aurora { background: linear-gradient(135deg, #6C43FF, #E44FB0 55%, #F3C566); }
        .dsn-prev.p-aurora .dsn-prev-bar { background: rgba(255,255,255,0.55); }
        .dsn-prev.p-aurora .dsn-prev-chip { background: rgba(255,255,255,0.9); }
        /* معاينة: نيومورفيزم */
        .dsn-prev.p-neo { background: #ECE9F5; }
        .dsn-prev.p-neo .dsn-prev-bar { background: #ECE9F5; box-shadow: 3px 3px 6px rgba(23,16,46,0.14), -3px -3px 6px rgba(255,255,255,0.95); }
        .dsn-prev.p-neo .dsn-prev-chip { background: #ECE9F5; box-shadow: 4px 4px 8px rgba(23,16,46,0.16), -4px -4px 8px rgba(255,255,255,0.95); }
        /* معاينة: مسطّح */
        .dsn-prev.p-minimal { background: #FFFFFF; }
        .dsn-prev.p-minimal .dsn-prev-bar { background: #EFECF8; border: 1px solid #DDD7EE; }
        .dsn-prev.p-minimal .dsn-prev-chip { background: #6C43FF; border-radius: 6px; }
        /* معاينة: نخبة ذهبية */
        .dsn-prev.p-elite { background: linear-gradient(135deg, #1B1233, #2E1F52); }
        .dsn-prev.p-elite .dsn-prev-bar { background: linear-gradient(105deg, #9A6A10, #E8B44A 40%, #FFF0C2 60%, #8E5E0A); }
        .dsn-prev.p-elite .dsn-prev-chip { background: linear-gradient(140deg, #E8B44A, #FFF0C2); box-shadow: 0 0 10px -1px rgba(232,180,74,0.8); }
        /* معاينة: نيون */
        .dsn-prev.p-neon { background: #07060F; }
        .dsn-prev.p-neon .dsn-prev-bar { background: rgba(108,67,255,0.2); border: 1px solid #6C43FF; box-shadow: 0 0 10px -1px #6C43FF; }
        .dsn-prev.p-neon .dsn-prev-chip { background: rgba(228,79,176,0.25); border: 1px solid #E44FB0; box-shadow: 0 0 12px -1px #E44FB0; }
        /* معاينة: الكريستال الطيفي */
        .dsn-prev.p-prism { background: linear-gradient(135deg, #FDFCFF, #F0F4FF); }
        .dsn-prev.p-prism .dsn-prev-bar {
            border: 1.5px solid transparent;
            background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                        linear-gradient(90deg, #FF5E8A, #FFC163, #6BF0B4, #63C8FF, #A06BFF) border-box;
        }
        .dsn-prev.p-prism .dsn-prev-chip {
            border: 1.5px solid transparent;
            background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                        conic-gradient(#FF5E8A, #FFC163, #6BF0B4, #63C8FF, #A06BFF, #FF5E8A) border-box;
            box-shadow: 0 3px 10px -3px rgba(120,90,255,0.55);
        }
        /* معاينة: السديم الكوني */
        .dsn-prev.p-nebula {
            background:
                radial-gradient(1.3px 1.3px at 22% 28%, rgba(255,255,255,0.95) 50%, transparent 55%),
                radial-gradient(1px 1px at 72% 64%, rgba(255,255,255,0.7) 50%, transparent 55%),
                radial-gradient(1.5px 1.5px at 48% 82%, rgba(255,255,255,0.9) 50%, transparent 55%),
                radial-gradient(1px 1px at 88% 22%, rgba(226,216,255,0.75) 50%, transparent 55%),
                radial-gradient(circle at 76% 12%, #3A2158, transparent 58%),
                radial-gradient(circle at 16% 88%, #1E2B5E, transparent 58%),
                #060616;
        }
        .dsn-prev.p-nebula .dsn-prev-bar { background: rgba(139,104,255,0.22); border: 1px solid rgba(139,104,255,0.55); box-shadow: 0 0 12px -2px #8B68FF; }
        .dsn-prev.p-nebula .dsn-prev-chip { background: rgba(240,106,192,0.2); border: 1px solid rgba(240,106,192,0.6); box-shadow: 0 0 14px -2px #F06AC0; }
        /* معاينة: الرخام الملكي */
        .dsn-prev.p-marble {
            background:
                linear-gradient(112deg, transparent 43.5%, rgba(23,16,46,0.06) 44.2%, transparent 46%),
                linear-gradient(150deg, transparent 23.5%, rgba(176,124,32,0.1) 24.2%, transparent 26.5%),
                #F6F2E9;
        }
        .dsn-prev.p-marble .dsn-prev-bar { background: linear-gradient(105deg, #9A6A10, #E8B44A 40%, #FFF0C2 60%, #8E5E0A); }
        .dsn-prev.p-marble .dsn-prev-chip { background: #FFFFFF; border: 1px solid rgba(176,124,32,0.5); box-shadow: 0 3px 8px -2px rgba(120,86,20,0.4); }
        /* معاينة: المخمل الحريري */
        .dsn-prev.p-silk { background: linear-gradient(135deg, #FFF3EA, #F2E7FF); }
        .dsn-prev.p-silk .dsn-prev-bar {
            background: linear-gradient(115deg, #FFFFFF 28%, #F6E9F6 50%, #FFFFFF 72%);
            box-shadow: 0 4px 10px -4px rgba(108,67,255,0.45);
        }
        .dsn-prev.p-silk .dsn-prev-chip { background: linear-gradient(150deg, #FFFFFF, #F3E9FA); box-shadow: 0 6px 14px -4px rgba(108,67,255,0.5); }
        /* معاينة: ألياف الكربون */
        .dsn-prev.p-carbon {
            background:
                linear-gradient(27deg, #161A20 2.5px, transparent 2.5px) 0 2.5px,
                linear-gradient(207deg, #161A20 2.5px, transparent 2.5px) 5px 0,
                linear-gradient(27deg, #0F1216 2.5px, transparent 2.5px) 0 5px,
                linear-gradient(207deg, #0F1216 2.5px, transparent 2.5px) 5px 2.5px,
                #0C0F13;
            background-size: 10px 10px;
        }
        .dsn-prev.p-carbon .dsn-prev-bar { background: linear-gradient(90deg, #6C43FF, #B9A6FF 55%, #4E24E8); }
        .dsn-prev.p-carbon .dsn-prev-chip { background: linear-gradient(180deg, #39424E, #1C2128); border: 1px solid #46525F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
        /* معاينة: الواجهة المستقبلية */
        .dsn-prev.p-hud {
            background:
                repeating-linear-gradient(0deg, transparent 0 13px, rgba(108,67,255,0.18) 13px 14px),
                repeating-linear-gradient(90deg, transparent 0 13px, rgba(108,67,255,0.18) 13px 14px),
                #050D18;
        }
        .dsn-prev.p-hud .dsn-prev-bar { background: rgba(108,67,255,0.14); border: 1px solid #7C8FFF; box-shadow: 0 0 9px -2px #7C8FFF; }
        .dsn-prev.p-hud .dsn-prev-chip { background: transparent; border: 1.5px solid #7C8FFF; box-shadow: 0 0 12px -2px #7C8FFF, inset 0 0 8px -4px #7C8FFF; }
        /* معاينة: الديباج الإمبراطوري */
        .dsn-prev.p-imperial {
            background: radial-gradient(circle at 7px 7px, rgba(176,124,32,0.18) 1.2px, transparent 1.7px), #F5EEDD;
            background-size: 14px 14px;
        }
        .dsn-prev.p-imperial .dsn-prev-bar { background: linear-gradient(105deg, #9A6A10, #E8B44A 38%, #FFF0C2 58%, #8E5E0A); box-shadow: 0 0 0 1px rgba(176,124,32,0.3); }
        .dsn-prev.p-imperial .dsn-prev-chip { background: #2A1A4E; border: 1.5px solid #C99A2E; box-shadow: 0 3px 9px -3px rgba(120,86,20,0.55); }

        /* معاينة: البورسلين الملكي */
        .dsn-prev.p-porcelain { background: linear-gradient(178deg, #FFFFFF, #F5F1E7); border-bottom: 1px solid rgba(176,124,32,0.35); }
        .dsn-prev.p-porcelain .dsn-prev-bar { background: linear-gradient(90deg, #9A6A10, #E8B44A 42%, #FFF0C2 56%, #8E5E0A); }
        .dsn-prev.p-porcelain .dsn-prev-chip { background: linear-gradient(180deg, #FFFFFF, #F8F4EA); border: 1px solid rgba(176,124,32,0.45); box-shadow: inset 0 2px 0 rgba(255,255,255,0.95), 0 3px 8px -3px rgba(120,86,20,0.4); }
        /* معاينة: طيّات الأوريغامي */
        .dsn-prev.p-origami { background: linear-gradient(122deg, #FAF9F5 55%, #EFEDE5 55.4%); }
        .dsn-prev.p-origami .dsn-prev-bar { background: #FFFFFF; border: 1px solid #D8D4C8; box-shadow: 3px 3px 0 -1px rgba(23,16,46,0.12); }
        .dsn-prev.p-origami .dsn-prev-chip { background: #FFFFFF; border: 1px solid #D8D4C8; box-shadow: 3px 3px 0 -1px rgba(23,16,46,0.14); border-radius: 6px; }
        /* معاينة: اللؤلؤ المكنون */
        .dsn-prev.p-pearl { background: linear-gradient(115deg, #FDFDFB, #F3EFF6 35%, #EDF4F2 65%, #F6F1EC); }
        .dsn-prev.p-pearl .dsn-prev-bar { background: linear-gradient(130deg, #F3C6D8, #C9DCF4 35%, #C4EADF 65%, #F1E4C2); }
        .dsn-prev.p-pearl .dsn-prev-chip { background: #FFFFFF; border: 1.5px solid #E8D8EC; box-shadow: 0 4px 10px -4px rgba(140,120,160,0.5); }
        /* معاينة: الجليد القطبي */
        .dsn-prev.p-glacier { background: linear-gradient(180deg, #F2F8FD, #E2EEF9); }
        .dsn-prev.p-glacier .dsn-prev-bar { background: linear-gradient(90deg, #4FA7DE, #BFE6FF 45%, #FFFFFF 58%, #4FA7DE); }
        .dsn-prev.p-glacier .dsn-prev-chip { background: rgba(255,255,255,0.9); border: 1px solid #BFDCEF; box-shadow: 0 4px 10px -4px rgba(52,110,160,0.45), inset 0 1px 0 #FFFFFF; }
        /* معاينة: حديقة ساكورا */
        .dsn-prev.p-sakura {
            background: radial-gradient(circle at 9px 12px, rgba(232,120,150,0.3) 1.6px, transparent 2.4px), #FBF5EF;
            background-size: 30px 30px;
        }
        .dsn-prev.p-sakura .dsn-prev-bar { background: linear-gradient(90deg, #E87896, #F7C6D4 50%, #E87896); box-shadow: 0 0 0 1px #4A4048; }
        .dsn-prev.p-sakura .dsn-prev-chip { background: #FFFDFB; border: 1.5px solid #4A4048; box-shadow: 0 3px 0 -1px #4A4048; }
        /* معاينة: الكروم الهولوغرامي */
        .dsn-prev.p-holo { background: linear-gradient(165deg, #FDFDFE, #ECEEF4 60%, #F6F7FA); }
        .dsn-prev.p-holo .dsn-prev-bar { background: conic-gradient(from 200deg, #C7D6F5, #E8C7F0 25%, #C7F0DE 50%, #F5E6C0 75%, #C7D6F5); }
        .dsn-prev.p-holo .dsn-prev-chip { background: linear-gradient(165deg, #FFFFFF, #EDEFF5); border: 1.5px solid #C9D2E4; box-shadow: 0 4px 10px -4px rgba(80,90,120,0.5); }
        /* معاينة: قصر الأندلس */
        .dsn-prev.p-andalus {
            background:
                repeating-linear-gradient(45deg, transparent 0 7px, rgba(14,123,116,0.12) 7px 8px),
                repeating-linear-gradient(-45deg, transparent 0 7px, rgba(176,124,32,0.12) 7px 8px),
                #F4EEE0;
        }
        .dsn-prev.p-andalus .dsn-prev-bar { background: repeating-linear-gradient(90deg, #0E7B74 0 7px, #C9962E 7px 10px, #F4EEE0 10px 13px, #C9962E 13px 16px, #0E7B74 16px 23px); }
        .dsn-prev.p-andalus .dsn-prev-chip { background: #FEFBF2; border: 1.5px solid rgba(176,124,32,0.6); box-shadow: inset 0 0 0 2.5px rgba(14,123,116,0.35), 0 3px 8px -3px rgba(84,60,20,0.45); }
        /* معاينة: الفولاذ الدمشقي */
        .dsn-prev.p-damascus {
            background:
                repeating-radial-gradient(ellipse 160% 60% at 30% -20%, transparent 0 7px, rgba(200,215,235,0.07) 7px 8px),
                linear-gradient(180deg, #141920, #0B0E12);
        }
        .dsn-prev.p-damascus .dsn-prev-bar { background: linear-gradient(90deg, #8E5E0A, #E8B44A 42%, #FFF0C2 54%, #8E5E0A); }
        .dsn-prev.p-damascus .dsn-prev-chip { background: linear-gradient(172deg, #1B222B, #12161D); border: 1px solid rgba(201,150,46,0.6); box-shadow: 0 4px 10px -4px rgba(0,0,0,0.8); }
        /* معاينة: الموجة الليلية */
        .dsn-prev.p-retro {
            background:
                repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,86,196,0.2) 9px 10px),
                radial-gradient(70% 55% at 50% 0%, rgba(255,122,64,0.5), rgba(255,86,196,0.28) 45%, transparent 75%),
                #0F0524;
        }
        .dsn-prev.p-retro .dsn-prev-bar { background: linear-gradient(90deg, #FF56C4, #FFB25E 45%, #5EE1FF); box-shadow: 0 0 10px -2px #FF56C4; }
        .dsn-prev.p-retro .dsn-prev-chip { background: #1B0E38; border: 1.5px solid #FF56C4; box-shadow: 0 0 12px -3px #FF56C4; }
        /* معاينة: الزجاج المعشّق */
        .dsn-prev.p-vitrail {
            background:
                radial-gradient(40% 40% at 18% 20%, rgba(196,42,72,0.4), transparent 70%),
                radial-gradient(38% 38% at 82% 24%, rgba(36,96,196,0.4), transparent 70%),
                radial-gradient(40% 40% at 70% 82%, rgba(24,150,96,0.32), transparent 70%),
                #0E0B14;
        }
        .dsn-prev.p-vitrail .dsn-prev-bar { background: conic-gradient(from 140deg, #B0405A, #4A6EB0 25%, #3E9A70 50%, #B08A3E 75%, #B0405A); box-shadow: 0 0 0 1px #08060E; }
        .dsn-prev.p-vitrail .dsn-prev-chip { background: #1D1730; border: 2px solid #3A3048; box-shadow: 0 0 0 1px #08060E, 0 4px 10px -4px rgba(0,0,0,0.8); }
        /* معاينة: الكسوف الذهبي */
        .dsn-prev.p-eclipse {
            background:
                radial-gradient(circle 34px at 50% 34%, transparent 0 15px, rgba(232,180,74,0.75) 17px, rgba(232,180,74,0.2) 21px, transparent 28px),
                #050308;
        }
        .dsn-prev.p-eclipse .dsn-prev-bar { background: linear-gradient(90deg, transparent, #E8B44A 35%, #FFF0C2 50%, #E8B44A 65%, transparent); }
        .dsn-prev.p-eclipse .dsn-prev-chip { background: #100C14; border: 1px solid rgba(232,180,74,0.65); box-shadow: 0 0 14px -4px rgba(232,180,74,0.8); }
        /* معاينة: الذهب السائل */
        .dsn-prev.p-aurum {
            background:
                radial-gradient(50% 42% at 80% 0%, rgba(216,155,38,0.45), transparent 70%),
                radial-gradient(46% 38% at 10% 30%, rgba(142,94,10,0.35), transparent 72%),
                #0B0906;
        }
        .dsn-prev.p-aurum .dsn-prev-bar { background: linear-gradient(105deg, #8E5E0A, #E8B44A 30%, #FFF0C2 48%, #C9962E 66%, #8E5E0A); box-shadow: 0 0 10px -2px rgba(232,180,74,0.8); }
        .dsn-prev.p-aurum .dsn-prev-chip { background: linear-gradient(#171208, #100C06); border: 1.5px solid #C9962E; box-shadow: 0 0 14px -3px rgba(232,180,74,0.85); }


        /* مجموعة أزرار الاختيار (الزوايا / الكثافة) */
        .dsn-seg { display: flex; gap: 8px; flex-wrap: wrap; }
        .dsn-seg-btn {
            flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 7px;
            padding: 13px 10px; border-radius: var(--radius-md); cursor: pointer;
            border: 1.5px solid var(--border-light); background: var(--bg-white);
            font-family: var(--font-body); font-weight: 700; font-size: 12px; color: var(--text-body);
            transition: border-color 0.25s, color 0.25s, background-color 0.25s;
        }
        .dsn-seg-btn:hover { border-color: var(--primary); color: var(--text-dark); }
        .dsn-seg-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 800; }
        html.dark .dsn-seg-btn { background: rgba(24,18,46,0.6); }
        .dsn-seg-shape { width: 30px; height: 30px; background: var(--primary); opacity: 0.85; }
        .dsn-seg-shape.s-soft { border-radius: 9px; }
        .dsn-seg-shape.s-round { border-radius: 50%; }
        .dsn-seg-shape.s-sharp { border-radius: 2px; }
        .dsn-seg-rows { display: flex; flex-direction: column; width: 30px; }
        .dsn-seg-rows span { display: block; height: 3px; border-radius: 2px; background: var(--primary); opacity: 0.85; }
        .dsn-seg-rows.d-compact span { margin-bottom: 2px; }
        .dsn-seg-rows.d-cozy span { margin-bottom: 5px; }
        .dsn-seg-rows.d-roomy span { margin-bottom: 8px; }
        .dsn-seg-rows span:last-child { margin-bottom: 0; }

        /* شريط الحالة العلوي: ملخّص الاختيار الحالي */
        .dsn-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
        .dsn-sum-pill {
            display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 30px;
            background: var(--primary-soft); color: var(--primary); font-size: 11.5px; font-weight: 800;
        }
        .dsn-sum-pill i { font-size: 14px; }

        /* ═══ قوالب الإشعارات الجاهزة (Notification Templates) ═══ */
        .ntpl-grid { display: flex; flex-wrap: wrap; gap: 8px; }
        .ntpl-chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 13px; border-radius: 14px;
            border: 1px solid var(--border-light);
            background: var(--bg-white);
            color: var(--text-body);
            font-size: 12px; font-weight: 700; font-family: inherit;
            cursor: pointer; user-select: none;
            transition: border-color .2s, background .2s, color .2s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
            -webkit-tap-highlight-color: transparent;
        }
        .ntpl-chip .ntpl-ico { font-size: 14.5px; line-height: 1; }
        .ntpl-chip:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--text-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
        .ntpl-chip:active { transform: scale(.94); }
        .ntpl-chip.is-active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft), var(--shadow-sm); }

        @media (prefers-reduced-motion: reduce) {
            .page-view.active > .card, .page-view.active > .stats-grid > .stat-card,
            .page-view.active > .bento-grid > .stat-card,
            .page-view.active > .content-topbar, .ans-skel, .btn, .stat-card,
            .stg-in.stg-in, .wpop-box::before, .wpop-ico, .wpop-spark,
            .skin-card, .chat-attach-btn, .nav-link:hover > i, .dock-tab:hover > i { animation: none !important; transition: none !important; }
        }
    

        /* ════════ Bento Grid — لوحة التحكم (ترند 2025-2026): مربعات بأحجام مختلفة حسب أهمية البيانات ════════ */
        .bento-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(112px, auto);
            gap: 16px; margin-bottom: 18px;
        }
        /* البطاقة الأهم (مبيعات اليوم): عريضة ومرتفعة أكثر من البقية */
        .bento-hero { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
        .bento-hero .stat-icon-wrap { width: 54px; height: 54px; font-size: 25px; border-radius: 17px; }
        .bento-hero .stat-value { font-size: 36px; }
        .bento-hero .stat-label { font-size: 13.5px; }
        /* بطاقات متوسطة الأهمية (أرباح / ديون) */
        .bento-med { grid-column: span 2; }
        /* بطاقات أصغر (تفاصيل ثانوية) */
        .bento-sm { grid-column: span 2; }
        @media (min-width: 901px) {
            .bento-med { grid-column: span 1; }
            .bento-sm { grid-column: span 1; }
        }
        @media (max-width: 900px) {
            .bento-grid { grid-template-columns: repeat(2, 1fr); }
            .bento-hero { grid-column: span 2; grid-row: span 1; }
        }
        @media (max-width: 560px) {
            .bento-grid { grid-template-columns: 1fr; }
            .bento-hero, .bento-med, .bento-sm { grid-column: span 1; }
        }

        /* الصف الثاني: الرسم البياني (عريض) + ملخص الشهر (أضيق وأطول) بأسلوب بينتو أيضاً */
        .bento-grid-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; margin-bottom: 18px; }
        .bento-chart, .bento-month { margin-bottom: 0; }
        @media (max-width: 900px) { .bento-grid-2 { grid-template-columns: 1fr; } }
    

@media (max-width: 1000px) { .pos-grid-2col { grid-template-columns: 1fr !important; } }

        @media (max-width: 1100px) { .customers-grid { grid-template-columns: repeat(2,1fr) !important; } }
        @media (max-width: 700px) { .customers-grid { grid-template-columns: 1fr !important; } }
    

        @media (max-width: 1100px) { .inventory-grid { grid-template-columns: repeat(2,1fr) !important; } }
        @media (max-width: 700px) { .inventory-grid { grid-template-columns: 1fr !important; } }
    

        @media (max-width: 1100px) { .receipts-grid { grid-template-columns: repeat(2,1fr) !important; } }
        @media (max-width: 700px) { .receipts-grid { grid-template-columns: 1fr !important; } }
    

@media (max-width: 1000px) { .reports-grid-2col { grid-template-columns: 1fr !important; } }

@media (max-width: 800px) { .employees-grid { grid-template-columns: 1fr !important; } }

        /* ═══ أنماط خاصة ببوابة الزبائن ═══ */
        .portal-wrap { max-width: 520px; margin: 0 auto; padding: 18px 16px 110px; min-height: 100vh; min-height: 100dvh; position: relative; z-index: 1; }
        .portal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
        .portal-brand { display: flex; align-items: center; gap: 11px; }
        .portal-brand-icon {
            width: 44px; height: 44px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
            background: linear-gradient(140deg, #7A52FF 0%, #A66BF2 100%); font-size: 21px; color: #fff;
            box-shadow: 0 12px 22px -8px rgba(108,67,255,0.55), inset 0 1.5px 0 rgba(255,255,255,0.4);
        }
        .portal-brand-name { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--text-dark); }
        .portal-brand-sub { font-size: 10.5px; color: var(--text-muted); font-weight: 700; letter-spacing: 1px; }
        .portal-header-actions { display: flex; gap: 8px; }
        .portal-icon-btn {
            width: 42px; height: 42px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.9);
            background: rgba(255,255,255,0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            color: var(--text-body); font-size: 19px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; position: relative; box-shadow: var(--shadow-sm); transition: transform 0.2s;
        }
        .portal-icon-btn:active { transform: scale(0.93); }
        .portal-icon-btn .notif-dot {
            position: absolute; top: 8px; left: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px;
            background: var(--danger); color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 0 2px #fff;
        }

        /* بطاقة الدين البطولية */
        .debt-hero {
            border-radius: 26px; padding: 24px 22px; margin-bottom: 20px; position: relative; overflow: hidden;
            color: #fff; box-shadow: 0 24px 50px -16px rgba(108,67,255,0.55), inset 0 1.5px 0 rgba(255,255,255,0.35);
        }
        .debt-hero.has-debt { background: linear-gradient(140deg, #6C43FF 0%, #8B4FD8 55%, #C98A1B 130%); }
        .debt-hero.clear { background: linear-gradient(140deg, #0FA97A 0%, #14C08D 70%, #7ADFC0 130%); }
        .debt-hero::before {
            content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%;
            background: rgba(255,255,255,0.14); top: -90px; left: -70px; filter: blur(4px);
        }
        .debt-hero-label { font-size: 12.5px; font-weight: 700; opacity: 0.9; margin-bottom: 6px; }
        .debt-hero-amount { font-family: var(--font-display); font-size: 40px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
        .debt-hero-sub { font-size: 12px; opacity: 0.92; margin-top: 8px; font-weight: 600; }

        /* شريط التبويبات السفلي (دوك زجاجي) */
        .portal-dock {
            position: fixed; bottom: 14px; right: 50%; transform: translateX(50%); z-index: 900;
            display: flex; gap: 4px; padding: 8px;
            background: rgba(255,255,255,0.62); backdrop-filter: blur(28px) saturate(200%); -webkit-backdrop-filter: blur(28px) saturate(200%);
            border: 1px solid rgba(255,255,255,0.95); border-radius: 26px;
            box-shadow: 0 6px 14px rgba(23,16,46,0.08), 0 28px 56px -18px rgba(78,36,232,0.4), inset 0 1px 0 rgba(255,255,255,1);
            width: calc(100% - 32px); max-width: 488px;
        }
        .dock-tab {
            flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px;
            border-radius: 18px; border: none; background: transparent; cursor: pointer; color: var(--text-muted);
            font-family: var(--font-body); font-size: 10.5px; font-weight: 700; transition: color 0.25s, background-color 0.25s; position: relative;
        }
        .dock-tab i { font-size: 21px; transition: transform 0.25s; }
        .dock-tab.active {
            background: linear-gradient(140deg, rgba(108,67,255,0.16), rgba(232,180,74,0.12));
            color: var(--primary);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 12px -5px rgba(108,67,255,0.35);
        }
        .dock-tab.active i { transform: translateY(-2px) scale(1.08); }
        .dock-tab .dock-dot { position: absolute; top: 7px; left: 50%; margin-left: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px #fff; }

        .portal-tab-view { display: none; animation: pageFade 0.35s ease; }
        .portal-tab-view.active { display: block; }

        /* بطاقة رقم (بطاقة إنترنت مستلمة) */
        .card-number-item {
            display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 18px; margin-bottom: 11px;
            background: rgba(255,255,255,0.64); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
        }
        .card-number-item::after {
            content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px;
            background: var(--gold-metal); background-size: auto 200%;
        }
        .card-number-value { font-family: 'Courier New', monospace; font-size: 16.5px; font-weight: 800; color: var(--text-dark); letter-spacing: 1.5px; direction: ltr; text-align: left; flex: 1; word-break: break-all; }
        .copy-btn {
            width: 38px; height: 38px; border-radius: 12px; border: none; flex-shrink: 0;
            background: linear-gradient(140deg, #7A52FF, #A66BF2); color: #fff; font-size: 17px;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            box-shadow: 0 8px 16px -6px rgba(108,67,255,0.5), inset 0 1px 0 rgba(255,255,255,0.35);
            transition: transform 0.2s;
        }
        .copy-btn:active { transform: scale(0.9); }
        .copy-btn-sm { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; box-shadow: 0 5px 11px -5px rgba(108,67,255,0.5), inset 0 1px 0 rgba(255,255,255,0.35); }
        .cn-card { flex-direction: column; align-items: stretch; gap: 10px; }
        .cn-creds { display: flex; flex-direction: column; gap: 8px; }
        .cred-row { display: flex; align-items: center; gap: 9px; }
        .cred-label { font-size: 10.5px; font-weight: 800; color: var(--text-muted); min-width: 62px; flex-shrink: 0; }
        .cred-val { font-family: 'Courier New', monospace; font-size: 15px; font-weight: 800; color: var(--text-dark); letter-spacing: 0.6px; flex: 1; word-break: break-all; text-align: left; }
        .cn-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
        .cn-statuswrap { display: flex; align-items: center; gap: 8px; }
        .cn-badge { font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
        .cn-badge i { font-size: 11px; }
        .cn-badge-active { background: rgba(15,169,122,0.14); color: #0B8A63; }
        .cn-badge-idle { background: rgba(201,138,27,0.15); color: #A9740F; }
        .cn-badge-expired { background: rgba(229,72,77,0.14); color: #D3383C; }
        .cn-timer { font-family: 'Courier New', monospace; font-size: 12.5px; font-weight: 800; color: var(--primary); letter-spacing: 0.5px; direction: ltr; }
        .cn-meta { font-size: 10.5px; color: var(--text-muted); }
        .mk-login-btn {
            width: 100%; border: none; border-radius: 14px; padding: 12px; cursor: pointer;
            background: linear-gradient(120deg, #0B8A63 0%, #12C08C 35%, #3FE0AC 50%, #12C08C 65%, #0B8A63 100%);
            background-size: 240% auto;
            color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: 0.2px;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            box-shadow: 0 10px 22px -8px rgba(15,169,122,0.6), inset 0 1.5px 0 rgba(255,255,255,0.4), inset 0 -2px 5px rgba(6,80,55,0.35);
            transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), filter 0.15s, box-shadow 0.25s;
            animation: mkShimmer 5s linear infinite;
        }
        @keyframes mkShimmer { to { background-position: -240% center; } }
        .mk-login-btn i { transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }
        .mk-login-btn:hover:not(:disabled) {
            box-shadow: 0 14px 30px -8px rgba(15,169,122,0.75), inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 -2px 5px rgba(6,80,55,0.35), 0 0 0 3px rgba(18,192,140,0.16);
        }
        .mk-login-btn:hover:not(:disabled) i { transform: translateX(-3px); }
        .mk-login-btn:active { transform: scale(0.97); }
        .mk-login-btn.is-disabled, .mk-login-btn:disabled { background: linear-gradient(135deg, #9AA0A6, #B8BCC2); box-shadow: none; cursor: not-allowed; filter: grayscale(0.2); animation: none; }
        html.lite .mk-login-btn { animation: none; background-position: 0 center; }
        .cred-val.masked { letter-spacing: 3px; color: var(--text-muted); user-select: none; }
        .cn-lastused { font-size: 10px; color: var(--text-muted); text-align: center; margin-bottom: 6px; min-height: 13px; }
        .cn-lastused i { font-size: 11px; vertical-align: -1px; }

        /* بطاقة طريقة دفع */
        .pay-method-card {
            border-radius: 20px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden;
            background: rgba(255,255,255,0.66); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
            border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        .pay-method-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .pay-method-logo {
            width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
            font-size: 21px; color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.35), 0 10px 18px -8px rgba(23,16,46,0.3);
        }
        .pay-number-row {
            display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
            background: rgba(108,67,255,0.07); border: 1.5px dashed rgba(108,67,255,0.35);
        }
        .pay-number-value { font-family: var(--font-display); font-size: 21px; font-weight: 900; color: var(--text-dark); letter-spacing: 1px; direction: ltr; flex: 1; text-align: left; }

        /* بطاقة الرصيد البطولية */
        .balance-hero {
            border-radius: 26px; padding: 24px 22px; margin-bottom: 16px; position: relative; overflow: hidden;
            color: #fff; box-shadow: 0 24px 50px -16px rgba(15,169,122,0.5), inset 0 1.5px 0 rgba(255,255,255,0.35);
            background: linear-gradient(140deg, #0FA97A 0%, #14C08D 60%, #6C43FF 140%);
        }
        .balance-hero::before {
            content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%;
            background: rgba(255,255,255,0.14); top: -80px; left: -60px; filter: blur(4px);
        }
        .balance-hero-label { font-size: 12.5px; font-weight: 700; opacity: 0.92; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
        .balance-hero-amount { font-family: var(--font-display); font-size: 36px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
        .balance-hero-sub { font-size: 12px; opacity: 0.92; margin-top: 8px; font-weight: 600; }

        /* بطاقة فئة للشراء */
        .buy-card-tile {
            border-radius: 20px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden;
            background: rgba(255,255,255,0.66); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
            border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.95);
        }
        .buy-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .buy-card-icon {
            width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
            font-size: 21px; color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.35), 0 10px 18px -8px rgba(23,16,46,0.3);
        }
        .buy-card-price { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--text-dark); }
        .buy-card-stock { font-size: 11px; font-weight: 700; margin-top: 2px; }
        .buy-card-stock.ok { color: var(--success); }
        .buy-card-stock.low { color: var(--gold); }
        .buy-card-stock.out { color: var(--danger); }
        .buy-card-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
        .qty-stepper { display: flex; align-items: center; gap: 0; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--border-soft); }
        .qty-stepper button { width: 36px; height: 36px; border: none; background: rgba(108,67,255,0.08); color: var(--primary); font-size: 18px; font-weight: 900; cursor: pointer; }
        .qty-stepper input { width: 44px; height: 36px; border: none; text-align: center; font-weight: 800; font-size: 14px; background: transparent; }
        .buy-total-chip { font-size: 12.5px; font-weight: 800; color: var(--text-dark); background: rgba(108,67,255,0.08); padding: 6px 12px; border-radius: 10px; }

        /* شاشة الحجب حتى السداد */
        .lock-banner {
            border-radius: 22px; padding: 22px; margin-bottom: 20px; text-align: center;
            background: linear-gradient(140deg, rgba(229,72,77,0.1), rgba(240,86,92,0.05));
            border: 1.5px solid rgba(229,72,77,0.3);
        }
        .lock-banner i { font-size: 40px; color: var(--danger); margin-bottom: 10px; display: block; }

        /* شريحة الأوفلاين */
        .offline-chip {
            position: fixed; top: 14px; right: 50%; transform: translateX(50%); z-index: 950;
            display: none; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 30px;
            background: rgba(23,16,46,0.85); backdrop-filter: blur(10px); color: #fff; font-size: 12px; font-weight: 700;
            box-shadow: 0 10px 24px -8px rgba(23,16,46,0.5);
        }
        .offline-chip.show { display: inline-flex; }
        .offline-chip .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #F6CE77; animation: softPulse 1.6s ease infinite; }

        .receipt-preview-img { width: 100%; max-height: 190px; object-fit: cover; border-radius: 14px; margin-top: 10px; border: 1px solid var(--border-light); }
        .notif-item { display: flex; gap: 12px; padding: 14px; border-radius: 16px; margin-bottom: 10px; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.9); box-shadow: var(--shadow-sm); }
        .notif-item.unread { background: rgba(108,67,255,0.08); border-color: rgba(108,67,255,0.25); }
        .notif-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; background: linear-gradient(140deg, #7A52FF, #A66BF2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .portal-section-title { font-family: var(--font-display); font-weight: 900; font-size: 16px; color: var(--text-dark); margin: 20px 0 12px; display: flex; align-items: center; gap: 8px; }
        .portal-section-title i { color: var(--primary); }
        /* صفحة «حسابي» */
        .acc-avatar {
            width: 74px; height: 74px; margin: 0 auto; border-radius: 26px; display: flex; align-items: center; justify-content: center;
            font-family: var(--font-display); font-weight: 900; font-size: 30px; color: #fff;
            background: linear-gradient(140deg, var(--primary), var(--orchid));
            box-shadow: var(--shadow-glow), inset 0 1.5px 0 rgba(255,255,255,0.4);
        }
        .acc-no-chip {
            display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
            font-size: 11.5px; font-weight: 800; color: var(--primary); background: var(--primary-soft);
            padding: 4px 12px; border-radius: 999px;
        }
        .acc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px dashed var(--border-light); }
        .acc-row-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
        .acc-row-label i { color: var(--primary); font-size: 16px; }
        .acc-row-val { font-size: 13.5px; font-weight: 800; color: var(--text-dark); }
        .portal-brand-click { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s; }
        .portal-brand-click:active { opacity: 0.65; }

        .install-hint {
            display: none; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 16px; margin-bottom: 16px;
            background: rgba(232,180,74,0.12); border: 1px solid rgba(201,138,27,0.3); font-size: 12px; font-weight: 600; color: #6B4A08;
        }
        .install-hint.show { display: flex; }

        /* ═══ 👁️ شريط وضع المعاينة (مدير داخل بوابة زبون) ═══ */
        .impersonation-bar {
            position: sticky; top: 10px; z-index: 960; display: flex; align-items: center; gap: 10px;
            padding: 11px 14px; border-radius: 18px; margin-bottom: 16px;
            background: linear-gradient(120deg, rgba(232,180,74,0.22), rgba(201,138,27,0.12));
            border: 1.5px solid rgba(201,138,27,0.45);
            backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
            box-shadow: 0 14px 30px -12px rgba(201,138,27,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
        }
        .impersonation-bar .imp-eye { font-size: 21px; color: #A9740F; flex-shrink: 0; }
        .impersonation-bar .imp-txt { flex: 1; font-size: 11.5px; font-weight: 800; color: #6B4A08; line-height: 1.65; }
        html.dark .impersonation-bar .imp-txt { color: #F2D18B; }
        .imp-exit-btn {
            border: none; cursor: pointer; border-radius: 12px; padding: 9px 13px; flex-shrink: 0;
            font-family: var(--font-body); font-weight: 800; font-size: 11.5px; color: #3D2600;
            background: var(--gold-metal); background-size: 220% auto;
            box-shadow: 0 8px 18px -8px rgba(201,138,27,0.6), inset 0 1px 0 rgba(255,255,255,0.55);
            display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: transform 0.18s;
        }
        .imp-exit-btn:active { transform: scale(0.94); }

        /* ═══ 🔔 بوابة الإشعارات الإلزامية: لا دخول قبل السماح بالإشعارات ═══ */
        .notif-gate {
            position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center;
            padding: 22px; overflow-y: auto;
            background: rgba(23,16,46,0.55);
            backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
        }
        .notif-gate.show { display: flex; animation: pageFade 0.3s ease; }
        html.lite .notif-gate { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(23,16,46,0.82); }
        .notif-gate-box {
            width: 100%; max-width: 400px; border-radius: 28px; padding: 30px 24px; text-align: center;
            background: var(--bg-card, rgba(255,255,255,0.94)); border: 1px solid rgba(255,255,255,0.9);
            box-shadow: 0 34px 80px -22px rgba(23,16,46,0.55), inset 0 1.5px 0 rgba(255,255,255,0.95);
            position: relative; overflow: hidden;
        }
        .notif-gate-box::after { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2.5px; border-radius: 0 0 6px 6px; background: var(--gold-metal); background-size: 200% auto; animation: shimmer 5s linear infinite; }
        .notif-gate-box > * { position: relative; z-index: 1; }
        .notif-gate-icon {
            width: 86px; height: 86px; border-radius: 30px; margin: 0 auto 16px;
            display: flex; align-items: center; justify-content: center; font-size: 42px; color: #fff;
            background: linear-gradient(140deg, #7A52FF 0%, #A66BF2 100%);
            box-shadow: 0 22px 44px -14px rgba(108,67,255,0.65), inset 0 2px 0 rgba(255,255,255,0.4);
            animation: gateBell 2.8s ease infinite; transform-origin: top center;
        }
        @keyframes gateBell { 0%, 100% { transform: rotate(0); } 6% { transform: rotate(-13deg); } 12% { transform: rotate(10deg); } 18% { transform: rotate(-6deg); } 24% { transform: rotate(0); } }
        html.lite .notif-gate-icon, html.lite .notif-gate-box::after { animation: none; }
        .notif-gate-title { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--text-dark); margin-bottom: 8px; }
        .notif-gate-sub { font-size: 13px; color: var(--text-muted); line-height: 1.9; margin-bottom: 18px; font-weight: 600; }
        .notif-gate-steps {
            text-align: right; font-size: 12.5px; font-weight: 600; color: var(--text-body); line-height: 2.1;
            background: rgba(108,67,255,0.07); border: 1.5px dashed rgba(108,67,255,0.32); border-radius: 16px;
            padding: 12px 15px; margin-bottom: 16px;
        }
        .notif-gate-perks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
        .notif-gate-perk { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: var(--text-body); text-align: right; }
        .notif-gate-perk i { font-size: 17px; color: var(--primary); flex-shrink: 0; }
        .notif-gate-skip { display: inline-block; margin-top: 14px; font-size: 11px; color: var(--text-muted); text-decoration: underline; cursor: pointer; }

        /* ═══ 🎫 بطاقاتي — تصميم القسيمة المطوَّر ═══ */
        .mc-filters { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
        .mc-filters::-webkit-scrollbar { display: none; }
        .mc-chip {
            flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
            border: 1.5px solid var(--border-light);
            background: color-mix(in srgb, var(--text-dark) 6%, transparent); color: var(--text-body);
            font-family: var(--font-body); font-weight: 800; font-size: 11.5px; padding: 8px 13px; border-radius: 999px;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
        }
        .mc-chip b { font-size: 10px; background: rgba(108,67,255,0.12); color: var(--primary); border-radius: 8px; padding: 1px 7px; }
        .mc-chip.active {
            background: linear-gradient(140deg, #7A52FF, #A66BF2); border-color: transparent; color: #fff;
            box-shadow: 0 10px 20px -8px rgba(108,67,255,0.55), inset 0 1.5px 0 rgba(255,255,255,0.35);
        }
        .mc-chip.active b { background: rgba(255,255,255,0.25); color: #fff; }
        .cn-card::after { background: linear-gradient(180deg, var(--catstripe, #E8B44A), transparent 150%); }
        .cnx-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .cnx-head .cn-timer { margin-inline-start: auto; }
        .cnx-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
        .cn-prog { height: 7px; border-radius: 99px; background: rgba(108,67,255,0.1); overflow: hidden; box-shadow: inset 0 1px 2px rgba(23,16,46,0.08); }
        .cn-prog-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #14C08D, #7A52FF); transition: width 1s linear; box-shadow: 0 0 10px rgba(20,192,141,0.5); }
        .cnx-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
        .cnx-meta i { font-size: 11px; vertical-align: -1px; }
    

/* ════════════════════════════════════════════════════════════════
 *  مركز الإشعارات (Notification Center)
 * ════════════════════════════════════════════════════════════════ */
.field-label { display: block; font-size: 12.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 6px; }

.notif-row {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px; border-radius: var(--radius-lg);
    cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: rgba(108,67,255,0.06); }
.notif-row.unread { background: rgba(108,67,255,0.05); }
.notif-row.unread .notif-row-title { font-weight: 900; }

.notif-row-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; background: linear-gradient(140deg, var(--primary-dark, var(--primary)), var(--primary-light, var(--primary)));
    color: #fff; box-shadow: 0 6px 14px -6px rgba(108,67,255,0.5);
}
.notif-row-icon.prio-important { background: linear-gradient(140deg, #C98A1B, #E8B44A); box-shadow: 0 6px 14px -6px rgba(201,138,27,0.5); }
.notif-row-icon.prio-urgent { background: linear-gradient(140deg, #C0392B, #E5484D); box-shadow: 0 6px 14px -6px rgba(229,72,77,0.5); }

.notif-row-body { flex: 1; min-width: 0; }
.notif-row-title { font-size: 14px; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 6px; }
.notif-dot-inline { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); display: inline-block; flex-shrink: 0; }
.notif-row-snippet {
    font-size: 12.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.notif-chip {
    display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
    background: rgba(108,67,255,0.1); color: var(--primary);
}
.notif-chip.prio-important { background: rgba(201,138,27,0.14); color: var(--gold); }
.notif-chip.prio-urgent { background: rgba(229,72,77,0.14); color: var(--danger); }
.notif-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.notif-recipient-row {
    display: flex; align-items: center; justify-content: space-between; padding: 9px 4px; font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.notif-recipient-row:last-child { border-bottom: none; }
.notif-read-yes { color: #14C08D; font-weight: 800; font-size: 12px; }
.notif-read-no { color: var(--text-muted); font-weight: 700; font-size: 12px; }

.notif-cust-result { padding: 9px 10px; border-radius: var(--radius-md); cursor: pointer; font-size: 13px; transition: background-color 0.15s; }
.notif-cust-result:hover { background: rgba(108,67,255,0.08); }

.notif-setting-row {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; font-size: 13.5px;
    font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--border); cursor: pointer;
}
.notif-setting-row:last-of-type { border-bottom: none; }
.notif-setting-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }

html.dark .notif-row:hover, html.dark .notif-row.unread { background: rgba(139,104,255,0.1); }
html.dark .notif-row { border-bottom-color: var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
 *  طبقة الفخامة — كرت البطاقة، الشريط الجانبي، وترتيب الباقات
 *  تُكتب في نهاية الملف فتغلب ما قبلها بالكاسكيد دون رفع التخصيص.
 *  كل الألوان مشتقّة من متغيّرات الوضع، فتعمل في الفاتح والداكن معاً.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────── ① كرت البطاقة في بوابة الزبون ───────────── */
.cn-card {
    padding: 16px 17px 15px;
    border-radius: 22px;
    gap: 13px;
    border: 1px solid color-mix(in srgb, var(--catstripe, var(--primary)) 22%, transparent);
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--catstripe, var(--primary)) 9%, transparent) 0%,
            transparent 42%),
        var(--bg-card);
    box-shadow:
        0 1px 2px rgba(12, 8, 28, .05),
        0 18px 38px -22px color-mix(in srgb, var(--catstripe, var(--primary)) 55%, transparent);
}
/* الشريط الجانبي للفئة: يتلاشى بدل أن يكون خطاً صلباً */
.cn-card::after {
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(180deg,
        var(--catstripe, var(--primary)) 0%,
        color-mix(in srgb, var(--catstripe, var(--primary)) 35%, transparent) 55%,
        transparent 100%);
}
/* لمعة علوية خفيفة تعطي إحساس الزجاج */
.cn-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 42%;
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent);
    pointer-events: none;
}
html:not(.dark) .cn-card::before { background: linear-gradient(180deg, rgba(255,255,255,.55), transparent); }

.cnx-head { gap: 7px; }
.cnx-cat {
    font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
    padding: 4px 11px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
}
.cn-timer { font-size: 13.5px; letter-spacing: 1px; margin-inline-start: auto; }

/* لوح البيانات: مساحة غائرة تفصل السرّي عن باقي الكرت */
.cn-creds {
    gap: 7px;
    padding: 12px 13px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--text-dark) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-dark) 7%, transparent);
}
.cred-label { font-size: 10px; letter-spacing: .3px; min-width: 58px; }
.cred-val { font-size: 15.5px; letter-spacing: 1.2px; }
.cred-val.masked { letter-spacing: 3px; color: var(--text-muted); }

.cnx-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    font-size: 10.5px; font-weight: 700; color: var(--text-muted);
}
.cnx-meta i { font-size: 12px; opacity: .8; }

/* ───────────── ② الشريط الجانبي للإدارة — إعادة تصميم ─────────────
   الفكرة: كل أيقونة داخل «شريحة» مربّعة مستديرة، فتصير القائمة صفّاً من
   الرموز المرتّبة بدل نصوص متجاورة. العنصر النشط تتوهّج شريحته وتمتلئ
   بلون النظام، فيُعرف موضعك من نظرة واحدة.
   ───────────────────────────────────────────────────────────────── */
.sidebar { padding: 20px 12px; }

/* العلامة: مساحة أوسع وفاصل أنعم */
.sidebar-brand {
    padding: 2px 6px 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}
.sidebar-brand-icon { width: 44px; height: 44px; border-radius: 14px; }

/* عناوين الأقسام: حروف صغيرة هادئة مع خط يمتدّ لآخر الشريط */
.nav-section-label {
    display: flex; align-items: center; gap: 9px;
    font-size: 9.5px; font-weight: 900; letter-spacing: 1.5px;
    padding: 18px 8px 8px;
    color: color-mix(in srgb, var(--text-muted) 80%, transparent);
}
.nav-section-label::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border-soft), transparent);
}

/* الصفّ: شريحة أيقونة + نص */
.nav-link {
    gap: 11px;
    padding: 7px 9px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
}
.nav-link i {
    width: 34px; height: 34px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    background: color-mix(in srgb, var(--text-dark) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-dark) 12%, transparent);
    color: var(--text-muted);
    transition: background-color .2s var(--ans-ease-in, ease),
                border-color .2s var(--ans-ease-in, ease),
                color .2s var(--ans-ease-in, ease),
                box-shadow .2s var(--ans-ease-in, ease);
}

.nav-link:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.nav-link:hover i {
    background: color-mix(in srgb, var(--primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    color: var(--primary);
}

/* النشط: تدرّج خفيف عبر الصفّ + شريحة ممتلئة متوهّجة + شريط على الحافة */
.nav-link.active {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--primary) 14%, transparent),
        color-mix(in srgb, var(--primary) 3%, transparent));
    color: var(--text-dark);
    font-weight: 800;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}
.nav-link.active i {
    background: linear-gradient(140deg, var(--primary), var(--primary-light));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 16px -5px var(--primary), inset 0 1px 0 rgba(255,255,255,.35);
}
/* طبقة وضوح الأيقونات الداكنة أعلى تخصيصاً، فنؤكّد البياض على الشريحة الممتلئة */
html.dark body .nav-link.active i[class*="ph-"] { color: #fff; }
.nav-link.active::before {
    content: ''; position: absolute;
    inset-inline-start: -12px; top: 50%;
    width: 3px; height: 22px; margin-top: -11px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
    box-shadow: 0 0 12px -1px var(--primary);
}

/* الشارة: تجلس في آخر الصفّ بمحاذاة الشريحة */
.nav-link .nav-badge { align-self: center; }

/* شريط تمرير رفيع بدل العريض الذي كان يزاحم العناوين */
.nav-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 30%, transparent) transparent; }
.nav-scroll::-webkit-scrollbar { width: 4px; }
.nav-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    border-radius: 4px;
}
.nav-scroll::-webkit-scrollbar-track { background: transparent; }

/* التذييل: فاصل أنعم ومساحة أوضح */
.sidebar-footer { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 12px; }
.user-chip { border-radius: 14px; padding: 8px 9px; }

/* الكثافة المضغوطة تُصغّر الشريحة لا النص */
html[data-density="compact"] .nav-link { padding: 5px 8px; }
html[data-density="compact"] .nav-link i { width: 30px; height: 30px; font-size: 16px; border-radius: 10px; }

/* ───────────── ③ ترتيب الباقات بالسحب (صفحة المخزون) ───────────── */
.inv-drag {
    flex: 0 0 auto;
    width: 26px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0;
    cursor: grab; touch-action: none;
    color: var(--text-muted); font-size: 17px;
    border-radius: 8px;
    transition: background-color .18s, color .18s;
}
.inv-drag:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.inv-drag:active { cursor: grabbing; }

.inv-tile { transition: box-shadow .2s, opacity .2s; }
.inv-tile.is-dragging {
    position: relative; z-index: 20;
    cursor: grabbing;
    box-shadow: 0 22px 44px -16px rgba(12, 8, 28, .45);
}
.inventory-grid.is-reordering .inv-tile:not(.is-dragging) { opacity: .65; }

.inv-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.inv-count {
    text-align: center; padding: 12px 6px; border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.inv-count-n { font-family: var(--font-display); font-size: 25px; font-weight: 900; line-height: 1.1; }
.inv-count-l { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 3px; }
.inv-count.is-pool.ok   { background: color-mix(in srgb, #12B981 12%, transparent); }
.inv-count.is-pool.ok   .inv-count-n { color: #12B981; }
.inv-count.is-pool.low  { background: color-mix(in srgb, #D97706 14%, transparent); }
.inv-count.is-pool.low  .inv-count-n { color: #D97706; }
.inv-count.is-pool.out  { background: color-mix(in srgb, var(--danger) 13%, transparent); }
.inv-count.is-pool.out  .inv-count-n { color: var(--danger); }

/* ───────────── ④ كشف الحساب داخل بوابة الزبون ─────────────
   يبنى بلغة تصميم النظام: بطاقة رصيد بارزة، ثم إحصاءتان، ثم سطر
   زمني للحركات. كل الألوان مشتقّة فتعمل في الوضعين.
   ───────────────────────────────────────────────────────── */
.stm-hero {
    position: relative; overflow: hidden;
    border-radius: 22px; padding: 22px 20px;
    margin-bottom: 12px; text-align: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 55%, var(--orchid, var(--primary)) 100%);
    color: #fff;
    box-shadow: 0 20px 40px -20px var(--primary);
}
.stm-hero::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 88% 6%, rgba(255,255,255,.28), transparent 46%);
    pointer-events: none;
}
.stm-hero-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; opacity: .85; }
.stm-hero-val { font-family: var(--font-display); font-size: 33px; font-weight: 900; line-height: 1.15; margin-top: 4px; }
.stm-hero-sub { font-size: 11px; font-weight: 700; opacity: .85; margin-top: 5px; }

.stm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stm-stat {
    text-align: center; padding: 14px 8px; border-radius: 17px;
    background: var(--bg-card); border: 1px solid var(--border-soft);
}
.stm-stat i { font-size: 21px; display: block; margin-bottom: 4px; }
.stm-stat b { font-family: var(--font-display); font-size: 18px; font-weight: 900; display: block; color: var(--text-dark); }
.stm-stat span { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.stm-stat.in  i { color: var(--success, #12B981); }
.stm-stat.out i { color: var(--danger); }

.stm-list { display: flex; flex-direction: column; gap: 9px; }
.stm-item {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 14px; border-radius: 17px;
    background: var(--bg-card); border: 1px solid var(--border-soft);
}
.stm-ico {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stm-item.in  .stm-ico { background: color-mix(in srgb, var(--success, #12B981) 15%, transparent); color: var(--success, #12B981); }
.stm-item.out .stm-ico { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.stm-body { flex: 1; min-width: 0; }
.stm-title { font-size: 13.5px; font-weight: 800; color: var(--text-dark); }
.stm-note { font-size: 11.5px; color: var(--text-body); margin-top: 2px; word-break: break-word; }
.stm-time { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 3px; }
.stm-inv {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    font-size: 10.5px; font-weight: 800; text-decoration: none;
    color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 3px 9px; border-radius: 999px;
}
.stm-amt {
    flex: 0 0 auto; text-align: end;
    font-family: var(--font-display); font-size: 15px; font-weight: 900;
}
.stm-item.in  .stm-amt { color: var(--success, #12B981); }
.stm-item.out .stm-amt { color: var(--danger); }
.stm-after { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }

.stm-skel {
    height: 62px; border-radius: 17px; margin-bottom: 10px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-dark) 5%, transparent) 25%,
        color-mix(in srgb, var(--text-dark) 9%, transparent) 37%,
        color-mix(in srgb, var(--text-dark) 5%, transparent) 63%);
    background-size: 400% 100%;
    animation: ansShimmerStm 1.35s ease-in-out infinite;
}
@keyframes ansShimmerStm { from { background-position: 100% 0; } to { background-position: 0 0; } }
html.lite .stm-skel { animation: none; }

/* ───────────── ⑤ لمسة الأناقة النهائية ─────────────
   تفاصيل صغيرة تتراكم: عمق في سطح الشريط، حركة دقيقة عند اللمس،
   وحوافّ أنظف. لا شيء منها يُعيد رسم الصفحة (transform/opacity فقط).
   ───────────────────────────────────────────────── */

/* عمق ناعم في سطح الشريط الجانبي بدل اللون المسطّح */
.sidebar::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 7%, transparent) 0%,
        transparent 32%,
        color-mix(in srgb, var(--orchid, var(--primary)) 5%, transparent) 100%);
}
.sidebar > * { position: relative; z-index: 1; }

/* العلامة: هالة خفيفة تحت الشعار تعطيه ثقلاً */
.sidebar-brand-icon { position: relative; }
.sidebar-brand-icon::after {
    content: ''; position: absolute; inset: -6px; border-radius: inherit;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent), transparent 68%);
    z-index: -1; filter: blur(7px);
}

/* الصفّ يتقدّم قليلاً عند المرور — إحساس استجابة بلا إزاحة تخطيط */
.nav-link { transition: background-color .2s var(--ans-ease-in, ease), transform .16s var(--ans-ease-in, ease); }
.nav-link:hover { transform: translateX(-2px); }
html[dir="ltr"] .nav-link:hover { transform: translateX(2px); }
.nav-link.active:hover { transform: none; }

/* شريحة الأيقونة تكبر قليلاً عند المرور */
.nav-link:hover i { transform: scale(1.06); }
.nav-link i { transition: background-color .2s var(--ans-ease-in, ease), border-color .2s var(--ans-ease-in, ease), color .2s var(--ans-ease-in, ease), transform .18s var(--ans-spring, ease); }

/* البطاقات: ارتفاع لطيف عند المرور على الأجهزة التي تدعم التأشير */
@media (hover: hover) {
    .card[onclick]:hover, .stat-card:hover { transform: translateY(-2px); }
    .card[onclick], .stat-card { transition: transform .2s var(--ans-ease-in, ease), box-shadow .25s var(--ans-ease-in, ease); }
}

/* ملاحظة: لا تضع overflow:hidden على .table-wrap — هي حاوية التمرير
   الأفقي للجداول العريضة، وإخفاء الفائض يقتل التمرير جانبياً. */

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .nav-link:hover, .nav-link:hover i,
    .card[onclick]:hover, .stat-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ⑥ بوابة الزبون — طبقة الأناقة
 *  الزبون لا يرى إلا هذه الشاشة، فهي واجهة المتجر كلها. الهدف: إحساس
 *  تطبيق أصلي مصقول — عمق متدرّج، حواف زجاجية، وحركة دقيقة عند اللمس.
 *  كل الألوان مشتقّة من رموز الوضع فتعمل في الفاتح والداكن معاً.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───── بطاقة الرصيد: القطعة الأولى التي تقع عليها العين ───── */
.balance-hero {
    border-radius: 28px;
    padding: 26px 22px;
    background:
        /* حجاب داكن خفيف يضمن قراءة الرقم فوق أي نقطة من التدرّج */
        linear-gradient(155deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 55%, rgba(0,0,0,.36) 100%),
        radial-gradient(120% 90% at 88% 0%, rgba(255,255,255,.10), transparent 52%),
        linear-gradient(140deg, #03301F 0%, #05583A 42%, #1A3295 92%, #2C1583 130%);
    box-shadow:
        0 26px 54px -18px color-mix(in srgb, #0A8A62 55%, transparent),
        inset 0 1.5px 0 rgba(255,255,255,.4),
        inset 0 -18px 34px -20px rgba(0,0,0,.35);
}
/* هالة تدور ببطء خلف الرقم فتعطي البطاقة حياة بلا ضجيج */
.balance-hero::before {
    width: 260px; height: 260px;
    top: -110px; left: -70px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%);
    filter: blur(12px);
    animation: ansHeroFloat 9s ease-in-out infinite;
}
@keyframes ansHeroFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(18px, 14px) scale(1.08); }
}
html.lite .balance-hero::before { animation: none; }

/* لمعة تمرّ مرة واحدة عند فتح التبويب */
.balance-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.20) 48%, transparent 60%);
    transform: translateX(-130%);
    animation: ansHeroSheen 2.6s var(--ans-ease, cubic-bezier(.22,1,.36,1)) .35s 1 forwards;
    pointer-events: none;
}
@keyframes ansHeroSheen { to { transform: translateX(130%); } }
html.lite .balance-hero::after { display: none; }

.balance-hero-label { font-size: 12px; letter-spacing: .3px; opacity: .9; }
.balance-hero-amount { font-size: 40px; letter-spacing: -.5px; text-shadow: 0 2px 14px rgba(0,0,0,.18); }
.balance-hero-sub { opacity: .9; }

/* ───── عناوين الأقسام: علامة لونية صغيرة بدل أيقونة سابحة ───── */
.portal-section-title {
    font-size: 15.5px;
    padding-inline-start: 12px;
    position: relative;
}
.portal-section-title::before {
    content: ''; position: absolute;
    inset-inline-start: 0; top: 50%;
    width: 3px; height: 17px; margin-top: -8.5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 30%, transparent));
}
.ans-section-note { font-size: 11.5px; color: var(--text-muted); margin: -6px 0 12px; line-height: 1.6; }

/* ───── بطاقات الشراء: لون الفئة يقود البطاقة كلها ───── */
.buy-card-tile {
    border-radius: 22px;
    padding: 17px 18px;
    border: 1px solid var(--border-soft);
    background:
        linear-gradient(158deg, color-mix(in srgb, var(--primary) 7%, transparent) 0%, transparent 46%),
        var(--bg-card);
    box-shadow: 0 1px 2px rgba(12,8,28,.04), 0 16px 34px -24px rgba(12,8,28,.5);
    transition: transform .2s var(--ans-ease-in, ease), box-shadow .25s var(--ans-ease-in, ease);
}
@media (hover: hover) {
    .buy-card-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 1px 2px rgba(12,8,28,.05), 0 26px 46px -24px rgba(12,8,28,.6);
    }
}
.buy-card-icon {
    width: 48px; height: 48px; border-radius: 15px;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 12px 22px -10px currentColor;
}
.buy-card-price {
    font-size: 20px;
    background: linear-gradient(120deg, var(--primary), var(--primary-light));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.buy-card-stock { font-size: 10.5px; font-weight: 800; letter-spacing: .2px; }

/* عدّاد الكمية: أزرار أوضح وحواف أنظف */
.qty-stepper { border-radius: 13px; border-color: var(--border-light); overflow: hidden; }
.qty-stepper button {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    transition: background-color .18s;
}
.qty-stepper button:active { background: color-mix(in srgb, var(--primary) 24%, transparent); }
.qty-stepper input { color: var(--text-dark); }
.buy-total-chip {
    background: color-mix(in srgb, var(--primary) 11%, transparent);
    color: var(--primary); border-radius: 999px; padding: 6px 13px;
}

/* ───── الشريط السفلي: العنصر النشط يرتفع في حبّة ملوّنة ───── */
.portal-dock { padding: 7px; border-radius: 28px; }
.dock-tab { padding: 8px 4px; border-radius: 19px; }
.dock-tab i { font-size: 20px; }
.dock-tab.active {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}
.dock-tab.active i { transform: translateY(-1px) scale(1.1); }
.dock-tab:active { transform: scale(.94); }

/* ───── رأس البوابة ───── */
.portal-brand-icon { border-radius: 15px; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.portal-brand-name { letter-spacing: -.2px; }
.portal-icon-btn { border-radius: 13px; transition: transform .18s var(--ans-ease-in, ease), background-color .2s; }
.portal-icon-btn:active { transform: scale(.92); }

/* ───── ظهور متدرّج ألطف لعناصر التبويب ───── */
.portal-tab-view.active > * { animation: ansPortalIn .38s var(--ans-ease, cubic-bezier(.22,1,.36,1)) both; }
@keyframes ansPortalIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
html.lite .portal-tab-view.active > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .balance-hero::before, .balance-hero::after,
    .portal-tab-view.active > * { animation: none; }
    .buy-card-tile:hover { transform: none; }
    .balance-hero::after { display: none; }
}