/* Pulse Time front-end styles */
.pulse-time-app{
	--bg1:#050816;
	--bg2:#0b1220;
	--card:rgba(14, 22, 48, 0.8);
	--card2:rgba(16, 26, 57, 0.8);
	--line:#ffffff1a;
	--text:#eaf0ff;
	--muted:#aab6d3;
	--accent:#7c5cff;
	--accent2:#16d3ff;
	--good:#20d08a;
	--warn:#ffb020;
	--bad:#ff5f7a;
	--shadow:0 20px 60px rgba(0,0,0,.45);
	--radius:28px;
	--ring-url: url(#pulse-time-ring-gradient);
	width:min(980px, 100%);
	color:var(--text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	margin:0 auto;
	display:grid;
	grid-template-columns: 1.05fr .95fr;
	gap:20px;
	position:relative;
	padding:20px;
	border-radius: 36px;
}

.pulse-time-app,
.pulse-time-app *{
	box-sizing:border-box;
}

.pulse-time-panel{
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
	border:1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	overflow:hidden;
	position:relative;
}

.pulse-time-panel::after{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(120deg, transparent 0 20%, rgba(255,255,255,.08) 22%, transparent 24% 100%);
	pointer-events:none;
	opacity:.45;
}

.pulse-time-hero{
	padding:28px;
	display:flex;
	flex-direction:column;
	gap:20px;
	min-height:640px;
	background:
		radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 30%, transparent) 0 18%, transparent 19%),
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent2) 22%, transparent) 0 14%, transparent 15%),
		radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--accent) 22%, transparent) 0 18%, transparent 19%),
		linear-gradient(135deg, var(--bg1), var(--bg2));
}

.pulse-time-brand{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

.pulse-time-title{
	font-size:clamp(1.7rem, 3vw, 2.5rem);
	letter-spacing:.5px;
	line-height:1.05;
	margin:0;
}

.pulse-time-subtitle{
	color:var(--muted);
	margin-top:8px;
	font-size:.95rem;
}

.pulse-time-chip{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 14px;
	border-radius:999px;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	color:#dcd6ff;
	font-size:.85rem;
	white-space:nowrap;
}

.pulse-time-chip span{
	width:9px;
	height:9px;
	border-radius:50%;
	background:linear-gradient(135deg, var(--accent), var(--accent2));
	box-shadow:0 0 18px color-mix(in srgb, var(--accent2) 70%, transparent);
	display:inline-block;
}

.pulse-time-screen{
	flex:1;
	display:grid;
	place-items:center;
	padding:8px 0 2px;
}

.pulse-time-dial{
	width:min(440px, 100%);
	aspect-ratio:1;
	position:relative;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:
		radial-gradient(circle at center, rgba(255,255,255,.05) 0 42%, transparent 43%),
		conic-gradient(from 160deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent2) 22%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.08),
		0 0 0 18px rgba(255,255,255,.02),
		0 30px 60px rgba(0,0,0,.35);
}

.pulse-time-dial::before{
	content:"";
	position:absolute;
	inset:14px;
	border-radius:50%;
	background:
		radial-gradient(circle at center, rgba(11,18,32,.9), rgba(11,18,32,.7)),
		linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
	border:1px solid rgba(255,255,255,.08);
}

.pulse-time-ring{
	position:absolute;
	inset:0;
	transform:rotate(-90deg);
}

.pulse-time-ring circle{
	fill:none;
	stroke-width:13;
}

.pulse-time-track{
	stroke: rgba(255,255,255,.08);
}

.pulse-time-progress{
	stroke: var(--accent2);
	stroke-linecap:round;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent2) 35%, transparent));
	transition: stroke-dashoffset .2s linear;
}

.pulse-time-clock{
	position:relative;
	z-index:2;
	text-align:center;
	width:min(330px, 78%);
	display:flex;
	flex-direction:column;
	gap:8px;
	align-items:center;
}

.pulse-time-mode-label{
	display:inline-flex;
	gap:8px;
	align-items:center;
	padding:8px 12px;
	border-radius:999px;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.08);
	color:var(--muted);
	font-size:.82rem;
	letter-spacing:.4px;
	text-transform:uppercase;
}

.pulse-time-display{
	font-variant-numeric:tabular-nums;
	font-weight:800;
	letter-spacing:-2px;
	line-height:1;
	text-shadow:0 8px 30px rgba(0,0,0,.45);
	margin:0;
}

.pulse-time-timer-display{
	font-size:clamp(3rem, 8vw, 5rem);
}

.pulse-time-stopwatch-display{
	font-size:clamp(2.6rem, 7.5vw, 4.8rem);
}

.pulse-time-subline{
	color:var(--muted);
	font-size:.95rem;
}

.pulse-time-tabs{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.08);
	padding:8px;
	border-radius:20px;
}

.pulse-time-tab{
	border:none;
	background:transparent;
	color:var(--muted);
	border-radius:14px;
	padding:14px 12px;
	font-size:.98rem;
	font-weight:600;
	cursor:pointer;
	transition:.25s;
}

.pulse-time-tab.is-active{
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent2) 75%, var(--accent)));
	color:white;
	box-shadow: 0 12px 28px rgba(124,92,255,.25);
}

.pulse-time-controls{
	display:grid;
	gap:14px;
	padding:28px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, transparent), color-mix(in srgb, var(--card2) 100%, transparent));
}

.pulse-time-card{
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
	border:1px solid rgba(255,255,255,.08);
	border-radius:24px;
	padding:18px;
}

.pulse-time-card-title{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	margin-bottom:14px;
}

.pulse-time-card-title h2{
	font-size:1.05rem;
	letter-spacing:.2px;
	margin:0;
}

.pulse-time-card-title small{
	color:var(--muted);
}

.pulse-time-grid-2{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}

.pulse-time-input{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.pulse-time-input label{
	color:var(--muted);
	font-size:.85rem;
}

.pulse-time-input input{
	width:100%;
	border:none;
	outline:none;
	color:var(--text);
	background:rgba(8,13,28,.7);
	border:1px solid rgba(255,255,255,.08);
	padding:15px 14px;
	border-radius:16px;
	font-size:1rem;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.pulse-time-input input::placeholder{
	color:#7f8bb0;
}

.pulse-time-actions{
	display:grid;
	gap:10px;
}

.pulse-time-actions-3{
	grid-template-columns:repeat(3,1fr);
}

.pulse-time-btn{
	border:none;
	border-radius:16px;
	padding:14px 12px;
	color:white;
	font-weight:700;
	cursor:pointer;
	transition:.22s ease;
	box-shadow:0 12px 24px rgba(0,0,0,.18);
	letter-spacing:.2px;
}

.pulse-time-btn:hover{
	transform:translateY(-2px);
}

.pulse-time-btn:active{
	transform:translateY(0);
}

.pulse-time-btn-good{ background: linear-gradient(135deg, var(--good), color-mix(in srgb, var(--good) 70%, #10b981)); }
.pulse-time-btn-warn{ background: linear-gradient(135deg, var(--warn), #ff7b2f); }
.pulse-time-btn-danger{ background: linear-gradient(135deg, var(--bad), #ff3d5e); }

.pulse-time-status{
	margin-top:4px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	color:var(--muted);
	font-size:.9rem;
}

.pulse-time-badge{
	padding:7px 11px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.08);
	background:rgba(255,255,255,.05);
}

.pulse-time-footer-note{
	color:var(--muted);
	font-size:.85rem;
	line-height:1.6;
}

.pulse-time-is-hidden{
	display:none !important;
}

.pulse-time-app .is-hidden{
	display:none !important;
}

@media (max-width: 900px){
	.pulse-time-app{
		grid-template-columns:1fr;
	}
	.pulse-time-hero{
		min-height:auto;
	}
}

@media (max-width: 560px){
	.pulse-time-hero,
	.pulse-time-controls{
		padding:18px;
	}
	.pulse-time-brand{
		flex-direction:column;
		align-items:flex-start;
	}
	.pulse-time-grid-2,
	.pulse-time-actions-3{
		grid-template-columns:1fr;
	}
	.pulse-time-tabs{
		grid-template-columns:1fr 1fr;
	}
}