/* =========================================================================
   WeUI — Color tokens
   Source: Tencent/weui  src/style/base/theme/vars/{light,dark}.less
   The full authentic WeUI palette (light = :root, dark = .theme-dark / media).
   Base tokens keep the original --weui-* names; semantic aliases sit on top.
   ========================================================================= */

:root {
  /* ---- Backgrounds (surfaces) ---- */
  --weui-BG-0: #ededed;   /* app canvas / page background */
  --weui-BG-1: #f7f7f7;
  --weui-BG-2: #fff;      /* card / cell surface */
  --weui-BG-3: #f7f7f7;
  --weui-BG-4: #4c4c4c;
  --weui-BG-5: #fff;

  /* ---- Foreground (text & glyph opacities on light) ---- */
  --weui-FG-0:   rgba(0, 0, 0, 0.9);   /* primary text / title */
  --weui-FG-0_5: rgba(0, 0, 0, 0.9);
  --weui-FG-1:   rgba(0, 0, 0, 0.55);  /* secondary text / desc */
  --weui-FG-2:   rgba(0, 0, 0, 0.3);   /* tertiary text / tips, placeholder */
  --weui-FG-3:   rgba(0, 0, 0, 0.1);   /* hairline / disabled bg */
  --weui-FG-4:   rgba(0, 0, 0, 0.15);  /* disabled text */
  --weui-FG-5:   rgba(0, 0, 0, 0.05);  /* default-button bg */
  --weui-FG-HALF: rgba(0, 0, 0, 0.9);

  --weui-GLYPH-0: rgba(0, 0, 0, 0.9);
  --weui-GLYPH-1: rgba(0, 0, 0, 0.55);
  --weui-GLYPH-2: rgba(0, 0, 0, 0.3);
  --weui-GLYPH-WHITE-0: rgba(255, 255, 255, 0.8);
  --weui-GLYPH-WHITE-1: rgba(255, 255, 255, 0.5);
  --weui-GLYPH-WHITE-2: rgba(255, 255, 255, 0.3);
  --weui-GLYPH-WHITE-3: #fff;

  /* ---- Brand (WeChat green) ---- */
  --weui-BRAND-100: #07c160;  /* the WeChat green */
  --weui-BRAND-90:  #06ae56;
  --weui-BRAND-80:  #059a4c;
  --weui-BRAND-120: #38cd7f;
  --weui-BRAND-170: #b4ecce;
  --weui-BRAND: #07c160;
  --weui-TEXTGREEN: #06ae56;  /* brand green for text / active button */

  /* ---- Functional hues ---- */
  --weui-RED-100: #fa5151;
  --weui-RED-90:  #e14949;
  --weui-RED-80:  #c84040;
  --weui-RED-120: #fb7373;
  --weui-RED-170: #fdcaca;
  --weui-RED: #fa5151;

  --weui-ORANGE-100: #fa9d3b;
  --weui-ORANGE: #fa9d3b;
  --weui-ORANGERED-100: #ff6146;
  --weui-ORANGERED: #ff6146;
  --weui-REDORANGE: #ff6146;

  --weui-YELLOW-100: #ffc300;
  --weui-YELLOW: #ffc300;

  --weui-GREEN-100: #91d300;
  --weui-GREEN: #91d300;
  --weui-LIGHTGREEN-100: #95ec69;
  --weui-LIGHTGREEN: #95ec69;

  --weui-BLUE-100: #10aeff;
  --weui-BLUE: #10aeff;
  --weui-INDIGO-100: #1485ee;
  --weui-INDIGO: #1485ee;
  --weui-PURPLE-100: #6467f0;
  --weui-PURPLE: #6467f0;

  --weui-LINK-100: #576b95;   /* the classic WeChat link blue-grey */
  --weui-LINK: #576b95;
  --weui-LINKFINDER-100: #002666;

  /* ---- Lines / separators ---- */
  --weui-SEPARATOR-0: rgba(0, 0, 0, 0.1);
  --weui-SEPARATOR-1: rgba(0, 0, 0, 0.15);
  --weui-SECONDARY-BG: rgba(0, 0, 0, 0.05);

  /* ---- State layers (press / hover overlays) ---- */
  --weui-STATELAYER-HOVERED: rgba(0, 0, 0, 0.02);
  --weui-STATELAYER-PRESSED: rgba(0, 0, 0, 0.1);
  --weui-STATELAYER-PRESSEDSTRENGTHENED: rgba(0, 0, 0, 0.2);

  /* ---- Overlays / scrims ---- */
  --weui-OVERLAY: rgba(0, 0, 0, 0.5);
  --weui-OVERLAY-WHITE: rgba(242, 242, 242, 0.8);

  /* ---- Materials (translucent nav / toolbar) ---- */
  --weui-MATERIAL-NAVIGATIONBAR: rgba(237, 237, 237, 0.94);
  --weui-MATERIAL-TOOLBAR: rgba(246, 246, 246, 0.82);
  --weui-MATERIAL-THICK: rgba(247, 247, 247, 0.8);
  --weui-MATERIAL-THIN: rgba(255, 255, 255, 0.2);

  /* ---- Tag colors ---- */
  --weui-TAG-TEXT-ORANGE: #fa9d3b;
  --weui-TAG-TEXT-GREEN:  #06ae56;
  --weui-TAG-TEXT-BLUE:   #10aeff;
  --weui-TAG-TEXT-RED:    rgba(250, 81, 81, 0.6);
  --weui-TAG-TEXT-BLACK:  rgba(0, 0, 0, 0.5);
  --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
  --weui-TAG-BACKGROUND-GREEN:  rgba(6, 174, 86, 0.1);
  --weui-TAG-BACKGROUND-BLUE:   rgba(16, 174, 255, 0.1);
  --weui-TAG-BACKGROUND-RED:    rgba(250, 81, 81, 0.1);
  --weui-TAG-BACKGROUND-BLACK:  rgba(0, 0, 0, 0.05);

  /* ---- Absolutes ---- */
  --weui-WHITE: #fff;
  --weui-BG: #fff;
  --weui-FG: #000;

  /* =====================================================================
     SEMANTIC ALIASES  — author against these in product code
     ===================================================================== */
  --brand:            var(--weui-BRAND);        /* primary action */
  --brand-text:       var(--weui-TEXTGREEN);    /* brand text / pressed brand btn */
  --danger:           var(--weui-RED);          /* destructive / warn */
  --warning:          var(--weui-YELLOW);
  --info:             var(--weui-BLUE);
  --link:             var(--weui-LINK);         /* in-content links, "更多" */

  --text-title:       var(--weui-FG-0);         /* headings, cell titles */
  --text-body:        var(--weui-FG-0);         /* body copy */
  --text-secondary:   var(--weui-FG-1);         /* descriptions, captions */
  --text-tips:        var(--weui-FG-2);         /* hints, placeholders, timestamps */
  --text-disabled:    var(--weui-FG-4);
  --text-on-brand:    var(--weui-WHITE);

  --surface-page:     var(--weui-BG-0);         /* page canvas (grey) */
  --surface-card:     var(--weui-BG-2);         /* white cards & cells */
  --surface-elevated: var(--weui-BG-5);

  --line-hairline:    var(--weui-SEPARATOR-0);  /* 0.5px cell dividers */
  --line-strong:      var(--weui-SEPARATOR-1);

  --press-overlay:    var(--weui-STATELAYER-PRESSED);
  --active-cell-bg:   var(--weui-BG-1);         /* cell :active background */
  --scrim:            var(--weui-OVERLAY);      /* dialog / actionsheet mask */
}

/* =========================================================================
   Dark theme — apply with <html class="theme-dark"> or it auto-applies
   under prefers-color-scheme: dark.
   ========================================================================= */
.theme-dark {
  --weui-BG-0: #111;
  --weui-BG-1: #1e1e1e;
  --weui-BG-2: #191919;
  --weui-BG-3: #202020;
  --weui-BG-4: #404040;
  --weui-BG-5: #2c2c2c;

  --weui-FG-0:   rgba(255, 255, 255, 0.8);
  --weui-FG-0_5: rgba(255, 255, 255, 0.6);
  --weui-FG-1:   rgba(255, 255, 255, 0.5);
  --weui-FG-2:   rgba(255, 255, 255, 0.3);
  --weui-FG-3:   rgba(255, 255, 255, 0.1);
  --weui-FG-4:   rgba(255, 255, 255, 0.15);
  --weui-FG-5:   rgba(255, 255, 255, 0.1);
  --weui-FG-HALF: rgba(255, 255, 255, 0.6);

  --weui-BRAND-100: #07c160;
  --weui-BRAND: #07c160;
  --weui-TEXTGREEN: #259c5c;

  --weui-RED: #fa5151;
  --weui-ORANGE: #c87d2f;
  --weui-YELLOW: #cc9c00;
  --weui-GREEN: #74a800;
  --weui-LIGHTGREEN: #3eb575;
  --weui-BLUE: #10aeff;
  --weui-INDIGO: #1196ff;
  --weui-PURPLE: #8183ff;
  --weui-LINK: #7d90a9;

  --weui-SEPARATOR-0: rgba(255, 255, 255, 0.05);
  --weui-SEPARATOR-1: rgba(255, 255, 255, 0.15);
  --weui-SECONDARY-BG: rgba(255, 255, 255, 0.1);

  --weui-STATELAYER-PRESSED: rgba(255, 255, 255, 0.1);
  --weui-STATELAYER-PRESSEDSTRENGTHENED: rgba(255, 255, 255, 0.2);

  --weui-OVERLAY: rgba(0, 0, 0, 0.8);
  --weui-MATERIAL-NAVIGATIONBAR: rgba(18, 18, 18, 0.9);

  --weui-WHITE: rgba(255, 255, 255, 0.8);
  --weui-BG: #000;
  --weui-FG: #fff;

  --active-cell-bg: #202020;
}

/* Dark mode is opt-in via the .theme-dark class (toggle it on <html>).
   We intentionally avoid a prefers-color-scheme media block so every dark
   token registers as a first-class theme token rather than a media-scoped one. */
/* =========================================================================
   WeUI — Typography tokens
   WeUI ships no webfont; it rides the system stack (PingFang SC on iOS,
   system-ui elsewhere). Web sizes are in px (the WeUI web library baseline
   is 17px). The Mini Program spec expresses the same scale in rpx
   (750rpx = full screen width ≈ 1px : 2rpx). Both noted below.
   ========================================================================= */

:root {
  /* ---- Font families ---- */
  --font-sans:
    system-ui, -apple-system, "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono:
    "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* ---- Type scale (web px  /  Mini Program rpx) ---- */
  --text-lg:    20px;   /* 大标题 page hero            ~36rpx */
  --text-title: 17px;   /* 页面标题 / cell title       ~34rpx (web cell = 17px) */
  --text-body:  17px;   /* 正文 list & paragraph body  ~28–34rpx */
  --text-desc:  14px;   /* 辅助文字 description / tips  ~24–28rpx */
  --text-cap:   12px;   /* caption / footnote          ~20–24rpx */
  --text-mini:  10px;   /* tabbar label / smallest     ~20rpx */

  /* ---- Line heights ---- */
  --leading-tight:  1.2;
  --leading-snug:   1.4;   /* cell / control rows */
  --leading-normal: 1.6;   /* body paragraphs (.weui-cells default) */

  /* ---- Weights (PingFang SC family, self-hosted) ---- */
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;   /* renders via 700 file (no 600 face) */
  --weight-bold: 700;
  --weight-heavy: 900;

  /* ---- Roles ---- */
  --title-font-weight: var(--weight-medium);
  --body-font-weight:  var(--weight-regular);
}

/* Base element defaults — opt in with a wrapper, never forced globally */
.weui-type-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
/* =========================================================================
   WeUI — Spacing, radius, dimensions & elevation tokens
   Sourced from Tencent/weui component variables and the official
   Mini Program design spec. Web library uses px; Mini Program uses rpx
   (≈ 2× the px value). Component heights below are the WeUI web values.
   ========================================================================= */

:root {
  /* ---- Spacing scale ---- */
  /* Mini Program base gradient: 20 / 30 / 40 rpx  →  ~10 / 16 / 20 px */
  --space-1: 4px;
  --space-2: 8px;    /* cells margin-top, uploader gap */
  --space-3: 12px;
  --space-4: 16px;   /* canonical cell padding (weuiCellGap = 16px) */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --gutter-page: 16px;   /* default page side padding */
  --gutter-card: 16px;   /* card inner padding */

  /* ---- Corner radius ---- */
  /* Mini Program standard gradient: 8 / 12 / 16 rpx → here in web px */
  --radius-sm: 4px;
  --radius-btn: 8px;     /* buttons (weuiBtnBorderRadius) */
  --radius-card: 12px;   /* cards */
  --radius-search: 8px;  /* search bar */
  --radius-dialog: 12px; /* dialog / actionsheet */
  --radius-full: 9999px; /* pills, avatars, switches */

  /* ---- Hairline ---- */
  --hairline: 0.5px;     /* WeUI cell dividers are sub-pixel (transform scale) */

  /* ---- Component dimensions (WeUI web) ---- */
  --btn-height: 48px;          /* weuiBtnHeight */
  --btn-height-medium: 40px;
  --btn-height-small: 32px;    /* weuiBtnMiniHeight */
  --btn-min-width: 184px;
  --btn-font: 17px;
  --btn-mini-font: 14px;

  --cell-height: 56px;         /* weuiCellHeight */
  --cell-pad-v: 16px;
  --cell-pad-h: 16px;
  --cell-font: 17px;
  --cell-tips-font: 14px;
  --cell-label-width: 105px;

  --input-height: 56px;        /* form cell row */
  --switch-height: 32px;       /* weuiSwitchHeight */
  --checkbox-size: 22px;
  --uploader-size: 96px;

  --tabbar-height: 56px;       /* content area; +safe-area inset below */
  --navbar-height: 44px;       /* top nav content (web); 88rpx in MP */
  --tab-height: 40px;          /* in-page tab */

  --avatar-sm: 28px;
  --avatar-md: 40px;
  --avatar-lg: 48px;

  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Elevation ---- */
  /* WeUI is famously flat — elevation is carried by hairlines and grey
     canvas vs white surface, NOT drop shadows. These two are the only
     shadows the system really uses. */
  --shadow-none: none;
  --shadow-card: 0 1px 0 0 rgba(0, 0, 0, 0.05);             /* barely-there lift */
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);          /* dropdown / picker */
  --shadow-dialog: 0 4px 20px rgba(0, 0, 0, 0.16);          /* centered modals */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);   /* @kind other */
  --duration-fast: 0.15s;      /* @kind other */
  --duration-base: 0.3s;       /* @kind other */
  --duration-slow: 0.4s;       /* @kind other */
}
[class^="weui-icon-"],
[class*=" weui-icon-"] {
  display: inline-block;
  vertical-align: middle;
  font-size: 10px;       /* icons scale with font-size (width/height in em) */
  width: 2.4em;
  height: 2.4em;
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  background-color: currentColor;
}
.weui-icon-arrow         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.454%206.58l1.06-1.06%205.78%205.779a.996.996%200%20010%201.413l-5.78%205.779-1.06-1.061%205.425-5.425-5.425-5.424z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); width: 1.2em; color: var(--text-tips); }
.weui-icon-close         { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.25 10.6932L6.05682 4.5L5 5.55682L11.1932 11.75L5 17.9432L6.05682 19L12.25 12.8068L18.4432 19L19.5 17.9432L13.3068 11.75L19.5 5.55682L18.4432 4.5L12.25 10.6932Z' fill='black' /%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.25 10.6932L6.05682 4.5L5 5.55682L11.1932 11.75L5 17.9432L6.05682 19L12.25 12.8068L18.4432 19L19.5 17.9432L13.3068 11.75L19.5 5.55682L18.4432 4.5L12.25 10.6932Z' fill='black' /%3E%3C/svg%3E"); color: var(--text-title); }