.cgp body{ margin:0;padding:0;} .cgp{ --bg:#f4f6fb;--card:#ffffff;--fg:#1c1c1e;--muted:#6b7280;--muted-2:#374151;--grid:#e5e7eb;--ring:#d1d1d6;--accent:#0a84ff;--focus-accent:#bf5af2;--accent-contrast:#ffffff;--today-bg:#d6ecff;--picked-bg:#eaf4ff;--ctl-bg:#ffffff;--ctl-text:var(--fg);--ctl-border:#d1d1d6;--ctl-hover-bg:#f2f2f7;--ctl-active-bg:#e5e7eb;--ctl-focus-ring:rgba(10,132,255,.35);--ctl-radius:0;--ctl-border-w:1px;--ctl-padding-y:2px;--ctl-padding-x:5px;--ctl-h:32px;--ctl-shadow:none;--chev:url("data:image/svg+xml,%3Csvg width='22' height='22' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l5 5 5-5'/%3E%3C/svg%3E");margin:0;padding:0;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;} .cgp .wrap{max-width:1200px;margin:5px;padding:0 1px} .cgp header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px} .cgp h1{font-size:18px;margin:0} .cgp .meta{font-size:12px;color:var(--muted)} .cgp .notice{margin:6px 0 0;color:var(--muted);font-size:12px} .cgp .fixed-note{margin:6px 0 0;font-size:12px;color:#8b5cf6} .cgp .controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .cgp .field{display:flex;align-items:center;gap:8px} .cgp .field>label{font-size:12px;color:var(--muted)} .cgp .ctl{ border:var(--ctl-border-w) solid var(--ctl-border);background:var(--ctl-bg);color:var(--ctl-text);border-radius:var(--ctl-radius);padding:var(--ctl-padding-y) var(--ctl-padding-x);height:var(--ctl-h);display:inline-flex;align-items:center;gap:8px;outline:none;box-shadow:var(--ctl-shadow);font-size:18px;transition:background .15s, border-color .15s, transform .02s;box-sizing:border-box;} .cgp .ctl:hover{background:var(--ctl-hover-bg)} .cgp .ctl:active{background:var(--ctl-active-bg);transform:translateY(.5px)} .cgp .ctl:focus-visible{box-shadow:0 0 0 3px var(--ctl-focus-ring);border-color:var(--accent)} .cgp select.select{ -webkit-appearance:none;appearance:none;background:var(--ctl-bg) var(--chev) no-repeat right 12px center/22px 22px;min-width:auto;padding-right:36px;width:auto;} .cgp .ctl{ height:var(--ctl-h);font-size:16px;} .cgp .lang{display:none !important} .cgp .controls.panels{display:grid !important;grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch;margin-top:6px;width:100%} .cgp fieldset.panel{border:2px dashed #499173;border-radius:0px;padding:10px 10px 10px;background:#fff} .cgp fieldset.panel legend{padding:0 8px;margin-left:8px;color:#499173;font-weight:700;letter-spacing:.2px} .cgp .panel .fields.two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:flex-start} @media (max-width:640px){.cgp .panel .fields.two-cols{grid-template-columns:1fr}} .cgp .panel .fields .field{min-width:auto} @media (max-width:640px){ .cgp .controls.panels{grid-template-columns:1fr} } .cgp{ --ctl-h:32px;} .cgp .ctl{ font-size:16px;} .cgp .field.stack{flex-direction:column;align-items:flex-start;gap:4px} .cgp .field.stack>label{display:block;width:100%;margin-bottom:2px} .cgp input[type="date"].input{ -webkit-appearance:none;appearance:none;background:var(--ctl-bg);color:var(--fg);border:var(--ctl-border-w) solid var(--ctl-border);border-radius:var(--ctl-radius);height:var(--ctl-h);min-width:auto;width:auto;padding:var(--ctl-padding-y) var(--ctl-padding-x);font-size:16px;line-height:1;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;outline:none;box-shadow:var(--ctl-shadow);transition:background .15s, border-color .15s, transform .02s;} .cgp input[type="date"].input:hover{background:var(--ctl-hover-bg)} .cgp input[type="date"].input:active{background:var(--ctl-active-bg);transform:translateY(.5px)} .cgp input[type="date"].input:focus-visible{box-shadow:0 0 0 3px var(--ctl-focus-ring);border-color:var(--accent)} .cgp input[type="date"].input::-webkit-datetime-edit{padding:0} .cgp input[type="date"].input::-webkit-datetime-edit-fields-wrapper{display:inline-flex;align-items:center;height:100%} .cgp input[type="date"].input::-webkit-calendar-picker-indicator{margin-right:2px} @supports (-moz-appearance:none){ .cgp input[type="date"].input{padding-top:0;padding-bottom:0} } .cgp .info-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0} .cgp .info-card{background:var(--card);border:1px solid var(--ring);border-radius:0px;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.04)} .cgp .info-title{font-size:16px;font-weight:500;color:#3a3a3c;margin-bottom:6px} .cgp .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:start;font-size:14px} .cgp .k{color:var(--muted)} .cgp .v{color:#1f2937} .cgp .gender-big{font-size:32px} .cgp .calendar{background:var(--card);border:1px solid var(--ring);border-radius:0px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05);margin-top:8px} .cgp .cal-head{display:grid;font-size:20px;letter-spacing:1.5px;text-transform:uppercase;grid-template-columns:repeat(7,1fr);background:#E6E6F0;padding:6px 0;color:#3a3a3c;font-weight:600} .cgp .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--grid)} .cgp .cell{ background:var(--card);min-height:120px;padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;user-select:none;border-radius:0;} .cgp .gday{font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:space-between} .cgp .moon{font-size:18px;line-height:1;opacity:.95;margin-left:8px} .cgp .gz{font-size:22px;color:var(--muted-2);letter-spacing:.4px;line-height:1.12;margin-top:2px} .cgp .lday{font-size:12px;color:var(--muted);line-height:1.25} .cgp .lday .han{font-size:18px;line-height:1.1;vertical-align:baseline;color:#cc1f1a !important;} .cgp .lday .lunar-first{color:#0006CE;font-weight:500;} .cgp .gender{font-size:20px;line-height:1;margin-top:4px} .cgp .other-month{opacity:.45} .cgp .today{outline:2px solid var(--accent);outline-offset:-2px;background:var(--today-bg)} .cgp .picked{box-shadow:inset 0 0 0 2px var(--accent);background:var(--picked-bg)} .cgp .legend{margin-top:26px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap} .cgp .pill{padding:2px 8px;border:1px solid var(--ring);border-radius:0px;color:#3a3a3c;background:#f2f2f7} .cgp .foot{margin-top:10px;color:var(--muted);font-size:12px} .cgp .diag{margin-top:10px;background:#fff;border:1px solid var(--ring);border-radius:0px;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.04);color:#374151;font-size:12px} .cgp .diag b{color:#1f2937} .cgp .divider{height:1px;background:var(--grid);margin:8px 0} @media (max-width:640px){ .cgp .info-cards{ margin:26px 0;grid-template-columns:1fr} } @media (max-width:640px){ .cgp select.select{min-width:auto} .cgp input[type="date"].input{min-width:auto} .cgp .cell{min-height:110px} .cgp .gz{font-size:21px} .cgp .lday .han{font-size:17px;color:#cc1f1a !important;} } .cgp .cell:focus, .cgp .cell:focus-visible{ outline:2px solid var(--focus-accent) !important;outline-offset:-2px !important;box-shadow:inset 0 0 0 2px var(--focus-accent) !important;} .cgp .cell.today{ background:var(--today-bg);outline:none;} .cgp .image-card img{display:block;width:100%;height:auto;border-radius:0px;border:1px solid var(--ring)} .cgp .image-card .note{margin-top:6px;font-size:12px;color:var(--muted);display:block} .cgp .image-card .info-body{min-height:90px} .cgp .gender{ font-size:30px;line-height:1;margin-top:4px;display:block;text-align:center;} .cgp .calendar{ margin-top:35px;margin-bottom:35px;} .cgp .image-card{ margin-bottom:30px;} .cgp #todayBtn{ justify-content:center;} .cgp .gday .gnum.jq{ color:#d60000;font-weight:700;} .cgp #lunarAgeNote{ font-size:14px;text-align:center;} .cgp .hancol { color:#cc1f1a !important;font-weight:500 !important;} .cgp .calendar .cal-grid .cell.jq-day{ background:#effaf3 !important;} .cgp .calendar .cal-grid .cell.jq-day.today{ background:var(--today-bg) !important;box-shadow:inset 0 0 0 9999px rgba(239,250,243,.66) !important;} .cgp .calendar .cal-grid .cell.jq-day.picked{ background:var(--picked-bg) !important;box-shadow:inset 0 0 0 9999px rgba(239,250,243,.66), inset 0 0 0 2px var(--accent) !important;} .cgp .cell{ position:relative;}