/* Layout hierarchy: primary clock, paired time fields, then computed metadata. */
.live-toolbar{display:flex;align-items:center;justify-content:space-between;padding:23px 30px 0;gap:16px}.live-toolbar h2{font-size:17px;font-weight:600}.live-controls{display:flex;align-items:center;gap:15px}.live-controls>span{font-size:12px;color:#b7c8e5}.live-controls .ghost{min-width:66px}
.live-panel .live{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:42px;padding:12px 30px 28px;background:transparent;border-radius:0}.live-panel .live>div{display:block}.live-focus .clock{font-size:52px;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:1px;margin:0 0 3px}.live-focus>label{display:block;margin:20px 0 8px}.live-focus .zone-trigger{max-width:380px}.live-stamps{display:flex!important;flex-direction:column;gap:12px}.stamp-tile{padding:15px 20px;background:#ffffff06;border:1px solid #ffffff14;border-radius:10px}.stamp-tile .live-label{letter-spacing:1px}.stamp-tile .live-number{font-size:25px;line-height:1.5;font-variant-numeric:tabular-nums;margin-top:4px}.live-world{padding:22px 30px 27px;background:#ffffff03}.live-world .world-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.live-world .city{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:13px;border:1px solid #ffffff15;border-radius:11px;background:#ffffff04;min-width:0}.live-world .zone-trigger{background:transparent;border-color:#ffffff1f;min-height:63px;padding:8px 24px 8px 9px}.live-world .city-time{font-size:26px;margin-top:13px;line-height:1.4;font-variant-numeric:tabular-nums}.live-world .city-meta{margin-top:4px;max-width:none;font-size:12px;letter-spacing:0}.live-world .zone-subtitle{font-size:11px;overflow-wrap:anywhere}.live-world .zone-title{font-size:13px}.live-world .card-heading{margin-bottom:14px}
.timezone-fields,.difference-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:20px;border:0;background:none}.timezone-origin,.timezone-destination,.time-endpoint{padding:21px;border:1px solid #e4eaf4;border-radius:11px;background:#f9fbff;min-width:0;display:block}.timezone-destination{background:#f1f5ff;border-color:#dce6fc}.field-heading{display:flex;align-items:center;gap:9px;margin-bottom:19px}.field-heading h4{font-size:15px;font-weight:600;margin:0;color:#344866}.field-heading>span:last-child:not(.field-index){margin-left:auto;font-size:12px;color:#7a8ba5}.field-index{display:grid;place-items:center;width:25px;height:25px;background:#e8effc;color:#5775b0;border-radius:7px;font:12px ui-monospace,monospace}.timezone-fields label,.difference-fields label{font-size:13px;margin:14px 0 7px}.timezone-fields .zone-trigger,.difference-fields .zone-trigger{min-height:66px}.target-time{margin-top:14px;min-height:76px}.target-time:empty::before{content:'输入完整源时间后显示结果';color:#7d8ca5;font-size:14px;display:block;padding-top:25px}.target-time .result-label{margin-bottom:7px;font-size:13px}.target-time .value{font-size:17px;line-height:1.65;font-weight:600;color:#244ec3;font-variant-numeric:tabular-nums}.target-time .copy{top:25px}.target-time .result-line{padding-right:36px}
.timezone-card .zone-result{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:0;background:#f8faff;border:1px solid #e5ecf7;border-radius:9px;overflow:hidden;margin-top:20px}.timezone-card .zone-result .result-line,.timezone-card .zone-result .result-line:first-child,.timezone-card .zone-result .result-line:nth-child(2),.timezone-card .zone-result .result-line:last-child{grid-column:auto;background:transparent;border:0;border-radius:0;padding:15px 16px;min-width:0;margin:0}.timezone-card .zone-result .result-line+.result-line{border-left:1px solid #e5ecf7}.timezone-card .zone-result .value{font-family:inherit;font-size:13px;font-weight:500;line-height:1.75}.timezone-card .zone-result .copy{display:none}.timezone-card .zone-result{min-height:0}.timezone-card .zone-result.error{display:block}.add-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}.add-fields label:first-child{margin-top:0}.add-fields .result{margin-top:14px}.difference-card{margin-top:22px}.difference-fields .field-heading{margin-bottom:17px}.difference-result{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;min-height:0;padding:21px;margin-top:20px;background:#eef3ff;border:1px solid #dfe8fc}.difference-result .result-line{margin:0}.difference-result .result-line+.result-line{border-left:1px solid #d4dff5;padding-left:22px}.difference-result .value{font-size:21px;line-height:1.65;font-weight:600;color:#2d5199;letter-spacing:-.3px}.difference-result.error{display:block}
/* Matching field panels keep input heights aligned; results have their own row. */
.format-fields,.add-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}.tool-field{padding:21px;border:1px solid #e4eaf4;border-radius:11px;background:#f9fbff;min-width:0}.tool-field>label:first-child{margin-top:0}.tool-field .zone-trigger,.tool-field .input-row input,.tool-field .input-row select{height:66px;min-height:66px}.tool-field>input{height:48px}.tool-field .field-heading{margin-bottom:19px}.tool-field .field-heading+label{margin-top:0}.tool-field .note{margin-top:18px;line-height:1.9}.format-card .formats-grid{background:transparent;border:0;padding:0;gap:12px;grid-auto-rows:1fr}.format-card .formats-grid .result-line{padding:16px 52px 16px 18px;border:1px solid #e5ecf7;background:#f8faff;border-radius:9px;min-height:94px;display:flex;flex-direction:column;justify-content:center}.format-card .formats-grid .copy{top:29px;right:14px}.format-card .formats-grid .value{line-height:1.8}.format-card .formats-grid.error{display:block;padding:18px;background:#fff5f5;border:1px solid #f3dfe1}.add-summary{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;background:#eef3ff;border-color:#dfe8fc;padding:21px;min-height:108px}.add-summary .result-line{margin:0}.add-summary .result-line+.result-line{border-left:1px solid #d4dff5;padding-left:22px}.add-summary .value{font-size:18px;font-weight:600;color:#2d5199;line-height:1.8}.add-summary.error{display:block}
@media(max-width:700px){.format-fields,.add-fields{grid-template-columns:minmax(0,1fr);gap:14px}.tool-field{padding:17px}.add-summary{grid-template-columns:minmax(0,1fr);gap:15px;padding:18px}.add-summary .result-line+.result-line{border-left:0;border-top:1px solid #d4dff5;padding:14px 36px 0 0}.add-summary .result-line+.result-line .copy{top:26px}.add-summary .value{font-size:16px}.format-card .formats-grid .result-line{min-height:94px}.tool-field .input-row select{width:118px}}
/* Single-line controls stay compact even alongside a two-line timezone picker. */
.tool-field .input-row{align-items:center}.tool-field .input-row input,.tool-field .input-row select{height:48px;min-height:48px}.format-fields .input-row{min-height:66px}.add-summary{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
@media(max-width:700px){.add-summary{grid-template-columns:minmax(0,1fr)}}
.stamp-tile{position:relative;padding-right:64px}.live-copy{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:38px;height:38px;padding:9px;display:grid;place-items:center;color:#d4dff7;background:#ffffff09;border:1px solid #ffffff26;border-radius:9px}.live-copy svg{width:18px;height:18px}.live-copy:hover{background:#ffffff18}.live-copy:active{transform:translateY(-50%) scale(.94)}
@media(max-width:700px){.stamp-tile{padding-right:11px}.stamp-tile .live-label{display:block;padding-right:30px;min-height:30px;font-size:10px;line-height:1.5}.live-copy{right:7px;top:8px;transform:none;width:30px;height:30px;padding:6px}.live-copy:active{transform:scale(.94)}.stamp-tile .live-number{margin-top:9px}}
@media(max-width:360px){.stamp-tile{padding-right:49px}.stamp-tile .live-label{padding-right:0;min-height:0;font-size:11px}.stamp-tile .live-number{margin-top:0}.live-copy{top:50%;transform:translateY(-50%)}.live-copy:active{transform:translateY(-50%) scale(.94)}.stamp-tile{display:block}}
/* Transitions respond to interaction, without looping motion in the workspace. */
.result:empty{display:block;min-height:100px}.result:empty::before{content:'输入完整内容后显示结果';font-size:14px;color:#7b8ba5}.timezone-card .zone-result:empty{display:block;min-height:64px;padding:17px}.difference-result:empty{min-height:108px}
.auto-note span{animation:none}.card,.live-panel{animation:none}.result-ready{animation:none}.result-ready .result-line{animation:none}.card{transition:border-color .22s ease,box-shadow .22s ease}.card:focus-within{border-color:#ccd9f5;box-shadow:0 5px 22px #2955a008}.time-endpoint,.timezone-origin,.timezone-destination{transition:border-color .2s ease,box-shadow .2s ease}.time-endpoint:focus-within,.timezone-origin:focus-within,.timezone-destination:focus-within{border-color:#adc3f0;box-shadow:0 0 0 3px #2b59e807}.zone-trigger:hover{transform:none}.zone-trigger:active{transform:scale(.995)}.zone-option:hover,.active-option{transform:none}.zone-dialog{transition:opacity .22s ease,transform .26s cubic-bezier(.16,1,.3,1);transform:translateY(14px) scale(.97)}.zone-dialog.is-visible{transform:translateY(0) scale(1)}.zone-dialog.is-closing{transition-duration:.16s;transform:translateY(8px) scale(.98)}.zone-dialog::backdrop{transition:background .22s ease,backdrop-filter .22s ease}.zone-dialog.is-visible::backdrop{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.zone-dialog.is-closing::backdrop{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}.dialog-close{transition:background .18s ease,transform .18s ease}.dialog-close:hover{background:#e6edfb}.dialog-close:active{transform:scale(.94)}body.modal-open{overflow:hidden}#toast{animation:toast-in .2s ease-out}@keyframes toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:1040px){.live-world .world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.live-panel .live{gap:26px}.timezone-card .zone-result{grid-template-columns:1fr 1fr}.timezone-card .zone-result .result-line:last-child{grid-column:1/-1;border-left:0;border-top:1px solid #e5ecf7}.live-world .zone-subtitle{font-size:12px}}
@media(max-width:700px){.live-toolbar{padding:20px 20px 0}.live-controls{gap:9px}.live-controls>span{font-size:11px}.live-panel .live{grid-template-columns:minmax(0,1fr);gap:22px;padding:12px 20px 23px}.live-focus .clock{font-size:46px}.live-focus .zone-trigger{max-width:none}.live-focus>label{margin-top:15px}.live-stamps{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stamp-tile{padding:13px 11px}.stamp-tile .live-label{font-size:11px;letter-spacing:0}.stamp-tile .live-number{font-size:clamp(14px,3.6vw,22px);letter-spacing:-.5px;white-space:nowrap}.live-world{padding:18px 20px 20px}.live-world .world-grid{gap:9px}.live-world .city{padding:10px}.live-world .city-time{font-size:23px}.live-world .zone-subtitle{font-size:11px}.live-world .zone-trigger{padding-right:22px}.live-world .zone-title{font-size:13px}.live-world .zone-chevron{right:7px}.timezone-fields,.difference-fields,.add-fields{grid-template-columns:minmax(0,1fr);gap:14px}.timezone-origin,.timezone-destination,.time-endpoint{padding:17px}.field-heading{margin-bottom:13px}.target-time .value{font-size:16px}.timezone-card .zone-result{grid-template-columns:1fr}.timezone-card .zone-result .result-line+.result-line{border-left:0;border-top:1px solid #e5ecf7}.timezone-card .zone-result .result-line:last-child{grid-column:auto}.difference-result{grid-template-columns:1fr;gap:15px;padding:18px}.difference-result .result-line+.result-line{border-left:0;border-top:1px solid #d4dff5;padding:14px 36px 0 0}.difference-result .value{font-size:19px}.difference-result .result-line+.result-line .copy{top:26px}.difference-card .card-heading{align-items:start}.difference-card .card-heading .muted{font-size:12px}}
@media(max-width:360px){.live-world .world-grid{grid-template-columns:1fr}.live-world .city{display:flex;flex-direction:column}.live-world .city-time{font-size:24px;margin-top:10px}.live-world .city-meta{max-width:none;font-size:12px}.live-stamps{grid-template-columns:1fr}.stamp-tile{display:flex;align-items:center;justify-content:space-between;gap:10px}.stamp-tile .live-number{font-size:16px;margin-top:0}.stamp-tile .live-label{white-space:nowrap}.live-controls>span{max-width:90px}.live-focus .clock{font-size:43px}}
@media(prefers-reduced-motion:reduce){.card,.live-panel,.zone-trigger,.zone-dialog,.zone-dialog::backdrop,.dialog-close{transition:none!important}#toast{animation:none!important}}