.calculator{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border-radius:22px;padding:25px;box-shadow:0 10px 30px rgba(26,75,95,.08);margin-bottom:30px;margin-left:auto;margin-right:auto;box-sizing:border-box;border:1px solid #d9e3ee;position:relative;overflow:hidden}.calculator::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(107,158,158,.12),transparent 38%),radial-gradient(circle at bottom left,rgba(26,75,95,.08),transparent 35%);pointer-events:none}.form-row{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:18px;align-items:flex-start;position:relative;z-index:1}.form-group{flex:1;min-width:150px;text-align:center;display:flex;flex-direction:column;box-sizing:border-box}.form-group label{margin-bottom:6px;font-weight:700;color:#2e546a;font-size:14px}.form-control{width:100%;padding:10px 12px;border:1.5px solid #ecdca8;border-radius:12px;font-size:15px;transition:border-color .2s ease,box-shadow .2s ease;text-align:center;box-sizing:border-box;min-width:0;background:#fefcf5;color:#1a3f5c}.form-control:focus{border-color:#1a4b5f;outline:none;box-shadow:0 0 0 4px rgba(26,75,95,.08);background:#fff}.btn{background:linear-gradient(135deg,#1a4b5f 0%,#2b6a79 100%);color:#fff;border:0;padding:10px 20px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;height:42px;white-space:nowrap;line-height:22px;box-sizing:border-box;box-shadow:0 8px 18px rgba(26,75,95,.14)}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(26,75,95,.18);filter:saturate(1.03)}.now{background:linear-gradient(135deg,#e67e22,#f39c12);color:#fff;padding:6px 12px;font-size:13px;border-radius:12px;box-sizing:border-box;border:0;font-weight:700;transition:transform .2s ease,box-shadow .2s ease}.now:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(230,126,34,.3)}.now:active{transform:translateY(1px)}.now:focus{outline:none;box-shadow:0 0 0 3px rgba(230,126,34,.3)}.form-group .btn{margin-top:8px;padding:6px 12px;font-size:13px;height:auto;line-height:normal;align-self:stretch}.form-row>button.btn{padding:6px 12px;font-size:13px;height:auto}.result-container{margin-top:25px;padding:18px;background:#fefcf5;border-radius:16px;border:1px solid #ecdca8;border-right:5px solid #6b9e9e;display:none;box-shadow:0 6px 16px rgba(0,0,0,.04);position:relative;z-index:1}.result-title{color:#1a4b5f;margin-bottom:12px;font-size:18px;font-weight:800}.result-table{width:100%;border-collapse:collapse;margin-top:10px}.result-table td{padding:6px;border-bottom:1px solid #dce5ec;text-align:center;color:#1a3f5c}@media(max-width:1024px){.calculator{padding:22px}}@media(max-width:768px){.calculator{padding:20px;margin:15px}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-group{min-width:0}.form-group .btn{width:100%;margin-top:6px}.form-row>button.btn{width:100%;justify-self:stretch}.form-row>.form-group:has(#timerName){grid-column:1/-1}.form-row>.form-group:has(#addHours){grid-column:1/-1}.form-row>.form-group:has(#breakMinutes){grid-column:1/-1}.form-row>.form-group:has(#secondsInput){grid-column:1/-1}.form-row>.form-group:has(>select#mode){grid-column:1/-1;min-width:0;width:100%}.form-row>.form-group:has(>select#mode) select#mode,.form-row>.form-group:has(>select#mode) select#mode.form-control{display:block;width:100%;min-width:0;margin:0;box-sizing:border-box;text-align:center;align-self:stretch}}@media(max-width:480px){.calculator{padding:16px;margin:10px}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.form-group{min-width:0}.form-row>.form-group:nth-child(odd){padding-right:6px}.form-row>.form-group:nth-child(even){padding-left:6px}.form-row>.form-group:has(#timerName){grid-column:1/-1}.form-row>.form-group:has(#addHours){grid-column:1/-1}.form-row>.form-group:has(#breakMinutes){grid-column:1/-1}.form-row>.form-group:has(#secondsInput){grid-column:1/-1}.form-row>button.btn{grid-column:auto;width:100%;justify-self:stretch}.form-row>.form-group:has(>select#mode){grid-column:1/-1;min-width:0;width:100%}.form-row>.form-group:has(>select#mode) select#mode,.form-row>.form-group:has(>select#mode) select#mode.form-control{display:block;width:100%;min-width:0;margin:0;box-sizing:border-box;text-align:center;align-self:stretch}}@media(min-width:769px){.form-row>button.btn{min-width:140px;padding:10px 20px;font-size:15px}.form-row:last-of-type{display:flex;justify-content:center;gap:12px}.form-row>.form-group:has(>select#mode){width:100%;max-width:420px;margin-left:auto;margin-right:auto;min-width:0}.form-row>.form-group:has(>select#mode) select#mode,.form-row>.form-group:has(>select#mode) select#mode.form-control{display:block;width:100%;box-sizing:border-box;margin:0 auto}}