:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --border2:#d1d5db;
  --primary:#2563eb;
  --primaryDark:#123c8c;
  --accent:#14b8a6;
  --ink:#0f172a;
  --primarySoft: rgba(37,99,235,.14);
  --dropBorder:#8bc4ff;
  --dropBg:#f9fafb;
  --dropBgActive:#eff6ff;
  --codeBg:#f1f5f9;
  --codeBorder:#c7d2fe;
  --codeText:#1e3a8a;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Black.woff2") format("woff2");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
html,body{height:100%}
body{
  background:
    linear-gradient(135deg, rgba(20,184,166,.12) 0 18%, transparent 18% 100%),
    linear-gradient(225deg, rgba(37,99,235,.12) 0 16%, transparent 16% 100%),
    linear-gradient(180deg, #f2f8ff 0%, var(--bg) 360px, #ffffff 100%);
  color:var(--text);
  font-family:"Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height:100%;
}
a{color:var(--primary)}
.uk-alert{
  position:relative;
  padding:16px 18px 16px 48px;
  color:#334155;
  background:#fff;
  border:1px solid rgba(203,213,225,.95);
  border-inline-start:4px solid var(--primary);
  border-radius:16px;
  box-shadow:0 16px 38px rgba(15,23,42,.1);
  line-height:1.9;
}
.uk-alert p{padding-inline-end:0}
.uk-alert-close{
  position:absolute;
  top:50%;
  left:14px;
  right:auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:50%;
  transform:translateY(-50%);
  opacity:1;
}
.uk-alert-close:hover,
.uk-alert-close:focus{
  color:#0f172a;
  background:#e2e8f0;
  text-decoration:none;
  outline:none;
}
.uk-alert-success{border-inline-start-color:#16a34a;background:#f0fdf4;color:#14532d}
.uk-alert-danger{border-inline-start-color:#dc2626;background:#fef2f2;color:#7f1d1d}
.uk-alert-warning{border-inline-start-color:#f59e0b;background:#fffbeb;color:#78350f}
.site-header{
  position:relative;
  z-index:100;
  padding:24px 0 0;
  color:var(--ink);
}
.site-nav{
  position:relative;
  z-index:110;
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto minmax(160px, 1fr);
  align-items:center;
  gap:14px;
  padding:12px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(226,232,240,.95);
  border-radius:26px;
  box-shadow:0 18px 55px rgba(15,23,42,.1);
  backdrop-filter:blur(18px);
}
.brand{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--ink);text-decoration:none}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  color:#fff;
  background:var(--ink);
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 24px rgba(15,23,42,.18);
}
.brand-name{
  display:block;
  color:var(--ink);
  font-size:24px;
  font-weight:800;
  line-height:1;
}
.brand-subtitle{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.4px;
}
.nav-links{
  display:flex;
  align-items:center;
  justify-self:center;
  gap:4px;
  padding:4px;
  background:#f1f5f9;
  border:1px solid rgba(226,232,240,.9);
  border-radius:999px;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:0 13px;
  color:#334155;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}
.nav-link:hover,
.nav-link.is-active{
  color:#fff;
  background:linear-gradient(135deg, var(--ink), #1d4ed8);
  text-decoration:none;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
}
.header-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  gap:7px;
  min-height:42px;
  padding:0 16px;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 14px 28px rgba(37,99,235,.2);
}
.header-action:hover{color:#fff;text-decoration:none}
.header-action:focus{outline:2px solid rgba(20,184,166,.32);outline-offset:3px}
.user-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(203,213,225,.95);
  border-radius:999px;
  font-weight:900;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
  cursor:default;
  transition:.2s ease;
}
.user-menu:hover,
.user-menu:focus{
  transform:translateY(-1px);
  outline:2px solid rgba(37,99,235,.18);
  outline-offset:3px;
}
.user-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  border-radius:50%;
}
.user-name{
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-hint{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  z-index:999;
  min-width:260px;
  padding:12px;
  color:#334155;
  background:#fff;
  border:1px solid rgba(203,213,225,.95);
  border-radius:18px;
  box-shadow:0 20px 45px rgba(15,23,42,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:.16s ease;
}
.user-menu:hover .user-hint,
.user-menu:focus .user-hint,
.user-menu:focus-within .user-hint{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.user-hint:before{
  content:"";
  position:absolute;
  top:-7px;
  left:24px;
  width:12px;
  height:12px;
  background:#fff;
  border-top:1px solid rgba(203,213,225,.95);
  border-left:1px solid rgba(203,213,225,.95);
  transform:rotate(45deg);
}
.user-hint-row{
  display:grid;
  gap:4px;
  padding:8px;
  border-radius:12px;
}
.user-hint-row + .user-hint-row{border-top:1px solid #f1f5f9}
.user-hint-row span{color:var(--muted);font-size:12px;font-weight:800}
.user-hint-row strong{direction:ltr;text-align:left;color:var(--ink);font-size:13px;word-break:break-word}
.user-logout{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:8px;
  min-height:38px;
  color:#b91c1c;
  background:#fef2f2;
  border:1px solid #fee2e2;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}
.user-logout:hover,
.user-logout:focus{
  color:#fff;
  background:#dc2626;
  border-color:#dc2626;
  text-decoration:none;
  outline:none;
}
.nav-link:focus{outline:2px solid rgba(37,99,235,.24);outline-offset:2px}
.brand:focus{outline:2px solid rgba(37,99,235,.24);outline-offset:4px;border-radius:16px}
.brand:hover .brand-mark{background:linear-gradient(135deg, var(--primary), var(--accent))}
.brand,
.brand-mark,
.nav-link,
.header-action,
.user-menu{transition:.2s ease}
.brand:hover,
.nav-link:hover,
.header-action:hover,
.user-menu:hover{transform:translateY(-1px)}
.brand:hover .brand-name{color:var(--primary)}
.brand:hover .brand-subtitle{color:#0f766e}
.site-nav:before{
  content:"";
  position:absolute;
  top:50%;
  inset-inline-end:22px;
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 0 7px rgba(20,184,166,.1);
  transform:translateY(-50%);
}
.hero-panel{
  margin-top:16px;
  padding:34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,246,255,.88)),
    linear-gradient(135deg, rgba(37,99,235,.2), rgba(20,184,166,.18));
  border:1px solid rgba(226,232,240,.95);
  border-radius:30px;
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  overflow:hidden;
  position:relative;
}
.hero-panel:after{
  content:"";
  position:absolute;
  left:26px;
  bottom:-46px;
  width:220px;
  height:220px;
  border:30px solid rgba(37,99,235,.06);
  border-radius:50%;
}
.hero-panel h1{
  position:relative;
  margin:10px 0 0;
  color:var(--ink);
  font-size:clamp(28px, 4vw, 44px);
  font-weight:900;
  line-height:1.25;
}
.hero-panel p{
  position:relative;
  max-width:650px;
  margin:12px 0 0;
  color:#475569;
  font-size:16px;
  line-height:1.9;
}
.hero-kicker{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  color:#0f766e;
  background:rgba(20,184,166,.12);
  border:1px solid rgba(20,184,166,.2);
  border-radius:999px;
  font-size:13px;
  font-weight:800;
}
.hero-stats{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2, minmax(108px, 1fr));
  gap:10px;
}
.hero-stat{
  min-width:108px;
  padding:14px;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.hero-stat span{color:var(--primary)}
.hero-stat strong,
.hero-stat small{display:block}
.hero-stat strong{margin-top:8px;font-size:18px;font-weight:900}
.hero-stat small{margin-top:3px;color:var(--muted);font-size:12px}
.site-main{padding:10px 0 34px}
.page-content{padding-top:0;padding-bottom:0}
.card{
  background:var(--card);
  border-radius:20px;
  box-shadow:0 18px 45px rgba(15,23,42,.1);
  border:1px solid var(--border);
  backdrop-filter:none;
}
.muted{color:var(--muted)}
.btn{border-radius:14px;font-weight:700}
.uk-button-primary{
  background:linear-gradient(135deg, var(--primary), #0891b2) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.22);
}
.uk-input{
  background:#fff !important;
  border:1px solid var(--border2) !important;
  color:#111827 !important;
  border-radius:12px !important;
}
.uk-input:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px var(--primarySoft) !important;
}
.dropzone{
  background:var(--dropBg);
  border:2px dashed var(--dropBorder);
  border-radius:16px;
  transition:.2s;
}
.dropzone.dragover{
  background:var(--dropBgActive);
  border-color:var(--primary);
}
.uk-progress{
  height:10px;
  border-radius:999px;
  background:var(--border);
}
.uk-progress::-webkit-progress-value{
  background:var(--primary);
  border-radius:999px;
}
.uk-progress::-moz-progress-bar{
  background:var(--primary);
  border-radius:999px;
}
.code-box{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:20px;
  letter-spacing:2px;
  background:var(--codeBg);
  border:1px dashed var(--codeBorder);
  padding:10px 14px;
  border-radius:12px;
  color:var(--codeText);
}
.info-box{
  background:var(--codeBg);
  border:1px solid var(--border);
  border-radius:14px;
}
.download-list{
  display:grid;
  gap:10px;
}
.download-list-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-radius:14px;
  text-decoration:none;
  transition:.2s ease;
}
.download-list-item:hover,
.download-list-item:focus{
  color:var(--ink);
  border-color:rgba(37,99,235,.45);
  box-shadow:0 12px 28px rgba(15,23,42,.1);
  text-decoration:none;
  transform:translateY(-1px);
  outline:none;
}
.download-list-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  border-radius:12px;
}
.download-list-main{
  display:grid;
  gap:4px;
  min-width:0;
}
.download-list-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:900;
}
.download-list-main small,
.download-list-meta{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.download-list-meta{white-space:nowrap;direction:ltr}
.download-detail-meta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.download-detail-meta > div{
  padding:10px 12px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-radius:12px;
}
.download-detail-meta strong{direction:ltr;display:block;text-align:left;color:var(--ink)}
.login-shell{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(260px, .65fr);
  gap:18px;
  align-items:stretch;
}
.login-card,
.login-side{
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 18px 45px rgba(15,23,42,.1);
}
.login-card{padding:32px}
.login-card h2{
  margin:12px 0 8px;
  color:var(--ink);
  font-size:28px;
  font-weight:900;
}
.login-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:0 12px;
  color:#0f766e;
  background:rgba(20,184,166,.12);
  border:1px solid rgba(20,184,166,.2);
  border-radius:999px;
  font-weight:800;
}
.google-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:52px;
  color:var(--ink);
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:16px;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.google-button:hover{
  color:var(--primary);
  border-color:#93c5fd;
  text-decoration:none;
  transform:translateY(-1px);
}
.google-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  color:#fff;
  background:linear-gradient(135deg, #4285f4, #34a853 45%, #fbbc05 70%, #ea4335);
  border-radius:50%;
  font-family:Arial, sans-serif;
  font-weight:700;
}
.login-config-note{
  display:grid;
  gap:6px;
  padding:14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:16px;
  color:#9a3412;
}
.login-config-note small{direction:ltr;text-align:left;color:#c2410c;word-break:break-all}
.login-footnote{margin-top:14px;color:var(--muted);font-size:13px;text-align:center}
.auth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.auth-divider:before,
.auth-divider:after{
  content:"";
  height:1px;
  flex:1;
  background:var(--border);
}
.auth-divider span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:28px;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:999px;
}
.login-side{
  display:grid;
  gap:12px;
  padding:18px;
  background:linear-gradient(180deg, #ffffff, #f8fafc);
}
.login-side-item{
  padding:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
}
.login-side-item span{color:var(--primary)}
.login-side-item strong,
.login-side-item small{display:block}
.login-side-item strong{margin-top:10px;color:var(--ink);font-weight:900}
.login-side-item small{margin-top:6px;color:var(--muted);line-height:1.8}
.user-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:18px;
}
.user-chip img{width:46px;height:46px;border-radius:50%}
.user-chip strong,
.user-chip small{display:block}
.user-chip small{margin-top:3px;color:var(--muted);direction:ltr;text-align:right}
.rules-shell h2{
  margin:8px 0 0;
  color:var(--ink);
  font-size:28px;
  font-weight:900;
}
.rules-intro{max-width:760px;line-height:2}
.rules-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.rule-card{
  padding:18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 12px 32px rgba(15,23,42,.07);
}
.rule-card > span{color:var(--primary)}
.rule-card h3{
  margin:12px 0 6px;
  color:var(--ink);
  font-size:18px;
  font-weight:900;
}
.rule-card p{
  margin:0;
  color:var(--muted);
  line-height:1.9;
  font-size:14px;
}
.rules-note{
  display:flex;
  gap:12px;
  padding:16px;
  color:#075985;
  background:#f0f9ff;
  border:1px solid #bae6fd;
  border-radius:18px;
}
.rules-note strong{display:block;font-weight:900}
.rules-note p{margin:4px 0 0;line-height:1.9}
.site-footer{
  padding:24px 0 32px;
  color:#475569;
  border-top:1px solid rgba(226,232,240,.9);
  background:rgba(255,255,255,.68);
}
.site-footer .uk-container{gap:16px}
.footer-title{
  color:var(--ink);
  font-size:18px;
  font-weight:850;
}
.footer-text{margin-top:4px;font-size:13px}
.footer-links{display:flex;gap:16px;font-weight:700}
.footer-links a{color:#334155;text-decoration:none}
.footer-links a:hover{color:var(--primary)}
@media (max-width: 640px){
  .site-header{padding-top:14px}
  .site-nav{grid-template-columns:1fr;justify-items:stretch;align-items:stretch;border-radius:22px}
  .site-nav:before{display:none}
  .brand{width:100%}
  .nav-links{width:100%;justify-content:space-between;overflow:auto}
  .nav-link{padding:0 10px;white-space:nowrap}
  .header-action,.user-menu{width:100%}
  .user-hint{left:50%;right:auto;transform:translate(-50%, -6px);min-width:min(280px, 92vw)}
  .user-menu:hover .user-hint,
  .user-menu:focus .user-hint,
  .user-menu:focus-within .user-hint{transform:translate(-50%, 0)}
  .hero-panel{padding:22px;border-radius:22px}
  .hero-stats{grid-template-columns:1fr 1fr;margin-top:14px}
  .rules-grid{grid-template-columns:1fr}
  .login-shell{grid-template-columns:1fr}
  .login-card{padding:22px}
  .site-footer .uk-container{display:block}
  .footer-links{margin-top:14px}
}