/* Keep the upstream Vue form and its real validation, captcha and login. */
:root { --portal-blue:#368cf5; }
html[data-portal-auth] body {
  background: radial-gradient(ellipse at 14% 12%, #cce5ff 0, transparent 42%),
    radial-gradient(ellipse at 88% 88%, #d7e5ff 0, transparent 44%),
    linear-gradient(140deg,#f1f8ff,#f8fbff 48%,#eaf1ff) !important;
  min-height:100vh; margin:0;
}
html[data-portal-auth] #app > .el-container {
  min-height:100vh!important;height:auto!important; background:transparent!important;
}
html[data-portal-auth] #app > .el-container > .el-main {
  min-height:100vh; padding:32px 20px!important; align-items:center!important;
  justify-content:center!important; overflow:visible!important;
}
html[data-portal-auth] #app > .el-container > .el-main > .el-row {
  margin:0!important; width:100%!important; justify-content:center!important;
}
html[data-portal-auth] #app > .el-container > .el-main > .el-row > .el-col {
  display:none!important;
}
html[data-portal-auth] #app > .el-container > .el-main > .el-row > .el-col:has(.el-form) {
  display:block!important;width:min(100%,420px)!important;padding:0!important;
  float:none!important;
}
html[data-portal-auth] .el-card:has(.el-form) {
  width:100%!important;height:auto!important;overflow:visible!important;
  border:1px solid rgba(255,255,255,.85)!important;border-radius:18px!important;
  box-shadow:0 24px 80px #2b5b9d16,0 4px 16px #2b5b9d08!important;
  background:rgba(255,255,255,.98)!important;
}
html[data-portal-auth] .el-card:has(.el-form) > .el-card__body { padding:38px 36px!important; }
html[data-portal-auth] .el-form {
  width:100%!important;left:0!important;margin:0!important;position:relative!important;
}
html[data-portal-auth] .el-form-item { margin-bottom:22px!important; }
html[data-portal-auth] .el-form-item:first-child span {font-size:24px!important;color:#172536;}
html[data-portal-auth] .el-input__inner {
  height:52px!important;line-height:52px!important;border-radius:5px!important;
  border-color:#dce3ee!important;background:#fff!important;font-size:15px!important;
}
html[data-portal-auth] .el-input__inner:focus { border-color:var(--portal-blue)!important; }
html[data-portal-auth] .el-input__icon {line-height:52px!important;}
html[data-portal-auth] .el-input-group__append {padding:0!important;background:white!important;}
html[data-portal-auth] .el-input-group__append img {
  display:block;width:94px!important;height:50px!important;object-fit:fill;
}
html[data-portal-auth] .el-form > .el-button--primary {
  height:50px!important;margin-top:28px!important;border-radius:5px!important;
  background:var(--portal-blue)!important;border-color:var(--portal-blue)!important;
  font-size:15px!important;
}
html[data-portal-auth] .el-form > a:has(.el-image),
html[data-portal-auth] .el-footer {display:none!important;}

/* The shell appears only after the original authenticated layout mounts. */
#portal-shell {display:none;font-family:Inter,"Microsoft YaHei",sans-serif;color:#1e293b;}
html[data-portal-workspace] #portal-shell {display:block;}
html[data-portal-workspace] body {background:#f5f7fb!important;}
html[data-portal-workspace] .app-wrapper > .sidebar-container,
html[data-portal-workspace] .app-wrapper > .drawer-bg,
html[data-portal-workspace] .main-container .navbar,
html[data-portal-workspace] .main-container .tags-view-container {display:none!important;}
html[data-portal-workspace] #app .main-container {margin-left:220px!important;padding-top:80px!important;}
html[data-portal-workspace] #app .fixed-header {width:auto!important;}
html[data-portal-workspace] #app .navbar[data-portal-menu-open] {
  position:fixed;top:82px;right:24px;width:320px!important;z-index:1010;
  display:block!important;box-shadow:0 8px 28px #233c6420;border-radius:10px;
}
html[data-portal-workspace] .app-main {padding-top:0!important;min-height:calc(100vh - 80px)!important;}
html[data-portal-workspace] .app-main a[href="/order"],
html[data-portal-workspace] .app-main a[href="/recharge"],
[data-portal-hide] {display:none!important;}
#portal-shell aside {position:fixed;inset:0 auto 0 0;width:220px;z-index:1002;background:#fff;
  border-right:1px solid #e6eaf1;display:flex;flex-direction:column;padding:30px 18px;box-sizing:border-box;}
#portal-shell .portal-brand {font-size:20px;font-weight:700;padding:0 12px 35px;display:flex;align-items:center;gap:10px;}
#portal-shell .portal-logo {padding:8px 10px;background:#3467eb;color:white;border-radius:11px;}
#portal-shell nav {display:grid;gap:8px;}
#portal-shell a {text-decoration:none;color:#64748b;font-size:15px;padding:15px;border-radius:10px;}
#portal-shell nav a[aria-current] {background:#edf3ff;color:#3266e5;font-weight:600;}
#portal-shell .portal-download {margin-top:auto;background:#f5f7fb;font-size:14px;}
#portal-shell a.portal-download {
  display:flex;align-items:center;gap:10px;padding:13px 12px;
  border:1px solid #d3eaff;border-radius:14px;
  background:linear-gradient(120deg,#f0f9ff,#e5f2ff);color:#167ab4;
  box-shadow:0 4px 12px #168bd90a;transition:background .18s,box-shadow .18s;
}
#portal-shell a.portal-download:hover {background:#dff1ff;box-shadow:0 6px 18px #168bd91a;}
.portal-telegram-icon {width:36px;height:36px;flex-shrink:0;border-radius:50%;display:grid;
  place-items:center;background:linear-gradient(145deg,#39b8ef,#1595d2);color:#fff;}
.portal-telegram-icon svg {width:23px;height:23px;}
.portal-contact-label {display:grid;gap:3px;}
.portal-contact-label strong {font-size:14px;font-weight:600;white-space:nowrap;}
.portal-contact-label small {font-size:11px;color:#6b9dbb;letter-spacing:.4px;}
.portal-contact-arrow {margin-left:auto;color:#70a7c9;font-size:17px;}
.portal-quick-card .el-card__body {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;
}
.portal-quick-card .el-card__body > .el-row,
.portal-quick-card .el-card__body > .el-row > .el-col:not([data-portal-hide]) {display:contents!important;}
.portal-quick-card .portal-quick-action {min-width:0;align-self:stretch;}
.portal-quick-card a.portal-quick-action {display:block;}
.portal-quick-card .portal-quick-action.el-button,
.portal-quick-card a.portal-quick-action > .el-button {
  width:100%;height:42px;padding:0 5px!important;margin:0!important;
  font-size:13px;white-space:nowrap;border-radius:7px;
}
.portal-quick-card .portal-quick-download-row {
  grid-column:1 / -1;order:4;display:flex;justify-content:center;margin-top:0!important;
  padding-top:16px;border-top:1px solid #eef1f6;
}
.portal-quick-card a.portal-quick-download {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:150px;height:42px;padding:0 24px;border-radius:8px;
  background:#358cf5;border-color:#358cf5;box-shadow:0 4px 10px #358cf522;
  text-decoration:none;font-size:14px;
}
.portal-quick-card a.portal-quick-download::before {content:'↓';font-size:18px;}
#portal-shell header {position:fixed;top:0;left:220px;right:0;height:80px;z-index:1001;
  background:#fff;border-bottom:1px solid #e6eaf1;padding:0 30px;display:flex;align-items:center;justify-content:space-between;}
#portal-shell h1 {font-size:21px;margin:0;}
#portal-shell button {border:1px solid #dce3ee;border-radius:8px;background:#fff;padding:8px 14px;cursor:pointer;color:#64748b;}
#portal-shell button:focus-visible,#portal-shell a:focus-visible {outline:3px solid #99b9ff;outline-offset:2px;}
@media(max-width:700px) {
  html[data-portal-auth] .el-card:has(.el-form) > .el-card__body {padding:30px 24px!important;}
  #portal-shell aside {inset:0 0 auto;width:100%;height:70px;padding:10px 14px;flex-direction:row;align-items:center;gap:12px;}
  #portal-shell .portal-brand {display:none;} #portal-shell nav {display:flex;gap:4px;}
  #portal-shell a {padding:12px 10px;font-size:14px;} #portal-shell .portal-download {margin:0 0 0 auto;padding:10px;}
  #portal-shell a.portal-download {gap:7px;padding:7px 9px;}
  .portal-telegram-icon {width:29px;height:29px;}
  .portal-contact-label strong {font-size:12px;}
  .portal-contact-label small {font-size:10px;}
  .portal-contact-arrow {display:none;}
  #portal-shell header {top:70px;left:0;height:60px;padding:0 20px;}
  html[data-portal-workspace] #app .main-container {margin-left:0!important;padding-top:130px!important;}
  html[data-portal-workspace] #app .navbar[data-portal-menu-open] {top:132px;right:12px;width:calc(100% - 24px)!important;}
}