.universal-converter-page { background: radial-gradient(circle at 46% 8%, rgba(45, 133, 166, .2), transparent 29%), radial-gradient(circle at 91% 48%, rgba(77, 67, 207, .14), transparent 28%), linear-gradient(180deg, #020615, #04091a 70%, #061128); }.universal-converter-icon { color: #5ad9b0; border-color: rgba(66, 202, 160, .4); background: linear-gradient(145deg, rgba(34, 157, 126, .23), rgba(25, 71, 86, .5)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 38px rgba(48, 187, 151, .14); font-size: 38px; }.universal-converter-hero .eyebrow { color: #55d4ad; }
.universal-workspace { overflow: hidden; border: 1px solid rgba(91, 122, 160, .27); border-radius: 18px; background: linear-gradient(145deg, rgba(16, 28, 52, .97), rgba(6, 13, 32, .98)); box-shadow: 0 26px 75px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025); }.universal-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(99, 116, 157, .18); background: rgba(5, 14, 32, .68); }.universal-tabs button { min-height: 76px; padding: 13px 18px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; color: #8c95aa; border: 0; border-right: 1px solid rgba(99, 116, 157, .15); background: transparent; text-align: left; cursor: pointer; transition: .18s ease; }.universal-tabs button:last-child { border-right: 0; }.universal-tabs button > span { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; color: #71829f; border: 1px solid rgba(104, 121, 161, .2); border-radius: 9px; background: rgba(24, 37, 65, .6); font-size: 18px; }.universal-tabs button strong { align-self: end; color: #b7bdcd; font-size: 11px; }.universal-tabs button small { align-self: start; margin-top: 3px; color: #687287; font-size: 8px; }.universal-tabs button.active { background: linear-gradient(180deg, rgba(41, 141, 125, .14), rgba(25, 88, 95, .08)); box-shadow: inset 0 -2px 0 #50d1aa; }.universal-tabs button.active > span { color: #61dbb5; border-color: rgba(76, 205, 166, .31); background: rgba(37, 153, 125, .12); }.universal-tabs button.active strong { color: #f0f3f7; }
.universal-panel { padding: 24px; }.universal-panel-heading { min-height: 43px; margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.universal-panel-heading > div { display: flex; align-items: flex-start; gap: 11px; }.universal-panel-heading > div > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #56d5ad; border: 1px solid rgba(72, 196, 158, .28); border-radius: 9px; background: rgba(31, 137, 112, .11); font-size: 16px; }.universal-panel-heading h2 { margin: 1px 0 0; font-size: 15px; }.universal-panel-heading p { margin: 5px 0 0; color: #788198; font-size: 9px; }.universal-badge { padding: 5px 9px; color: #9cadd0; border: 1px solid rgba(105, 124, 167, .24); border-radius: 999px; background: rgba(22, 34, 62, .6); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }.universal-badge.live { color: #69d7af; border-color: rgba(67, 196, 151, .25); background: rgba(39, 142, 106, .1); }
.timezone-converter-grid, .currency-converter-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); overflow: hidden; border: 1px solid rgba(98, 115, 158, .2); border-radius: 13px; background: rgba(7, 16, 36, .55); }.universal-input-card, .universal-result-card { min-width: 0; padding: 22px; }.universal-input-card { border-right: 1px solid rgba(98, 115, 158, .17); }.universal-result-card { display: flex; background: rgba(4, 11, 28, .37); }.universal-field { min-width: 0; display: grid; gap: 7px; }.universal-field > span { color: #aab2c5; font-size: 9px; font-weight: 650; }.universal-field input, .universal-field select { width: 100%; height: 42px; padding: 0 12px; color: #e8ebf3; border: 1px solid #31405e; border-radius: 9px; outline: 0; background: #071126; font-size: 10px; }.universal-field input:focus, .universal-field select:focus { border-color: #43b99b; box-shadow: 0 0 0 3px rgba(56, 181, 150, .09); }.universal-swap-grid { margin-top: 15px; display: grid; grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); align-items: end; gap: 10px; }.universal-swap-button { width: 38px; height: 42px; color: #71d9bd; border: 1px solid rgba(72, 188, 157, .34); border-radius: 9px; background: rgba(37, 139, 116, .12); font-size: 17px; cursor: pointer; }.universal-swap-button:hover { border-color: #51c7a6; background: rgba(42, 156, 129, .18); }.universal-actions { margin-top: 18px; display: flex; gap: 9px; }.universal-actions button { min-width: 130px; height: 41px; padding: 0 17px; color: #aeb6ca; border: 1px solid rgba(103, 119, 159, .31); border-radius: 8px; background: rgba(17, 29, 54, .74); font-size: 9px; font-weight: 750; cursor: pointer; }.universal-actions .universal-primary-button { flex: 1; color: white; border: 0; background: linear-gradient(135deg, #32b28e, #4f67dd); box-shadow: 0 9px 24px rgba(49, 125, 159, .2); }.universal-actions button:disabled { opacity: .55; cursor: wait; }.universal-error { margin: 11px 0 0; color: #ff7d91; font-size: 9px; line-height: 1.45; }.currency-rate-note { margin: 13px 0 0; color: #697389; font-size: 8px; line-height: 1.5; }
.universal-empty { width: 100%; min-height: 255px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed rgba(99, 116, 160, .22); border-radius: 10px; background: rgba(7, 15, 34, .42); text-align: center; }.universal-empty > span { color: #506786; font-size: 34px; }.universal-empty h3 { margin: 14px 0 6px; color: #a2aabd; font-size: 12px; }.universal-empty p { max-width: 250px; margin: 0; color: #667087; font-size: 9px; line-height: 1.5; }.timezone-result, .currency-result { width: 100%; min-height: 255px; padding: 20px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(72, 177, 154, .21); border-radius: 10px; background: radial-gradient(circle at 50% 34%, rgba(41, 152, 125, .1), transparent 40%), rgba(7, 16, 35, .6); }.timezone-result > span, .currency-result > span { color: #57d2ac; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }.timezone-result > strong { margin: 10px 0 14px; color: #f0f4f6; font-size: 20px; line-height: 1.35; }.timezone-result > div, .currency-result > div { padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #9ba6ba; border-top: 1px solid rgba(99, 116, 157, .14); border-bottom: 1px solid rgba(99, 116, 157, .14); font-size: 9px; }.timezone-result button, .currency-result button { height: 28px; padding: 0 9px; color: #b7c7dc; border: 1px solid rgba(102, 127, 169, .28); border-radius: 7px; background: rgba(19, 34, 61, .72); font-size: 8px; cursor: pointer; }.timezone-result dl { margin: 13px 0 0; display: grid; gap: 9px; }.timezone-result dl > div { display: grid; gap: 3px; }.timezone-result dt { color: #657087; font-size: 8px; }.timezone-result dd { margin: 0; color: #b7bdca; font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }.currency-result > strong { margin: 10px 0 5px; color: #f2f5f7; font-size: clamp(25px, 4vw, 38px); line-height: 1.15; overflow-wrap: anywhere; }.currency-result > p { margin: 0 0 15px; color: #929caf; font-size: 10px; }.currency-result > small { margin-top: 11px; color: #667188; font-size: 8px; }
.unit-category-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }.unit-category-grid button { min-height: 35px; padding: 5px 8px; color: #828da3; border: 1px solid rgba(101, 117, 157, .21); border-radius: 8px; background: rgba(10, 20, 43, .56); font-size: 8px; font-weight: 650; cursor: pointer; }.unit-category-grid button.active { color: #dff8f0; border-color: rgba(64, 190, 155, .42); background: rgba(37, 146, 117, .15); }.unit-converter-card { padding: 22px; display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1fr) 38px minmax(0, 1fr); align-items: end; gap: 12px; border: 1px solid rgba(98, 115, 158, .2); border-radius: 13px; background: rgba(7, 16, 36, .55); }.unit-swap-button { align-self: end; }.unit-result-box { grid-column: 1 / -1; min-height: 190px; margin-top: 7px; padding: 22px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(72, 177, 154, .21); border-radius: 10px; background: radial-gradient(circle at 50% 38%, rgba(41, 152, 125, .1), transparent 40%), rgba(5, 14, 32, .58); text-align: center; }.unit-result-box > span { color: #57d2ac; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }.unit-result-box > strong { margin-top: 10px; color: #f1f5f6; font-size: clamp(28px, 5vw, 43px); line-height: 1.1; overflow-wrap: anywhere; }.unit-result-box > strong small { color: #7bdabf; font-size: .45em; }.unit-result-box > p { margin: 10px 0 15px; color: #8b96aa; font-size: 10px; }.unit-result-box > button { height: 31px; padding: 0 11px; color: #b9c9dc; border: 1px solid rgba(101, 128, 169, .3); border-radius: 7px; background: rgba(19, 34, 61, .72); font-size: 8px; cursor: pointer; }.universal-empty.compact { min-height: 130px; border: 0; background: transparent; }.universal-empty.compact > span { font-size: 29px; }
.universal-footer { min-height: 47px; padding: 10px 23px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(99, 116, 157, .15); background: rgba(5, 13, 30, .69); }.universal-footer p { margin: 0; color: #8295aa; font-size: 9px; }.universal-footer > span { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #6c768c; font-size: 8px; }.universal-footer i { color: #58d0ad; font-style: normal; }.universal-information article > span { color: #51cba7; }
@media (max-width: 860px) { .universal-panel { padding: 20px; }.timezone-converter-grid, .currency-converter-grid { grid-template-columns: 1fr; }.universal-input-card { border-right: 0; border-bottom: 1px solid rgba(98, 115, 158, .17); }.universal-empty, .timezone-result, .currency-result { min-height: 220px; }.unit-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.unit-converter-card { grid-template-columns: 1fr 38px 1fr; }.unit-amount-field { grid-column: 1 / -1; } }
@media (max-width: 560px) { .universal-tabs button { min-height: 72px; padding: 9px 4px; grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; gap: 5px; text-align: center; }.universal-tabs button > span { width: 31px; height: 31px; grid-row: 1; font-size: 14px; }.universal-tabs button strong { grid-row: 2; font-size: 9px; }.universal-tabs button small { display: none; }.universal-panel { padding: 14px; }.universal-panel-heading { align-items: flex-start; }.universal-panel-heading > div { min-width: 0; }.universal-panel-heading h2 { font-size: 14px; }.universal-panel-heading p { line-height: 1.45; }.universal-badge { display: none; }.universal-input-card, .universal-result-card { padding: 16px; }.universal-swap-grid { grid-template-columns: 1fr; align-items: stretch; gap: 12px; }.universal-swap-button { width: 100%; height: 38px; transform: none; font-size: 0; }.universal-swap-button::after { content: "⇅"; font-size: 17px; }.universal-actions { flex-direction: column; }.universal-actions button { width: 100%; min-width: 0; }.unit-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.unit-converter-card { padding: 16px; grid-template-columns: 1fr; }.unit-amount-field { grid-column: auto; }.unit-swap-button { width: 100%; transform: none; }.unit-result-box { grid-column: auto; padding: 17px; }.universal-footer { padding: 11px 17px; align-items: flex-start; flex-wrap: wrap; }.universal-footer > span { width: 100%; margin-left: 0; } }
@media (max-width: 560px) { .universal-actions { flex-direction: row; }.universal-actions button { width: auto; min-width: 0; flex: 1; padding-left: 8px; padding-right: 8px; } }