:root {
    --cr-maroon: #561C24;
    --cr-maroon-2: #6d2730;
    --cr-beige: #E8D8C4;
    --cr-card: #fff7ee;
    --cr-text: #2d1b1d;
    --cr-muted: #7b6768;
    --cr-shadow: 0 18px 45px rgba(86, 28, 36, .18);
}
* { box-sizing: border-box; }
a, button, .brand-card, .card, .h-item, .apple-device-item { -webkit-tap-highlight-color: transparent; }
button, .brand-card, .card, .h-item, .apple-device-item, .checkout-btn, .confirm-btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
button:hover, .checkout-btn:hover, .confirm-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.brand-card { cursor: pointer; position: relative; overflow: hidden; }
.brand-card::after { content: 'Open service'; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 12px; color: var(--cr-maroon); opacity: .65; font-weight: 700; }
.brand-card h3 { color: var(--cr-maroon); margin-bottom: 16px; }
.float-logo { background: var(--cr-beige); border: 3px solid rgba(255,255,255,.45); }
.cr-page-actions { width: 90%; max-width: 1000px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px auto 0; }
.cr-pill-link, .cr-mini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 10px 16px; background: var(--cr-beige); color: var(--cr-maroon); text-decoration: none; font-weight: 800; border: 1px solid rgba(86,28,36,.18); cursor: pointer; }
.cr-pill-link.dark, .cr-mini-btn.dark { background: var(--cr-maroon); color: var(--cr-beige); }
.cr-user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(86,28,36,.08); color: var(--cr-maroon); font-weight: 800; }
.cr-form-card { width: min(900px, 92vw); margin: 40px auto; background: var(--cr-maroon); color: var(--cr-beige); border-radius: 28px; box-shadow: var(--cr-shadow); padding: 32px; }
.cr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cr-field label { display: block; margin-bottom: 8px; font-weight: 800; color: var(--cr-beige); }
.cr-field input, .cr-field textarea, .cr-field select { width: 100%; border: 0; border-radius: 14px; padding: 14px 16px; background: var(--cr-beige); color: var(--cr-maroon); outline: none; font-size: 15px; }
.cr-field textarea { min-height: 150px; resize: vertical; }
.cr-submit { border: 0; background: var(--cr-beige); color: var(--cr-maroon); border-radius: 999px; padding: 14px 30px; font-weight: 900; cursor: pointer; }
.cr-note { color: rgba(232,216,196,.82); line-height: 1.7; }
#codered-toast-holder { position: fixed; top: 22px; right: 22px; z-index: 1000000; display: flex; flex-direction: column; gap: 10px; }
.codered-toast { min-width: 260px; max-width: 360px; padding: 13px 16px; border-radius: 16px; color: #fff; background: #333; box-shadow: 0 12px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(-12px); transition: all .25s ease; font-weight: 700; line-height: 1.5; }
.codered-toast.show { opacity: 1; transform: translateY(0); }
.codered-toast.success { background: #1f7a4d; }
.codered-toast.error { background: #9f2838; }
.codered-toast.info { background: var(--cr-maroon); }
.cr-table-wrap { overflow-x: auto; background: rgba(255,255,255,.72); border-radius: 18px; border: 1px solid rgba(86,28,36,.12); }
.cr-empty { text-align: center; padding: 24px; color: var(--cr-muted); }
.status-badge { display: inline-flex; padding: 7px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; background: #efe2d1; color: var(--cr-maroon); }
.status-badge.Completed { background: #dceee3; color: #12673d; }
.status-badge.Cancelled { background: #f1d6da; color: #8a1f31; }
.status-badge.Accepted { background: #e4ecff; color: #254e9a; }
.status-badge.InProgress { background: #fff1cc; color: #835d00; }
.cr-quick-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 768px) {
    body { padding-left: 12px; padding-right: 12px; }
    .float-logo { width: 62px !important; height: 62px !important; }
    .cr-page-actions { flex-direction: column; align-items: stretch; }
    .cr-form-grid { grid-template-columns: 1fr; }
    #codered-toast-holder { left: 12px; right: 12px; top: 12px; }
    .codered-toast { min-width: unset; max-width: 100%; }
    .apple-device-row, .h-device-row { flex-direction: column; align-items: center; }
}
.cr-loading { opacity: .82; cursor: wait !important; pointer-events: none; }
.cr-spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 8px; animation: cr-spin .75s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-clear-cart { border: 0; border-radius: 14px; background: var(--cr-maroon); color: var(--cr-beige); padding: 12px 16px; font-weight: 900; cursor: pointer; width: 100%; margin-top: 10px; }
