@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;font-family:'Tajawal',sans-serif}
a{color:inherit}
/* ===== Dashboard ===== */
.dash{background:#f1f5f4;color:#0f172a}
.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 20px;background:#0f3d3a;color:#fff}
.topbar a{color:#fff;text-decoration:none;margin-inline-start:14px}.brand{font-weight:800;font-size:1.2rem;margin:0!important}
.container{max-width:1050px;margin:24px auto;padding:0 16px}.narrow{max-width:460px;margin-inline:auto}
.card-box{background:#fff;border-radius:16px;padding:22px;box-shadow:0 2px 12px rgba(15,61,58,.08);margin-bottom:18px}
h1{font-size:1.5rem;margin:0 0 14px}h3{margin:22px 0 10px;color:#0f766e;border-bottom:1px solid #e2e8f0;padding-bottom:6px}
label{display:block;margin-bottom:12px;font-weight:500;font-size:.92rem}
input,textarea,select{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;margin-top:5px;background:#fff}
input[type=color]{height:44px;padding:3px}input[type=checkbox]{width:auto;margin-inline-end:6px}
.check{display:flex;align-items:center;font-weight:400}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}.cols.four{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.link-row{margin-bottom:8px}
.btn{display:inline-block;background:#0f766e;color:#fff;border:0;padding:11px 20px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{background:#115e59}.btn.alt{background:#e6f4f1;color:#0f766e}.btn.danger{background:#fee2e2;color:#b91c1c}
.btn.sm{padding:6px 12px;font-size:.85rem}.btn.big{width:100%;margin-top:20px;padding:14px}
.btn-disabled,.btn-disabled:hover{background:#cbd5e1!important;color:#64748b!important;cursor:not-allowed}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:14px}.ok{background:#dcfce7;color:#166534}.err{background:#fee2e2;color:#991b1b}
.row-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.item-head{display:flex;gap:12px;align-items:center}.thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;display:block;margin:6px 0}
.actions{display:flex;gap:6px;flex-wrap:wrap}.actions form{margin:0}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid #e2e8f0;text-align:start;white-space:nowrap}
.nfc-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:repeating-linear-gradient(45deg,#fffbeb,#fffbeb 10px,#fef3c7 10px,#fef3c7 20px);border:2px dashed #f59e0b;border-radius:14px;padding:14px 16px;margin:12px 0}
.nfc-box p{margin:2px 0 0;font-size:.9rem}.nfc-box>div:nth-child(2){flex:1;min-width:180px}.nfc-ico{font-size:1.8rem}
/* ===== Profile view ===== */
.profile{background:var(--bg);color:var(--tx);min-height:100vh;padding:0 0 30px}
.pcard{max-width:460px;margin:0 auto;text-align:center;padding-bottom:10px}
.cover{height:170px;background:linear-gradient(135deg,var(--p),var(--s));background-size:cover;background-position:center;position:relative;border-radius:0 0 28px 28px}
.logo{position:absolute;top:14px;inset-inline-start:14px;max-height:44px;max-width:120px;background:#fff;padding:5px;border-radius:10px}
.avatar{width:128px;height:128px;margin:-64px auto 10px;border-radius:50%;border:5px solid var(--bg);overflow:hidden;background:var(--p);position:relative;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.avatar img{width:100%;height:100%;object-fit:cover}.avatar span{color:#fff;font-size:3rem;font-weight:800;line-height:118px}
.pcard h1{margin:4px 16px 2px;font-size:1.6rem}.job{margin:0;opacity:.75;font-weight:500}.bio{padding:0 24px;line-height:1.7;opacity:.85}
.quick{display:flex;justify-content:center;gap:10px;margin:18px 14px;flex-wrap:wrap}
.quick a{flex:1;min-width:70px;max-width:96px;text-decoration:none;background:#fff;border-radius:16px;padding:12px 4px;font-size:1.4rem;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:.2s}
.quick a:active,.quick a:hover{transform:translateY(-3px)}.quick span{display:block;font-size:.78rem;margin-top:4px;color:var(--tx)}
.save{display:block;margin:0 18px 18px;background:var(--p);color:#fff;text-decoration:none;font-weight:800;padding:15px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.15);animation:pulse 2.5s infinite}
@keyframes pulse{50%{transform:scale(1.02)}}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 16px 16px}
.socials a{width:46px;height:46px;border-radius:50%;background:var(--s);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800}
.links{padding:0 18px}.links a{display:block;padding:14px;margin-bottom:10px;border:2px solid var(--p);border-radius:14px;text-decoration:none;font-weight:700;color:var(--p);background:#fff}
.share{background:#fff;margin:18px;border-radius:20px;padding:18px}.share h3{margin:0 0 12px;border:0;color:var(--p)}
#qr{display:flex;justify-content:center}.share-btns{display:flex;gap:8px;margin-top:14px}
.share-btns button{flex:1;padding:11px;border:0;border-radius:12px;background:var(--p);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.nfc-box.small{margin:0 18px;text-align:start}