body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background: #f7f8fc;
    color: #334155;
}

.portal-body { min-height: 100vh; }
.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 270px 1fr; }
.portal-sidebar { background: linear-gradient(180deg, #2c3344 0%, #34445e 100%); color: rgba(255,255,255,.82); padding: 28px 20px; position: sticky; top: 0; height: 100vh; }
.portal-brand { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; margin-bottom: 34px; }
.portal-brand__mark { width: 58px; height: 58px; border-radius: 18px; overflow: hidden; background: #fff; padding: 4px; }
.portal-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.portal-brand strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 1.9rem; line-height: 1; }
.portal-brand small { display: block; color: rgba(255,255,255,.68); margin-top: 4px; }
.portal-nav { display: grid; gap: 10px; }
.portal-nav a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; }
.portal-nav a.is-active, .portal-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.portal-main { min-width: 0; }
.portal-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 26px 32px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.portal-header h1 { margin: 0 0 4px; font-family: "Barlow Condensed", sans-serif; font-size: 2.35rem; color: #223146; }
.portal-header p { margin: 0; color: #64748b; }
.portal-content { padding: 32px; }
.portal-header__actions { display: flex; gap: 14px; align-items: center; }
.portal-user-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #f8fafc; font-weight: 600; }
.portal-stat-card { background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 18px 40px rgba(15,23,42,.06); height: 100%; }
.portal-stat-card span { display: block; color: #64748b; margin-bottom: 10px; }
.portal-stat-card strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 3rem; color: #223146; line-height: 1; }
.portal-form-section { border: 1px solid #e5e7eb; border-radius: 22px; padding: 24px; background: #fff; }
.portal-form-section + .portal-form-section { margin-top: 22px; }
.portal-form-section h3 { font-family: "Barlow Condensed", sans-serif; color: #223146; margin-bottom: 18px; }
.portal-form-section__head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.portal-form-section__head p { margin: 8px 0 0; color: #64748b; }
.form-label.is-required::after { content: " *"; color: #dc2626; font-weight: 800; }
.portal-required-mark { color: #dc2626; font-weight: 800; }
.portal-booking-hero { border-radius: 28px; overflow: hidden; }
.portal-booking-hero .card-body { padding: 30px 32px; background: radial-gradient(circle at top right, rgba(246,139,31,.12), transparent 32%), linear-gradient(135deg, #fff 0%, #fbfcff 100%); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); gap: 24px; align-items: start; }
.portal-booking-hero__eyebrow { display: inline-block; color: #f68b1f; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.portal-booking-hero h2 { margin: 0 0 10px; font-family: "Barlow Condensed", sans-serif; font-size: 3rem; line-height: 1; color: #223146; }
.portal-booking-hero p { margin: 0; color: #64748b; max-width: 720px; }
.portal-booking-hero__stats { display: grid; gap: 14px; }
.portal-booking-hero__stat { padding: 18px 20px; border-radius: 18px; background: #f8fafc; border: 1px solid #e8edf5; }
.portal-booking-hero__stat strong { display: block; margin-bottom: 6px; color: #223146; }
.portal-booking-hero__stat span { color: #64748b; line-height: 1.6; }
.portal-booking-card { border-radius: 28px; overflow: hidden; }
.portal-booking-card__head { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.portal-booking-card__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #fff7ed; color: #b96a12; font-weight: 700; }
.portal-toggle-group { display: flex; gap: 12px; flex-wrap: wrap; }
.portal-toggle-option { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.portal-toggle-option input { position: absolute; opacity: 0; pointer-events: none; }
.portal-toggle-option span { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; min-height: 48px; padding: 0 16px; border-radius: 16px; border: 1px solid #d9e0ea; background: #fff; color: #475569; font-weight: 700; transition: all .2s ease; }
.portal-toggle-option input:checked + span { background: rgba(246,139,31,.12); border-color: rgba(246,139,31,.35); color: #b96a12; }
.portal-upload-card { border: 1px solid #e5e7eb; border-radius: 22px; padding: 20px; background: linear-gradient(180deg, #fff 0%, #fcfdff 100%); height: 100%; }
.portal-upload-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.portal-upload-card__head strong { display: block; color: #223146; margin-bottom: 4px; }
.portal-upload-card__head span { color: #64748b; font-size: .92rem; line-height: 1.5; }
.portal-upload-group { display: grid; gap: 12px; }
.portal-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.portal-upload-row__remove { min-width: 42px; min-height: 42px; }
.portal-booking-actions { margin-top: 28px; display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; }
.portal-booking-actions__note { display: inline-flex; align-items: center; gap: 10px; max-width: 760px; color: #64748b; line-height: 1.6; }
.portal-booking-submit { min-width: 220px; min-height: 52px; border-radius: 16px; }
.portal-form-section .form-control,
.portal-form-section .form-select { min-height: 50px; border-radius: 16px; }
.portal-form-section textarea.form-control { min-height: 120px; }
.portal-form-section .form-control:focus,
.portal-form-section .form-select:focus { border-color: rgba(246,139,31,.45); box-shadow: 0 0 0 .2rem rgba(246,139,31,.12); }
.portal-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2c3344 0%, #3c4c67 100%); padding: 24px; }
.portal-auth-wrap { width: 100%; max-width: 640px; }
.portal-auth-card { background: #fff; border-radius: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.22); padding: 34px; }
.portal-auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.portal-auth-brand img { width: 62px; height: 62px; border-radius: 18px; background: #fff; padding: 4px; }
.portal-auth-brand strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 2rem; color: #223146; line-height: 1; }
.portal-auth-brand span { display: block; color: #64748b; }
.portal-auth-card h1 { font-family: "Barlow Condensed", sans-serif; font-size: 2.8rem; margin-bottom: 8px; color: #223146; }
.portal-auth-card p { color: #64748b; margin-bottom: 24px; }
.portal-auth-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.portal-auth-links a { color: #f68b1f; text-decoration: none; font-weight: 600; }
.ajax-preloader { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 2000; background: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.ajax-preloader.is-visible { display: flex; }
.portal-detail-list { display: grid; gap: 14px; }
.portal-detail-item { background: #f8fafc; border-radius: 16px; padding: 14px 16px; }
.portal-detail-item strong { display: block; margin-bottom: 6px; color: #223146; }

@media (max-width: 991px) {
    .portal-shell { grid-template-columns: 1fr; }
    .portal-sidebar { height: auto; position: relative; }
    .portal-header, .portal-content { padding: 24px 18px; }
    .portal-header { flex-direction: column; align-items: flex-start; }
    .portal-auth-links { flex-direction: column; }
    .portal-booking-hero .card-body { grid-template-columns: 1fr; padding: 24px; }
    .portal-booking-hero h2 { font-size: 2.45rem; }
    .portal-booking-actions { flex-direction: column; align-items: stretch; }
    .portal-booking-submit { width: 100%; }
    .portal-upload-card__head,
    .portal-booking-card__head,
    .portal-form-section__head { flex-direction: column; align-items: flex-start; }
    .portal-upload-row { grid-template-columns: 1fr; }
}