:root{
  --maroon-950:#3E0C15; --maroon-900:#5B1220; --maroon-800:#7A1B2B; --maroon-700:#932036;
  --gold-400:#E8BD6E; --gold-500:#D9A44D; --gold-600:#C97B3D;
  --cream:#FBF6EF; --cream-2:#F3E9DC; --ink:#2A1414; --muted:#8B6F63; --line:#E6D9C8;
  --danger:#B23A3A; --ok:#3E7A4C;
  --shadow: 0 18px 40px -18px rgba(59,10,20,0.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{font-family:'Cairo',sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(217,164,77,0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(122,27,43,0.12), transparent 60%),
    var(--cream);
  color:var(--ink); min-height:100vh;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:var(--gold-400);color:var(--maroon-950)}

.corner-tri{position:absolute; inset:0 0 auto auto; width:180px; height:110px;
  background:linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 55%, var(--maroon-800) 100%);
  clip-path:polygon(100% 0, 0 0, 100% 100%); opacity:.95;}

/* login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative;}
.login-card{position:relative; width:100%; max-width:420px; background:#fff; border-radius:22px; box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden;}
.login-head{position:relative; padding:38px 30px 26px; text-align:center; overflow:hidden;}
.brand-mark{width:64px;height:64px;margin:0 auto 14px}
.brand-title{font-weight:900; font-size:22px; color:var(--maroon-900); letter-spacing:.3px}
.brand-sub{font-weight:700; font-size:12px; color:var(--gold-600); letter-spacing:2.5px; margin-top:4px; text-transform:uppercase}
.brand-rule{width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold-500),var(--maroon-800));margin:16px auto 0}
.login-body{padding:8px 30px 34px}
.field{margin-top:18px; text-align:right}
.field label{display:block; font-size:13px; font-weight:700; color:var(--maroon-900); margin-bottom:7px}
.field input{width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--cream); font-size:14.5px; color:var(--ink); outline:none;}
.field input:focus{border-color:var(--gold-600); box-shadow:0 0 0 4px rgba(217,164,77,0.18)}
.btn-primary{width:100%; margin-top:24px; padding:13px 14px; border:none; border-radius:12px; background:linear-gradient(90deg,var(--maroon-800),var(--maroon-950)); color:#fff; font-weight:800; font-size:15px;}
.btn-primary:hover{filter:brightness(1.05)}
.login-error{margin-top:16px; padding:10px 12px; border-radius:10px; background:#FBEAEA; color:var(--danger); font-size:13px; font-weight:700; text-align:center;}
.login-hint{margin-top:18px; text-align:center; font-size:12px; color:var(--muted)}
.login-foot{text-align:center; padding:14px; font-size:11.5px; color:var(--muted); border-top:1px dashed var(--line); background:var(--cream);}

/* app shell */
header.topbar{position:sticky; top:0; z-index:20; background:linear-gradient(180deg, var(--maroon-950), var(--maroon-900)); color:#fff; box-shadow:0 6px 20px -10px rgba(0,0,0,.4);}
.topbar-inner{max-width:1180px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.topbar-brand{display:flex; align-items:center; gap:12px}
.topbar-brand .brand-mark{width:38px;height:38px;margin:0}
.topbar-brand .t1{font-weight:900; font-size:16.5px}
.topbar-brand .t2{font-weight:600; font-size:10.5px; color:var(--gold-400); letter-spacing:1.5px}
.topbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pill-btn{display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; font-size:13px; font-weight:700;}
.pill-btn:hover{background:rgba(255,255,255,.14)}
.pill-btn.gold{background:linear-gradient(90deg,var(--gold-500),var(--gold-600)); color:var(--maroon-950); border:none}
.user-chip{display:flex; flex-direction:column; align-items:flex-end; margin-inline-end:4px}
.user-chip .name{font-size:13px; font-weight:800}
.user-chip .role{font-size:10.5px; color:var(--gold-400); font-weight:700}

main.wrap{max-width:1180px; margin:0 auto; padding:34px 22px 80px}
.page-eyebrow{font-size:12px; font-weight:800; color:var(--gold-600); letter-spacing:2px; text-transform:uppercase}
.page-title{font-size:26px; font-weight:900; color:var(--maroon-900); margin-top:6px}
.page-desc{color:var(--muted); font-size:13.5px; margin-top:6px}
.page-head{margin-bottom:26px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}

.services-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;}
.svc-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 10px 24px -18px rgba(59,10,20,.25);}
.svc-icon{width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg, var(--cream-2), #fff); border:1px solid var(--line); color:var(--maroon-800); margin-bottom:14px;}
.svc-icon svg{width:26px;height:26px}
.svc-name{font-weight:800; font-size:16px; color:var(--maroon-900)}
.svc-desc{margin-top:6px; font-size:13px; color:var(--muted); line-height:1.65}
.svc-go-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:16px; padding:10px 14px; border-radius:11px; width:100%;
  background:linear-gradient(90deg,var(--maroon-800),var(--maroon-950)); color:#fff;
  font-weight:800; font-size:13px; transition:.15s filter, .15s transform;
}
.svc-go-btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
.svc-go-btn svg{width:15px;height:15px; transform:scaleX(-1)}
.empty-note{grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--muted); border:1.5px dashed var(--line); border-radius:16px; font-size:13.5px;}

/* flash */
.flash{max-width:1180px; margin:18px auto 0; padding:0 22px}
.flash-box{padding:12px 16px; border-radius:12px; font-size:13.5px; font-weight:700;}
.flash-ok{background:#E8F3EA; color:var(--ok)}
.flash-err{background:#FBEAEA; color:var(--danger)}

/* settings page */
.settings-shell{max-width:820px; margin:0 auto; padding:30px 22px 80px}
.settings-card{background:#fff; border-radius:20px; box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden;}
.tabs{display:flex; gap:6px; padding:16px 24px 0; border-bottom:1px solid var(--line)}
.tab-link{padding:10px 16px; font-weight:800; font-size:13.5px; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px;}
.tab-link.active{color:var(--maroon-900); border-color:var(--gold-500)}
.tab-body{padding:22px 24px 26px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-row.single{grid-template-columns:1fr}
.form-field{margin-top:12px}
.form-field label{display:block; font-size:12.5px; font-weight:700; color:var(--maroon-900); margin-bottom:6px}
.form-field input, .form-field select{width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--cream); font-size:13.5px; outline:none;}
.form-field input:focus,.form-field select:focus{border-color:var(--gold-600); box-shadow:0 0 0 3px rgba(217,164,77,.16)}
.field-hint{font-size:11px; color:var(--muted); margin-top:5px}
.icon-choices{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.icon-choice{width:42px;height:42px;border-radius:10px; border:1.5px solid var(--line); background:var(--cream); display:flex;align-items:center;justify-content:center; color:var(--maroon-800); cursor:pointer;}
.icon-choice svg{width:20px;height:20px; pointer-events:none}
.icon-choice.sel{border-color:var(--gold-600); background:#fff; box-shadow:0 0 0 3px rgba(217,164,77,.2)}
.btn-sm{padding:9px 16px; border-radius:10px; font-weight:800; font-size:13px; border:none}
.btn-add{background:linear-gradient(90deg,var(--maroon-800),var(--maroon-950)); color:#fff; margin-top:16px}
.btn-ghost{background:var(--cream-2); color:var(--maroon-900); border:1px solid var(--line)}
.btn-danger{background:#FBEAEA; color:var(--danger)}
.btn-danger:hover{background:#F6D9D9}
.list-block{margin-top:24px}
.list-block h3{font-size:13px; font-weight:800; color:var(--maroon-900); margin:0 0 10px; text-transform:uppercase; letter-spacing:.5px}
.list-item{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--cream);}
.li-icon{width:36px;height:36px;border-radius:9px; background:#fff; border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--maroon-800); flex:none}
.li-icon svg{width:18px;height:18px}
.li-main{flex:1; min-width:0}
.li-title{font-weight:800; font-size:13.5px; color:var(--ink)}
.li-sub{font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis}
.li-actions{display:flex; gap:6px; flex:none}
.li-actions button, .li-actions a.btn-sm{padding:7px 11px; font-size:12px; display:inline-block}
.role-tag{font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; margin-inline-start:8px;}
.role-tag.admin{background:#F3E4C4; color:#8A5A16}
.role-tag.member{background:#E4EEE7; color:#2E6B41}

@media(max-width:560px){
  .form-row{grid-template-columns:1fr}
  .user-chip{display:none}
  .page-title{font-size:21px}
}