.ojw-app,
.ojw-app *,
.ojw-account-list,
.ojw-account-list * { box-sizing: border-box; }

.ojw-app {
	--ojw-accent: #18181b;
	--ojw-surface: #fff;
	--ojw-text: #18181b;
	--ojw-muted: #71717a;
	--ojw-border: #e4e4e7;
	--ojw-radius: 12px;
	--ojw-max-width: 880px;
	width: 100%;
	max-width: var(--ojw-max-width);
	margin: 28px auto;
	color: var(--ojw-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.ojw-app svg,
.ojw-account-order svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ojw-card {
	margin: 0 0 18px;
	border: 1px solid var(--ojw-border);
	border-radius: var(--ojw-radius);
	background: var(--ojw-surface);
	box-shadow: 0 1px 2px rgba(0,0,0,.035), 0 1px 1px rgba(0,0,0,.02);
	overflow: hidden;
}
.ojw-card-header { padding: 26px 26px 0; }
.ojw-card-content { padding: 26px; }
.ojw-card-header + .ojw-card-content { padding-top: 22px; }
.ojw-lookup-card { max-width: 720px; margin: 0 auto; }
.ojw-eyebrow { margin: 0 0 7px; color: var(--ojw-muted); font-size: 11px; line-height: 1.2; font-weight: 700; letter-spacing: .095em; text-transform: uppercase; }
.ojw-title { margin: 0; color: var(--ojw-text); font-size: clamp(24px, 4vw, 34px); line-height: 1.12; font-weight: 680; letter-spacing: -.035em; }
.ojw-description { margin: 10px 0 0; max-width: 650px; color: var(--ojw-muted); font-size: 15px; }

.ojw-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ojw-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; margin: 0; color: var(--ojw-text); font-size: 13px; font-weight: 600; }
.ojw-field-wide { grid-column: 1 / -1; }
.ojw-app .ojw-field input,
.ojw-app .ojw-field select,
.ojw-app .ojw-field textarea {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 44px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 1px solid var(--ojw-border) !important;
	border-radius: calc(var(--ojw-radius) - 4px) !important;
	background-color: var(--ojw-surface) !important;
	background-image: none !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.025) !important;
	color: var(--ojw-text) !important;
	font: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	outline: none !important;
	transition: border-color .16s ease, box-shadow .16s ease !important;
}
.ojw-app .ojw-field select { padding-right: 36px !important; background-image: linear-gradient(45deg, transparent 50%, var(--ojw-muted) 50%), linear-gradient(135deg, var(--ojw-muted) 50%, transparent 50%) !important; background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50% !important; background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important; }
.ojw-app .ojw-field textarea { min-height: 92px !important; resize: vertical !important; }
.ojw-app .ojw-field input::placeholder,
.ojw-app .ojw-field textarea::placeholder { color: #a1a1aa !important; opacity: 1; }
.ojw-app .ojw-field input:focus,
.ojw-app .ojw-field select:focus,
.ojw-app .ojw-field textarea:focus { border-color: var(--ojw-accent) !important; box-shadow: 0 0 0 3px rgba(24,24,27,.12) !important; }
.ojw-form-hint { margin: 10px 0 0; color: var(--ojw-muted); font-size: 12px; line-height: 1.45; }

.ojw-app .ojw-button,
.ojw-app button.ojw-button,
.ojw-app a.ojw-button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	min-width: 0 !important;
	min-height: 44px !important;
	height: auto !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin: 18px 0 0 !important;
	padding: 10px 16px !important;
	border: 1px solid transparent !important;
	border-radius: calc(var(--ojw-radius) - 4px) !important;
	background-image: none !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-style: normal !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: transform .12s ease, opacity .12s ease, background-color .12s ease, border-color .12s ease !important;
}
.ojw-app button.ojw-button::before,
.ojw-app button.ojw-button::after { content: none !important; display: none !important; }
.ojw-app .ojw-button:hover { opacity: .92 !important; transform: translateY(-1px); }
.ojw-app .ojw-button:active { transform: translateY(0); }
.ojw-app .ojw-button:focus-visible { outline: 2px solid var(--ojw-accent) !important; outline-offset: 2px !important; }
.ojw-app .ojw-button[aria-disabled="true"] { pointer-events: none; cursor: progress !important; opacity: .72 !important; transform: none; }
.ojw-app .ojw-button-primary { border-color: var(--ojw-accent) !important; background-color: var(--ojw-accent) !important; color: #fff !important; }
.ojw-app .ojw-button-secondary { border-color: var(--ojw-border) !important; background-color: var(--ojw-surface) !important; color: var(--ojw-text) !important; box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; }
.ojw-app .ojw-button-secondary:hover { border-color: #a1a1aa !important; background-color: #fafafa !important; }
.ojw-app .ojw-button-block { width: 100% !important; min-height: 48px !important; }
.ojw-app .ojw-button-small { min-height: 36px !important; margin-top: 14px !important; padding: 7px 12px !important; font-size: 13px !important; }
.ojw-button-spinner { display: none; width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: ojw-spin .7s linear infinite; }
.ojw-button.is-loading .ojw-button-spinner { display: inline-block; }
.ojw-button.is-loading > svg { display: none; }
@keyframes ojw-spin { to { transform: rotate(360deg); } }

.ojw-order-hero { padding: 24px; }
.ojw-order-hero-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ojw-order-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid var(--ojw-border); border-radius: calc(var(--ojw-radius) - 3px); background: var(--ojw-border); }
.ojw-order-meta-grid > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 13px 15px; background: var(--ojw-surface); }
.ojw-order-meta-grid span { color: var(--ojw-muted); font-size: 12px; }
.ojw-order-meta-grid strong { overflow: hidden; color: var(--ojw-text); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ojw-badge { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 25px; padding: 3px 9px; border: 1px solid var(--ojw-border); border-radius: 999px; background: #fafafa; color: var(--ojw-text); font-size: 11px; font-weight: 650; line-height: 1; }
.ojw-badge-warning { border-color: #f5d78e; background: #fffbeb; color: #92400e; }
.ojw-alert { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 18px; padding: 13px 15px; border: 1px solid var(--ojw-border); border-radius: calc(var(--ojw-radius) - 2px); background: var(--ojw-surface); color: var(--ojw-text); font-size: 13px; }
.ojw-alert svg { flex: 0 0 auto; margin-top: 1px; }
.ojw-alert div { display: flex; flex-direction: column; gap: 2px; }
.ojw-alert strong { font-weight: 680; }
.ojw-alert span { color: inherit; opacity: .78; }
.ojw-alert-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.ojw-alert-success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.ojw-alert-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ojw-alert-neutral { background: #fafafa; color: #3f3f46; }
.ojw-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ojw-section-heading h3 { margin: 0; color: var(--ojw-text); font-size: 18px; line-height: 1.25; font-weight: 680; letter-spacing: -.015em; }
.ojw-progress-label { color: var(--ojw-muted); font-size: 12px; font-weight: 600; }
.ojw-timeline { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.ojw-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 13px; min-height: 86px; margin: 0; padding: 0 0 25px; }
.ojw-step:last-child { min-height: 0; padding-bottom: 0; }
.ojw-step::before { position: absolute; top: 28px; bottom: -1px; left: 15px; width: 1px; background: var(--ojw-border); content: ""; }
.ojw-step:last-child::before { display: none; }
.ojw-step-marker { position: relative; z-index: 1; display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--ojw-border); border-radius: 999px; background: var(--ojw-surface); color: var(--ojw-muted); }
.ojw-step-marker span { width: 7px; height: 7px; border-radius: 999px; background: var(--ojw-border); }
.ojw-step-marker svg { width: 15px; height: 15px; }
.ojw-step.is-completed .ojw-step-marker { border-color: var(--ojw-accent); background: var(--ojw-accent); color: #fff; }
.ojw-step.is-completed::before { background: var(--ojw-accent); }
.ojw-step.is-current .ojw-step-marker { border: 7px solid var(--ojw-border); background: var(--ojw-accent); box-shadow: 0 0 0 1px var(--ojw-accent); }
.ojw-step-body { min-width: 0; padding-top: 3px; }
.ojw-step-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ojw-step-heading strong { color: var(--ojw-text); font-size: 14px; font-weight: 670; }
.ojw-step-heading time { flex: 0 0 auto; color: var(--ojw-muted); font-size: 11px; }
.ojw-step-body p { margin: 4px 0 0; color: var(--ojw-muted); font-size: 13px; }
.ojw-step.is-upcoming { opacity: .67; }
.ojw-expected { display: inline-block; margin-top: 6px; color: var(--ojw-muted); font-size: 11px; font-weight: 600; }
.ojw-package-list { display: grid; gap: 12px; }
.ojw-package { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; padding: 16px; border: 1px solid var(--ojw-border); border-radius: calc(var(--ojw-radius) - 3px); }
.ojw-package-icon { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: calc(var(--ojw-radius) - 5px); background: #f4f4f5; color: var(--ojw-accent); }
.ojw-package-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ojw-package-heading strong { font-size: 14px; font-weight: 680; }
.ojw-package-meta { display: flex; flex-wrap: wrap; gap: 6px 13px; margin-top: 4px; color: var(--ojw-muted); font-size: 12px; }
.ojw-package-meta span { position: relative; }
.ojw-package-meta span + span::before { position: absolute; left: -8px; content: "·"; }
.ojw-item-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ojw-item-chips span { padding: 3px 7px; border: 1px solid var(--ojw-border); border-radius: 5px; color: var(--ojw-muted); font-size: 11px; }
.ojw-order-items { padding-top: 12px; }
.ojw-order-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ojw-border); }
.ojw-order-item:first-child { border-top: 0; }
.ojw-product-image { width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--ojw-border); border-radius: 8px; background: #fafafa; }
.ojw-product-image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.ojw-product-info { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ojw-product-info strong { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ojw-product-info span { color: var(--ojw-muted); font-size: 11px; }
.ojw-product-total { font-size: 13px; font-weight: 650; white-space: nowrap; }
.ojw-action-form .ojw-button { margin-top: 16px !important; }

.ojw-account-list { --ojw-accent:#18181b;--ojw-surface:#fff;--ojw-text:#18181b;--ojw-muted:#71717a;--ojw-border:#e4e4e7;--ojw-radius:12px; display: grid; gap: 12px; }
.ojw-account-list h2 { margin-bottom: 8px; }
.ojw-account-order { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid var(--ojw-border); border-radius: var(--ojw-radius); background: var(--ojw-surface); color: var(--ojw-text) !important; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ojw-account-order:hover { border-color: #a1a1aa; box-shadow: 0 3px 12px rgba(0,0,0,.05); transform: translateY(-1px); }
.ojw-account-order > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.ojw-account-order span { color: var(--ojw-muted); font-size: 11px; }
.ojw-account-order strong { font-size: 14px; }
.ojw-account-order small { color: var(--ojw-muted); font-size: 11px; }
.ojw-account-order-side { display: flex; align-items: center; gap: 9px; }
.ojw-account-order-side svg { color: var(--ojw-muted); }

@media (min-width: 760px) {
	.ojw-layout-horizontal .ojw-timeline { display: grid; grid-template-columns: repeat(var(--ojw-step-count, 7), minmax(90px, 1fr)); }
	.ojw-layout-horizontal .ojw-step { display: block; min-height: 0; padding: 0 12px 0 0; }
	.ojw-layout-horizontal .ojw-step::before { top: 15px; right: 0; bottom: auto; left: 32px; width: calc(100% - 32px); height: 1px; }
	.ojw-layout-horizontal .ojw-step-marker { margin-bottom: 12px; }
	.ojw-layout-horizontal .ojw-step-heading { display: block; }
	.ojw-layout-horizontal .ojw-step-heading time { display: block; margin-top: 5px; }
	.ojw-layout-horizontal .ojw-step-body p { display: none; }
}
@media (max-width: 680px) {
	.ojw-app { margin: 18px auto; }
	.ojw-card-header, .ojw-card-content, .ojw-order-hero { padding: 18px; }
	.ojw-card-header + .ojw-card-content { padding-top: 18px; }
	.ojw-field-grid, .ojw-order-meta-grid { grid-template-columns: 1fr; }
	.ojw-order-meta-grid { gap: 1px; }
	.ojw-order-hero-main { flex-direction: column; gap: 14px; }
	.ojw-step-heading { flex-direction: column; gap: 1px; }
	.ojw-package { grid-template-columns: 36px minmax(0, 1fr); padding: 13px; }
	.ojw-package-icon { width: 36px; height: 36px; }
	.ojw-package-heading { align-items: flex-start; }
	.ojw-order-item { grid-template-columns: auto minmax(0, 1fr); }
	.ojw-product-total { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.ojw-app *, .ojw-account-order { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}