:root {
    --kps-ink: #21183f;
    --kps-muted: #777184;
    --kps-purple: #6f42c1;
    --kps-line: #ece8f6;
    --kps-shadow: 0 10px 30px rgba(48, 34, 88, .09);
}

* { box-sizing: border-box; }
body {
    font-family: "Prompt", sans-serif;
    color: var(--kps-ink);
    min-height: 100vh;
    background:
        radial-gradient(circle at 5% 8%, rgba(111, 66, 193, .06), transparent 25%),
        radial-gradient(circle at 96% 22%, rgba(245, 158, 11, .08), transparent 24%),
        #fff;
}
a { text-decoration: none !important; }

.kps-header { padding: 28px 0 22px; }
.kps-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--kps-ink);
}
.kps-brand:hover { color: var(--kps-ink); }
.kps-brand-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #fb923c);
    box-shadow: 0 8px 22px rgba(245, 158, 11, .25);
}
.kps-brand-text { text-align: left; line-height: 1.1; }
.kps-brand-text strong { display: block; font-size: 29px; font-weight: 700; letter-spacing: -.5px; }
.kps-brand-text small { display: block; margin-top: 5px; color: #8f879e; font-size: 11px; font-weight: 500; }

.kps-section-title { font-size: 18px; font-weight: 700; color: #2b2447; }
.kps-section-title i { color: var(--kps-purple); }
.kps-search-wrap { position: relative; width: 320px; max-width: 100%; }
.kps-search-wrap > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8e879c; z-index: 2; }
.kps-search-wrap .form-control {
    height: 44px;
    border-radius: 13px;
    border: 1px solid var(--kps-line);
    padding-left: 41px;
    box-shadow: 0 4px 15px rgba(54, 39, 95, .03);
}
.kps-search-wrap .form-control:focus { border-color: #b9a9e8; box-shadow: 0 0 0 .2rem rgba(111,66,193,.08); }

.system-card {
    background: #fff;
    border: 1px solid var(--kps-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--kps-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
}
.system-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(47, 30, 90, .13); }
.system-hero {
    position: relative;
    min-height: 200px;
    padding: 16px 18px 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.system-hero:before,
.system-hero:after {
    content: "";
    position: absolute;
    border: 2px solid rgba(255,255,255,.08);
    transform: rotate(45deg);
    border-radius: 18px;
}
.system-hero:before { width: 160px; height: 160px; right: -58px; bottom: -68px; }
.system-hero:after { width: 95px; height: 95px; right: -15px; bottom: -52px; }
.theme-green .system-hero { background: linear-gradient(135deg, #052e16, #16803a); }
.theme-blue .system-hero { background: linear-gradient(135deg, #08112d, #2547b7); }
.theme-orange .system-hero { background: linear-gradient(135deg, #5a2106, #f26a00); }
.theme-purple .system-hero { background: linear-gradient(135deg, #35145e, #7c3aed); }

.system-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.system-category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
}
.system-icon {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 19px;
    border: 3px solid rgba(255,255,255,.4);
}
.theme-green .system-icon { color: #198c43; }
.theme-blue .system-icon { color: #2448b8; }
.theme-orange .system-icon { color: #e45b00; }
.theme-purple .system-icon { color: #7c3aed; }

.system-headline { position: relative; z-index: 1; padding: 8px 0; }
.system-name-mini { font-size: 14px; font-weight: 600; opacity: .95; margin-bottom: 3px; }
.system-headline h2 { margin: 0; font-size: 27px; line-height: 1.18; font-weight: 700; letter-spacing: -.4px; }
.system-feature {
    position: relative;
    z-index: 1;
    margin-top: 13px;
    padding: 10px 12px 9px;
    border-radius: 9px;
    text-align: center;
    background: #fff;
    color: #312b49;
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.system-feature strong { display: block; font-size: 12px; margin-bottom: 2px; }
.system-feature span { display: block; color: #716b82; font-size: 10px; }
.theme-green .system-feature strong { color: #16803a; }
.theme-blue .system-feature strong { color: #2448b8; }
.theme-orange .system-feature strong { color: #e45b00; }
.theme-purple .system-feature strong { color: #7c3aed; }
.system-open-btn {
    margin-top: 8px;
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    color: #fff !important;
    font-size: 10px;
    font-weight: 600;
}
.theme-green .system-open-btn { background: #16803a; }
.theme-blue .system-open-btn { background: #2448b8; }
.theme-orange .system-open-btn { background: #e45b00; }
.theme-purple .system-open-btn { background: #7c3aed; }

.system-strip {
    height: 30px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #f0edf7;
    font-size: 10px;
    font-weight: 600;
}
.theme-green .system-strip { color: #16803a; }
.theme-blue .system-strip { color: #2448b8; }
.theme-orange .system-strip { color: #e45b00; }
.theme-purple .system-strip { color: #7c3aed; }
.system-strip-tag { padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 9px; }
.system-body { padding: 16px 18px 17px; min-height: 132px; display: flex; flex-direction: column; flex: 1 1 auto; }
.system-body h3 { margin: 0 0 7px; color: #2b2444; font-size: 14px; line-height: 1.5; font-weight: 600; }
.system-body p { margin: 0 0 12px; color: var(--kps-muted); font-size: 11px; line-height: 1.65; }
.system-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; }
.system-status { color: #16a34a; font-weight: 600; }
.system-link { color: var(--kps-purple); font-weight: 600; }

.system-developer-footer {
    min-height: 54px;
    padding: 9px 16px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.developer-copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}
.developer-copy small {
    margin: 0 0 2px;
    color: #fff !important;
    font-size: 9px;
    font-weight: 500;
    opacity: .92;
}
.developer-copy strong {
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.kps-pagination { margin: 12px 0 30px; }
.kps-pagination .page-link {
    min-width: 41px;
    height: 40px;
    margin: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8e3f3;
    border-radius: 10px !important;
    color: #514866;
    font-size: 13px;
    font-weight: 600;
}
.kps-pagination .page-item.active .page-link { background: var(--kps-purple); border-color: var(--kps-purple); }
.kps-pagination .page-item.disabled .page-link { color: #b2abbf; background: #faf9fc; }
.no-result-icon { width: 62px; height: 62px; margin: 0 auto 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1edfb; color: var(--kps-purple); font-size: 24px; }
.kps-footer { padding: 20px 0 34px; text-align: center; color: #9a93a6; font-size: 11px; }

@media (max-width: 767.98px) {
    .kps-header { padding: 20px 0 18px; }
    .kps-brand-text strong { font-size: 24px; }
    .kps-brand-icon { width: 41px; height: 41px; border-radius: 12px; }
    .kps-toolbar { align-items: stretch !important; }
    .kps-search-wrap { width: 100%; }
    .system-headline h2 { font-size: 24px; }
    .system-body { min-height: 0; }
}

/* v1.2 database-driven card overrides */
.system-card { --card-primary:#35145e; --card-secondary:#7c3aed; --card-accent:#7c3aed; }
.system-card .system-hero { background: linear-gradient(135deg, var(--card-primary), var(--card-secondary)); }
.system-card .system-icon { color: var(--card-accent); }
.system-card .system-feature strong, .system-card .system-strip, .system-card .system-link { color: var(--card-accent); }
.system-card .system-open-btn { background: var(--card-accent); }
.system-logo { width:46px;height:46px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:5px;border:3px solid rgba(255,255,255,.45);overflow:hidden; }
.system-logo img { width:100%;height:100%;object-fit:contain;border-radius:50%; }
.kps-brand-logo { width:48px;height:48px;border-radius:14px;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.08);padding:5px;overflow:hidden; }
.kps-brand-logo img { width:100%;height:100%;object-fit:contain; }
.category-filter { display:flex;gap:8px;flex-wrap:wrap; }
.category-pill { --cat-color:var(--kps-purple); border:1px solid #e8e3f3;background:#fff;color:#625a73;border-radius:999px;padding:7px 13px;font-size:11px;font-weight:500; }
.category-pill:hover, .category-pill.active { color:#fff;background:var(--cat-color);border-color:var(--cat-color); }
.category-pill:first-child.active { background:var(--kps-purple);border-color:var(--kps-purple); }

/* v1.3 portal database presentation */
.portal-alert {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--kps-shadow);
    font-size: 12px;
}
.portal-intro {
    position: relative;
    overflow: hidden;
    padding: 24px 26px;
    border: 1px solid var(--kps-line);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(111,66,193,.06), rgba(255,255,255,.96) 48%, rgba(245,158,11,.06));
    box-shadow: 0 10px 30px rgba(48,34,88,.05);
}
.portal-intro:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px solid rgba(111,66,193,.06);
    border-radius: 38px;
    right: -95px;
    top: -95px;
    transform: rotate(45deg);
}
.portal-kicker { color: var(--kps-purple); font-size: 11px; font-weight: 600; margin-bottom: 7px; }
.portal-intro h1 { margin: 0 0 7px; font-size: 26px; line-height: 1.25; font-weight: 700; color: #2b2447; }
.portal-intro p { margin: 0; max-width: 680px; color: #777184; font-size: 12px; line-height: 1.75; }
.portal-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.portal-stat { padding: 13px 8px; border: 1px solid #eee9f7; border-radius: 14px; text-align: center; background: rgba(255,255,255,.92); }
.portal-stat strong { display: block; color: var(--kps-purple); font-size: 22px; line-height: 1.1; }
.portal-stat span { display: block; margin-top: 5px; color: #8b8497; font-size: 9px; }
.pill-count { display: inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; margin-left:5px; padding:0 5px; border-radius:999px; background:rgba(111,66,193,.08); color:inherit; font-size:9px; font-weight:700; }
.category-pill.active .pill-count, .category-pill:hover .pill-count { background:rgba(255,255,255,.2); }
.featured-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border-radius:999px; background:#fff3cd; color:#9a6700; font-size:8px; font-weight:600; box-shadow:0 4px 10px rgba(0,0,0,.06); white-space:nowrap; }
.system-card .system-headline h3 { margin:0; font-size:27px; line-height:1.18; font-weight:700; letter-spacing:-.4px; }
.system-card .system-body h4 { margin:0 0 7px; color:#2b2444; font-size:14px; line-height:1.5; font-weight:600; }
.system-open-btn.disabled { opacity:.82; cursor:not-allowed; background:#8b8b94; pointer-events:none; }
.system-status.status-online { color:#16a34a; }
.system-status.status-maintenance { color:#d97706; }
.system-status.status-coming { color:#64748b; }
.empty-portal { border:1px dashed #ddd6eb; border-radius:18px; background:rgba(255,255,255,.7); }
@media (max-width: 767.98px) {
    .portal-intro { padding:19px 18px; }
    .portal-intro h1 { font-size:22px; }
    .portal-stats { margin-top:4px; }
    .portal-stat strong { font-size:19px; }
    .system-card .system-headline h3 { font-size:24px; }
}

/* v1.3.9 - force developer footer text white and horizontally centered */
.system-developer-footer {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.system-developer-footer .developer-copy {
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff !important;
}
.system-developer-footer .developer-copy small,
.system-developer-footer .developer-copy strong {
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #ffffff !important;
    text-align: center !important;
}


/* v1.4.5 - Portal Admin access button */
.portal-admin-access {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 18px;
    margin-bottom: 12px;
}
.portal-admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid rgba(111, 66, 193, .18);
    background: #ffffff;
    color: var(--kps-purple) !important;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(48, 34, 88, .08);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.portal-admin-btn:hover,
.portal-admin-btn:focus {
    background: var(--kps-purple);
    color: #ffffff !important;
    box-shadow: 0 9px 22px rgba(48, 34, 88, .14);
    transform: translateY(-1px);
}
.portal-admin-btn i {
    font-size: 14px;
}
@media (max-width: 575.98px) {
    .portal-admin-access {
        padding-top: 12px;
        margin-bottom: 10px;
    }
    .portal-admin-btn {
        min-height: 36px;
        padding: 7px 13px;
        font-size: 11px;
    }
}

/* v1.4.8 - clean mobile app experience inspired by modern Thai public-service apps */
html { background:#f6f8f7; }
body { background:#f6f8f7; color:#202724; }
.kps-app-home { padding-bottom:82px; }
.app-shell { width:100%; max-width:760px; margin:0 auto; min-height:100vh; background:#fff; padding:0 20px 36px; }
.app-topbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #f0f2f1; }
.app-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.app-brand img,.app-brand-fallback { width:44px;height:44px;border-radius:13px;object-fit:contain;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(18,73,49,.08); }
.app-brand-fallback { background:#eaf7f0;color:#168356;font-size:20px; }
.app-brand strong { display:block;font-size:16px;font-weight:600;color:#1f2925;line-height:1.35; }
.app-brand small { display:block;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#87918c;font-size:10px;margin-top:2px; }
.app-admin-icon { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#4d5b55;background:#f5f7f6;font-size:18px; }
.app-welcome { padding:30px 2px 24px; }
.app-eyebrow { display:inline-block;color:#168356;font-size:11px;font-weight:600;margin-bottom:7px; }
.app-welcome h1 { margin:0 0 7px;font-size:25px;font-weight:600;letter-spacing:-.3px;color:#1d2622; }
.app-welcome p { margin:0;color:#7c8782;font-size:12px;line-height:1.7; }
.app-service-section { padding-top:4px; }
.app-section-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.app-section-heading h2 { margin:0;font-size:16px;font-weight:600;color:#222b27;position:relative;padding-left:11px; }
.app-section-heading h2:before { content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:4px;background:#168356; }
.app-section-heading span { color:#909994;font-size:10px; }
.app-service-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.app-service-item { min-height:164px;padding:18px 9px 14px;border:1px solid #edf0ee;border-radius:17px;background:#fff;text-align:center;color:#26302b!important;box-shadow:0 4px 16px rgba(29,64,47,.045);transition:.18s ease; }
.app-service-item:active { transform:scale(.98);background:#fafcfb; }
.app-service-icon { width:58px;height:58px;margin:0 auto 13px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:25px; }
.service-tone-1 .app-service-icon { background:#e8f6ef;color:#158354; }
.service-tone-2 .app-service-icon { background:#edf4ff;color:#3971c6; }
.service-tone-3 .app-service-icon { background:#fff4e8;color:#d97817; }
.app-service-item strong { display:block;font-size:12px;font-weight:500;line-height:1.5; }
.app-service-item small { display:block;margin-top:5px;color:#939b97;font-size:9px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.app-note { margin-top:24px;padding:12px 14px;border-radius:13px;background:#f4faf7;color:#668076;font-size:10px;display:flex;align-items:flex-start;gap:9px;line-height:1.55; }
.app-note i { color:#168356;font-size:15px; }
.app-bottom-nav { position:fixed;z-index:1000;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:760px;height:70px;padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.97);border-top:1px solid #e9eeeb;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 -4px 20px rgba(26,61,44,.05); }
.app-bottom-nav a { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#8a948f!important;font-size:9px; }
.app-bottom-nav i { font-size:19px;line-height:1; }
.app-bottom-nav a.active { color:#168356!important;font-weight:500; }

/* service listing: lighter, flatter and easier to scan on a phone */
body:not(.kps-app-home) > main.container { max-width:1120px; }
.portal-admin-access { padding-top:14px;margin-bottom:10px; }
.portal-admin-access .btn { box-shadow:none!important;border:1px solid #e8ecea!important;background:#fff!important;color:#56635d!important;border-radius:12px!important;font-size:11px!important; }
.portal-intro { background:#fff;border:1px solid #e9eeeb;border-radius:16px;box-shadow:none;padding:20px 22px; }
.portal-intro:after { display:none; }
.portal-kicker { color:#168356; }
.portal-intro h1 { color:#202924;font-size:23px;font-weight:600; }
.portal-stats { gap:6px; }
.portal-stat { border-color:#edf0ee;background:#f8faf9;border-radius:12px; }
.portal-stat strong { color:#168356; }
.kps-section-title { color:#25302b;font-size:17px;font-weight:600; }
.kps-section-title i { color:#168356; }
.kps-search-wrap .form-control { border-color:#e5eae7;border-radius:12px;box-shadow:none;background:#fff; }
.category-filter { flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;-webkit-overflow-scrolling:touch;scrollbar-width:none; }
.category-filter::-webkit-scrollbar { display:none; }
.category-pill { flex:0 0 auto;border-color:#e5eae7;color:#66716c;border-radius:999px;background:#fff;box-shadow:none; }
.category-pill:hover,.category-pill.active,.category-pill:first-child.active { background:#168356;border-color:#168356;color:#fff; }
.system-card { border:1px solid #e8ecea;border-radius:16px;box-shadow:0 4px 16px rgba(29,64,47,.045); }
.system-card:hover { transform:translateY(-2px);box-shadow:0 8px 22px rgba(29,64,47,.08); }
.system-hero { min-height:142px;padding:14px 16px 12px; }
.system-hero:before,.system-hero:after { display:none; }
.system-category { background:rgba(255,255,255,.14);border-radius:999px; }
.system-card .system-headline h3 { font-size:20px;letter-spacing:0; }
.system-feature span { opacity:.9; }
.system-open-btn { border-radius:999px!important;padding:7px 12px!important; }
.system-strip { display:none; }
.system-body { min-height:118px;padding:14px 16px; }
.system-body p { font-size:10px;line-height:1.6; }
.system-developer-footer { min-height:42px;padding:7px 14px;box-shadow:none; }
.developer-copy small { display:none!important; }
.developer-copy strong { font-size:9px!important;font-weight:400!important; }
.developer-copy strong:before { content:"ผู้พัฒนาระบบ : "; }
.kps-footer { padding-bottom:25px; }

@media (max-width:575.98px) {
  .app-shell { padding-left:16px;padding-right:16px; }
  .app-service-grid { gap:8px; }
  .app-service-item { min-height:151px;padding:16px 6px 12px;border-radius:15px; }
  .app-service-icon { width:54px;height:54px;font-size:23px;border-radius:16px; }
  .app-service-item strong { font-size:11px; }
  body:not(.kps-app-home) > main.container { padding-left:14px;padding-right:14px; }
  .portal-admin-access { justify-content:space-between; }
  .portal-admin-access .btn { margin-right:0!important; }
  .portal-intro { padding:16px; }
  .portal-stats { grid-template-columns:repeat(3,1fr); }
  .kps-toolbar { margin-top:2px; }
  #systemGrid > .system-item { margin-bottom:12px!important; }
  .system-card { border-radius:15px; }
  .system-hero { min-height:130px; }
  .system-body { min-height:0; }
}
\n\n/* v1.4.9 - refined clean home: compact services + announcement carousel */\n.kps-app-home .app-shell{padding-bottom:94px;}\n.kps-app-home .app-topbar{min-height:68px;}\n.kps-app-home .app-brand img,.kps-app-home .app-brand-fallback{width:38px;height:38px;border-radius:11px;box-shadow:none;border:1px solid #eef2f0;}\n.app-announcement{padding:18px 0 25px;}\n.app-announcement .carousel{border-radius:18px;overflow:hidden;}\n.announcement-card{height:154px;border-radius:18px;padding:22px 88px 24px 22px;position:relative;display:flex;align-items:center;overflow:hidden;}\n.announcement-primary{background:linear-gradient(135deg,#e9f7f0,#f7fbf9);color:#174a35;}\n.announcement-soft{background:linear-gradient(135deg,#fff6e9,#fffaf3);color:#765020;}\n.announcement-blue{background:linear-gradient(135deg,#edf5ff,#f7faff);color:#315b88;}\n.announcement-label{font-size:9px;font-weight:600;letter-spacing:.5px;opacity:.7;}\n.announcement-card h1,.announcement-card h2{font-size:18px;line-height:1.35;font-weight:600;margin:5px 0 5px;}\n.announcement-card p{font-size:10px;line-height:1.55;margin:0;opacity:.72;max-width:440px;}\n.announcement-symbol{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center;font-size:27px;box-shadow:0 6px 22px rgba(26,66,48,.06);}\n.app-announcement .carousel-indicators{bottom:5px;margin-bottom:0;}\n.app-announcement .carousel-indicators li{width:6px;height:6px;border-radius:50%;border:0;margin:0 3px;background-color:rgba(42,70,57,.25);}\n.app-announcement .carousel-indicators li.active{width:18px;border-radius:6px;background-color:#168356;}\n.kps-app-home .app-service-section{padding-top:0;}\n.app-service-list{display:flex;flex-direction:column;gap:9px;}\n.app-service-row{display:flex;align-items:center;min-height:74px;padding:10px 12px;border:1px solid #edf1ef;border-radius:15px;background:#fff;color:#26302b!important;box-shadow:0 3px 12px rgba(29,64,47,.035);}\n.app-service-row:active{background:#f9fbfa;transform:scale(.995);}\n.app-service-row .app-service-icon{flex:0 0 44px;width:44px;height:44px;margin:0 12px 0 0;border-radius:13px;font-size:19px;}\n.app-service-copy{min-width:0;flex:1;text-align:left;}\n.app-service-copy strong{display:block;font-size:13px;font-weight:500;line-height:1.45;color:#26302b;}\n.app-service-copy small{display:block;margin-top:2px;font-size:9px;line-height:1.45;color:#909994;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n.app-service-arrow{flex:0 0 auto;color:#a6afaa;font-size:13px;margin-left:8px;}\n.kps-app-home .app-note{margin-top:17px;background:#f7faf8;border:1px solid #eef3f0;}\n@media(max-width:575.98px){.app-announcement{padding-top:14px;padding-bottom:21px}.announcement-card{height:142px;padding:18px 76px 21px 18px}.announcement-card h1,.announcement-card h2{font-size:16px}.announcement-symbol{width:50px;height:50px;right:14px;font-size:23px;border-radius:15px}.app-service-row{min-height:70px}.app-service-row .app-service-icon{width:42px;height:42px;flex-basis:42px}.kps-app-home .app-section-heading{margin-bottom:12px}}\n

/* v1.5.0 - compact 3-column service grid */
.kps-app-home .app-service-grid-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;align-items:stretch;}
.kps-app-home .app-service-grid-compact .app-service-item{min-height:112px;padding:14px 7px 12px;border:0;border-radius:16px;background:#fff;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-decoration:none;}
.kps-app-home .app-service-grid-compact .app-service-item:active{background:#f8faf9;transform:scale(.98);}
.kps-app-home .app-service-grid-compact .app-service-icon{width:48px;height:48px;margin:0 auto 9px;border-radius:15px;font-size:21px;flex:0 0 48px;}
.kps-app-home .app-service-grid-compact .app-service-item strong{display:block;width:100%;margin:0;color:#26302b;font-size:11px;font-weight:500;line-height:1.45;text-align:center;word-break:normal;}
@media(max-width:575.98px){.kps-app-home .app-service-grid-compact{gap:10px 6px}.kps-app-home .app-service-grid-compact .app-service-item{min-height:106px;padding:12px 4px 10px}.kps-app-home .app-service-grid-compact .app-service-icon{width:46px;height:46px;flex-basis:46px;font-size:20px}.kps-app-home .app-service-grid-compact .app-service-item strong{font-size:10.5px}}

/* v1.5.1 Graphic Banner Carousel */
.graphic-banner-wrap{margin:10px 0 22px}.graphic-carousel-inner{border-radius:18px;overflow:hidden;background:#f3f6f5;box-shadow:0 5px 20px rgba(24,55,43,.07)}
.graphic-banner-image{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}.graphic-indicators{bottom:-2px;margin-bottom:8px}.graphic-indicators li{width:7px;height:7px;border-radius:50%;border:0;margin:0 4px;background-color:rgba(255,255,255,.65)}.graphic-indicators li.active{width:20px;border-radius:6px;background-color:#fff}
@media(max-width:575.98px){.graphic-carousel-inner{border-radius:14px}.graphic-banner-wrap{margin-top:8px;margin-bottom:18px}}


/* v1.5.3 - Close / Back Portal */
.app-top-actions{display:flex;align-items:center;gap:8px;}
.portal-close-btn{width:40px;height:40px;border:1px solid #e9eeeb;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#5d6963;font-size:17px;padding:0;box-shadow:none;cursor:pointer;}
.portal-close-btn:active{transform:scale(.96);background:#f5f7f6;}
.portal-close-list-btn{margin-left:auto!important;color:#6b756f!important;}
@media(max-width:575.98px){.portal-close-btn{width:38px;height:38px;font-size:16px}.portal-close-list-btn span{display:none}.portal-close-list-btn{width:38px;height:38px;padding:0!important;display:flex;align-items:center;justify-content:center}}


/* v1.5.4 - compact 3-column system grid */
.system-app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;max-width:840px;margin:0 auto 24px;align-items:stretch;}
.system-grid-item{min-width:0;}
.system-grid-link{min-height:126px;padding:15px 8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;text-decoration:none!important;color:#26302b!important;border-radius:16px;background:#fff;transition:background .15s ease,transform .15s ease;}
.system-grid-link:active{background:#f8faf9;transform:scale(.98);}
.system-grid-icon{width:50px;height:50px;flex:0 0 50px;margin:0 auto 9px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:#f2f8f5;color:var(--system-accent);font-size:22px;overflow:hidden;}
.system-grid-icon img{width:100%;height:100%;object-fit:contain;padding:7px;}
.system-grid-name{width:100%;min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;font-weight:500;line-height:1.45;color:#26302b;}
.system-grid-status{margin-top:5px;padding:2px 7px;border-radius:999px;font-size:8px;line-height:1.4;}
.system-grid-status.status-maintenance{background:#fff5df;color:#9a6814;}
.system-grid-status.status-coming{background:#f0f2f1;color:#76817b;}
.system-grid-disabled{cursor:default;opacity:.72;}
@media(max-width:575.98px){.system-app-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}.system-grid-link{min-height:112px;padding:12px 4px 10px}.system-grid-icon{width:46px;height:46px;flex-basis:46px;font-size:20px}.system-grid-name{font-size:10.5px;min-height:31px}}

/* v1.5.5 - larger icons in subsystem cards */
.system-grid-link{min-height:190px;padding:22px 12px 18px;}
.system-grid-icon{width:104px;height:104px;flex-basis:104px;margin-bottom:14px;border-radius:24px;font-size:54px;}
.system-grid-icon img{padding:4px;}
.system-grid-name{font-size:14px;line-height:1.5;min-height:42px;}
@media(max-width:575.98px){
 .system-grid-link{min-height:150px;padding:16px 5px 12px;}
 .system-grid-icon{width:76px;height:76px;flex-basis:76px;margin-bottom:11px;border-radius:20px;font-size:40px;}
 .system-grid-name{font-size:12px;min-height:36px;}
}
@media(max-width:359.98px){
 .system-grid-icon{width:64px;height:64px;flex-basis:64px;font-size:34px;}
}