
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');
:root{
  --bg:#0a0b0c; --surface:#111315; --surface-2:#15181b; --text:#f3f3f1; --muted:#9b9d9e;
  --line:rgba(255,255,255,.10); --line-strong:rgba(225,183,70,.34); --gold:#d9ad42; --gold-soft:#f0cf77;
  --shadow:0 24px 70px rgba(0,0,0,.20); --radius:28px; --max:1180px;
  --font:"Noto Sans Arabic","Noto Sans","Noto Sans Bengali","Noto Sans Devanagari",Arial,sans-serif;
}
html[data-theme="light"]{
  --bg:#f4f4f1; --surface:#fff; --surface-2:#f0f0ed; --text:#151617; --muted:#676b6e;
  --line:rgba(15,18,20,.10); --line-strong:rgba(157,109,14,.32); --shadow:0 24px 70px rgba(33,37,40,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body[data-mifak-context]{margin:0!important;min-height:100vh!important;background:radial-gradient(circle at 50% -10%,rgba(218,172,61,.07),transparent 35%),var(--bg)!important;color:var(--text)!important;font-family:var(--font)!important;font-size:16px!important;line-height:1.65!important;-webkit-font-smoothing:antialiased!important;transition:background .25s ease,color .25s ease!important;overflow-x:hidden!important}
body[data-mifak-context],body[data-mifak-context] button,body[data-mifak-context] input,body[data-mifak-context] select,body[data-mifak-context] textarea{font-family:var(--font)!important}
body[data-mifak-context] a{color:inherit;text-decoration:none}
body[data-mifak-context] .ambient,body[data-mifak-context]::before{display:none!important}
#mifakGlobalShell{display:none!important}

/* Canonical MIFAK header — same design language as the homepage */
.mifak-site-header{position:relative!important;z-index:99999!important;width:100%!important;background:var(--bg)!important;border-bottom:1px solid var(--line)!important;pointer-events:auto!important}
.mifak-site-header *{pointer-events:auto!important}
.mifak-site-header-inner{width:min(calc(100% - 48px),var(--max));min-height:88px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:22px}
.mifak-site-brand{display:inline-flex;align-items:center;min-width:190px;flex:0 0 auto}
.mifak-site-brand img{width:192px;height:auto;display:block;object-fit:contain}
.mifak-site-nav{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0}
.mifak-site-nav a{min-height:42px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--text)!important;font-size:.86rem;font-weight:500;white-space:nowrap;transition:.2s ease}
.mifak-site-nav a:hover,.mifak-site-nav a:focus-visible{border-color:var(--line-strong);background:var(--surface);outline:none}
.mifak-site-nav .store-link{background:linear-gradient(100deg,var(--gold),var(--gold-soft));color:#17120a!important;border-color:transparent;font-weight:650}
.mifak-site-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mifak-lang-control,.mifak-theme-control{height:42px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--text)}
.mifak-lang-control{position:relative;display:flex;align-items:center;padding:0 12px 0 34px}
html[dir="rtl"] .mifak-lang-control{padding:0 34px 0 12px}
.mifak-lang-control::after{content:"⌄";position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-56%);color:var(--muted);font-size:.8rem;pointer-events:none}
.mifak-lang-control select{appearance:none;border:0;outline:0;min-width:104px;background:transparent;color:var(--text);font:inherit;cursor:pointer;padding:0 8px}
.mifak-lang-control option{color:#111;background:#fff}
.mifak-theme-control{width:42px;padding:0;display:grid;place-items:center;cursor:pointer;font-size:1rem}

/* Canonical footer */
.mifak-site-footer{width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:24px 0 28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:.78rem}
.mifak-site-footer .mifak-footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.mifak-site-footer a:hover{color:var(--text)}

/* Shared page width and spacing */
body[data-mifak-context="customer"] .shell,
body[data-mifak-context="technician"] #app,
body[data-mifak-context="technician-dashboard"] .tech-app,
body[data-mifak-context="admin"] #app,
body[data-mifak-context="admin"] #login,
body[data-mifak-context="legal"] .wrap{width:min(calc(100% - 48px),var(--max))!important;max-width:var(--max)!important;margin-inline:auto!important}
body[data-mifak-context="customer"] .shell{padding:34px 0 60px!important}
body[data-mifak-context="technician"] #app{padding:36px 0 60px!important}
body[data-mifak-context="technician-dashboard"] .tech-app{padding-top:34px!important;padding-bottom:60px!important}
body[data-mifak-context="legal"] .wrap{padding:42px 0 70px!important}
body[data-mifak-context="admin"] #login{padding:48px 0 64px!important;min-height:auto!important}
body[data-mifak-context="admin"] #app{padding:34px 0 64px!important}

/* Hide legacy page chrome so only the new shell remains */
body[data-mifak-context] .portal-footer,body[data-mifak-context="customer"]>.footer{display:none!important}

/* Canonical surfaces */
body[data-mifak-context] .card,
body[data-mifak-context] .hero-copy,
body[data-mifak-context] .hero-visual,
body[data-mifak-context] .path-card,
body[data-mifak-context] .form-shell,
body[data-mifak-context] .after-card,
body[data-mifak-context] .track-card,
body[data-mifak-context] .how-card,
body[data-mifak-context] .panel,
body[data-mifak-context] .login-card,
body[data-mifak-context] .loginbox,
body[data-mifak-context] .modalbox,
body[data-mifak-context="legal"] section,
body[data-mifak-context="legal"] .note,
body[data-mifak-context="legal"] .nf>div,
body[data-mifak-context="admin"]>.box{
  background:linear-gradient(160deg,var(--surface),var(--surface-2))!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  color:var(--text)!important;
}
body[data-mifak-context] .path-card:hover,body[data-mifak-context] .path-card.featured{border-color:var(--line-strong)!important}

/* Typography and muted text */
body[data-mifak-context] h1,body[data-mifak-context] h2,body[data-mifak-context] h3,body[data-mifak-context] h4,body[data-mifak-context] b,body[data-mifak-context] strong{color:var(--text)!important}
body[data-mifak-context] p,body[data-mifak-context] small,body[data-mifak-context] .muted,body[data-mifak-context] .hero-copy p,body[data-mifak-context] .path-body p,body[data-mifak-context] .section-heading p,body[data-mifak-context] .form-head p,body[data-mifak-context] .sub,body[data-mifak-context] .footer{color:var(--muted)!important}
body[data-mifak-context] .eyebrow,body[data-mifak-context] .gold,body[data-mifak-context] .badge,body[data-mifak-context] .section-heading>span,body[data-mifak-context] .route-kicker{color:var(--gold)!important}

/* Inputs */
body[data-mifak-context] input:not([type="checkbox"]):not([type="radio"]),body[data-mifak-context] select,body[data-mifak-context] textarea{
  background:color-mix(in srgb,var(--surface) 93%,#000)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important
}
body[data-mifak-context] input::placeholder,body[data-mifak-context] textarea::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent)!important;opacity:1!important}
body[data-mifak-context] input:focus,body[data-mifak-context] select:focus,body[data-mifak-context] textarea:focus{outline:none!important;border-color:var(--line-strong)!important;box-shadow:0 0 0 3px rgba(217,173,66,.08)!important}

/* Buttons */
body[data-mifak-context] .primary-btn,body[data-mifak-context] .btn-primary,body[data-mifak-context] .btn.primary,body[data-mifak-context] .primary,body[data-mifak-context] button[type="submit"]{
  background:linear-gradient(100deg,var(--gold),var(--gold-soft))!important;color:#17120a!important;border-color:transparent!important;border-radius:14px!important;box-shadow:none!important
}
body[data-mifak-context] .secondary-btn,body[data-mifak-context] .btn-secondary,body[data-mifak-context] .secondary,body[data-mifak-context] .ghost,body[data-mifak-context] .btn:not(.primary){
  background:color-mix(in srgb,var(--surface) 92%,transparent)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:14px!important
}
body[data-mifak-context] button:hover:not(:disabled),body[data-mifak-context] a.btn:hover{transform:translateY(-1px)}

/* JOIN / registration */
body[data-mifak-context="technician"] .quick-hero{gap:18px!important}
body[data-mifak-context="technician"] .hero-copy,body[data-mifak-context="technician"] .hero-visual{border-radius:var(--radius)!important}
body[data-mifak-context="technician"] .hero-copy{padding:34px!important}
body[data-mifak-context="technician"] .hero-visual{overflow:hidden!important}
body[data-mifak-context="technician"] .hero-visual img{width:100%!important;height:100%!important;object-fit:cover!important}
body[data-mifak-context="technician"] .trust-row>div,body[data-mifak-context="technician"] .mini-flow>div{background:var(--surface-2)!important;border:1px solid var(--line)!important}
body[data-mifak-context="technician"] .path-card{background:linear-gradient(160deg,var(--surface),var(--surface-2))!important}
body[data-mifak-context="technician"] .featured-tag{background:rgba(217,173,66,.12)!important;color:var(--gold)!important;border-color:var(--line-strong)!important}
body[data-mifak-context="technician"] .phone-prefix{background:#0b0c0d!important;color:var(--gold-soft)!important;border-color:var(--line)!important}

/* AI */
body[data-mifak-context="customer"] .hero{text-align:center!important;padding:34px 10px 26px!important}
body[data-mifak-context="customer"] .hero h1{font-size:clamp(2rem,4.2vw,3.25rem)!important;line-height:1.25!important;font-weight:600!important;letter-spacing:-.025em!important}
body[data-mifak-context="customer"] .card{padding:24px!important}
body[data-mifak-context="customer"] .upload{background:var(--surface-2)!important;border:1px dashed var(--line-strong)!important;border-radius:20px!important}
body[data-mifak-context="customer"] .block,body[data-mifak-context="customer"] .stat{background:var(--surface-2)!important;border:1px solid var(--line)!important;border-radius:18px!important}

/* Admin */
body[data-mifak-context="admin"] .app{display:grid!important;grid-template-columns:240px minmax(0,1fr)!important;gap:22px!important}
body[data-mifak-context="admin"] .sidebar{position:relative!important;top:auto!important;right:auto!important;left:auto!important;width:auto!important;height:auto!important;min-height:660px!important;background:linear-gradient(160deg,var(--surface),var(--surface-2))!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
body[data-mifak-context="admin"] .main{margin:0!important;width:auto!important;min-width:0!important;background:transparent!important}
body[data-mifak-context="admin"] .brand img{border-color:var(--line)!important}
body[data-mifak-context="admin"] .nav button{border-radius:12px!important;color:var(--muted)!important}
body[data-mifak-context="admin"] .nav button.active,body[data-mifak-context="admin"] .nav button:hover{background:rgba(217,173,66,.08)!important;color:var(--text)!important}
body[data-mifak-context="admin"] .grid>div,body[data-mifak-context="admin"] .section>div,body[data-mifak-context="admin"] .table-wrap{border-color:var(--line)!important;background:var(--surface)!important}
body[data-mifak-context="admin"] th{background:var(--surface-2)!important;color:var(--text)!important}
body[data-mifak-context="admin"] td{color:var(--text)!important;border-color:var(--line)!important}

/* Legal */
body[data-mifak-context="legal"] .wrap>h1{font-size:clamp(2rem,4vw,3rem)!important;line-height:1.2!important;font-weight:600!important;color:var(--text)!important}
body[data-mifak-context="legal"] section h2{color:var(--gold)!important}
body[data-mifak-context="legal"] .note{color:var(--muted)!important}

/* LIGHT MODE: explicit contrast fixes */
html[data-theme="light"] body[data-mifak-context]{background:radial-gradient(circle at 50% -10%,rgba(218,172,61,.08),transparent 34%),var(--bg)!important;color:#151617!important}
html[data-theme="light"] body[data-mifak-context] h1,html[data-theme="light"] body[data-mifak-context] h2,html[data-theme="light"] body[data-mifak-context] h3,html[data-theme="light"] body[data-mifak-context] h4,html[data-theme="light"] body[data-mifak-context] b,html[data-theme="light"] body[data-mifak-context] strong,html[data-theme="light"] body[data-mifak-context] label{color:#151617!important}
html[data-theme="light"] body[data-mifak-context] p,html[data-theme="light"] body[data-mifak-context] small,html[data-theme="light"] body[data-mifak-context] .muted,html[data-theme="light"] body[data-mifak-context] .hero-copy p,html[data-theme="light"] body[data-mifak-context] .path-body p,html[data-theme="light"] body[data-mifak-context] .section-heading p,html[data-theme="light"] body[data-mifak-context] .form-head p,html[data-theme="light"] body[data-mifak-context] .sub{color:#62686e!important}
html[data-theme="light"] body[data-mifak-context] input:not([type="checkbox"]):not([type="radio"]),html[data-theme="light"] body[data-mifak-context] select,html[data-theme="light"] body[data-mifak-context] textarea{background:#fff!important;color:#151617!important;border-color:#d9dddf!important}
html[data-theme="light"] body[data-mifak-context] input::placeholder,html[data-theme="light"] body[data-mifak-context] textarea::placeholder{color:#81878d!important}
html[data-theme="light"] body[data-mifak-context="technician"] .phone-prefix{background:#f1f1ee!important;color:#7b5b13!important;border-color:#d9dddf!important}
html[data-theme="light"] body[data-mifak-context="admin"] td{color:#202326!important}

@media(max-width:1020px){
  .mifak-site-header-inner{flex-wrap:wrap;padding:12px 0;min-height:0}
  .mifak-site-nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .mifak-site-nav::-webkit-scrollbar{display:none}
  body[data-mifak-context="admin"] .app{grid-template-columns:1fr!important}
  body[data-mifak-context="admin"] .sidebar{min-height:auto!important}
}
@media(max-width:700px){
  .mifak-site-header-inner,.mifak-site-footer,body[data-mifak-context="customer"] .shell,body[data-mifak-context="technician"] #app,body[data-mifak-context="technician-dashboard"] .tech-app,body[data-mifak-context="admin"] #app,body[data-mifak-context="admin"] #login,body[data-mifak-context="legal"] .wrap{width:min(calc(100% - 28px),var(--max))!important}
  .mifak-site-brand img{width:164px}
  .mifak-lang-control select{min-width:82px}
  body[data-mifak-context="technician"] .hero-copy{padding:24px!important}
}
