/* ONEAPP User App — converted from the "User App" prototype (oneapp hanif v41.html). */
:root{
  --bg:#f6f8ff;--surface:#fff;--text:#0e245e;--text-2:#1c2c5d;--muted:#7683a1;--faint:#9aa5bf;
  --border:#e0e6f1;--border-2:#e9edf6;--navy:#10204d;--navy-2:#173373;
  --blue:#167bf4;--purple:#653ce9;--grad:linear-gradient(135deg,#167bf4,#653ce9);
  --hero:linear-gradient(100deg,#1f7cf5 0%,#5b54f0 55%,#8b4cf6 100%);
  --green:#079447;--green-bg:#dcfce7;--amber:#b7791f;--amber-bg:#fff4d6;--red:#d62c3b;--red-bg:#fdecee;
  --shadow:0 6px 18px rgba(31,49,98,.06);--shadow-lg:0 20px 45px rgba(31,48,100,.13);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
svg{flex:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- wordmark ---------- */
.ua-wordmark{display:inline-flex;align-items:center;gap:9px}
.ua-logo-ring{position:relative;width:34px;height:34px;border-radius:50%;background:conic-gradient(from 200deg,#35d0ff,#3b82f6,#6b5cff,#c04cf0,#35d0ff)}
.ua-logo-ring:after{content:'';position:absolute;inset:7px;border-radius:50%;background:#0f1f55}
.ua-logo-ring:before{content:'';position:absolute;z-index:2;top:5px;left:5px;width:6px;height:6px;border-radius:50%;background:#8be8ff;box-shadow:0 0 7px #54dcff}
.ua-logo-type{font:800 21px/1 'Poppins',sans-serif;letter-spacing:-.6px;color:var(--navy)}
.ua-logo-type span{background:linear-gradient(90deg,#7b61ff,#d946ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.ua-wordmark.light .ua-logo-type{color:#fff}

/* ---------- header / nav ---------- */
.ua-logo-link{display:flex;align-items:center;flex:none}
.ua-logo-img{height:56px;width:auto}
.ua-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px;padding:0 32px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-2)}
.ua-nav{display:flex;gap:6px}
.ua-nav a{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:12px;color:var(--muted);font-weight:600}
.ua-nav a svg{width:19px;height:19px}
.ua-nav a:hover{background:#f1f4ff;color:var(--text)}
.ua-nav a.active{background:var(--grad);color:#fff;box-shadow:0 7px 14px rgba(64,70,222,.2)}
.ua-head-actions{display:flex;align-items:center;gap:12px}
.ua-bell{position:relative}
.ua-bell>summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#f3f5fb;cursor:pointer}
.ua-bell>summary::-webkit-details-marker{display:none}
.ua-bell>summary svg{width:20px;height:20px}
.ua-bell-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid #fff}
.ua-bell-panel{position:absolute;right:0;top:52px;width:340px;max-height:420px;overflow:auto;padding:10px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow-lg)}
.ua-bell-panel h4{margin:6px 8px 8px;font-size:14px}
.ua-bell-item{display:flex;gap:10px;padding:10px;border-radius:12px}
.ua-bell-item:hover{background:#f6f8ff}
.ua-bell-item i{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-style:normal;font-weight:800}
.ua-bell-item b{display:block;font-size:13px}
.ua-bell-item small{color:var(--muted);font-size:12px}
.ua-bell-empty{padding:20px;text-align:center;color:var(--muted)}
.ua-bell-count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;line-height:1}
.ua-bell-dot{display:none}
.ua-bell-head{display:flex;align-items:center;justify-content:space-between}
.ua-bell-head form{margin:0}.ua-bell-head button{border:0;background:none;color:#2563eb;font-size:12px;font-weight:700;cursor:pointer}
.ua-bell-item.unread{background:#f2f6ff}
.ua-bell-item small{display:block;line-height:1.35}
.ua-bell-all{display:block;text-align:center;padding:10px;font-size:12.5px;font-weight:700;color:#2563eb}
.ua-notif-list{display:grid;gap:10px;margin:18px 0}
.ua-notif{display:flex;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:#fff}
.ua-notif.unread{background:#f2f6ff;border-color:#cddcff}
.ua-notif i{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;font-style:normal;font-weight:800}
.ua-notif b{display:block;font-size:14px}.ua-notif p{margin:3px 0;color:#475569;font-size:13px}.ua-notif small{color:var(--muted);font-size:12px}
.ua-divider{width:1px;height:26px;background:var(--border)}
.ua-logout{display:flex;align-items:center;gap:7px;height:42px;padding:0 12px;border:0;border-radius:12px;background:none;color:#d62c3b;font-weight:600}
.ua-logout svg{width:18px;height:18px}
.ua-logout:hover{background:var(--red-bg)}

.ua-bottom-nav{display:none}

/* ---------- page ---------- */
.ua-page{max-width:1240px;margin:0 auto;padding:26px 32px 40px}
.ua-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1240px;margin:0 auto;padding:22px 32px 30px;color:var(--faint);font-size:12.5px;border-top:1px solid var(--border-2)}
.ua-footer nav{display:flex;gap:18px}

/* ---------- hero (greeting + quick buttons) ---------- */
.ua-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:30px 34px;border-radius:24px;background:var(--hero);color:#fff;overflow:hidden;box-shadow:0 14px 30px rgba(73,75,224,.22)}
.ua-hero:before{content:'';position:absolute;width:260px;height:260px;left:44%;top:-120px;border-radius:50%;background:rgba(255,255,255,.08)}
.ua-hero-left{position:relative;display:flex;align-items:center;gap:22px}
.ua-avatar{position:relative;width:104px;height:104px;border-radius:50%;border:4px solid rgba(255,255,255,.9);background:#dfe6ff;overflow:hidden;flex:none}
.ua-avatar img{width:100%;height:100%;object-fit:cover}
.ua-avatar-initials{width:100%;height:100%;display:grid;place-items:center;font-size:34px;font-weight:800;color:var(--navy-2)}
.ua-avatar-edit{position:absolute;right:-2px;bottom:4px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 4px 10px rgba(0,0,0,.15)}
.ua-avatar-wrap{position:relative}
.ua-avatar-wrap .ua-avatar-edit{right:0;bottom:2px}
.ua-hero p{margin:0;color:#e4e9ff;font-size:15px}
.ua-hero h1{margin:2px 0 0;font-size:32px;line-height:1.15;letter-spacing:-.8px}
.ua-quick{position:relative;display:flex;flex-wrap:wrap;gap:12px}
.ua-quick a{display:flex;align-items:center;justify-content:center;gap:10px;min-width:160px;height:54px;padding:0 20px;border-radius:13px;background:#fff;color:var(--navy);font-weight:600;box-shadow:0 7px 16px rgba(17,42,112,.15)}
.ua-quick a i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#f1f4ff;font-style:normal}
.ua-quick a i svg{width:18px;height:18px}
.ua-quick a.active{background:var(--navy-2);color:#fff}
.ua-quick a.active i{background:rgba(255,255,255,.15)}

/* ---------- warning banner ---------- */
.ua-warning{display:flex;align-items:center;gap:16px;margin-top:18px;padding:14px 18px;border:1px solid #f8c9ce;border-radius:16px;background:#fff5f6}
.ua-warning-icon{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#fde0e3;color:var(--red);font-weight:800;font-size:18px}
.ua-warning-copy{flex:1}
.ua-warning-copy strong{display:block;color:#b4232f}
.ua-warning-copy span{color:#7d5960;font-size:13px}

/* ---------- buttons ---------- */
.ua-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:12px;font-weight:700;font-size:14px;white-space:nowrap}
.ua-btn svg{width:18px;height:18px}
.ua-btn-primary{background:var(--grad);color:#fff;box-shadow:0 7px 14px rgba(64,70,222,.21)}
.ua-btn-primary:hover{filter:brightness(1.06)}
.ua-btn-navy{background:var(--navy-2);color:#fff}
.ua-btn-danger{background:#d9303e;color:#fff}
.ua-btn-light{background:#fff;color:var(--navy);border:1px solid var(--border)}
.ua-btn-ghost{background:#f1f4fb;color:var(--text)}
.ua-btn-block{width:100%}
.ua-btn[disabled],.ua-btn.is-disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
.ua-btn-done{background:#e3f6ed;color:#0b8a61;box-shadow:none}

/* ---------- search + filter ---------- */
.ua-searchrow{display:flex;gap:14px;margin-top:18px}
.ua-search{flex:1;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border:1px solid var(--border);border-radius:14px;background:#fff}
.ua-search svg{width:19px;height:19px;color:var(--faint)}
.ua-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px}
.ua-search:focus-within{border-color:#8fa8f8;box-shadow:0 0 0 3px rgba(22,123,244,.1)}
.ua-filter{position:relative}
.ua-filter>summary{list-style:none;display:flex;align-items:center;gap:8px;height:52px;padding:0 22px;border-radius:14px;background:var(--grad);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 7px 14px rgba(64,70,222,.2)}
.ua-filter>summary::-webkit-details-marker{display:none}
.ua-filter>summary svg{width:18px;height:18px}
.ua-filter-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fff;color:var(--purple);font-size:11px}
.ua-filter-panel{position:absolute;right:0;top:62px;z-index:20;width:min(560px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:20px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-lg)}
.ua-filter-panel label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--text-2)}
.ua-filter-panel select{height:44px;padding:0 12px;border:1px solid var(--border);border-radius:11px;background:#fafbfe}
.ua-filter-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* ---------- categories ---------- */
.ua-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.ua-cat{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;border:1px solid transparent;font-weight:600;color:var(--text-2);transition:transform .15s}
.ua-cat:hover{transform:translateY(-2px)}
.ua-cat i{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:#fff;font-style:normal;box-shadow:0 5px 12px rgba(31,49,98,.08)}
.ua-cat i svg{width:22px;height:22px}
.ua-cat.digital{background:#eaf4ff}.ua-cat.digital i{color:#1d6ff2}
.ua-cat.technical{background:#f2edff}.ua-cat.technical i{color:#6d3fe0}
.ua-cat.health{background:#fff0f3}.ua-cat.health i{color:#e0364f}
.ua-cat.business{background:#fff7e6}.ua-cat.business i{color:#d98a06}
.ua-cat.active{border-color:currentColor;box-shadow:0 0 0 2px rgba(101,60,233,.25)}

/* ---------- sections ---------- */
.ua-section{margin-top:28px}
.ua-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.ua-section-head h2{margin:0;font-size:22px;letter-spacing:-.4px}
.ua-section-head p{margin:2px 0 0;color:var(--muted);font-size:13px}
.ua-link{color:var(--blue);font-weight:700}
.ua-page-title{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ua-page-title h1{margin:0;font-size:28px;letter-spacing:-.6px}
.ua-page-title p{margin:2px 0 0;color:var(--muted)}
.ua-back{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--border);font-size:20px;font-weight:700}
.ua-back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--muted);font-weight:600}
.ua-back-link:hover{color:var(--text)}
.ua-result-note{margin:14px 0 0;color:var(--muted);font-size:13px}
.ua-result-note a{color:var(--blue);font-weight:600}

/* ---------- course card ---------- */
.ua-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ua-card{position:relative;display:grid;grid-template-columns:44% 1fr;min-height:250px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.ua-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(31,49,98,.1)}
.ua-card-img{position:relative;background:#e8edf9 center/cover no-repeat}
.ua-countdown{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:#fff;color:#c2410c;font-size:11px;font-weight:700;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.ua-card-body{position:relative;display:flex;flex-direction:column;padding:18px 18px 16px}
.ua-card-body h3{margin:0 40px 10px 0;font-size:18px;line-height:1.22;letter-spacing:-.3px}
.ua-details{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ua-details li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;color:#4b587a;font-size:13.5px;font-weight:500;line-height:1.25}
.ua-details li i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#f1f4fb;font-style:normal}
.ua-details li i svg{width:16px;height:16px;stroke-width:2}
.ua-details li i.ic-blue{background:#e8f1ff;color:var(--blue)}
.ua-details li i.ic-purple{background:#f0eaff;color:var(--purple)}
.ua-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.ua-pill{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.ua-pill.fee{background:var(--green-bg);color:var(--green)}
.ua-pill.fee.paid{background:#e0ecff;color:#1d4ed8}
.ua-pill.cat{background:#eef2ff;color:#4338ca}
.ua-pill.cat.digital{background:#e0f2fe;color:#0369a1}
.ua-pill.cat.technical{background:#ede9fe;color:#5b21b6}
.ua-pill.cat.health{background:#ffe4e6;color:#be123c}
.ua-pill.cat.business{background:#fef3c7;color:#92400e}
.ua-pill.seats{background:#ece7ff;color:#3b1d8f;border:1.5px solid #9d86ff}
.ua-pill.seats.low{background:#fff1e6;color:#c2410c;border-color:#fdba74}
.ua-pill.seats.full{background:var(--red-bg);color:var(--red);border-color:#fca5a5}
.ua-heart{position:absolute;right:14px;top:14px;z-index:2;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;background:#fff;color:#9aa5bf;transition:transform .15s}
.ua-heart svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.ua-heart:hover{transform:scale(1.08)}
.ua-heart.saved{color:#e11d48;border-color:#fecdd3;background:#fff1f2}
.ua-heart.saved svg{fill:currentColor}
.ua-card-link{position:absolute;inset:0;z-index:1}
.ua-empty{grid-column:1/-1;padding:40px 20px;border:1px dashed #d3dbeb;border-radius:18px;background:#fbfcff;text-align:center;color:var(--muted)}
.ua-empty b{display:block;margin-bottom:4px;color:var(--text-2);font-size:16px}

/* ---------- programme card ---------- */
.ua-prog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ua-prog{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.ua-prog:hover{transform:translateY(-2px)}
.ua-prog-img{height:170px;background:#e8edf9 center/cover no-repeat}
.ua-prog-body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px;flex:1}
.ua-prog-body h3{margin:4px 0 0;font-size:17px;line-height:1.25}
.ua-prog-body h4{margin:0;color:var(--muted);font-size:13px;font-weight:600}
.ua-prog-body p{margin:4px 0 0;color:#4b587a;font-size:13px}
.ua-prog-body footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted)}
.ua-prog-body footer b{color:var(--blue)}
.ua-status{display:inline-flex;align-self:flex-start;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.4px}
.ua-status.open{background:var(--green-bg);color:var(--green)}
.ua-status.upcoming{background:#e0ecff;color:#1d4ed8}
.ua-status.closed{background:#eef0f5;color:#6b7280}
.ua-prog-banner{display:grid;grid-template-columns:320px 1fr;gap:24px;padding:20px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:var(--shadow);margin-bottom:22px}
.ua-prog-banner .ua-prog-img{height:auto;min-height:190px;border-radius:14px}
.ua-prog-banner h1{margin:8px 0 4px;font-size:26px;letter-spacing:-.5px}
.ua-prog-banner p{margin:4px 0;color:#4b587a}

/* ---------- activity ---------- */
.ua-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.ua-kpi{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;border:1px solid}
.ua-kpi i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-style:normal;font-size:19px;font-weight:800;background:#fff}
.ua-kpi strong{flex:1;font-size:14px}
.ua-kpi b{font-size:26px}
.ua-kpi.pending{background:#fff8e6;border-color:#f7df9f;color:#8a5a00}
.ua-kpi.approved{background:#eafaf1;border-color:#b8ebcd;color:#087a43}
.ua-kpi.rejected{background:#fff0f2;border-color:#f8c6cd;color:#be1e2d}
.ua-tabs-inline{display:flex;flex-wrap:wrap;gap:8px}
.ua-tabs-inline a{height:38px;display:inline-flex;align-items:center;padding:0 14px;border-radius:10px;border:1px solid var(--border);background:#fff;font-weight:600;font-size:13px;color:var(--muted)}
.ua-tabs-inline a.active{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.ua-app{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow)}
.ua-app-status{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;color:#fff;font-size:12px;font-weight:700}
.ua-app-status b{letter-spacing:.6px}
.ua-app-status.pending{background:linear-gradient(90deg,#e0a100,#f0b92b)}
.ua-app-status.approved{background:linear-gradient(90deg,#15a05a,#2fc377)}
.ua-app-status.rejected{background:linear-gradient(90deg,#d62c3b,#ef5261)}
.ua-app .ua-card{border:0;border-radius:0;box-shadow:none;min-height:220px}
.ua-app .ua-card:hover{transform:none}
.ua-app-note{margin:0;padding:10px 16px;border-top:1px solid var(--border-2);background:#fff7f7;color:#9b1c2a;font-size:12.5px}

/* ---------- course detail ---------- */
.ua-detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.ua-detail-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:26px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:var(--shadow);position:relative}
.ua-detail-hero .ua-heart{right:auto;left:auto;position:static}
.ua-detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ua-detail-status{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:600;font-size:13px}
.ua-detail-hero h1{margin:10px 0 6px;font-size:30px;line-height:1.15;letter-spacing:-.8px}
.ua-detail-hero h2{margin:0 0 12px;font-size:17px;color:var(--text-2)}
.ua-detail-hero .ua-desc{color:#5a6788;line-height:1.7}
.ua-detail-poster{border-radius:16px;min-height:280px;background:#e8edf9 center/cover no-repeat;position:relative}
.ua-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.ua-fact{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px}
.ua-fact i{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#fff;font-style:normal;font-size:20px;box-shadow:0 4px 10px rgba(31,49,98,.08)}
.ua-fact i svg{width:22px;height:22px}
.ua-fact i.ic-blue{color:var(--blue)}.ua-fact i.ic-purple{color:var(--purple)}.ua-fact i.ic-amber{color:#d98a06}
.ua-fact span{display:block;color:var(--muted);font-size:12px}
.ua-fact strong{display:block;font-size:15px}
.ua-fact em{display:inline-block;margin-top:3px;padding:2px 8px;border-radius:999px;background:var(--green-bg);color:var(--green);font-size:10.5px;font-style:italic;font-weight:600}
.ua-fact.loc{background:#eaf4ff}.ua-fact.date{background:#eef2ff}.ua-fact.fee{background:#fff7dc}
.ua-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;padding:6px;border-radius:16px;background:var(--navy-2)}
.ua-tabs button{height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;background:#fff;color:var(--navy);font-weight:600}
.ua-tabs button svg{width:18px;height:18px}
.ua-tabs button.active{background:var(--grad);color:#fff}
.ua-panel{display:none;margin-top:14px;padding:24px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.ua-panel.active{display:block}
.ua-panel h3{margin:0 0 10px;font-size:18px}
.ua-panel p{color:#4b587a;line-height:1.7}
.ua-callout{margin:14px 0;padding:14px 16px;border-radius:12px;background:#f1f4ff;color:var(--navy-2);font-weight:600}
.ua-learn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ua-learn span{padding:12px 14px;border-radius:12px;background:#f6fbf8;color:#0f7a45;font-size:13px;font-weight:600}
.ua-modules{display:flex;flex-direction:column;gap:10px}
.ua-modules div{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--border-2);border-radius:14px}
.ua-modules b{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--grad);color:#fff}
.ua-modules strong{display:block}
.ua-modules small{color:var(--muted)}
.ua-trainer{display:flex;align-items:center;gap:16px}
.ua-trainer-avatar{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:#fff;font-size:22px;font-weight:800}
.ua-trainer h4{margin:0;font-size:17px}
.ua-trainer p{margin:0}
.ua-side{position:sticky;top:90px;padding:20px;border-radius:20px;background:linear-gradient(160deg,#1a7cf5,#3f63ee);color:#fff;box-shadow:0 14px 30px rgba(31,90,230,.25)}
.ua-side h3{margin:0 0 14px;font-size:18px}
.ua-days{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;background:#dbe5ff}
.ua-days div{display:grid;grid-template-columns:60px 1fr auto;gap:8px;padding:11px 12px;background:#fff;color:var(--navy);font-size:12.5px}
.ua-days div b{font-weight:700}
.ua-limited{display:flex;gap:10px;margin:14px 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.15);font-size:12.5px}
.ua-limited small{display:block;color:#dbe6ff}
.ua-side .ua-btn{height:52px;font-size:16px}
.ua-side-note{display:block;margin-top:10px;text-align:center;color:#dbe6ff;font-size:11.5px}
.ua-batch-pick{margin-top:14px}
.ua-batch-pick h4{margin:0 0 8px;font-size:13px;color:#dbe6ff;font-weight:600}
.ua-batch-pick a{display:flex;justify-content:space-between;gap:8px;margin-top:6px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.12);font-size:12.5px}
.ua-batch-pick a:hover{background:rgba(255,255,255,.22)}

/* ---------- modal ---------- */
.ua-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(13,23,56,.5);backdrop-filter:blur(3px)}
.ua-modal.open{display:flex}
.ua-modal-card{position:relative;width:min(480px,100%);max-height:92vh;overflow:auto;padding:30px 28px 26px;border-radius:22px;background:#fff;text-align:center;box-shadow:var(--shadow-lg)}
.ua-modal-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f1f4fb;font-size:20px}
.ua-modal-symbol{width:62px;height:62px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;font-size:28px;font-weight:800}
.ua-modal-symbol.warn{background:#fff4d6;color:#c77d00}
.ua-modal-symbol.ok{background:#dcfce7;color:#079447}
.ua-modal h2{margin:0 0 6px;font-size:22px}
.ua-modal p{margin:0 0 14px;color:var(--muted)}
.ua-confirm{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;text-align:left}
.ua-confirm div{padding:10px 12px;border-radius:11px;background:#f6f8fd}
.ua-confirm span{display:block;color:var(--faint);font-size:11px}
.ua-confirm b{font-size:13px;overflow-wrap:anywhere}
.ua-modal-actions{display:flex;gap:10px;margin-top:8px}
.ua-modal-actions>*{flex:1}

/* ---------- forms ---------- */
.ua-field{display:flex;flex-direction:column;gap:6px}
.ua-field>span:not(.ua-input){font-size:13px;font-weight:700;color:var(--text-2)}
.ua-field>span b{color:var(--red)}
.ua-input{position:relative;display:flex;align-items:center}
.ua-field input,.ua-field select,.ua-field textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:#fafbfe;outline:0;font-size:14px}
.ua-field textarea{height:auto;min-height:88px;padding:12px 14px;resize:vertical}
.ua-field input:focus,.ua-field select:focus,.ua-field textarea:focus{border-color:#8fa8f8;background:#fff;box-shadow:0 0 0 3px rgba(22,123,244,.1)}
.ua-field.has-error input,.ua-field.has-error select,.ua-field.has-error textarea{border-color:#f19aa3;background:#fff8f8}
.ua-error{color:var(--red);font-size:12px}
.ua-eye{position:absolute;right:8px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:none;color:var(--faint)}
.ua-eye svg{width:19px;height:19px}
.ua-alert{padding:12px 14px;border-radius:12px;font-size:13px}
.ua-alert.error{background:var(--red-bg);color:#9b1c2a}
.ua-alert.ok{background:#e9f9f0;color:#0b7a45}

/* ---------- auth ---------- */
.ua-auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.ua-auth{display:grid;grid-template-columns:1.08fr .92fr;width:min(1180px,100%);min-height:640px;border:1px solid #dce3f4;border-radius:26px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}
.ua-auth-art{position:relative;overflow:hidden;background:#0b2e78}
.ua-auth-art::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b2e78 0%,#1f6fe6 55%,#3d8ef5 100%)}
.ua-auth-art::after{content:'';position:absolute;top:0;left:0;width:100%;aspect-ratio:1035/942;background:var(--art) center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)}
.ua-auth-panel{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:52px 56px}
.ua-auth-panel h2{margin:26px 0 6px;font-size:30px;letter-spacing:-.6px;font-weight:600}
.ua-auth-panel>p{margin:0 0 22px;color:var(--muted);line-height:1.6}
.ua-auth-form{display:flex;flex-direction:column;gap:14px}
.ua-auth-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.ua-auth-row label{display:flex;align-items:center;gap:7px;color:var(--muted)}
.ua-auth-foot{margin:16px 0 0;text-align:center;color:var(--muted)}
.ua-auth-foot a{color:var(--blue);font-weight:700}
.ua-or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;font-weight:600}
.ua-or:before,.ua-or:after{content:'';flex:1;height:1px;background:var(--border)}
.ua-google{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border:1px solid var(--border);border-radius:12px;background:#fff;font-weight:600;color:#56627f}
.ua-google svg{width:20px;height:20px}
.ua-landing-eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.8px;color:#5a3fe0}
.ua-auth-panel h2.ua-landing-title{margin:2px 0 14px;font-size:clamp(30px,3.1vw,40px);font-weight:600;letter-spacing:-.8px;line-height:1.1;color:#10204d}
.ua-auth-panel>p.ua-landing-lead{margin:0 0 30px;font-size:17px;line-height:1.65;color:#141b34;max-width:340px}
.ua-landing-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.ua-landing-actions .ua-btn{height:54px;font-size:16px}
.ua-landing-points{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;padding:0;list-style:none}
.ua-landing-points li{display:flex;align-items:center;gap:12px;color:#4b587a}
.ua-landing-points li i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f1f4ff;font-style:normal}

/* ---------- profile ---------- */
.ua-profile-form{padding:26px;border:1px solid var(--border);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.ua-form-section{margin-bottom:26px}
.ua-form-section>header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ua-form-section>header i{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#edf1ff,#f1eaff);font-style:normal;color:var(--purple)}
.ua-form-section>header h2{margin:0;font-size:18px}
.ua-form-section>header p{margin:0;color:var(--muted);font-size:12.5px}
.ua-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
.ua-form-grid .span-2{grid-column:span 2}
.ua-form-grid .span-3{grid-column:1/-1}
.ua-photo-row{display:flex;align-items:center;gap:18px}
.ua-photo-row .ua-avatar{width:88px;height:88px;border-color:#e3e9f7}
.ua-form-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:18px;border-top:1px solid var(--border-2)}
.ua-profile-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.ua-profile-card{padding:22px 24px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.ua-profile-card>header{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.ua-profile-card>header i{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#edf1ff,#f1eaff);font-style:normal;color:var(--purple)}
.ua-profile-card>header i svg,.ua-form-section>header i svg{width:22px;height:22px}
.ua-profile-card>header h2{margin:0;font-size:18px}
.ua-profile-card>header p{margin:2px 0 0;color:var(--muted);font-size:12px}
.ua-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.ua-profile-item{min-height:60px;padding:10px 13px;border:1px solid var(--border-2);border-radius:11px;background:#fafbfe}
.ua-profile-item.full{grid-column:1/-1}
.ua-profile-item span{display:block;margin-bottom:3px;color:#8a95ae;font-size:10.5px;font-weight:600}
.ua-profile-item strong{display:block;color:var(--text-2);font-size:13px;font-weight:600;overflow-wrap:anywhere}
.ua-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.ua-stat{padding:16px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.ua-stat span{display:block;color:var(--muted);font-size:12px}
.ua-stat b{font-size:24px}

/* ---------- toast ---------- */
.ua-toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,20px);max-width:min(460px,92vw);padding:13px 20px;border-radius:14px;background:#10204d;color:#fff;font-weight:600;font-size:13.5px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s}
.ua-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ua-grid{grid-template-columns:1fr}
  .ua-prog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ua-detail{grid-template-columns:1fr}
  .ua-side{position:static}
  .ua-hero{flex-direction:column;align-items:flex-start}
  .ua-cats{grid-template-columns:repeat(2,1fr)}
  .ua-profile-sections{grid-template-columns:1fr}
  .ua-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ua-form-grid .span-2{grid-column:1/-1}
}
@media (max-width:860px){
  .ua-auth{grid-template-columns:1fr;min-height:0}
  .ua-auth-art{min-height:300px}
  .ua-auth-panel{padding:30px 24px}
  .ua-detail-hero{grid-template-columns:1fr}
  .ua-detail-poster{min-height:220px;order:-1}
}
@media (max-width:760px){
  body{padding-bottom:78px}
  .ua-header{height:62px;padding:0 16px}
  .ua-logo-img{height:46px}
  .ua-nav,.ua-logout span,.ua-divider{display:none}
  .ua-page{padding:16px 16px 28px}
  .ua-footer{flex-direction:column;padding:18px 16px 24px}
  .ua-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);height:70px;padding:0 6px env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--border-2);box-shadow:0 -6px 18px rgba(31,49,98,.06)}
  .ua-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--faint);font-size:11px;font-weight:600}
  .ua-bottom-nav a svg{width:22px;height:22px}
  .ua-bottom-nav a.active{color:var(--purple)}
  .ua-hero{padding:22px 20px;border-radius:20px}
  .ua-avatar{width:76px;height:76px}
  .ua-hero h1{font-size:25px}
  .ua-quick{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .ua-quick a{min-width:0;height:auto;padding:10px 6px;flex-direction:column;gap:5px;font-size:12px}
  .ua-warning{flex-wrap:wrap}
  .ua-warning .ua-btn{width:100%}
  .ua-searchrow{gap:10px}
  .ua-filter>summary{padding:0 16px}
  .ua-filter>summary span.label{display:none}
  .ua-filter-panel{position:fixed;left:16px;right:16px;top:auto;bottom:86px;width:auto;grid-template-columns:1fr;max-height:70vh;overflow:auto}
  .ua-cats{gap:10px}
  .ua-cat{padding:12px;gap:10px;font-size:12.5px}
  .ua-cat i{width:38px;height:38px}
  .ua-card{grid-template-columns:1fr;min-height:0}
  .ua-card-img{height:190px}
  .ua-prog-grid{grid-template-columns:1fr}
  .ua-prog-banner{grid-template-columns:1fr}
  .ua-kpis{grid-template-columns:1fr}
  .ua-facts{grid-template-columns:1fr}
  .ua-learn{grid-template-columns:1fr}
  .ua-detail-hero{padding:18px}
  .ua-detail-hero h1{font-size:24px}
  .ua-form-grid,.ua-profile-grid,.ua-confirm{grid-template-columns:1fr}
  .ua-profile-form{padding:18px}
  .ua-stats{grid-template-columns:repeat(2,1fr)}
  .ua-bell-panel{position:fixed;left:16px;right:16px;top:70px;width:auto}
  .ua-auth-page{padding:0}
  .ua-auth{border-radius:0;border:0}
  .ua-auth-art{min-height:240px}
}

/* Desktop: render the app content ~16% larger to match the design prototype. */
@media (min-width:1100px){
  .ua-page{zoom:1.16}
}

/* ---------- Home (v45 design) ---------- */
.ua-page:has(.uh){zoom:1}
.uh{max-width:1200px;margin:0 auto;color:#102075;font-family:Arial,'Poppins',sans-serif}
.uh-search{display:flex;align-items:center;gap:12px;height:46px;padding:0 17px;margin-bottom:14px;background:#fff;border-radius:14px;box-shadow:0 1px 6px #cce3f5}
.uh-search svg{width:24px;height:24px;color:#102075;flex:none}
.uh-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:14px Arial,sans-serif;color:#102075}
.uh-alert{display:flex;align-items:center;gap:14px;padding:12px 18px;margin-bottom:14px;border:1px solid #ffc2ca;border-radius:10px;background:#fff6f7;text-decoration:none}
.uh-alert svg{width:34px;height:34px;color:#ec1725;flex:none}
.uh-alert span{flex:1}
.uh-alert strong{display:block;color:#ef1725;font-size:16px;line-height:1.35}
.uh-alert small{display:block;margin-top:3px;font-size:14px;color:#23304c}
.uh-alert b{font-size:32px;color:#ef1725;line-height:1}
.uh-hero{margin-bottom:6px}
.uh-hero-track{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:961/328;background:#e7f2ff}
.uh-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .5s}
.uh-slide.active{opacity:1;visibility:visible}
.uh-slide img{width:100%;height:100%;object-fit:fill;display:block}
.uh-dots{display:flex;justify-content:center;align-items:center;gap:10px;height:30px}
.uh-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#c4cbd7;cursor:pointer;transition:.2s}
.uh-dots button.active{width:22px;border-radius:8px;background:#1163dc}
.uh-sec{margin-bottom:28px}
.uh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.uh-head h2{margin:0;font:700 20px/1.35 Arial,sans-serif;color:#0c1c72}
.uh-head a,.uh-head button{display:inline-flex;align-items:center;gap:5px;padding:6px 0;border:0;background:none;color:#0645d2;font:600 14px Arial,sans-serif;cursor:pointer;text-decoration:none}
.uh-head svg{width:16px;height:16px}
.uh-sub{margin:-2px 0 10px;font-size:15px;color:#7c8298}
.uh-eco{margin-top:12px;margin-bottom:30px}
.uh-eco .uh-head{margin-bottom:3px}
.uh-eco-rail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.uh-eco-card{display:flex;flex-direction:column;align-items:center;padding:12px 5px;border:1px solid #e9f3fa;border-radius:12px;background:#fff;box-shadow:0 2px 4px #ddecf6;cursor:pointer;min-width:0;font-family:inherit;color:inherit}
.uh-eco-card:nth-child(7n+1){background:#f4fffa}.uh-eco-card:nth-child(7n+3){background:#fffbf5}.uh-eco-card:nth-child(7n+5){background:#f7f3ff}.uh-eco-card:nth-child(7n+6){background:#fff4fa}
.uh-eco-card img{width:100%;height:76px;object-fit:contain;border-radius:8px}
.uh-eco-card strong{display:flex;align-items:center;justify-content:center;min-height:35px;margin:6px 0;font-size:13px;line-height:1.3;text-align:center;color:#102075}
.uh-eco-card span{padding:5px 12px;border-radius:15px;background:#dcf4ff;color:#2384ce;font-size:11px}
.uh-sponsored{display:grid;grid-template-columns:44% minmax(0,1fr);gap:0 9px;margin-bottom:26px}
.uh-sponsored .uh-head{grid-column:1/-1}
.uh-sponsor-card{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 12px;border-radius:11px;background:#fff;box-shadow:0 2px 5px #deebf5}
.uh-sponsor-card>img{width:100px;flex:none}
.uh-sponsor-card>div{flex:1;min-width:0}
.uh-sponsor-card h3{margin:0 0 4px;font:700 18px/1.35 Arial,sans-serif;color:#0d2688}
.uh-sponsor-card p{margin:0 0 12px;font-size:14px;line-height:1.5;color:#12247b}
.uh-sponsor-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:22px;background:linear-gradient(#00c7ff,#0043ff);color:#fff;font:600 16px Arial,sans-serif;text-decoration:none;box-shadow:0 3px 5px #bce1ff}
.uh-banner{display:block;min-width:0;overflow:hidden;border-radius:12px}
.uh-banner img{width:100%;height:100%;object-fit:cover;display:block}
.uh-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.uh-cat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:10px 7px;border-radius:9px;background:#fff;box-shadow:0 2px 5px #deebf5;text-decoration:none;color:#102075;text-align:center}
.uh-cat img{width:100px;max-width:100%;height:77px;object-fit:contain;border-radius:10px}
.uh-cat span{width:100%;min-height:36px;font-size:13px;line-height:1.4;font-weight:600}
.uh-learn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.uh-learn-card{display:flex;align-items:center;gap:10px;min-height:90px;padding:12px;border-radius:9px;background:#fff;box-shadow:0 2px 5px #deebf5;text-decoration:none;color:#102075}
.uh-learn-card img{width:65px;border-radius:10px;flex:none}
.uh-learn-card strong{display:block;font-size:14px;line-height:1.3}
.uh-learn-card small{display:block;margin-top:5px;font-size:12px;line-height:1.4}
.uh-eco-card:focus-visible,.uh-cat:focus-visible,.uh-learn-card:focus-visible,.uh-slide:focus-visible{outline:2px solid #0765ed;outline-offset:3px}
.uh-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(17,32,55,.55);backdrop-filter:blur(4px)}
.uh-modal[hidden]{display:none}
.uh-dialog{width:min(100%,720px);max-height:86vh;display:flex;flex-direction:column;padding:20px 14px 14px;border-radius:24px;background:#fbfdff;box-shadow:0 18px 60px #152b5140;color:#111566;font-family:Arial,sans-serif}
.uh-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:0 6px 18px}
.uh-dialog h2{margin:0 0 7px;font:700 22px/1.25 Arial,sans-serif;color:#111566}
.uh-dialog header p{margin:0;font-size:14px;color:#606984}
.uh-close{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#edf2ff;color:#111566;cursor:pointer;flex:none}
.uh-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.uh-dialog-scroll{overflow-y:auto;min-height:0;padding:2px 4px 5px}
.uh-dialog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.uh-dialog-grid a{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:127px;padding:9px 4px;border:1px solid #edf4fa;border-radius:13px;background:#fff;color:#101467;text-decoration:none;box-shadow:0 2px 8px #cfe5f53b}
.uh-dialog-grid a:hover{background:#f3faff}
.uh-dialog-grid img{width:80px;max-width:95%;aspect-ratio:184/145;object-fit:contain;border-radius:12px}
.uh-dialog-grid span{font-size:12px;font-weight:600;line-height:1.35;text-align:center;letter-spacing:-.3px}
@media(max-width:900px){
  .uh-eco-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
  .uh-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .uh-learn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uh-sponsored{grid-template-columns:1fr;gap:10px}
}
@media(max-width:760px){
  .ua-page:has(.uh){padding-top:12px}
  .uh-search{height:42px;border-radius:30px;margin-bottom:10px}
  .uh-search input{font-size:12.5px}
  .uh-alert{padding:10px;gap:10px;border-radius:8px;margin-bottom:10px}
  .uh-alert svg{width:28px;height:28px}.uh-alert strong{font-size:12px}.uh-alert small{font-size:11px}.uh-alert b{font-size:28px}
  .uh-hero-track{aspect-ratio:494/251}
  .uh-dots{height:24px;gap:8px}.uh-dots button{width:7px;height:7px}.uh-dots button.active{width:18px}
  .uh-sec{margin-bottom:22px}
  .uh-head h2{font-size:14px}.uh-head a,.uh-head button{font-size:11px}
  .uh-sub{font-size:12px}
  .uh-eco-rail{display:flex;overflow-x:auto;gap:5px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .uh-eco-card{flex:0 0 calc((100% - 15px)/4);padding:9px 3px;scroll-snap-align:start;border-radius:9px}
  .uh-eco-card img{height:36px}.uh-eco-card strong{font-size:11px;min-height:29px;margin:4px 0}.uh-eco-card span{font-size:10px;padding:3px 6px}
  .uh-sponsor-card{gap:8px;padding:10px}.uh-sponsor-card>img{width:52px}.uh-sponsor-card h3{font-size:13px}.uh-sponsor-card p{font-size:11px;margin-bottom:7px}.uh-sponsor-btn{font-size:12px;padding:7px 10px}
  .uh-cats{gap:7px}.uh-cat{padding:8px 5px;gap:5px}.uh-cat img{width:44px;height:40px}.uh-cat span{font-size:11px;min-height:0;letter-spacing:-.35px}
  .uh-learn{gap:7px}.uh-learn-card{min-height:0;padding:8px;gap:8px}.uh-learn-card img{width:40px;border-radius:7px}.uh-learn-card strong{font-size:11.5px}.uh-learn-card small{font-size:10px;margin-top:3px}
  .uh-modal{padding:12px}.uh-dialog{padding:16px 9px 10px}.uh-dialog h2{font-size:20px}.uh-dialog header p{font-size:12px}.uh-dialog-grid{gap:6px}.uh-dialog-grid span{font-size:11px}.uh-dialog-grid a{min-height:117px}.uh-dialog-grid img{width:72px}
}


/* Mobile bottom nav (v45): Utama, Teroka, Imbas QR, Mesej, Profil */
@media (max-width:760px){
  .ua-bottom-nav{grid-template-columns:repeat(5,1fr);align-items:center}
  .ua-bottom-nav a,.ua-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#1a2464;font:500 10px Arial,sans-serif;cursor:pointer}
  .ua-bottom-nav a svg,.ua-bottom-nav button svg{width:23px;height:23px}
  .ua-bottom-nav a.active{color:#003fff}
  .ua-bottom-nav a.active span{border-bottom:2px solid #003fff;padding-bottom:3px}
  .ua-bottom-nav .ua-scan{width:58px;height:58px;border-radius:50%;justify-self:center;align-self:start;transform:translateY(-9px);background:linear-gradient(#00d2f9,#0055ff);box-shadow:0 3px 8px #8ed7ff;color:#fff;gap:2px}
  .ua-bottom-nav .ua-scan svg{width:26px;height:26px}
  .ua-bottom-nav .ua-scan span{font-size:9.5px;line-height:1.1}
}


.ua-notif p,.ua-bell-item small{white-space:pre-line}

/* Auth pages: fit the screen without scrolling (page padding no longer adds to the height; panel tightens on short screens) */
.ua-auth-page{box-sizing:border-box}
@media(max-height:820px){
  .ua-auth-page{padding:14px 28px}
  .ua-auth{min-height:0}
  .ua-auth-panel{padding:26px 48px}
  .ua-auth-panel h2.ua-landing-title{font-size:30px;margin:0 0 6px}
  .ua-auth-panel>p.ua-landing-lead{margin:0 0 16px;font-size:15px;line-height:1.5}
  .ua-auth-form{gap:10px}
  .ua-field input,.ua-google{height:42px}
  .ua-btn.ua-btn-block{height:42px}
  .ua-auth-foot{margin-top:10px}
}
@media(max-height:680px){
  .ua-auth-page{padding:8px 20px}
  .ua-auth-panel{padding:16px 40px}
  .ua-auth-panel h2.ua-landing-title{font-size:25px;margin:0 0 2px}
  .ua-auth-panel>p.ua-landing-lead{margin:0 0 10px;font-size:13.5px}
  .ua-auth-form{gap:7px}
  .ua-field{gap:3px}.ua-field>span:not(.ua-input){font-size:12px}
  .ua-field input,.ua-google,.ua-btn.ua-btn-block{height:38px}
  .ua-auth-foot{margin-top:6px;font-size:13px}
  .ua-or{font-size:11px}
}
/* Phones with a short screen: drop the banner so the form fits without scrolling */
@media(max-width:760px) and (max-height:820px){
  .ua-auth-page{padding:0}
  .ua-auth{border-radius:0;border:0;box-shadow:none;min-height:100vh}
  .ua-auth-art{display:none}
  .ua-auth-panel{padding:22px 22px 18px;justify-content:center}
  .ua-auth-row{flex-wrap:wrap;gap:6px 12px}
}
@media(max-width:760px){body:has(.ua-auth-page){padding-bottom:0}}

/* ---------- Auth on phones: mobile app look (v45) ---------- */
.ua-auth-mlogo,.ua-welcome-hero{display:none}
.ua-auth-card{display:contents}
@media(max-width:760px){
  body:has(.ua-auth-page){background:#f4f7fc}
  .ua-auth-page{min-height:100vh;min-height:100dvh;padding:0;background:radial-gradient(circle at -30px -60px,rgba(21,101,224,.16),transparent 230px),radial-gradient(circle at calc(100% + 40px) -20px,rgba(34,168,69,.14),transparent 200px),#f4f7fc}
  .ua-auth{min-height:100vh;min-height:100dvh;border:0;border-radius:0;box-shadow:none;background:none}
  .ua-auth-art{display:none}
  .ua-auth-panel{padding:22px 20px 28px;align-items:center;justify-content:center}
  .ua-auth-mlogo{display:block;height:62px;width:auto;margin:0 auto 22px}
  .ua-auth-card{display:block;width:100%;max-width:460px;padding:26px 22px 24px;background:#fff;border:1px solid #eaeff7;border-radius:28px;box-shadow:0 16px 40px rgba(25,60,140,.07)}
  .ua-auth-card .ua-landing-eyebrow,.ua-auth-card>.ua-wordmark{display:none}
  .ua-auth-panel .ua-auth-card>h2,.ua-auth-panel .ua-auth-card h2.ua-landing-title{margin:0 0 6px;font-size:25px;font-weight:600;letter-spacing:-.4px;line-height:1.2;color:#0f2a6b;text-align:center}
  .ua-auth-panel .ua-auth-card>p:not(.ua-auth-foot),.ua-auth-panel .ua-auth-card>p.ua-landing-lead{margin:0 auto 22px;max-width:none;font-size:14px;line-height:1.4;color:#6b7595;text-align:center}
  .ua-auth-card .ua-auth-form{gap:12px}
  .ua-auth-card .ua-auth-row{flex-wrap:nowrap;font-size:12.5px}
  /* Welcome: the app's hero picture with a wave, Get Started underneath */
  .ua-welcome{background:#fff}
  .ua-welcome .ua-auth-panel{padding:0;justify-content:stretch;align-items:stretch}
  .ua-welcome .ua-auth-card{display:flex;flex-direction:column;flex:1;max-width:none;padding:0;border:0;border-radius:0;box-shadow:none;background:#fff}
  .ua-welcome-hero{display:block;position:relative;flex:1;min-height:320px;overflow:hidden;background:#0a1f54;border-radius:0 0 50% 50%/0 0 34px 34px}
  .ua-welcome-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
  .ua-welcome .ua-landing-eyebrow,.ua-welcome .ua-landing-title,.ua-welcome .ua-landing-lead{display:none}
  .ua-welcome .ua-landing-actions{margin:0;padding:14px 56px calc(26px + env(safe-area-inset-bottom))}
  .ua-welcome .ua-landing-actions .ua-btn{height:58px;border-radius:16px;font-size:17px;font-weight:800;background:linear-gradient(90deg,#2e6bff,#5b3df0);box-shadow:0 8px 18px rgba(91,61,240,.27)}
}
@media(max-width:760px) and (max-height:700px){
  .ua-auth-mlogo{height:46px;margin-bottom:14px}
  .ua-auth-card{padding:20px 18px}
}
/* Phones: no site footer (the bottom nav is the app frame, as in the mobile app) */
@media(max-width:760px){.ua-footer{display:none}}
/* Phones: section title on its own line, status chips scroll sideways (app filter chips) */
@media(max-width:760px){
  .ua-section-head:has(.ua-tabs-inline){flex-direction:column;align-items:stretch;gap:10px}
  .ua-tabs-inline{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .ua-tabs-inline::-webkit-scrollbar{display:none}
  .ua-tabs-inline a{flex:none;white-space:nowrap}
}

/* ---------- Login on phones: mobile app design (blue backdrop, logo in card, reset pop-up) ---------- */
.ua-only-phone,.ua-input-icon,.ua-auth-close,.ua-auth-mfoot{display:none}
.ua-reset{width:min(420px,calc(100vw - 48px));padding:0;border:0;border-radius:24px;background:#fff;color:#0f2a6b;box-shadow:0 24px 60px rgba(6,26,92,.35)}
.ua-reset::backdrop{background:rgba(6,26,92,.6)}
.ua-reset form{display:flex;flex-direction:column;gap:14px;padding:20px 22px 22px}
.ua-reset header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ua-reset h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.3px;color:#0f2a6b}
.ua-reset-x{display:grid;place-items:center;width:38px;height:38px;margin-right:-8px;border:0;border-radius:50%;background:none;color:#6b7595;cursor:pointer}
.ua-reset-x svg{width:22px;height:22px}
.ua-reset p{margin:0 0 4px;font-size:14.5px;line-height:1.45;color:#1b2440}
.ua-reset .ua-field>span:first-child{font-weight:600;color:#0f2a6b}
.ua-reset .ua-field input{height:52px;padding-left:48px;border-color:#c9dcf7;background:#f0f6ff;border-radius:14px;font-size:15px}
.ua-reset .ua-input-icon{display:grid;color:#1565e0}
.ua-reset-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.ua-reset-actions .ua-btn{height:50px;border-radius:14px;font-size:15.5px;font-weight:600}
.ua-reset-cancel{border:1.4px solid #1565e0;background:#fff;color:#1565e0}
.ua-reset-actions .ua-btn-primary{background:linear-gradient(90deg,#1e7bf2,#5b3df0)}
.ua-input-icon{position:absolute;left:14px;place-items:center;width:22px;height:22px;color:#8a94ad;pointer-events:none;font-style:normal}
.ua-input-icon svg{width:21px;height:21px}
@media(max-width:760px){
  .ua-only-phone{display:inline}
  .ua-only-desktop{display:none}
  .ua-auth-blue{background:linear-gradient(200deg,#2e8bff 0%,#0f55e3 35%,#0a3fcb 70%,#0b4bda 100%)}
  .ua-auth-blue::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 18% at 85% 6%,rgba(255,255,255,.16),transparent 70%),radial-gradient(ellipse 80% 14% at 30% 92%,rgba(255,255,255,.08),transparent 70%)}
  body:has(.ua-auth-blue){background:#0b47d6}
  .ua-auth-blue .ua-auth{position:relative;z-index:1}
  .ua-auth-blue .ua-auth-panel{position:relative;padding:76px 24px 28px}
  .ua-auth-close{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#6b7595;box-shadow:0 6px 16px rgba(6,26,92,.3)}
  .ua-auth-close svg{width:24px;height:24px}
  .ua-auth-blue .ua-auth-card{padding:24px 24px 26px;border:0;box-shadow:0 18px 40px rgba(6,26,92,.25)}
  .ua-auth-blue .ua-auth-card .ua-auth-mlogo{height:56px;margin:0 auto 18px}
  .ua-auth-blue .ua-auth-panel .ua-auth-card>p:not(.ua-auth-foot){color:#1b2440;font-size:15px;margin-bottom:22px}
  .ua-auth-blue .ua-field>span:first-child{font-size:14px;font-weight:600;color:#0f2a6b}
  .ua-auth-blue .ua-auth-card .ua-field input{height:52px;border-radius:14px;background:#f6f8fc;font-size:15px}
  .ua-auth-blue .ua-input:has(.ua-input-icon) input{padding-left:48px}
  .ua-auth-blue .ua-input-icon{display:grid}
  .ua-auth-blue .ua-auth-row{justify-content:flex-end}
  .ua-auth-blue .ua-auth-row>label{display:none}
  .ua-auth-blue .ua-auth-row .ua-link{font-size:14px}
  .ua-auth-blue .ua-btn.ua-btn-block{height:54px;border-radius:14px;font-size:16px;font-weight:600;background:linear-gradient(135deg,#1e7bf2,#1452d4);box-shadow:0 8px 18px rgba(21,101,224,.22)}
  .ua-auth-blue .ua-google{height:52px;border-radius:14px}
  .ua-auth-blue .ua-auth-card .ua-auth-foot{display:none}
  .ua-auth-blue .ua-auth-panel .ua-auth-mfoot{display:block;margin:22px 0 0;text-align:center;font-size:15px;color:rgba(255,255,255,.92)}
  .ua-auth-blue .ua-auth-mfoot a{color:#fff;font-weight:700}
}
/* "Forgot your password?" stays on one line */
.ua-auth-panel h2.ua-title-1line{white-space:nowrap;font-size:clamp(24px,2.5vw,33px)}
@media(max-width:760px){.ua-auth-panel .ua-auth-card h2.ua-title-1line{font-size:clamp(19px,6vw,24px)}}
/* Login (blue) on short phones: everything fits one screen without scrolling */
@media(max-width:760px){.ua-auth-blue .ua-input:has(.ua-eye) input{padding-right:46px}}
@media(max-width:760px) and (max-height:760px){
  .ua-auth-blue .ua-auth-panel{padding:58px 16px 14px;justify-content:flex-start}
  .ua-auth-close{top:10px;right:14px;width:40px;height:40px}
  .ua-auth-close svg{width:21px;height:21px}
  .ua-auth-blue .ua-auth-card{padding:16px 18px 18px;border-radius:24px}
  .ua-auth-blue .ua-auth-card .ua-auth-mlogo{height:42px;margin-bottom:8px}
  .ua-auth-panel .ua-auth-card>h2,.ua-auth-panel .ua-auth-card h2.ua-landing-title{font-size:22px;margin-bottom:2px}
  .ua-auth-blue .ua-auth-panel .ua-auth-card>p:not(.ua-auth-foot){font-size:13.5px;margin-bottom:12px}
  .ua-auth-blue .ua-auth-card .ua-auth-form{gap:9px}
  .ua-auth-blue .ua-field{gap:4px}
  .ua-auth-blue .ua-field>span:first-child{font-size:13px}
  .ua-auth-blue .ua-auth-card .ua-field input{height:46px}
  .ua-auth-blue .ua-btn.ua-btn-block{height:48px}
  .ua-auth-blue .ua-google{height:46px}
  .ua-auth-blue .ua-or{margin:2px 0}
  .ua-auth-blue .ua-auth-panel .ua-auth-mfoot{margin-top:12px;font-size:14px}
}
@media(max-width:760px) and (max-height:640px){
  .ua-auth-blue .ua-auth-panel{padding-top:54px}
  .ua-auth-blue .ua-auth-card .ua-auth-mlogo{height:34px;margin-bottom:4px}
  .ua-auth-panel .ua-auth-card>h2,.ua-auth-panel .ua-auth-card h2.ua-landing-title{font-size:20px}
  .ua-auth-blue .ua-auth-panel .ua-auth-card>p:not(.ua-auth-foot){margin-bottom:8px}
  .ua-auth-blue .ua-auth-card .ua-auth-form{gap:7px}
  .ua-auth-blue .ua-auth-card .ua-field input,.ua-auth-blue .ua-google{height:42px}
  .ua-auth-blue .ua-btn.ua-btn-block{height:44px}
}
/* Register on phones: no labels (placeholders + icons), confirm field without eye, as in the mobile app */
@media(max-width:760px){
  .ua-register .ua-field>span:first-child{display:none}
  .ua-register .ua-auth-form{gap:10px}
  .ua-register .ua-field input[name=password_confirmation]+.ua-eye{display:none}
}

/* ---------- Complete Profile (v46): 3 steps — Biodata, Business License, Work & Project Photos ---------- */
.ua-cp{margin-top:18px}
.ua-cp-card{background:#fff;border:1px solid #e6eaf5;border-radius:18px;box-shadow:0 10px 30px rgba(31,49,98,.06);overflow:hidden}
.ua-cp-head{display:flex;align-items:center;gap:14px;padding:18px 22px;background:linear-gradient(180deg,#f5f6ff,#fafbff);border-bottom:1px solid #eef0f8}
.ua-cp-head>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e9e8ff;color:#5b3fe0;flex:none}
.ua-cp-head>i svg{width:21px;height:21px}
.ua-cp-head h2{margin:0;font-size:19px;font-weight:700;color:#10204d}
.ua-cp-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.ua-cp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 16px 0;border-bottom:1px solid #eef0f8}
.ua-cp-tabs button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-bottom:2px solid transparent;border-radius:12px 12px 0 0;background:none;text-align:left;cursor:pointer;font:inherit;color:#10204d}
.ua-cp-tabs button>i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#f1f3fa;color:#6b7595;flex:none}
.ua-cp-tabs button>i svg{width:17px;height:17px}
.ua-cp-tabs b{display:block;font-size:12.5px;font-weight:700}
.ua-cp-tabs b em{font-style:normal;margin-left:6px}
.ua-cp-tabs small{display:block;font-size:11.5px;color:var(--muted)}
.ua-cp-tabs button.active{background:#f4f2ff;border-bottom-color:#4f46e5}
.ua-cp-tabs button.active>i{background:#4f46e5;color:#fff}
.ua-cp-tabs button.active b{color:#4f46e5}
.ua-cp-alert{margin:14px 20px 0}
.ua-cp-panel{display:none;padding:16px 20px 20px}
.ua-cp-panel.active{display:block}
.ua-cp-biodata{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.ua-cp-photo,.ua-cp-sec{border:1px solid #e8ecf6;border-radius:14px;padding:16px;background:#fff}
.ua-cp-photo{position:sticky;top:90px}
.ua-cp-photo h3,.ua-cp-sec h3{margin:0;font-size:14.5px;font-weight:700;color:#10204d}
.ua-cp-photo>p,.ua-cp-sec>p{margin:2px 0 14px;font-size:12px;color:var(--muted)}
.ua-cp-photo-box{display:flex;flex-direction:column;gap:10px;padding:10px;border:1.5px dashed #cfd4ee;border-radius:14px;background:#fafbff;cursor:pointer}
.ua-cp-photo-box.has-error{border-color:#f19aa3}
.ua-cp-photo-img{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:#eef0fb;overflow:hidden}
.ua-cp-photo-img img{width:100%;height:100%;object-fit:cover}
.ua-cp-photo-empty{display:grid;justify-items:center;gap:6px;color:#4f46e5;text-align:center}
.ua-cp-photo-empty svg{width:34px;height:34px}
.ua-cp-photo-empty b{font-size:13px}
.ua-cp-photo-empty small{font-size:11px;color:var(--muted)}
.ua-cp-photo-btn{display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:10px;background:#eeecff;color:#4f46e5;font-size:13px;font-weight:700}
.ua-cp-photo-btn svg{width:16px;height:16px}
.ua-cp-note{display:flex;gap:8px;margin-top:12px;padding:10px 12px;border-radius:10px;background:#eef5ff;color:#33415c;font-size:12px;line-height:1.45}
.ua-cp-note svg{width:16px;height:16px;flex:none;color:#2563eb;margin-top:1px}
.ua-cp-sections{display:flex;flex-direction:column;gap:14px;min-width:0}
.ua-cp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.ua-cp-grid.one{grid-template-columns:1fr}
.ua-cp-grid[hidden],.ua-cp-empty[hidden]{display:none}
.ua-cp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ua-cp-field.span-2{grid-column:1/-1}
.ua-cp-field>label{font-size:12.5px;font-weight:700;color:#10204d}
.ua-cp-field>label b{color:var(--red)}
.ua-cp-control{position:relative;display:flex;align-items:stretch;min-height:44px;border:1px solid #dfe5f2;border-radius:11px;background:#fff;overflow:hidden;transition:.15s}
.ua-cp-control:focus-within{border-color:#8f8cf5;box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.ua-cp-control>i{display:grid;place-items:center;width:40px;flex:none;background:#f6f7fd;border-right:1px solid #eceff8;color:#6b62e8}
.ua-cp-control>i svg{width:16px;height:16px}
.ua-cp-control input,.ua-cp-control select,.ua-cp-control textarea{flex:1;min-width:0;width:100%;height:auto;border:0;border-radius:0;outline:0;box-shadow:none;background:none;padding:0 12px;font:inherit;font-size:13.5px;color:#10204d}
.ua-cp-control textarea{padding:11px 12px;min-height:70px;resize:vertical}
.ua-cp-control.is-area>i{align-items:start;padding-top:13px}
.ua-cp-control input[readonly]{color:var(--muted);background:#fafbfe}
.ua-cp-field.has-error .ua-cp-control{border-color:#f19aa3;background:#fff8f8}
.ua-cp-history{display:flex;flex-direction:column;gap:10px}
.ua-cp-hrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 36px;gap:10px;align-items:end;padding:12px;border:1px solid #eef0f8;border-radius:12px;background:#fbfbff}
.ua-cp-hdel{display:grid;place-items:center;width:36px;height:44px;border:0;border-radius:10px;background:#fff0f2;color:#e0273d;cursor:pointer}
.ua-cp-hdel svg{width:17px;height:17px}
.ua-cp-add{margin-top:10px;height:40px;padding:0 16px;border:1.5px dashed #c7c0f5;border-radius:11px;background:#fff;color:#4f46e5;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ua-cp-narrow{max-width:860px;margin:0 auto}
.ua-cp-toggle{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;border-radius:12px;background:#f1f2f7}
.ua-cp-toggle label{position:relative;cursor:pointer}
.ua-cp-toggle input{position:absolute;opacity:0;pointer-events:none}
.ua-cp-toggle span{display:block;min-width:76px;padding:8px 18px;border-radius:9px;text-align:center;font-size:13px;font-weight:700;color:#6b7595}
.ua-cp-toggle input:checked+span{background:#4f46e5;color:#fff;box-shadow:0 4px 10px rgba(79,70,229,.25)}
.ua-cp-toggle input:focus-visible+span{outline:2px solid #8f8cf5}
.ua-cp-empty{display:grid;justify-items:center;gap:10px;padding:34px 16px;border-radius:12px;background:#f6f7fb;color:#56607a;text-align:center}
.ua-cp-empty svg{width:28px;height:28px;color:#6b62e8}
.ua-cp-empty b{font-size:13px}
.ua-cp-upload{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;min-height:50px;padding:10px;border:1.5px dashed #c7c0f5;border-radius:12px;background:#fafaff;color:#4f46e5;font-size:13px;font-weight:700;cursor:pointer;text-align:center}
.ua-cp-upload svg{width:17px;height:17px}
.ua-cp-upload small{flex-basis:100%;font-size:11px;font-weight:500;color:var(--muted)}
.ua-cp-field.has-error .ua-cp-upload{border-color:#f19aa3;background:#fff8f8;color:#e0273d}
.ua-cp-file{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:7px 12px;border-radius:9px;background:#eef5ff;color:#1d4ed8;font-size:12.5px;font-weight:600}
.ua-cp-file svg{width:15px;height:15px}
.ua-cp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ua-cp-shot{position:relative;margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#eef0fb}
.ua-cp-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ua-cp-shot.removed img{opacity:.3;filter:grayscale(1)}
.ua-cp-shot.removed::after{content:"Will be removed";position:absolute;inset:auto 0 0;padding:6px;background:rgba(224,39,61,.9);color:#fff;font-size:11px;font-weight:700;text-align:center}
.ua-cp-shot-del{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#e0273d;box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer}
.ua-cp-shot-del svg{width:15px;height:15px}
.ua-cp-shot-tag{position:absolute;left:6px;top:6px;padding:2px 8px;border-radius:20px;background:#4f46e5;color:#fff;font-size:10.5px;font-weight:700}
.ua-cp-shot-add{display:grid;place-items:center;align-content:center;gap:4px;aspect-ratio:4/3;border:1.5px dashed #c7c0f5;border-radius:12px;background:#fafaff;color:#4f46e5;cursor:pointer;text-align:center;padding:8px}
.ua-cp-shot-add svg{width:24px;height:24px}
.ua-cp-shot-add b{font-size:13px}
.ua-cp-shot-add small{font-size:10.5px;color:var(--muted)}
.ua-cp-foot{display:flex;justify-content:space-between;gap:10px;padding:14px 20px;border-top:1px solid #eef0f8;background:#fff}
.ua-cp-foot .ua-btn{min-width:110px}
.ua-cp-foot .ua-btn-primary{background:#4f46e5}
@media(max-width:1100px){.ua-cp-biodata{grid-template-columns:1fr}.ua-cp-photo{position:static}}

/* Profile view: v46 extra sections */
.ua-profile-history{display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin-top:8px;border:1px solid #eef0f8;border-radius:12px;background:#fbfbff}
.ua-profile-history b{font-size:13.5px;color:#10204d}
.ua-profile-history span{font-size:12px;color:var(--muted)}
.ua-profile-none{margin:6px 0 0;padding:16px;border-radius:12px;background:#f6f7fb;color:#6b7595;font-size:13px;text-align:center}
.ua-profile-wide{grid-column:1/-1}
.ua-profile-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.ua-profile-gallery a{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#eef0fb}
.ua-profile-gallery img{width:100%;height:100%;object-fit:cover;display:block}

/* Complete Profile on phones: same layout as the mobile app (icon tabs, one column, sticky Back / Next above the bottom nav) */
@media(max-width:760px){
  .ua-cp{margin-top:12px}
  .ua-cp-card{border-radius:16px;overflow:visible}
  .ua-cp-head{padding:14px;border-radius:16px 16px 0 0}
  .ua-cp-head>i{width:36px;height:36px;border-radius:10px}
  .ua-cp-head h2{font-size:16.5px}
  .ua-cp-head p{font-size:11.5px}
  .ua-cp-tabs{gap:0;padding:4px 6px 0}
  .ua-cp-tabs button{flex-direction:column;justify-content:flex-start;gap:5px;padding:8px 4px;border-radius:0;text-align:center}
  .ua-cp-tabs b{font-size:10.5px;line-height:1.2}
  .ua-cp-tabs b em{margin-left:3px}
  .ua-cp-tabs small{display:none}
  .ua-cp-alert{margin:12px 12px 0}
  .ua-cp-panel{padding:12px}
  .ua-cp-biodata{grid-template-columns:1fr;gap:12px}
  .ua-cp-photo{position:static}
  .ua-cp-photo-box{flex-direction:row;align-items:center}
  .ua-cp-photo-img{width:92px;flex:none}
  .ua-cp-photo-btn{flex:1}
  .ua-cp-photo,.ua-cp-sec{padding:14px}
  .ua-cp-grid{grid-template-columns:1fr;gap:12px}
  .ua-cp-hrow{grid-template-columns:1fr;gap:8px}
  .ua-cp-hdel{width:100%;height:36px}
  .ua-cp-add{width:100%}
  .ua-cp-toggle span{min-width:70px}
  .ua-cp-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ua-cp-foot{position:sticky;bottom:78px;z-index:5;padding:10px 12px;border-radius:0 0 16px 16px;box-shadow:0 -6px 16px rgba(23,24,51,.08)}
  .ua-cp-foot .ua-btn{flex:1;min-width:0}
  .ua-cp-foot .ua-btn-primary{flex:2}
  .ua-profile-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
.ua-cp-foot [hidden]{display:none!important}
@media(max-width:760px){.ua-cp-photo-empty b{font-size:11px;line-height:1.25}.ua-cp-photo-empty small{display:none}.ua-cp-photo-empty svg{width:28px;height:28px}}

/* Profile tabs: My Profile / Payment History / Settings */
.ua-ptabs{display:flex;gap:8px;margin:16px 0 4px;padding:6px;border:1px solid #e6eaf5;border-radius:16px;background:#fff;overflow-x:auto;scrollbar-width:none}
.ua-ptabs::-webkit-scrollbar{display:none}
.ua-ptabs a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:max-content;padding:10px 16px;border-radius:12px;color:#10204d;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.ua-ptabs a i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#f1f3fa;color:#6b7595}
.ua-ptabs a i svg{width:16px;height:16px}
.ua-ptabs a.active{background:#f4f2ff;color:#4f46e5;box-shadow:inset 0 -2px 0 #4f46e5}
.ua-ptabs a.active i{background:#4f46e5;color:#fff}
.ua-pay,.ua-set{margin-top:16px}
.ua-pay-head{margin-bottom:12px}
.ua-pay-head h2{margin:0;font-size:20px;font-weight:700;color:#10204d}
.ua-pay-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.ua-pay-row{display:flex;justify-content:space-between;gap:16px;padding:16px;margin-bottom:12px;border:1px solid #e6eaf5;border-radius:16px;background:#fff}
.ua-pay-main{min-width:0}
.ua-pay-main h3{margin:6px 0 2px;font-size:15px;font-weight:700;color:#10204d}
.ua-pay-main p{margin:0;font-size:12.5px;color:var(--muted)}
.ua-pay-main small{display:block;margin-top:6px;font-size:12px;color:#8a91aa}
.ua-pay-status{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:#f1f2f7;color:#6b7595}
.ua-pay-status.st-paid{background:#dcf5ea;color:#0f7a55}
.ua-pay-status.st-refunded{background:#fff1e0;color:#b45309}
.ua-pay-status.st-pending{background:#fff6dc;color:#a16207}
.ua-pay-status.st-failed,.ua-pay-status.st-cancelled,.ua-pay-status.st-expired{background:#fdecee;color:#c0263b}
.ua-pay-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;text-align:right}
.ua-pay-side>b{font-size:17px;color:#4f46e5}
.ua-pay-refund{color:#b45309;font-weight:600;font-size:12px}
.ua-pay-none{color:#8a91aa;font-size:12px}
.ua-pay-btns{display:flex;gap:8px;margin-top:4px}
.ua-pay-btns .ua-btn{height:36px;padding:0 12px;font-size:12.5px;gap:6px}
.ua-pay-btns svg{width:15px;height:15px}
.ua-pay-empty{display:grid;justify-items:center;gap:6px;padding:40px 16px;border:1px dashed #d9def0;border-radius:16px;background:#fff;color:#6b7595;text-align:center}
.ua-pay-empty svg{width:30px;height:30px;color:#6b62e8}
.ua-pay-empty b{color:#10204d}
.ua-set-card{padding:18px;border:1px solid #e6eaf5;border-radius:16px;background:#fff;max-width:640px}
.ua-set-title{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.ua-set-title>i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#e9e8ff;color:#5b3fe0;flex:none}
.ua-set-title>i svg{width:20px;height:20px}
.ua-set-title h3{margin:0;font-size:15.5px;font-weight:700;color:#10204d}
.ua-set-title p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.ua-set-options{display:flex;flex-direction:column;gap:10px}
.ua-set-opt{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid #e6eaf5;border-radius:14px;cursor:pointer}
.ua-set-opt input{position:absolute;opacity:0;pointer-events:none}
.ua-set-num{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#f1f3fa;color:#6b7595;font-weight:800;font-size:13px}
.ua-set-name{flex:1;display:flex;flex-direction:column}
.ua-set-name b{font-size:14px;color:#10204d}
.ua-set-name small{font-size:11.5px;color:var(--muted)}
.ua-set-check{width:22px;height:22px;border:2px solid #cfd4ee;border-radius:50%}
.ua-set-opt:has(input:checked){border-color:#4f46e5;background:#f8f7ff}
.ua-set-opt:has(input:checked) .ua-set-num{background:#4f46e5;color:#fff}
.ua-set-opt:has(input:checked) .ua-set-check{border:6px solid #4f46e5}
.ua-set-opt:has(input:focus-visible){outline:2px solid #8f8cf5}
.ua-invoice{max-width:860px;margin:16px auto 0;padding:28px;border:1px solid #e6eaf5;border-radius:18px;background:#fff;color:#10204d;font-size:13px}
.ua-invoice .inv-issuer{font-size:17px;font-weight:800;margin-bottom:4px}
.ua-invoice .inv-title{font-size:24px;font-weight:800;color:#4f46e5;letter-spacing:1px;margin-bottom:4px}
.ua-invoice .inv-muted{color:#5b6480;line-height:1.55}
.ua-invoice .inv-label{font-size:10.5px;font-weight:800;color:#8a91aa;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.ua-invoice .inv-status{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:12px;font-weight:700;font-size:11px}
.ua-invoice .inv-paid{background:#dcf5ea;color:#0f7a55}
.ua-invoice .inv-refunded{background:#fff1e0;color:#b45309}
.ua-invoice .inv-top{margin-bottom:22px;padding-bottom:16px;border-bottom:2px solid #4f46e5}
.ua-invoice .inv-parties{margin-bottom:22px}
.ua-invoice .inv-items{border-collapse:collapse}
.ua-invoice .inv-items th{background:#f4f2ff;color:#4f46e5;padding:10px;font-size:11px;text-transform:uppercase}
.ua-invoice .inv-items td{padding:12px 10px;border-bottom:1px solid #e6eaf5}
.ua-invoice .inv-items tfoot td{border-bottom:0}
.ua-invoice .inv-foot{margin-top:26px;color:#8a91aa;font-size:11.5px;text-align:center}
.ua-inv-actions{align-items:center}
.ua-inv-btns{margin-left:auto;display:flex;gap:8px}
@media print{.ua-header,.ua-footer,.ua-bottom-nav,.ua-inv-actions{display:none!important}.ua-page{zoom:1!important;padding:0}.ua-invoice{border:0;margin:0;padding:0}body{padding:0!important;background:#fff}}
@media(max-width:760px){
  .ua-ptabs a{flex:1 0 auto;padding:9px 12px;font-size:12.5px}
  .ua-pay-row{flex-direction:column}
  .ua-pay-side{align-items:stretch;text-align:left}
  .ua-pay-btns .ua-btn{flex:1;justify-content:center}
  .ua-invoice{padding:16px;font-size:12px}
  .ua-invoice .inv-top td,.ua-invoice .inv-parties td{display:block;width:100%;text-align:left}
  .ua-inv-actions{flex-wrap:wrap}
  .ua-inv-btns{width:100%;margin:8px 0 0}
  .ua-inv-btns .ua-btn{flex:1;justify-content:center}
}
/* Explore Sponsored Programmes: label and arrow centred together */
.uh-sponsor-btn{justify-content:center}
/* Course category picker: picture and label always fit the tile (long labels, Bahasa Malaysia) */
.uh-dialog-grid a{justify-content:flex-start;min-width:0}
.uh-dialog-grid span{max-width:100%;overflow-wrap:anywhere;hyphens:auto}
@media(max-width:760px){.uh-dialog-grid img{width:64px}.uh-dialog-grid span{font-size:10.5px;line-height:1.25;letter-spacing:-.2px}.uh-dialog-grid a{min-height:0;padding:8px 3px 9px;gap:5px}}
/* Header: logo and the bell / log-out sit on the same edges as the page content (centred), not at the window edges */
@media(min-width:761px){.ua-header{padding-inline:max(32px,calc((100% - 1240px) / 2 + 32px))}}
@media(min-width:1100px){body:not(:has(.uh)) .ua-header{padding-inline:max(32px,calc((100% - 1438px) / 2 + 37px))}}
/* Smaller header logo */
.ua-logo-img{height:48px}
@media(max-width:760px){.ua-logo-img{height:38px}}

/* Header avatar (profile photo / initials) + its menu */
.ua-me{position:relative}
.ua-me>summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;cursor:pointer;background:#e9ecff;border:2px solid #fff;box-shadow:0 0 0 1.5px #dfe4f3,0 4px 10px rgba(31,49,98,.12)}
.ua-me>summary::-webkit-details-marker{display:none}
.ua-me>summary img{width:100%;height:100%;object-fit:cover}
.ua-me>summary span{font-size:14px;font-weight:800;color:#10204d}
.ua-me.active>summary,.ua-me[open]>summary{box-shadow:0 0 0 2px #4f46e5,0 4px 10px rgba(31,49,98,.12)}
.ua-me-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:250px;padding:8px;border:1px solid #e6eaf5;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(31,49,98,.16)}
.ua-me-head{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid #eef0f8}
.ua-me-head>i{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;background:#e9ecff;font-style:normal;font-weight:800;color:#10204d}
.ua-me-head>i img{width:100%;height:100%;object-fit:cover}
.ua-me-head b{display:block;font-size:13.5px;color:#10204d}
.ua-me-head small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;max-width:170px}
.ua-me-panel a,.ua-me-panel button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:#10204d;font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;text-decoration:none}
.ua-me-panel a:hover,.ua-me-panel button:hover{background:#f4f2ff}
.ua-me-panel svg{width:17px;height:17px;color:#6b62e8}
.ua-me-panel button{color:#e0273d}
.ua-me-panel button svg{color:#e0273d}
@media(max-width:760px){.ua-me>summary{width:38px;height:38px}.ua-me-panel{position:fixed;left:auto;right:16px;top:66px;width:min(260px,calc(100vw - 32px))}}
/* Phones: "Explore Sponsored Programmes" on one line, label + arrow centred */
@media(max-width:760px){.uh-sponsor-card>div{min-width:0;flex:1}.uh-sponsor-btn{justify-content:center;gap:8px;white-space:nowrap;padding:8px 10px;font-size:min(12px,3.3vw);-webkit-text-size-adjust:100%;text-size-adjust:100%}.uh-sponsor-btn b{flex:none}}
/* Stop phone browsers from enlarging text on their own (font boosting), which wrapped labels like "Coming Soon" */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Phones: "Coming Soon" badge on one line */
@media(max-width:760px){.uh-eco-card span{white-space:nowrap;font-size:min(10px,2.6vw);padding:3px 5px;max-width:100%;overflow:hidden;text-overflow:clip}}

/* ---------- Profile hub (v47): identity card + Information / Settings rows ---------- */
.ph{max-width:1040px;margin:0 auto 32px;border:1px solid #e7edf8;border-radius:18px;overflow:hidden;background:#edf0f6;color:#080e47}
.ph-hero{position:relative;isolation:isolate;overflow:hidden;padding:24px 28px 26px;background:linear-gradient(125deg,#0349da 5%,#007cff 62%,#0042d6);color:#fff}
.ph-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(42deg,rgba(0,185,255,.65) 0 19%,transparent 19.2%),linear-gradient(52deg,transparent 0 79%,rgba(0,201,255,.2) 79.2%)}
.ph-title{display:flex;align-items:center;gap:16px}
.ph-title h1{flex:1;margin:0;font-size:23px;font-weight:600;color:#fff}
.ph-back{color:#fff;font-size:28px;line-height:1;text-decoration:none}
.ph-bell{position:relative;display:grid;place-items:center;width:38px;height:38px;color:#fff}
.ph-bell svg{width:26px;height:26px}
.ph-bell span{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:#ff3b4f;border:2px solid #fff}
.ph-identity{text-align:center;padding-top:10px}
.ph-identity img,.ph-avatar{display:grid;place-items:center;width:96px;height:96px;margin:0 auto 10px;border:3px solid #fff;border-radius:50%;object-fit:cover;background:#dde9ff;color:#0a2c84;font-size:34px;font-weight:500}
.ph-identity h2{margin:0;font-size:21px;font-weight:600;color:#fff}
.ph-identity p{margin:4px 0 0;font-size:13px;color:#e4ecff}
.ph-body{padding:22px 32px 30px}
.ph-body h3{margin:4px 2px 12px;font-size:16px;font-weight:600;color:#080e47}
.ph-group{margin-bottom:22px;border:1px solid #e3e8f2;border-radius:14px;background:#fff;overflow:hidden}
.ph-group form{margin:0}
.ph-row{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:12px 18px;border:0;border-top:1px solid #eef1f6;background:#fff;color:#080e47;font:inherit;font-size:15px;text-align:left;text-decoration:none;cursor:pointer}
.ph-group>.ph-row:first-child,.ph-group>form:first-child .ph-row{border-top:0}
.ph-row:hover{background:#f7f9ff}
.ph-row>i{display:grid;place-items:center;width:26px;color:#080e47}
.ph-row>i svg{width:22px;height:22px}
.ph-row>span{flex:1;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ph-row>small{font-size:13px;color:#6b7595}
.ph-row>b{color:#0b5cf0;font-size:20px;font-weight:400}
.ph-row.danger,.ph-row.danger>i,.ph-row.danger>b{color:#e0273d}
.ph-incomplete{padding:2px 8px;border:1px solid #ffb4bd;border-radius:6px;background:#fff1f3;color:#e0273d;font-size:11px;font-style:normal;font-weight:500}

/* ---------- Profile sub-pages (Payment, Language, Change Password, Help, Privacy, Terms, Delete) ---------- */
.pp{max-width:1040px;margin:0 auto 32px;border:1px solid #e7edf8;border-radius:18px;overflow:hidden;background:#fff;color:#090e46}
.pp-narrow{max-width:640px}
.pp-mid{max-width:760px}
.pp-flush{margin-bottom:16px}
.pp-head{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:20px;padding:22px 28px;background:linear-gradient(125deg,#0044dd,#007bff 70%,#00b8ed);color:#fff}
.pp-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(43deg,#00baff80 0 9%,transparent 9.2% 80%,#00d9ff25 80.2%)}
.pp-head a{color:#fff;font-size:28px;line-height:1;text-decoration:none}
.pp-head h1{margin:0;font-size:22px;font-weight:500;color:#fff}
.pp-body{padding:24px 28px 30px}
.pp-body h2{margin:0 0 14px;font-size:19px;font-weight:600}
.pp-body h2:not(:first-child){margin-top:24px}
.pp-tabs{display:flex;gap:3px;padding:3px;margin-bottom:22px;border:2px solid #ecf1fb;border-radius:12px}
.pp-tabs a{flex:1;padding:11px 6px;border-radius:9px;color:#090e46;font-size:15px;font-weight:500;text-align:center;text-decoration:none}
.pp-tabs a.active{background:linear-gradient(110deg,#00b5e9,#2115ff);color:#fff}
.pp-empty{display:grid;justify-items:center;gap:8px;padding:34px 18px;border:1px dashed #d6ddee;border-radius:14px;text-align:center;color:#56607a}
.pp-empty svg{width:34px;height:34px;color:#0060f5}
.pp-empty h3{margin:0;font-size:16px;color:#090e46}
.pp-empty p{margin:0;max-width:440px;font-size:13.5px;line-height:1.55}
.pp-record{padding:16px;margin-bottom:12px;border:1px solid #e6ebf5;border-radius:14px}
.pp-record-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pp-record-head h3{margin:0;font-size:15.5px;font-weight:600}
.pp-record-sub{margin:3px 0 10px;font-size:12.5px;color:#6b7595}
.pp-record-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:#56607a}
.pp-record-meta span{display:flex;align-items:center;gap:6px}
.pp-record-meta svg{width:15px;height:15px}
.pp-record-meta strong{font-size:16px;color:#0b4fd8}
.pp-record footer{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid #eef1f6}
.pp-record footer a{display:flex;align-items:center;gap:6px;color:#0060ed;font-size:13.5px;font-weight:600;text-decoration:none}
.pp-record footer svg{width:16px;height:16px}
.pp-lang fieldset{margin:0 0 30px;padding:0;border:0}
.pp-lang legend{margin-bottom:16px;font-size:16px}
.pp-lang label{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:14px;border-bottom:1px solid #e6e9ef;font-size:17px;font-weight:500;cursor:pointer}
.pp-lang label:has(input:checked){border-radius:10px;background:#f0f4ff}
.pp-lang input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border:2px solid #0060f5;border-radius:50%;background:#fff;cursor:pointer}
.pp-lang input:checked{background:#0060f5;box-shadow:inset 0 0 0 4px #fff}
.pp-primary{display:block;width:100%;min-height:50px;border:0;border-radius:11px;background:linear-gradient(110deg,#00b5e9,#2115ff);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 5px 12px #0060ee22}
.pp-lead{margin:0 0 20px;font-size:15px;line-height:1.6}
.pp-field{display:block;margin-bottom:14px}
.pp-field>span:first-child{display:block;margin-bottom:8px;font-size:14.5px;font-weight:600}
.pp-field>span small{font-weight:400;color:#6b7595}
.pp-input{position:relative;display:flex;align-items:center}
.pp-input>i{position:absolute;left:14px;display:grid;color:#6b7595}
.pp-input>i svg{width:19px;height:19px}
.pp-input input{width:100%;height:50px;padding:0 46px;border:1px solid #dfe5f2;border-radius:12px;background:#f8faff;font:inherit;font-size:15px;outline:0}
.pp-input input:focus{border-color:#7da8ff;background:#fff}
.pp-field select,.pp-field textarea{width:100%;padding:12px 14px;border:1px solid #dfe5f2;border-radius:12px;background:#f8faff;font:inherit;font-size:14.5px}
.pp-field.has-error .pp-input input{border-color:#f19aa3;background:#fff8f8}
.pp-link{display:inline-block;margin:-4px 0 16px;color:#0060ed;font-size:14px;font-weight:600}
.pp-hint{display:block;margin:-6px 0 14px;font-size:12.5px;color:#6b7595}
.pp-pass .pp-primary{margin-top:10px}
.pp-search{display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px;margin-bottom:6px;border:1px solid #e2e8f6;border-radius:11px;background:#f0f4ff}
.pp-search svg{width:22px;height:22px;color:#0065f5;flex:none}
.pp-search input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:15px}
.pp-card{border:1px solid #e3e8f2;border-radius:14px;overflow:hidden}
.pp-card details{border-top:1px solid #eef1f6}
.pp-card details:first-child{border-top:0}
.pp-card summary{display:flex;justify-content:space-between;gap:12px;padding:16px 18px;font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.pp-card summary::-webkit-details-marker{display:none}
.pp-card summary::after{content:"⌄";color:#0060ed;font-size:18px;line-height:1}
.pp-card details[open] summary::after{transform:rotate(180deg)}
.pp-card details p{margin:0;padding:0 18px 16px;font-size:14px;line-height:1.6;color:#33415c}
.pp-none{margin:0;padding:16px;font-size:14px;color:#6b7595;text-align:center}
.pp-contact{display:flex;align-items:center;gap:14px;padding:16px 18px;border-top:1px solid #eef1f6;color:#090e46;text-decoration:none}
.pp-contact:first-child{border-top:0}
.pp-contact>svg{width:24px;height:24px;color:#0065f5;flex:none}
.pp-contact span{flex:1;display:flex;flex-direction:column}
.pp-contact strong{font-size:15px;font-weight:600}
.pp-contact small{font-size:13px;color:#6b7595}
.pp-contact b{color:#0060ed;font-size:20px;font-weight:400}
.pp-doc{font-size:15px;line-height:1.65;overflow-wrap:anywhere}
.pp-doc>h2{font-size:23px}
.pp-doc>p{margin:0}
.pp-doc section{margin-top:22px}
.pp-doc h3{margin:0 0 6px;font-size:17px;font-weight:600}
.pp-doc section p{margin:0;color:#232a4a}
.pp-doc .pp-link{margin-top:22px}
.pp-delete{text-align:left}
.pp-delete-icon{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:#fff0f1;color:#e51b2a}
.pp-delete-icon svg{width:44px;height:44px}
.pp-delete>h2{text-align:center;font-size:22px}
.pp-delete>p{margin:0 0 16px;text-align:center;font-size:15px}
.pp-warn{display:flex;gap:12px;margin:18px 0;padding:14px;border:1px solid #f69ba5;border-radius:10px;background:#fff2f3;font-size:13.5px;line-height:1.55}
.pp-warn svg{width:22px;height:22px;color:#dc2434;flex:none}
.pp-check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px;font-size:14.5px;cursor:pointer}
.pp-check input{width:18px;height:18px;margin-top:2px;accent-color:#e0273d}
.pp-delete-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.pp-delete-actions .ua-btn{justify-content:center;height:48px}
.pp-danger{background:#e0273d;color:#fff;border:0}
@media(max-width:760px){
  .ph,.pp{margin:-16px -16px 0;border:0;border-radius:0}
  .ph-hero{padding:20px 18px 22px}
  .ph-body{padding:18px 16px 24px}
  .ph-row{padding:12px 14px;font-size:14.5px}
  .pp-head{padding:18px 16px;gap:14px}
  .pp-head h1{font-size:20px}
  .pp-body{padding:18px 16px 24px}
  .pp-flush{margin-bottom:12px}
  .pp-tabs a{font-size:13.5px}
}
.pp-field[hidden]{display:none}
/* Personal Profile (v47): photo with camera button, incomplete reminder, label / value cards */
.pf-body{padding:24px;background:#f2f6ff;color:#090e46}
.pf-photo{position:relative;width:112px;height:112px;margin:0 auto 24px}
.pf-photo>img,.pf-photo>span{display:grid;place-items:center;width:100%;height:100%;border:2px solid #0063ff;border-radius:50%;object-fit:cover;background:#e3eeff;color:#0063ff;font-size:36px}
.pf-photo label{position:absolute;bottom:2px;right:1px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #fff;border-radius:50%;background:#0063ff;color:#fff;cursor:pointer}
.pf-photo label svg{width:18px;height:18px}
.pf-photo input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pf-warning{display:block;margin:0 0 18px;padding:12px;border:1px solid #ffcbd1;border-radius:9px;background:#fff0f1;color:#d82436;font-size:13px;text-decoration:none}
.pf-card{margin-bottom:18px;padding:20px;border:1px solid #dce7f5;border-radius:15px;background:#fff}
.pf-card:last-child{margin-bottom:0}
.pf-card>header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pf-card>header>i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:#edf4ff;color:#0063ff}
.pf-card>header>i svg{width:24px;height:24px}
.pf-card>header>div{flex:1;min-width:0}
.pf-card h2{margin:0;color:#101968;font-size:19px;line-height:1.4;font-weight:600}
.pf-card header p{margin:3px 0 0;font-size:13px;line-height:1.5;color:#526181}
.pf-card header a{display:inline-flex;align-items:center;gap:5px;flex:none;padding:8px 12px;border:1px solid #0063ff;border-radius:7px;background:#fff;color:#005dea;font-size:13px;white-space:nowrap;text-decoration:none}
.pf-card header a svg{width:14px;height:14px}
.pf-card dl{margin:0}
.pf-card hr{margin:4px 0;border:0;border-top:2px solid #e7edf7}
.pf-row{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);padding:12px 0;border-bottom:1px solid #e7edf7;font-size:15px;line-height:1.5}
.pf-row:last-child{border-bottom:0}
.pf-row dt,.pf-row dd{margin:0;font-weight:400;color:#090e46;overflow-wrap:anywhere}
.pf-row dt{padding-right:16px}
.pf-empty{margin:0;font-size:14px;line-height:1.6;color:#526181}
.pf-empty a{color:#005dea}
.pf-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pf-photos img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
@media(max-width:760px){
  .pf-body{padding:17px 10px 24px}
  .pf-photo{width:100px;height:100px;margin-bottom:18px}
  .pf-card{padding:14px 13px;border-radius:13px;margin-bottom:15px}
  .pf-card>header{gap:9px;flex-wrap:wrap;margin-bottom:12px}
  .pf-card>header>i{width:36px;height:36px}
  .pf-card>header>i svg{width:21px;height:21px}
  .pf-card h2{font-size:16px}
  .pf-card header p{font-size:11px}
  .pf-card header a{margin-left:auto;padding:6px 8px;font-size:11px}
  .pf-row{grid-template-columns:minmax(0,45%) minmax(0,55%);padding:10px 0;font-size:13px}
  .pf-row dt{padding-right:10px}
  .pf-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Profile > Notifications (v47): push switch, preference switches, auto-save note */
.pn-body{padding:24px;background:#f5f6fb;color:#090e46}
.pn-body h2{margin:26px 2px 12px;font-size:17px;font-weight:500}
.pn-card{display:block;border:1px solid #e6eaf3;border-radius:12px;background:#fff}
.pn-push{display:flex;align-items:center;gap:18px;padding:18px 20px;cursor:pointer}
.pn-push>i{display:grid;place-items:center;color:#0b5cf0}
.pn-push>i svg{width:28px;height:28px}
.pn-push>span,.pn-row>span{flex:1;display:grid;gap:4px;min-width:0}
.pn-push strong,.pn-row strong{font-size:16px;font-weight:500}
.pn-push small,.pn-row small{font-size:13.5px;color:#2b3554}
.pn-row{display:flex;align-items:center;gap:16px;padding:16px 20px;border-top:1px solid #eceff5;cursor:pointer}
.pn-row:first-child{border-top:0}
.pn-list[data-off] .pn-row{opacity:.55;cursor:default}
.pn-switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:46px;height:28px;margin:0;border-radius:99px;background:#d3d8e3;cursor:pointer;transition:background .15s}
.pn-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.pn-switch:checked{background:#0b5cf0}
.pn-switch:checked::after{transform:translateX(18px)}
.pn-switch:disabled{cursor:default}
.pn-switch:focus-visible{outline:2px solid #0b5cf0;outline-offset:2px}
.pn-note{margin:40px 0 4px;text-align:center;font-size:13px;color:#2b3554}
@media(max-width:760px){
  .pn-body{padding:18px 14px 24px}
  .pn-push{padding:16px;gap:14px}
  .pn-row{padding:14px 16px}
  .pn-push strong,.pn-row strong{font-size:15px}
  .pn-push small,.pn-row small{font-size:12.5px}
}
/* Applications (My Learning > Applications): blue header, search + filter, KPI cards, status-banded cards */
.ap{margin:0 0 32px;border:1px solid #e7edf8;border-radius:18px;overflow:hidden;background:#f5f8ff}
.ap-body{padding:20px 22px 26px}
.ap-search{display:flex;gap:14px;margin-bottom:18px}
.ap-search>label{flex:1;display:flex;align-items:center;gap:12px;min-width:0;height:54px;padding:0 18px;border:1px solid #dfe5f1;border-radius:12px;background:#fff}
.ap-search>label svg{width:20px;height:20px;color:#26304f;flex:none}
.ap-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;color:#0e1a4b}
.ap-filter{position:relative}
.ap-filter summary{display:flex;align-items:center;gap:8px;height:54px;padding:0 30px;border-radius:12px;background:linear-gradient(100deg,#1f7bff,#3b2cf0);color:#fff;font-weight:700;font-size:16px;list-style:none;cursor:pointer;user-select:none}
.ap-filter summary::-webkit-details-marker{display:none}
.ap-filter summary svg{width:19px;height:19px}
.ap-filter summary i{width:8px;height:8px;border-radius:50%;background:#ffd34d}
.ap-filter nav{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;min-width:210px;padding:6px;border:1px solid #e3e8f2;border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(16,32,77,.14)}
.ap-filter nav a{padding:10px 12px;border-radius:8px;color:#0e1a4b;font-size:14px;font-weight:500;text-decoration:none}
.ap-filter nav a:hover{background:#f2f5fc}
.ap-filter nav a.active{background:#eaf1ff;color:#0b5cf0;font-weight:700}
.ap-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:20px}
.ap-kpi{display:flex;align-items:center;gap:18px;min-height:100px;padding:18px 24px;border:1px solid #e3e8f2;border-top:5px solid;border-radius:12px;background:#fff;color:#0e1a4b;text-decoration:none;box-shadow:0 2px 8px rgba(16,32,77,.04)}
.ap-kpi i{display:grid;place-items:center;flex:none;width:60px;height:60px;border-radius:12px;font-style:normal;font-size:26px;font-weight:800}
.ap-kpi strong{flex:1;font-size:18px;font-weight:700;line-height:1.2}
.ap-kpi b{font-size:40px;font-weight:800;line-height:1}
.ap-kpi.pending{border-top-color:#f2b705}.ap-kpi.pending i{background:#fff4d6;color:#d99a00}.ap-kpi.pending b{color:#b07800}
.ap-kpi.approved{border-top-color:#22b45f}.ap-kpi.approved i{background:#e5f7ec;color:#16a34a}.ap-kpi.approved b{color:#15803d}
.ap-kpi.rejected{border-top-color:#ea3b55}.ap-kpi.rejected i{background:#ffe9ec;color:#e11d48}.ap-kpi.rejected b{color:#be123c}
.ap-kpi.active{box-shadow:0 0 0 2px #0b5cf0 inset}
.ap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ap-app .ua-app-status{padding:12px 18px;font-size:13.5px}
.ap-app .ua-app-status b{display:flex;align-items:center;gap:10px;font-size:14.5px}
.ap-app .ua-app-status b i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.3);font-style:normal;font-size:12px}
.ap-app .ua-app-status span{font-weight:600}
.ap-app .ua-app-status.pending{background:linear-gradient(90deg,#e3a90d,#f3c03d)}
.ap-app .ua-app-status.approved{background:linear-gradient(90deg,#20b05f,#3cca7b)}
.ap-app .ua-app-status.rejected{background:linear-gradient(90deg,#ef4e6a,#f36b81)}
.ap-app .ua-card{grid-template-columns:41% 1fr;min-height:0}
.ap-app .ua-card-img{min-height:240px}
.ap-app .ua-countdown{display:none}
.ap .ua-empty{grid-column:1/-1}
@media(max-width:760px){
  .ap{margin:-16px -16px 0;border:0;border-radius:0}
  .ap-body{padding:14px 12px 22px}
  .ap-search{gap:10px;margin-bottom:12px}
  .ap-search>label{height:48px;padding:0 12px;gap:10px}
  .ap-search input{font-size:14px}
  .ap-filter summary{height:48px;padding:0 16px;font-size:15px}
  .ap-kpis{gap:8px;margin-bottom:14px}
  .ap-kpi{gap:6px;min-height:62px;padding:8px 8px;border-top-width:1px;border-left:4px solid}
  .ap-kpi.pending{border-left-color:#f2b705}.ap-kpi.approved{border-left-color:#22b45f}.ap-kpi.rejected{border-left-color:#ea3b55}
  .ap-kpi.pending,.ap-kpi.approved,.ap-kpi.rejected{border-top-color:#e3e8f2}
  .ap-kpi i{width:24px;height:24px;background:none!important;font-size:17px}
  .ap-kpi strong{font-size:min(11.5px,3vw);font-weight:600}
  .ap-kpi i{width:20px!important}
  .ap-kpi b{font-size:18px;color:#0e1a4b!important}
  .ap-grid{grid-template-columns:1fr;gap:14px}
  .ap-app .ua-app-status{padding:9px 12px;font-size:12px}
  .ap-app .ua-app-status b{font-size:12.5px;gap:8px}
  .ap-app .ua-app-status b i{width:22px;height:22px}
  .ap-app .ua-card{grid-template-columns:42% 1fr}
  .ap-app .ua-card-img{height:auto;min-height:200px}
  .ap-app .ua-card-body{padding:12px 10px 12px 12px}
  .ap-app .ua-card-body h3{font-size:15px;margin-right:34px}
  .ap-app .ua-heart{right:8px;top:8px;width:32px;height:32px}
  .ap-app .ua-details{gap:6px}
  .ap-app .ua-details li{grid-template-columns:24px minmax(0,1fr);gap:7px;font-size:11.5px}
  .ap-app .ua-details li i{width:24px;height:24px;border-radius:7px}
  .ap-app .ua-details li i svg{width:13px;height:13px}
  .ap-app .ua-pills{gap:4px;padding-top:10px}
  .ap-app .ua-pill{height:22px;padding:0 7px;font-size:10px}
}
/* My Training: approved places — confirmation, countdown, daily attendance, testimonial */
.tr-card{display:flex;flex-direction:column;border:1px solid #e3eaf6;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(16,32,80,.06)}
.tr-status{display:flex;align-items:center;gap:12px;padding:12px 18px;background:linear-gradient(90deg,#22b45f,#43cc7e);color:#fff;font-size:15px;font-weight:700;letter-spacing:.3px}
.tr-status i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.3);font-style:normal;font-size:13px}
.tr-card.declined .tr-status{background:linear-gradient(90deg,#ef4e6a,#f36b81)}
.tr-card.completed .tr-status{background:linear-gradient(90deg,#1f7bff,#3b5cf0)}
.tr-main{display:grid;grid-template-columns:44% 1fr;gap:16px;padding:10px 12px 0;color:inherit;text-decoration:none}
.tr-img{display:block;min-height:250px;border-radius:8px;background:#e8edf9 center/cover no-repeat}
.tr-info{display:flex;flex-direction:column;gap:10px;padding:8px 4px 6px 0;min-width:0}
.tr-info strong{margin-bottom:6px;font-size:20px;font-weight:600;line-height:1.25;color:#101968}
.tr-info>span{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;color:#1d2c6b;font-size:14.5px}
.tr-info>span i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#edf3ff;color:#0b5cf0}
.tr-info>span i svg{width:17px;height:17px}
.tr-foot{display:grid;gap:10px;padding:14px 12px 14px}
.tr-foot form{margin:0}
.tr-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:12px;border:1px solid #c9dcf7;border-radius:10px;background:#eef5ff;color:#101968;font-size:17px;font-weight:600}
.tr-bar svg{width:22px;height:22px;color:#0b5cf0}
.tr-bar small{font-size:13px;font-weight:500;color:#5b6a8f}
.tr-bar.muted{font-size:13.5px;font-weight:500;color:#6b3443;background:#fff4f6;border-color:#f6d3da}
.tr-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tr-actions.one{grid-template-columns:1fr}
.tr-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border:0;border-radius:10px;font:inherit;font-size:16px;font-weight:600;line-height:1.2;text-align:left;text-decoration:none;cursor:pointer}
.tr-btn svg{flex:none;width:24px;height:24px}
.tr-btn i{display:grid;place-items:center;flex:none;width:28px;height:28px;border:2px solid currentColor;border-radius:50%;font-style:normal;font-size:14px}
.tr-btn.primary{background:linear-gradient(100deg,#1a8cff,#3b2cf0);color:#fff}
.tr-btn.primary.wide{justify-content:center}
.tr-btn.primary.done{cursor:default}
.tr-btn.outline{border:1.5px solid #1f5cf0;background:#fff;color:#1f3fd0}
.tr-scan{width:min(440px,calc(100vw - 24px));padding:0;border:0;border-radius:16px;box-shadow:0 20px 60px rgba(10,20,60,.3)}
.tr-scan::backdrop{background:rgba(8,14,40,.55)}
.tr-scan header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(110deg,#0044dd,#007bff);color:#fff}
.tr-scan h2{margin:0;font-size:18px;font-weight:600}
.tr-scan header button{border:0;background:none;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.tr-scan>p{margin:14px 18px 10px;font-size:13.5px;color:#3a4566}
.tr-reader{margin:0 18px;min-height:40px;border-radius:12px;overflow:hidden;background:#0d1530}
.tr-msg{margin:12px 18px 0!important;padding:10px 12px;border-radius:9px;background:#fff1f3;color:#c0263c;font-size:13.5px!important}
.tr-msg.ok{background:#e9f9ef;color:#137a3d}
.tr-upload{display:block;margin:14px 18px 18px;padding:12px;border:1.5px dashed #b9c8e6;border-radius:10px;text-align:center;color:#1f3fd0;font-size:14px;font-weight:600;cursor:pointer}
.tr-upload input{display:none}
@media(max-width:760px){
  .tr-status{padding:10px 12px;font-size:13.5px}
  .tr-status i{width:24px;height:24px}
  .tr-main{grid-template-columns:42% 1fr;gap:10px;padding:0}
  .tr-img{min-height:210px;border-radius:0}
  .tr-info{gap:7px;padding:10px 8px 6px 0}
  .tr-info strong{font-size:15.5px;margin-bottom:2px}
  .tr-info>span{grid-template-columns:26px minmax(0,1fr);gap:8px;font-size:12px}
  .tr-info>span i{width:26px;height:26px;border-radius:7px}
  .tr-info>span i svg{width:14px;height:14px}
  .tr-foot{padding:10px}
  .tr-bar{font-size:15px;padding:10px}
  .tr-actions{gap:8px}
  .tr-btn{min-height:50px;gap:8px;font-size:14px;padding:6px 10px}
  .tr-btn svg{width:20px;height:20px}
  .tr-btn i{width:24px;height:24px}
}
/* Training Feedback form */
.fb-body{max-width:1120px;margin:0 auto;padding:24px 22px 28px;color:#0e1a4b}
.fb-prog{display:grid;gap:6px;padding:16px 22px;border-radius:12px;background:#e9f1ff}
.fb-prog small{font-size:14px;color:#1d2c6b}
.fb-prog strong{font-size:20px;font-weight:600}
.fb-intro{margin:16px 0 14px;font-size:16px;color:#1d2c6b}
.fb-error{margin:0 0 14px;padding:10px 14px;border-radius:9px;background:#fff1f3;color:#c0263c;font-size:14px}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"r1 r2" "t2 t4" "t5 t5" "r6 r6";gap:16px}
.fb-q{margin:0;min-width:0;padding:18px 22px;border:1px solid #d5e2f5;border-radius:12px;background:#fff}
.fb-q legend,.fb-q>label{float:left;width:100%;margin-bottom:14px;padding:0;font-size:17px;font-weight:600}
.fb-q legend+*{clear:both}
.fb-q textarea{display:block;width:100%;min-height:96px;padding:14px 18px;border:1px solid #c9d8f0;border-radius:9px;background:#fbfcff;font:inherit;font-size:15px;color:#0e1a4b;resize:vertical}
.fb-q textarea:focus{outline:2px solid #0b5cf0;outline-offset:-1px}
.fb-stars{display:inline-flex;flex-direction:row-reverse;gap:12px}
.fb-stars input{position:absolute;opacity:0;pointer-events:none}
.fb-stars label{cursor:pointer;color:#0b5cf0}
.fb-stars svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5}
.fb-stars input:checked~label svg,.fb-stars label:hover svg,.fb-stars label:hover~label svg{fill:#ffc531;stroke:#e9a800}
.fb-stars input:focus-visible+label{outline:2px solid #0b5cf0;border-radius:6px}
.fb-radios{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fb-radios label{display:flex;align-items:center;gap:14px;font-size:17px;cursor:pointer}
.fb-radios input{appearance:none;-webkit-appearance:none;width:34px;height:34px;margin:0;border:2.5px solid #0b5cf0;border-radius:50%;cursor:pointer}
.fb-radios input:checked{background:radial-gradient(#0b5cf0 0 42%,#fff 46%)}
.fb-submit{display:flex;justify-content:flex-end;margin-top:20px}
.fb-submit .tr-btn{width:auto;min-width:320px;justify-content:center;background:linear-gradient(100deg,#0db0f5,#3b2cf0)}
@media(max-width:760px){
  .fb-body{padding:14px 12px 22px}
  .fb-prog{padding:12px 16px}
  .fb-prog strong{font-size:16px}
  .fb-intro{font-size:14px;margin:12px 0 10px}
  .fb-grid{grid-template-columns:1fr;grid-template-areas:"r1" "t2" "r2" "t4" "t5" "r6";gap:12px}
  .fb-q{padding:14px 16px}
  .fb-q legend,.fb-q>label{font-size:15px;margin-bottom:10px}
  .fb-stars svg{width:34px;height:34px}
  .fb-radios label{font-size:15px;gap:10px}
  .fb-radios input{width:28px;height:28px}
  .fb-submit .tr-btn{width:100%;min-width:0}
}
/* Training History */
.th-card .tr-main{padding:14px 14px 0}
.th-card .tr-img{min-height:200px;border-radius:12px}
.th-chips{display:flex;flex-wrap:wrap;gap:12px}
.th-chip{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 22px;border-radius:10px;font-size:16.5px;font-weight:500}
.th-chip.done{background:#e8f6ea;color:#14532d}
.th-chip.done i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#16852f;color:#fff;font-style:normal;font-size:15px}
.th-chip.type{flex:1;background:#e7f0ff;color:#14237a}
.th-chip.type svg{width:24px;height:24px;color:#0b5cf0}
.th-attend{display:flex;align-items:center;gap:14px;margin:4px 6px;font-size:16px;color:#14237a}
.th-attend svg{width:26px;height:26px;color:#0b5cf0}
@media(max-width:760px){
  .th-card .tr-main{grid-template-columns:44% 1fr;padding:10px 10px 0}
  .th-card .tr-img{min-height:170px;border-radius:10px}
  .th-chips{gap:8px}
  .th-chip{min-height:40px;padding:4px 12px;gap:8px;font-size:13.5px}
  .th-chip.done i{width:24px;height:24px;font-size:12px}
  .th-chip.type{flex:0 1 auto}
  .th-chip.type svg{width:19px;height:19px}
  .th-attend{font-size:14px;gap:10px}
  .th-attend svg{width:22px;height:22px}
}
/* My Learning > Outcome: monthly updates after the training */
.oc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:12px;border-top:1px solid #e8edf6;color:#14237a}
.oc-head strong{font-size:16px;font-weight:500}
.oc-head span{font-size:15px}
.oc-months{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:2px 0 0;padding:0;list-style:none}
.oc-months li>a,.oc-months li>span{display:grid;gap:6px;justify-items:center;color:#14237a;font-size:12.5px;text-decoration:none}
.oc-months i{display:block;width:100%;height:12px;border-radius:99px;background:#dfe5ef}
.oc-months .done i{background:#16a34a}
.oc-months .current i{background:#1a73ff}
.oc-months .overdue i{background:#ef3340}
.oc-months a:hover i{filter:brightness(1.1);box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}
.oc-note{display:flex;align-items:center;gap:16px;margin:4px 0 0;padding:14px 18px;border-radius:10px}
.oc-note>svg{width:30px;height:30px;flex:none}
.oc-note>i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#16852f;color:#fff;font-style:normal}
.oc-note span{display:grid;gap:2px}
.oc-note strong{font-size:16px;font-weight:500;color:#14237a}
.oc-note small{font-size:14px}
.oc-note.overdue{background:#fde8ea}.oc-note.overdue>svg,.oc-note.overdue small{color:#d61f2c}
.oc-note.due{background:#e8f1ff}.oc-note.due>svg,.oc-note.due small{color:#1a5fd6}
.oc-note.ok{background:#e8f6ea}.oc-note.ok small{color:#16852f}
.oc-note.soon{background:#f1f3f8}.oc-note.soon>svg,.oc-note.soon small{color:#5b6a8f}
.oc-disabled{opacity:.5;cursor:default}
.uo-body{max-width:1040px;margin:0 auto;padding:22px 22px 28px;color:#0e1a4b}
.uo-prog{display:flex;align-items:center;gap:26px;padding:14px 26px;border-radius:12px;background:#ebf2ff}
.uo-img{flex:none;width:136px;height:106px;border-radius:10px;background:#dfe7f8 center/cover no-repeat}
.uo-prog strong{display:block;font-size:22px;font-weight:600}
.uo-prog div>span{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:17px;color:#1d3fbf}
.uo-prog i{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#dbe7ff;color:#0b5cf0}
.uo-prog i svg{width:22px;height:22px}
.uo-note{margin:14px 0 0;padding:10px 14px;border-radius:9px;background:#e9f9ef;color:#137a3d;font-size:14px}
.uo-intro{margin:16px 0 14px;font-size:16px;color:#2b3554}
.uo-q{margin-bottom:22px}
.uo-q label,.uo-label{display:grid;gap:4px;margin-bottom:10px}
.uo-q strong{font-size:17px;font-weight:600}
.uo-q strong b{color:#e11d48}
.uo-q small{font-size:14px;color:#56607a}
.uo-q textarea{display:block;width:100%;min-height:110px;padding:14px 16px;border:1px solid #cfd8ea;border-radius:9px;font:inherit;font-size:15px;color:#0e1a4b;resize:vertical}
.uo-count{display:block;margin-top:6px;text-align:right;font-size:14px;color:#56607a}
.uo-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.uo-grid .wide{grid-column:1/-1}
.uo-drop{display:flex!important;align-items:center;justify-content:center;gap:18px;min-height:100px;padding:14px;border:1px solid #cfd8ea;border-radius:9px;cursor:pointer;grid-template-columns:none}
.uo-drop.over{border-color:#0b5cf0;background:#f2f7ff}
.uo-drop input{display:none}
.uo-drop i{display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:50%;background:#e8f0ff;color:#0b4fd8}
.uo-drop i svg{width:28px;height:28px}
.uo-drop span{display:grid;gap:4px;font-size:15px;color:#56607a}
.uo-drop b{color:#0b4fd8;font-weight:600}
.uo-files{display:grid;gap:6px;margin-top:8px;font-size:13.5px}
.uo-file{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:8px;background:#f2f6ff}
.uo-file a{color:#0b4fd8;overflow-wrap:anywhere}
.uo-file label{display:inline!important;margin:0!important;color:#be1e2d;font-size:12.5px}
.uo-file em{color:#0b5cf0;font-style:normal;font-weight:600}
.uo-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:16px;border-top:1px solid #e3e8f2}
.uo-actions .tr-btn{width:auto;min-width:190px;min-height:48px}
@media(max-width:760px){
  .oc-head strong{font-size:14px}.oc-head span{font-size:13px}
  .oc-months{gap:3px}.oc-months i{height:10px}.oc-months li>a,.oc-months li>span{font-size:11px}
  .oc-note{gap:12px;padding:10px 12px}.oc-note strong{font-size:14px}.oc-note small{font-size:12.5px}
  .uo-body{padding:14px 12px 22px}
  .uo-prog{gap:14px;padding:12px}.uo-img{width:110px;height:86px}.uo-prog strong{font-size:16px}.uo-prog div>span{font-size:14px;gap:8px}.uo-prog i{width:34px;height:34px}
  .uo-grid{grid-template-columns:1fr}
  .uo-q strong{font-size:15px}.uo-q small{font-size:13px}
  .uo-drop{justify-content:flex-start;padding:14px 24px}
  .uo-actions{display:grid;grid-template-columns:1fr 1.4fr}.uo-actions .tr-btn{min-width:0}
}
.uo-line{display:block}