@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;600;700&display=swap');

* { font-family: 'Anuphan', sans-serif; }

/* transition เฉพาะ element ที่ต้องการ ไม่ใช่ทั้งหมด */
button, a, .menu-active, .card-main { transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; }

body { background-color: #ede9fe; }

.login-gradient-wrapper { background: linear-gradient(135deg, #a78bfa 0%, #3b82f6 33%, #2dd4bf 66%, #f472b6 100%); }

.card-main { background: #ffffff; border-radius: 2rem; box-shadow: 0 15px 35px rgba(0,0,0,0.08); border: 1px solid #ffffff; }

/* ══ ขอบย่อหน้ากลางของทุกหน้า — ให้เท่ากับหน้า 3. ตั้งต้นข้อมูล (1cm) ══ */
.page-pad { padding: 1cm; }

.menu-active { color: #ffffff !important; }

.input-flat { background: #f8fafc; border: 1.5px solid #e2e8f0; padding: 0.75rem 1rem; border-radius: 0.85rem; font-size: 0.875rem; outline: none; }
.input-flat:focus { border-color: #7c3aed; background: #ffffff; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.05); }

/* ปุ่ม + เพิ่มรายการ (ตั้งต้นข้อมูล Tab 1 / Tab 3)
   ว่าง = ม่วง · มีข้อความแล้ว = เขียวนีออน */
.add-btn { color: #5b21b6; cursor: pointer; background: none; border: none; padding: 0;
           display: flex; align-items: center; transition: color .15s ease; }
.add-btn-inline { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); }
.input-flat:not(:placeholder-shown) ~ .add-btn { color: #00d26a; }

.qty-stepper { position: relative; display: inline-flex; align-items: center; background: #ffffff; border: 1.5px solid #e2e8f0; border-radius: 0.85rem; width: 84px; }
.qty-stepper:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.05); }
.qty-stepper-input { width: 100%; text-align: center; border: none; outline: none; background: transparent; font-size: 0.875rem; padding: 0.6rem 1.7rem 0.6rem 0.5rem; -moz-appearance: textfield; }
.qty-stepper-btns { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; }
.qty-stepper-btns button { line-height: 0; padding: 1px 3px; color: #94a3b8; background: none; border: none; cursor: pointer; }
.qty-stepper-btns button:hover { color: #4f46e5; }

/* ══════════════════════════════════════════
   หัวตาราง (thead) ทุกตาราง: หนา / เข้ม
   ══════════════════════════════════════════ */
.table-header th {
    font-weight: 800 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── body ทุกตาราง: บาง / อ่อน ── */
table tbody tr td {
    font-weight: 300 !important;
    font-size: 0.8rem !important;
}
/* cell ชื่อหลัก — ใช้ตัวบางเท่ากันทั้งตาราง (หัวตารางหนา / ในตารางบาง) */
table tbody tr td.adm-name {
    font-weight: 300 !important;
}

/* ══ ตารางที่ 1 — โทนม่วง (purple) ══ */
.tbl-purple thead.table-header { background: #ede9fe; }
.tbl-purple .table-header th   { color: #3b0764 !important; }
.tbl-purple tbody tr td        { color: #6d28d9 !important; }
.tbl-purple tbody tr td.adm-name { color: #3b0764 !important; }
.tbl-purple tbody tr:nth-child(odd)  { background-color: #f5f3ff; }
.tbl-purple tbody tr:nth-child(even) { background-color: #ede9fe; }
.tbl-purple tbody tr:hover           { background-color: #ddd6fe !important; }

/* ตารางที่ 3 (Tab 2 — แผนพัฒนามหาวิทยาลัยฯ และความเชื่อมโยง): เนื้อความสีดำ หัวตารางคงม่วงตาม tbl-purple */
#adm-tbody-strat_links td { color: #111827 !important; }
table:has(#adm-tbody-strat_links) .table-header th { font-size: 0.85rem !important; }

/* Tab 1 (หมวดข้อมูลยุทธศาสตร์ฯ): เนื้อความสีดำ + หัวตาราง 0.85rem แบบ Tab 2 (ตาราง A 8 ชุด + ตาราง B 4 ชุด) */
:is(#adm-tbody-strat_plans, #adm-tbody-strat_issues, #adm-tbody-strat_strategies,
    #adm-tbody-strat_dimensions, #adm-tbody-strat_sub_strategies, #adm-tbody-strat_kpis_dim,
    #adm-tbody-strat_kpis_kpi, #adm-tbody-strat_outputs,
    #adm-tbody-nat_strategies, #adm-tbody-nat_workplans, #adm-tbody-nat_masterplans, #adm-tbody-nat_nesdps) td { color: #111827 !important; }
table:has(:is(#adm-tbody-strat_plans, #adm-tbody-strat_issues, #adm-tbody-strat_strategies,
    #adm-tbody-strat_dimensions, #adm-tbody-strat_sub_strategies, #adm-tbody-strat_kpis_dim,
    #adm-tbody-strat_kpis_kpi, #adm-tbody-strat_outputs,
    #adm-tbody-nat_strategies, #adm-tbody-nat_workplans, #adm-tbody-nat_masterplans, #adm-tbody-nat_nesdps)) .table-header th { font-size: 0.85rem !important; }

/* Tab 3 (หมวดข้อมูลทั่วไป): เนื้อความสีดำ + หัวตาราง 0.85rem แบบ Tab 1/2 */
table[class*="tbl-"] tbody[id^="t3-tbody-"] td { color: #111827 !important; }
table:has(tbody[id^="t3-tbody-"]) .table-header th { font-size: 0.85rem !important; }

/* ===== (ง.4) placeholder + layout helpers ===== */
input::placeholder, textarea::placeholder { color: #9ca3af; opacity: 1; }
select { color: #111827; }
select.f4-placeholder { color: #9ca3af; }
select option[value=""] { color: #9ca3af; }

.print-only { display: none; }
.form4-print-code { position: absolute; top: 18px; right: 18px; font-weight: 800; font-size: 12px; color: #111827; }

/* ── ลายเซ็น 3 คน (ซ่อนบนจอ แสดงตอนพิมพ์) ── */
.print-signature-block { display: none; }
.print-signature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 40px; margin-top: 40px; }
.print-signature-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.print-signature-line { width: 100%; border-top: 1px solid #111; margin-bottom: 8px; height: 56px; }
.print-signature-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 2px; }
.print-signature-title { font-size: 12px; color: #111; margin-bottom: 4px; }
.print-signature-date { font-size: 11px; color: #555; }

.f4-short { max-width: 420px; }
.f4-long { width: 100%; }

/* จัด layout แบบ label + ช่องในบรรทัดเดียว (ง.4) */
.f4-inline { display: flex; align-items: center; gap: 0.75rem; }
.f4-inline-label { min-width: 120px; max-width: 220px; white-space: nowrap; }
.f4-other-label { min-width: 40px; max-width: 60px; white-space: nowrap; }
.f4-note { margin-left: calc(120px + 0.75rem); margin-top: 0.25rem; font-size: 11px; font-weight: 700; color: #6b7280; }

/* textarea ประเภทครุภัณฑ์ประกอบอาคาร — ให้กว้างเท่ากับ select เหนือมัน */
.f4-building-note { width: calc(100% - 120px - 0.75rem); margin-left: calc(120px + 0.75rem); }

/* ลดขนาดวันที่บันทึกในตาราง (ใช้เฉพาะจุดที่ใส่ class date-cell) */
.date-cell { font-size: 12px; }

@media print {
    /* ── ซ่อนทุกอย่างที่ไม่เกี่ยวกับฟอร์ม ── */
    .no-print { display: none !important; }

    /* ── reset layout ── */
    body { overflow: visible !important; background: white !important; }
    #main-app { display: block !important; height: auto !important; overflow: visible !important; }
    aside { display: none !important; }
    main {
        margin: 0 !important; padding: 0 !important;
        background: white !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        flex: none !important;
    }
    #content-view { padding: 0 !important; overflow: visible !important; height: auto !important; }
    .page-pad { padding: 0 !important; } /* กันขอบหน้าไปกินพื้นที่กระดาษตอนพิมพ์ */

    .card-main { border-radius: 0; border: none; box-shadow: none; }
    .print-only { display: block !important; }
    .print-signature-block { display: block !important; page-break-inside: avoid; }
    .form4-print-code { position: fixed; top: 12mm; right: 12mm; }
    .f4-inline-label { min-width: 105px; }
    .f4-note { margin-left: calc(105px + 0.75rem); }

    /* ===== แสดงค่าใน input/select/textarea ตอนพิมพ์ ===== */
    input[type="text"], input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    textarea, select {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        -webkit-appearance: none;
        appearance: none;
    }
    /* ซ่อนปุ่ม file input */
    input[type="file"] { display: none !important; }
    /* ซ่อนรูปภาพที่ยังไม่ได้เลือก */
    img.hidden { display: none !important; }

    /* ขีดเส้นใต้แต่ละ field */
    .f4-inline input, .f4-inline select { border-bottom: 1px solid #999 !important; }

    /* แสดงทุก section ไม่ว่าจะ hidden หรือเปล่า ยกเว้น class no-print */
    #analysis-case-1, #analysis-case-2, #analysis-case-3, #analysis-case-4 {
        display: block !important;
    }

    /* ===== Print polish: (ง.4) only ===== */
    .form4-page { padding: 14mm !important; }
    .form4-page .form4-header { margin-bottom: 10mm !important; }
    .form4-page .form4-header img { width: 24mm !important; margin-bottom: 4mm !important; }
    .form4-page .form4-header h4 { font-size: 16pt !important; line-height: 1.2 !important; }
    .form4-page .form4-header h5 { font-size: 12pt !important; line-height: 1.2 !important; color: #374151 !important; }

    /* page break */
    .space-y-10 > div, .space-y-8 > div { page-break-inside: avoid; }
}
/* =========================
   Responsive (ง.4) only
   ปรับเฉพาะ Tab1 ฟอร์ม .form4-page
   ========================= */

/* ── ตาราง Section A (กริด cell) ── */
.f4-cell { padding: 0.85rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.f4-cell-label { font-size: 0.7rem; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.f4-cell-input { background: #f8fafc; border: 1.5px solid #e2e8f0; padding: 0.6rem 0.85rem; border-radius: 0.75rem; font-size: 0.8rem; outline: none; width: 100%; }
.f4-cell-input:focus { border-color: #7c3aed; background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,0.06); }
select.f4-cell-input { color: #111827; }

/* ── Cascade Step rows ── */
.f4-strat-row { display: flex; align-items: center; gap: 0; padding: 0.7rem 1rem; }
.f4-strat-row.items-start { align-items: flex-start; }
.f4-strat-badge { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 900; flex-shrink: 0; }
.f4-strat-label { min-width: 200px; max-width: 200px; font-size: 0.78rem; font-weight: 700; color: #374151; padding: 0 0.85rem; }
.f4-strat-field { flex: 1; }
.f4-strat-select { width: 100%; background: #f8fafc; border: 1.5px solid #e2e8f0; padding: 0.55rem 0.85rem; border-radius: 0.7rem; font-size: 0.8rem; outline: none; color: #111827; }
.f4-strat-select:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,0.07); }
.f4-strat-select:disabled { background: #f1f5f9; color: #111827; cursor: not-allowed; border-style: dashed; }
select.f4-strat-select.f4-placeholder { color: #111827; }
.f4-multi-select { display: block; }
@media (max-width: 768px) {
  .form4-page { padding: 1rem !important; }
  .form4-page .card-main { padding: 1rem !important; }
  .form4-page h3 { font-size: 1.25rem; }
  .form4-page h4 { font-size: 1.05rem; }
  .form4-page h5 { font-size: 0.95rem; }
  .form4-page table { font-size: 0.75rem; }
  .form4-page table thead { display: none; }
  .form4-page table tr { display: block; margin-bottom: 0.75rem; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 0.75rem; }
  .form4-page table td { display: flex; justify-content: space-between; padding: 0.25rem 0; }
}

/* ===== หน้า 2 จัดการคำขออนุมัติงบประมาณ : ลูกศร (V) ของ Dropdown เป็นสีเขียวเข้ม ===== */
.page-manage select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 15px 15px;
    padding-right: 2.1rem;
}

/* ===== TAB ที่เลือกอยู่ (ทุกหน้า) : ไล่สีม่วง→น้ำเงิน แบบหน้า Login ===== */
.tab-active-grad { background: #7c3aed; }
.tab-active-grad::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.25); margin-right: 0.5rem; vertical-align: middle; }

/* =========================================================
   Sticky Tab Bar — หน้า 2.จัดการคำขออนุมัติงบประมาณ (ง.4 / ง.5 / ง.6)
   ปักหมุดแถบแท็บไว้ขอบบน + หดอัตโนมัติเมื่อเลื่อนลง
   ระยะขอบซ้าย/ขวาที่ต้องชดเชย = #content-view (p-10 = 2.5rem) + .page-pad (1cm)
   ========================================================= */
.manage-tabbar {
    --tb-bleed: calc(2.5rem + 1cm);   /* ระยะที่ต้องดึงออกไปให้ชิดขอบจอ */
    --tb-gap: 1rem;                    /* ระยะห่างบน-ล่างของแถบ (ลดลงให้แถบขึ้นสูง + คืนพื้นที่ฟอร์ม) */
    position: sticky;
    top: var(--tb-gap);                /* ช่องว่างเหนือแถบ = เท่ากับระยะห่างใต้แถบ */
    z-index: 30;                       /* < aside(50) และ < loader(200) */
    margin-bottom: var(--tb-gap);
    transition: margin-bottom .2s ease, top .2s ease;
}

/* พื้นหลังวาดด้วย ::before เพื่อไม่ให้เกิด layout shift ตอนติดหมุด */
.manage-tabbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--tb-gap) * -1);
    bottom: calc(var(--tb-gap) * -1);
    left: calc(var(--tb-bleed) * -1);
    right: calc(var(--tb-bleed) * -1);
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(42,26,74,.86) 0%, rgba(23,18,31,.91) 55%, rgba(15,11,22,.95) 100%),
        url('login-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;   /* sample จุดเดียวกับ #main-app -> กลืนเนียนไร้ขอบ */
    opacity: 1;
    pointer-events: none;
}

.manage-tabbar.is-stuck::before { opacity: 1; }

/* ── หน้า manage: ตัด padding บนของ page-pad ให้แท็บบาร์ขยับขึ้นชิดเมนู
   (คงซ้าย/ขวา/ล่าง 1cm ไว้ เพื่อไม่ให้ alignment แนวนอนเพี้ยน) ── */
.page-pad.page-manage { padding-top: 0; margin-top: -0.75rem; }

/* ── ปุ่มเล็กถาวร ── ไม่มีการหด/ขยายตอน scroll แล้ว */
.manage-tabbar .manage-tab {
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    padding-top: .5rem;        /* py-4 -> py-2 (ถาวร) */
    padding-bottom: .5rem;
    font-size: .875rem;        /* base -> text-sm (ถาวร) */
    line-height: 1.25rem;
    border-radius: .75rem;     /* rounded-2xl -> rounded-xl (ถาวร) */
}

/* คง class เดิมไว้ให้ JS toggle ได้ แต่ให้ค่าเท่าปุ่มปกติ = ไม่มีอะไรเปลี่ยนตอนหด */
.manage-tabbar.is-condensed .manage-tab {
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    border-radius: .75rem;
}

/* =========================================================
   ปุ่มกลับขึ้นบนสุด (Scroll-to-top FAB) — หน้า 2.จัดการคำขออนุมัติงบประมาณ
   โผล่จางๆ เมื่อเลื่อนลง / ซ่อนตอนอยู่บนสุด — คุมการโชว์ด้วย class .is-visible
   ========================================================= */
.scroll-top-fab {
    position: fixed;
    right: 1.75rem;
    bottom: 5.5rem;
    z-index: 40;                       /* < loader(200), เหนือเนื้อหาทั่วไป */
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, .45);
    /* สถานะซ่อน */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
}

.scroll-top-fab.is-visible {
    opacity: .9;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top-fab.is-visible:hover {
    opacity: 1;
    box-shadow: 0 14px 30px -5px rgba(79, 70, 229, .55);
}

/* ===== การ์ดผู้ใช้ กระจกม่วงโปร่ง ลอยมุมล่างขวา ===== */
.user-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 45;                       /* เหนือ FAB(40) และเนื้อหา, < loader(200) */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(124,58,237,.55), rgba(38,36,58,.72));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 30px -8px rgba(38,20,80,.55);
}
.user-fab .uf-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: #7c3aed; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px -2px rgba(124,58,237,.6);
}
.user-fab .uf-name, .user-fab .uf-pos, .user-fab .uf-dept {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; line-height: 1.25;
}
.user-fab .uf-name { color: #fff; font-weight: 800; font-size: 13px; }
.user-fab .uf-pos  { color: rgba(255,255,255,.6); font-size: 10px; font-weight: 600; }
.user-fab .uf-dept { color: #c4b5fd; font-size: 10px; font-weight: 700; }
.user-fab .uf-logout {
    width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0; border: none; cursor: pointer;
    background: #ef4444; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px -2px rgba(239,68,68,.5);
    transition: background .2s ease;
}
.user-fab .uf-logout:hover { background: #dc2626; }

/* ===== ธีม login ใน shell (ทุกหน้า) ===== */
#main-app{
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(42,26,74,.86) 0%, rgba(23,18,31,.91) 55%, rgba(15,11,22,.95) 100%),
        url('login-bg.jpg');
    background-size:cover; background-position:center; background-attachment:fixed;
}
.side-vtext{position:fixed; top:50%; transform:translateY(-50%); pointer-events:none; z-index:5; color:#fff; line-height:1;}
/* จัดกึ่งกลาง "พื้นที่ใต้แถบเมนู" ไม่ใช่กึ่งกลางจอ -> เลื่อนลงครึ่งหนึ่งของความสูงแถบเมนู (~68px)
   max-height กันไม่ให้ก้อนยาวเกินจนล้นขอบล่าง */
.side-right{right:28px; top:calc(50% + 34px); max-height:calc(100vh - 140px);
            writing-mode:vertical-rl; white-space:nowrap; overflow:hidden;}
.side-right .rmutp-big{font-weight:900; font-size:30px; letter-spacing:.02em; opacity:.95;}
.side-right .rmutp-sub{font-weight:600; font-size:16px; opacity:.5;}
/* จอเตี้ยมาก: ข้อความแนวตั้งฝั่งขวายาวคงที่ ~570px ถ้าแสดงจะแหว่งทั้งหัวและท้าย -> ซ่อนไปเลย */
@media (max-height: 600px){ .side-right{display:none;} }

/* ===== กัน Chrome autofill ทำช่อง login เป็นสีขาว ให้เข้มเท่าช่อง Password ===== */
#login-container input:-webkit-autofill,
#login-container input:-webkit-autofill:hover,
#login-container input:-webkit-autofill:focus,
#login-container input:-webkit-autofill:active{
    -webkit-text-fill-color:#ffffff;
    caret-color:#ffffff;
    -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,0.10) inset;
    box-shadow:0 0 0 1000px rgba(255,255,255,0.10) inset;
    transition:background-color 9999s ease-in-out 0s;
}

/* ===== หน้า Home (แผงหลักหลัง login) ===== */
#home-view{background:radial-gradient(120% 90% at 50% -10%, rgba(42,26,74,.72) 0%, rgba(23,18,31,.86) 55%, rgba(15,11,22,.93) 100%), url('login-bg.jpg'); background-size:cover; background-position:center;}
.home-nav{display:flex;align-items:center;justify-content:space-between;padding:22px 44px}
.home-brand{font-weight:900;letter-spacing:.18em;font-size:16px;color:#fff;cursor:pointer}
.home-links{display:flex;align-items:center;gap:28px}
.home-links a{color:rgba(255,255,255,.6);font-weight:700;font-size:13px;cursor:pointer;text-decoration:none}
.home-links a:hover{color:#fff}
.home-th{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.home-split{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center;height:calc(100vh - 84px);padding:6px 60px 34px}
.home-brandcol{padding-left:24px}
.home-kick{display:inline-flex;align-items:center;gap:8px;letter-spacing:.04em;font-size:15px;font-weight:700;color:#facc15;margin-bottom:10px}
.home-pin{color:#facc15;display:inline-flex;width:18px;height:18px}
.home-rmutp{font-weight:900;font-size:clamp(70px,8.5vw,118px);line-height:.95;letter-spacing:-.02em;background:linear-gradient(180deg,#ffffff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-sub{color:rgba(255,255,255,.65);font-size:13.5px;margin-top:18px;white-space:nowrap;line-height:1.5}
.home-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:18px;height:52%;align-self:center}
.home-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;text-align:left;padding:22px;border-radius:22px;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);box-shadow:0 16px 40px -20px rgba(0,0,0,.7);transition:transform .15s,background .15s,box-shadow .15s;color:#fff;font-family:inherit}
.home-card:hover{transform:translateY(-4px);background:rgba(124,58,237,.18);box-shadow:0 22px 46px -18px rgba(124,58,237,.55)}
.home-ic{color:#a78bfa;display:inline-flex}
.home-ic svg{width:36px;height:36px}
.home-card:hover .home-ic{color:#c4b5fd}
.home-t{font-weight:800;font-size:16px;line-height:1.25;display:block}
.home-s{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);margin-top:4px;display:block}
.home-txt{margin-top:auto}
.home-card.locked{opacity:.32;cursor:not-allowed;filter:grayscale(.35)}
.home-card.locked:hover{transform:none;background:rgba(255,255,255,.06);box-shadow:0 16px 40px -20px rgba(0,0,0,.7)}
.home-lock{display:none;position:absolute;top:16px;right:16px;color:rgba(255,255,255,.65);width:15px;height:15px}
.home-card.locked .home-lock{display:block}