/* ==========================================================================
   xiaoli cat — Sakura-style UI layer
   pure CSS override on top of the existing panel front-end (no rebuild needed)
   ========================================================================== */

:root{
  --sk-red:#B52121;
  --sk-red-600:#9E1B1B;
  --sk-red-700:#841616;
  --sk-red-soft:#FBD8E2;
  --sk-red-ghost:rgba(181,33,33,.08);
  --sk-bg:#FAFAFB;
  --sk-card:#FFFFFF;
  --sk-text:#11181C;
  --sk-muted:#8A8F98;
  --sk-line:#EFEFF2;
  --sk-radius:16px;
  --sk-radius-sm:10px;
  --sk-shadow:0 1px 2px rgba(17,24,28,.04),0 6px 20px rgba(17,24,28,.05);
  --sk-shadow-hover:0 4px 10px rgba(17,24,28,.06),0 14px 34px rgba(17,24,28,.09);
  --sk-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------------------------------------------------------- base ---- */
html,body{background:var(--sk-bg) !important;}
body{font-family:var(--sk-font); color:var(--sk-text);}
#app *{ -webkit-font-smoothing:antialiased; }

/* page background everywhere (the app uses a hardcoded #f5f6fb) */
#app [class*="f5f6fb"],
#app .n-layout,
#app .n-layout-scroll-container,
#app section[class*="bg-"]{ background:var(--sk-bg) !important; }
#app .n-layout-sider,
#app .n-layout-sider .n-scrollbar,
#app .n-layout-sider__border{ background:#fff !important; }

/* --------------------------------------------------------- layout / nav --- */
@media (min-width: 821px){
  #app .n-layout-sider{ display:none !important; }
  #app .n-layout-toggle-button{ display:none !important; }
}
#app article{ width:100% !important; }

#app header{
  height:60px !important;
  padding:0 20px !important;
  background:#fff !important;
  position:sticky; top:0; z-index:60;
  box-shadow:0 1px 0 var(--sk-line);
  backdrop-filter:saturate(180%) blur(8px);
  display:flex; align-items:center; gap:8px;
}
#app header > div:first-child{ order:0; }
#app header nav.n-breadcrumb{ display:none !important; }
#app header > div:last-child{ margin-left:auto; display:flex; align-items:center; }
#app header .n-icon{ color:#5A6068; }

/* brand */
.sk-brand{ display:flex; align-items:center; gap:9px; margin-right:26px; font-weight:800; font-size:17px; letter-spacing:.2px; color:var(--sk-text); white-space:nowrap; }
.sk-brand__mark{ width:26px; height:26px; border-radius:9px; background:linear-gradient(135deg,#C92B2B,#8F1616); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(181,33,33,.28); }
.sk-brand__mark svg{ width:15px; height:15px; color:#fff; }
.sk-brand__dot{ color:var(--sk-red); }

/* desktop horizontal menu */
.sk-topnav{ display:flex; align-items:center; gap:4px; }
.sk-topnav a{
  position:relative; padding:8px 14px; border-radius:9px;
  font-size:14.5px; font-weight:600; color:#4A5058; text-decoration:none;
  transition:color .15s ease,background .15s ease;
}
.sk-topnav a:hover{ color:var(--sk-red); background:var(--sk-red-ghost); }
.sk-topnav a.is-active{ color:var(--sk-red); }
.sk-topnav a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-2px; height:2.5px;
  border-radius:3px; background:var(--sk-red);
}

/* mobile bottom tab bar */
.sk-tabbar{ display:none; }
@media (max-width: 820px){
  .sk-topnav{ display:none !important; }
  #app header{ height:54px !important; padding:0 12px !important; }
  .sk-brand{ margin-right:auto; font-size:16px; }
  .sk-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9999;
    background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
    border-top:1px solid var(--sk-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 16px rgba(17,24,28,.05);
  }
  .sk-tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:4px 0 2px; text-decoration:none; color:#9AA0A8; font-size:11px; font-weight:600;
    -webkit-tap-highlight-color:transparent;
  }
  .sk-tabbar a svg{ width:21px; height:21px; }
  .sk-tabbar a.is-active{ color:var(--sk-red); }
  #app section[class*="cus-scroll-y"]{ padding-bottom:78px !important; }
}

/* ------------------------------------------------------------- surfaces --- */
#app .n-card{
  border-radius:var(--sk-radius) !important;
  border:none !important;
  background:var(--sk-card) !important;
  box-shadow:var(--sk-shadow) !important;
  overflow:hidden;
}
#app .n-card.n-card--hoverable:hover{ box-shadow:var(--sk-shadow-hover) !important; transform:translateY(-2px); }
#app .n-card{ transition:box-shadow .18s ease, transform .18s ease; }
#app .n-card-header{
  border-bottom:1px solid var(--sk-line) !important;
  padding:16px 20px !important;
}
#app .n-card-header__main{ font-size:15.5px !important; font-weight:800 !important; color:var(--sk-text) !important; }
#app .n-card__content{ padding:18px 20px !important; }
#app .n-card__content[style*="padding: 0px"]{ padding:0 !important; }
#app .n-card__action{ background:#fff !important; border-top:1px solid var(--sk-line) !important; padding:14px 20px !important; }

/* -------------------------------------------------------------- buttons --- */
#app .n-button{ border-radius:var(--sk-radius-sm) !important; font-weight:700 !important; transition:all .16s ease; }
#app .n-button__content{ font-weight:inherit; }

/* primary */
#app .n-button--primary-type{
  --n-color:var(--sk-red) !important;
  --n-color-hover:#C22A2A !important;
  --n-color-pressed:var(--sk-red-700) !important;
  --n-color-focus:#C22A2A !important;
  --n-color-disabled:rgba(181,33,33,.45) !important;
  --n-text-color:#fff !important;
  --n-text-color-hover:#fff !important;
  --n-text-color-pressed:#fff !important;
  --n-text-color-focus:#fff !important;
  --n-text-color-disabled:#fff !important;
  --n-border:none !important;
  --n-border-hover:none !important;
  --n-border-pressed:none !important;
  --n-border-focus:none !important;
  --n-ripple-color:rgba(255,255,255,.28) !important;
  min-height:40px;
  box-shadow:0 4px 14px rgba(181,33,33,.22);
}
/* pink secondary (competitor's "购买订阅" style) */
#app .n-button--primary-type.n-button--secondary{
  --n-color:var(--sk-red-soft) !important;
  --n-color-hover:#F9CAD8 !important;
  --n-color-pressed:#F6BCCD !important;
  --n-color-focus:#F9CAD8 !important;
  --n-text-color:var(--sk-red) !important;
  --n-text-color-hover:var(--sk-red) !important;
  --n-text-color-pressed:var(--sk-red) !important;
  --n-text-color-focus:var(--sk-red) !important;
  --n-border:none !important;
  box-shadow:none;
}
/* default / ghost buttons */
#app .n-button--default-type{
  --n-color:#F4F4F6 !important;
  --n-color-hover:#ECECEF !important;
  --n-color-pressed:#E4E4E8 !important;
  --n-color-focus:#ECECEF !important;
  --n-text-color:#3D434A !important;
  --n-text-color-hover:var(--sk-red) !important;
  --n-border:none !important;
  --n-border-hover:none !important;
  --n-border-pressed:none !important;
  box-shadow:none;
  min-height:38px;
}

/* ---------------------------------------------------------------- input --- */
#app .n-input{
  --n-border-radius:10px !important;
  --n-color:#fff !important;
  --n-border:1px solid #E6E6EA !important;
  --n-border-hover:1px solid #D8D8DE !important;
  --n-border-focus:1px solid var(--sk-red) !important;
  --n-caret-color:var(--sk-red) !important;
  --n-height:42px !important;
  --n-padding-left:13px !important;
}
#app .n-input .n-input__border,
#app .n-input .n-input__state-border{ box-shadow:none !important; }
#app .n-input.n-input--focus{ box-shadow:0 0 0 3px rgba(181,33,33,.10); }

/* radio / segmented */
#app .n-radio-button{
  --n-button-border-color:#E8E8EC !important;
  --n-button-border-color-active:var(--sk-red) !important;
  --n-button-text-color-active:var(--sk-red) !important;
  --n-button-text-color-hover:var(--sk-red) !important;
  --n-button-box-shadow-focus:inset 0 0 0 1px var(--sk-red),0 0 0 2px rgba(181,33,33,.15) !important;
}
#app .n-radio-group{ border-radius:10px !important; overflow:hidden; }
#app .n-radio-button__state-border{ border-color:var(--sk-red) !important; }

/* -------------------------------------------------------------- progress -- */
#app .n-progress{
  --n-fill-color:var(--sk-red) !important;
  --n-rail-color:#F0EFF2 !important;
  --n-rail-height:8px !important;
  --n-icon-color:var(--sk-red) !important;
}
#app .n-progress-graph-line-fill{
  background:linear-gradient(90deg,#C93030,#8F1616) !important;
  border-radius:8px !important;
}
#app .n-progress-graph-line-rail{ border-radius:8px !important; }
#app .n-progress-icon{ color:var(--sk-red) !important; font-weight:800 !important; }

/* ----------------------------------------------------------------- menu --- */
#app .n-menu{
  --n-item-text-color-active:var(--sk-red) !important;
  --n-item-text-color-active-hover:var(--sk-red) !important;
  --n-item-icon-color-active:var(--sk-red) !important;
  --n-item-icon-color-active-hover:var(--sk-red) !important;
  --n-item-text-color-child-active:var(--sk-red) !important;
  --n-item-icon-color-child-active:var(--sk-red) !important;
  --n-item-text-color-hover:var(--sk-red) !important;
  --n-group-text-color:#A3A8B0 !important;
}
#app .n-menu-item-content--selected::before{ background:var(--sk-red-ghost) !important; border-radius:10px !important; }
#app .n-menu-item-content--selected .n-menu-item-content-header{ font-weight:800 !important; }
#app .n-menu-item-content{ border-radius:10px !important; }

/* ----------------------------------------------------------------- card --- */
#app .n-tag{
  --n-border-radius:8px !important;
  font-weight:700 !important;
}
#app .n-tag--success-type{
  --n-color:rgba(24,160,88,.10) !important;
  --n-text-color:#12854A !important;
  --n-border:none !important;
}

/* plan / pricing cards ---------------------------------------------------- */
#app .card-container{ display:flex; flex-wrap:wrap; gap:16px; }
#app .card-item{ flex:1 1 300px; max-width:420px; }
#app .card-item .n-card{ height:100%; display:flex; flex-direction:column; }
#app .card-item .n-card-header{ display:block !important; }
#app .card-item .n-card-header__main{
  font-size:17px !important; font-weight:800 !important;
  display:flex; align-items:center; gap:8px;
}
#app .card-item .n-card-header__main::before{
  content:""; width:6px; height:18px; border-radius:4px;
  background:linear-gradient(180deg,#C93030,#8F1616); display:inline-block;
}
#app .card-item .n-card-header__extra{ margin-top:10px; }
#app .card-item .n-card-header__extra .text-3xl{ font-size:30px !important; font-weight:800 !important; color:var(--sk-red) !important; letter-spacing:-.5px; }
#app .card-item .n-card__content{ flex:1; }
#app .card-item .markdown-body p{ margin:0; color:#5C636B; font-size:13.5px; line-height:2; }
#app .card-item .n-card__action .n-button{ width:100%; }
#app .card-item .n-card__action{ background:#fff !important; }

/* the transformed spec rows (injected by sakura.js) */
.sk-spec{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px dashed #ECECF0; font-size:13.5px; }
.sk-spec:last-child{ border-bottom:none; }
.sk-spec__k{ color:#9AA0A8; white-space:nowrap; }
.sk-spec__v{ color:var(--sk-text); font-weight:700; text-align:right; }

/* dashboard -------------------------------------------------------------- */
#app .n-list{ --n-border-radius:0px !important; }
#app .n-list-item{ padding:16px 20px !important; }
#app .n-list-item:hover{ background:#FAFAFB !important; }
#app .n-list-item .text-base{ font-weight:700; font-size:14.5px !important; }
#app .n-list-item .text-sm{ color:var(--sk-muted) !important; margin-top:2px; }
#app .n-list-item__divider{ display:none !important; }
#app .n-list--show-divider .n-list-item{ border-bottom:1px solid var(--sk-line); }
#app .n-list--show-divider .n-list-item:last-child{ border-bottom:none; }

/* quick-entry grid on dashboard (matches competitor's 2x2 cards) */
@media (min-width: 821px){
  #app .n-card .n-list.n-list--clickable{
    display:grid !important; grid-template-columns:1fr 1fr; column-gap:0;
  }
  #app .n-card .n-list.n-list--clickable .n-list-item:nth-child(odd){ border-right:1px solid var(--sk-line); }
  #app .n-card .n-list.n-list--clickable .n-list-item:nth-last-child(-n+2){ border-bottom:none; }
}

/* login / auth page ------------------------------------------------------ */
html body #app .n-config-provider > div.wh-full.items-center.justify-center{
  background-color:#8E1717 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 44px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 176px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 176px),
    radial-gradient(900px 460px at 50% -6%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%),
    radial-gradient(700px 520px at 100% 112%, rgba(0,0,0,.30), rgba(0,0,0,0) 62%),
    linear-gradient(158deg,#6E1010 0%,#951919 42%,#B52121 100%) !important;
  position:relative; overflow:hidden;
}
html body #app .n-config-provider > div.wh-full.items-center.justify-center > .n-card{
  position:relative; z-index:2;
  border-radius:20px !important;
  padding:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.30) !important;
  max-width:430px; width:calc(100% - 32px);
}
html body #app .n-config-provider > div.wh-full.items-center.justify-center > .n-card h1{ font-weight:800 !important; letter-spacing:-.5px; }
html body #app .n-config-provider > div.wh-full.items-center.justify-center > .n-card h5{ color:#8A8F98 !important; margin-top:6px; }
html body #app .n-config-provider > div.wh-full.items-center.justify-center > .n-card .n-button{ width:100%; min-height:44px; }
html body #app .n-config-provider > div.wh-full.items-center.justify-center > .n-card .n-input{
  --n-border-focus:1px solid rgba(181,33,33,.55) !important;
  --n-box-shadow-focus:0 0 0 3px rgba(181,33,33,.10) !important;
}

/* knowledge base --------------------------------------------------------- */
#app .markdown-body{ color:#3D434A; line-height:1.85; }
#app .markdown-body h1,#app .markdown-body h2,#app .markdown-body h3{ font-weight:800; color:var(--sk-text); }
#app .markdown-body a{ color:var(--sk-red); }
#app .markdown-body img{ border-radius:12px; }

/* tables inside content */
#app .n-data-table{ --n-border-radius:12px !important; }
#app .n-data-table th{ background:#FAFAFB !important; font-weight:800 !important; }

/* scrollbar */
#app ::-webkit-scrollbar{ width:8px; height:8px; }
#app ::-webkit-scrollbar-thumb{ background:#DEDEE4; border-radius:8px; }
#app ::-webkit-scrollbar-thumb:hover{ background:#C9C9D2; }

/* footer note (injected) */
.sk-footer{
  text-align:center; color:#A8ADB5; font-size:12px; padding:24px 12px 28px;
}

/* dark mode keeps readable (panel has its own toggle) */
html.dark .sk-brand,html.dark .sk-topnav a{ color:#E6E8EB; }
html.dark .sk-tabbar,html.dark #app header{ background:#161618 !important; }

/* plan card spec lines (injected) */
.sk-line{ display:flex; align-items:flex-start; gap:9px; padding:7px 0; font-size:13.5px; color:#5C636B; line-height:1.55; }
.sk-line + .sk-line{ border-top:1px dashed #F0F0F4; }
.sk-dot{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--sk-red); opacity:.75; margin-top:7px; }

/* plan card CTA — solid brand red, full width (matches competitor) */
#app .card-item .n-card__action .n-button,
#app .card-item .n-card__action .n-button.n-button--secondary{
  --n-color:var(--sk-red) !important;
  --n-color-hover:#C22A2A !important;
  --n-color-pressed:var(--sk-red-700) !important;
  --n-color-focus:#C22A2A !important;
  --n-text-color:#fff !important;
  --n-text-color-hover:#fff !important;
  --n-text-color-pressed:#fff !important;
  --n-text-color-focus:#fff !important;
  --n-border:none !important;
  width:100%; min-height:42px; border-radius:11px !important;
  box-shadow:0 6px 16px rgba(181,33,33,.22);
}
#app .card-item .n-card__action .n-button:hover{ transform:translateY(-1px); }

/* mobile: keep content clear of the tab bar */
@media (max-width: 820px){
  #app article > section{ padding-bottom:74px !important; }
  #app .n-card{ border-radius:14px !important; }
  #app .n-card__content{ padding:16px !important; }
  #app h2[class*="text-3xl"]{ font-size:22px !important; font-weight:800 !important; margin:6px 10px 10px !important; letter-spacing:-.3px; }
  .sk-line{ font-size:13px; }
}

/* switches / selects → brand red */
#app .n-switch{
  --n-rail-color-active:#B52121 !important;
  --n-button-color:#fff !important;
  --n-box-shadow-focus:0 0 0 2px rgba(181,33,33,.20) !important;
}
#app .n-base-selection{
  --n-border-active:#B52121 !important;
  --n-border-focus:#B52121 !important;
  --n-box-shadow-active:0 0 0 2px rgba(181,33,33,.12) !important;
  --n-box-shadow-focus:0 0 0 2px rgba(181,33,33,.12) !important;
  --n-option-text-color-active:#B52121 !important;
  --n-option-check-color:#B52121 !important;
  --n-border-radius:10px !important;
}
#app .n-base-selection .n-base-selection__border,
#app .n-base-selection .n-base-selection__state-border{ box-shadow:none !important; }

/* dashboard: big remaining-traffic block (competitor style) */
.sk-traffic{ display:flex; align-items:baseline; gap:8px; margin:2px 0 10px; }
.sk-traffic__num{ font-size:34px; font-weight:800; letter-spacing:-1px; color:var(--sk-text); line-height:1; }
.sk-traffic__unit{ font-size:14px; font-weight:700; color:var(--sk-muted); }
.sk-traffic__label{ margin-left:auto; font-size:12px; font-weight:700; color:var(--sk-muted); background:#F4F4F6; border-radius:8px; padding:4px 9px; }
.sk-traffic.is-low .sk-traffic__num{ color:var(--sk-red); }

/* desktop: keep content in a comfortable column instead of stretching edge to edge */
@media (min-width: 821px){
  #app section[class*="cus-scroll-y"] > div:not(.n-back-top-placeholder){
    max-width: 1180px; margin-left:auto; margin-right:auto; width:100%;
  }
}
/* never clip card content */
#app .n-card{ overflow: visible; }
#app .n-card > .n-card__content{ overflow: visible; }

/* order summary block: deep brand-red instead of plain slate */
#app .bg-gray-800.text-white,
#app .bg-gray-900.text-white{
  background-image:linear-gradient(150deg,#3B1010 0%,#7A1414 100%) !important;
  background-color:#5A1010 !important;
  border:1px solid rgba(181,33,33,.35) !important;
  border-radius:14px !important;
  box-shadow:0 10px 26px rgba(90,16,16,.18) !important;
}
#app .bg-gray-800.text-white .n-button--primary-type{
  --n-color:#fff !important; --n-color-hover:#F5E9E9 !important; --n-color-pressed:#EBD9D9 !important;
  --n-text-color:#8F1616 !important; --n-text-color-hover:#8F1616 !important;
  --n-text-color-pressed:#8F1616 !important; --n-text-color-focus:#8F1616 !important;
  box-shadow:none;
}

/* segmented tabs: clear active state */
#app .n-radio-button--checked{ background:var(--sk-red-ghost) !important; }
#app .n-radio-button--checked .n-radio__label{ color:var(--sk-red) !important; font-weight:800 !important; }
#app .n-radio-group__splitor--checked{ background-color:var(--sk-red) !important; }

/* plan name emphasis */
#app .card-item .n-card-header__main{ font-size:19px !important; letter-spacing:-.2px; }

/* featured plan highlight */
#app .card-item.sk-featured .n-card{
  border:1.5px solid rgba(181,33,33,.45) !important;
  box-shadow:0 8px 26px rgba(181,33,33,.14) !important;
}
.sk-badge{
  display:inline-flex; align-items:center; gap:4px;
  margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.2px;
  color:#fff; background:linear-gradient(135deg,#C93030,#8F1616);
  vertical-align:middle;
}