/* ==========================================================================
   PUBLIC PORTAL - UNIFIED STYLESHEET (Cleaned & Optimized)
   ========================================================================== */

/* --- 0. ROOT & BASE --- */
html { font-size: 17px; scroll-behavior: smooth; }
body.portal-body { margin: 0; background: var(--app-page-bg); color: var(--app-text); font-family: var(--app-font-family); -webkit-font-smoothing: antialiased; font-size: 1rem; line-height: 1.65; }
.portal-body button, .portal-body input, .portal-body select, .portal-body textarea { font-family: inherit; }
.portal-body a { text-decoration: none; }
.portal-main { min-height: 65vh; }
.portal-body small, .portal-body .small, .portal-body .form-text, .portal-body .text-muted { line-height: 1.6; }

/* Animations */
.fade-in-up { opacity: 0; transform: translateY(12px); animation: fadeInUp 0.45s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* --- 1. HEADER, NAVBAR & TOPBAR --- */
.portal-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--app-border); box-shadow: 0 1px 2px rgba(15, 23, 42, .03); backdrop-filter: blur(12px); }
.portal-header .navbar { min-height: 76px; }
.portal-topbar { padding: .45rem 0; background: #fff; border-bottom: 1px solid var(--app-border); }
.portal-topbar > .container { min-height: 64px; display: flex; align-items: center; gap: 1rem; }
.portal-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--app-text) !important; text-decoration: none !important; max-width: 310px; min-width: 0; margin-right: 0; }
.portal-brand-logo { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; background: #fff; border: 1px solid var(--app-border); overflow: hidden; }
.portal-brand-logo img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.portal-brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.portal-brand-copy strong { color: var(--app-text); font-size: 1.08rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-brand-copy small { color: var(--app-muted); font-size: .78rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-topbar-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.portal-menu-toggler { flex: 0 0 auto; border-color: var(--app-border); border-radius: 10px; box-shadow: none !important; }
.portal-menu-navbar { padding: 0; background: color-mix(in srgb, var(--app-primary-soft) 48%, white); border-bottom: 1px solid var(--app-border); box-shadow: 0 5px 14px rgba(15, 23, 42, .035); }
.portal-menu-navbar > .container { min-height: 52px; }
.portal-main-nav { width: 100%; justify-content: center; gap: .2rem; }
.portal-main-nav .nav-item { display: flex; align-items: stretch; }
.portal-nav { gap: 2px; }
.portal-nav .nav-link, .portal-menu-navbar .portal-main-nav .nav-link { display: inline-flex; align-items: center; color: #475569; font-weight: 500; border-radius: 9px; padding: .62rem .78rem !important; transition: .16s ease; font-size: .92rem; }
.portal-menu-navbar .portal-main-nav .nav-link { min-height: 50px; justify-content: center; gap: .42rem; padding: .72rem 1.05rem !important; border-radius: 10px; color: var(--app-text); font-weight: 600; white-space: nowrap; }
.portal-nav .nav-link:hover, .portal-nav .nav-link:focus, .portal-menu-navbar .portal-main-nav .nav-link:hover { color: var(--app-primary-dark); background: var(--app-primary-soft-hover); }
.portal-nav .nav-link.active, .portal-menu-navbar .portal-main-nav .nav-link.active { color: var(--app-primary-dark); background: var(--app-primary-soft); font-weight: 600; }
.portal-menu-navbar .portal-main-nav .nav-link.active { background: #fff; box-shadow: 0 4px 13px rgba(15, 23, 42, .07); }
.portal-nav .portal-nav-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--app-primary); font-size: .92rem; line-height: 1; opacity: .82; transition: opacity .18s ease, transform .18s ease; }
.portal-nav .nav-link:hover .portal-nav-icon, .portal-nav .nav-link.active .portal-nav-icon { opacity: 1; transform: translateY(-1px); }

.portal-header-actions { display: flex; align-items: center; margin-left: 1rem; }
.portal-login-btn { border-radius: 999px; padding: .58rem 1rem; color: #fff; border: 1px solid var(--app-primary); background: var(--app-primary); font-weight: 600; font-size: .9rem; }
.portal-login-btn:hover, .portal-login-btn:focus { color: #fff; border-color: var(--app-primary-dark); background: var(--app-primary-dark); }
.portal-user-btn { border: 1px solid var(--app-border); background: #fff; color: var(--app-text); border-radius: 999px; padding: .4rem .8rem .4rem .42rem; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.portal-user-btn:hover { background: var(--app-primary-soft-hover); border-color: color-mix(in srgb, var(--app-primary) 25%, white); color: var(--app-primary-dark); }
.portal-user-avatar { width: 31px; height: 31px; border-radius: 50%; background: var(--app-primary-soft); color: var(--app-primary-dark); display: inline-flex; align-items: center; justify-content: center; }
.portal-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.portal-dropdown { border: 1px solid var(--app-border); border-radius: 12px; box-shadow: 0 14px 36px rgba(15, 23, 42, .10); padding: .45rem; }
.portal-dropdown .dropdown-item { color: var(--app-text); border-radius: 8px; padding: .62rem .75rem; }
.portal-dropdown .dropdown-item:hover, .portal-dropdown .dropdown-item:focus { color: var(--app-primary-dark); background: var(--app-primary-soft-hover); }

/* Notifications */
.portal-notification-wrap { position: relative; }
.portal-notification-btn { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--app-border); border-radius: 50%; background: #fff; color: var(--app-text); box-shadow: 0 5px 15px rgba(15, 23, 42, .045); transition: all .18s ease; }
.portal-notification-btn:hover, .portal-notification-btn:focus, .portal-notification-btn.show { color: var(--app-primary); background: var(--app-primary-soft-hover); border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border)); box-shadow: 0 8px 20px rgba(15, 23, 42, .07); transform: translateY(-1px); }
.portal-notification-btn i { font-size: 1.08rem; }
.portal-notification-badge { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; display: none; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #dc3545; color: #fff; font-size: .62rem; font-weight: 700; line-height: 1; box-shadow: 0 4px 10px rgba(220, 53, 69, .22); }
.portal-notification-menu { width: min(390px, calc(100vw - 24px)); padding: 0; overflow: hidden; border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-card-bg); box-shadow: 0 20px 55px rgba(15, 23, 42, .16); }
.portal-notification-head { padding: 1rem 1.05rem .9rem; background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft) 72%, white), #fff); border-bottom: 1px solid var(--app-border); }
.portal-notification-head-title { display: flex; align-items: center; gap: .48rem; color: var(--app-text); font-size: 1rem; font-weight: 700; }
.portal-notification-head-title i { color: var(--app-primary); }
.portal-notification-head-meta { margin-top: .25rem; color: var(--app-muted); font-size: .78rem; }
.portal-notification-list { max-height: 370px; overflow-y: auto; background: #fff; }
.portal-notification-item { position: relative; display: flex; gap: .72rem; padding: .9rem 1rem; border-bottom: 1px solid var(--app-border); cursor: pointer; transition: background .16s ease; }
.portal-notification-item:last-child { border-bottom: 0; }
.portal-notification-item:hover { background: var(--app-primary-soft-hover); }
.portal-notification-item.is-read { opacity: .68; }
.portal-notification-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: .42rem; border-radius: 50%; background: var(--app-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 10%, transparent); }
.portal-notification-item.is-read .portal-notification-dot { background: #adb5bd; box-shadow: none; }
.portal-notification-time { color: var(--app-muted); font-size: .74rem; line-height: 1.3; }
.portal-notification-title { margin-top: .2rem; color: var(--app-text); font-size: .88rem; font-weight: 650; line-height: 1.45; }
.portal-notification-message { margin-top: .18rem; color: var(--app-muted); font-size: .8rem; line-height: 1.5; }
.portal-notification-source { flex-shrink: 0; padding: .22rem .45rem; border-radius: 999px; background: var(--app-primary-soft); color: var(--app-primary-dark); font-size: .68rem; font-weight: 700; }
.portal-notification-source.source-cctv { background: #fdecec; color: #c92a3c; }
.portal-notification-footer { padding: .72rem; background: #fff; border-top: 1px solid var(--app-border); }
.portal-notification-footer .btn { border-radius: 10px; font-size: .75rem; font-weight: 600; }
.portal-notification-empty { padding: 2rem 1rem; color: var(--app-muted); text-align: center; font-size: .8rem; }
.portal-notification-empty i { display: block; margin-bottom: .45rem; color: var(--app-primary); font-size: 1.45rem; opacity: .7; }

/* --- 2. PUBLIC LANDING / FRONT HERO --- */
.portal-hero { position: relative; overflow: hidden; color: var(--app-text); padding: 84px 0 78px; background: linear-gradient(90deg, rgba(248,250,252,.98) 0%, rgba(248,250,252,.95) 32%, rgba(248,250,252,.84) 49%, rgba(248,250,252,.56) 66%, rgba(248,250,252,.22) 100%), url('../img/hero-customer-service.jpg') center right / cover no-repeat; border-bottom: 1px solid var(--app-border); }
.portal-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--app-primary) 4%, transparent), transparent 45%); }
.portal-hero::after { content: ""; position: absolute; width: 360px; height: 360px; left: -220px; bottom: -250px; border-radius: 50%; background: color-mix(in srgb, var(--app-primary) 8%, transparent); pointer-events: none; }
.portal-hero .container, .portal-auth-section .container { position: relative; z-index: 2; }
.portal-kicker, .portal-section-kicker, .portal-page-kicker, .report-kicker, .timeline-kicker, .confidential-kicker, .track-kicker, .cctv-kicker, .cctv-form-kicker, .tracking-kicker, .my-issues-kicker, .help-kicker, .success-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 700; letter-spacing: .04em; }
.portal-kicker { color: var(--app-primary-dark); background: rgba(255, 255, 255, .80); border: 1px solid color-mix(in srgb, var(--app-primary) 18%, white); border-radius: 999px; padding: .42rem .72rem; box-shadow: 0 5px 18px rgba(15, 23, 42, .04); backdrop-filter: blur(8px); }
.portal-kicker i, .portal-section-kicker i, .portal-page-kicker i, .report-kicker i, .timeline-kicker i, .confidential-kicker i, .track-kicker i, .cctv-kicker i, .cctv-form-kicker i, .tracking-kicker i, .my-issues-kicker i, .help-kicker i { color: var(--app-primary); }
.portal-section-kicker { margin-bottom: .5rem; }
.portal-hero-title { max-width: 820px; color: var(--app-text); font-size: clamp(2.15rem, 4.2vw, 4rem); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.portal-hero-text { max-width: 720px; color: var(--app-muted); font-size: 1.08rem; line-height: 1.8; text-shadow: 0 1px 0 rgba(255, 255, 255, .65); }
.portal-hero-primary, .portal-hero-outline { border-radius: 999px; padding: .78rem 1.35rem; font-weight: 650; transition: all .16s ease; }
.portal-hero-primary { color: #fff; background: var(--app-primary); border: 1px solid var(--app-primary); box-shadow: 0 10px 24px color-mix(in srgb, var(--app-primary) 18%, transparent); }
.portal-hero-primary:hover, .portal-hero-primary:focus { color: #fff; background: var(--app-primary-dark); border-color: var(--app-primary-dark); transform: translateY(-1px); }
.portal-hero-outline { color: var(--app-primary-dark); background: rgba(255, 255, 255, .84); border: 1px solid color-mix(in srgb, var(--app-primary) 42%, white); backdrop-filter: blur(8px); }
.portal-hero-outline:hover, .portal-hero-outline:focus { color: #fff; background: var(--app-primary); border-color: var(--app-primary); }

.portal-highlight-card { height: 100%; display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(255, 255, 255, .76); background: rgba(255, 255, 255, .80); border-radius: 16px; padding: .92rem; box-shadow: 0 8px 22px rgba(15, 23, 42, .045); backdrop-filter: blur(10px); }
.portal-highlight-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-primary-dark); background: var(--app-primary-soft); font-size: 1rem; }
.portal-highlight-value { color: var(--app-text); font-size: .92rem; font-weight: 700; margin-bottom: .12rem; }
.portal-highlight-label { color: var(--app-muted); font-size: .76rem; line-height: 1.45; }
.portal-section { padding: 76px 0; }
.portal-section-white { background: #fff; }
.portal-section-heading { max-width: 720px; }
.portal-section-heading h2, .portal-side-title { color: var(--app-text); font-weight: 700; letter-spacing: -.015em; }
.portal-section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); }
.portal-section-heading p, .portal-side-text { color: var(--app-muted); line-height: 1.78; }
.portal-side-title { margin-top: .25rem; margin-bottom: .85rem; font-size: 2rem; line-height: 1.3; }

/* Service Cards */
.portal-service-card { display: block; background: var(--app-card-bg); color: var(--app-text); border: 1px solid var(--app-border); border-radius: 20px; padding: 1.4rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .045); transition: all .18s ease; }
.portal-service-card:hover { color: var(--app-text); border-color: color-mix(in srgb, var(--app-primary) 26%, white); box-shadow: 0 16px 38px rgba(15, 23, 42, .085); transform: translateY(-4px); }
.portal-service-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--app-primary-soft); color: var(--app-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; }
.portal-service-badge { border-radius: 999px; background: var(--app-primary-soft); color: var(--app-primary-dark); border: 1px solid color-mix(in srgb, var(--app-primary) 15%, white); font-size: .76rem; font-weight: 650; padding: .3rem .58rem; }
.portal-service-card h3, .portal-step-card h3 { margin: 1.15rem 0 .5rem; color: var(--app-text); font-size: 1.08rem; font-weight: 700; }
.portal-service-card p, .portal-step-card p { color: var(--app-muted); line-height: 1.7; margin-bottom: 1.05rem; font-size: .94rem; }
.portal-service-more { color: var(--app-primary); font-size: .9rem; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }

/* Steps */
.portal-step-card { position: relative; background: #fff; border: 1px solid var(--app-border); border-radius: 20px; padding: 1.3rem; box-shadow: 0 8px 22px rgba(15, 23, 42, .04); }
.portal-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.portal-step-number { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--app-primary-dark); font-size: .84rem; font-weight: 700; }
.portal-step-icon { width: 50px; height: 50px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-primary); background: var(--app-primary-soft); font-size: 1.3rem; }
.portal-step-card p { margin-bottom: 0; }

/* CTA */
.portal-cta { position: relative; overflow: hidden; color: #fff; padding: 2rem; border-radius: 26px; background: radial-gradient(circle at 92% 10%, rgba(255, 255, 255, .12), transparent 24%), linear-gradient(135deg, var(--app-primary-dark), var(--app-primary)); box-shadow: 0 18px 44px color-mix(in srgb, var(--app-primary) 18%, transparent); }
.portal-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; }
.portal-cta p { color: rgba(255, 255, 255, .80); line-height: 1.75; }
.portal-cta-btn { color: var(--app-primary-dark); border-radius: 999px; font-weight: 650; padding: .78rem 1.3rem; }

/* --- 3. AUTHENTICATION & LOGIN PANELS --- */
.portal-login-panel { background: rgba(255, 255, 255, .98); color: var(--app-text); border: 1px solid rgba(255, 255, 255, .56); border-radius: 26px; padding: 1.55rem; box-shadow: 0 24px 65px rgba(15, 23, 42, .22); }
.portal-hero .portal-login-panel { background: rgba(255, 255, 255, .94); border-color: rgba(255, 255, 255, .88); box-shadow: 0 24px 65px rgba(15, 23, 42, .18); backdrop-filter: blur(14px); }
.portal-login-head { display: flex; align-items: center; gap: 13px; margin-bottom: 1.15rem; }
.portal-login-icon { width: 54px; height: 54px; border-radius: 17px; background: var(--app-primary-soft); color: var(--app-primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; flex: 0 0 54px; }
.portal-panel-eyebrow { color: var(--app-primary); font-size: .76rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; }
.portal-login-head h2 { margin: 0; color: var(--app-text); font-size: 1.35rem; font-weight: 700; }
.portal-login-text { color: var(--app-muted); line-height: 1.75; margin-bottom: 1.15rem; }
.portal-panel-login-btn { color: #fff; background: var(--app-primary); border: 1px solid var(--app-primary); border-radius: 999px; padding: .8rem 1rem; font-weight: 650; }
.portal-panel-login-btn:hover { color: #fff; background: var(--app-primary-dark); border-color: var(--app-primary-dark); }
.portal-panel-divider, .portal-auth-divider { position: relative; text-align: center; margin: 1.3rem 0 1rem; color: var(--app-muted); font-size: .78rem; }
.portal-panel-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid var(--app-border); }
.portal-panel-divider span { position: relative; z-index: 1; background: #fff; padding: 0 .7rem; }
.portal-quick-links, .portal-account-actions { display: grid; gap: .65rem; }
.portal-quick-links > a, .portal-account-action { display: flex; align-items: center; gap: 11px; padding: .78rem; border: 1px solid var(--app-border); border-radius: 13px; color: var(--app-text); transition: .16s ease; }
.portal-quick-links > a:hover, .portal-account-action:hover { border-color: color-mix(in srgb, var(--app-primary) 26%, white); background: var(--app-primary-soft-hover); color: var(--app-primary-dark); transform: translateY(-1px); }
.portal-quick-links strong, .portal-account-action strong { display: block; font-size: .92rem; }
.portal-quick-links small, .portal-account-action small { display: block; color: var(--app-muted); font-size: .76rem; margin-top: 2px; line-height: 1.4; }
.portal-quick-icon, .portal-account-action > span { width: 36px; height: 36px; border-radius: 11px; background: var(--app-primary-soft); color: var(--app-primary-dark); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; }
.portal-login-note { margin-top: 1rem; color: var(--app-muted); font-size: .78rem; text-align: center; }
.portal-account-name { color: var(--app-text); font-size: 1.2rem; font-weight: 700; }
.portal-account-email { color: var(--app-muted); font-size: .86rem; margin-top: 2px; margin-bottom: 1rem; }

.portal-auth-section { position: relative; overflow: hidden; min-height: calc(100vh - 76px); display: flex; align-items: center; padding: 72px 0; background: linear-gradient(90deg, rgba(248,250,252,.97) 0%, rgba(248,250,252,.93) 44%, rgba(248,250,252,.72) 68%, rgba(248,250,252,.42) 100%), url('../img/hero-customer-service.jpg') center right / cover no-repeat; }
.portal-auth-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--app-primary) 8%, transparent), transparent 28%); }
.portal-auth-copy { max-width: 660px; }
.portal-auth-title { color: var(--app-text); font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; margin-bottom: 1.1rem; }
.portal-auth-title span { display: block; color: var(--app-primary-dark); }
.portal-auth-lead { color: var(--app-muted); font-size: 1.04rem; line-height: 1.82; max-width: 620px; margin-bottom: 1.5rem; }
.portal-auth-benefits { display: grid; gap: .85rem; max-width: 590px; }
.portal-auth-benefit { display: flex; align-items: flex-start; gap: 12px; padding: .82rem .9rem; border: 1px solid rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .66); border-radius: 15px; box-shadow: 0 8px 24px rgba(15, 23, 42, .035); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.portal-auth-benefit-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--app-primary-soft); color: var(--app-primary-dark); }
.portal-auth-benefit strong { display: block; color: var(--app-text); font-size: .92rem; margin-bottom: 2px; }
.portal-auth-benefit small { display: block; color: var(--app-muted); font-size: .78rem; line-height: 1.5; }
.portal-auth-card { position: relative; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.58)); border: 1px solid rgba(255,255,255,.76); border-radius: 26px; padding: 1.7rem; box-shadow: 0 24px 68px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.65); backdrop-filter: blur(24px) saturate(145%); -webkit-backdrop-filter: blur(24px) saturate(145%); }
.portal-auth-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 1rem; }
.portal-auth-logo { width: 58px; height: 58px; flex: 0 0 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 17px; background: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.80); overflow: hidden; }
.portal-auth-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.portal-auth-logo-fallback { color: var(--app-primary); background: var(--app-primary-soft); font-size: 1.5rem; }
.portal-auth-eyebrow { color: var(--app-primary); font-size: .77rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; }
.portal-auth-card-head h2 { margin: 0; color: var(--app-text); font-size: 1.5rem; font-weight: 700; }
.portal-auth-card-text { color: var(--app-muted); line-height: 1.72; margin-bottom: 1.3rem; }
.portal-auth-label { color: var(--app-text); font-size: .88rem; font-weight: 600; }
.portal-auth-input-group .input-group-text, .portal-auth-input-group .form-control { min-height: 50px; border-color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .66); }
.portal-auth-input-group .input-group-text { color: var(--app-primary-dark); border-radius: 12px 0 0 12px; padding-left: .9rem; padding-right: .9rem; }
.portal-auth-input-group .form-control { color: var(--app-text); border-radius: 0 12px 12px 0; }
.portal-auth-input-group .form-control::placeholder { color: var(--app-muted); opacity: .72; }
.portal-auth-input-group .form-control:focus { background: rgba(255, 255, 255, .86); border-color: var(--app-primary-bright); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 13%, transparent); }
.portal-auth-card .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.portal-auth-card .form-check-label { color: var(--app-muted); font-size: .84rem; }
.portal-auth-small-link { color: var(--app-primary-dark); font-size: .84rem; font-weight: 600; }
.portal-auth-small-link:hover { color: var(--app-primary); }
.portal-auth-submit { min-height: 50px; border-radius: 999px; color: #fff; border: 1px solid var(--app-primary); background: var(--app-primary); font-weight: 700; box-shadow: 0 10px 24px color-mix(in srgb, var(--app-primary) 18%, transparent); }
.portal-auth-submit:hover, .portal-auth-submit:focus { color: #fff; background: var(--app-primary-dark); border-color: var(--app-primary-dark); }
.portal-auth-divider::before { border-top: 1px solid rgba(255, 255, 255, .78); }
.portal-auth-divider span { display: inline-block; padding: 0 .7rem; background: rgba(255, 255, 255, .45); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.portal-auth-register { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--app-primary-dark); background: rgba(255, 255, 255, .48); border: 1px solid rgba(255, 255, 255, .78); font-weight: 650; }
.portal-auth-register:hover, .portal-auth-register:focus { color: var(--app-primary-dark); background: rgba(255, 255, 255, .78); border-color: color-mix(in srgb, var(--app-primary) 24%, white); }
.portal-auth-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 1rem; color: var(--app-muted); font-size: .77rem; line-height: 1.55; }
.portal-auth-note i { color: var(--app-primary); margin-top: 2px; }

/* --- 4. SHARED INNER-PAGE SHELL & HEROES --- */
.portal-page, .portal-report-page, .portal-timeline-page, .portal-tracking-page, .portal-confidential-page, .portal-confidential-track-page, .portal-confidential-success-page, .portal-cctv-page, .portal-cctv-form-page, .portal-my-issues-page, .portal-help-page { position: relative; min-height: 70vh; padding: 48px 0 76px; background: radial-gradient(circle at 7% 3%, color-mix(in srgb, var(--app-primary) 7%, transparent), transparent 24%), var(--app-page-bg); }
.portal-cctv-form-page { padding-top: 42px; }
.portal-my-issues-page > .app-content-header { display: none; }
.portal-my-issues-page > .app-content > .container-fluid { max-width: 1320px; margin: 0 auto; padding-left: 12px; padding-right: 12px; }
.cctv-form-wrap { width: min(100%, 1060px); margin: 0 auto; }
.portal-page-narrow { max-width: 980px; margin-inline: auto; }
.portal-page-medium { max-width: 1180px; margin-inline: auto; }
.portal-page-wide { max-width: 1360px; margin-inline: auto; }

/* Unified Inner Page Hero Card */
.portal-page-hero, .report-page-hero, .timeline-hero, .confidential-hero, .track-page-hero, .cctv-hero, .cctv-form-hero, .tracking-page-head, .timeline-page-head, .page-title-box, .success-page-hero, .my-issues-hero, .help-hero { position: relative; overflow: hidden; margin-bottom: 1.35rem; padding: 2rem 2.1rem; border: 1px solid color-mix(in srgb, var(--app-primary) 18%, white); border-radius: 26px; background: linear-gradient(120deg, color-mix(in srgb, var(--app-primary-soft) 88%, white) 0%, rgba(255,255,255,.97) 54%, color-mix(in srgb, var(--app-primary) 5%, white) 100%); box-shadow: 0 18px 44px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.82); }
.success-page-hero { border-color: color-mix(in srgb, #198754 18%, white); background: linear-gradient(120deg, color-mix(in srgb, #e9f7ef 82%, white) 0%, rgba(255, 255, 255, .97) 55%, color-mix(in srgb, var(--app-primary) 4%, white) 100%); }
.portal-page-hero::before, .report-page-hero::before, .timeline-hero::before, .confidential-hero::before, .track-page-hero::before, .cctv-hero::before, .cctv-form-hero::before, .tracking-page-head::before, .timeline-page-head::before, .page-title-box::before, .my-issues-hero::before, .help-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, var(--app-primary-bright), var(--app-primary)); }
.success-page-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #20c997, #198754); }
.portal-page-hero::after, .report-page-hero::after, .timeline-hero::after, .confidential-hero::after, .track-page-hero::after, .cctv-hero::after, .cctv-form-hero::after, .tracking-page-head::after, .timeline-page-head::after, .page-title-box::after, .my-issues-hero::after, .help-hero::after { content: ""; position: absolute; width: 250px; height: 250px; right: -80px; top: -118px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--app-primary) 14%, transparent), color-mix(in srgb, var(--app-primary) 5%, transparent) 46%, transparent 72%); }
.success-page-hero::after { content: ""; position: absolute; width: 250px; height: 250px; right: -80px; top: -118px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(25, 135, 84, .13), rgba(25, 135, 84, .04) 45%, transparent 72%); }
.portal-page-hero-content, .portal-page-hero-side, .report-hero-content, .report-hero-side, .timeline-hero-content, .timeline-hero-side, .confidential-hero-content, .confidential-hero-side, .track-hero-content, .track-hero-side, .cctv-hero-content, .cctv-form-hero-content, .cctv-hero-side, .cctv-form-hero-side, .tracking-head-content, .timeline-head-content, .tracking-head-side, .timeline-head-actions, .success-hero-content, .success-hero-side, .my-issues-hero-content, .my-issues-hero-actions, .help-hero-content, .help-hero-side, .page-title-box > * { position: relative; z-index: 2; }

/* Kickers & Tags */
.portal-page-kicker, .report-kicker, .timeline-kicker, .confidential-kicker, .track-kicker, .cctv-kicker, .cctv-form-kicker, .tracking-kicker, .my-issues-kicker, .help-kicker, .success-kicker { gap: .48rem; margin-bottom: .72rem; padding: .38rem .72rem; background: rgba(255, 255, 255, .74); box-shadow: 0 5px 14px rgba(15, 23, 42, .035); }
.success-kicker { border-color: rgba(25, 135, 84, .14); color: #146c43; }

/* Titles & Descriptions */
.portal-page-title, .report-page-title, .timeline-title, .confidential-page-title, .confidential-title, .track-page-title, .cctv-page-title, .cctv-form-title, .tracking-page-title, .timeline-page-title, .success-page-title, .my-issues-title, .help-title, .page-title-box h4 { margin: 0 0 .5rem; color: var(--app-text); font-size: clamp(1.75rem, 3.2vw, 2.35rem); line-height: 1.2; font-weight: 750; letter-spacing: -.035em; }
.cctv-form-title-en { margin: 0 0 .6rem; color: var(--app-primary-dark); font-size: .78rem; font-weight: 650; }
.tracking-page-subtitle { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; color: var(--app-muted); font-size: .9rem; }
.tracking-page-subtitle::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--app-primary-bright); box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-primary) 8%, transparent); }
.portal-page-description, .report-page-description, .confidential-page-description, .confidential-desc, .track-page-description, .cctv-page-description, .cctv-form-description, .success-page-description, .my-issues-description, .help-description, .page-title-box .text-muted { max-width: 760px; margin: 0; color: var(--app-muted); font-size: .98rem; line-height: 1.75; }

/* Hero Side Icons */
.portal-page-hero-side, .report-hero-side, .confidential-hero-side, .track-hero-side, .cctv-hero-side, .cctv-form-hero-side, .success-hero-side, .help-hero-side { display: flex; justify-content: flex-end; align-items: center; }
.portal-page-hero-icon, .report-hero-icon, .timeline-hero-icon, .confidential-hero-icon, .track-hero-icon, .cctv-hero-icon, .cctv-form-hero-icon, .help-hero-icon, .success-hero-icon { width: 104px; height: 104px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .9); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.86), color-mix(in srgb, var(--app-primary-soft) 72%, white)); color: var(--app-primary); font-size: 2.1rem; box-shadow: 0 16px 36px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.9); }
.success-hero-icon { color: #198754; background: linear-gradient(145deg, rgba(255, 255, 255, .9), #eefaf3); }

/* Meta & Step Chips */
.portal-page-meta, .timeline-meta, .timeline-summary, .help-user-meta, .cctv-form-meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: .9rem; color: var(--app-muted); }
.portal-page-meta-item, .timeline-meta-item, .timeline-summary-item, .help-meta-chip, .cctv-form-meta-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; }
.portal-page-meta-item i, .timeline-meta-item i, .timeline-summary-item i, .help-meta-chip i, .cctv-form-meta-chip i { color: var(--app-primary); }
.portal-page-steps, .report-step-strip, .confidential-step-strip, .confidential-steps, .cctv-step-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.portal-page-step, .report-step-chip, .confidential-step-chip, .confidential-step, .cctv-step-chip { display: inline-flex; align-items: center; gap: .42rem; padding: .43rem .68rem; border: 1px solid rgba(255, 255, 255, .82); border-radius: 999px; background: rgba(255, 255, 255, .68); color: var(--app-muted); font-size: .72rem; font-weight: 600; }
.portal-page-step strong, .report-step-chip strong, .confidential-step-chip strong, .confidential-step b { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--app-primary-soft); color: var(--app-primary-dark); font-size: .65rem; }
.cctv-step-chip i { color: var(--app-primary); }

/* Nav Links */
.tracking-home-link, .timeline-back-btn, .cctv-form-back { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; border: 1px solid color-mix(in srgb, var(--app-primary) 20%, white); border-radius: 999px; background: rgba(255, 255, 255, .82); color: var(--app-primary-dark); font-weight: 650; text-decoration: none; box-shadow: 0 8px 22px rgba(15, 23, 42, .045); backdrop-filter: blur(10px); transition: all .18s ease; }
.cctv-form-back { border-radius: 11px; border-color: var(--app-border); background: #fff; color: var(--app-muted); font-size: .75rem; min-height: 40px; padding: .48rem .72rem; }
.tracking-home-link:hover, .timeline-back-btn:hover, .cctv-form-back:hover { color: var(--app-primary); background: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(15, 23, 42, .07); }

/* --- 5. SUMMARY CARDS --- */
.portal-summary-grid { margin-bottom: 1rem; }
.portal-summary-card, .my-summary-card, .summary-card { --summary-accent: var(--app-primary); position: relative; height: 100%; overflow: hidden; display: flex; align-items: center; gap: .85rem; min-height: 102px; padding: 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--summary-accent) 13%, var(--app-border)); border-radius: 18px; background: linear-gradient(145deg, #fff 0%, color-mix(in srgb, var(--summary-accent) 3.5%, white) 100%); box-shadow: 0 8px 24px rgba(15, 23, 42, .045); transition: all .18s ease; }
.portal-summary-card::before, .my-summary-card::before, .summary-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--summary-accent), color-mix(in srgb, var(--summary-accent) 38%, white)); }
.portal-summary-card:hover, .my-summary-card:hover, .summary-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, .075) !important; }
.portal-summary-card.success, .my-summary-card.evaluate, .summary-card-success, .summary-card.border-start-success { --summary-accent: #198754; }
.portal-summary-card.warning, .summary-card-progress { --summary-accent: #c68a00; }
.portal-summary-card.danger, .summary-card-danger { --summary-accent: #dc3545; }
.summary-card-total { --summary-accent: var(--app-primary-dark); }
.summary-card-new, .summary-card.border-start-primary, .summary-card.border-start-info { --summary-accent: var(--app-primary); }
.summary-card-approval { --summary-accent: #7250c7; }
.portal-summary-icon, .my-summary-icon, .summary-icon, .summary-card .icon-box { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; background: color-mix(in srgb, var(--summary-accent) 10%, white) !important; color: var(--summary-accent) !important; font-size: 1.18rem; z-index: 1; }
.portal-summary-label, .my-summary-label, .summary-label, .summary-card .label { color: var(--app-muted); font-size: .82rem; font-weight: 650; }
.portal-summary-value, .my-summary-value, .summary-value, .summary-card .value { margin-top: .08rem; color: var(--summary-accent) !important; font-size: 1.8rem; line-height: 1.05; font-weight: 780; }
.summary-card .card-body { position: relative; z-index: 1; padding: 1.2rem 1.25rem; width: 100%; }

/* --- 6. FORMS & INPUT CONTROLS --- */
.portal-form, .portal-issue-form, .portal-confidential-form, .portal-track-form, .portal-cctv-form-page { color: var(--app-text); }
.portal-form-grid, .portal-issue-form, .portal-confidential-form { display: grid; gap: 1rem; }
.portal-form-section, .cctv-form-section, .portal-issue-form > .mb-4, .portal-confidential-form > .mb-4 { position: relative; overflow: hidden; margin-bottom: 1rem !important; padding: 1.35rem 1.4rem 1.45rem; border: 1px solid var(--app-border); border-radius: 21px; background: var(--app-card-bg); box-shadow: 0 9px 26px rgba(15, 23, 42, .045); }
.cctv-form-section { padding: 0; border-radius: 20px; }
.portal-form-section::before, .cctv-form-section::before, .portal-issue-form > .mb-4::before, .portal-confidential-form > .mb-4::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 35%, white)); }
.cctv-form-section::before { inset: 0 auto 0 0; width: 3px; height: auto; background: linear-gradient(180deg, var(--app-primary-bright), var(--app-primary)); }
.portal-form-section-header, .cctv-form-section-head, .portal-issue-form > .mb-4 > .d-flex.align-items-center, .portal-confidential-form > .mb-4 > .d-flex.align-items-center { margin-bottom: 1.15rem !important; padding-bottom: .9rem; border-bottom: 1px solid var(--app-border); }
.cctv-form-section-head { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft) 32%, white), #fff 58%); margin-bottom: 0 !important; }
.cctv-form-section-body { padding: 1.2rem; }
.portal-form-section-title, .issue-section-title, .confidential-section-title, .cctv-form-section-title { display: flex; align-items: center; gap: .65rem; color: var(--app-text); font-size: 1.02rem; font-weight: 700 !important; margin: 0; }
.portal-form-section-icon, .issue-section-title i, .confidential-section-title i, .cctv-form-section-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--app-primary-soft); color: var(--app-primary); font-size: .98rem; }
.cctv-form-section-no { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--app-primary-soft); color: var(--app-primary-dark); font-size: .82rem; font-weight: 800; }

.portal-form .form-label, .portal-issue-form .form-label, .portal-confidential-form .form-label, .portal-track-form .form-label, .portal-cctv-form-page .form-label { margin-bottom: .42rem; color: var(--app-text); font-size: .9rem; font-weight: 650; }
.portal-form .form-control, .portal-form .form-select, .portal-issue-form .form-control, .portal-issue-form .form-select, .portal-confidential-form .form-control, .portal-confidential-form .form-select, .portal-track-form .form-control, .portal-track-form .form-select, .portal-cctv-form-page .form-control, .portal-cctv-form-page .form-select { min-height: 45px; border: 1px solid var(--app-border); border-radius: 12px; background-color: #fff; color: var(--app-text); font-size: .92rem; transition: all .16s ease; }
.portal-form textarea.form-control, .portal-issue-form textarea.form-control, .portal-confidential-form textarea.form-control, .portal-cctv-form-page textarea.form-control { min-height: 112px; resize: vertical; line-height: 1.65; }
.portal-form .form-control::placeholder, .portal-issue-form .form-control::placeholder, .portal-confidential-form .form-control::placeholder, .portal-track-form .form-control::placeholder, .portal-cctv-form-page .form-control::placeholder { color: #9aa4b2; opacity: .88; }
.portal-form .form-control:focus, .portal-form .form-select:focus, .portal-issue-form .form-control:focus, .portal-issue-form .form-select:focus, .portal-confidential-form .form-control:focus, .portal-confidential-form .form-select:focus, .portal-track-form .form-control:focus, .portal-track-form .form-select:focus, .portal-cctv-form-page .form-control:focus, .portal-cctv-form-page .form-select:focus { border-color: var(--app-primary-bright); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 11%, transparent); }
.portal-form .form-control[readonly], .portal-issue-form .form-control[readonly], .portal-confidential-form .form-control[readonly], .portal-cctv-form-page .form-control[readonly] { background: color-mix(in srgb, var(--app-page-bg) 78%, white); color: var(--app-muted); }
.portal-form .form-text, .portal-issue-form .form-text, .portal-confidential-form .form-text, .portal-track-form .form-text, .portal-cctv-form-page .form-text { margin-top: .38rem; color: var(--app-muted); font-size: .78rem; line-height: 1.55; }

.portal-choice-card, .privacy-choice { position: relative; padding: 1rem 1.05rem; border: 1px solid var(--app-border); border-radius: 16px; background: #fff; cursor: pointer; transition: all .16s ease; }
.portal-choice-card:hover, .privacy-choice:hover { border-color: color-mix(in srgb, var(--app-primary) 20%, var(--app-border)); transform: translateY(-1px); }
.portal-choice-card.active, .privacy-choice.active { border-color: color-mix(in srgb, var(--app-primary) 45%, white); background: color-mix(in srgb, var(--app-primary-soft) 60%, white); box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--app-primary) 8%, transparent); }

/* Form Action Buttons */
.portal-form-actions, .issue-form-actions, .confidential-form-actions, .confidential-actions, .track-actions, .cctv-form-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding-top: .25rem; }
.cctv-form-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: 1.15rem; padding: 1rem 1.1rem; border: 1px solid var(--app-border); border-radius: 17px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft) 24%, white), #fff); }
.portal-btn-primary, .issue-submit-btn, .confidential-submit-btn, .confidential-submit, .track-submit-btn, .cctv-form-btn-submit { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--app-primary); border-radius: 14px; background: var(--app-primary); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 10px 24px color-mix(in srgb, var(--app-primary) 18%, transparent); text-decoration: none; }
.portal-btn-primary:hover, .portal-btn-primary:focus, .issue-submit-btn:hover, .issue-submit-btn:focus, .confidential-submit:hover, .confidential-submit:focus, .track-submit-btn:hover, .track-submit-btn:focus, .cctv-form-btn-submit:hover, .cctv-form-btn-submit:focus { color: #fff; background: var(--app-primary-dark); border-color: var(--app-primary-dark); }
.portal-btn-secondary, .issue-reset-btn, .confidential-reset, .track-reset-btn, .cctv-form-btn-reset { min-width: 135px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--app-border); border-radius: 14px; background: #fff; color: var(--app-muted); font-weight: 650; font-size: .9rem; text-decoration: none; }
.portal-btn-secondary:hover, .issue-reset-btn:hover, .confidential-reset:hover, .track-reset-btn:hover, .cctv-form-btn-reset:hover { color: var(--app-primary-dark); background: var(--app-primary-soft-hover); border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border)); }

/* --- 7. TIMELINE & PROGRESS --- */
.step-progress-wrapper { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 12px; }
.step-progress-wrapper::before { content: ""; position: absolute; top: 21px; left: 36px; right: 36px; height: 3px; border-radius: 999px; background: var(--app-border); z-index: 1; }
.step-progress-item { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.step-circle { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border: 4px solid #fff; border-radius: 50%; background: #edf1f5; color: #7b8794; font-size: .86rem; font-weight: 750; box-shadow: 0 0 0 2px var(--app-border); transition: all .25s ease; }
.step-text { max-width: 120px; margin-top: .62rem; color: var(--app-muted); font-size: .8rem; line-height: 1.45; font-weight: 600; }
.step-progress-item.is-done .step-circle { background: #198754; color: #fff; box-shadow: 0 0 0 2px #198754; }
.step-progress-item.is-done .step-text { color: #198754; }
.step-progress-item.is-active .step-circle { background: var(--app-primary); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary) 17%, transparent); transform: scale(1.08); }
.step-progress-item.is-active .step-text { color: var(--app-primary-dark); font-weight: 700; }
.step-progress-item.is-warning .step-circle { background: #ffc107; color: #523d00; box-shadow: 0 0 0 4px rgba(255, 193, 7, .22); }
.step-progress-item.is-warning .step-text { color: #8a6900; font-weight: 700; }
.step-progress-item.is-cancel .step-circle { background: #dc3545; color: #fff; box-shadow: 0 0 0 2px #dc3545; }
.step-progress-item.is-cancel .step-text { color: #dc3545; font-weight: 700; }

.tl-wrap { position: relative; padding: .25rem 0; }
.tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--app-primary-soft), var(--app-border)); transform: translateX(-50%); }
.tl-list { display: grid; gap: 1rem; }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: center; }
.tl-item .tl-col { display: flex; min-width: 0; }
.tl-item .tl-col > .card { width: 100%; }
.tl-dot { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; z-index: 2; border: 4px solid #fff; border-radius: 50%; background: var(--app-primary); box-shadow: 0 0 0 2px rgba(15, 23, 42, .09); transform: translate(-50%, -50%); }
.tl-card { overflow: hidden; border: 1px solid var(--app-border) !important; border-radius: 17px; background: #fff; box-shadow: 0 7px 22px rgba(15, 23, 42, .045) !important; transition: all .18s ease; }
.tl-card:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(15, 23, 42, .07) !important; }
.tl-card .card-body { padding: 1rem 1.05rem; }
.tl-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #f6f8fa; font-size: .92rem; }
.tl-title { color: var(--app-text); font-size: .9rem; line-height: 1.45; font-weight: 700; }
.tl-time, .tl-meta { color: var(--app-muted); font-size: .76rem; }
.tl-desc { color: var(--app-muted); font-size: .84rem; line-height: 1.65; word-break: break-word; }

/* Safe Timeline */
.safe-timeline { position: relative; padding-left: 1.3rem; }
.safe-timeline::before { content: ""; position: absolute; top: .2rem; bottom: .2rem; left: .3rem; width: 2px; background: linear-gradient(180deg, var(--app-primary-soft), var(--app-border)); }
.safe-timeline-item { position: relative; padding: 0 0 1rem 1rem; }
.safe-timeline-item:last-child { padding-bottom: 0; }
.safe-timeline-dot { position: absolute; left: -1.02rem; top: .22rem; width: .72rem; height: .72rem; border: 2px solid #fff; border-radius: 50%; background: var(--app-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary) 18%, transparent); }

/* Semantic Timeline Nodes */
.tl-type-issue .tl-dot { background: var(--app-primary); }
.tl-type-issue .tl-icon { color: var(--app-primary); background: var(--app-primary-soft); }
.tl-type-workflow .tl-dot { background: #198754; }
.tl-type-workflow .tl-icon { color: #198754; background: #e9f7ef; }
.tl-type-approval .tl-dot { background: #6f42c1; }
.tl-type-approval .tl-icon { color: #6f42c1; background: #f1ecfb; }
.tl-type-revision .tl-dot { background: #ffc107; }
.tl-type-revision .tl-icon { color: #8a6900; background: #fff8dd; }
.tl-type-danger .tl-dot { background: #dc3545; }
.tl-type-danger .tl-icon { color: #dc3545; background: #fdebed; }
.tl-type-close .tl-dot { background: #334155; }
.tl-type-close .tl-icon { color: #334155; background: #eef1f4; }

/* --- 8. TABLES & DATATABLES --- */
.portal-table-card, .my-requests-card, .table-custom { overflow: hidden; border: 1px solid var(--app-border); border-radius: 19px; background: var(--app-card-bg); box-shadow: 0 8px 24px rgba(15, 23, 42, .045); }
.portal-table-header, .my-requests-head, .table-custom .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--app-border); background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--app-page-bg) 58%, white)); }
.portal-table-title, .my-requests-title { display: flex; align-items: center; gap: .48rem; color: var(--app-text); font-size: .96rem; font-weight: 700; }
.portal-table-title i, .my-requests-title i { color: var(--app-primary); }
.portal-table-count, .my-requests-count { display: inline-flex; align-items: center; padding: .38rem .68rem; border-radius: 999px; background: var(--app-primary-soft); color: var(--app-primary-dark); font-size: .76rem; font-weight: 700; }

.portal-table, #tblMyRequests, .tbl-request-style, .table-custom { width: 100%; margin: 0; font-size: .84rem; }
.portal-table thead th, #tblMyRequests thead th, .tbl-request-style thead th, .table-custom thead th { padding: .75rem .7rem; white-space: nowrap; border-bottom: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-page-bg) 72%, white); color: var(--app-text); font-size: .78rem; font-weight: 700; }
.portal-table tbody td, #tblMyRequests tbody td, .tbl-request-style tbody td, .table-custom tbody td { padding: .78rem .7rem; border-color: color-mix(in srgb, var(--app-border) 72%, white); vertical-align: middle; font-size: .84rem; }
.portal-table tbody tr:hover, #tblMyRequests tbody tr:hover, .tbl-request-style tbody tr:hover, .table-custom tbody tr:hover { background: color-mix(in srgb, var(--app-primary-soft-hover) 45%, white) !important; }
.request-ref-text { color: var(--app-primary-dark); font-weight: 700; }
.portal-table .btn-sm, #tblMyRequests .btn-sm, .tbl-request-style .btn-sm, .table-custom .btn-sm { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px !important; }

.dataTables_wrapper { padding: .9rem 1rem 1rem; color: var(--app-muted); font-size: .8rem; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 36px; border: 1px solid var(--app-border); border-radius: 9px; background: #fff; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border-color: var(--app-primary) !important; background: var(--app-primary) !important; color: #fff !important; }

/* --- 9. STATUS BADGES --- */
.status-badge, #tl-status-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; white-space: nowrap; padding: .4rem .78rem; font-size: .76rem; }
.bg-issue-kind { background: var(--app-primary) !important; color: #fff !important; }
.bg-cctv-kind { background: #198754 !important; color: #fff !important; }
.badge.bg-status-draft, .badge-status-draft { background: #adb5bd !important; color: #212529 !important; }
.badge.bg-status-new, .badge-status-new { background: var(--app-primary) !important; color: #fff !important; }
.badge.bg-status-pending, .badge-status-screening, .badge.bg-status-accepted, .badge.bg-status-waiting-approval, .badge.bg-status-waiting_approval { background: #6f42c1 !important; color: #fff !important; }
.badge.bg-status-in-progress, .badge.bg-status-in_progress, .badge-status-in_review { background: #ffc107 !important; color: #523d00 !important; }
.badge.bg-status-revision_open, .badge-status-waiting_info { background: #fd7e14 !important; color: #fff !important; }
.badge.bg-status-approved, .badge-status-received { background: #0dcaf0 !important; color: #173042 !important; }
.badge.bg-status-resolved, .badge-status-forwarded { background: #20c997 !important; color: #fff !important; }
.badge.bg-status-done, .badge.bg-status-closed-success, .badge.bg-status-closed_success, .badge-status-completed { background: #198754 !important; color: #fff !important; }
.badge.bg-status-rejected, .badge.bg-status-closed-rejected, .badge.bg-status-closed_rejected { background: #dc3545 !important; color: #fff !important; }
.badge.bg-status-cancelled { background: #6c757d !important; color: #fff !important; }
.badge.bg-status-closed, .badge-status-closed { background: #334155 !important; color: #fff !important; }

/* --- 10. MODALS, NOTICES & UTILITIES --- */
.portal-body .modal-content, #requestModal .modal-content, #evaluationModal .modal-content { overflow: hidden; border: 1px solid var(--app-border) !important; border-radius: 18px !important; background: var(--app-card-bg); box-shadow: 0 22px 60px rgba(15, 23, 42, .18) !important; }
.portal-body .modal-header, .portal-body .modal-footer, #requestModal .modal-header, #evaluationModal .modal-header, #requestModal .modal-footer, #evaluationModal .modal-footer { background: color-mix(in srgb, var(--app-page-bg) 68%, white) !important; }
.portal-body .modal-header, #requestModal .modal-header, #evaluationModal .modal-header { border-bottom: 1px solid var(--app-border) !important; }
.portal-body .modal-footer, #requestModal .modal-footer, #evaluationModal .modal-footer { border-top: 1px solid var(--app-border) !important; }

.portal-notice, .report-form-notice, .confidential-notice, .track-safe-notice { 
    display: flex; 
    align-items: flex-start; 
    gap: .75rem; 
    margin-bottom: 1.25rem; /* เพิ่มบรรทัดนี้เพื่อเว้นระยะด้านล่าง */
    padding: .9rem 1rem; 
    border: 1px solid color-mix(in srgb, var(--app-primary) 12%, var(--app-border)); 
    border-radius: 16px; 
    background: color-mix(in srgb, var(--app-primary-soft) 42%, white); 
    color: var(--app-muted); 
    font-size: .77rem; 
    line-height: 1.62; 
}}
.portal-notice-icon, .report-form-notice-icon, .confidential-notice-icon, .safe-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff; color: var(--app-primary); box-shadow: 0 5px 14px rgba(15, 23, 42, .04); }

.portal-footer { background: #0f172a; color: #cbd5e1; padding: 54px 0 20px; font-size: .92rem; }
.portal-footer-logo { width: 46px; height: 46px; border-radius: 12px; background: #fff; overflow: hidden; flex: 0 0 46px; }
.portal-footer-logo img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.portal-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.portal-footer-links a { display: block; width: fit-content; color: var(--portal-footer-muted, #cbd5e1); text-decoration: none; line-height: 1.5; transition: color .15s ease; }
.portal-footer-links a:hover { color: #ffffff; text-decoration: none; }
.portal-footer-bottom { border-top: 1px solid rgba(148, 163, 184, .20); margin-top: 2.2rem; padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; color: #64748b; font-size: .82rem; }

#recaptcha-container { position: static; width: 0; height: 0; overflow: visible; }
.grecaptcha-badge { position: fixed !important; right: -186px !important; bottom: 14px !important; z-index: 999999 !important; transition: right .3s ease !important; }
.grecaptcha-badge:hover, .grecaptcha-badge:focus-within { right: -2px !important; }
.swal2-popup, .swal2-title, .swal2-html-container, .swal2-confirm, .swal2-cancel { font-family: var(--app-font-family) !important; }
.twitter-typeahead { width: 100%; }
.tt-menu { width: 100%; max-height: 260px; overflow-y: auto; margin-top: 6px; padding: 5px 0; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(15, 23, 42, .12); z-index: 1055 !important; }
.tt-suggestion { padding: 9px 12px; color: var(--app-text); font-size: .78rem; line-height: 1.45; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.tt-suggestion:hover, .tt-suggestion.tt-cursor { background: var(--app-primary-soft); color: var(--app-primary-dark); }

/* --- 11. CCTV COMPONENTS --- */
.cctv-intro { margin: 1.9rem 0 1rem; }
.cctv-intro-title { margin: 0; color: var(--app-text); font-size: 1.05rem; font-weight: 700; }
.cctv-intro-text { margin-top: .2rem; color: var(--app-muted); font-size: .78rem; }
.cctv-request-card { --cctv-accent: var(--app-primary); position: relative; height: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cctv-accent) 13%, var(--app-border)); border-radius: 21px; background: linear-gradient(145deg, #fff 0%, color-mix(in srgb, var(--cctv-accent) 3.5%, white) 100%); box-shadow: 0 10px 28px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255, 255, 255, .9); transition: all .2s ease; }
.cctv-request-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cctv-accent), color-mix(in srgb, var(--cctv-accent) 40%, white)); }
.cctv-request-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -38px; top: -48px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--cctv-accent) 11%, transparent), transparent 68%); }
.cctv-request-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cctv-accent) 24%, var(--app-border)); box-shadow: 0 18px 38px rgba(15, 23, 42, .085), inset 0 1px 0 rgba(255, 255, 255, .95); }
.cctv-request-card.view-card { --cctv-accent: var(--app-primary); }
.cctv-request-card.copy-card { --cctv-accent: #b58100; }
.cctv-request-card .card-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 1.65rem 1.5rem; text-align: center; }
.cctv-card-icon { width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; border: 1px solid color-mix(in srgb, var(--cctv-accent) 14%, white); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--cctv-accent) 12%, white), color-mix(in srgb, var(--cctv-accent) 6%, white)); color: var(--cctv-accent); font-size: 1.6rem; box-shadow: 0 9px 22px color-mix(in srgb, var(--cctv-accent) 8%, transparent); }
.cctv-card-title { margin: 0 0 .45rem; color: var(--app-text); font-size: 1.08rem; font-weight: 700; }
.cctv-card-description { max-width: 360px; margin: 0 0 1.2rem; color: var(--app-muted); font-size: .8rem; line-height: 1.65; }
.cctv-card-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .38rem; margin-top: auto; padding: .55rem .95rem; border: 1px solid var(--cctv-accent); border-radius: 12px; background: var(--cctv-accent); color: #fff; font-size: .8rem; font-weight: 650; box-shadow: 0 8px 20px color-mix(in srgb, var(--cctv-accent) 14%, transparent); }
.cctv-card-btn:hover { color: #fff; filter: brightness(.92); border-color: var(--cctv-accent); }

.cctv-list-panel { position: relative; overflow: hidden; margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--app-border); border-radius: 17px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft) 35%, white), #fff); box-shadow: 0 8px 22px rgba(15, 23, 42, .04); }
.cctv-list-icon { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1.05rem; }
.cctv-list-title { margin: 0; color: var(--app-text); font-size: .92rem; font-weight: 700; }
.cctv-list-description { margin-top: .15rem; color: var(--app-muted); font-size: .74rem; line-height: 1.55; }
.cctv-list-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 42px; padding: .52rem .85rem; border: 1px solid color-mix(in srgb, var(--app-primary) 24%, var(--app-border)); border-radius: 11px; background: #fff; color: var(--app-primary-dark); font-size: .76rem; font-weight: 650; transition: .18s ease; }
.cctv-list-btn:hover { color: #fff; background: var(--app-primary); border-color: var(--app-primary); }
.cctv-form-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cctv-form-required-note { color: var(--app-muted); font-size: .72rem; }
.cctv-form-required-note .text-danger { font-weight: 700; color: #dc3545; }
.cctv-form-actions-note { margin-right: auto; color: var(--app-muted); font-size: .7rem; line-height: 1.5; }
#relatedDetailWrap { padding-top: .15rem; }
#companionBox { padding: 1rem; border: 1px dashed color-mix(in srgb, var(--app-primary) 26%, var(--app-border)); border-radius: 14px; background: color-mix(in srgb, var(--app-primary-soft) 22%, white); }
#btnAddCompanion { border-color: color-mix(in srgb, var(--app-primary) 32%, var(--app-border)); border-radius: 10px; color: var(--app-primary-dark); font-size: .72rem; font-weight: 650; }
#btnAddCompanion:hover { color: #fff; background: var(--app-primary); border-color: var(--app-primary); }
.companion-item { border-color: var(--app-border) !important; border-radius: 13px !important; background: #fff; box-shadow: 0 5px 14px rgba(15, 23, 42, .03); }
.btnRemoveCompanion { min-height: 44px; border-radius: 10px; }
.cctv-upload-note { display: flex; align-items: flex-start; gap: .65rem; margin-top: .75rem; padding: .75rem .85rem; border-radius: 12px; background: #f8fafc; color: var(--app-muted); font-size: .7rem; line-height: 1.55; }
.cctv-upload-note i { margin-top: .06rem; color: var(--app-primary); }

/* --- 12. ISSUE TRACKING --- */
.tracking-head-orb { position: absolute; right: 12px; top: 50%; width: 106px; height: 106px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .88); border-radius: 30px; background: linear-gradient(145deg, rgba(255, 255, 255, .82), color-mix(in srgb, var(--app-primary-soft) 72%, white)); color: var(--app-primary); font-size: 2rem; opacity: .62; box-shadow: 0 16px 36px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .9); transform: translateY(-50%); }
.filter-card, .issue-item, .empty-card { border: 1px solid var(--app-border); border-radius: 20px; background: var(--app-card-bg); box-shadow: 0 8px 24px rgba(15, 23, 42, .045); }
.filter-card { overflow: hidden; }
.filter-card .card-header { padding: 1.1rem 1.25rem .25rem; background: transparent; border: 0; }
.filter-card .card-body { padding: 1rem 1.25rem 1.25rem; }
.filter-title { color: var(--app-text); font-size: 1.05rem; font-weight: 700; }
.filter-title i { color: var(--app-primary); }
.filter-card .form-label { color: var(--app-text); font-weight: 600 !important; }
.filter-card .form-select { min-height: 40px; border-color: var(--app-border); border-radius: 11px; background-color: #fff; color: var(--app-text); }
.filter-card .form-select:focus { border-color: var(--app-primary-bright); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 12%, transparent); }
.tracking-reset-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--app-border); border-radius: 11px; background: #fff; color: var(--app-muted); font-size: .84rem; }
.tracking-reset-btn:hover { color: var(--app-primary-dark); background: var(--app-primary-soft-hover); border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border)); }
.empty-card .card-body { padding: 3.5rem 1rem; }
.empty-icon { width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .8rem; border-radius: 20px; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1.8rem; }
.empty-text { color: var(--app-muted); margin: 0; font-size: .76rem; }

.tracking-list-head { margin: 2rem 0 1rem; display: flex; align-items: center; justify-content: space-between; }
.section-title { color: var(--app-text); font-size: 1.05rem; font-weight: 700; margin: 0; }
.tracking-count { color: var(--app-primary); }
.issue-item { position: relative; overflow: hidden; margin-bottom: 1rem; transition: all .18s ease; }
.issue-item::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--app-primary); opacity: .72; }
.issue-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--app-primary) 18%, var(--app-border)); box-shadow: 0 14px 32px rgba(15, 23, 42, .075); }
.issue-item .inner { padding: 1.2rem 1.3rem .95rem 1.4rem; }
.issue-ref { color: var(--app-primary-dark); font-size: .92rem; font-weight: 700; }
.issue-title { display: block; margin-bottom: .7rem; color: var(--app-text); font-size: 1.08rem; font-weight: 700; line-height: 1.55; text-decoration: none; }
.issue-title:hover { color: var(--app-primary); }
.priority-badge { padding: .38rem .7rem; background: #fff; font-size: .7rem; font-weight: 600; border: 1px solid var(--app-border); border-radius: 999px; }
.meta-row { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-bottom: .15rem; }
.meta-item { display: flex; align-items: center; color: var(--app-muted); font-size: .88rem; }
.meta-item i { width: 1.1rem; margin-right: .35rem; color: var(--app-primary); }
.issue-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .78rem 1.3rem .78rem 1.4rem; border-top: 1px solid var(--app-border); background: color-mix(in srgb, var(--app-page-bg) 76%, white); }
.issue-time { color: var(--app-muted); font-size: .82rem; line-height: 1.55; }
.issue-time i { color: var(--app-primary); }
.tracking-detail-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .46rem .9rem; border: 1px solid var(--app-primary); border-radius: 999px; background: var(--app-primary); color: #fff; font-size: .84rem; font-weight: 650; text-decoration: none; transition: all .16s ease; }
.tracking-detail-btn:hover { color: #fff; background: var(--app-primary-dark); border-color: var(--app-primary-dark); transform: translateY(-1px); }

.tracking-pagination .page-link { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; margin: 0 .15rem; border: 1px solid var(--app-border) !important; border-radius: 10px !important; background: #fff; color: var(--app-text); box-shadow: none !important; }
.tracking-pagination .page-link:hover { color: var(--app-primary-dark); background: var(--app-primary-soft-hover); border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border)) !important; }
.tracking-pagination .page-item.active .page-link { border-color: var(--app-primary) !important; background: var(--app-primary); color: #fff; }
.tracking-pagination .page-item.disabled .page-link { background: #f8fafc; color: #a1a8b1; }
.portal-issue-form .d-flex.flex-wrap.gap-3 .form-check { min-height: 42px; display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .58rem .78rem .58rem 2.05rem; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; }
.portal-issue-form .text-danger { color: #dc3545 !important; }

/* --- 13. TIMELINE & PROGRESS CARDS --- */
.timeline-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.timeline-progress-card, .timeline-history-card { border: 1px solid var(--app-border); border-radius: 21px; background: var(--app-card-bg); box-shadow: 0 9px 26px rgba(15, 23, 42, .045); }
.timeline-progress-card { position: relative; overflow: hidden; margin-bottom: 1rem; padding: 1.25rem 1.3rem 1.4rem; }
.timeline-progress-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 35%, white)); }
.current-step-box { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.25rem; padding: .85rem .95rem; border: 1px solid color-mix(in srgb, var(--app-primary) 12%, var(--app-border)); border-radius: 15px; background: color-mix(in srgb, var(--app-primary-soft) 46%, white); }
.current-step-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #fff; color: var(--app-primary); box-shadow: 0 5px 14px rgba(15, 23, 42, .04); }
.current-step-caption { color: var(--app-muted); font-size: .78rem; font-weight: 600; }
#current-step-label { display: block; margin-top: .15rem; color: var(--app-primary-dark); font-size: .94rem; line-height: 1.55; font-weight: 700; }
.timeline-history-card { overflow: hidden; }
.timeline-history-header { padding: 1.1rem 1.3rem 1rem; border-bottom: 1px solid var(--app-border); background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--app-page-bg) 60%, white)); }
.timeline-history-title { display: flex; align-items: center; gap: .5rem; color: var(--app-text); font-size: .98rem; font-weight: 700; }
.timeline-history-title i { color: var(--app-primary); }
.timeline-legend { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .72rem; }
.timeline-legend .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .4rem .62rem; border-radius: 999px; font-size: .65rem; font-weight: 650; }
.timeline-history-body { padding: 1.25rem; }
.tl-empty { padding: 3rem 1rem; color: var(--app-muted); text-align: center; }

/* --- 14. INFO CARDS --- */
.portal-info-card { background: var(--app-card-bg, #fff); border: 1px solid var(--app-border); border-radius: 18px; padding: 1.3rem; transition: all .18s ease; }
.portal-info-card:hover { border-color: color-mix(in srgb, var(--app-primary) 30%, var(--app-border)); box-shadow: 0 12px 28px rgba(15, 23, 42, .05); transform: translateY(-2px); }
.portal-info-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--app-primary-soft); color: var(--app-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .85rem; }
.portal-info-card h3 { color: var(--app-text); font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.portal-info-card p { color: var(--app-muted); font-size: .9rem; line-height: 1.68; }
.portal-info-card a { color: var(--app-primary); font-size: .92rem; font-weight: 650; display: inline-flex; align-items: center; text-decoration: none; transition: color .15s ease; }
.portal-info-card a:hover { color: var(--app-primary-dark); }

/* --- 15. CONTACT PAGE --- */
.portal-contact-page { position: relative; }
.contact-card { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--app-border); border-radius: 21px; background: var(--app-card-bg); box-shadow: 0 9px 26px rgba(15, 23, 42, .045); }
.contact-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--app-primary), color-mix(in srgb, var(--app-primary) 35%, white)); }
.contact-card-body { position: relative; z-index: 1; padding: 1.4rem; }
.contact-section-head { display: flex; align-items: flex-start; gap: .9rem; padding-bottom: 1.1rem; margin-bottom: .2rem; border-bottom: 1px solid var(--app-border); }
.contact-section-icon { width: 50px; height: 50px; flex: 0 0 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1.25rem; }
.contact-section-title, .contact-map-title { margin: 0 0 .3rem; color: var(--app-text); font-size: 1.22rem; line-height: 1.4; font-weight: 700; }
.contact-section-title-en { margin-bottom: .3rem; color: var(--app-muted); font-size: .76rem; line-height: 1.45; }
.contact-section-description, .contact-map-description { margin: 0; color: var(--app-muted); font-size: .9rem; line-height: 1.65; }
.contact-info-list { display: grid; }
.contact-info-item { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--app-border); }
.contact-info-item:last-child { border-bottom: 0; }
.contact-info-icon { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1rem; }
.contact-info-content { min-width: 0; flex: 1; }
.contact-info-label { margin-bottom: .14rem; color: var(--app-muted); font-size: .78rem; font-weight: 600; }
.contact-info-value { color: var(--app-text); font-size: .94rem; line-height: 1.6; font-weight: 650; }
.contact-info-link { display: inline-flex; align-items: center; gap: .28rem; color: var(--app-text); text-decoration: none; word-break: break-word; transition: color .16s ease; }
.contact-info-link:hover { color: var(--app-primary); }
.contact-info-note { margin-top: .15rem; color: var(--app-muted); font-size: .78rem; line-height: 1.5; }
.contact-external-icon { color: var(--app-primary); font-size: .68rem; }

.contact-note { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1rem; padding: .85rem .9rem; border: 1px solid color-mix(in srgb, var(--app-primary) 12%, var(--app-border)); border-radius: 15px; background: color-mix(in srgb, var(--app-primary-soft) 42%, white); color: var(--app-muted); font-size: .75rem; line-height: 1.6; }
.contact-note-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; color: var(--app-primary); }
.contact-note-title { margin-bottom: .15rem; color: var(--app-text); font-weight: 700; }

.contact-map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; }
.contact-map-frame { position: relative; min-height: 390px; overflow: hidden; border: 1px solid var(--app-border); border-radius: 17px; background: color-mix(in srgb, var(--app-page-bg) 80%, white); }
.contact-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-map-empty { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; border: 1px dashed color-mix(in srgb, var(--app-primary) 22%, var(--app-border)); border-radius: 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--app-primary-soft) 35%, white), #fff); }
.contact-map-empty-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .9rem; border-radius: 19px; background: var(--app-primary-soft); color: var(--app-primary); font-size: 1.55rem; }
.contact-map-empty h3 { margin: 0 0 .35rem; color: var(--app-text); font-size: 1rem; font-weight: 700; }
.contact-map-empty p { max-width: 430px; margin: 0 0 1rem; color: var(--app-muted); font-size: .76rem; line-height: 1.6; }
.contact-map-address { display: flex; align-items: flex-start; gap: .7rem; margin-top: .85rem; padding: .85rem .9rem; border: 1px solid var(--app-border); border-radius: 14px; background: color-mix(in srgb, var(--app-page-bg) 72%, white); }
.contact-map-address-icon { color: var(--app-primary); margin-top: .08rem; }
.contact-map-address strong { display: block; margin-bottom: .15rem; color: var(--app-text); font-size: .78rem; }
.contact-map-address-text { color: var(--app-muted); font-size: .74rem; line-height: 1.58; }
.contact-btn-primary, .contact-btn-outline, .contact-cta-primary, .contact-cta-outline { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .52rem .9rem; border-radius: 11px; font-size: .86rem; font-weight: 650; text-decoration: none; transition: all .16s ease; }
.contact-btn-primary { border: 1px solid var(--app-primary); background: var(--app-primary); color: #fff; }
.contact-btn-primary:hover { color: #fff; border-color: var(--app-primary-dark); background: var(--app-primary-dark); transform: translateY(-1px); }
.contact-btn-outline { border: 1px solid color-mix(in srgb, var(--app-primary) 25%, var(--app-border)); background: #fff; color: var(--app-primary-dark); }
.contact-btn-outline:hover { color: #fff; border-color: var(--app-primary); background: var(--app-primary); }

.contact-cta { margin-top: 1.15rem; padding: 1.4rem 1.5rem; border-radius: 21px; }
.contact-cta-content { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.contact-cta-copy { display: flex; align-items: center; gap: .9rem; }
.contact-cta-icon { width: 50px; height: 50px; flex: 0 0 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 15px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.2rem; }
.contact-cta h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.contact-cta p { margin: 0; font-size: .76rem; }
.contact-cta-actions { display: flex; flex: 0 0 auto; gap: .55rem; }
.contact-cta-primary { color: var(--app-primary-dark); border: 1px solid #fff; background: #fff; }
.contact-cta-primary:hover { color: var(--app-primary-dark); background: var(--app-primary-soft); }
.contact-cta-outline { color: #fff; border: 1px solid rgba(255, 255, 255, .48); background: transparent; }
.contact-cta-outline:hover { color: var(--app-primary-dark); border-color: #fff; background: #fff; }

/* --- 16. HELP / MANUAL PAGE --- */
.portal-help-page .manual-grid { margin-top: 1.15rem; }
.help-role-panel { position: relative; overflow: hidden; margin-bottom: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--app-border); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary-soft) 42%, white), #fff 72%); box-shadow: 0 8px 24px rgba(15, 23, 42, .04), inset 0 1px 0 rgba(255,255,255,.85); }
.help-role-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--app-primary-bright), var(--app-primary)); }
.help-role-row { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.help-role-label { display: inline-flex; align-items: center; gap: .42rem; margin-right: .15rem; color: var(--app-text); font-size: .92rem; font-weight: 700; }
.help-role-label i { color: var(--app-primary); font-size: .95rem; }
.help-role-panel .badge { max-width: 100%; white-space: normal; text-align: left; line-height: 1.45; border-radius: 999px; padding: .42rem .7rem; font-size: .8rem; font-weight: 700; }
.help-role-primary { border: 1px solid color-mix(in srgb, var(--app-primary) 18%, white); background: var(--app-primary-soft) !important; color: var(--app-primary-dark) !important; }
.help-role-staff { border: 1px solid color-mix(in srgb, var(--app-primary) 30%, white); background: var(--app-primary) !important; color: #fff !important; }
.help-role-detail { border: 1px solid var(--app-border); background: #fff !important; color: var(--app-text) !important; }
.help-role-note { margin-top: .68rem; padding-top: .68rem; border-top: 1px dashed color-mix(in srgb, var(--app-border) 82%, white); color: var(--app-muted); font-size: .8rem; line-height: 1.55; }
.help-notice { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.25rem; padding: .95rem 1rem; border: 1px solid color-mix(in srgb, var(--app-primary) 14%, var(--app-border)); border-radius: 17px; background: color-mix(in srgb, var(--app-primary-soft) 38%, white); color: var(--app-muted); font-size: .86rem; line-height: 1.65; }
.help-notice-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; color: var(--app-primary); box-shadow: 0 5px 14px rgba(15, 23, 42, .04); }
.help-notice a { color: var(--app-primary-dark); font-weight: 700; }

.manual-card { --manual-accent: var(--app-primary); position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--manual-accent) 13%, var(--app-border)); border-radius: 22px; background: var(--app-card-bg); box-shadow: 0 10px 28px rgba(15, 23, 42, .05), inset 0 1px 0 rgba(255,255,255,.9); transition: all .2s ease; }
.manual-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--manual-accent), color-mix(in srgb, var(--manual-accent) 34%, white)); }
.manual-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -76px; top: -92px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--manual-accent) 9%, transparent), transparent 70%); }
.manual-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--manual-accent) 22%, var(--app-border)); box-shadow: 0 16px 36px rgba(15, 23, 42, .075), inset 0 1px 0 rgba(255,255,255,.95); }
.manual-card-user { --manual-accent: var(--app-primary); }
.manual-card.staff { --manual-accent: var(--app-primary-dark); }
.manual-card-head { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: .9rem; padding: 1.25rem 1.25rem 1.05rem; border-bottom: 1px solid var(--app-border); background: linear-gradient(135deg, color-mix(in srgb, var(--manual-accent) 5%, white), #fff 66%); }
.manual-card-icon { width: 50px; height: 50px; flex: 0 0 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--manual-accent) 14%, white); border-radius: 15px; background: color-mix(in srgb, var(--manual-accent) 10%, white); color: var(--manual-accent); font-size: 1.22rem; }
.manual-card-head-copy { min-width: 0; flex: 1; }
.manual-card-type { display: inline-flex; align-items: center; gap: .32rem; margin-bottom: .35rem; color: var(--manual-accent); font-size: .78rem; font-weight: 750; letter-spacing: .02em; }
.manual-card-title { margin: 0 0 .28rem; color: var(--app-text); font-size: 1.22rem; line-height: 1.38; font-weight: 750; letter-spacing: -.012em; }
.manual-card-subtitle { color: var(--app-muted); font-size: .9rem; line-height: 1.55; }
.manual-card-body { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; padding: 1.2rem 1.25rem 1.25rem; }
.manual-visual { min-height: 86px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; border: 1px dashed color-mix(in srgb, var(--manual-accent) 18%, var(--app-border)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--manual-accent) 5%, white), color-mix(in srgb, var(--app-page-bg) 62%, white)); color: var(--manual-accent); }
.manual-visual i { font-size: 2.15rem; opacity: .82; }
.manual-section-title { display: flex; align-items: center; gap: .48rem; margin-bottom: .65rem; color: var(--app-text); font-size: .94rem; font-weight: 750; }
.manual-section-title i { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: color-mix(in srgb, var(--manual-accent) 9%, white); color: var(--manual-accent); font-size: .78rem; }
.manual-feature-list { display: grid; gap: .52rem; margin: 0; padding: 0; list-style: none; }
.manual-feature-list li { position: relative; padding: .62rem .7rem .62rem 2rem; border: 1px solid color-mix(in srgb, var(--app-border) 82%, white); border-radius: 12px; background: color-mix(in srgb, var(--app-page-bg) 45%, white); color: var(--app-text); font-size: .88rem; line-height: 1.55; }
.manual-feature-list li::before { content: "\F26B"; position: absolute; left: .7rem; top: .67rem; font-family: "bootstrap-icons"; color: var(--manual-accent); font-size: .78rem; }
.manual-step-list { counter-reset: manual-step; display: grid; gap: .58rem; margin: 0; padding: 0; list-style: none; }
.manual-step-list li { counter-increment: manual-step; position: relative; min-height: 40px; display: flex; align-items: center; padding: .58rem .72rem .58rem 2.95rem; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; color: var(--app-text); font-size: .88rem; line-height: 1.5; }
.manual-step-list li::before { content: counter(manual-step); position: absolute; left: .68rem; top: 50%; width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--manual-accent); color: #fff; font-size: .68rem; font-weight: 800; transform: translateY(-50%); box-shadow: 0 5px 12px color-mix(in srgb, var(--manual-accent) 14%, transparent); }
.manual-divider { margin: 1.05rem 0; border: 0; border-top: 1px solid var(--app-border); opacity: 1; }
.manual-role-badge { display: block; width: 100%; margin-bottom: 1rem; padding: .7rem .8rem; border: 1px solid color-mix(in srgb, var(--manual-accent) 14%, var(--app-border)); border-radius: 13px; background: color-mix(in srgb, var(--manual-accent) 6%, white); color: var(--app-text); font-size: .84rem; line-height: 1.6; font-weight: 600; word-break: break-word; }
.manual-download { margin-top: auto; padding-top: 1.15rem; }
.manual-download-btn { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem .9rem; border: 1px solid var(--manual-accent); border-radius: 12px; background: var(--manual-accent); color: #fff !important; font-size: .88rem; font-weight: 700; text-decoration: none; box-shadow: 0 9px 20px color-mix(in srgb, var(--manual-accent) 14%, transparent); transition: all .16s ease; }
a.manual-download-btn:hover { color: #fff !important; background: color-mix(in srgb, var(--manual-accent) 88%, #000); border-color: color-mix(in srgb, var(--manual-accent) 88%, #000); transform: translateY(-1px); box-shadow: 0 12px 24px color-mix(in srgb, var(--manual-accent) 18%, transparent); }
.manual-download-btn.disabled { cursor: default; box-shadow: none; border-color: var(--app-border); background: #f8fafc; color: var(--app-muted) !important; opacity: 1; }
.help-bottom-note { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--app-primary) 12%, var(--app-border)); border-radius: 16px; background: color-mix(in srgb, var(--app-primary-soft) 30%, white); color: var(--app-muted); font-size: .86rem; line-height: 1.6; }
.help-bottom-note > i { margin-top: .08rem; color: var(--app-primary); font-size: 1rem; }
.help-bottom-note a { color: var(--app-primary-dark); font-weight: 700; text-decoration: none; }
.help-bottom-note a:hover { color: var(--app-primary); }

/* --- 17. RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1199.98px) {
    .portal-table, #tblMyRequests, .tbl-request-style { min-width: 1080px; }
    .portal-header-actions { margin-left: 0; padding-top: .8rem; padding-bottom: .5rem; }
    .portal-menu-navbar .portal-main-nav .nav-link { width: 100%; justify-content: flex-start; }
}

@media (max-width: 991.98px) {
    .portal-page, .portal-report-page, .portal-timeline-page, .portal-tracking-page, .portal-confidential-page, .portal-confidential-track-page, .portal-confidential-success-page, .portal-cctv-page, .portal-cctv-form-page, .portal-my-issues-page, .portal-help-page { padding-top: 36px; }
    .portal-page-hero-side, .report-hero-side, .timeline-hero-side, .confidential-hero-side, .track-hero-side, .cctv-hero-side, .cctv-form-hero-side, .success-hero-side, .timeline-head-actions, .help-hero-side { display: none; }
    .tl-item { grid-template-columns: 1fr; }
    .tl-line { left: .72rem; transform: none; }
    .tl-dot { left: .72rem; transform: translateY(-50%); }
    .tl-item .tl-col { grid-column: 1 !important; padding-left: 1.7rem; }
    .contact-map-frame, .contact-map-empty { min-height: 340px; }
    .contact-cta-content { align-items: flex-start; flex-direction: column; }
    .manual-card { border-radius: 19px; }
    .manual-card-head, .manual-card-body { padding: 1.1rem; }
}

@media (max-width: 767.98px) {
    body.portal-body { line-height: 1.65; }
    .portal-page-description, .help-description, .contact-section-description { font-size: .95rem; }
    .portal-page, .portal-report-page, .portal-timeline-page, .portal-tracking-page, .portal-confidential-page, .portal-confidential-track-page, .portal-confidential-success-page, .portal-cctv-page, .portal-cctv-form-page, .portal-my-issues-page, .portal-help-page { padding: 28px 0 54px; }
    .portal-page-hero, .report-page-hero, .timeline-hero, .confidential-hero, .track-page-hero, .cctv-hero, .cctv-form-hero, .tracking-page-head, .timeline-page-head, .page-title-box, .success-page-hero, .my-issues-hero, .help-hero { padding: 1.4rem; border-radius: 20px; }
    .portal-page-title, .report-page-title, .timeline-title, .confidential-title, .track-page-title, .cctv-page-title, .cctv-form-title, .tracking-page-title, .timeline-page-title, .success-page-title, .my-issues-title, .page-title-box h4 { font-size: 1.75rem; }
    .portal-form-actions, .issue-form-actions, .confidential-form-actions, .confidential-actions, .track-actions, .cctv-form-actions { grid-template-columns: 1fr; }
    .portal-btn-secondary, .issue-reset-btn, .confidential-reset, .track-reset-btn, .cctv-form-btn-reset, .cctv-form-btn-submit { width: 100%; }
    .step-progress-wrapper { flex-direction: column; align-items: flex-start; gap: 13px; padding-left: 19px; }
    .step-progress-wrapper::before { left: 39px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; }
    .step-progress-item { flex-direction: row; gap: .8rem; text-align: left; }
    .step-text { max-width: none; margin-top: 0; }
    .cctv-request-card { border-radius: 18px; }
    .cctv-list-panel .d-flex { align-items: flex-start !important; }
    .cctv-list-btn { width: 100%; margin-top: .65rem; }
    .cctv-form-topbar { align-items: flex-start; flex-direction: column; }
    .cctv-form-actions-note { width: 100%; margin: 0 0 .15rem; text-align: center; }
    .tracking-head-orb { display: none; }
    .issue-footer { flex-direction: column; align-items: flex-start; padding: .85rem 1rem; }
    .issue-item .inner { padding: 1rem 1rem .85rem 1.12rem; }
    .tracking-detail-btn { width: 100%; }
    .filter-card, .issue-item, .empty-card { border-radius: 17px; }
    .filter-card .card-header, .filter-card .card-body { padding-left: 1rem; padding-right: 1rem; }
    .timeline-progress-card { padding: 1.05rem 1rem 1.2rem; border-radius: 18px; }
    .timeline-history-card { border-radius: 18px; }
    .timeline-history-header, .timeline-history-body { padding-left: 1rem; padding-right: 1rem; }
    .contact-card { border-radius: 18px; }
    .contact-card-body { padding: 1.15rem; }
    .contact-map-head { flex-direction: column; }
    .contact-map-head .contact-btn-outline { width: 100%; }
    .contact-map-frame, .contact-map-empty { min-height: 300px; }
    .contact-cta { padding: 1.2rem; border-radius: 18px; }
    .contact-cta-actions { width: 100%; }
    .help-role-panel { padding: .9rem; border-radius: 16px; }
    .help-role-row { align-items: flex-start; }
    .help-role-label { width: 100%; margin-bottom: .1rem; }
    .help-role-panel .badge { border-radius: 10px; }
    .manual-card-head { gap: .75rem; }
    .manual-card-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
    .manual-card-title { font-size: 1.02rem; }
    .manual-visual { min-height: 72px; }
}

@media (max-width: 575.98px) {
    .grecaptcha-badge { right: -190px !important; bottom: 8px !important; }
    .portal-footer-bottom { flex-direction: column; gap: .3rem; }
    .portal-info-card { border-radius: 16px; padding: 1.15rem; }
    .contact-section-head { flex-direction: column; }
    .contact-cta-copy { align-items: flex-start; }
    .contact-cta-actions { flex-direction: column; }
    .contact-cta-primary, .contact-cta-outline { width: 100%; }
    .manual-card-head, .manual-card-body { padding: 1rem; }
    .manual-feature-list li, .manual-step-list li { font-size: .74rem; }
    .manual-step-list li { padding-right: .6rem; }
}

/* --- 18. PRINT STYLES --- */
@media print {
    .portal-header, .portal-footer, .portal-topbar, .portal-menu-navbar, .portal-page-hero, .report-page-hero, .tracking-page-head, .timeline-page-head, .success-page-hero, .portal-page-actions, .portal-form-actions, .track-actions, .success-actions, .btn, #trackForm, #btnTrack, #btnReset { display: none !important; }
    .portal-page, .portal-report-page, .portal-timeline-page, .portal-tracking-page, .portal-confidential-page, .portal-confidential-track-page, .portal-confidential-success-page, .portal-cctv-page, .portal-cctv-form-page, .portal-my-issues-page, .portal-help-page { padding: 0 !important; background: #fff !important; }
    .portal-card, .portal-result-card, .portal-table-card, .track-result-card, .success-content-card, .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ==========================================================================
   PUBLIC PORTAL - FEEDBACK / EVALUATION
   ใช้ร่วมกับ feedback/index.php
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| Feedback Page Base
|--------------------------------------------------------------------------
*/

.portal-feedback-page {
    --feedback-card-radius: 21px;
    --feedback-control-radius: 14px;
}

/*
|--------------------------------------------------------------------------
| Main Feedback Card
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-card {
    overflow: hidden;

    border: 1px solid var(--app-border);
    border-radius: var(--feedback-card-radius);

    background: var(--app-card-bg, #fff);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .055),
        inset 0 1px 0 rgba(255,255,255,.9);
}


/* ==========================================================================
   Card Header
   ========================================================================== */

.portal-feedback-page .feedback-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1.15rem 1.4rem;

    border-bottom: 1px solid var(--app-border);

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--app-primary-soft) 35%, white),
            #fff 68%
        );
}

.portal-feedback-page .feedback-card-header .portal-card-title {
    display: flex;
    align-items: center;
    gap: .55rem;

    margin: 0 0 .2rem;

    color: var(--app-text);

    font-size: 1.08rem;
    line-height: 1.45;
    font-weight: 750;
}

.portal-feedback-page .feedback-card-header .portal-card-title i {
    color: var(--app-primary);
    font-size: 1.08rem;
}

.portal-feedback-page .feedback-card-header .portal-card-subtitle {
    color: var(--app-muted);

    font-size: .88rem;
    line-height: 1.55;
}

.portal-feedback-page .feedback-card-body {
    padding: 1.4rem;
}


/* ==========================================================================
   ข้อมูลรายการที่กำลังประเมิน
   ========================================================================== */

.portal-feedback-page .feedback-target-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.portal-feedback-page .feedback-target-detail {
    grid-column: 1 / -1;
}


/*
|--------------------------------------------------------------------------
| Info Tiles
|--------------------------------------------------------------------------
*/

.portal-feedback-page .portal-info-tile {
    position: relative;
    overflow: hidden;

    min-width: 0;

    padding: .9rem 1rem;

    border: 1px solid var(--app-border);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #fff,
            color-mix(in srgb, var(--app-page-bg) 55%, white)
        );

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.portal-feedback-page .portal-info-tile:hover {
    border-color:
        color-mix(
            in srgb,
            var(--app-primary) 18%,
            var(--app-border)
        );

    box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
}

.portal-feedback-page .portal-info-label {
    margin-bottom: .22rem;

    color: var(--app-muted);

    font-size: .82rem;
    line-height: 1.45;
    font-weight: 600;
}

.portal-feedback-page .portal-info-value {
    color: var(--app-text);

    font-size: .98rem;
    line-height: 1.55;
    font-weight: 700;

    word-break: break-word;
}

.portal-feedback-page .portal-text-primary-dark {
    color: var(--app-primary-dark) !important;
}


/* ==========================================================================
   Notice ภายในหน้า Feedback
   ========================================================================== */

.portal-feedback-page .portal-notice {
    font-size: .88rem;
    line-height: 1.65;
}

.portal-feedback-page .portal-notice-title {
    color: var(--app-text);

    font-size: .94rem;
    font-weight: 700;
}

.portal-feedback-page .portal-notice ul {
    font-size: .86rem;
    line-height: 1.65;
}


/* ==========================================================================
   รายการคำถาม
   ========================================================================== */

.portal-feedback-page .feedback-question-list {
    display: grid;
    gap: .9rem;
}


/*
|--------------------------------------------------------------------------
| Question Card
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-question-item {
    position: relative;

    padding: 1.15rem 1.2rem 1.2rem;

    border: 1px solid var(--app-border);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            color-mix(in srgb, var(--app-page-bg) 32%, white) 100%
        );

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.portal-feedback-page .feedback-question-item:hover {
    border-color:
        color-mix(
            in srgb,
            var(--app-primary) 18%,
            var(--app-border)
        );

    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

.portal-feedback-page .feedback-question-head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}

.portal-feedback-page .feedback-question-head > div:last-child {
    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Question Number
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-question-number {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid
        color-mix(
            in srgb,
            var(--app-primary) 12%,
            white
        );

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            var(--app-primary-soft),
            color-mix(in srgb, var(--app-primary-soft) 62%, white)
        );

    color: var(--app-primary-dark);

    font-size: .88rem;
    line-height: 1;
    font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Question Text
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-question-title {
    padding-top: .08rem;

    color: var(--app-text);

    font-size: 1rem;
    line-height: 1.65;
    font-weight: 700;
}

.portal-feedback-page .feedback-question-title .text-danger {
    margin-left: .1rem;
}

.portal-feedback-page .feedback-question-help {
    margin-top: .3rem;

    color: var(--app-muted);

    font-size: .84rem;
    line-height: 1.6;
}


/* ==========================================================================
   Rating 1 - 5
   ========================================================================== */

.portal-feedback-page .feedback-rating-row {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: .65rem;

    margin-top: 1rem;
}

.portal-feedback-page .feedback-rating-option {
    position: relative;
}

.portal-feedback-page .feedback-rating-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Rating Box
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-rating-option label {
    min-height: 84px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: .28rem;

    margin: 0;
    padding: .72rem .55rem;

    border: 1px solid var(--app-border);
    border-radius: var(--feedback-control-radius);

    background: #fff;

    cursor: pointer;

    user-select: none;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.portal-feedback-page .feedback-rating-option label:hover {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--app-primary) 28%,
            var(--app-border)
        );

    background:
        color-mix(
            in srgb,
            var(--app-primary-soft-hover) 55%,
            white
        );

    box-shadow: 0 7px 18px rgba(15, 23, 42, .045);
}


/*
|--------------------------------------------------------------------------
| Rating Text
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-rating-score {
    color: var(--app-text);

    font-size: 1.28rem;
    line-height: 1;
    font-weight: 800;
}

.portal-feedback-page .feedback-rating-label {
    color: var(--app-muted);

    font-size: .81rem;
    line-height: 1.4;
    font-weight: 600;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| Selected Rating
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-rating-option input:checked + label {
    border-color: var(--app-primary);

    background:
        linear-gradient(
            145deg,
            var(--app-primary-soft),
            color-mix(in srgb, var(--app-primary-soft) 58%, white)
        );

    box-shadow:
        0 0 0 .18rem
        color-mix(
            in srgb,
            var(--app-primary) 10%,
            transparent
        ),
        0 8px 18px
        color-mix(
            in srgb,
            var(--app-primary) 8%,
            transparent
        );

    transform: translateY(-1px);
}

.portal-feedback-page
.feedback-rating-option
input:checked + label
.feedback-rating-score {
    color: var(--app-primary-dark);

    transform: scale(1.04);
}

.portal-feedback-page
.feedback-rating-option
input:checked + label
.feedback-rating-label {
    color: var(--app-primary-dark);
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Keyboard Accessibility
|--------------------------------------------------------------------------
*/

.portal-feedback-page
.feedback-rating-option
input:focus-visible + label {
    outline: 2px solid var(--app-primary-bright);
    outline-offset: 3px;
}


/* ==========================================================================
   ข้อเสนอแนะเพิ่มเติม
   ========================================================================== */

.portal-feedback-page .feedback-comment-section {
    margin-top: 1.35rem;
    padding-top: 1.25rem;

    border-top: 1px solid var(--app-border);
}

.portal-feedback-page .feedback-comment-section .form-label {
    margin-bottom: .5rem;

    color: var(--app-text);

    font-size: .95rem;
    font-weight: 700;
}

.portal-feedback-page .feedback-comment-section .form-control {
    min-height: 118px;

    padding: .8rem .9rem;

    border: 1px solid var(--app-border);
    border-radius: 13px;

    background: #fff;

    color: var(--app-text);

    font-size: .92rem;
    line-height: 1.65;

    resize: vertical;
}

.portal-feedback-page
.feedback-comment-section
.form-control:focus {
    border-color: var(--app-primary-bright);

    box-shadow:
        0 0 0 .2rem
        color-mix(
            in srgb,
            var(--app-primary) 11%,
            transparent
        );
}

.portal-feedback-page
.feedback-comment-section
.form-control::placeholder {
    color: #94a3b8;
    opacity: .9;
}

.portal-feedback-page .feedback-comment-section .form-text {
    margin-top: .42rem;

    color: var(--app-muted);

    font-size: .8rem;
    line-height: 1.55;
}


/* ==========================================================================
   Footer ของแบบประเมิน
   ========================================================================== */

.portal-feedback-page .feedback-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 1.25rem;
    padding-top: 1.2rem;

    border-top: 1px solid var(--app-border);
}


/*
|--------------------------------------------------------------------------
| Privacy Note
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-privacy-note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    color: var(--app-muted);

    font-size: .82rem;
    line-height: 1.55;
}

.portal-feedback-page .feedback-privacy-note i {
    color: var(--app-primary);
    font-size: .9rem;
}


/*
|--------------------------------------------------------------------------
| Submit Button
|--------------------------------------------------------------------------
*/

.portal-feedback-page .feedback-submit-btn {
    min-width: 180px;
    min-height: 48px;

    padding-inline: 1.15rem;

    border-radius: 13px;

    font-size: .92rem;
}


/* ==========================================================================
   Success State
   ========================================================================== */

.portal-feedback-page .portal-feedback-success {
    max-width: 620px;

    margin: 0 auto;
    padding: 3.3rem 1rem;

    text-align: center;
}

.portal-feedback-page .portal-feedback-success-icon {
    width: 76px;
    height: 76px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1.15rem;

    border: 1px solid rgba(25, 135, 84, .10);
    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #e9f7ef,
            #f5fcf8
        );

    color: #198754;

    font-size: 2.05rem;

    box-shadow: 0 10px 24px rgba(25, 135, 84, .08);
}

.portal-feedback-page .portal-feedback-success h2 {
    margin: 0 0 .45rem;

    color: var(--app-text);

    font-size: 1.3rem;
    line-height: 1.45;
    font-weight: 750;
}

.portal-feedback-page .portal-feedback-success p {
    max-width: 480px;

    margin: 0 auto;

    color: var(--app-muted);

    font-size: .94rem;
    line-height: 1.7;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .portal-feedback-page .feedback-target-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portal-feedback-page .feedback-target-detail {
        grid-column: 1 / -1;
    }

}


/* ==========================================================================
   TABLET / MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    .portal-feedback-page .feedback-card {
        border-radius: 18px;
    }

    .portal-feedback-page .feedback-card-header {
        padding: 1rem;
    }

    .portal-feedback-page .feedback-card-header .portal-card-title {
        font-size: 1rem;
    }

    .portal-feedback-page .feedback-card-header .portal-card-subtitle {
        font-size: .84rem;
    }

    .portal-feedback-page .feedback-card-body {
        padding: 1rem;
    }


    /* ข้อมูลรายการ */

    .portal-feedback-page .feedback-target-grid {
        grid-template-columns: 1fr;
    }

    .portal-feedback-page .feedback-target-detail {
        grid-column: auto;
    }


    /* Question */

    .portal-feedback-page .feedback-question-list {
        gap: .75rem;
    }

    .portal-feedback-page .feedback-question-item {
        padding: 1rem;
        border-radius: 15px;
    }

    .portal-feedback-page .feedback-question-number {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .portal-feedback-page .feedback-question-title {
        font-size: .96rem;
    }

    .portal-feedback-page .feedback-question-help {
        font-size: .82rem;
    }


    /* Rating */

    .portal-feedback-page .feedback-rating-row {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .portal-feedback-page .feedback-rating-option label {
        min-height: 58px;

        flex-direction: row;
        justify-content: flex-start;

        gap: .75rem;

        padding: .7rem .85rem;

        text-align: left;
    }

    .portal-feedback-page .feedback-rating-score {
        width: 34px;

        flex: 0 0 34px;

        font-size: 1.1rem;

        text-align: center;
    }

    .portal-feedback-page .feedback-rating-label {
        font-size: .84rem;
        text-align: left;
    }


    /* Footer */

    .portal-feedback-page .feedback-submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-feedback-page .feedback-privacy-note {
        justify-content: center;
        text-align: center;
    }

    .portal-feedback-page .feedback-submit-btn {
        width: 100%;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    .portal-feedback-page .feedback-question-head {
        gap: .7rem;
    }

    .portal-feedback-page .feedback-question-title {
        font-size: .94rem;
    }

    .portal-feedback-page .portal-info-value {
        font-size: .94rem;
    }

    .portal-feedback-page .portal-feedback-success {
        padding: 2.5rem .5rem;
    }

    .portal-feedback-page .portal-feedback-success h2 {
        font-size: 1.18rem;
    }

}