/* ============================================================
   언더솔루션 채팅 — style.css  [UX 극대화 리디자인]

   ■ 컬러 시스템
     BRAND     : #5c6bf2  (더 따뜻하고 생동감 있는 인디고)
     BRAND-2   : #818cf8  (밝은 라벤더 하이라이트)
     DANGER    : #f04757
     SUCCESS   : #22d17a
     WARN      : #f59e42
     SEND-BTN  : #5c6bf2 → #4553d4 (그라디언트)

   ■ 라이트 모드
     페이지 배경   : 따뜻한 라벤더-그레이 #eceef8
     카드         : 순백 #ffffff
     입력 배경     : #f7f8ff

   ■ 다크 모드
     Discord-style 딥 네이비 계열
     #0d0e1a / #13152a / #1c1f35

   ■ UX 개선 포인트
     - 모든 버튼: 물리 기반 스프링 애니메이션
     - 말풍선: 그라디언트 + 미묘한 elevation 시스템
     - 입력창: focus 시 브랜드 glow ring
     - 이모지 hover: 점프 + 스케일
     - 드롭다운: 마운트 애니메이션
     - 전체 전환: GPU 가속 transform 우선
============================================================ */

/* ══ 디자인 토큰 ══ */
:root {
    /* 브랜드 */
    --brand:        #5c6bf2;
    --brand-d:      #4553d4;
    --brand-dd:     #3541b0;
    --brand-l:      #818cf8;
    --brand-bg:     #eef0fe;
    --brand-bg2:    #e4e7fd;
    --brand-border: #c7cbfa;
    --brand-glow:   rgba(92,107,242,.18);
    --brand-glow2:  rgba(92,107,242,.32);

    /* 시맨틱 */
    --danger:       #f04757;
    --danger-bg:    #fff1f3;
    --danger-d:     #c9273a;
    --success:      #22d17a;
    --success-bg:   #edfbf3;
    --warn:         #f59e42;
    --warn-bg:      #fffbeb;
    --warn-border:  #fcd34d;

    /* ── 서피스 (라이트) ── */
    --bg-page:      #e4e6f3;   /* 최외곽 페이지 배경 */
    --bg-main:      #e4e6f3;   /* 채팅 메시지 영역 — 말풍선과 대비용 */
    --bg-card:      #ffffff;   /* 헤더·입력바·말풍선 = 항상 순백 */
    --bg-input:     #f6f7fe;   /* 입력창 내부 */
    --bg-subtle:    #eceef8;   /* 공지·접속자 바 */
    --bg-faint:     #f5f6fe;
    --bg-toolbar:   #eceef8;
    --bg-emoji:     #eceef8;
    --bg-hover:     #e2e4f5;

    /* ── 보더 ── */
    --border:       #d0d3ee;
    --border-soft:  #dcdff5;
    --border-emoji: #d8dbf2;

    /* 텍스트 */
    --text:         #1a1c3a;
    --text-mid:     #555882;
    --text-muted:   #8f93be;
    --placeholder:  #bfc3e0;

    /* 그림자 */
    --sh-xs:  0 1px 2px rgba(15,16,50,.05);
    --sh-sm:  0 1px 4px rgba(15,16,50,.07), 0 2px 8px rgba(15,16,50,.04);
    --sh-md:  0 4px 16px rgba(15,16,50,.11), 0 1px 3px rgba(15,16,50,.06);
    --sh-lg:  0 8px 32px rgba(15,16,50,.15), 0 2px 8px rgba(15,16,50,.07);
    --sh-brand: 0 4px 20px rgba(92,107,242,.35);
    --sh-hdr: 0 1px 0 var(--border), 0 3px 14px rgba(15,16,50,.07);

    /* 이징 커브 */
    --spring:  cubic-bezier(.34,1.56,.64,1);   /* 스프링 바운스 */
    --smooth:  cubic-bezier(.22,1,.36,1);       /* 스무스 슬라이드 */
    --sharp:   cubic-bezier(.65,0,.35,1);       /* 날카로운 진입 */

    /* 반경 */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;
}

/* ══ 다크 모드 ══ */
.dark {
    --brand-bg:     rgba(92,107,242,.14);
    --brand-bg2:    rgba(92,107,242,.22);
    --brand-border: rgba(92,107,242,.35);
    --brand-glow:   rgba(92,107,242,.25);
    --brand-glow2:  rgba(92,107,242,.45);

    --danger-bg:    rgba(240,71,87,.12);
    --success-bg:   rgba(34,209,122,.1);
    --warn-bg:      rgba(245,158,66,.1);

    --bg-page:      #0b0c1c;
    --bg-main:      #12142a;
    --bg-card:      #1a1d35;
    --bg-input:     #1a1d35;
    --bg-subtle:    #181b32;
    --bg-faint:     #181b32;
    --bg-toolbar:   #181b32;
    --bg-emoji:     #181b32;
    --bg-hover:     #202440;

    --border:       #272b4a;
    --border-soft:  #222545;
    --border-emoji: #222545;

    --text:         #e8eaf8;
    --text-mid:     #a1a8d4;
    --text-muted:   #8f95c4;
    --placeholder:  #7c84b0;

    --sh-xs:  0 1px 2px rgba(0,0,0,.3);
    --sh-sm:  0 1px 4px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22);
    --sh-md:  0 4px 16px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.28);
    --sh-lg:  0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
    --sh-brand: 0 4px 20px rgba(92,107,242,.45);
    --sh-hdr: 0 1px 0 var(--border), 0 3px 14px rgba(0,0,0,.3);
}

/* ══ 다크모드 전환 ══ */
.cc, .wrap, .cc *, .wrap * {
    transition:
        background-color .22s var(--smooth),
        border-color .22s var(--smooth),
        color .15s ease,
        box-shadow .22s var(--smooth);
}

/* ══ 리셋 & 기본 ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    width: 100%; height: 100%;
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body { display: flex; align-items: center; justify-content: center; padding: 0; }
body.gu-chat-page { overflow: hidden; padding: 0; margin: 0; }

/* 스크롤바 전역 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--brand-border); }


/* ══════════════════════════════════════════════════════════════
   채팅 목록 래퍼  (chat_list.php)
══════════════════════════════════════════════════════════════ */
.gu-chat-outer {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    border-radius: 14px; overflow: hidden;
    -webkit-clip-path: inset(0 round 14px);
    clip-path: inset(0 round 14px);
    contain: layout paint; z-index: 0;
}
.gu-chat-outer::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 14px; pointer-events: none; z-index: -1;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 12px 48px rgba(0,0,0,.22),
        0 4px 14px rgba(0,0,0,.10);
}
.dark .gu-chat-outer::after {
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 12px 48px rgba(0,0,0,.45),
        0 4px 14px rgba(0,0,0,.2);
}
.cc {
    display: flex; flex-direction: column;
    width: 100%; height: 100%; min-height: 0;
    position: relative;
    background: var(--bg-main); overflow: hidden;
}


/* ══ 헤더 (목록) ══ */
.hdr-list {
    background: var(--bg-card);
    padding: 11px 14px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-hdr);
    z-index: 200; position: relative;
}
.hdr-ico {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
    box-shadow: 0 2px 10px var(--brand-glow2);
    transition: transform .2s var(--spring), box-shadow .2s !important;
}
.hdr-ico:hover { transform: scale(1.08) rotate(-4deg); box-shadow: 0 4px 16px var(--brand-glow2); }
.hdr-txt { flex: 1; min-width: 0; }
.hdr-txt h2 {
    font-size: 14px; font-weight: 800; color: var(--text);
    line-height: 1.2; letter-spacing: -.025em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-txt p { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.btn-hdr {
    background: none; border: none; cursor: pointer;
    padding: 7px; border-radius: var(--r-sm);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, transform .18s var(--spring) !important;
}
.btn-hdr:hover { background: var(--bg-hover); color: var(--text); transform: scale(1.1); }
.btn-hdr:active { transform: scale(.93); }

.btn-dark {
    background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: var(--r-sm);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
    transition: background .15s, transform .22s var(--spring) !important;
}
.btn-dark:hover { background: var(--bg-hover); transform: rotate(22deg) scale(1.15); }
.btn-dark:active { transform: rotate(22deg) scale(.95); }


/* ══ 드롭다운 메뉴 ══ */
.drop {
    display: none;
    position: absolute; top: 56px; right: 10px;
    background: var(--bg-card);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    border: 1px solid var(--border);
    width: 190px; overflow: hidden; z-index: 500;
    animation: dropIn .2s var(--smooth) both;
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-10px) scale(.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.di {
    width: 100%; padding: 11px 15px;
    border: none; background: none;
    text-align: left; font-size: 13px; font-weight: 500;
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; gap: 9px;
    transition: background .12s, padding-left .18s var(--smooth) !important;
}
.di:hover { background: var(--bg-hover); padding-left: 20px; }
.di:active { background: var(--brand-bg); }
.di.danger { color: var(--danger); }
.di.danger:hover { background: var(--danger-bg); padding-left: 20px; }
.dsep { height: 1px; background: var(--border); margin: 3px 0; }
.spill {
    margin-left: auto; font-size: 10px; font-weight: 800;
    padding: 2px 8px; border-radius: var(--r-pill);
    background: var(--success-bg); color: #0d7a47;
    letter-spacing: .02em;
    transition: none !important;
}
.spill.off { background: var(--danger-bg); color: #b81b2c; }
.dark .spill { color: #34d399; }
.dark .spill.off { color: #f87171; }


/* ══ 공지 관리 레이어 ══ */
.nl {
    display: none;
    background: var(--bg-card);
    border: 1.5px solid var(--danger);
    border-radius: var(--r-lg);
    padding: 14px; z-index: 600;
    box-shadow: var(--sh-md), 0 0 0 4px rgba(240,71,87,.07);
    margin: 6px 10px; flex-shrink: 0;
    animation: dropIn .18s var(--smooth) both;
}
.nl-title { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: -.01em; }
.nl-list { max-height: 100px; overflow-y: auto; margin-bottom: 10px; }
.nl-row {
    display: flex; align-items: center;
    background: var(--bg-faint); padding: 7px 10px;
    margin-bottom: 5px; border-radius: var(--r-sm);
    font-size: 12px; border: 1px solid var(--border);
    transition: border-color .15s !important;
}
.nl-row:hover { border-color: var(--danger); }
.nl-row span { flex: 1; color: var(--text); }
.btn-dn {
    background: var(--danger); color: #fff;
    border: none; padding: 3px 9px;
    border-radius: 6px; cursor: pointer;
    font-size: 11px; font-weight: 800;
    transition: opacity .15s, transform .15s var(--spring) !important;
}
.btn-dn:hover { opacity: .88; transform: scale(.96); }
.nl textarea {
    width: 100%; height: 52px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm); padding: 9px 12px;
    font-size: 12px; resize: none; outline: none;
    background: var(--bg-faint); color: var(--text);
    transition: border-color .2s, box-shadow .2s !important;
}
.nl textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.nl-btns { display: flex; justify-content: flex-end; gap: 6px; }
.nl-btns button { border-radius: 7px; padding: 5px 14px; font-size: 12px; cursor: pointer; border: none; transition: background .15s, color .15s; }
.nl-btns button:first-child { background: var(--danger); color: #fff; }
.nl-btns button:last-child { background: #f1f5f9; color: var(--text); }
.dark .nl-btns button:last-child { background: var(--bg-hover); color: var(--text); }
.ban-hdr .btn-close-panel { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--text-muted); padding: 2px 6px; line-height: 1; }


/* ══ 차단 패널 ══ */
.ban-panel {
    display: none; background: var(--bg-card);
    border-radius: var(--r-lg); box-shadow: var(--sh-md);
    border: 1px solid var(--border); z-index: 600;
    max-height: 280px; flex-direction: column;
    margin: 6px 10px; flex-shrink: 0;
}
.ban-hdr {
    padding: 12px 15px; border-bottom: 1px solid var(--border);
    font-size: 13px; font-weight: 800; color: var(--text);
    background: var(--bg-subtle);
    display: flex; align-items: center; justify-content: space-between;
    letter-spacing: -.02em;
}
.ban-body { overflow-y: auto; flex: 1; padding: 8px; }
.ban-item {
    display: flex; align-items: center;
    padding: 8px 10px; border-radius: var(--r-md);
    border: 1px solid var(--border); margin-bottom: 6px;
    background: var(--bg-faint); font-size: 12px; gap: 8px;
    transition: border-color .15s, box-shadow .15s !important;
}
.ban-item:hover { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(240,71,87,.06); }
.ban-info { flex: 1; }
.ban-nick { font-weight: 700; color: var(--text); }
.ban-id  { color: var(--text-muted); font-size: 11px; }
.ban-date { color: var(--text-muted); font-size: 11px; margin-top: 1px; }
.btn-unban {
    background: #e0f2fe; color: #0369a1;
    border: none; padding: 4px 10px;
    border-radius: var(--r-sm); font-size: 11px; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, transform .15s var(--spring) !important;
}
.btn-unban:hover { background: #0369a1; color: #fff; transform: scale(.97); }
.dark .btn-unban { background: rgba(6,182,212,.2); color: #22d3ee; }
.dark .btn-unban:hover { background: #0891b2; color: #fff; }


/* ══ 방 목록 + 공지 통합 영역 ══ */
.la { background: var(--bg-card); margin-right: 1px; border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.lt-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 12px 5px 14px;
    background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.lt-label { font-size: 11px; font-weight: 800; color: var(--text-mid); letter-spacing: .05em; text-transform: uppercase; }
.btn-room-toggle {
    background: none; border: 1px solid var(--border);
    border-radius: var(--r-xs); padding: 2px 9px;
    font-size: 10px !important; font-weight: 800; color: var(--brand); cursor: pointer;
    transition: all .18s var(--smooth) !important;
    letter-spacing: .01em;
}
.btn-room-toggle:hover {
    background: var(--brand-bg); border-color: var(--brand-border);
    transform: translateY(-1px); box-shadow: 0 2px 8px var(--brand-glow);
}
.btn-room-toggle:active { transform: scale(.96); }


/* ── 공지 바 ── */
.nbar-item {
    background: linear-gradient(135deg, #e8e9ff, #eef0fe);
    color: #3730a3; padding: 9px 14px;
    font-size: 12px; line-height: 1.6;
    border-top: 2px solid var(--brand);
    border-bottom: 1px solid #c7cbfa;
    display: flex; align-items: flex-start; gap: 9px;
    box-shadow: 0 2px 8px rgba(92,107,242,.08);
}
.dark .nbar-item {
    background: linear-gradient(135deg, #1a1c40, #1e2050);
    color: #a5b4fc; border-top-color: #5c6bf2; border-bottom-color: #2a2d55;
}
.nbar-item .nc { flex: 1; word-break: break-all; }
.btn-notice-close {
    background: rgba(92,107,242,.12); border: none; cursor: pointer;
    font-size: 11px !important; font-weight: 800; color: var(--brand);
    padding: 3px 9px; border-radius: var(--r-xs); flex-shrink: 0; white-space: nowrap;
    transition: background .15s, color .15s !important;
}
.btn-notice-close:hover { background: var(--brand); color: #fff; }
.dark .btn-notice-close { background: rgba(165,180,252,.15); color: #a5b4fc; }
.n-more-btn { color: var(--brand); font-weight: 800; cursor: pointer; margin-left: 3px; text-decoration: underline; }


/* ══ 방 카드 슬라이더 ══ */
.room-slider-wrap { position: relative; display: flex; align-items: center; }
.room-scroll-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 6px 10px; scrollbar-width: none; flex: 1;
}
.room-scroll-wrap::-webkit-scrollbar { display: none; }
.room-cards { display: flex; gap: 6px; width: max-content; }

.slider-btn {
    display: none; flex-shrink: 0;
    width: 22px; min-height: 84px; height: 100%;
    border: none; background: var(--bg-toolbar); color: var(--brand);
    font-size: 16px; font-weight: 700; cursor: pointer;
    align-items: center; justify-content: center; padding: 0;
    transition: background .15s !important;
}
.slider-btn:hover { background: var(--brand-bg); }
.slider-btn-l { border-right: 1px solid var(--border); }
.slider-btn-r { border-left:  1px solid var(--border); }
@media (pointer: fine) {
    .slider-btn { display: flex; }
    .room-scroll-wrap { padding: 7px 4px 9px; }
}

.room-card {
    width: 74px; flex-shrink: 0;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 7px 6px 6px;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer;
    box-shadow: var(--sh-xs);
    transition: border-color .2s var(--smooth), box-shadow .2s, transform .2s var(--spring) !important;
    position: relative; overflow: hidden;
}
/* 하이라이트 shimmer */
.room-card::before {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition: left .45s var(--smooth);
    pointer-events: none;
}
.dark .room-card::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.room-card:hover::before { left: 160%; }
.room-card:hover {
    border-color: var(--brand); transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--brand-glow), var(--sh-sm);
}
.room-card:active { transform: translateY(0) scale(.96); }

.rc-top { position: relative; margin-bottom: 4px; }
.rc-icon { font-size: 18px; line-height: 1; }
.rc-badge {
    position: absolute; top: -5px; right: -8px;
    background: var(--danger); color: #fff;
    font-size: 8px; font-weight: 800;
    padding: 2px 5px; border-radius: var(--r-pill);
    min-width: 15px; text-align: center;
    border: 2px solid var(--bg-card);
    box-shadow: 0 1px 5px rgba(240,71,87,.4);
    animation: badgePop .3s var(--spring) both;
}
@keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }
.rc-name {
    font-size: 11px; font-weight: 800; color: var(--text);
    text-align: center; width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 1px; letter-spacing: -.02em;
}
.rc-sub { font-size: 9px; color: var(--text-muted); margin-bottom: 5px; text-align: center; }
.rc-btns { display: flex; gap: 3px; width: 100%; }
.rc-btns button {
    flex: 1; padding: 3px 0;
    font-size: 9px; border-radius: 5px;
    text-align: center; border: none; cursor: pointer;
    font-weight: 700;
    transition: all .15s var(--spring) !important;
}
.btn-lv  { background: var(--bg-toolbar); color: var(--text-muted); }
.btn-lv:hover  { background: var(--danger-bg); color: var(--danger); transform: scale(1.04); }
.btn-acc { background: var(--brand); color: #fff; box-shadow: 0 2px 6px var(--brand-glow2); }
.btn-acc:hover { background: var(--brand-d); transform: scale(1.05); box-shadow: 0 3px 10px var(--brand-glow2); }
.btn-rej { background: var(--border); color: var(--text-mid); }
.btn-rej:hover { background: #c5cce0; }
.dark .btn-rej:hover { background: var(--bg-hover); color: var(--text-muted); }
.room-empty { padding: 8px 4px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.invite-card { border-color: #bfdbfe; background: #f0f7ff; }
.dark .invite-card { border-color: #1e3a5f; background: #0f2440; }
.invite-card .rc-name { color: #1e40af; }
.dark .invite-card .rc-name { color: #93c5fd; }
#inv_area { border-bottom: 1px solid var(--border); display: none; }
/* 초대받은 방 영역 라벨 (다크모드 대응) */
.inv-lt-row { background: #f0f7ff; border-bottom: 1px solid #bfdbfe; }
.inv-lt-row .lt-label { color: #1e40af; }
.dark .inv-lt-row { background: var(--bg-faint); border-bottom-color: var(--border); }
.dark .inv-lt-row .lt-label { color: var(--brand-l); }


/* ══ 접속자 바 ══ */
.ob {
    background: var(--bg-subtle);
    padding: 7px 14px;
    margin-right: 1px;
    border-left:1px solid var(--border); 
    border-right:1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 12px; flex-shrink: 0; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    user-select: none;
    transition: background .15s !important;
    position: relative;
}
.ob:hover { background: var(--bg-hover); }
.odot {
    width: 7px; height: 7px;
    background: var(--success); border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(34,209,122,.22);
    animation: onlinePulse 2.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes onlinePulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(34,209,122,.22); }
    50%      { box-shadow: 0 0 0 5px rgba(34,209,122,.07); }
}
.ob-muted, .ob-arrow { color: var(--text-muted); }
.ob-arrow { margin-left: auto; }
.ocnt { color: var(--success); font-weight: 800; }

#olist {
    display: none; position: absolute; right: 10px;
    background: var(--bg-card); border: 1px solid var(--border);
    width: 165px; z-index: 300;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    max-height: 260px; overflow-y: auto;
    animation: dropIn .18s var(--smooth) both;
}
.oui {
    padding: 8px 12px; font-size: 12px; cursor: pointer;
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; gap: 6px;
    color: var(--text);
    transition: background .12s, padding-left .16s var(--smooth) !important;
}
.oui:hover { background: var(--bg-hover); padding-left: 16px; }


/* ══ 연결 끊김 배너 ══ */
.conn-banner {
    position: fixed; top: 0; left: 0; right: 0;
    background: linear-gradient(135deg, var(--danger), var(--danger-d));
    color: #fff; text-align: center;
    font-size: 12px; font-weight: 800;
    padding: 8px; z-index: 9999;
    box-shadow: 0 2px 14px rgba(240,71,87,.4);
    letter-spacing: .02em;
    animation: slideDown .22s var(--smooth) both;
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }


/* ══ 비회원 닉네임 팝업 ══ */
.nick-modal { display: none; }
.nick-modal.show, #nick_modal { display: flex; align-items: center; justify-content: center; }
#nick_modal {
    display: none; position: fixed; inset: 0;
    background: rgba(8,9,25,.65);
    backdrop-filter: blur(8px) saturate(1.3);
    z-index: 99999;
    animation: fadeIn .22s var(--smooth) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.nick-box {
    background: var(--bg-card); border-radius: var(--r-xl);
    padding: 30px 26px; width: calc(100% - 40px); max-width: 320px;
    box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,.07);
    text-align: center;
    animation: popIn .28s var(--spring) both;
}
@keyframes popIn {
    from { opacity: 0; transform: scale(.88) translateY(14px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}
.nick-title { font-size: 17px; font-weight: 900; color: var(--text); margin-bottom: 6px; letter-spacing: -.035em; }
.nick-desc  { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.65; }
.nick-inp {
    width: 100%; padding: 11px 15px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md); font-size: 14px; font-weight: 500;
    outline: none; background: var(--bg-input); color: var(--text);
    margin-bottom: 12px;
    transition: border-color .2s, box-shadow .2s !important;
}
.nick-inp:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow), 0 2px 10px var(--brand-glow);
}
.nick-btn {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    color: #fff; border: none; border-radius: var(--r-md);
    font-size: 14px; font-weight: 800; cursor: pointer;
    letter-spacing: -.02em;
    box-shadow: var(--sh-brand);
    transition: opacity .15s, transform .18s var(--spring), box-shadow .18s !important;
}
.nick-btn:hover {
    opacity: .92; transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--brand-glow2);
}
.nick-btn:active { transform: scale(.97); }


/* ══════════════════════════════════════════════════════════════
   메시지 영역  (공통 .ma / .ca)
══════════════════════════════════════════════════════════════ */
.ma, .ca {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 14px 12px;
    margin-right: 1px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    background-color: #F6F7FE;
    background-image: radial-gradient(circle, rgba(92,107,242,.05) 1px, transparent 1px);
    background-size: 26px 26px;
}
.dark .ma, .dark .ca {
    background-image: radial-gradient(circle, rgba(92,107,242,.08) 1px, transparent 1px);
}

/* 말풍선 행 */
.cr, .mr {
    display: flex; flex-direction: column;
    margin-bottom: 8px;
    animation: msgIn .18s var(--smooth) both;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cr.other, .mr.other { align-self: flex-start; }
.cr.me,    .mr.me    { align-self: flex-end; align-items: flex-end; }

/* 닉네임 행 */
.nw {
    display: flex; align-items: center;
    gap: 4px; margin-bottom: 3px; cursor: pointer;
    transition: opacity .15s !important;
}
.nw:hover { opacity: .78; }
.ni { width: 14px; height: 14px; object-fit: contain; }
.nt { font-size: 11px; font-weight: 700; line-height: 1.2; display: inline-block; }
/* 다크모드: 닉네임은 라벤더, 말풍선 내용은 밝은 흰색으로 구분 */
.dark .nt {
    color: #a5b4fc !important;
    font-weight: 800;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.dark .me .nt { color: #c4b5fd !important; }

/* 말풍선 + 시간 래퍼 */
.bw { display: flex; align-items: flex-end; gap: 5px; }
.me .bw { flex-direction: row-reverse; }

/* 말풍선 */
.cb {
    max-width: 230px; padding: 9px 13px;
    border-radius: var(--r-lg);
    font-size: 13px; line-height: 1.6; word-break: break-all;
    transition: box-shadow .18s !important;
}
.other .cb {
    background: var(--bg-card);
    border-top-left-radius: 4px;
    color: var(--text);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
}
.other .cb:hover { box-shadow: var(--sh-md); }

.me .cb {
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    border-top-right-radius: 4px;
    color: #fff;
    box-shadow: var(--sh-brand);
}
.me .cb:hover { box-shadow: 0 5px 24px var(--brand-glow2); }

/* 이미지 */
.chat-img {
    max-width: 170px; height: auto;
    border-radius: var(--r-md); display: block; margin-top: 4px;
    cursor: zoom-in; box-shadow: var(--sh-sm);
    transition: transform .22s var(--spring), box-shadow .22s !important;
}
.chat-img:hover { transform: scale(1.03); box-shadow: var(--sh-md); }

/* 시간 / 삭제 */
.ct { font-size: 10px; color: var(--text-muted); flex-shrink: 0; margin-bottom: 2px; }
.dark .ct { color: var(--text-mid); font-weight: 600; }
/* 빈 상태/안내 문구 다크모드 가독성 */
.gu-muted { color: #94a3b8; }
.dark .gu-muted { color: var(--text-mid) !important; }
.btn-del {
    font-size: 10px; color: var(--danger); cursor: pointer;
    margin-left: 4px; opacity: 0; text-decoration: underline;
    transition: opacity .15s !important;
}
.cr:hover .btn-del, .mr:hover .btn-del { opacity: 1; }

/* 멘션, 삭제, 더보기 */
.mention { color: #e83b68; background: rgba(232,59,104,.1); padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.dark .mention { background: rgba(232,59,104,.16); color: #fb7185; }
.del-msg { color: var(--text-muted); font-size: 11px; font-style: italic; }
.mmc { display: none; }
.bmm { color: var(--brand); font-size: 11px; cursor: pointer; margin-top: 3px; font-weight: 700; }
.read-tick { font-size: 9px; color: var(--text-muted); margin-bottom: 2px; line-height: 1; }
.read-tick.read { color: var(--success); }


/* ══ 이미지 오버레이 ══ */
#iovl {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.94);
    backdrop-filter: blur(14px) saturate(1.4);
    z-index: 999999; cursor: zoom-out;
    align-items: center; justify-content: center;
    animation: fadeIn .2s both;
}
#iovl img {
    max-width: 95%; max-height: 95%; object-fit: contain;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    animation: popIn .28s var(--spring) both;
}
.icl {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.14); color: #fff; border: none;
    border-radius: 50%; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .15s, transform .18s var(--spring) !important;
}
.icl:hover { background: rgba(255,255,255,.28); transform: scale(1.12) rotate(90deg); }


/* ══ 유저 컨텍스트 메뉴 ══ */
#uctx {
    display: none; position: fixed;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    overflow: hidden; z-index: 9999; min-width: 130px;
    animation: dropIn .15s var(--smooth) both;
}
.ci {
    padding: 10px 16px; font-size: 13px; cursor: pointer;
    color: var(--text);
    transition: background .12s, padding-left .16s var(--smooth) !important;
}
.ci:hover { background: var(--bg-hover); padding-left: 20px; }
.ci.danger { color: var(--danger); font-weight: 700; }
.ci.danger:hover { background: var(--danger-bg); }


/* ══════════════════════════════════════════════════════════════
   채팅 뷰 헤더  (chat_view.php / group_view.php)
══════════════════════════════════════════════════════════════ */
.wrap { display: flex; flex-direction: column; height: 100vh; }

.hdr-chat {
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    color: #fff; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; position: relative;
    box-shadow: 0 2px 18px var(--brand-glow2);
}
.hdr-chat::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 85% 50%, rgba(255,255,255,.09) 0%, transparent 55%),
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.012) 3px, rgba(255,255,255,.012) 4px);
    pointer-events: none;
}
.hdr-av {
    width: 34px; height: 34px;
    background: rgba(255,255,255,.2);
    border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.hdr-info { flex: 1; }
.hdr-info h2 { font-size: 14px; font-weight: 800; letter-spacing: -.025em; }
.hdr-info p  { font-size: 11px; opacity: .72; margin-top: 1px; }

.btn-close {
    background: rgba(255,255,255,.16); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .2s var(--spring) !important;
}
.btn-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg) scale(1.08); }

.btn-hdr-w {
    background: rgba(255,255,255,.16); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: var(--r-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .18s var(--spring) !important;
}
.btn-hdr-w:hover { background: rgba(255,255,255,.28); transform: scale(1.1); }
.btn-hdr-w:active { transform: scale(.93); }


/* ══ 그룹방 멤버 패널 ══ */
.member-panel {
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    flex-shrink: 0; max-height: 200px; overflow: hidden;
}
.mp-hdr {
    padding: 10px 14px; font-size: 12px; font-weight: 800; color: var(--text);
    border-bottom: 1px solid var(--border); background: var(--bg-subtle);
    letter-spacing: .03em; text-transform: uppercase;
}
.mp-body { overflow-y: auto; max-height: 150px; padding: 6px 10px; }
.mp-row {
    display: flex; align-items: center;
    padding: 7px 8px; border-radius: var(--r-md);
    gap: 8px; font-size: 12px; color: var(--text);
    transition: background .12s !important;
}
.mp-row:hover { background: var(--bg-hover); }
.mp-nick { flex: 1; font-weight: 600; }
.mp-badge {
    background: var(--brand); color: #fff;
    font-size: 9px; padding: 2px 7px;
    border-radius: var(--r-pill); font-weight: 800;
}
.mp-kick {
    background: var(--danger-bg); color: var(--danger);
    border: none; padding: 4px 10px;
    border-radius: var(--r-sm); font-size: 10px; font-weight: 800; cursor: pointer;
    transition: all .15s var(--spring) !important;
}
.mp-kick:hover { background: var(--danger); color: #fff; transform: scale(.97); }


/* ══════════════════════════════════════════════════════════════
   메시지 입력 영역  .iw
══════════════════════════════════════════════════════════════ */
.iw {
    background: var(--bg-card); border-top: 1px solid var(--border);
    flex-shrink: 0; border-radius: 0 0 10px 10px; overflow: hidden;
}
.iw.dov {
    background: linear-gradient(135deg, #f0f4ff, var(--brand-bg));
    border-top: 2px dashed var(--brand);
}
.dark .iw.dov {
    background: linear-gradient(135deg, #1a1d35, var(--brand-bg));
    border-top-color: var(--brand-l);
}


/* ── 툴바 ── */
.itb { display: flex; align-items: center; gap: 0; padding: 8px 12px 4px; }
.btn-tb {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--bg-toolbar); border: 1px solid var(--border);
    padding: 8px 0; border-radius: 0;
    cursor: pointer; color: var(--text-mid);
    font-size: 12px; font-weight: 700;
    transition: all .18s var(--smooth) !important;
}
.btn-tb:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: none; }
.btn-tb:last-of-type { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.btn-tb:hover {
    background: var(--brand-bg); border-color: var(--brand-border);
    color: var(--brand); transform: translateY(-1px);
    box-shadow: 0 3px 10px var(--brand-glow); z-index: 1;
}
.btn-tb:active { transform: scale(.96); }
.btn-tb svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.btn-tb span { line-height: 1; }


/* ── 입력 행 ── */
.if { display: flex; gap: 8px; align-items: center; padding: 4px 12px 10px; }

.ii {
    flex: 1; background: var(--bg-input);
    border-radius: var(--r-md); padding: 0 14px;
    border: 1.5px solid var(--border); height: 42px;
    display: flex; align-items: center;
    box-shadow: var(--sh-xs);
    transition: border-color .2s, box-shadow .2s, transform .18s var(--smooth) !important;
}
.ii:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-glow), var(--sh-sm);
    transform: translateY(-1px);
    background: #fff;
}
.dark .ii:focus-within { background: var(--bg-card); }
.ii input {
    width: 100%; border: none; background: transparent;
    outline: none; font-size: 14px; font-weight: 500; color: var(--text);
    transition: none !important;
}
.ii input::placeholder { color: var(--placeholder); }
.btn-fl { display: none; }

.btn-sd {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    border: none; border-radius: var(--r-md);
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sh-brand);
    transition: transform .2s var(--spring), box-shadow .2s, background .15s !important;
}
.btn-sd:hover {
    background: linear-gradient(135deg, var(--brand-d), var(--brand-dd));
    box-shadow: 0 5px 22px var(--brand-glow2);
    transform: translateY(-2px) scale(1.06);
}
.btn-sd:active  { transform: scale(.93); }
.btn-sd:disabled {
    background: var(--border); box-shadow: none;
    cursor: not-allowed; opacity: .5;
    transform: none !important;
}
#cfile, #pfile, #gfile { display: none; }

/* 글자수 카운터 */
.char-cnt { font-size: 10px; color: var(--text-muted); text-align: right; padding: 0 2px; margin-left: auto; font-variant-numeric: tabular-nums; }
.char-cnt.warn { color: var(--warn); font-weight: 700; }
.char-cnt.over { color: var(--danger); font-weight: 800; animation: shake .28s var(--sharp); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }


/* ── 이모지 피커 ── */
.emoji-bar {
    display: none;
    padding: 7px 12px 9px;
    background: var(--bg-emoji); border-top: 1px solid var(--border-emoji);
    flex-wrap: wrap; gap: 2px;
}
.emoji-bar.open { display: flex; animation: slideUp .18s var(--smooth) both; }
@keyframes slideUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.emoji-btn {
    font-size: 20px; cursor: pointer; padding: 4px 5px;
    border-radius: var(--r-sm); line-height: 1;
    transition: background .12s, transform .18s var(--spring) !important;
}
.emoji-btn:hover { background: var(--brand-bg); transform: scale(1.28) translateY(-3px); }
.emoji-btn:active { transform: scale(1.1); }


/* ══════════════════════════════════════════════════════════════
   다크 모드 세부 오버라이드
══════════════════════════════════════════════════════════════ */
body.dark { background: #07081a !important; }
body.dark .wrap         { background: var(--bg-main); }
body.dark .iw           { background: var(--bg-card); border-top-color: var(--border); }
body.dark .ca           { background: var(--bg-main); }
body.dark .ma           { background: var(--bg-main); }
body.dark .other .cb,
.dark .other .cb        { background: var(--bg-card); border-color: var(--border); }
.dark .other .cb        { color: #f1f5f9 !important; }
body.dark .emoji-bar    { background: var(--bg-emoji); border-top-color: var(--border); }
body.dark .ii           { background: var(--bg-input); border-color: var(--border); }
body.dark .ii input     { color: var(--text); }
body.dark .btn-tb       { background: var(--bg-toolbar); border-color: var(--border); color: var(--text-mid); }
body.dark .hdr-chat     { background: linear-gradient(135deg, #3f4abf, #3138a0); }

/* 다크모드 hover */
.dark .btn-hdr:hover,
.dark .btn-dark:hover    { background: var(--bg-hover); }
.dark .di:hover          { background: var(--bg-hover); }
.dark .btn-room-toggle:hover { background: var(--brand-bg); border-color: var(--brand-border); }
.dark .slider-btn:hover  { background: var(--bg-hover); }
.dark .btn-tb:hover      { background: var(--brand-bg); border-color: var(--brand-border); color: var(--brand-l); }
.dark .emoji-btn:hover   { background: var(--brand-bg); }
.dark .ob:hover          { background: var(--bg-hover); }
.dark .oui:hover         { background: var(--bg-hover); }
.dark .ci:hover          { background: var(--bg-hover); }
.dark .mp-row:hover      { background: var(--bg-hover); }
.dark .room-card:hover   { border-color: var(--brand); box-shadow: 0 4px 22px var(--brand-glow); }


/* ══════════════════════════════════════════════════════════════
   그룹방 생성  (group_create.php)
══════════════════════════════════════════════════════════════ */
body.gc-page { overflow: auto; }
.gc-wrap {
    max-width: 460px; margin: 20px auto;
    background: var(--bg-card); border-radius: var(--r-xl);
    box-shadow: var(--sh-lg); overflow: hidden;
    border: 1px solid var(--border);
}
.gc-hdr {
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    color: #fff; padding: 22px 22px 20px; text-align: center;
    position: relative;
}
.gc-hdr::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,.1) 0%, transparent 60%);
    pointer-events: none;
}
.gc-hdr h3 { font-size: 17px; font-weight: 900; margin-bottom: 3px; letter-spacing: -.03em; }
.gc-hdr p  { font-size: 12px; opacity: .72; }
.gc-body   { padding: 24px; }
.fg        { margin-bottom: 20px; }

.lbl {
    display: block; font-size: 12px; font-weight: 800;
    color: var(--text-mid); margin-bottom: 7px;
    letter-spacing: .05em; text-transform: uppercase;
}
.lbl span { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 5px; text-transform: none; letter-spacing: 0; }

.inp {
    width: 100%; padding: 10px 14px;
    border: 1.5px solid var(--border); border-radius: var(--r-md);
    font-size: 13px; font-weight: 500;
    background: var(--bg-faint); color: var(--text); outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.inp:focus {
    border-color: var(--brand); background: var(--bg-input);
    box-shadow: 0 0 0 3px var(--brand-glow);
}
.sbox { display: flex; gap: 8px; position: relative; }
.sbox .inp { flex: 1; }
.btn-s {
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    color: #fff; border: none; padding: 0 16px;
    border-radius: var(--r-md); font-size: 13px; font-weight: 800;
    cursor: pointer; white-space: nowrap; height: 40px;
    box-shadow: var(--sh-brand);
    transition: opacity .15s, transform .18s var(--spring), box-shadow .18s !important;
}
.btn-s:hover  { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px var(--brand-glow2); }
.btn-s:active { transform: scale(.96); }

.sres {
    position: absolute; top: 47px; left: 0; right: 0;
    background: var(--bg-card); max-height: 200px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--r-lg);
    display: none; z-index: 100; box-shadow: var(--sh-lg);
    animation: dropIn .15s var(--smooth) both;
}
.ui {
    display: flex; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
    cursor: pointer; gap: 10px;
    transition: background .12s, padding-left .16s var(--smooth) !important;
}
.ui:hover { background: var(--bg-hover); padding-left: 18px; }
.uav {
    width: 32px; height: 32px; border-radius: var(--r-md);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.unick { font-size: 13px; font-weight: 700; color: var(--text); }
.uid   { font-size: 11px; color: var(--text-muted); }
.uplus { margin-left: auto; font-size: 20px; color: var(--brand); font-weight: 700; line-height: 1; }

.sel {
    min-height: 60px; border: 2px dashed var(--border);
    border-radius: var(--r-md); padding: 10px;
    background: var(--bg-faint);
    display: flex; flex-wrap: wrap; gap: 7px;
    transition: border-color .2s, background .2s !important;
}
.sel:has(.tag) { border-color: var(--brand-border); background: var(--brand-bg); }
.empty { width: 100%; text-align: center; color: var(--text-muted); font-size: 12px; padding: 10px 0; }

.tag {
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    color: #fff; padding: 5px 10px 5px 13px;
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 7px;
    box-shadow: 0 2px 8px var(--brand-glow2);
    animation: tagIn .2s var(--spring) both;
}
@keyframes tagIn { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
.tag-x { cursor: pointer; opacity: .72; font-size: 14px; line-height: 1; transition: opacity .12s !important; }
.tag-x:hover { opacity: 1; }

.btn-create {
    width: 100%; padding: 15px;
    background: linear-gradient(135deg, var(--brand), var(--brand-d));
    color: #fff; border: none; font-size: 15px; font-weight: 900; cursor: pointer;
    letter-spacing: -.025em;
    transition: opacity .15s, box-shadow .18s !important;
}
.btn-create:hover { opacity: .9; box-shadow: 0 -4px 20px var(--brand-glow2) inset; }
.btn-create:active { opacity: .85; }