/* ==========================================================================
   Dueter - tool.css: calculator pages. Calm and fast: no entrance animation
   above the fold, only a short highlight when the result changes.
   ========================================================================== */
.dt-tool-hero{padding-bottom:clamp(110px,12vw,150px);}
.dt-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; list-style:none; margin:24px 0 0; padding:0;}
.dt-trust li{display:inline-flex; align-items:center; gap:7px; margin:0; font-family:var(--dt-ui); font-size:14.5px; font-weight:500; color:var(--dt-ink);}
.dt-trust svg{color:var(--dt-ok);}

.dt-calc-sec{margin-top:clamp(-110px,-9vw,-80px); position:relative; z-index:2;}
.dt-calc{
	max-width:1120px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	border-radius:28px; background:#fff; border:1px solid var(--dt-line); overflow:hidden; text-align:left;
	box-shadow:0 50px 100px -60px rgba(11,36,32,.55), 0 2px 6px rgba(11,36,32,.04);
}
.dt-calc-form{padding:clamp(24px,3.4vw,44px);}
.dt-calc-h{font-size:1.25rem; font-weight:600; margin:0 0 22px !important;}

.dt-f{margin-bottom:18px;}
.dt-f label{display:block; font-family:var(--dt-ui); font-size:14.5px; font-weight:600; color:var(--dt-ink); margin-bottom:7px;}
.dt-f input,.dt-f select{
	width:100%; box-sizing:border-box; min-height:54px; padding:0 16px; border-radius:14px;
	border:1.5px solid var(--dt-line); background:var(--dt-bg); color:var(--dt-ink);
	font-family:var(--dt-body); font-size:16.5px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dt-f select{appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23047857' stroke-width='2.2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 16px center;}
.dt-f input:focus,.dt-f select:focus{outline:none; background-color:#fff; border-color:var(--dt-violet-2); box-shadow:0 0 0 4px rgba(16,185,129,.16);}
.dt-f small{display:block; margin-top:6px; font-size:13.5px; color:var(--dt-soft); line-height:1.5;}
.dt-f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
html.js .dt-f-days.is-off{display:none;}

.dt-more{margin:4px 0 22px; border:1.5px dashed var(--dt-violet-200); border-radius:16px; background:#F7FCF9;}
.dt-more summary{list-style:none; cursor:pointer; padding:15px 18px; font-family:var(--dt-ui); font-weight:600; color:var(--dt-violet); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dt-more summary::-webkit-details-marker{display:none;}
.dt-more summary::before{content:"+"; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--dt-violet-50); transition:transform .3s var(--dt-ease);}
.dt-more[open] summary::before{transform:rotate(45deg);}
.dt-more summary span{font-family:var(--dt-body); font-weight:400; font-size:14px; color:var(--dt-soft);}
.dt-more summary:focus-visible{outline:3px solid var(--dt-cyan); outline-offset:2px; border-radius:14px;}
.dt-more-in{padding:4px 18px 4px;}
.dt-calc-go{width:100%; min-height:56px;}

/* result panel */
.dt-result{
	position:relative; display:flex; flex-direction:column; justify-content:center; gap:18px;
	padding:clamp(24px,3.4vw,44px); color:#fff; text-align:center;
	background:radial-gradient(420px 260px at 85% 0%,rgba(6,182,212,.45),transparent 65%),radial-gradient(420px 300px at 0% 100%,rgba(16,185,129,.55),transparent 65%),linear-gradient(160deg,#0F3D30,#06201A);
}
.dt-result-k{font-family:var(--dt-ui); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#67E8F9;}
.dt-result-date{font-family:var(--dt-ui); font-weight:700; font-size:clamp(1.7rem,3vw,2.35rem); line-height:1.15; letter-spacing:-.03em; color:#fff; margin:10px 0 14px !important;}
.dt-result.is-new .dt-result-date{animation:dtResPop .45s var(--dt-ease);}
@keyframes dtResPop{from{opacity:.25; transform:translateY(6px);} to{opacity:1; transform:none;}}
.dt-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-family:var(--dt-ui); font-size:13.5px; font-weight:600;}
.dt-pill--ok{background:rgba(15,157,116,.22); color:#7FF0CB; box-shadow:inset 0 0 0 1px rgba(127,240,203,.35);}
.dt-pill--warn{background:rgba(255,193,77,.18); color:#FFD27A; box-shadow:inset 0 0 0 1px rgba(255,210,122,.35);}
.dt-pill--bad{background:rgba(214,59,80,.25); color:#FFB3BE; box-shadow:inset 0 0 0 1px rgba(255,179,190,.35);}
.dt-rows{margin:24px 0 0; text-align:left;}
.dt-rows > div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.12);}
.dt-rows > div[hidden]{display:none;}
.dt-rows dt{color:#A9C4BA; font-size:15px;}
.dt-rows dd{margin:0; color:#fff; font-family:var(--dt-ui); font-weight:600; font-size:15px; text-align:right;}
.dt-r-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px;}
html.no-js .dt-r-actions{display:none;}
.dt-r-btn{
	display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border-radius:999px; cursor:pointer;
	border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff;
	font-family:var(--dt-ui); font-size:13.5px; font-weight:500; transition:background .2s ease, transform .2s var(--dt-ease);
}
.dt-r-btn:hover{background:rgba(255,255,255,.16); transform:translateY(-2px);}
.dt-r-btn:focus-visible{outline:3px solid #67E8F9; outline-offset:2px;}
.dt-result-note{font-size:13px; color:#98B3A9; margin:0 !important;}

/* content blocks */
.dt-table-wrap{max-width:980px; margin:0 auto; overflow-x:auto; border-radius:20px; border:1px solid var(--dt-line); background:#fff;}
.dt-table{width:100%; border-collapse:collapse; font-size:16px; min-width:560px;}
.dt-table th,.dt-table td{padding:15px 18px; border-bottom:1px solid var(--dt-line); text-align:center;}
.dt-table thead th{background:var(--dt-violet-50); font-family:var(--dt-ui); font-weight:600; color:var(--dt-ink);}
.dt-table tbody tr:last-child td{border-bottom:0;}
.dt-table tbody tr{transition:background .2s ease;}
.dt-table tbody tr:hover{background:#F5FBF8;}
.dt-table b{color:var(--dt-ink); font-family:var(--dt-ui); font-weight:600;}

.dt-example{max-width:820px; margin:0 auto; font-size:17px;}
.dt-ex-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0;}
.dt-ex-grid div{padding:24px; border-radius:18px; border:1px solid var(--dt-line); background:#fff;}
.dt-ex-grid div:first-child{border-color:var(--dt-violet-200); box-shadow:0 20px 40px -30px rgba(4,120,87,.6);}
.dt-ex-grid span{display:block; font-size:14.5px; color:var(--dt-muted);}
.dt-ex-grid b{display:block; font-family:var(--dt-ui); font-size:2rem; color:var(--dt-ink); letter-spacing:-.03em; margin:4px 0;}
.dt-ex-grid small{font-size:14px; color:var(--dt-ok); font-weight:600;}
.dt-ex-grid div:last-child small{color:var(--dt-soft);}

@media (max-width:900px){
	.dt-calc{grid-template-columns:1fr;}
	.dt-calc-sec{margin-top:clamp(-90px,-12vw,-60px);}
}
@media (max-width:767px){
	.dt-calc{border-radius:22px;}
	.dt-calc-h{text-align:center;}
	.dt-f-row{grid-template-columns:1fr;}
	.dt-ex-grid{grid-template-columns:1fr;}
	.dt-r-btn{flex:1 1 100%; justify-content:center;}
	.dt-more summary{justify-content:center; text-align:center;}
}

/* ==========================================================================
   Shared pieces for the date tools and the compare tools
   ========================================================================== */
.dt-f textarea,.dt-pane textarea,.dt-lcol textarea{
	width:100%; box-sizing:border-box; padding:14px 16px; border-radius:14px; resize:vertical;
	border:1.5px solid var(--dt-line); background:var(--dt-bg); color:var(--dt-ink);
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14.5px; line-height:1.6;
	transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dt-f textarea:focus,.dt-pane textarea:focus{outline:none; background:#fff; border-color:var(--dt-violet-2); box-shadow:0 0 0 4px rgba(16,185,129,.16);}
.dt-f-label{display:block; font-family:var(--dt-ui); font-size:14.5px; font-weight:600; color:var(--dt-ink); margin-bottom:7px;}
.dt-check{display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-family:var(--dt-ui); font-size:14.5px; font-weight:500; color:var(--dt-ink); margin:0 0 14px;}
.dt-check input{width:20px; height:20px; accent-color:var(--dt-violet); margin:0; cursor:pointer;}
.dt-seg{display:inline-flex; padding:5px; gap:4px; border-radius:999px; background:var(--dt-bg); border:1px solid var(--dt-line);}
.dt-seg label{position:relative; cursor:pointer;}
.dt-seg input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.dt-seg span{display:inline-flex; align-items:center; min-height:40px; padding:0 22px; border-radius:999px; font-family:var(--dt-ui); font-size:15px; font-weight:500; color:var(--dt-ink); transition:background .2s ease,color .2s ease;}
.dt-seg input:checked + span{background:var(--dt-grad); color:#fff;}
.dt-seg input:focus-visible + span{outline:3px solid var(--dt-cyan); outline-offset:2px;}
.dt-quick{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 20px;}
.dt-quick button{min-height:38px; padding:0 14px; border-radius:999px; cursor:pointer; border:1px solid var(--dt-line); background:#fff; font-family:var(--dt-ui); font-size:13.5px; font-weight:500; color:var(--dt-ink); transition:border-color .2s ease, background .2s ease;}
.dt-quick button:hover{border-color:var(--dt-violet-2); background:var(--dt-violet-50);}
html.no-js .dt-quick{display:none;}
.dt-result-num{font-size:clamp(2.6rem,5vw,3.6rem);}
.dt-result-flag{margin:14px 0 0 !important; font-size:14px; color:#FFD27A;}
.dt-result-flag[hidden]{display:none;}
html.no-js .dt-js-only{display:none !important;}

/* compare card */
.dt-cmp{
	max-width:1240px; margin:0 auto; padding:clamp(20px,3vw,36px); text-align:left; box-sizing:border-box;
	border-radius:28px; background:#fff; border:1px solid var(--dt-line);
	box-shadow:0 50px 100px -60px rgba(11,36,32,.55), 0 2px 6px rgba(11,36,32,.04);
}
.dt-duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px;}
.dt-pane label{display:flex; align-items:baseline; gap:10px; font-family:var(--dt-ui); font-size:15px; font-weight:600; color:var(--dt-ink); margin-bottom:8px;}
.dt-pane small{font-family:var(--dt-body); font-weight:400; font-size:13.5px; color:var(--dt-soft);}
.dt-pane-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.dt-pane-h label{margin:0;}
.dt-pane textarea{min-height:240px;}
.dt-pane textarea.is-over{border-color:var(--dt-violet-2); background:var(--dt-violet-50);}
.dt-hint-c{margin:10px 0 0 !important; font-size:13.5px; color:var(--dt-soft); text-align:center;}
.dt-opts{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 26px; margin:18px 0 6px;}
.dt-opts .dt-check{margin:0;}
.dt-inline{display:inline-flex; align-items:center; gap:10px; font-family:var(--dt-ui); font-size:14.5px; font-weight:500; color:var(--dt-ink);}
.dt-inline select,.dt-inline input{min-height:44px; padding:0 14px; border-radius:12px; border:1.5px solid var(--dt-line); background:var(--dt-bg); font-family:var(--dt-body); font-size:15px; color:var(--dt-ink); box-sizing:border-box;}
.dt-inline input:focus,.dt-inline select:focus{outline:none; border-color:var(--dt-violet-2); box-shadow:0 0 0 4px rgba(16,185,129,.16);}
.dt-inline--grow{flex:1 1 340px;}
.dt-inline--grow input{flex:1; min-width:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px;}
.dt-cmp-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px;}
.dt-mini{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 14px; border-radius:999px; cursor:pointer; border:1px solid var(--dt-line); background:#fff; font-family:var(--dt-ui); font-size:13px; font-weight:500; color:var(--dt-violet); transition:background .2s ease, border-color .2s ease;}
.dt-mini:hover{background:var(--dt-violet-50); border-color:var(--dt-violet-200);}
.dt-file{position:relative; overflow:hidden;}
.dt-file input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.dt-file:focus-within{outline:3px solid var(--dt-cyan); outline-offset:2px;}

/* compare output */
.dt-out{max-width:1240px; margin:28px auto 0; text-align:center;}
.dt-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.dt-stats--5{grid-template-columns:repeat(5,minmax(0,1fr));}
.dt-stats > div{padding:20px 14px; border-radius:18px; background:#fff; border:1px solid var(--dt-line);}
.dt-stats b{display:block; font-family:var(--dt-ui); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; letter-spacing:-.03em; color:var(--dt-ink); line-height:1.1;}
.dt-stats span{display:block; margin-top:4px; font-size:14px; color:var(--dt-muted);}
.dt-stats .is-add b{color:var(--dt-ok);} .dt-stats .is-rem b{color:var(--dt-bad);} .dt-stats .is-chg b{color:var(--dt-warn);}
.dt-out-note{margin:16px 0 !important; font-size:14.5px; color:var(--dt-muted);}
.dt-lcols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; text-align:left;}
.dt-lcol{padding:16px; border-radius:20px; background:#fff; border:1px solid var(--dt-line); border-top:4px solid var(--dt-violet-2);}
.dt-lcol--b{border-top-color:var(--dt-cyan);} .dt-lcol--both{border-top-color:var(--dt-ink);}
.dt-lcol-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.dt-lcol h3{margin:0 !important; font-size:1rem;}
.dt-lcol h3 b{display:inline-block; margin-left:6px; padding:2px 10px; border-radius:999px; background:var(--dt-violet-50); color:var(--dt-violet); font-size:13px;}
.dt-lcol textarea{min-height:220px; font-size:14px;}
.dt-filter-row{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 16px;}
.dt-filter-row button{min-height:40px; padding:0 16px; border-radius:999px; cursor:pointer; border:1px solid var(--dt-line); background:#fff; font-family:var(--dt-ui); font-size:14px; font-weight:500; color:var(--dt-ink);}
.dt-filter-row button[aria-pressed=true]{background:var(--dt-grad); border-color:transparent; color:#fff;}
.dt-diff-wrap{overflow:auto; max-height:640px; border-radius:18px; border:1px solid var(--dt-line); background:#fff; text-align:left;}
.dt-diff-wrap:empty{display:none;}
.dt-diff{width:100%; border-collapse:collapse; font-size:14.5px;}
.dt-diff th,.dt-diff td{padding:10px 14px; border-bottom:1px solid var(--dt-line); white-space:nowrap; vertical-align:top;}
.dt-diff thead th{position:sticky; top:0; z-index:1; background:var(--dt-violet-50); font-family:var(--dt-ui); font-weight:600; color:var(--dt-ink);}
.dt-diff tr.is-added td{background:#F0FBF6;} .dt-diff tr.is-removed td{background:#FEF3F4;}
.dt-diff td.is-diff{background:#FFF8E6;}
.dt-diff del{display:block; color:var(--dt-bad); text-decoration:line-through;}
.dt-diff ins{display:block; color:#0B6B4F; text-decoration:none; font-weight:600;}
.dt-tag{display:inline-block; padding:3px 10px; border-radius:999px; font-family:var(--dt-ui); font-size:12px; font-weight:600;}
.dt-tag--added{background:#DDF5EA; color:#0B6B4F;} .dt-tag--removed{background:#FBE1E5; color:#9B2335;} .dt-tag--changed{background:#FFF0C7; color:#7A4E00;}
.dt-same{padding:28px; margin:0 !important; text-align:center; font-family:var(--dt-ui); font-weight:600; color:var(--dt-ok);}

/* hash tool */
html.no-js .dt-hash,html.no-js .dt-hash + .dt-out{display:none;}
.dt-noscript{text-align:center;}
.dt-noscript h2{font-size:1.3rem; margin:0 0 8px !important;}
.dt-drop{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:210px; padding:24px; border-radius:22px; cursor:pointer; text-align:center; border:2px dashed var(--dt-violet-200); background:var(--dt-bg); transition:border-color .2s ease, background .2s ease, transform .2s var(--dt-ease);}
.dt-drop:hover,.dt-drop.is-over{border-color:var(--dt-violet-2); background:var(--dt-violet-50);}
.dt-drop.is-over{transform:scale(1.01);}
.dt-drop.has-file{border-style:solid; border-color:var(--dt-violet-2);}
.dt-drop input{position:absolute; width:1px; height:1px; opacity:0;}
.dt-drop:focus-within{outline:3px solid var(--dt-cyan); outline-offset:3px;}
.dt-drop b{font-family:var(--dt-ui); font-size:1.08rem; color:var(--dt-ink);}
.dt-drop b small{font-weight:400; color:var(--dt-soft); font-size:13px;}
.dt-drop-name{font-size:14.5px; color:var(--dt-muted); word-break:break-all;}
.dt-verdict{display:flex; align-items:center; gap:16px; max-width:860px; margin:0 auto; padding:20px 24px; border-radius:20px; text-align:left; background:#fff; border:1px solid var(--dt-line);}
.dt-verdict b{display:block; font-family:var(--dt-ui); font-size:1.15rem; color:var(--dt-ink);}
.dt-verdict span{display:block; font-size:15px; color:var(--dt-muted); margin-top:2px;}
.dt-verdict .dt-verdict-ico{flex:0 0 48px; width:48px; height:48px; margin:0; border-radius:50%; background:var(--dt-violet-50); position:relative;}
.dt-verdict-ico::before,.dt-verdict-ico::after{content:""; position:absolute; inset:0; margin:auto;}
.dt-verdict-ico::after{width:16px; height:16px; border-radius:50%; background:var(--dt-violet-200);}
.dt-verdict[data-state=ok]{border-color:#9FE3C8; background:#F0FBF6;}
.dt-verdict[data-state=ok] .dt-verdict-ico{background:var(--dt-ok);}
.dt-verdict[data-state=ok] .dt-verdict-ico::after{width:18px; height:9px; border-radius:0; background:none; border:solid #fff; border-width:0 0 3px 3px; transform:translateY(-2px) rotate(-45deg);}
.dt-verdict[data-state=bad]{border-color:#F3B4BE; background:#FEF3F4;}
.dt-verdict[data-state=bad] .dt-verdict-ico{background:var(--dt-bad);}
.dt-verdict[data-state=bad] .dt-verdict-ico::after,.dt-verdict[data-state=bad] .dt-verdict-ico::before{width:4px; height:20px; border-radius:2px; background:#fff;}
.dt-verdict[data-state=bad] .dt-verdict-ico::after{transform:rotate(45deg);}
.dt-verdict[data-state=bad] .dt-verdict-ico::before{transform:rotate(-45deg);}
.dt-verdict[data-state=warn]{border-color:#F5D58A; background:#FFF8E6;}
.dt-verdict[data-state=warn] .dt-verdict-ico{background:var(--dt-warn);}
.dt-verdict[data-state=warn] .dt-verdict-ico::after{width:4px; height:18px; border-radius:2px; background:#fff;}
.dt-hashes{display:grid; gap:12px; max-width:860px; margin:16px auto 0; text-align:left;}
.dt-hrow{padding:16px 18px; border-radius:18px; background:#fff; border:1px solid var(--dt-line);}
.dt-hrow[hidden]{display:none;}
.dt-hrow-h{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.dt-hrow-h b{font-family:var(--dt-ui); color:var(--dt-ink);}
.dt-hrow-h span{flex:1; min-width:0; font-size:13.5px; color:var(--dt-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dt-hrow code{display:block; padding:10px 12px; border-radius:10px; background:var(--dt-bg); color:var(--dt-ink); font-size:13.5px; word-break:break-all; line-height:1.55;}

@media (max-width:900px){
	.dt-duo{grid-template-columns:minmax(0,1fr);}
	.dt-lcols{grid-template-columns:minmax(0,1fr);}
	.dt-stats,.dt-stats--5{grid-template-columns:repeat(2,minmax(0,1fr));}
	.dt-stats--5 > :last-child{grid-column:1 / -1;}
}
@media (max-width:767px){
	.dt-cmp{border-radius:22px;}
	.dt-pane textarea{min-height:170px;}
	.dt-lcol textarea{min-height:160px;}
	.dt-drop{min-height:160px;}
	.dt-opts{flex-direction:column; align-items:stretch; gap:4px;}
	.dt-inline{justify-content:space-between;}
	.dt-cmp-actions .dt-btn{width:100%;}
	.dt-verdict{flex-direction:column; text-align:center;}
	.dt-seg{display:flex;} .dt-seg label{flex:1;} .dt-seg span{justify-content:center; width:100%; box-sizing:border-box;}
}