/* ===================================================================== ShopVerse — owner dashboard, FINLIT visual language (dark glass, gradient accents). The hue follows the business theme: --a / --b are set in by admin_header(). ===================================================================== */ :root { --a: #FF4FD8; --b: #6E4BFF; --b2: var(--b); /* --b2 = surfaces (set by the server close to --a's hue) */ --bg: color-mix(in oklab, var(--a) 7%, #0B0716); --bg2: color-mix(in oklab, var(--a) 12%, #140C26); --bg3: color-mix(in oklab, var(--a) 4%, #05030B); --bg4: color-mix(in oklab, var(--a) 17%, #1A1030); /* FINLIT night base, tinted with the store hue */ --ink: #fff; --ink2: rgba(255,255,255,.78); --ink3: rgba(255,255,255,.56); --line: color-mix(in srgb, var(--a) 16%, rgba(255,255,255,.12)); --glass: color-mix(in srgb, var(--a) 6%, rgba(255,255,255,.055)); --glass2: color-mix(in srgb, var(--a) 8%, rgba(255,255,255,.1)); --mid: color-mix(in srgb, var(--a) 55%, var(--b)); --grad: linear-gradient(120deg, var(--a) 0%, var(--mid) 45%, var(--b) 100%); --grad-text: linear-gradient(90deg, color-mix(in srgb, var(--a) 55%, #fff), color-mix(in srgb, var(--b) 25%, #fff) 55%, color-mix(in srgb, var(--b) 45%, #fff)); --glow: color-mix(in srgb, var(--a) 70%, transparent); --ok: #2EE6A6; --okbg: rgba(46,230,166,.15); --warn: #FFC83D; --warnbg: rgba(255,200,61,.15); --bad: #FF5C8A; --badbg: rgba(255,92,138,.15); --pri: var(--a); --pri2: var(--b); --card: var(--glass); --r: 24px; } * { box-sizing: border-box; } html { scrollbar-color: rgba(255,255,255,.25) transparent; } body { margin: 0; font-family: 'Rubik', 'Heebo', 'Segoe UI', system-ui, Arial, sans-serif; color: var(--ink2); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: color-mix(in srgb, var(--a) 60%, #fff); text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3 { margin: 0; color: #fff; } b, strong { color: #fff; } code { background: rgba(255,255,255,.1); padding: 1px 6px; border-radius: 6px; font-size: .92em; color: #fff; } ::selection { background: color-mix(in srgb, var(--a) 45%, transparent); } [hidden] { display: none !important; } /* ---------- animated page canvas ---------- */ .fl-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(45% 40% at 85% 5%, color-mix(in srgb, var(--a) 30%, transparent) 0%, transparent 70%), radial-gradient(40% 45% at 5% 30%, color-mix(in srgb, var(--b2) 30%, transparent) 0%, transparent 70%), radial-gradient(35% 35% at 90% 80%, rgba(34,211,238,.13) 0%, transparent 70%), linear-gradient(180deg, var(--bg2) 0%, var(--bg) 55%, var(--bg3) 100%); } .fl-canvas::after { content: ""; position: absolute; inset: 0; opacity: .32; background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.2px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(75% 65% at 55% 25%, #000 0%, transparent 75%); mask-image: radial-gradient(75% 65% at 55% 25%, #000 0%, transparent 75%); } .fl-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: flBlob 22s ease-in-out infinite alternate; } .fl-blob.b1 { width: 520px; height: 520px; left: -140px; top: 30%; background: radial-gradient(circle, var(--b2) 0%, transparent 70%); } .fl-blob.b2 { width: 460px; height: 460px; right: -120px; top: -120px; background: radial-gradient(circle, var(--a) 0%, transparent 70%); animation-duration: 26s; animation-delay: -6s; } .fl-blob.b3 { width: 380px; height: 380px; right: 18%; bottom: -160px; background: radial-gradient(circle, #22D3EE 0%, transparent 70%); opacity: .28; animation-duration: 30s; animation-delay: -12s; } @keyframes flBlob { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.12); } 100% { transform: translate(-40px,30px) scale(.95); } } .fl-obj { position: absolute; bottom: -80px; opacity: 0; animation: flRise linear infinite; will-change: transform, opacity; } @keyframes flRise { 0% { transform: translate3d(0,0,0) rotate(0); opacity: 0; } 10% { opacity: var(--o,.5); } 85% { opacity: var(--o,.5); } 100% { transform: translate3d(var(--dx,40px),-118vh,0) rotate(var(--rot,240deg)); opacity: 0; } } .fl-spark { width: var(--s,14px); height: var(--s,14px); background: conic-gradient(from 0deg, #fff 0 25%, transparent 0 50%, #fff 0 75%, transparent 0); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); filter: drop-shadow(0 0 6px #F0ABFC); } .fl-ring { width: var(--s,40px); height: var(--s,40px); border-radius: 50%; border: 2px solid color-mix(in srgb, color-mix(in srgb, var(--b2) 60%, #fff) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--b2) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--b2) 35%, transparent); } .fl-gem { width: var(--s,22px); height: var(--s,22px); background: linear-gradient(135deg, #67E8F9, var(--b2) 60%, var(--a)); clip-path: polygon(50% 0, 100% 38%, 80% 100%, 20% 100%, 0 38%); filter: drop-shadow(0 4px 12px rgba(34,211,238,.45)); } .fl-food { font-size: var(--s,26px); line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); } @media (prefers-reduced-motion: reduce) { .fl-obj, .fl-blob { animation: none !important; } .fl-obj { opacity: 0 !important; } } /* ---------- sidebar ---------- */ .ad-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 270px; display: flex; flex-direction: column; z-index: 30; transition: transform .25s; background: color-mix(in srgb, var(--bg2) 62%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-inline-end: 1px solid var(--line); } .ad-logo { display: flex; align-items: center; gap: 12px; height: 84px; padding: 0 22px; color: #fff; border-bottom: 1px solid var(--line); flex: none; } .ad-logo .mk { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 4px 14px var(--glow)); } .ad-logo .mk svg { width: 100%; height: 100%; display: block; } .ad-logo .tx { display: grid; line-height: 1.05; } .ad-logo .tx b { font-size: 25px; font-weight: 800; letter-spacing: .4px; background: linear-gradient(90deg, #fff 0%, color-mix(in srgb, var(--a) 35%, #fff) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ad-logo .tx small { font-size: 9.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink3); margin-top: 4px; direction: ltr; text-align: start; } .ad-biz { margin: 16px 16px 6px; padding: 14px; border-radius: 18px; display: grid; gap: 6px; background: linear-gradient(120deg, color-mix(in srgb, var(--a) 18%, transparent), color-mix(in srgb, var(--b2) 18%, transparent)); border: 1px solid var(--line); } .ad-biz b { font-size: 16px; } .ad-biz a { font-size: 13.5px; font-weight: 600; } .ad-biz .pill { justify-self: start; } .ad-side nav { display: grid; gap: 2px; padding: 10px 0; overflow-y: auto; } .ad-side nav a { display: flex; align-items: center; gap: 12px; margin: 2px 14px; padding: 9px 12px; border-radius: 16px; color: var(--ink2); font-weight: 600; font-size: 15.5px; transition: background .2s, color .2s; } .ad-side nav a i { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--glass2); color: color-mix(in srgb, var(--b2) 25%, #fff); transition: background .2s, box-shadow .2s; } .ad-side nav a i svg { width: 19px; height: 19px; } .ad-side nav a:nth-child(2) i { color: #FFE08A; } .ad-side nav a:nth-child(3) i { color: #7CFCD0; } .ad-side nav a:nth-child(4) i { color: #67E8F9; } .ad-side nav a:nth-child(5) i { color: #FFB3C8; } .ad-side nav a:hover { background: var(--glass2); color: #fff; } .ad-side nav a.act { background: linear-gradient(120deg, color-mix(in srgb, var(--a) 24%, transparent), color-mix(in srgb, var(--b2) 24%, transparent)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .ad-side nav a.act i { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px var(--glow); } .ad-badge { margin-inline-start: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 12.5px; display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 12px var(--glow); } .ad-user { margin-top: auto; padding: 16px 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink3); line-height: 1.6; } .ad-user b { color: #fff; font-weight: 700; } .ad-main { margin-inline-start: 270px; min-height: 100vh; } /* ---------- top bar ---------- */ .ad-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 84px; padding: 0 28px; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); box-shadow: 0 14px 40px -24px rgba(0,0,0,.9); } .ad-top h1 { font-size: 22px; font-weight: 800; } .ad-top .sp { flex: 1; } .ad-ic { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--glass2); border: 1px solid var(--line); color: #fff; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; } .ad-ic:hover { background: color-mix(in srgb, var(--a) 22%, transparent); transform: translateY(-2px); box-shadow: 0 10px 26px -12px var(--glow); } .ad-ic svg { width: 21px; height: 21px; } .ad-ic .ad-badge { position: absolute; top: -4px; inset-inline-end: -4px; border: 2px solid var(--bg); min-width: 22px; height: 22px; font-size: 11.5px; } .ad-me { display: flex; align-items: center; gap: 12px; color: #fff; } .ad-me span { font-size: 15px; } .ad-me span b { font-weight: 800; } .ad-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 21px; box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 26px -10px var(--glow); } .ad-burger { display: none; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass2); color: #fff; font-size: 20px; cursor: pointer; } .ad-content { padding: 26px 28px 70px; max-width: 1320px; } .ad-shade { display: none; } @media (max-width: 900px) { .ad-side { transform: translateX(100%); } body.nav-open .ad-side { transform: none; background: color-mix(in srgb, var(--bg2) 96%, transparent); } body.nav-open .ad-shade { display: block; position: fixed; inset: 0; background: rgba(5,2,15,.6); z-index: 25; } .ad-main { margin: 0; } .ad-burger { display: block; } .ad-top { padding: 0 14px; height: 70px; gap: 10px; } .ad-top h1 { font-size: 18px; } .ad-me span { display: none; } .ad-av { width: 44px; height: 44px; font-size: 18px; } .ad-ic { width: 44px; height: 44px; } .ad-content { padding: 18px 14px 60px; } } /* ---------- hero (dashboard greeting) ---------- */ .fl-hero { position: relative; display: flex; align-items: center; gap: 22px; padding: 24px 28px; border-radius: 28px; margin-bottom: 24px; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--a) 20%, transparent), color-mix(in srgb, var(--b2) 22%, transparent) 55%, rgba(34,211,238,.14)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 60px -36px var(--glow); } .fl-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; } .fl-hero-av { position: relative; flex: none; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; font-size: 44px; background: var(--grad); box-shadow: 0 14px 30px -12px var(--glow); animation: flBob 4.5s ease-in-out infinite; } .fl-hero-av::after { content: ""; position: absolute; inset: -6px; border-radius: 30px; border: 2px dashed rgba(255,255,255,.28); animation: flSpin 18s linear infinite; } @keyframes flBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } } @keyframes flSpin { to { transform: rotate(360deg); } } .fl-hero-txt { flex: 1; min-width: 0; position: relative; } .fl-hi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 500; } .fl-hero-txt h2 { margin: 6px 0; font-size: 32px; font-weight: 800; line-height: 1.15; } .fl-hero-txt h2 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .fl-hero-txt p { margin: 0; font-size: 15px; } .fl-mode { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--okbg); color: #7CFCD0; border: 1px solid rgba(46,230,166,.35); } .fl-mode.off { background: var(--badbg); color: #FFB3C8; border-color: rgba(255,92,138,.4); } .fl-mode i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: flPing 1.8s infinite; } @keyframes flPing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } } .fl-date { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.1); color: #fff; border: 1px solid var(--line); } .fl-hero-end { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; } @media (max-width: 767px) { .fl-hero { flex-wrap: wrap; padding: 18px; gap: 14px; } .fl-hero-av { width: 60px; height: 60px; font-size: 30px; border-radius: 18px; } .fl-hero-txt h2 { font-size: 23px; } .fl-hero-end { align-items: stretch; width: 100%; } } /* ---------- blocks ---------- */ .card { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 20px; box-shadow: 0 24px 50px -34px rgba(0,0,0,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .35s, box-shadow .35s; } .card:hover { border-color: rgba(255,255,255,.22); box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--b2) 70%, transparent); } .card > h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .grid { display: grid; gap: 18px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .g2, .g3 { grid-template-columns: minmax(0, 1fr); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .stat { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); box-shadow: 0 24px 50px -34px rgba(0,0,0,.85); overflow: hidden; } .stat .si { width: 58px; height: 58px; flex: none; border-radius: 20px; display: grid; place-items: center; font-size: 26px; background: var(--grad); box-shadow: 0 14px 30px -14px var(--glow); } .stat:nth-child(2) .si { background: linear-gradient(120deg, #2EE6A6, #14B8A6); box-shadow: 0 14px 30px -14px rgba(46,230,166,.8); } .stat:nth-child(3) .si { background: linear-gradient(120deg, #FFC83D, #FF8A3D); box-shadow: 0 14px 30px -14px rgba(255,200,61,.8); } .stat:nth-child(4) .si { background: linear-gradient(120deg, #22D3EE, #2563EB); box-shadow: 0 14px 30px -14px rgba(34,211,238,.8); } .stat small { display: block; color: var(--ink3); font-weight: 600; font-size: 13.5px; } .stat b { display: block; font-size: 28px; font-weight: 800; margin-top: 4px; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--b2) 25%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .muted { color: var(--ink3); } .small { font-size: 13.5px; } .pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--glass2); color: var(--ink2); border: 1px solid var(--line); } .pill.ok { background: var(--okbg); color: #7CFCD0; border-color: rgba(46,230,166,.35); } .pill.warn { background: var(--warnbg); color: #FFE08A; border-color: rgba(255,200,61,.4); } .pill.bad { background: var(--badbg); color: #FFB3C8; border-color: rgba(255,92,138,.4); } .pill.pri { background: color-mix(in srgb, var(--a) 18%, transparent); color: color-mix(in srgb, var(--a) 40%, #fff); border-color: color-mix(in srgb, var(--a) 40%, transparent); } .flash { padding: 13px 16px; border-radius: 16px; margin-bottom: 18px; font-weight: 600; white-space: pre-line; border: 1px solid var(--line); background: var(--glass2); color: #fff; } .flash-ok { background: var(--okbg); border-color: rgba(46,230,166,.4); color: #B7FBE3; } .flash-err { background: var(--badbg); border-color: rgba(255,92,138,.45); color: #FFD0DC; } .flash-warn { background: var(--warnbg); border-color: rgba(255,200,61,.45); color: #FFE9A8; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .spacer { flex: 1; } hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; } /* ---------- forms ---------- */ label.f { display: block; margin-bottom: 14px; } label.f > span { display: block; font-size: 14px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; } .inp, label.f input:not([type=checkbox]):not([type=radio]):not([type=color]), label.f select, label.f textarea, input[type=time], .modal-in input:not([type=checkbox]):not([type=radio]):not([type=color]), .modal-in select, .modal-in textarea { width: 100%; height: 46px; padding: 0 13px; border: 1.5px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(0,0,0,.24); color: #fff; outline: none; transition: border-color .15s, box-shadow .15s; } label.f textarea, .modal-in textarea { height: auto; min-height: 90px; padding: 10px 13px; resize: vertical; } .inp:focus, label.f input:focus, label.f select:focus, label.f textarea:focus, input[type=time]:focus, .modal-in input:focus, .modal-in select:focus, .modal-in textarea:focus { border-color: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 22%, transparent); } ::placeholder { color: rgba(255,255,255,.42); } select option { background: var(--bg2); color: #fff; } input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; } label.f small { display: block; margin-top: 5px; color: var(--ink3); font-size: 12.5px; } .chk { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 600; cursor: pointer; color: #fff; } input[type=checkbox], input[type=radio] { accent-color: var(--a); } .chk input { width: 20px; height: 20px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 14px; border: 0; cursor: pointer; font-weight: 700; white-space: nowrap; background: var(--grad); color: #fff; box-shadow: 0 12px 28px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .2s, box-shadow .2s, opacity .15s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,.3); } .btn:active { transform: translateY(0) scale(.98); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn.sec { background: var(--glass2); color: #fff; border: 1px solid var(--line); box-shadow: none; } .btn.sec:hover { background: rgba(255,255,255,.17); } .btn.ok { background: linear-gradient(120deg, #2EE6A6, #14B8A6); color: #062B22; box-shadow: 0 12px 28px -14px rgba(46,230,166,.8); } .btn.danger { background: linear-gradient(120deg, #FF5C8A, #E0257E); color: #fff; box-shadow: 0 12px 28px -14px rgba(255,92,138,.8); } .btn.sm { height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 11px; } /* ---------- tables ---------- */ .tbl { width: 100%; border-collapse: collapse; color: var(--ink2); } .tbl th { text-align: start; font-size: 13px; color: var(--ink3); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--line); } .tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; } .tbl tbody tr { transition: background .2s; } .tbl tbody tr:hover, .tbl tr:hover > td { background: rgba(255,255,255,.035); } .tbl .thumb { width: 50px; height: 50px; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.25); padding: 4px; } .tbl input.price { width: 90px; height: 38px; text-align: center; } .lowconf > td { background: rgba(255,200,61,.08); } .lowconf td:first-child { box-shadow: inset -4px 0 0 var(--warn); } .tbl-wrap { overflow-x: auto; } /* ---------- switch ---------- */ .sw { position: relative; display: inline-block; width: 48px; height: 27px; flex: none; } .sw input { opacity: 0; width: 0; height: 0; } .sw i { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid var(--line); cursor: pointer; transition: background .2s; } .sw i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: inset-inline-start .2s; } .sw input:checked + i { background: linear-gradient(120deg, #2EE6A6, #14B8A6); } .sw input:checked + i::after { inset-inline-start: 24px; } /* ---------- theme picker (settings) ---------- */ .hours-row { display: grid; grid-template-columns: 64px 48px minmax(0,1fr) minmax(0,1fr); gap: 10px; align-items: center; margin-bottom: 8px; color: #fff; } .hours-row input[type=time] { height: 42px; padding: 0 8px; } /* ---------- orders board ---------- */ .board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; align-items: start; overflow-x: auto; } @media (max-width: 1100px) { .board { grid-template-columns: repeat(4, 270px); } } .col { background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 22px; padding: 12px; min-height: 220px; } .col > h3 { font-size: 15px; padding: 4px 6px 12px; display: flex; justify-content: space-between; align-items: center; } .oc { background: var(--glass2); border-radius: 18px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); box-shadow: 0 16px 30px -22px rgba(0,0,0,.9); } .oc.fresh { animation: ocIn .6s; border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 30%, transparent), 0 16px 30px -18px var(--glow); } @keyframes ocIn { from { transform: scale(.9); opacity: 0; } } .oc .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .oc .hd b { font-size: 21px; font-weight: 800; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .oc ul { margin: 8px 0; padding: 0; list-style: none; font-size: 14px; color: #fff; } .oc li { padding: 3px 0; } .oc li small { display: block; color: var(--ink3); } .oc li [style*="background"], .oc [style*="#FFF7E0"] { background: var(--warnbg) !important; color: #FFE9A8 !important; } .oc .ft { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .oc .tot { font-weight: 800; color: #fff; } /* ---------- import / drop zones ---------- */ .drop, label.drop { display: block; border: 2px dashed rgba(255,255,255,.22); border-radius: 22px; padding: 30px; text-align: center; background: rgba(0,0,0,.18); cursor: pointer; transition: background .15s, border-color .15s; color: var(--ink2); } .drop:hover, .drop.over { background: color-mix(in srgb, var(--a) 12%, transparent); border-color: var(--a); } .drop b { color: #fff; } .drop img.prev { max-height: 260px; margin: 12px auto 0; border-radius: 14px; display: block; } .vis-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px; } .vis-pick label { cursor: pointer; border-radius: 14px; background: rgba(0,0,0,.28); padding: 6px; text-align: center; color: #fff; font-size: 11px; border: 2px solid transparent; } .vis-pick label:has(input:checked) { border-color: var(--a); box-shadow: 0 0 16px -4px var(--glow); } .vis-pick input { position: absolute; opacity: 0; } .vis-pick img { width: 100%; aspect-ratio: 1; object-fit: contain; } .vis-pick label[hidden] { display: none; } .imp-tbl td, .imp-tbl th { padding: 6px 8px; font-size: 14px; } .imp-tbl img { width: 40px; height: 40px; object-fit: contain; background: rgba(0,0,0,.25); border-radius: 8px; padding: 3px; } .conf { display: inline-block; min-width: 44px; text-align: center; padding: 2px 6px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--okbg); color: #7CFCD0; } .conf.mid { background: var(--warnbg); color: #FFE08A; } .conf.low { background: var(--badbg); color: #FFB3C8; } /* ---------- auth (login / register) ---------- */ body.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: transparent; } .auth-box { width: 100%; max-width: 460px; background: color-mix(in srgb, var(--bg2) 72%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.16); border-radius: 28px; padding: 30px; box-shadow: 0 40px 90px -40px var(--glow); } .auth-box .ad-logo { justify-content: center; border: 0; height: auto; padding: 0 0 18px; } .auth-box h1 { text-align: center; font-size: 24px; margin-bottom: 20px; } .auth-box .btn { width: 100%; height: 52px; font-size: 17px; } .auth-box .alt { text-align: center; margin-top: 16px; color: var(--ink2); } .slug-in { display: flex; direction: ltr; border: 1.5px solid rgba(255,255,255,.18); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.24); } .slug-in span { padding: 0 10px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--ink3); font-size: 13px; white-space: nowrap; } .slug-in input { border: 0 !important; box-shadow: none !important; direction: ltr; background: transparent !important; } /* ---------- modal (menu editor) ---------- */ .modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; } .modal[hidden] { display: none; } .modal-bd { position: absolute; inset: 0; background: rgba(5,2,15,.62); backdrop-filter: blur(4px); } .modal-in { position: relative; width: min(980px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: linear-gradient(170deg, color-mix(in srgb, var(--bg4) 98%, transparent), color-mix(in srgb, var(--bg) 98%, transparent)); border: 1px solid rgba(255,255,255,.16); border-radius: 26px; padding: 26px; box-shadow: 0 40px 90px -30px #000, 0 0 60px -30px var(--glow); color: var(--ink2); } .modal-in h2 { margin: 0 0 16px; } .modal-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass2); color: #fff; font-size: 22px; cursor: pointer; } /* ---------- StoreAI import page ---------- */ .sa-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .sa-steps > div { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; background: var(--glass); border: 1px solid var(--line); border-radius: 20px; padding: 13px 15px; } .sa-steps i { grid-row: span 2; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--glass2); color: var(--ink3); } .sa-steps b { font-size: 14.5px; } .sa-steps small { color: var(--ink3); font-size: 12px; } .sa-steps .on { border-color: color-mix(in srgb, var(--a) 60%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--a) 16%, transparent), color-mix(in srgb, var(--b2) 16%, transparent)); } .sa-steps .on i { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px var(--glow); } .sa-steps .done i { background: linear-gradient(120deg, #2EE6A6, #14B8A6); color: #062B22; font-size: 0; } .sa-steps .done i::after { content: "✓"; font-size: 17px; } @media (max-width: 800px) { .sa-steps { grid-template-columns: 1fr 1fr; } } .sa-busy { display: flex; align-items: center; gap: 16px; border-color: color-mix(in srgb, var(--a) 55%, transparent); } .sa-spin { display: inline-block; width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--a); border-right-color: var(--b2); animation: saSpin .8s linear infinite; flex: none; box-shadow: 0 0 24px -6px var(--glow); } @keyframes saSpin { to { transform: rotate(360deg); } } .sa-work { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; } .sa-work.one { grid-template-columns: 1fr; } .sa-orig { position: sticky; top: 100px; } .sa-orig img { width: 100%; border-radius: 14px; border: 1px solid var(--line); } @media (max-width: 1000px) { .sa-work { grid-template-columns: 1fr; } .sa-orig { position: static; } } .sa-head { align-items: flex-end; } .sa-cat { border: 1px solid var(--line); border-radius: 18px; margin-bottom: 14px; overflow: hidden; background: rgba(0,0,0,.12); } .sa-cat-h { display: flex; gap: 8px; align-items: center; padding: 10px; background: linear-gradient(120deg, color-mix(in srgb, var(--a) 14%, transparent), color-mix(in srgb, var(--b2) 14%, transparent)); border-bottom: 1px solid var(--line); } .sa-cat-h .inp { flex: 1; font-weight: 800; font-size: 15px; height: 42px; } .sa-tbl th { font-size: 12px; } .sa-tbl td { padding: 6px; } .sa-tbl .inp { height: 40px; font-size: 14px; padding: 0 10px; } .sa-tbl .inp.price.bad { border-color: rgba(255,92,138,.7); background: rgba(255,92,138,.12); } .sa-tbl .inp.price.mid { border-color: rgba(255,200,61,.7); background: rgba(255,200,61,.1); } .sa-tbl td.th { width: 56px; } .sa-tbl td.th img, .sa-tbl td.th .ph { width: 46px; height: 46px; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.3); display: grid; place-items: center; font-size: 20px; } .sa-tbl tr.sa-opts td { padding-top: 0; font-size: 12.5px; color: var(--ink3); } #saJson { width: 100%; min-height: 60vh; font: 12.5px/1.45 Consolas, monospace; border: 1.5px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px; background: rgba(0,0,0,.3); color: color-mix(in srgb, var(--b2) 25%, #fff); } .sa-actions { margin-top: 16px; position: sticky; bottom: 0; z-index: 2; padding: 14px 0 4px; border-top: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--bg2) 92%, transparent), color-mix(in srgb, var(--bg) 98%, transparent)); } .sa-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 8px; } .sa-bar i { display: block; height: 100%; width: 0; background: var(--grad); box-shadow: 0 0 14px var(--glow); transition: width .4s; } .sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .sa-pic { display: grid; justify-items: center; gap: 6px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 18px; text-align: center; background: rgba(0,0,0,.18); } .sa-pic img, .sa-pic .ph { width: 116px; height: 116px; object-fit: contain; border-radius: 14px; display: grid; place-items: center; font-size: 34px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--b2) 30%, transparent), transparent 70%); } .sa-pic b { font-size: 13px; line-height: 1.25; min-height: 2.5em; } .sa-pic.ok { border-color: rgba(46,230,166,.45); } .sa-pic.err { border-color: rgba(255,92,138,.6); background: rgba(255,92,138,.08); } .sa-pic.busy { border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); } .sa-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: var(--ink3); font-size: 13px; } .sa-or::before, .sa-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------- dine-in: floor ---------- */ .dn-bar { padding: 14px 18px; } .dn-bar .row { gap: 12px; } .dn-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink3); } .dn-legend i { width: 12px; height: 12px; border-radius: 4px; } .dn-legend .free { background: rgba(255,255,255,.25); } .dn-legend .busy { background: var(--grad); } .dn-legend .ready { background: var(--ok); } .dn-legend .call { background: var(--bad); } .dn-floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .dn-t { position: relative; display: grid; gap: 8px; align-content: start; min-height: 190px; padding: 16px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, transform .2s; } .dn-t:hover { transform: translateY(-2px); } .dn-t.busy { border-color: color-mix(in srgb, var(--a) 55%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--a) 14%, transparent), color-mix(in srgb, var(--b2) 10%, transparent)); } .dn-t.ready { border-color: rgba(46,230,166,.7); box-shadow: 0 0 0 3px rgba(46,230,166,.18); } .dn-t.call { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(255,92,138,.22); animation: dnPulse 1.4s ease-in-out infinite; } @keyframes dnPulse { 50% { box-shadow: 0 0 0 7px rgba(255,92,138,.12); } } .dn-th { display: flex; align-items: baseline; gap: 8px; } .dn-th b { font-size: 34px; font-weight: 900; line-height: 1; } .dn-th span { color: var(--ink3); font-size: 12.5px; flex: 1; } .dn-ed { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass2); color: #fff; cursor: pointer; } .dn-bill { font-size: 26px; font-weight: 800; color: #fff; direction: ltr; text-align: end; } .dn-meta { font-size: 12.5px; color: var(--ink3); } .dn-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; } .dn-free { color: var(--ink3); font-weight: 700; margin-top: auto; } .dn-t .btn { margin-top: auto; } .dn-calls { display: grid; gap: 10px; margin-bottom: 18px; } .dn-call { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: rgba(255,92,138,.14); border: 1px solid rgba(255,92,138,.5); color: #fff; animation: dnPulse 1.4s ease-in-out infinite; } .dn-call.bill { background: rgba(255,200,61,.13); border-color: rgba(255,200,61,.5); } .dn-call .ic { font-size: 24px; } .dn-call b { font-size: 18px; } .dn-call span { flex: 1; color: var(--ink2); } .dn-round { border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px; margin-bottom: 12px; background: rgba(0,0,0,.15); } .dn-rh { display: flex; justify-content: space-between; margin-bottom: 4px; } .dn-it { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); color: #fff; } .dn-it small { display: block; color: var(--ink3); font-size: 12px; } .dn-it.cancelled > span:first-child, .dn-it.cancelled b { text-decoration: line-through; opacity: .6; } .dn-ia { display: flex; gap: 6px; } .dn-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px 0; font-size: 16px; } .dn-total b { font-size: 26px; } @media (max-width: 700px) { .dn-it { grid-template-columns: minmax(0,1fr) auto; } .dn-ia { grid-column: 1 / -1; } } /* ---------- dine-in: kitchen display ---------- */ .kd-head { margin-bottom: 14px; } #kdSound.on { background: linear-gradient(120deg, #2EE6A6, #14B8A6); color: #062B22; } .kd-flash { margin-bottom: 14px; padding: 14px 18px; border-radius: 18px; font-size: 18px; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 18px 40px -16px var(--glow); animation: kdIn .5s cubic-bezier(.3,1.5,.5,1); } @keyframes kdIn { from { transform: translateY(-14px) scale(.96); opacity: 0; } } .kd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; } .kd-card { border-radius: 22px; background: var(--glass); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 20px 40px -28px #000; } .kd-card.fresh { border-color: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 30%, transparent), 0 20px 40px -20px var(--glow); animation: kdIn .6s cubic-bezier(.3,1.5,.5,1); } .kd-card.warm .kd-h { background: linear-gradient(120deg, rgba(255,200,61,.3), rgba(255,138,61,.2)); } .kd-card.late .kd-h { background: linear-gradient(120deg, rgba(255,92,138,.4), rgba(224,37,126,.25)); } .kd-h { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--a) 22%, transparent), color-mix(in srgb, var(--b2) 22%, transparent)); border-bottom: 1px solid var(--line); } .kd-t { width: 70px; height: 70px; flex: none; border-radius: 18px; display: grid; place-items: center; align-content: center; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18); } .kd-t small { font-size: 11px; color: var(--ink3); } .kd-t b { font-size: 32px; font-weight: 900; line-height: 1; } .kd-m b { display: block; font-size: 18px; } .kd-m span { font-size: 13px; color: var(--ink2); } .kd-m i { font-style: normal; font-weight: 700; color: #fff; } .kd-card ul { list-style: none; margin: 0; padding: 6px 10px; } .kd-card li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 8px; border-radius: 14px; cursor: pointer; transition: background .2s; color: #fff; } .kd-card li + li { border-top: 1px solid var(--line); } .kd-card li:hover { background: rgba(255,255,255,.05); } .kd-card li.busy { opacity: .5; } .kd-card li .q { font-size: 20px; font-weight: 900; min-width: 34px; } .kd-card li .n { font-size: 16.5px; font-weight: 700; } .kd-card li small { display: block; font-weight: 400; color: var(--ink3); font-size: 13px; } .kd-card li em { display: block; font-style: normal; color: #FFE08A; font-size: 13.5px; font-weight: 600; margin-top: 2px; } .kd-card li .s { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: rgba(34,211,238,.15); color: #A5F3FC; white-space: nowrap; } .kd-card li.preparing .s { background: var(--warnbg); color: #FFE08A; } .kd-card li.ready .s { background: var(--okbg); color: #7CFCD0; } .kd-card li.served { opacity: .45; } .kd-card li.served .s { background: var(--glass2); color: var(--ink3); } .kd-card li.cancelled { opacity: .4; text-decoration: line-through; cursor: default; } .kd-card li.cancelled .s { background: var(--badbg); color: #FFB3C8; } .kd-note { margin: 0 14px 8px; color: #FFE08A; font-size: 14px; } .kd-acts { display: flex; gap: 6px; padding: 10px 12px 14px; flex-wrap: wrap; } .kd-acts .btn { flex: 1; } .kd-empty { text-align: center; grid-column: 1 / -1; padding: 40px; } /* ---------- language switcher ---------- */ .auth-lang { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 5; } @media (max-width: 700px) { .ad-me span { display: none; } } /* ---------- menu manager: same look as the diner's menu ---------- */ .mn-review { border-color: rgba(255,200,61,.5); background: rgba(255,200,61,.08); } .mn-bar { padding: 16px 18px; } .mn-view { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink3); font-weight: 600; } .mn-view select { height: 40px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: #fff; padding: 0 10px; font: inherit; } .mn-view select option { color: #fff; background: var(--bg2); } .mn-tr { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } .mn-tr-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--glass2); font-size: 20px; } .mn-tr-tx { flex: 1; min-width: 200px; display: grid; gap: 4px; } .mn-tr-tx b { color: #fff; } .mn-tr-l { display: inline-block; margin-inline-end: 12px; } .mn-tr-l.miss { color: #FFE08A; } .mn-tr-l.ok { color: #7CFCD0; } .mn-cats-w { position: sticky; top: 84px; z-index: 15; } .mn-cats { position: relative; display: flex; gap: 8px; padding: 10px 2px 12px; margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 55%, transparent) 80%, transparent); } .mn-cats::-webkit-scrollbar { display: none; } .mn-cats a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 8px 14px; border-radius: 99px; background: var(--glass2); border: 1px solid var(--line); color: var(--ink2); font-weight: 700; font-size: 14.5px; text-decoration: none; } .mn-cats a img { width: 30px; height: 30px; object-fit: contain; } .mn-cats a small { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: rgba(0,0,0,.3); font-size: 11.5px; } .mn-cats a.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -10px var(--glow); } .mn-sec { margin-bottom: 30px; scroll-margin-top: 150px; } .mn-sec-h { display: flex; align-items: center; gap: 10px; margin: 8px 2px 14px; } .mn-sec-h h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; } .mn-sec-h h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } [dir=rtl] .mn-sec-h h2::after { background: linear-gradient(-90deg, var(--line), transparent); } .mn-sec-a { display: flex; gap: 6px; } .mn-ic { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass2); color: #fff; cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: background .2s, transform .15s; } .mn-ic:hover:not(:disabled) { background: rgba(255,255,255,.2); } .mn-ic:disabled { opacity: .3; cursor: default; } .mn-ic.bad:hover { background: rgba(255,92,138,.3); } .mn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } .mn-p { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--glass); border: 1px solid var(--line); overflow: hidden; cursor: pointer; text-align: start; transition: transform .25s, border-color .25s, box-shadow .25s; animation: mnIn .45s ease both; outline: none; } .mn-p:hover, .mn-p:focus-visible { transform: translateY(-4px); border-color: rgba(255,255,255,.28); box-shadow: 0 24px 40px -26px var(--glow); } .mn-p:hover .mn-img img { transform: scale(1.06) rotate(-2deg); } @keyframes mnIn { from { opacity: 0; transform: translateY(10px); } } .mn-img { aspect-ratio: 1 / .82; display: grid; place-items: center; padding: 12px; background: radial-gradient(60% 55% at 50% 58%, color-mix(in srgb, var(--b2) 34%, transparent), transparent 72%); } .mn-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(0,0,0,.5)); transition: transform .4s cubic-bezier(.3,1.4,.5,1); } .mn-p.na .mn-img img { filter: grayscale(1) brightness(.55); } .mn-p .out { position: absolute; top: 12px; inset-inline-end: -34px; transform: rotate(45deg); background: var(--bad); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 40px; z-index: 2; } [dir=rtl] .mn-p .out { transform: rotate(-45deg); } .mn-flag { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2; height: 24px; padding: 0 9px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; background: rgba(255,200,61,.9); color: #3A2600; } .mn-flag.tr { top: 38px; background: rgba(34,211,238,.9); color: #052A33; } .mn-info { padding: 4px 14px 14px; display: grid; gap: 5px; flex: 1; } .mn-info h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; } .mn-info p { margin: 0; font-size: 12.5px; color: var(--ink3); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mn-meta { display: flex; flex-wrap: wrap; gap: 4px; } .mn-meta i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--ink2); } .mn-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; } .mn-price { font-size: 19px; font-weight: 900; color: #fff; direction: ltr; } .mn-add { min-height: 220px; border-radius: 24px; border: 2px dashed rgba(255,255,255,.22); background: transparent; color: var(--ink2); font: inherit; font-weight: 700; cursor: pointer; display: grid; place-content: center; gap: 6px; transition: border-color .2s, background .2s, color .2s; } .mn-add b { font-size: 40px; line-height: 1; color: #fff; } .mn-add:hover { border-color: var(--a); background: color-mix(in srgb, var(--a) 10%, transparent); color: #fff; } .mn-modal { max-width: 760px; } .mn-ed-top { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; padding-inline-end: 44px; } .mn-ed-img { width: 96px; height: 96px; flex: none; border-radius: 22px; display: grid; place-items: center; padding: 8px; background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--b2) 40%, transparent), rgba(0,0,0,.25)); } .mn-ed-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.5)); } .mn-ed-top h2 { margin: 0 0 8px; } .mn-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; } .mn-tabs button { flex: 1; min-height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ink2); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; } .mn-tabs button.on { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px var(--glow); } .mn-tab { display: none; } .mn-tab.on { display: block; animation: mnIn .3s ease; } .mn-grp { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: rgba(0,0,0,.15); } .mn-trl { border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-bottom: 12px; display: grid; gap: 8px; background: rgba(0,0,0,.15); } .mn-trl-h { font-weight: 800; color: #fff; } .mn-trl textarea { min-height: 60px !important; } .mn-tr-opts { line-height: 1.6; } .mn-ed-foot { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; } /* buttons without rounded corners (change --btn-r to round them again, e.g. 8px) */ :root { --btn-r: 9px; } .btn, .btn.sm, .mn-ic, .mn-tabs, .mn-tabs button, .lang-sw > summary, .mn-add, .kd-acts .btn, .dn-ed { border-radius: var(--btn-r) !important; } .fl-hero-end { flex-direction: row; align-items: center; flex-wrap: nowrap; } @media (max-width: 767px) { .fl-hero-end { flex-direction: row; } .fl-hero-end .btn { flex: 1; } } /* ---------- theme picker: each theme as a small live preview (same surfaces as the real screens) ---------- */ .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .theme { position: relative; cursor: pointer; display: grid; gap: 8px; transition: transform .2s; } .theme input { position: absolute; opacity: 0; pointer-events: none; } .theme .tp { --bg: color-mix(in oklab, var(--a) 7%, #0B0716); position: relative; overflow: hidden; display: grid; gap: 6px; padding: 0 10px 10px; border-radius: 20px; text-align: center; background: radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--b2) 16%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--a) 12%, #140C26), var(--bg)); border: 2px solid color-mix(in srgb, var(--a) 16%, rgba(255,255,255,.12)); box-shadow: 0 16px 30px -20px #000; transition: border-color .2s, box-shadow .2s; } .tp-top { position: relative; height: 62px; margin: 0 -10px; display: grid; place-items: end center; padding-bottom: 2px; background: linear-gradient(180deg, var(--a), color-mix(in srgb, var(--a) 40%, transparent) 60%, transparent); } .tp-top::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.2px); background-size: 12px 12px; opacity: .35; } .tp-ic { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; transform: translateY(14px); background: color-mix(in srgb, #fff 22%, var(--a)); border: 1px solid rgba(255,255,255,.4); box-shadow: 0 10px 18px -8px color-mix(in srgb, var(--a) 80%, transparent); } .tp-cf { position: absolute; width: 6px; height: 6px; border-radius: 2px; } .tp-cf.c1 { top: 12px; left: 22%; background: #FFD84D; transform: rotate(20deg); } .tp-cf.c2 { top: 22px; right: 20%; background: #67E8F9; border-radius: 50%; } .tp-chip { justify-self: center; margin-top: 16px; padding: 2px 9px; border-radius: 99px; background: rgba(0,0,0,.3); font-size: 10px; color: rgba(255,255,255,.75); } .tp-chip b { color: #FFE08A; font-weight: 800; } .tp-t { color: #fff; font-size: 13.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 9px; background: color-mix(in srgb, var(--a) 6%, rgba(255,255,255,.055)); border: 1px solid color-mix(in srgb, var(--a) 16%, rgba(255,255,255,.12)); } .tp-row i { width: 15px; height: 15px; flex: none; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 60%, var(--b2))); } .tp-row span, .tp-tip span { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); } .tp-row + .tp-row span { flex: .7; } .tp-tip { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 9px; background: color-mix(in srgb, var(--b2) 18%, transparent); border: 1px solid color-mix(in srgb, var(--b2) 40%, transparent); } .tp-tip em { width: 14px; height: 14px; border-radius: 5px; background: color-mix(in srgb, var(--b2) 70%, #fff); flex: none; } .tp-btn { margin-top: 2px; padding: 7px; border-radius: 9px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(120deg, var(--a), color-mix(in srgb, var(--a) 55%, var(--b)) 50%, var(--b)); box-shadow: 0 8px 16px -10px var(--a); } .tp-nm { display: block; text-align: center; font-weight: 800; font-size: 14px; color: var(--ink2); } .theme:hover { transform: translateY(-3px); } .theme:has(input:checked) .tp { border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 40%, transparent), 0 20px 36px -18px var(--a); } .theme:has(input:checked) .tp-nm { color: #fff; } .theme:has(input:checked) .tp-nm::before { content: "✓ "; color: var(--ok); } /* ---------- logo ---------- */ .lg-card { overflow: hidden; } .lg-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 70% at 85% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 70%), radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--b2) 18%, transparent), transparent 70%); } .lg-head { position: relative; display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .lg-head > div { flex: 1; } .lg-head h2 { margin: 0 0 4px; } .lg-head p { margin: 0; color: var(--ink3); font-size: 14px; } .lg-ai { padding: 6px 12px; border-radius: 99px; font-weight: 900; font-size: 12.5px; color: #fff; background: var(--grad); box-shadow: 0 8px 20px -8px var(--glow); letter-spacing: .5px; } .lg-main { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: stretch; } @media (max-width: 900px) { .lg-main { grid-template-columns: 1fr; } } .lg-stage { display: grid; justify-items: center; align-content: center; gap: 14px; padding: 22px 16px; border-radius: 24px; background: radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%), rgba(0,0,0,.28); border: 1px solid var(--line); } .lg-spot { position: relative; width: 168px; height: 168px; display: grid; place-items: center; } .lg-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--a) 55%, transparent); animation: flSpin 26s linear infinite; } .lg-ring.r2 { inset: 16px; border: 1px solid rgba(255,255,255,.12); border-style: solid; animation: none; background: radial-gradient(circle, rgba(255,255,255,.07), transparent 70%); } .lg-cur { position: relative; width: 120px; height: 120px; display: grid; place-items: center; } .lg-cur img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.55)); animation: tbPopA .5s cubic-bezier(.3,1.5,.5,1); } @keyframes tbPopA { from { transform: scale(.7); opacity: 0; } } .lg-mono { width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; font-size: 48px; font-weight: 900; color: #fff; background: var(--grad); box-shadow: 0 16px 34px -12px var(--glow); } .lg-mock { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 14px; background: color-mix(in srgb, var(--bg) 85%, transparent); border: 1px solid var(--line); } .lg-mlogo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; font-weight: 900; color: #fff; background: rgba(255,255,255,.08); } .lg-mlogo img { width: 100%; height: 100%; object-fit: contain; } .lg-mock b { color: #fff; font-size: 14px; } .lg-mock em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; color: #fff; background: var(--grad); } .lg-cap { font-size: 12.5px; color: var(--ink3); } .lg-link { border: 0; background: none; color: #FFB3C8; font: inherit; font-weight: 700; cursor: pointer; padding: 0; } .lg-steps { display: grid; gap: 12px; align-content: start; } .lg-step { display: flex; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); } .lg-step > i { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-weight: 900; color: #fff; background: var(--grad); box-shadow: 0 6px 14px -6px var(--glow); } .lg-sb { flex: 1; display: grid; gap: 10px; min-width: 0; } .lg-sb > b { color: #fff; font-size: 15px; padding-top: 4px; } .lg-drop { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; cursor: pointer; border: 2px dashed color-mix(in srgb, var(--a) 40%, rgba(255,255,255,.18)); background: rgba(0,0,0,.18); transition: border-color .2s, background .2s, transform .2s; } .lg-drop:hover, .lg-drop.on { border-color: var(--a); background: color-mix(in srgb, var(--a) 12%, transparent); transform: translateY(-1px); } .lg-thumb { width: 64px; height: 64px; flex: none; border-radius: 14px; display: grid; place-items: center; padding: 6px; background: rgba(255,255,255,.06); color: color-mix(in srgb, var(--a) 60%, #fff); } .lg-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .lg-thumb svg { width: 28px; height: 28px; } .lg-dt { display: grid; gap: 2px; } .lg-dt b { color: #fff; font-size: 14px; } .lg-dt small { color: var(--ink3); font-size: 12px; letter-spacing: .5px; } .lg-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 22px; } .lg-grid:empty { display: none; } .lg-c { position: relative; display: grid; justify-items: center; gap: 10px; padding: 14px 14px 16px; border-radius: 22px; text-align: center; background: var(--glass); border: 1px solid var(--line); transition: transform .25s, border-color .25s, box-shadow .25s; animation: mnIn .45s ease both; animation-delay: calc(var(--k) * 60ms); } .lg-c.has:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--a) 60%, transparent); box-shadow: 0 22px 40px -24px var(--glow); } .lg-c .lg-box { width: 100%; height: 160px; border-radius: 16px; display: grid; place-items: center; padding: 14px; background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--a) 20%, transparent), transparent 75%), rgba(0,0,0,.3); } .lg-c .lg-box img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)); animation: tbPopA .5s cubic-bezier(.3,1.5,.5,1); } .lg-c .lg-box span { color: var(--ink3); font-size: 22px; } .lg-vn { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff; background: rgba(0,0,0,.45); border: 1px solid var(--line); } .lg-c b { color: #fff; font-size: 14.5px; } .lg-c small.e { color: #FFB3C8; font-size: 11.5px; } .lg-c .btn { width: 100%; } .lg-c.sel { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(46,230,166,.22), 0 22px 40px -24px rgba(46,230,166,.6); } .lg-c.sel::after { content: "✓"; position: absolute; top: 10px; inset-inline-end: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #062B22; background: var(--ok); } .lg-c.busy .lg-box { background-size: 200% 100%; background-image: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.03) 70%); animation: lgShim 1.4s linear infinite; } @keyframes lgShim { to { background-position: -200% 0; } } .lg-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--a); animation: saSpin .8s linear infinite; } .ad-blogo { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.25); padding: 4px; } .ad-biz.has-logo { grid-template-columns: 44px 1fr; align-items: center; } .ad-biz.has-logo .ad-blogo { grid-row: span 2; } .kd-head .pill { height: 46px; padding: 0 18px; font-size: 15px; font-weight: 800; border-radius: var(--btn-r); } .mn-info { width: 100%; } .mn-row { width: 100%; } /* ---------- logo extras ---------- */ .lg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lg-btns .btn { width: 100%; height: 48px; padding: 0 14px; font-size: 14.5px; } @media (max-width: 560px) { .lg-btns { grid-template-columns: 1fr; } } .lg-drop { position: relative; } .lg-sdel, .lg-del { position: absolute; z-index: 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: #FFB3C8; background: rgba(0,0,0,.45); border: 1px solid rgba(255,92,138,.35); transition: background .2s, color .2s, transform .15s; } .lg-sdel svg, .lg-del svg { width: 16px; height: 16px; } .lg-sdel:hover, .lg-del:hover { background: var(--bad); color: #fff; transform: scale(1.06); } .lg-sdel { top: 50%; inset-inline-end: 12px; transform: translateY(-50%); } .lg-sdel:hover { transform: translateY(-50%) scale(1.06); } .lg-del { top: 10px; inset-inline-end: 10px; } .lg-c.sel::after { inset-inline-end: 48px; } .lg-delall { grid-column: 1 / -1; justify-self: start; gap: 8px; color: #FFB3C8; } .lg-delall svg { width: 16px; height: 16px; } .lg-c .lg-box, .lg-cur, .lg-thumb { background-image: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--a) 20%, transparent), transparent 75%); } /* ---------- form controls: one look everywhere (select arrow, checkbox, radio) ---------- */ select, .mn-view select, label.f select, .modal-in select { -webkit-appearance: none !important; appearance: none !important; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), linear-gradient(120deg, var(--a), var(--b2)) !important; background-repeat: no-repeat, no-repeat !important; background-size: 14px 14px, 30px 30px !important; background-color: rgba(0,0,0,.25) !important; background-position: left 13px center, left 5px center !important; padding-inline-start: 46px !important; padding-inline-end: 14px !important; border-radius: 12px !important; } [dir=ltr] select, [dir=ltr] .mn-view select, [dir=ltr] label.f select, [dir=ltr] .modal-in select { background-position: right 13px center, right 5px center !important; } select:hover { border-color: color-mix(in srgb, var(--a) 60%, transparent) !important; } input[type=checkbox]:not(.sw input), input[type=radio]:not(.theme input):not(.vis-pick input) { -webkit-appearance: none; appearance: none; flex: none; width: 22px !important; height: 22px !important; margin: 0; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; border-radius: 7px; border: 2px solid color-mix(in srgb, var(--a) 45%, rgba(255,255,255,.35)); background: rgba(0,0,0,.28); transition: background .2s, border-color .2s, box-shadow .2s; } input[type=radio]:not(.theme input):not(.vis-pick input) { border-radius: 50%; } input[type=checkbox]:not(.sw input):hover, input[type=radio]:not(.theme input):not(.vis-pick input):hover { border-color: var(--a); } input[type=checkbox]:not(.sw input):checked { border-color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat, linear-gradient(135deg, var(--a), var(--b2)); box-shadow: 0 4px 12px -4px var(--glow); } input[type=radio]:not(.theme input):not(.vis-pick input):checked { border-color: var(--a); background: radial-gradient(circle, var(--a) 0 42%, transparent 46%), rgba(0,0,0,.28); } input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, select:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 28%, transparent); } .chk input { width: 22px; height: 22px; } /* ---------- in-app dialog (replaces alert / confirm / prompt) ---------- */ .ad-dlg { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .2s; } .ad-dlg.on { opacity: 1; } .ad-dlg-bd { position: absolute; inset: 0; background: rgba(5,2,15,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ad-dlg-in-box { position: relative; width: min(440px, 100%); padding: 26px 24px 20px; border-radius: 26px; text-align: center; display: grid; gap: 10px; background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 70%), linear-gradient(170deg, var(--bg4), var(--bg)); border: 1px solid color-mix(in srgb, var(--a) 30%, rgba(255,255,255,.14)); box-shadow: 0 40px 80px -30px #000, 0 0 60px -30px var(--glow); transform: translateY(14px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.25); } .ad-dlg.on .ad-dlg-in-box { transform: none; } .ad-dlg-in-box.danger { border-color: rgba(255,92,138,.45); background: radial-gradient(80% 60% at 50% 0%, rgba(255,92,138,.2), transparent 70%), linear-gradient(170deg, var(--bg4), var(--bg)); } .ad-dlg-ic { justify-self: center; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; background: var(--glass2); border: 1px solid var(--line); margin-bottom: 4px; } .ad-dlg h3 { margin: 0; color: #fff; font-size: 19px; font-weight: 800; } .ad-dlg p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.55; } .ad-dlg-in { width: 100%; height: 50px; margin-top: 6px; padding: 0 14px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 17px; text-align: center; outline: none; } .ad-dlg-in:focus { border-color: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 22%, transparent); } .ad-dlg-in.bad { border-color: var(--bad); animation: tbShakeA .35s; } @keyframes tbShakeA { 25%, 75% { transform: translateX(-6px); } 50% { transform: translateX(6px); } } .ad-dlg-err { color: #FFB3C8; font-size: 13px; } .ad-dlg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .ad-dlg-btns .btn { width: 100%; height: 48px; } .ad-dlg-btns .btn:only-child { grid-column: 1 / -1; } /* select arrow: a full-height chip inside the field, same corner radius */ select, .mn-view select, label.f select, .modal-in select { background-size: 14px 14px, 34px calc(100% - 8px) !important; background-position: left 14px center, left 4px center !important; padding-inline-start: 48px !important; } [dir=ltr] select, [dir=ltr] .mn-view select, [dir=ltr] label.f select, [dir=ltr] .modal-in select { background-position: right 14px center, right 4px center !important; padding-inline-start: 14px !important; padding-inline-end: 48px !important; } /* rounded chip: selects are wrapped by admin.js in .sel-w (a