*{box-sizing:border-box;margin:0;padding:0}
:root{--p:#0f766e;--p2:#115e59;--pl:#e6f4f2;--ac:#f59e0b;--tx:#1f2937;--mu:#6b7280;--bd:#e5e7eb;--bg:#f4f7f8;--ok:#16a34a;--warn:#d97706;--bad:#dc2626}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--tx);background:var(--bg);font-size:15px;line-height:1.45}
a{color:var(--p);text-decoration:none}
.btn{display:inline-block;border:0;border-radius:8px;padding:11px 20px;font-size:15px;font-weight:600;cursor:pointer;background:var(--p);color:#fff;text-align:center}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.line{background:#fff;color:var(--p);border:1px solid var(--p)}
.btn.red{background:#fff;color:var(--bad);border:1px solid #f3c1c1}
.btn.full{width:100%}
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:#374151}
input,select{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;background:#fff;color:var(--tx)}
.field{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.logo i{width:34px;height:34px;border-radius:9px;background:var(--p);color:#fff;display:grid;place-items:center;font-style:normal;font-size:20px}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700}
.b-ok{background:#dcfce7;color:#166534}.b-wait{background:#fef3c7;color:#92400e}.b-done{background:#e0e7ff;color:#3730a3}.b-can{background:#fee2e2;color:#991b1b}

/* register */
.reg{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.reg-l{background:linear-gradient(160deg,var(--p2),var(--p));color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:center}
.reg-l .logo i{background:#fff;color:var(--p)}
.reg-l h1{font-size:34px;line-height:1.2;margin:32px 0 14px}
.reg-l p{opacity:.9;margin-bottom:26px;max-width:460px}
.reg-l li{list-style:none;margin-bottom:14px;display:flex;gap:12px;align-items:flex-start}
.reg-l li b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ac);color:#1f2937;font-size:13px;flex:none}
.trial{margin-top:26px;background:rgba(255,255,255,.14);border-radius:12px;padding:14px 18px;max-width:460px}
.reg-r{display:flex;align-items:center;justify-content:center;padding:32px;background:#fff}
.card-form{width:100%;max-width:470px}
.card-form h2{font-size:26px;margin-bottom:4px}
.card-form .sub{color:var(--mu);margin-bottom:22px}
.note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:16px}
.alt{text-align:center;margin-top:16px;color:var(--mu);font-size:14px}

/* admin */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:#0b3b38;color:#cfe8e5;padding:20px 14px}
.side .logo{color:#fff;padding:0 8px 22px}
.side .logo i{background:var(--ac);color:#1f2937}
.side a{display:flex;align-items:center;gap:10px;color:#cfe8e5;padding:10px 12px;border-radius:8px;margin-bottom:3px;font-size:14.5px}
.side a.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.side a span{width:20px;text-align:center}
.main{padding:0 28px 28px}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 0;gap:12px}
.top h1{font-size:22px}
.top .sub{color:var(--mu);font-size:13px}
.user{display:flex;align-items:center;gap:10px}
.av{width:38px;height:38px;border-radius:50%;background:var(--pl);color:var(--p);display:grid;place-items:center;font-weight:700}
.trialbar{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;font-size:14px;color:#92400e}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:16px}
.stat small{color:var(--mu);font-size:13px}
.stat b{display:block;font-size:28px;margin-top:2px}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.panel{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:18px}
.panel h3{font-size:16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--mu);font-weight:600;font-size:12.5px;padding:8px 8px;border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:11px 8px;border-bottom:1px solid #f1f3f5;vertical-align:middle}
.linkbox{display:flex;gap:8px;margin-bottom:12px}
.linkbox input{font-size:13px;background:#f9fafb}
.qr{width:96px;height:96px;border:1px solid var(--bd);border-radius:8px;display:grid;grid-template-columns:repeat(8,1fr);padding:6px;gap:1px}
.qr s{background:#111;display:block}.qr s.w{background:#fff}
.doc{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #f1f3f5}
.doc:last-child{border:0}
.doc .av{width:34px;height:34px;font-size:13px}
.doc small{color:var(--mu)}
.menubtn{display:none}

/* patient */
.pw{max-width:1020px;margin:0 auto;padding:20px}
.hero{background:linear-gradient(120deg,var(--p2),var(--p));color:#fff;border-radius:16px;padding:24px 26px;display:flex;gap:18px;align-items:center}
.hero .lg{width:64px;height:64px;border-radius:14px;background:#fff;color:var(--p);display:grid;place-items:center;font-size:30px;flex:none}
.hero h1{font-size:24px}
.hero p{opacity:.92;font-size:14px}
.pgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-top:16px;align-items:start}
.step{display:flex;gap:10px;align-items:center;font-weight:700;margin-bottom:12px}
.step b{width:26px;height:26px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.dcard{border:1.5px solid var(--bd);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center}
.dcard.on{border-color:var(--p);background:var(--pl)}
.dcard .av{width:42px;height:42px}
.dcard small{color:var(--mu);display:block;font-size:12.5px}
.dates{display:flex;gap:8px;overflow:hidden;margin-bottom:20px}
.dt{flex:1;min-width:0;border:1.5px solid var(--bd);border-radius:10px;padding:8px 4px;text-align:center;font-size:12.5px}
.dt b{display:block;font-size:18px}
.dt.on{background:var(--p);color:#fff;border-color:var(--p)}
.dt.off{opacity:.45}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.sl{border:1.5px solid var(--bd);border-radius:8px;padding:9px 0;text-align:center;font-size:13.5px;font-weight:600}
.sl.on{background:var(--p);color:#fff;border-color:var(--p)}
.sl.x{background:#f3f4f6;color:#9ca3af;text-decoration:line-through;font-weight:400}
.slh{font-size:12.5px;color:var(--mu);margin:12px 0 6px}
.sum{position:sticky;top:16px}
.sum dl{display:grid;grid-template-columns:90px 1fr;gap:8px 10px;font-size:14px;margin:12px 0 16px;padding:12px;background:var(--pl);border-radius:10px}
.sum dt{color:var(--mu)}.sum dd{font-weight:600}

@media(max-width:820px){
 .reg{grid-template-columns:1fr}
 .reg-l{padding:28px 22px}.reg-l h1{font-size:25px;margin:20px 0 10px}.reg-l p{margin-bottom:16px}
 .reg-r{padding:24px 18px}
 .row2{grid-template-columns:1fr;gap:0}
 .app{grid-template-columns:1fr}
 .side{display:none}
 .main{padding:0 14px 20px}
 .menubtn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--bd);border-radius:8px;background:#fff;font-size:20px;flex:none}
 .top h1{font-size:19px}.user .nm{display:none}
 .stats{grid-template-columns:1fr 1fr}
 .grid2{grid-template-columns:1fr}
 .trialbar{flex-direction:column;align-items:flex-start}
 .hide-m{display:none}
 .pw{padding:12px}
 .hero{padding:16px;gap:12px}.hero h1{font-size:19px}.hero .lg{width:50px;height:50px;font-size:24px}
 .pgrid{grid-template-columns:1fr}
 .docs{grid-template-columns:1fr}
 .slots{grid-template-columns:repeat(3,1fr)}
 .dt b{font-size:16px}
 .sum{position:static}
}
.dcard.on .av{background:#fff}
.tw{overflow-x:auto}
.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto;flex:1;min-width:150px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs a{padding:7px 14px;border-radius:99px;border:1px solid var(--bd);background:#fff;font-size:13.5px;color:var(--tx)}
.tabs a.on{background:var(--p);color:#fff;border-color:var(--p)}
.side .cnt{margin-left:auto;background:var(--ac);color:#1f2937;border-radius:99px;font-size:12px;font-weight:700;padding:1px 8px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.plan{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:18px;position:relative}
.plan h4{font-size:15px;margin-bottom:6px}
.plan .pr{font-size:26px;font-weight:800;margin:6px 0}
.plan .pr small{font-size:13px;color:var(--mu);font-weight:500}
.plan .sv{color:var(--ok);font-size:13px;font-weight:600;margin-bottom:12px;min-height:19px}
.plan.best{border:2px solid var(--p)}
.plan .tag{position:absolute;top:-11px;right:14px;background:var(--p);color:#fff;font-size:11.5px;padding:2px 10px;border-radius:99px;font-weight:700}
.plan label{margin-top:8px}
.acts{display:flex;gap:6px;flex-wrap:nowrap}
.stat small.sub2{display:block;color:var(--mu);font-size:12px;margin-top:2px}
@media(max-width:820px){.plans{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.plans{grid-template-columns:1fr}}
.side .logo{font-size:17px;white-space:nowrap}
.badge{white-space:nowrap}td{vertical-align:middle}.tw td:nth-child(3){white-space:nowrap}