/*
 * 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: rgb(var(--hy-gray-200, 229 231 235) / 1); /* 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: rgb(var(--hy-gray-400, 156 163 175) / 1); /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: rgb(var(--hy-gray-400, 156 163 175) / 1); /* 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-ink, 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%, var(--hy-mix-base, white)) !important;
	color: var(--hy-brand-ink, var(--hy-brand, #465fff)) !important;
}

	.hy-tint-soft{
	background-color: color-mix(in srgb, var(--hy-brand, #465fff) 6%, var(--hy-mix-base, 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%, var(--hy-mix-border, #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(var(--hy-gray-200, 229 231 235) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-surface, 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(var(--hy-gray-100, 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(var(--hy-gray-800, 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%, var(--hy-mix-base, white)) !important;
	color: var(--hy-brand-ink, 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(var(--hy-gray-300, 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(var(--hy-gray-400, 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(var(--hy-gray-800, 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(var(--hy-gray-100, 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(var(--hy-gray-800, 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(var(--hy-gray-500, 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(var(--hy-gray-500, 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(var(--hy-gray-300, 209 213 219) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-surface, 255 255 255) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-700, 55 65 81) / var(--tw-text-opacity, 1)) !important;
	--tw-shadow: 0px 1px 2px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 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(var(--hy-gray-50, 249 250 251) / var(--tw-bg-opacity, 1)) !important;
}

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

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

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

	.hy-btn-danger:hover{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-error-50, 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(var(--hy-gray-500, 107 114 128) / var(--tw-text-opacity, 1)) !important;
}

	.hy-iconbtn:hover{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-100, 243 244 246) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-700, 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(var(--hy-gray-500, 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(var(--hy-gray-600, 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(var(--hy-gray-400, 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(var(--hy-gray-700, 55 65 81) / var(--tw-text-opacity, 1)) !important;
}

	/* `text-base md:text-theme-sm` is the iOS focus-zoom threshold, not a
	   size preference — see the note on inputClass in components/ui/styles.js,
	   which this mirrors. */
	.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(var(--hy-gray-300, 209 213 219) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-surface, 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: 1rem !important;
	line-height: 1.5rem !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-800, 31 41 55) / var(--tw-text-opacity, 1)) !important;
	--tw-shadow: 0px 1px 2px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 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;
}
	@media (min-width: 768px){
	.hy-input{
		font-size: 14px !important;
		line-height: 20px !important;
	}
}
	.hy-input::-moz-placeholder{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-400, 156 163 175) / var(--tw-text-opacity, 1)) !important;
}
	.hy-input::placeholder{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-400, 156 163 175) / var(--tw-text-opacity, 1)) !important;
}
	.hy-input:hover{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-gray-400, 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(var(--hy-gray-200, 229 231 235) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-50, 249 250 251) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-400, 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: var(--hy-select-arrow, 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(var(--hy-error-600, 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(var(--hy-gray-700, 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(var(--hy-gray-300, 209 213 219) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-surface, 255 255 255) / var(--tw-bg-opacity, 1)) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	--tw-shadow: 0px 1px 2px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 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(var(--hy-gray-200, 229 231 235) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-50, 249 250 251) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-600, 75 85 99) / var(--tw-text-opacity, 1)) !important;
}

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

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

	.hy-notice-success{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-success-100, 209 250 223) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-success-50, 236 253 243) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-success-700, 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(var(--hy-gray-100, 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(var(--hy-gray-600, 75 85 99) / var(--tw-text-opacity, 1)) !important;
}

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

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

	.hy-badge-error{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-error-50, 254 243 242) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-error-700, 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(var(--hy-gray-200, 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(var(--hy-gray-500, 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(var(--hy-gray-700, 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(var(--hy-gray-100, 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(var(--hy-gray-50, 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(var(--hy-gray-200, 229 231 235) / var(--tw-border-opacity, 1)) !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-surface, 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(var(--hy-gray-300, 209 213 219) / var(--tw-border-opacity, 1)) !important;
	--tw-shadow: 0px 1px 3px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-sm, 0.1)), 0px 1px 2px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 0.05)) !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(var(--hy-gray-50, 249 250 251) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-600, 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(var(--hy-gray-800, 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(var(--hy-gray-500, 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(var(--hy-gray-600, 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(var(--hy-gray-100, 243 244 246) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-800, 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%, var(--hy-mix-base, white)) !important;
	color: var(--hy-brand-ink, var(--hy-brand, #465fff)) !important;
}

	.hy-nav-item-danger:hover{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-error-50, 254 243 242) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-error-600, 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(var(--hy-gray-500, 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(var(--hy-gray-700, 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-ink, 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;
}

	/* Literal white, not `bg-surface`: this chip sits on the dark-glass login
	   card, which is dark in both themes — a surface-coloured chip would
	   vanish into it under dark mode. Same for text-gray-900, which is one of
	   the two shades that deliberately never invert. */
	.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(var(--hy-gray-100, 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(var(--hy-gray-600, 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(var(--hy-surface, 255 255 255) / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-800, 31 41 55) / var(--tw-text-opacity, 1)) !important;
	--tw-shadow: 0px 1px 2px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 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(var(--hy-gray-700, 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(var(--hy-gray-800, 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-ink, 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(var(--hy-gray-200, 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-ink, 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(var(--hy-gray-200, 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(var(--hy-gray-50, 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(var(--hy-gray-600, 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(var(--hy-gray-400, 156 163 175) / var(--tw-text-opacity, 1)) !important;
}

	.hy-chip button:hover{
	--tw-text-opacity: 1 !important;
	color: rgb(240 68 56 / 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(var(--hy-gray-700, 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-ink, 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-x-0{
	left: 0px !important;
	right: 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;
}
.end-2{
	inset-inline-end: 0.5rem !important;
}
.left-0{
	left: 0px !important;
}
.start-0{
	inset-inline-start: 0px !important;
}
.start-3{
	inset-inline-start: 0.75rem !important;
}
.top-0{
	top: 0px !important;
}
.top-1\/2{
	top: 50% !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-2{
	margin-inline-start: 0.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-5{
	margin-top: 1.25rem !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-1\.5{
	height: 0.375rem !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-2{
	height: 0.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-2{
	width: 0.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-\[220px\]{
	max-width: 220px !important;
}
.max-w-\[280px\]{
	max-width: 280px !important;
}
.max-w-\[420px\]{
	max-width: 420px !important;
}
.max-w-\[85\%\]{
	max-width: 85% !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-start{
	justify-content: flex-start !important;
}
.justify-end{
	justify-content: flex-end !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-6{
	gap: 1.5rem !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;
}
.self-end{
	align-self: flex-end !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;
}
.whitespace-pre-wrap{
	white-space: pre-wrap !important;
}
.break-words{
	overflow-wrap: break-word !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;
}
.rounded-ee-md{
	border-end-end-radius: 0.375rem !important;
}
.rounded-es-md{
	border-end-start-radius: 0.375rem !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-s-4{
	border-inline-start-width: 4px !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-current{
	border-color: currentColor !important;
}
.border-error-100{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-error-100, 254 228 226) / var(--tw-border-opacity, 1)) !important;
}
.border-error-200{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-error-200, 254 205 202) / 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(var(--hy-gray-100, 243 244 246) / var(--tw-border-opacity, 1)) !important;
}
.border-gray-200{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-gray-200, 229 231 235) / var(--tw-border-opacity, 1)) !important;
}
.border-gray-300{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-gray-300, 209 213 219) / var(--tw-border-opacity, 1)) !important;
}
.border-hy-border{
	border-color: color-mix(in srgb, var(--hy-brand, #465fff) 35%, var(--hy-mix-border, #e4e7ec)) !important;
}
.border-hy-border-soft{
	border-color: color-mix(in srgb, var(--hy-brand, #465fff) 30%, var(--hy-mix-base, white)) !important;
}
.border-hy-border-strong{
	border-color: color-mix(in srgb, var(--hy-brand, #465fff) 45%, var(--hy-mix-base, white)) !important;
}
.border-success-100{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-success-100, 209 250 223) / var(--tw-border-opacity, 1)) !important;
}
.border-success-200{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-success-200, 166 244 197) / var(--tw-border-opacity, 1)) !important;
}
.border-success-500{
	--tw-border-opacity: 1 !important;
	border-color: rgb(18 183 106 / var(--tw-border-opacity, 1)) !important;
}
.border-transparent{
	border-color: transparent !important;
}
.border-warning-100{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-warning-100, 254 240 199) / var(--tw-border-opacity, 1)) !important;
}
.border-warning-200{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-warning-200, 254 225 154) / var(--tw-border-opacity, 1)) !important;
}
.border-white\/15{
	border-color: rgb(255 255 255 / 0.15) !important;
}
.border-s-gray-300{
	--tw-border-opacity: 1 !important;
	border-inline-start-color: rgb(var(--hy-gray-300, 209 213 219) / var(--tw-border-opacity, 1)) !important;
}
.border-s-success-500{
	--tw-border-opacity: 1 !important;
	border-inline-start-color: rgb(18 183 106 / var(--tw-border-opacity, 1)) !important;
}
.border-s-warning-500{
	--tw-border-opacity: 1 !important;
	border-inline-start-color: rgb(247 144 9 / var(--tw-border-opacity, 1)) !important;
}
.border-t-transparent{
	border-top-color: transparent !important;
}
.bg-error-50{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-error-50, 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(var(--hy-gray-100, 243 244 246) / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-200{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-200, 229 231 235) / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-400{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-400, 156 163 175) / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-50{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-50, 249 250 251) / var(--tw-bg-opacity, 1)) !important;
}
.bg-gray-50\/60{
	background-color: rgb(var(--hy-gray-50, 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%, var(--hy-mix-base, white)) !important;
}
.bg-hy-soft{
	background-color: color-mix(in srgb, var(--hy-brand, #465fff) 6%, var(--hy-mix-base, white)) !important;
}
.bg-hy-tint{
	background-color: color-mix(in srgb, var(--hy-brand, #465fff) 10%, var(--hy-mix-base, white)) !important;
}
.bg-success-50{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-success-50, 236 253 243) / var(--tw-bg-opacity, 1)) !important;
}
.bg-surface{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-surface, 255 255 255) / var(--tw-bg-opacity, 1)) !important;
}
.bg-surface\/60{
	background-color: rgb(var(--hy-surface, 255 255 255) / 0.6) !important;
}
.bg-surface\/70{
	background-color: rgb(var(--hy-surface, 255 255 255) / 0.7) !important;
}
.bg-surface\/90{
	background-color: rgb(var(--hy-surface, 255 255 255) / 0.9) !important;
}
.bg-transparent{
	background-color: transparent !important;
}
.bg-warning-100{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-warning-100, 254 240 199) / var(--tw-bg-opacity, 1)) !important;
}
.bg-warning-50{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-warning-50, 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\/15{
	background-color: rgb(255 255 255 / 0.15) !important;
}
.bg-white\/25{
	background-color: rgb(255 255 255 / 0.25) !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: var(--hy-select-arrow, 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: rgb(var(--hy-brand-600, 54 65 245) / 1) !important;
}
.stroke-gray-500{
	stroke: rgb(var(--hy-gray-500, 107 114 128) / 1) !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-2\.5{
	padding-bottom: 0.625rem !important;
}
.pb-3{
	padding-bottom: 0.75rem !important;
}
.pb-4{
	padding-bottom: 1rem !important;
}
.pb-6{
	padding-bottom: 1.5rem !important;
}
.pe-20{
	padding-inline-end: 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-right{
	text-align: right !important;
}
.text-start{
	text-align: start !important;
}
.align-top{
	vertical-align: top !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-normal{
	font-weight: 400 !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;
}
.leading-none{
	line-height: 1 !important;
}
.leading-tight{
	line-height: 1.25 !important;
}
.tracking-\[0\.5em\]{
	letter-spacing: 0.5em !important;
}
.tracking-wide{
	letter-spacing: 0.025em !important;
}
.tracking-wider{
	letter-spacing: 0.05em !important;
}
.text-brand-500{
	--tw-text-opacity: 1 !important;
	color: rgb(70 95 255 / var(--tw-text-opacity, 1)) !important;
}
.text-error-500{
	--tw-text-opacity: 1 !important;
	color: rgb(240 68 56 / var(--tw-text-opacity, 1)) !important;
}
.text-error-600{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-error-600, 217 45 32) / var(--tw-text-opacity, 1)) !important;
}
.text-error-700{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-error-700, 180 35 24) / var(--tw-text-opacity, 1)) !important;
}
.text-gray-400{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-400, 156 163 175) / var(--tw-text-opacity, 1)) !important;
}
.text-gray-500{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-500, 107 114 128) / var(--tw-text-opacity, 1)) !important;
}
.text-gray-600{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-600, 75 85 99) / var(--tw-text-opacity, 1)) !important;
}
.text-gray-700{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-700, 55 65 81) / var(--tw-text-opacity, 1)) !important;
}
.text-gray-800{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-800, 31 41 55) / var(--tw-text-opacity, 1)) !important;
}
.text-hy{
	color: var(--hy-brand-ink, var(--hy-brand, #465fff)) !important;
}
.text-success-600{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-success-600, 3 152 85) / var(--tw-text-opacity, 1)) !important;
}
.text-success-700{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-success-700, 2 122 72) / var(--tw-text-opacity, 1)) !important;
}
.text-transparent{
	color: transparent !important;
}
.text-warning-700{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-warning-700, 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;
}
.underline{
	text-decoration-line: underline !important;
}
.no-underline{
	text-decoration-line: none !important;
}
.underline-offset-4{
	text-underline-offset: 4px !important;
}
.opacity-40{
	opacity: 0.4 !important;
}
.shadow{
	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-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 rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-md, 0.1)), 0px 2px 4px -2px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-sm, 0.1)) !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 rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-sm, 0.1)), 0px 1px 2px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 0.05)) !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 rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 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{
	--tw-blur: blur(8px) !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;
}
.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;
}
.drop-shadow{
	--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) !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;
}
.backdrop-filter{
	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-\[width\]{
	transition-property: width !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;
}

/* ============================================================================
 * The palette, as custom properties.
 *
 * Every colour token in tailwind.config.js resolves to one of these, so the
 * whole interface re-colours by rewriting this block — which is what dark mode
 * is here. No `dark:` variant appears anywhere in the JSX, and none should:
 * twenty view files times several hundred utility classes is a diff nobody can
 * review and a permanent invitation for the two palettes to drift apart.
 *
 * The neutral ramp is *inverted* rather than replaced. `text-gray-800` means
 * "the strongest text colour" and `bg-gray-100` means "the page behind the
 * cards" — those are the intents the class names already encode, and dark mode
 * only changes which literal each intent resolves to. Values are
 * space-separated RGB channels so Tailwind's `/opacity` modifier keeps working.
 *
 * Three things deliberately do NOT move:
 *
 *   - `white` stays white. It is only ever used on the brand gradient, the
 *     login backdrop and primary buttons — surfaces that are dark in both
 *     modes. The `bg-white` that meant "a card" is now `bg-surface`.
 *   - `gray-900` and `gray-950` stay dark. Every use is a scrim or an image
 *     gradient, and a scrim that goes pale stops being a scrim.
 *   - The printable invoice and the embedded frame keep the light palette
 *     outright; see their own stylesheets.
 * ========================================================================== */

:root {
	--hy-surface: 255 255 255;

	--hy-gray-25: 252 252 253;
	--hy-gray-50: 249 250 251;
	--hy-gray-100: 243 244 246;
	--hy-gray-200: 229 231 235;
	--hy-gray-300: 209 213 219;
	--hy-gray-400: 156 163 175;
	--hy-gray-500: 107 114 128;
	--hy-gray-600: 75 85 99;
	--hy-gray-700: 55 65 81;
	--hy-gray-800: 31 41 55;

	--hy-brand-25: 242 247 255;
	--hy-brand-50: 236 243 255;
	--hy-brand-100: 221 233 255;
	--hy-brand-200: 194 214 255;
	--hy-brand-600: 54 65 245;
	--hy-brand-700: 42 49 216;

	--hy-success-50: 236 253 243;
	--hy-success-100: 209 250 223;
	--hy-success-200: 166 244 197;
	--hy-success-600: 3 152 85;
	--hy-success-700: 2 122 72;

	--hy-error-50: 254 243 242;
	--hy-error-100: 254 228 226;
	--hy-error-200: 254 205 202;
	--hy-error-600: 217 45 32;
	--hy-error-700: 180 35 24;

	--hy-warning-50: 255 250 235;
	--hy-warning-100: 254 240 199;
	--hy-warning-200: 254 225 154;
	--hy-warning-600: 220 104 3;
	--hy-warning-700: 181 71 8;

	/* What the brand washes mix toward. */
	--hy-mix-base: #ffffff;
	--hy-mix-border: #e4e7ec;

	/* The brand colour as *text*. Identical to the fill in light mode; see the
	   textColor note in tailwind.config.js for why it is a separate variable
	   at all. */
	--hy-brand-ink: var(--hy-brand, #465fff);

	--hy-shadow: 16 24 40;
	--hy-shadow-xs: 0.05;
	--hy-shadow-sm: 0.1;
	--hy-shadow-md: 0.1;

	--hy-select-arrow: 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");

	/* Read by the browser for form controls, scrollbars and the like, which
	   have no class to style. Without it a dark panel gets white scrollbars
	   and a white date picker. */
	color-scheme: light;
}

/*
 * Dark.
 *
 * Written twice, against two selectors: `[data-hy-theme="dark"]` for an
 * explicit choice, and `[data-hy-theme="auto"]` inside a
 * `prefers-color-scheme` query for "follow the operating system". Keying the
 * media block on the `auto` value rather than on the absence of an attribute
 * is what stops the system preference overriding a customer who explicitly
 * chose light — and `auto` stays `auto` in the DOM rather than being resolved
 * to a concrete theme by JavaScript, so a phone that switches to dark at
 * sunset repaints an open panel instead of waiting for a reload.
 *
 * The duplication is deliberate. CSS has no way to give one declaration block
 * two selectors when one of them is inside a media query, and the alternative —
 * a third layer of indirection where these variables point at other
 * variables — costs more to read than the copy costs to maintain. If you edit
 * one block, edit the other.
 *
 * The ramp is not a mathematical inversion. 50 and 100 are both "background"
 * in light mode but sit on opposite sides of a card in dark mode: gray-100 is
 * the canvas *behind* the surface and has to be darker than it, while gray-50
 * is a subtle fill *on* the surface and has to be lighter. Mirroring the
 * numbers would put the page background above the cards.
 */
[data-hy-theme='dark'] {
	--hy-surface: 26 34 49;

	--hy-gray-25: 30 39 54;
	--hy-gray-50: 35 45 63;
	--hy-gray-100: 15 22 35;
	--hy-gray-200: 43 54 72;
	--hy-gray-300: 61 72 89;
	--hy-gray-400: 122 133 150;
	--hy-gray-500: 152 162 179;
	--hy-gray-600: 182 191 204;
	--hy-gray-700: 207 214 224;
	--hy-gray-800: 232 236 242;

	--hy-brand-25: 26 34 56;
	--hy-brand-50: 30 39 66;
	--hy-brand-100: 38 49 84;
	--hy-brand-200: 52 66 112;
	--hy-brand-600: 138 158 255;
	--hy-brand-700: 164 181 255;

	--hy-success-50: 18 45 34;
	--hy-success-100: 22 60 43;
	--hy-success-200: 28 80 56;
	--hy-success-600: 74 222 148;
	--hy-success-700: 110 232 170;

	--hy-error-50: 56 26 26;
	--hy-error-100: 74 32 31;
	--hy-error-200: 98 42 40;
	--hy-error-600: 253 138 128;
	--hy-error-700: 254 170 162;

	--hy-warning-50: 56 40 16;
	--hy-warning-100: 74 53 20;
	--hy-warning-200: 99 71 26;
	--hy-warning-600: 251 190 106;
	--hy-warning-700: 253 211 148;

	--hy-mix-base: #1a2231;
	--hy-mix-border: #2b3648;

	/* Mixed toward white so a brand-coloured link or chip clears readable
	   contrast on a near-black card; the fill (`bg-hy`) stays the real brand
	   colour so white button text still works. */
	--hy-brand-ink: color-mix(in srgb, var(--hy-brand, #465fff) 55%, white);

	/* Black, and heavier: a shadow tinted with the light palette's blue-grey
	   is invisible against a dark card, and the elevation it was carrying is
	   the only thing separating a modal from the page behind it. */
	--hy-shadow: 0 0 0;
	--hy-shadow-xs: 0.3;
	--hy-shadow-sm: 0.45;
	--hy-shadow-md: 0.55;

	--hy-select-arrow: 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%2398a2b3%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");

	color-scheme: dark;
}

@media ( prefers-color-scheme: dark ) {
	[data-hy-theme='auto'] {
		--hy-surface: 26 34 49;

		--hy-gray-25: 30 39 54;
		--hy-gray-50: 35 45 63;
		--hy-gray-100: 15 22 35;
		--hy-gray-200: 43 54 72;
		--hy-gray-300: 61 72 89;
		--hy-gray-400: 122 133 150;
		--hy-gray-500: 152 162 179;
		--hy-gray-600: 182 191 204;
		--hy-gray-700: 207 214 224;
		--hy-gray-800: 232 236 242;

		--hy-brand-25: 26 34 56;
		--hy-brand-50: 30 39 66;
		--hy-brand-100: 38 49 84;
		--hy-brand-200: 52 66 112;
		--hy-brand-600: 138 158 255;
		--hy-brand-700: 164 181 255;

		--hy-success-50: 18 45 34;
		--hy-success-100: 22 60 43;
		--hy-success-200: 28 80 56;
		--hy-success-600: 74 222 148;
		--hy-success-700: 110 232 170;

		--hy-error-50: 56 26 26;
		--hy-error-100: 74 32 31;
		--hy-error-200: 98 42 40;
		--hy-error-600: 253 138 128;
		--hy-error-700: 254 170 162;

		--hy-warning-50: 56 40 16;
		--hy-warning-100: 74 53 20;
		--hy-warning-200: 99 71 26;
		--hy-warning-600: 251 190 106;
		--hy-warning-700: 253 211 148;

		--hy-mix-base: #1a2231;
		--hy-mix-border: #2b3648;
		--hy-brand-ink: color-mix(in srgb, var(--hy-brand, #465fff) 55%, white);

		--hy-shadow: 0 0 0;
		--hy-shadow-xs: 0.3;
		--hy-shadow-sm: 0.45;
		--hy-shadow-md: 0.55;

		--hy-select-arrow: 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%2398a2b3%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");

		color-scheme: dark;
	}
}

/* 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(var(--hy-gray-100, 243 244 246) / var(--tw-bg-opacity, 1));
}

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

/* Inside [hamyar_auth_modal]'s iframe: the popup owns the framing, so the
   document is only as tall as the form and paints the card's own surface
   rather than the panel's page canvas. */
html:has( > body.hamyar-body--embedded ),
body.hamyar-body--embedded{
	height: auto;
	--tw-bg-opacity: 1;
	background-color: rgb(var(--hy-surface, 255 255 255) / var(--tw-bg-opacity, 1));
}

/*
 * 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(var(--hy-surface, 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(var(--hy-gray-700, 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(var(--hy-gray-800, 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: ;
}

/*
 * Autofill.
 *
 * A browser that fills a saved value paints the field with its own background
 * — a pale yellow in Chrome, white in Safari — using an internal style that
 * `background-color` cannot override at any specificity. On a dark panel that
 * is a glowing white box with, worse, dark text the browser chose to pair with
 * *its* background rather than ours.
 *
 * The two-part workaround is the only one that works: an enormous inset
 * box-shadow paints over the browser's background inside the field, and
 * `-webkit-text-fill-color` overrides the text colour, which `color` alone
 * does not on an autofilled control. The long transition-delay keeps Chrome
 * from repainting its own colour back over ours a frame later.
 *
 * Both properties read the same tokens the field itself uses, so this follows
 * the theme rather than pinning autofill to one palette.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	box-shadow: 0 0 0 1000px rgb( var( --hy-surface, 255 255 255 ) ) inset !important;
	-webkit-text-fill-color: rgb( var( --hy-gray-800, 31 41 55 ) ) !important;
	caret-color: rgb( var( --hy-gray-800, 31 41 55 ) );
	-webkit-transition: background-color 5000s ease-in-out 0s;
	transition: background-color 5000s ease-in-out 0s;
}

/*
 * The floor for form controls that carry no size class of their own.
 *
 * iOS magnifies the viewport whenever a focused text field computes below
 * 16px, and does not zoom back out afterwards — the page is left scrolled
 * sideways with the layout wider than the screen. The panel's own fields are
 * sized for this where they are defined (`inputClass`, `.hy-input`); what is
 * left is markup nobody here wrote: a third-party tab's raw `<input>`, which
 * falls back to the browser's ~13px default and zooms.
 *
 * Deliberately carries no `!important` and stays at element specificity, so
 * it loses to every Tailwind utility. That is the point: this is a floor for
 * unclassed controls, not an override of the sizes chosen above — with
 * `important: true` in the Tailwind config, a rule that did win here would
 * also flatten `text-lg` on the OTP field.
 *
 * `pointer: coarse` keeps it to touch devices, so a narrow desktop window is
 * unaffected. Checkboxes and radios are excluded: they render no text, and
 * some are sized in `em`.
 */
@media (max-width: 767px) and (pointer: coarse) {
	input:not([type='checkbox']):not([type='radio']),
	select,
	textarea {
		font-size: 16px;
	}
}
.placeholder\:font-sans::-moz-placeholder{
	font-family: IRANSansX, Tahoma, system-ui, sans-serif !important;
}
.placeholder\:font-sans::placeholder{
	font-family: IRANSansX, Tahoma, system-ui, sans-serif !important;
}
.placeholder\:text-gray-400::-moz-placeholder{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-400, 156 163 175) / var(--tw-text-opacity, 1)) !important;
}
.placeholder\:text-gray-400::placeholder{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-400, 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-0:last-child{
	border-width: 0px !important;
}
.last\:border-b-0:last-child{
	border-bottom-width: 0px !important;
}
.last\:pb-0:last-child{
	padding-bottom: 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(var(--hy-gray-300, 209 213 219) / var(--tw-border-opacity, 1)) !important;
}
.hover\:border-gray-400:hover{
	--tw-border-opacity: 1 !important;
	border-color: rgb(var(--hy-gray-400, 156 163 175) / var(--tw-border-opacity, 1)) !important;
}
.hover\:bg-error-50:hover{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-error-50, 254 243 242) / var(--tw-bg-opacity, 1)) !important;
}
.hover\:bg-gray-100:hover{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-100, 243 244 246) / var(--tw-bg-opacity, 1)) !important;
}
.hover\:bg-gray-50:hover{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-50, 249 250 251) / var(--tw-bg-opacity, 1)) !important;
}
.hover\:text-error-500:hover{
	--tw-text-opacity: 1 !important;
	color: rgb(240 68 56 / var(--tw-text-opacity, 1)) !important;
}
.hover\:text-error-600:hover{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-error-600, 217 45 32) / var(--tw-text-opacity, 1)) !important;
}
.hover\:text-gray-700:hover{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-700, 55 65 81) / var(--tw-text-opacity, 1)) !important;
}
.hover\:text-gray-800:hover{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-800, 31 41 55) / 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 rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-sm, 0.1)), 0px 1px 2px 0px rgb(var(--hy-shadow, 16 24 40) / var(--hy-shadow-xs, 0.05)) !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(var(--hy-gray-200, 229 231 235) / var(--tw-border-opacity, 1)) !important;
}
.disabled\:bg-gray-50:disabled{
	--tw-bg-opacity: 1 !important;
	background-color: rgb(var(--hy-gray-50, 249 250 251) / var(--tw-bg-opacity, 1)) !important;
}
.disabled\:text-gray-400:disabled{
	--tw-text-opacity: 1 !important;
	color: rgb(var(--hy-gray-400, 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(var(--hy-gray-500, 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\:max-w-\[75\%\]{
		max-width: 75% !important;
	}
	.sm\:grid-cols-2{
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.sm\:grid-cols-3{
		grid-template-columns: repeat(3, 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-5{
		gap: 1.25rem !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-theme-sm{
		font-size: 14px !important;
		line-height: 20px !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-2{
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.lg\:grid-cols-4{
		grid-template-columns: repeat(4, minmax(0, 1fr)) !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;
}