body { background: #f8f5f8; color: #2f2430; }
.sidebar {
    background: #f3eff4;
    border-right: 1px solid #e7deea;
    position: relative;
    padding: 1.25rem !important;
}
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 16% 8%, rgba(255, 255, 255, .72), transparent 44%);
    pointer-events: none;
}
.sidebar-brand-card {
    position: relative;
    z-index: 2;
    border-radius: 20px;
    padding: 14px 14px;
    background: linear-gradient(135deg, #fbe7f3, #d7d8ff);
    border: 1px solid #eadcf1;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sidebar-brand-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: rgba(255, 255, 255, .6);
}
.sidebar-subtitle { font-size: .74rem; color: #6f6d81; letter-spacing: .01em; }
.sidebar-nav { position: relative; z-index: 2; }
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 18px;
    border: 1px solid #e6dfeb;
    background: #fff;
    color: #41445a;
    padding: 11px 14px;
    font-weight: 600;
    transition: .2s ease;
}
.sidebar-link:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(114, 75, 122, .10); }
.sidebar-link.active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(115deg, #c760d9, #8b7dfa);
    box-shadow: 0 10px 22px rgba(129, 76, 181, .34);
}
.sidebar-link.active .sidebar-link-icon,
.sidebar-link.active .sidebar-link-arrow { color: #fff; background: rgba(255,255,255,.2); }
.sidebar-link-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #7751be;
    background: #f1f0f9;
    flex: 0 0 auto;
}
.sidebar-link-text { flex: 1 1 auto; font-size: 1.02rem; }
.sidebar-link-arrow { color: #7f7f95; font-size: 1.55rem; line-height: 1; }
.sidebar-link-danger {
    color: #c62f6b;
    background: #fceff5;
    border-color: #f0d6e4;
}
.sidebar-link-danger .sidebar-link-icon { color: #c62f6b; background: #f9e6ee; }
.sidebar-admin-card {
    position: relative;
    z-index: 2;
    border-radius: 18px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #efeef8;
    border: 1px solid #dfdbef;
}
.sidebar-admin-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(140deg, #8f5fff, #6d7ef8);
    color: #fff;
}
.sidebar-admin-dot {
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1dcf92;
    box-shadow: 0 0 0 3px rgba(29, 207, 146, .16);
}
.bg-main { background: #faf9fb; }
.card-soft { border: 1px solid #f1dae5; border-radius: 16px; box-shadow: 0 8px 24px rgba(154, 98, 126, .08); }
.metric-box {
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(155deg, #fff, #fff8fc 55%, #f8eef4);
    border: 1px solid #f0e1e8;
    box-shadow: 0 10px 24px rgba(154, 98, 126, .09);
    transition: transform .2s ease, box-shadow .2s ease;
}
.metric-box:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(154, 98, 126, .14); }
.metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #ffe2ee, #f2d9e4);
    color: #8a3e63;
    font-size: 1rem;
}
.metric-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.dashboard-hero {
    background: linear-gradient(145deg, #fff, #fff7fb 60%, #f9edf4);
    border: 1px solid #efdbe7;
}
.dashboard-cta {
    background: linear-gradient(125deg, #7f56f7, #a14cf0);
    border: 0;
    box-shadow: 0 8px 16px rgba(129, 76, 181, .28);
}
.dashboard-cta-light {
    border-color: #e4d7ec;
    color: #594f6d;
    background: #fff;
}
.progress-card {
    background: #fff;
    border: 1px solid #f1e3ea;
    border-radius: 12px;
    padding: 12px;
}
.progress-card .progress { height: 7px; background-color: #f4e7ee; }
.progress-card-green .small:last-child { color: #2f9d58; font-weight: 600; }
.progress-card-blue .small:last-child { color: #3a74c6; font-weight: 600; }
.progress-card-pink .small:last-child { color: #bf4f8e; font-weight: 600; }
.feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f1e8ff, #e3d8ff);
}
.dashboard-check-card { position: relative; overflow: hidden; }
.dashboard-check-note {
    background: #f5efff;
    border: 1px solid #ebddff;
    color: #6a5e84;
    padding: 10px 12px;
    border-radius: 10px;
}
.dashboard-gift-emoji {
    position: absolute;
    right: 24px;
    bottom: 18px;
    font-size: 64px;
    opacity: .22;
    pointer-events: none;
}
.gift-preview { width: 500px; height: 300px; border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 18px 36px rgba(62, 40, 52, .26); border: 1px solid rgba(255,255,255,.45); }
.gift-front { color: #3e2434; }
.gift-front-starter { background: linear-gradient(128deg,#fff3f8,#ffd6e8 58%, #f7dba7); }
.gift-front-signature { background: radial-gradient(circle at 18% 10%,#fff8fc,#ffcbdf 42%,#f3bf86); }
.gift-front-prestige { background: radial-gradient(circle at 16% 12%,#fffdfd,#ffd9ea 30%,#efb9d0 52%, #ddb06a 86%); }
.gift-lux-overlay { position: absolute; inset: 0; background:
    linear-gradient(120deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.03) 40%, rgba(255,255,255,.18) 100%),
    radial-gradient(circle at 85% 85%, rgba(255,255,255,.34), transparent 44%);
}
.gift-front::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -40%;
    width: 60%;
    height: 220%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: rotate(25deg);
    animation: shimmer 5s linear infinite;
}
.gift-brand { font-size: 1rem; font-weight: 700; letter-spacing: .08em; }
.gift-subtitle { font-size: .68rem; letter-spacing: .16em; opacity: .8; }
.gift-title { font-size: 2rem; line-height: 1; font-weight: 700; letter-spacing: .08em; }
.gift-amount { font-size: 2.3rem; font-weight: 800; line-height: 1; text-shadow: 0 4px 10px rgba(255,255,255,.45); }
.gift-front-content { z-index: 2; }
.gift-chip {
    font-size: .6rem;
    letter-spacing: .12em;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(216,180,113,.5);
    background: rgba(255,255,255,.55);
    color: #7a4a5f;
}
.gift-note { font-size: .92rem; font-weight: 500; }
.gift-code { font-size: .82rem; letter-spacing: .06em; opacity: .86; }
.gift-ornament {
    position: absolute;
    border-radius: 50%;
    filter: blur(.2px);
    z-index: 1;
}
.gift-ornament-left {
    width: 180px;
    height: 180px;
    left: -80px;
    bottom: -70px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.48), rgba(255,255,255,.08) 65%, transparent);
}
.gift-ornament-right {
    width: 150px;
    height: 150px;
    right: -55px;
    top: -45px;
    background: radial-gradient(circle at 40% 40%, rgba(245,215,164,.5), rgba(245,215,164,.08) 65%, transparent);
}
.gift-back { background:
    linear-gradient(150deg,#fff,#fdeef5 52%,#f8e6f0),
    radial-gradient(circle at 84% 90%, rgba(233,188,121,.18), transparent 48%); }
.gold-line { border-top: 2px solid #d8b471; opacity: .8; }
.qr-glass-box { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.92); backdrop-filter: blur(2px); border-radius: 18px; padding: 10px; box-shadow: 0 8px 20px rgba(153, 99, 124, .14); }
.gift-back-right { font-size: .95rem; }
.gift-rule-title { letter-spacing: .03em; margin-bottom: .15rem; }
.gift-expire { margin-top: .15rem; font-weight: 600; }
.gift-back-right ul { padding-left: 1.1rem; margin-bottom: .55rem !important; }
.gift-back-right ul li { margin-bottom: .15rem; }
.gift-back-layout { gap: 10px; }
.gift-back-main { flex: 1 1 auto; min-width: 0; }
.gift-back-coupon {
    width: 36%;
    border-left: 2px dashed #d9bccb;
    padding-left: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gift-back-layout.coupon-left { flex-direction: row-reverse; }
.gift-back-layout.coupon-left .gift-back-coupon {
    border-left: none;
    border-right: 2px dashed #d9bccb;
    padding-left: 0;
    padding-right: 10px;
}
.gift-back-layout.coupon-left .tear-off-content::before { left: auto; right: -18px; }
.gift-back-layout.coupon-left .tear-off-content::after { left: auto; right: -18px; top: 78%; }
.tear-vertical-label {
    font-size: .72rem;
    color: #8a5d74;
    text-align: center;
    margin-bottom: 6px;
    letter-spacing: .04em;
    font-weight: 600;
}
.tear-off-content {
    position: relative;
}
.tear-off-content::before,
.tear-off-content::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #f6edf3;
    border-radius: 50%;
}
.tear-off-content::before { left: -18px; }
.tear-off-content::after { left: -18px; top: 78%; }
.tear-off-vertical { padding: 7px; }
.tear-off-vertical .small { font-size: .68rem; line-height: 1.2; }
.barcode-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    border: 1px solid #f0dfe7;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
    overflow: hidden;
}
.barcode-wrap svg {
    display: block;
    max-width: 100%;
    width: 100% !important;
    height: 52px !important;
}
.barcode-wrap .small { letter-spacing: .04em; overflow-wrap: anywhere; }
.data-card { border-radius: 16px; overflow: hidden; }
.data-card .table thead th { border-bottom-width: 1px; color: #6d4f5f; }
.data-card .table tbody tr:hover { background: #fff5f9; }
.table td, .table th { vertical-align: middle; }
.auth-wrapper {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 20%, #ffeaf3 0%, transparent 35%),
        radial-gradient(circle at 90% 10%, #f2e6ff 0%, transparent 30%),
        linear-gradient(180deg, #fdf8fc, #f7f0f6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.auth-card {
    width: 430px;
    max-width: 100%;
    border-radius: 20px;
    border: 1px solid #f0dbe6;
    box-shadow: 0 22px 48px rgba(120, 65, 92, .16);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(2px);
}
.auth-title { font-weight: 700; letter-spacing: .01em; }
.portal-card { border-radius: 16px; border: 1px solid #ecd8e3; box-shadow: 0 10px 26px rgba(154,98,126,.08); }

@keyframes shimmer {
    0% { transform: translateX(-20%) rotate(25deg); opacity: 0; }
    10% { opacity: .55; }
    30% { opacity: 0; }
    100% { transform: translateX(260%) rotate(25deg); opacity: 0; }
}