/* ── Period App ── */
.period-shell,.period-screen{position:absolute;inset:0;min-height:0;background:var(--bg);color:var(--ink)}
.period-screen{display:none;flex-direction:column;overflow:hidden}
.period-screen.active{display:flex}
[id^="period-"][id$="-body"]{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.period-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px 18px calc(24px + var(--sab))}

/* Core cycle section */
.period-core{padding:20px 18px;border-radius:var(--r);background:var(--bg);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:16px}
.period-core-top{width:100%;display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink2)}
.period-core-date{font-weight:600;color:var(--ink)}
.period-ring-wrap{position:relative;width:148px;height:148px;margin:8px 0}
.period-ring-svg{width:100%;height:100%}
.period-ring-svg circle{transition:stroke-dashoffset .3s ease}
.period-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.period-ring-phase{font-family:var(--font-display);font-size:17px;font-weight:600}
.period-ring-days{font-size:12px;color:var(--ink2)}
.period-confidence{font-size:11.5px;color:var(--ink2)}
.period-primary-btn{width:100%;height:46px;margin-top:6px;border:none;border-radius:14px;background:var(--pri);color:var(--on-pri,#fff);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.period-primary-btn:active{opacity:.88}
.period-ghost-btn{width:100%;height:44px;margin-top:8px;border:none;border-radius:14px;background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink2);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}

/* Empty state */
.period-core-empty{padding:32px 22px}
.period-empty-icon{width:52px;height:52px;border-radius:50%;background:var(--bg);box-shadow:var(--shadow-in);color:var(--pri-deep);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.period-empty-icon svg{width:24px;height:24px}
.period-core-empty h2{font-family:var(--font-display);font-size:17px;font-weight:600}
.period-core-empty p{font-size:13px;line-height:1.6;color:var(--ink2);max-width:280px}

/* Generic blocks */
.period-block{margin-bottom:16px}
.period-block-title{font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:.03em;margin-bottom:8px}
.period-summary-empty{padding:16px;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink2);font-size:13px;text-align:center}
.period-summary-card{padding:14px 16px;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--shadow)}
.period-sum-chips{display:flex;flex-wrap:wrap;gap:6px}
.period-sum-chip{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--surface-alt);color:var(--ink2)}
.period-sum-chip.period-actual{background:color-mix(in srgb,var(--period-actual) 18%,var(--bg));color:var(--period-actual-text)}
.period-sum-symptoms{margin-top:8px;font-size:12.5px;color:var(--ink2)}
.period-sum-edit{margin-top:10px;border:none;background:none;color:var(--accent-text);font-family:inherit;font-size:12.5px;font-weight:600;padding:0;cursor:pointer}
.period-predict-card{padding:14px 16px;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--shadow)}
.period-predict-main{font-size:13.5px;color:var(--ink)}
.period-predict-sub{margin-top:4px;font-size:12px;color:var(--ink2)}
.period-predict-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;color:var(--ink2)}
.period-predict-row+.period-predict-row{border-top:.5px solid var(--border)}
.period-predict-row b{color:var(--ink);font-weight:600}
.period-trend-list{padding:4px 16px;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--shadow)}
.period-trend-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:13px;color:var(--ink2)}
.period-trend-row+.period-trend-row{border-top:.5px solid var(--border)}
.period-trend-row b{color:var(--ink);font-weight:600;font-size:12.5px;text-align:right;max-width:60%}

/* Quick links */
.period-links{display:flex;flex-direction:column;padding:0 4px;margin-bottom:8px}
.period-link-item{width:100%;display:flex;align-items:center;justify-content:space-between;border:none;background:none;padding:13px 2px;border-top:.5px solid var(--border);color:var(--ink);font-family:inherit;font-size:14px;text-align:left;cursor:pointer}
.period-link-item:first-child{border-top:none}
.period-link-arrow{color:var(--mist);display:inline-flex}
.period-link-arrow svg{width:15px;height:15px}

/* Quick record sheet */
.period-record-sheet{max-height:82dvh;display:flex;flex-direction:column;padding-bottom:calc(12px + var(--sab))}
.period-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.period-panel-head h2{font-family:var(--font-display);font-size:16px;font-weight:600}
.period-panel-head input[type=date]{border:none;border-radius:10px;background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink);font-family:inherit;font-size:12.5px;padding:6px 8px}
.period-panel-scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:6px}
.period-field-group{margin-bottom:16px}
.period-field-title{font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:8px}
.period-choice-col{display:flex;flex-direction:column;gap:8px}
.period-choice-row{width:100%;height:44px;border:none;border-radius:12px;background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink);font-family:inherit;font-size:13.5px;text-align:left;padding:0 14px;cursor:pointer}
.period-choice-row.sel{background:var(--pri-pale);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--pri-deep);color:var(--accent-text);font-weight:600}
.period-choice-row-wrap{display:flex;flex-wrap:wrap;gap:8px}
.period-chip{border:none;border-radius:999px;background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink2);font-family:inherit;font-size:12.5px;padding:8px 14px;cursor:pointer}
.period-chip.sel{background:var(--pri-pale);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--pri-deep);color:var(--accent-text);font-weight:600}
.period-custom-add{display:flex;gap:8px;margin-top:8px}
.period-custom-add input{flex:1;height:38px;border:none;border-radius:10px;background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink);font-family:inherit;font-size:13px;padding:0 12px;outline:none}
.period-custom-add button{border:none;border-radius:10px;background:var(--pri-pale);color:var(--accent-text);font-family:inherit;font-size:12.5px;font-weight:600;padding:0 14px;cursor:pointer}
.period-more{margin-top:6px}
.period-more summary{font-size:13px;color:var(--ink2);font-weight:600;cursor:pointer;padding:8px 0}
.period-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.period-mini-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;min-width:0}
.period-mini-field span{font-size:11.5px;color:var(--ink2)}
.period-mini-field input,.period-mini-field select{height:40px;border:none;border-radius:10px;background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink);font-family:inherit;font-size:13px;padding:0 11px;outline:none}
.period-note-field textarea{border:none;border-radius:12px;background:var(--bg);box-shadow:var(--shadow-in);color:var(--ink);font-family:inherit;font-size:13.5px;padding:10px 12px;min-height:80px;resize:vertical;outline:none}
.period-panel-actions{display:flex;gap:10px;padding-top:12px;flex-shrink:0}
.period-panel-actions .s-btn{flex:1;text-align:center}

/* History */
.period-history-list{display:flex;flex-direction:column;gap:10px}
.period-history-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:none;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--shadow);padding:13px 14px;text-align:left;color:var(--ink);font-family:inherit;cursor:pointer}
.period-history-main{min-width:0}
.period-history-dates{font-size:14px;font-weight:600}
.period-history-meta{margin-top:4px;font-size:12px;color:var(--ink2)}
.period-history-flag{margin-top:4px;font-size:11px;color:var(--period-actual-text)}
.period-history-actions{display:flex;gap:6px;flex-shrink:0}
.period-history-actions button{width:30px;height:30px;border:none;border-radius:9px;background:var(--surface-alt);color:var(--ink2);display:flex;align-items:center;justify-content:center}
.period-history-actions button.danger{color:var(--coral-text)}
.period-history-actions svg{width:15px;height:15px}

/* Stats */
.period-bar-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:16px;border-radius:var(--r-sm);background:var(--bg);box-shadow:var(--shadow);min-height:100px}
.period-bar-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.period-bar{width:100%;max-width:22px;border-radius:6px 6px 2px 2px;background:var(--pri-pale)}
.period-bar-col span{font-size:10px;color:var(--ink2)}
.period-volatile-note{margin-top:8px;font-size:12px;color:var(--period-actual-text)}
.period-disclaimer{margin-top:6px;font-size:11px;color:var(--ink2);line-height:1.5;text-align:center}

/* Settings */
.period-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;font-size:14px;color:var(--ink)}
.period-danger-item{width:100%;height:46px;border:none;border-radius:14px;background:var(--coral-soft);color:var(--coral-text);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}

@media(max-width:390px){
  .period-more-grid{grid-template-columns:1fr}
  .period-ring-wrap{width:132px;height:132px}
}

/* Status context, hints, share preview */
.period-stale-note{width:100%;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.period-stale-note .period-sum-edit{margin:4px 0 0 6px}
.period-sum-actions{display:flex;gap:16px;flex-wrap:wrap}
.period-summary-empty .period-sum-actions{justify-content:center;margin-top:6px}
.period-panel-context{font-size:12.5px;line-height:1.5;color:var(--ink2);margin-bottom:8px}
.period-panel-hint,.period-setting-note{font-size:11.5px;line-height:1.55;color:var(--ink2);margin:0 0 12px}
.period-choice-row small{display:block;font-size:11px;font-weight:400;color:var(--ink2)}
.period-choice-row[disabled]{color:var(--ink2);box-shadow:none;border:1px dashed var(--border);cursor:not-allowed;height:auto;min-height:44px;padding:6px 14px}
.period-more .period-choice-row-wrap{margin-top:6px}
.period-share-preview{padding:12px 14px;border-radius:12px;background:var(--surface-alt);color:var(--ink);font-size:13.5px;line-height:1.55}
.period-switch-row.disabled span{color:var(--ink2)}
.period-ghost-btn+.period-danger-item{margin-top:10px}

/* Home cards (aligned with 钱包): every section is a soft surface card with its title inside */
.period-card{padding:16px 16px 14px;margin-bottom:14px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.period-core{background:var(--surface);border-radius:24px}
.period-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.period-card-title{font-size:15px;font-weight:700;color:var(--ink)}
.period-card-link{display:flex;align-items:center;gap:2px;border:none;background:none;padding:4px 0 4px 8px;font-family:inherit;font-size:13px;color:var(--ink2);cursor:pointer}
.period-card-link svg{width:14px;height:14px}
.period-card-empty{font-size:13px;line-height:1.6;color:var(--ink2);margin:0}
.period-card .period-sum-chips{gap:10px}
.period-card .period-sum-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;background:var(--surface-alt);color:var(--ink2)}
.period-sum-chip b{font-weight:600;color:var(--ink)}
.period-card .period-sum-symptoms{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--ink2)}
.period-sum-symptoms svg{width:16px;height:16px;flex-shrink:0}
.period-badge{flex-shrink:0;padding:4px 10px;border-radius:999px;background:var(--surface-alt);font-size:11.5px;color:var(--ink2)}
.period-predict-label{font-size:12.5px;color:var(--ink2)}
.period-predict-date{margin:4px 0 12px;font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);line-height:1.25;font-variant-numeric:tabular-nums}
.period-predict-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink)}
.period-predict-meta>span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.period-predict-meta svg{width:16px;height:16px;flex-shrink:0;color:var(--ink2)}
.period-predict-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--ink2)}
.period-explain{margin-top:12px;border-radius:14px;background:var(--bg);box-shadow:var(--shadow-in)}
.period-explain summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:13px;color:var(--ink);cursor:pointer;list-style:none}
.period-explain summary::-webkit-details-marker{display:none}
.period-explain summary svg{width:15px;height:15px;color:var(--ink2);transform:rotate(90deg);transition:transform .2s}
.period-explain[open] summary svg{transform:rotate(-90deg)}
.period-explain p{margin:0;padding:0 14px 12px;font-size:12px;line-height:1.6;color:var(--ink2)}
.period-card .period-trend-list{padding:0 2px;background:none;box-shadow:none}
.period-card.period-links{padding:2px 16px}
.period-card .period-link-item{gap:12px;padding:15px 0}
.period-link-icon{display:inline-flex;color:var(--ink)}
.period-link-icon svg{width:19px;height:19px}
.period-link-label{flex:1}

/* Settings (aligned with the home cards): card title, an inset panel of rows, standalone row cards for actions */
.period-card-title small{margin-left:4px;font-size:12px;font-weight:400;color:var(--ink2)}
.period-inset{padding:0 14px;border-radius:16px;background:var(--bg);box-shadow:var(--shadow-in)}
.period-inset>*+*{border-top:1px solid var(--line-soft)}
.period-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;font-size:14px;color:var(--ink)}
.period-num{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.period-num input{width:58px;height:38px;border:none;border-radius:10px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-family:inherit;font-size:15px;text-align:center;outline:none;-moz-appearance:textfield;appearance:textfield}
.period-num input::-webkit-outer-spin-button,.period-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.period-num em{font-style:normal;font-size:14px;color:var(--ink)}
.period-inset .period-switch-row{padding:13px 0}
.period-inset .period-setting-note{margin:0;padding:12px 0}
.period-card>.period-switch-row{padding:4px 0 10px}
.period-card>.period-setting-note{margin:0}
.period-section-label{margin:18px 4px 8px;font-size:13px;font-weight:600;color:var(--ink2)}
.period-info-card{display:flex;align-items:center;gap:14px}
.period-info-card .period-setting-note{margin:0;font-size:12.5px}
.period-info-icon{width:46px;height:46px;flex-shrink:0;border-radius:50%;background:var(--bg);box-shadow:var(--shadow-in);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.period-info-icon svg{width:20px;height:20px}
.period-row-card{width:100%;display:flex;align-items:center;gap:14px;border:none;padding:18px 16px;font-family:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}
.period-card.period-row-card{color:var(--ink)}
.period-row-card svg{width:20px;height:20px;flex-shrink:0}
.period-row-card.period-danger-item{height:auto;border-radius:22px;margin-bottom:14px}

/* Record dialog: a centered card (like 钱包 充值) - date row, context card, 2x2 status grid, segmented flow/pain,
   foldable symptom / mood / note sections, delete link above the buttons */
.sheet-ov.period-dialog-ov{align-items:center;padding:16px}
.sheet.period-record-sheet{max-width:400px;max-height:88dvh;border-radius:26px;padding:20px 18px 16px;box-shadow:0 18px 48px rgba(46,62,80,.22);animation:periodPop .2s ease-out}
@keyframes periodPop{from{transform:scale(.96)}to{transform:none}}
.period-record-sheet .period-panel-head{margin-bottom:12px}
.period-record-sheet .period-panel-head h2{font-size:22px;font-weight:700;margin:0}
.period-dialog-close{width:34px;height:34px;margin-right:-6px;border:none;background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.period-dialog-close svg{width:22px;height:22px}
.period-date-row{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-size:15px;cursor:pointer}
.period-date-row svg{width:20px;height:20px;flex-shrink:0}
.period-date-row .period-date-text{flex:1;font-variant-numeric:tabular-nums}
.period-date-row svg:last-of-type{width:16px;height:16px;color:var(--ink2)}
.period-date-row input{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;color:transparent;clip-path:inset(50%);pointer-events:none}
.period-context-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;margin-bottom:10px;border-radius:14px;background:var(--pri-pale)}
.period-context-card b{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--ink)}
.period-context-card>span{display:flex;flex-wrap:wrap;gap:0 8px;font-size:12px;color:var(--ink2)}
.period-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.period-status-opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:8px 10px;border:none;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-family:inherit;font-size:14px;cursor:pointer}
.period-status-opt.sel{background:var(--pri-pale);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--pri-deep);font-weight:600}
.period-status-opt[disabled]{color:var(--ink2);box-shadow:none;border:1px dashed var(--border);cursor:not-allowed}
.period-status-opt small{font-size:10.5px;font-weight:400;color:var(--ink2)}
.period-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--pri-deep);color:var(--on-pri-deep,#fff);display:flex;align-items:center;justify-content:center}
.period-check svg{width:12px;height:12px;stroke-width:3}
.period-seg{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:10px}
.period-seg-btn{height:44px;border:none;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-family:inherit;font-size:14px;cursor:pointer}
.period-seg-btn.sel{background:var(--pri-pale);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--pri-deep);font-weight:600}
.period-fold{border-bottom:1px solid var(--line-soft)}
.period-fold summary{display:flex;align-items:center;gap:8px;padding:14px 2px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.period-fold summary::-webkit-details-marker{display:none}
.period-fold summary>span:first-child{flex:1}
.period-fold summary em{font-style:normal;font-size:12px;font-weight:500;color:var(--ink2)}
.period-fold summary svg{width:16px;height:16px;color:var(--ink2);transform:rotate(90deg);transition:transform .2s}
.period-fold[open] summary svg{transform:rotate(-90deg)}
.period-fold-body{padding:0 0 14px}
.period-panel-foot{flex-shrink:0;padding-top:8px}
.period-delete-link.period-danger-item{display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;padding:6px 2px;margin-bottom:6px;background:none;font-size:13.5px;font-weight:500}
.period-delete-link svg{width:17px;height:17px}
.period-record-sheet .period-panel-actions{padding-top:4px}
.period-record-sheet .period-panel-actions .s-btn{height:48px;border-radius:999px;font-size:15px}

.period-record-sheet .period-panel-scroll{margin:0 -8px;padding:2px 8px 6px}

/* History: year labels, one card per period (range + badge, common symptoms, 编辑 / ··· footer) */
.period-history-top .app-title{display:flex;flex-direction:column;line-height:1.2}
.period-history-top .app-title small{margin-top:3px;font-family:inherit;font-size:12px;font-weight:400;color:var(--ink2)}
.period-add-btn{width:40px;height:40px;border:none;border-radius:13px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.period-add-btn svg{width:20px;height:20px}
.period-history-list .period-section-label:first-child{margin-top:4px}
.period-history-card{cursor:pointer}
.period-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.period-history-range{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.period-history-sub{margin-top:3px;font-size:12.5px;color:var(--ink2)}
.period-history-body{padding-top:12px}
.period-history-label{font-size:12.5px;color:var(--ink2)}
.period-history-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.period-history-tags span{padding:5px 14px;border-radius:999px;border:1px solid var(--border);font-size:13px;color:var(--ink)}
.period-history-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:6px}
.period-history-foot button{display:inline-flex;align-items:center;gap:6px;border:none;background:none;padding:6px 10px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.period-history-foot button+button{border-left:1px solid var(--border)}
.period-history-foot svg{width:17px;height:17px;stroke-linecap:round;stroke-linejoin:round}
.period-history-foot [data-cycle-more] svg{width:20px;height:20px;stroke-width:3}
.period-history-foot button+button{height:22px;padding:0 4px 0 12px}
.period-menu{margin-top:4px}
.period-menu-cancel{width:100%;margin-top:4px}

/* ===================================================================================================
   经期 redesign (hand-written, keep LAST in this file).
   Home = 周期轮 + 月历; record = full-screen page; history / stats / settings / dialogs in the same language.
   The rose is FIXED for this app (it means "period") and does not follow the theme. White cards with a soft
   rose shadow in light; in dark the same rose glow under translucent cards.
   =================================================================================================== */
#v-period,.pd-page,.pd-dialog{
  --pd-bg:#f7f4f5;--pd-card:#fff;--pd-line:rgba(185,132,140,.12);--pd-sep:rgba(156,102,112,.10);
  --pd-shadow:0 12px 28px -20px rgba(156,102,112,.55);--pd-shadow-strong:0 14px 28px -14px rgba(156,102,112,.7);
  --pd-rose:#b9848c;--pd-rose-d:#93606a;--pd-rose-p:#f3e3e5;--pd-rose-pp:#faf0f1;--pd-on-rose:#fff;
  --pd-blue:#8ea4bb;--pd-blue-p:#d3dde7;--pd-dot:#e3e6ea;--pd-x:#c3c8cf;
  --pd-glass:rgba(255,255,255,.8);--pd-glassline:#fff;--pd-wash:#f0d6da;
  --pd-field:rgba(250,240,241,.7);--pd-danger:#a65a55;--pd-dialog:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(#v-period,.pd-page,.pd-dialog){
  --pd-bg:#15171d;--pd-card:rgba(255,255,255,.06);--pd-line:rgba(220,170,178,.14);--pd-sep:rgba(255,255,255,.07);
  --pd-shadow:0 16px 32px -18px rgba(201,120,135,.55),inset 0 1px 0 rgba(255,255,255,.05);--pd-shadow-strong:0 16px 32px -14px rgba(201,120,135,.7),inset 0 1px 0 rgba(255,255,255,.07);
  --pd-rose:#c99aa2;--pd-rose-d:#e0b0b8;--pd-rose-p:rgba(201,154,162,.24);--pd-rose-pp:rgba(201,154,162,.12);--pd-on-rose:#1a1b20;
  --pd-blue:#8fa6be;--pd-blue-p:rgba(143,166,190,.35);--pd-dot:rgba(255,255,255,.13);--pd-x:#5b616b;
  --pd-glass:rgba(255,255,255,.08);--pd-glassline:rgba(255,255,255,.12);--pd-wash:rgba(201,154,162,.26);
  --pd-field:rgba(255,255,255,.06);--pd-danger:#e3a39d;--pd-dialog:#24252b}}
:root[data-theme="dark"] :is(#v-period,.pd-page,.pd-dialog){
  --pd-bg:#15171d;--pd-card:rgba(255,255,255,.06);--pd-line:rgba(220,170,178,.14);--pd-sep:rgba(255,255,255,.07);
  --pd-shadow:0 16px 32px -18px rgba(201,120,135,.55),inset 0 1px 0 rgba(255,255,255,.05);--pd-shadow-strong:0 16px 32px -14px rgba(201,120,135,.7),inset 0 1px 0 rgba(255,255,255,.07);
  --pd-rose:#c99aa2;--pd-rose-d:#e0b0b8;--pd-rose-p:rgba(201,154,162,.24);--pd-rose-pp:rgba(201,154,162,.12);--pd-on-rose:#1a1b20;
  --pd-blue:#8fa6be;--pd-blue-p:rgba(143,166,190,.35);--pd-dot:rgba(255,255,255,.13);--pd-x:#5b616b;
  --pd-glass:rgba(255,255,255,.08);--pd-glassline:rgba(255,255,255,.12);--pd-wash:rgba(201,154,162,.26);
  --pd-field:rgba(255,255,255,.06);--pd-danger:#e3a39d;--pd-dialog:#24252b}

/* ---- page shell ---- */
#v-period .period-screen{background:var(--pd-bg)}
#v-period [id^="period-"][id$="-body"]{position:relative}
.pd-wash{position:absolute;left:0;right:0;top:0;height:400px;background:radial-gradient(80% 70% at 50% 15%,var(--pd-wash) 0%,transparent 70%);pointer-events:none;z-index:0}
.pd-top{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(12px + var(--sat,0px)) 16px 6px;flex-shrink:0}
.pd-title{flex:1;min-width:0;text-align:center;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-rb{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1px solid var(--pd-glassline);background:var(--pd-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 6px 14px -8px rgba(80,60,70,.4);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pd-rb svg{width:18px;height:18px}
.pd-rb-gap{width:38px;flex-shrink:0}
.pd-scroll{position:relative;z-index:1;padding:4px 16px calc(28px + var(--sab))!important}

/* ---- cards ---- */
.pd-card{position:relative;background:var(--pd-card);border:1px solid var(--pd-line);border-radius:22px;box-shadow:var(--pd-shadow);padding:16px 18px;margin-bottom:12px;color:var(--ink)}
.pd-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.pd-card-head b{font-family:var(--font-display);font-size:16px;font-weight:600}
.pd-card-head small{font-size:12px;color:var(--ink2)}
.pd-card-link{display:flex;align-items:center;gap:2px;border:none;background:none;padding:2px 0;font-family:inherit;font-size:13px;color:var(--pd-rose-d);cursor:pointer}
.pd-card-link svg{width:14px;height:14px}
.pd-card-text{font-size:14px;line-height:1.6;margin:0}
.pd-card-sub{font-size:13px;line-height:1.6;color:var(--ink2);margin:6px 0 0}
.pd-chips{display:flex;flex-wrap:wrap;gap:7px}
.pd-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:12px;background:var(--pd-rose-pp);font-size:13px;color:var(--ink)}
.pd-chip em{font-style:normal;font-size:12px;color:var(--ink2)}
.pd-link-btn{border:none;background:none;padding:6px 0 0;font-family:inherit;font-size:13px;font-weight:600;color:var(--pd-rose-d);cursor:pointer}
.pd-pill{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;border-radius:25px;border:1px solid var(--pd-line);background:var(--pd-card);box-shadow:var(--pd-shadow-strong);color:var(--pd-rose-d);font-family:var(--font-display);font-size:16px;font-weight:600;cursor:pointer;margin:0 0 14px;padding:0 20px}
.pd-pill svg{width:18px;height:18px;stroke-width:2}
.pd-pill:active{transform:scale(.99)}
.pd-ghost{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border:none;border-radius:23px;background:var(--pd-rose-pp);color:var(--ink2);font-family:var(--font-display);font-size:14.5px;font-weight:500;cursor:pointer}
.pd-mini{width:30px;height:30px;border-radius:50%;border:none;background:var(--pd-rose-pp);color:var(--pd-rose-d);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0}
.pd-mini svg{width:15px;height:15px}
.pd-note{font-size:12.5px;line-height:1.55;color:var(--pd-rose-d);margin:0 4px 12px}
.pd-badge{flex-shrink:0;padding:4px 11px;border-radius:12px;background:var(--pd-rose);color:var(--pd-on-rose);font-size:12px;font-weight:600}
.pd-badge.soft{background:var(--pd-rose-pp);color:var(--ink2);font-weight:500}

/* ---- empty states ---- */
.pd-empty{text-align:center;padding:28px 22px 22px}
.pd-empty-ic{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:var(--pd-rose-pp);color:var(--pd-rose-d);display:flex;align-items:center;justify-content:center}
.pd-empty-ic svg{width:24px;height:24px}
.pd-empty h2{font-family:var(--font-display);font-size:18px;font-weight:600;margin:0}
.pd-empty p{font-size:13px;line-height:1.6;color:var(--ink2);margin:8px auto 18px;max-width:270px}
.pd-empty .pd-pill{margin-bottom:10px}

/* ---- home: 周期轮 ---- */
.pd-hero{position:relative;z-index:1;margin:0 0 4px}
.pd-wheel{position:relative;width:270px;height:270px;margin:0 auto}
.pd-wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pd-w-dot{fill:var(--pd-dot)}
.pd-w-dot.p{fill:var(--pd-rose)}
.pd-w-dot.e{fill:none;stroke:var(--pd-rose);stroke-width:1.6;stroke-dasharray:2.5 2}
.pd-w-dot.u{fill:none;stroke:var(--ink2);stroke-width:1.4;stroke-dasharray:1.5 2}
.pd-w-dot.f{fill:var(--pd-blue-p)}
.pd-w-dot.o{fill:var(--pd-blue)}
.pd-w-ring{fill:var(--pd-card);stroke:var(--pd-rose-d);stroke-width:3}
:root[data-theme="dark"] .pd-w-ring{fill:#22232a}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pd-w-ring{fill:#22232a}}
.pd-w-now{fill:var(--pd-rose-d)}
.pd-w-core{fill:var(--pd-glass);stroke:var(--pd-glassline)}
.pd-wheel-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 70px}
.pd-wheel-c small{font-size:13px;color:var(--pd-rose-d);letter-spacing:2px}
.pd-big{font-family:var(--font-display);font-size:56px;font-weight:500;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.pd-big span{font-size:19px;margin:0 3px}
.pd-wheel-c p{font-size:12.5px;line-height:1.45;color:var(--ink2);margin:4px 0 0}
.pd-stale{margin:4px 6px 10px;padding:10px 14px;border-radius:16px;background:var(--pd-glass);border:1px solid var(--pd-glassline);font-size:12.5px;line-height:1.55;color:var(--ink2);text-align:center}
.pd-stale .pd-link-btn{display:block;margin:2px auto 0}
.pd-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.pd-meta span{display:inline-flex;align-items:baseline;gap:5px;padding:7px 13px;border-radius:15px;background:var(--pd-glass);border:1px solid var(--pd-glassline);font-size:12.5px;color:var(--ink2)}
.pd-meta b{color:var(--ink);font-weight:600}
.pd-meta em{font-style:normal;font-size:11px;padding:1px 6px;border-radius:8px;background:var(--pd-rose-pp);color:var(--pd-rose-d)}
.pd-explain{margin:0 0 12px;text-align:center}
.pd-explain summary{display:inline-block;padding:6px 4px;font-size:12px;color:var(--ink2);cursor:pointer;list-style:none;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink2) 35%,transparent);text-underline-offset:3px}
.pd-explain summary::-webkit-details-marker{display:none}
.pd-explain p{display:flex;flex-direction:column;gap:4px;margin:4px 6px 0;padding:12px 14px;border-radius:16px;background:var(--pd-glass);border:1px solid var(--pd-glassline);font-size:12px;line-height:1.6;color:var(--ink2);text-align:left}
#v-period .period-sum-actions{margin-top:10px}

/* ---- home: 月历 ---- */
.pd-month{padding:14px 14px 12px}
.pd-month-head{display:flex;justify-content:space-between;align-items:center;padding:0 4px 8px}
.pd-month-head b{font-family:var(--font-display);font-size:16px;font-weight:600}
.pd-month-head>span{display:flex;gap:6px}
.pd-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.pd-w{text-align:center;font-size:11px;color:var(--ink2);padding-bottom:4px}
.pd-d{position:relative;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;padding:0;font-family:var(--font-display);font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
button.pd-d{cursor:pointer}
.pd-d>span{position:relative;z-index:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}
span.pd-d:not(.p):not(.e){color:color-mix(in srgb,var(--ink) 80%,transparent)}
.pd-d.p{background:var(--pd-rose-p);color:var(--pd-rose-d);font-weight:600}
.pd-d.e{border-top:1.5px dashed var(--pd-rose);border-bottom:1.5px dashed var(--pd-rose);color:var(--pd-rose-d)}
.pd-d.u{border-top:1.5px dotted var(--ink2);border-bottom:1.5px dotted var(--ink2);color:var(--ink2)}
.pd-d.p.cs{border-radius:18px 0 0 18px}.pd-d.p.ce{border-radius:0 18px 18px 0}.pd-d.p.cs.ce{border-radius:18px}
.pd-d.e.cs,.pd-d.u.cs{border-left:1.5px dashed var(--pd-rose);border-radius:18px 0 0 18px}
.pd-d.e.ce,.pd-d.u.ce{border-right:1.5px dashed var(--pd-rose);border-radius:0 18px 18px 0}
.pd-d.e.cs.ce,.pd-d.u.cs.ce{border-radius:18px}
.pd-d.u.cs{border-left-color:var(--ink2);border-left-style:dotted}.pd-d.u.ce{border-right-color:var(--ink2);border-right-style:dotted}
.pd-d.t>span{background:var(--pd-rose);color:var(--pd-on-rose);font-weight:600}
.pd-d:not(.p).t>span{background:var(--pd-card);color:var(--pd-rose-d);box-shadow:0 0 0 2px var(--pd-rose)}
.pd-d.mf::after,.pd-d.mo::after,.pd-d.n::after{content:'';position:absolute;bottom:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--pd-blue);z-index:1}
.pd-d.mo::after{width:6px;height:6px;margin-left:-3px;bottom:1px}
.pd-d.n::after{background:var(--pd-rose)}
.pd-legend{display:flex;justify-content:center;gap:14px;margin-top:8px;font-size:11px;color:var(--ink2)}
.pd-legend i{display:inline-block;width:14px;height:10px;border-radius:5px;margin-right:4px;vertical-align:-1px}
.pd-legend .lp{background:var(--pd-rose-p)}
.pd-legend .le{border:1.5px dashed var(--pd-rose)}
.pd-legend .lf{width:6px;height:6px;background:var(--pd-blue)}

/* ---- home: 历史 / 统计 tiles ---- */
.pd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--pd-card);border:1px solid var(--pd-line);border-radius:20px;box-shadow:var(--pd-shadow);padding:14px 16px;font-family:inherit;color:var(--ink);cursor:pointer}
.pd-tile b{font-family:var(--font-display);font-size:15px;font-weight:600}
.pd-tile small{font-size:12px;color:var(--ink2);margin-top:3px}
.pd-tile-dots{display:flex;gap:4px;margin-top:12px;height:28px;align-items:flex-end}
.pd-tile-dots i{width:20px;height:8px;border-radius:4px;background:var(--pd-rose)}
.pd-tile-dots i.o,.pd-spark i.o{background:var(--pd-rose-p)}
.pd-spark{display:flex;align-items:flex-end;gap:5px;width:100%;height:28px;margin-top:12px}
.pd-spark i{flex:1;border-radius:3px;background:var(--pd-rose-p)}
.pd-spark i:last-child:not(.o){background:var(--pd-rose)}

/* ---- record: full-screen page ---- */
.pd-page{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:var(--pd-bg);color:var(--ink);animation:fadeIn .18s;max-width:430px;margin:0 auto}
.pd-save{height:36px;flex-shrink:0;border-radius:18px;border:1px solid var(--pd-line);background:var(--pd-card);box-shadow:var(--pd-shadow-strong);color:var(--pd-rose-d);font-family:var(--font-display);font-size:14px;font-weight:600;padding:0 16px;cursor:pointer}
.pd-page .period-date-row{position:relative;z-index:1;margin:8px 16px 4px;border-radius:18px;background:var(--pd-card);border:1px solid var(--pd-line);box-shadow:var(--pd-shadow);font-family:var(--font-display)}
.pd-page .period-date-row svg{color:var(--pd-rose-d)}
.pd-page-scroll{position:relative;z-index:1;flex:1;min-height:0;overflow-y:auto;padding:10px 16px 12px!important}
.pd-page .period-context-card{background:var(--pd-rose-pp);border-radius:16px;margin-bottom:8px}
.pd-page .period-panel-hint{margin:0 4px 14px}
.pd-page .period-field-group{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:22px;box-shadow:var(--pd-shadow);padding:14px 14px 16px;margin-bottom:12px}
.pd-page .period-field-title{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink);margin:0 2px 12px}
.pd-page .period-field-title em{font-style:normal;font-size:11px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pd-rose);color:var(--pd-on-rose);display:inline-flex;align-items:center;justify-content:center}
.pd-page .period-status-opt,.pd-page .period-seg-btn{background:var(--pd-field);border:1px solid transparent;box-shadow:none;border-radius:16px;font-family:var(--font-display);color:var(--ink)}
.pd-page .period-status-opt.sel,.pd-page .period-seg-btn.sel{background:var(--pd-card);border-color:var(--pd-rose);color:var(--pd-rose-d);font-weight:600;box-shadow:0 8px 18px -12px rgba(156,102,112,.8)}
.pd-page .period-status-opt[disabled]{background:none;border:1px dashed var(--pd-line);color:var(--ink2)}
.pd-page .period-check{background:var(--pd-rose);color:var(--pd-on-rose)}
.pd-page .period-chip{background:var(--pd-field);box-shadow:none;border:1px solid transparent;color:var(--ink);font-size:13px;padding:7px 14px}
.pd-page .period-chip.sel{background:var(--pd-rose-p);border-color:color-mix(in srgb,var(--pd-rose) 55%,transparent);color:var(--pd-rose-d);box-shadow:none}
.pd-page .period-more summary{color:var(--pd-rose-d);font-size:12.5px;padding:10px 2px 2px}
.pd-page .period-custom-add input,.pd-page .period-mini-field input,.pd-page .period-note-field textarea{background:var(--pd-field);box-shadow:none;border:1px solid transparent;border-radius:14px;font-family:var(--font-display)}
.pd-page .period-custom-add input:focus,.pd-page .period-mini-field input:focus,.pd-page .period-note-field textarea:focus{background:var(--pd-card);border-color:color-mix(in srgb,var(--pd-rose) 50%,transparent)}
.pd-page .period-custom-add button{background:var(--pd-rose-pp);color:var(--pd-rose-d);border-radius:14px}
.pd-page .period-fold{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:22px;box-shadow:var(--pd-shadow);padding:0 14px;margin-bottom:12px}
.pd-page .period-fold summary{font-family:var(--font-display);font-size:14.5px;padding:15px 2px}
.pd-page .period-fold summary>span:first-child{display:flex;align-items:baseline;gap:8px;min-width:0}
.pd-page .period-fold summary small{font-family:var(--font-body,inherit);font-size:11.5px;font-weight:400;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-page .period-fold summary em{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pd-rose);color:var(--pd-on-rose);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.pd-page .period-mini-field span{font-size:12px;color:var(--ink2);margin-left:2px}
.pd-page-foot{position:relative;z-index:1;flex-shrink:0;display:flex;justify-content:center;padding:4px 16px calc(14px + var(--sab))}
.pd-del{display:inline-flex;align-items:center;gap:6px;border:none;background:none;padding:8px 10px;font-family:inherit;font-size:13.5px;color:var(--pd-danger);cursor:pointer}
.pd-del svg{width:16px;height:16px}

/* ---- centred dialogs (cycle menu, edit dates) ---- */
.sheet-ov.pd-dialog-ov{align-items:center;padding:16px}
.sheet.pd-dialog{max-width:340px;border-radius:24px;padding:18px 18px 16px;background:var(--pd-dialog);border:1px solid var(--pd-line);box-shadow:0 24px 48px -16px rgba(80,50,60,.35);animation:periodPop .2s ease-out}
.pd-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 12px}
.pd-dialog-head h3{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);margin:0}
.pd-dialog-x{width:30px;height:30px;border:none;border-radius:50%;background:var(--pd-rose-pp);color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pd-dialog-x svg{width:16px;height:16px}
.pd-dialog-row{width:100%;display:flex;align-items:center;gap:12px;border:none;background:none;padding:12px 4px;font-family:var(--font-display);font-size:15px;color:var(--ink);text-align:left;cursor:pointer;border-top:1px solid var(--pd-sep)}
.pd-dialog-row>span:nth-child(2){flex:1}
.pd-dialog-row>svg:last-child,.pd-dialog-row>span:last-child svg{width:15px;height:15px;color:var(--ink2)}
.pd-dialog-ic{width:34px;height:34px;border-radius:50%;background:var(--pd-rose-pp);color:var(--pd-rose-d);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pd-dialog-ic svg{width:17px;height:17px}
.pd-dialog-row.danger{color:var(--pd-danger)}
.pd-dialog-row.danger .pd-dialog-ic{background:color-mix(in srgb,var(--pd-danger) 12%,transparent);color:var(--pd-danger)}
.pd-dialog .pd-field span{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink2);margin:0 2px}
.pd-dialog .pd-field span small{font-weight:400;font-size:11.5px}
.pd-dialog .pd-field input{height:46px;border-radius:16px;background:var(--pd-field);box-shadow:none;border:1px solid transparent;font-family:var(--font-display);font-size:14.5px}
.pd-dialog-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:8px}
.pd-dialog-btns .pd-pill,.pd-dialog-btns .pd-ghost{height:46px;margin:0;font-size:15px}

/* ---- history ---- */
#v-period .period-section-label{margin:14px 6px 8px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--pd-rose-d)}
#v-period .period-history-list{gap:0}
.pd-hist{cursor:pointer}
.pd-hist-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pd-hist-range{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pd-hist-sub{margin-top:2px;font-size:12.5px;color:var(--ink2)}
.pd-hist-bars{display:flex;gap:4px;margin:12px 0}
.pd-hist-bars i{width:18px;height:6px;border-radius:3px;background:var(--pd-rose)}
.pd-hist-bars i.o{background:none;border:1.5px dashed var(--pd-rose);height:6px}
.pd-hist-foot{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--pd-sep)}
.pd-hist-foot .pd-chips{flex:1;min-width:0}
.pd-hist-none{font-size:12.5px;color:var(--ink2)}
/* cycle detail rows */
.pd-list{padding:4px 16px}
.pd-list .period-history-item{background:none;box-shadow:none;border-radius:0;padding:14px 0;border-top:1px solid var(--pd-sep)}
.pd-list .period-history-item:first-child{border-top:none}
.pd-list .period-history-dates{font-family:var(--font-display);font-size:15px;font-weight:600}
.pd-list .period-link-arrow{color:var(--ink2)}

/* ---- stats ---- */
.pd-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.pd-stat{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:20px;box-shadow:var(--pd-shadow);padding:14px 16px}
.pd-stat.wide{grid-column:1 / -1}
.pd-stat small{display:block;font-size:12px;color:var(--ink2)}
.pd-stat b{display:block;margin-top:4px;font-family:var(--font-display);font-size:30px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.pd-stat b span{font-size:14px;margin:0 3px;color:var(--ink2)}
.pd-stat b .na{font-size:13px;margin:0;font-weight:400}
.pd-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;min-height:130px;padding-top:6px}
.pd-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.pd-bar-col b{font-size:12px;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums}
.pd-bar{width:100%;max-width:26px;border-radius:8px 8px 4px 4px;background:var(--pd-rose-p)}
.pd-bar.now{background:var(--pd-rose)}
.pd-stat-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--pd-sep)}
.pd-stat-row:first-of-type{border-top:none;padding-top:2px}
.pd-stat-row small{flex-shrink:0;width:30px;padding-top:5px;font-size:12px;color:var(--ink2)}
#v-period .period-disclaimer{margin:10px 8px 0;color:var(--ink2)}

/* ---- settings ---- */
.pd-settings .period-card{background:var(--pd-card);border:1px solid var(--pd-line);border-radius:22px;box-shadow:var(--pd-shadow);padding:16px 18px;margin-bottom:12px}
.pd-settings .period-card-title{font-family:var(--font-display);font-size:16px;font-weight:600}
.pd-settings .period-inset{background:none;box-shadow:none;padding:0;border-radius:0}
.pd-settings .period-inset>*+*{border-top:1px solid var(--pd-sep)}
.pd-settings .period-set-row,.pd-settings .period-switch-row{font-family:var(--font-display);font-size:14.5px}
.pd-settings .period-num input{background:var(--pd-field);box-shadow:none;border:1px solid transparent;border-radius:12px;font-family:var(--font-display);color:var(--pd-rose-d);font-weight:600}
.pd-settings .period-num em{color:var(--ink2)}
.pd-settings .period-section-label{margin:18px 6px 8px}
.pd-settings .period-setting-note{font-size:12px;line-height:1.6;color:var(--ink2)}
#v-period .toggle{background:var(--pd-dot)}
#v-period .toggle.on{background:var(--pd-rose)}
#v-period .toggle.on::after{box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pd-settings .period-info-icon{background:var(--pd-rose-pp);box-shadow:none;color:var(--pd-rose-d)}
.pd-settings .period-row-card.period-card{color:var(--ink);font-family:var(--font-display);font-weight:500}
.pd-settings .period-row-card .period-link-arrow{color:var(--ink2)}
.pd-settings .period-row-card>svg:first-child,.pd-settings .period-row-card>span:first-child svg{color:var(--pd-rose-d)}
.pd-settings .period-danger-item.period-row-card{background:var(--pd-card);border:1px solid var(--pd-line);box-shadow:var(--pd-shadow);color:var(--pd-danger);font-family:var(--font-display);font-weight:500}
/* the "more" icon is three zero-length strokes: it needs round caps to show at all */
.pd-mini svg{stroke-linecap:round;stroke-linejoin:round}
.pd-mini[data-cycle-more] svg{stroke-width:3}

/* 经期 pop-ups (hand-written, keep LAST): the shared date picker (.xl-picker) and appConfirm are appended to <body>,
   outside #v-period, so they fell back to the app-wide blue-grey theme. While 经期 is open, give just those two
   components the period rose through the same theme variables they already read - nothing else changes. */
:root:has(#v-period.active) :is(.xl-picker,.app-confirm-ov){--pri:#b9848c;--pri-deep:#93606a;--pri-pale:#f6e7e9;--accent-text:#93606a;--on-pri:#fff;--surface:#fff;--border:rgba(185,132,140,.16)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]):has(#v-period.active) :is(.xl-picker,.app-confirm-ov){--pri:#c99aa2;--pri-deep:#e0b0b8;--pri-pale:rgba(201,154,162,.2);--accent-text:#e0b0b8;--on-pri:#1a1b20;--surface:#24252b;--border:rgba(220,170,178,.16)}}
:root[data-theme="dark"]:has(#v-period.active) :is(.xl-picker,.app-confirm-ov){--pri:#c99aa2;--pri-deep:#e0b0b8;--pri-pale:rgba(201,154,162,.2);--accent-text:#e0b0b8;--on-pri:#1a1b20;--surface:#24252b;--border:rgba(220,170,178,.16)}
:root:has(#v-period.active) .xl-picker{border-radius:22px;box-shadow:0 18px 40px -20px rgba(156,102,112,.55);border-color:rgba(185,132,140,.14)}
:root:has(#v-period.active) .xl-day.today:not(.sel){box-shadow:inset 0 0 0 1.5px rgba(185,132,140,.45);color:var(--accent-text)}
:root:has(#v-period.active) .app-confirm-ov{background:rgba(70,40,48,.22)}
:root:has(#v-period.active) .app-confirm-icon.n{box-shadow:0 0 0 8px rgba(185,132,140,.1)}
:root:has(#v-period.active) .app-confirm .sheet-btns .s-btn.ok{color:#93606a;border-color:rgba(185,132,140,.3);box-shadow:0 6px 14px -8px rgba(156,102,112,.5)}