:root { color-scheme:light; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ink:#2d2948; --muted:#868197; --line:#e9e3ef; --pink:#ee789c; --lilac:#8f83e8; --surface:#ffffffdd; --shadow:0 18px 65px #3f296217; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; width:100%; }
body { background:#f8f5fa; color:var(--ink); overflow-x:hidden; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; } button:disabled { opacity:.5; cursor:not-allowed; }
input,select,textarea { max-width:100%; color:var(--ink); }
.ambient { position:fixed; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.5; }
.ambient-one { height:380px; width:380px; background:#f9cade; left:-160px; top:-100px; }
.ambient-two { height:540px; width:540px; background:#d8dcfc; right:-150px; bottom:-240px; }
.app-shell { max-width:1440px; min-height:100dvh; margin:auto; padding:24px; display:grid; grid-template-columns:238px minmax(0,1fr) 278px; gap:22px; }
.rail,.side-panel,.content { background:var(--surface); border:1px solid white; box-shadow:var(--shadow); border-radius:30px; }
.rail { padding:27px 19px; display:flex; flex-direction:column; height:calc(100dvh - 48px); position:sticky; top:24px; }
.brand { display:flex; align-items:center; gap:11px; padding:6px 12px 32px; font-size:24px; font-weight:850; letter-spacing:-1.2px; }
.brand-mark { display:grid; place-items:center; background:linear-gradient(135deg,#f5a9c7,#9d8de2); color:white; height:36px; width:36px; border-radius:13px; font-size:19px; box-shadow:0 7px 16px #dfb2dc8a; }
.brand small { font-size:9px; color:var(--muted); letter-spacing:2.6px; display:block; margin-top:-3px; }
.nav-list { display:grid; gap:7px; }
.nav-btn { border:0; background:transparent; text-align:left; display:flex; align-items:center; gap:13px; padding:14px 15px; border-radius:16px; color:#77728e; font-weight:650; width:100%; }
.nav-btn.active { background:#f4edf8; color:#bd5584; } .nav-btn:hover { background:#f8f1f9; }
.nav-icon { width:24px; text-align:center; font-size:20px; }
.rail-bottom { margin-top:auto; padding:20px 11px; border-top:1px solid var(--line); }
.user-summary { display:flex; align-items:center; gap:11px; font-size:13px; min-width:0; }
.user-dot { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:#eadbf0; color:#8f699c; font-weight:750; }
.user-summary strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-summary span { color:var(--muted); font-size:11px; }
.content { min-height:calc(100dvh - 48px); padding:32px 38px 46px; position:relative; }
.content-header { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:28px; }
.eyebrow { font-size:10px; letter-spacing:2.4px; font-weight:800; color:#aa83ad; text-transform:uppercase; }
.page-title { font-size:30px; line-height:1.1; letter-spacing:-1.1px; margin:9px 0 6px; }
.subheading { color:var(--muted); font-size:13px; line-height:1.5; margin:0; }
.status-pill { border-radius:20px; padding:9px 12px; background:#e7f6ed; color:#4d9a71; font-size:11px; font-weight:750; white-space:nowrap; }
.status-pill.demo { background:#fff0d7; color:#ab7929; }
.language-btn { display:inline-flex; align-items:center; gap:5px; background:white; border:1px solid var(--line); padding:9px 12px; border-radius:11px; color:#77728c; font-size:11px; font-weight:800; }
.header-controls { display:flex; align-items:center; gap:7px; }
.side-panel { position:sticky; top:24px; height:calc(100dvh - 48px); padding:25px 22px; display:flex; flex-direction:column; gap:20px; }
.side-header { display:flex; align-items:center; justify-content:space-between; }
.side-header strong { font-size:16px; }
.tiny-pill { font-size:10px; color:#a77ea8; background:#f7edf7; border-radius:20px; padding:6px 9px; }
.big-illustration { height:210px; border-radius:22px; background:linear-gradient(140deg,#e8e2f7,#fff2f4 60%,#f9dfeb); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.big-illustration:after { content:""; position:absolute; inset:auto -50px -105px; height:170px; background:#ffffff9c; border-radius:50%; }
.orbit-art { width:170px; height:170px; border:1px solid #ffffffb0; border-radius:50%; display:grid; place-items:center; font-size:55px; transform:rotate(-15deg); box-shadow:0 0 0 30px #ffffff27,0 0 0 60px #ffffff13; }
.orbit-art span { transform:rotate(15deg); filter:drop-shadow(0 7px 6px #aa88b25e); }
.side-panel h3 { margin:0; font-size:20px; letter-spacing:-.4px; }
.side-panel p { color:var(--muted); font-size:12px; line-height:1.65; margin:0; }
.side-note { margin-top:auto; font-size:11px; line-height:1.5; color:#aaa1b4; background:#faf6fc; padding:13px; border-radius:13px; }
.side-stat { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; }
.side-stat b { font-size:15px; }.side-stat span { font-size:11px; color:var(--muted); }
.mini-avatar-row { display:flex; padding-left:5px; }
.mini-avatar { height:32px; width:32px; border-radius:50%; border:3px solid white; margin-left:-5px; display:grid; place-items:center; font-size:11px; font-weight:750; color:#8d7199; background:#e8d8f3; }
.mini-avatar:nth-child(2) { background:#f5d6dd;color:#ac607a; }.mini-avatar:nth-child(3) { background:#d8eaf1;color:#638ca0; }
.main-width { max-width:620px; margin:auto; }.swipe-area { max-width:475px; margin:auto; }
.profile-card { height:clamp(380px,53vh,540px); border-radius:27px; overflow:hidden; position:relative; background:linear-gradient(155deg,#e2c7e9,#f5b9cc 58%,#a7b1df); box-shadow:0 18px 35px #89649a29; isolation:isolate; }
.profile-card::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#17142fc9 0%,#1a14320a 56%,#00000014 100%); z-index:2; }
.portrait { height:100%; width:100%; position:absolute; inset:0; object-fit:cover; }
.profile-placeholder { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; font-size:160px; font-weight:800; color:#ffffff80; user-select:none; }
.profile-placeholder::before,.profile-placeholder::after { content:""; position:absolute; border:2px solid #ffffff35; border-radius:50%; width:410px; height:410px; top:-110px; left:-90px; }
.profile-placeholder::after { width:300px; height:300px; top:75px; left:auto; right:-140px; }
.profile-card.rose { background:linear-gradient(150deg,#e9c0d5,#ed9ab5,#bb9fcf); }
.profile-card.mint { background:linear-gradient(150deg,#a9d7d0,#93b7d3,#d7bce7); }
.profile-card.peach { background:linear-gradient(150deg,#efc1a9,#edafc3,#c8b9ec); }
.profile-top { position:absolute; z-index:3; top:18px; left:18px; right:18px; display:flex; justify-content:space-between; gap:10px; }
.photo-index,.verified-tag { background:#ffffffdd; color:#645c7c; border-radius:20px; padding:8px 11px; font-size:11px; font-weight:750; }
.profile-info { position:absolute; z-index:3; color:white; left:27px; right:27px; bottom:26px; }
.profile-info h2 { margin:0 0 8px; font-size:37px; letter-spacing:-1.2px; font-weight:800; }.profile-info h2 span { font-weight:450; }
.profile-info p { margin:8px 0 0; color:#f7f1ff; font-size:13px; line-height:1.45; }
.profile-facts { display:flex; flex-wrap:wrap; gap:8px; }.profile-facts span { padding:7px 11px; border-radius:20px; background:#ffffff33; border:1px solid #ffffff28; font-size:11px; }
.swipe-controls { display:flex; justify-content:center; align-items:center; gap:17px; margin:23px auto 10px; }
.round-action { border:0; display:grid; place-items:center; width:66px; height:66px; border-radius:50%; background:white; box-shadow:0 7px 23px #9b8bab26; font-size:26px; transition:transform .15s; }
.round-action:hover { transform:translateY(-3px); }.round-action.primary { width:80px; height:80px; background:linear-gradient(135deg,#fb8ead,#e66f9d); box-shadow:0 11px 24px #ee8cad5c; color:white; font-size:32px; }
.swipe-hint { color:#aaa1b4; text-align:center; font-size:11px; }.flat-actions { display:flex; justify-content:center; gap:14px; margin-top:13px; }.text-action { background:transparent; border:0; color:#9988a6; font-size:11px; }
.empty-panel { text-align:center; border:1px dashed #ded3e7; border-radius:26px; padding:48px 28px; background:#fff9ff88; }
.empty-icon { height:84px; width:84px; display:grid; place-items:center; font-size:43px; background:linear-gradient(135deg,#fce2ea,#e9e1f7); margin:0 auto 21px; border-radius:28px; }
.empty-panel h2 { font-size:23px; letter-spacing:-.6px; margin:0 0 8px; }.empty-panel p { color:var(--muted); font-size:13px; line-height:1.6; max-width:360px; margin:0 auto 22px; }
.button { border:0; border-radius:14px; padding:13px 18px; font-weight:750; font-size:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center; }
.button.primary { background:linear-gradient(120deg,#ef83a5,#bb8ddf); color:white; box-shadow:0 8px 17px #eb9db747; }.button.secondary { background:#f3ecf7;color:#886e9b; }.button.danger { background:#ffebee;color:#c04c68; }.button.full { width:100%; }
.form-submit { margin-top:24px; }.upload-back { margin-top:15px; }
.form-panel { background:white; border:1px solid var(--line); border-radius:25px; padding:27px; }.form-panel h2 { margin:0 0 5px;font-size:19px; }.form-panel .subheading { margin-bottom:24px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; }.field { display:grid;gap:7px; }.field.wide { grid-column:1/-1; }.field label,.field-label { font-weight:700;font-size:11px;color:#706683; }
.field input,.field select,.field textarea,.dialog select,.dialog textarea,.message-input { border:1px solid #e8e2ed; outline:0; background:#fcfbfd; width:100%; border-radius:12px; padding:12px 13px; font-size:13px; }
.field input:focus,.field select:focus,.field textarea:focus,.message-input:focus { border-color:#be9fe0; box-shadow:0 0 0 3px #e6d9f66b; }.field textarea { resize:vertical;min-height:88px; }
.check-line { display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.55;color:#777086; }.check-line input { width:auto;margin-top:3px;accent-color:var(--pink); }
.helper { text-align:center;color:var(--muted);font-size:11px;line-height:1.6;margin-top:13px; }
.upload-area { border:2px dashed #e1cfeb;padding:28px 22px;border-radius:22px;text-align:center;background:#fcf9fd; }.upload-area .empty-icon { margin-bottom:14px; }.upload-area input { max-width:250px;font-size:12px;margin-top:19px; }.upload-area h3 { margin:0 0 7px; }.upload-area p { color:var(--muted);font-size:12px;line-height:1.5; }
.match-list { display:grid;gap:10px; }.match-row { display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:13px;border-radius:18px;background:white;width:100%;text-align:left; }.match-row:hover { border-color:#d3c0e4; }
.match-avatar { height:56px;width:56px;flex-shrink:0;background:linear-gradient(140deg,#eab8cb,#b3afe6);display:grid;place-items:center;border-radius:17px;font-weight:800;color:white;font-size:26px;overflow:hidden;position:relative; }.match-avatar img { position:absolute;inset:0;height:100%;width:100%;object-fit:cover; }
.match-row-info { flex:1;min-width:0; }.match-row-info strong { display:block;font-size:14px; }.match-row-info span { display:block;color:var(--muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:5px; }.match-chevron { color:#aaa1b6;font-size:24px; }
.chat-shell { border:1px solid var(--line);background:white;border-radius:22px;overflow:hidden; }.chat-header { padding:14px 17px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line); }.chat-header .button { padding:9px; }.chat-header strong { font-size:14px;flex:1; }
.chat-messages { min-height:320px;max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:20px; }
.bubble { padding:11px 13px;border-radius:15px 15px 15px 3px;background:#f1eef6;color:#51475f;max-width:82%;align-self:flex-start;line-height:1.45;font-size:13px;overflow-wrap:anywhere; }.bubble.mine { background:linear-gradient(120deg,#ed85a7,#b892e0);color:white;align-self:flex-end;border-radius:15px 15px 3px 15px; }
.translation-label { display:block;font-size:10px;opacity:.7;margin-top:7px; }.translation-label button { border:0;background:transparent;color:inherit;text-decoration:underline;padding:0;font-size:10px;cursor:pointer; }.chat-compose { padding:13px;border-top:1px solid var(--line);display:flex;gap:8px; }.message-input { flex:1;min-width:0; }
.chat-notice { font-size:11px;color:#aaa3b4;text-align:center;line-height:1.5;padding:0 18px 15px; }.note-box { padding:16px;border-radius:15px;background:#f9f4fa;color:#887791;font-size:12px;line-height:1.6; }
.account-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:22px; }.admin-item { background:white;border:1px solid var(--line);border-radius:17px;padding:14px;margin-bottom:12px;display:flex;gap:12px;align-items:center; }.admin-item .match-avatar { width:60px;height:60px; }.admin-text { min-width:0;flex:1; }.admin-text strong { font-size:13px; }.admin-text span { display:block;color:var(--muted);font-size:11px;margin-top:4px;overflow-wrap:anywhere; }
.admin-actions { display:flex;flex-wrap:wrap;gap:5px; }.admin-actions .button { padding:8px 10px;font-size:10px; }.small-heading { font-size:13px;color:#9d8fa8;text-transform:uppercase;letter-spacing:1.3px;margin:24px 0 14px; }
.demo-ribbon { background:linear-gradient(100deg,#fff1dd,#fff6e6);color:#ab7a3d;border:1px solid #fae4c6;font-size:11px;font-weight:700;line-height:1.4;padding:11px 14px;border-radius:12px;margin-bottom:17px; }
.bottom-nav { display:none; }.dialog { border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 20px 80px #52426744;max-width:min(92vw,420px);width:100%; }.dialog::backdrop { background:#26213677; }.dialog h3 { margin:0 0 15px; }.dialog label { display:block;font-size:12px;margin:12px 0 6px; }.dialog textarea { margin-top:12px; }.dialog-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:17px; }
#toast { position:fixed;z-index:30;bottom:25px;left:50%;transform:translateX(-50%);background:#3c3351;color:white;padding:12px 18px;border-radius:12px;box-shadow:0 12px 30px #34274245;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center; }#toast.visible { opacity:1; }
.splash { display:grid;place-content:center;text-align:center;grid-column:1/-1;color:#ae85bc;font-size:48px;font-weight:850;letter-spacing:4px; }.splash span { color:var(--pink); }.splash small { font-size:12px;color:var(--muted);letter-spacing:0;font-weight:400;margin-top:14px; }
@media(max-width:1190px) { .app-shell { grid-template-columns:210px minmax(0,1fr); }.side-panel { display:none; }.content { padding:30px 30px 40px; }.rail { padding:25px 14px; } }
@media(max-width:750px) { .app-shell { display:block;padding:0;max-width:620px;min-height:100dvh; }.rail,.side-panel { display:none; }.content { min-height:100dvh;border:0;border-radius:0;box-shadow:none;padding:calc(21px + env(safe-area-inset-top)) 18px calc(110px + env(safe-area-inset-bottom));background:#fbf9fcdf; }.content-header { margin-bottom:20px; }.page-title { font-size:27px; }.header-controls { gap:5px; }.language-btn { padding:8px 10px; }.status-pill { padding:8px 10px; }.profile-card { height:min(55dvh,520px);min-height:365px;border-radius:24px; }.profile-info { left:23px;bottom:23px; }.profile-info h2 { font-size:35px; }.swipe-controls { margin-top:18px; }.round-action { height:60px;width:60px; }.round-action.primary { height:73px;width:73px; }.bottom-nav { display:flex;justify-content:space-around;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:10;max-width:620px;margin:auto;padding:9px 9px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #f0e8ef;background:#fffcffed;box-shadow:0 -6px 26px #3427420e; }.bottom-btn { background:transparent;border:0;color:#a8a0b3;display:grid;place-items:center;gap:4px;min-width:68px;font-size:10px;font-weight:650;padding:3px; }.bottom-btn span { font-size:24px; }.bottom-btn.active { color:#e77d9f; }.form-panel { padding:20px 16px; }.form-grid { gap:15px 10px; }.field input,.field select,.field textarea { font-size:16px; }.chat-messages { max-height:47dvh; }.ambient { display:none; } }
@media(max-width:380px) { .content { padding-left:12px;padding-right:12px; }.page-title { font-size:25px; }.form-grid { grid-template-columns:1fr; }.profile-card { height:51dvh;min-height:335px; }.profile-info h2 { font-size:31px; } }