/*
 * Preflight for the standalone panel document — and nothing else; the shared
 * component layer lives in style/components.css, which both bundles import.
 *
 * `@tailwind base` appears here and ONLY here. The panel replaces the page
 * template outright, so this document has no theme styles to preserve and a
 * real reset is exactly right. The same reset would be destructive elsewhere:
 * it would flatten wp-admin's chrome in the settings bundle, and strip the
 * theme baseline that third-party markup depends on inside an embedded frame.
 * That asymmetry is the whole reason the three stylesheets are separate.
 */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
 ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: IRANSansX, Tahoma, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/**
 * IRANSansX — the single font definition for every Hamyar document.
 *
 * Imported by every stylesheet that renders text (components, frame, invoice)
 * rather than being redeclared in each. Three stylesheets each carrying their
 * own @font-face list is how the panel ended up with three weights, the
 * invoice with three, and the embedded frame with none at all — so a framed
 * tab silently fell back to the system font while the panel around it did not.
 *
 * Five weights, matching the five Tailwind weights the UI actually uses:
 * 300 light, 400 normal, 500 medium, 600 semibold, 700 bold. Declaring fewer
 * does not remove a weight from the page — the browser synthesises the missing
 * ones by smearing the nearest real weight, which is why faux-bold Persian text
 * looks subtly wrong next to the same size rendered from a true DemiBold.
 *
 * Served from the plugin's own assets/ directory. Nothing is fetched from
 * Google Fonts or any other host: this is a Persian-first product where the
 * webfont is the interface, and a shop whose panel is unreadable because a CDN
 * is blocked is not an acceptable failure mode.
 *
 * @font-face cannot be expressed as Tailwind utilities — this file is the one
 * place raw CSS is the only option, which is precisely why the rest of the
 * type system lives in tailwind.config.js instead.
 */

@font-face {
	font-family: 'IRANSansX';
	src:
		url(fonts/IRANSansXFaNum-Light.6849e65b.woff2) format('woff2'),
		url(fonts/IRANSansXFaNum-Light.e3ac58af.woff) format('woff');
	font-weight: 300;
	font-style: normal;
	/* swap, never block: Persian text rendered late is far better than a
	   panel that shows nothing at all while the font downloads. */
	font-display: swap;
}

@font-face {
	font-family: 'IRANSansX';
	src:
		url(fonts/IRANSansXFaNum-Regular.450415e7.woff2) format('woff2'),
		url(fonts/IRANSansXFaNum-Regular.823512ed.woff) format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IRANSansX';
	src:
		url(fonts/IRANSansXFaNum-Medium.c74dbd50.woff2) format('woff2'),
		url(fonts/IRANSansXFaNum-Medium.dd985957.woff) format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IRANSansX';
	src:
		url(fonts/IRANSansXFaNum-DemiBold.34a58434.woff2) format('woff2'),
		url(fonts/IRANSansXFaNum-DemiBold.f1d99d96.woff) format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IRANSansX';
	src:
		url(fonts/IRANSansXFaNum-Bold.7a0898c8.woff2) format('woff2'),
		url(fonts/IRANSansXFaNum-Bold.e2bd439a.woff) format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*
 * The component layer — deliberately small.
 *
 * Layout, spacing, and one-off styling are written as Tailwind utilities in
 * the JSX, where they belong: that is where you can see what an element looks
 * like without opening a second file, and where a change to one screen cannot
 * quietly restyle another. What stays here is only the two kinds of rule a
 * utility cannot express:
 *
 *   1. **The extension API.** `hy-card`, `hy-btn`, `hy-input` and friends are
 *      the documented way a third-party panel view styles itself (see the
 *      README, and the `hy-` safelist in tailwind.config.js). Those live in
 *      another plugin's files, which the Tailwind content scan will never
 *      see, so they have to be real classes with real declarations — an
 *      extension author cannot inline utilities into markup this bundle
 *      never compiles.
 *
 *   2. **What Tailwind has no honest utility for.** Anything reading the
 *      `--hy-brand` custom property through `color-mix()`, the `::before`
 *      scrim on the banner, the custom checkbox and select arrow (both
 *      data-URI backgrounds), and `hy-prose`, which styles markup that
 *      arrives as an HTML string and therefore has no className to put a
 *      utility on. Written as arbitrary values these would be unreadable
 *      strings like `bg-[color-mix(in_srgb,var(--hy-brand,#465fff)_10%,white)]`
 *      repeated at every call site.
 *
 * Every rule in the component layer is `@apply` and nothing else — there is no
 * hand-written declaration left in this file. Values that have no utility of
 * their own (the brand colour and its color-mix() washes, the two data-URI
 * glyphs, the wallet gradient, the focus ring) are theme tokens in
 * tailwind.config.js, so they are named once and reached through `bg-hy-tint`,
 * `bg-select-arrow`, `shadow-hy-focus` like any other Tailwind value.
 *
 * `@apply … !important` on each rule, not the `important` config option: that
 * option flags generated utilities, and deliberately does not flag `@apply`
 * inside `@layer components`. These classes still need the flag, because the
 * wp-admin bundle shares its page with core CSS that styles bare `input`,
 * `button` and `table` at a specificity a single class cannot beat.
 *
 * The selectors carry no #hamyar-app prefix. That prefix existed to keep the
 * panel's rules from colliding with the theme's, in both directions — a
 * collision that no longer exists now that the panel document prints this
 * stylesheet and nothing else (Hamyar_Assets::isolate_panel_styles). The two
 * places it survives target bare elements rather than hy-* classes, and are
 * annotated where they appear.
 *
 * Layout uses logical properties (start/end, ps/pe) rather than physical
 * left/right, so the RTL layout is correct as authored and no rtlcss flipping
 * pass is involved.
 *
 * The `@tailwind components/utilities` directives live here rather than in
 * the entry files because PostCSS compiles each CSS file independently — a
 * `@layer` block has to sit in the same file as its directive or Tailwind has
 * nothing to hoist it into. Preflight is the one thing kept out (see
 * style/app.css), since only the standalone panel document may have it.
 */
.container{
    width: 100%
}
@media (min-width: 640px){
    .container{
        max-width: 640px
    }
}
@media (min-width: 768px){
    .container{
        max-width: 768px
    }
}
@media (min-width: 1024px){
    .container{
        max-width: 1024px
    }
}
@media (min-width: 1280px){
    .container{
        max-width: 1280px
    }
}
@media (min-width: 1536px){
    .container{
        max-width: 1536px
    }
}

	/* =================================================================
	 * Brand helpers
	 *
	 * Three tiny classes standing in for the `color-mix()` expressions the
	 * brand colour needs. They exist because the alternative is pasting
	 * `bg-[color-mix(in_srgb,var(--hy-brand,#465fff)_10%,white)]` into eight
	 * different components, where nobody would ever read it, and where
	 * changing the tint would mean finding all eight.
	 * ================================================================= */

	.hy-brand-text{
    color: var(--hy-brand, #465fff) !important
}

	/* A faint wash of the brand colour: the selected nav item, an unread
	   notification, an active chip. */
	.hy-tint{
    background-color: color-mix(in srgb, var(--hy-brand, #465fff) 10%, white) !important;
    color: var(--hy-brand, #465fff) !important
}

	.hy-tint-soft{
    background-color: color-mix(in srgb, var(--hy-brand, #465fff) 6%, white) !important
}

	/* The border an opened or selected container gets, tinted rather than
	   full-strength so it reads as "current" and not as "error". */
	.hy-tint-border{
    border-color: color-mix(in srgb, var(--hy-brand, #465fff) 35%, #e4e7ec) !important
}

	/* =================================================================
	 * Extension API — the classes a third-party panel view may use.
	 * Changing any of these is a breaking change for extensions.
	 * ================================================================= */

	/* ---------------- Surfaces ---------------- */

	.hy-card{
    border-radius: 1rem !important;
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important
}

	.hy-card-head{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    border-bottom-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important
}

	@media (min-width: 768px){
    .hy-card-head{
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }
}

	.hy-card-title{
    display: flex !important;
    min-width: 0px !important;
    align-items: center !important;
    gap: 0.625rem !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    font-weight: 600 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}

	/* The tinted square a section heading's icon sits in.
	 *
	 * A square rather than a bare glyph beside the text: with the icon loose,
	 * a two-word title and a six-word one start at different distances from
	 * the card edge, and a column of cards then reads as slightly misaligned
	 * all the way down. The fixed 32px box makes every title start in the
	 * same place.
	 *
	 * Colour comes from `hy-tint`, which is the panel's brand colour
	 * (`--hy-brand`, set by the administrator and written onto the document
	 * root in Root.js) — not from Tailwind's `brand-*` scale. Those two are
	 * only the same thing on a site that never changed the setting: this one
	 * runs #ff4747, and a chip hard-coded to `bg-brand-50 text-brand-600`
	 * showed up as the one blue element on a red panel. Anything tinted in
	 * this file has to go through --hy-brand for that reason.
	 *
	 * The class exists rather than being utilities at the call site because
	 * extensions style their own cards through these names and would
	 * otherwise have no way to match. */
	.hy-card-icon{
    background-color: color-mix(in srgb, var(--hy-brand, #465fff) 10%, white) !important;
    color: var(--hy-brand, #465fff) !important;
    display: flex !important;
    height: 2rem !important;
    width: 2rem !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important
}

	.hy-card-body{
    display: flex !important;
    flex-direction: column !important;
    row-gap: 1rem !important;
    padding: 1rem !important
}

	@media (min-width: 768px){
    .hy-card-body{
        padding: 1.5rem !important
    }
}

	.hy-empty{
    border-radius: 0.75rem !important;
    border-width: 1px !important;
    border-style: dashed !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
    padding: 2rem !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 20px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}

	@media (min-width: 768px){
    .hy-empty{
        padding: 2.5rem !important
    }
}

	/* ---------------- Text ---------------- */

	.hy-title{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    font-weight: 600 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}

	@media (min-width: 768px){
    .hy-title{
        font-size: 24px !important;
        line-height: 32px !important
    }
}

	/* Sub-headings inside a card (the settings screens stack several groups
	 * per card). The hairline above each one is what separates the groups —
	 * previously only the extra top margin did, and at a glance a run of five
	 * headings read as one long list rather than five sections. `first:`
	 * strips the rule and the space from the topmost heading, which already
	 * has the card's own head border above it. */
	.hy-section-title{
    margin-bottom: 0.75rem !important;
    margin-top: 1.5rem !important;
    border-top-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)) !important;
    padding-top: 1.5rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}
	.hy-section-title:first-child{
    margin-top: 0px !important;
    border-top-width: 0px !important;
    padding-top: 0px !important
}

	.hy-muted{
    font-size: 14px !important;
    line-height: 20px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}

	.hy-help{
    margin-top: 0.25rem !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 18px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}

	/* ---------------- Buttons ---------------- */

	.hy-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    border-radius: 0.5rem !important;
    border-width: 1px !important;
    border-color: transparent !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}

	.hy-btn:disabled{
    cursor: not-allowed !important;
    opacity: 0.6 !important
}

	.hy-btn-primary{
    background-color: var(--hy-brand, #465fff) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}

	.hy-btn-primary:hover{
    --tw-brightness: brightness(.95) !important;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}

	.hy-btn-outline{
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important;
    --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

	.hy-btn-outline:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important
}

	.hy-btn-ghost{
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important
}

	.hy-btn-ghost:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important
}

	.hy-btn-danger{
    --tw-text-opacity: 1 !important;
    color: rgb(217 45 32 / var(--tw-text-opacity, 1)) !important
}

	.hy-btn-danger:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1)) !important
}

	.hy-btn-block{
    width: 100% !important
}

	.hy-btn-sm{
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    font-size: 12px !important;
    line-height: 18px !important
}

	.hy-iconbtn{
    display: flex !important;
    height: 2.25rem !important;
    width: 2.25rem !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.5rem !important;
    border-width: 0px !important;
    background-color: transparent !important;
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}

	.hy-iconbtn:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}

	.hy-iconbtn:disabled{
    cursor: not-allowed !important;
    opacity: 0.3 !important
}

	.hy-iconbtn:hover:disabled{
    background-color: transparent !important;
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}

	.hy-linkbtn{
    border-width: 0px !important;
    background-color: transparent !important;
    padding: 0px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important;
    text-underline-offset: 4px !important
}

	.hy-linkbtn:hover{
    text-decoration-line: underline !important
}

	.hy-linkbtn:disabled{
    cursor: default !important;
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important;
    text-decoration-line: none !important
}

	/* ---------------- Forms ---------------- */

	.hy-field{
    display: flex !important;
    flex-direction: column !important
}

	@media (min-width: 640px){
    .hy-field.is-full{
        grid-column: span 2 / span 2 !important
    }
}

	.hy-label{
    margin-bottom: 0.375rem !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}

	.hy-input{
    min-height: 2.75rem !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important;
    --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}

	.hy-input::-moz-placeholder{
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}

	.hy-input::placeholder{
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}

	.hy-input:hover{
    --tw-border-opacity: 1 !important;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)) !important
}

	.hy-input:focus{
    outline: 2px solid transparent !important;
    outline-offset: 2px !important
}

	.hy-input:disabled{
    cursor: not-allowed !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}

	.hy-input:focus{
    border-color: var(--hy-brand, #465fff) !important;
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--hy-brand, #465fff) 12%, transparent) !important;
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

	.hy-input.has-error{
    --tw-border-opacity: 1 !important;
    border-color: rgb(240 68 56 / var(--tw-border-opacity, 1)) !important
}

	/* Physical left/pl-10 deliberately paired: background-position has no
	   logical equivalent, so using ps-10 for the padding would put the arrow
	   and its clearance on opposite sides. Under dir="rtl" this is the
	   visual left, which is where the arrow belongs. */
	select.hy-input{
    max-width: none !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") !important;
    background-size: 16px !important;
    background-position: left 0.875rem center !important;
    background-repeat: no-repeat !important;
    padding-left: 2.5rem !important
}

	.hy-input-code{
    text-align: center !important;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5em !important
}

	.hy-error{
    margin-top: 0.25rem !important;
    display: block !important;
    font-size: 12px !important;
    line-height: 18px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(217 45 32 / var(--tw-text-opacity, 1)) !important
}

	.hy-check{
    display: flex !important;
    cursor: pointer !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}

	.hy-check input[type='checkbox']{
    margin-top: 0.125rem !important;
    height: 18px !important;
    width: 18px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    border-radius: 0.375rem !important;
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}

	.hy-check input[type='checkbox']:checked{
    border-color: var(--hy-brand, #465fff) !important;
    background-color: var(--hy-brand, #465fff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%2720 6 9 17 4 12%27/%3E%3C/svg%3E") !important
}

	/* ---------------- Notices & badges ---------------- */

	.hy-notice{
    border-radius: 0.75rem !important;
    border-width: 1px !important;
    padding: 1rem !important;
    font-size: 14px !important;
    line-height: 20px !important
}

	.hy-notice-info{
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important
}

	.hy-notice-warning{
    --tw-border-opacity: 1 !important;
    border-color: rgb(254 240 199 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 250 235 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(181 71 8 / var(--tw-text-opacity, 1)) !important
}

	.hy-notice-error{
    --tw-border-opacity: 1 !important;
    border-color: rgb(254 228 226 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(180 35 24 / var(--tw-text-opacity, 1)) !important
}

	.hy-notice-success{
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 250 223 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(236 253 243 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(2 122 72 / var(--tw-text-opacity, 1)) !important
}

	.hy-badge{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    border-radius: 9999px !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important
}

	.hy-badge-success{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(236 253 243 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(2 122 72 / var(--tw-text-opacity, 1)) !important
}

	.hy-badge-warning{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 250 235 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(181 71 8 / var(--tw-text-opacity, 1)) !important
}

	.hy-badge-error{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(180 35 24 / var(--tw-text-opacity, 1)) !important
}

	.hy-spinner{
    display: inline-block !important;
    height: 0.875rem !important;
    width: 0.875rem !important
}

	@keyframes spin{
    to{
        transform: rotate(360deg)
    }
}

	.hy-spinner{
    animation: spin 1s linear infinite !important;
    border-radius: 9999px !important;
    border-width: 2px !important;
    border-color: currentColor !important;
    border-top-color: transparent !important
}

	@keyframes pulse{
    50%{
        opacity: .5
    }
}

	.hy-skeleton{
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    border-radius: 0.5rem !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important
}

	/* ---------------- Tables ----------------
	 *
	 * Element selectors, so a plugin writes <table className="hy-table"> and
	 * every row and cell inside it is styled without touching any of them.
	 * There is no utility equivalent to "style my descendants". */

	.hy-table-wrap{
    width: 100% !important;
    overflow-x: auto !important
}

	.hy-table{
    min-width: 100% !important;
    border-collapse: collapse !important
}

	.hy-table th{
    white-space: nowrap !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    text-align: start !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}

	.hy-table td{
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    text-align: start !important;
    font-size: 14px !important;
    line-height: 20px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}

	/* Tables sit in a `bodyless` card — one with no padding of its own, so a
	 * wide table can scroll edge to edge instead of inside a 24px inset. The
	 * cost is that the outer columns then start 4px from the card edge while
	 * the card's own heading starts at 16/24px, and the two read as
	 * misaligned. Padding the first and last cells to match puts the table's
	 * outer edges exactly under the title above them, without giving up the
	 * full-width scroll for the middle columns.
	 *
	 * Logical properties, so this is correct under RTL as authored. */
	.hy-table th:first-child,
	.hy-table td:first-child{
    padding-inline-start: 1rem !important
}
	@media (min-width: 768px){
    .hy-table th:first-child,
	.hy-table td:first-child{
        padding-inline-start: 1.5rem !important
    }
}

	.hy-table th:last-child,
	.hy-table td:last-child{
    padding-inline-end: 1rem !important
}

	@media (min-width: 768px){
    .hy-table th:last-child,
	.hy-table td:last-child{
        padding-inline-end: 1.5rem !important
    }
}

	.hy-table tbody tr{
    border-top-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)) !important
}

	.hy-table tbody tr.is-clickable{
    cursor: pointer !important
}

	.hy-table tbody tr.is-clickable:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important
}

	/* ---------------- Stat cards ----------------
	 *
	 * Kept as classes because plugins contribute dashboard cards through the
	 * 'hamyar_dashboard_cards' filter and the app draws them — an extension
	 * has no way to attach utilities to markup it does not write. */

	.hy-stat{
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    border-radius: 1rem !important;
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    padding: 1rem !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}

	.hy-stat:hover{
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
    --tw-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06) !important;
    --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

	@media (min-width: 768px){
    .hy-stat{
        padding: 1.5rem !important
    }
}

	.hy-stat-icon{
    display: flex !important;
    height: 2.75rem !important;
    width: 2.75rem !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.75rem !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important
}

	.hy-stat-value{
    display: block !important;
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
    font-weight: 700 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}

	.hy-stat-label{
    display: block !important;
    font-size: 12px !important;
    line-height: 18px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}

	/* ---------------- Navigation ----------------
	 *
	 * The item itself could be inlined, but its active state reads the brand
	 * colour, and splitting one control's base and active styles across two
	 * files would be worse than keeping both here. */

	.hy-nav-item{
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border-radius: 0.5rem !important;
    border-width: 0px !important;
    background-color: transparent !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    text-align: start !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}

	.hy-nav-item:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}

	.hy-nav-item.is-active{
    background-color: color-mix(in srgb, var(--hy-brand, #465fff) 10%, white) !important;
    color: var(--hy-brand, #465fff) !important
}

	.hy-nav-item-danger:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(217 45 32 / var(--tw-text-opacity, 1)) !important
}

	.hy-tab{
    margin-bottom: -1px !important;
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    border-width: 0px !important;
    border-bottom-width: 2px !important;
    border-color: transparent !important;
    background-color: transparent !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}

	.hy-tab:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}

	.hy-tab.is-active{
    border-bottom-color: var(--hy-brand, #465fff) !important;
    color: var(--hy-brand, #465fff) !important
}

	/* ---------------- Login card over a backdrop ----------------
	 *
	 * When the admin puts a photo or a 3D scene behind the login screen the
	 * card becomes dark glass, and the shared form primitives inside it —
	 * label, help text, divider, segmented control — are all coloured for a
	 * white card and become unreadable. Utilities cannot express this: the
	 * elements are rendered by Field, Notice and friends, which have no idea
	 * what they are sitting on. One scoping class on the card is what lets
	 * those components stay unaware. */

	.hy-auth-dark .hy-label{
    color: rgb(255 255 255 / 0.7) !important
}

	.hy-auth-dark .hy-help,
	.hy-auth-dark .hy-muted{
    color: rgb(255 255 255 / 0.5) !important
}

	.hy-auth-dark .hy-check{
    color: rgb(255 255 255 / 0.7) !important
}

	.hy-auth-dark .hy-linkbtn{
    color: rgb(255 255 255 / 0.7) !important
}

	.hy-auth-dark .hy-linkbtn:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}

	.hy-auth-dark .hy-divider span{
    background-color: transparent !important;
    color: rgb(255 255 255 / 0.5) !important
}

	.hy-auth-dark .hy-divider::before{
    border-color: rgb(255 255 255 / 0.2) !important
}

	.hy-auth-dark .hy-segment{
    background-color: rgb(255 255 255 / 0.1) !important
}

	.hy-auth-dark .hy-segment button{
    color: rgb(255 255 255 / 0.7) !important
}

	.hy-auth-dark .hy-segment button.is-active{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important
}

	.hy-auth-dark .hy-notice-info{
    border-color: rgb(255 255 255 / 0.15) !important;
    background-color: rgb(255 255 255 / 0.1) !important;
    color: rgb(255 255 255 / 0.8) !important
}

	/* The outline button is a white chip on a white card; on glass it has to
	   invert or it reads as a hole punched through the panel. */
	.hy-auth-dark .hy-btn-outline{
    border-color: rgb(255 255 255 / 0.2) !important;
    background-color: rgb(255 255 255 / 0.1) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}
	.hy-auth-dark .hy-btn-outline:hover{
    background-color: rgb(255 255 255 / 0.2) !important
}

	/* ---------------- Segmented control ---------------- */

	.hy-segment{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.25rem !important;
    border-radius: 0.75rem !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important;
    padding: 0.25rem !important
}

	.hy-segment button{
    border-radius: 0.5rem !important;
    border-width: 0px !important;
    background-color: transparent !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}

	.hy-segment button.is-active{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    --tw-text-opacity: 1 !important;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
    --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}

	/* ---------------- Embedded frame ---------------- */

	/* =================================================================
	 * Rules with no utility equivalent
	 * ================================================================= */

	/* Rendered HTML — an admin's custom tab, a notification body, a
	   WooCommerce formatted address. It arrives as an HTML string, so there
	   is no element here to hang a className on and every rule has to be a
	   descendant selector. */

	.hy-prose{
    font-size: 14px !important;
    line-height: 20px !important;
    line-height: 1.75rem !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}

	.hy-prose h1,
	.hy-prose h2,
	.hy-prose h3{
    margin-bottom: 0.5rem !important;
    margin-top: 1.25rem !important;
    font-weight: 600 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}

	.hy-prose h1:first-child,
	.hy-prose h2:first-child,
	.hy-prose h3:first-child{
    margin-top: 0px !important
}

	.hy-prose p{
    margin-bottom: 0.75rem !important
}

	.hy-prose a{
    color: var(--hy-brand, #465fff) !important;
    text-decoration-line: underline !important;
    text-underline-offset: 4px !important
}

	.hy-prose ul,
	.hy-prose ol{
    margin-bottom: 0.75rem !important;
    padding-inline-start: 1.5rem !important
}

	.hy-prose ul{
    list-style-type: disc !important
}

	.hy-prose ol{
    list-style-type: decimal !important
}

	.hy-prose img{
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    height: auto !important;
    max-width: 100% !important;
    border-radius: 0.5rem !important
}

	.hy-prose table{
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    line-height: 20px !important
}

	.hy-prose th,
	.hy-prose td{
    border-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    text-align: start !important
}

	/* The banner's scrim. A sibling-combinator pseudo-element: the overlay
	   only exists when there is an image to darken, which no utility on
	   either element can express. */
	.hy-banner{
    background-color: var(--hy-brand, #465fff) !important
}

	.hy-banner-bg + .hy-banner-body::before{
    position: absolute !important;
    inset: 0px !important;
    background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
    --tw-gradient-from: rgb(17 24 39 / 0.85) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
    --tw-gradient-to: rgb(17 24 39 / 0.35) var(--tw-gradient-to-position) !important;
    --tw-content: '' !important;
    content: var(--tw-content) !important
}

	/* On the banner the primary button would be brand-on-brand, i.e. nearly
	   invisible, so it inverts to a white chip instead. */
	.hy-banner .hy-btn-primary{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    color: var(--hy-brand, #465fff) !important
}
	.hy-banner .hy-btn-primary:hover{
    background-color: rgb(255 255 255 / 0.9) !important
}

	/* A divider with a label sitting on the rule. */
	.hy-divider::before{
    position: absolute !important;
    left: 0px !important;
    right: 0px !important;
    top: 50% !important;
    border-top-width: 1px !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
    --tw-content: '' !important;
    content: var(--tw-content) !important
}

	/* The admin screen's own width, applied to the mount point itself —
	   there is no parent element in wp-admin to put utilities on. */
	#hamyar-app.hy-admin{
    margin-top: 1.5rem !important;
    padding-inline-end: 1.25rem !important
}

	/* hy-segment is a two-option toggle by design (all/unread, login/register),
	   so its fixed two-column grid stacks a four- or five-option filter bar
	   into an unreadable block. This variant keeps the same chrome but lets
	   the options flow and wrap instead. */
	.hy-segment.is-auto{
    display: flex !important;
    flex-wrap: wrap !important
}

	.hy-segment.is-auto button{
    min-width: -moz-max-content !important;
    min-width: max-content !important;
    flex: 1 1 0% !important;
    white-space: nowrap !important
}

	/* =================================================================
	 * Support tickets
	 *
	 * Written once and used by both sides. The customer's thread and the
	 * agent's are separate components on purpose (different permissions,
	 * different controls) but must be visually the same screen — two
	 * stylesheets would drift into two products.
	 * ================================================================= */

	/* A small removable token: an attached product id, a selected file. */
	.hy-chip{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    border-radius: 0.5rem !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important
}

	.hy-chip button{
    display: flex !important;
    align-items: center !important;
    border-width: 0px !important;
    background-color: transparent !important;
    padding: 0px !important;
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}

	.hy-chip button:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important
}

	/* For a select that sits inline in a toolbar rather than in a field. */
	.hy-input-sm{
    width: auto !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 12px !important;
    line-height: 18px !important
}
	.hy-ticket-msg__body{
    font-size: 14px !important;
    line-height: 20px !important;
    line-height: 1.75rem !important;
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}

	.hy-ticket-msg__body p{
    margin-bottom: 0.5rem !important
}

	.hy-ticket-msg__body p:last-child{
    margin-bottom: 0px !important
}

	.hy-ticket-msg__body a{
    color: var(--hy-brand, #465fff) !important;
    text-decoration-line: underline !important
}

	.hy-ticket-msg__body ul,
	.hy-ticket-msg__body ol{
    margin-bottom: 0.5rem !important;
    list-style-type: disc !important;
    padding-inline-start: 1.25rem !important
}

	.hy-ticket-msg__body img{
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    max-width: 100% !important;
    border-radius: 0.5rem !important
}
.sr-only{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important
}
.pointer-events-none{
    pointer-events: none !important
}
.visible{
    visibility: visible !important
}
.invisible{
    visibility: hidden !important
}
.static{
    position: static !important
}
.fixed{
    position: fixed !important
}
.absolute{
    position: absolute !important
}
.relative{
    position: relative !important
}
.sticky{
    position: sticky !important
}
.inset-0{
    inset: 0px !important
}
.inset-y-0{
    top: 0px !important;
    bottom: 0px !important
}
.-top-0\.5{
    top: -0.125rem !important
}
.end-0{
    inset-inline-end: 0px !important
}
.left-0{
    left: 0px !important
}
.start-0{
    inset-inline-start: 0px !important
}
.top-0{
    top: 0px !important
}
.top-full{
    top: 100% !important
}
.-z-10{
    z-index: -10 !important
}
.z-10{
    z-index: 10 !important
}
.z-30{
    z-index: 30 !important
}
.z-40{
    z-index: 40 !important
}
.z-50{
    z-index: 50 !important
}
.mx-4{
    margin-left: 1rem !important;
    margin-right: 1rem !important
}
.my-6{
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}
.mb-0{
    margin-bottom: 0px !important
}
.mb-1\.5{
    margin-bottom: 0.375rem !important
}
.mb-3{
    margin-bottom: 0.75rem !important
}
.mb-4{
    margin-bottom: 1rem !important
}
.mb-5{
    margin-bottom: 1.25rem !important
}
.mb-6{
    margin-bottom: 1.5rem !important
}
.ms-auto{
    margin-inline-start: auto !important
}
.mt-0{
    margin-top: 0px !important
}
.mt-1{
    margin-top: 0.25rem !important
}
.mt-1\.5{
    margin-top: 0.375rem !important
}
.mt-2{
    margin-top: 0.5rem !important
}
.mt-3{
    margin-top: 0.75rem !important
}
.mt-4{
    margin-top: 1rem !important
}
.mt-6{
    margin-top: 1.5rem !important
}
.line-clamp-2{
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important
}
.block{
    display: block !important
}
.inline-block{
    display: inline-block !important
}
.inline{
    display: inline !important
}
.flex{
    display: flex !important
}
.inline-flex{
    display: inline-flex !important
}
.table{
    display: table !important
}
.grid{
    display: grid !important
}
.contents{
    display: contents !important
}
.hidden{
    display: none !important
}
.h-10{
    height: 2.5rem !important
}
.h-11{
    height: 2.75rem !important
}
.h-12{
    height: 3rem !important
}
.h-14{
    height: 3.5rem !important
}
.h-20{
    height: 5rem !important
}
.h-24{
    height: 6rem !important
}
.h-28{
    height: 7rem !important
}
.h-3\.5{
    height: 0.875rem !important
}
.h-32{
    height: 8rem !important
}
.h-40{
    height: 10rem !important
}
.h-64{
    height: 16rem !important
}
.h-7{
    height: 1.75rem !important
}
.h-8{
    height: 2rem !important
}
.h-9{
    height: 2.25rem !important
}
.h-\[600px\]{
    height: 600px !important
}
.h-full{
    height: 100% !important
}
.max-h-48{
    max-height: 12rem !important
}
.max-h-64{
    max-height: 16rem !important
}
.min-h-11{
    min-height: 2.75rem !important
}
.min-h-\[320px\]{
    min-height: 320px !important
}
.min-h-screen{
    min-height: 100vh !important
}
.w-10{
    width: 2.5rem !important
}
.w-11{
    width: 2.75rem !important
}
.w-12{
    width: 3rem !important
}
.w-14{
    width: 3.5rem !important
}
.w-24{
    width: 6rem !important
}
.w-3\.5{
    width: 0.875rem !important
}
.w-7{
    width: 1.75rem !important
}
.w-8{
    width: 2rem !important
}
.w-9{
    width: 2.25rem !important
}
.w-\[280px\]{
    width: 280px !important
}
.w-\[300px\]{
    width: 300px !important
}
.w-\[600px\]{
    width: 600px !important
}
.w-\[calc\(100\%-2rem\)\]{
    width: calc(100% - 2rem) !important
}
.w-auto{
    width: auto !important
}
.w-full{
    width: 100% !important
}
.min-w-0{
    min-width: 0px !important
}
.min-w-\[18px\]{
    min-width: 18px !important
}
.min-w-\[240px\]{
    min-width: 240px !important
}
.min-w-full{
    min-width: 100% !important
}
.max-w-2xl{
    max-width: 42rem !important
}
.max-w-\[200px\]{
    max-width: 200px !important
}
.max-w-\[280px\]{
    max-width: 280px !important
}
.max-w-\[420px\]{
    max-width: 420px !important
}
.max-w-\[85vw\]{
    max-width: 85vw !important
}
.max-w-\[calc\(100vw-2rem\)\]{
    max-width: calc(100vw - 2rem) !important
}
.max-w-none{
    max-width: none !important
}
.flex-1{
    flex: 1 1 0% !important
}
.shrink{
    flex-shrink: 1 !important
}
.shrink-0{
    flex-shrink: 0 !important
}
.grow{
    flex-grow: 1 !important
}
.border-collapse{
    border-collapse: collapse !important
}
.translate-x-0{
    --tw-translate-x: 0px !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.translate-x-full{
    --tw-translate-x: 100% !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.rotate-180{
    --tw-rotate: 180deg !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.rotate-90{
    --tw-rotate: 90deg !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.transform{
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
@keyframes pulse{
    50%{
        opacity: .5
    }
}
.animate-pulse{
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important
}
@keyframes spin{
    to{
        transform: rotate(360deg)
    }
}
.animate-spin{
    animation: spin 1s linear infinite !important
}
.cursor-default{
    cursor: default !important
}
.cursor-pointer{
    cursor: pointer !important
}
.resize{
    resize: both !important
}
.appearance-none{
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important
}
.grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important
}
.grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(40px\2c 1fr\)\)\]{
    grid-template-columns: repeat(auto-fill,minmax(40px,1fr)) !important
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(280px\2c 1fr\)\)\]{
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) !important
}
.flex-col{
    flex-direction: column !important
}
.flex-wrap{
    flex-wrap: wrap !important
}
.place-items-center{
    place-items: center !important
}
.items-start{
    align-items: flex-start !important
}
.items-end{
    align-items: flex-end !important
}
.items-center{
    align-items: center !important
}
.justify-center{
    justify-content: center !important
}
.justify-between{
    justify-content: space-between !important
}
.gap-0\.5{
    gap: 0.125rem !important
}
.gap-1{
    gap: 0.25rem !important
}
.gap-1\.5{
    gap: 0.375rem !important
}
.gap-2{
    gap: 0.5rem !important
}
.gap-2\.5{
    gap: 0.625rem !important
}
.gap-3{
    gap: 0.75rem !important
}
.gap-4{
    gap: 1rem !important
}
.gap-5{
    gap: 1.25rem !important
}
.gap-x-3{
    -moz-column-gap: 0.75rem !important;
         column-gap: 0.75rem !important
}
.gap-y-1{
    row-gap: 0.25rem !important
}
.gap-y-4{
    row-gap: 1rem !important
}
.overflow-hidden{
    overflow: hidden !important
}
.overflow-x-auto{
    overflow-x: auto !important
}
.overflow-y-auto{
    overflow-y: auto !important
}
.truncate{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important
}
.whitespace-nowrap{
    white-space: nowrap !important
}
.break-all{
    word-break: break-all !important
}
.rounded{
    border-radius: 0.25rem !important
}
.rounded-2xl{
    border-radius: 1rem !important
}
.rounded-full{
    border-radius: 9999px !important
}
.rounded-lg{
    border-radius: 0.5rem !important
}
.rounded-md{
    border-radius: 0.375rem !important
}
.rounded-xl{
    border-radius: 0.75rem !important
}
.border{
    border-width: 1px !important
}
.border-0{
    border-width: 0px !important
}
.border-2{
    border-width: 2px !important
}
.border-b{
    border-bottom-width: 1px !important
}
.border-e{
    border-inline-end-width: 1px !important
}
.border-t{
    border-top-width: 1px !important
}
.border-dashed{
    border-style: dashed !important
}
.border-\[var\(--hy-brand\2c \#465fff\)\]{
    border-color: var(--hy-brand,#465fff) !important
}
.border-amber-300{
    --tw-border-opacity: 1 !important;
    border-color: rgb(252 211 77 / var(--tw-border-opacity, 1)) !important
}
.border-current{
    border-color: currentColor !important
}
.border-error-100{
    --tw-border-opacity: 1 !important;
    border-color: rgb(254 228 226 / var(--tw-border-opacity, 1)) !important
}
.border-error-500{
    --tw-border-opacity: 1 !important;
    border-color: rgb(240 68 56 / var(--tw-border-opacity, 1)) !important
}
.border-gray-100{
    --tw-border-opacity: 1 !important;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)) !important
}
.border-gray-200{
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important
}
.border-gray-300{
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important
}
.border-hy-border{
    border-color: color-mix(in srgb, var(--hy-brand, #465fff) 35%, #e4e7ec) !important
}
.border-hy-border-soft{
    border-color: color-mix(in srgb, var(--hy-brand, #465fff) 30%, white) !important
}
.border-hy-border-strong{
    border-color: color-mix(in srgb, var(--hy-brand, #465fff) 45%, white) !important
}
.border-success-100{
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 250 223 / var(--tw-border-opacity, 1)) !important
}
.border-transparent{
    border-color: transparent !important
}
.border-warning-100{
    --tw-border-opacity: 1 !important;
    border-color: rgb(254 240 199 / var(--tw-border-opacity, 1)) !important
}
.border-white\/15{
    border-color: rgb(255 255 255 / 0.15) !important
}
.border-t-transparent{
    border-top-color: transparent !important
}
.bg-amber-100{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1)) !important
}
.bg-amber-50{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)) !important
}
.bg-error-50{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1)) !important
}
.bg-error-500{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(240 68 56 / var(--tw-bg-opacity, 1)) !important
}
.bg-gray-100{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important
}
.bg-gray-200{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important
}
.bg-gray-50{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important
}
.bg-gray-50\/60{
    background-color: rgb(249 250 251 / 0.6) !important
}
.bg-gray-900\/50{
    background-color: rgb(17 24 39 / 0.5) !important
}
.bg-gray-950\/60{
    background-color: rgb(3 7 18 / 0.6) !important
}
.bg-hy{
    background-color: var(--hy-brand, #465fff) !important
}
.bg-hy-faint{
    background-color: color-mix(in srgb, var(--hy-brand, #465fff) 4%, white) !important
}
.bg-hy-soft{
    background-color: color-mix(in srgb, var(--hy-brand, #465fff) 6%, white) !important
}
.bg-hy-tint{
    background-color: color-mix(in srgb, var(--hy-brand, #465fff) 10%, white) !important
}
.bg-success-50{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(236 253 243 / var(--tw-bg-opacity, 1)) !important
}
.bg-transparent{
    background-color: transparent !important
}
.bg-warning-50{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 250 235 / var(--tw-bg-opacity, 1)) !important
}
.bg-white{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important
}
.bg-white\/60{
    background-color: rgb(255 255 255 / 0.6) !important
}
.bg-white\/70{
    background-color: rgb(255 255 255 / 0.7) !important
}
.bg-white\/90{
    background-color: rgb(255 255 255 / 0.9) !important
}
.bg-gradient-to-b{
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important
}
.bg-hy-gradient{
    background-image: linear-gradient(135deg, var(--hy-brand, #465fff), color-mix(in srgb, var(--hy-brand, #465fff) 55%, #111827)) !important
}
.bg-select-arrow{
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") !important
}
.from-gray-950\/70{
    --tw-gradient-from: rgb(3 7 18 / 0.7) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(3 7 18 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
}
.from-white{
    --tw-gradient-from: #fff var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
}
.via-gray-950\/50{
    --tw-gradient-to: rgb(3 7 18 / 0)  var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgb(3 7 18 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to) !important
}
.to-gray-950\/80{
    --tw-gradient-to: rgb(3 7 18 / 0.8) var(--tw-gradient-to-position) !important
}
.to-white\/60{
    --tw-gradient-to: rgb(255 255 255 / 0.6) var(--tw-gradient-to-position) !important
}
.bg-select-arrow{
    background-size: 16px !important
}
.bg-clip-text{
    -webkit-background-clip: text !important;
            background-clip: text !important
}
.bg-select-arrow{
    background-position: left 0.875rem center !important
}
.bg-no-repeat{
    background-repeat: no-repeat !important
}
.stroke-brand-600{
    stroke: #3641f5 !important
}
.stroke-gray-500{
    stroke: #6b7280 !important
}
.object-contain{
    -o-object-fit: contain !important;
       object-fit: contain !important
}
.object-cover{
    -o-object-fit: cover !important;
       object-fit: cover !important
}
.p-0{
    padding: 0px !important
}
.p-2{
    padding: 0.5rem !important
}
.p-2\.5{
    padding: 0.625rem !important
}
.p-3{
    padding: 0.75rem !important
}
.p-4{
    padding: 1rem !important
}
.p-6{
    padding: 1.5rem !important
}
.p-8{
    padding: 2rem !important
}
.px-1{
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important
}
.px-1\.5{
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important
}
.px-2{
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important
}
.px-2\.5{
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important
}
.px-3{
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important
}
.px-4{
    padding-left: 1rem !important;
    padding-right: 1rem !important
}
.px-5{
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important
}
.py-0\.5{
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important
}
.py-1{
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important
}
.py-1\.5{
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important
}
.py-10{
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important
}
.py-2{
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important
}
.py-2\.5{
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important
}
.py-3{
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important
}
.py-3\.5{
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important
}
.py-6{
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}
.pb-4{
    padding-bottom: 1rem !important
}
.pb-6{
    padding-bottom: 1.5rem !important
}
.pl-10{
    padding-left: 2.5rem !important
}
.ps-10{
    padding-inline-start: 2.5rem !important
}
.pt-4{
    padding-top: 1rem !important
}
.pt-6{
    padding-top: 1.5rem !important
}
.text-center{
    text-align: center !important
}
.text-start{
    text-align: start !important
}
.font-mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important
}
.text-2xl{
    font-size: 1.5rem !important;
    line-height: 2rem !important
}
.text-\[10px\]{
    font-size: 10px !important
}
.text-base{
    font-size: 1rem !important;
    line-height: 1.5rem !important
}
.text-lg{
    font-size: 1.125rem !important;
    line-height: 1.75rem !important
}
.text-theme-sm{
    font-size: 14px !important;
    line-height: 20px !important
}
.text-theme-xs{
    font-size: 12px !important;
    line-height: 18px !important
}
.text-xl{
    font-size: 1.25rem !important;
    line-height: 1.75rem !important
}
.font-bold{
    font-weight: 700 !important
}
.font-medium{
    font-weight: 500 !important
}
.font-semibold{
    font-weight: 600 !important
}
.uppercase{
    text-transform: uppercase !important
}
.leading-7{
    line-height: 1.75rem !important
}
.leading-\[1\.8\]{
    line-height: 1.8 !important
}
.leading-\[18px\]{
    line-height: 18px !important
}
.tracking-\[0\.5em\]{
    letter-spacing: 0.5em !important
}
.tracking-wide{
    letter-spacing: 0.025em !important
}
.text-amber-700{
    --tw-text-opacity: 1 !important;
    color: rgb(180 83 9 / var(--tw-text-opacity, 1)) !important
}
.text-error-600{
    --tw-text-opacity: 1 !important;
    color: rgb(217 45 32 / var(--tw-text-opacity, 1)) !important
}
.text-error-700{
    --tw-text-opacity: 1 !important;
    color: rgb(180 35 24 / var(--tw-text-opacity, 1)) !important
}
.text-gray-400{
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}
.text-gray-500{
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}
.text-gray-600{
    --tw-text-opacity: 1 !important;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1)) !important
}
.text-gray-700{
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}
.text-gray-800{
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}
.text-hy{
    color: var(--hy-brand, #465fff) !important
}
.text-red-500{
    --tw-text-opacity: 1 !important;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important
}
.text-success-600{
    --tw-text-opacity: 1 !important;
    color: rgb(3 152 85 / var(--tw-text-opacity, 1)) !important
}
.text-success-700{
    --tw-text-opacity: 1 !important;
    color: rgb(2 122 72 / var(--tw-text-opacity, 1)) !important
}
.text-transparent{
    color: transparent !important
}
.text-warning-700{
    --tw-text-opacity: 1 !important;
    color: rgb(181 71 8 / var(--tw-text-opacity, 1)) !important
}
.text-white{
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}
.text-white\/60{
    color: rgb(255 255 255 / 0.6) !important
}
.text-white\/70{
    color: rgb(255 255 255 / 0.7) !important
}
.text-white\/80{
    color: rgb(255 255 255 / 0.8) !important
}
.text-white\/85{
    color: rgb(255 255 255 / 0.85) !important
}
.no-underline{
    text-decoration-line: none !important
}
.underline-offset-4{
    text-underline-offset: 4px !important
}
.opacity-40{
    opacity: 0.4 !important
}
.shadow-hy-focus{
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--hy-brand, #465fff) 12%, transparent) !important;
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}
.shadow-theme-md{
    --tw-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06) !important;
    --tw-shadow-colored: 0px 4px 8px -2px var(--tw-shadow-color), 0px 2px 4px -2px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}
.shadow-theme-sm{
    --tw-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06) !important;
    --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}
.shadow-theme-xs{
    --tw-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}
.outline{
    outline-style: solid !important
}
.ring{
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important
}
.blur-3xl{
    --tw-blur: blur(64px) !important;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.filter{
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.backdrop-blur{
    --tw-backdrop-blur: blur(8px) !important;
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important
}
.backdrop-blur-xl{
    --tw-backdrop-blur: blur(24px) !important;
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important
}
.transition{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}
.transition-colors{
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}
.transition-opacity{
    transition-property: opacity !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}
.transition-transform{
    transition-property: transform !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important
}
.duration-200{
    transition-duration: 200ms !important
}
.duration-500{
    transition-duration: 500ms !important
}
.ease-in-out{
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important
}
.\[background\:radial-gradient\(circle_at_center\2c var\(--hy-brand\2c \#465fff\)\2c transparent_70\%\)\]{
    background: radial-gradient(circle at center,var(--hy-brand,#465fff),transparent 70%) !important
}
.\[direction\:ltr\]{
    direction: ltr !important
}
.\[unicode-bidi\:isolate\]{
    unicode-bidi: isolate !important
}
.\[unicode-bidi\:plaintext\]{
    unicode-bidi: plaintext !important
}
.\[will-change\:transform\]{
    will-change: transform !important
}

/* Everything below is `@apply` rather than hand-written declarations, so the
   plugin has exactly one vocabulary. The two exceptions in this stylesheet are
   the @font-face block (in fonts.css — Tailwind has no font-face utility) and
   the --tw-* scaffolding at the bottom of this prelude, which is Tailwind's own
   machinery rather than a style. */

html,
body.hamyar-body{
    margin: 0px;
    height: 100%;
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

body.hamyar-body{
    font-family: IRANSansX, Tahoma, system-ui, sans-serif
}

/*
 * Form controls do not inherit font-family from their parent — browsers hand
 * them the OS default instead. Tailwind's preflight normally corrects that,
 * but the admin bundle deliberately ships without preflight (a global reset
 * would flatten wp-admin's own buttons and tables), so every input, select and
 * textarea in the panel was rendering in the system font while the text beside
 * it rendered in IRANSansX.
 *
 * `font: inherit` rather than `font-family: inherit`: size and weight are
 * inherited wrong on form controls too, which is why an unstyled <select> sat
 * a pixel smaller than the label above it.
 *
 * #hamyar-app here is not the utility-scoping prefix that the rest of this
 * file dropped — it is this rule's actual target. The selector matches bare
 * elements, so without it the rule would restyle wp-admin's own form controls
 * on the settings screen. :where() keeps it at zero specificity, so any
 * component class still wins.
 */
#hamyar-app :where( input, select, textarea, button, optgroup ){
    font: inherit
}

.hamyar-noscript{
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
    margin-bottom: 4rem;
    max-width: 32rem;
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 2rem;
    text-align: center;
    font-family: IRANSansX, Tahoma, system-ui, sans-serif;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
}

#hamyar-app ,
#hamyar-app h1,
#hamyar-app h2,
#hamyar-app h3,
#hamyar-app h4,
#hamyar-app h5,
#hamyar-app h6{
    text-align: start;
    font-family: IRANSansX, Tahoma, system-ui, sans-serif;
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1))
}

/*
 * Tailwind's composable-utility scaffolding.
 *
 * A utility like `rotate-180` does not emit `transform: rotate(180deg)`. It
 * emits `--tw-rotate: 180deg` plus a `transform` built from seven variables —
 * translate, rotate, skew, scale — so that `rotate-180 scale-95` compose
 * instead of overwriting each other. The same trick backs `filter` and
 * `backdrop-filter`. Those variables are given their identity values by
 * **preflight**, and if they are undefined the whole `transform` declaration
 * is invalid and the browser drops it: the utility silently does nothing.
 *
 * The panel and the invoice load preflight, so they are fine. The wp-admin
 * bundle deliberately does not — a full reset there would flatten wp-admin's
 * own buttons, tables and menus — which is why this block exists. It declares
 * only the variable defaults, nothing that resets an element, so it buys the
 * transform and filter utilities without any of preflight's side effects.
 *
 * Written as arbitrary properties so even this is Tailwind rather than raw
 * CSS. The `_` in each empty value is Tailwind's escape for a space: the
 * filter variables must resolve to an empty string, not to `initial`.
 *
 * Found the hard way: after the component classes moved to inline utilities,
 * every chevron in the settings screen stopped rotating, because as raw CSS
 * `transform: rotate(180deg)` had never needed any of this.
 */
*,
::before,
::after{
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-drop-shadow: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: 
}
.placeholder\:text-gray-400::-moz-placeholder{
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}
.placeholder\:text-gray-400::placeholder{
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}
.first\:mt-0:first-child{
    margin-top: 0px !important
}
.first\:border-t-0:first-child{
    border-top-width: 0px !important
}
.first\:ps-4:first-child{
    padding-inline-start: 1rem !important
}
.first\:pt-0:first-child{
    padding-top: 0px !important
}
.last\:border-b-0:last-child{
    border-bottom-width: 0px !important
}
.last\:pe-4:last-child{
    padding-inline-end: 1rem !important
}
.hover\:border-gray-300:hover{
    --tw-border-opacity: 1 !important;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important
}
.hover\:border-gray-400:hover{
    --tw-border-opacity: 1 !important;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)) !important
}
.hover\:bg-error-50:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(254 243 242 / var(--tw-bg-opacity, 1)) !important
}
.hover\:bg-gray-100:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)) !important
}
.hover\:bg-gray-50:hover{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important
}
.hover\:text-error-600:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(217 45 32 / var(--tw-text-opacity, 1)) !important
}
.hover\:text-gray-700:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important
}
.hover\:text-gray-800:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important
}
.hover\:text-red-500:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1)) !important
}
.hover\:text-white:hover{
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
}
.hover\:underline:hover{
    text-decoration-line: underline !important
}
.hover\:shadow-theme-sm:hover{
    --tw-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06) !important;
    --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}
.hover\:brightness-95:hover{
    --tw-brightness: brightness(.95) !important;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.hover\:brightness-\[0\.97\]:hover{
    --tw-brightness: brightness(0.97) !important;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.focus\:border-hy:focus{
    border-color: var(--hy-brand, #465fff) !important
}
.focus\:shadow-hy-focus:focus{
    --tw-shadow: 0 0 0 3px color-mix(in srgb, var(--hy-brand, #465fff) 12%, transparent) !important;
    --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
}
.focus\:outline-none:focus{
    outline: 2px solid transparent !important;
    outline-offset: 2px !important
}
.disabled\:cursor-default:disabled{
    cursor: default !important
}
.disabled\:cursor-not-allowed:disabled{
    cursor: not-allowed !important
}
.disabled\:border-gray-200:disabled{
    --tw-border-opacity: 1 !important;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important
}
.disabled\:bg-gray-50:disabled{
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important
}
.disabled\:text-gray-400:disabled{
    --tw-text-opacity: 1 !important;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1)) !important
}
.disabled\:no-underline:disabled{
    text-decoration-line: none !important
}
.disabled\:opacity-30:disabled{
    opacity: 0.3 !important
}
.disabled\:opacity-60:disabled{
    opacity: 0.6 !important
}
.disabled\:hover\:bg-transparent:hover:disabled{
    background-color: transparent !important
}
.disabled\:hover\:text-gray-500:hover:disabled{
    --tw-text-opacity: 1 !important;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1)) !important
}
@media (min-width: 640px){
    .sm\:col-span-1{
        grid-column: span 1 / span 1 !important
    }
    .sm\:col-span-2{
        grid-column: span 2 / span 2 !important
    }
    .sm\:inline{
        display: inline !important
    }
    .sm\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }
    .sm\:p-4{
        padding: 1rem !important
    }
    .sm\:px-3{
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important
    }
}
@media (min-width: 768px){
    .md\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }
    .md\:gap-6{
        gap: 1.5rem !important
    }
    .md\:p-10{
        padding: 2.5rem !important
    }
    .md\:p-6{
        padding: 1.5rem !important
    }
    .md\:p-8{
        padding: 2rem !important
    }
    .md\:px-5{
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important
    }
    .md\:px-6{
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }
    .md\:py-4{
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }
    .md\:text-title-sm{
        font-size: 24px !important;
        line-height: 32px !important
    }
    .md\:first\:ps-6:first-child{
        padding-inline-start: 1.5rem !important
    }
    .md\:last\:pe-6:last-child{
        padding-inline-end: 1.5rem !important
    }
}
@media (min-width: 1024px){
    .lg\:static{
        position: static !important
    }
    .lg\:sticky{
        position: sticky !important
    }
    .lg\:top-8{
        top: 2rem !important
    }
    .lg\:z-auto{
        z-index: auto !important
    }
    .lg\:hidden{
        display: none !important
    }
    .lg\:w-56{
        width: 14rem !important
    }
    .lg\:w-\[264px\]{
        width: 264px !important
    }
    .lg\:translate-x-0{
        --tw-translate-x: 0px !important;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
    }
    .lg\:grid-cols-\[minmax\(0\2c 1fr\)_320px\]{
        grid-template-columns: minmax(0,1fr) 320px !important
    }
    .lg\:flex-row{
        flex-direction: row !important
    }
    .lg\:items-start{
        align-items: flex-start !important
    }
    .lg\:transition-none{
        transition-property: none !important
    }
}
@media (min-width: 1280px){
    .xl\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important
    }
}
.\[\&\>img\]\:h-full>img{
    height: 100% !important
}
.\[\&\>img\]\:w-full>img{
    width: 100% !important
}
.\[\&\>img\]\:object-cover>img{
    -o-object-fit: cover !important;
       object-fit: cover !important
}