/* purpose: MD Clock layout — 3D analog watch, digital, world, stopwatch, timer, alarm, convert
   author: MD Hub
   date: 2026-09-11 */
#md_clock_root{
	--mdk-accent:#4f46e5;
	--mdk-gold:#d4af37;
	--mdk-gold-hi:#f3e5ab;
	--mdk-on:#fff;
	--mdk-ink:var(--bo-text,#0f172a);
	--mdk-muted:var(--bo-text-muted,#64748b);
	--mdk-card:var(--bo-bg-elevated,#fff);
	--mdk-line:var(--bo-border,#e2e8f0);
	--mdk-page:var(--bo-bg-page,#f8fafc);
	--mdk-navy:#0b1224;
	width:100%;
	min-height:36rem;
	height:min(78vh,52rem);
	color:var(--mdk-ink);
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	position:relative;
	gap:.55rem;
	overflow:hidden;
}
html.dark #md_clock_root{
	--mdk-card:#111827;
	--mdk-page:#0b1220;
	--mdk-line:#1f2937;
}
#md_clock_root *{box-sizing:border-box}
#md_clock_root .hidden,#md_clock_root [hidden]{display:none!important}
#md_clock_root .mdk-tabs{
	display:flex;gap:.3rem;overflow-x:auto;flex-shrink:0;
	padding:.1rem .05rem .15rem;scrollbar-width:none;
}
#md_clock_root .mdk-tabs::-webkit-scrollbar{display:none}
#md_clock_root .mdk-tab{
	appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;
	border:1px solid var(--mdk-line);background:var(--mdk-card);color:var(--mdk-ink);
	border-radius:.9rem;padding:.48rem .8rem;font-size:.82rem;font-weight:750;
	cursor:pointer;min-height:2.45rem;white-space:nowrap;
}
#md_clock_root .mdk-tab i{color:var(--mdk-accent);width:1rem;text-align:center}
#md_clock_root .mdk-tab.on{
	background:var(--mdk-accent);color:#fff;border-color:transparent;
}
#md_clock_root .mdk-tab.on i{color:#fff}
#md_clock_root .mdk-panel{
	flex:1;min-height:0;overflow:auto;display:none;padding:.15rem .05rem .4rem;
}
#md_clock_root .mdk-panel.on{display:flex;flex-direction:column}
#md_clock_root .mdk-clock-scene{
	flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:.85rem;padding:.6rem .4rem 1rem;
	background:
		radial-gradient(120% 80% at 50% 18%, rgba(212,175,55,.28), transparent 55%),
		radial-gradient(90% 70% at 50% 100%, rgba(79,70,229,.22), transparent 60%),
		linear-gradient(180deg, #152042 0%, var(--mdk-navy) 72%);
	border-radius:1.25rem;color:#f8fafc;overflow:hidden;position:relative;
}
#md_clock_root .mdk-watch-wrap{
	perspective:900px;width:min(18.5rem,72vw);aspect-ratio:1;flex-shrink:0;
}
#md_clock_root .mdk-watch{
	width:100%;height:100%;transform-style:preserve-3d;
	transform:rotateX(10deg) rotateY(-16deg);
	transition:transform .18s ease-out;
}
#md_clock_root .mdk-bezel{
	width:100%;height:100%;border-radius:50%;position:relative;
	background:
		conic-gradient(from 0deg,
			#8a6a12 0deg,#f3e5ab 40deg,#c9a227 80deg,#7a5a10 130deg,
			#f8e7a0 180deg,#b08920 230deg,#efe0a0 280deg,#8a6a12 360deg);
	box-shadow:
		0 1.6rem 2.4rem rgba(0,0,0,.45),
		0 0 0 .18rem rgba(243,229,171,.35),
		inset 0 0 0 .08rem rgba(255,255,255,.35);
	transform:translateZ(12px);
}
#md_clock_root .mdk-lugs{
	position:absolute;inset:-6%;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle at 50% 50%, transparent 62%, rgba(212,175,55,.18) 63%, transparent 70%);
}
#md_clock_root .mdk-face{
	position:absolute;inset:7.5%;border-radius:50%;overflow:hidden;
	background:
		radial-gradient(circle at 32% 28%, #fffef8, #efe6d2 58%, #d8cbb0 100%);
	box-shadow:inset 0 0 1.4rem rgba(80,50,10,.18), inset 0 0 0 .08rem rgba(90,60,10,.25);
}
#md_clock_root.night .mdk-face{
	background:radial-gradient(circle at 32% 28%, #1e293b, #0f172a 70%);
}
#md_clock_root .mdk-ticks,#md_clock_root .mdk-nums{
	position:absolute;inset:0;
}
#md_clock_root .mdk-tick{
	position:absolute;inset:0;transform-origin:50% 50%;
}
#md_clock_root .mdk-tick::before{
	content:'';position:absolute;left:50%;top:4.4%;width:2px;height:5.6%;
	margin-left:-1px;background:#3f2e10;border-radius:1px;
}
#md_clock_root .mdk-tick.major::before{width:3px;height:8.4%;margin-left:-1.5px;background:#1c1408}
#md_clock_root.night .mdk-tick::before{background:#cbd5e1}
#md_clock_root.night .mdk-tick.major::before{background:#f8fafc}
#md_clock_root .mdk-num{
	position:absolute;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;
	display:flex;align-items:center;justify-content:center;
	font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:.95rem;color:#1c1408;
	text-shadow:0 1px 0 rgba(255,255,255,.4);
}
#md_clock_root.night .mdk-num{color:#f1f5f9;text-shadow:none}
#md_clock_root .mdk-brand{
	position:absolute;left:0;right:0;top:28%;text-align:center;
	font-size:.48rem;letter-spacing:.22em;font-weight:800;color:#7a5a20;opacity:.85;
}
#md_clock_root.night .mdk-brand{color:#c4b5fd}
#md_clock_root .mdk-date-win{
	position:absolute;right:18%;top:46%;min-width:1.15rem;padding:.08rem .18rem;
	border-radius:.2rem;background:#f8f4ea;border:1px solid #c9b48a;
	font-size:.62rem;font-weight:800;color:#1c1408;text-align:center;
	box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}
#md_clock_root.night .mdk-date-win{background:#0f172a;border-color:#334155;color:#e2e8f0}
#md_clock_root .mdk-hand{
	position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;
	will-change:transform;
}
#md_clock_root .mdk-hand span{
	display:block;border-radius:1rem;margin:0 auto;
	box-shadow:0 0 .35rem rgba(0,0,0,.28);
}
#md_clock_root .mdk-hand.hour{width:1.8%;height:28%;z-index:3}
#md_clock_root .mdk-hand.hour span{
	width:100%;height:100%;background:linear-gradient(#3a2a10,#1c1408);
	border-radius:.4rem .4rem .15rem .15rem;
}
#md_clock_root .mdk-hand.min{width:1.25%;height:38%;z-index:4}
#md_clock_root .mdk-hand.min span{
	width:100%;height:100%;background:linear-gradient(#5a4218,#1c1408);
	border-radius:.4rem;
}
#md_clock_root .mdk-hand.sec{width:.55%;height:44%;z-index:5}
#md_clock_root .mdk-hand.sec span{
	width:100%;height:100%;background:linear-gradient(#ef4444,#b91c1c);
	border-radius:1rem;
}
#md_clock_root .mdk-hand.sec::after{
	content:'';position:absolute;left:50%;top:100%;width:.55rem;height:.55rem;
	margin:.15rem 0 0 -.275rem;border-radius:50%;background:#b91c1c;
}
#md_clock_root .mdk-cap{
	position:absolute;left:50%;top:50%;width:8%;height:8%;margin:-4% 0 0 -4%;
	border-radius:50%;z-index:6;
	background:radial-gradient(circle at 35% 30%, #f3e5ab, #8a6a12 70%, #3a2a10);
	box-shadow:0 0 0 2px rgba(28,20,8,.35);
}
#md_clock_root .mdk-glass{
	position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:7;
	background:
		linear-gradient(125deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 28%, transparent 46%),
		radial-gradient(circle at 70% 78%, rgba(255,255,255,.12), transparent 40%);
}
#md_clock_root .mdk-digital{text-align:center;z-index:2}
#md_clock_root .mdk-dig-row{
	display:flex;align-items:baseline;justify-content:center;gap:.45rem;
}
#md_clock_root .mdk-dig-time{
	font-size:clamp(2.4rem,9vw,3.6rem);font-weight:800;letter-spacing:.04em;
	font-variant-numeric:tabular-nums;line-height:1;
	text-shadow:0 8px 24px rgba(0,0,0,.35);
}
#md_clock_root .mdk-dig-ampm{
	font-size:.95rem;font-weight:800;letter-spacing:.12em;opacity:.85;
}
#md_clock_root .mdk-dig-date{
	margin-top:.25rem;font-size:.95rem;font-weight:650;opacity:.92;
}
#md_clock_root .mdk-dig-tz{
	margin-top:.2rem;font-size:.78rem;opacity:.78;letter-spacing:.02em;
}
#md_clock_root .mdk-clock-tools{
	display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;
}
#md_clock_root .mdk-chip{
	appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
	color:#fff;border-radius:999px;padding:.38rem .75rem;font-size:.75rem;font-weight:750;cursor:pointer;
	min-height:2.1rem;
}
#md_clock_root .mdk-chip.on{background:var(--mdk-accent);border-color:transparent}
#md_clock_root .mdk-panel:not([data-mdk-panel="clock"]) .mdk-chip{
	border-color:var(--mdk-line);background:var(--mdk-card);color:var(--mdk-ink);
}
#md_clock_root .mdk-tz-select{
	appearance:none;min-height:2.2rem;border-radius:.75rem;padding:.3rem .7rem;
	border:1px solid rgba(255,255,255,.18);background:rgba(15,23,42,.45);color:#fff;
	font-size:.78rem;max-width:16rem;
}
#md_clock_root .mdk-panel:not([data-mdk-panel="clock"]) .mdk-tz-select,
#md_clock_root .mdk-input{
	border:1px solid var(--mdk-line);background:var(--mdk-card);color:var(--mdk-ink);
	border-radius:.75rem;min-height:2.45rem;padding:.4rem .7rem;font-size:.9rem;width:100%;
}
#md_clock_root .mdk-toolbar{
	display:flex;gap:.4rem;align-items:center;margin-bottom:.55rem;flex-shrink:0;
}
#md_clock_root .mdk-toolbar .mdk-input{flex:1}
#md_clock_root .mdk-btn{
	appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
	border:1px solid var(--mdk-line);background:var(--mdk-card);color:var(--mdk-ink);
	border-radius:.85rem;padding:.5rem .9rem;font-weight:750;cursor:pointer;min-height:2.5rem;white-space:nowrap;
}
#md_clock_root .mdk-btn.pri{background:var(--mdk-accent);color:#fff;border-color:transparent}
#md_clock_root .mdk-btn.ghost{background:transparent}
#md_clock_root .mdk-btn:disabled{opacity:.4;cursor:not-allowed}
#md_clock_root .mdk-suggest{
	position:relative;z-index:5;margin:-.3rem 0 .55rem;border:1px solid var(--mdk-line);
	background:var(--mdk-card);border-radius:.85rem;max-height:12rem;overflow:auto;
}
#md_clock_root .mdk-sug{
	appearance:none;display:block;width:100%;text-align:left;border:0;background:transparent;
	color:inherit;padding:.55rem .75rem;cursor:pointer;font-size:.86rem;
}
#md_clock_root .mdk-sug:hover,#md_clock_root .mdk-sug:focus{background:color-mix(in srgb,var(--mdk-accent) 12%,transparent)}
#md_clock_root .mdk-sug small{display:block;color:var(--mdk-muted);font-size:.72rem}
#md_clock_root .mdk-world-grid{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:.65rem;
}
#md_clock_root .mdk-city{
	position:relative;border:1px solid var(--mdk-line);background:var(--mdk-card);
	border-radius:1rem;padding:.85rem .9rem .8rem;display:flex;flex-direction:column;gap:.15rem;
	box-shadow:0 8px 20px rgba(15,23,42,.06);
}
#md_clock_root .mdk-city .mdk-city-t{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums}
#md_clock_root .mdk-city strong{font-size:.95rem}
#md_clock_root .mdk-city .mdk-city-meta{font-size:.75rem;color:var(--mdk-muted)}
#md_clock_root .mdk-city .mdk-x{
	position:absolute;top:.4rem;right:.4rem;width:1.7rem;height:1.7rem;border-radius:.55rem;
	border:0;background:transparent;color:var(--mdk-muted);cursor:pointer;
}
#md_clock_root .mdk-big-time{
	font-size:clamp(2.6rem,12vw,4.2rem);font-weight:800;font-variant-numeric:tabular-nums;
	text-align:center;padding:1.4rem .4rem .5rem;letter-spacing:.04em;
}
#md_clock_root .mdk-actions{
	display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 .8rem;
}
#md_clock_root .mdk-laps{
	display:flex;flex-direction:column;gap:.3rem;max-width:22rem;width:100%;margin:0 auto;
}
#md_clock_root .mdk-lap{
	display:flex;justify-content:space-between;padding:.45rem .7rem;border-radius:.7rem;
	background:var(--mdk-page);border:1px solid var(--mdk-line);font-variant-numeric:tabular-nums;
}
#md_clock_root .mdk-timer-ring{
	position:relative;width:min(14rem,70vw);margin:1rem auto .4rem;
}
#md_clock_root .mdk-timer-ring svg{width:100%;transform:rotate(-90deg)}
#md_clock_root .mdk-ring-bg{fill:none;stroke:var(--mdk-line);stroke-width:8}
#md_clock_root .mdk-ring-fg{
	fill:none;stroke:var(--mdk-accent);stroke-width:8;stroke-linecap:round;
	stroke-dasharray:326.73;stroke-dashoffset:0;transition:stroke-dashoffset .2s linear;
}
#md_clock_root .mdk-timer-read{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;
}
#md_clock_root .mdk-timer-set{
	display:flex;justify-content:center;gap:.6rem;margin:.4rem 0;
}
#md_clock_root .mdk-timer-set label{
	display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;font-weight:700;color:var(--mdk-muted);text-align:center;
}
#md_clock_root .mdk-timer-set input{
	width:4.2rem;text-align:center;border:1px solid var(--mdk-line);border-radius:.7rem;
	min-height:2.5rem;font-size:1.05rem;font-weight:800;background:var(--mdk-card);color:var(--mdk-ink);
}
#md_clock_root .mdk-presets{
	display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin:.2rem 0 .5rem;
}
#md_clock_root .mdk-presets button{
	appearance:none;border:1px solid var(--mdk-line);background:var(--mdk-card);color:var(--mdk-ink);
	border-radius:999px;padding:.32rem .7rem;font-size:.75rem;font-weight:700;cursor:pointer;
}
#md_clock_root .mdk-alarm-form{
	display:grid;grid-template-columns:7.5rem 1fr auto;gap:.45rem;align-items:center;margin-bottom:.45rem;
}
#md_clock_root .mdk-days{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.55rem}
#md_clock_root .mdk-day{
	appearance:none;width:2.15rem;height:2.15rem;border-radius:999px;border:1px solid var(--mdk-line);
	background:var(--mdk-card);color:var(--mdk-ink);font-size:.72rem;font-weight:800;cursor:pointer;
}
#md_clock_root .mdk-day.on{background:var(--mdk-accent);color:#fff;border-color:transparent}
#md_clock_root .mdk-hint{font-size:.75rem;color:var(--mdk-muted);margin:0 0 .7rem}
#md_clock_root .mdk-alarm-list{display:flex;flex-direction:column;gap:.5rem}
#md_clock_root .mdk-alarm{
	display:flex;align-items:center;gap:.7rem;border:1px solid var(--mdk-line);
	background:var(--mdk-card);border-radius:.95rem;padding:.7rem .8rem;
}
#md_clock_root .mdk-alarm .t{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
#md_clock_root .mdk-alarm .meta{font-size:.75rem;color:var(--mdk-muted)}
#md_clock_root .mdk-alarm .grow{flex:1;min-width:0}
#md_clock_root .mdk-sw{
	appearance:none;width:2.6rem;height:1.45rem;border-radius:999px;border:0;cursor:pointer;
	background:#cbd5e1;position:relative;flex-shrink:0;
}
#md_clock_root .mdk-sw::after{
	content:'';position:absolute;top:.16rem;left:.16rem;width:1.12rem;height:1.12rem;
	border-radius:50%;background:#fff;transition:transform .15s ease;
}
#md_clock_root .mdk-sw.on{background:var(--mdk-accent)}
#md_clock_root .mdk-sw.on::after{transform:translateX(1.15rem)}
#md_clock_root .mdk-del{
	appearance:none;border:0;background:transparent;color:#b91c1c;cursor:pointer;padding:.3rem;
}
#md_clock_root .mdk-card{
	border:1px solid var(--mdk-line);background:var(--mdk-card);border-radius:1rem;padding:1rem;
	display:flex;flex-direction:column;gap:.75rem;max-width:32rem;width:100%;margin:0 auto;
}
#md_clock_root .mdk-field{display:flex;flex-direction:column;gap:.28rem}
#md_clock_root .mdk-field label{font-size:.72rem;font-weight:700;color:var(--mdk-muted)}
#md_clock_root .mdk-when-row{display:flex;gap:.4rem;align-items:center}
#md_clock_root .mdk-icon-round{
	appearance:none;width:2.6rem;height:2.6rem;border-radius:999px;align-self:center;
	border:1px solid var(--mdk-line);background:var(--mdk-page);color:var(--mdk-ink);cursor:pointer;
}
#md_clock_root .mdk-convert-out{text-align:center;padding:.4rem 0 .1rem}
#md_clock_root .mdk-cv-from{font-size:.86rem;color:var(--mdk-muted)}
#md_clock_root .mdk-cv-to{font-size:1.55rem;font-weight:800;margin:.15rem 0}
#md_clock_root .mdk-cv-diff{font-size:.8rem;color:var(--mdk-muted)}
#md_clock_root .mdk-ringing{
	position:absolute;inset:0;z-index:30;background:rgba(11,18,36,.72);
	display:flex;align-items:center;justify-content:center;padding:1rem;
}
#md_clock_root .mdk-ring-card{
	background:var(--mdk-card);color:var(--mdk-ink);border-radius:1.2rem;padding:1.3rem 1.2rem 1.1rem;
	width:min(22rem,100%);text-align:center;box-shadow:0 24px 50px rgba(0,0,0,.35);
}
#md_clock_root .mdk-ring-ico{font-size:2rem;color:var(--mdk-accent);margin-bottom:.4rem;animation:mdk-pulse 1s ease-in-out infinite}
#md_clock_root .mdk-ring-card strong{display:block;font-size:1.2rem}
#md_clock_root .mdk-ring-card p{color:var(--mdk-muted);margin:.25rem 0 .8rem}
#md_clock_root .mdk-toast{
	position:absolute;left:50%;bottom:.85rem;transform:translateX(-50%);
	background:var(--mdk-ink);color:#fff;border-radius:999px;padding:.45rem .9rem;
	font-size:.8rem;font-weight:700;z-index:40;white-space:nowrap;
}
@keyframes mdk-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (max-width:640px){
	#md_clock_root{min-height:0}
	#md_clock_root .mdk-tab span{display:none}
	#md_clock_root .mdk-tab{width:2.55rem;justify-content:center;padding:.48rem 0}
	#md_clock_root .mdk-alarm-form{grid-template-columns:1fr; }
	#md_clock_root .mdk-watch-wrap{width:min(16.5rem,78vw)}
}
body.ap-kind-clock #ap_workspace{
	display:flex;flex-direction:column;overflow:hidden;
	padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));
}
body.ap-kind-clock #md_clock_root{flex:1;min-height:0;height:auto}
body.ap-kind-clock #ap_workspace .mdp-section.mdp-app,
body.ap-kind-clock #mdp_app_root,
body.ap-kind-clock #mdp_app_workspace{height:100%;min-height:0}