/* Noor Mandala HR — Learner Portal Stylesheet
   Matches main noormandala.com palette */
:root {
  --green-d:#0d2818; --green:#1a4d2e; --green-m:#2d6b3e; --green-pale:#e8f1ec;
  --orange:#c8601a; --orange-l:#e07a2f; --orange-d:#a84e10; --orange-pale:#fdf4ec;
  --gold:#c9a961;
  --cream:#faf7f2; --cream2:#f5f0e8;
  --text:#1a1a1a; --text2:#3a3a3a; --muted:#6b6b6b;
  --border:#ebe5dd; --border-s:#f3eee7;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --shadow-lg:0 16px 48px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--cream);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--orange)}

.serif{font-family:'Cormorant Garamond',Georgia,serif}

/* Top brand bar */
.portal-bar{background:linear-gradient(135deg,var(--green-d),var(--green));color:#fff;padding:18px 0;box-shadow:var(--shadow)}
.portal-bar-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.portal-bar h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;letter-spacing:.5px}
.portal-bar h1 span{color:var(--gold)}
.portal-bar .sub{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.7;margin-top:2px}
.portal-bar nav{display:flex;gap:16px;align-items:center;font-size:14px}
.portal-bar nav a{color:rgba(255,255,255,.85);padding:6px 14px;border-radius:6px;transition:all .2s}
.portal-bar nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.portal-bar nav .pill{background:var(--orange);color:#fff;padding:7px 16px;border-radius:20px;font-weight:600;font-size:13px}
.portal-bar nav .pill:hover{background:var(--orange-d)}

/* Container */
.wrap{max-width:1180px;margin:0 auto;padding:36px 24px}
.wrap.narrow{max-width:560px}

/* Cards */
.card{background:#fff;border-radius:14px;padding:32px;box-shadow:var(--shadow);border:1px solid var(--border-s)}
.card-h{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;font-weight:600;color:var(--green-d);margin-bottom:8px;letter-spacing:-.3px}
.card-sub{color:var(--muted);font-size:14px;margin-bottom:24px;line-height:1.65}

/* Forms */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:6px;letter-spacing:.2px}
.field label .req{color:var(--orange);margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:9px;font-size:15px;font-family:inherit;
  background:#fff;color:var(--text);transition:all .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-m);box-shadow:0 0 0 4px rgba(26,77,46,.08)}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .2s;text-decoration:none}
.btn-p{background:linear-gradient(135deg,var(--orange),var(--orange-d));color:#fff;box-shadow:0 4px 14px rgba(200,96,26,.28)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(200,96,26,.4);color:#fff}
.btn-g{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;box-shadow:0 4px 14px rgba(26,77,46,.25)}
.btn-g:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(26,77,46,.4);color:#fff}
.btn-o{background:#fff;border:1.5px solid var(--green);color:var(--green)}
.btn-o:hover{background:var(--green);color:#fff}
.btn-block{display:flex;width:100%}

/* OTP inputs */
.otp-row{display:flex;gap:10px;justify-content:center;margin:18px 0 8px}
.otp-row input{width:48px;height:58px;text-align:center;font-size:24px;font-weight:700;border:1.5px solid var(--border);border-radius:9px;font-family:monospace;color:var(--green-d)}
.otp-row input:focus{border-color:var(--green-m);outline:none;box-shadow:0 0 0 4px rgba(26,77,46,.1)}

/* Course tiles */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:24px}
.course-tile{background:#fff;border-radius:12px;padding:22px;border:1px solid var(--border-s);transition:all .2s;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.course-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--green-pale)}
.course-tile .cat{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;width:fit-content}
.course-tile .cat.malta{background:var(--orange)}
.course-tile .cat.interview{background:var(--green)}
.course-tile .cat.skill{background:var(--gold);color:var(--green-d)}
.course-tile .cat.prep{background:var(--green-m)}
.course-tile h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:600;color:var(--green-d);line-height:1.25;margin:4px 0}
.course-tile .meta{font-size:12px;color:var(--muted);display:flex;gap:14px;align-items:center}
.course-tile .meta span:before{content:'•';margin-right:6px;color:var(--orange)}
.course-tile .meta span:first-child:before{content:''}

/* Content viewer (anti-copy) */
.protected{
  user-select:none;
  -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none;
  -webkit-touch-callout:none;
  position:relative;
}
.protected::selection{background:transparent}
.viewer{max-width:880px;margin:0 auto;background:#fff;padding:48px 56px;border-radius:14px;box-shadow:var(--shadow);position:relative}
.viewer h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:600;color:var(--green-d);margin:24px 0 12px;letter-spacing:-.5px;border-bottom:2px solid var(--gold);padding-bottom:10px}
.viewer h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:600;color:var(--green);margin:24px 0 10px}
.viewer h4{font-size:18px;color:var(--orange-d);margin:20px 0 8px;font-weight:600}
.viewer p{font-size:15.5px;line-height:1.8;color:var(--text2);margin-bottom:14px}
.viewer ul, .viewer ol{margin:12px 0 14px 28px}
.viewer li{font-size:15.5px;line-height:1.8;color:var(--text2);margin-bottom:5px}
.viewer .badge-info{background:var(--cream2);border-left:4px solid var(--gold);padding:14px 20px;border-radius:0 8px 8px 0;margin:18px 0}
.viewer .badge-info strong{color:var(--green-d)}
.viewer .badge-warning{background:var(--orange-pale);border-left:4px solid var(--orange);padding:14px 20px;border-radius:0 8px 8px 0;margin:18px 0;font-size:14px}
.viewer table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.viewer table th{background:var(--green-d);color:#fff;padding:11px 14px;text-align:left;font-weight:600;letter-spacing:.3px}
.viewer table td{padding:11px 14px;border-bottom:1px solid var(--border-s);vertical-align:top}
.viewer table tr:nth-child(even) td{background:var(--cream)}
.viewer .qa-block{background:var(--cream);padding:18px 22px;border-radius:10px;margin:14px 0;border-left:4px solid var(--orange)}
.viewer .qa-block .q{font-weight:700;color:var(--green-d);font-size:15.5px;margin-bottom:8px}
.viewer .qa-block .a{color:var(--text2);font-size:14.5px;line-height:1.7}

/* Diagonal watermark - always visible across content */
.watermark-stamp{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  pointer-events:none;
  z-index:9999;
  background-image:repeating-linear-gradient(-30deg, transparent 0, transparent 240px, rgba(13,40,24,.04) 240px, rgba(13,40,24,.04) 241px);
}
.watermark-text{
  position:fixed;
  top:50%; left:50%; transform:translate(-50%,-50%) rotate(-30deg);
  font-size:48px; color:rgba(26,77,46,.06); font-weight:700;
  pointer-events:none; z-index:9998;
  white-space:nowrap; font-family:'Cormorant Garamond',serif;
  letter-spacing:8px;
}
.watermark-corner{
  position:fixed; bottom:14px; right:14px;
  background:rgba(255,255,255,.95); border:1px solid var(--border);
  padding:6px 14px; border-radius:20px; font-size:11px;
  color:var(--green-d); font-weight:600;
  box-shadow:var(--shadow); z-index:9997;
}

/* Footer */
.portal-foot{text-align:center;padding:30px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--border-s);margin-top:40px;background:#fff}
.portal-foot strong{color:var(--green-d)}

@media (max-width:680px){
  .portal-bar-in{flex-direction:column;align-items:flex-start}
  .wrap{padding:20px 16px}
  .card{padding:24px 20px}
  .viewer{padding:28px 22px}
  .otp-row input{width:42px;height:52px;font-size:20px}
  .watermark-text{font-size:32px}
}