.timestamp-tool-page { background: radial-gradient(circle at 46% 10%, rgba(124, 65, 219, .19), transparent 28%), radial-gradient(circle at 87% 48%, rgba(65, 61, 177, .13), transparent 30%), linear-gradient(180deg, #020615, #05091a 72%, #071027); }.timestamp-page-icon { color: #a55cff; border-color: rgba(145, 84, 239, .4); background: linear-gradient(145deg, rgba(126, 65, 221, .24), rgba(57, 31, 108, .42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 36px rgba(129, 70, 222, .15); font-size: 40px; }.timestamp-page-hero .eyebrow { color: #a45ef4; }
.timestamp-workspace { border: 1px solid rgba(103, 118, 166, .24); border-radius: 18px; overflow: hidden; background: linear-gradient(145deg, rgba(18, 28, 53, .95), rgba(6, 14, 33, .97)); box-shadow: 0 25px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025); }.current-time-panel { padding: 25px; background: linear-gradient(110deg, rgba(32, 29, 70, .74), rgba(13, 22, 47, .8)); }.current-time-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.current-time-heading > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }.current-time-heading h2 { margin: 0; font-size: 17px; }.current-time-heading p { grid-column: 2; margin: 4px 0 0; color: #8e95aa; font-size: 10px; }.current-time-heading > span { color: #858da4; font-size: 9px; }.live-indicator { padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px; color: #6cdf9a; border: 1px solid rgba(77, 213, 135, .26); border-radius: 999px; background: rgba(48, 178, 104, .08); font-size: 8px; font-weight: 800; text-transform: uppercase; }.live-indicator i { width: 5px; height: 5px; border-radius: 50%; background: #58df90; box-shadow: 0 0 8px rgba(88, 223, 144, .75); }
.current-time-values { margin-top: 18px; display: grid; grid-template-columns: 1fr 1.18fr 1.45fr; gap: 10px; }.current-time-values article { min-width: 0; min-height: 91px; padding: 13px 14px; position: relative; display: grid; align-content: center; gap: 8px; border: 1px solid rgba(118, 104, 185, .24); border-radius: 10px; background: rgba(7, 15, 36, .7); }.current-time-values article > span { color: #8f96aa; font-size: 9px; }.current-time-values strong { overflow: hidden; color: #f0ecff; font: 750 18px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }.current-time-values button { height: 28px; padding: 0 8px; position: absolute; right: 10px; top: 10px; color: #b999f4; border: 1px solid rgba(154, 101, 235, .28); border-radius: 6px; background: rgba(111, 58, 186, .08); font-size: 8px; cursor: pointer; }.current-time-values button:disabled { opacity: .45; }.current-date-card strong { font: 650 11px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; white-space: normal; }.current-date-card small { overflow: hidden; color: #9b8db7; font: 9px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.timestamp-converter-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(101, 116, 160, .17); }.timestamp-converter-panel { min-width: 0; padding: 25px; }.timestamp-converter-panel:first-child { border-right: 1px solid rgba(101, 116, 160, .17); }.timestamp-panel-heading { margin-bottom: 19px; display: flex; align-items: flex-start; gap: 12px; }.timestamp-panel-heading > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: #ba91ff; border: 1px solid rgba(155, 94, 240, .28); border-radius: 8px; background: rgba(112, 58, 185, .1); font-size: 9px; font-weight: 800; }.timestamp-panel-heading h2 { margin: 0; font-size: 15px; }.timestamp-panel-heading p { margin: 5px 0 0; color: #858da4; font-size: 10px; line-height: 1.45; }
.timestamp-field { margin-top: 13px; display: grid; gap: 7px; }.timestamp-field > span { color: #b6bbce; font-size: 10px; }.timestamp-field input, .timestamp-field select { width: 100%; height: 43px; padding: 0 12px; color: #eff1f8; border: 1px solid #35415f; border-radius: 8px; outline: 0; background: #081126; font-size: 11px; }.timestamp-field input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }.timestamp-field input:focus, .timestamp-field select:focus { border-color: #925deb; box-shadow: 0 0 0 3px rgba(146, 93, 235, .1); }.timestamp-field input::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(.2) saturate(1.4) hue-rotate(225deg); }.timestamp-actions { margin-top: 17px; display: grid; grid-template-columns: 1fr auto; gap: 9px; }.timestamp-actions button { min-width: 86px; height: 41px; padding: 0 14px; color: #c9cede; border: 1px solid rgba(104, 119, 160, .32); border-radius: 8px; background: rgba(18, 29, 55, .82); font-size: 10px; font-weight: 700; cursor: pointer; }.timestamp-actions button:disabled { opacity: .45; cursor: not-allowed; }.timestamp-actions .timestamp-primary-button { color: white; border: 0; background: linear-gradient(135deg, #8950e5, #5c63df); box-shadow: 0 8px 22px rgba(112, 75, 213, .2); }.timestamp-actions button:hover:not(:disabled) { filter: brightness(1.1); }.timestamp-error { margin: 11px 0 0; color: #ff7d90; font-size: 10px; }
.timestamp-output-list { min-height: 187px; margin-top: 17px; padding: 8px; display: grid; align-content: start; gap: 7px; border: 1px solid rgba(99, 113, 155, .18); border-radius: 10px; background: rgba(5, 13, 30, .55); }.timestamp-output-list > p { margin: auto; align-self: center; color: #737c94; font-size: 10px; }.timestamp-output-list > div { min-width: 0; min-height: 37px; padding: 7px 7px 7px 10px; display: grid; grid-template-columns: 73px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid rgba(97, 111, 151, .14); border-radius: 7px; background: rgba(12, 21, 44, .7); }.timestamp-output-list span { color: #888fa3; font-size: 8px; }.timestamp-output-list code { overflow: hidden; color: #dfe3ef; font: 9px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }.timestamp-output-list button { width: 27px; height: 27px; display: grid; place-items: center; color: #b48bf2; border: 1px solid rgba(151, 96, 230, .25); border-radius: 6px; background: rgba(107, 57, 177, .08); font-size: 9px; cursor: pointer; }.detected-unit-badge { margin-top: 10px; display: inline-block; color: #b498df; font-size: 9px; }
.timestamp-footer { min-height: 48px; padding: 8px 25px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(101, 116, 160, .14); background: rgba(5, 13, 31, .62); }.timestamp-status { margin: 0; color: #b892f3; font-size: 10px; }.timestamp-footer button { height: 31px; padding: 0 11px; color: #aab0c4; border: 1px solid rgba(105, 118, 157, .25); border-radius: 7px; background: rgba(18, 28, 51, .7); font-size: 9px; cursor: pointer; }.timestamp-information article > span { color: #a35ff3; }
@media (max-width: 860px) { .current-time-values { grid-template-columns: 1fr 1fr; }.current-date-card { grid-column: 1 / -1; }.timestamp-converter-grid { grid-template-columns: 1fr; }.timestamp-converter-panel:first-child { border-right: 0; border-bottom: 1px solid rgba(101, 116, 160, .17); } }
@media (max-width: 560px) { .current-time-panel, .timestamp-converter-panel { padding: 18px; }.current-time-heading { align-items: flex-start; flex-direction: column; gap: 8px; }.current-time-values { grid-template-columns: 1fr; }.current-date-card { grid-column: auto; }.current-time-values strong { font-size: 16px; }.timestamp-actions { grid-template-columns: 1fr; }.timestamp-footer { padding: 10px 18px; align-items: flex-start; flex-direction: column; }.timestamp-footer button { width: 100%; } }