/* =====================================================
   Becrou - Restaurant & Food Delivery Admin Template
   Bootstrap 5 - Colorful Premium Theme
   ===================================================== */

:root {
    --dn-primary: #ff5b1f;
    --dn-primary-rgb: 255, 91, 31;
    --dn-primary-light: #ff7a47;
    --dn-primary-dark: #e64a0f;
    --dn-secondary: #6c5ce7;
    --dn-secondary-rgb: 108, 92, 231;
    --dn-success: #10b981;
    --dn-success-rgb: 16, 185, 129;
    --dn-info: #0ea5e9;
    --dn-info-rgb: 14, 165, 233;
    --dn-warning: #f59e0b;
    --dn-warning-rgb: 245, 158, 11;
    --dn-danger: #ef4444;
    --dn-danger-rgb: 239, 68, 68;
    --dn-pink: #ec4899;
    --dn-pink-rgb: 236, 72, 153;
    --dn-purple: #8b5cf6;
    --dn-purple-rgb: 139, 92, 246;
    --dn-teal: #14b8a6;
    --dn-teal-rgb: 20, 184, 166;
    --dn-yellow: #facc15;
    --dn-yellow-rgb: 250, 204, 21;
    --dn-orange: #f97316;
    --dn-orange-rgb: 249, 115, 22;
    --dn-cyan: #06b6d4;
    --dn-lime: #84cc16;
    --dn-rose: #f43f5e;
    --dn-indigo: #6366f1;

    --dn-body-bg: #f5f6fa;
    --dn-body-color: #4a5568;
    --dn-heading-color: #1a202c;
    --dn-muted: #94a3b8;
    --dn-border: #e5e7eb;
    --dn-card-bg: #ffffff;

    --dn-sidebar-bg: #ffffff;
    --dn-sidebar-width: 260px;
    --dn-sidebar-collapsed-width: 80px;
    --dn-topbar-height: 70px;

    --dn-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --dn-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --dn-shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.12);

    --dn-font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --dn-font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;

    --dn-radius-sm: 6px;
    --dn-radius: 10px;
    --dn-radius-lg: 16px;
    --dn-radius-xl: 24px;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--dn-font-sans);
    background-color: var(--dn-body-bg);
    color: var(--dn-body-color);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dn-font-display);
    color: var(--dn-heading-color);
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--dn-primary);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--dn-primary-dark);
}

/* ===== Tabler Icons normalization ===== */
i.ti {
    font-style: normal;
    display: inline-block;
    line-height: 1;
    font-size: inherit;
    vertical-align: -2px;
}

/* Slight visual rebalance — Tabler icons render a tiny bit larger than Bootstrap Icons did */
.dn-menu-link i.ti { font-size: 18px; }
.dn-icon-btn i.ti { font-size: 18px; }
.dn-btn i.ti { font-size: 15px; }
.dn-stat-icon i.ti { font-size: 22px; }
.dn-empty-icon i.ti { font-size: 36px; }
.dn-stars i.ti { font-size: 14px; }
.dn-noti-icon i.ti { font-size: 16px; }
.dn-stat-mini-icon i.ti { font-size: 16px; }
.dn-food-fav i.ti { font-size: 16px; }
.dn-close i.ti { font-size: 14px; }

/* ===== Layout ===== */
.dn-layout {
    display: flex;
    min-height: 100vh;
}

.dn-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--dn-sidebar-width);
    background: var(--dn-sidebar-bg);
    border-right: 1px solid var(--dn-border);
    z-index: 1040;
    transition: width .3s ease, transform .3s ease;
    display: flex;
    flex-direction: column;
}

.dn-sidebar-brand {
    height: var(--dn-topbar-height);
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid var(--dn-border);
    gap: 10px;
}

.dn-sidebar-brand .dn-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-pink));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 6px 14px rgba(var(--dn-primary-rgb), .4);
}

.dn-sidebar-brand .dn-brand-name {
    font-family: var(--dn-font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--dn-heading-color);
    letter-spacing: -0.02em;
}

.dn-sidebar-brand .dn-brand-name span {
    color: var(--dn-primary);
}

.dn-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

/* Hide sidebar scrollbar — scroll still works, just invisible */
.dn-sidebar-scroll {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE & legacy Edge */
}

.dn-sidebar-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;               /* Chrome, Safari, Opera */
}

.dn-menu-section {
    padding: 18px 22px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--dn-muted);
}

.dn-menu {
    list-style: none;
    padding: 0 12px;
    margin: 0;
}

.dn-menu > li {
    margin-bottom: 2px;
}

.dn-menu .dn-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--dn-radius);
    color: #475569;
    font-weight: 500;
    font-size: 14px;
    transition: all .2s;
    cursor: pointer;
}

.dn-menu .dn-menu-link:hover {
    background: rgba(var(--dn-primary-rgb), .08);
    color: var(--dn-primary);
}

.dn-menu .dn-menu-link i {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.dn-menu .dn-menu-link .dn-caret {
    margin-left: auto;
    font-size: 12px;
    transition: transform .2s;
}

.dn-menu .dn-menu-item.open > .dn-menu-link .dn-caret,
.dn-menu .dn-menu-item[aria-expanded="true"] > .dn-menu-link .dn-caret {
    transform: rotate(90deg);
}

.dn-menu .dn-menu-item.active > .dn-menu-link {
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-orange));
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--dn-primary-rgb), .35);
}

.dn-menu .dn-submenu {
    list-style: none;
    padding: 4px 0 8px 38px;
    margin: 0;
    display: none;
}

.dn-menu .dn-menu-item.open > .dn-submenu {
    display: block;
}

.dn-submenu a {
    display: block;
    padding: 7px 12px;
    color: #64748b;
    font-size: 13px;
    border-radius: 6px;
    position: relative;
}

.dn-submenu a::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 14px;
    width: 8px;
    height: 1px;
    background: #cbd5e1;
}

.dn-submenu a:hover,
.dn-submenu a.active {
    color: var(--dn-primary);
    background: rgba(var(--dn-primary-rgb), .06);
}

.dn-submenu a.active::before {
    background: var(--dn-primary);
}

.dn-menu-badge {
    margin-left: auto;
    background: var(--dn-danger);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

.dn-menu .active .dn-menu-badge {
    background: rgba(255, 255, 255, .25);
}

/* ===== Main ===== */
.dn-main {
    margin-left: var(--dn-sidebar-width);
    width: calc(100% - var(--dn-sidebar-width));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .3s ease;
}

.dn-topbar {
    height: var(--dn-topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--dn-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 1030;
    gap: 16px;
}

.dn-topbar .dn-toggle-btn {
    background: transparent;
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dn-topbar .dn-toggle-btn:hover {
    background: #f1f5f9;
}

.dn-search {
    position: relative;
    flex: 1;
    max-width: 420px;
}

.dn-search input {
    width: 100%;
    height: 42px;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 16px 0 44px;
    color: var(--dn-heading-color);
    font-size: 14px;
}

.dn-search input:focus {
    background: #fff;
    border-color: var(--dn-primary);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(var(--dn-primary-rgb), .12);
}

.dn-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dn-muted);
}

.dn-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dn-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 0;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all .2s;
    font-size: 18px;
}

.dn-icon-btn:hover {
    background: var(--dn-primary);
    color: #fff;
}

.dn-icon-btn .dn-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dn-danger);
    border: 2px solid #fff;
}

/* Hover dropdowns */
.dn-dropdown {
    position: relative;
}

.dn-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 320px;
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-lg);
    box-shadow: var(--dn-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .2s ease;
    z-index: 1050;
    padding: 0;
}

.dn-dropdown:hover .dn-dropdown-menu,
.dn-dropdown.show .dn-dropdown-menu,
.dn-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dn-dropdown-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--dn-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dn-dropdown-header h6 {
    margin: 0;
    font-size: 14px;
}

.dn-dropdown-list {
    max-height: 340px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.dn-dropdown-list a {
    display: flex;
    gap: 12px;
    padding: 10px 18px;
    color: #475569;
    transition: background .15s;
}

.dn-dropdown-list a:hover {
    background: #f8fafc;
}

.dn-dropdown-list .dn-noti-icon,
.dn-noti-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: rgba(var(--dn-primary-rgb), .12);
    color: var(--dn-primary);
}

/* Allow color-named soft backgrounds to override noti-icon defaults */
.dn-noti-icon.dn-bg-success-soft, .dn-dropdown-list .dn-noti-icon.dn-bg-success-soft { color: var(--dn-success); background: rgba(var(--dn-success-rgb), .12); }
.dn-noti-icon.dn-bg-warning-soft, .dn-dropdown-list .dn-noti-icon.dn-bg-warning-soft { color: #b45309; background: rgba(var(--dn-warning-rgb), .14); }
.dn-noti-icon.dn-bg-danger-soft,  .dn-dropdown-list .dn-noti-icon.dn-bg-danger-soft  { color: var(--dn-danger);  background: rgba(var(--dn-danger-rgb), .12); }
.dn-noti-icon.dn-bg-info-soft,    .dn-dropdown-list .dn-noti-icon.dn-bg-info-soft    { color: var(--dn-info);    background: rgba(var(--dn-info-rgb), .12); }
.dn-noti-icon.dn-bg-purple-soft,  .dn-dropdown-list .dn-noti-icon.dn-bg-purple-soft  { color: var(--dn-purple);  background: rgba(var(--dn-purple-rgb), .12); }
.dn-noti-icon.dn-bg-pink-soft,    .dn-dropdown-list .dn-noti-icon.dn-bg-pink-soft    { color: var(--dn-pink);    background: rgba(var(--dn-pink-rgb), .12); }
.dn-noti-icon.dn-bg-teal-soft,    .dn-dropdown-list .dn-noti-icon.dn-bg-teal-soft    { color: var(--dn-teal);    background: rgba(var(--dn-teal-rgb), .12); }

.dn-dropdown-list .dn-noti-title {
    color: var(--dn-heading-color);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
}

.dn-dropdown-list .dn-noti-text {
    font-size: 12px;
    color: #64748b;
    margin: 2px 0 0;
}

.dn-dropdown-list .dn-noti-time {
    font-size: 11px;
    color: var(--dn-muted);
    margin-top: 4px;
}

.dn-dropdown-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--dn-border);
    text-align: center;
}

.dn-dropdown-footer a {
    font-size: 13px;
    font-weight: 600;
}

/* Profile dropdown */
.dn-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 4px 6px 4px 4px;
    border-radius: 12px;
    transition: background .2s;
}

.dn-profile-btn:hover {
    background: #f1f5f9;
}

.dn-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-pink));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
}

.dn-avatar.sm {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.dn-avatar.lg {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.dn-avatar.xl {
    width: 96px;
    height: 96px;
    font-size: 28px;
}

.dn-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.dn-profile-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}

.dn-profile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--dn-heading-color);
}

.dn-profile-role {
    font-size: 11px;
    color: var(--dn-muted);
}

.dn-profile-dropdown {
    min-width: 240px;
    padding: 14px 0;
}

.dn-profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    color: #475569;
    font-size: 13px;
}

.dn-profile-dropdown a:hover {
    background: #f8fafc;
    color: var(--dn-primary);
}

.dn-profile-dropdown a i {
    font-size: 16px;
    color: var(--dn-muted);
    width: 18px;
}

.dn-profile-dropdown hr {
    margin: 8px 14px;
    border: 0;
    border-top: 1px solid var(--dn-border);
}

/* ===== Content ===== */
.dn-content {
    padding: 28px;
    flex: 1;
}

.dn-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.dn-page-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.dn-page-sub {
    font-size: 13px;
    color: var(--dn-muted);
    margin: 0;
}

.dn-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.dn-breadcrumb li a {
    color: var(--dn-muted);
}

.dn-breadcrumb li:not(:last-child)::after {
    content: '›';
    color: var(--dn-muted);
    margin-left: 8px;
    font-size: 14px;
    line-height: 1;
}

.dn-breadcrumb li:last-child {
    color: var(--dn-primary);
    font-weight: 600;
}

/* ===== Card ===== */
.dn-card {
    background: var(--dn-card-bg);
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-lg);
    box-shadow: var(--dn-shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.dn-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--dn-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.dn-card-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--dn-heading-color);
}

.dn-card-subtitle {
    font-size: 12px;
    color: var(--dn-muted);
    margin: 2px 0 0;
}

.dn-card-body {
    padding: 22px;
}

.dn-card-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--dn-border);
    background: #fafbfc;
}

/* ===== Stats cards ===== */
.dn-stat {
    background: #fff;
    border-radius: var(--dn-radius-lg);
    padding: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--dn-shadow-sm);
    border: 1px solid var(--dn-border);
}

.dn-stat .dn-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 14px;
}

/* Standalone dn-stat-icon (used outside .dn-stat — e.g. announcement cards) */
.dn-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    color: #fff;
}

/* When stat-icon uses a *-soft background, ensure the soft color overrides */
.dn-stat-icon.dn-bg-primary-soft { color: var(--dn-primary); }
.dn-stat-icon.dn-bg-success-soft { color: var(--dn-success); }
.dn-stat-icon.dn-bg-warning-soft { color: #b45309; }
.dn-stat-icon.dn-bg-danger-soft  { color: var(--dn-danger); }
.dn-stat-icon.dn-bg-info-soft    { color: var(--dn-info); }
.dn-stat-icon.dn-bg-purple-soft  { color: var(--dn-purple); }
.dn-stat-icon.dn-bg-pink-soft    { color: var(--dn-pink); }
.dn-stat-icon.dn-bg-teal-soft    { color: var(--dn-teal); }
.dn-stat-icon.dn-bg-orange-soft  { color: var(--dn-orange); }
.dn-stat-icon.dn-bg-indigo-soft  { color: var(--dn-indigo); }
.dn-stat-icon.dn-bg-yellow-soft  { color: #b45309; }

.dn-stat .dn-stat-label {
    font-size: 12px;
    color: var(--dn-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin: 0 0 6px;
}

.dn-stat .dn-stat-value {
    font-family: var(--dn-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--dn-heading-color);
    margin: 0;
    line-height: 1;
}

.dn-stat .dn-stat-foot {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dn-stat .dn-stat-foot .dn-trend {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dn-stat .dn-stat-foot .dn-trend.up {
    color: var(--dn-success);
}

.dn-stat .dn-stat-foot .dn-trend.down {
    color: var(--dn-danger);
}

.dn-stat.dn-stat-gradient {
    color: #fff;
    border: 0;
}

.dn-stat.dn-stat-gradient .dn-stat-label,
.dn-stat.dn-stat-gradient .dn-stat-value,
.dn-stat.dn-stat-gradient .dn-stat-foot,
.dn-stat.dn-stat-gradient .dn-stat-foot .dn-trend {
    color: #fff;
}

.dn-stat.dn-stat-gradient .dn-stat-icon {
    background: rgba(255,255,255,.2);
}

.dn-bg-primary-grad { background: linear-gradient(135deg, #ff5b1f 0%, #ff8a3d 100%); }
.dn-bg-success-grad { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.dn-bg-warning-grad { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.dn-bg-danger-grad { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }
.dn-bg-info-grad { background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); }
.dn-bg-purple-grad { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); }
.dn-bg-pink-grad { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); }
.dn-bg-teal-grad { background: linear-gradient(135deg, #14b8a6 0%, #5eead4 100%); }
.dn-bg-orange-grad { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); }
.dn-bg-indigo-grad { background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); }

.dn-bg-primary-soft { background: rgba(255, 91, 31, .12); color: var(--dn-primary); }
.dn-bg-success-soft { background: rgba(16, 185, 129, .12); color: var(--dn-success); }
.dn-bg-warning-soft { background: rgba(245, 158, 11, .14); color: var(--dn-warning); }
.dn-bg-danger-soft { background: rgba(239, 68, 68, .12); color: var(--dn-danger); }
.dn-bg-info-soft { background: rgba(14, 165, 233, .12); color: var(--dn-info); }
.dn-bg-purple-soft { background: rgba(139, 92, 246, .12); color: var(--dn-purple); }
.dn-bg-pink-soft { background: rgba(236, 72, 153, .12); color: var(--dn-pink); }
.dn-bg-teal-soft { background: rgba(20, 184, 166, .12); color: var(--dn-teal); }
.dn-bg-orange-soft { background: rgba(249, 115, 22, .12); color: var(--dn-orange); }
.dn-bg-indigo-soft { background: rgba(99, 102, 241, .12); color: var(--dn-indigo); }
.dn-bg-yellow-soft { background: rgba(250, 204, 21, .15); color: #b45309; }

/* ===== Tables ===== */
.dn-table {
    width: 100%;
    border-collapse: collapse;
}

.dn-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--dn-border);
    white-space: nowrap;
}

.dn-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--dn-border);
    font-size: 13px;
    vertical-align: middle;
}

.dn-table tbody tr:hover {
    background: #fafbfc;
}

.dn-table tbody tr:last-child td {
    border-bottom: 0;
}

.dn-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.dn-table-flush thead th {
    background: transparent;
}

.dn-table-row-link {
    color: var(--dn-heading-color);
    font-weight: 600;
}

.dn-table .dn-cell-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dn-table .dn-cell-product img,
.dn-table .dn-cell-product .dn-img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dn-table .dn-cell-product .dn-name {
    font-weight: 600;
    color: var(--dn-heading-color);
    margin: 0;
    font-size: 13px;
}

.dn-table .dn-cell-product .dn-sub {
    font-size: 12px;
    color: var(--dn-muted);
}

/* ===== Badges ===== */
.dn-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.dn-badge i {
    font-size: 9px;
}

.dn-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.dn-badge.success { background: rgba(16, 185, 129, .12); color: var(--dn-success); }
.dn-badge.success .dn-badge-dot { background: var(--dn-success); }
.dn-badge.danger { background: rgba(239, 68, 68, .12); color: var(--dn-danger); }
.dn-badge.danger .dn-badge-dot { background: var(--dn-danger); }
.dn-badge.warning { background: rgba(245, 158, 11, .14); color: #b45309; }
.dn-badge.warning .dn-badge-dot { background: var(--dn-warning); }
.dn-badge.info { background: rgba(14, 165, 233, .12); color: var(--dn-info); }
.dn-badge.info .dn-badge-dot { background: var(--dn-info); }
.dn-badge.primary { background: rgba(255, 91, 31, .12); color: var(--dn-primary); }
.dn-badge.primary .dn-badge-dot { background: var(--dn-primary); }
.dn-badge.purple { background: rgba(139, 92, 246, .12); color: var(--dn-purple); }
.dn-badge.purple .dn-badge-dot { background: var(--dn-purple); }
.dn-badge.pink { background: rgba(236, 72, 153, .12); color: var(--dn-pink); }
.dn-badge.pink .dn-badge-dot { background: var(--dn-pink); }
.dn-badge.teal { background: rgba(20, 184, 166, .12); color: var(--dn-teal); }
.dn-badge.teal .dn-badge-dot { background: var(--dn-teal); }
.dn-badge.secondary { background: #f1f5f9; color: #475569; }
.dn-badge.secondary .dn-badge-dot { background: #94a3b8; }
.dn-badge.dark { background: #1e293b; color: #fff; }

/* ===== Buttons ===== */
.dn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
    background: #fff;
    color: #475569;
}

.dn-btn:hover {
    transform: translateY(-1px);
}

.dn-btn.dn-btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.dn-btn.dn-btn-lg {
    padding: 12px 22px;
    font-size: 15px;
    border-radius: 12px;
}

.dn-btn.dn-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
}

.dn-btn-primary {
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-orange));
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--dn-primary-rgb), .3);
}

.dn-btn-primary:hover {
    color: #fff;
    box-shadow: 0 10px 20px rgba(var(--dn-primary-rgb), .4);
}

.dn-btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border-color: transparent;
}

.dn-btn-secondary:hover {
    background: #e2e8f0;
    color: var(--dn-heading-color);
}

.dn-btn-success { background: var(--dn-success); color: #fff; }
.dn-btn-success:hover { background: #059669; color: #fff; }
.dn-btn-danger { background: var(--dn-danger); color: #fff; }
.dn-btn-danger:hover { background: #dc2626; color: #fff; }
.dn-btn-warning { background: var(--dn-warning); color: #fff; }
.dn-btn-warning:hover { background: #d97706; color: #fff; }
.dn-btn-info { background: var(--dn-info); color: #fff; }
.dn-btn-info:hover { background: #0284c7; color: #fff; }
.dn-btn-purple { background: var(--dn-purple); color: #fff; }
.dn-btn-purple:hover { background: #7c3aed; color: #fff; }
.dn-btn-pink { background: var(--dn-pink); color: #fff; }
.dn-btn-pink:hover { background: #db2777; color: #fff; }

.dn-btn-outline {
    background: #fff;
    border-color: var(--dn-border);
    color: #475569;
}

.dn-btn-outline:hover {
    border-color: var(--dn-primary);
    color: var(--dn-primary);
    background: #fff;
}

.dn-btn-ghost {
    background: transparent;
    color: var(--dn-primary);
}

.dn-btn-ghost:hover {
    background: rgba(var(--dn-primary-rgb), .1);
    color: var(--dn-primary);
}

.dn-btn-group {
    display: inline-flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--dn-border);
    background: #fff;
}

.dn-btn-group .dn-btn {
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--dn-border);
    background: #fff;
    box-shadow: none;
    transform: none;
}

.dn-btn-group .dn-btn:last-child {
    border-right: 0;
}

.dn-btn-group .dn-btn.active {
    background: var(--dn-primary);
    color: #fff;
}

/* ===== Forms ===== */
.dn-form-group {
    margin-bottom: 18px;
}

.dn-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dn-heading-color);
    margin-bottom: 6px;
}

.dn-form-label .dn-required {
    color: var(--dn-danger);
}

.dn-form-control,
.dn-form-select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--dn-heading-color);
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}

.dn-form-control:focus,
.dn-form-select:focus {
    border-color: var(--dn-primary);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(var(--dn-primary-rgb), .15);
}

.dn-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

textarea.dn-form-control {
    resize: vertical;
    min-height: 110px;
}

.dn-form-text {
    font-size: 12px;
    color: var(--dn-muted);
    margin-top: 6px;
}

.dn-input-group {
    display: flex;
    align-items: stretch;
}

.dn-input-group .dn-form-control {
    border-radius: 0;
    border-right: 0;
}

.dn-input-group .dn-form-control:first-child {
    border-radius: 10px 0 0 10px;
}

.dn-input-group .dn-form-control:last-child {
    border-radius: 0 10px 10px 0;
    border-right: 1px solid var(--dn-border);
}

.dn-input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: #f8fafc;
    border: 1px solid var(--dn-border);
    color: #475569;
    font-size: 14px;
}

.dn-input-group .dn-input-group-text:first-child {
    border-radius: 10px 0 0 10px;
    border-right: 0;
}

.dn-input-group .dn-input-group-text:last-child {
    border-radius: 0 10px 10px 0;
    border-left: 0;
}

.dn-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.dn-check input {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    background: #fff;
}

.dn-check input[type="radio"] {
    border-radius: 50%;
}

.dn-check input:checked {
    background: var(--dn-primary);
    border-color: var(--dn-primary);
}

.dn-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dn-check input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: #fff;
    border-radius: 50%;
}

.dn-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.dn-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dn-switch-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: .25s;
    cursor: pointer;
}

.dn-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .25s;
}

.dn-switch input:checked + .dn-switch-slider {
    background: var(--dn-primary);
}

.dn-switch input:checked + .dn-switch-slider::before {
    transform: translateX(18px);
}

/* ===== Tabs ===== */
.dn-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--dn-border);
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    flex-wrap: wrap;
}

.dn-tab {
    background: transparent;
    border: 0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dn-tab:hover {
    color: var(--dn-primary);
}

.dn-tab.active {
    color: var(--dn-primary);
    border-bottom-color: var(--dn-primary);
}

.dn-tab .dn-badge {
    margin-left: 4px;
}

.dn-tab-pill {
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    padding: 8px 18px;
    margin-bottom: 0;
}

.dn-tab-pill.active {
    background: var(--dn-primary);
    color: #fff;
    border-bottom-color: transparent;
}

.dn-tab-pane {
    display: none;
}

.dn-tab-pane.active {
    display: block;
}

/* ===== Vertical tabs (for settings sidebar-style navigation) ===== */
.dn-tabs-vertical {
    flex-direction: column;
    border-bottom: 0;
    gap: 2px;
    margin: 0;
    padding: 6px;
    list-style: none;
}

.dn-tabs-vertical .dn-tab {
    border-bottom: 0;
    border-left: 3px solid transparent;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border-radius: 8px;
    margin: 0;
    color: #475569;
    font-size: 13.5px;
    transition: all .15s ease;
}

.dn-tabs-vertical .dn-tab i {
    margin-right: 6px;
    font-size: 16px;
}

.dn-tabs-vertical .dn-tab:hover {
    background: #f8fafc;
    color: var(--dn-primary);
}

.dn-tabs-vertical .dn-tab.active {
    background: rgba(var(--dn-primary-rgb), .08);
    color: var(--dn-primary);
    border-left-color: var(--dn-primary);
    border-bottom-color: transparent;
    font-weight: 700;
}

.dn-tabs-vertical .dn-tab.dn-tab-danger {
    color: var(--dn-danger);
}

.dn-tabs-vertical .dn-tab.dn-tab-danger.active {
    background: rgba(var(--dn-danger-rgb), .08);
    color: var(--dn-danger);
    border-left-color: var(--dn-danger);
}

/* ===== Pagination ===== */
.dn-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dn-pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--dn-border);
}

.dn-pagination li a:hover {
    background: #f1f5f9;
    color: var(--dn-primary);
}

.dn-pagination li.active a {
    background: var(--dn-primary);
    color: #fff;
    border-color: var(--dn-primary);
}

.dn-pagination li.disabled a {
    color: #cbd5e1;
    pointer-events: none;
}

/* ===== Order/food UI ===== */
.dn-order-card {
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-lg);
    padding: 16px;
    box-shadow: var(--dn-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}

.dn-order-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dn-shadow);
}

.dn-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dn-order-id {
    font-weight: 800;
    font-family: var(--dn-font-display);
    color: var(--dn-heading-color);
}

.dn-order-time {
    font-size: 12px;
    color: var(--dn-muted);
}

.dn-order-customer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dn-order-customer .dn-name {
    font-weight: 600;
    margin: 0;
    color: var(--dn-heading-color);
    font-size: 13px;
}

.dn-order-customer .dn-addr {
    font-size: 11px;
    color: var(--dn-muted);
}

.dn-order-items {
    padding: 10px 0;
    border-top: 1px dashed var(--dn-border);
    border-bottom: 1px dashed var(--dn-border);
    margin-bottom: 12px;
}

.dn-order-items li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: #475569;
}

.dn-order-items li span:first-child {
    flex: 1;
}

.dn-order-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dn-order-total {
    font-weight: 800;
    color: var(--dn-primary);
    font-size: 16px;
    font-family: var(--dn-font-display);
}

/* KDS ticket */
.dn-kds-ticket {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--dn-shadow);
    border-top: 4px solid var(--dn-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dn-kds-ticket.urgent {
    border-top-color: var(--dn-danger);
    animation: dn-pulse 1.6s infinite;
}

.dn-kds-ticket.ready {
    border-top-color: var(--dn-success);
}

@keyframes dn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.dn-kds-head {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.dn-kds-body {
    padding: 12px 14px;
    flex: 1;
}

.dn-kds-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--dn-border);
    display: flex;
    gap: 8px;
}

.dn-kds-foot .dn-btn {
    flex: 1;
}

/* Food cards */
.dn-food-card {
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-lg);
    overflow: hidden;
    transition: all .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dn-food-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--dn-shadow-lg);
}

.dn-food-thumb {
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: #f1f5f9;
    position: relative;
}

.dn-food-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dn-food-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.25) 100%);
    pointer-events: none;
}

.dn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.dn-img {
    overflow: hidden;
}

.dn-food-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,.95);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--dn-heading-color);
}

.dn-food-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dn-danger);
    border: 0;
}

.dn-food-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dn-food-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--dn-heading-color);
}

.dn-food-rest {
    font-size: 12px;
    color: var(--dn-muted);
    margin-bottom: 12px;
}

.dn-food-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dn-food-price {
    font-family: var(--dn-font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--dn-primary);
}

.dn-food-rating {
    font-size: 12px;
    font-weight: 700;
    color: #b45309;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Progress */
.dn-progress {
    height: 8px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.dn-progress .dn-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--dn-primary), var(--dn-orange));
    border-radius: 999px;
    transition: width .4s ease;
}

.dn-progress.dn-progress-success .dn-progress-bar { background: linear-gradient(90deg, var(--dn-success), #34d399); }
.dn-progress.dn-progress-warning .dn-progress-bar { background: linear-gradient(90deg, var(--dn-warning), #fbbf24); }
.dn-progress.dn-progress-danger .dn-progress-bar { background: linear-gradient(90deg, var(--dn-danger), #f87171); }
.dn-progress.dn-progress-info .dn-progress-bar { background: linear-gradient(90deg, var(--dn-info), #38bdf8); }

/* Timeline */
.dn-timeline {
    position: relative;
    padding-left: 28px;
}

.dn-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--dn-border);
}

.dn-timeline-item {
    position: relative;
    padding-bottom: 22px;
}

.dn-timeline-item::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--dn-primary);
}

.dn-timeline-item.done::before {
    background: var(--dn-success);
    border-color: var(--dn-success);
}

.dn-timeline-item.danger::before {
    background: var(--dn-danger);
    border-color: var(--dn-danger);
}

.dn-timeline-time {
    font-size: 12px;
    color: var(--dn-muted);
    margin-bottom: 2px;
}

.dn-timeline-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--dn-heading-color);
    margin: 0 0 4px;
}

.dn-timeline-text {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Map placeholder */
.dn-map {
    width: 100%;
    height: 480px;
    border-radius: var(--dn-radius-lg);
    background:
        radial-gradient(circle at 25% 30%, rgba(20,184,166,.15), transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(236,72,153,.15), transparent 45%),
        radial-gradient(circle at 50% 80%, rgba(255,91,31,.15), transparent 35%),
        repeating-linear-gradient(0deg, #eef2f7 0 1px, transparent 1px 28px),
        repeating-linear-gradient(90deg, #eef2f7 0 1px, transparent 1px 28px),
        linear-gradient(135deg, #f8fafc, #eef2ff);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dn-border);
}

.dn-map-pin {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dn-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(var(--dn-primary-rgb), .4);
    transform: translate(-50%, -100%);
}

.dn-map-pin.success { background: var(--dn-success); }
.dn-map-pin.warning { background: var(--dn-warning); }
.dn-map-pin.danger { background: var(--dn-danger); }
.dn-map-pin.info { background: var(--dn-info); }

.dn-map-pin::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: inherit;
}

/* Charts */
.dn-chart-canvas {
    width: 100%;
    height: 320px;
}

.dn-chart-canvas.sm {
    height: 220px;
}

.dn-chart-canvas.xs {
    height: 120px;
}

/* Star rating */
.dn-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #fbbf24;
}

.dn-stars i {
    font-size: 14px;
}

/* Auth pages */
.dn-auth {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, #fff5ee 0%, #fce7f3 50%, #ede9fe 100%);
}

.dn-auth-illustration {
    flex: 1;
    background: linear-gradient(135deg, var(--dn-primary) 0%, var(--dn-pink) 100%);
    color: #fff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.dn-auth-illustration::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.dn-auth-illustration::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}

.dn-auth-form {
    width: 520px;
    max-width: 100%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.dn-auth-form .dn-form-control {
    height: 48px;
}

.dn-otp-group {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}

.dn-otp-input {
    flex: 1;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 1px solid var(--dn-border);
    border-radius: 12px;
    background: #fff;
}

.dn-otp-input:focus {
    border-color: var(--dn-primary);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(var(--dn-primary-rgb), .15);
}

/* Misc */
.dn-divider {
    height: 1px;
    background: var(--dn-border);
    border: 0;
    margin: 18px 0;
}

.dn-divider-text {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--dn-muted);
    font-size: 12px;
    font-weight: 600;
    margin: 20px 0;
}

.dn-divider-text::before,
.dn-divider-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--dn-border);
}

.dn-text-muted { color: var(--dn-muted) !important; }
.dn-text-primary { color: var(--dn-primary) !important; }
.dn-text-success { color: var(--dn-success) !important; }
.dn-text-danger { color: var(--dn-danger) !important; }
.dn-text-warning { color: var(--dn-warning) !important; }
.dn-text-info { color: var(--dn-info) !important; }
.dn-text-pink { color: var(--dn-pink) !important; }
.dn-text-purple { color: var(--dn-purple) !important; }
.dn-text-teal { color: var(--dn-teal) !important; }
.dn-text-orange { color: var(--dn-orange) !important; }

.dn-fw-700 { font-weight: 700; }
.dn-fw-800 { font-weight: 800; }

/* Mobile sidebar */
.dn-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .4);
    z-index: 1039;
    display: none;
}

/* ===== Collapsed sidebar (icon-only with hover flyout submenus) ===== */
.dn-sidebar.collapsed {
    width: var(--dn-sidebar-collapsed-width);
    overflow: visible;
}

.dn-sidebar.collapsed .dn-sidebar-scroll {
    overflow-x: visible;
    overflow-y: auto;
}

.dn-sidebar.collapsed ~ .dn-main {
    margin-left: var(--dn-sidebar-collapsed-width);
    width: calc(100% - var(--dn-sidebar-collapsed-width));
}

.dn-sidebar.collapsed .dn-brand-name,
.dn-sidebar.collapsed .dn-menu-link span,
.dn-sidebar.collapsed .dn-caret,
.dn-sidebar.collapsed .dn-menu-badge {
    display: none;
}

.dn-sidebar.collapsed .dn-sidebar-brand {
    justify-content: center;
    padding: 0;
}

.dn-sidebar.collapsed .dn-menu-section {
    display: block;
    height: 12px;
    overflow: hidden;
    padding: 0;
    margin: 8px 0;
    color: transparent;
    border-top: 1px dashed var(--dn-border);
}

.dn-sidebar.collapsed .dn-menu {
    padding: 0 10px;
}

.dn-sidebar.collapsed .dn-menu-link {
    justify-content: center;
    padding: 12px 0;
    position: relative;
}

.dn-sidebar.collapsed .dn-menu-link i:first-child {
    font-size: 20px;
}

.dn-sidebar.collapsed .dn-menu-item.has-sub .dn-menu-link::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    transform: translateY(-50%);
}

/* Hide the inline open submenu when collapsed */
.dn-sidebar.collapsed .dn-menu-item.open > .dn-submenu {
    display: none;
}

/* Hover flyout submenu — uses position:fixed so it escapes the scrollable sidebar container.
   JS sets exact top/left on mouseenter; the CSS rule below provides a safe default. */
.dn-sidebar.collapsed .dn-menu-item.has-sub:hover > .dn-submenu,
.dn-sidebar.collapsed .dn-menu-item.has-sub:focus-within > .dn-submenu {
    display: block;
    position: fixed;
    left: var(--dn-sidebar-collapsed-width);
    margin-left: 10px;
    padding: 10px 8px;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: 12px;
    box-shadow: var(--dn-shadow-lg);
    z-index: 1050;
    animation: dn-flyout-in .12s ease-out;
}

/* Invisible bridge so hover does not break when cursor crosses the gap between icon and panel */
.dn-sidebar.collapsed .dn-menu-item.has-sub:hover > .dn-submenu::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 0;
    width: 14px;
    height: 100%;
    background: transparent;
}

/* Submenu link styling inside flyout */
.dn-sidebar.collapsed .dn-submenu a {
    padding: 9px 14px;
    border-radius: 8px;
    margin: 0;
}

.dn-sidebar.collapsed .dn-submenu a::before {
    display: none;
}

@keyframes dn-flyout-in {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Tooltip for items without submenu */
.dn-sidebar.collapsed .dn-menu-item:not(.has-sub):hover > .dn-menu-link::before {
    content: attr(data-dn-title);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 1050;
    pointer-events: none;
}

/* Mobile brand in topbar (shows only on mobile) — mirrors desktop sidebar-brand */
.dn-mobile-brand {
    display: none;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-right: 8px;
}

.dn-mobile-brand .dn-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-pink));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 6px 14px rgba(var(--dn-primary-rgb), .4);
}

.dn-mobile-brand .dn-brand-name {
    font-family: var(--dn-font-display);
    font-weight: 800;
    font-size: 20px;
    color: var(--dn-heading-color);
    letter-spacing: -0.02em;
}

.dn-mobile-brand .dn-brand-name span {
    color: var(--dn-primary);
}

@media (max-width: 991.98px) {
    .dn-sidebar {
        transform: translateX(-100%);
        width: var(--dn-sidebar-width);
    }

    .dn-sidebar.show {
        transform: translateX(0);
    }

    /* Reset collapsed state on mobile — sidebar always shows expanded when toggled */
    .dn-sidebar.collapsed {
        width: var(--dn-sidebar-width);
        overflow: hidden auto;
    }

    .dn-sidebar.collapsed .dn-brand-name,
    .dn-sidebar.collapsed .dn-menu-link span,
    .dn-sidebar.collapsed .dn-caret,
    .dn-sidebar.collapsed .dn-menu-badge,
    .dn-sidebar.collapsed .dn-menu-section {
        display: revert;
    }

    .dn-sidebar.collapsed .dn-menu-section {
        height: auto;
        color: var(--dn-muted);
        border-top: 0;
        margin: 0;
        padding: 18px 22px 6px;
    }

    .dn-sidebar.collapsed .dn-sidebar-brand {
        justify-content: flex-start;
        padding: 0 22px;
    }

    .dn-sidebar.collapsed .dn-menu {
        padding: 0 12px;
    }

    .dn-sidebar.collapsed .dn-menu-link {
        justify-content: flex-start;
        padding: 10px 12px;
    }

    .dn-sidebar.collapsed ~ .dn-main {
        margin-left: 0;
        width: 100%;
    }

    .dn-main {
        margin-left: 0;
        width: 100%;
    }

    .dn-sidebar-backdrop.show {
        display: block;
    }

    .dn-search {
        display: none;
    }

    .dn-mobile-brand {
        display: inline-flex;
    }

    .dn-profile-info {
        display: none;
    }

    /* Hide all topbar action icons except the user profile dropdown */
    .dn-topbar-actions > .dn-dropdown:not(:last-child),
    .dn-topbar-actions > a.dn-icon-btn {
        display: none;
    }

    /* Profile dropdown — keep visible, just show the avatar (no name/role) */
    .dn-topbar-actions > .dn-dropdown:last-child {
        display: block;
    }

    /* Ensure the chevron caret next to avatar is hidden too on mobile */
    .dn-profile-btn > i.ti-chevron-down {
        display: none;
    }

    /* Topbar layout: brand on left, hamburger, then profile pushed to right */
    .dn-topbar {
        padding: 0 14px;
        gap: 8px;
    }

    .dn-topbar-actions {
        margin-left: auto;
        gap: 0;
    }

    .dn-content {
        padding: 18px;
    }

    .dn-auth-illustration {
        display: none;
    }

    .dn-auth-form {
        width: 100%;
        padding: 32px 24px;
    }
}

/* Print friendly */
@media print {
    .dn-sidebar, .dn-topbar { display: none; }
    .dn-main { margin-left: 0; width: 100%; }
}

/* Floor plan */
.dn-floor {
    background: #fafafa;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-lg);
    padding: 30px;
    position: relative;
    min-height: 540px;
    background-image:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%);
    background-size: 30px 30px;
}

.dn-table-shape {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--dn-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: 700;
    font-size: 14px;
    color: var(--dn-heading-color);
    box-shadow: var(--dn-shadow-sm);
    cursor: pointer;
    transition: transform .2s;
}

.dn-table-shape:hover {
    transform: scale(1.05);
}

.dn-table-shape small {
    font-size: 10px;
    color: var(--dn-muted);
    font-weight: 600;
}

.dn-table-shape.occupied {
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-orange));
    color: #fff;
    border-color: transparent;
}

.dn-table-shape.occupied small { color: rgba(255,255,255,.8); }

.dn-table-shape.reserved {
    background: linear-gradient(135deg, var(--dn-warning), #fbbf24);
    color: #fff;
    border-color: transparent;
}

.dn-table-shape.reserved small { color: rgba(255,255,255,.85); }

.dn-table-shape.cleaning {
    background: rgba(14, 165, 233, .12);
    color: var(--dn-info);
    border-color: var(--dn-info);
}

.dn-table-shape.square {
    border-radius: 16px;
}

.dn-table-shape.long {
    width: 130px;
}

/* Empty state */
.dn-empty {
    text-align: center;
    padding: 40px 20px;
}

.dn-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(var(--dn-primary-rgb), .1);
    color: var(--dn-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 16px;
}

.dn-empty h4 {
    font-size: 18px;
    margin: 0 0 6px;
}

.dn-empty p {
    color: var(--dn-muted);
    margin: 0 0 18px;
}

/* Chat */
.dn-chat-layout {
    display: flex;
    gap: 0;
    height: 720px;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-lg);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--dn-shadow-sm);
}

.dn-chat-sidebar {
    width: 340px;
    flex: 0 0 340px;
    border-right: 1px solid var(--dn-border);
    display: flex;
    flex-direction: column;
    background: #fff;
    min-height: 0;
    overflow: hidden;
}

.dn-chat-search {
    padding: 16px;
    border-bottom: 1px solid var(--dn-border);
    flex-shrink: 0;
}

.dn-chat-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

/* Custom scrollbar for chat list */
.dn-chat-list::-webkit-scrollbar { width: 6px; }
.dn-chat-list::-webkit-scrollbar-track { background: transparent; }
.dn-chat-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}
.dn-chat-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dn-chat-list { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

.dn-chat-list li {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: center;
    border-left: 3px solid transparent;
    transition: background .15s ease;
    position: relative;
}

.dn-chat-list li:hover {
    background: #f8fafc;
}

.dn-chat-list li.active {
    background: rgba(var(--dn-primary-rgb), .06);
    border-left-color: var(--dn-primary);
}

.dn-chat-list .dn-chat-meta {
    flex: 1;
    min-width: 0;
}

.dn-chat-list .dn-chat-name {
    font-weight: 600;
    color: var(--dn-heading-color);
    font-size: 13px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dn-chat-list .dn-chat-time {
    font-size: 11px;
    color: var(--dn-muted);
    font-weight: 500;
}

.dn-chat-list .dn-chat-preview {
    font-size: 12px;
    color: var(--dn-muted);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dn-chat-main {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 80px);
}

.dn-chat-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--dn-border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    flex-shrink: 0;
}

.dn-chat-body {
    flex: 1 1 0;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,91,31,.04), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(236,72,153,.04), transparent 40%),
        #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}

/* Custom scrollbar for chat body */
.dn-chat-body::-webkit-scrollbar { width: 8px; }
.dn-chat-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px;
}
.dn-chat-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.dn-chat-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #94a3b8, #64748b);
    background-clip: padding-box;
    border: 2px solid transparent;
}
.dn-chat-body { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* Day separator */
.dn-chat-day-sep {
    text-align: center;
    margin: 14px 0;
    position: relative;
}

.dn-chat-day-sep::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--dn-border);
}

.dn-chat-day-sep span {
    position: relative;
    background: #fafbfc;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--dn-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid var(--dn-border);
}

/* System message */
.dn-system-msg {
    text-align: center;
    margin: 6px 0;
    font-size: 11px;
    color: var(--dn-muted);
    font-style: italic;
    padding: 4px 12px;
    align-self: center;
    background: rgba(148, 163, 184, .1);
    border-radius: 999px;
}

/* Message row with avatar */
.dn-msg-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    max-width: 75%;
}

.dn-msg-row .dn-avatar.sm {
    margin-bottom: 4px;
    flex-shrink: 0;
}

.dn-msg-row.me {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.dn-msg-row.me .dn-avatar.sm {
    display: none;
}

.dn-msg {
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: #fff;
    color: var(--dn-heading-color);
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    border: 1px solid var(--dn-border);
    word-wrap: break-word;
}

.dn-msg.me {
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-orange));
    color: #fff;
    border-color: transparent;
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 4px 12px rgba(var(--dn-primary-rgb), .25);
}

.dn-msg-time {
    font-size: 10px;
    color: var(--dn-muted);
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dn-msg.me .dn-msg-time {
    color: rgba(255, 255, 255, .85);
}

.dn-msg.me .dn-msg-time i {
    font-size: 12px;
    color: rgba(255, 255, 255, .95);
}

/* Image / file attachment in message */
.dn-msg-attachment {
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--dn-shadow-sm);
}

.dn-msg-attachment img {
    width: 100%;
    display: block;
    max-height: 240px;
    object-fit: cover;
}

.dn-msg-attachment-foot {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
}

/* Typing indicator */
.dn-typing {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

.dn-typing-bubble {
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: 16px 16px 16px 4px;
    padding: 12px 14px;
    display: inline-flex;
    gap: 4px;
}

.dn-typing-bubble span {
    width: 6px;
    height: 6px;
    background: var(--dn-muted);
    border-radius: 50%;
    animation: dn-typing 1.2s infinite ease-in-out;
}

.dn-typing-bubble span:nth-child(2) { animation-delay: .15s; }
.dn-typing-bubble span:nth-child(3) { animation-delay: .3s; }

@keyframes dn-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Input area with textarea + button */
.dn-chat-input-wrap {
    border-top: 1px solid var(--dn-border);
    background: #fff;
    padding: 0;
    flex: 0 0 auto;
}

.dn-chat-input-toolbar {
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 6px 16px;
    border-bottom: 1px solid var(--dn-border);
    overflow-x: auto;
    flex-wrap: nowrap;
}

.dn-chat-input-toolbar::-webkit-scrollbar { height: 4px; }
.dn-chat-input-toolbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.dn-chat-input-toolbar .dn-icon-btn {
    width: 30px;
    height: 30px;
    font-size: 15px;
    border-radius: 8px;
    background: transparent;
    flex-shrink: 0;
}

.dn-chat-input-toolbar .dn-icon-btn:hover {
    background: #f1f5f9;
    color: var(--dn-primary);
}

.dn-chat-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--dn-border);
    margin: 0 4px;
    flex-shrink: 0;
}

.dn-chat-input-row {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    align-items: flex-end;
}

.dn-chat-textarea {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--dn-border);
    background: #f8fafc;
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--dn-heading-color);
    resize: none;
    min-height: 44px;
    max-height: 140px;
    line-height: 1.5;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.dn-chat-textarea:focus {
    border-color: var(--dn-primary);
    background: #fff;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(var(--dn-primary-rgb), .12);
}

.dn-chat-textarea::-webkit-scrollbar { width: 6px; }
.dn-chat-textarea::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.dn-chat-input-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.dn-chat-send-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(var(--dn-primary-rgb), .3);
    flex-shrink: 0;
}

.dn-chat-send-btn i {
    font-size: 16px;
}

.dn-chat-input-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 14px 8px;
    font-size: 11px;
}

.dn-chat-input-foot kbd {
    background: #f1f5f9;
    border: 1px solid var(--dn-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    color: #475569;
}

@media (max-width: 768px) {
    .dn-chat-layout {
        grid-template-columns: 1fr;
        height: calc(100vh - 160px);
    }
    .dn-chat-input-toolbar {
        padding: 6px 10px;
    }
    .dn-chat-input-toolbar .dn-icon-btn {
        width: 28px;
        height: 28px;
    }
    .dn-chat-send-btn span {
        display: none;
    }
}

/* Pricing */
.dn-pricing-card {
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-xl);
    padding: 32px 26px;
    position: relative;
    transition: all .25s;
}

.dn-pricing-card.featured {
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-pink));
    color: #fff;
    border-color: transparent;
    transform: scale(1.03);
    box-shadow: 0 20px 50px rgba(var(--dn-primary-rgb), .3);
}

.dn-pricing-card.featured h3,
.dn-pricing-card.featured .dn-pricing-amount {
    color: #fff;
}

.dn-pricing-card .dn-pricing-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fff;
    color: var(--dn-primary);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.dn-pricing-amount {
    font-family: var(--dn-font-display);
    font-size: 44px;
    font-weight: 800;
    margin: 14px 0 4px;
}

.dn-pricing-amount small {
    font-size: 14px;
    font-weight: 600;
    color: var(--dn-muted);
}

.dn-pricing-card.featured .dn-pricing-amount small {
    color: rgba(255,255,255,.8);
}

.dn-pricing-features {
    list-style: none;
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid var(--dn-border);
    border-bottom: 1px solid var(--dn-border);
}

.dn-pricing-card.featured .dn-pricing-features {
    border-color: rgba(255,255,255,.2);
}

.dn-pricing-features li {
    padding: 6px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dn-pricing-features li i {
    color: var(--dn-success);
}

.dn-pricing-card.featured .dn-pricing-features li i {
    color: #fff;
}

/* FAQ */
.dn-accordion-item {
    border: 1px solid var(--dn-border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.dn-accordion-header {
    padding: 16px 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--dn-heading-color);
    transition: background .2s;
}

.dn-accordion-header:hover {
    background: #f8fafc;
}

.dn-accordion-body {
    padding: 0 18px 16px;
    color: #475569;
    font-size: 14px;
    display: none;
}

.dn-accordion-item.active .dn-accordion-body {
    display: block;
}

.dn-accordion-item.active .dn-accordion-header i {
    transform: rotate(180deg);
}

.dn-accordion-header i {
    transition: transform .2s;
}

/* Component showcase tiles */
.dn-tile {
    background: #fff;
    border: 1px solid var(--dn-border);
    border-radius: var(--dn-radius-lg);
    padding: 22px;
    text-align: center;
    transition: all .2s;
    color: inherit;
    display: block;
}

.dn-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--dn-shadow);
    border-color: var(--dn-primary);
}

.dn-tile > i {
    font-size: 32px;
    color: var(--dn-primary);
    margin-bottom: 10px;
}

.dn-tile h6 {
    margin: 0;
    font-size: 14px;
}

/* Toast */
.dn-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dn-toast {
    background: #fff;
    border: 1px solid var(--dn-border);
    border-left: 4px solid var(--dn-primary);
    border-radius: 12px;
    box-shadow: var(--dn-shadow-lg);
    min-width: 320px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Modal */
.dn-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dn-modal-backdrop.show {
    display: flex;
}

.dn-modal {
    background: #fff;
    border-radius: var(--dn-radius-lg);
    max-width: 560px;
    width: 100%;
    box-shadow: var(--dn-shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
}

.dn-modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--dn-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dn-modal-body { padding: 22px; }

.dn-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--dn-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.dn-close {
    background: transparent;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--dn-muted);
}

.dn-close:hover {
    background: #f1f5f9;
    color: var(--dn-danger);
}

/* Utility */
.dn-gap-2 { gap: 8px; } .dn-gap-3 { gap: 12px; } .dn-gap-4 { gap: 16px; }
.dn-mt-0 { margin-top: 0 !important; }
.dn-mb-0 { margin-bottom: 0 !important; }
.dn-mb-2 { margin-bottom: 8px !important; }
.dn-mb-3 { margin-bottom: 12px !important; }
.dn-mb-4 { margin-bottom: 16px !important; }

.dn-d-flex { display: flex !important; }
.dn-align-center { align-items: center; }
.dn-justify-between { justify-content: space-between; }

/* Status banner */
.dn-banner {
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
    border: 1px solid;
}

.dn-banner i {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.dn-banner.info { background: rgba(14, 165, 233, .08); border-color: rgba(14, 165, 233, .25); color: #075985; }
.dn-banner.warning { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .25); color: #b45309; }
.dn-banner.success { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .25); color: #065f46; }
.dn-banner.danger { background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .25); color: #991b1b; }

/* Stat-mini */
.dn-stat-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--dn-border);
}

.dn-stat-mini:last-child {
    border-bottom: 0;
}

.dn-stat-mini-label {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #475569;
}

.dn-stat-mini-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* List-clean */
.dn-list-clean {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dn-list-clean li {
    padding: 12px 0;
    border-bottom: 1px solid var(--dn-border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.dn-list-clean li:last-child {
    border-bottom: 0;
}

/* Hero */
.dn-hero {
    background: linear-gradient(135deg, var(--dn-primary), var(--dn-pink));
    color: #fff;
    border-radius: var(--dn-radius-xl);
    padding: 36px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}

.dn-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.dn-hero h2 {
    color: #fff;
    font-size: 28px;
    margin: 0 0 8px;
}

.dn-hero p {
    color: rgba(255,255,255,.85);
    margin: 0;
    max-width: 540px;
}

/* Hover dropdown for nav items */
.dn-menu .dn-menu-item.dn-hover-dropdown {
    position: relative;
}

/* Receipt */
.dn-receipt {
    background: #fff;
    border: 1px dashed var(--dn-border);
    border-radius: 12px;
    padding: 24px;
    max-width: 380px;
    margin: 0 auto;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.dn-receipt .dn-receipt-head {
    text-align: center;
    border-bottom: 1px dashed var(--dn-border);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.dn-receipt-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.dn-receipt .dn-receipt-total {
    border-top: 1px dashed var(--dn-border);
    margin-top: 10px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
}

/* Multiselect chips */
.dn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.dn-chip i {
    cursor: pointer;
    opacity: .6;
}

.dn-chip i:hover {
    opacity: 1;
    color: var(--dn-danger);
}

.dn-chip.primary { background: rgba(var(--dn-primary-rgb), .1); color: var(--dn-primary); }
.dn-chip.success { background: rgba(16, 185, 129, .1); color: var(--dn-success); }
.dn-chip.danger  { background: rgba(239, 68, 68, .1); color: var(--dn-danger); }
.dn-chip.warning { background: rgba(245, 158, 11, .14); color: #b45309; }
.dn-chip.info    { background: rgba(14, 165, 233, .1); color: var(--dn-info); }

/* Skeleton loader */
.dn-skel {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: dn-skel 1.4s ease-in-out infinite;
    border-radius: 6px;
    height: 12px;
}

@keyframes dn-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Live indicator */
.dn-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dn-success);
    display: inline-block;
    position: relative;
    margin-right: 6px;
}

.dn-live-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--dn-success);
    animation: dn-live 1.8s infinite;
}

@keyframes dn-live {
    0% { transform: scale(.9); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ===== Auto-extracted utility classes (from inline styles) ===== */
.dn-x1 { background:linear-gradient(135deg,#fff5ee 0%,#fce7f3 50%,#ede9fe 100%); }
.dn-x2 { width:100%; max-width:600px; margin:auto; background:transparent; }
.dn-x3 { font-family:var(--dn-font-display); font-size:160px; font-weight:800; background:linear-gradient(135deg,#ff5b1f,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.dn-x4 { font-family:var(--dn-font-display); font-size:120px; font-weight:800; background:linear-gradient(135deg,#ef4444,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.dn-x5 { text-align:left; }
.dn-x6 { font-size:22px; }
.dn-x7 { min-width:280px; }
.dn-x8 { background:linear-gradient(135deg,#0ea5e9,#6366f1); }
.dn-x9 { background:linear-gradient(135deg,#10b981,#14b8a6); }
.dn-x10 { background:linear-gradient(135deg,#ec4899,#f97316); }
.dn-x11 { font-size:12px; color:#94a3b8; }
.dn-x12 { border:1px solid var(--dn-border); border-radius:10px; }
.dn-x13 { width:48px; height:48px; border-radius:10px; background:#635bff; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.dn-x14 { width:48px; height:48px; border-radius:10px; background:#2cb67d; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.dn-x15 { width:48px; height:48px; border-radius:10px; background:#ffe01b; display:inline-flex; align-items:center; justify-content:center; color:#1a202c; font-weight:800; }
.dn-x16 { width:48px; height:48px; border-radius:10px; background:#1ed760; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.dn-x17 { width:48px; height:48px; border-radius:10px; background:#0a66c2; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.dn-x18 { background:#f1f5f9; padding:4px 8px; border-radius:4px; }
.dn-x19 { width:37%; }
.dn-x20 { color:var(--dn-danger); }
.dn-x21 { border:1px solid #fecaca; background:#fef2f2; border-radius:10px; }
.dn-x22 { color:var(--dn-warning); border-color:var(--dn-warning); }
.dn-x23 { border-bottom:0; }
.dn-x24 { background:linear-gradient(135deg,#ff5b1f,#ec4899); color:#fff; border-radius:var(--dn-radius-lg); }
.dn-x25 { background:rgba(255,255,255,.2); color:#fff; }
.dn-x26 { color:#fff; }
.dn-x27 { color:rgba(255,255,255,.85); }
.dn-x28 { color:rgba(255,255,255,.7); font-size:11px; text-transform:uppercase; }
.dn-x29 { border-color:rgba(255,255,255,.2); }
.dn-x30 { color:rgba(255,255,255,.7); }
.dn-x31 { color:var(--dn-danger); border-color:rgba(239,68,68,.3); }
.dn-x32 { border:2px solid var(--dn-primary); border-radius:10px; background:#fff7f1; }
.dn-x33 { width:48px; height:48px; border-radius:8px; background:#1a1f71; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--dn-font-display); font-weight:800; }
.dn-x34 { width:48px; height:48px; border-radius:8px; background:#eb001b; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--dn-font-display); font-weight:800; }
.dn-x35 { width:48px; height:48px; border-radius:8px; background:#0070ba; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }
.dn-x36 { width:160px; height:36px; }
.dn-x37 { width:34%; }
.dn-x38 { width:28%; }
.dn-x39 { width:16%; }
.dn-x40 { width:30%; background:linear-gradient(90deg,#ec4899,#f97316); }
.dn-x41 { width:42%; background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
.dn-x42 { border:1px solid var(--dn-border); border-radius:8px; }
.dn-x43 { font-size:24px; }
.dn-x44 { width:100%; max-width:620px; margin:auto; background:transparent; }
.dn-x45 { font-size:80px; margin-bottom:18px; }
.dn-x46 { text-align:center; }
.dn-x47 { min-height:140px; }
.dn-x48 { cursor:pointer; }
.dn-x49 { background:linear-gradient(135deg,#10b981,#14b8a6); position:relative; }
.dn-x50 { position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:50%; background:var(--dn-success); border:2px solid #fff; }
.dn-x51 { background:linear-gradient(135deg,#0ea5e9,#6366f1); position:relative; }
.dn-x52 { align-self:center; font-size:10px; }
.dn-x53 { background:linear-gradient(135deg,#8b5cf6,#a78bfa); }
.dn-x54 { background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.dn-x55 { background:linear-gradient(135deg,#ef4444,#f87171); position:relative; }
.dn-x56 { position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:50%; background:#cbd5e1; border:2px solid #fff; }
.dn-x57 { background:linear-gradient(135deg,#14b8a6,#06b6d4); }
.dn-x58 { background:linear-gradient(135deg,#a78bfa,#ec4899); }
.dn-x59 { background:linear-gradient(135deg,#f97316,#ef4444); }
.dn-x60 { background:linear-gradient(135deg,#0ea5e9,#06b6d4); }
.dn-x61 { background:linear-gradient(135deg,#84cc16,#10b981); }
.dn-x62 { background:linear-gradient(135deg,#6366f1,#8b5cf6); }
.dn-x63 { position:absolute; bottom:0; right:0; width:12px; height:12px; border-radius:50%; background:var(--dn-success); border:2px solid #fff; }
.dn-x64 { margin-top:6px; }
.dn-x65 { background:transparent; border:none; padding:6px 0; }
.dn-x66 { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#fff; border:1px solid var(--dn-border); border-radius:14px; max-width:340px; }
.dn-x67 { width:36px; height:36px; font-size:16px; }
.dn-x68 { font-size:13px; }
.dn-x69 { width:200px; height:36px; }
.dn-x70 { max-height:none; }
.dn-x71 { background:rgba(var(--dn-primary-rgb),.04); }
.dn-x72 { margin:14px; }
.dn-x73 { width:24%; }
.dn-x74 { width:68%; }
.dn-x75 { width:42%; }
.dn-x76 { width:88%; }
.dn-x77 { width:54%; }
.dn-x78 { width:42px; height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.dn-x79 { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.dn-x80 { border:2px solid var(--dn-primary); border-radius:12px; background:#fff7f1; }
.dn-x81 { border:1px solid var(--dn-border); border-radius:12px; }
.dn-x82 { margin-bottom:14px; }
.dn-x83 { width:240px; height:38px; }
.dn-x84 { width:140px; height:38px; }
.dn-x85 { background:linear-gradient(135deg,#ff5b1f,#ec4899); }
.dn-x86 { background:linear-gradient(135deg,#ef4444,#f87171); }
.dn-x87 { font-size:48px; }
.dn-x88 { border-right:1px solid var(--dn-border); padding:18px; }
.dn-x89 { background:#f59e0b; margin-right:6px; }
.dn-x90 { background:#0ea5e9; margin-right:6px; }
.dn-x91 { background:#8b5cf6; margin-right:6px; }
.dn-x92 { padding:18px; }
.dn-x93 { background:#10b981; margin-right:6px; }
.dn-x94 { width:82%; }
.dn-x95 { margin:14px; border-radius:10px; }
.dn-x96 { height:6px; }
.dn-x97 { width:72%; }
.dn-x98 { width:60%; }
.dn-x99 { width:46%; }
.dn-x100 { width:120px; }
.dn-x101 { padding:0 22px; }
.dn-x102 { top:30%; left:25%; }
.dn-x103 { top:60%; left:45%; }
.dn-x104 { top:45%; left:65%; }
.dn-x105 { top:70%; left:30%; }
.dn-x106 { top:25%; left:75%; }
.dn-x107 { top:80%; left:60%; }
.dn-x108 { top:50%; left:20%; }
.dn-x109 { position:absolute; bottom:20px; left:20px; background:#fff; padding:12px 16px; border-radius:10px; box-shadow:var(--dn-shadow); }
.dn-x110 { background:var(--dn-primary); }
.dn-x111 { background:var(--dn-success); }
.dn-x112 { background:var(--dn-warning); }
.dn-x113 { background:var(--dn-danger); }
.dn-x114 { position:absolute; bottom:-2px; right:-2px; width:12px; height:12px; border-radius:50%; background:var(--dn-success); border:2px solid #fff; }
.dn-x115 { height:340px; background:linear-gradient(135deg,#ff5b1f,#ec4899); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:140px; }
.dn-x116 { height:160px; border:1px dashed var(--dn-border); border-radius:12px; background:#fafbfc; display:flex; align-items:center; justify-content:center; }
.dn-x117 { position:absolute; top:20%; left:20%; width:30%; height:30%; background:rgba(255,91,31,.18); border:2px dashed var(--dn-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--dn-primary); }
.dn-x118 { position:absolute; top:35%; right:15%; width:28%; height:28%; background:rgba(16,185,129,.18); border:2px dashed var(--dn-success); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--dn-success); }
.dn-x119 { position:absolute; bottom:10%; left:35%; width:32%; height:24%; background:rgba(139,92,246,.18); border:2px dashed var(--dn-purple); border-radius:30%; display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--dn-purple); }
.dn-x120 { background:var(--dn-purple); }
.dn-x121 { background:linear-gradient(135deg,#0ea5e9,#6c5ce7); }
.dn-x122 { color:#fff; text-decoration:underline; }
.dn-x123 { padding:14px 22px; border-bottom:1px solid var(--dn-border); background:#fff7f1; cursor:pointer; }
.dn-x124 { padding:14px 22px; border-bottom:1px solid var(--dn-border); cursor:pointer; }
.dn-x125 { padding:14px 22px; cursor:pointer; }
.dn-x126 { width:160px; height:38px; }
.dn-x127 { width:92%; }
.dn-x128 { width:36%; }
.dn-x129 { width:15%; background:linear-gradient(90deg,#ec4899,#f97316); }
.dn-x130 { width:40px; height:40px; font-size:18px; }
.dn-x131 { background:#fff7f1; border-radius:12px; }
.dn-x132 { background:#f0fdf4; border-radius:12px; }
.dn-x133 { background:#fdf2f8; border-radius:12px; }
.dn-x134 { max-width:120px; }
.dn-x135 { background-image:linear-gradient(135deg,rgba(255,91,31,.92),rgba(236,72,153,.92)),url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1200&h=1600&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x136 { position:relative; z-index:1; }
.dn-x137 { background:#fff; color:var(--dn-primary); }
.dn-x138 { color:#fff; font-weight:800; }
.dn-x139 { color:#fff; font-size:38px; line-height:1.2; font-weight:800; margin-bottom:18px; }
.dn-x140 { color:rgba(255,255,255,.85); font-size:16px; max-width:380px; }
.dn-x141 { color:#fff; margin:0; }
.dn-x142 { margin:0; }
.dn-x143 { flex:1; }
.dn-x144 { flex:1; height:2px; background:#e5e7eb; margin-top:26px; }
.dn-x145 { font-size:18px; }
.dn-x146 { background:linear-gradient(135deg,#fff5ee,#ffe6d6); border-color:transparent; }
.dn-x147 { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#ff5b1f,#f97316); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 16px rgba(255,91,31,.3); }
.dn-x148 { background:linear-gradient(135deg,#ecfdf5,#d1fae5); border-color:transparent; }
.dn-x149 { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#10b981,#14b8a6); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 16px rgba(16,185,129,.3); }
.dn-x150 { background:linear-gradient(135deg,#fdf2f8,#fce7f3); border-color:transparent; }
.dn-x151 { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#ec4899,#f472b6); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 16px rgba(236,72,153,.3); }
.dn-x152 { background:linear-gradient(135deg,#eff6ff,#dbeafe); border-color:transparent; }
.dn-x153 { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#0ea5e9,#38bdf8); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 16px rgba(14,165,233,.3); }
.dn-x154 { background:linear-gradient(135deg,#faf5ff,#ede9fe); border-color:transparent; }
.dn-x155 { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#8b5cf6,#a78bfa); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 16px rgba(139,92,246,.3); }
.dn-x156 { background:linear-gradient(135deg,#fef3c7,#fde68a); border-color:transparent; }
.dn-x157 { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 8px 16px rgba(245,158,11,.3); }
.dn-x158 { background:linear-gradient(135deg,#fff5ee 0%,#ffffff 60%); overflow:visible; }
.dn-x159 { background:transparent; border-bottom:0; }
.dn-x160 { padding-top:0; }
.dn-x161 { border-color:transparent; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.dn-x162 { background-image:url('https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?w=400&h=240&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; height:120px; }
.dn-x163 { background:var(--dn-primary); color:#fff; }
.dn-x164 { padding:12px; }
.dn-x165 { font-size:14px; }
.dn-x166 { font-size:11px; }
.dn-x167 { background-image:url('https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=400&h=240&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; height:120px; }
.dn-x168 { background:var(--dn-warning); color:#fff; }
.dn-x169 { background-image:url('https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=400&h=240&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; height:120px; }
.dn-x170 { background:var(--dn-purple); color:#fff; }
.dn-x171 { background-image:url('https://images.unsplash.com/photo-1546793665-c74683f339c1?w=400&h=240&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; height:120px; }
.dn-x172 { background:var(--dn-success); color:#fff; }
.dn-x173 { background:linear-gradient(135deg,#fce7f3 0%,#ffffff 60%); }
.dn-x174 { background:rgba(255,255,255,.7); border-radius:14px; }
.dn-x175 { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.dn-x176 { font-size:12px; }
.dn-x177 { width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; font-size:22px; }
.dn-x178 { width:94%; }
.dn-x179 { width:96%; }
.dn-x180 { width:78%; }
.dn-x181 { background:linear-gradient(135deg,#ff5b1f 0%,#ec4899 100%); color:#fff; border:0; overflow:hidden; position:relative; }
.dn-x182 { position:absolute; top:-30px; right:-30px; width:140px; height:140px; border-radius:50%; background:rgba(255,255,255,.1); }
.dn-x183 { position:relative; }
.dn-x184 { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.2); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:20px; }
.dn-x185 { color:#fff; font-size:32px; }
.dn-x186 { color:rgba(255,255,255,.85); font-size:13px; }
.dn-x187 { background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%); border:0; overflow:hidden; position:relative; }
.dn-x188 { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#10b981,#14b8a6); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 8px 16px rgba(16,185,129,.3); }
.dn-x189 { font-size:32px; }
.dn-x190 { background:linear-gradient(135deg,#faf5ff 0%,#ede9fe 100%); border:0; overflow:hidden; position:relative; }
.dn-x191 { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#8b5cf6,#a78bfa); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 8px 16px rgba(139,92,246,.3); }
.dn-x192 { color:var(--dn-purple); font-size:32px; }
.dn-x193 { color:var(--dn-purple); }
.dn-x194 { background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%); border:0; overflow:hidden; position:relative; }
.dn-x195 { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#0ea5e9,#38bdf8); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 8px 16px rgba(14,165,233,.3); }
.dn-x196 { height:38px; width:240px; }
.dn-x197 { height:38px; width:160px; }
.dn-x198 { font-size:20px; }
.dn-x199 { background:linear-gradient(135deg,#ff5b1f,#ec4899); font-size:36px; }
.dn-x200 { height:120px; background:linear-gradient(135deg,#ff5b1f,#ec4899); display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px; border-radius:12px; position:relative; }
.dn-x201 { position:absolute; top:6px; left:6px; }
.dn-x202 { height:120px; background:linear-gradient(135deg,#ec4899,#fbbf24); display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px; border-radius:12px; }
.dn-x203 { height:120px; background:linear-gradient(135deg,#10b981,#84cc16); display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px; border-radius:12px; }
.dn-x204 { height:120px; border:2px dashed var(--dn-border); display:flex; align-items:center; justify-content:center; color:#94a3b8; border-radius:12px; cursor:pointer; }
.dn-x205 { font-size:32px; display:block; }
.dn-x206 { font-size:28px; }
.dn-x207 { background-image:url('https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x208 { background:#ff5b1f; color:#fff; }
.dn-x209 { background-image:url('https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x210 { background:#fbbf24; color:#fff; }
.dn-x211 { background-image:url('https://images.unsplash.com/photo-1546793665-c74683f339c1?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x212 { background:#10b981; color:#fff; }
.dn-x213 { background-image:url('https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x214 { background:#a78bfa; color:#fff; }
.dn-x215 { background-image:url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x216 { background:#0ea5e9; color:#fff; }
.dn-x217 { background-image:url('https://images.unsplash.com/photo-1565299585323-38d6b0865b47?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x218 { background:#ec4899; color:#fff; }
.dn-x219 { height:340px; background-image:url('https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x220 { height:70px; background:linear-gradient(135deg,#ff5b1f,#f97316); display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; }
.dn-x221 { height:70px; background:linear-gradient(135deg,#ec4899,#fbbf24); display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; }
.dn-x222 { height:70px; background:linear-gradient(135deg,#10b981,#84cc16); display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; }
.dn-x223 { height:70px; background:linear-gradient(135deg,#f97316,#fbbf24); display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; }
.dn-x224 { font-size:7px; color:#10b981; }
.dn-x225 { background-image:url('https://images.unsplash.com/photo-1569718212165-3a8278d5f624?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x226 { background-image:url('https://images.unsplash.com/photo-1496116218417-1a781b1c416c?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x227 { background-image:url('https://images.unsplash.com/photo-1554866585-cd94860890b7?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x228 { background-image:url('https://images.unsplash.com/photo-1505252585461-04db1eb84625?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x229 { background-image:url('https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x230 { background-image:url('https://images.unsplash.com/photo-1551024506-0bccd828d307?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x231 { background-image:url('https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x232 { color:var(--dn-yellow); }
.dn-x233 { color:var(--dn-orange); }
.dn-x234 { background-image:url('https://images.unsplash.com/photo-1513104890138-7c749659a591?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x235 { width:56px; height:32px; text-align:center; }
.dn-x236 { border-top:1px dashed var(--dn-border); padding-top:10px; margin-top:10px; }
.dn-x237 { height:6px; width:120px; }
.dn-x238 { width:65%; }
.dn-x239 { width:32%; }
.dn-x240 { width:18%; }
.dn-x241 { width:55%; }
.dn-x242 { background:#fffaf0; }
.dn-x243 { background:#f0f9ff; }
.dn-x244 { background:#faf5ff; }
.dn-x245 { background:#f0fdf4; }
.dn-x246 { color:var(--dn-primary); }
.dn-x247 { color:var(--dn-success); }
.dn-x248 { color:var(--dn-pink); }
.dn-x249 { color:var(--dn-info); }
.dn-x250 { font-size:38px; }
.dn-x251 { font-size:16px; }
.dn-x252 { width:140px; height:36px; }
.dn-x253 { font-size:20px; cursor:move; }
.dn-x254 { width:120px; height:70px; background-image:url('https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; border-radius:8px; }
.dn-x255 { width:120px; height:70px; background-image:url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; border-radius:8px; }
.dn-x256 { width:120px; height:70px; background-image:url('https://images.unsplash.com/photo-1488477181946-6428a0291777?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; border-radius:8px; }
.dn-x257 { width:120px; height:70px; background-image:url('https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; border-radius:8px; }
.dn-x258 { width:120px; height:70px; background-image:url('https://images.unsplash.com/photo-1533089860892-a7c6f0a88666?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; border-radius:8px; }
.dn-x259 { width:56px; height:56px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:28px; }
.dn-x260 { height:140px; background-image:url('https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; position:relative; }
.dn-x261 { position:absolute; top:14px; right:14px; }
.dn-x262 { height:140px; background-image:url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; position:relative; }
.dn-x263 { height:140px; background-image:url('https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; position:relative; }
.dn-x264 { height:140px; background-image:url('https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; position:relative; }
.dn-x265 { height:140px; background-image:url('https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?w=600&h=280&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; position:relative; }
.dn-x266 { height:140px; background-image:url('https://images.unsplash.com/photo-1505252585461-04db1eb84625?w=400&h=200&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; position:relative; }
.dn-x267 { font-family:monospace; background:#fff7f1; padding:4px 10px; border-radius:6px; color:var(--dn-primary); }
.dn-x268 { height:4px; margin-top:4px; }
.dn-x269 { width:26%; }
.dn-x270 { width:100%; }
.dn-x271 { width:39%; }
.dn-x272 { width:0%; }
.dn-x273 { width:89%; }
.dn-x274 { background:linear-gradient(135deg,#1a202c,#2d3748); border-radius:24px; padding:24px; color:#fff; }
.dn-x275 { background:#fff; color:#1a202c; border-radius:14px; padding:14px; display:flex; gap:10px; }
.dn-x276 { width:42px; height:42px; font-size:20px; }
.dn-x277 { width:8%; }
.dn-x278 { width:56%; }
.dn-x279 { width:58%; }
.dn-x280 { width:48%; }
.dn-x281 { list-style:none; padding:0; }
.dn-x282 { height:120px; border:2px dashed var(--dn-border); display:flex; align-items:center; justify-content:center; color:#94a3b8; border-radius:12px; cursor:pointer; margin-bottom:12px; }
.dn-x283 { width:29%; }
.dn-x284 { width:11%; }
.dn-x285 { width:2%; }
.dn-x286 { height:200px; background-image:url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1200&h=240&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; border-radius:var(--dn-radius-lg) var(--dn-radius-lg) 0 0; position:relative; }
.dn-x287 { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%); border-radius:inherit; }
.dn-x288 { margin-top:-50px; }
.dn-x289 { background:#fff; border:4px solid #fff; color:var(--dn-primary); font-size:36px; }
.dn-x290 { color:var(--dn-warning); }
.dn-x291 { width:42px; height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }
.dn-x292 { flex:1; margin:0 14px; height:8px; }
.dn-x293 { width:14%; }
.dn-x294 { width:3%; }
.dn-x295 { width:1%; }
.dn-x296 { width:40px; height:40px; border-radius:50%; }
.dn-x297 { background-image:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&h=300&fit=crop&auto=format&q=80'); background-size:cover; background-position:center; }
.dn-x298 { border-right:1px solid var(--dn-border); padding:20px; }
.dn-x299 { width:83%; }
.dn-x300 { width:67%; }
.dn-x301 { width:75%; }
.dn-x302 { width:40%; }
.dn-x303 { padding:20px; }
.dn-x304 { background:#f8fafc; border-left:3px solid var(--dn-primary); border-radius:0 8px 8px 0; }
.dn-x305 { width:90%; }
.dn-x306 { width:30%; }
.dn-x307 { background:linear-gradient(135deg,#ec4899,#a78bfa); }
.dn-x308 { background:linear-gradient(135deg,#10b981,#84cc16); }
.dn-x309 { display:inline-flex; align-items:center; justify-content:center; font-size:22px; }
.dn-x310 { height:80px; border:2px dashed var(--dn-border); display:flex; align-items:center; justify-content:center; color:#94a3b8; border-radius:12px; cursor:pointer; }
.dn-x311 { font-size:24px; display:block; }
.dn-x312 { width:50px; padding:4px; }
.dn-x313 { background:linear-gradient(135deg,#ff5b1f,#ec4899); color:#fff; padding:24px; border-radius:14px; text-align:center; }
.dn-x314 { width:60px; height:60px; background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--dn-primary); font-weight:800; font-size:28px; }
.dn-x315 { font-size:36px; }
.dn-x316 { color:#e4405f; }
.dn-x317 { color:#1877f2; }
.dn-x318 { color:#ff0000; }
.dn-x319 { color:#0a66c2; }
.dn-x320 { border:1px solid var(--dn-border); padding:14px; border-radius:8px; background:#fff; }
.dn-x321 { color:#1a0dab; font-size:16px; margin-top:4px; }
.dn-x322 { color:inherit; text-decoration:none; }
.dn-x323 { color:#4d5156; font-size:13px; line-height:1.5; }
.dn-x324 { max-width:140px; }
.dn-x325 { border:1px solid var(--dn-border); border-radius:10px; background:#fff7f1; }
.dn-x326 { width:36px; height:36px; font-size:18px; }
.dn-x327 { padding-left:18px; }
.dn-x328 { font-size:18px; margin-right:6px; }
.dn-x329 { display:grid; grid-template-columns:80px repeat(7,1fr); border-top:1px solid var(--dn-border); }
.dn-x330 { padding:10px; border-right:1px solid var(--dn-border); font-size:11px; color:var(--dn-muted); font-weight:700; }
.dn-x331 { padding:10px; text-align:center; border-right:1px solid var(--dn-border); }
.dn-x332 { padding:8px; border-right:1px solid var(--dn-border); border-top:1px solid var(--dn-border); font-size:11px; color:var(--dn-muted); font-weight:700; }
.dn-x333 { padding:4px; border-right:1px solid var(--dn-border); border-top:1px solid var(--dn-border); min-height:48px; position:relative; }
.dn-x334 { background:linear-gradient(135deg,#ff5b1f,#ec4899); color:#fff; padding:4px 6px; border-radius:6px; font-size:11px; cursor:pointer; }
.dn-x335 { width:62%; }
.dn-x336 { width:70%; }
.dn-x337 { width:74%; }
.dn-x338 { background:#fff; border:2px solid var(--dn-border); width:12px; height:12px; }
.dn-x339 { background:var(--dn-info); }
.dn-x340 { top:30px; left:40px; }
.dn-x341 { top:30px; left:170px; }
.dn-x342 { top:30px; left:300px; }
.dn-x343 { top:30px; left:430px; }
.dn-x344 { top:160px; left:40px; }
.dn-x345 { top:160px; left:220px; }
.dn-x346 { top:160px; left:350px; }
.dn-x347 { top:160px; left:480px; }
.dn-x348 { top:290px; left:40px; }
.dn-x349 { top:290px; left:220px; }
.dn-x350 { top:290px; left:350px; }
.dn-x351 { top:290px; left:480px; }
.dn-x352 { top:420px; left:40px; }
.dn-x353 { top:420px; left:220px; }
.dn-x354 { top:420px; left:350px; }
.dn-x355 { top:420px; left:480px; }
.dn-x356 { padding:14px; background:#fff7f1; border-radius:10px; }
.dn-x357 { position:static; }
.dn-x358 { color:var(--dn-teal); }
.dn-x359 { background:#fff7f1; }
.dn-x360 { font-size:18px; color:var(--dn-primary); }
.dn-x361 { font-size:18px; color:var(--dn-warning); }