/* ============================================================= VERTEX — Multipurpose HTML Theme Shared design system. Each homepage sets --accent / --accent-2 (and optionally .dark on ) to reskin the whole page. ============================================================= */ :root { --accent: #ff6a2c; --accent-2: #ffa62e; --grad: linear-gradient(135deg, var(--accent), var(--accent-2)); --bg: #ffffff; --bg-alt: #f6f7fb; --fg: #131629; --muted: #626784; --card: #ffffff; --border: #e7e9f2; --radius: 16px; --shadow-sm: 0 4px 18px rgba(20, 22, 45, .06); --shadow: 0 18px 50px rgba(20, 22, 45, .10); --shadow-lg: 0 30px 70px rgba(20, 22, 45, .14); --f-head: 'Space Grotesk', sans-serif; --f-body: 'Inter', sans-serif; --maxw: 1180px; } /* dark variant */ body.dark { --bg: #0a0c16; --bg-alt: #10131f; --fg: #eef0fb; --muted: #9aa0bd; --card: rgba(255,255,255,.04); --border: rgba(255,255,255,.09); --shadow-sm: 0 4px 18px rgba(0,0,0,.4); --shadow: 0 18px 50px rgba(0,0,0,.5); --shadow-lg: 0 30px 70px rgba(0,0,0,.55); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--f-body); background: var(--bg); color: var(--fg); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1,h2,h3,h4,h5 { font-family: var(--f-head); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } section { position: relative; } .container { width: min(var(--maxw), 92%); margin: 0 auto; } .grad-text { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .center { text-align: center; } .muted { color: var(--muted); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 12px; font-family: var(--f-body); font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 26px rgba(255,106,44,.32); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(255,106,44,.45); } .btn-outline { border-color: var(--border); color: var(--fg); background: transparent; } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-solid { background: var(--fg); color: var(--bg); } .btn-solid:hover { transform: translateY(-2px); } .btn-lg { padding: 16px 34px; font-size: 16px; } .btn-sm { padding: 9px 18px; font-size: 14px; border-radius: 10px; } /* ---------- chips / badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); letter-spacing: .02em; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .pill { display:inline-block; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; background: var(--bg-alt); color: var(--muted); } /* ---------- navbar ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--f-head); font-weight: 700; font-size: 21px; } .brand .mark { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-size: 19px; box-shadow: 0 6px 18px rgba(255,106,44,.4); } .nav-links { display: flex; gap: 30px; } .nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; transition: color .2s; } .nav-links a:hover { color: var(--fg); } .nav-actions { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; background: none; border: none; font-size: 26px; color: var(--fg); cursor: pointer; } @media (max-width: 900px) { .nav-links { position: absolute; top: 74px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); flex-direction: column; padding: 18px 6%; gap: 16px; display: none; } .nav-links.open { display: flex; } .nav-toggle { display: block; } .nav-actions .btn:not(.nav-toggle) { display: none; } } /* ---------- hero ---------- */ .hero { padding: 96px 0 84px; } .hero-center { text-align: center; } .hero h1 { font-size: clamp(38px, 6vw, 68px); margin-bottom: 22px; } .hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 620px; margin-bottom: 34px; } .hero-center p.lead { margin-left: auto; margin-right: auto; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero-center .hero-cta { justify-content: center; } .hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 40px; } } /* decorative background */ .bg-glow::before { content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(600px 340px at 15% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(560px 360px at 90% 10%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 62%); } .bg-alt { background: var(--bg-alt); } /* visual placeholder (buyer swaps for real image) */ .visual { border-radius: 22px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; } .visual::after { content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 45%), radial-gradient(circle at 75% 70%, rgba(255,255,255,.18), transparent 42%); } .visual.tall { aspect-ratio: 3/4; } .visual.wide { aspect-ratio: 16/9; } .visual .vlabel { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-family: var(--f-head); font-weight:700; font-size: 20px; opacity:.85; z-index:1; text-align:center; padding: 20px; } .imgph { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; aspect-ratio: 4/3; display:grid; place-items:center; color: var(--muted); font-size: 14px; overflow:hidden; } /* ---------- section heading ---------- */ .section { padding: 90px 0; } .section-head { max-width: 620px; margin: 0 auto 56px; text-align: center; } .section-head h2 { font-size: clamp(28px, 4vw, 42px); margin: 14px 0 14px; } .section-head p { color: var(--muted); font-size: 17px; } /* ---------- grids ---------- */ .grid { display: grid; gap: 24px; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } } /* ---------- cards ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s; } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .card .ico { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; } .card h3 { font-size: 19px; margin-bottom: 9px; } .card p { color: var(--muted); font-size: 15px; } /* feature row w/ number */ .step { counter-increment: step; } .step .num { font-family: var(--f-head); font-weight: 700; font-size: 15px; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; display: grid; place-items: center; margin-bottom: 16px; } /* ---------- stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } @media (max-width: 620px) { .stats { grid-template-columns: repeat(2,1fr); } } .stat .n { font-family: var(--f-head); font-weight: 700; font-size: clamp(32px, 4vw, 46px); } .stat .l { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } /* ---------- testimonials ---------- */ .quote { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); } .quote p { font-size: 16px; margin-bottom: 20px; } .quote .who { display: flex; align-items: center; gap: 12px; } .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--f-head); } .quote .who b { display: block; font-size: 15px; } .quote .who span { color: var(--muted); font-size: 13px; } .stars { color: #ffb020; font-size: 15px; margin-bottom: 14px; } /* ---------- pricing ---------- */ .price-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; } .price-card.hot { border-color: var(--accent); box-shadow: var(--shadow); transform: scale(1.03); } @media (max-width: 620px){ .price-card.hot { transform:none; } } .price-card .tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 100px; text-transform: uppercase; letter-spacing: .04em; } .price-card h3 { font-size: 20px; } .price-card .amt { font-family: var(--f-head); font-weight: 700; font-size: 44px; margin: 16px 0 4px; } .price-card .amt span { font-size: 15px; color: var(--muted); font-family: var(--f-body); font-weight: 400; } .price-card ul { list-style: none; margin: 22px 0 28px; flex: 1; } .price-card li { padding: 8px 0; font-size: 14.5px; color: var(--muted); display: flex; gap: 10px; } .price-card li::before { content: '✓'; color: var(--accent); font-weight: 700; } /* ---------- gallery ---------- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 700px){ .gallery { grid-template-columns: repeat(2,1fr);} } .gallery .visual { aspect-ratio: 1; box-shadow: var(--shadow-sm); } /* ---------- CTA band ---------- */ .cta { border-radius: 26px; padding: 66px 40px; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; position: relative; overflow: hidden; } .cta::after { content:''; position:absolute; inset:0; background: radial-gradient(500px 200px at 50% 0%, rgba(255,255,255,.22), transparent 70%); } .cta h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; position: relative; } .cta p { opacity: .9; margin-bottom: 28px; position: relative; } .cta .btn-solid { background: #fff; color: var(--fg); position: relative; } /* ---------- forms ---------- */ .input { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .field { margin-bottom: 16px; } .field label { display:block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; } /* ---------- footer ---------- */ footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 60px 0 30px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; } @media (max-width: 800px){ .foot-grid { grid-template-columns: 1fr 1fr; } } .foot-grid h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 15px; } .foot-grid a { display: block; color: var(--muted); font-size: 14.5px; padding: 5px 0; transition: color .2s; } .foot-grid a:hover { color: var(--accent); } .foot-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* utilities */ .mt-s{margin-top:14px}.mt{margin-top:24px}.mt-l{margin-top:40px} .flex{display:flex}.between{justify-content:space-between}.items{align-items:center}.wrap{flex-wrap:wrap}.gap{gap:14px} .rounded{border-radius:var(--radius)} /* ---------- theme toggle button (Premium) ---------- */ .theme-toggle { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg); font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: border-color .2s, transform .2s; } .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } /* ---------- pricing billing-cycle toggle ---------- */ .cycles { display: inline-flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 100px; padding: 5px; gap: 4px; margin: 0 auto 44px; } .cycles button { border: none; background: transparent; color: var(--muted); font-family: var(--f-body); font-weight: 600; font-size: 14px; padding: 9px 20px; border-radius: 100px; cursor: pointer; transition: all .2s; } .cycles button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } .cycles .save { font-size: 11px; opacity: .85; } /* ---------- comparison table ---------- */ .compare { width: 100%; border-collapse: collapse; font-size: 14.5px; } .compare th, .compare td { padding: 15px 18px; border-bottom: 1px solid var(--border); text-align: center; } .compare th:first-child, .compare td:first-child { text-align: left; color: var(--muted); } .compare thead th { font-family: var(--f-head); font-size: 16px; } .compare .yes { color: #16a34a; font-weight: 700; } .compare .no { color: var(--muted); opacity: .5; } /* premium hover lift on cards already present; add subtle image zoom */ .visual img, .imgph img { transition: transform .5s ease; } .card:hover .visual img { transform: scale(1.04); } /* ============================================================ MYLYNK — app-specific styles ============================================================ */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px;} .auth-card{width:min(420px,100%);background:var(--card);border:1px solid var(--border);border-radius:22px;padding:40px 34px;box-shadow:var(--shadow);} .auth-card h1{font-size:25px;margin:16px 0 6px;}.auth-card .sub{color:var(--muted);font-size:14.5px;margin-bottom:26px;} .form-error{color:#e5484d;font-size:14px;margin-top:10px;display:none;} .sep{border:none;border-top:1px solid var(--border);margin:22px 0;} .field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;} .input-group{display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg);} .input-group .prefix{padding:0 4px 0 14px;color:var(--muted);font-size:15px;white-space:nowrap;} .input-group .input{border:none;box-shadow:none!important;} /* dashboard layout */ .app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;} .side{border-right:1px solid var(--border);padding:24px 16px;background:var(--bg-alt);} .side .logo{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:700;font-size:20px;padding:0 8px 20px;} .side .logo .mk{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:#fff;} .side-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:var(--muted);font-weight:500;font-size:14.5px;cursor:pointer;transition:all .2s;margin-bottom:3px;} .side-link:hover{background:var(--card);color:var(--fg);} .side-link.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);} .main{padding:32px 36px;min-width:0;} .main-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap;} .main-head h1{font-size:24px;} @media(max-width:860px){.app{grid-template-columns:1fr;}.side{display:flex;overflow-x:auto;gap:6px;border-right:none;border-bottom:1px solid var(--border);padding:12px;}.side .logo{display:none;}.side-link{white-space:nowrap;}.main{padding:22px 18px;}} /* editor + preview split */ .build{display:grid;grid-template-columns:1fr 380px;gap:30px;align-items:start;} @media(max-width:980px){.build{grid-template-columns:1fr;}} /* link editor rows */ .link-row{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm);} .link-row .grip{color:var(--muted);cursor:grab;} .link-row .fields{flex:1;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;} @media(max-width:560px){.link-row .fields{grid-template-columns:1fr;}} .link-row .del{background:none;border:none;color:#e5484d;cursor:pointer;font-size:18px;} .icon-btn{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:14px;font-weight:600;color:var(--fg);} .icon-btn:hover{border-color:var(--accent);color:var(--accent);} /* phone preview */ .phone{width:340px;margin:0 auto;border:10px solid #111827;border-radius:42px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;position:sticky;top:24px;} .phone-inner{height:640px;overflow-y:auto;} .bio{min-height:100%;padding:40px 24px;text-align:center;} .bio .ava{width:92px;height:92px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:40px;font-weight:700;font-family:var(--f-head);color:#fff;} .bio h2{font-size:21px;margin-bottom:4px;}.bio .bio-desc{font-size:14px;opacity:.85;margin-bottom:24px;} .bio-link{display:block;padding:15px;border-radius:14px;margin-bottom:12px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s;} .bio-link:hover{transform:scale(1.02);} .bio .socials{display:flex;gap:16px;justify-content:center;margin-top:18px;font-size:20px;} .bio .foot{margin-top:26px;font-size:12px;opacity:.6;} /* themes for bio (applied on .bio wrapper) */ .t-aurora{background:linear-gradient(160deg,#ff6a2c,#ffa62e);color:#fff;} .t-aurora .bio-link{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px);} .t-aurora .ava{background:rgba(255,255,255,.25);} .t-noir{background:#0e0f14;color:#fff;} .t-noir .bio-link{background:#1c1f2a;color:#fff;border:1px solid #2a2f3e;} .t-noir .ava{background:linear-gradient(135deg,#ff6a2c,#ffa62e);} .t-sunset{background:linear-gradient(160deg,#ff8a5b,#ff5e7e);color:#fff;} .t-sunset .bio-link{background:rgba(255,255,255,.2);color:#fff;} .t-sunset .ava{background:rgba(255,255,255,.28);} .t-mint{background:#eff7f2;color:#0f2e22;} .t-mint .bio-link{background:#fff;color:#0f2e22;border:1px solid #cdeadd;box-shadow:0 4px 14px rgba(16,120,80,.08);} .t-mint .ava{background:linear-gradient(135deg,#10b981,#34d399);} .t-paper{background:#fbfaf7;color:#1a1a1a;} .t-paper .bio-link{background:#1a1a1a;color:#fbfaf7;} .t-paper .ava{background:#1a1a1a;} /* theme swatches picker */ .themes{display:flex;gap:10px;flex-wrap:wrap;} .swatch{width:44px;height:44px;border-radius:12px;cursor:pointer;border:3px solid transparent;transition:transform .15s;} .swatch:hover{transform:scale(1.08);} .swatch.sel{border-color:var(--fg);} .sw-aurora{background:linear-gradient(135deg,#ff6a2c,#ffa62e);} .sw-noir{background:#0e0f14;} .sw-sunset{background:linear-gradient(135deg,#ff8a5b,#ff5e7e);} .sw-mint{background:linear-gradient(135deg,#10b981,#34d399);} .sw-paper{background:#fbfaf7;border:1px solid #ddd;} /* short links + tools */ .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);} table.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px;} .tbl th{text-align:left;padding:13px 16px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);} .tbl td{padding:14px 16px;border-bottom:1px solid var(--border);}.tbl tr:last-child td{border:none;} .stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:26px;} .tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);} .tile .tn{font-family:var(--f-head);font-size:30px;font-weight:700;}.tile .tl{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-top:2px;} .qrbox{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;display:inline-block;} #toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);padding:12px 24px;border-radius:12px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:all .3s;z-index:200;} #toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .copy-link{display:flex;align-items:center;gap:10px;background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:14px;} .copy-link .u{flex:1;font-family:'JetBrains Mono',monospace;color:var(--accent);word-break:break-all;} /* ---------- store: badges, modal, proof (admin + billing) ---------- */ .badge{display:inline-block;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:700;} .badge-green{background:#e7f7ee;color:#0a8f5b;}.badge-yellow{background:#fff4e0;color:#b8791a;} .badge-grey{background:var(--bg-alt);color:var(--muted);}.badge-blue{background:#e6f4ff;color:#0b74d1;}.badge-purple{background:#efeaff;color:#ff6a2c;} body.dark .badge-green{background:rgba(16,185,129,.15);}body.dark .badge-yellow{background:rgba(245,166,35,.15);}body.dark .badge-blue{background:rgba(11,116,209,.18);}body.dark .badge-purple{background:rgba(255,106,44,.18);} .btn-danger{background:#fdecec;color:#e5484d;border:1px solid #f7c9c9;}.btn-danger:hover{background:#fbdada;} .modal-overlay{position:fixed;inset:0;background:rgba(15,18,30,.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;} .modal-overlay.show{display:flex;} .modal{width:min(540px,100%);max-height:88vh;overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:30px;box-shadow:var(--shadow-lg);} .modal h3{font-size:21px;margin-bottom:6px;}.modal .close-x{float:right;background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;} .proof-box{background:#effaf3;border:1px solid #c6ebd5;border-radius:14px;padding:16px 20px;margin-top:14px;} body.dark .proof-box{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.28);} .proof-box .p-title{color:#0a8f5b;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;} .msg{display:flex;gap:12px;margin-bottom:16px;}.msg .av{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;font-weight:700;font-family:var(--f-head);} .msg.client .av{background:#e6f4ff;color:#0b74d1;}.msg.admin .av{background:#efeaff;color:#ff6a2c;} .msg .bub{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 16px;flex:1;} .msg.admin .bub{background:color-mix(in srgb,var(--accent) 6%,var(--card));} .msg .meta{font-size:12.5px;color:var(--muted);margin-bottom:4px;}.msg .meta b{color:var(--fg);} .empty{text-align:center;padding:50px 20px;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius);} .empty .big{font-size:38px;margin-bottom:10px;} .flex-between{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;} .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}@media(max-width:560px){.detail-grid{grid-template-columns:1fr;}} .detail-row{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:12px 16px;} .detail-row .dl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;} .detail-row .dv{font-family:'JetBrains Mono',monospace;font-size:14px;margin-top:3px;word-break:break-all;}