/* Clock 1 (dark/light) — restored segment geometry */
.dgc-clock-main{border-radius:5px;margin:15px 0}
.dgc-clock-main .display{text-align:center;padding:40px 20px 20px;border-radius:6px;position:relative;height:110px}
.dgc-clock-main.light{background-color:#f3f3f3;color:#272e38}
.dgc-clock-main.light .display{background-color:#ddd;box-shadow:0 1px 1px rgba(0,0,0,.08) inset,0 1px 1px #fafafa}
.dgc-clock-main.light .digits div span{background-color:transparent;border-color:#272e38}
.dgc-clock-main.dark{background-color:#272e38;color:#cacaca}
.dgc-clock-main.dark .display{background-color:#0f1620;box-shadow:0 1px 1px rgba(0,0,0,.08) inset,0 1px 1px #2d3642}
.dgc-clock-main.dark .digits div span{background-color:transparent;border-color:#cacaca}
.dgc-clock-main .digits{white-space:nowrap;font-size:0;line-height:0}
.dgc-clock-main .digits div{text-align:left;position:relative;width:28px;height:54px;display:inline-block;margin:0 4px}
.dgc-clock-main .digits div span{opacity:0;position:absolute;transition:.25s;background-color:transparent;border:2px solid;box-sizing:border-box;border-radius:4px}
.dgc-clock-main .digits div span.d1,.dgc-clock-main .digits div span.d2,.dgc-clock-main .digits div span.d3{height:6px;width:16px}
.dgc-clock-main .digits div span.d4,.dgc-clock-main .digits div span.d5,.dgc-clock-main .digits div span.d6,.dgc-clock-main .digits div span.d7{height:22px;width:6px}
.dgc-clock-main .digits div span.d1{top:0;left:6px}
.dgc-clock-main .digits div span.d2{top:50%;left:6px;margin-top:-3px}
.dgc-clock-main .digits div span.d3{bottom:0;left:6px}
.dgc-clock-main .digits div span.d4{top:5px;left:0}
.dgc-clock-main .digits div span.d5{top:5px;right:0}
.dgc-clock-main .digits div span.d6{bottom:5px;left:0}
.dgc-clock-main .digits div span.d7{bottom:5px;right:0}
.dgc-clock-main .digits div.dots{width:10px}
.dgc-clock-main .digits div.dots::before,.dgc-clock-main .digits div.dots::after{content:'';position:absolute;left:2px;width:6px;height:6px;border-radius:50%;background:currentColor}
.dgc-clock-main .digits div.dots::before{top:12px}.dgc-clock-main .digits div.dots::after{bottom:12px}
.dgc-clock-main .digits div.one .d5,.dgc-clock-main .digits div.one .d7,.dgc-clock-main .digits div.two .d1,.dgc-clock-main .digits div.two .d5,.dgc-clock-main .digits div.two .d2,.dgc-clock-main .digits div.two .d6,.dgc-clock-main .digits div.two .d3,.dgc-clock-main .digits div.three .d1,.dgc-clock-main .digits div.three .d5,.dgc-clock-main .digits div.three .d2,.dgc-clock-main .digits div.three .d7,.dgc-clock-main .digits div.three .d3,.dgc-clock-main .digits div.four .d5,.dgc-clock-main .digits div.four .d2,.dgc-clock-main .digits div.four .d4,.dgc-clock-main .digits div.four .d7,.dgc-clock-main .digits div.five .d1,.dgc-clock-main .digits div.five .d2,.dgc-clock-main .digits div.five .d4,.dgc-clock-main .digits div.five .d3,.dgc-clock-main .digits div.five .d7,.dgc-clock-main .digits div.six .d1,.dgc-clock-main .digits div.six .d2,.dgc-clock-main .digits div.six .d4,.dgc-clock-main .digits div.six .d3,.dgc-clock-main .digits div.six .d6,.dgc-clock-main .digits div.six .d7,.dgc-clock-main .digits div.seven .d1,.dgc-clock-main .digits div.seven .d5,.dgc-clock-main .digits div.seven .d7,.dgc-clock-main .digits div.eight .d1,.dgc-clock-main .digits div.eight .d2,.dgc-clock-main .digits div.eight .d3,.dgc-clock-main .digits div.eight .d4,.dgc-clock-main .digits div.eight .d5,.dgc-clock-main .digits div.eight .d6,.dgc-clock-main .digits div.eight .d7,.dgc-clock-main .digits div.nine .d1,.dgc-clock-main .digits div.nine .d2,.dgc-clock-main .digits div.nine .d3,.dgc-clock-main .digits div.nine .d4,.dgc-clock-main .digits div.nine .d5,.dgc-clock-main .digits div.nine .d7,.dgc-clock-main .digits div.zero .d1,.dgc-clock-main .digits div.zero .d3,.dgc-clock-main .digits div.zero .d4,.dgc-clock-main .digits div.zero .d5,.dgc-clock-main .digits div.zero .d6,.dgc-clock-main .digits div.zero .d7{opacity:1}
.dgc-clock-main .weekdays{font-size:12px;position:absolute;width:100%;top:10px;left:0;text-align:center}
.dgc-clock-main .weekdays span{opacity:.2;padding:0 7px}
.dgc-clock-main .weekdays span.active{opacity:1}
.dgc-clock-main .ampm{position:absolute;bottom:33px;right:4px;font-size:11px}
/* Clock 2 */
@font-face{font-family:"BebasNeueRegular";src:url("../fonts/BebasNeue-webfont.eot");src:url("../fonts/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/BebasNeue-webfont.woff") format("woff"),url("../fonts/BebasNeue-webfont.ttf") format("truetype"),url("../fonts/BebasNeue-webfont.svg#BebasNeueRegular") format("svg")}
.dgc-clock2{margin:0 auto;padding:10px;color:#fff;background:#202020;font:bold 12px Arial,Helvetica,sans-serif;border-radius:6px}
.dgc-clock2 .dt{font-size:17px;text-align:center}
.dgc-clock2 ul{margin:0 auto -10px;padding:0;list-style:none;text-align:center}
.dgc-clock2 ul li{display:inline;font-size:4.2em;font-family:"BebasNeueRegular",Arial,Helvetica,sans-serif}
.dgc-clock2 .pt{position:relative;animation:dgcblink 1s ease infinite;padding:0 3px}
@keyframes dgcblink{0%,100%{opacity:1;text-shadow:0 0 20px #00c6ff}50%{opacity:0;text-shadow:none}}
/* C4 Neon Glow */
.dgc-neon{background:radial-gradient(120% 140% at 50% 0%,#1b1040 0%,#070312 60%,#000 100%);border:1px solid #7c3aed55;border-radius:18px;padding:26px 10px;text-align:center;color:#fff;box-shadow:0 0 40px #7c3aed55,inset 0 0 30px #000}
.dgc-neon-time{font:700 clamp(2.4rem,6vw,3.6rem)/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.05em;text-shadow:0 0 8px #22d3ee,0 0 24px #a78bfa,0 0 60px #7c3aed}
.dgc-blink{animation:dgcblink 1s steps(1) infinite;color:#22d3ee}
.dgc-neon-date{margin-top:8px;opacity:.75;letter-spacing:.25em;text-transform:uppercase;font-size:.75rem}
/* C5 Flip Cards */
.dgc-flip{display:flex;gap:8px;justify-content:center;align-items:center;background:#0f172a;border-radius:18px;padding:22px 12px;color:#fff}
.dgc-flip-box{background:linear-gradient(#1e293b,#020617);border-radius:12px;min-width:84px;padding:12px 8px;text-align:center;color:inherit;box-shadow:inset 0 1px 0 #ffffff22,0 8px 20px #0008}
.dgc-flip-box span{font:800 2.2rem/1 system-ui;display:block}
.dgc-flip-box label{font-size:.62rem;letter-spacing:.3em;opacity:.6}
.dgc-flip-box.accent{background:linear-gradient(#7c3aed,#4c1d95);color:#fff}
.dgc-flip-dot{font-size:2rem;color:#a78bfa;animation:dgcblink 1s steps(1) infinite}
/* C6 Minimal Air */
.dgc-min{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:28px;text-align:center;box-shadow:0 20px 40px -20px #0002;color:#111827}
.dgc-min-time{font:200 clamp(2.6rem,7vw,4rem)/1 system-ui;letter-spacing:.02em}
.dgc-min-time span:last-child{font-size:1rem;font-weight:600;color:#7c3aed;vertical-align:super;margin-left:6px}
.dgc-min-date{margin-top:6px;color:inherit;opacity:.6;letter-spacing:.15em;text-transform:uppercase;font-size:.75rem}
/* C7 Gradient Ring */
.dgc-ring{position:relative;width:230px;margin:0 auto;text-align:center;background:#020617;border-radius:24px;padding:22px;color:#fff}
.dgc-ring svg{width:190px;transform:rotate(-90deg)}
.dgc-ring-bg{fill:none;stroke:#1e293b;stroke-width:10}
.dgc-ring-fg{fill:none;stroke:#22d3ee;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.7;transition:stroke-dashoffset .5s}
.dgc-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.dgc-ring-in span{font:800 1.9rem/1 system-ui}
.dgc-ring-in small{opacity:.6;letter-spacing:.2em}
/* C8 Retro LED */
.dgc-led{background:#120b02;border:6px solid #3f2a12;border-radius:14px;padding:26px 12px;text-align:center;box-shadow:inset 0 0 40px #000}
.dgc-led span{font:700 clamp(2rem,6vw,3rem)/1 "Courier New",monospace;color:#ffb000;text-shadow:0 0 6px #ff8c00,0 0 22px #ff8c00;letter-spacing:.08em}
.dgc-led small{display:block;opacity:.6;letter-spacing:.3em;margin-top:8px;font-family:monospace;color:inherit}
/* C9 Outline Max (screenshot look — big hollow digits) */
.dgc-oline{background:#0f1620;border-radius:8px;margin:15px 0;color:#e5e7eb}
.dgc-oline .display{text-align:center;padding:34px 16px 18px;position:relative}
.dgc-oline .digits{white-space:nowrap;font-size:0;line-height:0}
.dgc-oline .digits div{text-align:left;position:relative;width:26px;height:56px;display:inline-block;margin:0 3px;transform:skewX(-6deg)}
.dgc-oline .digits div span{opacity:0;position:absolute;transition:.25s;background-color:#e5e7eb;border:none;border-radius:0;box-shadow:none}
.dgc-oline .digits div span.d1,.dgc-oline .digits div span.d2,.dgc-oline .digits div span.d3{height:5px;width:16px;clip-path:polygon(3px 0,13px 0,16px 2.5px,13px 5px,3px 5px,0 2.5px)}
.dgc-oline .digits div span.d4,.dgc-oline .digits div span.d5,.dgc-oline .digits div span.d6,.dgc-oline .digits div span.d7{height:20px;width:5px;clip-path:polygon(0 3px,2.5px 0,5px 3px,5px 17px,2.5px 20px,0 17px)}
.dgc-oline .digits div span.d1{top:0;left:5px}
.dgc-oline .digits div span.d2{top:50%;left:5px;margin-top:-3px}
.dgc-oline .digits div span.d3{bottom:0;left:5px}
.dgc-oline .digits div span.d4{top:4px;left:0}
.dgc-oline .digits div span.d5{top:4px;right:0}
.dgc-oline .digits div span.d6{bottom:4px;left:0}
.dgc-oline .digits div span.d7{bottom:4px;right:0}
.dgc-oline .digits div.dots{width:10px}
.dgc-oline .digits div.dots::before,.dgc-oline .digits div.dots::after{content:'';position:absolute;left:2px;width:6px;height:6px;border-radius:50%;background:#e5e7eb}
.dgc-oline .digits div.dots::before{top:14px}.dgc-oline .digits div.dots::after{bottom:14px}
.dgc-oline .digits div.one .d5,.dgc-oline .digits div.one .d7,.dgc-oline .digits div.two .d1,.dgc-oline .digits div.two .d5,.dgc-oline .digits div.two .d2,.dgc-oline .digits div.two .d6,.dgc-oline .digits div.two .d3,.dgc-oline .digits div.three .d1,.dgc-oline .digits div.three .d5,.dgc-oline .digits div.three .d2,.dgc-oline .digits div.three .d7,.dgc-oline .digits div.three .d3,.dgc-oline .digits div.four .d5,.dgc-oline .digits div.four .d2,.dgc-oline .digits div.four .d4,.dgc-oline .digits div.four .d7,.dgc-oline .digits div.five .d1,.dgc-oline .digits div.five .d2,.dgc-oline .digits div.five .d4,.dgc-oline .digits div.five .d3,.dgc-oline .digits div.five .d7,.dgc-oline .digits div.six .d1,.dgc-oline .digits div.six .d2,.dgc-oline .digits div.six .d4,.dgc-oline .digits div.six .d3,.dgc-oline .digits div.six .d6,.dgc-oline .digits div.six .d7,.dgc-oline .digits div.seven .d1,.dgc-oline .digits div.seven .d5,.dgc-oline .digits div.seven .d7,.dgc-oline .digits div.eight .d1,.dgc-oline .digits div.eight .d2,.dgc-oline .digits div.eight .d3,.dgc-oline .digits div.eight .d4,.dgc-oline .digits div.eight .d5,.dgc-oline .digits div.eight .d6,.dgc-oline .digits div.eight .d7,.dgc-oline .digits div.nine .d1,.dgc-oline .digits div.nine .d2,.dgc-oline .digits div.nine .d3,.dgc-oline .digits div.nine .d4,.dgc-oline .digits div.nine .d5,.dgc-oline .digits div.nine .d7,.dgc-oline .digits div.zero .d1,.dgc-oline .digits div.zero .d3,.dgc-oline .digits div.zero .d4,.dgc-oline .digits div.zero .d5,.dgc-oline .digits div.zero .d6,.dgc-oline .digits div.zero .d7{opacity:1}
.dgc-oline .weekdays{font-size:11px;position:absolute;width:100%;top:10px;left:0;text-align:center}
.dgc-oline .weekdays span{opacity:.2;padding:0 5px}
.dgc-oline .weekdays span.active{opacity:1}
.dgc-oline .ampm{position:absolute;bottom:30px;right:8px;font-size:11px}
/* C10–C20 shared base */
.dgc-x{margin:15px 0;border-radius:16px;padding:22px 12px;text-align:center;white-space:nowrap;overflow:hidden}
.dgc-x .t{font-size:2.4rem;line-height:1.1;letter-spacing:.04em}
.dgc-x .ap{font-size:.85rem;font-weight:700;margin-left:8px;vertical-align:super}
.dgc-x .d{display:block;margin-top:6px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
/* C10 Aurora Glass */
.dgc-c10{background:linear-gradient(135deg,#0ea5e933,#8b5cf633),rgba(15,23,42,.85);backdrop-filter:blur(8px);border:1px solid #ffffff2e;color:#e0f2fe;box-shadow:0 12px 32px -12px #0ea5e988}
.dgc-c10 .t{font-weight:200;font-family:system-ui}
/* C11 Sunset Glow */
.dgc-c11{background:linear-gradient(135deg,#431407,#9a3412 60%,#ea580c);color:#ffedd5}
.dgc-c11 .t{font-weight:800;font-family:Georgia,serif}
/* C12 Typewriter Paper */
.dgc-c12{background:#f5f0e6;border:1px solid #d6cdb8;color:#33302a;box-shadow:inset 0 0 24px #00000014}
.dgc-c12 .t{font-family:"Courier New",monospace;font-weight:700}
/* C13 Ocean Depth */
.dgc-c13{background:linear-gradient(#082f49,#0c4a6e 60%,#0369a1);border-top:4px solid #22d3ee;color:#e0f2fe}
.dgc-c13 .t{font-weight:600;font-family:Verdana,sans-serif}
/* C14 Golden Royal */
.dgc-c14{background:#0a0a0a;border:2px solid #ca8a04;color:#facc15}
.dgc-c14 .t{font-family:"Times New Roman",serif;font-weight:700;letter-spacing:.1em}
.dgc-c14 .ap{color:#fef3c7}
/* C15 Hacker Terminal */
.dgc-c15{background:#000;border-radius:8px;border:1px solid #16a34a;color:#4ade80;text-align:left;padding:18px 16px}
.dgc-c15 .t{font-family:"Courier New",monospace;font-weight:700}
.dgc-c15 .t::before{content:'> '}
.dgc-c15 .t::after{content:'_';animation:dgcblink 1s steps(1) infinite}
/* C16 Candy Pop */
.dgc-c16{background:linear-gradient(135deg,#f9a8d4,#f472b6 55%,#ec4899);border-radius:24px;color:#fff;box-shadow:0 12px 28px -12px #ec4899cc}
.dgc-c16 .t{font-weight:800;font-family:"Trebuchet MS",sans-serif}
/* C17 Arctic Frost */
.dgc-c17{background:linear-gradient(#f0f9ff,#e0f2fe);border:1px solid #bae6fd;color:#0c4a6e}
.dgc-c17 .t{font-weight:200;font-family:system-ui;letter-spacing:.12em}
/* C18 Wine Classic */
.dgc-c18{background:linear-gradient(#450a0a,#7f1d1d 65%,#991b1b);border:1px solid #fca5a566;color:#fee2e2}
.dgc-c18 .t{font-family:Georgia,serif;font-style:italic}
/* C19 Forest Pine */
.dgc-c19{background:linear-gradient(#052e16,#14532d 65%,#166534);border-left:6px solid #4ade80;color:#dcfce7}
.dgc-c19 .t{font-family:Verdana,sans-serif;font-weight:700}
/* C20 Rainbow Flow */
.dgc-c20{background:#111827}
.dgc-c20 .t{font-weight:800;font-family:system-ui;background:linear-gradient(90deg,#f87171,#fbbf24,#34d399,#60a5fa,#a78bfa,#f87171);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:dgcflow 6s linear infinite}
@keyframes dgcflow{to{background-position:300% 0}}