/* Official DrNapester visual identity supplied by the brand owner.
   Royal Navy #071B3D · Luxury Gold #D4AF37 · Pure White #FFFFFF.
   Original JN crest is used unchanged as a transparent image asset. */
:root{
  --navy:#071B3D;--navy-2:#0C2B57;--navy-3:#122F5A;
  --gold:#D4AF37;--gold-hover:#E1BD4B;--gold-soft:#F9F1D8;
  --white:#FFFFFF;--page:#F5F7FA;--muted:#65728A;
  --ink:#071B3D;--border:#E0E6EF;--line:#E9EDF4;
  --shadow:0 24px 62px rgba(7,27,61,.13);
  font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--navy)}
body{min-height:100vh;margin:0;background:var(--page);font-family:inherit;color:var(--ink)}
button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.65;cursor:wait}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}svg{display:block}
.brand-lockup{display:flex;align-items:center;gap:13px;min-width:0}
.brand-mark{width:73px;height:73px;flex:none;display:flex;align-items:center;justify-content:center}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(7,27,61,.10))}
.brand-wordmark{display:flex;flex-direction:column;line-height:1.3;gap:4px;min-width:0}
.brand-wordmark strong{font:800 25px/1.15 "Inter","Segoe UI",Arial,sans-serif;letter-spacing:-.7px;color:var(--navy);direction:ltr;text-align:right}
.brand-wordmark small{font-size:10px;font-weight:700;color:#64718B;white-space:normal}
.eyebrow{font-size:11px;color:#8A6E20;font-weight:850}
.eyebrow-line{display:inline-block;width:18px;height:2px;margin-inline-end:7px;background:var(--gold);vertical-align:middle}
/* Authentication screen */
.login-section{min-height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:45px 24px 29px;overflow:hidden;background:radial-gradient(circle at 1% 9%,rgba(212,175,55,.17),transparent 28%),radial-gradient(circle at 93% 100%,rgba(30,71,125,.46),transparent 40%),var(--navy)}
.login-section::before{content:"";position:absolute;width:720px;height:720px;right:-380px;top:-360px;border:1px solid rgba(212,175,55,.20);border-radius:50%;box-shadow:0 0 0 48px rgba(212,175,55,.025),0 0 0 104px rgba(212,175,55,.018);pointer-events:none}
.login-shell{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;direction:rtl;width:min(1080px,100%);min-height:640px;overflow:hidden;border:1px solid rgba(212,175,55,.43);border-radius:24px;background:var(--white);box-shadow:var(--shadow)}
.login-shell::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:var(--gold);z-index:2}
.login-form-panel{padding:43px 63px 42px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.login-brand{margin-bottom:24px}
.login-welcome{margin-bottom:24px}
.login-welcome h1{font-size:30px;font-weight:850;color:var(--navy);line-height:1.55;letter-spacing:-.5px;margin:9px 0 8px}
.login-welcome h1 span{color:#967317}
.login-welcome p{margin:0;font-size:12px;line-height:2.2;color:var(--muted);max-width:380px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:800;color:var(--navy);margin:0 0 8px}
.input-shell{position:relative;min-height:52px;display:flex;align-items:center;border:1px solid #CAD4E2;border-radius:11px;background:#FCFDFE;transition:border-color .2s,box-shadow .2s}
.input-shell:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.13)}
.input-shell>svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#8290A5;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.input-shell input{display:block;width:100%;height:51px;padding:0 46px 0 15px;border:0;outline:none;border-radius:inherit;background:transparent;color:var(--navy);font-size:13px;text-align:left}
.input-shell input::placeholder{color:#9AA5B5;font-size:12px}
.remember-label{display:flex;align-items:center;gap:8px;margin:7px 0 23px;font-size:11px;color:#69778C;cursor:pointer}
.remember-label>span{display:flex;align-items:center;gap:9px}
.remember-label input{height:17px;width:17px;margin:0;accent-color:var(--navy)}
.primary-button{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:11px;background:var(--gold);border:1px solid var(--gold);border-radius:11px;color:var(--navy);font-size:13px;font-weight:900;box-shadow:0 8px 19px rgba(143,108,16,.18);transition:background .2s,transform .2s,box-shadow .2s}
.primary-button:hover{background:var(--gold-hover);transform:translateY(-1px);box-shadow:0 11px 24px rgba(143,108,16,.22)}
.primary-button svg{height:18px;width:18px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form-error,.library-alert{background:#FFF5F3;color:#A33628;border:1px solid #F0CFC8;padding:10px 13px;border-radius:9px;font-size:12px;line-height:1.9}
.form-error{margin:0 0 15px}
.form-trust{margin-top:21px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#8792A3}
.form-trust svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.login-brand-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:linear-gradient(145deg,#0D2A55 0%,var(--navy) 62%,#04112C 100%);color:var(--white);padding:31px 37px 30px}
.login-brand-panel::before{content:"";position:absolute;z-index:-1;inset:15px;border:1px solid rgba(212,175,55,.40);border-radius:11px;pointer-events:none}
.login-brand-panel::after{content:"";position:absolute;z-index:-2;width:590px;height:590px;border:1px solid rgba(212,175,55,.09);border-radius:50%;top:50%;left:48%;transform:translate(-50%,-50%);box-shadow:0 0 0 39px rgba(212,175,55,.027),0 0 0 86px rgba(212,175,55,.018);pointer-events:none}
.spotlight-top{display:flex;align-items:center;justify-content:center;gap:9px;font:750 9px/1.4 "Inter",Arial,sans-serif;letter-spacing:1.3px;color:#E8D39A;direction:ltr;text-align:center;padding:3px 10px}
.spotlight-dot{height:6px;width:6px;background:var(--gold);border-radius:50%;flex:none}
.spotlight-center{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;padding:12px 8px 7px}
.spotlight-symbol{width:min(260px,83%);aspect-ratio:1;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.spotlight-symbol img{display:block;height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 6px 17px rgba(0,0,0,.27))}
.spotlight-kicker{display:inline-flex;color:var(--gold);font-size:12px;font-weight:800;margin-bottom:9px}
.spotlight-center h2{margin:0 0 9px;font-size:27px;font-weight:850;line-height:1.6;letter-spacing:-.3px}
.spotlight-center h2 em{font-style:normal;color:var(--gold)}
.spotlight-center p{font-size:11px;color:#C6D0E0;line-height:2.15;margin:0;max-width:275px}
.spotlight-bottom{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;color:#D9DDE5;font-size:9px;text-align:center}
.spotlight-bottom>span:last-child{font:700 9px/1.3 "Inter",Arial,sans-serif;letter-spacing:.8px;color:var(--gold)}
.spotlight-divider{height:3px;width:3px;border-radius:50%;background:var(--gold)}
.login-copyright{position:relative;z-index:1;color:#CCD4E1;text-align:center;font-size:10px;margin:0}
/* Library */
.library-section{min-height:100vh;padding:38px 20px 36px;background:linear-gradient(180deg,var(--navy) 0, var(--navy) 220px, var(--page) 220px, var(--page) 100%)}
.library-card{width:min(1150px,100%);margin:0 auto;overflow:hidden;border:1px solid rgba(212,175,55,.35);border-radius:22px;background:var(--white);box-shadow:0 16px 58px rgba(7,27,61,.15)}
.library-brand-strip{height:38px;display:flex;align-items:center;gap:11px;padding:0 36px;background:var(--navy);color:#DCE4F0;border-bottom:2px solid var(--gold);direction:ltr;font:750 10px/1.2 "Inter",Arial,sans-serif;letter-spacing:1.1px}
.mini-spark{font-size:15px;color:var(--gold)}
.strip-line{height:1px;width:22px;background:var(--gold)}
.library-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 37px 20px;border-bottom:1px solid var(--line)}
.library-heading{display:flex;align-items:center;gap:23px;min-width:0}
.library-brand{flex:none;padding-left:22px;border-left:1px solid var(--border)}
.library-brand .brand-mark{width:65px;height:65px}
.library-brand .brand-wordmark strong{font-size:22px}
.library-brand .brand-wordmark small{font-size:9px}
.library-title-group h1{font-size:19px;font-weight:850;margin:3px 0 0;line-height:1.6;color:var(--navy)}
.library-title-group .eyebrow{font-size:11px;color:#7C889B}
.top-actions{display:flex;align-items:center;gap:9px;direction:rtl;flex:none}
.outline-button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--white);color:var(--navy);border:1px solid #CDD6E5;border-radius:9px;padding:0 14px;font-size:11px;font-weight:800;transition:background .2s,border-color .2s}
.outline-button:hover{background:var(--gold-soft);border-color:var(--gold)}
.outline-button svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.logout-button{color:#54637A}
.library-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:23px;overflow:hidden;margin:23px 36px 24px;padding:27px 30px;border:1px solid rgba(212,175,55,.55);border-radius:16px;background:linear-gradient(115deg,#102C57 0%,var(--navy) 75%);color:var(--white)}
.library-hero::before{content:"";position:absolute;left:28%;top:-137px;width:380px;height:380px;border-radius:50%;border:1px solid rgba(212,175,55,.17);box-shadow:0 0 0 37px rgba(212,175,55,.027),0 0 0 74px rgba(212,175,55,.022);pointer-events:none}
.library-hero::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--gold)}
.hero-text,.hero-counter{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#E5D6AE;font-weight:750}
.hero-dot{height:7px;width:7px;background:var(--gold);border-radius:50%}
.hero-text h2{font-size:23px;font-weight:850;line-height:1.6;letter-spacing:-.25px;margin:9px 0 4px}
.hero-text h2 span{color:var(--gold)}
.hero-text p{font-size:11px;color:#CCD6E3;line-height:2;margin:0}
.hero-counter{width:195px;min-height:95px;flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;border:1px solid rgba(212,175,55,.47);border-radius:11px;padding:14px;background:rgba(255,255,255,.055)}
.hero-counter-icon{width:24px;height:24px;color:var(--gold);margin-bottom:2px}
.hero-counter-icon svg{height:100%;width:100%;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.hero-counter strong{color:white;font-size:14px;font-weight:850}
.hero-counter small{color:#BAC8DB;font-size:10px}
.search-area{padding:0 36px 23px}
.search-area label{display:block;font-size:11px;font-weight:850;color:var(--navy);margin-bottom:8px}
.search-box{height:54px;display:flex;align-items:center;gap:11px;padding:0 15px;border:1px solid #D2DCE9;border-radius:10px;background:#FBFCFE;transition:border-color .2s,box-shadow .2s}
.search-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.12)}
.search-box svg{height:18px;width:18px;flex:none;stroke:#8D752B;stroke-width:1.9;stroke-linecap:round}
.search-box input{height:100%;border:0;outline:none;flex:1;min-width:0;text-align:right;background:transparent;color:var(--navy);font-size:12px}
.search-box input::placeholder{color:#909EB1}.search-box input:focus{outline:none}
.search-assist{white-space:nowrap;color:#856815;background:var(--gold-soft);border-radius:6px;padding:5px 8px;font-size:10px}
.library-alert{margin:0 36px 18px}
.table-wrap{margin:0 36px 25px;border:1px solid var(--border);border-radius:13px;overflow:hidden}
.table-header{min-height:47px;display:grid;grid-template-columns:minmax(0,1fr) 157px;align-items:center;padding:0 20px;background:#F3F6FB;border-bottom:1px solid var(--border);color:#526685;font-size:11px;font-weight:800}
.table-header span:last-child{text-align:center}
.video-row{min-height:78px;display:grid;grid-template-columns:minmax(0,1fr) 157px;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.video-row:last-child{border-bottom:none}.video-row:hover{background:#FAFBFD}
.title-cell{min-width:0;display:flex;align-items:center;gap:13px;color:var(--navy);font-size:13px;line-height:1.9;font-weight:800}
.title-text{overflow-wrap:anywhere}
.play-link{height:40px;width:40px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid #DAE3EE;border-radius:11px;background:#ECF1F8;color:var(--navy);text-decoration:none;transition:background .2s,transform .2s}
.play-link:hover{background:var(--gold-soft);transform:translateY(-1px)}
.play-link svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.copy-area{text-align:center}
.copy-button{min-width:114px;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;padding:0 13px;border-radius:9px;border:1px solid var(--gold);background:var(--gold);color:var(--navy);font-size:11px;font-weight:850;transition:background .2s,transform .2s}
.copy-button:hover{background:var(--gold-hover);transform:translateY(-1px)}
.copy-button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.75;stroke-linejoin:round}
.copy-button.copied{background:#FFF9E9;border-color:#A7841D;color:var(--navy)}
.empty-state{padding:57px 15px 60px;text-align:center;color:#75839B;font-size:12px}
.empty-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;margin:0 auto;border-radius:15px;background:var(--gold-soft);color:var(--navy);font-size:34px}
.empty-state p{margin:13px 0 0}
.library-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 36px;border-top:1px solid var(--border);background:#FBFCFE;color:#6F7D92;font-size:10px}
.library-footer span span{color:#A8871E}
.under-footer{text-align:center;color:#7F90AB;font:400 10px/1.8 "Inter",Arial,sans-serif;margin:23px 0 0}
@media(max-width:980px){
  .login-shell{grid-template-columns:1fr .85fr}
  .login-form-panel{padding:38px 36px}
  .login-brand-panel{padding:30px 23px}
  .spotlight-symbol{width:min(220px,78%)}
  .spotlight-center h2{font-size:24px}
  .library-heading{gap:14px}
  .library-brand{padding-left:14px}
  .library-title-group h1{font-size:17px}
}
@media(max-width:720px){
  .login-section{padding:19px 12px 24px;justify-content:flex-start}
  .login-shell{display:flex;flex-direction:column;width:min(460px,100%);min-height:0;border-radius:19px}
  .login-brand-panel{order:0;min-height:208px;padding:22px 24px 15px}
  .login-form-panel{order:1;padding:28px 26px 31px}
  .spotlight-top{font-size:8px}
  .spotlight-center{display:grid;grid-template-columns:102px minmax(0,1fr);align-items:center;column-gap:10px;text-align:right;padding:11px 0 0}
  .spotlight-symbol{grid-row:1 / span 3;grid-column:1;width:101px;height:101px;margin:0}
  .spotlight-kicker{grid-column:2;font-size:10px;margin:0}
  .spotlight-center h2{grid-column:2;font-size:17px;line-height:1.55;margin:0}
  .spotlight-center h2 br{display:none}
  .spotlight-center h2 em{display:block}
  .spotlight-center p{display:none}
  .spotlight-bottom{font-size:8px;margin-top:8px}
  .login-brand{margin-bottom:19px}
  .brand-mark{height:62px;width:62px}
  .brand-wordmark strong{font-size:21px}
  .brand-wordmark small{font-size:9px}
  .login-welcome{margin-bottom:21px}
  .login-welcome h1{font-size:24px}
  .login-welcome p{font-size:11px}
  .library-section{padding:17px 11px 25px;background:linear-gradient(180deg,var(--navy) 0,var(--navy) 145px,var(--page) 145px)}
  .library-card{border-radius:17px}
  .library-brand-strip{height:31px;padding:0 16px;font-size:8px}
  .library-top{padding:16px 16px 18px;flex-wrap:wrap;gap:13px}
  .library-heading{width:100%;justify-content:flex-start;gap:12px}
  .library-brand{padding-left:11px}
  .library-brand .brand-mark{width:55px;height:55px}
  .library-brand .brand-wordmark strong{font-size:18px}
  .library-brand .brand-wordmark small{font-size:9px}
  .library-title-group h1{font-size:14px;margin:3px 0 0}
  .library-title-group .eyebrow{font-size:9px}
  .top-actions{gap:7px;width:100%;justify-content:flex-start}
  .outline-button{min-height:34px;padding:0 11px;font-size:10px}
  .library-hero{margin:0 16px 19px;padding:19px 17px;border-radius:12px;gap:10px}
  .hero-text h2{font-size:18px}
  .hero-text p{font-size:10px}
  .hero-counter{width:107px;min-height:78px;padding:9px}
  .hero-counter strong{font-size:11px}
  .hero-counter small{display:none}
  .search-area{padding:0 16px 18px}
  .search-area label{font-size:10px}
  .search-box{height:48px}
  .search-box input{font-size:11px}
  .table-wrap{margin:0 16px 16px}
  .table-header{grid-template-columns:minmax(0,1fr) 106px;padding:0 10px}
  .video-row{grid-template-columns:minmax(0,1fr) 106px;padding:10px 9px;gap:5px;min-height:74px}
  .title-cell{font-size:11px;gap:8px}
  .play-link{height:30px;width:30px;border-radius:8px}
  .play-link svg{width:16px;height:16px}
  .copy-button{min-width:89px;height:35px;padding:0 6px;gap:4px;font-size:10px}
  .library-footer{padding:12px 16px;font-size:9px}
  .library-alert{margin:0 16px 15px}
}
@media(max-width:410px){
  .login-form-panel{padding:25px 21px 29px}
  .login-welcome h1{font-size:22px}
  .spotlight-center{grid-template-columns:82px minmax(0,1fr)}
  .spotlight-symbol{width:82px;height:82px}
  .spotlight-center h2{font-size:15px}
  .library-title-group .eyebrow{display:none}
  .library-title-group h1{font-size:12px}
  .library-brand .brand-wordmark strong{font-size:16px}
  .hero-counter{width:93px}
  .hero-text h2{font-size:16px}
  .search-assist{display:none}
  .table-header{grid-template-columns:minmax(0,1fr) 95px}
  .video-row{grid-template-columns:minmax(0,1fr) 95px}
  .copy-button{min-width:79px;font-size:9px}
}
@media(max-width:350px){
  .spotlight-top{letter-spacing:.5px}
  .spotlight-center{grid-template-columns:70px minmax(0,1fr)}
  .spotlight-symbol{height:70px;width:70px}
  .library-heading{gap:7px}
  .library-brand{padding-left:6px;gap:5px}
  .library-title-group h1{font-size:11px}
  .library-hero{flex-direction:column;align-items:stretch}
  .hero-counter{width:100%;min-height:0;flex-direction:row;align-items:center}
  .hero-counter-icon{margin:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Three copy actions: link, title, and both. */
.video-row{grid-template-columns:minmax(0,1fr) minmax(280px,390px)!important}
.table-header{grid-template-columns:minmax(0,1fr) minmax(280px,390px)!important}
.copy-area{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-start}
.copy-area .copy-button{min-width:0;white-space:nowrap;padding:0 10px;font-size:11px}
.copy-area .copy-secondary{background:#fff;color:#071B3D;border:1px solid #D4AF37}
.copy-area .copy-secondary:hover{background:#F9F1D8}
.copy-area .copy-secondary.copied{background:#e9f6ed;color:#126333;border-color:#7fc99b}
@media(max-width:700px){.video-row{grid-template-columns:minmax(0,1fr)!important;gap:12px}.table-header{grid-template-columns:minmax(0,1fr)!important}.table-header span:last-child{display:none}.copy-area{width:100%}.copy-area .copy-button{font-size:10px}}