/* Mehfil-e-Karima — refined visual system, v3 */
:root{
 --bg:#f6f8f5; --panel:#ffffff; --ink:#16352e; --muted:#697f76;
 --line:#e3eae5; --soft:#e9f3ed; --teal:#0a7569; --deep:#075f56;
 --gold:#e4bf69; --gold-soft:#fcf3db;
 --shadow:0 8px 34px rgba(19,65,48,.045);
 --radius:21px;
}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;line-height:1.5}button{transition:transform .15s ease,background .15s ease,box-shadow .15s ease}button:active{transform:scale(.985)}
.panel{border-color:var(--line);box-shadow:var(--shadow);border-radius:21px}h1,h2,h3{color:var(--ink)}h1{font-size:clamp(1.75rem,3.0vw,2.6rem);letter-spacing:-.045em;line-height:1.12}h2{letter-spacing:-.025em} .eyebrow{font-size:.67rem;letter-spacing:.19em;font-weight:900;color:#779389} .btn{border-radius:12px;min-height:44px;box-shadow:none;letter-spacing:-.01em}.btn:not(.outline):not(.soft):not(.ghost):hover{box-shadow:0 8px 20px rgba(10,108,88,.13)}.btn.outline{border-color:#d5e3dc}.btn:focus-visible{outline:3px solid #e5b954;outline-offset:2px} .langsel{font-size:.83rem;height:39px;background:#fff;border-color:#e2eae6;box-shadow:none}
.notice.warn{background:#fffaf0;border:1px solid #f0e8d5;color:#937341;box-shadow:none} .notice.warn .icon{width:16px;height:16px}.notice.warn{font-size:.77rem;padding:10px 13px;border-radius:13px}.notice{line-height:1.55}
/* Login and public entrance: understated and premium, no fake mosque illustrations */
.public-shell{min-height:100dvh;background:radial-gradient(ellipse 620px 460px at -10% -5%,rgba(10,117,105,.13),transparent 66%),radial-gradient(ellipse 640px 440px at 103% 96%,rgba(228,191,105,.14),transparent 68%),#f7f9f6;padding:28px clamp(16px,4vw,50px)}
.public-top{align-items:center}.public-top .mark{height:96px;width:118px;object-fit:contain;object-position:left center;filter:drop-shadow(0 7px 10px #295b4a12)}.public-main{width:min(530px,100%)}.public-card{padding:48px 39px 38px;background:#fffffff0;border:1px solid #e8efe9;box-shadow:0 26px 90px #1d5a3a15,0 2px 4px #1e4d3610;border-radius:29px;position:relative}.public-card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:3px;background:linear-gradient(90deg,transparent,#dabd74,transparent)}.public-card h1{font-family:Georgia,Times New Roman,serif;color:#17584f;font-size:clamp(3.0rem,8vw,4.4rem);margin:15px 0 33px;line-height:1}.public-actions{gap:13px}.public-actions .btn{min-height:62px;border-radius:14px;justify-content:space-between;text-align:left;padding:0 22px;font-size:1rem;box-shadow:0 5px 15px #1153430c}.public-actions .btn .icon{width:23px;height:23px}.public-actions .btn.gold{background:linear-gradient(130deg,#f1d389,#dcb45f);color:#4b3718}.public-actions .btn.outline{background:#fbfdfb;color:#0d655b}.public-footer{font-size:.68rem;letter-spacing:.17em;color:#8c9f95;padding-top:13px}.login-card{text-align:left}.login-card h1{font-size:clamp(2.2rem,6vw,3.2rem);margin:22px 0 25px}.demo-keys{background:#f7faf7;box-shadow:none;border-color:#e6efe8;font-size:.75rem}
/* Navigation inspired by calm modern admin panels */
.layout{grid-template-columns:248px minmax(0,1fr);background:var(--bg)} .sidebar{padding:23px 15px;box-shadow:1px 0 0 #eef2ed;background:#fff;border-inline-end:1px solid #eef0eb}
.brand{padding:1px 14px 25px;display:flex;justify-content:flex-start}.brand img{width:83px;height:76px;object-fit:contain;filter:drop-shadow(0 5px 8px #164c3310)}.side-cap{padding:14px 14px 9px;color:#879d92;letter-spacing:.16em;font-size:.62rem}.nav{gap:3px}.nav button{min-height:48px;padding:11px 14px;border-radius:12px;font-size:.89rem;font-weight:715;color:#587167}.nav button .icon{width:19px;height:19px;stroke-width:1.75}.nav button.active{background:#e8f4ed;color:#0b665d;box-shadow:inset 3px 0 0 #0b776b}.nav button:hover:not(.active){background:#f5f8f5;color:#195d51}.sidebar-bottom{gap:12px}.side-account{background:#f8fbf8;border-color:#e9f0ea;border-radius:16px;padding:12px}.sidebar .avatar{border-radius:13px;background:#0c7568}.sidebar-bottom .btn{font-size:.81rem;color:#8b5d53;text-align:left;justify-content:flex-start;padding-inline:12px}
.topbar{height:78px;background:#ffffffed;box-shadow:0 1px 0 #ebefeb;backdrop-filter:blur(16px);padding:0 clamp(18px,3vw,39px)}.topbar-title{font-size:1.04rem;gap:13px}.topbar-title img{width:49px!important;height:52px!important;object-fit:contain}.topbar .round{border-radius:15px;box-shadow:none}.topbar .round .avatar{background:var(--teal);border-radius:12px!important}.top-demo{font-size:.66rem;letter-spacing:.09em;font-weight:800;white-space:nowrap;color:#8a9b92;background:#eff5ee;border:1px solid #e6efe6;border-radius:99px;padding:7px 10px}
.main{width:min(1280px,100%);padding:35px clamp(24px,3.35vw,50px) 110px;gap:20px;min-height:calc(100vh - 78px)}.page-head h1{margin:10px 0}.page-head p{color:#7b8d84}.page-head{margin-bottom:7px}.section{padding:24px}.stats{gap:15px}.stat{padding:22px 21px;background:#fff}.stat>.icon{color:#138477}.stat .number{font-size:2.05rem;letter-spacing:-.065em}.stat small{font-weight:610}.pill{border-radius:99px;font-size:.74rem;padding:7px 12px}.pill.gold{background:#fbf0cf;color:#94702e}.datatable th{background:#f5f8f5;font-weight:780}.table-wrap{border-color:#e5ece7}.datatable td{line-height:1.5}.panel.item{padding:20px}.info-row{padding:15px 0}.info-row span{line-height:1.5}.tab{border-radius:99px;padding:10px 17px}
/* Home dashboard — primary member view */
.dash-greeting{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:3px}.dash-kicker{color:#819b8d;font-size:.66rem;font-weight:870;letter-spacing:.17em}.dash-greeting h1{font-size:clamp(1.75rem,3vw,2.7rem);font-weight:790;margin:9px 0 8px}.dash-greeting h1 em{font-family:Georgia,serif;font-style:normal;font-weight:500;color:#138274;letter-spacing:-.04em}.dash-greeting p{color:#7e9087;font-size:.89rem;margin:0}.dash-role-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #dce9df;background:#fff;border-radius:99px;padding:10px 13px;color:#46786b;font-size:.78rem;font-weight:770}.dash-role-pill .icon{width:16px;height:16px}
.home-feature{background:linear-gradient(122deg,#0b524b 2%,#126d61 58%,#208779 100%);color:#fff;min-height:245px;border-radius:26px;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 15px 35px #0a6f5e20}.home-feature::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 440px 230px at 81% -10%,#ffffff14,transparent 65%),linear-gradient(90deg,transparent,#0e887a26);pointer-events:none}.home-feature-shapes{position:absolute;right:-15px;top:-130px;width:500px;height:500px;opacity:.42;pointer-events:none}.home-feature-shapes i{display:block;position:absolute;border:1px solid #cce6d657;border-radius:50%;width:320px;height:320px;top:75px;right:45px}.home-feature-shapes i:nth-child(2){width:440px;height:440px;right:-15px;top:15px}.home-feature-shapes i:nth-child(3){width:170px;height:170px;top:150px;right:120px;border-color:#ebd59d99}.home-feature-body{position:relative;z-index:1;padding:33px 34px;max-width:760px}.home-feature-kicker{display:flex;align-items:center;gap:9px;color:#d5e9d5;font-size:.68rem;font-weight:900;letter-spacing:.17em}.home-feature-kicker .icon{width:18px;height:18px;color:#ebd78d}.home-feature h2{font-family:Georgia,serif;color:#fff;font-size:clamp(1.55rem,2.85vw,2.4rem);font-weight:500;max-width:600px;margin:17px 0 12px;line-height:1.18}.home-feature p{font-size:.89rem;color:#d9ebe2;max-width:550px;margin:0;line-height:1.65}.home-feature-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:25px}.btn.feature-white{background:#fff;color:#155e52;font-size:.86rem;padding:10px 17px;min-height:44px}.feature-status{font-size:.78rem;color:#fae2a1;font-weight:760}.feature-status.answered{color:#ccf3e0}.feature-watermark{font-family:Georgia,serif;font-size:112px;font-weight:700;color:#ffffff12;position:absolute;right:5%;bottom:-28px;letter-spacing:-.15em;line-height:1;pointer-events:none}.feature-watermark span{font:800 10px system-ui;letter-spacing:.3em;display:block;color:#fff3;position:absolute;top:65px;right:5px}.staff-feature{background:linear-gradient(115deg,#243f39,#155e53 65%,#47785f)}.guest-feature{background:linear-gradient(115deg,#105c65,#178074 70%,#558876)}
.home-mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.home-mini-stats>div{display:grid;grid-template-columns:43px 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center;padding:21px 19px;background:#fff;border:1px solid #e6ede7;border-radius:19px;box-shadow:0 4px 15px #174b3810;min-width:0}.home-mini-stats span{grid-row:1/3;align-self:center;width:43px;height:43px;border-radius:14px;background:#ecf6f0;display:grid;place-items:center;color:#087d70}.home-mini-stats>div:nth-child(2) span{color:#ae843b;background:#fff6df}.home-mini-stats>div:nth-child(3) span{color:#557f9d;background:#eaf3f8}.home-mini-stats strong{font-size:1.7rem;font-weight:870;line-height:1.12;color:#153f34}.home-mini-stats small{font-size:.75rem;color:#8a9b91;line-height:1.2}.dashboard-section-heading{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:12px 0 -6px}.dashboard-section-heading h2{margin:7px 0 0;font-size:1.39rem;letter-spacing:-.04em}.dashboard-muted{color:#8a9b91;font-size:.82rem}.text-link{border:0;background:transparent;color:#0d7366;font-weight:800;display:inline-flex;gap:6px;align-items:center;padding:5px 0}.text-link .icon{width:16px;height:16px}.quick-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick-link{width:100%;min-height:100px;padding:19px;border:1px solid #e5ede6;border-radius:18px;background:#fff;display:flex;align-items:center;gap:16px;text-align:left;color:var(--ink);box-shadow:0 4px 18px #174b3810;transition:transform .17s,box-shadow .17s,border-color .17s}.quick-link:hover{transform:translateY(-3px);border-color:#b9d5ca;box-shadow:0 14px 29px #174b381a}.quick-link-icon{width:53px;height:53px;border-radius:16px;background:#e8f4ee;display:grid;place-items:center;color:#117869;flex:none}.quick-link:nth-child(2) .quick-link-icon,.quick-link:nth-child(6) .quick-link-icon{color:#59749a;background:#eef2fa}.quick-link:nth-child(3) .quick-link-icon,.quick-link:nth-child(4) .quick-link-icon{color:#ac7e2f;background:#fcf5e5}.quick-link-icon .icon{width:26px;height:26px;stroke-width:1.75}.quick-link-copy{display:grid;gap:6px;min-width:0;flex:1}.quick-link-copy strong{font-size:.95rem;font-weight:820}.quick-link-copy small{font-size:.76rem;color:#81948a;line-height:1.35}.quick-link-arrow{color:#b2c0b6}.quick-link-arrow .icon{width:18px;height:18px}.home-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.home-video-item{min-width:0;padding:0 0 14px;border:0;background:transparent;text-align:left;display:grid;gap:7px;color:var(--ink)}.home-video-item .tube-thumb{margin-bottom:4px}.home-video-item strong{font-size:.92rem;line-height:1.4}.home-video-item small{color:#83968a;font-size:.79rem}
/* Media experience — viewable thumbnails, clean video platform layout */
.media-shell{gap:19px}.media-head{align-items:end}.media-head h1{font-size:clamp(2.1rem,4vw,3.1rem);letter-spacing:-.055em;margin:5px 0}.media-title-dot{font-family:Arial,sans-serif;color:#dcb466;font-size:.24em;vertical-align:super}.media-head p{color:#849389;font-size:.89rem}.tube-mark{border-radius:999px;border-color:#dce8df;color:#1c6d5f;font-size:.84rem;background:#fff;box-shadow:none}.media-search-row{gap:13px}.media-search{height:54px;border-radius:15px;border:1px solid #e0e9e2;background:#fff;box-shadow:0 3px 16px #164b3910}.media-search .icon{color:#789789}.tube-sort{border-radius:14px;max-width:170px;height:54px}.tube-chips{gap:9px;padding:4px 0 8px}.tube-chip{border-radius:99px;background:#fff;border-color:#e4ebe4;font-size:.83rem;padding:10px 17px;color:#52766b}.tube-chip.selected{background:#115e53;color:#fff;border-color:#115e53}.media-result-info>span:first-child{font-size:.8rem;color:#254e42}.tube-grid{gap:29px 19px}.tube-card{gap:11px}.tube-thumb{border-radius:17px;background:#0d4f46;box-shadow:0 8px 18px #1b443114;transition:transform .2s,box-shadow .2s}.tube-open:hover .tube-thumb{transform:translateY(-2px);box-shadow:0 15px 28px #1b443126}.tube-thumb:after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #fff2;border-radius:inherit}.tube-tag{border-radius:8px;background:#102a23c9;font-size:.62rem;letter-spacing:.09em;padding:6px 9px;bottom:12px;right:12px}.tube-play{opacity:1;background:#ffffffd9;color:#0a5b51;border:0;box-shadow:0 9px 22px #082d2b38;width:47px;height:47px}.tube-play .icon{width:21px;height:21px}.tube-avatar{background:#e8f3ec;color:#106c5d;font-family:Georgia,serif;font-size:.73rem;border:1px solid #dce9e0}.tube-video-title{font-weight:800;font-size:.96rem;color:#204136}.tube-channel,.tube-details{color:#7d9086}.tube-more{color:#899f93}.tube-package .tube-thumb{border:1px solid #d8c18c}.tube-watch{gap:28px}.tube-player{border-radius:20px;box-shadow:0 16px 33px #10231c24}.watch-action{background:#f2f6f2;border:1px solid #e0e9e2}.watch-description{background:#eef5ef;border-radius:18px}.tube-locked,.tube-empty-player{background:#0a1a1b}.watch-top h1{letter-spacing:-.035em}.media-shell .notice.warn{margin-top:3px}
/* Lists, form screens, administration / host */
.item{border-radius:18px;box-shadow:0 4px 18px #163e2e09}.item h3{font-size:1.03rem}.item footer{padding-top:7px}.service{border:1px solid #e4ece6;border-radius:18px;box-shadow:0 5px 18px #144b3510;min-height:92px;padding:14px 16px}.service-thumb{width:56px;height:56px;background:#e6f3ea}.service:hover{border-color:#b7d3c4;box-shadow:0 12px 28px #14533c19}.service strong{font-size:1rem}.service small{font-size:.78rem}.service .arrow{font-size:1.5rem}.family-person input,.input{border-color:#dae7de}.input{background:#fff;border-radius:12px}.input:focus{box-shadow:0 0 0 3px #3c97751a}.data-list .info-row{border-bottom-color:#eef1ec}.profile-top .avatar{border-radius:22px}.name-tag{border:1px solid #dfede3;background:#f5f9f5}.setting-row{padding:19px 0}.setting-row strong{font-size:.93rem}.setting-row small{color:#84958a}.modal{box-shadow:0 35px 85px #102f2845}.modal-scrim{backdrop-filter:blur(6px)}.toast{background:#105e54;color:#fff;box-shadow:0 16px 36px #0f342d37;border-radius:14px}.empty{background:#fff;border-color:#dce8df}.datatable tr:hover td{background:#fbfdfb}
/* Desktop tablets */
@media(max-width:1050px){.layout{grid-template-columns:215px minmax(0,1fr)}.sidebar{padding:17px 9px}.main{padding-inline:25px}.quick-link-grid{gap:11px}.home-mini-stats>div{padding:16px 12px;column-gap:9px}.home-mini-stats small{font-size:.67rem}.tube-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Mobile: give content real breathing room and don't make user read tiny labels */
@media(max-width:760px){.layout{display:block}.sidebar{display:none}.main{padding:24px 16px calc(110px + env(safe-area-inset-bottom));gap:21px;width:100%}.topbar{height:66px;padding:0 16px;background:#fff}.topbar-title{font-size:.98rem;gap:8px}.topbar-title img{width:43px!important;height:48px!important}.top-demo{display:none}.top-actions{gap:7px}.top-actions .round{width:39px;height:39px;border-radius:12px}.langsel{padding:0 10px;height:39px}.bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 5px max(8px,env(safe-area-inset-bottom));border-top:1px solid #e3ece5;box-shadow:0 -5px 19px #1c493310;background:#ffffffed;backdrop-filter:blur(15px)}.bottom-nav button{min-height:45px;padding:6px 3px;gap:4px;font-size:.67rem;border-radius:11px}.bottom-nav button.active{background:#e8f3ed;color:#0b685e}.bottom-nav .icon{width:22px;height:22px}.dash-greeting{align-items:start;gap:13px;margin-bottom:0}.dash-greeting h1{font-size:clamp(1.85rem,6.5vw,2.45rem);margin:8px 0 7px}.dash-greeting p{font-size:.82rem;line-height:1.5}.dash-role-pill{padding:7px 10px;font-size:.7rem}.home-feature{min-height:234px;border-radius:21px}.home-feature-body{padding:26px 23px}.home-feature h2{font-size:1.72rem;margin:13px 0 10px}.home-feature p{font-size:.81rem}.home-feature-actions{margin-top:18px;gap:11px}.feature-watermark{right:5%;bottom:-16px;font-size:78px}.home-feature-shapes{right:-170px;opacity:.28}.home-mini-stats{gap:8px}.home-mini-stats>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 12px;border-radius:16px;min-height:105px}.home-mini-stats span{width:31px;height:31px;border-radius:10px;flex:none}.home-mini-stats span .icon{width:16px;height:16px}.home-mini-stats strong{font-size:1.45rem}.home-mini-stats small{font-size:.63rem;line-height:1.22}.dashboard-section-heading{margin:0 0 -5px;align-items:end}.dashboard-section-heading h2{font-size:1.25rem}.dashboard-muted{display:none}.quick-link-grid{grid-template-columns:1fr;gap:10px}.quick-link{min-height:79px;padding:13px 15px;gap:13px;border-radius:17px}.quick-link-icon{width:48px;height:48px;border-radius:14px}.quick-link-icon .icon{width:24px;height:24px}.quick-link-copy strong{font-size:.93rem}.quick-link-copy small{font-size:.74rem}.home-video-grid{gap:11px}.home-video-item strong{font-size:.78rem}.home-video-item small{font-size:.68rem}.home-video-item .tube-thumb{border-radius:12px}.main>.notice.warn{font-size:.73rem}.public-shell{padding:17px}.public-top .mark{height:73px;width:91px}.public-card{padding:38px 20px 26px;border-radius:24px}.public-card h1{margin:15px 0 30px}.public-actions .btn{min-height:64px}.media-head h1{font-size:2.35rem}.media-head p{font-size:.81rem}.media-shell{gap:15px}.media-search-row{display:grid;grid-template-columns:1fr;gap:9px}.media-search{height:49px;border-radius:13px}.tube-sort{max-width:100%;height:43px}.tube-chips{gap:8px;overflow-x:auto;padding-bottom:7px}.tube-chip{min-height:38px;padding:8px 14px;font-size:.77rem}.tube-grid{grid-template-columns:1fr;gap:23px}.tube-thumb{border-radius:15px}.tube-video-title{font-size:.91rem}.tube-watch{grid-template-columns:1fr}.tube-player{border-radius:13px}.watch-actions{width:100%}.watch-related{padding-top:6px}.watch-top h1{font-size:1.31rem}.watch-description{padding:16px}.grid2,.grid3,.split{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:17px}.section{padding:19px}.page-head h1{font-size:2rem}.page-head p{font-size:.85rem}}
@media(max-width:360px){.home-mini-stats>div{padding:12px 9px}.home-mini-stats small{font-size:.59rem}.topbar-title{font-size:.86rem}.home-feature h2{font-size:1.53rem}}
/* Dark mode: maintain contrast without showing bright white cards */
html.dark{--bg:#101d1a;--panel:#1b2c27;--ink:#e5f2e9;--muted:#a5bbb0;--line:#31483e;--soft:#21453a;--teal:#158474;--deep:#9bdec5;--shadow:0 8px 34px #0002}
html.dark .topbar,html.dark .sidebar,html.dark .public-card{background:#1b2c27}html.dark .dash-greeting h1 em{color:#a5e2c5}html.dark .home-mini-stats>div,html.dark .quick-link,html.dark .tube-chip:not(.selected),html.dark .service,html.dark .tube-mark,html.dark .media-search{background:#1b2c27;color:var(--ink);border-color:#31483e}html.dark .home-mini-stats strong,html.dark .quick-link-copy strong,html.dark .dashboard-section-heading h2,html.dark .tube-video-title{color:var(--ink)}html.dark .home-mini-stats span,html.dark .quick-link-icon{background:#24483f;color:#9bdec5}html.dark .bottom-nav{background:#1b2c27ed}html.dark .bottom-nav button.active{background:#245242;color:#baf0d5}html.dark .public-shell{background:#111e19}html.dark .public-card h1{color:#aee5cf}html.dark .public-actions .btn.outline{background:#223830;color:#bbebd8}html.dark .langsel,html.dark .input{background:#1b2c27;color:#e5f2e9}html.dark .name-tag,html.dark .empty{background:#24372e;color:#e5f2e9}html.dark .watch-description{background:#253d33}html.dark .tube-channel,html.dark .tube-details,html.dark .dash-greeting p{color:#a9baad}html.dark .top-demo{color:#b6ccbe;background:#23382f;border-color:#315242}html.dark .public-actions .btn.gold{color:#4b3718}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,.tube-thumb,.quick-link,.service{transition:none!important}}

/* Do not let transient notifications obscure navigation controls. */
.toast{pointer-events:none}