/* ═══════════════════════════════════════════════════════════════════
   MENU OS THEMES — Atari ST · Windows XP · Windows 11 · macOS · Linux · Retro DOS
   + Separator Styles (12 effects)
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── SEPARADORES ───────── */
.ck-menu-separator {
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 0;
    border: none;
    pointer-events: none;
    flex-shrink: 0;
}

.ck-sep-solid    { height: 1px; background: rgba(255,255,255,0.15); }
.ck-sep-dotted   { height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 3px, transparent 3px 7px); }
.ck-sep-dashed   { height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 8px, transparent 8px 14px); }
.ck-sep-double   { height: 4px; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); background: transparent; }
.ck-sep-gradient { height: 1px; background: linear-gradient(90deg, transparent, rgba(102,126,234,0.6), transparent); }
.ck-sep-glow     { height: 1px; background: rgba(102,126,234,0.5); box-shadow: 0 0 6px rgba(102,126,234,0.6), 0 0 12px rgba(102,126,234,0.3); }
.ck-sep-zigzag   { height: 6px; background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,0.12) 4px 5px, transparent 5px 9px); }
.ck-sep-wave     { height: 8px; background: url("data:image/svg+xml,%3Csvg width='40' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4 T30 4 T40 4' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1'/%3E%3C/svg%3E") repeat-x center; }
.ck-sep-rainbow  { height: 2px; background: linear-gradient(90deg, #ff6b6b, #ffa502, #ffd93d, #6bcb77, #4d96ff, #9b59b6, #ff6b6b); background-size: 200% 100%; animation: ck-sep-rainbow-slide 4s linear infinite; }
.ck-sep-fade     { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, transparent 100%); }
.ck-sep-emboss   { height: 2px; border-top: 1px solid rgba(0,0,0,0.4); border-bottom: 1px solid rgba(255,255,255,0.08); }
.ck-sep-neon     { height: 1px; background: #0ff; box-shadow: 0 0 4px #0ff, 0 0 8px #0ff, 0 0 16px rgba(0,255,255,0.3); }

@keyframes ck-sep-rainbow-slide { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* Separadores dentro de dropdowns */
.ck-dd-panel .ck-menu-separator,
.dropdown-menu .ck-menu-separator,
.ck-os-dropdown .ck-menu-separator { margin: 2px 8px; width: calc(100% - 16px); }


/* ══════════════════════════════════════════════════════════════
   OS THEME: ATARI ST (GEM Desktop — 1985)
   ══════════════════════════════════════════════════════════════ */
.ck-os-theme-atari-st .ck-os-menubar {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 0;
    display: flex;
    font-family: "Courier New", monospace;
    font-size: 13px;
    color: #000;
    height: 22px;
    align-items: stretch;
}
.ck-os-theme-atari-st .ck-os-menubar-item {
    padding: 2px 12px;
    cursor: pointer;
    line-height: 18px;
    white-space: nowrap;
}
.ck-os-theme-atari-st .ck-os-menubar-item:hover,
.ck-os-theme-atari-st .ck-os-menubar-item.active {
    background: #000;
    color: #fff;
}
.ck-os-theme-atari-st .ck-os-dropdown {
    background: #fff;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    min-width: 180px;
    padding: 2px 0;
    font-family: "Courier New", monospace;
    font-size: 13px;
}
.ck-os-theme-atari-st .ck-os-dropdown .ck-os-dd-item {
    padding: 2px 16px;
    color: #000;
    cursor: pointer;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}
.ck-os-theme-atari-st .ck-os-dropdown .ck-os-dd-item:hover {
    background: #000;
    color: #fff;
}
.ck-os-theme-atari-st .ck-os-dropdown .ck-menu-separator {
    height: 1px; background: #000; margin: 2px 4px; width: calc(100% - 8px);
}

/* ══════════════════════════════════════════════════════════════
   OS THEME: WINDOWS XP (Luna Blue)
   ══════════════════════════════════════════════════════════════ */
.ck-os-theme-win-xp .ck-os-menubar {
    background: linear-gradient(180deg, #3168d5 0%, #2452a5 50%, #224ea0 100%);
    padding: 0;
    display: flex;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    font-size: 12px;
    color: #fff;
    height: 24px;
    align-items: stretch;
    border-bottom: 1px solid #1a3a7a;
}
.ck-os-theme-win-xp .ck-os-menubar-item {
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.ck-os-theme-win-xp .ck-os-menubar-item:hover,
.ck-os-theme-win-xp .ck-os-menubar-item.active {
    background: linear-gradient(180deg, #4a84e0, #2a5cb8);
    border-radius: 3px;
    margin: 1px 0;
    padding: 2px 10px;
}
.ck-os-theme-win-xp .ck-os-dropdown {
    background: #fff;
    border: 1px solid #868686;
    box-shadow: 4px 4px 6px rgba(0,0,0,0.28);
    min-width: 200px;
    padding: 2px 0;
    font-family: "Tahoma", "Segoe UI", sans-serif;
    font-size: 12px;
    border-radius: 0;
}
.ck-os-theme-win-xp .ck-os-dropdown .ck-os-dd-item {
    padding: 4px 24px 4px 28px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}
.ck-os-theme-win-xp .ck-os-dropdown .ck-os-dd-item:hover {
    background: #3168d5;
    color: #fff;
}
.ck-os-theme-win-xp .ck-os-dropdown .ck-os-dd-item i,
.ck-os-theme-win-xp .ck-os-dropdown .ck-os-dd-item img {
    position: absolute; left: 6px; font-size: 11px;
}
.ck-os-theme-win-xp .ck-os-dropdown .ck-menu-separator {
    height: 1px; background: #c0c0c0; margin: 3px 2px; width: calc(100% - 4px);
}

/* ══════════════════════════════════════════════════════════════
   OS THEME: WINDOWS 11 (Fluent/Mica)
   ══════════════════════════════════════════════════════════════ */
.ck-os-theme-win11 .ck-os-menubar {
    background: rgba(243,243,243,0.85);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
    padding: 0 4px;
    display: flex;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    color: #1a1a1a;
    height: 32px;
    align-items: stretch;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px 8px 0 0;
}
.ck-os-theme-win11 .ck-os-menubar-item {
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
    margin: 3px 1px;
    display: flex;
    align-items: center;
    transition: background 0.12s;
}
.ck-os-theme-win11 .ck-os-menubar-item:hover {
    background: rgba(0,0,0,0.05);
}
.ck-os-theme-win11 .ck-os-menubar-item.active {
    background: rgba(0,0,0,0.08);
}
.ck-os-theme-win11 .ck-os-dropdown {
    background: rgba(252,252,252,0.92);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
    min-width: 220px;
    padding: 4px;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    border-radius: 8px;
    animation: ck-win11-dd-in 0.18s cubic-bezier(0,0,0,1);
}
@keyframes ck-win11-dd-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ck-os-theme-win11 .ck-os-dropdown .ck-os-dd-item {
    padding: 7px 12px 7px 14px;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
    transition: background 0.1s;
}
.ck-os-theme-win11 .ck-os-dropdown .ck-os-dd-item:hover {
    background: rgba(0,0,0,0.05);
}
.ck-os-theme-win11 .ck-os-dropdown .ck-os-dd-item i { font-size: 14px; width: 18px; text-align: center; color: #444; }
.ck-os-theme-win11 .ck-os-dropdown .ck-menu-separator {
    height: 1px; background: rgba(0,0,0,0.08); margin: 4px 8px; width: calc(100% - 16px);
}

/* Win11 Dark */
.ck-os-theme-win11-dark .ck-os-menubar {
    background: rgba(32,32,32,0.88);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
    color: #f3f3f3;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px 8px 0 0;
}
.ck-os-theme-win11-dark .ck-os-menubar { display: flex; padding: 0 4px; font-family: "Segoe UI Variable","Segoe UI",system-ui,sans-serif; font-size: 13px; height: 32px; align-items: stretch; }
.ck-os-theme-win11-dark .ck-os-menubar-item { padding: 4px 12px; cursor: pointer; white-space: nowrap; border-radius: 4px; margin: 3px 1px; display: flex; align-items: center; transition: background 0.12s; color: #e8e8e8; }
.ck-os-theme-win11-dark .ck-os-menubar-item:hover { background: rgba(255,255,255,0.08); }
.ck-os-theme-win11-dark .ck-os-menubar-item.active { background: rgba(255,255,255,0.12); }
.ck-os-theme-win11-dark .ck-os-dropdown {
    background: rgba(44,44,44,0.94);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.38);
    min-width: 220px; padding: 4px;
    font-family: "Segoe UI Variable","Segoe UI",system-ui,sans-serif; font-size: 13px;
    border-radius: 8px;
    animation: ck-win11-dd-in 0.18s cubic-bezier(0,0,0,1);
}
.ck-os-theme-win11-dark .ck-os-dropdown .ck-os-dd-item { padding: 7px 12px 7px 14px; color: #e8e8e8; cursor: pointer; display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; border-radius: 4px; transition: background 0.1s; }
.ck-os-theme-win11-dark .ck-os-dropdown .ck-os-dd-item:hover { background: rgba(255,255,255,0.08); }
.ck-os-theme-win11-dark .ck-os-dropdown .ck-os-dd-item i { font-size: 14px; width: 18px; text-align: center; color: #aaa; }
.ck-os-theme-win11-dark .ck-os-dropdown .ck-menu-separator { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 8px; width: calc(100% - 16px); }

/* ══════════════════════════════════════════════════════════════
   OS THEME: macOS (Sonoma / Ventura)
   ══════════════════════════════════════════════════════════════ */
.ck-os-theme-macos .ck-os-menubar {
    background: rgba(246,246,246,0.78);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    padding: 0 8px;
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    height: 26px;
    align-items: stretch;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.ck-os-theme-macos .ck-os-menubar-item {
    padding: 2px 10px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
    margin: 2px 1px;
    transition: background 0.1s;
}
.ck-os-theme-macos .ck-os-menubar-item:hover {
    background: rgba(0,0,0,0.06);
}
.ck-os-theme-macos .ck-os-menubar-item.active {
    background: rgba(0,122,255,0.85);
    color: #fff;
}
.ck-os-theme-macos .ck-os-dropdown {
    background: rgba(252,252,252,0.82);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    backdrop-filter: blur(40px) saturate(200%);
    border: 0.5px solid rgba(0,0,0,0.12);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.06);
    min-width: 220px;
    padding: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-size: 13px;
    border-radius: 6px;
    animation: ck-mac-dd-in 0.14s ease-out;
}
@keyframes ck-mac-dd-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.ck-os-theme-macos .ck-os-dropdown .ck-os-dd-item {
    padding: 4px 12px;
    color: #1d1d1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
    transition: background 0.08s;
}
.ck-os-theme-macos .ck-os-dropdown .ck-os-dd-item:hover {
    background: rgba(0,122,255,0.85);
    color: #fff;
}
.ck-os-theme-macos .ck-os-dropdown .ck-os-dd-item:hover i { color: #fff; }
.ck-os-theme-macos .ck-os-dropdown .ck-os-dd-item i { font-size: 13px; width: 16px; text-align: center; color: #555; }
.ck-os-theme-macos .ck-os-dropdown .ck-menu-separator {
    height: 1px; background: rgba(0,0,0,0.1); margin: 4px 12px; width: calc(100% - 24px);
}

/* macOS Dark */
.ck-os-theme-macos-dark .ck-os-menubar {
    background: rgba(40,40,40,0.72);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    color: #f5f5f7;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ck-os-theme-macos-dark .ck-os-menubar { display: flex; padding: 0 8px; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif; font-size: 13px; font-weight: 500; height: 26px; align-items: stretch; }
.ck-os-theme-macos-dark .ck-os-menubar-item { padding: 2px 10px; cursor: pointer; white-space: nowrap; border-radius: 4px; margin: 2px 1px; transition: background 0.1s; color: #e5e5e7; }
.ck-os-theme-macos-dark .ck-os-menubar-item:hover { background: rgba(255,255,255,0.1); }
.ck-os-theme-macos-dark .ck-os-menubar-item.active { background: rgba(10,132,255,0.85); color: #fff; }
.ck-os-theme-macos-dark .ck-os-dropdown {
    background: rgba(50,50,50,0.84);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    backdrop-filter: blur(40px) saturate(200%);
    border: 0.5px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 40px rgba(0,0,0,0.42), 0 0 0 0.5px rgba(255,255,255,0.06);
    min-width: 220px; padding: 5px;
    font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif; font-size: 13px;
    border-radius: 6px;
    animation: ck-mac-dd-in 0.14s ease-out;
}
.ck-os-theme-macos-dark .ck-os-dropdown .ck-os-dd-item { padding: 4px 12px; color: #f0f0f2; cursor: pointer; display: flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; border-radius: 4px; transition: background 0.08s; }
.ck-os-theme-macos-dark .ck-os-dropdown .ck-os-dd-item:hover { background: rgba(10,132,255,0.8); color: #fff; }
.ck-os-theme-macos-dark .ck-os-dropdown .ck-os-dd-item:hover i { color: #fff; }
.ck-os-theme-macos-dark .ck-os-dropdown .ck-os-dd-item i { font-size: 13px; width: 16px; text-align: center; color: #aaa; }
.ck-os-theme-macos-dark .ck-os-dropdown .ck-menu-separator { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 12px; width: calc(100% - 24px); }


/* ══════════════════════════════════════════════════════════════
   OS THEME: LINUX (GNOME 44+ / Adwaita)
   ══════════════════════════════════════════════════════════════ */
.ck-os-theme-linux .ck-os-menubar {
    background: #303030;
    padding: 0 6px;
    display: flex;
    font-family: "Cantarell", "Noto Sans", "Ubuntu", sans-serif;
    font-size: 13px;
    color: #ebebeb;
    height: 28px;
    align-items: stretch;
}
.ck-os-theme-linux .ck-os-menubar-item {
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 6px;
    margin: 2px 1px;
    transition: background 0.15s;
}
.ck-os-theme-linux .ck-os-menubar-item:hover {
    background: rgba(255,255,255,0.1);
}
.ck-os-theme-linux .ck-os-menubar-item.active {
    background: rgba(255,255,255,0.14);
}
.ck-os-theme-linux .ck-os-dropdown {
    background: #3d3d3d;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
    min-width: 220px;
    padding: 6px;
    font-family: "Cantarell", "Noto Sans", "Ubuntu", sans-serif;
    font-size: 13px;
    border-radius: 12px;
    animation: ck-linux-dd-in 0.2s cubic-bezier(0.25,0.46,0.45,0.94);
}
@keyframes ck-linux-dd-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ck-os-theme-linux .ck-os-dropdown .ck-os-dd-item {
    padding: 6px 12px;
    color: #ebebeb;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    transition: background 0.12s;
}
.ck-os-theme-linux .ck-os-dropdown .ck-os-dd-item:hover {
    background: rgba(255,255,255,0.08);
}
.ck-os-theme-linux .ck-os-dropdown .ck-os-dd-item i { font-size: 14px; width: 18px; text-align: center; color: #aaa; }
.ck-os-theme-linux .ck-os-dropdown .ck-menu-separator {
    height: 1px; background: rgba(255,255,255,0.08); margin: 4px 6px; width: calc(100% - 12px);
}


/* ══════════════════════════════════════════════════════════════
   OS THEME: RETRO DOS (Norton Commander / TUI)
   ══════════════════════════════════════════════════════════════ */
.ck-os-theme-retro-dos .ck-os-menubar {
    background: #0000aa;
    padding: 0;
    display: flex;
    font-family: "Fixedsys", "Lucida Console", "Courier New", monospace;
    font-size: 14px;
    color: #ffff55;
    height: 22px;
    align-items: stretch;
}
.ck-os-theme-retro-dos .ck-os-menubar-item {
    padding: 1px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.ck-os-theme-retro-dos .ck-os-menubar-item:hover,
.ck-os-theme-retro-dos .ck-os-menubar-item.active {
    background: #00aaaa;
    color: #000;
}
.ck-os-theme-retro-dos .ck-os-dropdown {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    box-shadow: 2px 2px 0 #000;
    min-width: 180px;
    padding: 2px 0;
    font-family: "Fixedsys", "Lucida Console", "Courier New", monospace;
    font-size: 14px;
}
.ck-os-theme-retro-dos .ck-os-dropdown .ck-os-dd-item {
    padding: 2px 16px;
    color: #000;
    cursor: pointer;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}
.ck-os-theme-retro-dos .ck-os-dropdown .ck-os-dd-item:hover {
    background: #0000aa;
    color: #ffff55;
}
.ck-os-theme-retro-dos .ck-os-dropdown .ck-menu-separator {
    height: 1px; background: #808080; margin: 2px 4px; width: calc(100% - 8px);
}


/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL — Separator preview in item list
   ══════════════════════════════════════════════════════════════ */
.menu-item-row.is-separator {
    background: rgba(15, 23, 42, 0.3);
    border-left: 3px solid rgba(102,126,234,0.4);
    padding: 6px 16px;
    min-height: 0;
}
.menu-item-row.is-separator .sep-preview {
    flex: 1;
    margin: 0 12px;
    display: flex;
    align-items: center;
}
.menu-item-row.is-separator .sep-preview > * {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN — OS Theme Picker cards
   ══════════════════════════════════════════════════════════════ */
.os-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.os-theme-card {
    background: rgba(15,23,42,0.6);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
}
.os-theme-card:hover {
    border-color: rgba(102,126,234,0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102,126,234,0.2);
}
.os-theme-card.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102,126,234,0.3), 0 8px 24px rgba(102,126,234,0.2);
}
.os-theme-card.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 6px; right: 8px;
    color: #667eea;
    font-size: 12px;
}
.os-theme-card .os-icon {
    font-size: 28px;
    margin-bottom: 6px;
    display: block;
}
.os-theme-card .os-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
.os-theme-card .os-sublabel {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN — Separator style picker
   ══════════════════════════════════════════════════════════════ */
.sep-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.sep-style-card {
    background: rgba(15,23,42,0.6);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.sep-style-card:hover {
    border-color: rgba(102,126,234,0.4);
}
.sep-style-card.selected {
    border-color: #667eea;
    background: rgba(102,126,234,0.1);
}
.sep-style-card .sep-demo {
    height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.sep-style-card .sep-demo > * { width: 100%; }
.sep-style-card .sep-name {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN — Item type radio cards
   ══════════════════════════════════════════════════════════════ */
.item-type-grid {
    display: flex;
    gap: 8px;
}
.item-type-card {
    flex: 1;
    background: rgba(15,23,42,0.5);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255,255,255,0.7);
}
.item-type-card:hover { border-color: rgba(102,126,234,0.3); color: #fff; }
.item-type-card.selected {
    border-color: #667eea;
    background: rgba(102,126,234,0.12);
    color: #fff;
}
.item-type-card i { font-size: 18px; display: block; margin-bottom: 4px; color: inherit; }
.item-type-card .type-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); }

/* Conditional visibility in the modal */
.menu-modal-section { transition: all 0.3s ease; }
.menu-modal-section.hidden-section { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   GLOBAL OS THEME — Replaces the main navbar
   ══════════════════════════════════════════════════════════════ */
#ck-os-nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}
#ck-os-nav-wrap .ck-os-menubar {
    position: relative;
}
#ck-os-nav-wrap .ck-os-menubar-item {
    position: relative;
}
#ck-os-nav-wrap .ck-os-dropdown {
    min-width: 200px;
}

/* ══════════════════════════════════════════════════════════════
   OS Theme Preview in admin (live mini preview)
   ══════════════════════════════════════════════════════════════ */
.os-theme-preview-box {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    overflow: hidden;
    transition: all 0.3s;
}