*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left,#12365c,#07101d 38%,#040812);color:#eef6ff}.container{width:min(1180px,94%);margin:24px auto}.topbar{width:min(1180px,94%);margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:rgba(255,255,255,.06);box-shadow:0 20px 50px rgba(0,0,0,.35);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}.brand-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:17px;background:#29d3ff;color:#06101d;font-weight:900}.brand small{display:block;color:#9fb2c9;margin-top:2px}.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.nav a,.btn{color:#d9e8f7;text-decoration:none;border-radius:16px;padding:10px 14px;font-weight:700;border:1px solid transparent}.nav a:hover{background:rgba(255,255,255,.09)}.btn{display:inline-block;background:#29d3ff;color:#06101d;border:0;cursor:pointer}.btn.green{background:#40e58c}.btn.dark{background:#111f35;color:#fff;border:1px solid rgba(255,255,255,.12)}.btn.small{padding:9px 12px}.grid{display:grid;gap:18px}.grid2{grid-template-columns:1.1fr .9fr}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}.panel,.card{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.065);border-radius:30px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}.card{background:rgba(15,27,45,.88);border-radius:24px;padding:20px;box-shadow:none}h1,h2,h3{margin:0 0 12px}h1{font-size:54px;line-height:1.02}h2{font-size:34px}.lead,p{color:#a9b9cc;line-height:1.65}.pill{display:inline-flex;border-radius:999px;background:rgba(41,211,255,.14);color:#b7efff;font-weight:900;padding:9px 14px;margin-bottom:14px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.hero-preview{background:#fff;color:#07101d;border-radius:28px;padding:18px}.mock-img{height:230px;border-radius:24px;background:linear-gradient(135deg,#dff8ff,#eee7ff);margin-bottom:16px}.product-img{height:120px;border-radius:20px;background:#e9eef5;margin-bottom:12px}.status{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,200,87,.16);color:#ffe0a1;font-size:12px;font-weight:900}.status.ok{background:rgba(64,229,140,.14);color:#adffd2}.row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.form{max-width:520px;margin:40px auto}.form input,.form textarea,.form select{width:100%;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.15);background:#081322;color:#fff;margin:7px 0 14px}.form label{font-weight:700}.alert{padding:14px 16px;border-radius:18px;background:rgba(255,80,80,.13);border:1px solid rgba(255,80,80,.25);color:#ffd1d1;margin-bottom:16px}.success{background:rgba(64,229,140,.14);border-color:rgba(64,229,140,.3);color:#c4ffdd}.admin-layout{display:grid;grid-template-columns:260px 1fr;gap:18px}.side{position:sticky;top:16px;height:max-content}.side a{display:block;color:#dbe8f8;text-decoration:none;padding:12px 14px;border-radius:16px;font-weight:800}.side a:hover,.side a.active{background:#29d3ff;color:#06101d}.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:18px}.table th,.table td{text-align:left;padding:13px;border-bottom:1px solid rgba(255,255,255,.09);color:#dce9fa}.table th{color:#9fb2c9}.site-frame{background:#fff;color:#07101d;border-radius:28px;overflow:hidden}.site-head{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid #e5e7eb}.site-hero{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:40px;background:linear-gradient(135deg,#ecfeff,#f5f3ff)}.site-hero h1{color:#07101d;font-size:42px}.site-products{padding:30px 40px}.white-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:16px}.footer{text-align:center;color:#8093aa;padding:30px}@media(max-width:900px){.grid2,.grid3,.grid4,.admin-layout,.site-hero{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}h1{font-size:36px}.side{position:static}}


/* =========================================================
   V5 Admin Controlled Rental Panel UI
   Glass UI + RGB animation + Dark/Light mode
========================================================= */
:root {
    --primary: #29d3ff;
    --primary2: #8b5cf6;
    --danger: #ff6b6b;
    --success: #40e58c;
    --glass-bg: rgba(255,255,255,.065);
    --glass-border: rgba(255,255,255,.12);
}
html[data-theme="light"] body {
    background: radial-gradient(circle at top left,#dff8ff,#f8fbff 44%,#eef2ff);
    color: #07101d;
}
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .topbar,
html[data-theme="light"] .side {
    background: rgba(255,255,255,.78);
    color: #07101d;
    border-color: rgba(7,16,29,.10);
}
html[data-theme="light"] p,
html[data-theme="light"] .lead,
html[data-theme="light"] .brand small,
html[data-theme="light"] .table th,
html[data-theme="light"] .table td {
    color: #46566b;
}
html[data-theme="light"] .nav a,
html[data-theme="light"] .side a {
    color: #07101d;
}
.glass-on .panel,
.glass-on .card,
.glass-on .topbar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.rgb-on .topbar,
.rgb-on .panel.rgb-frame,
.rgb-on .theme-card:hover {
    position: relative;
}
.rgb-on .topbar:before,
.rgb-on .panel.rgb-frame:before,
.rgb-on .theme-card:hover:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,#29d3ff,#8b5cf6,#ff4ecd,#40e58c,#29d3ff);
    background-size: 300% 300%;
    animation: rgbBorder 5s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
@keyframes rgbBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.brand-logo-img {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    object-fit: cover;
    background: #fff;
}
.mode-toggle {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 9px 12px;
    background: rgba(255,255,255,.07);
    color: inherit;
    cursor: pointer;
    font-weight: 900;
}
.theme-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    overflow: hidden;
}
.theme-shot {
    height: 190px;
    border-radius: 24px;
    color: #07101d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}
.theme-shot:before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(7,16,29,.12);
    border-radius: 20px;
    background: rgba(255,255,255,.38);
    backdrop-filter: blur(4px);
}
.theme-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(7,16,29,.88);
    color: #fff;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 900;
}
.theme-icon {
    font-size: 54px;
    z-index: 2;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.14));
}
.theme-window {
    display: flex;
    gap: 8px;
    z-index: 2;
}
.theme-window span {
    display: block;
    width: 42px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.theme-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
    color: #cfe0f4;
    font-size: 14px;
}
html[data-theme="light"] .theme-features { color: #34465c; }
.theme-price {
    font-size: 26px;
    font-weight: 900;
    margin-top: auto;
}
.theme-price small {
    font-size: 13px;
    color: #9fb2c9;
}
.theme-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.live-demo-btn,
.live-order-preview {
    position: relative;
    overflow: hidden;
    animation: pulseLive 1.6s infinite;
}
.live-demo-btn:after,
.live-order-preview:after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    transform: skewX(-20deg);
    animation: shineLive 2.2s infinite;
}
.live-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff2f2f;
    margin-right: 7px;
    box-shadow: 0 0 0 0 rgba(255,47,47,.75);
    animation: dotPulse 1.1s infinite;
}
@keyframes dotPulse { 70% { box-shadow: 0 0 0 9px rgba(255,47,47,0); } 100% { box-shadow: 0 0 0 0 rgba(255,47,47,0); } }
@keyframes shineLive { 0% { left: -75%; } 50%, 100% { left: 130%; } }
@keyframes pulseLive { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.pay-method {
    display: block;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    margin-bottom: 10px;
    cursor: pointer;
    background: rgba(255,255,255,.045);
}
.pay-method input { margin-right: 8px; }
.logo-preview {
    max-width: 120px;
    max-height: 80px;
    border-radius: 14px;
    background: #fff;
    padding: 6px;
}
.admin-note-box {
    white-space: pre-wrap;
    max-width: 320px;
}
@media(max-width:900px){
    .theme-grid { grid-template-columns: 1fr!important; }
}