/* ============================================================
   NEXUS // DURANCIA — durancia.css
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #070b14;
    color: #ecfeff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    overflow-x: hidden;
    position: relative;
}
::selection { background-color: #00bfff; color: #070b14; }

/* --- Ambient Background Glows --- */
.glow-top {
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: rgba(0,191,255,0.1);
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
.glow-bottom {
    position: fixed;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 800px; height: 600px;
    background: rgba(0,191,255,0.05);
    border-radius: 50%;
    filter: blur(150px);
    pointer-events: none;
    z-index: 0;
}

/* --- App Container --- */
.app-wrap {
    width: 100%;
    max-width: 32rem;
    position: relative;
    z-index: 10;
}

/* --- Header --- */
.app-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    text-align: center;
    transition: transform 0.3s ease;
}
.app-header h1 {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #00bfff;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.app-header .sub {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
    color: rgba(0,191,255,0.6);
    text-transform: uppercase;
    padding-top: 0.25rem;
    display: none;
}

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(0,191,255,0.5);
    text-decoration: none;
    transition: color 0.3s ease;
    margin-bottom: 1.5rem;
}
.back-link:hover { color: #00bfff; }
.back-link iconify-icon { transition: transform 0.3s ease; }
.back-link:hover iconify-icon { transform: translateX(-4px); }

/* --- Main Panel --- */
.main-panel {
    background: rgba(10,17,34,0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0,191,255,0.3);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,191,255,0.15), inset 0 0 10px rgba(0,191,255,0.05);
    transition: transform 0.3s ease;
}

/* Top laser line */
.laser-line {
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, transparent, #00bfff, transparent);
    opacity: 0.8;
}

.panel-body { padding: 1.25rem; }

/* --- Section Divider --- */
.section-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.section-divider.my { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.divider-line-l {
    height: 1px; flex: 1;
    background: linear-gradient(to right, transparent, rgba(0,191,255,0.3));
}
.divider-line-r {
    height: 1px; flex: 1;
    background: linear-gradient(to left, transparent, rgba(0,191,255,0.3));
}
.divider-label {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: #00bfff;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.divider-label.white { color: #fff; }

/* --- Input Group --- */
.input-group { margin-bottom: 1.25rem; }
.input-group:last-of-type { margin-bottom: 0; }

.input-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(207,250,254,0.9);
    margin-bottom: 0.375rem;
}
.input-label iconify-icon { color: #00bfff; font-size: 1.125rem; }

.input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* +/- control buttons — stejný vizuál jako .calc-btn */
.ctrl-btn {
    flex-shrink: 0;
    width: 3rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,191,255,0.1);
    border: 1px solid rgba(0,191,255,0.5);
    border-radius: 0.75rem;
    color: #00bfff;
    font-size: 1.375rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0 10px rgba(0,191,255,0.2), inset 0 0 6px rgba(0,191,255,0.15);
    transition: background 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.ctrl-btn:hover {
    background: rgba(0,191,255,0.2);
    border-color: rgba(0,191,255,0.8);
    color: #fff;
    box-shadow: 0 0 20px rgba(0,191,255,0.45), inset 0 0 10px rgba(0,191,255,0.25);
}
.ctrl-btn:active {
    transform: scale(0.94);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.5);
}

/* Input wrapper with unit suffix */
.input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}
.input-wrap .unit-suffix {
    position: absolute;
    right: 0.75rem;
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(0,191,255,0.4);
    pointer-events: none;
    transition: color 0.2s ease;
}
.input-wrap:focus-within .unit-suffix { color: rgba(0,191,255,0.8); }

/* Number input */
input[type="number"] {
    width: 100%; height: 3rem;
    background: rgba(7,11,20,0.8);
    border: 1px solid rgba(0,191,255,0.3);
    border-radius: 0.75rem;
    padding: 0 1rem;
    text-align: center;
    font-size: 1.125rem;
    font-family: 'JetBrains Mono', monospace;
    color: #00bfff;
    outline: none;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
}
input[type="number"]::placeholder { color: rgba(0,191,255,0.2); }
input[type="number"]:focus {
    border-color: #00bfff;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,191,255,0.5);
    background: rgba(0,191,255,0.05);
}

/* Value state styles */
.val-dimmed {
    color: rgba(0,191,255,0.4) !important;
    text-shadow: none !important;
}
.val-active {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(0,191,255,0.7) !important;
}

/* Target input group — extra bottom margin */
.target-group { margin-bottom: 2rem; }

/* --- Calculate Button --- */
.calc-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: rgba(0,191,255,0.1);
    border: 1px solid rgba(0,191,255,0.5);
    color: #00bfff;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 15px rgba(0,191,255,0.3), inset 0 0 10px rgba(0,191,255,0.2);
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.calc-btn:hover:not(:disabled) {
    background: rgba(0,191,255,0.2);
    color: #fff;
    box-shadow: 0 0 25px rgba(0,191,255,0.5), inset 0 0 15px rgba(0,191,255,0.3);
}
.calc-btn:active:not(:disabled) { transform: scale(0.98); }
.calc-btn:disabled { opacity: 0.7; pointer-events: none; }
.calc-btn iconify-icon { font-size: 1.25rem; }
.calc-btn .btn-inner { display: flex; align-items: center; gap: 0.75rem; position: relative; z-index: 1; }

/* --- Result Panel --- */
#pal-result { margin-top: 2rem; }
#pal-result.hidden { display: none; }

.result-table {
    border: 1px solid rgba(0,191,255,0.3);
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgba(7,11,20,0.5);
    box-shadow: 0 0 20px rgba(0,191,255,0.15), inset 0 0 10px rgba(0,191,255,0.05);
}
.result-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    gap: 0.25rem 1rem;
    border-bottom: 1px solid rgba(0,191,255,0.2);
    transition: background 0.2s ease;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: rgba(0,191,255,0.05); }
.result-row.highlight {
    background: rgba(0,191,255,0.08);
    padding: 1rem 1.25rem;
}
.result-row.highlight:hover { background: rgba(0,191,255,0.12); }

.result-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(207,250,254,0.8);
}
.result-label.white { color: #fff; font-weight: 600; font-size: 0.875rem; }

.result-value-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin-left: auto;
}
.result-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #00bfff;
}
.result-value.big {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 8px rgba(0,191,255,0.5);
}
.result-unit {
    font-size: 0.875rem;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(0,191,255,0.6);
}
.result-unit.cyan { color: #00bfff; }

/* --- Footer --- */
.app-footer {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: #526b8d;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.6;
}
.app-footer .mick {
    color: #00bfff;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px rgba(0,191,255,0.8);
}

/* --- Animations --- */
@keyframes organic-shake-1 {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    25% { transform: translate(1px, 0.5px) rotate(0.2deg); }
    50% { transform: translate(-0.5px, -1px) rotate(-0.2deg); }
    75% { transform: translate(-1px, 0.5px) rotate(0.1deg); }
}
@keyframes organic-shake-2 {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    25% { transform: translate(-0.5px, 1px) rotate(-0.1deg); }
    50% { transform: translate(1px, -0.5px) rotate(0.2deg); }
    75% { transform: translate(0.5px, -1px) rotate(-0.2deg); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.shake-element-1 { animation: organic-shake-1 0.3s infinite alternate ease-in-out; }
.shake-element-2 { animation: organic-shake-2 0.35s infinite alternate ease-in-out; }
.animate-spin { animation: spin 1s linear infinite; display: inline-block; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
    body { padding: 2rem; }
    .app-header { margin-bottom: 2.5rem; }
    .app-header h1 { font-size: 2.25rem; }
    .app-header .sub { display: block; }
    .panel-body { padding: 2rem; }
    .input-row { gap: 0.75rem; }
    .input-wrap .unit-suffix { right: 1rem; }
    .result-row { padding: 0.75rem 1.25rem; }
    .result-row.highlight { padding: 1.25rem; }
    .result-label { font-size: 0.875rem; }
    .result-label.white { font-size: 1rem; }
    .result-value { font-size: 1.5rem; }
    .result-value.big { font-size: 2.5rem; }
    .calc-btn { font-size: 1rem; }
}