*{margin:0;padding:0;box-sizing:border-box}:root{--bg-color: #f5f5f5;--text-color: #333;--clock-bg: #ffffff;--clock-border: #333;--hand-color: #333;--second-hand-color: #e74c3c;--tick-color: #333;--panel-bg: #ffffff;--panel-border: #ddd;--btn-bg: #4a90d9;--btn-color: #fff;--btn-hover: #357abd;--display-bg: #f0f0f0;--display-color: #333;--input-bg: #fff;--input-border: #ccc}[data-theme=dark]{--bg-color: #1a1a2e;--text-color: #eee;--clock-bg: #16213e;--clock-border: #eee;--hand-color: #eee;--second-hand-color: #ff6b6b;--tick-color: #eee;--panel-bg: #16213e;--panel-border: #333;--btn-bg: #4a90d9;--btn-color: #fff;--btn-hover: #5aa0e9;--display-bg: #0f3460;--display-color: #eee;--input-bg: #0f3460;--input-border: #444}html{overflow-x:hidden}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--text-color);min-height:100vh;min-height:-webkit-fill-available;display:flex;justify-content:center;align-items:flex-start;padding:20px;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom,20px);transition:background-color .3s,color .3s;overflow-x:hidden}#app{width:100%;max-width:90vw;display:flex;flex-direction:column;align-items:center;padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top,0px)}header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:8px}header h1{font-size:1.5rem;font-weight:600;flex:1;text-align:left;padding-left:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control-btn{background:var(--btn-bg);color:var(--btn-color);border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:1rem;transition:background-color .2s;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.control-btn:hover{background:var(--btn-hover)}.control-btn:active{transform:scale(.95)}#clock-canvas{border-radius:50%;box-shadow:0 4px 20px #00000026;max-width:100%;height:auto!important}.info-text{margin-top:15px;font-size:.9rem;color:var(--text-color);opacity:.7;text-align:center;word-break:break-word}#tab-nav{display:flex;gap:6px;margin-top:25px;width:100%;justify-content:center}.tab-btn{background:var(--panel-bg);color:var(--text-color);border:1px solid var(--panel-border);padding:10px 18px;border-radius:8px;cursor:pointer;font-size:.95rem;transition:all .2s;flex:1;max-width:100px;min-height:44px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap}.tab-btn.active{background:var(--btn-bg);color:var(--btn-color);border-color:var(--btn-bg)}.tab-btn:hover:not(.active){background:var(--display-bg)}.tab-btn:active{transform:scale(.95)}.panel{display:none;width:100%;margin-top:20px;padding:20px;background:var(--panel-bg);border-radius:12px;border:1px solid var(--panel-border);transition:background .3s,border-color .3s}.panel.active{display:block}.digital-display{font-size:2.5rem;font-family:Courier New,monospace;text-align:center;padding:20px;background:var(--display-bg);border-radius:10px;margin-bottom:20px;color:var(--display-color);letter-spacing:2px;word-break:break-all}.digital-datetime{font-size:1.1rem;font-family:Courier New,monospace;text-align:center;padding:10px;margin-bottom:10px;color:var(--display-color);opacity:.8;letter-spacing:1px}.btn-group{display:flex;gap:10px;justify-content:center;margin-bottom:15px;flex-wrap:wrap}.action-btn{background:var(--btn-bg);color:var(--btn-color);border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:1rem;transition:background-color .2s;min-width:80px;min-height:44px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.action-btn:hover{background:var(--btn-hover)}.action-btn:active{transform:scale(.95)}.action-btn:disabled{opacity:.5;cursor:not-allowed}.countdown-inputs{display:flex;justify-content:center;gap:15px;margin-bottom:20px}.input-group{display:flex;flex-direction:column;align-items:center;gap:5px}.input-group label{font-size:.85rem;opacity:.8}.input-group input{width:70px;padding:10px;text-align:center;font-size:1.2rem;border:1px solid var(--input-border);border-radius:8px;background:var(--input-bg);color:var(--text-color);min-height:44px;-webkit-appearance:none;-moz-appearance:textfield}.input-group input::-webkit-inner-spin-button,.input-group input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.data-list{max-height:200px;overflow-y:auto;margin-top:10px;-webkit-overflow-scrolling:touch}.data-list-item{padding:8px 12px;border-bottom:1px solid var(--panel-border);font-family:Courier New,monospace;font-size:.9rem}.data-list-item:last-child{border-bottom:none}.timezone-list{display:flex;flex-direction:column;gap:10px}.timezone-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:var(--display-bg);border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}.timezone-item:hover{transform:translateY(-2px);box-shadow:0 2px 8px #0000001a}.timezone-item:active{transform:scale(.98)}.timezone-item.active{border:2px solid var(--btn-bg)}.timezone-name{font-weight:500}.timezone-offset{font-size:.85rem;opacity:.7}.timezone-time{font-family:Courier New,monospace;font-size:1.1rem;flex-shrink:0;margin-left:10px}.panel-content p{text-align:center;opacity:.7}.size-control{display:flex;justify-content:center;padding:15px 0}.size-control input[type=range]{width:100%;max-width:200px;height:6px;cursor:pointer;-webkit-appearance:none;appearance:none;background:#aaa;border-radius:3px;outline:none}[data-theme=dark] .size-control input[type=range]{background:#555}.size-control input[type=range]::-webkit-slider-runnable-track{height:6px;background:#aaa;border-radius:3px}[data-theme=dark] .size-control input[type=range]::-webkit-slider-runnable-track{background:#555}.size-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#4a90d9;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0000004d}.size-control input[type=range]::-moz-range-track{height:6px;background:#aaa;border-radius:3px;border:none}[data-theme=dark] .size-control input[type=range]::-moz-range-track{background:#555}.size-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4a90d9;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px #0000004d}@media (max-width: 600px){body{padding:10px;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom,10px)}#app{max-width:100%}header{margin-bottom:12px}header h1{font-size:1.2rem}.control-btn{padding:8px 10px;font-size:.9rem;min-width:40px}#tab-nav{margin-top:15px;gap:4px}.tab-btn{padding:10px 8px;font-size:.82rem;max-width:none}.panel{margin-top:12px;padding:15px 12px}.digital-display{font-size:2rem;padding:15px 10px;letter-spacing:1px}.btn-group{gap:8px}.action-btn{padding:10px 14px;min-width:70px;font-size:.9rem}.countdown-inputs{gap:10px}.input-group input{width:60px;padding:8px;font-size:1.1rem}.timezone-item{padding:10px 12px}.timezone-name{font-size:.9rem}.timezone-time{font-size:1rem}}@media (max-width: 375px){body{padding:8px;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom,8px)}header h1{font-size:1.05rem}.control-btn{padding:6px 8px;font-size:.85rem;min-width:36px;min-height:40px}.tab-btn{padding:8px 4px;font-size:.78rem;min-height:40px}.digital-display{font-size:1.6rem;padding:12px 8px}.action-btn{padding:8px 10px;min-width:60px;font-size:.85rem;min-height:40px}.countdown-inputs{gap:6px}.input-group input{width:52px;padding:6px;font-size:1rem}.input-group label{font-size:.78rem}.timezone-item{padding:8px 10px;flex-direction:column;align-items:flex-start;gap:4px}.timezone-time{margin-left:0;align-self:flex-end;font-size:.95rem}}@media (max-height: 500px) and (orientation: landscape){body{padding:8px 15px}header{margin-bottom:8px}header h1{font-size:1rem}#tab-nav{margin-top:8px}.panel{margin-top:8px;padding:10px}.digital-display{font-size:1.5rem;padding:10px;margin-bottom:10px}}.clock-only-hint{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 18px;border-radius:20px;font-size:.85rem;pointer-events:none;z-index:999;animation:clockOnlyHintFadeIn .3s ease,clockOnlyHintFadeOut .5s ease 2.5s forwards}@keyframes clockOnlyHintFadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes clockOnlyHintFadeOut{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(10px)}}@media (hover: none) and (pointer: coarse){.timezone-item:hover{transform:none;box-shadow:none}.control-btn:hover,.action-btn:hover{background:var(--btn-bg)}}