/* UMNEO reusable components; adapt current application via className/class, do not replace behavior. */
.um-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: 14px; line-height: 1.4; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; white-space: nowrap; }
.um-btn:hover { transform: translateY(-1px); }
.um-btn--primary { background: var(--um-primary); color: var(--um-on-primary) !important; box-shadow: 0 7px 17px var(--um-shadow); }
.um-btn--primary:hover { background: var(--um-primary-hover); }
.um-btn--secondary { background: var(--um-surface); color: var(--um-text); border-color: var(--um-border); }
.um-btn--secondary:hover { background: var(--um-bg-soft); }
.um-btn--ghost { background: transparent; color: var(--um-muted); }
.um-btn--small { padding: 8px 13px; font-size: 12px; }
.um-card { border: 1px solid var(--um-border); background: var(--um-surface); border-radius: var(--um-radius-lg); padding: 22px; box-shadow: 0 12px 30px -20px var(--um-shadow); }
.um-card--peach { background: var(--um-primary-soft); border-color: transparent; }
.um-card--yellow { background: var(--um-yellow); border-color: transparent; }
.um-card--lilac { background: var(--um-lilac); border-color: transparent; }
.um-card--mint { background: var(--um-mint); border-color: transparent; }
.um-card--hover { transition: box-shadow .2s ease, transform .2s ease; }
.um-card--hover:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px var(--um-shadow); }
.um-field { display: block; width: 100%; border: 1px solid var(--um-border); background: var(--um-surface); color: var(--um-text); border-radius: 12px; padding: 12px 14px; outline: none; }
.um-field::placeholder { color: var(--um-muted); opacity: .75; }
.um-field:focus { border-color: var(--um-primary); box-shadow: 0 0 0 3px var(--um-primary-soft); }
.um-label { display: block; font-size: 12px; font-weight: 700; color: var(--um-text); margin-bottom: 7px; }
.um-chip { border: 1px solid var(--um-border); padding: 6px 11px; border-radius: 999px; background: var(--um-surface); color: var(--um-muted); font-weight: 600; font-size: 11px; }
.um-chip--active { background: var(--um-primary-soft); border-color: transparent; color: var(--um-primary-hover); }
.um-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 700; }
.um-badge--success { background: var(--um-mint); color: var(--um-success); }
.um-badge--progress { background: var(--um-yellow); color: var(--um-warning); }
.um-badge--draft { background: var(--um-lilac); color: var(--um-text); }
.um-progress { overflow: hidden; height: 8px; background: var(--um-bg-soft); border-radius: 50px; }
.um-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--um-primary); transition: width .25s; }
.um-topnav { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 80px; }
.um-navlinks { display: flex; gap: 26px; align-items: center; color: var(--um-muted); font-size: 13px; font-weight: 700; }
.um-logo { display: inline-flex; align-items: center; gap: 10px; font: 800 23px/1 var(--um-font-heading); letter-spacing: -.04em; }
.um-logo > img { width: 38px; height: 38px; }
.um-hero { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(20px, 5vw, 70px); padding: 48px 0 76px; }
.um-hero__copy { display: flex; align-items: flex-start; flex-direction: column; gap: 23px; position: relative; z-index: 1; }
.um-hero__copy p { font-size: 16px; line-height: 1.85; color: var(--um-muted); max-width: 485px; }
.um-hero__visual { position: relative; isolation: isolate; }
.um-hero__visual:before { content: ''; position: absolute; inset: -30px -18px 27px 19px; z-index: -1; border-radius: 46% 54% 43% 57% / 48% 45% 55% 52%; background: var(--um-yellow); transform: rotate(-5deg); }
.um-hero__visual > img { height: clamp(340px, 35vw, 480px); width: 100%; object-fit: cover; border-radius: 38% 26% 33% 18% / 20% 30% 23% 25%; }
.um-float { position: absolute; background: var(--um-surface); padding: 15px 18px; border: 1px solid var(--um-border); box-shadow: 0 22px 45px -20px var(--um-shadow); border-radius: 15px; min-width: 185px; }
.um-float--bottom { bottom: 2%; left: -6%; }
.um-float--top { top: 5%; right: -3%; }
.um-stat { font: 800 30px/1.3 var(--um-font-heading); color: var(--um-text); }
.um-stat-caption { font-size: 11px; color: var(--um-muted); }
.um-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.um-feature { display: flex; flex-direction: column; gap: 11px; padding: 24px; min-height: 174px; }
.um-feature strong { font: 800 17px/1.3 var(--um-font-heading); }
.um-feature p { color: var(--um-muted); font-size: 12px; }
.um-course { display: flex; overflow: hidden; flex-direction: column; padding: 0; }
.um-course__image { height: 160px; width: 100%; object-fit: cover; }
.um-course__body { padding: 17px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.um-course__body h3 { font-size: 16px; font-weight: 800; }
.um-course__meta { color: var(--um-muted); font-size: 11px; }
.um-shell-dashboard { background: var(--um-bg); min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0,1fr); }
.um-sidebar { background: var(--um-sidebar); border-right: 1px solid var(--um-border); padding: 27px 17px; display: flex; flex-direction: column; gap: 24px; min-height: 100vh; }
.um-sidebar__link { display: flex; align-items: center; gap: 11px; border-radius: 11px; padding: 11px 12px; font-size: 12px; font-weight: 600; color: var(--um-muted); }
.um-sidebar__link--active { background: var(--um-primary-soft); color: var(--um-primary-hover); font-weight: 800; }
.um-dash-main { padding: 24px clamp(18px, 4vw, 48px); min-width: 0; }
.um-dash-head { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.um-search { min-width: min(280px, 36vw); display: flex; align-items: center; gap: 10px; background: var(--um-surface); padding: 10px 16px; border: 1px solid var(--um-border); border-radius: 12px; font-size: 12px; color: var(--um-muted); }
.um-dashboard-grid { display: grid; gap: 20px; grid-template-columns: 1.35fr .65fr; align-items: start; }
.um-dashboard-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.um-kpi { padding: 21px; display: flex; flex-direction: column; gap: 10px; }
.um-kpi .um-stat { font-size: 29px; }
.um-kpi p { font-size: 11px; color: var(--um-muted); }
.um-dashboard-courses { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.um-dashboard-courses .um-course__image { height: 128px; }
.um-schedule-item { padding: 12px 0; display: flex; gap: 11px; border-bottom: 1px solid var(--um-border); align-items: flex-start; font-size: 12px; }
.um-schedule-item:last-child { border-bottom: 0; }
.um-calendar-date { font: 800 17px/1 var(--um-font-heading); text-align: center; background: var(--um-primary-soft); color: var(--um-primary-hover); border-radius: 12px; padding: 10px; flex: none; min-width: 49px; }
.um-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; overflow: hidden; }
.um-auth__form { display: grid; place-items: center; padding: 50px; }
.um-auth__photo { background: var(--um-yellow); }
.um-auth__photo img { height: 100%; width: 100%; object-fit: cover; }
.um-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.um-table thead { background: var(--um-bg-soft); }
.um-table th { text-align: left; font-size: 11px; color: var(--um-muted); }
.um-table td, .um-table th { padding: 13px 15px; border-bottom: 1px solid var(--um-border); }
.um-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--um-border); }
.um-tab { display: inline-flex; align-items: center; border: none; background: none; border-bottom: 3px solid transparent; padding: 12px 2px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--um-muted); }
.um-tab--active { border-color: var(--um-primary); color: var(--um-text); }
.um-empty { padding: 40px; border-radius: var(--um-radius-lg); background: var(--um-surface-alt); text-align: center; }
.um-empty img { width: 170px; margin: 0 auto 16px; }
@media (max-width: 1024px) { .um-feature-grid { grid-template-columns: repeat(2,1fr); } .um-dashboard-grid { grid-template-columns: 1fr; } .um-dashboard-courses { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .um-container { width: min(calc(100% - 28px),var(--um-width)); } .um-hero { grid-template-columns: 1fr; gap: 50px; padding-top: 35px; } .um-hero__visual > img { height: 365px; } .um-navlinks { display: none; } .um-grid--3,.um-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .um-shell-dashboard { grid-template-columns: 1fr; } .um-sidebar { min-height: unset; border-right: 0; border-bottom: 1px solid var(--um-border); padding: 13px; } .um-sidebar__links { display: flex; gap: 4px; overflow-x: auto; } .um-sidebar__link { white-space: nowrap; } .um-dash-main { padding: 20px 14px; } .um-dash-head { margin-bottom: 20px; } .um-search { display: none; } .um-auth { grid-template-columns: 1fr; } .um-auth__photo { display: none; } }
@media (max-width: 520px) { .um-feature-grid,.um-grid--2,.um-grid--3,.um-grid--4 { grid-template-columns: 1fr; } .um-dashboard-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } .um-dashboard-courses { grid-template-columns: 1fr; } .um-hero__visual > img { height: 280px; } .um-float--top { right: -2%; } .um-float--bottom { left: 0; } .um-btn { white-space: normal; } .um-section { padding-block: 52px; } }