/* Reference-scale NORRA surfaces: bright artwork, quiet reading areas. */
.screen :is(.card,.j-panel,.quality-panel,.metric,.j-home-wallet,.j-home-event,.reference-identity,.reference-profile-menu,.reference-profile-stats>button){background:rgba(1,5,2,.73)!important;border-color:#c5ac5c9c!important;box-shadow:none!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.screen:is(.home,.store,.support) .hero-art,.screen .art-banner img,.screen .quality-cover img{filter:saturate(1.18) contrast(1.04)!important;opacity:1!important}
.screen .j-home-wallet{min-height:122px!important;border-color:#8dda4e!important}.screen .j-home-wallet:has(.j-home-cashback){min-height:155px!important}.screen .j-home-wallet>img{width:55%;height:115%;right:-6px;top:-6%}.screen .j-wallet-total{font-size:clamp(38px,11vw,49px)!important}.screen .j-home .metric{min-height:88px!important;height:88px!important;gap:4px!important}.screen .j-home .metric>svg{height:34px!important;width:34px!important}.screen .j-home .metric small{font-size:10px!important}.screen .j-home .art-banner{aspect-ratio:1.9}.screen .j-home-event{min-height:49px;grid-template-columns:30px minmax(0,1fr) auto 6px}.screen .j-event-copy b{font-size:12px}.screen .j-event-icon svg{width:29px;height:29px}
.screen .quality-store{padding-inline:12px}.polish-categories{display:flex;gap:3px;padding:5px;border-radius:9px;margin:0 0 11px}.polish-categories button{min-height:40px;flex:1;font:700 13px var(--j-display);padding:7px 5px}.polish-categories button.selected{background:#ffe596!important;color:#051000!important}.screen .quality-store .section-head .link{font-size:13px!important;min-height:40px}.screen .quality-store .item{min-height:91px;gap:10px;padding:8px}.screen .quality-store .product-image-button{width:94px;flex:0 0 94px}.screen .quality-store .thumb{width:94px;height:72px;object-fit:cover}.screen .quality-store .add{background:#ffe596!important;color:#061200!important;width:40px;height:40px}.screen .quality-store .item .item-main b{font-size:21px}.screen .quality-store .item .price{font-size:18px}
.screen .j-rewards{padding-inline:7px}.screen .j-wheel-illustration{aspect-ratio:1024/800}.screen .j-wheel-illustration>img{transform:scale(1.065);transform-origin:50% 0}.screen .j-wheel-features span:last-child:has(svg){display:none}.screen .j-reward-summary button{min-height:85px;gap:10px}.screen .j-reward-summary svg{width:39px;height:39px}.screen .reward-history-entry{display:flex;align-items:center;gap:12px;padding:13px;background:rgba(1,5,2,.8)!important;border:1px solid #b5a76499!important;border-radius:10px;margin-bottom:8px}.screen .reward-history-entry svg{width:32px;height:32px;flex:none;color:#f0cf72}
.polish-chat-head{display:flex;align-items:center;gap:10px;padding:15px 13px;background:rgba(1,5,2,.85);border-bottom:1px solid #c4a65b7a;margin-bottom:17px}.polish-chat-head>div{flex:1}.polish-chat-head h1{font:700 25px var(--j-display);margin:0;color:#ffe5a1}.polish-chat-head small{font:400 11px var(--j-body);color:#cbd2c0}.polish-chat-head .round{width:36px;height:36px;font-size:22px}.screen:is(.support,.supportThread) .j-support{padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))!important}.j-support .support-thread{gap:14px;padding-bottom:0}.j-support .support-bubble{background:rgba(1,5,2,.84)!important;border-color:#b6b8a778;backdrop-filter:blur(3px)}.j-support .support-entry.mine .support-bubble{background:rgba(13,46,9,.91)!important;border-color:#88d44b}.j-support .support-media{max-width:220px}.j-support .support-media img{max-height:220px;width:auto;min-width:40px}.j-compose-dock{background:linear-gradient(transparent,#030603 25%);padding-top:13px}.j-compose .send{background:#ffe596!important}.j-quick[hidden]{display:none!important}
#modal:has(.j-art-preview){align-items:center;padding:16px;background:#000b;backdrop-filter:blur(8px)}#modal:has(.j-art-preview) .modal{position:relative;max-width:570px;width:100%;max-height:calc(100dvh - 32px);border-radius:13px;padding:16px;overflow:auto}#modal .j-art-preview h2{font-size:22px;padding-right:35px;margin:0 0 12px}#modal .j-art-preview img{display:block;width:100%;height:auto;max-height:calc(100dvh - 135px);object-fit:contain}.commerce-preview.j-preview{display:flex!important;align-items:center!important;justify-content:center!important;padding:12px!important;position:fixed;inset:0}.j-preview .preview-panel{max-height:calc(100dvh - 24px)!important;margin:0!important}.j-cover-button:after{top:8px!important;bottom:auto!important;right:8px!important}.quality-film{gap:7px}.quality-film button{min-height:66px}.quality-panel summary{display:flex;justify-content:space-between;list-style:none}.quality-panel summary:after{content:'⌄';margin-left:auto}.quality-panel summary::marker{content:''}.quality-product-title h1{font-size:34px!important;color:#ffe9b4!important}.quality-price{font:800 32px/1.1 var(--j-body)!important}.quality-pack-section>.btn{background:#ffe596!important;color:#071403!important;min-height:49px}.polish-reviews>summary{font:700 22px var(--j-display);cursor:pointer}.polish-reviews .section-head h2{display:none}.polish-reviews[open]>summary{margin-bottom:12px}
.polish-mode-entry{padding-top:12px!important}.j-mode-picker .btn{margin:7px 0;min-height:43px}#polish-preview-status{position:fixed;right:8px;top:8px;z-index:99;background:#efd68c;color:#101605;border:1px solid #ffeab2;border-radius:9px;padding:9px 12px;max-width:calc(100vw - 16px);font:600 12px var(--j-body);box-shadow:0 3px 15px #0008}
@media(max-width:350px){.screen .j-home .metric small{font-size:8px!important}.screen .quality-store .product-image-button,.screen .quality-store .thumb{width:72px;flex-basis:72px}.quality-product-title h1{font-size:29px!important}.quality-price{font-size:27px!important}.polish-categories button{font-size:11px}.screen .j-wallet-total{font-size:38px!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Screen fades moved fixed chat controls into a temporary containing block. */
.screen{animation:none!important}

.polish-unread-dot{position:absolute;right:24%;top:7px;width:9px;height:9px;border-radius:50%;background:#ff303c;box-shadow:0 0 0 2px #050a06}.nav>button{position:relative}.polish-message-target .support-bubble{outline:2px solid #c9df72;outline-offset:3px}.j-notifications .j-inline-actions{flex-wrap:wrap;gap:12px}.j-notifications .j-muted-link{font-size:11px;min-height:32px}

#j-upload{padding-right:38px}.j-upload-dismiss{position:absolute;right:7px;top:7px;width:30px;height:30px;border:1px solid #a9b27988;background:#080e08;color:#f7edcb;border-radius:50%;font-size:23px;line-height:1}

.polish-payment-feedback{border-color:#dfbc65!important}.polish-payment-feedback h2{color:#f5d786}.polish-payment-feedback small{color:#d5dec9;line-height:1.5}.polish-customer-orders{background:#040904e8;border:1px solid #b8a25e9c;border-radius:10px;padding:12px;margin:0 0 18px}.polish-customer-orders summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;min-height:26px}.polish-customer-orders summary svg{width:25px;height:25px}.polish-customer-orders summary b{margin-left:auto;color:#b3fa72}.polish-customer-orders article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 0;border-bottom:1px solid #80915c55}.polish-customer-orders article>div{display:grid;gap:5px;min-width:0}.polish-customer-orders article b{overflow-wrap:anywhere}.polish-customer-orders small{font-size:11px;color:#b9c6b0}.polish-customer-orders article.selected{border-color:#b3fa72}.polish-customer-orders p{font-size:12px}.j-order-facts dd{overflow-wrap:anywhere}.j-header h1{overflow-wrap:anywhere}

.prize-row [hidden]{display:none!important}.prize-order{display:flex;gap:9px;justify-content:flex-end}.prize-order button{min-width:36px;min-height:36px;border:1px solid #9cac6c88;border-radius:7px;background:#0a1209;color:#f2dfa1}

.polish-receipt-history{padding:12px 0;margin:10px 0;border-top:1px solid #b6a66a77}.polish-receipt-history>summary{font-weight:700;cursor:pointer;color:#e2d6ad;min-height:32px}.polish-receipt-history time,.j-received>time{display:block;font-size:11px;color:#c6cfba;margin:8px 0}.polish-latest-receipt{font-size:14px;color:#b5ee84;margin:16px 0 5px}

.polish-readable-drafts details{padding:10px 0;border-bottom:1px solid #8a9e6355}.polish-readable-drafts pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 var(--j-body);color:#f2e7ca}.screen :is(h1,h2,h3),.item-main b,.reference-identity p{overflow-wrap:anywhere}

:root{color-scheme:dark}.screen input:is([type=checkbox],[type=radio]){accent-color:#93ef50}.screen input[type=checkbox]{width:19px;height:19px;flex:none}.screen input[type=radio]{accent-color:#93ef50}

.screen .reward-history-entry .polish-reward-emblem{width:38px;height:38px;display:grid;place-items:center;flex:none}.screen .reward-history-entry .polish-reward-emblem svg{width:38px;height:38px}.screen .reward-history-entry>div{min-width:0}.screen .reward-history-entry b{display:block;font:700 19px/1.15 var(--j-display);overflow-wrap:anywhere}.screen .reward-history-entry small{display:block;font:400 11px/1.4 var(--j-body);margin-top:5px;color:#cbd5bf}.screen .reward-history-entry time{margin-left:auto;flex:none;font-size:11px;color:#bec9b2}
.desk-panel{margin-bottom:12px;padding:12px;background:#070b07f2;border:1px solid #777332;border-radius:12px}.desk-state{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}.desk-state strong{color:#b5ee71}.desk-state small{color:#d2d3bd}.desk-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:12px 0}.desk-panel details{border-top:1px solid #50532a;padding-top:10px}.desk-panel summary{cursor:pointer;font-weight:700}.desk-note-form{display:grid;gap:8px;margin:12px 0}.desk-note-form label,.desk-inbox label{display:grid;gap:6px}.desk-note-form textarea{width:100%;box-sizing:border-box;background:#090f09;color:#fff;border:1px solid #6c793b;border-radius:8px;padding:10px;resize:vertical}.desk-notes article{border-top:1px solid #384125;padding:10px 0}.desk-notes time{display:block;font-size:11px;color:#c5c8ad}.desk-notes p{white-space:pre-wrap;overflow-wrap:anywhere}.desk-error{color:#ffcf93;background:#38210d;padding:10px;border-radius:8px}.desk-inbox-row{background:#080c08ed;border:1px solid #62662d;border-radius:10px;margin:9px 0;min-height:80px}.desk-inbox-row span{min-width:0;display:grid;gap:5px}.desk-inbox-row small{display:block;overflow:hidden;text-overflow:ellipsis;color:#c3c9b0}.desk-inbox select{margin-bottom:10px}
.desk-inbox select{width:100%;min-height:44px;padding:10px 34px 10px 12px;border:1px solid #727b3c;border-radius:10px;background:#0b120c;color:#e9f0d7;font:inherit;outline-offset:3px}.desk-inbox select:focus-visible{outline:2px solid #a8ef62}.desk-inbox label{font-size:12px;font-weight:700;color:#d7dfc5}
/* Final geometry: no replacement dial, no page-length scrolling in conversations. */
.basic-wheel-heading{text-align:center;padding:12px 5px 4px}.basic-wheel-heading>span{font:800 25px var(--j-display);color:#f4dc89;letter-spacing:3px}.screen .basic-wheel-heading h2{font:800 clamp(32px,9vw,43px)/1 var(--j-display)!important;margin:2px 0;color:#fff1b5}.basic-wheel-heading>b{color:#89ff39;font:800 22px var(--j-display);font-style:italic}.basic-wheel-stage{position:relative;width:100%;max-width:460px;margin:18px auto 10px}.basic-wheel-rim{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#040a03}.basic-wheel-rim>img{position:absolute;width:173.559%;max-width:none;height:auto;left:-67.797%;top:-19.492%}.basic-wheel-rotor{position:absolute;inset:8.475%;border-radius:50%;overflow:hidden;transition:transform 3.6s cubic-bezier(.12,.72,.13,1)}.basic-wheel-rotor>img{position:absolute;width:208.98%;max-width:none;height:auto;left:-91.837%;top:-33.674%}.basic-wheel-pointer{position:absolute;z-index:2;top:-14px;left:50%;transform:translateX(-50%);color:#ffe79a;font-size:41px;line-height:1;text-shadow:0 2px 1px #2c1e00,0 0 7px #ffe879}.screen .j-wheel-poster .j-reference-live-wheel{display:none!important}.screen .j-wheel-poster{padding:0 8px 10px}.screen:is(.support,.supportThread){height:var(--basic-chat-height,calc(100dvh - 72px));min-height:0!important;max-height:var(--basic-chat-height,calc(100dvh - 72px));overflow:hidden;display:flex;flex-direction:column}.shell:has(>.screen:is(.support,.supportThread)){padding-bottom:0!important}.screen:is(.support,.supportThread) .j-support{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:0 12px!important;margin:0;gap:0}.screen.supportThread>.j-support{flex:none;height:100%;box-sizing:border-box}.screen:is(.support,.supportThread) .support-thread{flex:1!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin;gap:14px;padding:10px 0 12px!important;scroll-padding-bottom:12px}.screen:is(.support,.supportThread) .support-thread>.support-entry:first-child{margin-top:auto}.screen:is(.support,.supportThread) .j-compose-dock{position:static!important;transform:none!important;left:auto!important;bottom:auto!important;width:100%!important;box-sizing:border-box;flex:none;padding:8px 0!important;margin:0!important;background:#050a05!important}.screen:is(.support,.supportThread) #support-tail{display:none!important}.screen.support .polish-chat-head{flex:none;margin-bottom:0;padding:10px 12px}.screen.supportThread .j-header{flex:none;padding:9px 0;margin-bottom:4px}.screen.supportThread .j-header h1{font-size:24px!important;margin:4px 0!important}.basic-case-tools{flex:none;border:1px solid #929a4c;border-radius:9px;margin:5px 0;background:#060c06}.basic-case-tools>summary{font:650 12px var(--j-body);padding:12px;cursor:pointer;color:#ddedbb}.basic-case-body{max-height:min(36dvh,310px);overflow:auto;padding:0 8px 8px}.basic-case-body .desk-panel,.basic-case-body .polish-customer-orders{margin:0 0 7px}.basic-case-body .polish-customer-orders article{padding:8px 0}.screen.support .j-chat-context{flex:none}.screen.support .j-quick{flex:none;max-height:180px;overflow:auto}@media(prefers-reduced-motion:reduce){.basic-wheel-rotor{transition-duration:.03s}}
.screen:is(.support,.supportThread){display:flex!important;flex-direction:column!important}.screen:is(.support,.supportThread) .support-entry{flex:none}
.release-rating{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.release-stars{position:relative;display:inline-block;font-size:17px;line-height:1;letter-spacing:1px;color:#52633d;white-space:nowrap}.release-stars>b{position:absolute;inset:0 auto 0 0;overflow:hidden;color:#a9f26b;font:inherit;white-space:nowrap}.release-rating strong{font-size:13px}.release-rating small{font-size:11px}.screen .release-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 0;align-items:start}.screen .release-progress li{display:grid;justify-items:center;text-align:center;gap:5px;color:#e7e8df;font-size:11px;position:relative}.screen .release-progress li:before{display:none}.screen .release-progress li>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;font-size:13px;background:#151a12}.screen .release-progress li>b{font-size:11px}.screen .release-progress li>small{font-size:9px;line-height:1.25;min-height:22px;color:inherit}.screen .release-progress .complete{color:#8ff45e}.screen .release-progress .complete>span{background:#173d12}.screen .release-progress .current.stage-0{color:#fff9e5}.screen .release-progress .current.stage-1{color:#ffdb63}.screen .release-progress .current.stage-1>span{background:#42340a;box-shadow:0 0 0 3px #dcc44d16}.screen .release-progress .current.stage-2{color:#9bff67}.screen .release-progress .current.stage-2>span{background:#214a13}.screen .release-progress .future{color:#a7ae9c}.screen .release-progress .stopped{color:#cba98b}.release-incoming{margin:10px 14px 16px;border:1px solid #d6bb64;border-radius:12px;padding:12px;background:linear-gradient(100deg,#293708f2,#070d07f2)}.release-incoming>button:first-child{width:100%;display:flex;align-items:center;gap:11px;text-align:left;color:#fff5c1;background:transparent;border:0;padding:0}.release-incoming svg{width:32px;height:32px;color:#f1d47e}.release-incoming button div{display:grid;gap:5px;flex:1}.release-incoming b{font-size:15px}.release-incoming small{font-size:10px;color:#d4dfbd}.release-incoming strong{display:grid;place-items:center;background:#c4f46d;border-radius:50%;color:#0b1805;min-width:36px;height:36px;font-size:18px}.release-incoming>.j-text-link{margin-top:13px}.release-review-card header{display:flex;justify-content:space-between;gap:12px;color:#e6ce82}.release-review-card time{font-size:10px}.release-review-card h2{margin:10px 0!important}.release-review-card p{font-size:12px!important}.release-product-preview{width:100%;max-height:280px;object-fit:contain}.screen .j-collection-list>button{display:grid;grid-template-columns:78px minmax(0,1fr) 35px;gap:14px;align-items:center;min-height:102px;padding:11px}.screen .j-collection-list>button>img{width:78px;height:78px;object-fit:cover}.screen .j-collection-list>button>span{min-width:0}.screen .j-collection-list b{font-size:23px!important}.screen .j-collection-list>button>i{display:grid;place-items:center;background:#4ade80;color:#102108;width:33px;height:33px;border-radius:8px;font-style:normal;font-size:22px}
.screen .release-progress li{color:#a7ae9c!important}.screen .release-progress li.complete{color:#8ff45e!important}.screen .release-progress li.current.stage-0{color:#fff9e5!important}.screen .release-progress li.current.stage-1{color:#ffdb63!important}.screen .release-progress li.current.stage-2{color:#9bff67!important}.screen .release-progress li.stopped{color:#cba98b!important}.screen .release-progress li:after{left:calc(50% + 21px);top:15px;width:calc(100% - 34px);height:2px;background:#626959}.screen .release-progress li.complete:after{background:#86d659}.release-profile-count{position:absolute;top:2px;right:12px;border-radius:10px;padding:2px 5px;background:#e6c76b;color:#0b1205;font-size:10px;font-weight:800}.nav button{position:relative}
.release-order-chip{background:transparent;border:0;color:#d1ed99;padding:0;font:600 11px var(--j-body);text-align:left;max-width:100%;overflow-wrap:anywhere}
.modal-back.open{align-items:center!important;justify-content:center!important;box-sizing:border-box;padding:16px!important}.modal-back.open>.modal{margin:auto!important;max-height:calc(100dvh - 32px)!important}

/* ==========================================================
   NORRA x BOTLAB DESIGN SYSTEM: FORUM QUEUE, TICKET CENTER & HERO HOME
   ========================================================== */

/* 1. Global Contrast & Brightness Fixes (Acceptance B01, V02) */
.screen.store, .screen.home, .screen.support {
  filter: none !important;
  opacity: 1 !important;
}
.screen.store .item, .screen.store .card {
  background: #090e09 !important;
  border: 1px solid #334424 !important;
  transition: border-color .18s, box-shadow .18s;
}
.screen.store .item:hover {
  border-color: #ffe596 !important;
  box-shadow: 0 0 16px rgba(156,243,74,0.12) !important;
}
.screen .quality-store .thumb {
  filter: none !important;
  opacity: 1 !important;
  border-radius: 8px;
}

/* 2. Customer Support Center */
.customer-support-center {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  padding: 16px 14px 80px !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
}
.support-center-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, #101c10 0%, #060a06 100%);
  border: 1px solid #4b6630;
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.support-center-copy h1 {
  font: 700 24px/1.15 var(--j-display);
  color: #f7faef;
  margin: 0 0 6px;
}
.support-center-copy p {
  font: 400 13px/1.4 var(--j-body);
  color: #b5c2a8;
  margin: 0;
}
.primary-action-btn {
  background: linear-gradient(100deg, #ffe596, #d4af37) !important;
  color: #051402 !important;
  font: 700 14px var(--j-body) !important;
  border-radius: 10px !important;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(156,243,74,0.25) !important;
}
.customer-tickets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-ticket-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #080e08;
  border: 1px solid #334425;
  border-radius: 12px;
  padding: 14px 15px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.customer-ticket-card:hover {
  border-color: #ffe596;
  background: #0c150c;
}
.customer-ticket-card.is-closed {
  opacity: 0.75;
  border-color: #242e20;
}
.ticket-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-num {
  font: 700 12px var(--j-body);
  color: #ffe596;
}
.card-cat {
  font: 500 11px var(--j-body);
  color: #9aa88f;
  background: #111a11;
  padding: 2px 7px;
  border-radius: 6px;
}
.status-pill {
  margin-left: auto;
  font: 600 10px/1 var(--j-body);
  padding: 4px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.status-pill.status-new {
  background: #0d2833;
  color: #60d5f7;
  border: 1px solid #195b73;
}
.status-pill.status-in_progress {
  background: #153210;
  color: #ffe596;
  border: 1px solid #366d21;
}
.status-pill.status-waiting_customer {
  background: #332709;
  color: #f7cd5e;
  border: 1px solid #775c1a;
}
.status-pill.status-closed {
  background: #181c17;
  color: #8c9985;
  border: 1px solid #2e362c;
}
.card-subject {
  font: 700 16px/1.2 var(--j-display);
  color: #f1f5e9;
  margin: 0;
}
.card-last-msg {
  font: 400 12px/1.4 var(--j-body);
  color: #96a58a;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 400 11px var(--j-body);
  color: #6e7d63;
  border-top: 1px solid #1a2516;
  padding-top: 6px;
  margin-top: 2px;
}
.open-link {
  color: #ffe596;
  font-weight: 600;
}
.ticket-thread-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #090f09;
  border-bottom: 1px solid #2d3b23;
  flex: none;
}
.ticket-thread-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.ticket-thread-title strong {
  font: 700 14px var(--j-display);
  color: #f2f5ea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-closed-notice {
  background: #111a11;
  border: 1px solid #384d26;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin: 10px 0;
}
.ticket-closed-notice p {
  font: 500 13px/1.4 var(--j-body);
  color: #d1dcbe;
  margin: 0 0 10px;
}
.ticket-closed-notice small {
  display: block;
  font: 400 11px var(--j-body);
  color: #9ba88e;
  margin-bottom: 12px;
}
.support-archive-details summary, .support-quick-faq summary {
  cursor: pointer;
  font: 600 13px var(--j-body);
  color: #b7c7a3;
  padding: 10px 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}
.faq-item {
  background: #090e09;
  border: 1px solid #28371c;
  border-radius: 10px;
  padding: 12px 14px;
}
.faq-item strong {
  display: block;
  font: 600 13px var(--j-body);
  color: #e8ede1;
  margin-bottom: 4px;
}
.faq-item p {
  font: 400 12px/1.4 var(--j-body);
  color: #a4b395;
  margin: 0;
}

/* 3. Staff Forum Queue (Acceptance B04, B05) */
.desk-forum-wrap {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto;
  box-sizing: border-box;
}
.desk-forum-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.desk-forum-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #080e08;
  border: 1px solid #28371c;
  border-radius: 12px;
  padding: 6px;
}
.forum-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: #a3b295;
  font: 600 13px var(--j-body);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.forum-tab:hover {
  background: #121c11;
  color: #e4eee0;
}
.forum-tab.active {
  background: #ffe596;
  color: #061502;
}
.forum-tab .tab-count {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
}
.desk-forum-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.desk-search {
  flex: 1;
  min-width: 200px;
  background: #090e09 !important;
  border: 1px solid #334424 !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 9px 12px !important;
  font: 400 13px var(--j-body) !important;
}
.desk-lang-select {
  background: #090e09;
  border: 1px solid #334424;
  border-radius: 10px;
  color: #d1dcbe;
  padding: 9px 12px;
  font: 600 12px var(--j-body);
}
.desk-forum-list {
  display: grid;
  gap: 10px;
}
@media (min-width: 900px) {
  .desk-forum-list {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}
.desk-ticket-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #080e08;
  border: 1px solid #29381e;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.desk-ticket-card:hover {
  border-color: #ffe596;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
.desk-ticket-card.is-mine {
  border-left: 4px solid #ffe596;
}
.ticket-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.ticket-id {
  font-weight: 700;
  color: #ffe596;
}
.ticket-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
}
.ticket-badge.status-new { background: #0c2530; color: #60d5f7; border: 1px solid #1a566d; }
.ticket-badge.status-in_progress { background: #132e0e; color: #ffe596; border: 1px solid #31661d; }
.ticket-badge.status-waiting_customer { background: #2e240a; color: #f5cb64; border: 1px solid #6b5319; }
.ticket-badge.status-closed { background: #161a15; color: #7f8a77; border: 1px solid #262c24; }
.ticket-lang {
  background: #141f13;
  color: #cbd5bf;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 9px;
}
.ticket-user {
  font-weight: 600;
  color: #dde5d2;
}
.ticket-time {
  margin-left: auto;
  color: #718165;
  font-size: 10px;
}
.ticket-subject {
  font: 700 15px/1.25 var(--j-display);
  color: #f7faf2;
  margin: 0;
}
.ticket-snippet {
  font: 400 12px/1.4 var(--j-body);
  color: #91a284;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ticket-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #1a2517;
  padding-top: 8px;
  font-size: 11px;
  color: #829277;
}
.ticket-assignee b {
  color: #d8e5cb;
}
.ticket-arrow {
  color: #ffe596;
  font-weight: 700;
  font-size: 13px;
}

/* 4. BotLab Home Screen Grid (Acceptance B02, B05) */
.botlab-home-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.botlab-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #101c10;
  border: 1px solid #3d5826;
  border-radius: 20px;
  padding: 6px 14px;
  font: 600 11px var(--j-body);
  color: #ffe596;
  align-self: flex-start;
}
.botlab-hero-catalog {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(115deg, #1f3d10 0%, #0d1e08 60%, #060c04 100%);
  border: 1px solid #ffe596;
  border-radius: 16px;
  padding: 20px 18px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 24px rgba(156,243,74,0.18);
  transition: all .18s ease;
}
.botlab-hero-catalog:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(156,243,74,0.3);
  border-color: #baff6c;
}
.hero-catalog-icon {
  width: 46px;
  height: 46px;
  background: #ffe596;
  color: #061502;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}
.hero-catalog-icon svg {
  width: 26px;
  height: 26px;
}
.hero-catalog-copy {
  flex: 1;
  min-width: 0;
}
.hero-catalog-copy h2 {
  font: 700 24px/1.1 var(--j-display);
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: .5px;
}
.hero-catalog-copy p {
  font: 400 12px var(--j-body);
  color: #b0c29f;
  margin: 0;
}
.hero-catalog-arrow {
  color: #ffe596;
  font-size: 26px;
  font-weight: 700;
}
.botlab-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.botlab-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #080e08;
  border: 1px solid #2f4021;
  border-radius: 14px;
  padding: 15px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.botlab-tile:hover {
  border-color: #ffe596;
  background: #0d170d;
}
.botlab-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #121e10;
  color: #ffe596;
  margin-bottom: 2px;
}
.botlab-tile-icon svg {
  width: 18px;
  height: 18px;
}
.botlab-tile h3 {
  font: 700 16px/1.2 var(--j-display);
  color: #f3f6ee;
  margin: 0;
}
.botlab-tile p {
  font: 400 11px/1.35 var(--j-body);
  color: #90a085;
  margin: 0;
}
.botlab-wide-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #080e08;
  border: 1px solid #2f4021;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
  margin-bottom: 18px;
}
.botlab-wide-tile:hover {
  border-color: #ffe596;
  background: #0d170d;
}
.wide-tile-copy {
  flex: 1;
  min-width: 0;
}
.wide-tile-copy h3 {
  font: 700 17px/1.15 var(--j-display);
  color: #f3f6ee;
  margin: 0 0 3px;
}
.wide-tile-copy p {
  font: 400 11px var(--j-body);
  color: #90a085;
  margin: 0;
}

/* ==========================================================
   STOREFRONT REFINEMENTS: SEARCH, SORTING & STOCK BADGES
   ========================================================== */
.store-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 14px;
}
.store-search-wrap {
  position: relative;
  width: 100%;
}
.store-search-input {
  width: 100%;
  box-sizing: border-box;
  background: #090f09 !important;
  border: 1px solid #334424 !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 11px 14px 11px 38px !important;
  font: 400 13px var(--j-body) !important;
  transition: border-color .15s, box-shadow .15s;
}
.store-search-input:focus {
  border-color: #ffe596 !important;
  box-shadow: 0 0 12px rgba(156,243,74,0.15) !important;
  outline: none;
}
.store-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #7d8f72;
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.store-sort-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.store-sort-pills::-webkit-scrollbar { display: none; }
.store-sort-pill {
  white-space: nowrap;
  background: #0b130b;
  border: 1px solid #28371c;
  color: #a3b295;
  font: 600 11px var(--j-body);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .15s ease;
}
.store-sort-pill.active {
  background: #ffe596;
  color: #061502;
  border-color: #ffe596;
  font-weight: 700;
}
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 10px var(--j-body);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: .3px;
  width: fit-content;
}
.stock-badge.in-stock {
  background: #112810;
  color: #ffe596;
  border: 1px solid #2b5420;
}
.stock-badge.low-stock {
  background: #2b2008;
  color: #f7cd5e;
  border: 1px solid #634b15;
}
.stock-badge.out-of-stock {
  background: #181c17;
  color: #8c9985;
  border: 1px solid #2d352b;
}

/* Pack Picker Segments */
.pack-picker {
  margin: 16px 0;
}
.pack-picker .eyebrow {
  color: #ffe596;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}
.pack-picker>div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.pack-picker button {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #090f09;
  border: 1px solid #334424;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
}
.pack-picker button:hover {
  border-color: #72a344;
}
.pack-picker button.selected {
  border-color: #ffe596 !important;
  background: #101c10 !important;
  box-shadow: 0 0 14px rgba(156,243,74,0.12);
}
.pack-picker button b {
  font: 700 15px var(--j-display);
  color: #f3f6ee;
}
.pack-picker button span {
  font: 700 14px var(--j-body);
  color: #ffe596;
}
.pack-picker button small {
  font: 400 10px var(--j-body);
  color: #8fa084;
}

/* Top-up Balance Modal */
.topup-modal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.topup-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.topup-method-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #080e08;
  border: 1px solid #2e4020;
  border-radius: 10px;
  padding: 10px 12px;
  color: #d1dcbe;
  font: 600 12px var(--j-body);
  cursor: pointer;
  transition: all .15s;
}
.topup-method-btn.selected {
  background: #122212;
  border-color: #ffe596;
  color: #fff;
  box-shadow: 0 0 10px rgba(156,243,74,0.15);
}
.topup-amounts {
  display: flex;
  gap: 8px;
}
.topup-amount-btn {
  flex: 1;
  background: #0b130b;
  border: 1px solid #334424;
  color: #f0f4ea;
  font: 700 13px var(--j-display);
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.topup-amount-btn.selected {
  background: #ffe596;
  color: #051402;
  border-color: #ffe596;
}


/* ==========================================================================
   NORRA 24/7 ULTRA CYBER-LUXURY & PERSISTENT WIDGET ENGINE (2026 ZBT)
   Fixes: Style retention across dynamic widget updates + Next-Gen Aesthetics
   ========================================================================== */

body {
  background-color: #030503 !important;
  color: #f2f7ed !important;
  font-family: Inter, system-ui, -apple-system, sans-serif !important;
}

.shell {
  background: radial-gradient(circle at 50% -20%, rgba(156,243,74,0.12) 0%, transparent 60%),
              radial-gradient(circle at 100% 50%, rgba(231,201,121,0.06) 0%, transparent 40%),
              #050805 !important;
  box-shadow: 0 0 80px rgba(0,0,0,0.9), 0 0 30px rgba(156,243,74,0.06) !important;
}

/* 2. Universal Card & Panel Treatment - Immune to Re-render */
.screen .card,
.screen .j-panel,
.screen .quality-panel,
.screen .metric,
.screen .item,
.screen .botlab-tile,
.screen .j-home-wallet,
.screen .reward-tile,
.screen .profile-card,
.screen article.item,
.screen .reward-history-entry,
.screen .desk-panel,
.screen .desk-inbox-row,
.screen .ticket-card,
.screen .reference-identity,
.screen .profile-wallet {
  background: linear-gradient(135deg, rgba(14, 24, 14, 0.76) 0%, rgba(6, 11, 6, 0.92) 100%) !important;
  border: 1px solid rgba(156, 243, 74, 0.2) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.screen .card:hover,
.screen .item:hover,
.screen .botlab-tile:hover,
.screen .reward-history-entry:hover,
.screen .desk-inbox-row:hover,
.screen .ticket-card:hover {
  border-color: rgba(156, 243, 74, 0.5) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(156, 243, 74, 0.18) !important;
  transform: translateY(-2px) !important;
}

/* 3. Electric Buttons & CTAs */
.btn, 
.primary-action-btn, 
button[type="submit"]:not(.close) {
  background: linear-gradient(110deg, #ffe596 0%, #76d426 100%) !important;
  color: #040e02 !important;
  font: 800 14px var(--j-display, Inter) !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: 1px solid #b6ff73 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(156, 243, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.btn:hover, 
.primary-action-btn:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 24px rgba(156, 243, 74, 0.45), 0 0 12px rgba(156, 243, 74, 0.25) !important;
  filter: brightness(1.05) !important;
}

.btn:active, 
.primary-action-btn:active {
  transform: scale(0.97) !important;
  box-shadow: 0 2px 8px rgba(156, 243, 74, 0.25) !important;
}

.btn.secondary {
  background: rgba(12, 22, 12, 0.85) !important;
  color: #e5eedc !important;
  border: 1px solid rgba(156, 243, 74, 0.25) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.btn.secondary:hover {
  border-color: #ffe596 !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(156, 243, 74, 0.2) !important;
}

.btn:disabled, 
.btn[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 4. Luxury Storefront Products */
.screen .item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
}
.screen .item .thumb {
  width: 72px !important;
  height: 72px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(156, 243, 74, 0.2) !important;
  object-fit: cover !important;
  transition: transform 0.25s ease !important;
}
.screen .item:hover .thumb {
  transform: scale(1.04) !important;
}
.screen .item-main b {
  font: 700 17px/1.2 var(--j-display, Inter) !important;
  color: #f7faf2 !important;
  letter-spacing: 0.2px !important;
}
.screen .item .price {
  font: 800 18px/1.1 var(--j-display, Inter) !important;
  color: #ffe596 !important;
  text-shadow: 0 0 10px rgba(156, 243, 74, 0.25) !important;
  margin-top: 4px !important;
}
.screen .item .add {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #ffe596 !important;
  color: #051402 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  border: 1px solid #baff7a !important;
  box-shadow: 0 0 14px rgba(156, 243, 74, 0.3) !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.screen .item .add:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 20px rgba(156, 243, 74, 0.5) !important;
}

/* Store Tabs */
.screen .tabs, .polish-categories {
  background: rgba(8, 14, 8, 0.85) !important;
  border: 1px solid rgba(156, 243, 74, 0.15) !important;
  border-radius: 14px !important;
  padding: 5px !important;
  gap: 4px !important;
}
.screen .tabs button, .polish-categories button {
  border-radius: 10px !important;
  font: 700 12px/1 var(--j-body, Inter) !important;
  color: #a5b497 !important;
  padding: 8px 12px !important;
  transition: all 0.15s ease !important;
}
.screen .tabs button.selected, .polish-categories button.selected {
  background: #ffe596 !important;
  color: #061502 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 12px rgba(156, 243, 74, 0.35) !important;
}

/* 5. Ultra-Premium Glass Bottom Navigation */
.nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(470px, 100%) !important;
  height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: rgba(4, 7, 4, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(156, 243, 74, 0.18) !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  z-index: 100 !important;
}
.nav button {
  background: transparent !important;
  border: 0 !important;
  color: #798a6f !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font: 600 11px var(--j-body, Inter) !important;
  transition: all 0.2s ease !important;
}
.nav button svg {
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}
.nav button:hover {
  color: #b9d4a6 !important;
}
.nav button.active {
  color: #ffe596 !important;
  font-weight: 700 !important;
}
.nav button.active svg {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 8px #ffe596) !important;
}
.nav-dot {
  background: #ff3344 !important;
  box-shadow: 0 0 8px #ff3344 !important;
}

/* 6. High-End Wheel of Fortune (Roulette) */
.basic-wheel-stage {
  filter: drop-shadow(0 0 35px rgba(156, 243, 74, 0.22)) !important;
  margin: 16px auto !important;
}
.basic-wheel-rim {
  border: 3px solid #ffe596 !important;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 25px rgba(156, 243, 74, 0.3) !important;
}
.basic-wheel-heading>span {
  color: #e7c979 !important;
  letter-spacing: 4px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(231,201,121,0.4) !important;
}
.basic-wheel-heading>b {
  color: #ffe596 !important;
  text-shadow: 0 0 12px rgba(156,243,74,0.4) !important;
}
.basic-wheel-pointer {
  color: #e7c979 !important;
  filter: drop-shadow(0 0 10px #e7c979) !important;
}

/* 7. Support & Chat Center Polish */
.support-thread {
  background: transparent !important;
}
.support-bubble, .bubble {
  background: rgba(14, 22, 14, 0.85) !important;
  border: 1px solid rgba(156, 243, 74, 0.16) !important;
  border-radius: 14px 14px 14px 4px !important;
  color: #f0f5eb !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(8px) !important;
}
.mine .bubble, .support-entry.mine .support-bubble {
  background: linear-gradient(135deg, rgba(20, 52, 16, 0.95) 0%, rgba(12, 32, 10, 0.95) 100%) !important;
  border: 1px solid rgba(156, 243, 74, 0.45) !important;
  border-radius: 14px 14px 4px 14px !important;
  box-shadow: 0 4px 18px rgba(156, 243, 74, 0.14) !important;
}
.screen.support .compose, .j-compose {
  background: rgba(8, 14, 8, 0.95) !important;
  border: 1px solid rgba(156, 243, 74, 0.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(12px) !important;
}

/* 8. Modals (Authentic NORRA 24/7 Streetwear & VIP Club Aesthetic) */
.modal-back {
  background: rgba(2, 5, 2, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.modal {
  position: relative !important;
  background: linear-gradient(135deg, rgba(16, 26, 12, 0.96) 0%, rgba(5, 9, 5, 0.98) 100%), url('/assets/grunge-v4.webp') center/cover !important;
  border: 1px solid rgba(244, 209, 124, 0.5) !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 240, 180, 0.45), 0 0 35px rgba(244, 209, 124, 0.15) !important;
  padding: 24px 20px 36px !important;
}
.modal::before {
  content: '' !important;
  display: block !important;
  width: 44px !important;
  height: 4px !important;
  background: rgba(244, 209, 124, 0.45) !important;
  border-radius: 999px !important;
  margin: -8px auto 16px !important;
  box-shadow: 0 0 10px rgba(244, 209, 124, 0.3) !important;
}
.modal h2 {
  color: #fce08b !important;
  font: 900 28px/1.05 'Barlow Condensed', 'Norra UI', Arial, sans-serif !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 15px rgba(244, 209, 124, 0.3) !important;
  margin: 0 0 10px !important;
}
.modal .close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(18, 26, 14, 0.85) !important;
  border: 1px solid rgba(244, 209, 124, 0.45) !important;
  color: #fce08b !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}
.modal .close:hover {
  transform: rotate(90deg) scale(1.08) !important;
  border-color: #ffe596 !important;
  background: rgba(30, 44, 22, 0.95) !important;
  box-shadow: 0 0 14px rgba(244, 209, 124, 0.5) !important;
}

/* Modals Button System: Signature Gold Gradient Overrides Flat Lime */
.modal .btn:not(.secondary) {
  background: linear-gradient(135deg, #ffe596 0%, #e2b94f 50%, #b38827 100%) !important;
  color: #070d04 !important;
  font: 900 17px/1.1 'Barlow Condensed', 'Norra UI', Arial, sans-serif !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border: 1px solid #fff2ba !important;
  border-radius: 9px !important;
  padding: 13px 20px !important;
  box-shadow: 0 4px 20px rgba(226, 185, 79, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
.modal .btn:not(.secondary):hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 26px rgba(226, 185, 79, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.modal .btn.secondary {
  background: rgba(14, 22, 12, 0.75) !important;
  color: #b7c3aa !important;
  border: 1px solid rgba(138, 150, 90, 0.35) !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font: 800 13px 'Barlow Condensed', Arial, sans-serif !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.modal .btn.secondary:hover {
  background: rgba(22, 34, 18, 0.95) !important;
  color: #fff !important;
  border-color: rgba(244, 209, 124, 0.5) !important;
  box-shadow: 0 0 12px rgba(244, 209, 124, 0.2) !important;
}

/* 9. Tactical Streetwear Input Controls */
input:not([type="checkbox"]):not([type="radio"]), 
textarea, 
select {
  background: linear-gradient(135deg, rgba(8, 14, 8, 0.95), rgba(4, 7, 4, 0.98)) !important;
  border: 1px solid rgba(160, 138, 70, 0.4) !important;
  border-radius: 9px !important;
  color: #f7faf2 !important;
  font: 600 14px/1.4 'Barlow Condensed', Inter, sans-serif !important;
  letter-spacing: 0.4px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.18s ease !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus, 
textarea:focus, 
select:focus {
  border-color: #fce08b !important;
  background: linear-gradient(135deg, rgba(14, 24, 13, 0.98), rgba(6, 11, 6, 0.99)) !important;
  box-shadow: 0 0 18px rgba(244, 209, 124, 0.35), inset 0 0 8px rgba(244, 209, 124, 0.1) !important;
  outline: none !important;
}

/* =====================================================================
   10. MOBILE SAFARI & DYNAMIC ISLAND SAFE AREA ENGINE (ZBT v11)
   ===================================================================== */
:root {
  --safe-top: max(44px, env(safe-area-inset-top, 44px));
  --safe-bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

/* Persistent iOS Safe-Area & Notch Shield (prevents scrolled content clashing with status bar) */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--safe-top, 44px) !important;
  background: #030603 !important;
  z-index: 999 !important;
  pointer-events: none !important;
}

/* Ensure root containers respect iOS status bar & Dynamic Island */
.shell {
  padding-top: var(--safe-top) !important;
}

.intro-inner {
  padding-top: calc(var(--safe-top) + 12px) !important;
}

.j-page {
  padding-top: calc(var(--safe-top) + 8px) !important;
}

.screen:is(.admin, .supportInbox, .supportThread, .support, .orderDetail, .digitalProduct, .settings-page) {
  padding-top: calc(var(--safe-top) + 10px) !important;
}

.j-page.j-order-detail {
  padding-top: 14px !important;
}

/* Floating headers, top actions & back buttons */
.j-back, .screen .j-back, .page-top .round:first-child {
  margin-top: 4px !important;
}

.top-actions {
  top: 10px !important;
}

.hero .top-actions {
  top: 10px !important;
}

/* Sleek iOS Push-style Alert Toast for notices */
.experience-error {
  position: fixed !important;
  z-index: 10050 !important;
  top: calc(var(--safe-top, 44px) + 8px) !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(420px, calc(100vw - 28px)) !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: rgba(18, 26, 15, 0.96) !important;
  border: 1px solid #d4b566 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 16px rgba(212, 181, 102, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #fff !important;
  font: 500 13px/1.4 var(--j-body, Inter) !important;
  animation: slideDownToast 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.experience-error button {
  border: 0 !important;
  background: none !important;
  color: #d4b566 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  margin-left: auto !important;
  cursor: pointer !important;
}
@keyframes slideDownToast {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Custom Support Ticket Modal Styling (NORRA Streetwear VIP) */
.new-ticket-modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.norra-modal-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-right: 36px;
}
.norra-vip-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(110deg, #fce08b, #d4a742);
  color: #0c1206;
  font: 900 11px/1 'Barlow Condensed', 'Norra UI', Arial, sans-serif;
  letter-spacing: 1.5px;
  border-radius: 5px;
  padding: 4px 9px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
}
.norra-status-live {
  font: 800 10px 'Barlow Condensed', Arial, sans-serif;
  color: #89ff39;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 0 8px rgba(137, 255, 57, 0.4);
}
.norra-display-title {
  font: 900 28px/1.05 'Barlow Condensed', 'Norra UI', Arial, sans-serif !important;
  color: #fce08b !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin: 0 0 5px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(244, 209, 124, 0.35) !important;
}
.custom-modal-subtitle {
  font: 700 11px/1.4 'Barlow Condensed', Inter, sans-serif !important;
  color: #aab89b !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}
.new-ticket-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.new-ticket-form .f-grid.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 440px) {
  .new-ticket-form .f-grid.two-col {
    grid-template-columns: 1fr;
  }
}
.f-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.f-label-title {
  font: 800 11px/1.2 'Barlow Condensed', 'Norra UI', Arial, sans-serif !important;
  color: #d8c27a !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.f-label-title .req {
  color: #89ff39 !important;
}
.f-field select,
.f-field input,
.f-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(8, 14, 8, 0.95), rgba(4, 7, 4, 0.98)) !important;
  border: 1px solid rgba(160, 138, 70, 0.45) !important;
  border-radius: 9px !important;
  padding: 12px 14px !important;
  color: #f7faf2 !important;
  font: 600 14px/1.4 'Barlow Condensed', Inter, sans-serif !important;
  letter-spacing: 0.4px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
  outline: none !important;
  transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.f-field select:focus,
.f-field input:focus,
.f-field textarea:focus {
  border-color: #fce08b !important;
  background: linear-gradient(135deg, rgba(14, 24, 13, 0.98), rgba(6, 11, 6, 0.99)) !important;
  box-shadow: 0 0 18px rgba(244, 209, 124, 0.35), inset 0 0 8px rgba(244, 209, 124, 0.1) !important;
}
.f-field .readonly-field {
  background: rgba(8, 14, 8, 0.8) !important;
  color: #e4c775 !important;
  border-color: rgba(160, 138, 70, 0.3) !important;
  font-weight: 700 !important;
}
.modal-form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.norra-cta-btn {
  background: linear-gradient(135deg, #ffe596 0%, #e2b94f 50%, #b38827 100%) !important;
  color: #070d04 !important;
  font: 900 17px/1.1 'Barlow Condensed', 'Norra UI', Arial, sans-serif !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border: 1px solid #fff2ba !important;
  border-radius: 9px !important;
  padding: 14px 20px !important;
  box-shadow: 0 4px 20px rgba(226, 185, 79, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: transform .15s, box-shadow .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
.norra-cta-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 26px rgba(226, 185, 79, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.norra-cta-btn:active {
  transform: translateY(1px) !important;
}
.norra-cancel-btn {
  background: rgba(14, 22, 12, 0.75) !important;
  color: #b7c3aa !important;
  border: 1px solid rgba(138, 150, 90, 0.35) !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font: 800 13px 'Barlow Condensed', Arial, sans-serif !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all .15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.norra-cancel-btn:hover {
  background: rgba(22, 34, 18, 0.95) !important;
  color: #fff !important;
  border-color: rgba(244, 209, 124, 0.5) !important;
  box-shadow: 0 0 12px rgba(244, 209, 124, 0.2) !important;
}

/* Sleek View Mode Floating Cyber-Pill (replaces clumsy top banner) */
#polish-preview-status {
  position: fixed !important;
  top: calc(var(--safe-top) + 6px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
  background: linear-gradient(135deg, rgba(231, 201, 121, 0.95), rgba(180, 140, 50, 0.95)) !important;
  color: #050805 !important;
  border: 1px solid #ffe9b4 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font: 700 12px/1.3 var(--j-display, Inter) !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(231, 201, 121, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 10050 !important;
}

/* Clean up hero floating black shortcut circle */
.reference-avatar-shortcut {
  display: none !important;
}

.reference-benefits-shortcut {
  top: calc(var(--safe-top) + 12px) !important;
  right: 16px !important;
  background: rgba(8, 14, 8, 0.85) !important;
  border: 1px solid rgba(231, 201, 121, 0.6) !important;
  box-shadow: 0 0 15px rgba(231, 201, 121, 0.25) !important;
  backdrop-filter: blur(8px) !important;
}

/* =====================================================================
   11. BOTLAB CYBER-LUXURY REWARDS SCREEN (Empty State & Prize Cards)
   ===================================================================== */
.j-empty-rewards {
  text-align: center !important;
  padding: 36px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(12, 20, 12, 0.85), rgba(3, 7, 4, 0.95)) !important;
  border: 1px solid rgba(156, 243, 74, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.j-empty-rewards-art {
  position: relative !important;
  width: 74px !important;
  height: 74px !important;
  margin: 0 auto 20px !important;
  display: grid !important;
  place-items: center !important;
  background: radial-gradient(circle, rgba(156, 243, 74, 0.15) 0%, transparent 70%) !important;
  border: 1px solid rgba(231, 201, 121, 0.4) !important;
  border-radius: 50% !important;
}

.j-empty-wheel-glow {
  position: absolute !important;
  inset: -15px !important;
  background: radial-gradient(circle, rgba(156, 243, 74, 0.2) 0%, transparent 65%) !important;
  animation: pulse-glow 3s infinite alternate ease-in-out !important;
  pointer-events: none !important;
}

@keyframes pulse-glow {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 1; }
}

.j-empty-ico {
  width: 36px !important;
  height: 36px !important;
  color: #e7c979 !important;
  filter: drop-shadow(0 0 10px rgba(231, 201, 121, 0.6)) !important;
}

.j-empty-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #cbd4c2 !important;
  max-width: 360px !important;
  margin: 10px auto 24px !important;
}

.j-empty-cta {
  min-height: 48px !important;
  font-size: 15px !important;
}

/* Active Reward Cards in History */
.j-reward-card {
  margin-bottom: 14px !important;
  border: 1px solid rgba(231, 201, 121, 0.35) !important;
  background: linear-gradient(125deg, rgba(16, 25, 14, 0.8), rgba(6, 11, 7, 0.9)) !important;
  border-radius: 14px !important;
}

.j-reward-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
}

.j-reward-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font: 700 11px var(--j-display, Inter) !important;
  letter-spacing: 0.5px !important;
}

.j-reward-badge.prize {
  background: rgba(231, 201, 121, 0.15) !important;
  border: 1px solid rgba(231, 201, 121, 0.5) !important;
  color: #e7c979 !important;
}

.j-reward-badge.balance {
  background: rgba(156, 243, 74, 0.15) !important;
  border: 1px solid rgba(156, 243, 74, 0.5) !important;
  color: #ffe596 !important;
}

.j-reward-title {
  font: 700 20px/1.2 var(--j-display, Inter) !important;
  color: #f7f9f2 !important;
  margin: 0 0 6px !important;
}

.j-reward-card-foot {
  margin-top: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

/* NORRA Fulfillment & Operator Workstation Cyber Design */
.f-type-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font: 700 10px/1.2 var(--j-display, Inter) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}
.f-type-tag.taxi {
  background: rgba(255, 204, 0, 0.15) !important;
  border: 1px solid rgba(255, 204, 0, 0.45) !important;
  color: #ffd633 !important;
}
.f-type-tag.locker {
  background: rgba(80, 227, 194, 0.15) !important;
  border: 1px solid rgba(80, 227, 194, 0.45) !important;
  color: #50e3c2 !important;
}
.f-type-tag.wholesale {
  background: rgba(231, 201, 121, 0.15) !important;
  border: 1px solid rgba(231, 201, 121, 0.5) !important;
  color: #e7c979 !important;
}
.f-detail-card {
  margin: 16px 0 !important;
  padding: 18px !important;
  background: rgba(18, 27, 14, 0.85) !important;
  border: 1px solid rgba(125, 137, 82, 0.4) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(8px) !important;
}
.f-detail-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(125, 137, 82, 0.25) !important;
}
.f-detail-header h3 {
  font: 700 14px var(--j-display, Inter) !important;
  color: #f7f9f2 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.f-op-badge {
  font: 700 10px var(--j-display, Inter) !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  letter-spacing: 0.5px !important;
}
.f-op-badge.assigned {
  background: rgba(191, 243, 75, 0.15) !important;
  border: 1px solid rgba(191, 243, 75, 0.4) !important;
  color: #bff34b !important;
}
.f-op-badge.unassigned {
  background: rgba(255, 170, 0, 0.15) !important;
  border: 1px solid rgba(255, 170, 0, 0.4) !important;
  color: #ffaa00 !important;
}
.f-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 16px !important;
}
@media (max-width: 540px) {
  .f-detail-grid {
    grid-template-columns: 1fr !important;
  }
}
.f-detail-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.f-detail-item small {
  font-size: 10px !important;
  color: #aab495 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}
.f-detail-item strong {
  font-size: 13px !important;
  color: #f7f9f2 !important;
  word-break: break-word !important;
}
.f-detail-item .tel-link {
  color: #bff34b !important;
  text-decoration: underline !important;
  font-weight: 700 !important;
}
.f-dispatch-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 12px 16px !important;
  background: rgba(231, 201, 121, 0.12) !important;
  border: 1px solid rgba(231, 201, 121, 0.45) !important;
  border-radius: 8px !important;
}
.f-dispatch-banner strong {
  font-size: 15px !important;
  letter-spacing: 1px !important;
}
.f-copy-btn {
  background: rgba(231, 201, 121, 0.2) !important;
  border: 1px solid #e7c979 !important;
  border-radius: 4px !important;
  color: #e7c979 !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  transition: all 0.2s !important;
}
.f-copy-btn:hover {
  background: rgba(231, 201, 121, 0.35) !important;
}
.f-op-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(125, 137, 82, 0.25) !important;
}
.f-op-actions .btn {
  flex: 1 !important;
  min-width: 170px !important;
  text-align: center !important;
  justify-content: center !important;
}

/* NORRA Payment Hub & Multi-Currency Requisites Engine */
.p-hub {
  padding: 18px !important;
  border: 1px solid rgba(231, 201, 121, 0.35) !important;
  background: rgba(14, 20, 11, 0.9) !important;
  border-radius: 12px !important;
}
.p-amount-due {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 14px !important;
  background: rgba(18, 27, 14, 0.8) !important;
  border: 1px solid rgba(125, 137, 82, 0.35) !important;
  border-radius: 8px !important;
  margin: 14px 0 16px !important;
}
.p-amount-due span {
  font-size: 13px !important;
  color: #dfdfca !important;
}
.p-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.p-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 10px !important;
  background: rgba(18, 27, 14, 0.7) !important;
  border: 1px solid rgba(125, 137, 82, 0.4) !important;
  border-radius: 8px !important;
  color: #aab495 !important;
  font: 700 12px/1 var(--j-display, Inter) !important;
  letter-spacing: 0.6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.p-tab:hover {
  background: rgba(27, 40, 20, 0.9) !important;
  border-color: rgba(191, 243, 75, 0.5) !important;
  color: #f7f9f2 !important;
}
.p-tab.active {
  background: linear-gradient(180deg, rgba(231, 201, 121, 0.25) 0%, rgba(18, 27, 14, 0.95) 100%) !important;
  border-color: #e7c979 !important;
  color: #e7c979 !important;
  box-shadow: 0 0 14px rgba(231, 201, 121, 0.3) !important;
}
.p-requisites-card {
  padding: 16px !important;
  background: rgba(10, 16, 9, 0.95) !important;
  border: 1px solid rgba(125, 137, 82, 0.4) !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
}
.p-requisites-card.crypto {
  border-color: rgba(80, 227, 194, 0.4) !important;
}
.p-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.p-bank-badge {
  font: 700 11px var(--j-display, Inter) !important;
  color: #bff34b !important;
  background: rgba(191, 243, 75, 0.12) !important;
  border: 1px solid rgba(191, 243, 75, 0.35) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.p-holder-badge {
  font: 600 11px var(--j-display, Inter) !important;
  color: #dfdfca !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.p-number-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: rgba(18, 27, 14, 0.9) !important;
  border: 1px solid rgba(231, 201, 121, 0.5) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
}
.p-card-number {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: #e7c979 !important;
  word-break: break-all !important;
}
.p-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(231, 201, 121, 0.2) !important;
  border: 1px solid #e7c979 !important;
  border-radius: 6px !important;
  color: #e7c979 !important;
  padding: 7px 12px !important;
  font: 700 11px var(--j-display, Inter) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}
.p-copy-btn:hover {
  background: #e7c979 !important;
  color: #101606 !important;
  box-shadow: 0 0 10px rgba(231, 201, 121, 0.5) !important;
}
.p-instructions {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #ced6b4 !important;
  margin: 10px 0 !important;
}
.p-order-ref {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #aab495 !important;
  background: rgba(0, 0, 0, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  border-left: 3px solid #bff34b !important;
}
.p-order-ref b {
  color: #bff34b !important;
}
.p-mini-copy {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: #e7c979 !important;
  font-size: 13px !important;
}
.p-crypto-selector {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
  overflow-x: auto !important;
  padding-bottom: 4px !important;
}
.p-crypto-chip {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 6px 12px !important;
  background: rgba(18, 27, 14, 0.7) !important;
  border: 1px solid rgba(125, 137, 82, 0.35) !important;
  border-radius: 6px !important;
  color: #aab495 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}
.p-crypto-chip b {
  font-size: 12px !important;
  color: #f7f9f2 !important;
}
.p-crypto-chip small {
  font-size: 9px !important;
  color: #aab495 !important;
  text-transform: uppercase !important;
}
.p-crypto-chip.active {
  background: rgba(80, 227, 194, 0.15) !important;
  border-color: #50e3c2 !important;
  color: #50e3c2 !important;
}
.p-crypto-chip.active b {
  color: #50e3c2 !important;
}
.p-wallet-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}
.p-network-pill {
  font: 700 10px var(--j-display, Inter) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  background: rgba(80, 227, 194, 0.15) !important;
  color: #50e3c2 !important;
  border: 1px solid rgba(80, 227, 194, 0.4) !important;
}
.p-wallet-address-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(12, 18, 10, 0.95) !important;
  border: 1px solid rgba(80, 227, 194, 0.4) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}
.p-wallet-addr {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 12px !important;
  color: #50e3c2 !important;
  word-break: break-all !important;
}
.p-wallet-row {
  border: 1px solid rgba(125, 137, 82, 0.3) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  background: rgba(12, 18, 10, 0.7) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}




/* ==========================================================================
   NORRA 24/7 STREETWEAR LUXURY OVERHAUL & DEKA BACKOFFICE STYLES
   ========================================================================== */

/* 1. LIVE SUPPORT CHAT (Mockup media_1792746337733_ce09a902.png) */
.norra-support-chat-page {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - var(--safe-top, 44px) - 80px) !important;
  padding-bottom: 240px !important;
  background: rgba(3, 5, 3, 0.92) !important;
}

.support-street-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px;
  margin-bottom: 8px;
}

.support-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-headset-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(244, 209, 124, 0.4));
}

.support-title {
  margin: 0;
  font: 900 28px/1 var(--j-display, 'Barlow Condensed', sans-serif);
  letter-spacing: 0.06em;
  color: #ffe596;
  text-shadow: 0 0 16px rgba(244, 209, 124, 0.35);
}

.support-subtitle {
  display: block;
  font: 700 12px/1 var(--j-display, 'Barlow Condensed', sans-serif);
  letter-spacing: 0.15em;
  color: #c9d6be;
  text-transform: uppercase;
  margin-top: 2px;
}

.support-header-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(74, 222, 128, 0.6);
  background: rgba(10, 20, 10, 0.85);
  color: #f7faef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 16px var(--j-display, sans-serif);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.25);
}

.support-crown-badge {
  background: rgba(18, 24, 18, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.45);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 16px;
  color: #ffe596;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.support-live-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(12, 18, 12, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.status-live-dot {
  color: #4ade80;
  font-size: 14px;
  animation: pulse-live 1.8s infinite;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px #4ade80); }
  50% { opacity: 0.4; }
}

.status-live-text {
  font: 700 14px var(--j-body, sans-serif);
  color: #f7faef;
}

.status-live-desc {
  font: 400 12px var(--j-body, sans-serif);
  color: #9cb08f;
  margin-left: auto;
}

.norra-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.chat-bubble-row {
  display: flex;
  flex-direction: column;
}

.chat-bubble-row.user-row {
  align-items: flex-end;
}

.chat-bubble-row.support-row {
  align-items: flex-start;
}

.support-avatar-crest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding-left: 4px;
  font: 700 11px var(--j-display, sans-serif);
  color: #ffe596;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chat-bubble {
  max-width: 82%;
  padding: 12px 16px;
  position: relative;
  word-break: break-word;
}

.bubble-user {
  background: rgba(25, 48, 22, 0.92);
  border: 1.5px solid rgba(74, 222, 128, 0.65);
  border-radius: 18px 18px 4px 18px;
  color: #f5fced;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(74, 222, 128, 0.2);
}

.bubble-support {
  background: rgba(16, 22, 16, 0.94);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 18px 18px 18px 4px;
  color: #e8eee0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.bubble-text {
  margin: 0 0 4px;
  font: 400 14px/1.45 var(--j-body, sans-serif);
}

.bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font: 400 10px var(--j-body, sans-serif);
  color: #9cb08f;
}

.double-tick {
  color: #4ade80;
  font-weight: 700;
  letter-spacing: -1px;
}

.support-quick-actions-section {
  margin-top: auto;
  margin-bottom: 16px;
}

.quick-actions-title {
  margin: 0 0 10px 4px;
  font: 900 18px var(--j-display, 'Barlow Condensed', sans-serif);
  letter-spacing: 0.08em;
  color: #ffe596;
  text-shadow: 0 0 10px rgba(244, 209, 124, 0.3);
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.qa-card {
  background: rgba(14, 20, 14, 0.88);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.qa-card:hover, .qa-card:active {
  background: rgba(22, 32, 22, 0.95);
  border-color: rgba(244, 209, 124, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.qa-icon {
  font-size: 20px;
}

.qa-label {
  flex: 1;
  font: 700 13px var(--j-body, sans-serif);
  color: #f2f7ec;
}

.qa-arrow {
  font-size: 16px;
  color: #ffe596;
}

.norra-chat-composer {
  position: fixed;
  bottom: calc(var(--safe-bottom, 20px) + 54px);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 436px);
  background: rgba(10, 16, 10, 0.95);
  border: 1.5px solid rgba(244, 209, 124, 0.35);
  border-radius: 28px;
  padding: 6px 8px 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.composer-clip-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #c9d6be;
  cursor: pointer;
  padding: 4px;
}

.composer-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f7faef !important;
  font: 400 14px var(--j-body, sans-serif);
  outline: none;
  padding: 6px 0;
}

.composer-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ffe596, #d4af37);
  color: #0d100d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 229, 150, 0.35);
}


/* 2. HOME SCREEN STREETWEAR (Mockup media_1792746337814_0c5b495a.png) */
.norra-street-home {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 84px;
}

.balance-showcase-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(14, 20, 14, 0.9) url('/assets/grunge-v4.webp') !important;
  background-size: cover;
  border: 1px solid rgba(244, 209, 124, 0.4) !important;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.balance-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.balance-amount-display {
  font: 900 38px/1 var(--j-display, 'Barlow Condensed', sans-serif);
  letter-spacing: 0.04em;
  color: #fdfefb;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.cashback-pill-btn {
  background: rgba(10, 16, 10, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.5);
  border-radius: 20px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  cursor: pointer;
  width: fit-content;
}

.cb-icon {
  color: #4ade80;
  font-size: 14px;
}

.cb-title {
  font: 700 11px var(--j-display, sans-serif);
  color: #c9d6be;
  letter-spacing: 0.1em;
}

.cb-val {
  font: 700 14px var(--j-body, sans-serif);
  color: #4ade80;
}

.cb-arrow {
  color: #ffe596;
  font-size: 14px;
}

.balance-right-art {
  width: 120px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cash-stack-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}

.norra-trio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.trio-stat-card {
  background: rgba(12, 18, 12, 0.88);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 16px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.trio-stat-card:hover, .trio-stat-card:active {
  transform: translateY(-2px);
  border-color: rgba(244, 209, 124, 0.6);
}

.trio-icon {
  font-size: 22px;
}

.trio-num {
  font: 900 24px/1 var(--j-display, 'Barlow Condensed', sans-serif);
  color: #f7faef;
}

.trio-label {
  font: 700 11px var(--j-display, sans-serif);
  letter-spacing: 0.12em;
  color: #c9d6be;
  text-transform: uppercase;
}

.new-drop-showcase-banner {
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(244, 209, 124, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: block;
  background: #000;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.new-drop-showcase-banner:hover {
  border-color: #4ade80;
  transform: translateY(-2px);
}

.drop-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.drop-banner-overlay {
  width: 100%;
  background: linear-gradient(0deg, rgba(3, 6, 3, 0.95) 0%, rgba(3, 6, 3, 0.6) 60%, transparent 100%);
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.drop-badge {
  font: 900 13px var(--j-display, sans-serif);
  letter-spacing: 0.15em;
  color: #4ade80;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.drop-title {
  margin: 0;
  font: 900 28px/1 var(--j-display, 'Barlow Condensed', sans-serif);
  letter-spacing: 0.04em;
  color: #ffe596;
}

.drop-subtitle {
  font: 700 12px var(--j-display, sans-serif);
  letter-spacing: 0.12em;
  color: #c9d6be;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.drop-shop-btn {
  padding: 8px 22px;
  border-radius: 20px;
  font-size: 13px;
}

.recent-activity-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Unified Recent Activity Card matching Definitive Design Standard 9f196da7.png */
.activity-feed-unified {
  background: rgba(14, 20, 14, 0.88) !important;
  border: 1px solid rgba(244, 209, 124, 0.25) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.activity-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid rgba(244, 209, 124, 0.12) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.activity-row:last-child {
  border-bottom: 0 !important;
}

.activity-row:hover {
  background: rgba(244, 209, 124, 0.06) !important;
}

.activity-row .act-icon {
  font-size: 22px;
  flex: none;
}

.activity-row .act-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.activity-row .act-info strong {
  font: 800 14px var(--j-display, 'Barlow Condensed', sans-serif);
  color: #ffffff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activity-row .act-info small {
  font: 400 12px var(--j-body, 'Inter', sans-serif);
  color: #9cb08f;
}

.activity-row .act-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: none;
}

.activity-row .act-amount {
  font: 800 14px var(--j-display, 'Barlow Condensed', sans-serif);
  color: #ffffff;
  letter-spacing: 0.04em;
}

.activity-row time {
  font: 400 11px var(--j-body, 'Inter', sans-serif);
  color: #9cb08f;
  display: flex;
  align-items: center;
  gap: 4px;
}

.activity-row time i {
  font-style: normal;
  color: #f4d17c;
  font-size: 14px;
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-card {
  background: rgba(12, 18, 12, 0.85);
  border: 1px solid rgba(244, 209, 124, 0.25);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.act-icon {
  font-size: 22px;
}

.act-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.act-info strong {
  font: 700 14px var(--j-body, sans-serif);
  color: #f7faef;
}

.act-info small {
  font: 400 12px var(--j-body, sans-serif);
  color: #9cb08f;
}

.act-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.act-amount {
  font: 700 14px var(--j-body, sans-serif);
  color: #ffe596;
}

.act-meta time {
  font: 400 11px var(--j-body, sans-serif);
  color: #73846b;
}


/* 3. STORE SCREEN STREETWEAR (Mockup media_1792746337833_df670f13.png) */
.norra-street-store {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 84px;
}

.store-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filter-pill {
  background: rgba(14, 20, 14, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 12px;
  padding: 8px 18px;
  font: 700 13px var(--j-display, sans-serif);
  letter-spacing: 0.1em;
  color: #c9d6be;
  cursor: pointer;
  white-space: nowrap;
}

.filter-pill.active {
  background: linear-gradient(135deg, #ffe596, #d4af37) !important;
  border-color: #ffe596 !important;
  color: #030603 !important;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
}

.store-hero-banner {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(244, 209, 124, 0.35);
  cursor: pointer;
}

.store-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.collections-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.collection-trio-card {
  background: rgba(12, 18, 12, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.collection-trio-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.col-card-footer {
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.col-card-footer strong {
  font: 900 13px var(--j-display, sans-serif);
  letter-spacing: 0.08em;
  color: #ffe596;
}

.col-card-footer small {
  font: 400 11px var(--j-body, sans-serif);
  color: #9cb08f;
}

.featured-products-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.featured-product-card {
  background: rgba(14, 20, 14, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.fp-thumb {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(244, 209, 124, 0.25);
  cursor: pointer;
}

.fp-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.fp-title {
  margin: 0;
  font: 900 16px var(--j-display, sans-serif);
  letter-spacing: 0.04em;
  color: #f7faef;
}

.fp-meta {
  font: 400 12px var(--j-body, sans-serif);
  color: #9cb08f;
  margin-top: 2px;
}

.fp-price {
  font: 700 15px var(--j-body, sans-serif);
  color: #ffe596;
  margin-top: 4px;
}

.fp-add-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #ffe596, #d4af37);
  color: #030603;
  font: 900 24px/1 var(--j-display, sans-serif);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.35);
  transition: transform 0.15s ease;
}

.fp-add-btn:hover, .fp-add-btn:active {
  transform: scale(1.05);
}


/* 4. CONTROL CENTER & DEKA BACKOFFICE STYLES (Mockup media_1792746337849_276a1d59.png) */
.norra-admin-control-center {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 84px;
}

.admin-top-tabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}

.admin-tab-btn {
  background: rgba(14, 20, 14, 0.88);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 12px;
  padding: 8px 16px;
  font: 700 13px var(--j-display, sans-serif);
  letter-spacing: 0.06em;
  color: #c9d6be;
  cursor: pointer;
  white-space: nowrap;
}

.admin-tab-btn.active {
  background: linear-gradient(135deg, #ffe596, #d4af37) !important;
  border-color: #ffe596 !important;
  color: #030603 !important;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.35);
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 600px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.admin-kpi-card {
  background: rgba(14, 20, 14, 0.92);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 16px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-icon {
  font-size: 20px;
}

.kpi-value {
  font: 900 26px/1 var(--j-display, 'Barlow Condensed', sans-serif);
  color: #f7faef;
}

.kpi-label {
  font: 400 12px var(--j-body, sans-serif);
  color: #9cb08f;
}

.kpi-delta {
  font: 700 11px var(--j-body, sans-serif);
  margin-top: 4px;
}

.revenue-overview-card {
  background: rgba(12, 18, 12, 0.92);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 18px;
  padding: 16px 18px;
}

.revenue-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rev-big-val {
  font: 900 24px/1 var(--j-display, sans-serif);
  color: #ffe596;
  margin-top: 4px;
}

.chart-range-pills {
  display: flex;
  gap: 6px;
}

.range-pill {
  background: rgba(18, 24, 18, 0.8);
  border: 1px solid rgba(244, 209, 124, 0.25);
  border-radius: 8px;
  padding: 4px 10px;
  font: 700 11px var(--j-body, sans-serif);
  color: #c9d6be;
  cursor: pointer;
}

.range-pill.active {
  background: #4ade80;
  color: #030603;
  border-color: #4ade80;
}

.chart-svg-live {
  width: 100%;
  height: 120px;
}

.admin-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 650px) {
  .admin-split-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.split-panel {
  background: rgba(14, 20, 14, 0.92);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 16px;
  padding: 16px;
}

.panel-rows-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(244, 209, 124, 0.12);
}

.rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(244, 209, 124, 0.4);
  color: #ffe596;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px var(--j-display, sans-serif);
}

.row-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

.row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.row-info strong {
  font: 700 13px var(--j-body, sans-serif);
  color: #f7faef;
}

.row-info small {
  font: 400 11px var(--j-body, sans-serif);
  color: #9cb08f;
}

.row-price {
  font: 700 13px var(--j-body, sans-serif);
  color: #ffe596;
}

.admin-quick-btn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.quick-admin-btn {
  background: rgba(18, 26, 18, 0.88);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.quick-admin-btn:hover {
  border-color: rgba(244, 209, 124, 0.6);
  background: rgba(24, 36, 24, 0.95);
}

.sys-status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.sys-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(244, 209, 124, 0.1);
  font: 400 13px var(--j-body, sans-serif);
  color: #c9d6be;
}

/* DEKA BACKOFFICE TABLES & CITY LISTS */
.backoffice-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bo-note {
  margin: 0;
  font: 400 13px/1.4 var(--j-body, sans-serif);
  color: #b5c4ab;
}

.bo-hint-sub {
  margin: 0;
  font: 400 12px var(--j-body, sans-serif);
  color: #90a584;
}

.bo-city-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.bo-city-item {
  background: rgba(18, 26, 18, 0.92);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 12px;
  overflow: hidden;
}

.bo-city-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
}

.bo-city-drag {
  color: #ffe596;
  font-size: 18px;
}

.bo-city-name {
  flex: 1;
  font: 700 15px var(--j-body, sans-serif);
  color: #f7faef;
}

.bo-districts-count {
  font: 400 12px var(--j-body, sans-serif);
  color: #9cb08f;
}

.bo-item-actions {
  display: flex;
  gap: 6px;
}

.bo-action-btn {
  background: rgba(10, 16, 10, 0.8);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  color: #c9d6be;
  cursor: pointer;
}

.bo-action-btn.delete {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}

.bo-districts-drawer {
  background: rgba(10, 14, 10, 0.9);
  padding: 12px 14px;
  border-top: 1px solid rgba(244, 209, 124, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 400 13px var(--j-body, sans-serif);
  color: #c9d6be;
}

.bo-district-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bo-district-pill {
  background: rgba(18, 26, 18, 0.95);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 14px;
  padding: 4px 8px 4px 12px;
  font: 500 12px var(--j-body, sans-serif);
  color: #f0f7ea;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bo-district-pill .bo-dist-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-district-pill .bo-action-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
}

.bo-district-pill .bo-action-btn.edit {
  background: rgba(244, 209, 124, 0.15);
  color: #ffe596;
  border: 1px solid rgba(244, 209, 124, 0.35);
}

.bo-district-pill .bo-action-btn.delete {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.bo-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.bo-product-card {
  background: rgba(16, 22, 16, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.bo-card-top-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.bo-prod-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 8px;
}

.bo-prod-title {
  font: 700 13px var(--j-body, sans-serif);
  color: #f7faef;
}

.bo-prod-price {
  font: 700 14px var(--j-body, sans-serif);
  color: #ffe596;
  margin-top: 2px;
}

.bo-prod-variants-tag small {
  color: #9cb08f;
  font-size: 11px;
}

.bo-prod-bonus-penalty {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 10px;
}

.bonus-tag { color: #4ade80; }
.penalty-tag { color: #f87171; }

.bo-table-wrap {
  overflow-x: auto;
}

.bo-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px var(--j-body, sans-serif);
}

.bo-table th {
  background: rgba(20, 28, 20, 0.9);
  color: #ffe596;
  font: 700 12px var(--j-display, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(244, 209, 124, 0.3);
  text-align: left;
}

.bo-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(244, 209, 124, 0.12);
  color: #e5ece0;
}

.bo-table-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(244, 209, 124, 0.25);
}

.bo-status-pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  font: 700 11px var(--j-body, sans-serif);
}

.bo-status-pill.status-available, .bo-status-pill.status-delivered {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid #4ade80;
  color: #4ade80;
}

.bo-status-pill.status-reserved, .bo-status-pill.status-awaiting_payment {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

.bo-status-pill.status-sold, .bo-status-pill.status-cancelled {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #ef4444;
}

.fulfillment-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}

.fulfillment-chip.f-taxi {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
  border: 1px solid #eab308;
}

.fulfillment-chip.f-parcel_locker {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid #3b82f6;
}

.fulfillment-chip.f-wholesale {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid #a855f7;
}

.bo-stat-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  background: rgba(20, 30, 20, 0.8);
  border: 1px solid rgba(244, 209, 124, 0.2);
  margin-right: 4px;
}

.bo-stat-chip.good { border-color: #4ade80; color: #4ade80; }
.bo-stat-chip.warn { border-color: #f87171; color: #f87171; }

.bo-bots-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.bo-bot-card {
  background: rgba(18, 26, 18, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bot-info-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bot-name {
  font: 700 14px var(--j-body, sans-serif);
  color: #f7faef;
}

.bot-subs {
  margin-left: auto;
  font-size: 12px;
  color: #ffe596;
}

.bot-lang-pills {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.lang-tag {
  background: rgba(10, 16, 10, 0.8);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  color: #4ade80;
}

.broadcast-ctrl-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.settings-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.subtab-pill {
  background: rgba(18, 26, 18, 0.85);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 10px;
  padding: 6px 14px;
  font: 700 12px var(--j-body, sans-serif);
  color: #c9d6be;
  cursor: pointer;
}

.subtab-pill.active {
  background: #ffe596;
  color: #030603;
  border-color: #ffe596;
  font-weight: 900;
}

.stats-clusters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 650px) {
  .stats-clusters {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cluster-box {
  background: rgba(16, 24, 16, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 14px;
  padding: 14px;
}

.cluster-title {
  margin: 0 0 10px;
  font: 900 14px var(--j-display, sans-serif);
  letter-spacing: 0.08em;
  color: #ffe596;
}

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cluster-grid div {
  display: flex;
  flex-direction: column;
}

.cluster-grid small {
  font-size: 11px;
  color: #9cb08f;
}

.cluster-grid strong {
  font-size: 14px;
  color: #f7faef;
}

/* ==========================================================================
   NORRA DEKA / OPERATOR DEEP CONTROLS & STASH INSPECTION
   ========================================================================== */

.bo-clickable-row {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bo-clickable-row:hover {
  background: rgba(244, 209, 124, 0.08) !important;
}

.bo-inspector-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inspector-card {
  background: rgba(14, 20, 14, 0.85);
  border: 1px solid rgba(244, 209, 124, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.inspector-section-title {
  font: 900 12px var(--j-display, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffe596;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(244, 209, 124, 0.15);
}

.inspector-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.inspector-row:last-child {
  border-bottom: none;
}

.inspector-row span {
  color: #9cb08f;
  font-weight: 500;
}

.tel-link {
  color: #4ade80;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tel-link:hover {
  color: #9aff6e;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

.inspector-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.inspector-actions .btn.wide {
  width: 100%;
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Stash Preview Modal */
.bo-stash-preview-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.stash-photo-frame {
  width: 100%;
  max-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(74, 222, 128, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  background: #000;
}

.stash-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coords-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 16, 10, 0.95);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  gap: 10px;
}

.coords-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.05em;
  word-break: break-all;
}

/* Reservation Countdown Timer */
.reservation-countdown-box {
  background: linear-gradient(135deg, rgba(20, 26, 18, 0.95), rgba(12, 16, 12, 0.98));
  border: 1px solid rgba(244, 209, 124, 0.35);
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.countdown-digits {
  font-family: var(--j-display, sans-serif);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #f4d17c;
  text-shadow: 0 0 16px rgba(244, 209, 124, 0.4);
  line-height: 1.1;
}

.countdown-caption {
  font-size: 11px;
  color: #9cb08f;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}


/* ==========================================================================
   NORRA CHANNELS TOGGLE & STAFF ZERO-TRUST MATRIX STYLES
   ========================================================================== */

.channels-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.channel-toggle-box {
  background: rgba(14, 20, 14, 0.9);
  border: 1px solid rgba(244, 209, 124, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.channel-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.channel-title {
  font-size: 15px;
  color: #f7faef;
  display: block;
}

.channel-city-pause {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(8, 12, 8, 0.6);
  padding: 8px 12px;
  border-radius: 8px;
}

.city-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.city-check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #f4d17c;
  cursor: pointer;
}

.city-check-item input {
  accent-color: #f4d17c;
}

/* Switch UI */
.switch-ui {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

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

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #333;
  transition: .3s;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.2);
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: #888;
  transition: .3s;
  border-radius: 50%;
}

.switch-ui input:checked + .slider-round {
  background-color: #4ade80;
}

.switch-ui input:checked + .slider-round:before {
  transform: translateX(20px);
  background-color: #000;
}

/* Staff Roles Matrix */
.staff-roles-matrix {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.role-matrix-card {
  border-radius: 14px;
  padding: 16px;
  background: rgba(14, 20, 14, 0.95);
  border: 1px solid rgba(244, 209, 124, 0.25);
}

.role-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.role-badge {
  font: 900 13px var(--j-display, sans-serif);
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 6px;
}

.badge-gold { background: rgba(244, 209, 124, 0.15); color: #f4d17c; border: 1px solid rgba(244, 209, 124, 0.4); }
.badge-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.4); }
.badge-green { background: rgba(74, 222, 128, 0.15); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }

.role-scope-tag {
  font-size: 11px;
  color: #9cb08f;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.role-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.role-features-list li {
  color: #f7faef;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ==========================================================================
   NORRA 24/7 UNIFIED LUXURY UNDERGROUND STREETWEAR PROFILE & CURRENCY
   Matches Definitive Design Standard media_1792756349112_9f196da7.png
   ========================================================================== */

.norra-street-profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 96px;
}

/* Scoped Luxury Cards */
.norra-profile-card {
  background: rgba(14, 20, 14, 0.88) !important;
  border: 1px solid rgba(244, 209, 124, 0.25) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* 1. Profile Identity Card */
.norra-profile-identity {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 18px !important;
}

.norra-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  flex: none;
}

.norra-avatar-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #233420, #0a130a);
  border: 1.5px solid rgba(244, 209, 124, 0.5);
  box-shadow: 0 0 14px rgba(244, 209, 124, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 26px var(--j-display, 'Barlow Condensed', sans-serif);
  color: #f7faef;
}

.norra-crown-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

.norra-identity-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.norra-profile-name {
  font: 900 24px/1.1 var(--j-display, 'Barlow Condensed', sans-serif) !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.norra-profile-handle {
  font: 400 12px var(--j-body, 'Inter', sans-serif);
  color: #9cb08f;
}

.norra-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  margin-top: 4px;
  border-radius: 6px;
  background: rgba(244, 209, 124, 0.12);
  border: 1px solid rgba(244, 209, 124, 0.35);
  color: #f4d17c;
  font: 800 11px var(--j-display, 'Barlow Condensed', sans-serif);
  letter-spacing: 0.06em;
  width: fit-content;
}

/* 2. Profile Balance Card */
.norra-profile-balance-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 20px !important;
}

.np-balance-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.norra-profile-balance-val {
  font: 900 38px/1 var(--j-display, 'Barlow Condensed', sans-serif) !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.norra-topup-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  margin-top: 6px !important;
  background: rgba(244, 209, 124, 0.12) !important;
  border: 1px solid rgba(244, 209, 124, 0.4) !important;
  border-radius: 18px !important;
  color: #f4d17c !important;
  font: 800 12px var(--j-display, 'Barlow Condensed', sans-serif) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  width: fit-content !important;
  transition: all 0.15s ease !important;
}

.norra-topup-btn:hover {
  background: rgba(244, 209, 124, 0.22) !important;
  border-color: #f4d17c !important;
  transform: translateY(-1px) !important;
}

.np-balance-right {
  width: 120px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.np-cash-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}

/* 3. Preferred Currency Card */
.norra-currency-card {
  padding: 16px 18px !important;
}

.np-currency-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.np-currency-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.norra-card-title {
  font: 900 18px/1.2 var(--j-display, 'Barlow Condensed', sans-serif) !important;
  color: #ffe596 !important;
  letter-spacing: 0.04em !important;
  margin: 2px 0 0 !important;
  text-transform: uppercase !important;
}

.norra-curr-active-tag {
  font: 900 12px var(--j-display, 'Barlow Condensed', sans-serif);
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(244, 209, 124, 0.15);
  border: 1px solid rgba(244, 209, 124, 0.4);
  color: #f4d17c;
}

.norra-card-desc {
  font: 400 12px/1.45 var(--j-body, 'Inter', sans-serif) !important;
  color: #9cb08f !important;
  margin: 6px 0 12px !important;
}

.norra-currency-pills-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.norra-curr-pill {
  background: rgba(10, 16, 10, 0.85) !important;
  border: 1px solid rgba(244, 209, 124, 0.22) !important;
  border-radius: 14px !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.16s ease !important;
}

.norra-curr-pill:hover {
  border-color: rgba(244, 209, 124, 0.5) !important;
  background: rgba(16, 26, 16, 0.95) !important;
  transform: translateY(-1px) !important;
}

.norra-curr-pill.active {
  background: rgba(28, 28, 16, 0.95) !important;
  border: 1.5px solid #f4d17c !important;
  box-shadow: 0 0 16px rgba(244, 209, 124, 0.25), inset 0 0 8px rgba(244, 209, 124, 0.12) !important;
}

.np-curr-symbol {
  font: 900 24px/1 var(--j-display, 'Barlow Condensed', sans-serif) !important;
  color: #f4d17c !important;
}

.norra-curr-pill.active .np-curr-symbol {
  color: #ffd978 !important;
  text-shadow: 0 0 8px rgba(244, 209, 124, 0.6) !important;
}

.np-curr-info strong {
  display: block;
  font: 800 13px var(--j-display, 'Barlow Condensed', sans-serif);
  color: #ffffff;
  letter-spacing: 0.04em;
}

.np-curr-info small {
  display: block;
  font: 400 10px var(--j-body, 'Inter', sans-serif);
  color: #9cb08f;
  margin-top: 1px;
}

.np-curr-check {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  font-weight: 900;
  color: #f4d17c;
}

/* 4. Profile Menu Card */
.norra-profile-menu-card {
  padding: 0 !important;
  overflow: hidden !important;
}

.norra-menu-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 15px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 209, 124, 0.1) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease !important;
}

.norra-menu-item:last-child {
  border-bottom: 0 !important;
}

.norra-menu-item:hover {
  background: rgba(244, 209, 124, 0.06) !important;
}

.np-menu-icon {
  font-size: 20px;
  flex: none;
}

.np-menu-label {
  font: 700 14px var(--j-body, 'Inter', sans-serif);
  color: #f7faef;
  flex: 1;
}

.np-menu-arrow {
  color: #f4d17c;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
}

/* Legacy Overrides Neutralizer */
.profile-wallet .profile-balance,
.screen .profile-wallet .profile-balance {
  font: 900 38px/1 var(--j-display, 'Barlow Condensed', sans-serif) !important;
  color: #ffffff !important;
}


/* ==========================================================================
   NORRA STEALTH STAFF ACCESS & EMERGENCY CLIENT EXIT STYLES
   ========================================================================== */

.secret-staff-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.secret-staff-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 12px;
}

.secret-role-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(14, 20, 14, 0.95);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.16s ease;
}

.secret-role-btn:hover {
  background: rgba(22, 36, 20, 0.95);
  border-color: #4ade80;
  transform: translateX(4px);
}

.role-emoji {
  font-size: 26px;
  flex: none;
}

.role-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.role-texts strong {
  font: 900 14px var(--j-display, sans-serif);
  letter-spacing: 0.06em;
  color: #ffe596;
}

.role-texts small {
  font-size: 11px;
  color: #9cb08f;
}

.role-arrow {
  font-size: 18px;
  color: #f4d17c;
  flex: none;
}

/* Stealth Top Bar inside Admin */
.admin-top-stealth-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 16, 10, 0.95);
  border: 1px solid rgba(244, 209, 124, 0.3);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

.stealth-staff-pill {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stealth-dot {
  color: #4ade80;
  font-size: 12px;
  animation: pulse-live 1.5s infinite;
}

.stealth-role-badge {
  font: 900 13px var(--j-display, sans-serif);
  letter-spacing: 0.08em;
  color: #ffe596;
  text-transform: uppercase;
}

.btn-stealth-exit {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fca5a5;
  border-radius: 8px;
  padding: 6px 12px;
  font: 800 11px var(--j-display, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-stealth-exit:hover {
  background: rgba(248, 113, 113, 0.3);
  border-color: #f87171;
  color: #fff;
}


/* ==========================================================================
   OFFICIAL SOURCES & BACKUP CARD (PROFILE)
   ========================================================================== */
.norra-profile-sources-card {
  padding: 20px;
  background: linear-gradient(180deg, rgba(20, 24, 20, 0.88) 0%, rgba(13, 16, 13, 0.94) 100%);
  border: 1px solid rgba(255, 229, 150, 0.22);
  border-radius: 16px;
  margin-top: 14px;
}

.norra-sources-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.norra-source-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(28, 34, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease;
}

.norra-source-row:hover {
  background: rgba(38, 46, 38, 0.9);
  border-color: rgba(255, 229, 150, 0.35);
  transform: translateY(-1px);
}

.ns-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ns-icon-wrap.gold { background: rgba(255, 229, 150, 0.15); border: 1px solid rgba(255, 229, 150, 0.3); }
.ns-icon-wrap.emerald { background: rgba(74, 222, 128, 0.15); border: 1px solid rgba(74, 222, 128, 0.3); }

.ns-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ns-info strong {
  font: 700 14px var(--j-display, sans-serif);
  color: #f3f4f6;
  letter-spacing: 0.03em;
}

.ns-info small {
  font: 400 12px var(--j-body, sans-serif);
  color: #9cb08f;
}

.ns-badge.live {
  font: 800 10px var(--j-display, sans-serif);
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.06em;
}

.ns-arrow {
  color: #9cb08f;
  font-size: 16px;
  transition: transform 0.2s;
}

.norra-source-row:hover .ns-arrow {
  transform: translate(2px, -2px);
  color: #ffe596;
}

/* ==========================================================================
   ACCOUNTING & NOTES STYLES (DEKA BACKOFFICE)
   ========================================================================== */
.norra-subtabs-row {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  overflow-x: auto;
}

.norra-subtab-btn {
  background: rgba(28, 34, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9cb08f;
  padding: 8px 14px;
  border-radius: 10px;
  font: 700 12px var(--j-display, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.norra-subtab-btn:hover {
  background: rgba(40, 48, 40, 0.9);
  color: #fff;
}

.norra-subtab-btn.active {
  background: #ffe596;
  color: #0d100d;
  border-color: #ffe596;
  box-shadow: 0 2px 10px rgba(255, 229, 150, 0.35);
}

.norra-ledger-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.norra-stat-box {
  background: rgba(20, 25, 20, 0.8);
  border: 1px solid rgba(255, 229, 150, 0.15);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-lbl {
  font: 700 11px var(--j-display, sans-serif);
  color: #9cb08f;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-val {
  font: 900 18px var(--j-display, sans-serif);
  letter-spacing: 0.02em;
}

.stat-val.gold { color: #ffe596; }
.stat-val.emerald { color: #4ade80; }
.stat-val.amber { color: #fca5a5; }

.norra-ledger-form-card {
  background: rgba(24, 30, 24, 0.7);
  border: 1px solid rgba(255, 229, 150, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.form-title {
  font: 800 14px var(--j-display, sans-serif);
  color: #ffe596;
  margin: 0 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}

.norra-ledger-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.norra-ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(20, 24, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
}

.nl-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nl-title {
  font: 700 14px var(--j-display, sans-serif);
  color: #fff;
}

.nl-cat-badge {
  font: 600 11px var(--j-body, sans-serif);
  background: rgba(255, 255, 255, 0.07);
  padding: 2px 8px;
  border-radius: 6px;
  color: #9cb08f;
}

.nl-meta {
  font: 400 12px var(--j-body, sans-serif);
  color: #6b7280;
  margin-top: 3px;
}

.nl-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nl-amount {
  font: 800 15px var(--j-display, sans-serif);
  letter-spacing: 0.02em;
}

.nl-amount.-red { color: #f87171; }

.nl-del-btn {
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.nl-del-btn:hover { opacity: 1; transform: scale(1.1); }

/* Debts Card */
.norra-debt-card {
  background: rgba(22, 28, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s;
}

.norra-debt-card.settled {
  opacity: 0.5;
  background: rgba(16, 20, 16, 0.4);
}

.nd-badge-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nd-badge {
  font: 800 10px var(--j-display, sans-serif);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.nd-badge.owe-me {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #86efac;
}

.nd-badge.i-owe {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fca5a5;
}

.nd-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.nd-person {
  font: 700 15px var(--j-display, sans-serif);
  color: #fff;
}

.nd-amount {
  font: 900 18px var(--j-display, sans-serif);
}

.nd-amount.green { color: #4ade80; }
.nd-amount.amber { color: #fca5a5; }

.nd-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
  margin-top: 4px;
}

.nd-meta {
  font: 400 12px var(--j-body, sans-serif);
  color: #9cb08f;
}

.nd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Notes & Checklists */
.norra-new-note-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.norra-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.norra-note-box {
  background: rgba(22, 28, 22, 0.75);
  border: 1px solid rgba(255, 229, 150, 0.18);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

.note-box-title {
  font: 800 14px var(--j-display, sans-serif);
  color: #ffe596;
  margin: 0;
  letter-spacing: 0.03em;
}

.note-del-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
}

.note-del-btn:hover { color: #ef4444; }

.note-item-add-bar {
  display: flex;
  gap: 6px;
}

.note-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(16, 20, 16, 0.5);
  cursor: pointer;
  transition: all 0.15s ease;
}

.checklist-row:hover {
  background: rgba(30, 38, 30, 0.8);
}

.checklist-row.done {
  opacity: 0.45;
}

.checklist-row.done .checklist-text {
  text-decoration: line-through;
  color: #6b7280;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 229, 150, 0.4);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #0d100d;
  flex-shrink: 0;
  font-weight: 900;
}

.custom-checkbox.checked {
  background: #ffe596;
  border-color: #ffe596;
}

.checklist-text {
  font: 500 13px var(--j-body, sans-serif);
  color: #f3f4f6;
  flex: 1;
}

.item-del-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.checklist-row:hover .item-del-btn { opacity: 1; }
.item-del-btn:hover { color: #ef4444; }

.note-box-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}

.link-muted-btn {
  background: none;
  border: none;
  font: 600 11px var(--j-display, sans-serif);
  color: #9cb08f;
  cursor: pointer;
  padding: 0;
}

.link-muted-btn:hover { color: #ffe596; }

/* HotSwap Grid */
.hotswap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .hotswap-grid { grid-template-columns: 1fr; }
}

.hotswap-box {
  background: rgba(18, 24, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ==========================================================================
   DEKA ADMIN TABS NO-TRUNCATION & LUXURY GOLD ACCENTS
   ========================================================================== */
.admin-tabs-row, .norra-admin-tabs, .admin-subtabs-row, .norra-subtabs-row {
  display: flex !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 8px !important;
  padding: 4px 2px 10px 2px !important;
  max-width: 100% !important;
}

.admin-tabs-row::-webkit-scrollbar, 
.norra-admin-tabs::-webkit-scrollbar,
.norra-subtabs-row::-webkit-scrollbar {
  display: none !important;
}

.admin-tab-btn, .norra-tab-btn, .norra-subtab-btn {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font: 800 12px var(--j-display, sans-serif) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

.admin-tab-btn.active, .norra-tab-btn.active {
  background: linear-gradient(135deg, #ffe596 0%, #e2b94f 50%, #b38827 100%) !important;
  color: #070d04 !important;
  border: 1px solid #ffe596 !important;
  box-shadow: 0 4px 14px rgba(255, 229, 150, 0.45) !important;
}

/* Chat bubble luxury refinements */
.bubble-user {
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  background: rgba(14, 26, 14, 0.85) !important;
}

.double-tick {
  color: #4ade80 !important;
}

.polish-categories button.selected {
  background: linear-gradient(135deg, #ffe596, #d4af37) !important;
  color: #070d04 !important;
  border: 1px solid #ffe596 !important;
  box-shadow: 0 3px 10px rgba(255, 229, 150, 0.35) !important;
  font-weight: 800 !important;
}


/* ==========================================================================
   VISUAL GUIDE & TRAINING MODAL (ОБУЧЕНИЕ КЛИЕНТА)
   ========================================================================== */
.norra-guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 4, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

.guide-modal-dialog {
  background: linear-gradient(180deg, rgba(22, 28, 22, 0.98) 0%, rgba(13, 16, 13, 1) 100%);
  border: 1px solid rgba(255, 229, 150, 0.35);
  border-radius: 20px;
  width: min(100%, 460px);
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 229, 150, 0.15);
}

.guide-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-step-tag {
  font: 800 11px var(--j-display, sans-serif);
  color: #ffe596;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-close-btn {
  background: none;
  border: none;
  color: #9cb08f;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s;
}

.guide-close-btn:hover { color: #fff; }

.guide-img-wrap {
  width: 100%;
  max-height: 52dvh;
  overflow: hidden;
  background: #080c08;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-slide-img {
  width: 100%;
  height: auto;
  max-height: 52dvh;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s;
}

.guide-slide-img:active { transform: scale(0.98); }

.guide-info-box {
  padding: 14px 18px 10px;
}

.guide-title {
  font: 800 16px var(--j-display, sans-serif);
  color: #ffe596;
  margin: 0 0 6px;
  letter-spacing: 0.03em;
}

.guide-desc {
  font: 400 13px/1.45 var(--j-body, sans-serif);
  color: #d1d5db;
  margin: 0;
}

.guide-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.guide-dots {
  display: flex;
  gap: 6px;
}

.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s;
}

.guide-dot.active {
  background: #ffe596;
  width: 18px;
  border-radius: 10px;
}


/* ==========================================================================
   NORRA 24/7 ULTRA-LUXURY OBSIDIAN & GOLD REDESIGN (ZERO GRAFFITI / ZERO ACID)
   ========================================================================== */

/* 1. Hide all dirty graffiti images and wordmark banners */
.hero-art,
img[src*="wordmark"],
img[src*="graffiti"],
.hero.brand-header img.hero-art,
.reference-profile-hero img {
  display: none !important;
}

/* 2. Re-style screen header as clean luxury obsidian glass bar */
.hero.brand-header,
.reference-profile-hero {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg, #131813 0%, #080c08 100%) !important;
  border-bottom: 1px solid rgba(255, 229, 150, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.hero.brand-header::before,
.reference-profile-hero::before {
  content: '👑 NORRA 24/7 · MEMBERS CLUB' !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #ffe596 !important;
  text-shadow: 0 0 15px rgba(255, 229, 150, 0.25) !important;
}

/* 3. Strip all background spray wallpapers and paint frames */
:root {
  --texture: none !important;
  --lime: #ffe596 !important;
}

body {
  background: #060907 url('/assets/graffiti-wall-v12.png') no-repeat center top fixed !important;
  background-size: cover !important;
  min-height: 100vh !important;
}

.shell,
.screen,
.screen.home,
.screen.store,
.screen.profile,
.screen.support,
.screen.rewards,
.screen.digitalProduct,
.content {
  background-image: none !important;
  background-color: transparent !important;
  background: transparent !important;
}

.shell::before,
.intro-inner::before {
  display: none !important;
  content: none !important;
}

.card::after,
.metric::after,
.member-banner::after,
.art-banner::after,
.admin-stat::after,
.collection::after,
.item::after,
.reward-tile::after {
  display: none !important;
  content: none !important;
}

/* 4. Luxury Obsidian Dark Glass Cards */
.card,
.balance-showcase-card,
.activity-feed-unified,
.norra-profile-card,
.trio-stat-card,
.collection-trio-card,
.featured-product-card {
  background: linear-gradient(145deg, #121812 0%, #090e09 100%) !important;
  border: 1px solid rgba(255, 229, 150, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 229, 150, 0.08) !important;
}

/* 5. Pure Champagne Gold for all CTA & Add Buttons (Zero Radioactive Lime) */
.fp-add-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 229, 150, 0.4) !important;
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  color: #0b0f0b !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25) !important;
  cursor: pointer !important;
}

.fp-add-btn:active {
  transform: scale(0.94) !important;
}

.filter-pill.active,
.admin-tab-btn.active,
.norra-subtab-btn.active {
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  border-color: #ffe596 !important;
  color: #0a0e0a !important;
  font-weight: 900 !important;
  box-shadow: 0 0 15px rgba(255, 229, 150, 0.35) !important;
}

.btn:not(.secondary) {
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  color: #0b0f0b !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25) !important;
}

/* 6. Gold Navigation & Support Send */
.nav {
  background: rgba(10, 14, 10, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(255, 229, 150, 0.15) !important;
}

.nav button.active,
.nav button.active svg {
  color: #ffe596 !important;
  stroke: #ffe596 !important;
  filter: drop-shadow(0 0 8px rgba(255, 229, 150, 0.4)) !important;
}

#norra-send-btn,
.chat-send-btn,
button.chat-send-btn {
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  color: #0b0f0b !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3) !important;
}

/* 7. Gold Balances and Accents */
.balance-amount-display,
.balance .display,
.j-wallet-total,
.norra-profile-balance-val,
.stat-val.gold {
  color: #ffe596 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 20px rgba(255, 229, 150, 0.25) !important;
}

.eyebrow {
  color: #ffe596 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

.new-drop-showcase-banner {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 229, 150, 0.25) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}


/* Extra Clean & Anti-Graffiti Enforcements */
.store-advert,

.art-banner.drop,

img[src*="drop-v10"],
img[src*="cash-flat"] {
  display: none !important;
}

.hero .top-actions {
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 105 !important;
}

.hero .top-actions .round {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #141b14 !important;
  border: 1px solid rgba(255, 229, 150, 0.4) !important;
  color: #ffe596 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.hero .top-actions .crown {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  border: 1px solid #ffe596 !important;
  color: #080c08 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ==========================================================================
   NORRA 24/7 DEFINITIVE LUXURY FIXES V33
   ========================================================================== */

/* 1. Header Bar: Full width, zero clipping, natural flex distribution */
.hero.brand-header,
.reference-profile-hero {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  background: linear-gradient(180deg, #131813 0%, #080c08 100%) !important;
  border-bottom: 1px solid rgba(255, 229, 150, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  aspect-ratio: auto !important;
}

.hero.brand-header::before,
.reference-profile-hero::before {
  content: '👑 NORRA 24/7 · MEMBERS CLUB' !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #ffe596 !important;
  text-shadow: 0 0 15px rgba(255, 229, 150, 0.25) !important;
  white-space: nowrap !important;
  display: block !important;
  flex: 1 !important;
}

.hero .top-actions {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
}

.hero .top-actions .round {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #182218 !important;
  border: 1px solid rgba(255, 229, 150, 0.4) !important;
  color: #ffe596 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Kill all background graffiti bill images on home balance */
.balance::before,
.reward-cash::before,
.screen.home .balance,
.screen.home .balance::before,
.screen.home .balance::after,
.balance-right-art,
.cash-stack-img {
  background-image: none !important;
  display: none !important;
}

/* Keep balance left text clean */
.screen.home .balance,
.balance-showcase-card {
  display: block !important;
  background: linear-gradient(145deg, #121812 0%, #090e09 100%) !important;
  border: 1px solid rgba(255, 229, 150, 0.18) !important;
  padding: 20px 18px !important;
  border-radius: 16px !important;
}

/* 3. Hide only big graffiti hero advert banner, preserve collection cards */
.store-advert,
.store-hero-banner,
.art-banner.drop {
  display: none !important;
}

.collections-trio-grid .collection-trio-card img,
.collections .collection img {
  display: block !important;
  opacity: 1 !important;
}


.composer-send-btn,
button.composer-send-btn,
#norra-send-btn,
.chat-send-btn,
button.chat-send-btn {
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  color: #0b0f0b !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.35) !important;
}


/* ==================== PWA INSTALL MODAL & BUTTONS ==================== */
.install-tab-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #a8afa0;
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.install-tab-btn.active {
  background: rgba(212,175,55,0.18);
  border-color: #ffe596;
  color: #ffe596;
}
.install-step-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.install-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #ffe596);
  color: #070a07;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
}
.install-step-text strong {
  display: block;
  font-size: 13px;
  color: #f4f4e9;
  margin-bottom: 2px;
}
.install-step-text p {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: 1.4;
}
.install-status-pill {
  background: rgba(212,175,55,0.08);
  border: 1px dashed rgba(255,229,150,0.3);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #f4f4e9;
  line-height: 1.4;
  margin-top: 10px;
}


/* ==================== WHEEL COMPACT MOBILE FITTING ==================== */
.basic-wheel-stage {
  max-width: 350px !important;
  margin: 6px auto 12px !important;
}
.basic-wheel-heading {
  padding: 6px 5px 2px !important;
}
.basic-wheel-heading h2 {
  font-size: clamp(24px, 6.5vw, 32px) !important;
  margin: 1px 0 !important;
}
#functional-spin {
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  color: #0b0f0b !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35) !important;
  border: none !important;
}


/* ==========================================================
   NORRA 24/7 OVERNIGHT PRODUCTION & UX HOTFIX SUITE (ZBT v39)
   ========================================================== */

/* 1. Modal Top Safe-Area & Close Button Accessibility */
.modal-back {
  display: none !important;
}
.modal-back.open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(2, 5, 2, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding-top: max(72px, calc(env(safe-area-inset-top, 24px) + 48px)) !important;
  padding-bottom: max(32px, env(safe-area-inset-bottom, 24px)) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal {
  position: relative !important;
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  padding: 24px 20px 28px !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, rgba(16, 26, 12, 0.98) 0%, rgba(5, 9, 5, 0.99) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9), 0 0 25px rgba(212, 175, 55, 0.15) !important;
}

.modal .close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 100 !important;
  touch-action: manipulation !important;
  background: rgba(14, 22, 14, 0.9) !important;
  color: #ffe596 !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
}

.modal .close:hover, .modal .close:active {
  background: #ffe596 !important;
  color: #070a07 !important;
  transform: scale(1.05) !important;
}

/* 2. Backoffice Touch Hit Area (Cities & Districts Pencil/Delete) */
.bo-item-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.bo-action-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 25, 15, 0.92) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 10px !important;
  color: #ffe596 !important;
  font-size: 19px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

.bo-action-btn:active {
  transform: scale(0.92) !important;
  background: rgba(212, 175, 55, 0.3) !important;
}

.bo-action-btn.delete {
  color: #ff6b6b !important;
  border-color: rgba(255, 107, 107, 0.45) !important;
}

.bo-action-btn.delete:active {
  background: rgba(255, 107, 107, 0.3) !important;
}

/* 3. Support Chat Dock & Keyboard Layout Fit */
.screen:is(.support, .supportThread) {
  height: calc(100dvh - 76px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 76px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding-bottom: 0 !important;
}

.screen:is(.support, .supportThread) .j-support {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 12px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.screen:is(.support, .supportThread) .support-thread {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 10px 0 16px !important;
  margin: 0 !important;
}

.screen:is(.support, .supportThread) .j-compose-dock {
  flex: 0 0 auto !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 0 !important;
  margin: 0 0 calc(76px + env(safe-area-inset-bottom, 12px)) 0 !important;
  background: rgba(5, 10, 5, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 50 !important;
}

html.keyboard-open .screen:is(.support, .supportThread) .j-compose-dock {
  margin-bottom: 8px !important;
}

html.keyboard-open .nav {
  display: none !important;
}

/* 4. Luxury Seamless Fortune Wheel Rotor (No Black Cutoff) */
.basic-wheel-stage {
  position: relative !important;
  width: min(300px, 80vw) !important;
  aspect-ratio: 1 !important;
  margin: 12px auto 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.basic-wheel-pointer {
  position: absolute !important;
  z-index: 10 !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #ffe596 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 10px #e7c979) drop-shadow(0 4px 6px rgba(0,0,0,0.8)) !important;
  pointer-events: none !important;
}

.basic-wheel-rotor {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 35px rgba(156, 243, 74, 0.28), 0 10px 40px rgba(0,0,0,0.8) !important;
  border: 3px solid rgba(255, 229, 150, 0.5) !important;
  transition: transform 3.6s cubic-bezier(0.12, 0.72, 0.13, 1) !important;
  background: #040a03 !important;
}

.basic-wheel-rotor > img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
  left: auto !important;
  top: auto !important;
}

/* 5. Stash / Drop Photo Preview Proportions */
.stash-photo-wrap {
  width: 100% !important;
  max-height: 280px !important;
  height: 240px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #030603 !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 12px 0 !important;
}

.stash-full-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}



/* ==========================================================================
   NORRA 24/7 MEMBERS CLUB — DEFINITIVE VIP HAUTE-COUTURE MASTER DRESS (v43)
   Matches Master Brand Visual Identity: media_1792830307910_96e7036a.png
   Eliminates all raw HTML tables, clips, overlaps, letter 'A' circle, and flat lime
   ========================================================================== */

/* 1. Global Obsidian Carbon Palette & Radical Cleanup */
:root {
  --norra-bg: #060906;
  --norra-card-bg: rgba(14, 20, 14, 0.82);
  --norra-gold: #ffe596;
  --norra-gold-metallic: #d4af37;
  --norra-gold-border: rgba(255, 229, 150, 0.22);
  --norra-gold-glow: rgba(255, 229, 150, 0.45);
  --norra-green: #10b981;
  --norra-text-main: #f5f8f2;
  --norra-text-muted: #9cb08f;
  --texture: none !important;
}

body, html, .shell {
  background: radial-gradient(circle at 50% 15%, #111a11 0%, #060906 65%, #030503 100%) !important;
  color: var(--norra-text-main) !important;
}

.shell::before, .intro-inner::before {
  background: none !important;
  display: none !important;
}

/* 2. Absolute Zero-Overlap Bottom Clearance */
.norra-admin-control-center, 
.content, 
.screen, 
.backoffice-panel, 
.bo-couriers-cards-grid, 
.bo-inventory-cards-grid, 
.bo-admin-orders-grid, 
.norra-street-home, 
.norra-street-store,
.admin-tab-content {
  padding-bottom: calc(130px + env(safe-area-inset-bottom, 24px)) !important;
}

/* 3. Luxury Master Header (.norra-master-header) */
.norra-master-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: rgba(7, 11, 7, 0.9) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--norra-gold-border) !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 80 !important;
}

.norra-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}

.norra-brand-emblem-wrap {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.norra-emblem-halo {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 14px !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.35) 0%, rgba(7, 10, 7, 0) 70%) !important;
}

.norra-header-emblem {
  position: relative !important;
  z-index: 2 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 0 10px rgba(212, 175, 55, 0.25) !important;
}

.norra-header-info {
  display: flex !important;
  flex-direction: column !important;
}

.norra-brand-glow-title {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #ffe596 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-shadow: 0 0 16px rgba(255, 229, 150, 0.45) !important;
}

.norra-brand-sub-badge {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: rgba(255, 235, 175, 0.65) !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
}

.norra-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.norra-action-crown-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(255, 229, 150, 0.18) 0%, rgba(212, 175, 55, 0.28) 100%) !important;
  border: 1px solid rgba(255, 229, 150, 0.45) !important;
  color: #ffe596 !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 12px rgba(212, 175, 55, 0.2) !important;
  cursor: pointer !important;
}

.norra-action-profile-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(18, 26, 18, 0.8) !important;
  border: 1px solid var(--norra-gold-border) !important;
  color: #ffe596 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
}

/* 4. Admin Top Luxury Pod (Replaces old hero('admin') and letter 'A') */
.admin-top-luxury-pod {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: rgba(14, 20, 14, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--norra-gold-border) !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

.admin-pod-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.admin-pod-emblem-wrap {
  position: relative !important;
}

.admin-pod-crown {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

.admin-pod-text {
  display: flex !important;
  flex-direction: column !important;
}

.admin-pod-brand-title {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #ffe596 !important;
  line-height: 1 !important;
  text-shadow: 0 0 12px rgba(255, 229, 150, 0.4) !important;
}

.admin-pod-sub {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  margin-top: 3px !important;
}

.admin-pod-live-dot {
  color: #10b981 !important;
  font-size: 10px !important;
  animation: livePulse 2s infinite ease-in-out !important;
  text-shadow: 0 0 6px #10b981 !important;
}

@keyframes livePulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.admin-pod-role {
  color: #ffe596 !important;
  font-weight: 700 !important;
}

.admin-pod-user {
  color: rgba(255, 255, 255, 0.45) !important;
}

.admin-pod-exit-btn {
  background: rgba(255, 229, 150, 0.08) !important;
  border: 1px solid rgba(255, 229, 150, 0.3) !important;
  color: #ffe596 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.admin-pod-exit-btn:hover {
  background: rgba(255, 229, 150, 0.2) !important;
  box-shadow: 0 0 12px rgba(255, 229, 150, 0.3) !important;
}

/* 5. Master Buttons System — No Polygonal/Torn Edges, Pure Luxury */
.btn, button.btn {
  clip-path: none !important;
  border-radius: 12px !important;
  font-family: 'Barlow Condensed', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

.btn:active {
  transform: scale(0.97) !important;
}

.btn.gold-btn, .gold-btn {
  clip-path: none !important;
  background: linear-gradient(135deg, #f7e7af 0%, #d4af37 60%, #b89328 100%) !important;
  color: #080c07 !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35) !important;
  text-shadow: none !important;
}

.btn.gold-btn:hover {
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.5) !important;
  filter: brightness(1.05) !important;
}

.btn.secondary {
  background: rgba(18, 26, 18, 0.8) !important;
  border: 1px solid var(--norra-gold-border) !important;
  color: #ffe596 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

.btn.secondary:hover {
  border-color: rgba(255, 229, 150, 0.5) !important;
  background: rgba(255, 229, 150, 0.12) !important;
}

/* 6. COURIERS & STAFF VIP GLASS CARDS GRID */
.bo-couriers-cards-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

.bo-courier-card {
  background: rgba(16, 23, 16, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--norra-gold-border) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.bo-courier-card:hover {
  border-color: rgba(255, 229, 150, 0.45) !important;
  transform: translateY(-2px) !important;
}

.bo-courier-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.bo-courier-id-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.bo-courier-avatar-badge {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(212, 175, 55, 0.15) !important;
  border: 1px solid rgba(255, 229, 150, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

.bo-courier-names {
  display: flex !important;
  flex-direction: column !important;
}

.bo-courier-login {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffe596 !important;
  letter-spacing: 0.5px !important;
}

.bo-courier-pwd {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.bo-courier-deposit-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  background: rgba(10, 16, 10, 0.7) !important;
  border: 1px solid rgba(255, 229, 150, 0.2) !important;
  border-radius: 10px !important;
  padding: 4px 10px !important;
}

.bo-courier-deposit-badge.active {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: rgba(255, 229, 150, 0.4) !important;
}

.bo-deposit-title {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

.bo-deposit-amount {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #ffe596 !important;
}

.bo-courier-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  background: rgba(10, 15, 10, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}

.bo-cmetric-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.bo-cmetric-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--norra-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.bo-cmetric-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-top: 2px !important;
}

.bo-cmetric-val.gold {
  color: #ffe596 !important;
}

.bo-cmetric-val.green {
  color: #10b981 !important;
}

.bo-cmetric-val.warn {
  color: #ff6b6b !important;
}

.bo-courier-actions-row {
  display: flex !important;
  gap: 8px !important;
}

.bo-caction-btn {
  flex: 1 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bo-caction-btn.topup {
  background: rgba(255, 229, 150, 0.1) !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  color: #ffe596 !important;
}

.bo-caction-btn.topup:hover {
  background: rgba(255, 229, 150, 0.25) !important;
}

.bo-caction-btn.deduct {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e5e7eb !important;
}

.bo-caction-btn.deduct:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.bo-caction-btn.delete {
  flex: 0 0 auto !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  padding: 8px 12px !important;
}

.bo-caction-btn.delete:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

/* 7. STOCK & INVENTORY VIP GLASS CARDS GRID */
.bo-inventory-cards-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.bo-inventory-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(16, 23, 16, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--norra-gold-border) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}

.bo-inv-thumb-wrap {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 229, 150, 0.3) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.bo-inv-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.bo-inv-zoom-pill {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  font-size: 10px !important;
  background: rgba(0,0,0,0.65) !important;
  border-radius: 4px !important;
  padding: 1px 3px !important;
}

.bo-inv-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.bo-inv-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.bo-inv-product-title {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffe596 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bo-inv-sub {
  font-size: 12px !important;
  color: #d1d5db !important;
  display: flex !important;
  gap: 10px !important;
}

.bo-inv-meta-row {
  font-size: 10px !important;
  color: var(--norra-text-muted) !important;
  display: flex !important;
  gap: 8px !important;
}

.bo-inv-action-col {
  flex-shrink: 0 !important;
}

.bo-inv-toggle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255, 229, 150, 0.1) !important;
  border: 1px solid rgba(255, 229, 150, 0.3) !important;
  color: #ffe596 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}

.bo-inv-toggle-btn:hover {
  background: rgba(255, 229, 150, 0.25) !important;
}

/* 8. CUSTOMER ORDERS VIP GLASS CARDS GRID */
.bo-admin-orders-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.bo-admin-order-card {
  background: rgba(16, 23, 16, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--norra-gold-border) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease !important;
}

.bo-admin-order-card:hover {
  border-color: rgba(255, 229, 150, 0.45) !important;
}

.bo-aorder-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.bo-aorder-id-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.bo-aorder-id-badge strong {
  font-family: monospace !important;
  color: #ffe596 !important;
  font-size: 13px !important;
}

.bo-aorder-id-badge time {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

.bo-aorder-item-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.bo-aorder-name {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #f5f8f2 !important;
}

.bo-aorder-price {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffe596 !important;
}

.bo-aorder-chips-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
}

.bo-aorder-buyer {
  color: #d1d5db !important;
}

.bo-aorder-address {
  font-size: 11px !important;
  color: var(--norra-text-muted) !important;
  background: rgba(0,0,0,0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
}

.bo-aorder-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

/* 9. Effortless Touch Targets for Locations City/District Editing */
.bo-action-btn {
  min-width: 42px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(14, 20, 14, 0.95) !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  border-radius: 10px !important;
  color: #ffe596 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 10 !important;
}

.bo-action-btn:active {
  transform: scale(0.9) !important;
  background: rgba(255, 229, 150, 0.25) !important;
}

.bo-action-btn.delete {
  color: #ff6b6b !important;
  border-color: rgba(255, 107, 107, 0.4) !important;
}

.bo-item-actions {
  gap: 10px !important;
  z-index: 10 !important;
}

/* 10. Vertically Centered Modals & Effortless Close Button */
.modal-back.open {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 16px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.modal {
  max-height: calc(100dvh - 48px) !important;
  border-radius: 20px !important;
  background: rgba(12, 17, 12, 0.96) !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 25px rgba(212, 175, 55, 0.2) !important;
  position: relative !important;
}

.modal .close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(25, 34, 25, 0.95) !important;
  border: 1px solid rgba(255, 229, 150, 0.4) !important;
  color: #ffe596 !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  touch-action: manipulation !important;
}

.modal .close:active {
  transform: scale(0.92) !important;
  background: rgba(255, 229, 150, 0.25) !important;
}

/* 11. Ultra-Premium Glass Bottom Navigation Dock */
.nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(470px, 100%) !important;
  height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: rgba(8, 12, 8, 0.95) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-top: 1px solid rgba(255, 229, 150, 0.22) !important;
  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.8) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  z-index: 1000 !important;
}

.nav button {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font: 600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  transition: all 0.2s ease !important;
}

.nav button svg {
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease !important;
}

.nav button.active {
  color: #ffe596 !important;
  font-weight: 700 !important;
}

.nav button.active svg {
  color: #ffe596 !important;
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 10px rgba(255, 229, 150, 0.75)) !important;
}

/* 12. Cards System & Glass Surfaces */
.card, .backoffice-panel, .norra-profile-card {
  background: rgba(14, 20, 14, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--norra-gold-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.card.gold {
  border-color: rgba(255, 229, 150, 0.28) !important;
}

/* Status Pills */
.bo-status-pill {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
}

.bo-status-pill.status-available, .bo-status-pill.status-delivered {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #10b981 !important;
}

.bo-status-pill.status-reserved, .bo-status-pill.status-awaiting {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}

.bo-status-pill.status-sold, .bo-status-pill.status-cancelled {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

/* Fulfillment Chips */
.fulfillment-chip {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(255, 229, 150, 0.1) !important;
  border: 1px solid rgba(255, 229, 150, 0.3) !important;
  color: #ffe596 !important;
}



/* DEFINITIVE GOLD BUTTON & EXTRA BOTTOM CLEARANCE */
.norra-gold-button,
button.norra-gold-button,
.norra-gold-btn,
.btn.gold-btn,
.gold-btn {
  clip-path: none !important;
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 55%, #b89328 100%) !important;
  color: #070a07 !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 12px !important;
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  text-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.norra-gold-button:active,
button.norra-gold-button:active {
  transform: scale(0.97) !important;
  filter: brightness(0.95) !important;
}

.bo-couriers-cards-grid,
.bo-inventory-cards-grid,
.bo-admin-orders-grid {
  padding-bottom: 160px !important;
}



/* ==========================================================================
   NORRA 24/7 MEMBERS CLUB — HAUTE-COUTURE HOME STOREFRONT STYLES (v45)
   Master Dress Implementation matching brand visual identity
   ========================================================================== */

/* 1. VIP City & Status Bar */
.norra-city-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: rgba(14, 20, 14, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 229, 150, 0.22) !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.norra-city-current {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.city-pin-icon {
  font-size: 16px !important;
}

.city-name-text {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #ffe596 !important;
  text-transform: uppercase !important;
}

.city-arrow {
  color: rgba(255, 229, 150, 0.6) !important;
  font-size: 13px !important;
}

.norra-live-status-pill {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
}

.pulse-dot {
  font-size: 8px !important;
  animation: livePulse 2s infinite ease-in-out !important;
}

/* 2. NORRA Black Card (VIP Titanium Credit Card) */
.norra-black-card {
  position: relative !important;
  background: linear-gradient(135deg, #131a13 0%, #080c08 50%, #151d15 100%) !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  border-radius: 20px !important;
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 229, 150, 0.3) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.norra-black-card::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  right: -30% !important;
  width: 200px !important;
  height: 200px !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(0,0,0,0) 70%) !important;
  pointer-events: none !important;
}

.nbc-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

.nbc-brand-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nbc-chip-icon {
  font-size: 20px !important;
}

.nbc-card-title {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  color: #ffe596 !important;
  text-shadow: 0 0 10px rgba(255, 229, 150, 0.4) !important;
}

.nbc-tier-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  color: #070a07 !important;
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  padding: 3px 9px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4) !important;
}

.nbc-middle-row {
  margin-bottom: 18px !important;
}

.nbc-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: rgba(255, 235, 175, 0.6) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.nbc-balance-display {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 229, 150, 0.3) !important;
}

.nbc-bottom-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.nbc-action-btn {
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.nbc-action-btn.topup {
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  color: #070a07 !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
}

.nbc-action-btn.topup:active {
  transform: scale(0.97) !important;
}

.nbc-action-btn.wheel {
  background: rgba(255, 229, 150, 0.1) !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  color: #ffe596 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.nbc-action-btn.wheel:active {
  transform: scale(0.97) !important;
}

/* 3. Express Channels Trio Grid */
.norra-channels-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

.norra-channel-card {
  background: rgba(14, 20, 14, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 229, 150, 0.2) !important;
  border-radius: 14px !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.norra-channel-card:active {
  transform: scale(0.96) !important;
  border-color: rgba(255, 229, 150, 0.5) !important;
}

.nchan-icon {
  font-size: 24px !important;
  margin-bottom: 6px !important;
}

.nchan-title {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #ffe596 !important;
  line-height: 1.1 !important;
  margin-bottom: 3px !important;
}

.nchan-sub {
  font-size: 9px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 600 !important;
}

/* 4. Luxury Products Showcase Grid */
.norra-products-luxury-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

@media (max-width: 340px) {
  .norra-products-luxury-grid {
    grid-template-columns: 1fr !important;
  }
}

.norra-product-luxury-card {
  background: rgba(14, 20, 14, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 229, 150, 0.22) !important;
  border-radius: 16px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
}

.norra-product-luxury-card:hover {
  border-color: rgba(255, 229, 150, 0.45) !important;
}

.nplc-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(7, 10, 7, 0.9) !important;
  border: 1px solid rgba(255, 229, 150, 0.15) !important;
  cursor: pointer !important;
}

.nplc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.norra-product-luxury-card:active .nplc-img {
  transform: scale(1.04) !important;
}

.nplc-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(7, 10, 7, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 229, 150, 0.35) !important;
  color: #ffe596 !important;
}

.nplc-info {
  margin-top: 10px !important;
  cursor: pointer !important;
  flex-grow: 1 !important;
}

.nplc-title {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #f5f8f2 !important;
  margin: 0 0 3px 0 !important;
  line-height: 1.15 !important;
}

.nplc-meta {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

.nplc-price {
  font-family: 'Barlow Condensed', 'Oswald', -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  color: #ffe596 !important;
  display: block !important;
  margin-bottom: 8px !important;
  text-shadow: 0 0 10px rgba(255, 229, 150, 0.3) !important;
}



/* Enhanced touch target sizes for mobile precision (Pencil & Action buttons) */
.bo-action-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(255, 229, 150, 0.3) !important;
}

/* Modal backdrop pointer and effortless tap to dismiss */
.modal-back {
  cursor: pointer !important;
}

.modal-back .modal {
  cursor: default !important;
}

/* ==========================================================================
   HAUTE-COUTURE MASTER DRESS (EXACT MATCH TO USER IMAGES 1, 2, 3, 4)
   ========================================================================== */

html, body, .shell, main#app {
  background: #050805 url('/assets/graffiti-wall-v12.png') no-repeat center top fixed !important;
  background-size: cover !important; background-attachment: fixed !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Master Brand Header (media_1792830307910_96e7036a.png) */
.norra-master-brand-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 16px 14px 16px;
  background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.16) 0%, rgba(5, 8, 5, 0) 75%);
}

.nmbh-center-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nmbh-squircle-badge {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: rgba(12, 18, 12, 0.94);
  border: 1.5px solid rgba(220, 190, 110, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 20px rgba(212, 175, 55, 0.22);
}

.nmbh-squircle-glow {
  position: absolute;
  inset: -8px;
  border-radius: 28px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.nmbh-crown-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(255, 229, 150, 0.5));
}

.nmbh-brand-text {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffe596;
  margin-top: 2px;
}

.nmbh-club-text {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 229, 150, 0.6);
  text-transform: uppercase;
}

.nmbh-big-title {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ffe596;
  text-shadow: 0 0 15px rgba(255, 229, 150, 0.4);
  line-height: 1;
  margin-bottom: 4px;
}

.nmbh-members-sub {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.nmbh-gold-line {
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 190, 110, 0.5), transparent);
}

/* Header Top-Right Action Badges */
.norra-header-actions-pill {
  position: absolute;
  top: 18px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.nha-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #22c55e !important;
  background: rgba(15, 24, 15, 0.9) !important;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 0;
}

.nha-crown-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid rgba(220, 190, 110, 0.4) !important;
  background: rgba(20, 24, 18, 0.85) !important;
  color: #ffe596 !important;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.nha-crown-badge:hover, .nha-crown-badge.staff-active {
  border-color: rgba(255, 229, 150, 0.8) !important;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
}

/* Branded Banner Headers (Support, Profile, Store, Rewards) */
.norra-banner-header {
  position: relative;
  width: 100%;
  margin-bottom: 8px;
}

.nbh-hero-art {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Master Balance Card (IMAGE 1) */
.norra-master-balance-card {
  position: relative;
  background: rgba(10, 16, 12, 0.72) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(220, 190, 110, 0.35) !important; background: rgba(10, 16, 12, 0.72) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
  padding: 18px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 10px 0 14px 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 0 25px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.norra-master-balance-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -20px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.nmb-left {
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.nmb-eyebrow {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #4ade80 !important;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.nmb-val-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nmb-amount {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 42px;
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.nmb-plus-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #4ade80 !important;
  background: transparent !important;
  color: #4ade80 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.nmb-plus-btn:hover {
  transform: scale(1.1);
  background: rgba(74, 222, 128, 0.15) !important;
}

.nmb-cashback-pill {
  background: rgba(8, 14, 8, 0.9) !important;
  border: 1px solid rgba(74, 222, 128, 0.45) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
  cursor: pointer !important;
  width: fit-content !important;
  transition: border-color 0.15s ease;
}

.nmb-cashback-pill:hover {
  border-color: #4ade80 !important;
}

.nmb-cb-icon {
  color: #4ade80 !important;
  font-size: 16px;
  font-weight: bold;
}

.nmb-cb-text {
  display: flex;
  flex-direction: column;
}

.nmb-cb-text small {
  font-family: var(--j-display, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #4ade80 !important;
  text-transform: uppercase;
  line-height: 1.1;
}

.nmb-cb-text b {
  font-family: var(--j-display, sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: #4ade80 !important;
  line-height: 1.1;
}

.nmb-cb-chevron {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  margin-left: 2px;
}

.nmb-right {
  position: relative;
  width: 140px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1;
}

.nmb-cash-img {
  max-width: 130%;
  max-height: 130%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.8));
  transform: rotate(-2deg);
}

/* Metrics Trio (IMAGE 4 top) */
.norra-metrics-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.nmt-card {
  background: rgba(12, 18, 12, 0.92) !important;
  border: 1px solid rgba(244, 209, 124, 0.35) !important;
  border-radius: 16px !important;
  padding: 14px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.nmt-card:hover, .nmt-card:active {
  transform: translateY(-2px);
  border-color: rgba(244, 209, 124, 0.7) !important;
}

.nmt-icon {
  font-size: 22px;
  line-height: 1;
}

.nmt-num {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 24px;
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1;
}

.nmt-label {
  font-family: var(--j-display, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #c9d6be !important;
  text-transform: uppercase;
}

/* Signature Hero Drop Banner (IMAGE 4 middle) */
.norra-hero-drop-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(244, 209, 124, 0.45) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.7) !important;
  cursor: pointer !important;
  margin-bottom: 18px !important;
  background: #000 !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.norra-hero-drop-card:hover, .norra-hero-drop-card:active {
  transform: translateY(-2px);
  border-color: #4ade80 !important;
}

.nhd-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Recent Activity Feed (IMAGE 4 bottom) */
.norra-recent-activity-section {
  margin-bottom: 24px;
}

.nra-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 4px;
}

.nra-title {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff !important;
  text-transform: uppercase;
  margin: 0;
}

.nra-view-all {
  background: transparent !important;
  border: 0 !important;
  color: #4ade80 !important;
  font-family: var(--j-display, sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.nra-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nra-item {
  background: rgba(12, 18, 12, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.nra-item:hover {
  transform: translateY(-1px);
  border-color: rgba(74, 222, 128, 0.4) !important;
}

.nra-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.nra-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.nra-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff !important;
}

.nra-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5) !important;
}

.nra-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.nra-val {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff !important;
}

.nra-val.green {
  color: #4ade80 !important;
}

.nra-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Support Screen (IMAGE 2) */
.norra-support-page {
  padding-bottom: 140px;
}

.norra-online-status-bar {
  border: 1.5px solid rgba(74, 222, 128, 0.45) !important;
  border-radius: 16px !important;
  padding: 12px 18px !important;
  margin-bottom: 18px !important;
  background: rgba(12, 20, 12, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.nos-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nos-dot-pulse {
  color: #4ade80;
  font-size: 14px;
  animation: pulseDot 1.8s infinite;
}

.nos-online-text {
  color: #4ade80 !important;
  font-size: 15px;
  font-weight: 800;
}

.nos-sub-text {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px;
}

.norra-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  min-height: 200px;
}

.chat-bubble-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-bubble-row.user-row {
  justify-content: flex-end;
}

.support-avatar-crest {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(220, 190, 110, 0.6);
  background: rgba(15, 20, 15, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 14px;
}

.bubble-content-wrap {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.support-label-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 229, 150, 0.8);
  margin-bottom: 4px;
  margin-left: 4px;
}

.chat-bubble {
  border-radius: 16px;
  padding: 12px 16px;
  position: relative;
}

.bubble-support {
  background: rgba(28, 36, 28, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-left-radius: 4px;
  color: #ffffff !important;
}

.bubble-user {
  background: linear-gradient(135deg, #1f421f, #142a14) !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  border-top-right-radius: 4px;
  color: #ffffff !important;
}

.bubble-text {
  margin: 0 0 4px 0;
  font-size: 14px;
  line-height: 1.35;
}

.bubble-meta {
  display: flex;
  justify-content: flex-end;
}

.bubble-meta time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.norra-quick-pills-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 14px 0;
  scrollbar-width: none;
}

.nqp-pill {
  background: rgba(15, 22, 15, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease;
}

.nqp-pill:hover {
  border-color: #4ade80 !important;
}

.norra-chat-compose {
  position: fixed;
  bottom: 84px;
  left: 0;
  right: 0;
  max-width: 680px;
  margin: 0 auto;
  padding: 10px 16px;
  background: rgba(8, 12, 8, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
  z-index: 99;
}

.norra-chat-compose input {
  flex: 1;
  background: rgba(20, 28, 20, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 22px !important;
  padding: 10px 16px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  outline: none !important;
}

.norra-chat-compose input:focus {
  border-color: #4ade80 !important;
}

.norra-chat-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #22c55e !important;
  border: 0 !important;
  color: #050805 !important;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Profile Screen (IMAGE 3) */
.norra-profile-page {
  padding-bottom: 140px;
}

.norra-profile-user-card {
  border: 1.5px solid #22c55e !important;
  border-radius: 20px !important;
  background: rgba(10, 18, 10, 0.92) !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

.npu-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.npu-avatar-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}

.npu-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 2px solid #22c55e !important;
  object-fit: cover !important;
}

.npu-avatar-crown {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #050805;
  border: 1px solid #ffe596;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.npu-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.npu-name {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 22px;
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin: 0;
}

.npu-handle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 4px;
}

.npu-role-pill {
  background: #f4d17c !important;
  color: #0a100a !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: fit-content !important;
}

.npu-edit-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.norra-profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.nps-tile {
  background: rgba(10, 16, 10, 0.9) !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  border-radius: 14px !important;
  padding: 10px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  text-align: center !important;
}

.nps-val {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.nps-val.green {
  color: #4ade80 !important;
}

.nps-val.white {
  color: #ffffff !important;
}

.nps-val-tier {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ffe596 !important;
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 16px;
  font-weight: 900;
}

.nps-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5) !important;
}

.norra-profile-menu-card {
  background: rgba(10, 16, 10, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.npm-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 13px 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background 0.15s ease;
}

.npm-row:last-child {
  border-bottom: 0 !important;
}

.npm-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.npm-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 22px;
  text-align: center;
}

.npm-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.npm-title.gold {
  color: #ffe596 !important;
  font-weight: 800;
}

.npm-badge-pill {
  background: #ff3344;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 10px;
  padding: 1px 7px;
  margin-right: 8px;
}

.npm-chevron {
  color: rgba(255, 255, 255, 0.35);
  font-size: 18px;
}

.npm-chevron.gold {
  color: #ffe596;
}

.norra-profile-perks-card {
  border: 1.5px solid #22c55e !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  cursor: pointer !important;
  background: #000 !important;
}

.npp-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Master Floating Navigation Dock (IMAGES 3 & 4) */
.norra-master-dock {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  height: 72px !important;
  background: rgba(6, 10, 6, 0.96) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  z-index: 9999 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.nmd-item {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  cursor: pointer !important;
  padding: 6px 0 !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

.nmd-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
}

.nmd-icon svg {
  stroke: currentColor !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
}

.nmd-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

.nmd-item.active {
  color: #22c55e !important;
}

.nmd-item.active .nmd-icon svg {
  stroke: #22c55e !important;
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.7)) !important;
}

.nmd-item.active .nmd-label {
  color: #22c55e !important;
  font-weight: 800 !important;
}

.nmd-badge-dot {
  position: absolute !important;
  top: 6px !important;
  right: calc(50% - 14px) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ff3344 !important;
  box-shadow: 0 0 8px #ff3344 !important;
}

/* Hide old default nav bar if present */
nav.nav {
  display: none !important;
}


/* === UNIVERSAL DESKTOP & MOBILE SCROLL ENGINE + ZERO TOP GAP === */
html {
  background: #060907 url('/assets/graffiti-wall-v12.png') no-repeat center top fixed !important;
  background-size: cover !important;
  min-height: 100% !important;
  height: auto !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
}

body {
  background: transparent !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.shell, main#app {
  width: min(470px, 100%) !important;
  margin: 0 auto !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  padding-top: 0 !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 24px)) !important;
  background: transparent !important;
}

.screen {
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  animation: none !important;
}

.content, .norra-admin-control-center, .admin-tab-content {
  overflow: visible !important;
  height: auto !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 24px)) !important;
}

/* Header zero-gap flush alignment for Telegram WebApp */
.norra-banner-header, .hero.brand-header, .hero.home {
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 100% !important;
}
.nbh-hero-art {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-top: 0 !important;
}
.top-actions, .norra-top-action-cluster, .norra-header-actions-pill {
  top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}


/* ==================== DEKA ERP TABLET & DESKTOP STYLES (MATCHING SCREENSHOTS) ==================== */
.deka-table-module {
  background: rgba(14, 20, 15, 0.85);
  border: 1px solid rgba(220, 190, 110, 0.22);
  border-radius: 14px;
  padding: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65);
  margin-bottom: 20px;
}

.deka-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.deka-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #080c09;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px 12px;
  flex: 1;
  min-width: 200px;
  max-width: 380px;
}

.deka-search {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  width: 100%;
}

.deka-actions-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.deka-ctrl-select {
  background: #0f1711;
  color: #d1d5db;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.deka-action-btn {
  background: #141f17;
  color: #ffe596;
  border: 1px solid rgba(220, 190, 110, 0.35);
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.deka-action-btn:hover {
  background: rgba(220, 190, 110, 0.2);
  border-color: #ffe596;
}

.deka-data-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.deka-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.deka-data-table thead {
  background: rgba(8, 12, 9, 0.9);
}

.deka-data-table th {
  padding: 12px 14px;
  color: #9ca3af;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.deka-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.deka-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.deka-cell-thumb {
  width: 60px;
}

.deka-thumb-box {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
}

.deka-row-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deka-thumb-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  color: #ef4444;
  font-size: 10px;
}

.deka-item-title {
  display: block;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
}

.deka-item-sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

.deka-status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.deka-status-badge.status-ok {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.deka-status-badge.status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.deka-status-badge.status-cancel {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.deka-status-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}

.deka-pay-amount {
  font-weight: 800;
  color: #ffe596;
  font-size: 14px;
}

.deka-pay-dest {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  margin-top: 2px;
}

.deka-row-action-select {
  background: #111a13;
  color: #ffe596;
  border: 1px solid rgba(220, 190, 110, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* Couriers Table Styles */
.deka-create-dashed {
  border: 2px dashed rgba(220, 190, 110, 0.35);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  color: #ffe596;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.deka-create-dashed:hover {
  background: rgba(220, 190, 110, 0.08);
  border-color: #ffe596;
}

.deka-courier-login {
  font-size: 14px;
  color: #fff;
}

.deka-courier-pwd {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 3px;
}

.deka-courier-pwd code {
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  color: #ffe596;
}

.deka-deposit-val {
  font-size: 13px;
  color: #d1d5db;
}

.deka-table-footer {
  padding: 12px 6px;
  font-size: 12px;
  color: #6b7280;
}

/* Franchise Cards */
.franchise-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.franchise-card {
  background: rgba(10, 16, 12, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px;
  position: relative;
}

.franchise-card.master {
  border-color: rgba(220, 190, 110, 0.4);
}

.franchise-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.franchise-badge.master {
  color: #ffe596;
}

.franchise-badge.partner {
  color: #22c55e;
}

.franchise-stats-row {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* ==================== DEKA RESPONSIVE SIDEBAR & WORKSPACE ==================== */
@media (min-width: 768px) {
  .shell:has(.deka-fullscreen-workspace) {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
  }
  .deka-fullscreen-workspace {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    gap: 0 !important;
    background: #0d120e !important;
    border: 1px solid rgba(220, 190, 110, 0.22) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    min-height: calc(100vh - 40px) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.85) !important;
    margin-top: 10px !important;
  }
  .deka-desktop-sidebar {
    display: flex !important;
    flex-direction: column !important;
    background: #090e0a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 0 !important;
  }
  .deka-main-viewport {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important;
    background: #0d120e !important;
    overflow-y: auto !important;
  }
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .deka-desktop-sidebar {
    display: none !important;
  }
  .mobile-only {
    display: flex !important;
  }
  .deka-main-viewport {
    display: block !important;
    padding: 0 !important;
  }
}

/* Sidebar Details */
.deka-sidebar-brand {
  padding: 0 16px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.deka-brand-title {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.deka-brand-title .deka-dot {
  color: #22c55e;
  font-size: 14px;
}
.deka-brand-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.deka-balance-val {
  font-size: 14px;
  font-weight: 700;
  color: #ffe596;
}
.deka-lang-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #d1d5db;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.deka-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
}
.deka-side-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.18s;
  width: 100%;
}
.deka-side-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.deka-side-tab.active {
  background: rgba(220, 190, 110, 0.14);
  color: #ffe596;
  font-weight: 700;
  border-left: 3px solid #ffe596;
}
.deka-tab-icon {
  font-size: 15px;
  line-height: 1;
}
.deka-sidebar-footer {
  padding: 14px 16px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.deka-theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9ca3af;
}
.deka-theme-dot {
  background: transparent;
  border: none;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.deka-exit-link {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9ca3af;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.deka-exit-link:hover {
  color: #ffe596;
  border-color: rgba(220, 190, 110, 0.3);
}


/* ==================== ZERO-ACID-LIME: PURE MAJESTIC GOLD BUTTONS & SMOKED OBSIDIAN GLASS ==================== */
.btn, 
.btn.wide, 
.quality-pack-section > .btn, 
[data-commerce-submit], 
.quality-product .btn,
.product-content .btn,
button.btn:not(.secondary) {
  background: linear-gradient(135deg, #f5d788 0%, #c89f4b 100%) !important;
  color: #070e06 !important;
  border: 1px solid rgba(255, 229, 150, 0.5) !important;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4) !important;
  font-family: var(--j-display, 'Barlow Condensed', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn:hover, [data-commerce-submit]:hover {
  background: linear-gradient(135deg, #ffe596 0%, #d4af37 100%) !important;
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.6) !important;
  transform: translateY(-2px) !important;
}

.btn:active, [data-commerce-submit]:active {
  transform: scale(0.97) !important;
}

/* Force All Store & Product Cards to Smoked Glass */
.quality-product,
.quality-panel,
.card,
.card-pad,
.norra-profile-user-card,
.norra-master-balance-card,
.norra-profile-menu-card,
.bo-inventory-card,
.bo-admin-order-card {
  background: rgba(10, 16, 12, 0.72) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(220, 190, 110, 0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Eliminate detached floating pencil button */
.profile-edit-btn-detached {
  display: none !important;
}

/* Eliminate demo bars */
details.commerce-bar, .demo-dot {
  display: none !important;
}

/* Harmonize Home Metrics Trio to Gold Majestic Standard */
.nmt-card {
  background: rgba(10, 16, 12, 0.72) !important;
  border: 1px solid rgba(220, 190, 110, 0.22) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nmt-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(220, 190, 110, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.2) !important;
}
.nmt-icon {
  font-size: 22px !important;
  filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.4)) !important;
}
.nmt-num {
  font-family: var(--j-display, 'Barlow Condensed', sans-serif) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #ffe596 !important;
}
.nmt-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #9ca3af !important;
}