:root{
    --primary:#b8003c;
    --primary-dark:#8a002d;
    --bg:#fff5f7;
    --card:#ffffff;
    --ink:#2b2b2b;
    --muted:#7a7a7a;
    --line:#f0d6dd;
    --ok:#1a7f4b;
    --err:#c0392b;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--primary);text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 18px}

/* topbar */
.topbar{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-size:22px;font-weight:800;color:var(--primary);letter-spacing:.3px}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav a{color:var(--ink);font-weight:500}
.nav a:hover{color:var(--primary)}

/* buttons */
.btn{background:var(--primary);color:#fff!important;padding:9px 18px;border-radius:8px;border:0;cursor:pointer;font-weight:600;display:inline-block}
.btn:hover{background:var(--primary-dark)}
.btn-outline{border:1px solid var(--primary);color:var(--primary)!important;padding:8px 16px;border-radius:8px}
.btn-block{width:100%;text-align:center}
.btn-lg{padding:13px 22px;font-size:16px}

/* flash */
.flash{padding:12px 16px;border-radius:8px;margin:16px 0;font-weight:500}
.flash-success{background:#e6f7ee;color:var(--ok);border:1px solid #b8e6cd}
.flash-error{background:#fdecea;color:var(--err);border:1px solid #f5c6c2}
.flash-info{background:#eef4ff;color:#2456b8;border:1px solid #c9dbff}

/* cards / forms */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;margin:18px 0}
.form-card{max-width:440px;margin:40px auto}
h1,h2{margin-top:0}
label{display:block;font-weight:600;margin:12px 0 5px;font-size:14px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #dcdcdc;border-radius:8px;font-size:15px;font-family:inherit}
input:focus,select,textarea:focus{outline:2px solid var(--primary);border-color:var(--primary)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > div{flex:1;min-width:180px}
.muted{color:var(--muted);font-size:14px}

/* hero */
.hero{background:linear-gradient(135deg,var(--primary),#e0356b);color:#fff;border-radius:14px;padding:44px 30px;margin:22px 0;text-align:center}
.hero h1{font-size:32px;margin-bottom:8px}
.hero p{opacity:.95;margin-bottom:20px}
.hero .btn{background:#fff;color:var(--primary)!important}

/* profile grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin:20px 0}
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.profile-card .photo{height:200px;background:#f2e2e7 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#c99;font-size:44px}
.profile-card .info{padding:14px}
.profile-card .info h3{margin:0 0 4px;font-size:17px}
.badge{display:inline-block;background:#fde9a8;color:#8a6d00;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;vertical-align:middle}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0}
.plan{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:26px;text-align:center}
.plan.featured{border-color:var(--primary);box-shadow:0 8px 26px rgba(184,0,60,.12)}
.plan h3{color:var(--primary);font-size:22px}
.plan .price{font-size:34px;font-weight:800;margin:8px 0}
.plan ul{list-style:none;padding:0;text-align:left;margin:16px 0}
.plan li{padding:6px 0 6px 26px;position:relative}
.plan li:before{content:"✓";color:var(--ok);position:absolute;left:0;font-weight:700}

/* table */
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{background:#fbeef2}

.footer{margin-top:50px;padding:24px 0;background:var(--card);border-top:1px solid var(--line);text-align:center;color:var(--muted)}

/* chat */
.chat-wrap{display:flex;gap:16px;margin:18px 0;min-height:460px}
.chat-list{width:260px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;flex-shrink:0}
.chat-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.chat-item:hover{background:#fbeef2}
.chat-item.active{background:#fbeef2;font-weight:600;border-left:3px solid var(--primary)}
.chat-unread{background:var(--primary);color:#fff;font-size:12px;font-weight:700;border-radius:20px;padding:1px 8px}
.chat-thread{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--line)}
.chat-messages{flex:1;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;max-height:420px}
.bubble{max-width:70%;padding:10px 14px;border-radius:14px;font-size:15px;position:relative}
.bubble .time{display:block;font-size:11px;opacity:.6;margin-top:4px}
.bubble.me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start;background:#f0e2e7;color:var(--ink);border-bottom-left-radius:4px}
.chat-compose{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}
.chat-compose input{flex:1}
@media(max-width:720px){.chat-wrap{flex-direction:column}.chat-list{width:100%}}